diff --git a/backend/api-gateway/app/types/submission.ts b/backend/api-gateway/app/types/submission.ts
new file mode 100644
index 000000000..5368b7ade
--- /dev/null
+++ b/backend/api-gateway/app/types/submission.ts
@@ -0,0 +1,13 @@
+import { z } from "zod";
+import { userSchema } from "./user";
+
+export const submissionSchema = z.object({
+  id: z.number(),
+  questionId: z.string(),
+  users: z.array(userSchema),
+  code: z.string(),
+  lang: z.string(),
+  createdAt: z.string(),
+});
+
+export type Submission = z.infer<typeof submissionSchema>;
diff --git a/backend/api-gateway/app/types/usersService.ts b/backend/api-gateway/app/types/usersService.ts
index 034116e54..2f257cc8d 100644
--- a/backend/api-gateway/app/types/usersService.ts
+++ b/backend/api-gateway/app/types/usersService.ts
@@ -1,12 +1,15 @@
 import { z } from "zod";
 import { HTTP_STATUS } from "./http";
 import { userSchema } from "./user";
+import { submissionSchema } from "./submission";
 
 export const getUserSchema = z.union([
   z.object({
     status: z.literal(HTTP_STATUS.SUCCESS),
     data: z.object({
-      user: userSchema,
+      user: userSchema.extend({
+        submissions: z.array(submissionSchema),
+      }),
     }),
   }),
   z.object({
diff --git a/backend/question-service/server/app/routers/admin.py b/backend/question-service/server/app/routers/admin.py
index a97c87a87..f6613ea09 100644
--- a/backend/question-service/server/app/routers/admin.py
+++ b/backend/question-service/server/app/routers/admin.py
@@ -28,6 +28,12 @@ async def create_question(question: dict):
     if collection.find_one({"id": question["id"]}):
         raise HTTPException(
             status_code=400, detail="Question with the same id already exists.")
+
+    # Check if question with the same title already exists
+    if collection.find_one({"title": question["title"]}):
+        raise HTTPException(
+            status_code=400, detail="Question with the same title already exists.")
+    
     result = collection.insert_one(question)
 
     question["_id"] = str(question["_id"])
@@ -41,6 +47,11 @@ async def update_question(question_id: int, updated_data: dict):
     # Check if updated_data is empty
     if not updated_data:
         raise HTTPException(status_code=400, detail="Updated data not provided.")
+    
+    # Check if question with the same title already exists
+    if collection.find_one({"title": updated_data["title"]}):
+        raise HTTPException(
+            status_code=400, detail="Question with the same title already exists.")
 
     result = collection.update_one({"id": question_id}, {"$set": updated_data})
 
diff --git a/backend/user-service/app/prisma/schema.prisma b/backend/user-service/app/prisma/schema.prisma
index cbd2c8bb2..4dff76422 100644
--- a/backend/user-service/app/prisma/schema.prisma
+++ b/backend/user-service/app/prisma/schema.prisma
@@ -21,7 +21,7 @@ model Submission {
   id         Int      @id @default(autoincrement())
   questionId String
   users      User[]
-  code       String
+  code       String   @db.LongText
   lang       String
   createdAt  DateTime @default(now())
 }
diff --git a/backend/user-service/app/services/user.service.ts b/backend/user-service/app/services/user.service.ts
index 05e3bb26b..fc7174c5c 100644
--- a/backend/user-service/app/services/user.service.ts
+++ b/backend/user-service/app/services/user.service.ts
@@ -20,9 +20,15 @@ export const userService = {
   delete: (id: Prisma.UserDeleteArgs["where"]["id"]) =>
     db.user.delete({ where: { id } }),
   findById: (id: Prisma.UserFindUniqueArgs["where"]["id"]) =>
-    db.user.findUnique({ where: { id } }),
+    db.user.findUnique({
+      where: { id },
+      include: { submissions: { include: { users: true } } },
+    }),
   findByEmail: (email: Prisma.UserFindUniqueArgs["where"]["email"]) =>
-    db.user.findUnique({ where: { email } }),
+    db.user.findUnique({
+      where: { email },
+      include: { submissions: { include: { users: true } } },
+    }),
   update: (
     id: Prisma.UserUpdateArgs["where"]["id"],
     data: Prisma.UserUpdateInput
diff --git a/docker-compose.yml b/docker-compose.yml
index 4dc7a49fa..45207d13e 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -31,9 +31,6 @@ services:
     volumes:
       - ./backend/user-service/app:/app:delegated
       - /app/node_modules
-    # depends_on:
-    #   user-service-db:
-    #     condition: service_healthy
     ports:
       - "8002:80"
 
@@ -71,7 +68,7 @@ services:
       - /app/node_modules
     ports:
       - "8005:80"
-  
+
   communication-service:
     container_name: communication-service
     build:
@@ -83,34 +80,6 @@ services:
     ports:
       - "8006:80"
 
-  # user-service-db:
-  #   container_name: user-service-db
-  #   build:
-  #     context: ./backend/user-service/db
-  #     dockerfile: Dockerfile.dev
-  #   restart: always
-  #   environment:
-  #     MONGO_INITDB_ROOT_USERNAME: root
-  #     MONGO_INITDB_ROOT_PASSWORD: prisma
-  #     MONGO_REPLICA_HOST: 127.0.0.1
-  #     MONGO_REPLICA_PORT: 27018
-  #   ports:
-  #     - 27018:27018
-  #   healthcheck:
-  #     test:
-  #       [
-  #         "CMD",
-  #         "mongo",
-  #         "admin",
-  #         "--port",
-  #         "27018",
-  #         "--eval",
-  #         "db.adminCommand('ping')",
-  #       ]
-  #     interval: 5s
-  #     timeout: 2s
-  #     retries: 20
-
   question-service-db:
     container_name: question-service-db
     image: mongo:latest
diff --git a/frontend/app/package-lock.json b/frontend/app/package-lock.json
index 4372e8609..57f6efca2 100644
--- a/frontend/app/package-lock.json
+++ b/frontend/app/package-lock.json
@@ -3462,9 +3462,9 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/axios": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz",
-      "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.1.tgz",
+      "integrity": "sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==",
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -8898,9 +8898,9 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "axios": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz",
-      "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.1.tgz",
+      "integrity": "sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==",
       "requires": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
diff --git a/frontend/app/src/components/Card/Card.tsx b/frontend/app/src/components/Card/Card.tsx
index 0db5734d7..2b061f8f8 100644
--- a/frontend/app/src/components/Card/Card.tsx
+++ b/frontend/app/src/components/Card/Card.tsx
@@ -8,9 +8,9 @@ interface CardProps extends BoxProps {
 export const Card = ({ children, ...boxProps }: CardProps) => {
   return (
     <Box
-      backgroundColor="light.500"
+      backgroundColor="dark.900"
       borderRadius="1.5rem"
-      borderColor="rgba(255,255,255,0.08)"
+      borderColor="dark.700"
       borderWidth="1px"
       boxShadow="0 4px 12px rgba(0,0,0,.24)"
       p="2rem"
diff --git a/frontend/app/src/components/CustomAlert/CustomAlert.tsx b/frontend/app/src/components/CustomAlert/CustomAlert.tsx
index 1b8238ffd..b6d382a58 100644
--- a/frontend/app/src/components/CustomAlert/CustomAlert.tsx
+++ b/frontend/app/src/components/CustomAlert/CustomAlert.tsx
@@ -33,18 +33,25 @@ export const CustomAlert = ({
       isOpen={isOpen}
       leastDestructiveRef={leastDestructiveRef}
       onClose={onClose}
+      isCentered
     >
       <AlertDialogOverlay>
         <AlertDialogContent>
-          <AlertDialogHeader fontSize="lg" fontWeight="bold">
+          <AlertDialogHeader fontSize="lg" fontWeight="medium">
             {title}
           </AlertDialogHeader>
           <AlertDialogBody>{description}</AlertDialogBody>
           <AlertDialogFooter>
             {!disableCancel && <Button onClick={onClose}>Cancel</Button>}
-            <CustomButton colorScheme="primary" onClick={onConfirm} ml={3}>
-              {confirmButtonText}
-            </CustomButton>
+            {title === "Leave Room" ? (
+              <Button ml={2} onClick={onConfirm} variant="outlineWarning">
+                {confirmButtonText}
+              </Button>
+            ) : (
+              <CustomButton ml={2} onClick={onConfirm}>
+                {confirmButtonText}
+              </CustomButton>
+            )}
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialogOverlay>
diff --git a/frontend/app/src/components/Dropdown/Dropdown.tsx b/frontend/app/src/components/Dropdown/Dropdown.tsx
index cedf19c4e..303e4db8e 100644
--- a/frontend/app/src/components/Dropdown/Dropdown.tsx
+++ b/frontend/app/src/components/Dropdown/Dropdown.tsx
@@ -14,13 +14,19 @@ interface DropdownProps {
   options: Option[];
   placeholder?: string;
   value?: any;
-  onChangeHandler?: ((newValue: SingleValue<{
-    label: string;
-    value: any;
-  }>, actionMeta: ActionMeta<{
-    label: string;
-    value: any;
-  }>) => void) | undefined
+  onChangeHandler?:
+    | ((
+        newValue: SingleValue<{
+          label: string;
+          value: any;
+        }>,
+        actionMeta: ActionMeta<{
+          label: string;
+          value: any;
+        }>,
+      ) => void)
+    | undefined;
+  width?: number;
 }
 
 export const Dropdown = ({
@@ -29,11 +35,14 @@ export const Dropdown = ({
   options,
   placeholder,
   value,
-  onChangeHandler
+  onChangeHandler,
+  width,
 }: DropdownProps) => {
   return (
-    <VStack align="left">
-      <Text textStyle="text-sm" fontWeight="bold">{title}</Text>
+    <VStack align="left" width={width}>
+      <Text fontSize="sm" fontWeight="medium">
+        {title}
+      </Text>
       <Select
         // @ts-expect-error Issue with chakra-react-select types (https://github.com/csandman/chakra-react-select/issues/273)
         chakraStyles={singleSelectStyles(size)}
@@ -43,9 +52,11 @@ export const Dropdown = ({
           value,
         }))}
         onChange={onChangeHandler ?? undefined}
-        value={options.find((option) => {
-          return option.value === value
-        }) ?? undefined}
+        value={
+          options.find(option => {
+            return option.value === value;
+          }) ?? undefined
+        }
       />
     </VStack>
   );
diff --git a/frontend/app/src/components/Layout/AvatarMenu.tsx b/frontend/app/src/components/Layout/AvatarMenu.tsx
index cef950534..d035d2ea0 100644
--- a/frontend/app/src/components/Layout/AvatarMenu.tsx
+++ b/frontend/app/src/components/Layout/AvatarMenu.tsx
@@ -31,12 +31,6 @@ export const AvatarMenu = ({ user }: AvatarMenuProps) => {
         size="sm"
       />
       <MenuList>
-        <MenuItem
-          icon={<Icon as={BiUser} />}
-          onClick={() => navigate(`${ROUTE.PROFILE}/${user.id}`)}
-        >
-          Profile
-        </MenuItem>
         <MenuItem
           icon={<Icon as={BiCog} />}
           onClick={() => navigate(`${ROUTE.SETTINGS}`)}
diff --git a/frontend/app/src/components/Layout/Navbar.tsx b/frontend/app/src/components/Layout/Navbar.tsx
index cea79d135..23d44d7b2 100644
--- a/frontend/app/src/components/Layout/Navbar.tsx
+++ b/frontend/app/src/components/Layout/Navbar.tsx
@@ -11,11 +11,6 @@ type NavbarProps = {
   isBorderless?: boolean;
 };
 
-const NAVBAR_TABS: { name: string; href: string }[] = [
-  { name: "Home", href: ROUTE.HOME },
-  { name: "Questions", href: ROUTE.QUESTIONS },
-];
-
 export const Navbar = ({ isBorderless }: NavbarProps) => {
   const { data } = useAuth();
 
@@ -23,6 +18,12 @@ export const Navbar = ({ isBorderless }: NavbarProps) => {
   const roomId = user?.roomId;
   const { pathname } = useLocation();
 
+  const NAVBAR_TABS: { name: string; href: string }[] = [
+    { name: "Home", href: ROUTE.HOME },
+    { name: "Profile", href: `${ROUTE.PROFILE}/${user?.id}` },
+    { name: "Questions", href: ROUTE.QUESTIONS },
+  ];
+
   return (
     <Box
       borderBottomWidth={isBorderless ? "0px" : "1px"}
@@ -48,11 +49,11 @@ export const Navbar = ({ isBorderless }: NavbarProps) => {
             >
               <HStack
                 alignItems="center"
-                background="light.500"
-                borderRadius={32}
-                px={3}
-                py={1.5}
-                border="1px solid rgba(255,255,255,.08)"
+                background="dark.800"
+                border="1px"
+                borderColor="dark.700"
+                borderRadius="full"
+                p={1}
               >
                 {NAVBAR_TABS.map(tab => (
                   <Link
@@ -63,13 +64,13 @@ export const Navbar = ({ isBorderless }: NavbarProps) => {
                       pathname.includes(tab.href) ? "dark.100" : "dark.300"
                     }
                     backgroundColor={
-                      pathname.includes(tab.href) ? "dark.950" : ""
+                      pathname.includes(tab.href) ? "dark.900" : ""
                     }
                     px={4}
-                    py={2}
-                    borderRadius={32}
+                    py={1.5}
+                    borderRadius="full"
                     variant="nav"
-                    fontWeight="semibold"
+                    fontWeight="medium"
                   >
                     {tab.name}
                   </Link>
diff --git a/frontend/app/src/components/Layout/SessionBar.tsx b/frontend/app/src/components/Layout/SessionBar.tsx
index a7c53414a..8ccfe80b7 100644
--- a/frontend/app/src/components/Layout/SessionBar.tsx
+++ b/frontend/app/src/components/Layout/SessionBar.tsx
@@ -19,21 +19,21 @@ export const SessionBar = ({ roomId }: SessionBarProps) => {
       m="auto"
       h="fit-content"
       w="fit-content"
-      px={4}
-      py={3}
-      borderWidth="2px"
+      px={5}
+      py={2.5}
+      borderWidth="1px"
       borderRadius="full"
       borderColor="primary.500"
-      background="light.700"
+      background="dark.900"
       onClick={() => navigate(`${ROUTE.ROOM}/${roomId}`)}
       cursor="pointer"
       _hover={{
         borderColor: "primary.300",
-        background: "light.500",
+        background: "dark.700",
       }}
       transition="all 0.2s"
     >
-      <Text textStyle="text-sm" fontWeight="semibold">
+      <Text textStyle="text-sm" fontWeight="medium">
         Session in progress
       </Text>
     </Box>
diff --git a/frontend/app/src/components/Toast/Toast.tsx b/frontend/app/src/components/Toast/Toast.tsx
index 082294063..a089e49fa 100644
--- a/frontend/app/src/components/Toast/Toast.tsx
+++ b/frontend/app/src/components/Toast/Toast.tsx
@@ -9,16 +9,17 @@ interface ToastProps {
 
 export const Toast = ({ status, message, onClose }: ToastProps) => (
   <HStack
-    bg="dark.950"
+    bg="dark.900"
     border="1px"
     borderRadius="md"
     borderColor={`${status === "success" ? "green" : "red"}.900`}
-    color={`${status === "success" ? "green" : "red"}.600`}
+    color={`${status === "success" ? "green" : "red"}.500`}
     justifyContent="space-between"
     p={2}
+    shadow="xl"
   >
     <Icon as={status === "success" ? PiCheckCircleBold : PiXCircleBold} />
-    <Text color={`${status === "success" ? "green" : "red"}.600`} fontSize="sm">
+    <Text color="dark.100" fontSize="sm">
       {message}
     </Text>
     <IconButton
diff --git a/frontend/app/src/components/UserInfo/UserInfo.tsx b/frontend/app/src/components/UserInfo/UserInfo.tsx
index d5cad7e40..d707621ef 100644
--- a/frontend/app/src/components/UserInfo/UserInfo.tsx
+++ b/frontend/app/src/components/UserInfo/UserInfo.tsx
@@ -12,11 +12,15 @@ export const UserInfo = ({ user }: UserInfoProps) => {
   }
 
   return (
-    <HStack gap="0.75rem">
+    <HStack gap={4}>
       <Avatar name={user?.name} src={user?.avatarUrl} />
-      <VStack alignItems="start" gap="0.2rem">
-        <Text textStyle="heading-sm">{user?.name}</Text>
-        <Text textStyle="text-sm">{user?.email}</Text>
+      <VStack alignItems="start" spacing={0}>
+        {user.name && (
+          <Text fontWeight="medium" fontSize="sm">
+            {user.name}
+          </Text>
+        )}
+        {user.email && <Text fontSize="sm">{user.email}</Text>}
       </VStack>
     </HStack>
   );
diff --git a/frontend/app/src/components/forms/ControlledSelect.tsx b/frontend/app/src/components/forms/ControlledSelect.tsx
index fe3a9cb3f..5eac840cb 100644
--- a/frontend/app/src/components/forms/ControlledSelect.tsx
+++ b/frontend/app/src/components/forms/ControlledSelect.tsx
@@ -83,7 +83,7 @@ const ControlledSelect = <
           ),
         }}
         options={options}
-        selectedOptionColorScheme="dark.800"
+        selectedOptionColorScheme="dark.700"
         {...selectProps}
         {...field}
       />
diff --git a/frontend/app/src/features/matching/components/SelectPreferencesCard.tsx b/frontend/app/src/features/matching/components/SelectPreferencesCard.tsx
index 9d4869bc6..a38fe68f7 100644
--- a/frontend/app/src/features/matching/components/SelectPreferencesCard.tsx
+++ b/frontend/app/src/features/matching/components/SelectPreferencesCard.tsx
@@ -115,7 +115,7 @@ export const SelectPreferencesCard = React.memo(({ joinCallback }: Props) => {
           Select question preferences
         </Text>
         <FormControl isInvalid={!!errors["difficulties"]}>
-          <FormLabel color="light.100">Difficulty</FormLabel>
+          <FormLabel color="dark.100">Difficulty</FormLabel>
           <Controller
             name="difficulties"
             control={control}
@@ -135,7 +135,7 @@ export const SelectPreferencesCard = React.memo(({ joinCallback }: Props) => {
           </FormErrorMessage>
         </FormControl>
         <FormControl isInvalid={!!errors["topics"]}>
-          <FormLabel color="light.100">Category</FormLabel>
+          <FormLabel color="dark.100">Category</FormLabel>
           <Controller
             name="topics"
             control={control}
diff --git a/frontend/app/src/features/questions/api/useCreateQuestion.tsx b/frontend/app/src/features/questions/api/useCreateQuestion.tsx
index e7ae0cca0..d32ab03c6 100644
--- a/frontend/app/src/features/questions/api/useCreateQuestion.tsx
+++ b/frontend/app/src/features/questions/api/useCreateQuestion.tsx
@@ -31,16 +31,5 @@ export const useCreateQuestion = () => {
         ),
       });
     },
-    onError: (err: Error) => {
-      toast({
-        render: ({ onClose }) => (
-          <Toast
-            status="error"
-            message={`Error creating question: ${err.message}`}
-            onClose={onClose}
-          />
-        ),
-      });
-    },
   });
 };
diff --git a/frontend/app/src/features/questions/api/useDeleteQuestion.tsx b/frontend/app/src/features/questions/api/useDeleteQuestion.tsx
index 95c0737ac..1f1aeb5d3 100644
--- a/frontend/app/src/features/questions/api/useDeleteQuestion.tsx
+++ b/frontend/app/src/features/questions/api/useDeleteQuestion.tsx
@@ -46,18 +46,6 @@ export const useDeleteQuestion = () => {
 
       return { prevData };
     },
-    onError: (err: Error, _vars, context) => {
-      toast({
-        render: ({ onClose }) => (
-          <Toast
-            status="error"
-            message={`Error deleting question: ${err.message}`}
-            onClose={onClose}
-          />
-        ),
-      });
-      queryClient.setQueryData(queryKey, context?.prevData);
-    },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey });
     },
diff --git a/frontend/app/src/features/questions/api/useQuestionsQuery.tsx b/frontend/app/src/features/questions/api/useQuestionsQuery.tsx
index 1daf443b6..6d8800fa0 100644
--- a/frontend/app/src/features/questions/api/useQuestionsQuery.tsx
+++ b/frontend/app/src/features/questions/api/useQuestionsQuery.tsx
@@ -15,14 +15,6 @@ interface QuestionsQueryOptions {
   filters: QuestionsFilters;
 }
 
-// TODO: Upgrade react router to support loader API
-// export const questionsLoader =
-//   (queryClient: QueryClient) =>
-//   async ({ params }: { params: QuestionsQueryOptions }) => {
-//     const query = questionsQuery(params);
-//     return queryClient.ensureQueryData(query);
-//   };
-
 export const useQuestionsQuery = ({
   pageNum,
   pageSize,
diff --git a/frontend/app/src/features/questions/api/useUpdateQuestion.tsx b/frontend/app/src/features/questions/api/useUpdateQuestion.tsx
index b25da23a4..cf51c47d0 100644
--- a/frontend/app/src/features/questions/api/useUpdateQuestion.tsx
+++ b/frontend/app/src/features/questions/api/useUpdateQuestion.tsx
@@ -49,18 +49,6 @@ export const useUpdateQuestion = () => {
 
       return { prevData };
     },
-    onError: (err: Error, _vars, context) => {
-      toast({
-        render: ({ onClose }) => (
-          <Toast
-            status="error"
-            message={`Error updating question: ${err.message}`}
-            onClose={onClose}
-          />
-        ),
-      });
-      queryClient.setQueryData(queryKey, context?.prevData);
-    },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey });
     },
diff --git a/frontend/app/src/features/questions/components/QuestionDetails.tsx b/frontend/app/src/features/questions/components/QuestionDetails.tsx
index cc2710603..524c9e08d 100644
--- a/frontend/app/src/features/questions/components/QuestionDetails.tsx
+++ b/frontend/app/src/features/questions/components/QuestionDetails.tsx
@@ -41,7 +41,6 @@ const QuestionDetails = () => {
             {currQn.paid_only ? "Paid Only" : "Free"}
           </Tag>
         </HStack>
-        <Divider color="dark.800" />
         <HStack spacing={4}>
           <Text fontSize="sm" fontWeight="medium" color="dark.300">
             Category
@@ -89,43 +88,52 @@ const QuestionDetails = () => {
           </Text>
           {currQn.updated_at && (
             <Text fontSize="sm">
-              {new Date(currQn.updated_at).toUTCString()}
+              {new Date(currQn.updated_at).toLocaleString()}
             </Text>
           )}
         </HStack>
-        <Divider color="dark.800" />
         <Text fontSize="sm" fontWeight="medium" color="dark.300">
           Description
         </Text>
-        <Text fontSize="sm">{currQn.description}</Text>
-        <Text fontSize="sm" fontWeight="medium" color="dark.300">
-          Languages
-        </Text>
+        {currQn.languages && (
+          <>
+            <Text fontSize="sm">{currQn.description}</Text>
+            <Text fontSize="sm" fontWeight="medium" color="dark.300">
+              Languages
+            </Text>
+            <Wrap>
+              {currQn.languages.map(language => (
+                <Tag>{language}</Tag>
+              ))}
+            </Wrap>
+          </>
+        )}
         {/* <Text fontSize="sm" fontWeight="medium" color="dark.300">
           Code Snippets
         </Text>
         {currQn.code_snippets?.map(snippet => (
           <Text fontSize="sm">{snippet.code}</Text>
         ))} */}
-        <Wrap>
-          {currQn.languages?.map(language => (
-            <Tag variant="outline">{language}</Tag>
-          ))}
-        </Wrap>
-        <HStack spacing={4}>
-          <Text fontSize="sm" fontWeight="medium" color="dark.300">
-            Testcases
-          </Text>
-          {currQn.test_cases?.map(testcase => (
-            <Text fontSize="sm">{testcase}</Text>
-          ))}
-        </HStack>
-        <VStack spacing={4} align="start">
-          <Text fontSize="sm" fontWeight="medium" color="dark.300">
-            Hints
-          </Text>
-          {currQn.hints?.map(hint => <Text fontSize="sm">{hint}</Text>)}
-        </VStack>
+        {currQn.test_cases && (
+          <HStack spacing={4}>
+            <Text fontSize="sm" fontWeight="medium" color="dark.300">
+              Testcases
+            </Text>
+            {currQn.test_cases?.map(testcase => (
+              <Text fontSize="sm">{testcase}</Text>
+            ))}
+          </HStack>
+        )}
+        {currQn.hints && (
+          <VStack spacing={4} align="start">
+            <Text fontSize="sm" fontWeight="medium" color="dark.300">
+              Hints
+            </Text>
+            {currQn.hints.map(hint => (
+              <Text fontSize="sm">{hint}</Text>
+            ))}
+          </VStack>
+        )}
       </>
     )
   );
diff --git a/frontend/app/src/features/questions/components/QuestionsFilters.tsx b/frontend/app/src/features/questions/components/QuestionsFilters.tsx
index 9ec0614e3..d8653f134 100644
--- a/frontend/app/src/features/questions/components/QuestionsFilters.tsx
+++ b/frontend/app/src/features/questions/components/QuestionsFilters.tsx
@@ -95,7 +95,7 @@ const QuestionsFilters = () => {
               ))}
             </Box>
             <ButtonGroup
-              borderColor="dark.800"
+              borderColor="dark.700"
               borderTop="1px"
               p={2}
               w="full"
diff --git a/frontend/app/src/features/questions/components/QuestionsFooter.tsx b/frontend/app/src/features/questions/components/QuestionsFooter.tsx
index 61b24be5f..212afccaa 100644
--- a/frontend/app/src/features/questions/components/QuestionsFooter.tsx
+++ b/frontend/app/src/features/questions/components/QuestionsFooter.tsx
@@ -35,8 +35,8 @@ const QuestionsFooter = () => {
       <Skeleton
         h="32px"
         w="500px"
-        startColor="dark.950"
-        endColor="dark.800"
+        startColor="dark.900"
+        endColor="dark.700"
         borderRadius="md"
         placeSelf="end"
       />
@@ -68,12 +68,12 @@ const QuestionsFooter = () => {
               max={30}
               step={5}
               size="sm"
-              focusBorderColor="dark.800"
+              focusBorderColor="dark.700"
               w="16"
             >
               <NumberInputField
                 border="1px"
-                borderColor="dark.800"
+                borderColor="dark.700"
                 color="dark.100"
                 borderRadius="md"
               />
diff --git a/frontend/app/src/features/questions/components/QuestionsHeader.tsx b/frontend/app/src/features/questions/components/QuestionsHeader.tsx
index e9f4662c7..e1c19b666 100644
--- a/frontend/app/src/features/questions/components/QuestionsHeader.tsx
+++ b/frontend/app/src/features/questions/components/QuestionsHeader.tsx
@@ -14,8 +14,8 @@ const QuestionsHeader = () => {
     return (
       <Skeleton
         h="32px"
-        startColor="dark.950"
-        endColor="dark.800"
+        startColor="dark.900"
+        endColor="dark.700"
         borderRadius="md"
       />
     );
diff --git a/frontend/app/src/features/questions/components/QuestionsTable.tsx b/frontend/app/src/features/questions/components/QuestionsTable.tsx
index d41375a8a..66e308d3e 100644
--- a/frontend/app/src/features/questions/components/QuestionsTable.tsx
+++ b/frontend/app/src/features/questions/components/QuestionsTable.tsx
@@ -129,8 +129,8 @@ const QuestionsTable = () => {
       <Skeleton
         h="628px"
         w="full"
-        startColor="dark.950"
-        endColor="dark.800"
+        startColor="dark.900"
+        endColor="dark.700"
         borderRadius="md"
       />
     );
@@ -138,7 +138,7 @@ const QuestionsTable = () => {
 
   return (
     <>
-      <TableContainer border="1px" borderColor="dark.800" borderRadius="md">
+      <TableContainer border="1px" borderColor="dark.700" borderRadius="md">
         <Table variant="unstyled" size="sm">
           <Thead>
             {table.getHeaderGroups().map(headerGroup => (
@@ -224,7 +224,7 @@ const QuestionsTable = () => {
               <Tr
                 key={row.id}
                 borderTop="1px"
-                borderColor="dark.800"
+                borderColor="dark.700"
                 borderRadius="md"
                 _hover={{
                   cursor: "pointer",
diff --git a/frontend/app/src/features/room/api/useGetUserInfo.ts b/frontend/app/src/features/room/api/useGetUserInfo.ts
index 67cff0bee..ac65bf478 100644
--- a/frontend/app/src/features/room/api/useGetUserInfo.ts
+++ b/frontend/app/src/features/room/api/useGetUserInfo.ts
@@ -11,12 +11,12 @@ const getUserInfoSchema = makeSuccessResponseSchema(
   z.object({ user: userSchema }),
 );
 
-const getUserInfo = async (id: string) => {
+const getUserInfo = async (id: number) => {
   const { data } = await backendApi.get(`${API_ENDPOINT.USERS}/id/${id}`);
   return getUserInfoSchema.parse(data);
 };
 
-export const useGetUserInfo = (id: string) => {
+export const useGetUserInfo = (id: number) => {
   const queryClient = useQueryClient();
 
   return useQuery({
diff --git a/frontend/app/src/features/room/api/usePostLeaveRoom.ts b/frontend/app/src/features/room/api/usePostLeaveRoom.tsx
similarity index 88%
rename from frontend/app/src/features/room/api/usePostLeaveRoom.ts
rename to frontend/app/src/features/room/api/usePostLeaveRoom.tsx
index 6d3632fd2..062837c73 100644
--- a/frontend/app/src/features/room/api/usePostLeaveRoom.ts
+++ b/frontend/app/src/features/room/api/usePostLeaveRoom.tsx
@@ -8,6 +8,7 @@ import { API_ENDPOINT } from "@/constants/api";
 import { User } from "@/types/user";
 import { useNavigate } from "react-router-dom";
 import { ROUTE } from "@/constants/route";
+import { Toast } from "@/components/Toast";
 
 const postLeaveRoomResponseSchema = makeSuccessResponseSchema(
   z.object({
@@ -51,12 +52,16 @@ export const usePostLeaveRoom = () => {
 
   return useMutation(() => postLeaveRoom(roomId, userId), {
     onSuccess: () => {
-      navigate(ROUTE.HOME);
       toast({
-        status: "success",
-        title: "You have left the room.",
-        isClosable: true,
+        render: ({ onClose }) => (
+          <Toast
+            status="success"
+            message="You have left the room."
+            onClose={onClose}
+          />
+        ),
       });
+      navigate(ROUTE.HOME);
     },
   });
 };
diff --git a/frontend/app/src/features/room/api/usePostSubmission.ts b/frontend/app/src/features/room/api/usePostSubmission.tsx
similarity index 63%
rename from frontend/app/src/features/room/api/usePostSubmission.ts
rename to frontend/app/src/features/room/api/usePostSubmission.tsx
index be205db3c..4307f5a62 100644
--- a/frontend/app/src/features/room/api/usePostSubmission.ts
+++ b/frontend/app/src/features/room/api/usePostSubmission.tsx
@@ -7,10 +7,11 @@ import { makeSuccessResponseSchema } from "@/lib/api";
 import { API_ENDPOINT } from "@/constants/api";
 import { User } from "@/types/user";
 import { submissionSchema } from "@/types/submission";
+import { Toast } from "@/components/Toast";
 
 const postSubmissionRequestSchema = z.object({
   submission: z.object({
-    otherUserId: z.string().optional(),
+    otherUserId: z.number().optional(),
     questionId: z.string(),
     code: z.string(),
     lang: z.string(),
@@ -20,7 +21,7 @@ type PostSubmissionRequestType = z.infer<typeof postSubmissionRequestSchema>;
 
 const postSubmissionResponseSchema = makeSuccessResponseSchema(
   z.object({
-    submission: submissionSchema,
+    submission: submissionSchema.omit({ users: true }),
   }),
 );
 
@@ -51,17 +52,28 @@ export const usePostSubmission = () => {
 
   const userId = data?.user?.id;
 
-  return useMutation(
-    (body: PostSubmissionRequestType) => postSubmission(userId, body),
-    {
-      onSuccess: () => {
-        toast({
-          status: "success",
-          title:
-            "You code submission has been recorded in your profile history successfully",
-          isClosable: true,
-        });
-      },
+  return useMutation({
+    mutationFn: (body: PostSubmissionRequestType) =>
+      postSubmission(userId, {
+        ...body,
+        submission: {
+          ...body.submission,
+          otherUserId:
+            typeof body.submission.otherUserId === "string"
+              ? parseInt(body.submission.otherUserId)
+              : undefined,
+        },
+      }),
+    onSuccess: () => {
+      toast({
+        render: ({ onClose }) => (
+          <Toast
+            status="success"
+            message="Your code has been successfully saved to your profile history."
+            onClose={onClose}
+          />
+        ),
+      });
     },
-  );
+  });
 };
diff --git a/frontend/app/src/features/room/components/code/Collaborator.tsx b/frontend/app/src/features/room/components/code/Collaborator.tsx
index 6e104b6b5..5f85a1477 100644
--- a/frontend/app/src/features/room/components/code/Collaborator.tsx
+++ b/frontend/app/src/features/room/components/code/Collaborator.tsx
@@ -8,6 +8,7 @@ import {
   Spinner,
   useToast,
   useDisclosure,
+  Button,
 } from "@chakra-ui/react";
 import { DragHandleIcon } from "@chakra-ui/icons";
 import io, { Socket } from "socket.io-client";
@@ -36,7 +37,7 @@ interface CollaboratorProps {
   difficulty: DifficultyType[];
   questionId?: number;
   language: LanguageKeyType;
-  users: { id: string; connected: boolean }[];
+  users: { id: number; connected: boolean }[];
 }
 
 export const Collaborator = ({
@@ -56,7 +57,8 @@ export const Collaborator = ({
   // Lifted state from `CodeEditor` component
   const [doc, setDoc] = useState<string | null>(null);
   const toast = useToast();
-  const { mutate: markAsComplete } = usePostSubmission();
+  const { mutate: markAsComplete, isLoading: isPostSubmissionLoading } =
+    usePostSubmission();
   const { mutate: leaveRoom } = usePostLeaveRoom();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const cancelRef = useRef<HTMLButtonElement>(null);
@@ -195,6 +197,7 @@ export const Collaborator = ({
             setActiveQuestionId(Number(e?.value ?? 0));
             socket.emit(SOCKET_API_ENDPOINT.CHANGE_QUESTION, e?.value ?? 0);
           }}
+          width={72}
         />
         <Dropdown
           size="sm"
@@ -240,10 +243,10 @@ export const Collaborator = ({
       <Box
         w={4}
         height="100%"
-        bg="dark.700"
+        bg="dark.800"
         cursor="col-resize"
         _hover={{
-          bg: "dark.600",
+          bg: "dark.700",
         }}
         transition="background 0.2s"
         onMouseDown={startResizing}
@@ -251,7 +254,7 @@ export const Collaborator = ({
         alignItems="center"
         borderRadius={4}
       >
-        <DragHandleIcon color="dark.300" />
+        <DragHandleIcon color="dark.500" />
       </Box>
       <VStack
         align="left"
@@ -288,7 +291,7 @@ export const Collaborator = ({
     <>
       <CustomAlert
         title="Leave Room"
-        description="Are you sure? You can rejoin via the same link"
+        description="Are you sure? You can rejoin via the same link."
         confirmButtonText="Leave"
         isOpen={isOpen}
         leastDestructiveRef={cancelRef}
@@ -304,28 +307,23 @@ export const Collaborator = ({
           bottom={0}
           left={0}
           w="full"
-          background="light.500"
+          background="dark.900"
           p={4}
           boxShadow="0 0 12px rgba(0,0,0,.4)"
         >
-          <CustomButton
-            bg="dark.600"
-            _hover={{ bgColor: "dark.700" }}
-            onClick={() => setRenderQuestion(!renderQuestion)}
-          >
+          <Button onClick={() => setRenderQuestion(!renderQuestion)}>
             {renderQuestion ? "Hide" : "Show"} Question
-          </CustomButton>
-          <HStack gap={3}>
-            <CustomButton onClick={handleMarkAsComplete}>
-              Mark as complete
-            </CustomButton>
+          </Button>
+          <HStack gap={4}>
             <CustomButton
-              onClick={() => onOpen()}
-              colorScheme="red"
-              _hover={{ bgColor: "red.800" }}
+              onClick={handleMarkAsComplete}
+              isLoading={isPostSubmissionLoading}
             >
-              Leave Room
+              Mark as complete
             </CustomButton>
+            <Button variant="outlineWarning" onClick={() => onOpen()}>
+              Leave Room
+            </Button>
           </HStack>
         </HStack>
       </VStack>
diff --git a/frontend/app/src/features/room/components/code/QuestionDetails.tsx b/frontend/app/src/features/room/components/code/QuestionDetails.tsx
index 16ee04533..a42fe00b1 100644
--- a/frontend/app/src/features/room/components/code/QuestionDetails.tsx
+++ b/frontend/app/src/features/room/components/code/QuestionDetails.tsx
@@ -9,18 +9,22 @@ export const QuestionDetails = ({ questionId }: QuestionDetailsProps) => {
   const { isLoading, isError, data } = useGetQuestionDetails(questionId);
 
   if (questionId === undefined) {
-    return <Text>{"Choose a Question"}</Text>;
+    return <Text fontSize="sm">{"Choose a Question"}</Text>;
   }
 
   if (isLoading) {
-    return <Text>{"Loading..."}</Text>;
+    return <Text fontSize="sm">{"Loading..."}</Text>;
   }
 
   if (isError || !data) {
-    return <Text>{"Choose a Question"}</Text>;
+    return <Text fontSize="sm">{"Choose a Question"}</Text>;
   }
 
   const { description } = data.data.question;
 
-  return <Text whiteSpace={"pre-wrap"}>{description}</Text>;
+  return (
+    <Text whiteSpace={"pre-wrap"} fontSize="sm">
+      {description}
+    </Text>
+  );
 };
diff --git a/frontend/app/src/features/room/components/info/DifficultyBadge.tsx b/frontend/app/src/features/room/components/info/DifficultyBadge.tsx
index 7e256330a..91b954278 100644
--- a/frontend/app/src/features/room/components/info/DifficultyBadge.tsx
+++ b/frontend/app/src/features/room/components/info/DifficultyBadge.tsx
@@ -7,23 +7,10 @@ interface DifficultyBadgeProps {
 
 export const DifficultyBadge = ({ difficulty }: DifficultyBadgeProps) => {
   const colorSchemes: Record<DifficultyType, string> = {
-    // TODO: Figure out why prettier is not working
-    [DIFFICULTY.EASY]: "green.500",
-    [DIFFICULTY.MEDIUM]: "yellow.500",
-    [DIFFICULTY.HARD]: "red.500",
+    [DIFFICULTY.EASY]: "green",
+    [DIFFICULTY.MEDIUM]: "yellow",
+    [DIFFICULTY.HARD]: "red",
   };
 
-  return (
-    <Tag
-      bg={colorSchemes[difficulty]}
-      border="none"
-      color="white"
-      fontWeight="bold"
-      borderRadius="full"
-      px={3}
-      py={1}
-    >
-      {difficulty}
-    </Tag>
-  );
+  return <Tag variant={colorSchemes[difficulty]}>{difficulty}</Tag>;
 };
diff --git a/frontend/app/src/features/room/components/info/InfoBar.tsx b/frontend/app/src/features/room/components/info/InfoBar.tsx
index a1ae1068c..d9f2e2229 100644
--- a/frontend/app/src/features/room/components/info/InfoBar.tsx
+++ b/frontend/app/src/features/room/components/info/InfoBar.tsx
@@ -8,7 +8,7 @@ import { useState } from "react";
 interface InfoBarProps {
   difficulty: DifficultyType[];
   topic: string[];
-  users: { id: string; connected: boolean }[];
+  users: { id: number; connected: boolean }[];
   showCopyLink: boolean;
   copyLinkCallback: () => void;
 }
@@ -40,7 +40,7 @@ export const InfoBar = ({
           <TopicBadge key={t} topic={t} />
         ))}
       </HStack>
-      <HStack gap={6}>
+      <HStack gap={4}>
         {users.map(user => (
           <RoomUserInfo key={user.id} user={user} />
         ))}
diff --git a/frontend/app/src/features/room/components/info/RoomUserInfo.tsx b/frontend/app/src/features/room/components/info/RoomUserInfo.tsx
index bf35db5a6..c11a6de7f 100644
--- a/frontend/app/src/features/room/components/info/RoomUserInfo.tsx
+++ b/frontend/app/src/features/room/components/info/RoomUserInfo.tsx
@@ -1,31 +1,30 @@
-import { useGetUserInfo } from "../../api/useGetUserInfo"
-import { Text, Spinner, Avatar, HStack, VStack } from "@chakra-ui/react"
-
-type RoomUserInfoProps = {
-    user: {
-        id: string;
-        connected: boolean;
-    }
+import { useGetUserInfo } from "../../api/useGetUserInfo";
+import { Text, Spinner, Avatar, HStack, VStack } from "@chakra-ui/react";
+
+interface RoomUserInfoProps {
+  user: {
+    id: number;
+    connected: boolean;
+  };
 }
 
 export const RoomUserInfo = ({ user }: RoomUserInfoProps) => {
+  const { id } = user;
 
-    const { id } = user
-
-    const { isLoading, isError, data } = useGetUserInfo(id)
+  const { isLoading, isError, data } = useGetUserInfo(id);
 
-    if (isLoading) return (<Spinner />)
+  if (isLoading) return <Spinner />;
 
-    if (isError || !data) return (<Text>Errored</Text>)
+  if (isError || !data) return <Text>Errored</Text>;
 
-    const { name, avatarUrl, email } = data.data.user
+  const { name, avatarUrl, email } = data.data.user;
 
-    return (
-        <HStack gap={2}>
-            <Avatar name={name} src={avatarUrl} />
-            <VStack alignItems="start" gap="0">
-                <Text textStyle="heading-xs">{name ?? email}</Text>
-            </VStack>
-        </HStack>
-    )
-}
\ No newline at end of file
+  return (
+    <HStack gap={2}>
+      <Avatar name={name} src={avatarUrl} size="sm" />
+      <VStack alignItems="start" spacing={0}>
+        <Text fontSize="sm">{name ?? email}</Text>
+      </VStack>
+    </HStack>
+  );
+};
diff --git a/frontend/app/src/features/room/components/info/TopicBadge.tsx b/frontend/app/src/features/room/components/info/TopicBadge.tsx
index 0d72c352c..ef1637877 100644
--- a/frontend/app/src/features/room/components/info/TopicBadge.tsx
+++ b/frontend/app/src/features/room/components/info/TopicBadge.tsx
@@ -5,15 +5,5 @@ interface TopicBadgeProps {
 }
 
 export const TopicBadge = ({ topic }: TopicBadgeProps) => {
-  return (
-    <Tag
-      fontWeight="bold"
-      borderRadius="full"
-      px={3}
-      py={1}
-      textTransform="capitalize"
-    >
-      {topic}
-    </Tag>
-  );
+  return <Tag>{topic}</Tag>;
 };
diff --git a/frontend/app/src/features/settings/components/DeleteAccountPanel.tsx b/frontend/app/src/features/settings/components/DeleteAccountPanel.tsx
index 14eebbfdd..c1dbfd1c9 100644
--- a/frontend/app/src/features/settings/components/DeleteAccountPanel.tsx
+++ b/frontend/app/src/features/settings/components/DeleteAccountPanel.tsx
@@ -17,28 +17,27 @@ export const DeleteAccountPanel = () => {
 
   return (
     <TabPanel height="full">
-      <VStack alignItems="start" gap="1rem">
-        <Text textStyle="heading-lg">Delete account</Text>
-        <Text textStyle="text-md">
+      <VStack alignItems="start" gap={4}>
+        <Text textStyle="heading-md">Delete account</Text>
+        <Text textStyle="text-sm">
           Deleting your accout will remove all of your information from our
           database. This cannot be undone.
         </Text>
-        <Text
-          textStyle="text-md"
-          color="light.200"
-        >{`To confirm, type "${CONFIRM_MESSAGE}" in the box below.`}</Text>
+        <Text textStyle="text-sm">{`To confirm, type "${CONFIRM_MESSAGE}" in the box below.`}</Text>
         <HStack>
           <Input
             value={inputValue}
             onChange={e => setInputValue(e.target.value)}
-            color="light.100"
+            color="dark.100
+"
+            w={72}
           />
           <Button
             onClick={() => mutate()}
-            colorScheme="red"
             isDisabled={inputValue !== CONFIRM_MESSAGE}
             isLoading={isLoading}
             flexShrink={0}
+            variant="outlineWarning"
           >
             Delete account
           </Button>
diff --git a/frontend/app/src/features/settings/components/ProfilePanel.tsx b/frontend/app/src/features/settings/components/ProfilePanel.tsx
index 30a50f13e..42ce50638 100644
--- a/frontend/app/src/features/settings/components/ProfilePanel.tsx
+++ b/frontend/app/src/features/settings/components/ProfilePanel.tsx
@@ -55,10 +55,19 @@ export const ProfilePanel = () => {
         <Box as="form" onSubmit={onSubmit} height="full">
           <VStack height="full">
             <FormControl isInvalid={!!errors.name}>
-              <FormLabel color="light.100" htmlFor="name">
+              <FormLabel
+                color="dark.100
+"
+                htmlFor="name"
+              >
                 Name
               </FormLabel>
-              <Input color="light.100" {...register("name")} />
+              <Input
+                color="dark.100
+"
+                {...register("name")}
+                w={96}
+              />
               <FormErrorMessage>
                 {errors.name && errors.name.message}
               </FormErrorMessage>
diff --git a/frontend/app/src/features/settings/components/SettingsSidebar.tsx b/frontend/app/src/features/settings/components/SettingsSidebar.tsx
index b5f8c61fd..043a22334 100644
--- a/frontend/app/src/features/settings/components/SettingsSidebar.tsx
+++ b/frontend/app/src/features/settings/components/SettingsSidebar.tsx
@@ -3,25 +3,31 @@ import { TABS } from "../constants/tabs";
 
 export const SettingsSidebar = () => {
   return (
-    <TabList height="100%" alignItems="start" borderColor="dark.950">
+    <TabList height="100%" alignItems="start" borderColor="dark.900">
       {TABS.map(({ label }) => {
-        const isDelete = label === "Delete account";
+        const isDelete = label === "Delete Account";
 
         return (
           <Tab
-            color="light.300"
-            borderColor="light.300"
+            key={label}
+            color="dark.300"
+            borderColor="dark.300"
             _selected={{
-              color: isDelete ? "red.400" : "light.50",
-              borderColor: isDelete ? "red.400" : "light.50",
+              color: isDelete ? "red.400" : "dark.100",
+              borderColor: isDelete ? "red.400" : "dark.100",
+            }}
+            _active={{
+              color: isDelete ? "red.400" : "dark.100",
+              borderColor: isDelete ? "red.400" : "dark.100",
             }}
             _hover={{
-              color: isDelete ? "red.400" : "light.50",
-              borderColor: isDelete ? "red.400" : "light.50",
+              color: isDelete ? "red.400" : "dark.100",
+              borderColor: isDelete ? "red.400" : "dark.100",
             }}
             width="full"
             justifyContent="start"
             mt={isDelete ? "auto" : undefined}
+            fontSize="sm"
           >
             {label}
           </Tab>
diff --git a/frontend/app/src/features/settings/constants/tabs.ts b/frontend/app/src/features/settings/constants/tabs.ts
index 97eafbb65..364a69a18 100644
--- a/frontend/app/src/features/settings/constants/tabs.ts
+++ b/frontend/app/src/features/settings/constants/tabs.ts
@@ -1,8 +1,8 @@
 export const TABS = [
   {
-    label: "Profile settings",
+    label: "Profile Information",
   },
   {
-    label: "Delete account",
+    label: "Delete Account",
   },
 ];
diff --git a/frontend/app/src/features/submissions/components/SubmissionsCodeModal.tsx b/frontend/app/src/features/submissions/components/SubmissionsCodeModal.tsx
new file mode 100644
index 000000000..3472d2735
--- /dev/null
+++ b/frontend/app/src/features/submissions/components/SubmissionsCodeModal.tsx
@@ -0,0 +1,33 @@
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from "@chakra-ui/react";
+
+interface SubmissionsCodeModal {
+  code: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const SubmissionsCodeModal = ({
+  code,
+  isOpen,
+  onClose,
+}: SubmissionsCodeModal) => (
+  <Modal isOpen={isOpen} onClose={onClose} isCentered>
+    <ModalOverlay />
+    <ModalContent>
+      <ModalHeader>Code</ModalHeader>
+      <ModalCloseButton />
+      <ModalBody>{code}</ModalBody>
+      <ModalFooter></ModalFooter>
+    </ModalContent>
+  </Modal>
+);
+
+export default SubmissionsCodeModal;
diff --git a/frontend/app/src/features/submissions/components/SubmissionsTable.tsx b/frontend/app/src/features/submissions/components/SubmissionsTable.tsx
new file mode 100644
index 000000000..6bb0bdbe5
--- /dev/null
+++ b/frontend/app/src/features/submissions/components/SubmissionsTable.tsx
@@ -0,0 +1,251 @@
+import { useAuth } from "@/hooks";
+import { Submission } from "@/types/submission";
+import {
+  SortingState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useMemo, useState } from "react";
+import {
+  Avatar,
+  Box,
+  Button,
+  HStack,
+  IconButton,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+  VStack,
+  useDisclosure,
+} from "@chakra-ui/react";
+import {
+  PiCodeBold,
+  PiListBold,
+  PiSortAscendingBold,
+  PiSortDescendingBold,
+} from "react-icons/pi";
+import SubmissionsCodeModal from "./SubmissionsCodeModal";
+import { LANGUAGES, SUBMISSIONS_DEFAULT_SORTING_STATE } from "../constants";
+
+const columnHelper = createColumnHelper<Submission>();
+
+interface SubmissionsTableProps {
+  submissions: Submission[];
+}
+
+const SubmissionsTable = ({ submissions }: SubmissionsTableProps) => {
+  const { data } = useAuth();
+  const {
+    isOpen: isCodeModalOpen,
+    onOpen: onCodeModalOpen,
+    onClose: onCodeModalClose,
+  } = useDisclosure();
+  const [currCode, setCurrCode] = useState("");
+  const [sorting, setSorting] = useState<SortingState>(
+    SUBMISSIONS_DEFAULT_SORTING_STATE,
+  );
+
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor("questionId", {
+        header: "Question ID",
+        cell: info => <Text w={8}>{info.getValue()}</Text>,
+      }),
+      // columnHelper.accessor("title", {
+      //   header: "Title",
+      //   cell: info => <Text fontWeight="medium">{info.getValue()}</Text>,
+      //   size: Number.MAX_SAFE_INTEGER,
+      // }),
+      columnHelper.accessor("createdAt", {
+        header: "Attempted At",
+        cell: info => (
+          <Text>
+            {new Date(info.getValue()).toLocaleString("en-US", {
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+              hour: "numeric",
+              minute: "numeric",
+              hour12: true,
+            })}
+          </Text>
+        ),
+      }),
+      columnHelper.accessor("users", {
+        header: "Attempted With",
+        cell: info =>
+          info
+            .getValue()
+            ?.filter(user => user.id !== data?.user.id)
+            ?.map(user => (
+              <VStack spacing={0} p={2} alignItems="start">
+                {user.name && <Text fontSize="sm">{user.name}</Text>}
+                {user.email && (
+                  <Text fontSize="sm" color="dark.300">
+                    {user.email}
+                  </Text>
+                )}
+              </VStack>
+            )),
+      }),
+      columnHelper.accessor("lang", {
+        header: "Language",
+        cell: info => (
+          <Text>{LANGUAGES[info.getValue()] || info.getValue()}</Text>
+        ),
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => (
+          <Button
+            leftIcon={<PiCodeBold />}
+            onClick={() => {
+              setCurrCode(row.original.code);
+              onCodeModalOpen();
+            }}
+          >
+            View Code
+          </Button>
+        ),
+      }),
+    ],
+    [],
+  );
+
+  const table = useReactTable({
+    initialState: {
+      sorting: SUBMISSIONS_DEFAULT_SORTING_STATE,
+    },
+    data: submissions,
+    columns,
+    enableSortingRemoval: false,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
+  });
+
+  return (
+    <>
+      <TableContainer border="1px" borderColor="dark.700" borderRadius="md">
+        <Table variant="unstyled" size="sm">
+          <Thead>
+            {table.getHeaderGroups().map(headerGroup => (
+              <Tr key={headerGroup.id}>
+                {headerGroup.headers.map(header => (
+                  <Th
+                    key={header.id}
+                    color={
+                      sorting[0].id === header.column.id
+                        ? "dark.100"
+                        : "dark.300"
+                    }
+                    fontSize="sm"
+                    fontWeight="medium"
+                    letterSpacing="normal"
+                    textTransform="none"
+                    w={header.getSize() !== 150 ? header.getSize() : undefined}
+                    {...{
+                      _hover: header.column.getCanSort()
+                        ? {
+                            color: "dark.100",
+                            cursor: "pointer",
+                          }
+                        : {},
+                    }}
+                  >
+                    {header.isPlaceholder ? null : (
+                      <Box
+                        display="flex"
+                        alignItems="center"
+                        onClick={header.column.getToggleSortingHandler()}
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                        {{
+                          asc: (
+                            <IconButton
+                              aria-label={`sort-asc-${header.column.id}`}
+                              color="inherit"
+                              icon={<PiSortAscendingBold />}
+                              variant="icon"
+                              size="sm"
+                              _hover={{ bg: "transparent" }}
+                            />
+                          ),
+                          desc: (
+                            <IconButton
+                              aria-label={`sort-desc-${header.column.id}`}
+                              color="inherit"
+                              icon={<PiSortDescendingBold />}
+                              variant="icon"
+                              size="sm"
+                              _hover={{ bg: "transparent" }}
+                            />
+                          ),
+                        }[header.column.getIsSorted() as string] ?? (
+                          <IconButton
+                            aria-label={`no-sort-${header.column.id}`}
+                            disabled
+                            color="transparent"
+                            icon={<PiListBold />}
+                            variant="icon"
+                            size="sm"
+                            _hover={{ bg: "transparent" }}
+                          />
+                        )}
+                      </Box>
+                    )}
+                  </Th>
+                ))}
+              </Tr>
+            ))}
+          </Thead>
+          <Tbody>
+            {table.getRowModel().rows.length === 0 && (
+              <Tr p={4} display="flex">
+                <Text fontSize="sm"> No submissions yet.</Text>
+              </Tr>
+            )}
+            {table.getRowModel().rows.map(row => (
+              <Tr
+                key={row.id}
+                borderTop="1px"
+                borderColor="dark.700"
+                borderRadius="md"
+                _hover={{
+                  cursor: "pointer",
+                }}
+              >
+                {row.getVisibleCells().map(cell => (
+                  <Td key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Td>
+                ))}
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </TableContainer>
+      <SubmissionsCodeModal
+        code={currCode}
+        isOpen={isCodeModalOpen}
+        onClose={onCodeModalClose}
+      />
+    </>
+  );
+};
+
+export default SubmissionsTable;
diff --git a/frontend/app/src/features/submissions/constants/index.ts b/frontend/app/src/features/submissions/constants/index.ts
new file mode 100644
index 000000000..04982d5ec
--- /dev/null
+++ b/frontend/app/src/features/submissions/constants/index.ts
@@ -0,0 +1,16 @@
+export const SUBMISSIONS_DEFAULT_SORTING_STATE = [
+  { id: "createdAt", desc: false },
+];
+
+interface Languages {
+  [key: string]: string;
+}
+
+export const LANGUAGES: Languages = {
+  javascript: "Javascript",
+  python: "Python",
+  csharp: "C#",
+  cpp: "C++",
+  typescript: "Typescript",
+  java: "Java",
+};
diff --git a/frontend/app/src/hooks/useAuth.ts b/frontend/app/src/hooks/useAuth.ts
index 80a4988a3..1fc81a934 100644
--- a/frontend/app/src/hooks/useAuth.ts
+++ b/frontend/app/src/hooks/useAuth.ts
@@ -1,6 +1,7 @@
 import { API_ENDPOINT } from "@/constants/api";
 import { makeSuccessResponseSchema } from "@/lib/api";
 import { backendApi } from "@/lib/axios";
+import { submissionSchema } from "@/types/submission";
 import { userSchema } from "@/types/user";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
@@ -12,6 +13,7 @@ const getAuthResponseSchema = makeSuccessResponseSchema(
   z.object({
     user: userSchema.extend({
       roomId: z.string().optional(),
+      submissions: z.array(submissionSchema),
     }),
   }),
 );
diff --git a/frontend/app/src/lib/axios.ts b/frontend/app/src/lib/axios.ts
index c30215b68..033111eec 100644
--- a/frontend/app/src/lib/axios.ts
+++ b/frontend/app/src/lib/axios.ts
@@ -23,6 +23,7 @@ const failResponseSchema = z.object({
       error_description: z.string().optional(),
     })
     .optional(),
+  message: z.string().optional(),
 });
 
 export const anyApiResponseSchema = z.union([
@@ -61,6 +62,8 @@ function responseHandler(response: AxiosResponse | undefined) {
       errorMessage = parsedResponseData.data.data.error;
     } else if (parsedResponseData.data.data?.message) {
       errorMessage = parsedResponseData.data.data.message;
+    } else if (parsedResponseData.data.message) {
+      errorMessage = parsedResponseData.data.message;
     } else {
       errorMessage = API_ERROR.STATUS_FAIL;
     }
diff --git a/frontend/app/src/main.tsx b/frontend/app/src/main.tsx
index f2dc4f629..d701a021d 100644
--- a/frontend/app/src/main.tsx
+++ b/frontend/app/src/main.tsx
@@ -12,6 +12,7 @@ import {
 import { ChakraProvider, createStandaloneToast } from "@chakra-ui/react";
 import { globalToastOptions, theme } from "@/theme";
 import "@fontsource-variable/inter";
+import { Toast } from "./components/Toast/Toast.tsx";
 
 // To show toasts outside of react components (e.g. in react-query's global onError)
 const { ToastContainer, toast } = createStandaloneToast({ theme });
@@ -30,13 +31,18 @@ const errorHandler = ({
   }
   console.error(`Failed ${type}:`, error);
   toast({
+    render: ({ onClose }) => (
+      <Toast
+        status="error"
+        message={
+          error instanceof Error
+            ? error.message
+            : "An unexpected error has occurred"
+        }
+        onClose={onClose}
+      />
+    ),
     ...globalToastOptions.defaultOptions,
-    description:
-      error instanceof Error
-        ? error.message
-        : "An unexpected error has occurred",
-    status: "error",
-    isClosable: true,
   });
 };
 
diff --git a/frontend/app/src/pages/home/index.tsx b/frontend/app/src/pages/home/index.tsx
index c6dc357e4..df5bc5263 100644
--- a/frontend/app/src/pages/home/index.tsx
+++ b/frontend/app/src/pages/home/index.tsx
@@ -8,6 +8,7 @@ import {
   AlertIcon,
   AlertTitle,
   HStack,
+  VStack,
   useDisclosure,
 } from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
@@ -44,7 +45,7 @@ function HomePage() {
         onClose={onClose}
         title="Session in Progress"
         description="Please end your current session before starting a new one."
-      ></CustomModal>
+      />
       <Page
         display="flex"
         flexDir="column"
@@ -53,12 +54,26 @@ function HomePage() {
         gap={8}
       >
         {roomId && (
-          <Alert borderRadius={32} w="2xl" colorScheme="light">
-            <AlertIcon />
-            <AlertTitle>You have an existing session!</AlertTitle>
-            <AlertDescription>
-              End the previous session before creating a new one.
-            </AlertDescription>
+          <Alert
+            bg="transparent"
+            border="1px"
+            borderColor="primary.500"
+            borderRadius="full"
+            color="dark.100"
+            gap={4}
+            py={4}
+            px={8}
+            w="xl"
+          >
+            <AlertIcon color="primary.500" />
+            <VStack alignItems="start" spacing={0}>
+              <AlertTitle fontWeight="medium">
+                You have an existing session!
+              </AlertTitle>
+              <AlertDescription fontSize="sm">
+                End the previous session before creating a new one.
+              </AlertDescription>
+            </VStack>
           </Alert>
         )}
         <HStack gap={8} w="xl">
diff --git a/frontend/app/src/pages/index.tsx b/frontend/app/src/pages/index.tsx
index 38e23240f..510a01288 100644
--- a/frontend/app/src/pages/index.tsx
+++ b/frontend/app/src/pages/index.tsx
@@ -11,12 +11,7 @@ function LandingPage() {
   return (
     <Page display="grid" placeItems="center" position="relative">
       <VStack position="relative" zIndex="1" gap="2rem">
-        <Text
-          textStyle="heading-3xl"
-          textAlign="center"
-          color="light.100"
-          w="75%"
-        >
+        <Text textStyle="heading-3xl" textAlign="center" w="75%">
           Let your peers help you ace technical interviews
         </Text>
         {data?.user ? (
diff --git a/frontend/app/src/pages/profile/[userId].tsx b/frontend/app/src/pages/profile/[userId].tsx
index f9341c95b..2367c4fe1 100644
--- a/frontend/app/src/pages/profile/[userId].tsx
+++ b/frontend/app/src/pages/profile/[userId].tsx
@@ -1,21 +1,51 @@
 import { Page } from "@/components";
-import { VStack } from "@chakra-ui/react";
-import { useParams } from "react-router-dom";
+import { ROUTE } from "@/constants/route";
+import SubmissionsTable from "@/features/submissions/components/SubmissionsTable";
+import { useAuth } from "@/hooks";
+import { Avatar, HStack, VStack, Text, Button, Icon } from "@chakra-ui/react";
+import { PiPencilBold } from "react-icons/pi";
+import { useNavigate } from "react-router-dom";
 
 function ProfilePage() {
-  const { userId } = useParams();
+  const { data } = useAuth();
+  const navigate = useNavigate();
 
   return (
-    <Page display="grid" placeItems="center">
-      <VStack
-        marginBottom="4"
-        flexDirection="column"
-        align="left"
-        height="full"
-        width="full"
+    <Page pt="4" display="flex" flexDirection="column" gap={6}>
+      <Text fontWeight="medium" fontSize="lg">
+        Profile Information
+      </Text>
+      <HStack
+        alignItems="center"
+        alignSelf="stretch"
+        justifyContent="space-between"
       >
-        {userId}
-      </VStack>
+        <HStack alignItems="center" gap={4}>
+          <Avatar name={data?.user.name} src={data?.user.avatarUrl} />
+          <VStack spacing={0} alignItems="start">
+            <Text fontWeight="medium" fontSize="sm">
+              {data?.user.name}
+            </Text>
+            <Text color="dark.300" fontSize="sm">
+              {data?.user.email}
+            </Text>
+          </VStack>
+        </HStack>
+        <Button
+          leftIcon={<Icon as={PiPencilBold} />}
+          onClick={() => navigate(`${ROUTE.SETTINGS}`)}
+        >
+          Update Profile
+        </Button>
+      </HStack>
+      <Text fontWeight="medium" fontSize="lg">
+        Submissions
+      </Text>
+      {data?.user.submissions ? (
+        <SubmissionsTable submissions={data.user.submissions} />
+      ) : (
+        <Text fontSize="sm">No submissions yet.</Text>
+      )}
     </Page>
   );
 }
diff --git a/frontend/app/src/pages/settings/index.tsx b/frontend/app/src/pages/settings/index.tsx
index d5d32757c..90d8f3355 100644
--- a/frontend/app/src/pages/settings/index.tsx
+++ b/frontend/app/src/pages/settings/index.tsx
@@ -15,7 +15,7 @@ function SettingsPage() {
       >
         <Box
           width="20rem"
-          borderColor="light.500"
+          borderColor="dark.700"
           borderWidth="1px"
           borderRadius="0.5rem"
           p="0.5rem"
@@ -23,7 +23,7 @@ function SettingsPage() {
           <SettingsSidebar />
         </Box>
         <Box
-          borderColor="light.500"
+          borderColor="dark.700"
           borderWidth="1px"
           borderRadius="0.5rem"
           p="0.5rem"
diff --git a/frontend/app/src/theme/ChakraReactSelect.ts b/frontend/app/src/theme/ChakraReactSelect.ts
index cd906a7bf..ac854e71c 100644
--- a/frontend/app/src/theme/ChakraReactSelect.ts
+++ b/frontend/app/src/theme/ChakraReactSelect.ts
@@ -17,8 +17,8 @@ export const singleSelectStyles: (
   return {
     container: provided => ({
       ...provided,
-      background: "dark.950",
-      borderColor: "light.500",
+      background: "dark.900",
+      borderColor: "dark.700",
     }),
     control: provided => ({
       ...provided,
@@ -27,9 +27,8 @@ export const singleSelectStyles: (
     dropdownIndicator: provided => ({
       ...provided,
       background: "transparent",
-      color: "light.100",
+      color: "dark.100",
       border: "0px",
-      px: "0.5rem",
     }),
     indicatorSeparator: () => ({
       display: "none",
@@ -37,7 +36,7 @@ export const singleSelectStyles: (
     valueContainer: provided => ({
       ...provided,
       px: "0.5rem",
-      color: "light.100",
+      color: "dark.100",
       fontSize,
       py: valueContainerPy,
     }),
@@ -45,22 +44,23 @@ export const singleSelectStyles: (
       ...provided,
       background: "transparent",
       _hover: {
-        background: "light.500",
+        background: "dark.700",
       },
-      color: "light.100",
+      color: "dark.100",
       fontSize,
       py: "0rem",
     }),
-    menu: provided => ({ ...provided, background: "dark.500" }),
+    menu: provided => ({ ...provided, background: "dark.900" }),
     menuList: provided => ({
       ...provided,
       background: "transparent",
     }),
     noOptionsMessage: provided => ({
       ...provided,
-      color: "light.100",
+      color: "dark.100",
       fontSize,
     }),
+    placeholder: provided => ({ ...provided, color: "dark.300" }),
   };
 };
 
@@ -71,21 +71,21 @@ export const multiSelectStyles: (
   return {
     container: provided => ({
       ...provided,
-      background: "dark.950",
-      borderColor: "light.500",
-      borderRadius: "0.375rem",
+      background: "dark.900",
+      borderColor: "dark.700",
+      borderRadius: "md",
     }),
     clearIndicator: provided => ({
       ...provided,
-      color: "light.100",
+      color: "dark.100",
       _hover: {
-        background: "light.400",
+        background: "dark.700",
       },
     }),
     dropdownIndicator: provided => ({
       ...provided,
       background: "transparent",
-      color: "light.100",
+      color: "dark.100",
       border: "0px",
     }),
     indicatorSeparator: () => ({
@@ -93,27 +93,28 @@ export const multiSelectStyles: (
     }),
     valueContainer: provided => ({
       ...provided,
-      px: "0.5rem",
+      px: 2,
     }),
     multiValue: provided => ({
       ...provided,
       background: "transparent",
-      color: "light.100",
+      color: "dark.100",
     }),
     option: provided => ({
       ...provided,
       background: "transparent",
       _hover: {
-        background: "light.500",
+        background: "dark.700",
       },
-      color: "light.100",
+      color: "dark.100",
     }),
-    menu: provided => ({ ...provided, background: "dark.500" }),
+    menu: provided => ({ ...provided, background: "dark.900" }),
     menuList: provided => ({
       ...provided,
-      background: "dark.500",
-      borderColor: "light.400",
+      background: "dark.900",
+      borderColor: "dark.700",
     }),
-    noOptionsMessage: provided => ({ ...provided, color: "light.100" }),
+    noOptionsMessage: provided => ({ ...provided, color: "dark.100" }),
+    placeholder: provided => ({ ...provided, color: "dark.300" }),
   };
 };
diff --git a/frontend/app/src/theme/components/Button.tsx b/frontend/app/src/theme/components/Button.tsx
index ea37beb48..a747adabd 100644
--- a/frontend/app/src/theme/components/Button.tsx
+++ b/frontend/app/src/theme/components/Button.tsx
@@ -5,25 +5,25 @@ const icon = defineStyle({
   color: "dark.300",
   _hover: {
     color: "dark.100",
-    bg: "dark.800",
+    bg: "dark.700",
   },
   _active: {
-    bg: "dark.800",
+    bg: "dark.700",
   },
 });
 
 const outline = defineStyle({
   bg: "transparent",
   border: "1px",
-  borderColor: "dark.800",
+  borderColor: "dark.700",
   color: "dark.100",
   fontWeight: "medium",
   shadow: "sm",
   _active: {
-    bg: "dark.800",
+    bg: "dark.700",
   },
   _hover: {
-    bg: "dark.800",
+    bg: "dark.700",
   },
 });
 
@@ -31,7 +31,7 @@ const outlineWarning = defineStyle({
   bg: "transparent",
   border: "1px",
   borderColor: "red.900",
-  color: "red.600",
+  color: "red.500",
   fontWeight: "medium",
   shadow: "sm",
   _hover: {
diff --git a/frontend/app/src/theme/components/Input.tsx b/frontend/app/src/theme/components/Input.tsx
index b173ad9dc..4288b02a0 100644
--- a/frontend/app/src/theme/components/Input.tsx
+++ b/frontend/app/src/theme/components/Input.tsx
@@ -7,7 +7,7 @@ const { definePartsStyle, defineMultiStyleConfig } =
 const outline = definePartsStyle({
   field: {
     border: "1px",
-    borderColor: "dark.800",
+    borderColor: "dark.700",
     borderRadius: "md",
     color: "dark.100",
     _focusVisible: {
@@ -32,7 +32,7 @@ const outline = definePartsStyle({
   },
   addon: {
     border: "1px solid",
-    borderColor: "dark.800",
+    borderColor: "dark.700",
     bg: "transparent",
   },
 });
diff --git a/frontend/app/src/theme/components/Menu.tsx b/frontend/app/src/theme/components/Menu.tsx
index 0318ad6ee..ffc15fd6b 100644
--- a/frontend/app/src/theme/components/Menu.tsx
+++ b/frontend/app/src/theme/components/Menu.tsx
@@ -5,9 +5,9 @@ const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys);
 
 const outline = {
   list: {
-    bg: "dark.950",
+    bg: "dark.900",
     border: "1px",
-    borderColor: "dark.800",
+    borderColor: "dark.700",
     p: 1,
     shadow: "sm",
     minW: 36,
@@ -21,7 +21,7 @@ const outline = {
     py: 2,
     transitionProperty: "common",
     transitionDuration: "normal",
-    _hover: { bg: "dark.800" },
+    _hover: { bg: "dark.700" },
   },
   groupTitle: {
     color: "dark.300",
diff --git a/frontend/app/src/theme/components/Modal.tsx b/frontend/app/src/theme/components/Modal.tsx
index 910e35593..119ba001e 100644
--- a/frontend/app/src/theme/components/Modal.tsx
+++ b/frontend/app/src/theme/components/Modal.tsx
@@ -6,9 +6,9 @@ const { definePartsStyle, defineMultiStyleConfig } =
 
 const baseStyle = definePartsStyle({
   dialog: {
-    bg: "dark.950",
+    bg: "dark.900",
     border: "1px",
-    borderColor: "dark.800",
+    borderColor: "dark.700",
   },
   header: {
     color: "dark.100",
diff --git a/frontend/app/src/theme/components/Spinner.ts b/frontend/app/src/theme/components/Spinner.ts
index d58d370e9..f0e8b5610 100644
--- a/frontend/app/src/theme/components/Spinner.ts
+++ b/frontend/app/src/theme/components/Spinner.ts
@@ -2,6 +2,6 @@ import { defineStyleConfig } from "@chakra-ui/react";
 
 export const Spinner = defineStyleConfig({
   baseStyle: {
-    color: "light.100",
+    color: "dark.100",
   },
 });
diff --git a/frontend/app/src/theme/components/Tag.tsx b/frontend/app/src/theme/components/Tag.tsx
index ba5101b28..447cb8be2 100644
--- a/frontend/app/src/theme/components/Tag.tsx
+++ b/frontend/app/src/theme/components/Tag.tsx
@@ -8,7 +8,7 @@ const baseStyle = definePartsStyle({
   container: {
     bg: "transparent",
     border: "1px",
-    borderColor: "dark.800",
+    borderColor: "dark.700",
     color: "dark.300",
   },
 });
@@ -16,21 +16,21 @@ const baseStyle = definePartsStyle({
 const green = definePartsStyle({
   container: {
     borderColor: "green.900",
-    color: "green.600",
+    color: "green.500",
   },
 });
 
 const yellow = definePartsStyle({
   container: {
     borderColor: "yellow.900",
-    color: "yellow.600",
+    color: "yellow.500",
   },
 });
 
 const red = definePartsStyle({
   container: {
     borderColor: "red.900",
-    color: "red.600",
+    color: "red.500",
   },
 });
 
diff --git a/frontend/app/src/theme/components/Textarea.tsx b/frontend/app/src/theme/components/Textarea.tsx
index 3e7c52cae..d2f513df3 100644
--- a/frontend/app/src/theme/components/Textarea.tsx
+++ b/frontend/app/src/theme/components/Textarea.tsx
@@ -2,7 +2,7 @@ import { defineStyle, defineStyleConfig } from "@chakra-ui/react";
 
 const outline = defineStyle({
   border: "1px",
-  borderColor: "dark.800",
+  borderColor: "dark.700",
   borderRadius: "md",
   color: "dark.100",
   _focusVisible: {
diff --git a/frontend/app/src/theme/index.ts b/frontend/app/src/theme/index.ts
index 04deceb32..1d18b9788 100644
--- a/frontend/app/src/theme/index.ts
+++ b/frontend/app/src/theme/index.ts
@@ -35,7 +35,7 @@ export const theme = extendTheme({
   styles: {
     global: {
       body: {
-        background: "dark.950",
+        background: "dark.900",
       },
     },
   },
diff --git a/frontend/app/src/types/submission.ts b/frontend/app/src/types/submission.ts
index 4e65bcf3e..5368b7ade 100644
--- a/frontend/app/src/types/submission.ts
+++ b/frontend/app/src/types/submission.ts
@@ -1,9 +1,10 @@
 import { z } from "zod";
+import { userSchema } from "./user";
 
 export const submissionSchema = z.object({
-  id: z.string(),
+  id: z.number(),
   questionId: z.string(),
-  userIds: z.array(z.string()),
+  users: z.array(userSchema),
   code: z.string(),
   lang: z.string(),
   createdAt: z.string(),