diff --git a/package-lock.json b/package-lock.json
index 8b28d20..b2ec6e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "14.0.2",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "react-icons": "^4.12.0"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -3430,6 +3431,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
+      "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 62c0277..4e335d9 100644
--- a/package.json
+++ b/package.json
@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.0.2",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.0.2"
+    "react-icons": "^4.12.0"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.2",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.2"
+    "typescript": "^5"
   }
 }
diff --git a/src/components/authLinks/AuthLinks.jsx b/src/components/authLinks/AuthLinks.jsx
new file mode 100644
index 0000000..9f55556
--- /dev/null
+++ b/src/components/authLinks/AuthLinks.jsx
@@ -0,0 +1,7 @@
+import styles from "./authLinks.module.css";
+
+const AuthLinks = () => {
+  return <div className={styles.container}>AuthLinks</div>;
+};
+
+export default AuthLinks;
diff --git a/src/components/authLinks/authLinks.module.css b/src/components/authLinks/authLinks.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/cardList/CardList.jsx b/src/components/cardList/CardList.jsx
index 0e4019c..5a7ad0e 100644
--- a/src/components/cardList/CardList.jsx
+++ b/src/components/cardList/CardList.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import styles from "./cardList.module.css";
 import Pagination from "@/components/pagination/Pagination";
 
-export const CardList = () => {
+const CardList = () => {
   return (
     <div className={styles.container}>
       <Pagination />
diff --git a/src/components/categoryList/CategoryList.jsx b/src/components/categoryList/CategoryList.jsx
index 11355f3..863f370 100644
--- a/src/components/categoryList/CategoryList.jsx
+++ b/src/components/categoryList/CategoryList.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./categoryList.module.css";
 
-export const CategoryList = () => {
+const CategoryList = () => {
   return <div className={styles.container}>CategoryList</div>;
 };
 
diff --git a/src/components/featured/Featured.jsx b/src/components/featured/Featured.jsx
index 1639e55..9b4f041 100644
--- a/src/components/featured/Featured.jsx
+++ b/src/components/featured/Featured.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./featured.module.css";
 
-export const Featured = () => {
+const Featured = () => {
   return <div className={styles.container}>Featured</div>;
 };
 
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
index e53799f..2eb1aa5 100644
--- a/src/components/footer/Footer.jsx
+++ b/src/components/footer/Footer.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./footer.module.css";
 
-export const Footer = () => {
+const Footer = () => {
   return <div className={styles.container}>Footer</div>;
 };
 
diff --git a/src/components/menu/Menu.jsx b/src/components/menu/Menu.jsx
index 4f5c83f..3782ca4 100644
--- a/src/components/menu/Menu.jsx
+++ b/src/components/menu/Menu.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./menu.module.css";
 
-export const Menu = () => {
+const Menu = () => {
   return <div className={styles.container}>Menu</div>;
 };
 
diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx
index 9f97acd..fae0459 100644
--- a/src/components/navbar/Navbar.jsx
+++ b/src/components/navbar/Navbar.jsx
@@ -1,8 +1,29 @@
 import React from "react";
 import styles from "./navbar.module.css";
+import Link from "next/link";
+import AuthLinks from "@/components/authLinks/AuthLinks";
+import ThemeToggle from "@/components/themeToggle/ThemeToggle";
+import { FaFacebook, FaInstagram, FaTiktok, FaYoutube } from "react-icons/fa";
 
-export const Navbar = () => {
-  return <div className={styles.container}>Navbar</div>;
+const Navbar = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.social}></div>
+
+      <FaFacebook />
+      <FaInstagram />
+      <FaTiktok />
+      <FaYoutube />
+      <div className={styles.logo}>ExampleBlog</div>
+      <div className={styles.links}>
+        <ThemeToggle />
+        <Link href="/">Homepage</Link>
+        <Link href="/">Contact</Link>
+        <Link href="/">About</Link>
+        <AuthLinks />
+      </div>
+    </div>
+  );
 };
 
 export default Navbar;
diff --git a/src/components/pagination/Pagination.jsx b/src/components/pagination/Pagination.jsx
index 66fddfb..1dadded 100644
--- a/src/components/pagination/Pagination.jsx
+++ b/src/components/pagination/Pagination.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./pagination.module.css";
 
-export const Pagination = () => {
+const Pagination = () => {
   return <div className={styles.container}>Pagination</div>;
 };
 
diff --git a/src/components/themeToggle/ThemeToggle.jsx b/src/components/themeToggle/ThemeToggle.jsx
new file mode 100644
index 0000000..0aa7011
--- /dev/null
+++ b/src/components/themeToggle/ThemeToggle.jsx
@@ -0,0 +1,7 @@
+import styles from "./themeToggle.module.css";
+
+const ThemeToggle = () => {
+  return <div className={styles.container}>ThemeToggle</div>;
+};
+
+export default ThemeToggle;
diff --git a/src/components/themeToggle/themeToggle.module.css b/src/components/themeToggle/themeToggle.module.css
new file mode 100644
index 0000000..e69de29