diff --git a/backend/user/drizzle/0001_add_admin_user.sql b/backend/user/drizzle/0001_add_admin_user.sql
new file mode 100644
index 0000000000..14989f482a
--- /dev/null
+++ b/backend/user/drizzle/0001_add_admin_user.sql
@@ -0,0 +1 @@
+ALTER TABLE "users" ADD COLUMN "is_admin" boolean DEFAULT false;
\ No newline at end of file
diff --git a/backend/user/drizzle/meta/0001_snapshot.json b/backend/user/drizzle/meta/0001_snapshot.json
new file mode 100644
index 0000000000..1e2c2f42be
--- /dev/null
+++ b/backend/user/drizzle/meta/0001_snapshot.json
@@ -0,0 +1,143 @@
+{
+  "id": "5293f5bb-f4d5-43a4-b2bf-f6ebb241dde1",
+  "prevId": "f01e3d91-1038-48b8-a073-a6a9a8a308fd",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.admin": {
+      "name": "admin",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "action": {
+          "name": "action",
+          "type": "action",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.users": {
+      "name": "users",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "username": {
+          "name": "username",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "first_name": {
+          "name": "first_name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "last_name": {
+          "name": "last_name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "password": {
+          "name": "password",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "failed_attempts": {
+          "name": "failed_attempts",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": false,
+          "default": 0
+        },
+        "unlock_time": {
+          "name": "unlock_time",
+          "type": "timestamp (6) with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "attempted_questions": {
+          "name": "attempted_questions",
+          "type": "integer[]",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "is_admin": {
+          "name": "is_admin",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        },
+        "users_username_unique": {
+          "name": "users_username_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "username"
+          ]
+        }
+      }
+    }
+  },
+  "enums": {
+    "public.action": {
+      "name": "action",
+      "schema": "public",
+      "values": [
+        "SEED"
+      ]
+    }
+  },
+  "schemas": {},
+  "sequences": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
\ No newline at end of file
diff --git a/backend/user/drizzle/meta/_journal.json b/backend/user/drizzle/meta/_journal.json
index e900747ac9..ed929bac0b 100644
--- a/backend/user/drizzle/meta/_journal.json
+++ b/backend/user/drizzle/meta/_journal.json
@@ -8,6 +8,13 @@
       "when": 1728143079049,
       "tag": "0000_initial_schema",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "7",
+      "when": 1730968227580,
+      "tag": "0001_add_admin_user",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/backend/user/src/controllers/auth-check/index.ts b/backend/user/src/controllers/auth-check/index.ts
index 3b7354d43d..eccbdabd26 100644
--- a/backend/user/src/controllers/auth-check/index.ts
+++ b/backend/user/src/controllers/auth-check/index.ts
@@ -16,7 +16,7 @@ export const checkIsAuthed: IRouteHandler = async (req, res) => {
       '[/auth-check/check-is-authed]: Expires At ' + new Date(expireTimeInMillis).toLocaleString()
     );
     const user = await db
-      .select({ name: users.username })
+      .select({ name: users.username, isAdmin: users.isAdmin, email: users.email })
       .from(users)
       .where(eq(users.id, decoded.id))
       .limit(1);
@@ -25,6 +25,8 @@ export const checkIsAuthed: IRouteHandler = async (req, res) => {
       expiresAt: expireTimeInMillis,
       userId: decoded.id,
       username: user.length > 0 ? user[0].name : undefined,
+      email: user.length > 0 ? user[0].email : undefined,
+      isAdmin: user.length > 0 ? user[0].isAdmin : undefined,
     });
   }
 
diff --git a/backend/user/src/lib/db/schema.ts b/backend/user/src/lib/db/schema.ts
index 788efb6362..e4743c1731 100644
--- a/backend/user/src/lib/db/schema.ts
+++ b/backend/user/src/lib/db/schema.ts
@@ -1,4 +1,13 @@
-import { integer, pgEnum, pgTable, smallint, timestamp, uuid, varchar } from 'drizzle-orm/pg-core';
+import {
+  boolean,
+  integer,
+  pgEnum,
+  pgTable,
+  smallint,
+  timestamp,
+  uuid,
+  varchar,
+} from 'drizzle-orm/pg-core';
 
 // Define the user table
 export const users = pgTable('users', {
@@ -11,6 +20,7 @@ export const users = pgTable('users', {
   failedAttempts: smallint('failed_attempts').default(0), // Failed counts
   unlockTime: timestamp('unlock_time', { precision: 6, withTimezone: true }), // If failed counts > limit, block all attempts until this time.
   attemptedQuestions: integer('attempted_questions').array(),
+  isAdmin: boolean('is_admin').default(false),
 });
 
 export const actionEnum = pgEnum('action', ['SEED']);
diff --git a/backend/user/src/lib/db/seed.ts b/backend/user/src/lib/db/seed.ts
index a87aaccc45..1595b03495 100644
--- a/backend/user/src/lib/db/seed.ts
+++ b/backend/user/src/lib/db/seed.ts
@@ -1,10 +1,10 @@
-import { eq } from 'drizzle-orm';
+import { eq, InferInsertModel } from 'drizzle-orm';
 
 import { generatePasswordHash } from '@/lib/passwords';
 
 import { admin as adminTable, db, users as usersTable } from '.';
 
-const TEST_USER_CREDENTIALS = [
+const TEST_USER_CREDENTIALS: Array<InferInsertModel<typeof usersTable>> = [
   {
     username: 'testuser01',
     email: 'test_user_01@email.com',
@@ -19,6 +19,14 @@ const TEST_USER_CREDENTIALS = [
     lastName: 'user02',
     password: '123456789', // For local testing purposes
   },
+  {
+    username: 'adminuser01',
+    email: 'admin_user@email.com',
+    firstName: 'admin',
+    lastName: 'user01',
+    password: 'IamPeerprepAdmin!9',
+    isAdmin: true,
+  },
 ];
 
 const main = async () => {
diff --git a/frontend/.env.local b/frontend/.env.local
deleted file mode 100644
index d2ffc87951..0000000000
--- a/frontend/.env.local
+++ /dev/null
@@ -1,7 +0,0 @@
-FRONTEND_ENV=local
-
-VITE_USER_SERVICE=http://localhost:9001
-VITE_QUESTION_SERVICE=http://localhost:9002
-VITE_COLLAB_SERVICE=http://localhost:9003
-VITE_MATCHING_SERVICE=http://localhost:9004
-VITE_CHAT_SERVICE=http://localhost:9005
diff --git a/frontend/package.json b/frontend/package.json
index 9e790a43d3..3fd0f5add8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -82,6 +82,6 @@
     "tailwindcss": "^3.4.11",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.1"
+    "vite": "^5.4.10"
   }
 }
diff --git a/frontend/src/components/blocks/authed/with-nav-blocker.tsx b/frontend/src/components/blocks/authed/with-nav-blocker.tsx
index b79aa169ee..b8e9ba7e28 100644
--- a/frontend/src/components/blocks/authed/with-nav-blocker.tsx
+++ b/frontend/src/components/blocks/authed/with-nav-blocker.tsx
@@ -1,8 +1,15 @@
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { FC, PropsWithChildren } from 'react';
 import { useBlocker } from 'react-router-dom';
 
 import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from '@/components/ui/dialog';
 
 export const WithNavBlocker: FC<PropsWithChildren> = ({ children }) => {
   const blocker = useBlocker(
@@ -13,21 +20,32 @@ export const WithNavBlocker: FC<PropsWithChildren> = ({ children }) => {
       {blocker.state === 'blocked' && (
         <Dialog modal open>
           <DialogContent className='text-primary border-secondary-foreground/40 flex flex-col gap-8'>
-            <h1 className='text-lg font-medium'>
+            <DialogTitle className='text-primary text-lg'>
               Are you sure you want to navigate away from this page?
-            </h1>
-            <div className='flex flex-row justify-between'>
-              <Button onClick={blocker.reset}>
-                <span>Cancel</span>
-              </Button>
-              <Button variant='destructive' onClick={blocker.proceed}>
-                <span>Leave Page</span>
-              </Button>
-            </div>
-            <div
-              id='blockDialogClose'
-              className='bg-background absolute right-4 top-4 z-50 size-4'
-            />
+            </DialogTitle>
+            <VisuallyHidden>
+              <DialogDescription />
+            </VisuallyHidden>
+            <DialogFooter>
+              <div className='flex w-full flex-row justify-between'>
+                <Button onClick={blocker.reset}>
+                  <span>Cancel</span>
+                </Button>
+                <Button
+                  variant='destructive'
+                  onClick={() => {
+                    localStorage.removeItem('ai_chat_history');
+                    blocker.proceed();
+                  }}
+                >
+                  <span>Leave Page</span>
+                </Button>
+              </div>
+              <div
+                id='blockDialogClose'
+                className='bg-background absolute right-4 top-4 z-50 size-4'
+              />
+            </DialogFooter>
           </DialogContent>
         </Dialog>
       )}
diff --git a/frontend/src/components/blocks/interview/chat/chat-layout.tsx b/frontend/src/components/blocks/interview/chat/chat-layout.tsx
index 8631b12ad4..13f29de57e 100644
--- a/frontend/src/components/blocks/interview/chat/chat-layout.tsx
+++ b/frontend/src/components/blocks/interview/chat/chat-layout.tsx
@@ -110,15 +110,15 @@ export const ChatLayout = ({
                   <Trash2 className='size-4' />
                 </Button>
               </AlertDialogTrigger>
-              <AlertDialogContent>
+              <AlertDialogContent className='border-border'>
                 <AlertDialogHeader>
-                  <AlertDialogTitle>Clear Chat History</AlertDialogTitle>
+                  <AlertDialogTitle className='text-primary'>Clear Chat History</AlertDialogTitle>
                   <AlertDialogDescription>
                     Are you sure you want to clear the chat history? This action cannot be undone.
                   </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
-                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogCancel className='text-primary'>Cancel</AlertDialogCancel>
                   <AlertDialogAction onClick={onClearHistory}>Clear History</AlertDialogAction>
                 </AlertDialogFooter>
               </AlertDialogContent>
diff --git a/frontend/src/components/blocks/interview/chat/chat-markdown.tsx b/frontend/src/components/blocks/interview/chat/chat-markdown.tsx
index 7d08af71c7..992fa0619a 100644
--- a/frontend/src/components/blocks/interview/chat/chat-markdown.tsx
+++ b/frontend/src/components/blocks/interview/chat/chat-markdown.tsx
@@ -31,7 +31,15 @@ export const MarkdownComponent = ({
         code({ children, className, ...rest }) {
           const [copyCodeText, setCopyCodeText] = useState('Copy Code');
 
+          const match = /language-(\w+)/.exec(className || '');
+
           const onCopy = (code: string) => {
+            const language = match?.[1];
+
+            if (language) {
+              localStorage.setItem('ai-asst-lang', language);
+            }
+
             navigator.clipboard.writeText(code);
             setCopyCodeText('Copied!');
             setTimeout(() => {
@@ -39,7 +47,6 @@ export const MarkdownComponent = ({
             }, 3000);
           };
 
-          const match = /language-(\w+)/.exec(className || '');
           return match ? (
             <div className='flex flex-col'>
               <div className='inline-flex translate-y-[10px] items-center justify-between rounded-t-sm bg-gray-700 p-1 text-sm'>
diff --git a/frontend/src/components/blocks/interview/editor.tsx b/frontend/src/components/blocks/interview/editor.tsx
index 664ab34613..e017bfa72f 100644
--- a/frontend/src/components/blocks/interview/editor.tsx
+++ b/frontend/src/components/blocks/interview/editor.tsx
@@ -193,6 +193,14 @@ export const Editor = ({
           height={`${Math.max((height as number) - EXTENSION_HEIGHT, MIN_EDITOR_HEIGHT)}px`}
           value={code}
           onChange={handleCodeChange}
+          onPaste={(_event) => {
+            const lang = localStorage.getItem('ai-asst-lang');
+
+            if (lang) {
+              setLanguage(lang as LanguageName);
+              localStorage.removeItem('ai-assist-lang');
+            }
+          }}
           theme={themePreset}
           lang={language}
           basicSetup={{
diff --git a/frontend/src/components/blocks/interview/question-attempts/attempt-details/code-viewer.tsx b/frontend/src/components/blocks/interview/question-attempts/attempt-details/code-viewer.tsx
index ffbe70a7ce..4dec8573d2 100644
--- a/frontend/src/components/blocks/interview/question-attempts/attempt-details/code-viewer.tsx
+++ b/frontend/src/components/blocks/interview/question-attempts/attempt-details/code-viewer.tsx
@@ -4,6 +4,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 type ICodeProps = {
   code: string;
@@ -24,7 +25,7 @@ export const CodeViewer: FC<ICodeProps> = ({ code, language }) => {
   };
 
   return (
-    <div className='flex size-full flex-col overflow-y-auto rounded-md'>
+    <div className='flex size-full flex-col !overflow-clip rounded-lg'>
       <div className='bg-muted-foreground text-muted dark:bg-muted dark:text-muted-foreground flex w-full items-center justify-between px-3 py-2'>
         <span className='text-sm font-medium'>{language}</span>
         <Button
@@ -41,18 +42,21 @@ export const CodeViewer: FC<ICodeProps> = ({ code, language }) => {
           )}
         </Button>
       </div>
-      <SyntaxHighlighter
-        customStyle={{
-          borderRadius: '0 0 0.3em 0.3em',
-          margin: 0,
-          minHeight: '100px',
-        }}
-        PreTag='div'
-        style={oneDark}
-        language={language}
-      >
-        {code}
-      </SyntaxHighlighter>
+      <ScrollArea className='flex h-full max-h-[calc(100dvh-160px)] flex-col'>
+        <SyntaxHighlighter
+          customStyle={{
+            borderRadius: '0 0 0.3em 0.3em',
+            margin: 0,
+            minHeight: '100px',
+          }}
+          PreTag='div'
+          style={oneDark}
+          language={language}
+          // showLineNumbers
+        >
+          {code}
+        </SyntaxHighlighter>
+      </ScrollArea>
     </div>
   );
 };
diff --git a/frontend/src/components/blocks/interview/question-attempts/attempt-details/main.tsx b/frontend/src/components/blocks/interview/question-attempts/attempt-details/main.tsx
index 09d0ce9536..796f853cdb 100644
--- a/frontend/src/components/blocks/interview/question-attempts/attempt-details/main.tsx
+++ b/frontend/src/components/blocks/interview/question-attempts/attempt-details/main.tsx
@@ -31,7 +31,7 @@ export const AttemptDetailsDialog: FC<PropsWithChildren<AttemptDetailsPaneProps>
       ) : (
         <DialogTrigger>{triggerText}</DialogTrigger>
       )}
-      <DialogContent className='border-border text-primary'>
+      <DialogContent className='border-border text-primary flex max-h-dvh flex-col'>
         <DialogHeader>
           <DialogTitle className=''>
             Attempt&nbsp;<span className='font-mono'>{attemptId}</span>
diff --git a/frontend/src/components/blocks/interview/question-attempts/table.tsx b/frontend/src/components/blocks/interview/question-attempts/table.tsx
index 893dce4f54..75fa505cf0 100644
--- a/frontend/src/components/blocks/interview/question-attempts/table.tsx
+++ b/frontend/src/components/blocks/interview/question-attempts/table.tsx
@@ -89,12 +89,6 @@ export function QuestionAttemptsTable<TValue>({
             noOptionsText='None of the available languages match your search'
           />
         </div>
-        {/* <Input
-          placeholder='Search questions...'
-          value={(table.getColumn('title')?.getFilterValue() as string) ?? ''}
-          onChange={(event) => table.getColumn('title')?.setFilterValue(event.target.value)}
-          className='max-w-sm'
-        /> */}
       </div>
       <div className='border-border sticky top-0 rounded-t-md border'>
         <Table>
diff --git a/frontend/src/components/blocks/interview/room/complete-dialog.tsx b/frontend/src/components/blocks/interview/room/complete-dialog.tsx
index 331f84bcb3..6ddce09452 100644
--- a/frontend/src/components/blocks/interview/room/complete-dialog.tsx
+++ b/frontend/src/components/blocks/interview/room/complete-dialog.tsx
@@ -1,3 +1,4 @@
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { useMutation } from '@tanstack/react-query';
 import { Loader2 } from 'lucide-react';
 import { Dispatch, FC, PropsWithChildren, SetStateAction, useCallback, useState } from 'react';
@@ -7,8 +8,10 @@ import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
+  DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { addQuestionAttempt } from '@/services/question-service';
@@ -69,6 +72,10 @@ export const CompleteDialog: FC<PropsWithChildren<CompleteDialogProps>> = ({
       // Navigate to home page
       setTimeout(() => {
         setCompleting(COMPLETION_STATES.EMPTY, true);
+        setIsOpen(false);
+        // Clear AI chat if moving away
+        localStorage.removeItem('ai-assist-lang');
+        localStorage.removeItem('ai_chat_history');
         navigate('/');
       }, 200);
     },
@@ -81,9 +88,12 @@ export const CompleteDialog: FC<PropsWithChildren<CompleteDialogProps>> = ({
     <Dialog onOpenChange={setIsOpen} open={isOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent className='border-border'>
-        <DialogHeader className='text-primary text-lg font-medium'>
-          Are you sure you wish to mark this question as complete?
+        <DialogHeader className='text-primary'>
+          <DialogTitle>Are you sure you wish to mark this question as complete?</DialogTitle>
         </DialogHeader>
+        <VisuallyHidden>
+          <DialogDescription />
+        </VisuallyHidden>
         <DialogFooter>
           <div className='flex w-full justify-between'>
             <Button
diff --git a/frontend/src/components/blocks/nav-bar.tsx b/frontend/src/components/blocks/nav-bar.tsx
index b93161d248..2f37f05358 100644
--- a/frontend/src/components/blocks/nav-bar.tsx
+++ b/frontend/src/components/blocks/nav-bar.tsx
@@ -9,8 +9,12 @@ import { UserDropdown } from '@/components/common/user-dropdown';
 import { Button } from '@/components/ui/button';
 import { useRouterLocation } from '@/lib/hooks';
 import { ROUTES } from '@/lib/routes';
+import { useAuthedRoute } from '@/stores/auth-store';
+
+import { Badge } from '../ui/badge';
 
 const NavBar = observer(() => {
+  const data = useAuthedRoute();
   const { isLogin, isUnauthedRoute } = useRouterLocation();
 
   return (
@@ -41,7 +45,14 @@ const NavBar = observer(() => {
               </Button>
             )
           ) : (
-            <UserDropdown />
+            <>
+              {data?.isAdmin && (
+                <Badge className='uppercase' variant='easy'>
+                  <span>Admin</span>
+                </Badge>
+              )}
+              <UserDropdown />
+            </>
           )}
         </div>
       </nav>
diff --git a/frontend/src/components/blocks/questions/admin-delete-form.tsx b/frontend/src/components/blocks/questions/admin-delete-form.tsx
new file mode 100644
index 0000000000..1a25232fc4
--- /dev/null
+++ b/frontend/src/components/blocks/questions/admin-delete-form.tsx
@@ -0,0 +1,68 @@
+import { TrashIcon } from '@radix-ui/react-icons';
+import { useMutation } from '@tanstack/react-query';
+import { Loader2 } from 'lucide-react';
+import { Dispatch, FC, SetStateAction } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { adminDeleteQuestion } from '@/services/question-service';
+
+type AdminDeleteFormProps = {
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  questionId: number;
+};
+
+export const AdminDeleteForm: FC<AdminDeleteFormProps> = ({ isOpen, setIsOpen, questionId }) => {
+  const navigate = useNavigate();
+  const {
+    mutate: deleteQuestion,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: (questionId: number) => adminDeleteQuestion(questionId),
+    onSuccess: () => {
+      setTimeout(() => {
+        navigate('/');
+      }, 700);
+    },
+  });
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogContent className='border-border'>
+        <AlertDialogHeader>
+          <AlertDialogTitle className='text-primary flex'>
+            Are you sure you want to delete question:&nbsp;<pre>{questionId}</pre>?
+          </AlertDialogTitle>
+        </AlertDialogHeader>
+        <AlertDialogDescription />
+        <AlertDialogFooter className='flex w-full justify-between'>
+          <AlertDialogCancel className='text-primary' disabled={isPending || isSuccess}>
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={(event) => {
+              event.preventDefault();
+              deleteQuestion(questionId);
+            }}
+            disabled={isPending || isSuccess}
+            className='flex items-center gap-2'
+          >
+            <span>{isPending ? 'Deleting...' : isSuccess ? 'Deleted Successfully' : 'Delete'}</span>
+            {isPending ? <Loader2 className='size-4 animate-spin' /> : <TrashIcon />}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
diff --git a/frontend/src/components/blocks/questions/admin-edit-form.tsx b/frontend/src/components/blocks/questions/admin-edit-form.tsx
new file mode 100644
index 0000000000..86b4ce9ccf
--- /dev/null
+++ b/frontend/src/components/blocks/questions/admin-edit-form.tsx
@@ -0,0 +1,373 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Loader2 } from 'lucide-react';
+import { type Dispatch, type FC, type SetStateAction,useState } from 'react';
+import { useForm } from 'react-hook-form';
+import Markdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import rehypeKatex from 'rehype-katex';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import { z } from 'zod';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { ComboboxExternal } from '@/components/ui/combobox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
+import { getDifficultiesQueryConfig, getTopicsQueryConfig } from '@/routes/match/logic';
+import { adminAddQuestion, adminUpdateQuestion } from '@/services/question-service';
+import { useAuthedRoute } from '@/stores/auth-store';
+import type { IGetQuestionDetailsResponse } from '@/types/question-types';
+
+type AdminEditFormProps = {
+  isFormOpen: boolean;
+  setIsFormOpen: Dispatch<SetStateAction<boolean>>;
+  questionDetails: IGetQuestionDetailsResponse['question'];
+  mode?: 'create' | 'update';
+};
+
+const formSchema = z.object({
+  title: z.string().min(1, 'Title must not be empty'),
+  difficulty: z.string().min(1, 'Choose a difficulty'),
+  topics: z
+    .string()
+    .min(1, 'Topic cannot be empty')
+    .array()
+    .min(1, 'There must be at least 1 topic'),
+  description: z.string().min(1, 'Description must not be empty'),
+});
+
+export const AdminEditForm: FC<AdminEditFormProps> = ({
+  questionDetails,
+  isFormOpen,
+  setIsFormOpen,
+  mode = 'update',
+}) => {
+  const { userId } = useAuthedRoute();
+  const { topic, ...rest } = questionDetails;
+  const [defaultValues, setDefaultValues] = useState({ ...rest, topics: topic });
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues,
+    mode: 'onSubmit',
+  });
+
+  const queryClient = useQueryClient();
+  const {
+    mutate: sendUpdate,
+    isPending,
+    isSuccess,
+    reset,
+  } = useMutation({
+    mutationKey: [questionDetails],
+    mutationFn: (values: z.infer<typeof formSchema>) => {
+      return mode === 'update'
+        ? adminUpdateQuestion({ ...values, questionId: Number.parseInt(questionDetails.id!) })
+        : adminAddQuestion(values);
+    },
+    onSuccess: (_response, variables, _context) => {
+      if (mode === 'update') {
+        queryClient.refetchQueries({
+          queryKey: ['qn', 'details', Number.parseInt(questionDetails.id!)],
+        });
+      } else {
+        queryClient.refetchQueries({
+          queryKey: ['questions', userId],
+        });
+      }
+
+      setTimeout(() => {
+        reset();
+
+        if (mode === 'update') {
+          setDefaultValues(variables);
+          form.reset(variables);
+        } else {
+          form.reset();
+        }
+
+        setIsFormOpen(false);
+      }, 500);
+    },
+  });
+
+  const topicsQuery = useQuery(getTopicsQueryConfig());
+  const difficultiesQuery = useQuery(getDifficultiesQueryConfig());
+
+  const onSubmit = (formValues: z.infer<typeof formSchema>) => {
+    const parsed = formSchema.safeParse(formValues);
+
+    if (parsed.success) {
+      sendUpdate(parsed.data);
+    }
+  };
+
+  return (
+    <>
+      <Dialog
+        open={isFormOpen}
+        onOpenChange={(isOpen) => {
+          if (!isOpen) {
+            form.reset();
+          }
+
+          setIsFormOpen(isOpen);
+        }}
+      >
+        <DialogContent className='border-border flex h-dvh w-dvw max-w-screen-lg flex-col'>
+          <DialogHeader className=''>
+            <DialogTitle className='text-primary'>
+              {mode === 'update' ? 'Edit Question Details' : 'Add a question'}
+            </DialogTitle>
+          </DialogHeader>
+          <Form {...form}>
+            <form
+              className='text-primary flex h-full flex-col gap-4'
+              onSubmit={form.handleSubmit(onSubmit)}
+            >
+              <FormField
+                control={form.control}
+                name='title'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Title</FormLabel>
+                    <FormControl>
+                      <Input disabled={isPending} placeholder='someQuestionTitle' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='difficulty'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Difficulty</FormLabel>
+                    <FormControl>
+                      <Select
+                        disabled={isPending}
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <SelectTrigger className='focus:ring-secondary-foreground/50 data-[placeholder]:text-muted-foreground flex w-min min-w-[150px]'>
+                          <SelectValue placeholder='Select a difficulty' className='' />
+                        </SelectTrigger>
+                        <SelectContent className='border-secondary-foreground/50'>
+                          {(
+                            difficultiesQuery?.data?.difficulties ??
+                            (['Easy', 'Medium', 'Hard'] as const)
+                          ).map((value, index) => (
+                            <SelectItem key={index} value={value}>
+                              {value}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='topics'
+                render={({ field }) => (
+                  <FormItem className='flex flex-col gap-1 sm:col-span-2'>
+                    <div className='flex items-end gap-2'>
+                      <FormLabel>Topics</FormLabel>
+                    </div>
+                    <FormControl>
+                      <div className='flex gap-2'>
+                        <div className='mr-2 flex gap-2'>
+                          <ComboboxExternal
+                            itemName='Topic'
+                            options={Array.from(
+                              new Set([...(topicsQuery.data?.topics ?? []), ...field.value])
+                            ).map((v) => ({
+                              value: v,
+                              label: v.replace(/^[a-zA-Z]/, (c) => c.toUpperCase()),
+                            }))}
+                            chosenOptions={field.value}
+                            setChosenOptions={field.onChange}
+                          />
+                          <Button
+                            className=''
+                            disabled={isPending}
+                            onClick={(e) => {
+                              e.preventDefault();
+                              form.setValue('topics', defaultValues.topics);
+                            }}
+                            size='sm'
+                          >
+                            Reset
+                          </Button>
+                        </div>
+                      </div>
+                    </FormControl>
+                    <div className='flex max-h-[200px] flex-1 flex-wrap gap-2 overflow-auto'>
+                      {field.value.map((value, index) => (
+                        <Badge
+                          key={index}
+                          className='flex size-min gap-2 whitespace-nowrap rounded-full'
+                        >
+                          <span>{value}</span>
+                          <Cross2Icon
+                            className='hover:scale-105 hover:cursor-pointer'
+                            onClick={() => {
+                              if (isPending) {
+                                return;
+                              }
+
+                              form.setValue(
+                                'topics',
+                                field.value.filter((_value, idx) => idx !== index)
+                              );
+                            }}
+                          />
+                        </Badge>
+                      ))}
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='description'
+                render={({ field }) => (
+                  <FormItem className='flex flex-1 flex-col'>
+                    <Tabs defaultValue='edit' className='flex flex-1 flex-col'>
+                      <TabsList className='flex w-min'>
+                        <TabsTrigger value='edit'>Description</TabsTrigger>
+                        <TabsTrigger value='preview'>Preview</TabsTrigger>
+                      </TabsList>
+                      <TabsContent
+                        value='edit'
+                        className='hidden data-[state=active]:flex data-[state=active]:flex-1'
+                      >
+                        <FormControl>
+                          <Textarea
+                            {...field}
+                            className='flex flex-1 resize-none font-mono'
+                            disabled={isPending}
+                            placeholder='lorem ipsum ...'
+                          />
+                        </FormControl>
+                      </TabsContent>
+                      <TabsContent
+                        value='preview'
+                        className='hidden data-[state=active]:flex data-[state=active]:flex-1'
+                      >
+                        <ScrollArea className='border-border flex h-full max-h-[calc(100dvh-424px)] max-w-screen-md flex-1 rounded-lg border p-4'>
+                          <Markdown
+                            rehypePlugins={[rehypeKatex]}
+                            remarkPlugins={[remarkMath, remarkGfm]}
+                            className='prose prose-neutral text-card-foreground prose-strong:text-card-foreground prose-pre:p-0 leading-tight'
+                            components={{
+                              code: ({ children, className, ...rest }) => {
+                                const match = /language-(\w+)/.exec(className || '');
+                                return match ? (
+                                  <SyntaxHighlighter
+                                    customStyle={{
+                                      borderRadius: '0.3em',
+                                      margin: 0,
+                                    }}
+                                    PreTag='div'
+                                    style={oneLight}
+                                    language={match[1]}
+                                  >
+                                    {String(children)}
+                                  </SyntaxHighlighter>
+                                ) : (
+                                  <code
+                                    {...rest}
+                                    className='bg-secondary text-secondary-foreground rounded px-1.5 py-1 font-mono'
+                                  >
+                                    {children}
+                                  </code>
+                                );
+                              },
+                            }}
+                          >
+                            {form.watch('description')}
+                          </Markdown>
+                        </ScrollArea>
+                      </TabsContent>
+                    </Tabs>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className='flex w-full items-center justify-between'>
+                <Button
+                  disabled={isPending || isSuccess}
+                  variant='secondary'
+                  size='sm'
+                  onClick={(event) => {
+                    event.preventDefault();
+                    form.reset();
+                    setIsFormOpen(false);
+                  }}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  disabled={isPending || isSuccess}
+                  onClick={() => {
+                    form.handleSubmit(onSubmit);
+                  }}
+                  size='sm'
+                  className='flex gap-2'
+                >
+                  <span>
+                    {isPending
+                      ? 'Submitting'
+                      : isSuccess
+                        ? `${mode === 'create' ? 'Added' : 'Updated'}! Closing form...`
+                        : 'Save Changes'}
+                  </span>
+                  {isPending && <Loader2 className='size-4 animate-spin' />}
+                </Button>
+              </div>
+            </form>
+          </Form>
+
+          <VisuallyHidden>
+            <DialogDescription />
+            <DialogFooter />
+          </VisuallyHidden>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
diff --git a/frontend/src/components/blocks/questions/details.tsx b/frontend/src/components/blocks/questions/details.tsx
index c831d008d3..a827a35529 100644
--- a/frontend/src/components/blocks/questions/details.tsx
+++ b/frontend/src/components/blocks/questions/details.tsx
@@ -1,19 +1,37 @@
+import { DotsVerticalIcon, Pencil1Icon, TrashIcon } from '@radix-ui/react-icons';
+import { useState } from 'react';
 import Markdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 
 import { Badge } from '@/components/ui/badge';
-import { CardContent,CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
+import { useAuthedRoute } from '@/stores/auth-store';
 import type { IGetQuestionDetailsResponse } from '@/types/question-types';
 
+import { AdminDeleteForm } from './admin-delete-form';
+import { AdminEditForm } from './admin-edit-form';
+
 export const QuestionDetails = ({
   questionDetails,
 }: {
   questionDetails: IGetQuestionDetailsResponse['question'];
 }) => {
+  const { isAdmin } = useAuthedRoute();
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   return (
     <ScrollArea className='h-full'>
       <CardHeader>
@@ -22,6 +40,45 @@ export const QuestionDetails = ({
             <CardTitle className='text-2xl'>
               {questionDetails.id}.&nbsp;{questionDetails.title}
             </CardTitle>
+            {isAdmin && (
+              <>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      className='min-h-none ml-auto flex !h-6 items-center gap-2 rounded-lg px-2'
+                      size='sm'
+                    >
+                      <span>Actions</span>
+                      <DotsVerticalIcon />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent className='border-border flex flex-col gap-1'>
+                    <DropdownMenuItem
+                      onClick={() => setIsFormOpen((isOpen) => !isOpen)}
+                      className='flex w-full justify-between gap-2 hover:cursor-pointer'
+                    >
+                      <span>Edit</span>
+                      <Pencil1Icon />
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => setIsDeleteDialogOpen((isOpen) => !isOpen)}
+                      className='flex w-full justify-between gap-2 bg-red-50/20 text-red-600 hover:cursor-pointer focus:bg-red-100 focus:text-red-600 dark:bg-red-950/40 dark:text-red-500  focus:dark:bg-red-900'
+                    >
+                      <span>Delete</span>
+                      <TrashIcon />
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                <AdminEditForm {...{ questionDetails, isFormOpen, setIsFormOpen }} />
+                <AdminDeleteForm
+                  {...{
+                    isOpen: isDeleteDialogOpen,
+                    setIsOpen: setIsDeleteDialogOpen,
+                    questionId: Number.parseInt(questionDetails.id!),
+                  }}
+                />
+              </>
+            )}
           </div>
           <div className='flex flex-wrap items-center gap-1'>
             <Badge
@@ -44,12 +101,23 @@ export const QuestionDetails = ({
         <Markdown
           rehypePlugins={[rehypeKatex]}
           remarkPlugins={[remarkMath, remarkGfm]}
-          className='prose prose-neutral text-card-foreground prose-strong:text-card-foreground leading-normal'
+          className='prose prose-neutral text-card-foreground prose-strong:text-card-foreground prose-pre:p-0 leading-normal'
           components={{
             code: ({ children, className, ...rest }) => {
-              // const isCodeBlock = /language-(\w+)/.exec(className || '');
-
-              return (
+              const match = /language-(\w+)/.exec(className || '');
+              return match ? (
+                <SyntaxHighlighter
+                  customStyle={{
+                    borderRadius: '0.3em',
+                    margin: 0,
+                  }}
+                  PreTag='div'
+                  style={oneLight}
+                  language={match[1]}
+                >
+                  {String(children)}
+                </SyntaxHighlighter>
+              ) : (
                 <code
                   {...rest}
                   className='bg-secondary text-secondary-foreground rounded px-1.5 py-1 font-mono'
diff --git a/frontend/src/components/blocks/root-layout.tsx b/frontend/src/components/blocks/root-layout.tsx
index 4e24d97eab..e044a51386 100644
--- a/frontend/src/components/blocks/root-layout.tsx
+++ b/frontend/src/components/blocks/root-layout.tsx
@@ -1,14 +1,36 @@
+import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
 
+import { AuthStoreProvider } from '@/stores/auth-store';
+
 import NavBar from './nav-bar';
 
 export function RootLayout() {
+  const [userId, setUserId] = useState('');
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [isAdmin, setIsAdmin] = useState(false);
   return (
     <div className='text-text bg-background flex min-h-screen flex-col overscroll-contain'>
-      <NavBar />
-      <main className='flex flex-1'>
-        <Outlet />
-      </main>
+      <AuthStoreProvider
+        value={{
+          ...{
+            userId,
+            setUserId,
+            email,
+            setEmail,
+            username,
+            setUsername,
+            isAdmin,
+            setIsAdmin,
+          },
+        }}
+      >
+        <NavBar />
+        <main className='flex flex-1'>
+          <Outlet />
+        </main>
+      </AuthStoreProvider>
     </div>
   );
 }
diff --git a/frontend/src/components/blocks/route-guard.tsx b/frontend/src/components/blocks/route-guard.tsx
index e860f017a3..cba39021f2 100644
--- a/frontend/src/components/blocks/route-guard.tsx
+++ b/frontend/src/components/blocks/route-guard.tsx
@@ -11,7 +11,7 @@ import {
 
 import { ROUTES, UNAUTHED_ROUTES } from '@/lib/routes';
 import { checkIsAuthed } from '@/services/user-service';
-import { AuthStoreProvider } from '@/stores/auth-store';
+import { useAuthedRoute } from '@/stores/auth-store';
 
 import { Loading } from './loading';
 
@@ -49,23 +49,33 @@ export const RouteGuard = () => {
       <Await resolve={data.payload}>
         {({ authedPayload, isAuthedRoute, path: _p }) => {
           const [isLoading, setIsLoading] = useState(true);
+          const hooks = useAuthedRoute();
           useEffect(() => {
             if (authedPayload.isAuthed !== isAuthedRoute) {
               navigate(isAuthedRoute ? ROUTES.LOGIN : ROUTES.HOME);
             }
 
+            const { isAdmin, email, username, userId } = authedPayload;
+
+            if (isAdmin && hooks.setIsAdmin) {
+              hooks.setIsAdmin(true);
+            }
+
+            if (email && hooks.setEmail) {
+              hooks.setEmail(email);
+            }
+
+            if (username && hooks.setUsername) {
+              hooks.setUsername(username);
+            }
+
+            if (userId && hooks.setUserId) {
+              hooks.setUserId(userId);
+            }
+
             setIsLoading(false);
           }, [authedPayload]);
-          return (
-            <AuthStoreProvider
-              value={{
-                userId: authedPayload.userId ?? '',
-                username: authedPayload.username ?? '',
-              }}
-            >
-              {isLoading ? <Loading /> : <Outlet />}
-            </AuthStoreProvider>
-          );
+          return isLoading ? <Loading /> : <Outlet />;
         }}
       </Await>
     </Suspense>
diff --git a/frontend/src/components/common/user-dropdown.tsx b/frontend/src/components/common/user-dropdown.tsx
index 051335165e..80204bed34 100644
--- a/frontend/src/components/common/user-dropdown.tsx
+++ b/frontend/src/components/common/user-dropdown.tsx
@@ -7,11 +7,17 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { logout } from '@/services/user-service';
+import { useAuthedRoute } from '@/stores/auth-store';
+
+import { Badge } from '../ui/badge';
 
 export const UserDropdown = () => {
+  const { email, username, isAdmin } = useAuthedRoute();
   const navigate = useNavigate();
 
   const { mutate: sendLogoutRequest } = useMutation({
@@ -32,9 +38,24 @@ export const UserDropdown = () => {
           <PersonIcon />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className='translate-x-[-40px]'>
+      <DropdownMenuContent className='border-border translate-x-[-40px]'>
+        <DropdownMenuLabel className='font-normal'>
+          <div className='flex flex-col space-y-1'>
+            <p className='text-sm font-medium leading-none'>{username}</p>
+            <p className='text-muted-foreground text-xs leading-none'>{email}</p>
+            {isAdmin && (
+              <>
+                <div className='h-1' />
+                <Badge className='w-min uppercase' variant='easy'>
+                  Admin
+                </Badge>
+              </>
+            )}
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
         <DropdownMenuItem className='hover:cursor-pointer' onClick={handleLogout}>
-          Logout
+          Log&nbsp;out
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/frontend/src/components/ui/combobox.tsx b/frontend/src/components/ui/combobox.tsx
index a5ad6c4037..24385d4cd7 100644
--- a/frontend/src/components/ui/combobox.tsx
+++ b/frontend/src/components/ui/combobox.tsx
@@ -21,7 +21,7 @@ type Option = {
   value: string;
 };
 
-type ComboboxProps = {
+type ComboboxMultiProps = {
   options: Array<Option>;
   placeholderText: string;
   noOptionsText: string;
@@ -30,7 +30,7 @@ type ComboboxProps = {
 
 export const ComboboxMulti = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & ComboboxProps
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & ComboboxMultiProps
 >(({ className, options, placeholderText, noOptionsText, setValuesCallback, ...props }, ref) => {
   const [open, setOpen] = React.useState(false);
   const [selectedValues, setSelectedValues] = React.useState<Array<string>>([]);
@@ -100,3 +100,94 @@ export const ComboboxMulti = React.forwardRef<
     </Popover>
   );
 });
+
+type ComboboxExternalProps = {
+  options: Array<{
+    value: string;
+    label: string;
+  }>;
+  itemName: string;
+  chosenOptions: Array<string>;
+  setChosenOptions: (values: Array<string>) => void;
+};
+
+export const ComboboxExternal = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & ComboboxExternalProps
+>(({ className, itemName, options, chosenOptions, setChosenOptions, ...props }, ref) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [inputVal, setInputVal] = React.useState('');
+
+  const onAddNewOption = (newOpt?: string) => {
+    const toAdd = newOpt ?? inputVal;
+    const opt = toAdd.replace(/^[a-zA-Z]/, (c) => c.toUpperCase());
+
+    if (!chosenOptions.includes(opt)) {
+      setChosenOptions([...chosenOptions, opt]);
+    }
+
+    setInputVal('');
+    setIsOpen(false);
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant='outline'
+          role='combobox'
+          aria-expanded={isOpen}
+          className='w-[200px] justify-between'
+        >
+          <span>Select {itemName}...</span>
+          <ChevronsUpDown className='opacity-50' />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent ref={ref} {...props} className={cn('w-[200px] p-0', className)}>
+        <Command>
+          <CommandInput
+            value={inputVal}
+            onValueChange={setInputVal}
+            placeholder={`Search or add ${itemName}...`}
+            className='h-9'
+          />
+          <CommandList>
+            <CommandEmpty
+              autoFocus
+              className='hover:bg-secondary hover:text-secondary-foreground p-3 text-sm hover:cursor-pointer'
+              onClick={() => onAddNewOption()}
+            >
+              Add {`"${inputVal}"`}
+            </CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  className='hover:cursor-pointer'
+                  key={option.value}
+                  value={option.value}
+                  onSelect={(currentValue) => {
+                    if (chosenOptions.includes(currentValue)) {
+                      setChosenOptions(chosenOptions.filter((v) => v !== currentValue));
+                    } else {
+                      setChosenOptions([...chosenOptions, currentValue]);
+                    }
+
+                    setIsOpen(false);
+                  }}
+                >
+                  {option.label}
+                  <Check
+                    className={cn(
+                      'ml-auto',
+                      chosenOptions.includes(option.value) ? 'opacity-100' : 'opacity-0'
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+});
diff --git a/frontend/src/components/ui/form.tsx b/frontend/src/components/ui/form.tsx
index 3fef9a06b8..757072232f 100644
--- a/frontend/src/components/ui/form.tsx
+++ b/frontend/src/components/ui/form.tsx
@@ -88,7 +88,7 @@ const FormLabel = React.forwardRef<
   return (
     <Label
       ref={ref}
-      className={cn(error && 'text-destructive', className)}
+      className={cn(error && 'text-destructive dark:text-red-700', className)}
       htmlFor={formItemId}
       {...props}
     />
@@ -146,7 +146,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn('text-[0.8rem] font-medium text-destructive', className)}
+      className={cn('text-[0.8rem] font-medium text-destructive dark:text-red-700', className)}
       {...props}
     >
       {body}
diff --git a/frontend/src/lib/router.tsx b/frontend/src/lib/router.tsx
index 15577d0129..eb20e1706e 100644
--- a/frontend/src/lib/router.tsx
+++ b/frontend/src/lib/router.tsx
@@ -7,13 +7,10 @@ import { ForgotPassword } from '@/routes/forgot-password';
 import { HomePage } from '@/routes/home';
 import { InterviewRoom, loader as interviewRoomLoader } from '@/routes/interview/[room]';
 import { Login } from '@/routes/login';
+import { Match } from '@/routes/match';
 import { loader as topicsLoader } from '@/routes/match/logic';
-import { Match } from '@/routes/match/main';
+import { loader as questionsLoader, Questions } from '@/routes/questions';
 import { loader as questionDetailsLoader, QuestionDetailsPage } from '@/routes/questions/details';
-import {
-  // loader as questionsLoader,
-  Questions,
-} from '@/routes/questions/main';
 import { SignUp } from '@/routes/signup';
 
 import { queryClient } from './query-client';
@@ -36,6 +33,7 @@ export const router = createBrowserRouter([
               },
               {
                 path: ROUTES.QUESTIONS,
+                loader: questionsLoader,
                 // loader: questionsLoader(queryClient),
                 element: <Questions />,
               },
diff --git a/frontend/src/routes/login/login-form.tsx b/frontend/src/routes/login/login-form.tsx
index 0bf1dc26d3..bea80c3f26 100644
--- a/frontend/src/routes/login/login-form.tsx
+++ b/frontend/src/routes/login/login-form.tsx
@@ -46,7 +46,13 @@ export const LoginForm = () => {
                 <FormItem>
                   <FormLabel>Password</FormLabel>
                   <FormControl>
-                    <Input type='password' disabled={isPending} placeholder='••••••••' {...field} />
+                    <Input
+                      type='password'
+                      autoComplete='new-password'
+                      disabled={isPending}
+                      placeholder='••••••••'
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage />
                   <div className='flex w-full'>
diff --git a/frontend/src/routes/match/index.ts b/frontend/src/routes/match/index.ts
new file mode 100644
index 0000000000..30702f4570
--- /dev/null
+++ b/frontend/src/routes/match/index.ts
@@ -0,0 +1,2 @@
+export * from './logic';
+export * from './main';
diff --git a/frontend/src/routes/match/logic.ts b/frontend/src/routes/match/logic.ts
index 38f6a39c1c..f8f567c95f 100644
--- a/frontend/src/routes/match/logic.ts
+++ b/frontend/src/routes/match/logic.ts
@@ -14,13 +14,13 @@ export interface MatchFormData {
   difficulty: string;
 }
 
-const getTopicsQueryConfig = () =>
+export const getTopicsQueryConfig = () =>
   queryOptions({
     queryKey: ['topics'],
     queryFn: async () => fetchTopics(),
   });
 
-const getDifficultiesQueryConfig = () => {
+export const getDifficultiesQueryConfig = () => {
   return queryOptions({
     queryKey: ['difficulties'],
     queryFn: async () => fetchDifficulties(),
diff --git a/frontend/src/routes/questions/main.tsx b/frontend/src/routes/questions/main.tsx
index 8cc1872a22..1c9d9cd323 100644
--- a/frontend/src/routes/questions/main.tsx
+++ b/frontend/src/routes/questions/main.tsx
@@ -7,6 +7,7 @@ import {
   useEffect,
   useMemo,
 } from 'react';
+import { LoaderFunctionArgs, useLoaderData } from 'react-router-dom';
 
 // import { Await, defer, type LoaderFunctionArgs, useLoaderData } from 'react-router-dom';
 import { WithNavBanner } from '@/components/blocks/authed';
@@ -22,23 +23,17 @@ import type { IGetQuestionsResponse } from '@/types/question-types';
 import { QuestionTable } from './question-table';
 import { columns } from './table-columns';
 
-// type IQuestionListServiceAPIResponse = Awaited<ReturnType<typeof fetchQuestions>>;
-// type IQuestionLoaderReturn = Awaited<ReturnType<ReturnType<typeof loader>>>['data'];
-// type IQuestionLoaderData = { initialPage?: IQuestionListServiceAPIResponse };
-// const getListQuestionsQueryConfig = (pageNumber?: number) =>
-//   queryOptions({
-//     queryKey: ['qn', 'list', pageNumber],
-//     queryFn: async ({ signal: _ }) => fetchQuestions(pageNumber),
-//   });
-// export const loader =
-//   (queryClient: QueryClient) =>
-//   async ({ params: _ }: LoaderFunctionArgs) => {
-//     return defer({
-//       initialPage: queryClient.ensureQueryData(getListQuestionsQueryConfig()),
-//     });
-//   };
+export const loader = (args: LoaderFunctionArgs) => {
+  const route = new URL(args.request.url);
+  const params = route.searchParams;
+  const pageNum = params.get('page');
+  return {
+    pageNum,
+  };
+};
 
 export function Questions() {
+  const { pageNum } = useLoaderData() as ReturnType<typeof loader>;
   const { userId } = useAuthedRoute();
   usePageTitle(ROUTES.QUESTIONS);
   const { crumbs } = useCrumbs();
@@ -47,9 +42,9 @@ export function Questions() {
     IGetQuestionsResponse,
     Error
   >({
-    queryKey: ['questions', userId],
+    queryKey: ['questions', userId, pageNum],
     queryFn: ({ pageParam }) => fetchQuestions(userId, pageParam as number | undefined),
-    initialPageParam: 0,
+    initialPageParam: +(pageNum ?? ''),
     getNextPageParam: (lastPage, pages) => {
       const nextPage = pages.length;
       const totalPages = Math.ceil(lastPage.totalQuestions / ROWS_PER_PAGE);
diff --git a/frontend/src/routes/questions/question-table.tsx b/frontend/src/routes/questions/question-table.tsx
index 49fffed9c1..ef8b2d5f8a 100644
--- a/frontend/src/routes/questions/question-table.tsx
+++ b/frontend/src/routes/questions/question-table.tsx
@@ -3,6 +3,7 @@ import {
   ArrowRightIcon,
   DoubleArrowLeftIcon,
   DoubleArrowRightIcon,
+  PlusIcon,
 } from '@radix-ui/react-icons';
 import {
   ColumnDef,
@@ -13,8 +14,10 @@ import {
   getPaginationRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
+import { AdminEditForm } from '@/components/blocks/questions/admin-edit-form';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Pagination, PaginationContent, PaginationItem } from '@/components/ui/pagination';
@@ -33,6 +36,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { useAuthedRoute } from '@/stores/auth-store';
 
 interface QuestionTableProps<TData, TValue> {
   columns: Array<ColumnDef<TData, TValue>>;
@@ -45,6 +49,9 @@ export function QuestionTable<TData, TValue>({
   data,
   isError,
 }: QuestionTableProps<TData, TValue>) {
+  const { isAdmin } = useAuthedRoute();
+  const [_searchParams, setSearchParams] = useSearchParams();
+  const [isAdminAddFormOpen, setIsAdminAddFormOpen] = useState(false);
   const [pagination, setPagination] = useState({
     pageIndex: 0,
     pageSize: 12,
@@ -72,6 +79,12 @@ export function QuestionTable<TData, TValue>({
     setColumnFilters(value == 'all' ? [] : [{ id: 'attempted', value: value === 'attempted' }]);
   };
 
+  useEffect(() => {
+    const newParams = new URLSearchParams();
+    newParams.set('pageNum', String(pagination.pageIndex));
+    setSearchParams(newParams);
+  }, [pagination.pageIndex]);
+
   return (
     <div className='flex size-full flex-col'>
       <div className='flex items-center py-4'>
@@ -106,6 +119,30 @@ export function QuestionTable<TData, TValue>({
           onChange={(event) => table.getColumn('title')?.setFilterValue(event.target.value)}
           className='max-w-sm'
         />
+        {isAdmin && (
+          <>
+            <Button
+              onClick={() => setIsAdminAddFormOpen((open) => !open)}
+              className='ml-12 flex gap-2'
+              variant='outline'
+              size='sm'
+            >
+              <span>Add Question</span>
+              <PlusIcon />
+            </Button>
+            <AdminEditForm
+              mode='create'
+              isFormOpen={isAdminAddFormOpen}
+              setIsFormOpen={setIsAdminAddFormOpen}
+              questionDetails={{
+                title: '',
+                topic: [],
+                description: '',
+                difficulty: '',
+              }}
+            />
+          </>
+        )}
       </div>
       <div className='border-border rounded-md border'>
         <Table>
diff --git a/frontend/src/routes/signup/signup-form.tsx b/frontend/src/routes/signup/signup-form.tsx
index c7dc25f3a1..29a92a49d8 100644
--- a/frontend/src/routes/signup/signup-form.tsx
+++ b/frontend/src/routes/signup/signup-form.tsx
@@ -58,7 +58,12 @@ export const SignUpForm = () => {
                 <FormItem>
                   <FormLabel>Username</FormLabel>
                   <FormControl>
-                    <Input disabled={isDisabled} placeholder='johnSmith01' {...field} />
+                    <Input
+                      disabled={isDisabled}
+                      autoComplete='username'
+                      placeholder='johnSmith01'
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -92,6 +97,7 @@ export const SignUpForm = () => {
                     <Input
                       type='password'
                       disabled={isDisabled}
+                      autoComplete='new-password'
                       placeholder='••••••••'
                       {...field}
                     />
@@ -110,6 +116,7 @@ export const SignUpForm = () => {
                     <Input
                       type='password'
                       disabled={isDisabled}
+                      autoComplete='new-password'
                       placeholder='••••••••'
                       {...field}
                     />
diff --git a/frontend/src/services/question-service.ts b/frontend/src/services/question-service.ts
index 01cbfb685c..7875d90984 100644
--- a/frontend/src/services/question-service.ts
+++ b/frontend/src/services/question-service.ts
@@ -18,6 +18,14 @@ const QUESTION_SERVICE_ROUTES = {
   GET_DIFFICULTIES: '/questions/difficulties',
   POST_ADD_ATTEMPT: '/questions/newAttempt',
   POST_GET_ATTEMPTS: '/questions/attempts',
+
+  // Question CRUD
+  /* POST */
+  ADD_QUESTION: '/questions/create',
+  /* PUT */
+  UPDATE_QUESTION: '/questions/<questionId>',
+  /* DELETE */
+  DELETE_QUESTION: '/questions/<questionId>',
 };
 
 export const getQuestionDetails = (questionId: number): Promise<IGetQuestionDetailsResponse> => {
@@ -83,3 +91,33 @@ export const getQuestionAttempts = (
     .post(QUESTION_SERVICE_ROUTES.POST_GET_ATTEMPTS, { ...params, limit: 10 })
     .then((res) => res.data as IPostGetQuestionAttemptsResponse);
 };
+
+export const adminAddQuestion = (values: {
+  title: string;
+  difficulty: string;
+  description: string;
+  topics: Array<string>;
+}) => {
+  return questionApiClient
+    .post(QUESTION_SERVICE_ROUTES.ADD_QUESTION, values)
+    .then((res) => res.data as { message?: string });
+};
+
+export const adminUpdateQuestion = (values: {
+  questionId: number;
+  title: string;
+  difficulty: string;
+  description: string;
+  topics: Array<string>;
+}) => {
+  const { questionId, ...rest } = values;
+  return questionApiClient
+    .put(QUESTION_SERVICE_ROUTES.UPDATE_QUESTION.replace(/<questionId>/, String(questionId)), rest)
+    .then((res) => res.data as { message?: string });
+};
+
+export const adminDeleteQuestion = (questionId: number) => {
+  return questionApiClient
+    .delete(QUESTION_SERVICE_ROUTES.DELETE_QUESTION.replace(/<questionId>/, String(questionId)))
+    .then((res) => res.data as { message?: string });
+};
diff --git a/frontend/src/services/user-service.ts b/frontend/src/services/user-service.ts
index d16a088458..908200025e 100644
--- a/frontend/src/services/user-service.ts
+++ b/frontend/src/services/user-service.ts
@@ -43,7 +43,9 @@ export const checkIsAuthed = (param?: { signal: AbortSignal }) => {
           isAuthed: true,
           expiresAt: response.data ? new Date(response.data.expiresAt) : new Date(),
           userId: response.data ? response.data.userId : undefined,
-          username: response.data ? response.data.userName : undefined,
+          username: response.data ? response.data.username : undefined,
+          email: response.data ? response.data.email : undefined,
+          isAdmin: response.data?.isAdmin ?? undefined,
         };
       }
 
diff --git a/frontend/src/stores/auth-store.ts b/frontend/src/stores/auth-store.ts
index 2d59f44ca4..83cb5b19f7 100644
--- a/frontend/src/stores/auth-store.ts
+++ b/frontend/src/stores/auth-store.ts
@@ -1,16 +1,25 @@
-import { createContext, useContext } from 'react';
+import { createContext, type Dispatch, type SetStateAction, useContext } from 'react';
 
-const AuthStore = createContext<{ userId: string; username: string }>({
+type AuthStoreType = {
+  userId: string;
+  setUserId?: Dispatch<SetStateAction<string>>;
+  username: string;
+  setUsername?: Dispatch<SetStateAction<string>>;
+  email: string;
+  setEmail?: Dispatch<SetStateAction<string>>;
+  isAdmin?: boolean;
+  setIsAdmin?: Dispatch<SetStateAction<boolean>>;
+};
+
+const AuthStore = createContext<AuthStoreType>({
   userId: '',
   username: '',
+  email: '',
 });
 
 export const AuthStoreProvider = AuthStore.Provider;
 
 export const useAuthedRoute = () => {
-  const { userId, username } = useContext(AuthStore);
-  return {
-    userId,
-    username,
-  };
+  const data = useContext(AuthStore);
+  return data;
 };
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 02e525055e..49dcd94894 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -65,6 +65,9 @@ const config = {
               'code::after': {
                 content: 'none',
               },
+              '.contains-task-list': {
+                'list-style-type': 'none',
+              },
             }
           }
         }
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
index 0d3d71446a..d3c0143f9d 100644
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -13,7 +13,7 @@
     "noEmit": true,
 
     /* Linting */
-    "strict": true,
+    "strict": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index c8ad306f11..59d780e003 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -7,9 +7,6 @@ import { defineConfig, loadEnv } from 'vite';
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
   return {
-    define: {
-      'process.env.OPENAI_API_KEY': JSON.stringify(env.OPENAI_API_KEY),
-    },
     plugins: [react()],
     build: {
       outDir: 'build',
@@ -26,7 +23,7 @@ export default defineConfig(({ mode }) => {
       proxy: {
         '/user-service': {
           target: env.VITE_USER_SERVICE,
-          rewrite: (path) => path.replace(/^\/user-service/, ''),
+          rewrite: (path) => path?.replace && path.replace(/^\/user-service/, ''),
           changeOrigin: true,
           cookiePathRewrite: {
             '*': '/',
@@ -34,7 +31,7 @@ export default defineConfig(({ mode }) => {
         },
         '/question-service': {
           target: env.VITE_QUESTION_SERVICE,
-          rewrite: (path) => path.replace(/^\/question-service/, ''),
+          rewrite: (path) => path?.replace && path.replace(/^\/question-service/, ''),
           changeOrigin: true,
           cookiePathRewrite: {
             '*': '/',
@@ -42,7 +39,7 @@ export default defineConfig(({ mode }) => {
         },
         '/collaboration-service': {
           target: env.VITE_COLLAB_SERVICE,
-          rewrite: (path) => path.replace(/^\/collaboration-service/, ''),
+          rewrite: (path) => path?.replace && path.replace(/^\/collaboration-service/, ''),
           changeOrigin: true,
           cookiePathRewrite: {
             '*': '/',
@@ -50,15 +47,15 @@ export default defineConfig(({ mode }) => {
         },
         '/matching-service': {
           target: env.VITE_MATCHING_SERVICE,
-          rewrite: (path) => path.replace(/^\/matching-service/, ''),
+          rewrite: (path) => path?.replace && path.replace(/^\/matching-service/, ''),
           changeOrigin: true,
           cookiePathRewrite: {
             '*': '/',
           },
         },
         '/collab-ws': {
-          target: `${env.VITE_COLLAB_SERVICE.replace('http', 'ws')}`,
-          rewrite: (path) => path.replace(/\/collab-ws/, ''),
+          target: `${(env.VITE_COLLAB_SERVICE ?? 'http://collaboration-service').replace('http', 'ws')}`,
+          rewrite: (path) => path?.replace && path.replace(/\/collab-ws/, ''),
           ws: true,
         },
         '/matching-socket/': {
diff --git a/package-lock.json b/package-lock.json
index 6f225842b0..adbbc9ce10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -341,7 +341,7 @@
         "tailwindcss": "^3.4.11",
         "typescript": "^5.5.3",
         "typescript-eslint": "^8.0.1",
-        "vite": "^5.4.1"
+        "vite": "^5.4.10"
       }
     },
     "frontend/node_modules/eslint": {