diff --git a/README.md b/README.md
index 301ff56..8934dc2 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,3 @@
 ## Saroh.io
 
 Build your storefronts with ease. Add Blogs, products, web stories and manage your short links with saroh.io.
-
-
-
-This project is inspired by [dub.co](https://dub.co) and also some code is used from [dub.co](https://dub.co) and [dub.co](https://dub.co) is also used as a base for this project.
diff --git a/app/app/(dashboard)/layout.tsx b/app/app/(dashboard)/layout.tsx
index 03f6bc4..4f2c939 100644
--- a/app/app/(dashboard)/layout.tsx
+++ b/app/app/(dashboard)/layout.tsx
@@ -1,4 +1,5 @@
 import Navbar from "@/components/app/navbar";
+import NavTabs from "@/components/app/navbar/nav-tabs";
 import React, { ReactNode } from "react";
 
 interface DashboardLayoutProps {
@@ -9,6 +10,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
 	return (
 		<div>
 			<Navbar />
+			{/* <NavTabs /> */}
 			{children}
 		</div>
 	);
diff --git a/app/app/(dashboard)/page.tsx b/app/app/(dashboard)/page.tsx
index edb9497..6271050 100644
--- a/app/app/(dashboard)/page.tsx
+++ b/app/app/(dashboard)/page.tsx
@@ -1,5 +1,9 @@
 import React from "react";
 
 export default function DashboardHomePage() {
-	return <div>DashboardHomePage</div>;
+	return (
+		<div>
+			<h1>Show list of Sites and Web Stories here</h1>
+		</div>
+	);
 }
diff --git a/app/app/(dashboard)/settings/page.tsx b/app/app/(dashboard)/settings/page.tsx
new file mode 100644
index 0000000..5c24132
--- /dev/null
+++ b/app/app/(dashboard)/settings/page.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function SettingsPage() {
+  return (
+    <div>SettingsPage</div>
+  )
+}
diff --git a/app/app/(dashboard)/sites/[siteId]/page.tsx b/app/app/(dashboard)/sites/[siteId]/page.tsx
new file mode 100644
index 0000000..13247f2
--- /dev/null
+++ b/app/app/(dashboard)/sites/[siteId]/page.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function SiteDetailsPage() {
+  return (
+    <div>SiteDetailsPage</div>
+  )
+}
diff --git a/app/app/(dashboard)/sites/page.tsx b/app/app/(dashboard)/sites/page.tsx
new file mode 100644
index 0000000..367c1e7
--- /dev/null
+++ b/app/app/(dashboard)/sites/page.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function SitesPage() {
+  return (
+    <div>SitesPage</div>
+  )
+}
diff --git a/components/app/navbar/index.tsx b/components/app/navbar/index.tsx
index efd30f4..99b916d 100644
--- a/components/app/navbar/index.tsx
+++ b/components/app/navbar/index.tsx
@@ -7,6 +7,8 @@ import { ThemeToggle } from "./theme-toggle";
 import { UserNav } from "./user-nav";
 // import prismadb from "@/lib/prismadb";
 import { getSession } from "@/lib/auth";
+import NavTabs from "./nav-tabs";
+import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
 
 const Navbar = async () => {
 	// const { userId } = auth();
@@ -31,21 +33,24 @@ const Navbar = async () => {
 	];
 
 	return (
-		<div className="border-b">
-			<div className="flex h-16 items-center px-4">
-				<StoreSwitcher items={stores} />
-				<MainNav className="mx-6" />
-				<div className="ml-auto flex items-center space-x-4">
-					<ThemeToggle />
-					{/* <UserButton afterSignOutUrl="/" /> */}
-					<UserNav
-						avatarUrl={avatarUrl}
-						email={email || userName}
-						name={name}
-						// userName={userName}
-					/>
+		<div className="border-b ">
+			<MaxWidthWrapper>
+				<div className="flex items-center h-16 px-4">
+					<StoreSwitcher items={stores} />
+					{/* <MainNav className="mx-6" /> */}
+					<div className="flex items-center ml-auto space-x-4">
+						<ThemeToggle />
+						{/* <UserButton afterSignOutUrl="/" /> */}
+						<UserNav
+							avatarUrl={avatarUrl}
+							email={email || userName}
+							name={name}
+							// userName={userName}
+						/>
+					</div>
 				</div>
-			</div>
+				<NavTabs />
+			</MaxWidthWrapper>
 		</div>
 	);
 };
diff --git a/components/app/navbar/nav-tabs.tsx b/components/app/navbar/nav-tabs.tsx
new file mode 100644
index 0000000..32ce823
--- /dev/null
+++ b/components/app/navbar/nav-tabs.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import Link from "next/link";
+import { useSelectedLayoutSegments } from "next/navigation";
+import React from "react";
+
+let tabs = [
+	{
+		name: "Dashboard",
+		href: "/",
+		key: "dashboard",
+	},
+	{
+		name: "Sites",
+		href: "/sites",
+		key: "sites",
+	},
+	{
+		name: "Settings",
+		href: "/settings",
+		key: "settings",
+	},
+];
+
+export default function NavTabs() {
+	const segments = useSelectedLayoutSegments();
+	console.log({ segments });
+	return (
+		<div className="-mb-0.5 flex h-12 items-center justify-start space-x-2 overflow-x-auto scrollbar-hide">
+			{tabs.map(({ name, href, key }) => (
+				<Link
+					key={href}
+					href={href}
+					className={`border-b-2 p-1 ${
+						// hacky approach to getting the current tab – will replace with useSelectedLayoutSegments when upgrading to Next.js App Router
+						// router.asPath
+						// 	.split("?")[0]
+						// 	.split("/")
+						// 	.slice(0, slug ? 3 : 2)
+						// 	.join("/") === href
+						segments[0] === key ||
+						(key === "dashboard" && segments.length === 0)
+							? "border-black text-black"
+							: "border-transparent text-gray-600 hover:text-black"
+					}`}
+				>
+					<div className="px-3 py-2 transition-all duration-75 rounded-md hover:bg-gray-100 active:bg-gray-200">
+						<p className="text-sm">{name}</p>
+					</div>
+				</Link>
+			))}
+		</div>
+	);
+}
diff --git a/package.json b/package.json
index 68b7b47..83e2884 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
 	"private": true,
 	"scripts": {
 		"dev": "prisma generate && next dev",
-    "build": "prisma generate && prisma db push && next build",
-    "start": "next start",
+		"build": "prisma generate && prisma db push && next build",
+		"start": "next start",
 		"lint": "next lint",
 		"predev": "prisma generate",
 		"prepare": "husky install"
@@ -55,7 +55,7 @@
 		"react-icons": "^4.11.0",
 		"sonner": "^1.0.3",
 		"tailwind-merge": "^1.14.0",
-		"zod": "^3.22.2"
+		"zod": "^3.22.4"
 	},
 	"devDependencies": {
 		"@tailwindcss/forms": "^0.5.3",
@@ -68,7 +68,7 @@
 		"eslint": "8.49.0",
 		"eslint-config-next": "13.5.1",
 		"husky": "^8.0.3",
-		"postcss": "8.4.30",
+		"postcss": "8.4.31",
 		"prettier": "^2.8.8",
 		"prettier-plugin-tailwindcss": "^0.3.0",
 		"pretty-quick": "^3.1.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0c6330a..5394ec9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -138,8 +138,8 @@ dependencies:
     specifier: ^1.14.0
     version: 1.14.0
   zod:
-    specifier: ^3.22.2
-    version: 3.22.2
+    specifier: ^3.22.4
+    version: 3.22.4
 
 devDependencies:
   '@tailwindcss/forms':
@@ -162,7 +162,7 @@ devDependencies:
     version: 18.2.7
   autoprefixer:
     specifier: 10.4.15
-    version: 10.4.15(postcss@8.4.30)
+    version: 10.4.15(postcss@8.4.31)
   eslint:
     specifier: 8.49.0
     version: 8.49.0
@@ -173,8 +173,8 @@ devDependencies:
     specifier: ^8.0.3
     version: 8.0.3
   postcss:
-    specifier: 8.4.30
-    version: 8.4.30
+    specifier: 8.4.31
+    version: 8.4.31
   prettier:
     specifier: ^2.8.8
     version: 2.8.8
@@ -2153,7 +2153,7 @@ packages:
       has-symbols: 1.0.3
     dev: true
 
-  /autoprefixer@10.4.15(postcss@8.4.30):
+  /autoprefixer@10.4.15(postcss@8.4.31):
     resolution: {integrity: sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
@@ -2165,7 +2165,7 @@ packages:
       fraction.js: 4.3.6
       normalize-range: 0.1.2
       picocolors: 1.0.0
-      postcss: 8.4.30
+      postcss: 8.4.31
       postcss-value-parser: 4.2.0
     dev: true
 
@@ -3876,29 +3876,29 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /postcss-import@15.1.0(postcss@8.4.30):
+  /postcss-import@15.1.0(postcss@8.4.31):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: 8.4.30
+      postcss: 8.4.31
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.6
     dev: true
 
-  /postcss-js@4.0.1(postcss@8.4.30):
+  /postcss-js@4.0.1(postcss@8.4.31):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.30
+      postcss: 8.4.31
     dev: true
 
-  /postcss-load-config@4.0.1(postcss@8.4.30):
+  /postcss-load-config@4.0.1(postcss@8.4.31):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
     engines: {node: '>= 14'}
     peerDependencies:
@@ -3911,17 +3911,17 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.1.0
-      postcss: 8.4.30
+      postcss: 8.4.31
       yaml: 2.3.2
     dev: true
 
-  /postcss-nested@6.0.1(postcss@8.4.30):
+  /postcss-nested@6.0.1(postcss@8.4.31):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
     dependencies:
-      postcss: 8.4.30
+      postcss: 8.4.31
       postcss-selector-parser: 6.0.13
     dev: true
 
@@ -3954,8 +3954,8 @@ packages:
       source-map-js: 1.0.2
     dev: false
 
-  /postcss@8.4.30:
-    resolution: {integrity: sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==}
+  /postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.6
@@ -4524,11 +4524,11 @@ packages:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.0
-      postcss: 8.4.30
-      postcss-import: 15.1.0(postcss@8.4.30)
-      postcss-js: 4.0.1(postcss@8.4.30)
-      postcss-load-config: 4.0.1(postcss@8.4.30)
-      postcss-nested: 6.0.1(postcss@8.4.30)
+      postcss: 8.4.31
+      postcss-import: 15.1.0(postcss@8.4.31)
+      postcss-js: 4.0.1(postcss@8.4.31)
+      postcss-load-config: 4.0.1(postcss@8.4.31)
+      postcss-nested: 6.0.1(postcss@8.4.31)
       postcss-selector-parser: 6.0.13
       resolve: 1.22.6
       sucrase: 3.34.0
@@ -4798,6 +4798,6 @@ packages:
     resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
     dev: false
 
-  /zod@3.22.2:
-    resolution: {integrity: sha512-wvWkphh5WQsJbVk1tbx1l1Ly4yg+XecD+Mq280uBGt9wa5BKSWf4Mhp6GmrkPixhMxmabYY7RbzlwVP32pbGCg==}
+  /zod@3.22.4:
+    resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
     dev: false