diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx
index 8097b6c..b1ec1e9 100644
--- a/compass/app/admin/page.tsx
+++ b/compass/app/admin/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { PageLayout } from "@/components/PageLayout";
-import UserTable from "@/components/Table/UserIndex";
+import { Table } from "@/components/Table/Index"  
 import User from "@/utils/models/User";
 import { createClient } from "@/utils/supabase/client";
 
@@ -38,7 +38,7 @@ export default function Page() {
         <div className="min-h-screen flex flex-col">
             {/* icon + title  */}
             <PageLayout title="Users" icon={<UsersIcon />}>
-                <UserTable users={users} />
+                <Table users={users} />
             </PageLayout>
         </div>
     );
diff --git a/compass/app/admin_test/layout.tsx b/compass/app/admin_test/layout.tsx
new file mode 100644
index 0000000..78bf6a6
--- /dev/null
+++ b/compass/app/admin_test/layout.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import Sidebar from "@/components/Sidebar/Sidebar";
+import React, { useState } from "react";
+import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
+import { createClient } from "@/utils/supabase/client";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import User, { Role } from "@/utils/models/User";
+import Loading from "@/components/auth/Loading";
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+    const router = useRouter();
+    const [user, setUser] = useState<User>();
+
+    useEffect(() => {
+        async function getUser() {
+            const supabase = createClient();
+
+            const { data, error } = await supabase.auth.getUser();
+
+            console.log(data, error);
+
+            if (error) {
+                console.log("Accessed admin page but not logged in");
+                router.push("/auth/login");
+                return;
+            }
+
+            const userData = await fetch(
+                `${process.env.NEXT_PUBLIC_HOST}/api/user?uuid=${data.user.id}`
+            );
+
+            const user: User = await userData.json();
+
+            if (user.role !== Role.ADMIN) {
+                console.log(
+                    `Accessed admin page but incorrect permissions: ${user.username} ${user.role}`
+                );
+                router.push("/home");
+                return;
+            }
+
+            setUser(user);
+        }
+
+        getUser();
+    }, [router]);
+
+    return (
+        <div className="flex-row">
+            {user ? (
+                <div>
+                    {/* button to open sidebar */}
+                    <button
+                        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+                        className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
+                        aria-label={"Open sidebar"}
+                    >
+                        {
+                            !isSidebarOpen && (
+                                <ChevronDoubleRightIcon className="h-5 w-5" />
+                            ) // Icon for closing the sidebar
+                        }
+                    </button>
+                    {/* sidebar  */}
+                    <div
+                        className={`absolute inset-y-0 left-0 transform ${
+                            isSidebarOpen
+                                ? "translate-x-0"
+                                : "-translate-x-full"
+                        } w-64 transition duration-300 ease-in-out`}
+                    >
+                        <Sidebar
+                            setIsSidebarOpen={setIsSidebarOpen}
+                            name={user.username}
+                            email={user.email}
+                            isAdmin={user.role === Role.ADMIN}
+                        />
+                    </div>
+                    {/* page ui  */}
+                    <div
+                        className={`flex-1 transition duration-300 ease-in-out ${
+                            isSidebarOpen ? "ml-64" : "ml-0"
+                        }`}
+                    >
+                        {children}
+                    </div>
+                </div>
+            ) : (
+                <Loading />
+            )}
+        </div>
+    );
+}
diff --git a/compass/app/admin_test/page.tsx b/compass/app/admin_test/page.tsx
new file mode 100644
index 0000000..78f97fa
--- /dev/null
+++ b/compass/app/admin_test/page.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { PageLayout } from "@/components/PageLayout";
+import { Table } from "@/components/Table/Index"  
+import UserTable from "@/components/Table/UserIndex";
+import User from "@/utils/models/User";
+import { createClient } from "@/utils/supabase/client";
+
+import { UsersIcon } from "@heroicons/react/24/solid";
+import { useEffect, useState } from "react";
+
+export default function Page() {
+    const [users, setUsers] = useState<User[]>([]);
+
+    useEffect(() => {
+        async function getUser() {
+            const supabase = createClient();
+
+            const { data, error } = await supabase.auth.getUser();
+
+            if (error) {
+                console.log("Accessed admin page but not logged in");
+                return;
+            }
+
+            const userListData = await fetch(
+                `${process.env.NEXT_PUBLIC_HOST}/api/user/all?uuid=${data.user.id}`
+            );
+
+            const users: User[] = await userListData.json();
+
+            setUsers(users);
+        }
+
+        getUser();
+    }, []);
+
+    return (
+        <div className="min-h-screen flex flex-col">
+            {/* icon + title  */}
+            <PageLayout title="Users" icon={<UsersIcon />}>
+                <UserTable users={users} />
+            </PageLayout>
+        </div>
+    )
+}
diff --git a/compass/components/Table/Table.tsx b/compass/components/Table/Table.tsx
index 4bd5d1c..9598134 100644
--- a/compass/components/Table/Table.tsx
+++ b/compass/components/Table/Table.tsx
@@ -54,17 +54,17 @@ const fuzzyFilter = (
  * @param props.columns Column definitions made with Tanstack columnHelper
  */
 export const Table = ({ data, setData, columns }: TableProps) => {
-    const columnHelper = createColumnHelper<Resource>();
+    const columnHelper = createColumnHelper<DataPoint>();
     useEffect(() => {
         const sortedData = [...data].sort((a, b) =>
             a.visible === b.visible ? 0 : a.visible ? -1 : 1
         );
-        setData(sortedData);
+        setData(sortedData); 
     }, [data, setData]);
 
 
     // Data manipulation
-    // TODO: Connect data manipulation methods to the database (deleteResource, hideResource, addResource)
+    // TODO: Connect data manipulation methods to the database (deleteData, hideData, addData)
     const deleteData = (dataId: number) => {
         console.log(data);
         setData((currentData) =>
diff --git a/compass/components/Table/UserIndex.tsx b/compass/components/Table/UserIndex.tsx
index 30ec363..766780a 100644
--- a/compass/components/Table/UserIndex.tsx
+++ b/compass/components/Table/UserIndex.tsx
@@ -13,7 +13,7 @@ import { DataPoint } from "@/components/Table/Table";
  * @param props.users List of users to be displayed by the table
  */
 export default function UserTable({ users }: { users: User[] }) {
-    const columnHelper = createColumnHelper<User>();    
+    const columnHelper = createColumnHelper<User>();
     const [data, setData] = useState<DataPoint[]>([...users]);
 
     const { presetOptions, setPresetOptions, getTagColor } = useTagsHandler([