diff --git a/src/app/private/admin/home/layout.tsx b/src/app/private/admin/home/layout.tsx
new file mode 100644
index 0000000..5927c11
--- /dev/null
+++ b/src/app/private/admin/home/layout.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+interface IAdminHomeLayoutProps {
+  children: React.ReactNode;
+}
+
+const AdminHomeLayout = ({ children }: IAdminHomeLayoutProps) => {
+  return <div> {children} </div>;
+};
+
+export default AdminHomeLayout;
diff --git a/src/app/private/admin/home/page.tsx b/src/app/private/admin/home/page.tsx
new file mode 100644
index 0000000..5182710
--- /dev/null
+++ b/src/app/private/admin/home/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import StatsCard from "@components/StatsCard";
+import TopHeader from "@components/TopHeader";
+import EventCard from "@components/EventCard";
+
+
+const AdminHomePage = () => {
+  return (
+    <div>
+      <TopHeader userType = "admin"></TopHeader>
+    </div>
+  );
+};
+
+export default AdminHomePage;
diff --git a/src/app/private/home/layout.tsx b/src/app/private/home/layout.tsx
new file mode 100644
index 0000000..5927c11
--- /dev/null
+++ b/src/app/private/home/layout.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+interface IAdminHomeLayoutProps {
+  children: React.ReactNode;
+}
+
+const AdminHomeLayout = ({ children }: IAdminHomeLayoutProps) => {
+  return <div> {children} </div>;
+};
+
+export default AdminHomeLayout;
diff --git a/src/app/private/home/page.tsx b/src/app/private/home/page.tsx
new file mode 100644
index 0000000..3b67e31
--- /dev/null
+++ b/src/app/private/home/page.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import StatsCard from "@components/StatsCard";
+import TopHeader from "@components/TopHeader";
+import EventCard from "@components/EventCard";
+
+export default function Home() {
+  return (
+    <div className="w-full">
+      <TopHeader userType="admin"></TopHeader>
+    </div>
+  );
+}
diff --git a/src/app/private/layout.tsx b/src/app/private/layout.tsx
index e76d279..4089a03 100644
--- a/src/app/private/layout.tsx
+++ b/src/app/private/layout.tsx
@@ -8,7 +8,7 @@ const HomeLayout = ({ children }: IHomeLayoutProps) => {
   return (
     <div className="flex min-h-screen">
       <SideNavBar role="admin" />
-      <main className="flex-1 ml-60 p-6">{children}</main>
+      <main className="flex-1 ml-60">{children}</main>
     </div>
   );
 };
diff --git a/src/app/private/logout/layout.tsx b/src/app/private/logout/layout.tsx
new file mode 100644
index 0000000..5927c11
--- /dev/null
+++ b/src/app/private/logout/layout.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+interface IAdminHomeLayoutProps {
+  children: React.ReactNode;
+}
+
+const AdminHomeLayout = ({ children }: IAdminHomeLayoutProps) => {
+  return <div> {children} </div>;
+};
+
+export default AdminHomeLayout;
diff --git a/src/app/private/logout/page.tsx b/src/app/private/logout/page.tsx
new file mode 100644
index 0000000..823bd7d
--- /dev/null
+++ b/src/app/private/logout/page.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import SideNavBar from "@components/SideNavBar";
+
+export default function Logout() {
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <SideNavBar role="admin"/>
+    </div>
+  );
+}
diff --git a/src/app/private/volunteer/home/layout.tsx b/src/app/private/volunteer/home/layout.tsx
new file mode 100644
index 0000000..b4a62a3
--- /dev/null
+++ b/src/app/private/volunteer/home/layout.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+interface VolunteerHomeLayoutProps {
+  children: React.ReactNode;
+}
+
+const VolunteerHomeLayout = ({ children }: VolunteerHomeLayoutProps) => {
+  return <div> {children} </div>;
+};
+
+export default VolunteerHomeLayout;
diff --git a/src/app/private/volunteer/home/page.tsx b/src/app/private/volunteer/home/page.tsx
new file mode 100644
index 0000000..4288c82
--- /dev/null
+++ b/src/app/private/volunteer/home/page.tsx
@@ -0,0 +1,9 @@
+const VolunteerHomePage = () => {
+  return (
+    <div>
+      <h1> Volunteer Home</h1>
+    </div>
+  );
+};
+
+export default VolunteerHomePage;
diff --git a/src/components/TopHeader.tsx b/src/components/TopHeader.tsx
index d5430db..b7cf08e 100644
--- a/src/components/TopHeader.tsx
+++ b/src/components/TopHeader.tsx
@@ -14,7 +14,7 @@ const TopHeader = ({ userType }: TopHeaderProps) => {
   const [isEnglish, setIsEnglish] = React.useState(true);
 
   return (
-    <div className="absolute top-0 flex flex-row w-screen border border-gray-200 py-5 px-6 place-content-between">
+    <div className="absolute fixed top-0 flex flex-row w-[calc(100%-15rem)] border border-gray-200 py-5 px-6 place-content-between">
       <button className="flex flex-row gap-x-2 bg-teal-600 p-2.5 px-3 text-white rounded-md place-items-center">
         <Icon icon={icon} width="20" height="20" />
         {buttonText}