diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index a21044ed3..9a3c282df 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -13,6 +13,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/next-js": "^2.1.5",
     "@chakra-ui/react": "^2.8.0",
     "@choc-ui/chakra-autocomplete": "^5.2.8",
diff --git a/apps/frontend/src/components/nav-menu.jsx b/apps/frontend/src/components/nav-menu.jsx
index 32abd8818..a6d233d9d 100644
--- a/apps/frontend/src/components/nav-menu.jsx
+++ b/apps/frontend/src/components/nav-menu.jsx
@@ -32,6 +32,7 @@ import { signOut } from "next-auth/react";
 import NextLink from "next/link";
 
 import { isEditor } from "@/lib/current-user";
+import PostSearch from "./search-component";
 
 const Icon = chakra(FontAwesomeIcon);
 
@@ -79,7 +80,7 @@ const NavMenuContent = ({ user, onClose, ...rest }) => {
             mx="20px"
             textAlign="center"
             fontWeight="700"
-            fontSize="20px"
+            fontSize="16px"
             display="flex"
             alignItems="center"
           >
@@ -92,6 +93,7 @@ const NavMenuContent = ({ user, onClose, ...rest }) => {
             />
             freeCodeCamp.org
           </Box>
+          <PostSearch user={user} />
           <CloseButton
             onClick={onClose}
             display={{ base: "flex", md: "none" }}
diff --git a/apps/frontend/src/components/search-component.jsx b/apps/frontend/src/components/search-component.jsx
new file mode 100644
index 000000000..bacdbb770
--- /dev/null
+++ b/apps/frontend/src/components/search-component.jsx
@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import {
+  IconButton,
+  Modal,
+  ModalContent,
+  ModalOverlay,
+  Input,
+  useDisclosure,
+  InputGroup,
+  InputLeftElement,
+  Text,
+  Card,
+  CardBody,
+} from "@chakra-ui/react";
+import { SearchIcon } from "@chakra-ui/icons";
+import { getAllPosts } from "@/lib/posts";
+import { isEditor } from "@/lib/current-user";
+import NextLink from "next/link";
+
+const PostSearch = ({ user }) => {
+  const [posts, setPosts] = useState([]);
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const search = async (query) => {
+    const result = await getAllPosts(user.jwt, {
+      publicationState: "preview",
+      fields: ["title", "id"],
+      populate: ["author"],
+      filters: {
+        title: {
+          $containsi: query,
+        },
+        // only show posts of that user if they are not an editor
+        ...(isEditor(user) ? {} : { author: { id: { $eq: user.id } } }),
+      },
+      pagination: {
+        pageSize: 5,
+      },
+    });
+
+    setPosts(result.data);
+  };
+
+  return (
+    <>
+      <IconButton onClick={onOpen} variant={"ghost"}>
+        <SearchIcon />
+      </IconButton>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <InputGroup>
+            <InputLeftElement pointerEvents={"none"} className="InputLeft">
+              <SearchIcon color={"gray.300"} />
+            </InputLeftElement>
+            <Input
+              type="text"
+              placeholder="Search"
+              onChange={(query) => search(query.target.value)}
+              size="lg"
+            />
+          </InputGroup>
+          {posts.map((post) => (
+            <Card as={NextLink} href={`/posts/${post.id}`} key={post.id}>
+              <CardBody>
+                <Text>{post.attributes.title}</Text>
+              </CardBody>
+            </Card>
+          ))}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default PostSearch;
diff --git a/apps/frontend/src/styles/globals.css b/apps/frontend/src/styles/globals.css
index cc8802510..b7f1aac96 100644
--- a/apps/frontend/src/styles/globals.css
+++ b/apps/frontend/src/styles/globals.css
@@ -52,3 +52,8 @@
   width: 40%;
   height: 40%;
 }
+
+.InputLeft {
+  top: 3px !important;
+  left: 3px !important;
+}
diff --git a/package-lock.json b/package-lock.json
index cc4e26fa4..2d1d14d23 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,6 +63,7 @@
     "apps/frontend": {
       "version": "0.1.0",
       "dependencies": {
+        "@chakra-ui/icons": "^2.1.1",
         "@chakra-ui/next-js": "^2.1.5",
         "@chakra-ui/react": "^2.8.0",
         "@choc-ui/chakra-autocomplete": "^5.2.8",
@@ -1038,6 +1039,18 @@
         "react": ">=18"
       }
     },
+    "node_modules/@chakra-ui/icons": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.1.1.tgz",
+      "integrity": "sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==",
+      "dependencies": {
+        "@chakra-ui/icon": "3.2.0"
+      },
+      "peerDependencies": {
+        "@chakra-ui/system": ">=2.0.0",
+        "react": ">=18"
+      }
+    },
     "node_modules/@chakra-ui/image": {
       "version": "2.1.0",
       "license": "MIT",