diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
new file mode 100644
index 0000000..79a4625
--- /dev/null
+++ b/src/app/dashboard/page.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import React from 'react';
+import Sidebar from '@/components/Sidebar';
+import SidebarItem from '@/components/SidebarItem';
+import SidebarHeading from '@/components/SidebarHeading';
+import Content from '@/components/Content';
+import PageLink from '@/components/PageLink';
+import Avatar from '@/components/Avatar';
+
+function DashboardPage() {
+  return (
+    <div className="flex h-screen text-white">
+      <Sidebar>
+        <Avatar initials="GL" />
+        <div className="text-2xl font-bold mb-6">Gram Liu</div>
+        <SidebarHeading text="Navigation" />
+        <SidebarItem>Profile</SidebarItem>
+        <SidebarItem>Settings</SidebarItem>
+      </Sidebar>
+      <Content>
+        <h1 className="text-4xl font-bold mb-4">Welcome</h1>
+        <p className="text-lg mb-8">to your private space on the web</p>
+        <h2 className="text-3xl font-bold mb-4">Your pages</h2>
+        <PageLink icon="⚛️" label="Physics" colorClassName="text-blue-400" />
+        <PageLink icon="🧪" label="Chemistry" colorClassName="text-green-400" />
+        <PageLink icon="🧬" label="Biology" colorClassName="text-red-400" />
+      </Content>
+    </div>
+  );
+}
+
+export default DashboardPage;
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
new file mode 100644
index 0000000..4ade9b4
--- /dev/null
+++ b/src/components/Avatar.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import React from 'react';
+import { Avatar as BaseAvatar, AvatarFallback } from '@/components/ui/avatar';
+
+interface AvatarProps {
+  initials?: string;
+}
+
+function Avatar({ initials }: AvatarProps) {
+  return (
+    <BaseAvatar className="avatar w-16 h-16 mb-6">
+      <AvatarFallback>{initials}</AvatarFallback>
+    </BaseAvatar>
+  );
+}
+
+export default Avatar;
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
new file mode 100644
index 0000000..43bf987
--- /dev/null
+++ b/src/components/Content.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import React from 'react';
+
+interface ContentProps {
+  children: React.ReactNode;
+}
+
+function Content({ children }: ContentProps) {
+  return (
+    <div className="content w-3/4 p-6">
+      {children}
+    </div>
+  );
+}
+
+export default Content;
diff --git a/src/components/PageLink.tsx b/src/components/PageLink.tsx
new file mode 100644
index 0000000..aa36e84
--- /dev/null
+++ b/src/components/PageLink.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import React from 'react';
+
+interface PageLinkProps {
+  icon: string;
+  label: string;
+  colorClassName: string;
+}
+
+function PageLink({ icon, label, colorClassName }: PageLinkProps) {
+  return (
+    <div className={`page-link ${colorClassName} mb-2`}> 
+      <span>{icon}</span>
+      <span>{label}</span>
+    </div>
+  );
+}
+
+export default PageLink;
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..e0e96b8
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import React from 'react';
+
+interface SidebarProps {
+  children: React.ReactNode;
+}
+
+function Sidebar({ children }: SidebarProps) {
+  return (
+    <div className="sidebar w-1/4 p-6">
+      {children}
+    </div>
+  );
+}
+
+export default Sidebar;
diff --git a/src/components/SidebarHeading.tsx b/src/components/SidebarHeading.tsx
new file mode 100644
index 0000000..52e8aaf
--- /dev/null
+++ b/src/components/SidebarHeading.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import React from 'react';
+
+interface SidebarHeadingProps {
+  text: string;
+}
+
+function SidebarHeading({ text }: SidebarHeadingProps) {
+  return (
+    <div className="sidebar-heading uppercase text-xs mb-4">
+      {text}
+    </div>
+  );
+}
+
+export default SidebarHeading;
diff --git a/src/components/SidebarItem.tsx b/src/components/SidebarItem.tsx
new file mode 100644
index 0000000..028ea21
--- /dev/null
+++ b/src/components/SidebarItem.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import React from 'react';
+
+interface SidebarItemProps {
+  children: React.ReactNode;
+}
+
+function SidebarItem({ children }: SidebarItemProps) {
+  return (
+    <div className="sidebar-item mb-2">
+      {children}
+    </div>
+  );
+}
+
+export default SidebarItem;