diff --git a/apps/client/src/routeTree.gen.ts b/apps/client/src/routeTree.gen.ts
index bf1b662..259098e 100644
--- a/apps/client/src/routeTree.gen.ts
+++ b/apps/client/src/routeTree.gen.ts
@@ -16,8 +16,12 @@ import { Route as LoginImport } from './routes/login';
 import { Route as AuthImport } from './routes/_auth';
 import { Route as IndexImport } from './routes/index';
 import { Route as AuthAccountImport } from './routes/_auth.account';
+import { Route as AuthProjectImport } from './routes/_auth.$project';
 import { Route as AuthAccountIndexImport } from './routes/_auth.account.index';
+import { Route as AuthProjectIndexImport } from './routes/_auth.$project.index';
 import { Route as AuthAccountSettingsImport } from './routes/_auth.account.settings';
+import { Route as AuthProjectSettingsImport } from './routes/_auth.$project.settings';
+import { Route as AuthProjectBoardImport } from './routes/_auth.$project.board';
 
 // Create/Update Routes
 
@@ -50,18 +54,42 @@ const AuthAccountRoute = AuthAccountImport.update({
 	getParentRoute: () => AuthRoute,
 } as any);
 
+const AuthProjectRoute = AuthProjectImport.update({
+	id: '/$project',
+	path: '/$project',
+	getParentRoute: () => AuthRoute,
+} as any);
+
 const AuthAccountIndexRoute = AuthAccountIndexImport.update({
 	id: '/',
 	path: '/',
 	getParentRoute: () => AuthAccountRoute,
 } as any);
 
+const AuthProjectIndexRoute = AuthProjectIndexImport.update({
+	id: '/',
+	path: '/',
+	getParentRoute: () => AuthProjectRoute,
+} as any);
+
 const AuthAccountSettingsRoute = AuthAccountSettingsImport.update({
 	id: '/settings',
 	path: '/settings',
 	getParentRoute: () => AuthAccountRoute,
 } as any);
 
+const AuthProjectSettingsRoute = AuthProjectSettingsImport.update({
+	id: '/settings',
+	path: '/settings',
+	getParentRoute: () => AuthProjectRoute,
+} as any);
+
+const AuthProjectBoardRoute = AuthProjectBoardImport.update({
+	id: '/board',
+	path: '/board',
+	getParentRoute: () => AuthProjectRoute,
+} as any);
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -94,6 +122,13 @@ declare module '@tanstack/react-router' {
 			preLoaderRoute: typeof SignupImport;
 			parentRoute: typeof rootRoute;
 		};
+		'/_auth/$project': {
+			id: '/_auth/$project';
+			path: '/$project';
+			fullPath: '/$project';
+			preLoaderRoute: typeof AuthProjectImport;
+			parentRoute: typeof AuthImport;
+		};
 		'/_auth/account': {
 			id: '/_auth/account';
 			path: '/account';
@@ -101,6 +136,20 @@ declare module '@tanstack/react-router' {
 			preLoaderRoute: typeof AuthAccountImport;
 			parentRoute: typeof AuthImport;
 		};
+		'/_auth/$project/board': {
+			id: '/_auth/$project/board';
+			path: '/board';
+			fullPath: '/$project/board';
+			preLoaderRoute: typeof AuthProjectBoardImport;
+			parentRoute: typeof AuthProjectImport;
+		};
+		'/_auth/$project/settings': {
+			id: '/_auth/$project/settings';
+			path: '/settings';
+			fullPath: '/$project/settings';
+			preLoaderRoute: typeof AuthProjectSettingsImport;
+			parentRoute: typeof AuthProjectImport;
+		};
 		'/_auth/account/settings': {
 			id: '/_auth/account/settings';
 			path: '/settings';
@@ -108,6 +157,13 @@ declare module '@tanstack/react-router' {
 			preLoaderRoute: typeof AuthAccountSettingsImport;
 			parentRoute: typeof AuthAccountImport;
 		};
+		'/_auth/$project/': {
+			id: '/_auth/$project/';
+			path: '/';
+			fullPath: '/$project/';
+			preLoaderRoute: typeof AuthProjectIndexImport;
+			parentRoute: typeof AuthProjectImport;
+		};
 		'/_auth/account/': {
 			id: '/_auth/account/';
 			path: '/';
@@ -120,6 +176,20 @@ declare module '@tanstack/react-router' {
 
 // Create and export the route tree
 
+interface AuthProjectRouteChildren {
+	AuthProjectBoardRoute: typeof AuthProjectBoardRoute;
+	AuthProjectSettingsRoute: typeof AuthProjectSettingsRoute;
+	AuthProjectIndexRoute: typeof AuthProjectIndexRoute;
+}
+
+const AuthProjectRouteChildren: AuthProjectRouteChildren = {
+	AuthProjectBoardRoute: AuthProjectBoardRoute,
+	AuthProjectSettingsRoute: AuthProjectSettingsRoute,
+	AuthProjectIndexRoute: AuthProjectIndexRoute,
+};
+
+const AuthProjectRouteWithChildren = AuthProjectRoute._addFileChildren(AuthProjectRouteChildren);
+
 interface AuthAccountRouteChildren {
 	AuthAccountSettingsRoute: typeof AuthAccountSettingsRoute;
 	AuthAccountIndexRoute: typeof AuthAccountIndexRoute;
@@ -133,10 +203,12 @@ const AuthAccountRouteChildren: AuthAccountRouteChildren = {
 const AuthAccountRouteWithChildren = AuthAccountRoute._addFileChildren(AuthAccountRouteChildren);
 
 interface AuthRouteChildren {
+	AuthProjectRoute: typeof AuthProjectRouteWithChildren;
 	AuthAccountRoute: typeof AuthAccountRouteWithChildren;
 }
 
 const AuthRouteChildren: AuthRouteChildren = {
+	AuthProjectRoute: AuthProjectRouteWithChildren,
 	AuthAccountRoute: AuthAccountRouteWithChildren,
 };
 
@@ -147,8 +219,12 @@ export interface FileRoutesByFullPath {
 	'': typeof AuthRouteWithChildren;
 	'/login': typeof LoginRoute;
 	'/signup': typeof SignupRoute;
+	'/$project': typeof AuthProjectRouteWithChildren;
 	'/account': typeof AuthAccountRouteWithChildren;
+	'/$project/board': typeof AuthProjectBoardRoute;
+	'/$project/settings': typeof AuthProjectSettingsRoute;
 	'/account/settings': typeof AuthAccountSettingsRoute;
+	'/$project/': typeof AuthProjectIndexRoute;
 	'/account/': typeof AuthAccountIndexRoute;
 }
 
@@ -157,7 +233,10 @@ export interface FileRoutesByTo {
 	'': typeof AuthRouteWithChildren;
 	'/login': typeof LoginRoute;
 	'/signup': typeof SignupRoute;
+	'/$project/board': typeof AuthProjectBoardRoute;
+	'/$project/settings': typeof AuthProjectSettingsRoute;
 	'/account/settings': typeof AuthAccountSettingsRoute;
+	'/$project': typeof AuthProjectIndexRoute;
 	'/account': typeof AuthAccountIndexRoute;
 }
 
@@ -167,24 +246,52 @@ export interface FileRoutesById {
 	'/_auth': typeof AuthRouteWithChildren;
 	'/login': typeof LoginRoute;
 	'/signup': typeof SignupRoute;
+	'/_auth/$project': typeof AuthProjectRouteWithChildren;
 	'/_auth/account': typeof AuthAccountRouteWithChildren;
+	'/_auth/$project/board': typeof AuthProjectBoardRoute;
+	'/_auth/$project/settings': typeof AuthProjectSettingsRoute;
 	'/_auth/account/settings': typeof AuthAccountSettingsRoute;
+	'/_auth/$project/': typeof AuthProjectIndexRoute;
 	'/_auth/account/': typeof AuthAccountIndexRoute;
 }
 
 export interface FileRouteTypes {
 	fileRoutesByFullPath: FileRoutesByFullPath;
-	fullPaths: '/' | '' | '/login' | '/signup' | '/account' | '/account/settings' | '/account/';
+	fullPaths:
+		| '/'
+		| ''
+		| '/login'
+		| '/signup'
+		| '/$project'
+		| '/account'
+		| '/$project/board'
+		| '/$project/settings'
+		| '/account/settings'
+		| '/$project/'
+		| '/account/';
 	fileRoutesByTo: FileRoutesByTo;
-	to: '/' | '' | '/login' | '/signup' | '/account/settings' | '/account';
+	to:
+		| '/'
+		| ''
+		| '/login'
+		| '/signup'
+		| '/$project/board'
+		| '/$project/settings'
+		| '/account/settings'
+		| '/$project'
+		| '/account';
 	id:
 		| '__root__'
 		| '/'
 		| '/_auth'
 		| '/login'
 		| '/signup'
+		| '/_auth/$project'
 		| '/_auth/account'
+		| '/_auth/$project/board'
+		| '/_auth/$project/settings'
 		| '/_auth/account/settings'
+		| '/_auth/$project/'
 		| '/_auth/account/';
 	fileRoutesById: FileRoutesById;
 }
@@ -225,6 +332,7 @@ export const routeTree = rootRoute
     "/_auth": {
       "filePath": "_auth.tsx",
       "children": [
+        "/_auth/$project",
         "/_auth/account"
       ]
     },
@@ -234,6 +342,15 @@ export const routeTree = rootRoute
     "/signup": {
       "filePath": "signup.tsx"
     },
+    "/_auth/$project": {
+      "filePath": "_auth.$project.tsx",
+      "parent": "/_auth",
+      "children": [
+        "/_auth/$project/board",
+        "/_auth/$project/settings",
+        "/_auth/$project/"
+      ]
+    },
     "/_auth/account": {
       "filePath": "_auth.account.tsx",
       "parent": "/_auth",
@@ -242,10 +359,22 @@ export const routeTree = rootRoute
         "/_auth/account/"
       ]
     },
+    "/_auth/$project/board": {
+      "filePath": "_auth.$project.board.tsx",
+      "parent": "/_auth/$project"
+    },
+    "/_auth/$project/settings": {
+      "filePath": "_auth.$project.settings.tsx",
+      "parent": "/_auth/$project"
+    },
     "/_auth/account/settings": {
       "filePath": "_auth.account.settings.tsx",
       "parent": "/_auth/account"
     },
+    "/_auth/$project/": {
+      "filePath": "_auth.$project.index.tsx",
+      "parent": "/_auth/$project"
+    },
     "/_auth/account/": {
       "filePath": "_auth.account.index.tsx",
       "parent": "/_auth/account"
diff --git a/apps/client/src/routes/_auth.$project.board.tsx b/apps/client/src/routes/_auth.$project.board.tsx
new file mode 100644
index 0000000..4d815bd
--- /dev/null
+++ b/apps/client/src/routes/_auth.$project.board.tsx
@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_auth/$project/board')({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const { project } = Route.useParams();
+	return <div>안녕하세요, {project} 칸반 보드 페이지</div>;
+}
diff --git a/apps/client/src/routes/_auth.$project.index.tsx b/apps/client/src/routes/_auth.$project.index.tsx
new file mode 100644
index 0000000..3553ca7
--- /dev/null
+++ b/apps/client/src/routes/_auth.$project.index.tsx
@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_auth/$project/')({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const { project } = Route.useParams();
+	return <div>안녕하세요, {project} 대시보드 페이지</div>;
+}
diff --git a/apps/client/src/routes/_auth.$project.settings.tsx b/apps/client/src/routes/_auth.$project.settings.tsx
new file mode 100644
index 0000000..19676de
--- /dev/null
+++ b/apps/client/src/routes/_auth.$project.settings.tsx
@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_auth/$project/settings')({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const { project } = Route.useParams();
+	return <div>안녕하세요, {project} 설정 페이지</div>;
+}
diff --git a/apps/client/src/routes/_auth.$project.tsx b/apps/client/src/routes/_auth.$project.tsx
new file mode 100644
index 0000000..11b341e
--- /dev/null
+++ b/apps/client/src/routes/_auth.$project.tsx
@@ -0,0 +1,49 @@
+import { createFileRoute, Link, Outlet } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_auth/$project')({
+	component: ProjectLayout,
+});
+
+function ProjectLayout() {
+	const { project } = Route.useParams();
+
+	return (
+		<>
+			<nav className="h-9 border-b px-6">
+				<ul className="flex h-full items-center gap-4 text-sm">
+					<li>
+						<Link
+							to="/$project"
+							params={{ project }}
+							activeOptions={{ exact: true }}
+							className="[&.active]:font-semibold"
+						>
+							Overview
+						</Link>
+					</li>
+					<li>
+						<Link
+							to="/$project/board"
+							params={{ project }}
+							activeOptions={{ exact: true }}
+							className="[&.active]:font-semibold"
+						>
+							Board
+						</Link>
+					</li>
+					<li>
+						<Link
+							to="/$project/settings"
+							params={{ project }}
+							activeOptions={{ exact: true }}
+							className="[&.active]:font-semibold"
+						>
+							Settings
+						</Link>
+					</li>
+				</ul>
+			</nav>
+			<Outlet />
+		</>
+	);
+}
diff --git a/apps/client/src/routes/_auth.tsx b/apps/client/src/routes/_auth.tsx
index 1061c9f..6921e0b 100644
--- a/apps/client/src/routes/_auth.tsx
+++ b/apps/client/src/routes/_auth.tsx
@@ -1,4 +1,11 @@
-import { Link, Outlet, createFileRoute, redirect, useRouter } from '@tanstack/react-router';
+import {
+	Link,
+	Outlet,
+	createFileRoute,
+	redirect,
+	useParams,
+	useRouter,
+} from '@tanstack/react-router';
 import { ChevronsUpDownIcon, LogOut } from 'lucide-react';
 import { Harmony } from '@/components/logo';
 import { Topbar } from '@/components/navigation/topbar';
@@ -22,10 +29,30 @@ export const Route = createFileRoute('/_auth')({
 	component: AuthLayout,
 });
 
+const projectList = [
+	{
+		role: 'ADMIN',
+		project: {
+			id: 1,
+			title: 'project-01',
+			createdAt: '2024-11-12T04:15:54.354Z',
+		},
+	},
+	{
+		role: 'GUEST',
+		project: {
+			id: 2,
+			title: 'project-02',
+			createdAt: '2024-11-12T04:16:01.855Z',
+		},
+	},
+];
+
 function AuthLayout() {
 	const router = useRouter();
 	const navigate = Route.useNavigate();
 	const auth = useAuth();
+	const params = useParams({ strict: false });
 
 	const handleLogout = async () => {
 		try {
@@ -43,19 +70,26 @@ function AuthLayout() {
 			<Topbar
 				leftContent={
 					<>
-						<Link to="/account">
+						<Link to={params.project === undefined ? '/account' : '/$project'}>
 							<Harmony />
 						</Link>
 						<div className="flex items-center gap-2">
-							<div>My Account</div>
+							<h2>{params.project ?? 'My Account'}</h2>
 							<DropdownMenu>
 								<DropdownMenuTrigger className="h-8">
 									<ChevronsUpDownIcon className="h-4 w-4" />
 								</DropdownMenuTrigger>
 								<DropdownMenuContent align="start" className="bg-white">
-									<DropdownMenuItem>My Account</DropdownMenuItem>
-									<DropdownMenuItem>팀 포카드</DropdownMenuItem>
-									<DropdownMenuItem>Web06 project</DropdownMenuItem>
+									<DropdownMenuItem>
+										<Link to="/account">My Account</Link>
+									</DropdownMenuItem>
+									{projectList.map(({ project }) => (
+										<DropdownMenuItem key={project.id}>
+											<Link to="/$project/board" params={{ project: project.title }}>
+												{project.title}
+											</Link>
+										</DropdownMenuItem>
+									))}
 								</DropdownMenuContent>
 							</DropdownMenu>
 						</div>