diff --git a/compass/components/Drawer/Drawer.tsx b/compass/components/Drawer/Drawer.tsx
deleted file mode 100644
index 6879f75..0000000
--- a/compass/components/Drawer/Drawer.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-import { FunctionComponent, ReactNode } from "react";
-import React, { useState } from "react";
-import { ChevronDoubleLeftIcon } from "@heroicons/react/24/solid";
-import {
-    StarIcon as SolidStarIcon,
-    EnvelopeIcon,
-    UserIcon,
-} from "@heroicons/react/24/solid";
-import {
-    ArrowsPointingOutIcon,
-    ArrowsPointingInIcon,
-    StarIcon as OutlineStarIcon,
-    ListBulletIcon,
-} from "@heroicons/react/24/outline";
-import TagsInput from "../TagsInput/Index";
-
-type DrawerProps = {
-    title: string;
-    children: ReactNode;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    type?: "button" | "submit" | "reset"; // specify possible values for type
-    disabled?: boolean;
-    editableContent?: any;
-    onSave?: (content: any) => void;
-    rowContent?: any;
-    onRowUpdate?: (content: any) => void;
-};
-
-interface EditContent {
-    content: string;
-    isEditing: boolean;
-}
-
-const Drawer: FunctionComponent<DrawerProps> = ({
-    title,
-    children,
-    onSave,
-    editableContent,
-    rowContent,
-    onRowUpdate,
-}) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [isFull, setIsFull] = useState(false);
-    const [isFavorite, setIsFavorite] = useState(false);
-    const [tempRowContent, setTempRowContent] = useState(rowContent);
-
-    const handleTempRowContentChange = (e) => {
-        const { name, value } = e.target;
-        console.log(name);
-        console.log(value);
-        setTempRowContent((prevContent) => ({
-            ...prevContent,
-            [name]: value,
-        }));
-    };
-
-    const handleEnterPress = (e) => {
-        if (e.key === "Enter") {
-            e.preventDefault();
-            // Update the rowContent with the temporaryRowContent
-            if (onRowUpdate) {
-                onRowUpdate(tempRowContent);
-            }
-        }
-    };
-
-    const toggleDrawer = () => {
-        setIsOpen(!isOpen);
-        if (isFull) {
-            setIsFull(!isFull);
-        }
-    };
-
-    const toggleDrawerFullScreen = () => setIsFull(!isFull);
-
-    const toggleFavorite = () => setIsFavorite(!isFavorite);
-
-    const drawerClassName = `fixed top-0 right-0 w-1/2 h-full bg-white transform ease-in-out duration-300 z-20 ${
-        isOpen ? "translate-x-0 shadow-xl" : "translate-x-full"
-    } ${isFull ? "w-full" : "w-1/2"}`;
-
-    const iconComponent = isFull ? (
-        <ArrowsPointingInIcon className="h-5 w-5" />
-    ) : (
-        <ArrowsPointingOutIcon className="h-5 w-5" />
-    );
-
-    const favoriteIcon = isFavorite ? (
-        <SolidStarIcon className="h-5 w-5" />
-    ) : (
-        <OutlineStarIcon className="h-5 w-5" />
-    );
-
-    const [presetOptions, setPresetOptions] = useState([
-        "administrator",
-        "volunteer",
-        "employee",
-    ]);
-    const [rolePresetOptions, setRolePresetOptions] = useState([
-        "domestic",
-        "community",
-        "economic",
-    ]);
-    const [tagColors, setTagColors] = useState(new Map());
-
-    const getTagColor = (tag: string) => {
-        if (!tagColors.has(tag)) {
-            const colors = [
-                "bg-cyan-100",
-                "bg-blue-100",
-                "bg-green-100",
-                "bg-yellow-100",
-                "bg-purple-100",
-            ];
-            const randomColor =
-                colors[Math.floor(Math.random() * colors.length)];
-            setTagColors(new Map(tagColors).set(tag, randomColor));
-        }
-        return tagColors.get(tag);
-    };
-
-    return (
-        <div>
-            <button
-                className={
-                    "ml-2 text-xs uppercase opacity-0 group-hover:opacity-100 text-gray-500 font-medium border border-gray-200 bg-white shadow hover:bg-gray-50 p-2 rounded-md"
-                }
-                onClick={toggleDrawer}
-            >
-                Open
-            </button>
-            <div className={drawerClassName}></div>
-            <div className={drawerClassName}>
-                <div className="flex items-center justify-between p-4">
-                    <div className="flex flex-row items-center justify-between space-x-2">
-                        <span className="h-5 text-purple-200 w-5">
-                            <UserIcon />
-                        </span>
-                        <h2 className="text-lg text-gray-800 font-semibold">
-                            {rowContent.username}
-                        </h2>
-                    </div>
-                    <div>
-                        <button
-                            onClick={toggleFavorite}
-                            className="py-2 text-gray-500 hover:text-gray-800 mr-2"
-                        >
-                            {favoriteIcon}
-                        </button>
-                        <button
-                            onClick={toggleDrawerFullScreen}
-                            className="py-2 text-gray-500 hover:text-gray-800 mr-2"
-                        >
-                            {iconComponent}
-                        </button>
-                        <button
-                            onClick={toggleDrawer}
-                            className="py-2 text-gray-500 hover:text-gray-800"
-                        >
-                            <ChevronDoubleLeftIcon className="h-5 w-5" />
-                        </button>
-                    </div>
-                </div>
-                <div className="p-4">
-                    <table className="p-4">
-                        <tbody className="items-center">
-                            <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <UserIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Username</td>
-                                </div>
-                                <td className="w-3/4 w-3/4 p-2 pl-0">
-                                    <input
-                                        type="text"
-                                        name="username"
-                                        value={tempRowContent.username}
-                                        onChange={handleTempRowContentChange}
-                                        onKeyDown={handleEnterPress}
-                                        className="ml-2 w-full p-1 focus:outline-gray-200  hover:bg-gray-50"
-                                    />
-                                </td>
-                            </tr>
-                            <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <ListBulletIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Role</td>
-                                </div>
-                                <td className="w-3/4 hover:bg-gray-50">
-                                    <TagsInput
-                                        presetValue={tempRowContent.role}
-                                        presetOptions={presetOptions}
-                                        setPresetOptions={setPresetOptions}
-                                        getTagColor={getTagColor}
-                                        setTagColors={setTagColors}
-                                    />
-                                </td>
-                            </tr>
-                            <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <EnvelopeIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Email</td>
-                                </div>
-                                <td className="w-3/4 p-2 pl-0">
-                                    <input
-                                        type="text"
-                                        name="email"
-                                        value={tempRowContent.email}
-                                        onChange={handleTempRowContentChange}
-                                        onKeyDown={handleEnterPress}
-                                        className="ml-2 w-80 p-1 font-normal hover:text-gray-400 focus:outline-gray-200  hover:bg-gray-50 underline text-gray-500"
-                                    />
-                                </td>
-                            </tr>
-                            <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <ListBulletIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Type of Program</td>
-                                </div>
-                                <td className="w-3/4 hover:bg-gray-50">
-                                    {/* {rowContent.program} */}
-                                    <TagsInput
-                                        presetValue={tempRowContent.program}
-                                        presetOptions={rolePresetOptions}
-                                        setPresetOptions={setRolePresetOptions}
-                                        getTagColor={getTagColor}
-                                        setTagColors={setTagColors}
-                                    />
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <br />
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default Drawer;
diff --git a/compass/components/ResourceDrawer/page.tsx b/compass/components/ResourceDrawer/page.tsx
new file mode 100644
index 0000000..8870f05
--- /dev/null
+++ b/compass/components/ResourceDrawer/page.tsx
@@ -0,0 +1,146 @@
+import React, { useState, FunctionComponent } from "react";
+import {
+    ChevronDoubleLeftIcon,
+    StarIcon as SolidStarIcon,
+    UserIcon,
+} from "@heroicons/react/24/solid";
+import {
+    ArrowsPointingOutIcon,
+    ArrowsPointingInIcon,
+    StarIcon as OutlineStarIcon,
+    ListBulletIcon,
+} from "@heroicons/react/24/outline";
+import TagsInput from "../TagsInput/Index";
+
+type DrawerProps = {
+    rowContent: any; // Define specific types if known for better TypeScript support
+};
+
+const ResourceDrawer: FunctionComponent<DrawerProps> = ({ rowContent }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isFull, setIsFull] = useState(false);
+    const [isFavorite, setIsFavorite] = useState(false);
+
+    const toggleDrawer = () => setIsOpen(!isOpen);
+    const toggleDrawerFullScreen = () => setIsFull(!isFull);
+    const toggleFavorite = () => setIsFavorite(!isFavorite);
+
+    const drawerClassName = `fixed top-0 right-0 ${
+        isFull ? "w-full" : "w-1/2"
+    } h-full bg-white transform ease-in-out duration-300 z-20 ${
+        isOpen ? "translate-x-0 shadow-xl" : "translate-x-full"
+    }`;
+
+    return (
+        <div>
+            <button
+                className="ml-2 text-xs uppercase opacity-0 group-hover:opacity-100 text-gray-500 font-medium border border-gray-200 bg-white shadow hover:bg-gray-50 p-2 rounded-md"
+                onClick={toggleDrawer}
+            >
+                Open
+            </button>
+            <div className={drawerClassName}>
+                <div className="flex items-center justify-between p-4">
+                    <h2 className="text-lg text-gray-800 font-semibold">
+                        {rowContent.name}
+                    </h2>
+                    <div>
+                        <button
+                            onClick={toggleFavorite}
+                            className="py-2 text-gray-500 hover:text-gray-800 mr-2"
+                        >
+                            {isFavorite ? (
+                                <SolidStarIcon className="h-5 w-5" />
+                            ) : (
+                                <OutlineStarIcon className="h-5 w-5" />
+                            )}
+                        </button>
+                        <button
+                            onClick={toggleDrawerFullScreen}
+                            className="py-2 text-gray-500 hover:text-gray-800 mr-2"
+                        >
+                            {isFull ? (
+                                <ArrowsPointingInIcon className="h-5 w-5" />
+                            ) : (
+                                <ArrowsPointingOutIcon className="h-5 w-5" />
+                            )}
+                        </button>
+                        <button
+                            onClick={toggleDrawer}
+                            className="py-2 text-gray-500 hover:text-gray-800"
+                        >
+                            <ChevronDoubleLeftIcon className="h-5 w-5" />
+                        </button>
+                    </div>
+                </div>
+                <div className="p-4">
+                    <table className="p-4">
+                        <tbody className="items-center">
+                            <tr className="w-full text-xs items-center flex flex-row justify-between">
+                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
+                                    <td>
+                                        <UserIcon className="h-4 w-4" />
+                                    </td>
+                                    <td className="w-32">Name</td>
+                                </div>
+                                <td className="w-3/4 w-3/4 p-2 pl-0">
+                                    {rowContent.name}
+                                </td>
+                            </tr>
+                            <tr className="w-full text-xs items-center flex flex-row justify-between">
+                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
+                                    <td>
+                                        <ListBulletIcon className="h-4 w-4" />
+                                    </td>
+                                    <td className="w-32">Link</td>
+                                </div>
+                                <td className="w-3/4 hover:bg-gray-50">
+                                    <a
+                                        href={rowContent.link}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="text-blue-600 underline hover:text-blue-800"
+                                    >
+                                        {rowContent.link}
+                                    </a>
+                                </td>
+                            </tr>
+                            <tr className="w-full text-xs items-center flex flex-row justify-between">
+                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
+                                    <td>
+                                        <ListBulletIcon className="h-4 w-4" />
+                                    </td>
+                                    <td className="w-32">Program</td>
+                                </div>
+                                <td className="w-3/4 hover:bg-gray-50">
+                                    <TagsInput
+                                        presetValue={rowContent.program}
+                                        presetOptions={[
+                                            "domestic",
+                                            "economic",
+                                            "community",
+                                        ]} // Example options
+                                    />
+                                </td>
+                            </tr>
+                            <tr className="w-full text-xs items-center flex flex-row justify-between">
+                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
+                                    <td>
+                                        <ListBulletIcon className="h-4 w-4" />
+                                    </td>
+                                    <td className="w-32">Summary</td>
+                                </div>
+                                <td className="w-3/4 p-2 pl-0">
+                                    {rowContent.summary}
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <br />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ResourceDrawer;
diff --git a/compass/components/ServiceDrawer/page.tsx b/compass/components/ServiceDrawer/page.tsx
new file mode 100644
index 0000000..e942772
--- /dev/null
+++ b/compass/components/ServiceDrawer/page.tsx
@@ -0,0 +1,157 @@
+import React, { useState, FunctionComponent } from "react";
+import {
+    ChevronDoubleLeftIcon,
+    StarIcon as SolidStarIcon,
+    UserIcon,
+} from "@heroicons/react/24/solid";
+import {
+    ArrowsPointingOutIcon,
+    ArrowsPointingInIcon,
+    StarIcon as OutlineStarIcon,
+    ListBulletIcon,
+} from "@heroicons/react/24/outline";
+import TagsInput from "../TagsInput/Index";
+
+type DrawerProps = {
+    rowContent: any; // Define specific types if known for better TypeScript support
+};
+
+const ServiceDrawer: FunctionComponent<DrawerProps> = ({ rowContent }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isFull, setIsFull] = useState(false);
+    const [isFavorite, setIsFavorite] = useState(false);
+
+    const toggleDrawer = () => setIsOpen(!isOpen);
+    const toggleDrawerFullScreen = () => setIsFull(!isFull);
+    const toggleFavorite = () => setIsFavorite(!isFavorite);
+
+    const drawerClassName = `fixed top-0 right-0 ${
+        isFull ? "w-full" : "w-1/2"
+    } h-full bg-white transform ease-in-out duration-300 z-20 ${
+        isOpen ? "translate-x-0 shadow-xl" : "translate-x-full"
+    }`;
+
+    return (
+        <div>
+            <button
+                className="ml-2 text-xs uppercase opacity-0 group-hover:opacity-100 text-gray-500 font-medium border border-gray-200 bg-white shadow hover:bg-gray-50 p-2 rounded-md"
+                onClick={toggleDrawer}
+            >
+                Open
+            </button>
+            <div className={drawerClassName}>
+                <div className="flex items-center justify-between p-4">
+                    <h2 className="text-lg text-gray-800 font-semibold">
+                        {rowContent.name}
+                    </h2>
+                    <div>
+                        <button
+                            onClick={toggleFavorite}
+                            className="py-2 text-gray-500 hover:text-gray-800 mr-2"
+                        >
+                            {isFavorite ? (
+                                <SolidStarIcon className="h-5 w-5" />
+                            ) : (
+                                <OutlineStarIcon className="h-5 w-5" />
+                            )}
+                        </button>
+                        <button
+                            onClick={toggleDrawerFullScreen}
+                            className="py-2 text-gray-500 hover:text-gray-800 mr-2"
+                        >
+                            {isFull ? (
+                                <ArrowsPointingInIcon className="h-5 w-5" />
+                            ) : (
+                                <ArrowsPointingOutIcon className="h-5 w-5" />
+                            )}
+                        </button>
+                        <button
+                            onClick={toggleDrawer}
+                            className="py-2 text-gray-500 hover:text-gray-800"
+                        >
+                            <ChevronDoubleLeftIcon className="h-5 w-5" />
+                        </button>
+                    </div>
+                </div>
+                <div className="p-4">
+                    <table className="p-4">
+                        <tbody className="items-center">
+                            <tr className="w-full text-xs items-center flex flex-row justify-between">
+                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
+                                    <td>
+                                        <UserIcon className="h-4 w-4" />
+                                    </td>
+                                    <td className="w-32">Name</td>
+                                </div>
+                                <td className="w-3/4 w-3/4 p-2 pl-0">
+                                    {rowContent.name}
+                                </td>
+                            </tr>
+                            <tr className="w-full text-xs items-center flex flex-row justify-between">
+                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
+                                    <td>
+                                        <ListBulletIcon className="h-4 w-4" />
+                                    </td>
+                                    <td className="w-32">Status</td>
+                                </div>
+                                <td className="w-3/4 hover:bg-gray-50">
+                                    <a
+                                        href={rowContent.status}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="text-blue-600 underline hover:text-blue-800"
+                                    >
+                                        {rowContent.status}
+                                    </a>
+                                </td>
+                            </tr>
+                            <tr className="w-full text-xs items-center flex flex-row justify-between">
+                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
+                                    <td>
+                                        <ListBulletIcon className="h-4 w-4" />
+                                    </td>
+                                    <td className="w-32">Program</td>
+                                </div>
+                                <td className="w-3/4 hover:bg-gray-50">
+                                    <TagsInput
+                                        presetValue={rowContent.program}
+                                        presetOptions={[
+                                            "domestic",
+                                            "economic",
+                                            "community",
+                                        ]} // Example options
+                                    />
+                                </td>
+                            </tr>
+                            <tr className="w-full text-xs items-center flex flex-row justify-between">
+                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
+                                    <td>
+                                        <ListBulletIcon className="h-4 w-4" />
+                                    </td>
+                                    <td className="w-32">Requirements</td>
+                                </div>
+                                <td className="w-3/4 p-2 pl-0">
+                                    {rowContent.requirements}
+                                </td>
+                            </tr>
+                            <tr className="w-full text-xs items-center flex flex-row justify-between">
+                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
+                                    <td>
+                                        <ListBulletIcon className="h-4 w-4" />
+                                    </td>
+                                    <td className="w-32">Summary</td>
+                                </div>
+                                <td className="w-3/4 p-2 pl-0">
+                                    {rowContent.summary}
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <br />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ServiceDrawer;
diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx
index 931b039..05e35ba 100644
--- a/compass/components/Table/Index.tsx
+++ b/compass/components/Table/Index.tsx
@@ -22,7 +22,7 @@ import {
     Key,
 } from "react";
 import { RowOptionMenu } from "./RowOptionMenu";
-import { RowOpenAction } from "./RowOpenAction";
+import { RowOpenAction } from "./ResourceRowOpenAction";
 import { TableAction } from "./TableAction";
 import {
     AtSymbolIcon,
diff --git a/compass/components/Table/PrimaryTableCell.tsx b/compass/components/Table/PrimaryTableCell.tsx
index 06a85b2..b2dabfb 100644
--- a/compass/components/Table/PrimaryTableCell.tsx
+++ b/compass/components/Table/PrimaryTableCell.tsx
@@ -1,6 +1,6 @@
 /* An extension of TableCell.tsx that includes an "open" button and the drawer.
 For cells in the "primary" (or first) column of the table. */
-import Drawer from "@/components/Drawer/Drawer";
+import Drawer from "@/components/ResourceDrawer/page";
 import { TableCell } from "./TableCell";
 import { SetStateAction, useState } from "react";
 
diff --git a/compass/components/Table/ResourceIndex.tsx b/compass/components/Table/ResourceIndex.tsx
index a714836..1666068 100644
--- a/compass/components/Table/ResourceIndex.tsx
+++ b/compass/components/Table/ResourceIndex.tsx
@@ -22,7 +22,7 @@ import {
     Key,
 } from "react";
 import { RowOptionMenu } from "./RowOptionMenu";
-import { RowOpenAction } from "./RowOpenAction";
+import { ResourceRowOpenAction } from "./ResourceRowOpenAction";
 import { TableAction } from "./TableAction";
 import {
     AtSymbolIcon,
@@ -127,7 +127,7 @@ export const ResourceTable = ({ users }: { users: Resource[] }) => {
                 </>
             ),
             cell: (info) => (
-                <RowOpenAction
+                <ResourceRowOpenAction
                     title={info.getValue()}
                     rowData={info.row.original}
                     onRowUpdate={handleRowUpdate}
diff --git a/compass/components/Table/ResourceRowOpenAction.tsx b/compass/components/Table/ResourceRowOpenAction.tsx
new file mode 100644
index 0000000..5733cb7
--- /dev/null
+++ b/compass/components/Table/ResourceRowOpenAction.tsx
@@ -0,0 +1,28 @@
+import ResourceDrawer from "@/components/ResourceDrawer/page";
+import { ChangeEvent, useState } from "react";
+
+export const ResourceRowOpenAction = ({ title, rowData, onRowUpdate }) => {
+    const [pageContent, setPageContent] = useState("");
+
+    const handleDrawerContentChange = (newContent) => {
+        setPageContent(newContent);
+    };
+
+    return (
+        <div className="font-semibold group flex flex-row items-center justify-between pr-2">
+            {title}
+            <span>
+                {/* Added OnRowUpdate to drawer */}
+                <ResourceDrawer
+                    title="My Drawer Title"
+                    editableContent={pageContent}
+                    rowContent={rowData}
+                    onSave={handleDrawerContentChange}
+                    onRowUpdate={onRowUpdate}
+                >
+                    {pageContent}
+                </ResourceDrawer>
+            </span>
+        </div>
+    );
+};
diff --git a/compass/components/Table/ServiceIndex.tsx b/compass/components/Table/ServiceIndex.tsx
index 6895984..3809231 100644
--- a/compass/components/Table/ServiceIndex.tsx
+++ b/compass/components/Table/ServiceIndex.tsx
@@ -22,7 +22,7 @@ import {
     Key,
 } from "react";
 import { RowOptionMenu } from "./RowOptionMenu";
-import { RowOpenAction } from "./RowOpenAction";
+import { ServiceRowOpenAction } from "./ServiceRowOpenAction";
 import { TableAction } from "./TableAction";
 import {
     AtSymbolIcon,
@@ -127,7 +127,7 @@ export const ServiceTable = ({ users }: { users: Service[] }) => {
                 </>
             ),
             cell: (info) => (
-                <RowOpenAction
+                <ServiceRowOpenAction
                     title={info.getValue()}
                     rowData={info.row.original}
                     onRowUpdate={handleRowUpdate}
diff --git a/compass/components/Table/RowOpenAction.tsx b/compass/components/Table/ServiceRowOpenAction.tsx
similarity index 78%
rename from compass/components/Table/RowOpenAction.tsx
rename to compass/components/Table/ServiceRowOpenAction.tsx
index 9a7103c..796924c 100644
--- a/compass/components/Table/RowOpenAction.tsx
+++ b/compass/components/Table/ServiceRowOpenAction.tsx
@@ -1,7 +1,7 @@
-import Drawer from "@/components/Drawer/Drawer";
+import ServiceDrawer from "@/components/ServiceDrawer/page";
 import { ChangeEvent, useState } from "react";
 
-export const RowOpenAction = ({ title, rowData, onRowUpdate }) => {
+export const ServiceRowOpenAction = ({ title, rowData, onRowUpdate }) => {
     const [pageContent, setPageContent] = useState("");
 
     const handleDrawerContentChange = (newContent) => {
@@ -13,7 +13,7 @@ export const RowOpenAction = ({ title, rowData, onRowUpdate }) => {
             {title}
             <span>
                 {/* Added OnRowUpdate to drawer */}
-                <Drawer
+                <ServiceDrawer
                     title="My Drawer Title"
                     editableContent={pageContent}
                     rowContent={rowData}
@@ -21,7 +21,7 @@ export const RowOpenAction = ({ title, rowData, onRowUpdate }) => {
                     onRowUpdate={onRowUpdate}
                 >
                     {pageContent}
-                </Drawer>
+                </ServiceDrawer>
             </span>
         </div>
     );
diff --git a/compass/components/page/Drawer.tsx b/compass/components/page/Drawer.tsx
index 6879f75..6e1cbbe 100644
--- a/compass/components/page/Drawer.tsx
+++ b/compass/components/page/Drawer.tsx
@@ -169,7 +169,7 @@ const Drawer: FunctionComponent<DrawerProps> = ({
                                     <td>
                                         <UserIcon className="h-4 w-4" />
                                     </td>
-                                    <td className="w-32">Username</td>
+                                    <td className="w-32">Test</td>
                                 </div>
                                 <td className="w-3/4 w-3/4 p-2 pl-0">
                                     <input
diff --git a/compass/package-lock.json b/compass/package-lock.json
index d60d45c..7d4e717 100644
--- a/compass/package-lock.json
+++ b/compass/package-lock.json
@@ -3021,9 +3021,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001612",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001612.tgz",
-            "integrity": "sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==",
+            "version": "1.0.30001668",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001668.tgz",
+            "integrity": "sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -3037,7 +3037,8 @@
                     "type": "github",
                     "url": "https://github.com/sponsors/ai"
                 }
-            ]
+            ],
+            "license": "CC-BY-4.0"
         },
         "node_modules/chalk": {
             "version": "4.1.2",
diff --git a/start.sh b/start.sh
old mode 100644
new mode 100755