diff --git a/src/App.jsx b/src/App.jsx
index 79a3f4911..2126a6192 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,6 +7,7 @@ import { auth, db } from "./lib/firebase";
 
 import ErrorBoundary from "./reusableComponents/ErrorBoundary";
 import { FaArrowCircleUp } from "react-icons/fa";
+import { FaSearch } from "react-icons/fa";
 import { RowModeContext } from "./hooks/useRowMode";
 import { makeStyles } from "@mui/styles";
 
@@ -77,6 +78,8 @@ 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 navigate = useNavigate();
   const location = useLocation();
@@ -89,6 +92,10 @@ function App() {
     }
   };
 
+  const handleSearch = (e) => {
+    setSearchText(e.target.value);
+  };
+
   const scrollTop = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
@@ -156,6 +163,24 @@ 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}>
@@ -185,48 +210,88 @@ function App() {
               path="/dummygram/"
               element={
                 user ? (
-                  <div className="flex">
+                  <div style={{ display: "flex", justifyContent: "center" }}>
                     <ErrorBoundary inApp={true}>
                       <SideBar />
                     </ErrorBoundary>
                     <div
-                      className="home-posts-container"
-                      style={
-                        !loadingPosts
-                          ? {}
-                          : {
-                              width: "100%",
-                              minHeight: "100vh",
-                              display: "flex",
-                              justifyContent: "center",
-                              alignItems: "center",
-                            }
-                      }
+                      style={{
+                        display: "flex",
+                        justifyContent: "center",
+                        flexDirection: rowMode ? "row" : "column",
+                      }}
                     >
-                      {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}
+                      <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}
                               />
-                            ))}
-                          </ErrorBoundary>
-                        </div>
-                      )}
+                              <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>
                     </div>
                   </div>
                 ) : (
diff --git a/src/components/SearchBar/index.css b/src/components/SearchBar/index.css
deleted file mode 100644
index 23e348ea5..000000000
--- a/src/components/SearchBar/index.css
+++ /dev/null
@@ -1,39 +0,0 @@
-/* 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 9bbcb33f3..ceea75b15 100644
--- a/src/components/SearchBar/index.jsx
+++ b/src/components/SearchBar/index.jsx
@@ -1,5 +1,3 @@
-import "./index.css";
-
 import React, { memo, useEffect, useState } from "react";
 import { auth, db } from "../../lib/firebase";
 
@@ -68,7 +66,10 @@ function SearchBar() {
         currentPostLink={currentPostLink}
         postText={postText}
       />
-      <div className="search-bar" style={{ marginTop: "-150px" }}>
+      <div
+        className="search-bar"
+        style={{ marginTop: "-150px", minWidth: "380px" }}
+      >
         <input
           type="search"
           className="search-input"
diff --git a/src/index.css b/src/index.css
index e07dac5e7..321b4ad23 100644
--- a/src/index.css
+++ b/src/index.css
@@ -66,6 +66,8 @@ body {
 
 /* App styles */
 .app {
+  display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   overflow-x: auto;
@@ -85,23 +87,9 @@ 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: 5.5em 20px 20px 17vw;
+  padding: 4.5em 20px 20px 8vw;
 }
 
 .app_posts_column {
@@ -126,44 +114,12 @@ input:focus {
   transform: scale(1.04);
 }
 
-@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;
-  }
+.home-posts-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-@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;
@@ -245,88 +201,6 @@ 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;
 }
@@ -360,21 +234,6 @@ 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;
@@ -451,7 +310,6 @@ input {
 }
 
 /* login with google or facebook button */
-
 .google-fb-login button {
   font-size: 22px;
   height: 50px;
@@ -564,24 +422,202 @@ input {
   overflow: hidden;
 }
 
-.login__left {
-  overflow-y: scroll;
+.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;
 }
 
+/* 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) {
-  .login__section {
-    height: 100%;
-    overflow: visible;
+  .app__posts {
+    padding-inline: auto;
   }
+}
 
-  .login__left {
-    height: 100%;
-    overflow-y: 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 {
     padding: 0;
   }
+  .app__newpost__button {
+    left: -6%;
+  }
+  .home-posts-container .app_posts_column {
+    padding: 5.5em 15px 1em 15px;
+  }
 }
 
-.post,
-.postColumn {
-  background-color: var(--dark-post-bg);
+/* 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%;
+  }
 }