diff --git a/gs/frontend/mcc/package-lock.json b/gs/frontend/mcc/package-lock.json
index d99df6328..e1dda8c9d 100644
--- a/gs/frontend/mcc/package-lock.json
+++ b/gs/frontend/mcc/package-lock.json
@@ -495,6 +495,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -541,6 +542,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1170,6 +1172,7 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.1.0.tgz",
       "integrity": "sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "7.1.0"
       },
@@ -2616,6 +2619,7 @@
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -2788,6 +2792,7 @@
       "integrity": "sha512-QoiaXANRkSXK6p0Duvt56W208du4P9Uye9hWLWgGMDTEoKPhuenzNcC4vGUmrNkiOKTlIrBoyNQYNpSwfEZXSg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -2798,6 +2803,7 @@
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -2808,6 +2814,7 @@
       "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -2858,6 +2865,7 @@
       "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.2",
         "@typescript-eslint/types": "8.46.2",
@@ -3225,6 +3233,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3405,6 +3414,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -3824,6 +3834,7 @@
       "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4405,6 +4416,7 @@
       "integrity": "sha512-SNSQteBL1IlV2zqhwwolaG9CwhIhTvVHWg3kTss/cLE7H/X4644mtPQqYvCfsSrGQWt9hSZcgOXX8bOZaMN+kA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@asamuzakjp/dom-selector": "^6.7.2",
         "cssstyle": "^5.3.1",
@@ -5071,6 +5083,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -5154,6 +5167,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5163,6 +5177,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -5666,6 +5681,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5810,6 +5826,7 @@
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -5938,6 +5955,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz",
       "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -6052,6 +6070,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
diff --git a/gs/frontend/mcc/src/App.tsx b/gs/frontend/mcc/src/App.tsx
index 6614a8675..851b94ae7 100644
--- a/gs/frontend/mcc/src/App.tsx
+++ b/gs/frontend/mcc/src/App.tsx
@@ -8,6 +8,7 @@ import Dashboard from "./pages/Dashboard";
 import AROAdmin from "./pages/AROAdmin";
 import LiveSession from "./pages/LiveSession";
 import Login from "./pages/Login";
+import Signup from "./pages/Signup";
 import PageNotFound from "./components/PageNotFound";
 
 /**
@@ -25,6 +26,7 @@ function App() {
         <Route path="/telemetry-data" element={<AROAdmin />} />
         <Route path="/aro-requests" element={<LiveSession />} />
         <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
         <Route path="*" element={<PageNotFound />} />
       </Routes>
       <ToastContainer />
diff --git a/gs/frontend/mcc/src/components/auth/AuthIcons.tsx b/gs/frontend/mcc/src/components/auth/AuthIcons.tsx
new file mode 100644
index 000000000..f62980bbf
--- /dev/null
+++ b/gs/frontend/mcc/src/components/auth/AuthIcons.tsx
@@ -0,0 +1,128 @@
+/**
+ * @brief Collection of SVG icons used in authentication forms
+ */
+
+export const EmailIcon = () => (
+  <svg
+    className="w-5 h-5 text-gray-400"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+    />
+  </svg>
+);
+
+export const LockIcon = () => (
+  <svg
+    className="w-5 h-5 text-gray-400"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+    />
+  </svg>
+);
+
+export const UserIcon = () => (
+  <svg
+    className="w-5 h-5 text-gray-400"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+    />
+  </svg>
+);
+
+export const BuildingIcon = () => (
+  <svg
+    className="w-5 h-5 text-gray-400"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+    />
+  </svg>
+);
+
+export const IDCardIcon = () => (
+  <svg
+    className="w-5 h-5 text-gray-400"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
+    />
+  </svg>
+);
+
+export const LocationIcon = () => (
+  <svg
+    className="w-5 h-5 text-gray-400"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+    />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+    />
+  </svg>
+);
+
+export const RocketIcon = () => (
+  <svg
+    className="w-8 h-8 text-white"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
+    />
+  </svg>
+);
diff --git a/gs/frontend/mcc/src/components/auth/FormInput.tsx b/gs/frontend/mcc/src/components/auth/FormInput.tsx
new file mode 100644
index 000000000..101d8c855
--- /dev/null
+++ b/gs/frontend/mcc/src/components/auth/FormInput.tsx
@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+
+interface FormInputProps {
+  id: string;
+  label: string;
+  type?: string;
+  placeholder: string;
+  icon?: ReactNode;
+  required?: boolean;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+/**
+ * @brief Reusable form input component with label and optional icon
+ * @param props FormInputProps
+ * @return tsx element of FormInput component
+ */
+function FormInput({
+  id,
+  label,
+  type = "text",
+  placeholder,
+  icon,
+  required = false,
+  value,
+  onChange,
+}: FormInputProps) {
+  return (
+    <div>
+      <label htmlFor={id} className="text-white block mb-2 text-sm font-medium">
+        {label} {required && <span className="text-red-400">*</span>}
+      </label>
+      <div className="relative">
+        {icon && (
+          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            {icon}
+          </div>
+        )}
+        <input
+          type={type}
+          id={id}
+          name={id}
+          required={required}
+          value={value}
+          onChange={onChange}
+          className={`w-full bg-transparent text-gray-300 ${
+            icon ? "pl-10" : "pl-4"
+          } pr-4 py-2.5 rounded-lg border border-gray-600/50 focus:outline-none focus:border-gray-500 focus:ring-1 focus:ring-gray-500`}
+          placeholder={placeholder}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default FormInput;
diff --git a/gs/frontend/mcc/src/index.css b/gs/frontend/mcc/src/index.css
index 733c416e0..9a1f2bdf8 100644
--- a/gs/frontend/mcc/src/index.css
+++ b/gs/frontend/mcc/src/index.css
@@ -9,7 +9,7 @@
     border-color: var(--border);
   }
   body {
-    overflow: hidden;
+    overflow-y: auto;
     display: flex;
     background-color: var(--background);
     font-family: var(--font-default);
@@ -20,7 +20,7 @@
     height: 100%;
     width: 100%;
     margin: 10px;
-    overflow: hidden;
+    overflow: visible;
   }
 }
 
diff --git a/gs/frontend/mcc/src/pages/Login.tsx b/gs/frontend/mcc/src/pages/Login.tsx
index 6dc1b79cd..89fb5e9b5 100644
--- a/gs/frontend/mcc/src/pages/Login.tsx
+++ b/gs/frontend/mcc/src/pages/Login.tsx
@@ -4,41 +4,134 @@
  */
 function Login() {
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen px-4">
-      <div className="w-full max-w-md bg-gray-900/50 backdrop-blur-sm rounded-lg p-8 border border-gray-700/50">
-        <h1 className="text-white text-3xl font-bold mb-6 text-center">
-          Login
+    <div className="flex flex-col items-center min-h-screen overflow-y-auto px-4 py-8">
+      <div className="w-full max-w-md bg-gray-900/50 backdrop-blur-sm rounded-lg p-8 border border-gray-700/50 my-8">
+        {/* Rocket Icon */}
+        <div className="flex justify-center mb-4">
+          <div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center">
+            <svg
+              className="w-8 h-8 text-white"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
+              />
+            </svg>
+          </div>
+        </div>
+
+        {/* Title */}
+        <h1 className="text-white text-2xl font-bold mb-2 text-center">
+          UW Orbital MCC
         </h1>
+        <p className="text-gray-400 text-sm mb-6 text-center">
+          Mission Control Center Access
+        </p>
+
         <form className="space-y-4">
+          {/* Email Address */}
           <div>
-            <label htmlFor="username" className="text-gray-300 block mb-2">
-              Username
+            <label htmlFor="email" className="text-white block mb-2 text-sm font-medium">
+              Email Address
             </label>
-            <input
-              type="text"
-              id="username"
-              className="w-full bg-gray-800/50 text-white px-4 py-2 rounded-lg border border-gray-600/50 focus:outline-none focus:border-gray-500"
-              placeholder="Enter your username"
-            />
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg
+                  className="w-5 h-5 text-gray-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                  />
+                </svg>
+              </div>
+              <input
+                type="email"
+                id="email"
+                className="w-full bg-transparent text-gray-300 pl-10 pr-4 py-2.5 rounded-lg border border-gray-600/50 focus:outline-none focus:border-gray-500"
+                placeholder="astronaut@uworbital.com"
+              />
+            </div>
           </div>
+
+          {/* Password */}
           <div>
-            <label htmlFor="password" className="text-gray-300 block mb-2">
+            <label htmlFor="password" className="text-white block mb-2 text-sm font-medium">
               Password
             </label>
-            <input
-              type="password"
-              id="password"
-              className="w-full bg-gray-800/50 text-white px-4 py-2 rounded-lg border border-gray-600/50 focus:outline-none focus:border-gray-500"
-              placeholder="Enter your password"
-            />
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg
+                  className="w-5 h-5 text-gray-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                  />
+                </svg>
+              </div>
+              <input
+                type="password"
+                id="password"
+                className="w-full bg-transparent text-gray-300 pl-10 pr-4 py-2.5 rounded-lg border border-gray-600/50 focus:outline-none focus:border-gray-500"
+                placeholder="Enter your password"
+              />
+            </div>
+          </div>
+
+          {/* Remember me and Forgot password */}
+          <div className="flex items-center justify-between text-sm">
+            <label className="flex items-center text-gray-400 cursor-pointer">
+              <input
+                type="checkbox"
+                className="mr-2 w-4 h-4 bg-transparent border border-gray-600 rounded"
+              />
+              Remember me
+            </label>
+            <a href="#" className="text-blue-500 hover:text-blue-400">
+              Forgot password?
+            </a>
           </div>
+
+          {/* Submit Button */}
           <button
             type="submit"
-            className="w-full bg-white text-black py-2 rounded-lg hover:bg-gray-200 transition-colors mt-6"
+            className="w-full cursor-pointer bg-blue-600 text-white py-2.5 rounded-lg hover:bg-blue-700 transition-colors mt-6 font-medium"
           >
-            Login
+            Access Mission Control
           </button>
         </form>
+
+        {/* Signup link */}
+        <p className="text-center text-gray-400 text-sm mt-6">
+          Don't have an account?{" "}
+          <a href="/signup" className="text-blue-500 hover:text-blue-400">
+            Sign up
+          </a>
+        </p>
+
+        {/* Footer */}
+        <p className="text-center text-gray-500 text-xs mt-8">
+          SECURE CONNECTION - MCC v2.0
+        </p>
       </div>
     </div>
   );
diff --git a/gs/frontend/mcc/src/pages/Signup.tsx b/gs/frontend/mcc/src/pages/Signup.tsx
new file mode 100644
index 000000000..a32382bb4
--- /dev/null
+++ b/gs/frontend/mcc/src/pages/Signup.tsx
@@ -0,0 +1,261 @@
+import { useState } from "react";
+import FormInput from "../components/auth/FormInput";
+import {
+  EmailIcon,
+  LockIcon,
+  UserIcon,
+  BuildingIcon,
+  IDCardIcon,
+  LocationIcon,
+  RocketIcon,
+} from "../components/auth/AuthIcons";
+
+/**
+ * Configuration for form fields - modify this to add/remove/change fields easily
+ */
+const FORM_CONFIG = {
+  // Basic fields required for all users
+  basicFields: [
+    {
+      id: "email",
+      label: "Email Address",
+      type: "email",
+      placeholder: "astronaut@uworbital.com",
+      icon: <EmailIcon />,
+    },
+    {
+      id: "password",
+      label: "Password",
+      type: "password",
+      placeholder: "Create a secure password",
+      icon: <LockIcon />,
+    },
+    {
+      id: "confirmPassword",
+      label: "Confirm Password",
+      type: "password",
+      placeholder: "Re-enter your password",
+      icon: <LockIcon />,
+    },
+  ],
+  // Additional fields for operators
+  operatorFields: [
+    {
+      id: "firstName",
+      label: "First Name",
+      type: "text",
+      placeholder: "John",
+      icon: <UserIcon />,
+    },
+    {
+      id: "lastName",
+      label: "Last Name",
+      type: "text",
+      placeholder: "Doe",
+      icon: <UserIcon />,
+    },
+    {
+      id: "institution",
+      label: "Institution",
+      type: "text",
+      placeholder: "University of Waterloo",
+      icon: <BuildingIcon />,
+    },
+    {
+      id: "identification",
+      label: "Identification Number",
+      type: "text",
+      placeholder: "ID-12345678",
+      icon: <IDCardIcon />,
+    },
+    {
+      id: "address",
+      label: "Address",
+      type: "text",
+      placeholder: "123 Orbital Drive, Waterloo, ON",
+      icon: <LocationIcon />,
+    },
+  ],
+};
+
+/**
+ * @brief Signup component for user registration
+ * @return tsx element of Signup component
+ */
+function Signup() {
+  const [isOperator, setIsOperator] = useState(false);
+  const [formData, setFormData] = useState({
+    email: "",
+    password: "",
+    confirmPassword: "",
+    firstName: "",
+    lastName: "",
+    institution: "",
+    identification: "",
+    address: "",
+  });
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Validate passwords match
+    if (formData.password !== formData.confirmPassword) {
+      alert("Passwords do not match!");
+      return;
+    }
+
+    // TODO: Implement actual signup logic here
+    console.log("Signup data:", {
+      ...formData,
+      role: isOperator ? "operator" : "user",
+    });
+
+    alert("Signup successful! (This is a placeholder)");
+  };
+
+  return (
+    <div className="flex flex-col items-center min-h-screen overflow-y-auto px-4 py-8">
+      <div className="w-full max-w-2xl bg-gray-900/50 backdrop-blur-sm rounded-lg p-8 border border-gray-700/50 my-8">
+        {/* Rocket Icon */}
+        <div className="flex justify-center mb-4">
+          <div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center">
+            <RocketIcon />
+          </div>
+        </div>
+
+        {/* Title */}
+        <h1 className="text-white text-2xl font-bold mb-2 text-center">
+          Join UW Orbital MCC
+        </h1>
+        <p className="text-gray-400 text-sm mb-6 text-center">
+          Create your Mission Control Center account
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Role Selection */}
+          <div className="bg-gray-800/30 p-4 rounded-lg border border-gray-700/50">
+            <label className="text-white block mb-3 text-sm font-medium">
+              Account Type <span className="text-red-400">*</span>
+            </label>
+            <div className="flex gap-4">
+              <button
+                type="button"
+                onClick={() => setIsOperator(false)}
+                className={`flex-1 cursor-pointer py-3 px-4 rounded-lg border transition-all ${
+                  !isOperator
+                    ? "bg-blue-600 border-blue-500 text-white"
+                    : "bg-transparent border-gray-600 text-gray-400 hover:border-gray-500"
+                }`}
+              >
+                <div className="font-medium">Standard User</div>
+                <div className="text-xs mt-1 opacity-80">Basic access</div>
+              </button>
+              <button
+                type="button"
+                onClick={() => setIsOperator(true)}
+                className={`flex-1 cursor-pointer py-3 px-4 rounded-lg border transition-all ${
+                  isOperator
+                    ? "bg-blue-600 border-blue-500 text-white"
+                    : "bg-transparent border-gray-600 text-gray-400 hover:border-gray-500"
+                }`}
+              >
+                <div className="font-medium">Operator</div>
+                <div className="text-xs mt-1 opacity-80">Full access</div>
+              </button>
+            </div>
+          </div>
+
+          {/* Basic Fields - Always shown */}
+          <div className="space-y-4">
+            {FORM_CONFIG.basicFields.map((field) => (
+              <FormInput
+                key={field.id}
+                id={field.id}
+                label={field.label}
+                type={field.type}
+                placeholder={field.placeholder}
+                icon={field.icon}
+                required
+                value={formData[field.id as keyof typeof formData]}
+                onChange={handleInputChange}
+              />
+            ))}
+          </div>
+
+          {/* Operator Additional Fields - Conditionally shown */}
+          {isOperator && (
+            <div className="space-y-4 pt-4 border-t border-gray-700/50">
+              <p className="text-gray-400 text-sm mb-2">
+                Additional information required for operator access
+              </p>
+              {FORM_CONFIG.operatorFields.map((field) => (
+                <FormInput
+                  key={field.id}
+                  id={field.id}
+                  label={field.label}
+                  type={field.type}
+                  placeholder={field.placeholder}
+                  icon={field.icon}
+                  required
+                  value={formData[field.id as keyof typeof formData]}
+                  onChange={handleInputChange}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Terms and Conditions */}
+          <div className="flex items-start text-sm pt-2">
+            <input
+              type="checkbox"
+              id="terms"
+              required
+              className="mr-2 mt-1 w-4 h-4 bg-transparent border border-gray-600 rounded"
+            />
+            <label htmlFor="terms" className="text-gray-400">
+              I agree to the{" "}
+              <a href="#" className="text-blue-500 hover:text-blue-400">
+                Terms of Service
+              </a>{" "}
+              and{" "}
+              <a href="#" className="text-blue-500 hover:text-blue-400">
+                Privacy Policy
+              </a>
+            </label>
+          </div>
+
+          {/* Submit Button */}
+          <button
+            type="submit"
+            className="w-full cursor-pointer bg-blue-600 text-white py-2.5 rounded-lg hover:bg-blue-700 transition-colors mt-6 font-medium"
+          >
+            Create Account
+          </button>
+        </form>
+
+        {/* Login link */}
+        <p className="text-center text-gray-400 text-sm mt-6">
+          Already have an account?{" "}
+          <a href="/login" className="text-blue-500 hover:text-blue-400">
+            Sign in
+          </a>
+        </p>
+
+        {/* Footer */}
+        <p className="text-center text-gray-500 text-xs mt-8">
+          SECURE CONNECTION - MCC v2.0
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Signup;