diff --git a/src/ui/component/Header.tsx b/src/ui/component/Header.tsx
index 45522ae..4800614 100644
--- a/src/ui/component/Header.tsx
+++ b/src/ui/component/Header.tsx
@@ -1,5 +1,14 @@
-import { 
-    Drawer,
-    DrawerTrigger
-} from "@/components/ui/drawer";
-import { useState } from 'react';
\ No newline at end of file
+import { Label } from '@/components/ui/label';
+import { SidebarTrigger } from '@/components/ui/sidebar';
+import { useState } from 'react';
+import Routing from './RoutingData';
+
+export default function Header() {
+    return (
+        <header className="flex shrink-0 items-center gap-2 border-b px-4 w-full h-12">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4"/>
+            <Label>{import.meta.env.BASE_URL}</Label>
+        </header>
+      );
+}
\ No newline at end of file
diff --git a/src/ui/component/RoutingData.ts b/src/ui/component/RoutingData.ts
new file mode 100644
index 0000000..98842ee
--- /dev/null
+++ b/src/ui/component/RoutingData.ts
@@ -0,0 +1,20 @@
+type PageRoutingInfo = {
+    path: string;
+    title: string;
+}
+
+export const PageRouting: Record<string, PageRoutingInfo> = {
+    LOGIN: { path: "login", title: "" },
+    SIGN_UP: { path: "signup", title: "" },
+    RESET_PASSWORD: { path: "reset-password", title: "" },
+    HOME: { path: "home", title: "홈" },
+    SCHEDULES: { path: "schedules", title: "일정" },
+    SCHEDULES_NEW: { path: "schedules/new", title: "일정 생성" },
+    SCHEDULES_EDIT: { path: "schedules/edit", title: "일정 수정" },
+    SCHEDULES_DETAIL: { path: "schedules/detail", title: "일정 상세" },
+    USER_INFO: { path: "info", title: "사용자 정보" },
+    USER_FOLLOWING: { path: "info/following", title: "팔로잉 목록" },
+    USER_FOLLOWER: { path: "info/follower", title: "팔로워 목록" },
+    SETTINGS: { path: "settings", title: "설정" },
+    NOT_FOUD: { path: "not-found", title: "존재하지 않는 페이지" },
+} as const;
\ No newline at end of file
diff --git a/src/ui/component/SideBar.tsx b/src/ui/component/SideBar.tsx
new file mode 100644
index 0000000..8d6dda9
--- /dev/null
+++ b/src/ui/component/SideBar.tsx
@@ -0,0 +1,11 @@
+import { useState } from 'react';
+import { 
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarHeader
+} from './components/ui/sidebar';
+
+export default function SideBar() {
+    return (<Sidebar></Sidebar>)
+}
\ No newline at end of file