diff --git a/app/components/NavBarMenus/NavBar.module.css b/app/components/NavBarMenus/NavBar.module.css
new file mode 100644
index 0000000..637a003
--- /dev/null
+++ b/app/components/NavBarMenus/NavBar.module.css
@@ -0,0 +1,86 @@
+.menuButton {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  transition: 0.2s ease-in-out;
+}
+
+.menuButton:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.menuList {
+  min-width: 150px;
+  border-radius: 8px;
+  padding: 4px;
+  background-color: var(--chakra-colors-gray-100);
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 4px;
+  color: var(--chakra-colors-red-600);
+  cursor: pointer;
+  transition: 0.2s ease-in-out;
+}
+
+.menuItem:hover {
+  background: rgba(255, 0, 0, 0.1);
+}
+
+.dialog {
+  padding: 20px;
+  border-radius: 8px;
+  z-index: 9999;
+  width: 350px;
+  height: 210px;
+  text-align: center;
+  top: 40px;
+  right: 30px;
+}
+
+.dialogTitle {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.dialogText {
+  font-size: 14px;
+  margin-bottom: 15px;
+}
+
+.resetButton {
+  background-color: hsl(var(--error));
+  color: white;
+  width: 100%;
+  padding: 8px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: 0.2s ease-in-out;
+}
+
+.resetButton:hover {
+  background-color: hsl(var(--error));
+}
+
+.cancelButton {
+  background-color: var(--chakra-colors-gray-200) !important;
+  color: black !important;
+  width: 100%;
+  padding: 8px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 8px;
+  transition: 0.2s ease-in-out;
+}
+
+.cancelButton:hover {
+  background-color: var(--chakra-colors-gray-300);
+}
diff --git a/app/components/NavBarMenus/NavBarMenus.tsx b/app/components/NavBarMenus/NavBarMenus.tsx
index 7b7a69b..d5df1ba 100644
--- a/app/components/NavBarMenus/NavBarMenus.tsx
+++ b/app/components/NavBarMenus/NavBarMenus.tsx
@@ -1,6 +1,5 @@
 import { outfitFont } from "@/app/styles/fonts";
 import MdRestoreIcon from "@/app/styles/icons/MdRestore";
-
 import SettingsIcon from "@/app/styles/icons/SettingsIcon";
 import {
   Button,
@@ -9,92 +8,98 @@ import {
   MenuItem,
   MenuList,
   Popover,
-  PopoverArrow,
-  PopoverBody,
   PopoverCloseButton,
   PopoverContent,
-  PopoverHeader,
   PopoverTrigger,
   useColorMode,
   useToast,
 } from "@chakra-ui/react";
 import React, { useState } from "react";
-import navBarStyles from "../NavBar/NavBar.module.css";
+import styles from "./NavBar.module.css";
 import { sendGAEvent } from "@next/third-parties/google";
 import { useUserSolutionStore } from "@/lib/stores";
 
 export default function NavBarMenu() {
   const { colorMode } = useColorMode();
-
-  const [isOpen, setIsOpen] = useState(false);
-
+  const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
   const toast = useToast();
-
   const userSolutionStore = useUserSolutionStore();
 
   return (
-    <Menu closeOnSelect={false} gutter={4}>
-      <MenuButton
-        className={navBarStyles.menuButton}
-        onClick={() => {
-          sendGAEvent("event", "buttonClicked", {
-            value: "Settings",
-          });
-        }}
-      >
-        <SettingsIcon colorMode={colorMode} />
-      </MenuButton>
-      <MenuList width={"min-content"} className={outfitFont.className}>
-        <Popover
-          placement="left"
-          gutter={12}
-          onOpen={() => setIsOpen(true)}
-          onClose={() => setIsOpen(false)}
-          isOpen={isOpen}
+    <>
+      <Menu closeOnSelect={false} gutter={4}>
+        <MenuButton
+          className={styles.menuButton}
+          onClick={() =>
+            sendGAEvent("event", "buttonClicked", { value: "Settings" })
+          }
         >
-          <PopoverTrigger>
-            <MenuItem display={"flex"} gap={"8px"} color={"hsl(var(--error))"}>
-              <MdRestoreIcon />
-              Reset progress
-            </MenuItem>
-          </PopoverTrigger>
-          <PopoverContent
-            rootProps={{
-              style: {
-                transform: "scale(0)",
-              },
-            }}
+          <SettingsIcon colorMode={colorMode} />
+        </MenuButton>
+
+        <MenuList className={`${outfitFont.className} ${styles.menuList}`}>
+          <Popover
+            placement="left"
+            gutter={12}
+            isOpen={confirmationDialogOpen}
+            onClose={() => setConfirmationDialogOpen(false)}
           >
-            <PopoverArrow />
-            <PopoverCloseButton />
-            <PopoverHeader>Confirmation!</PopoverHeader>
-            <PopoverBody>
-              Are you sure you want to reset your progress?
-              <Button
-                colorScheme="red"
-                backgroundColor="hsl(var(--error))"
-                size="sm"
-                width={"100%"}
-                mt={2}
-                onClick={() => {
-                  localStorage.removeItem("progress");
-                  userSolutionStore.clearAllCode();
-                  setIsOpen(false);
-                  toast({
-                    title: "Progress Cleared",
-                    description: "Your progress has been cleared",
-                    status: "success",
-                    duration: 3000,
-                    isClosable: true,
-                  });
-                }}
+            <PopoverTrigger>
+              <MenuItem
+                className={styles.menuItem}
+                onClick={() => setConfirmationDialogOpen(true)}
+              >
+                <MdRestoreIcon />
+                Reset progress
+              </MenuItem>
+            </PopoverTrigger>
+
+            {confirmationDialogOpen && (
+              <PopoverContent
+                className={`${styles.dialog} ${colorMode === "dark" ? styles.dark : styles.light}`}
               >
-                RESET
-              </Button>
-            </PopoverBody>
-          </PopoverContent>
-        </Popover>
-      </MenuList>
-    </Menu>
+                <h1 className={styles.dialogTitle}>Confirmation</h1>
+                <p className={styles.dialogText}>
+                  Are you sure you want to reset your progress?
+                </p>
+                <PopoverCloseButton />
+                <Button
+                  colorScheme="red"
+                  w="100%"
+                  mt={2}
+                  className={styles.resetButton}
+                  onClick={() => {
+                    if (localStorage.getItem("progress")) {
+                      localStorage.removeItem("progress");
+                    }
+                    userSolutionStore.clearAllCode();
+                    setConfirmationDialogOpen(false);
+                    toast({
+                      title: "Progress Cleared",
+                      description: "Your progress has been cleared",
+                      status: "success",
+                      duration: 3000,
+                      isClosable: true,
+                    });
+                  }}
+                >
+                  RESET
+                </Button>
+
+                <Button
+                  colorScheme="gray"
+                  w="100%"
+                  mt={2}
+                  onClick={() => setConfirmationDialogOpen(false)}
+                  className={styles.cancelButton}
+                >
+                  CANCEL
+                </Button>
+              </PopoverContent>
+            )}
+          </Popover>
+        </MenuList>
+      </Menu>
+    </>
   );
 }