diff --git a/compass/components/page/Drawer.tsx b/compass/components/page/Drawer.tsx
index 5697235..ffa4304 100644
--- a/compass/components/page/Drawer.tsx
+++ b/compass/components/page/Drawer.tsx
@@ -28,11 +28,7 @@ interface EditContent {
 const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, editableContent, rowContent, onRowUpdate }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [isFull, setIsFull] = useState(false);
-    const [isEditing, setIsEditing] = useState(false);
-    const [editContents, setEditContents] = useState<EditContent[]>(editableContent || [{ content: '', isEditing: true }]);
-    const [currentCardText, setCurrentCardText] = useState("");
     const [currentCardIcon, setCurrentCardIcon] = useState<string>('');
-    const [error, setError] = useState<string | null>(null);
     const [isFavorite, setIsFavorite] = useState(false);
     const [tempRowContent, setTempRowContent] = useState(rowContent);
 
@@ -66,55 +62,12 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
     const toggleDrawerFullScreen = () => setIsFull(!isFull);
 
     const toggleFavorite = () => setIsFavorite(!isFavorite);
-    
-    const handleCardClick = (text: string, icon: ReactElement) => {
-        console.log('click')
-        toggleDrawer();
-        setCurrentCardText(text);
-        setCurrentCardIcon(icon)};
 
-    const toggleEditing = () => setIsEditing(!isEditing);
-    const handleInputChange = (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
-        const newContents = editContents.map((item, idx) => idx === index ? { ...item, content: event.target.value } : item);
-        setEditContents(newContents);
-    };
     const drawerClassName = `fixed top-0 right-0 h-full bg-white transform ease-in-out duration-300 ${
         isOpen ? "translate-x-0 shadow-xl" : "translate-x-full"
         
     } ${isFull ? "w-full" : "w-1/2"}`;
 
-    const addInput = () => {
-        setEditContents([...editContents, { content: '', isEditing: true }]);
-    };
-    
-    const saveIndividualChange = (index: number) => {
-        const content = editContents[index].content.trim();
-        if (!content) {
-            setError("Input cannot be empty.");
-            return;
-        }
-        
-        setError(null); // Clear error state if input passes validation
-    
-        const updatedContents = editContents.map((item, idx) => idx === index ? { ...item, isEditing: false } : item);
-        setEditContents(updatedContents);
-        
-        if (onSave) {
-            onSave(updatedContents);
-        }
-    };
-
-    const toggleEdit = (index: number) => {
-        const newContents = editContents.map((item, idx) => idx === index ? { ...item, isEditing: !item.isEditing } : item);
-        setEditContents(newContents);
-    };
-
-    const deleteInput = (index: number) => {
-        // Filter out the input at the given index
-        const filteredContents = editContents.filter((_, idx) => idx !== index);
-        setEditContents(filteredContents);
-    };
-
     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" />
@@ -128,7 +81,7 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
                 <div className="flex items-center justify-between p-4 border-b">
                     <div className="flex flex-row items-center justify-between space-x-2">
                         <span className="h-5 text-purple-700 w-5">{currentCardIcon}</span>                    
-                        <h2 className = "text-sm text-gray-800 font-semibold">{rowContent.username}</h2>
+                        <h2 style={{ fontSize: '20px' }} className = "text-sm 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">
@@ -144,40 +97,54 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
                 </div>
                 <div className="p-4">
                     <table className="p-4">
-                        <tbody style={{fontWeight: 'normal'}}>
-                            <tr>
-                                <td style={{paddingRight: '5px'}}><UserIcon className="h-5 w-5" /></td>
-                                <td style={{fontSize:17, paddingRight: '30px'}}>Username</td>
-                                <td style={{fontSize:17}}>
+                        <tbody>
+                            <tr className="w-full text-sm items-center flex flex-row justify-between">
+                                <div className="flex flex-row space-x-2 text-gray-500">
+                                <td><UserIcon className="h-4 w-4" /></td>
+                                <td className="w-20">Username</td>
+                                </div>
+                                <td className="w-3/4">
                                     <input
-                                        type="text"
-                                        name="username"
-                                        value={tempRowContent.username}
-                                        onChange={handleTempRowContentChange}
-                                        onKeyDown={handleEnterPress}
+                                    type="text"
+                                    name="username"
+                                    value={tempRowContent.username}
+                                    onChange={handleTempRowContentChange}
+                                    onKeyDown={handleEnterPress}
+                                    className="w-full p-1 focus:outline-gray-200  hover:bg-gray-50"
                                 /></td>
                             </tr>
-                            <tr>
-                                <td style={{paddingRight: '5px'}}><ListBulletIcon className="h-5 w-5" /></td>
-                                <td style={{fontSize:17, paddingRight: '30px'}}>Role</td>
-                                <td style={{fontSize:17}}>{rowContent.role}</td>
+                            <tr className="w-full text-sm items-center flex flex-row justify-between">
+                                <div className="flex flex-row space-x-2 text-gray-500">
+                                <td><ListBulletIcon className="h-4 w-4" /></td>
+                                <td className="w-20">Role</td>
+                                </div>
+                                <td className="w-3/4">
+                                    {rowContent.role}
+                                </td>
                             </tr>
-                            <tr>
-                                <td style={{paddingRight: '5px'}}><EnvelopeIcon className="h-5 w-5" /></td>
-                                <td style={{fontSize:17, paddingRight: '30px'}}>Email</td>
-                                <td style={{fontSize:17}}>
+                            <tr className="w-full text-sm items-center flex flex-row justify-between">
+                                <div className="flex flex-row space-x-2 text-gray-500">
+                                <td><EnvelopeIcon className="h-4 w-4" /></td>
+                                <td className="w-20">Email</td>
+                                </div>
+                                <td className="w-3/4">
                                     <input
                                     type="text"
                                     name="email"
                                     value={tempRowContent.email}
                                     onChange={handleTempRowContentChange}
                                     onKeyDown={handleEnterPress}
+                                    className="w-full p-1 focus:outline-gray-200  hover:bg-gray-50"
                                 /></td>
                             </tr>
-                            <tr>
-                                <td style={{paddingRight: '5px'}}><ListBulletIcon className="h-5 w-5" /></td>
-                                <td style={{fontSize:17, paddingRight: '70px'}}>Type of Program</td>
-                                <td style={{fontSize:17}}>{rowContent.program}</td>
+                            <tr className="w-full text-sm items-center flex flex-row justify-between">
+                                <div className="flex flex-row space-x-2 text-gray-500">
+                                <td><ListBulletIcon className="h-4 w-4" /></td>
+                                <td className="w-20">Type of Program</td>
+                                </div>
+                                <td className="w-3/4">
+                                    {rowContent.program}
+                                </td>
                             </tr>
                         </tbody>
                     </table>