diff --git a/package-lock.json b/package-lock.json
index 39cb04a..26ea57f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2270,6 +2270,12 @@
       "integrity": "sha512-oOAWABowe8EAbMyWKM0tYDKi8Yaox52D+HWZhAIJqQXbqe0xI/GV7FhLWqlEKreMkfDjshR5FKgi3mnle0h6Eg==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.3.tgz",
+      "integrity": "sha512-Road2bidD0uu/1BGDOWNdPI06g0lIRy6IF9GZcIrDK2KGItfor8IQwQa+yM2ERgHM1MmHxaxpTzk0/Jp42lNfA==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
@@ -3855,11 +3861,16 @@
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+        "@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
         }
       }
     },
@@ -3973,6 +3984,411 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-context": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.2.2.tgz",
+      "integrity": "sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA==",
+      "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-select/node_modules/@radix-ui/react-direction": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.4.tgz",
+      "integrity": "sha512-5pzg4FGQNpExhnhT2zlrP1wZFaYCd1K0nYWoFAdcYoYK868IEigqMX3B3f8yIoRlAhAeDWciLI6ZdCKHF9P4Vg==",
+      "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-select/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.19.tgz",
+      "integrity": "sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-effect-event": "0.0.5"
+      },
+      "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-select/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.6.tgz",
+      "integrity": "sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==",
+      "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-select/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.16.tgz",
+      "integrity": "sha512-wmRZ2WWLvmt6KHy2rNPOdPUjwq5xOHY02+m+udwJTn0aNIox/rkskAvJTyTLGhPK6KgrUjlJUJpgmx/+wFiFIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4"
+      },
+      "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-select/node_modules/@radix-ui/react-id": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.4.tgz",
+      "integrity": "sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "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-select/node_modules/@radix-ui/react-popper": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.3.7.tgz",
+      "integrity": "sha512-UsJrrd7w4wuKKTdvd/DNERVlwSlUcyXzjhyDwBk+3aPOsCjOY6ZSbxuw8E6lZTjjfP8Cpd0J8VVkrYUWyGYXyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-use-rect": "1.1.4",
+        "@radix-ui/react-use-size": "1.1.4",
+        "@radix-ui/rect": "1.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-select/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.17",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.17.tgz",
+      "integrity": "sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "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-select/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.10.tgz",
+      "integrity": "sha512-3wyzCQ6+ubRA+D4uv9m95JYLXxmOHp05qjrkjeA7uKHHtjpPggQzc6DAb0URl7j67oR0K2foO4ip27TiX037Bw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "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-select/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.10.tgz",
+      "integrity": "sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.3.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-select/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.4.tgz",
+      "integrity": "sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==",
+      "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-select/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.6.tgz",
+      "integrity": "sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-use-effect-event": "0.0.5",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "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-select/node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.5.tgz",
+      "integrity": "sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "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-select/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.4.tgz",
+      "integrity": "sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==",
+      "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-select/node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.4.tgz",
+      "integrity": "sha512-cSOCh6JlkmfjLyNcLiu2nB4v+nm+dkZ+Q5KHWk/soo4U7ZLiEQFKHK9/YmtBHjfCEaU43IBKQOc4/uJmCaiCTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.3"
+      },
+      "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-select/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.4.tgz",
+      "integrity": "sha512-D3anSY15EJoxrihpsXI6SMrmmonnQtR2ni7arO+Lfdg3O95b9hNXxONk8jA5C8ANdF/h5HMAxejgs8PWJ6rlhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "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-select/node_modules/@radix-ui/rect": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.3.tgz",
+      "integrity": "sha512-JtyZR+mqgBibTo8xea3B6ZRmzZiM/YeVBtUkas6zMuXjAlfIFIW2FgqeM9eLyvEaYX66vr6DJMK+4U6LV0KhNw==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.3.3.tgz",
+      "integrity": "sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.5"
+      },
+      "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-slot/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.5.tgz",
+      "integrity": "sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==",
+      "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-tabs": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@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-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-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",
@@ -4028,10 +4444,10 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-use-is-hydrated": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.3.tgz",
-      "integrity": "sha512-umO/aJ+82CpOnhDZUTbILCQf7kU/g0iv+oGs/Q8jw7IkhWBzaEP4sA268PhFAJTFetbwp3ICc6ktpI4TqtxcIw==",
+    "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": "*",
@@ -4043,10 +4459,10 @@
         }
       }
     },
-    "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==",
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.4.tgz",
+      "integrity": "sha512-XoSLhbRbqxFtgJoi2fNHA3C6pDlY34x508vUpUGoFZfvePfHXHbE1lC4FYFMnJWgiCRroSTw6fOsXQoVS9RwZg==",
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "*",
@@ -4076,7 +4492,22 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-use-size": {
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.3.tgz",
+      "integrity": "sha512-umO/aJ+82CpOnhDZUTbILCQf7kU/g0iv+oGs/Q8jw7IkhWBzaEP4sA268PhFAJTFetbwp3ICc6ktpI4TqtxcIw==",
+      "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-layout-effect": {
       "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==",
@@ -4140,6 +4571,52 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.11.tgz",
+      "integrity": "sha512-NFS86RYYZb4/exihaESBGOpMJFz8MGLAfu3mOBSGByVnVPC9JPASfYubxd/8KbkQK0sYAv8lVQDEQukDX/qXvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "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-visually-hidden/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.10.tgz",
+      "integrity": "sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.3.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/rect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
diff --git a/src/app/register/register-client.tsx b/src/app/register/register-client.tsx
index 045327f..7ceb802 100644
--- a/src/app/register/register-client.tsx
+++ b/src/app/register/register-client.tsx
@@ -62,6 +62,11 @@ const categories = [
   "Other",
 ];
 
+const categoryOptions = categories.map((category) => ({
+  value: category,
+  label: category,
+}));
+
 const stepMeta = [
   {
     step: 1,
@@ -308,14 +313,23 @@ export function RegisterClient() {
           ))}
         </div>
 
-        <form
-          onSubmit={handleSubmit}
-          className="rounded-lg border bg-card p-6 shadow-sm"
-        >
-          <div className="mb-6 flex items-center gap-3">
-            {activeStep ? (
-              <div className="flex size-10 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-                <activeStep.icon className="size-5" />
+        <Card asChild>
+          <form onSubmit={handleSubmit}>
+            <div className="mb-6 flex items-center gap-3">
+              {activeStep ? (
+                <div className="flex size-10 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                  <activeStep.icon className="size-5" />
+                </div>
+              ) : null}
+              <div>
+                <p className="text-lg font-bold">
+                  {step === 1 && "Personal details"}
+                  {step === 2 && "Business details"}
+                  {step === 3 && "Email verification"}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  Step {step} of 3
+                </p>
               </div>
             ) : null}
             <div>
@@ -415,46 +429,96 @@ export function RegisterClient() {
                 />
               </label>
             </div>
-          ) : null}
 
-          {step === 3 ? (
-            <div className="grid gap-4">
-              <div className="rounded-lg border bg-secondary/60 p-4 text-sm text-muted-foreground">
-                A verification code was sent to{" "}
-                <span className="font-semibold text-foreground">
-                  {values.email}
-                </span>
-                . Demo code:{" "}
-                <span className="font-mono font-bold text-primary">
-                  {otpCode}
-                </span>
+            {step === 1 ? (
+              <div className="grid gap-4 sm:grid-cols-2">
+                <label className="grid gap-2 text-sm font-medium">
+                  First name
+                  <input
+                    className="h-11 rounded-md border bg-background px-3 text-sm outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
+                    value={values.firstName}
+                    onChange={(event) =>
+                      updateField("firstName", event.target.value)
+                    }
+                    required
+                  />
+                </label>
+                <label className="grid gap-2 text-sm font-medium">
+                  Last name
+                  <input
+                    className="h-11 rounded-md border bg-background px-3 text-sm outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
+                    value={values.lastName}
+                    onChange={(event) =>
+                      updateField("lastName", event.target.value)
+                    }
+                    required
+                  />
+                </label>
+                <label className="grid gap-2 text-sm font-medium sm:col-span-2">
+                  Email address
+                  <input
+                    className="h-11 rounded-md border bg-background px-3 text-sm outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
+                    type="email"
+                    inputMode="email"
+                    autoComplete="email"
+                    value={values.email}
+                    onChange={(event) =>
+                      updateField("email", event.target.value)
+                    }
+                    required
+                  />
+                </label>
               </div>
-              <label className="grid gap-2 text-sm font-medium">
-                OTP code
-                <div className="grid w-fit max-w-full grid-cols-6 gap-2">
-                  {Array.from({ length: 6 }).map((_, index) => (
-                    <input
-                      key={index}
-                      ref={(element) => {
-                        otpInputRefs.current[index] = element;
-                      }}
-                      aria-label={`OTP digit ${index + 1}`}
-                      className="size-11 rounded-md border bg-background text-center font-mono text-lg font-semibold outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 sm:size-12"
-                      inputMode="numeric"
-                      maxLength={1}
-                      value={otpInput[index] ?? ""}
-                      onChange={(event) =>
-                        updateOtpDigit(index, event.target.value)
-                      }
-                      onKeyDown={(event) => handleOtpKeyDown(index, event)}
-                      onPaste={handleOtpPaste}
-                      required
-                    />
-                  ))}
+            ) : null}
+
+            {step === 2 ? (
+              <div className="grid gap-4">
+                <label className="grid gap-2 text-sm font-medium">
+                  Business name
+                  <input
+                    className="h-11 rounded-md border bg-background px-3 text-sm outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
+                    value={values.businessName}
+                    onChange={(event) =>
+                      updateField("businessName", event.target.value)
+                    }
+                    required
+                  />
+                </label>
+                <label className="grid gap-2 text-sm font-medium">
+                  Business logo
+                  <input
+                    className="rounded-md border bg-background px-3 py-2 text-sm outline-none file:mr-3 file:rounded-md file:border-0 file:bg-secondary file:px-3 file:py-2 file:text-sm file:font-semibold file:text-primary"
+                    type="file"
+                    accept="image/*"
+                    onChange={handleLogoChange}
+                  />
+                </label>
+                <div className="grid gap-2 text-sm font-medium">
+                  <label htmlFor="businessCategory">Business category</label>
+                  <Select
+                    id="businessCategory"
+                    options={categoryOptions}
+                    value={values.businessCategory}
+                    onValueChange={(value) =>
+                      updateField("businessCategory", value)
+                    }
+                    placeholder="Select category"
+                    required
+                  />
                 </div>
-              </label>
-            </div>
-          ) : null}
+                <label className="grid gap-2 text-sm font-medium">
+                  Business description
+                  <textarea
+                    className="min-h-28 rounded-md border bg-background px-3 py-3 text-sm outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
+                    value={values.businessDescription}
+                    onChange={(event) =>
+                      updateField("businessDescription", event.target.value)
+                    }
+                    required
+                  />
+                </label>
+              </div>
+            ) : null}
 
           {error ? (
             <Alert variant="destructive" className="mt-5">
@@ -473,24 +537,36 @@ export function RegisterClient() {
               Back
             </Button>
 
-            {step < 3 ? (
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:justify-between">
               <Button
                 type="button"
-                onClick={goNext}
-                disabled={!canContinue || isSending}
+                variant="outline"
+                onClick={goBack}
+                disabled={step === 1 || isSending || isComplete}
               >
-                {isSending ? <Loader2 className="animate-spin" /> : null}
-                Continue
-                <ChevronRight />
-              </Button>
-            ) : (
-              <Button type="submit" disabled={!canContinue || isComplete}>
-                {isComplete ? <BadgeCheck /> : <MailCheck />}
-                Verify email
+                <ChevronLeft />
+                Back
               </Button>
-            )}
-          </div>
-        </form>
+
+              {step < 3 ? (
+                <Button
+                  type="button"
+                  onClick={goNext}
+                  disabled={!canContinue || isSending}
+                >
+                  {isSending ? <Loader2 className="animate-spin" /> : null}
+                  Continue
+                  <ChevronRight />
+                </Button>
+              ) : (
+                <Button type="submit" disabled={!canContinue || isComplete}>
+                  {isComplete ? <BadgeCheck /> : <MailCheck />}
+                  Verify email
+                </Button>
+              )}
+            </div>
+          </form>
+        </Card>
       </section>
     </main>
   );
diff --git a/src/app/sign-in/sign-in-client.tsx b/src/app/sign-in/sign-in-client.tsx
index c177854..183c529 100644
--- a/src/app/sign-in/sign-in-client.tsx
+++ b/src/app/sign-in/sign-in-client.tsx
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import {
   getMerchantProfile,
   MERCHANT_SESSION_KEY,
@@ -82,7 +83,7 @@ export function SignInClient() {
           </p>
         </div>
 
-        <div className="rounded-lg border bg-card p-6 shadow-sm">
+        <Card>
           {error ? (
             <Alert variant="destructive" className="mb-4">
               <AlertDescription>{error}</AlertDescription>
diff --git a/src/components/RevenueChart.tsx b/src/components/RevenueChart.tsx
index 3f9403c..389f1fd 100644
--- a/src/components/RevenueChart.tsx
+++ b/src/components/RevenueChart.tsx
@@ -10,6 +10,8 @@ import {
   ResponsiveContainer,
 } from "recharts";
 
+import { Card } from "@/components/ui/card";
+
 export interface RevenueDataPoint {
   date: string;
   amount: number;
@@ -58,7 +60,7 @@ interface RevenueChartProps {
 
 export default function RevenueChart({ data = MOCK_DATA }: RevenueChartProps) {
   return (
-    <div className="rounded-lg border bg-card p-6 shadow-sm">
+    <Card>
       <h2 className="mb-4 text-lg font-bold text-card-foreground">
         Revenue Over Time
       </h2>
@@ -106,6 +108,6 @@ export default function RevenueChart({ data = MOCK_DATA }: RevenueChartProps) {
           />
         </AreaChart>
       </ResponsiveContainer>
-    </div>
+    </Card>
   );
 }
diff --git a/src/components/ui/badge.test.tsx b/src/components/ui/badge.test.tsx
new file mode 100644
index 0000000..8ed3b6a
--- /dev/null
+++ b/src/components/ui/badge.test.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+
+import { Badge } from "./badge";
+
+describe("Badge", () => {
+  it("renders arbitrary children with the pill base classes", () => {
+    render(<Badge>GDXX…7Q4A</Badge>);
+
+    const badge = screen.getByText("GDXX…7Q4A");
+
+    expect(badge).toHaveClass("inline-flex", "rounded-full", "border");
+    expect(badge).toHaveAttribute("data-slot", "badge");
+  });
+
+  it("defaults to the primary variant", () => {
+    render(<Badge>Paid</Badge>);
+
+    expect(screen.getByText("Paid")).toHaveClass(
+      "bg-primary",
+      "text-primary-foreground",
+    );
+  });
+
+  it.each([
+    ["secondary", "bg-secondary"],
+    ["destructive", "bg-destructive"],
+    ["outline", "border-border"],
+  ] as const)("applies the %s variant styling", (variant, expected) => {
+    render(<Badge variant={variant}>{variant}</Badge>);
+
+    expect(screen.getByText(variant)).toHaveClass(expected);
+  });
+
+  it("renders icon children alongside text", () => {
+    render(
+      <Badge>
+        <svg data-testid="badge-icon" />
+        Verified
+      </Badge>,
+    );
+
+    expect(screen.getByTestId("badge-icon")).toBeInTheDocument();
+    expect(screen.getByText(/Verified/)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..088dcf3
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        outline: "border-border text-foreground",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Badge = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>
+>(({ className, variant, ...props }, ref) => (
+  <span
+    ref={ref}
+    data-slot="badge"
+    className={cn(badgeVariants({ variant, className }))}
+    {...props}
+  />
+));
+
+Badge.displayName = "Badge";
+
+export { Badge, badgeVariants };
diff --git a/src/components/ui/card.test.tsx b/src/components/ui/card.test.tsx
new file mode 100644
index 0000000..be379ac
--- /dev/null
+++ b/src/components/ui/card.test.tsx
@@ -0,0 +1,71 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./card";
+
+describe("Card", () => {
+  it("applies the shared container classes", () => {
+    render(<Card data-testid="card">content</Card>);
+
+    const card = screen.getByTestId("card");
+
+    expect(card).toHaveClass(
+      "rounded-lg",
+      "border",
+      "bg-card",
+      "p-6",
+      "shadow-sm",
+    );
+    expect(card).toHaveAttribute("data-slot", "card");
+  });
+
+  it("merges consumer classNames over the defaults", () => {
+    render(
+      <Card data-testid="card" className="p-8">
+        content
+      </Card>,
+    );
+
+    const card = screen.getByTestId("card");
+
+    expect(card).toHaveClass("p-8");
+    expect(card).not.toHaveClass("p-6");
+  });
+
+  it("renders as the child element when asChild is set", () => {
+    render(
+      <Card asChild>
+        <form aria-label="wrapped form" />
+      </Card>,
+    );
+
+    const form = screen.getByRole("form", { name: "wrapped form" });
+
+    expect(form.tagName).toBe("FORM");
+    expect(form).toHaveClass("rounded-lg", "bg-card");
+  });
+
+  it("renders every subcomponent", () => {
+    render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Revenue</CardTitle>
+          <CardDescription>Last 30 days</CardDescription>
+        </CardHeader>
+        <CardContent>$12,430</CardContent>
+      </Card>,
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "Revenue" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Last 30 days")).toBeInTheDocument();
+    expect(screen.getByText("$12,430")).toBeInTheDocument();
+  });
+});
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..770cd71
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,80 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      data-slot="card"
+      className={cn("rounded-lg border bg-card p-6 shadow-sm", className)}
+      {...props}
+    />
+  );
+});
+
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="card-header"
+    className={cn("flex flex-col gap-1.5", className)}
+    {...props}
+  />
+));
+
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentProps<"h3">
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    data-slot="card-title"
+    className={cn("text-lg font-bold text-card-foreground", className)}
+    {...props}
+  />
+));
+
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentProps<"p">
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    data-slot="card-description"
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="card-content"
+    className={cn(className)}
+    {...props}
+  />
+));
+
+CardContent.displayName = "CardContent";
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent };
diff --git a/src/components/ui/checkbox.test.tsx b/src/components/ui/checkbox.test.tsx
new file mode 100644
index 0000000..52f929b
--- /dev/null
+++ b/src/components/ui/checkbox.test.tsx
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+
+import { Checkbox } from "./checkbox";
+
+function ControlledCheckbox() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <Checkbox
+      aria-label="Select all keys"
+      checked={checked}
+      onCheckedChange={(next) => setChecked(next === true)}
+    />
+  );
+}
+
+describe("Checkbox", () => {
+  it("matches the app border and rounded styling", () => {
+    render(<Checkbox aria-label="Select row" />);
+
+    expect(screen.getByRole("checkbox")).toHaveClass(
+      "size-4",
+      "rounded-sm",
+      "border",
+      "border-input",
+    );
+  });
+
+  it("toggles checked state through controlled props", async () => {
+    const user = userEvent.setup();
+
+    render(<ControlledCheckbox />);
+
+    const checkbox = screen.getByRole("checkbox", { name: "Select all keys" });
+
+    expect(checkbox).toHaveAttribute("data-state", "unchecked");
+
+    await user.click(checkbox);
+    expect(checkbox).toHaveAttribute("data-state", "checked");
+
+    await user.click(checkbox);
+    expect(checkbox).toHaveAttribute("data-state", "unchecked");
+  });
+
+  it("reports changes to onCheckedChange", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+
+    render(<Checkbox aria-label="Confirm" onCheckedChange={onCheckedChange} />);
+
+    await user.click(screen.getByRole("checkbox"));
+
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it("does not toggle while disabled", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+
+    render(
+      <Checkbox
+        aria-label="Locked"
+        disabled
+        onCheckedChange={onCheckedChange}
+      />,
+    );
+
+    await user.click(screen.getByRole("checkbox"));
+
+    expect(onCheckedChange).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..2ce9c65
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ComponentRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    data-slot="checkbox"
+    className={cn(
+      "peer size-4 shrink-0 rounded-sm border border-input bg-background shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      data-slot="checkbox-indicator"
+      className="flex items-center justify-center text-current"
+    >
+      <Check className="size-3.5" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };
diff --git a/src/components/ui/select.test.tsx b/src/components/ui/select.test.tsx
new file mode 100644
index 0000000..e6e4fe9
--- /dev/null
+++ b/src/components/ui/select.test.tsx
@@ -0,0 +1,92 @@
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+
+import { Select, type SelectOption } from "./select";
+
+const options: SelectOption[] = [
+  { value: "E-commerce", label: "E-commerce" },
+  { value: "SaaS", label: "SaaS" },
+  { value: "Nonprofit", label: "Nonprofit", disabled: true },
+];
+
+function ControlledSelect({
+  onChange,
+}: {
+  onChange?: (value: string) => void;
+}) {
+  const [value, setValue] = useState("");
+
+  return (
+    <Select
+      aria-label="Business category"
+      options={options}
+      value={value}
+      onValueChange={(next) => {
+        setValue(next);
+        onChange?.(next);
+      }}
+      placeholder="Select category"
+    />
+  );
+}
+
+describe("Select", () => {
+  it("shows the placeholder until a value is chosen", () => {
+    render(<ControlledSelect />);
+
+    expect(screen.getByRole("combobox")).toHaveTextContent("Select category");
+  });
+
+  it("styles the trigger to match the app input theme", () => {
+    render(<ControlledSelect />);
+
+    expect(screen.getByRole("combobox")).toHaveClass(
+      "h-11",
+      "rounded-md",
+      "border",
+      "bg-background",
+    );
+  });
+
+  it("opens a listbox with every option", async () => {
+    const user = userEvent.setup();
+
+    render(<ControlledSelect />);
+
+    await user.click(screen.getByRole("combobox"));
+
+    expect(await screen.findByRole("listbox")).toBeInTheDocument();
+    for (const option of options) {
+      expect(
+        screen.getByRole("option", { name: option.label }),
+      ).toBeInTheDocument();
+    }
+  });
+
+  it("reports the selected value through onValueChange", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    render(<ControlledSelect onChange={onChange} />);
+
+    await user.click(screen.getByRole("combobox"));
+    await user.click(await screen.findByRole("option", { name: "SaaS" }));
+
+    expect(onChange).toHaveBeenCalledWith("SaaS");
+    expect(screen.getByRole("combobox")).toHaveTextContent("SaaS");
+  });
+
+  it("marks disabled options as disabled", async () => {
+    const user = userEvent.setup();
+
+    render(<ControlledSelect />);
+
+    await user.click(screen.getByRole("combobox"));
+
+    expect(
+      await screen.findByRole("option", { name: "Nonprofit" }),
+    ).toHaveAttribute("data-disabled");
+  });
+});
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..ceb1041
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const SelectTrigger = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    data-slot="select-trigger"
+    className={cn(
+      "flex h-11 w-full items-center justify-between gap-2 rounded-md border bg-background px-3 text-sm outline-none transition-colors focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="opacity-60" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+
+SelectTrigger.displayName = "SelectTrigger";
+
+const SelectContent = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      data-slot="select-content"
+      position={position}
+      className={cn(
+        "relative z-50 max-h-72 min-w-[8rem] overflow-hidden rounded-lg border bg-card text-card-foreground shadow-md",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 w-[var(--radix-select-trigger-width)]",
+        className,
+      )}
+      {...props}
+    >
+      <SelectPrimitive.Viewport className="p-1">
+        {children}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+
+SelectContent.displayName = "SelectContent";
+
+const SelectItem = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    data-slot="select-item"
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-md py-2 pl-3 pr-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    <span className="absolute right-2 flex size-4 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="size-4 text-primary" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+  </SelectPrimitive.Item>
+));
+
+SelectItem.displayName = "SelectItem";
+
+type SelectOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+type SelectProps = {
+  options: SelectOption[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  id?: string;
+  className?: string;
+  contentClassName?: string;
+  "aria-label"?: string;
+};
+
+function Select({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select an option",
+  disabled,
+  required,
+  name,
+  id,
+  className,
+  contentClassName,
+  "aria-label": ariaLabel,
+}: SelectProps) {
+  return (
+    <SelectPrimitive.Root
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled}
+      required={required}
+      name={name}
+    >
+      <SelectTrigger id={id} aria-label={ariaLabel} className={className}>
+        <SelectPrimitive.Value placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent className={contentClassName}>
+        {options.map((option) => (
+          <SelectItem
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+          >
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </SelectPrimitive.Root>
+  );
+}
+
+export {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  type SelectOption,
+  type SelectProps,
+};