diff --git a/package-lock.json b/package-lock.json
index 22d5acd7..123653ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,6 +61,7 @@
         "lint-staged": "^15.3.0",
         "msw": "^2.7.0",
         "postcss": "^8.4.49",
+        "prettier": "3.4.2",
         "tailwindcss": "^3.4.15",
         "typescript": "~5.7.2",
         "typescript-eslint": "^8.15.0",
@@ -8135,6 +8136,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
diff --git a/package.json b/package.json
index 7489e50f..a0d0c835 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "lint-staged": "^15.3.0",
     "msw": "^2.7.0",
     "postcss": "^8.4.49",
+    "prettier": "3.4.2",
     "tailwindcss": "^3.4.15",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.15.0",
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 33115d7c..b8c56a55 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -2,6 +2,36 @@ import { Link } from "react-router-dom";
 import { SidebarTrigger } from "./ui/sidebar";
 import { Separator } from "./ui/separator";
 
+function HeaderMenuItem({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-blue-50 transition-colors">
+      {children}
+    </div>
+  );
+}
+
+function DropdownMenu({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="absolute right-0 top-full mt-2 w-56 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-gray-100">
+      <div className="py-1">{children}</div>
+    </div>
+  );
+}
+
+function DropdownMenuItem({
+  children,
+  to,
+}: {
+  to: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Link to={to} className="block px-5 py-3 text-gray-700 hover:bg-blue-50">
+      {children}
+    </Link>
+  );
+}
+
 export function Header({ hasError }: { hasError?: boolean }) {
   return (
     <header className="flex-shrink-0 h-16 px-3 items-center flex w-full bg-teal-25 opacity-1 border-b-blue-200 border-b">
@@ -23,46 +53,25 @@ export function Header({ hasError }: { hasError?: boolean }) {
       </div>
       <div className="flex items-center gap-4 mr-16">
         <div className="flex items-center relative group">
-          <div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-blue-50 transition-colors">
-            Certificates
-          </div>
-          <div className="absolute right-0 top-full mt-2 w-56 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-gray-100">
-            <div className="py-1">
-              <Link
-                to="/certificates"
-                className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
-              >
-                Download
-              </Link>
-              <Link
-                to="/certificates/security"
-                className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
-              >
-                Certificate Security
-              </Link>
-            </div>
-          </div>
+          <HeaderMenuItem>Certificates</HeaderMenuItem>
+          <DropdownMenu>
+            <DropdownMenuItem to="/certificates">Download</DropdownMenuItem>
+            <DropdownMenuItem to="/certificates/security">
+              Certificate Security
+            </DropdownMenuItem>
+          </DropdownMenu>
         </div>
+
         <div className="flex items-center relative group">
-          <div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-blue-50 transition-colors">
-            Help
-          </div>
-          <div className="absolute right-0 top-full mt-2 w-56 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-gray-100">
-            <div className="py-1">
-              <Link
-                to="/help/continue-setup"
-                className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
-              >
-                Continue Setup
-              </Link>
-              <Link
-                to="/help/copilot-setup"
-                className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
-              >
-                Copilot Setup
-              </Link>
-            </div>
-          </div>
+          <HeaderMenuItem>Help</HeaderMenuItem>
+          <DropdownMenu>
+            <DropdownMenuItem to="/help/continue-setup">
+              Continue Setup
+            </DropdownMenuItem>
+            <DropdownMenuItem to="/help/copilot-setup">
+              Copilot Setup
+            </DropdownMenuItem>
+          </DropdownMenu>
         </div>
 
         <div className="flex items-center relative group">