diff --git a/next.config.mjs b/next.config.mjs
index 7ef6aac0..4d56ac37 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,7 +2,15 @@
 const nextConfig = {
   experimental: {
     reactCompiler: true,
-    ppr: 'incremental'
+    ppr: "incremental",
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "plus.unsplash.com",
+      },
+    ],
   },
 };
 
diff --git a/package-lock.json b/package-lock.json
index c9cc8cb7..05cf78e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "soci-start",
       "version": "0.1.0",
       "dependencies": {
+        "@clerk/nextjs": "^5.2.6",
         "babel-plugin-react-compiler": "^0.0.0-experimental-938cd9a-20240601",
         "next": "15.0.0-rc.0",
         "react": "19.0.0-rc-f994737d14-20240522",
@@ -95,6 +96,140 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@clerk/backend": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@clerk/backend/-/backend-1.4.1.tgz",
+      "integrity": "sha512-cERP/71pIGZvA7WtJaMCrTf33pu4H6NI89LJXXBcUnMTj8YJy7XAGURKi8jzFTUAeMiQXjV7NESzkEzRWtgCGw==",
+      "dependencies": {
+        "@clerk/shared": "2.4.0",
+        "@clerk/types": "4.9.0",
+        "cookie": "0.5.0",
+        "snakecase-keys": "5.4.4",
+        "tslib": "2.4.1"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      }
+    },
+    "node_modules/@clerk/backend/node_modules/tslib": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+    },
+    "node_modules/@clerk/clerk-react": {
+      "version": "5.2.9",
+      "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-5.2.9.tgz",
+      "integrity": "sha512-OL2MYVH4SX718gFTUukpy/0jHQUSqAaAxO3sp61WcUrt5T/Djczg4tfTCWoW688kWmqVsinU9+PxlOKNLKrUhA==",
+      "dependencies": {
+        "@clerk/shared": "2.4.0",
+        "@clerk/types": "4.9.0",
+        "tslib": "2.4.1"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "peerDependencies": {
+        "react": ">=18 || >=19.0.0-beta",
+        "react-dom": ">=18 || >=19.0.0-beta"
+      }
+    },
+    "node_modules/@clerk/clerk-react/node_modules/tslib": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+    },
+    "node_modules/@clerk/nextjs": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@clerk/nextjs/-/nextjs-5.2.6.tgz",
+      "integrity": "sha512-xfNkAG4nyJc2I0dfTYe7ofbeA/m6dAlElb8awO6oYqVqxvUnXwkXqoJdKQHAjCTfsMJZEaeNWQi3/OPfEqUghQ==",
+      "dependencies": {
+        "@clerk/backend": "1.4.1",
+        "@clerk/clerk-react": "5.2.9",
+        "@clerk/shared": "2.4.0",
+        "@clerk/types": "4.9.0",
+        "crypto-js": "4.2.0",
+        "path-to-regexp": "6.2.2",
+        "server-only": "0.0.1",
+        "tslib": "2.4.1"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "peerDependencies": {
+        "next": "^13.5.4 || ^14.0.3 || >=15.0.0-rc",
+        "react": ">=18 || >=19.0.0-beta",
+        "react-dom": ">=18 || >=19.0.0-beta"
+      }
+    },
+    "node_modules/@clerk/nextjs/node_modules/tslib": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+    },
+    "node_modules/@clerk/shared": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-2.4.0.tgz",
+      "integrity": "sha512-2UI0OeRB8IIliiALydLTQjYYj3qhPNb/LU9/3tfBbz/PNbCEZkd18AuYKB9N3zIm2MIHbOSMLt7SoZJKsRB8+A==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@clerk/types": "4.9.0",
+        "glob-to-regexp": "0.4.1",
+        "js-cookie": "3.0.5",
+        "std-env": "^3.7.0",
+        "swr": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "peerDependencies": {
+        "react": ">=18 || >=19.0.0-beta",
+        "react-dom": ">=18 || >=19.0.0-beta"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@clerk/shared/node_modules/swr": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.5.tgz",
+      "integrity": "sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==",
+      "dependencies": {
+        "client-only": "^0.0.1",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@clerk/shared/node_modules/swr/node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@clerk/types": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@clerk/types/-/types-4.9.0.tgz",
+      "integrity": "sha512-t+PDtVItnwit8u+YefMBVfJVdENdRAndMiIwGGJgnZ7+DyPjOwqomVy3VmcyycUdkdHcnx16UKm3a0rh2JQG/w==",
+      "dependencies": {
+        "csstype": "3.1.1"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      }
+    },
+    "node_modules/@clerk/types/node_modules/csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.2.0.tgz",
@@ -1802,6 +1937,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1817,6 +1960,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2019,6 +2167,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2963,6 +3120,11 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+    },
     "node_modules/glob/node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -3695,6 +3857,14 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3878,6 +4048,14 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "10.2.2",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
@@ -3888,6 +4066,17 @@
         "node": "14 || >=16.14"
       }
     },
+    "node_modules/map-obj": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
+      "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4072,6 +4261,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -4353,6 +4551,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/path-to-regexp": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.2.tgz",
+      "integrity": "sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw=="
+    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -4939,6 +5142,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/server-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz",
+      "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA=="
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -5089,6 +5297,39 @@
         "node": ">=8"
       }
     },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/snakecase-keys": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/snakecase-keys/-/snakecase-keys-5.4.4.tgz",
+      "integrity": "sha512-YTywJG93yxwHLgrYLZjlC75moVEX04LZM4FHfihjHe1FCXm+QaLOFfSf535aXOAd0ArVQMWUAe8ZPm4VtWyXaA==",
+      "dependencies": {
+        "map-obj": "^4.1.0",
+        "snake-case": "^3.0.4",
+        "type-fest": "^2.5.2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/snakecase-keys/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -5107,6 +5348,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/std-env": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
+      "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg=="
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
diff --git a/package.json b/package.json
index 9cb8d864..54052566 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@clerk/nextjs": "^5.2.6",
     "babel-plugin-react-compiler": "^0.0.0-experimental-938cd9a-20240601",
     "next": "15.0.0-rc.0",
     "react": "19.0.0-rc-f994737d14-20240522",
diff --git a/src/app/components/AddPost.tsx b/src/app/components/AddPost.tsx
new file mode 100644
index 00000000..d7887a99
--- /dev/null
+++ b/src/app/components/AddPost.tsx
@@ -0,0 +1,8 @@
+
+const AddPost = () => {
+  return (
+    <div>AddPost</div>
+  )
+}
+
+export default AddPost
\ No newline at end of file
diff --git a/src/app/components/Feed.tsx b/src/app/components/Feed.tsx
new file mode 100644
index 00000000..dde9c9a9
--- /dev/null
+++ b/src/app/components/Feed.tsx
@@ -0,0 +1,8 @@
+
+const Feed = () => {
+  return (
+    <div>Feed</div>
+  )
+}
+
+export default Feed
\ No newline at end of file
diff --git a/src/app/components/LeftMenu.tsx b/src/app/components/LeftMenu.tsx
new file mode 100644
index 00000000..ec5ca07c
--- /dev/null
+++ b/src/app/components/LeftMenu.tsx
@@ -0,0 +1,8 @@
+
+const LeftMenu = () => {
+  return (
+    <div>LeftMenu</div>
+  )
+}
+
+export default LeftMenu
\ No newline at end of file
diff --git a/src/app/components/MobileMenu.tsx b/src/app/components/MobileMenu.tsx
new file mode 100644
index 00000000..13fb64f5
--- /dev/null
+++ b/src/app/components/MobileMenu.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+
+const MobileMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="md:hidden">
+      <div
+        className="flex flex-col gap-[4.5px] cursor-pointer"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        <div
+          className={`w-6 h-1 bg-blue-500 rounded-sm ${
+            isOpen ? "rotate-45" : ""
+          } origin-left ease-in-out duration-500`}
+        />
+        <div
+          className={`w-6 h-1 bg-blue-500 rounded-sm ${
+            isOpen ? "opacity-0" : ""
+          } origin-left ease-in-out duration-500`}
+        />
+        <div
+          className={`w-6 h-1 bg-blue-500 rounded-sm ${
+            isOpen ? "-rotate-45" : ""
+          } origin-left ease-in-out duration-500`}
+        />
+      </div>
+      {isOpen && (
+        <div className="absolute left-0 top-24 w-full h-[calc(100vh-96px)] bg-white flex flex-col items-center justify-center gap-8 font-medium text-xl z-10">
+          <Link href={"/"}>Home</Link>
+          <Link href={"/"}>Friend</Link>
+          <Link href={"/"}>Groups</Link>
+          <Link href={"/"}>Stories</Link>
+          <Link href={"/"}>Login</Link>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MobileMenu;
diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
new file mode 100644
index 00000000..4cff6c85
--- /dev/null
+++ b/src/app/components/Navbar.tsx
@@ -0,0 +1,94 @@
+import Link from "next/link";
+import MobileMenu from "./MobileMenu";
+import Image from "next/image";
+import { ClerkLoaded, ClerkLoading, SignedIn, SignedOut } from "@clerk/nextjs";
+
+const Navbar = () => {
+  return (
+    <div className=" h-24 flex items-center justify-between">
+      <div className="md:hidden lg:block w-[20%]">
+        {/* LEFT */}
+        <Link href={"/"} className="font-bold text-xl text-blue-600">
+          LAMASOCIAL
+        </Link>
+      </div>
+      <div className="hidden md:flex w-[50%] items-center justify-between">
+        {/* CENTER */}
+        
+          {/* LINKS */}
+          <div className="flex gap-6 text-gray-600 text-sm">
+            <Link className="flex gap-2 items-center" href={"/"}>
+              <Image
+                className="w-4 h-4"
+                src="/home.png"
+                alt="Homepage"
+                width={16}
+                height={16}
+              />
+              <span>Homepage</span>
+            </Link>
+            <Link className="flex gap-2 items-center" href={"/"}>
+              <Image
+                className="w-4 h-4"
+                src="/friends.png"
+                alt="Friends"
+                width={16}
+                height={16}
+              />
+              <span>Friends</span>
+            </Link>
+            <Link className="flex gap-2 items-center" href={"/"}>
+              <Image
+                className="w-4 h-4"
+                src="/stories.png"
+                alt="Stories"
+                width={16}
+                height={16}
+              />
+              <span>Stories</span>
+            </Link>
+          </div>
+          <div className="hidden xl:flex p-2 bg-slate-100 items-center rounded-xl">
+            <input
+              type="text"
+              placeholder="search..."
+              className="bg-transparent outline-none"
+            />
+            <Image src="/search.png" width={14} height={14} alt="" />
+          </div>
+        
+      </div>
+      <div className="w-[30%] flex items-center gap-4 xl:gap-8 justify-end">
+        {/* RIGHT */}
+        <ClerkLoading>
+          <div
+            className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-current  border-gray-500 border-e-transparent align-[-0.125em] text-surface motion-reduce:animate-[spin_1.5s_linear_infinite] dark:text-white"
+            role="status"
+          />
+        </ClerkLoading>
+        <ClerkLoaded>
+          <SignedIn>
+            <div className="cursor-pointer">
+              <Image src="/people.png" alt="" width={20} height={20} />
+            </div>
+            <div className="cursor-pointer">
+              <Image src="/messages.png" alt="" width={20} height={20} />
+            </div>
+            <div className="cursor-pointer">
+              <Image src="/notification.png" alt="" width={20} height={20} />
+            </div>
+          </SignedIn>
+          <SignedOut>
+            <div className="flex items-center gap-2 text-sm">
+              <Image src="/noAvatar.png" alt="" width={20} height={20} />
+              <Link href="/sign-in">Login/Register</Link>
+            </div>
+          </SignedOut>
+        </ClerkLoaded>
+        <MobileMenu />
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;
diff --git a/src/app/components/RightMenu.tsx b/src/app/components/RightMenu.tsx
new file mode 100644
index 00000000..53879424
--- /dev/null
+++ b/src/app/components/RightMenu.tsx
@@ -0,0 +1,8 @@
+
+const RightMenu = () => {
+  return (
+    <div>RightMenu</div>
+  )
+}
+
+export default RightMenu
\ No newline at end of file
diff --git a/src/app/components/Stories.tsx b/src/app/components/Stories.tsx
new file mode 100644
index 00000000..2aec21b6
--- /dev/null
+++ b/src/app/components/Stories.tsx
@@ -0,0 +1,89 @@
+import Image from "next/image";
+
+const Stories = () => {
+  return (
+    <div className="p-4 bg-white rounded-lg shadow-md overflow-scroll text-xs scrollbar-hide">
+      <div className="flex gap-8 w-max">
+        {/* STORY */}
+        <div className="flex flex-col items-center gap-2 cursor-pointer">
+          <Image
+            src="https://plus.unsplash.com/premium_photo-1671656349322-41de944d259b?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bWFufGVufDB8fDB8fHww"
+            alt=""
+            width={80}
+            height={80}
+            className=" object-cover w-20 h-20 rounded-full ring-2"
+          />
+          <span className="font-medium">Ricky</span>
+        </div>
+        {/* STORY */}
+        <div className="flex flex-col items-center gap-2 cursor-pointer">
+          <Image
+            src="https://plus.unsplash.com/premium_photo-1671656349322-41de944d259b?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bWFufGVufDB8fDB8fHww"
+            alt=""
+            width={80}
+            height={80}
+            className=" object-cover w-20 h-20 rounded-full ring-2"
+          />
+          <span className="font-medium">Ricky</span>
+        </div>
+        {/* STORY */}
+        <div className="flex flex-col items-center gap-2 cursor-pointer">
+          <Image
+            src="https://plus.unsplash.com/premium_photo-1671656349322-41de944d259b?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bWFufGVufDB8fDB8fHww"
+            alt=""
+            width={80}
+            height={80}
+            className=" object-cover w-20 h-20 rounded-full ring-2"
+          />
+          <span className="font-medium">Ricky</span>
+        </div>
+        {/* STORY */}
+        <div className="flex flex-col items-center gap-2 cursor-pointer">
+          <Image
+            src="https://plus.unsplash.com/premium_photo-1671656349322-41de944d259b?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bWFufGVufDB8fDB8fHww"
+            alt=""
+            width={80}
+            height={80}
+            className=" object-cover w-20 h-20 rounded-full ring-2"
+          />
+          <span className="font-medium">Ricky</span>
+        </div>
+        {/* STORY */}
+        <div className="flex flex-col items-center gap-2 cursor-pointer">
+          <Image
+            src="https://plus.unsplash.com/premium_photo-1671656349322-41de944d259b?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bWFufGVufDB8fDB8fHww"
+            alt=""
+            width={80}
+            height={80}
+            className=" object-cover w-20 h-20 rounded-full ring-2"
+          />
+          <span className="font-medium">Ricky</span>
+        </div>
+        {/* STORY */}
+        <div className="flex flex-col items-center gap-2 cursor-pointer">
+          <Image
+            src="https://plus.unsplash.com/premium_photo-1671656349322-41de944d259b?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bWFufGVufDB8fDB8fHww"
+            alt=""
+            width={80}
+            height={80}
+            className=" object-cover w-20 h-20 rounded-full ring-2"
+          />
+          <span className="font-medium">Ricky</span>
+        </div>
+        {/* STORY */}
+        <div className="flex flex-col items-center gap-2 cursor-pointer">
+          <Image
+            src="https://plus.unsplash.com/premium_photo-1671656349322-41de944d259b?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bWFufGVufDB8fDB8fHww"
+            alt=""
+            width={80}
+            height={80}
+            className=" object-cover w-20 h-20 rounded-full ring-2"
+          />
+          <span className="font-medium">Ricky</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Stories;
diff --git a/src/app/globals.css b/src/app/globals.css
index bd6213e1..da773620 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+.scrollbar-hide {
+  scrollbar-width: none;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 04269735..6042589e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import Navbar from "./components/Navbar";
+import { ClerkProvider } from "@clerk/nextjs";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -15,8 +17,17 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
+    <ClerkProvider>
+      <html lang="en">
+        <body className={inter.className}>
+          <div className="w-full bg-white md:px-8 lg:px-16 xl:px-32 2xl:px-64">
+            <Navbar />
+          </div>
+          <div className="bg-slate-100 px-4 md:px-8 lg:px-16 xl:px-32 2xl:px-64">
+            {children}
+          </div>
+        </body>
+      </html>
+    </ClerkProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3d365a49..71f9261d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,27 @@
+import AddPost from "./components/AddPost";
+import Feed from "./components/Feed";
+import LeftMenu from "./components/LeftMenu";
+import RightMenu from "./components/RightMenu";
+import Stories from "./components/Stories";
+
 const Homepage = () => {
   return (
-    <div className=''>Homepage</div>
-  )
-}
+    <div className="flex gap-6 pt-6">
+      <div className="hidden xl:block w-[20%]">
+        <LeftMenu />
+      </div>
+      <div className="w-full lg:w-[70%] xl:w-[50%]">
+        <div className="">
+          <Stories />
+          <AddPost />
+          <Feed />
+        </div>
+      </div>
+      <div className="hidden lg:block w-[30%]">
+        <RightMenu />
+      </div>
+    </div>
+  );
+};
 
-export default Homepage
\ No newline at end of file
+export default Homepage;
diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[id]/page.tsx
new file mode 100644
index 00000000..1017f59c
--- /dev/null
+++ b/src/app/profile/[id]/page.tsx
@@ -0,0 +1,5 @@
+const ProfilePage = () => {
+  return <div>ProfilePage</div>;
+};
+
+export default ProfilePage;
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
new file mode 100644
index 00000000..ec0a328b
--- /dev/null
+++ b/src/app/settings/page.tsx
@@ -0,0 +1,5 @@
+const SettingsPage = () => {
+  return <div>SettingsPage</div>;
+};
+
+export default SettingsPage;
diff --git a/src/app/sign-in/[[...sign-in]]/page.tsx b/src/app/sign-in/[[...sign-in]]/page.tsx
new file mode 100644
index 00000000..a678501b
--- /dev/null
+++ b/src/app/sign-in/[[...sign-in]]/page.tsx
@@ -0,0 +1,9 @@
+import { SignIn } from "@clerk/nextjs";
+
+export default function Page() {
+  return (
+    <div className="h-[calc(100vh-96px)] flex items-center justify-center">
+      <SignIn />
+    </div>
+  );
+}
diff --git a/src/app/sign-up/[[...sign-up]]/page.tsx b/src/app/sign-up/[[...sign-up]]/page.tsx
new file mode 100644
index 00000000..b3325e3c
--- /dev/null
+++ b/src/app/sign-up/[[...sign-up]]/page.tsx
@@ -0,0 +1,9 @@
+import { SignUp } from "@clerk/nextjs";
+
+export default function Page() {
+  return (
+    <div className="h-[calc(100vh-96px)] flex items-center justify-center">
+      <SignUp />
+    </div>
+  );
+}
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 00000000..7a17559b
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,20 @@
+import {
+  auth,
+  clerkMiddleware,
+  createRouteMatcher,
+} from "@clerk/nextjs/server";
+
+const isProtectedRoute = createRouteMatcher(["/settings(.*)"]);
+
+export default clerkMiddleware((auth, req) => {
+  if (isProtectedRoute(req)) auth().protect();
+});
+
+export const config = {
+  matcher: [
+    // Skip Next.js internals and all static files, unless found in search params
+    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
+    // Always run for API routes
+    "/(api|trpc)(.*)",
+  ],
+};