diff --git a/package-lock.json b/package-lock.json
index f0767ea..169c055 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,12 @@
       "name": "maragen",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.7.0",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^13.5.0",
+        "lucide-react": "^0.544.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-image-crop": "^11.0.10",
@@ -2305,6 +2307,44 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
+      "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -2882,6 +2922,539 @@
         }
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz",
+      "integrity": "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
+      "integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4276,6 +4849,18 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -6140,6 +6725,12 @@
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/detect-port-alt": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
@@ -7916,6 +8507,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-own-enumerable-property-symbols": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
@@ -10428,6 +11028,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.544.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.544.0.tgz",
+      "integrity": "sha512-t5tS44bqd825zAW45UQxpG2CvcC4urOwn2TrwSH8u+MjeE+1NnWl6QqeQ/6NdjMqdOygyiT9p3Ev0p1NJykxjw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -12930,6 +13539,53 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz",
+      "integrity": "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.7.1.tgz",
@@ -13049,6 +13705,28 @@
         }
       }
     },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -15391,6 +16069,49 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index c4fab94..e488135 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "lucide-react": "^0.544.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-image-crop": "^11.0.10",
diff --git a/src/App.js b/src/App.js
index 2181c94..87c6740 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,16 +3,19 @@ import LoginPage from './pages/LoginPage';
 import OrganizationPage from './pages/OrganizationPage';
 import DashboardPage from './pages/DashboardPage';
 import InputDataPage from './pages/InputDataPage';
+import TutorialPage from './pages/tutorial/TutorialPage';
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<LoginPage />} />
       <Route path="/select-organization" element={<OrganizationPage />} />
+      <Route path="/tutorial" element={<TutorialPage />} />
       <Route path="/dashboard" element={<DashboardPage />} />
       <Route path="/input-data/:docType" element={<InputDataPage />} />
+      
     </Routes>
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/pages/CameraModal.js b/src/pages/CameraModal.js
index be8a09f..789be1f 100644
--- a/src/pages/CameraModal.js
+++ b/src/pages/CameraModal.js
@@ -546,7 +546,7 @@ const { startCamera, stopCameraStream, captureImage } = useCamera({ videoRef, ca
     zIndex: 11,
   }}
 >
-  {mode === "portrait" ? "Mode Horizontal" : "Mode Vertikal"}
+  {mode === "portrait" ? "Mode Miring" : "Mode Tegak"}
 </button>
 
             <video 
diff --git a/src/pages/DashboardPage.js b/src/pages/DashboardPage.js
index 4ccdc00..264c0aa 100644
--- a/src/pages/DashboardPage.js
+++ b/src/pages/DashboardPage.js
@@ -1,96 +1,146 @@
+// DashboardPage.jsx
 import { useEffect, useState } from 'react';
 import { fetchDocumentTypes } from '../api';
-import { Link } from 'react-router-dom';
-import AddDocumentModal from '../components/AddDocumentModal'; // Kita akan buat ini
+import { Link, useNavigate } from 'react-router-dom';
+import AddDocumentModal from '../components/AddDocumentModal';
+import { Menu, LogOut, Scan } from 'lucide-react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 
 const StatCard = ({ title, value }) => (
-    <div className="bg-gradient-to-br from-blue-500 to-indigo-600 text-white p-6 rounded-2xl shadow-lg">
-        <p className="text-sm font-medium opacity-80">{title}</p>
-        <p className="text-4xl font-bold mt-2">{value}</p>
-    </div>
+  <div className="bg-gradient-to-br from-blue-500 to-indigo-600 text-white p-6 rounded-2xl shadow-lg">
+    <p className="text-sm font-medium opacity-80">{title}</p>
+    <p className="text-4xl font-bold mt-2">{value}</p>
+  </div>
 );
 
 function DashboardPage() {
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const [documentTypes, setDocumentTypes] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState('');
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [documentTypes, setDocumentTypes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const navigate = useNavigate();
 
-    useEffect(() => {
-        const org = localStorage.getItem('selected_organization');
-        if (!org) {
-            setError('Organisasi belum dipilih.');
-            setLoading(false);
-            return;
-        }
-        const { organization_id } = JSON.parse(org);
-        setLoading(true);
-        fetchDocumentTypes(organization_id)
-            .then((data) => {
-                setDocumentTypes(Array.isArray(data) ? data : data.data || []);
-                setError('');
-            })
-            .catch((err) => {
-                setError(err.message || 'Gagal memuat dokumen');
-            })
-            .finally(() => setLoading(false));
-    }, []);
+  useEffect(() => {
+    const org = localStorage.getItem('selected_organization');
+    if (!org) {
+      setError('Organisasi belum dipilih.');
+      setLoading(false);
+      return;
+    }
+    const { organization_id } = JSON.parse(org);
+    setLoading(true);
+    fetchDocumentTypes(organization_id)
+      .then((data) => {
+        setDocumentTypes(Array.isArray(data) ? data : data.data || []);
+        setError('');
+      })
+      .catch((err) => {
+        setError(err.message || 'Gagal memuat dokumen');
+      })
+      .finally(() => setLoading(false));
+  }, []);
 
-    return (
-        <div className="bg-gray-50 min-h-screen">
-            <main className="p-4 sm:p-6 lg:p-8">
-                {/* Statistik */}
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                    <StatCard title="HARI INI" value="-" />
-                    <StatCard title="BULAN INI" value="-" />
-                    <StatCard title="TOTAL KESELURUHAN" value="-" />
-                </div>
+  const handleScan = () => {
+    // langsung navigasi ke halaman scan
+    navigate('/input-data/scan');
+  };
 
-                {/* Daftar Jenis Dokumen */}
-                <div className="mt-8">
-                    <div className="flex justify-between items-center mb-4">
-                        <h2 className="text-2xl font-bold text-gray-800">Daftar Jenis Dokumen</h2>
-                        <button
-                            onClick={() => setIsModalOpen(true)}
-                            className="bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors"
-                        >
-                            + Tambah Jenis
-                        </button>
-                    </div>
-                    <div className="bg-white rounded-2xl shadow-sm divide-y divide-gray-100">
-                        {loading ? (
-                            <div className="p-4 text-gray-500">Memuat data...</div>
-                        ) : error ? (
-                            <div className="p-4 text-red-500">{error}</div>
-                        ) : documentTypes.length === 0 ? (
-                            <div className="p-4 text-gray-500">Belum ada jenis dokumen.</div>
-                        ) : (
-                            documentTypes.map((doc, index) => (
-                                <Link
-                                    key={doc.data_type_id || doc.name}
-                                    to={`/input-data/${(doc.nama_tipe || doc.name)?.toLowerCase().replace(' ', '-')}`}
-                                    state={{
-                                        data_type_id: doc.data_type_id,
-                                        expectation: doc.expectation,
-                                        nama_tipe: doc.nama_tipe || doc.name
-                                    }}
-                                    className="flex items-center p-4 hover:bg-gray-50 transition-colors"
-                                >
-                                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold">{index + 1}</div>
-                                    <div className="ml-4 flex-grow">
-                                        <p className="font-semibold text-gray-800">{doc.nama_tipe || doc.name}</p>
-                                        <p className="text-sm text-gray-500">{doc.total_entries || doc.count || 0} data tersedia</p>
-                                    </div>
-                                </Link>
-                            ))
-                        )}
-                    </div>
-                </div>
-            </main>
+  const handleLogout = () => {
+    // contoh logout
+    localStorage.removeItem('token');
+    navigate('/');
+  };
 
-            <AddDocumentModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
+  return (
+    <div className="bg-gray-50 min-h-screen">
+      {/* Header dengan hamburger menu */}
+      <header className="flex justify-between items-center p-4 bg-white shadow">
+        <h1 className="text-xl font-bold text-gray-800">Dashboard</h1>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
+            <button className="inline-flex items-center justify-center rounded-full p-2 hover:bg-gray-100 focus:outline-none">
+              <Menu className="h-6 w-6" />
+            </button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content
+            align="end"
+            className="bg-white rounded-md shadow-md p-1 w-48"
+          >
+            <DropdownMenu.Item
+              onSelect={handleScan}
+              className="flex items-center gap-2 px-2 py-2 cursor-pointer hover:bg-gray-100 rounded"
+            >
+              <Scan className="h-4 w-4" />
+              <span>Scan</span>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              onSelect={handleLogout}
+              className="flex items-center gap-2 px-2 py-2 cursor-pointer hover:bg-gray-100 rounded"
+            >
+              <LogOut className="h-4 w-4" />
+              <span>Log out</span>
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </header>
+
+      <main className="p-4 sm:p-6 lg:p-8">
+        {/* Statistik */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          <StatCard title="HARI INI" value="-" />
+          <StatCard title="BULAN INI" value="-" />
+          <StatCard title="TOTAL KESELURUHAN" value="-" />
         </div>
-    );
+
+        {/* Daftar Jenis Dokumen */}
+        <div className="mt-8">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-2xl font-bold text-gray-800">Daftar Jenis Dokumen</h2>
+            <button
+              onClick={() => setIsModalOpen(true)}
+              className="bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors"
+            >
+              + Tambah Jenis
+            </button>
+          </div>
+          <div className="bg-white rounded-2xl shadow-sm divide-y divide-gray-100">
+            {loading ? (
+              <div className="p-4 text-gray-500">Memuat data...</div>
+            ) : error ? (
+              <div className="p-4 text-red-500">{error}</div>
+            ) : documentTypes.length === 0 ? (
+              <div className="p-4 text-gray-500">Belum ada jenis dokumen.</div>
+            ) : (
+              documentTypes.map((doc, index) => (
+                <Link
+                  key={doc.data_type_id || doc.name}
+                  to={`/input-data/${(doc.nama_tipe || doc.name)?.toLowerCase().replace(' ', '-')}`}
+                  state={{
+                    data_type_id: doc.data_type_id,
+                    expectation: doc.expectation,
+                    nama_tipe: doc.nama_tipe || doc.name,
+                  }}
+                  className="flex items-center p-4 hover:bg-gray-50 transition-colors"
+                >
+                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold">
+                    {index + 1}
+                  </div>
+                  <div className="ml-4 flex-grow">
+                    <p className="font-semibold text-gray-800">{doc.nama_tipe || doc.name}</p>
+                    <p className="text-sm text-gray-500">
+                      {doc.total_entries || doc.count || 0} data tersedia
+                    </p>
+                  </div>
+                </Link>
+              ))
+            )}
+          </div>
+        </div>
+      </main>
+
+      <AddDocumentModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
+    </div>
+  );
 }
 
-export default DashboardPage;
\ No newline at end of file
+export default DashboardPage;
diff --git a/src/pages/Grafik.js b/src/pages/Grafik.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/tutorial/TutorialPage.js b/src/pages/tutorial/TutorialPage.js
new file mode 100644
index 0000000..850d752
--- /dev/null
+++ b/src/pages/tutorial/TutorialPage.js
@@ -0,0 +1,296 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+ // Styling CSS akan disuntikkan langsung ke dalam <head> dokumen
+ // untuk menjaga semuanya dalam satu file.
+ const styles = `
+     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
+
+     :root {
+       --primary-color-start: #4F46E5;
+       --primary-color-end: #818CF8;
+       --scan-color: #4CAF50;
+     }
+
+     body {
+       margin: 0;
+     }
+
+     .app-container {
+         font-family: 'Inter', sans-serif;
+         display: flex;
+         flex-direction: column;
+         justify-content: center;
+         align-items: center;
+         height: 100vh;
+         width: 100%;
+         background-color: #f0f2f5;
+         color: #333;
+         overflow: hidden;
+     }
+     
+     /* Kartu untuk step awal dan akhir */
+     .content-card {
+         background: white;
+         padding: 2.5rem;
+         border-radius: 16px;
+         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+         text-align: center;
+         max-width: 420px;
+         width: 90%;
+     }
+
+     .content-card h2 {
+         margin-top: 0;
+         font-size: 1.75rem;
+         color: #1a202c;
+     }
+
+     .content-card p {
+         color: #555;
+         margin-bottom: 2rem;
+         line-height: 1.6;
+     }
+
+     /* Tombol utama */
+     .action-button {
+         background: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end));
+         color: white;
+         border: none;
+         padding: 14px 28px;
+         border-radius: 8px;
+         cursor: pointer;
+         font-size: 1rem;
+         font-weight: 500;
+         transition: all 0.3s ease;
+         box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
+     }
+
+     .action-button:hover {
+         transform: translateY(-2px);
+         box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5);
+     }
+     
+     /* Kontainer untuk step scanning */
+     .scanning-container {
+       display: flex;
+       flex-direction: column;
+       justify-content: center;
+       align-items: center;
+       width: 100%;
+       gap: 2rem;
+     }
+
+     .instructions {
+       text-align: center;
+     }
+
+     .instructions h2 { margin-bottom: 0.5rem; }
+     .instructions p { margin-top: 0; color: #555; }
+     
+     /* Mockup Ponsel */
+     .phone-mockup {
+         position: relative;
+         background: #1e1e1e;
+         padding: 15px;
+         box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+         border: 2px solid #444;
+         transition: all 0.4s ease-in-out;
+     }
+     
+     .phone-mockup.portrait {
+         width: 16rem;
+         height: 30rem;
+         border-radius: 40px;
+     }
+     
+     .phone-mockup.landscape {
+         width: 26rem;
+         height: 12rem;
+         border-radius: 40px;
+     }
+
+     .camera-screen {
+         background-color: #333;
+         height: 100%;
+         width: 100%;
+         border-radius: 25px;
+         position: relative;
+         overflow: hidden;
+         display: flex;
+         justify-content: center;
+         align-items: center;
+     }
+     
+     .document-placeholder {
+         opacity: 0.8;
+         border-radius: 10px;
+         object-fit: cover;
+     }
+     .document-placeholder.portrait-doc { width: 53%; height: 85%; }
+     .document-placeholder.landscape-doc { width: 90%; height: auto; }
+     
+     .orientation-toggle {
+       position: absolute;
+       top: 15px;
+       right: 15px;
+       background-color: rgba(0, 0, 0, 0.6);
+       color: white;
+       border: 1px solid rgba(255,255,255,0.3);
+       padding: 6px 12px;
+       border-radius: 20px;
+       cursor: pointer;
+       z-index: 10;
+       font-size: 12px;
+       font-weight: 500;
+     }
+
+     /* Frame Scan */
+     .scan-overlay {
+         position: absolute;
+         top: 0;
+         left: 0;
+         width: 100%;
+         height: 100%;
+         display: flex;
+         justify-content: center;
+         align-items: center;
+     }
+
+     .scan-frame {
+         position: relative;
+         box-sizing: border-box;
+         transition: all 0.4s ease-in-out;
+     }
+
+     /* LOGIKA SESUAI PERMINTAAN */
+     /* Frame untuk HP mode Tegak (menampilkan frame Miring/Lebar) */
+     .scan-frame.frame-for-portrait-phone { width:  95%; height: 30%; }
+     /* Frame untuk HP mode Miring (menampilkan frame Tegak/Tinggi) */
+     .scan-frame.frame-for-landscape-phone { width: 55%; height: 90%; }
+     
+     .scan-frame::before, .scan-frame::after, .scan-corners::before, .scan-corners::after {
+       content: '';
+       position: absolute;
+       width: 30px;
+       height: 30px;
+       border-color: var(--scan-color);
+       border-style: solid;
+     }
+
+     .scan-frame::before { top: 0; left: 0; border-width: 4px 0 0 4px; border-radius: 4px 0 0 0; }
+     .scan-frame::after { top: 0; right: 0; border-width: 4px 4px 0 0; border-radius: 0 4px 0 0; }
+     
+     .scan-corners { position: absolute; bottom: 0; width: 100%; height: 30px; left: 0; }
+     .scan-corners::before { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-radius: 0 0 0 4px; }
+     .scan-corners::after { bottom: 0; right: 0; border-width: 0 4px 4px 0; border-radius: 0 0 4px 0; }
+
+     /* Animasi Garis Scan */
+     .scan-line {
+         position: absolute;
+         left: 0;
+         width: 100%;
+         height: 3px;
+         background: linear-gradient(to bottom, transparent, var(--scan-color));
+         animation: scan 2.5s ease-in-out infinite;
+     }
+
+     @keyframes scan {
+         0%, 100% { top: 0; }
+         50% { top: 99%; }
+     }
+
+     /* Animasi Fade-in */
+     .fade-in {
+       animation: fadeIn 0.5s ease-in-out;
+     }
+     @keyframes fadeIn {
+         from { opacity: 0; transform: scale(0.98); }
+         to { opacity: 1; transform: scale(1); }
+     }
+ `;
+
+ // Komponen utama aplikasi
+ export default function TutorialPage() {
+     const [step, setStep] = useState('initial'); // 'initial', 'scanning', 'scanned'
+     const [orientation, setOrientation] = useState('portrait'); // 'portrait', 'landscape'
+
+     useEffect(() => {
+         const styleSheet = document.createElement("style");
+         styleSheet.type = "text/css";
+         styleSheet.innerText = styles;
+         document.head.appendChild(styleSheet);
+         return () => document.head.removeChild(styleSheet);
+     }, []);
+
+     const startScanAnimation = () => setStep('scanning');
+     const finishScan = () => setStep('scanned');
+     const resetTutorial = () => setStep('initial');
+     const toggleOrientation = () => {
+         setOrientation(prev => (prev === 'portrait' ? 'landscape' : 'portrait'));
+     };
+
+     const renderInitialStep = () => (
+         <div className="content-card fade-in">
+             <h2>Tutorial Scan Dokumen</h2> 
+             <p>Klik tombol di bawah untuk melihat simulasi scan dokumen interaktif.</p>
+             <button className="action-button" onClick={startScanAnimation}>Mulai Simulasi</button>
+         </div>
+     );
+
+     const renderScannedStep = () => (
+         <div className="content-card fade-in">
+             <h2>Scan Berhasil!</h2>
+             <p>Simulasi scan telah selesai. Dokumen Anda berhasil "disimpan".</p>
+             <button className="action-button" onClick={resetTutorial}>Coba Lagi</button>
+         </div>
+     );
+
+     const renderScanningStep = () => (
+         <div className="scanning-container fade-in">
+             <div className="instructions">
+                 <h2>Posisikan Dokumen</h2>
+                 <p>Ubah mode orientasi dan pastikan dokumen di dalam area scan.</p>
+             </div>
+
+             <div className={`phone-mockup ${orientation}`}>
+                 <div className="camera-screen">
+                     <button className="orientation-toggle" onClick={toggleOrientation}>
+                         {orientation === 'portrait' ? 'Mode Miring' : 'Mode Tegak'}
+                     </button>
+                     <img 
+                         src={orientation === 'portrait' 
+                             ? "https://placehold.co/400x250/e2e8f0/4a5568?text=Dokumen"
+                             : "https://placehold.co/250x400/e2e8f0/4a5568?text=Dokumen"
+                         }
+                         alt="Contoh Dokumen"
+                         className={`document-placeholder ${orientation === 'portrait' ? 'landscape-doc' : 'portrait-doc'}`}
+                     />
+                     <div className="scan-overlay">
+                         <div className={`scan-frame ${orientation === 'portrait' ? 'frame-for-portrait-phone' : 'frame-for-landscape-phone'}`}>
+                           <div className="scan-corners"></div>
+                           <div className="scan-line"></div>
+                         </div>
+                     </div>
+                 </div>
+             </div>
+
+             <button className="action-button" onClick={finishScan}>Lanjut</button>
+         </div>
+     );
+     
+     const renderStep = () => {
+         switch (step) {
+             case 'scanning': return renderScanningStep();
+             case 'scanned': return renderScannedStep();
+             case 'initial':
+             default: return renderInitialStep();
+         }
+     };
+
+     return (
+         <div className="app-container">
+             {renderStep()}
+         </div>
+     );
+ }