diff --git a/compass/components/Table/ResourceIndex.tsx b/compass/components/Table/ResourceIndex.tsx
index 085a14d..6737dc4 100644
--- a/compass/components/Table/ResourceIndex.tsx
+++ b/compass/components/Table/ResourceIndex.tsx
@@ -8,6 +8,10 @@ import TagsInput from "@/components/TagsInput/Index";
 import Resource from "@/utils/models/Resource";
 import { DataPoint } from "@/components/Table/Table";
 
+/**
+ * Table componenet used for displaying resources
+ * @param props.resources List of resources to be displayed by the table
+ */
 export default function ResourceTable({ resources }: { resources: Resource[] }) {
     const columnHelper = createColumnHelper<Resource>();    
     const [data, setData] = useState<DataPoint[]>([...resources]);
diff --git a/compass/components/Table/ServiceIndex.tsx b/compass/components/Table/ServiceIndex.tsx
index ac85cae..a4b8d66 100644
--- a/compass/components/Table/ServiceIndex.tsx
+++ b/compass/components/Table/ServiceIndex.tsx
@@ -1,101 +1,105 @@
-import { Bars2Icon } from "@heroicons/react/24/solid";
-import { useState } from "react";
-import useTagsHandler from "@/components/TagsInput/TagsHandler";
-import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
-import { Table } from "@/components/Table/Table";
-import { RowOpenAction } from "@/components/Table/RowOpenAction";
-import TagsInput from "@/components/TagsInput/Index";
-import Service from "@/utils/models/Service";
-import { DataPoint } from "@/components/Table/Table";
-
-export default function ServiceTable({ services }: { services: Service[] }) {
-    const columnHelper = createColumnHelper<Service>();
-    const [data, setData] = useState<DataPoint[]>([...services]);
-    
-    // TODO: Update preset options for services
-    const { presetOptions, setPresetOptions, getTagColor } = useTagsHandler([
-        "administrator",
-        "volunteer",
-        "employee",
-    ])
-
-    const handleRowUpdate = (updatedRow: DataPoint) => {
-        const dataIndex = data.findIndex((row) => row.id === updatedRow.id);
-        if (dataIndex !== -1) {
-            const updatedData = [...data];
-            updatedData[dataIndex] = updatedRow;
-            setData(updatedData);
-        }
-    };
-
-    const columns: ColumnDef<Service, any>[] = [
-        columnHelper.accessor("name", {
-            header: () => (
-                <>
-                    <Bars2Icon className="inline align-top h-4" /> Name
-                </>
-            ),
-            cell: (info) => (
-                <RowOpenAction
-                    title={info.getValue()}
-                    rowData={info.row.original}
-                    onRowUpdate={handleRowUpdate}
-                />
-            ),
-        }),
-        columnHelper.accessor("status", {
-            header: () => (
-                <>
-                    <Bars2Icon className="inline align-top h-4" /> Status
-                </>
-            ),
-            cell: (info) => (
-                <span className="ml-2 text-gray-500">{info.getValue()}</span>
-            ),
-        }),
-        columnHelper.accessor("program", {
-            header: () => (
-                <>
-                    <Bars2Icon className="inline align-top h-4" /> Program
-                </>
-            ),
-            cell: (info) => (
-                <TagsInput 
-                    presetValue={info.getValue()} 
-                    presetOptions={presetOptions} 
-                    setPresetOptions={setPresetOptions} 
-                    getTagColor={getTagColor}                 
-                />
-            ),
-        }),
-        columnHelper.accessor("requirements", {
-            header: () => (
-                <>
-                    <Bars2Icon className="inline align-top h-4" /> Requirements
-                </>
-            ),
-            cell: (info) => (
-                // TODO: Setup different tag handler for requirements
-                <TagsInput
-                    presetValue={info.getValue()[0] !== "" ? info.getValue() : ["N/A"]}
-                    presetOptions={presetOptions}
-                    setPresetOptions={setPresetOptions} 
-                    getTagColor={getTagColor} 
-                />
-            ),
-        }),
-
-        columnHelper.accessor("summary", {
-            header: () => (
-                <>
-                    <Bars2Icon className="inline align-top h-4" /> Summary
-                </>
-            ),
-            cell: (info) => (
-                <span className="ml-2 text-gray-500">{info.getValue()}</span>
-            ),
-        }),
-    ];
-
-    return <Table data={data} setData={setData} columns={columns} />
-};
+import { Bars2Icon } from "@heroicons/react/24/solid";
+import { useState } from "react";
+import useTagsHandler from "@/components/TagsInput/TagsHandler";
+import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
+import { Table } from "@/components/Table/Table";
+import { RowOpenAction } from "@/components/Table/RowOpenAction";
+import TagsInput from "@/components/TagsInput/Index";
+import Service from "@/utils/models/Service";
+import { DataPoint } from "@/components/Table/Table";
+
+/**
+ * Table componenet used for displaying services
+ * @param props.services List of services to be displayed by the table
+ */
+export default function ServiceTable({ services }: { services: Service[] }) {
+    const columnHelper = createColumnHelper<Service>();
+    const [data, setData] = useState<DataPoint[]>([...services]);
+    
+    // TODO: Update preset options for services
+    const { presetOptions, setPresetOptions, getTagColor } = useTagsHandler([
+        "administrator",
+        "volunteer",
+        "employee",
+    ])
+
+    const handleRowUpdate = (updatedRow: DataPoint) => {
+        const dataIndex = data.findIndex((row) => row.id === updatedRow.id);
+        if (dataIndex !== -1) {
+            const updatedData = [...data];
+            updatedData[dataIndex] = updatedRow;
+            setData(updatedData);
+        }
+    };
+
+    const columns: ColumnDef<Service, any>[] = [
+        columnHelper.accessor("name", {
+            header: () => (
+                <>
+                    <Bars2Icon className="inline align-top h-4" /> Name
+                </>
+            ),
+            cell: (info) => (
+                <RowOpenAction
+                    title={info.getValue()}
+                    rowData={info.row.original}
+                    onRowUpdate={handleRowUpdate}
+                />
+            ),
+        }),
+        columnHelper.accessor("status", {
+            header: () => (
+                <>
+                    <Bars2Icon className="inline align-top h-4" /> Status
+                </>
+            ),
+            cell: (info) => (
+                <span className="ml-2 text-gray-500">{info.getValue()}</span>
+            ),
+        }),
+        columnHelper.accessor("program", {
+            header: () => (
+                <>
+                    <Bars2Icon className="inline align-top h-4" /> Program
+                </>
+            ),
+            cell: (info) => (
+                <TagsInput 
+                    presetValue={info.getValue()} 
+                    presetOptions={presetOptions} 
+                    setPresetOptions={setPresetOptions} 
+                    getTagColor={getTagColor}                 
+                />
+            ),
+        }),
+        columnHelper.accessor("requirements", {
+            header: () => (
+                <>
+                    <Bars2Icon className="inline align-top h-4" /> Requirements
+                </>
+            ),
+            cell: (info) => (
+                // TODO: Setup different tag handler for requirements
+                <TagsInput
+                    presetValue={info.getValue()[0] !== "" ? info.getValue() : ["N/A"]}
+                    presetOptions={presetOptions}
+                    setPresetOptions={setPresetOptions} 
+                    getTagColor={getTagColor} 
+                />
+            ),
+        }),
+
+        columnHelper.accessor("summary", {
+            header: () => (
+                <>
+                    <Bars2Icon className="inline align-top h-4" /> Summary
+                </>
+            ),
+            cell: (info) => (
+                <span className="ml-2 text-gray-500">{info.getValue()}</span>
+            ),
+        }),
+    ];
+
+    return <Table data={data} setData={setData} columns={columns} />
+};
diff --git a/compass/components/Table/Table.tsx b/compass/components/Table/Table.tsx
index af798c2..4bd5d1c 100644
--- a/compass/components/Table/Table.tsx
+++ b/compass/components/Table/Table.tsx
@@ -47,7 +47,13 @@ const fuzzyFilter = (
     return itemRank.passed;
 };
 
-export const Table = ({ data, columns, setData }: TableProps) => {
+/**
+ * General componenet that holds shared functionality for any data table component
+ * @param props.data List of data, managed through state, to be held in the table
+ * @param props.setData State setter to be used for data manipulation methods
+ * @param props.columns Column definitions made with Tanstack columnHelper
+ */
+export const Table = ({ data, setData, columns }: TableProps) => {
     const columnHelper = createColumnHelper<Resource>();
     useEffect(() => {
         const sortedData = [...data].sort((a, b) =>
diff --git a/compass/components/Table/UserIndex.tsx b/compass/components/Table/UserIndex.tsx
index 5b02a4d..30ec363 100644
--- a/compass/components/Table/UserIndex.tsx
+++ b/compass/components/Table/UserIndex.tsx
@@ -8,6 +8,10 @@ import TagsInput from "@/components/TagsInput/Index";
 import User from "@/utils/models/User";
 import { DataPoint } from "@/components/Table/Table";
 
+/**
+ * Table componenet used for displaying users
+ * @param props.users List of users to be displayed by the table
+ */
 export default function UserTable({ users }: { users: User[] }) {
     const columnHelper = createColumnHelper<User>();    
     const [data, setData] = useState<DataPoint[]>([...users]);