diff --git a/src/App.jsx b/src/App.jsx
index de60b9e842..4d3fc5b75e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,7 +7,6 @@ import { auth, db } from "./lib/firebase";
 
 import ErrorBoundary from "./reusableComponents/ErrorBoundary";
 import { FaArrowCircleUp } from "react-icons/fa";
-import { FaSearch } from "react-icons/fa";
 import { GuestSignUpBtn } from "./components";
 import { RowModeContext } from "./hooks/useRowMode";
 import { makeStyles } from "@mui/styles";
@@ -79,8 +78,6 @@ function App() {
   const [postText, setPostText] = useState("");
   const [rowMode, setRowMode] = useState(false);
   const [showScroll, setShowScroll] = useState(false);
-  const [searchText, setSearchText] = useState("");
-  const [searchedPosts, setSearchedPosts] = useState([]);
   const [anonymous, setAnonymous] = useState(false);
 
   const navigate = useNavigate();
@@ -94,10 +91,6 @@ function App() {
     }
   };
 
-  const handleSearch = (e) => {
-    setSearchText(e.target.value);
-  };
-
   const scrollTop = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
@@ -166,24 +159,6 @@ function App() {
     setLoadMorePosts(false);
   }, [loadMorePosts]);
 
-  useEffect(() => {
-    const fetchSearchResults = async () => {
-      setSearchedPosts(
-        posts.filter(
-          (post) =>
-            post.post?.displayName
-              ?.toLowerCase()
-              .includes(searchText?.toLowerCase()) ||
-            post.post?.username
-              ?.toLowerCase()
-              .includes(searchText?.toLowerCase())
-        )
-      );
-    };
-
-    fetchSearchResults();
-  }, [searchText, posts.length]);
-
   return (
     <RowModeContext.Provider value={rowMode}>
       <ErrorBoundary inApp={true}>
@@ -216,88 +191,48 @@ function App() {
               path="/dummygram/"
               element={
                 user ? (
-                  <div style={{ display: "flex", justifyContent: "center" }}>
+                  <div className="flex">
                     <ErrorBoundary inApp={true}>
                       <SideBar anonymous={anonymous} />
                     </ErrorBoundary>
                     <div
-                      style={{
-                        display: "flex",
-                        justifyContent: "center",
-                        flexDirection: rowMode ? "row" : "column",
-                      }}
+                      className="home-posts-container"
+                      style={
+                        !loadingPosts
+                          ? {}
+                          : {
+                              width: "100%",
+                              minHeight: "100vh",
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
+                            }
+                      }
                     >
-                      <div
-                        className="home-posts-container"
-                        style={
-                          !loadingPosts
-                            ? {}
-                            : {
-                                width: "100%",
-                                minHeight: "100vh",
-                                display: "flex",
-                                flexDirection: rowMode ? "row" : "column",
-                                justifyContent: "center",
-                                alignItems: "center",
-                              }
-                        }
-                      >
-                        {loadingPosts ? (
-                          <Loader />
-                        ) : (
-                          <div
-                            style={{ display: "flex", flexDirection: "column" }}
-                            className={`${
-                              rowMode ? "app__posts " : "app_posts_column flex"
-                            }`}
-                          >
-                            <div
-                              className="search-bar"
-                              style={{ minWidth: "300px" }}
-                            >
-                              <input
-                                type="search"
-                                className="search-input"
-                                value={searchText}
-                                placeholder="Search Here..."
-                                onChange={handleSearch}
+                      {loadingPosts ? (
+                        <Loader />
+                      ) : (
+                        <div
+                          className={`${
+                            rowMode ? "app__posts" : "app_posts_column flex"
+                          }`}
+                        >
+                          <ErrorBoundary inApp>
+                            {posts.map(({ id, post }) => (
+                              <Post
+                                rowMode={rowMode}
+                                key={id}
+                                postId={id}
+                                user={user}
+                                post={post}
+                                shareModal={setOpenShareModal}
+                                setLink={setCurrentPostLink}
+                                setPostText={setPostText}
                               />
-                              <label className="search-icon">
-                                <FaSearch />
-                              </label>
-                            </div>
-                            <ErrorBoundary inApp={true}>
-                              <div className={rowMode ? "app__posts" : ""}>
-                                {searchText
-                                  ? searchedPosts.map(({ id, post }) => (
-                                      <Post
-                                        rowMode={rowMode}
-                                        key={id}
-                                        postId={id}
-                                        user={user}
-                                        post={post}
-                                        shareModal={setOpenShareModal}
-                                        setLink={setCurrentPostLink}
-                                        setPostText={setPostText}
-                                      />
-                                    ))
-                                  : posts.map(({ id, post }) => (
-                                      <Post
-                                        rowMode={rowMode}
-                                        key={id}
-                                        postId={id}
-                                        user={user}
-                                        post={post}
-                                        shareModal={setOpenShareModal}
-                                        setLink={setCurrentPostLink}
-                                        setPostText={setPostText}
-                                      />
-                                    ))}
-                              </div>
-                            </ErrorBoundary>
-                          </div>
-                        )}
-                      </div>
+                            ))}
+                          </ErrorBoundary>
+                        </div>
+                      )}
                     </div>
                   </div>
                 ) : (
diff --git a/src/components/SearchBar/index.css b/src/components/SearchBar/index.css
new file mode 100644
index 0000000000..23e348ea5e
--- /dev/null
+++ b/src/components/SearchBar/index.css
@@ -0,0 +1,39 @@
+/* search file css */
+.search-bar {
+  position: relative;
+  height: 50px;
+  max-width: 380px;
+  background: #fff;
+  margin: 30px auto;
+  border: 1px solid #0cc;
+  border-radius: 25px;
+}
+.search-input {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: 25px;
+  background: #fff;
+  border: none;
+  font-size: 16px;
+  padding-left: 20px;
+  margin-top: -2px;
+}
+.search-icon {
+  position: absolute;
+  right: 0px;
+  top: 0;
+  width: 54px;
+  background: linear-gradient(40deg, #0cc, #daf1f7);
+  height: 103%;
+  text-align: center;
+  line-height: 50px;
+  color: #fff;
+  font-size: 20px;
+  border-radius: 0 25px 25px 0;
+  margin-top: -2px;
+}
+
+.text-white {
+  color: var(--color);
+}
diff --git a/src/components/SearchBar/index.jsx b/src/components/SearchBar/index.jsx
index ceea75b159..9bbcb33f3e 100644
--- a/src/components/SearchBar/index.jsx
+++ b/src/components/SearchBar/index.jsx
@@ -1,3 +1,5 @@
+import "./index.css";
+
 import React, { memo, useEffect, useState } from "react";
 import { auth, db } from "../../lib/firebase";
 
@@ -66,10 +68,7 @@ function SearchBar() {
         currentPostLink={currentPostLink}
         postText={postText}
       />
-      <div
-        className="search-bar"
-        style={{ marginTop: "-150px", minWidth: "380px" }}
-      >
+      <div className="search-bar" style={{ marginTop: "-150px" }}>
         <input
           type="search"
           className="search-input"
diff --git a/src/index.css b/src/index.css
index 321b4ad231..e07dac5e76 100644
--- a/src/index.css
+++ b/src/index.css
@@ -66,8 +66,6 @@ body {
 
 /* App styles */
 .app {
-  display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
   overflow-x: auto;
@@ -87,9 +85,23 @@ input:focus {
   outline: none;
 }
 
+/* Add media query in navbar for responsiveness */
+@media only screen and (max-width: 460px) {
+  .app__header__img {
+    object-fit: contain;
+    width: 120px;
+  }
+
+  .app__header {
+    font-size: 8px;
+    padding: 10px;
+    width: 100%;
+  }
+}
+
 /* Post style */
 .app__posts {
-  padding: 4.5em 20px 20px 8vw;
+  padding: 5.5em 20px 20px 17vw;
 }
 
 .app_posts_column {
@@ -114,12 +126,44 @@ input:focus {
   transform: scale(1.04);
 }
 
-.home-posts-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+@media only screen and (max-width: 1200px) {
+  .app__posts,
+  .home-posts-container .app_posts_column,
+  .home-posts-container .app_posts {
+    padding: 5.5em 15px 20px 9vw;
+  }
+  .post-page-container {
+    padding: 5.5em 15px 15px 8vw;
+  }
+  .post-card {
+    margin: 50px auto !important;
+  }
+}
+@media only screen and (max-width: 800px) {
+  .app__posts,
+  .home-posts-container .app_posts_column {
+    padding: 5.5em 15px 5.5em 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1em;
+  }
+  .post-page-container {
+    padding: 0;
+    padding-top: 5.5em;
+  }
 }
 
+@media only screen and (max-width: 900px) {
+  .rowConvert {
+    display: none;
+  }
+}
+@media only screen and (max-width: 700px) {
+  .app__posts {
+    padding-inline: auto;
+  }
+}
 .post__img {
   max-width: 100%;
   object-fit: contain;
@@ -201,6 +245,88 @@ input:focus {
   opacity: 1;
 }
 
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 790px) {
+  .scrollTop {
+    margin-left: 20px;
+    margin-bottom: 8%;
+  }
+  .post-page-container {
+    padding: 0;
+  }
+  .app__newpost__button {
+    left: -6%;
+  }
+  .home-posts-container .app_posts_column {
+    padding: 5.5em 15px 5em 15px;
+  }
+}
+
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 600px) {
+  .app__newpost__button {
+    left: -4.8%;
+  }
+}
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+  .sideToTop {
+    left: 19.6%;
+  }
+
+  .app__newpost__button {
+    left: -4.2%;
+  }
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (min-width: 911px) {
+  .sideToTop {
+    left: 19.6%;
+  }
+
+  .app__newpost__button {
+    left: -2.5%;
+  }
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 800px) {
+  .app__posts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    justify-content: center;
+  }
+  .post-page-container {
+    padding: 5.5em 15px 15px 17vw;
+  }
+  .post-card {
+    margin: 50px auto !important;
+  }
+  .scrollTop {
+    left: 40.7%;
+  }
+
+  .sideToTop {
+    left: 19.6%;
+  }
+
+  .app__newpost__button {
+    left: -1.2%;
+  }
+  .home-posts-container .app_posts_column {
+    padding: 5.5em 20px 20px 17vw;
+  }
+}
+
+@media (min-width: 1200px) {
+  .scrollTop {
+    left: 47.7%;
+  }
+}
+
 .darkmode-toggle {
   z-index: 1;
 }
@@ -234,6 +360,21 @@ div#picker {
   width: 0.1px;
 }
 
+::-webkit-scrollbar {
+  border-radius: 0.3rem;
+  width: 0.3rem;
+}
+
+::-webkit-scrollbar-track {
+  background-color: rgb(255, 255, 255);
+  border-radius: 0.8rem;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color);
+  border-radius: 2em;
+}
+
 /* landing animation */
 #logo {
   animation: animate 4s ease forwards;
@@ -310,6 +451,7 @@ input {
 }
 
 /* login with google or facebook button */
+
 .google-fb-login button {
   font-size: 22px;
   height: 50px;
@@ -422,202 +564,24 @@ input {
   overflow: hidden;
 }
 
-.post,
-.postColumn {
-  background-color: var(--dark-post-bg);
-}
-
-/* search file css */
-.search-bar {
-  position: relative;
-  height: 50px;
-  max-width: 380px;
-  background: #fff;
-  margin: 30px auto;
-  border: 1px solid #0cc;
-  border-radius: 25px;
-}
-.search-input {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  border-radius: 25px;
-  background: #fff;
-  border: none;
-  font-size: 16px;
-  padding-left: 20px;
-  margin-top: -2px;
-}
-.search-icon {
-  position: absolute;
-  right: 0px;
-  top: 0;
-  width: 54px;
-  background: linear-gradient(40deg, #0cc, #daf1f7);
-  height: 103%;
-  text-align: center;
-  line-height: 50px;
-  color: #fff;
-  font-size: 20px;
-  border-radius: 0 25px 25px 0;
-  margin-top: -2px;
-}
-
-.text-white {
-  color: var(--color);
-}
-
-/* Styles for Scrollbar */
-::-webkit-scrollbar {
-  border-radius: 0.3rem;
-  width: 0.3rem;
-}
-
-::-webkit-scrollbar-track {
-  background-color: rgb(255, 255, 255);
-  border-radius: 0.8rem;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--color);
-  border-radius: 2em;
+.login__left {
+  overflow-y: scroll;
 }
 
-/* Add media query in navbar for responsiveness */
-@media only screen and (max-width: 460px) {
-  .app__header__img {
-    object-fit: contain;
-    width: 120px;
-  }
-
-  .app__header {
-    font-size: 8px;
-    padding: 10px;
-    width: 100%;
-  }
-}
-
-/* Media Query for posts and post container */
-@media only screen and (max-width: 1200px) {
-  .app__posts,
-  .home-posts-container .app_posts_column,
-  .home-posts-container .app_posts {
-    padding: 1.5em 15px 15px 6vw;
-  }
-  .post-page-container {
-    padding: 5.5em 15px 15px 17vw;
-  }
-  .post-card {
-    margin: 50px auto !important;
-  }
-}
-
-@media only screen and (max-width: 800px) {
-  .app__posts,
-  .home-posts-container .app_posts_column {
-    padding: 3.5em 15px 1em 15px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1em;
-  }
-  .post-page-container {
-    padding: 0;
-    padding-top: 1em;
-  }
-}
-
-@media only screen and (max-width: 912px) {
-  .rowConvert {
-    display: none;
-  }
-}
 @media only screen and (max-width: 700px) {
-  .app__posts {
-    padding-inline: auto;
+  .login__section {
+    height: 100%;
+    overflow: visible;
   }
-}
 
-/* Extra small devices (phones, 600px and down) */
-@media only screen and (max-width: 790px) {
-  .scrollTop {
-    margin-left: 20px;
-    margin-bottom: 8%;
-  }
-  .post-page-container {
+  .login__left {
+    height: 100%;
+    overflow-y: visible;
     padding: 0;
   }
-  .app__newpost__button {
-    left: -6%;
-  }
-  .home-posts-container .app_posts_column {
-    padding: 5.5em 15px 1em 15px;
-  }
-}
-
-/* Small devices (portrait tablets and large phones, 600px and up) */
-@media only screen and (min-width: 600px) {
-  .app__newpost__button {
-    left: -4.8%;
-  }
-}
-
-/* Medium devices (landscape tablets, 768px and up) */
-@media only screen and (min-width: 768px) {
-  .sideToTop {
-    left: 19.6%;
-  }
-
-  .app__newpost__button {
-    left: -4.2%;
-  }
-}
-
-/* Large devices (laptops/desktops, 992px and up) */
-@media only screen and (min-width: 911px) {
-  .sideToTop {
-    left: 19.6%;
-  }
-
-  .app__newpost__button {
-    left: -2.5%;
-  }
 }
 
-/* Extra large devices (large laptops and desktops, 1200px and up) */
-@media only screen and (min-width: 800px) {
-  .app__posts {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 2rem;
-    justify-content: center;
-    padding: 1.5rem 20px 20px 9vw;
-  }
-  /* .post-page-container {
-    padding: 5.5em 15px 15px 8vw;
-  } */
-  .post-card {
-    margin: 50px auto !important;
-  }
-  .scrollTop {
-    left: 40.7%;
-  }
-
-  .sideToTop {
-    left: 19.6%;
-  }
-
-  .app__newpost__button {
-    left: -1.2%;
-  }
-  .home-posts-container .app_posts_column {
-    padding: 5.5em 20px 20px 17vw;
-  }
-}
-
-@media (min-width: 1200px) {
-  .scrollTop {
-    left: 47.7%;
-  }
+.post,
+.postColumn {
+  background-color: var(--dark-post-bg);
 }