From 1cee8cda3694a3ee9f2d37e637609bd1c9bb8243 Mon Sep 17 00:00:00 2001
From: Rebecca Smith <2145912+Rebeccals@users.noreply.github.com>
Date: Tue, 8 Apr 2025 14:19:12 -0700
Subject: [PATCH 1/6] Updated Onboarding Page

---
 frontend/bitmatch/package-lock.json         | 442 ++++++++++++++++++++
 frontend/bitmatch/package.json              |   3 +
 frontend/bitmatch/src/App.jsx               |  27 +-
 frontend/bitmatch/src/views/OnboardPage.jsx | 247 +++++++----
 frontend/bitmatch/src/views/SignInPage.jsx  |   2 +-
 5 files changed, 642 insertions(+), 79 deletions(-)

diff --git a/frontend/bitmatch/package-lock.json b/frontend/bitmatch/package-lock.json
index 1b9f647..bc61c46 100644
--- a/frontend/bitmatch/package-lock.json
+++ b/frontend/bitmatch/package-lock.json
@@ -9,11 +9,14 @@
       "version": "0.0.0",
       "dependencies": {
         "@clerk/clerk-react": "^5.24.0",
+        "@radix-ui/react-checkbox": "^1.1.4",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-label": "^2.1.2",
         "@radix-ui/react-popover": "^1.1.6",
         "@radix-ui/react-scroll-area": "^1.2.3",
+        "@radix-ui/react-select": "^2.1.6",
         "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-toast": "^1.2.7",
         "@radix-ui/react-toggle": "^1.1.2",
         "axios": "^1.8.3",
         "class-variance-authority": "^0.7.1",
@@ -1168,6 +1171,62 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.4.tgz",
+      "integrity": "sha512-wP0CPAHq+P5I4INKe3hJrIa1WoNqqrejzW+zoU0rOvo1b9gDEJJFl2rYfO1PYJUQCc2H1WZxIJmyv9BS8i5fLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "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.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.2.tgz",
+      "integrity": "sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.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-compose-refs": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
@@ -1527,6 +1586,49 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.6.tgz",
+      "integrity": "sha512-T6ajELxRvTuAMWH0YmRJ1qez+x4/7Nq7QIx7zJ0VK3qaEWdnWpNbEDnmWldG1zBDwqrLy5aLMUWcoGirVj5kMg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.2",
+        "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-slot": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
@@ -1544,6 +1646,307 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.7.tgz",
+      "integrity": "sha512-0IWTbAUKvzdpOaWDMZisXZvScXzF0phaQjWspK8RUMEUxjLbli+886mB/kXTIC3F+t5vQ0n0vYn+dsX8s+WdfA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.6",
+        "@radix-ui/react-portal": "1.1.5",
+        "@radix-ui/react-presence": "1.1.3",
+        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-visually-hidden": "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-toast/node_modules/@radix-ui/primitive": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.3.tgz",
+      "integrity": "sha512-mM2pxoQw5HJ49rkzwOs7Y6J4oYH22wS8BfK2/bBxROlI4xuR0c4jEenQP63LlTlDkO6Buj2Vt+QYAYcOgqtrXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-slot": "1.2.0"
+      },
+      "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-toast/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-toast/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-toast/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.6.tgz",
+      "integrity": "sha512-7gpgMT2gyKym9Jz2ZhlRXSg2y6cNQIK8d/cqBZ0RBCaps8pFryCWXiUKI+uHGFrhMrbGUP7U6PWgiXzIxoyF3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.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-toast/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.5.tgz",
+      "integrity": "sha512-ps/67ZqsFm+Mb6lSPJpfhRLrVL2i2fntgCmGMqqth4eaGUf+knAuuRtWVJrNjUhExgmdRqftSgzpf0DF0n6yXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.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-toast/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.3.tgz",
+      "integrity": "sha512-IrVLIhskYhH3nLvtcBLQFZr61tBG7wx7O3kEmdzcYwRGAEBmBicGGL7ATzNgruYJ3xBTbuzEEq9OXJM3PAX3tA==",
+      "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-toast/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.3.tgz",
+      "integrity": "sha512-Pf/t/GkndH7CQ8wE2hbkXA+WyZ83fhQQn5DDmwDiDo6AwN/fhaH8oqZ0jRjMrO2iaMhDi6P1HRx6AZwyMinY1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.0"
+      },
+      "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-toast/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
+      "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
+      "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-toast/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-toast/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.1.tgz",
+      "integrity": "sha512-YnEXIy8/ga01Y1PN0VfaNH//MhA91JlEGVBDxDzROqwrAtG5Yr2QGEPz8A/rJA3C7ZAHryOYGaUv8fLSW2H/mg==",
+      "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-toast/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-toast/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-toast/node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.3.tgz",
+      "integrity": "sha512-oXSF3ZQRd5fvomd9hmUCb2EHSZbPp3ZSHAHJJU/DlF9XoFkJBBW8RHU/E8WEH+RbSfJd/QFA0sl8ClJXknBwHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.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-toggle": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.2.tgz",
@@ -1635,6 +2038,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "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.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
@@ -1671,6 +2089,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.2.tgz",
+      "integrity": "sha512-1SzA4ns2M1aRlvxErqhLHsBHoS5eI5UUcI2awAMgGUp4LoaoWOKYmvqDY2s/tltuPkh3Yk77YF/r3IRj+Amx4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.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/rect": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
@@ -2539,6 +2980,7 @@
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
       "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
       "dependencies": {
         "clsx": "^2.1.1"
       },
diff --git a/frontend/bitmatch/package.json b/frontend/bitmatch/package.json
index 5d62722..734b044 100644
--- a/frontend/bitmatch/package.json
+++ b/frontend/bitmatch/package.json
@@ -11,11 +11,14 @@
   },
   "dependencies": {
     "@clerk/clerk-react": "^5.24.0",
+    "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-toast": "^1.2.7",
     "@radix-ui/react-toggle": "^1.1.2",
     "axios": "^1.8.3",
     "class-variance-authority": "^0.7.1",
diff --git a/frontend/bitmatch/src/App.jsx b/frontend/bitmatch/src/App.jsx
index 1dbb200..1ed5e5c 100644
--- a/frontend/bitmatch/src/App.jsx
+++ b/frontend/bitmatch/src/App.jsx
@@ -16,7 +16,15 @@ import ProjectDetailPage from "./views/IndividualProjectPage";
 import AddProjectPage from "./views/AddProjectPage";
 import SignUpPage from "./views/SignUpPage";
 import SignInPage from "./views/SignInPage";
+
 import OnboardPage from "./views/OnboardPage";
+import InterestPage from './components/onboarding/Interest';
+import LocationPage from './components/onboarding/Location';
+import PositionPage from './components/onboarding/Roles';
+import SkillsPage from './components/onboarding/Skills';
+import UserPage from './components/onboarding/CreateProfile';
+
+// Uncomment when ready
 // import BrowsePage from "./views/BrowsePage";
 // import AboutPage from "./views/AboutPage";
 
@@ -26,10 +34,9 @@ function AppRoutes() {
   const location = useLocation();
   const { isSignedIn } = useUser();
   const isLanding = location.pathname === "/";
-  const layoutClass =
-    isLanding && !isSignedIn
-      ? "py-8"
-      : "container mx-auto px-4 py-16 flex pb-6 flex-col items-center justify-center min-h-screen";
+  const layoutClass = !isSignedIn
+    ? "py-8"
+    : "container mx-auto px-4 py-16 flex pb-6 flex-col items-center justify-center min-h-screen";
 
   return (
     <div className={layoutClass}>
@@ -78,10 +85,18 @@ function AppRoutes() {
         {/* Public pages */}
         <Route path="/sign-up" element={<SignUpPage />} />
         <Route path="/sign-in" element={<SignInPage />} />
-        <Route path="/onboard" element={<OnboardPage />} />
+
+        {/* Onboarding with redirect and nested routes */}
+        <Route path="/onboard" element={<OnboardPage />}>
+          <Route path="interests" element={<InterestPage />} />
+          <Route path="location" element={<LocationPage />} />
+          <Route path="positions" element={<PositionPage />} />
+          <Route path="skills" element={<SkillsPage />} />
+          <Route path="user" element={<UserPage />} />
+        </Route>
 
         {/* Uncomment when ready */}
-        {/*
+        {/* 
         <Route path="/browse" element={<BrowsePage />} />
         <Route path="/about" element={<AboutPage />} />
         */}
diff --git a/frontend/bitmatch/src/views/OnboardPage.jsx b/frontend/bitmatch/src/views/OnboardPage.jsx
index ca532fd..c611954 100644
--- a/frontend/bitmatch/src/views/OnboardPage.jsx
+++ b/frontend/bitmatch/src/views/OnboardPage.jsx
@@ -1,82 +1,185 @@
-import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/Label";
-import { Textarea } from "@/components/ui/Textarea";
+'use client'
+
+import { useState, useRef } from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Button } from '@/components/ui/button'
+import { Toaster } from '@/components/ui/toaster'
+import CreateProfile from '@/components/onboarding/CreateProfile'
+import Location from '@/components/onboarding/Location'
+import Roles from '@/components/onboarding/Roles'
+import Interest from '@/components/onboarding/Interest'
+import Skills from '@/components/onboarding/Skills'
+import StepIndicator from '@/components/onboarding/StepIndicator'
 
 export default function OnboardPage() {
-  const navigate = useNavigate();
-  const [formData, setFormData] = useState({
-    role: "",
-    interests: "",
-    bio: "",
-  });
+  const [currentStep, setCurrentStep] = useState(1)
+  const [formData, setFormData] = useState({})
+  const totalSteps = 5
+
+  const createProfileRef = useRef()
+  const locationRef = useRef()
+  const rolesRef = useRef()
+  const interestRef = useRef()
+  const skillsRef = useRef()
+
+  const stepTitles = [
+    'Create your Profile',
+    'Location',
+    'Roles & Positions',
+    'Project Interests',
+    'List Skill Sets',
+  ]
+
+  const updateStepData = (data) => {
+    setFormData((prev) => ({ ...prev, ...data }))
+  }
+
+  const validateStep = () => {
+    switch (currentStep) {
+      case 1:
+        return createProfileRef.current?.validate() ?? false
+      case 2:
+        return locationRef.current?.validate() ?? false
+      case 3:
+        return rolesRef.current?.validate() ?? false
+      case 4:
+        return interestRef.current?.validate() ?? false
+      case 5:
+        return skillsRef.current?.validate() ?? false
+      default:
+        return true
+    }
+  }
+
+  const handleNext = () => {
+    if (validateStep()) {
+      setCurrentStep(currentStep + 1)
+    } else {
+      toast({
+        variant: 'destructive',
+        title: '🚫 Incomplete Step',
+        description: 'Please complete this step before proceeding.',
+      })
+    }
+  }
+
+  const handlePrevious = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1)
+    }
+  }
 
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
-  };
+  const handleSubmit = async () => {
+    try {
+      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/user-profiles/`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+      })
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
+      if (!res.ok) throw new Error('Failed to submit')
+      alert('✅ Profile submitted successfully!')
+    } catch (err) {
+      console.error(err)
+      alert('❌ Submission failed')
+    }
+  }
 
-    // You can send this data to Supabase, Clerk user metadata, or your backend here
-    console.log("Onboarding data submitted:", formData);
+  const renderStep = () => {
+    const stepProps = { onDataChange: updateStepData, formData }
 
-    // Redirect to dashboard or home
-    navigate("/dashboard");
-  };
+    switch (currentStep) {
+      case 1:
+        return <CreateProfile {...stepProps} ref={createProfileRef} />
+      case 2:
+        return <Location {...stepProps} ref={locationRef} />
+      case 3:
+        return <Roles {...stepProps} ref={rolesRef} />
+      case 4:
+        return <Interest {...stepProps} ref={interestRef} />
+      case 5:
+        return <Skills {...stepProps} ref={skillsRef} />
+      default:
+        return null
+    }
+  }
 
   return (
-    <div className="min-h-screen flex items-center justify-center">
-      <div className="w-full max-w-xl bg-white shadow-md rounded-lg p-8 space-y-6">
-        <h1 className="text-3xl font-bold text-center">Work in Progress!</h1>
-        <p className="text-muted-foreground text-center">
-          This is just a placeholder for the onboarding process. Nothing works
-          right now.
-        </p>
-
-        <form className="space-y-4" onSubmit={handleSubmit}>
-          <div className="space-y-2">
-            <Label htmlFor="role">What role are you interested in?</Label>
-            <Input
-              id="role"
-              name="role"
-              placeholder="e.g. Frontend Developer"
-              value={formData.role}
-              onChange={handleChange}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="interests">What are your project interests?</Label>
-            <Input
-              id="interests"
-              name="interests"
-              placeholder="e.g. AI, Web Design, Open Source"
-              value={formData.interests}
-              onChange={handleChange}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="bio">Tell us a little about yourself</Label>
-            <Textarea
-              id="bio"
-              name="bio"
-              rows="4"
-              placeholder="Your background, goals, or anything you'd like to share..."
-              value={formData.bio}
-              onChange={handleChange}
-            />
-          </div>
-
-          <Button type="submit" className="w-full">
-            Finish Onboarding
-          </Button>
-        </form>
+    <>
+      <Toaster /> {/* ✅ Required for showing toasts */}
+
+      <div className="pt-8 min-h-screen flex flex-col items-center">
+        {/* Header */}
+        <div className="py-16 w-full bg-black text-white text-center">
+          <h1>{stepTitles[currentStep - 1]}</h1>
+        </div>
+
+        {/* Progress Bar */}
+        <div className="w-full h-2 bg-gray-200">
+          <div
+            className="h-2 bg-blue-600 transition-all duration-500 ease-in-out"
+            style={{ width: `${(currentStep / totalSteps) * 100}%` }}
+          />
+        </div>
+
+        {/* Step Indicator */}
+        <StepIndicator currentStep={currentStep} totalSteps={totalSteps} titles={stepTitles} />
+
+        {/* Main Content */}
+        <div className="w-full max-w-3xl px-6 py-10 flex-1">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={currentStep}
+              initial={{ opacity: 0, x: 50 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -50 }}
+              transition={{ duration: 0.3 }}
+            >
+              {renderStep()}
+            </motion.div>
+          </AnimatePresence>
+
+          {/* Optional JSON debug preview */}
+          {/* <pre className="text-xs mt-6 bg-gray-100 p-4 rounded w-full overflow-auto">
+            {JSON.stringify(formData, null, 2)}
+          </pre> */}
+        </div>
+
+        {/* Navigation */}
+        <div className="w-full max-w-3xl px-6 mt-8 mb-12 flex justify-between items-center">
+          {currentStep > 1 ? (
+            <Button
+              onClick={handlePrevious}
+              variant="outline"
+              size="sm"
+              className="w-28 text-white bg-black hover:bg-blue-700 hover:text-white"
+            >
+              <ChevronLeft className="mr-1 h-4 w-4" />
+              Previous
+            </Button>
+          ) : (
+            <div className="w-28" />
+          )}
+
+          {currentStep < totalSteps ? (
+            <Button onClick={handleNext} size="sm" className="w-28 hover:bg-blue-700">
+              Next
+              <ChevronRight className="ml-1 h-4 w-4" />
+            </Button>
+          ) : (
+            <Button
+              onClick={handleSubmit}
+              className="w-28 bg-green-600 hover:bg-green-700"
+              size="sm"
+            >
+              Submit
+            </Button>
+          )}
+        </div>
       </div>
-    </div>
-  );
+    </>
+  )
 }
diff --git a/frontend/bitmatch/src/views/SignInPage.jsx b/frontend/bitmatch/src/views/SignInPage.jsx
index 7aec7bc..7fa581b 100644
--- a/frontend/bitmatch/src/views/SignInPage.jsx
+++ b/frontend/bitmatch/src/views/SignInPage.jsx
@@ -9,7 +9,7 @@ export default function SignInPage() {
           path="/sign-in"
           routing="path"
           signUpUrl="/sign-up"
-          redirectUrl="/dashboard"
+          forceRedirectUrl="/"
           appearance={{
             elements: {
               rootBox: "mx-auto",

From e1088532370657cd5d1ce2b93bb48e970b064ae5 Mon Sep 17 00:00:00 2001
From: Rebecca Smith <2145912+Rebeccals@users.noreply.github.com>
Date: Tue, 8 Apr 2025 14:19:29 -0700
Subject: [PATCH 2/6] More onboarding updates

---
 .../components/onboarding/CreateProfile.jsx   | 126 ++++++++++++++
 .../src/components/onboarding/Interest.jsx    |  88 ++++++++++
 .../src/components/onboarding/Location.jsx    |  97 +++++++++++
 .../src/components/onboarding/Roles.jsx       |  88 ++++++++++
 .../src/components/onboarding/Skills.jsx      |  88 ++++++++++
 .../components/onboarding/StepIndicator.jsx   |  20 +++
 frontend/bitmatch/src/components/ui/badge.jsx |  14 ++
 .../bitmatch/src/components/ui/checkbox.jsx   |  29 ++++
 frontend/bitmatch/src/components/ui/toast.jsx |  85 ++++++++++
 .../bitmatch/src/components/ui/toaster.jsx    |  33 ++++
 frontend/bitmatch/src/hooks/use-toast.js      | 155 ++++++++++++++++++
 11 files changed, 823 insertions(+)
 create mode 100644 frontend/bitmatch/src/components/onboarding/CreateProfile.jsx
 create mode 100644 frontend/bitmatch/src/components/onboarding/Interest.jsx
 create mode 100644 frontend/bitmatch/src/components/onboarding/Location.jsx
 create mode 100644 frontend/bitmatch/src/components/onboarding/Roles.jsx
 create mode 100644 frontend/bitmatch/src/components/onboarding/Skills.jsx
 create mode 100644 frontend/bitmatch/src/components/onboarding/StepIndicator.jsx
 create mode 100644 frontend/bitmatch/src/components/ui/badge.jsx
 create mode 100644 frontend/bitmatch/src/components/ui/checkbox.jsx
 create mode 100644 frontend/bitmatch/src/components/ui/toast.jsx
 create mode 100644 frontend/bitmatch/src/components/ui/toaster.jsx
 create mode 100644 frontend/bitmatch/src/hooks/use-toast.js

diff --git a/frontend/bitmatch/src/components/onboarding/CreateProfile.jsx b/frontend/bitmatch/src/components/onboarding/CreateProfile.jsx
new file mode 100644
index 0000000..19c6ef8
--- /dev/null
+++ b/frontend/bitmatch/src/components/onboarding/CreateProfile.jsx
@@ -0,0 +1,126 @@
+'use client'
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  useImperativeHandle,
+} from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Badge } from '@/components/ui/badge'
+import { X } from 'lucide-react'
+
+// ✅ Component with forwardRef
+const CreateProfile = forwardRef(({ onDataChange, formData }, ref) => {
+  const [firstName, setFirstName] = useState(formData?.first_name || '')
+  const [lastName, setLastName] = useState(formData?.last_name || '')
+  const [colleges, setColleges] = useState(formData?.colleges || [])
+  const [newCollege, setNewCollege] = useState('')
+  const [errors, setErrors] = useState({})
+
+  // Send data to parent on change
+  useEffect(() => {
+    onDataChange({ first_name: firstName, last_name: lastName, colleges })
+  }, [firstName, lastName, colleges])
+
+  // Validation logic exposed via ref
+  useImperativeHandle(ref, () => ({
+    validate: () => {
+      const newErrors = {}
+      if (!firstName.trim()) newErrors.firstName = 'First name is required.'
+      if (!lastName.trim()) newErrors.lastName = 'Last name is required.'
+      if (colleges.length === 0) newErrors.colleges = 'At least one college is required.'
+      setErrors(newErrors)
+      return Object.keys(newErrors).length === 0
+    },
+  }))
+
+  const handleAddCollege = () => {
+    const trimmed = newCollege.trim()
+    if (trimmed && !colleges.includes(trimmed)) {
+      const updated = [...colleges, trimmed].sort()
+      setColleges(updated)
+      setNewCollege('')
+    }
+  }
+
+  const handleRemoveCollege = (college) => {
+    const updated = colleges.filter((c) => c !== college).sort()
+    setColleges(updated)
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* First Name */}
+      <div className="space-y-2">
+        <label htmlFor="firstName" className="text-sm font-medium">
+          First Name <span className="text-red-500">*</span>
+        </label>
+        <Input
+          id="firstName"
+          value={firstName}
+          onChange={(e) => setFirstName(e.target.value)}
+          placeholder="Enter your first name"
+        />
+        {errors.firstName && <p className="text-red-500 text-sm">{errors.firstName}</p>}
+      </div>
+
+      {/* Last Name */}
+      <div className="space-y-2">
+        <label htmlFor="lastName" className="text-sm font-medium">
+          Last Name <span className="text-red-500">*</span>
+        </label>
+        <Input
+          id="lastName"
+          value={lastName}
+          onChange={(e) => setLastName(e.target.value)}
+          placeholder="Enter your last name"
+        />
+        {errors.lastName && <p className="text-red-500 text-sm">{errors.lastName}</p>}
+      </div>
+
+      {/* Colleges */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium">
+          Colleges/Universities <span className="text-red-500">*</span>
+        </label>
+        <div className="flex gap-2">
+          <Input
+            value={newCollege}
+            onChange={(e) => setNewCollege(e.target.value)}
+            placeholder="Add college or university"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                handleAddCollege()
+              }
+            }}
+          />
+          <Button onClick={handleAddCollege} className="bg-blue-600 hover:bg-blue-700">
+            Add
+          </Button>
+        </div>
+
+        <div className="flex flex-wrap gap-2 mt-2">
+          {colleges.map((college) => (
+            <Badge key={college} className="bg-blue-600 text-white">
+              {college}
+              <button
+                onClick={() => handleRemoveCollege(college)}
+                className="ml-1 hover:text-gray-200"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+
+        {errors.colleges && <p className="text-red-500 text-sm">{errors.colleges}</p>}
+      </div>
+    </div>
+  )
+})
+
+// ✅ Export wrapped with forwardRef
+export default CreateProfile
diff --git a/frontend/bitmatch/src/components/onboarding/Interest.jsx b/frontend/bitmatch/src/components/onboarding/Interest.jsx
new file mode 100644
index 0000000..a1602c1
--- /dev/null
+++ b/frontend/bitmatch/src/components/onboarding/Interest.jsx
@@ -0,0 +1,88 @@
+'use client'
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  useImperativeHandle,
+} from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { X } from 'lucide-react'
+
+const Interest = forwardRef(({ onDataChange, formData }, ref) => {
+  const [interests, setInterests] = useState(formData?.interests || [])
+  const [newInterest, setNewInterest] = useState('')
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    onDataChange({ interests })
+  }, [interests])
+
+  const validate = () => {
+    if (interests.length === 0) {
+      setError('Please add at least one interest.')
+      return false
+    }
+    setError('')
+    return true
+  }
+
+  useImperativeHandle(ref, () => ({ validate }))
+
+  const handleAdd = () => {
+    const trimmed = newInterest.trim()
+    if (trimmed && !interests.includes(trimmed)) {
+      setInterests([...interests, trimmed].sort())
+      setNewInterest('')
+      setError('')
+    }
+  }
+
+  const handleRemove = (interest) => {
+    setInterests(interests.filter((i) => i !== interest))
+  }
+
+  return (
+    <div className="space-y-4">
+      <label className="text-sm font-medium">
+        What categories are you most interested in? <span className="text-red-500">*</span>
+      </label>
+
+      <div className="flex space-x-2">
+        <Input
+          value={newInterest}
+          onChange={(e) => setNewInterest(e.target.value)}
+          placeholder="Type a category"
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              handleAdd()
+            }
+          }}
+        />
+        <Button onClick={handleAdd} className="bg-blue-600 hover:bg-blue-700">
+          Add
+        </Button>
+      </div>
+
+      {error && <p className="text-red-500 text-sm">{error}</p>}
+
+      <div className="grid grid-cols-2 gap-2">
+        {interests.map((interest) => (
+          <div
+            key={interest}
+            className="flex justify-between items-center bg-blue-600 text-white px-3 py-2 rounded-md"
+          >
+            <span>{interest}</span>
+            <button onClick={() => handleRemove(interest)}>
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+})
+
+export default Interest
diff --git a/frontend/bitmatch/src/components/onboarding/Location.jsx b/frontend/bitmatch/src/components/onboarding/Location.jsx
new file mode 100644
index 0000000..3c169a4
--- /dev/null
+++ b/frontend/bitmatch/src/components/onboarding/Location.jsx
@@ -0,0 +1,97 @@
+'use client'
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  useImperativeHandle,
+} from 'react'
+import { Checkbox } from '@/components/ui/checkbox'
+
+const Location = forwardRef(({ onDataChange, formData }, ref) => {
+  const [location, setLocation] = useState(formData?.location || '')
+  const [preferences, setPreferences] = useState(
+    formData?.location_preferences?.filter(p => p !== '') || ["I'm location flexible (REMOTE)"]
+  )
+  const [other, setOther] = useState('')
+  const [errors, setErrors] = useState({})
+
+  const options = [
+    "At my location",
+    "At my University or College location",
+    "I'm location flexible (REMOTE)",
+  ]
+
+  useEffect(() => {
+    const allPreferences = [...preferences, ...(other ? [other] : [])]
+    onDataChange({ location, location_preferences: allPreferences })
+  }, [location, preferences, other])
+
+  const validate = () => {
+    const newErrors = {}
+    if (!location.trim()) newErrors.location = 'Location is required.'
+    if (preferences.length === 0 && !other.trim()) {
+      newErrors.preferences = 'Please select or enter at least one preference.'
+    }
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  useImperativeHandle(ref, () => ({ validate }))
+
+  const togglePreference = (value) => {
+    setPreferences((prev) =>
+      prev.includes(value)
+        ? prev.filter((p) => p !== value)
+        : [...prev, value]
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <label className="text-sm font-medium">
+          What's your location? <span className="text-red-500">*</span>
+        </label>
+        <input
+          className="mt-1 block w-full border px-3 py-2 rounded"
+          value={location}
+          onChange={(e) => setLocation(e.target.value)}
+          placeholder="Enter your location"
+        />
+        {errors.location && <p className="text-red-500 text-sm">{errors.location}</p>}
+      </div>
+
+      <div className="space-y-2">
+        <label className="text-sm font-medium">
+          Do you have a location preference for projects? <span className="text-red-500">*</span>
+        </label>
+
+        {options.map((option) => (
+          <div key={option} className="flex items-center space-x-2">
+            <Checkbox
+              id={option}
+              checked={preferences.includes(option)}
+              onCheckedChange={() => togglePreference(option)}
+            />
+            <label htmlFor={option} className="text-sm">{option}</label>
+          </div>
+        ))}
+
+        <div className="mt-4">
+          <label className="text-sm">Other</label>
+          <input
+            className="mt-1 block w-full border px-3 py-2 rounded"
+            value={other}
+            onChange={(e) => setOther(e.target.value)}
+            placeholder="Add custom preference"
+          />
+        </div>
+
+        {errors.preferences && <p className="text-red-500 text-sm">{errors.preferences}</p>}
+      </div>
+    </div>
+  )
+})
+
+export default Location
diff --git a/frontend/bitmatch/src/components/onboarding/Roles.jsx b/frontend/bitmatch/src/components/onboarding/Roles.jsx
new file mode 100644
index 0000000..2a88cd5
--- /dev/null
+++ b/frontend/bitmatch/src/components/onboarding/Roles.jsx
@@ -0,0 +1,88 @@
+'use client'
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  useImperativeHandle,
+} from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { X } from 'lucide-react'
+
+const Roles = forwardRef(({ onDataChange, formData }, ref) => {
+  const [roles, setRoles] = useState(formData?.roles || [])
+  const [newRole, setNewRole] = useState('')
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    onDataChange({ roles })
+  }, [roles])
+
+  const validate = () => {
+    if (roles.length === 0) {
+      setError('Please add at least one role.')
+      return false
+    }
+    setError('')
+    return true
+  }
+
+  useImperativeHandle(ref, () => ({ validate }))
+
+  const handleAdd = () => {
+    const trimmed = newRole.trim()
+    if (trimmed && !roles.includes(trimmed)) {
+      setRoles([...roles, trimmed].sort())
+      setNewRole('')
+      setError('')
+    }
+  }
+
+  const handleRemove = (role) => {
+    setRoles(roles.filter((r) => r !== role))
+  }
+
+  return (
+    <div className="space-y-4">
+      <label className="text-sm font-medium">
+        What positions are you most interested in? <span className="text-red-500">*</span>
+      </label>
+
+      <div className="flex space-x-2">
+        <Input
+          value={newRole}
+          onChange={(e) => setNewRole(e.target.value)}
+          placeholder="Type a position"
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              handleAdd()
+            }
+          }}
+        />
+        <Button onClick={handleAdd} className="bg-blue-600 hover:bg-blue-700">
+          Add
+        </Button>
+      </div>
+
+      {error && <p className="text-red-500 text-sm">{error}</p>}
+
+      <div className="space-y-2">
+        {roles.map((role) => (
+          <div
+            key={role}
+            className="flex justify-between items-center bg-blue-600 text-white px-4 py-2 rounded-md"
+          >
+            <span>{role}</span>
+            <button onClick={() => handleRemove(role)}>
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+})
+
+export default Roles
diff --git a/frontend/bitmatch/src/components/onboarding/Skills.jsx b/frontend/bitmatch/src/components/onboarding/Skills.jsx
new file mode 100644
index 0000000..cfce8cf
--- /dev/null
+++ b/frontend/bitmatch/src/components/onboarding/Skills.jsx
@@ -0,0 +1,88 @@
+'use client'
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  useImperativeHandle,
+} from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { X } from 'lucide-react'
+
+const Skills = forwardRef(({ onDataChange, formData }, ref) => {
+  const [skills, setSkills] = useState(formData?.skills || [])
+  const [newSkill, setNewSkill] = useState('')
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    onDataChange({ skills })
+  }, [skills])
+
+  const validate = () => {
+    if (skills.length === 0) {
+      setError('Please add at least one skill.')
+      return false
+    }
+    setError('')
+    return true
+  }
+
+  useImperativeHandle(ref, () => ({ validate }))
+
+  const handleAdd = () => {
+    const trimmed = newSkill.trim()
+    if (trimmed && !skills.includes(trimmed)) {
+      setSkills([...skills, trimmed].sort())
+      setNewSkill('')
+      setError('')
+    }
+  }
+
+  const handleRemove = (skill) => {
+    setSkills(skills.filter((s) => s !== skill))
+  }
+
+  return (
+    <div className="space-y-4">
+      <label className="text-sm font-medium">
+        What skill sets do you have? <span className="text-red-500">*</span>
+      </label>
+
+      <div className="flex space-x-2">
+        <Input
+          value={newSkill}
+          onChange={(e) => setNewSkill(e.target.value)}
+          placeholder="Type a skill"
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              handleAdd()
+            }
+          }}
+        />
+        <Button onClick={handleAdd} className="bg-blue-600 hover:bg-blue-700">
+          Add
+        </Button>
+      </div>
+
+      {error && <p className="text-red-500 text-sm">{error}</p>}
+
+      <div className="grid grid-cols-2 gap-2">
+        {skills.map((skill) => (
+          <div
+            key={skill}
+            className="flex justify-between items-center bg-blue-600 text-white px-3 py-2 rounded-md"
+          >
+            <span>{skill}</span>
+            <button onClick={() => handleRemove(skill)}>
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+})
+
+export default Skills
diff --git a/frontend/bitmatch/src/components/onboarding/StepIndicator.jsx b/frontend/bitmatch/src/components/onboarding/StepIndicator.jsx
new file mode 100644
index 0000000..2301757
--- /dev/null
+++ b/frontend/bitmatch/src/components/onboarding/StepIndicator.jsx
@@ -0,0 +1,20 @@
+export default function StepIndicator({ currentStep, totalSteps }) {
+  return (
+    <div className="flex items-center space-x-2 mt-6">
+      {Array.from({ length: totalSteps }).map((_, index) => {
+        const isActive = index + 1 === currentStep
+        return (
+          <div
+            key={index}
+            className={`rounded-full transition-all duration-300
+              ${isActive
+                ? "h-4 w-4 bg-black shadow-md"
+                : "h-2 w-2 bg-gray-300"
+              }
+            `}
+          />
+        )
+      })}
+    </div>
+  )
+}
diff --git a/frontend/bitmatch/src/components/ui/badge.jsx b/frontend/bitmatch/src/components/ui/badge.jsx
new file mode 100644
index 0000000..f7fe6f2
--- /dev/null
+++ b/frontend/bitmatch/src/components/ui/badge.jsx
@@ -0,0 +1,14 @@
+import React from "react"
+import { cn } from "@/lib/utils"
+
+export function Badge({ className, ...props }) {
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center rounded-full border border-transparent bg-blue-600 px-2.5 py-0.5 text-xs font-medium text-white",
+        className
+      )}
+      {...props}
+    />
+  )
+}
diff --git a/frontend/bitmatch/src/components/ui/checkbox.jsx b/frontend/bitmatch/src/components/ui/checkbox.jsx
new file mode 100644
index 0000000..b52b792
--- /dev/null
+++ b/frontend/bitmatch/src/components/ui/checkbox.jsx
@@ -0,0 +1,29 @@
+'use client'
+
+import React, { forwardRef } from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Checkbox = forwardRef((props, ref) => {
+  const { className, ...rest } = props
+
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={cn(
+        "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        className
+      )}
+      {...rest}
+    >
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+        <Check className="h-4 w-4" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+})
+
+Checkbox.displayName = "Checkbox"
+
+export { Checkbox }
diff --git a/frontend/bitmatch/src/components/ui/toast.jsx b/frontend/bitmatch/src/components/ui/toast.jsx
new file mode 100644
index 0000000..f8936f1
--- /dev/null
+++ b/frontend/bitmatch/src/components/ui/toast.jsx
@@ -0,0 +1,85 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props} />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props} />
+  );
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props} />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}>
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+    {...props} />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction };
diff --git a/frontend/bitmatch/src/components/ui/toaster.jsx b/frontend/bitmatch/src/components/ui/toaster.jsx
new file mode 100644
index 0000000..892a53d
--- /dev/null
+++ b/frontend/bitmatch/src/components/ui/toaster.jsx
@@ -0,0 +1,33 @@
+import { useToast } from "@/hooks/use-toast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
diff --git a/frontend/bitmatch/src/hooks/use-toast.js b/frontend/bitmatch/src/hooks/use-toast.js
new file mode 100644
index 0000000..03accc0
--- /dev/null
+++ b/frontend/bitmatch/src/hooks/use-toast.js
@@ -0,0 +1,155 @@
+"use client";
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST"
+}
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString();
+}
+
+const toastTimeouts = new Map()
+
+const addToRemoveQueue = (toastId) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+}
+
+const listeners = []
+
+let memoryState = { toasts: [] }
+
+function dispatch(action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+function toast({
+  ...props
+}) {
+  const id = genId()
+
+  const update = (props) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    };
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast }

From f71bf61ee29a44a27d68a74c47399fb42f0c8bda Mon Sep 17 00:00:00 2001
From: Rebecca Smith <2145912+Rebeccals@users.noreply.github.com>
Date: Thu, 10 Apr 2025 14:46:13 -0700
Subject: [PATCH 3/6] Fixed onboard container being too small. Added link to
 home slideshow.

---
 frontend/bitmatch/src/App.jsx                 | 128 ++++++++--------
 .../components/onboarding/CreateProfile.jsx   |   6 +-
 .../src/components/onboarding/Location.jsx    |   8 +-
 .../src/components/ui/ImageSlideshow.jsx      |  35 +++--
 frontend/bitmatch/src/views/HomePage.jsx      |   2 +-
 frontend/bitmatch/src/views/OnboardPage.jsx   | 141 +++++++++---------
 6 files changed, 153 insertions(+), 167 deletions(-)

diff --git a/frontend/bitmatch/src/App.jsx b/frontend/bitmatch/src/App.jsx
index 1ed5e5c..0a9947c 100644
--- a/frontend/bitmatch/src/App.jsx
+++ b/frontend/bitmatch/src/App.jsx
@@ -24,93 +24,83 @@ import PositionPage from './components/onboarding/Roles';
 import SkillsPage from './components/onboarding/Skills';
 import UserPage from './components/onboarding/CreateProfile';
 
-// Uncomment when ready
-// import BrowsePage from "./views/BrowsePage";
-// import AboutPage from "./views/AboutPage";
-
 import "./styles/global.css";
 
+// AppRoutes is separated for access to hooks
 function AppRoutes() {
   const location = useLocation();
   const { isSignedIn } = useUser();
-  const isLanding = location.pathname === "/";
-  const layoutClass = !isSignedIn
-    ? "py-8"
-    : "container mx-auto px-4 py-16 flex pb-6 flex-col items-center justify-center min-h-screen";
+
+  const pathname = location.pathname;
+  const isLanding = pathname === "/" && !isSignedIn;
+  const isOnboard = pathname.startsWith("/onboard");
+
+  const shouldUseContainer = !isLanding && !isOnboard;
+
+  const layoutClass = shouldUseContainer
+    ? "container mx-auto px-4 py-16 pb-6 min-h-screen"
+    : "";
 
   return (
-    <div className={layoutClass}>
-      <Routes>
-        {/* Landing or Home */}
-        <Route
-          path="/"
-          element={
-            <>
-              <SignedOut>
-                <LandingPage />
-              </SignedOut>
-              <SignedIn>
-                <HomePage />
-              </SignedIn>
-            </>
-          }
-        />
+    <>
+      <MainNavbar />
 
-        {/* Signed-in only routes */}
-        <Route
-          path="/project-list"
-          element={
-            <SignedIn>
-              <ProjectListPage />
-            </SignedIn>
-          }
-        />
-        <Route
-          path="/projects/:id"
-          element={
-            <SignedIn>
-              <ProjectDetailPage />
-            </SignedIn>
-          }
-        />
-        <Route
-          path="/create-project"
-          element={
-            <SignedIn>
-              <AddProjectPage />
-            </SignedIn>
-          }
-        />
+      <main className={layoutClass}>
+        <Routes>
+          {/* Landing or Home */}
+          <Route
+            path="/"
+            element={
+              <>
+                <SignedOut>
+                  <LandingPage />
+                </SignedOut>
+                <SignedIn>
+                  <HomePage />
+                </SignedIn>
+              </>
+            }
+          />
 
-        {/* Public pages */}
-        <Route path="/sign-up" element={<SignUpPage />} />
-        <Route path="/sign-in" element={<SignInPage />} />
+          {/* Signed-in only routes */}
+          <Route
+            path="/project-list"
+            element={<SignedIn><ProjectListPage /></SignedIn>}
+          />
+          <Route
+            path="/projects/:id"
+            element={<SignedIn><ProjectDetailPage /></SignedIn>}
+          />
+          <Route
+            path="/create-project"
+            element={<SignedIn><AddProjectPage /></SignedIn>}
+          />
 
-        {/* Onboarding with redirect and nested routes */}
-        <Route path="/onboard" element={<OnboardPage />}>
-          <Route path="interests" element={<InterestPage />} />
-          <Route path="location" element={<LocationPage />} />
-          <Route path="positions" element={<PositionPage />} />
-          <Route path="skills" element={<SkillsPage />} />
-          <Route path="user" element={<UserPage />} />
-        </Route>
+          {/* Public pages */}
+          <Route path="/sign-up" element={<SignUpPage />} />
+          <Route path="/sign-in" element={<SignInPage />} />
 
-        {/* Uncomment when ready */}
-        {/* 
-        <Route path="/browse" element={<BrowsePage />} />
-        <Route path="/about" element={<AboutPage />} />
-        */}
-      </Routes>
-    </div>
+          {/* Onboarding */}
+          <Route path="/onboard" element={<SignedIn><OnboardPage /></SignedIn>}>
+            <Route path="interests" element={<InterestPage />} />
+            <Route path="location" element={<LocationPage />} />
+            <Route path="positions" element={<PositionPage />} />
+            <Route path="skills" element={<SkillsPage />} />
+            <Route path="user" element={<UserPage />} />
+          </Route>
+        </Routes>
+      </main>
+
+      <MainFooter />
+    </>
   );
 }
 
+// Default export so main.jsx works
 export default function App() {
   return (
     <Router>
-      <MainNavbar />
       <AppRoutes />
-      <MainFooter />
     </Router>
   );
 }
diff --git a/frontend/bitmatch/src/components/onboarding/CreateProfile.jsx b/frontend/bitmatch/src/components/onboarding/CreateProfile.jsx
index 19c6ef8..1e059f1 100644
--- a/frontend/bitmatch/src/components/onboarding/CreateProfile.jsx
+++ b/frontend/bitmatch/src/components/onboarding/CreateProfile.jsx
@@ -102,15 +102,15 @@ const CreateProfile = forwardRef(({ onDataChange, formData }, ref) => {
           </Button>
         </div>
 
-        <div className="flex flex-wrap gap-2 mt-2">
+        <div className="flex flex-wrap gap-2 py-2">
           {colleges.map((college) => (
-            <Badge key={college} className="bg-blue-600 text-white">
+            <Badge key={college} className="px-4 py-2 bg-blue-600 text-white">
               {college}
               <button
                 onClick={() => handleRemoveCollege(college)}
                 className="ml-1 hover:text-gray-200"
               >
-                <X className="h-3 w-3" />
+                <X className="h-4 w-4" />
               </button>
             </Badge>
           ))}
diff --git a/frontend/bitmatch/src/components/onboarding/Location.jsx b/frontend/bitmatch/src/components/onboarding/Location.jsx
index 3c169a4..d99c234 100644
--- a/frontend/bitmatch/src/components/onboarding/Location.jsx
+++ b/frontend/bitmatch/src/components/onboarding/Location.jsx
@@ -11,15 +11,15 @@ import { Checkbox } from '@/components/ui/checkbox'
 const Location = forwardRef(({ onDataChange, formData }, ref) => {
   const [location, setLocation] = useState(formData?.location || '')
   const [preferences, setPreferences] = useState(
-    formData?.location_preferences?.filter(p => p !== '') || ["I'm location flexible (REMOTE)"]
+    formData?.location_preferences?.filter(p => p !== '') || ["Remote friendly projects"]
   )
   const [other, setOther] = useState('')
   const [errors, setErrors] = useState({})
 
   const options = [
-    "At my location",
-    "At my University or College location",
-    "I'm location flexible (REMOTE)",
+    "Near my location",
+    "Near my University or College location",
+    "Remote friendly projects",
   ]
 
   useEffect(() => {
diff --git a/frontend/bitmatch/src/components/ui/ImageSlideshow.jsx b/frontend/bitmatch/src/components/ui/ImageSlideshow.jsx
index 4b972b5..e747b76 100644
--- a/frontend/bitmatch/src/components/ui/ImageSlideshow.jsx
+++ b/frontend/bitmatch/src/components/ui/ImageSlideshow.jsx
@@ -67,26 +67,25 @@ export default function ImageSlideshow({ items }) {
               }}
             >
               {/* Darker Overlay */}
-              <div className="absolute inset-0 bg-black bg-opacity-50">
-                <div
-                  className={`${slideContentClasses} ${
-                    index === currentIndex
-                      ? "translate-y-0 opacity-100 max-w-xl"
-                      : "translate-y-8 opacity-0"
-                  }`}
-                >
-                  <h2 className="text-3xl font-bold text-white mb-3">
-                    {slide.title}
-                  </h2>
-                  <p className="mb-4 text-white">{slide.description}</p>
-                  <Button
-                    variant="outline"
-                    className="bg-white hover:bg-gray-100"
+              <Link to={`/projects/${slide.id}`}>
+                <div className="absolute inset-0 bg-black bg-opacity-50">
+                  <div
+                    className={`${slideContentClasses} ${
+                      index === currentIndex
+                        ? "translate-y-0 opacity-100 max-w-xl"
+                        : "translate-y-8 opacity-0"
+                    }`}
                   >
-                    <Link to={`/projects/${slide.id}`}>View Project</Link>
-                  </Button>
+                    <h2 className="text-3xl font-bold text-white mb-3">
+                      {slide.title}
+                    </h2>
+                    <p className="mb-4 text-white">{slide.description}</p>
+                    <Button variant="outline" className="bg-white hover:bg-gray-100">
+                      View Project
+                    </Button>
+                  </div>
                 </div>
-              </div>
+              </Link>
             </div>
           ))}
         </div>
diff --git a/frontend/bitmatch/src/views/HomePage.jsx b/frontend/bitmatch/src/views/HomePage.jsx
index eb694c4..efb0bc0 100644
--- a/frontend/bitmatch/src/views/HomePage.jsx
+++ b/frontend/bitmatch/src/views/HomePage.jsx
@@ -56,7 +56,7 @@ export default function Home() {
   }
 
   return (
-    <main className="min-h-screen bg-white">
+    <main className="home-container">
       <ImageSlideshow items={slideshowItems} />
 
       <div className="mt-12 mb-8">
diff --git a/frontend/bitmatch/src/views/OnboardPage.jsx b/frontend/bitmatch/src/views/OnboardPage.jsx
index c611954..e0c71f3 100644
--- a/frontend/bitmatch/src/views/OnboardPage.jsx
+++ b/frontend/bitmatch/src/views/OnboardPage.jsx
@@ -108,78 +108,75 @@ export default function OnboardPage() {
   }
 
   return (
-    <>
-      <Toaster /> {/* ✅ Required for showing toasts */}
-
-      <div className="pt-8 min-h-screen flex flex-col items-center">
-        {/* Header */}
-        <div className="py-16 w-full bg-black text-white text-center">
-          <h1>{stepTitles[currentStep - 1]}</h1>
-        </div>
-
-        {/* Progress Bar */}
-        <div className="w-full h-2 bg-gray-200">
-          <div
-            className="h-2 bg-blue-600 transition-all duration-500 ease-in-out"
-            style={{ width: `${(currentStep / totalSteps) * 100}%` }}
-          />
-        </div>
-
-        {/* Step Indicator */}
-        <StepIndicator currentStep={currentStep} totalSteps={totalSteps} titles={stepTitles} />
-
-        {/* Main Content */}
-        <div className="w-full max-w-3xl px-6 py-10 flex-1">
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={currentStep}
-              initial={{ opacity: 0, x: 50 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -50 }}
-              transition={{ duration: 0.3 }}
-            >
-              {renderStep()}
-            </motion.div>
-          </AnimatePresence>
-
-          {/* Optional JSON debug preview */}
-          {/* <pre className="text-xs mt-6 bg-gray-100 p-4 rounded w-full overflow-auto">
-            {JSON.stringify(formData, null, 2)}
-          </pre> */}
-        </div>
-
-        {/* Navigation */}
-        <div className="w-full max-w-3xl px-6 mt-8 mb-12 flex justify-between items-center">
-          {currentStep > 1 ? (
-            <Button
-              onClick={handlePrevious}
-              variant="outline"
-              size="sm"
-              className="w-28 text-white bg-black hover:bg-blue-700 hover:text-white"
-            >
-              <ChevronLeft className="mr-1 h-4 w-4" />
-              Previous
-            </Button>
-          ) : (
-            <div className="w-28" />
-          )}
-
-          {currentStep < totalSteps ? (
-            <Button onClick={handleNext} size="sm" className="w-28 hover:bg-blue-700">
-              Next
-              <ChevronRight className="ml-1 h-4 w-4" />
-            </Button>
-          ) : (
-            <Button
-              onClick={handleSubmit}
-              className="w-28 bg-green-600 hover:bg-green-700"
-              size="sm"
-            >
-              Submit
-            </Button>
-          )}
-        </div>
+    <main className="my-16 flex flex-col items-center justify-center min-h-screen">
+      <Toaster /> {/* Required for showing toasts */}
+      {/* Header */}
+      <div className="py-16 w-full bg-black text-white text-center">
+        <h1>{stepTitles[currentStep - 1]}</h1>
       </div>
-    </>
+
+      {/* Progress Bar */}
+      <div className="w-full h-2 bg-gray-200">
+        <div
+          className="h-2 bg-blue-600 transition-all duration-500 ease-in-out"
+          style={{ width: `${(currentStep / totalSteps) * 100}%` }}
+        />
+      </div>
+
+      {/* Step Indicator */}
+      <StepIndicator currentStep={currentStep} totalSteps={totalSteps} titles={stepTitles} />
+
+      {/* Main Content */}
+      <div className="w-full max-w-3xl px-6 py-10 flex-1">
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={currentStep}
+            initial={{ opacity: 0, x: 50 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -50 }}
+            transition={{ duration: 0.3 }}
+          >
+            {renderStep()}
+          </motion.div>
+        </AnimatePresence>
+
+        {/* Optional JSON debug preview */}
+        {/* <pre className="text-xs mt-6 bg-gray-100 p-4 rounded w-full overflow-auto">
+          {JSON.stringify(formData, null, 2)}
+        </pre> */}
+      </div>
+
+      {/* Navigation */}
+      <div className="w-full max-w-3xl px-6 mt-8 mb-12 flex justify-between items-center">
+        {currentStep > 1 ? (
+          <Button
+            onClick={handlePrevious}
+            variant="outline"
+            size="sm"
+            className="w-28 text-white bg-black hover:bg-blue-700 hover:text-white"
+          >
+            <ChevronLeft className="mr-1 h-4 w-4" />
+            Previous
+          </Button>
+        ) : (
+          <div className="w-28" />
+        )}
+
+        {currentStep < totalSteps ? (
+          <Button onClick={handleNext} size="sm" className="w-28 hover:bg-blue-700">
+            Next
+            <ChevronRight className="ml-1 h-4 w-4" />
+          </Button>
+        ) : (
+          <Button
+            onClick={handleSubmit}
+            className="w-28 bg-green-600 hover:bg-green-700"
+            size="sm"
+          >
+            Submit
+          </Button>
+        )}
+      </div>
+    </main>
   )
 }

From 92b6202773f0d758feb1e7898776245d6d85c6bc Mon Sep 17 00:00:00 2001
From: Rebecca Smith <2145912+Rebeccals@users.noreply.github.com>
Date: Thu, 10 Apr 2025 14:49:40 -0700
Subject: [PATCH 4/6] changed onboard so its public

---
 frontend/bitmatch/src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/bitmatch/src/App.jsx b/frontend/bitmatch/src/App.jsx
index 0a9947c..4431275 100644
--- a/frontend/bitmatch/src/App.jsx
+++ b/frontend/bitmatch/src/App.jsx
@@ -81,7 +81,7 @@ function AppRoutes() {
           <Route path="/sign-in" element={<SignInPage />} />
 
           {/* Onboarding */}
-          <Route path="/onboard" element={<SignedIn><OnboardPage /></SignedIn>}>
+          <Route path="/onboard" element={<OnboardPage />}>
             <Route path="interests" element={<InterestPage />} />
             <Route path="location" element={<LocationPage />} />
             <Route path="positions" element={<PositionPage />} />

From ee303c58a17dfecbf33676246e695f7ca55d322c Mon Sep 17 00:00:00 2001
From: Larry La <larryquocla@gmail.com>
Date: Sat, 12 Apr 2025 10:16:49 -0700
Subject: [PATCH 5/6] chore: workflow double run fix

---
 .github/workflows/deployment.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml
index b587b23..742c666 100644
--- a/.github/workflows/deployment.yml
+++ b/.github/workflows/deployment.yml
@@ -6,7 +6,7 @@ on:
       - "*"
   pull_request:
     branches:
-      - "*"
+      - main
 
 jobs:
   terraform:

From fd00786e0c583183a06bbc19906a3f863503338c Mon Sep 17 00:00:00 2001
From: Larry La <larryquocla@gmail.com>
Date: Sat, 12 Apr 2025 10:17:28 -0700
Subject: [PATCH 6/6] chore: double unit test run fix

---
 .github/workflows/django-tests.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/django-tests.yml b/.github/workflows/django-tests.yml
index 0eebed1..43c15a9 100644
--- a/.github/workflows/django-tests.yml
+++ b/.github/workflows/django-tests.yml
@@ -6,7 +6,7 @@ on:
       - "*"
   pull_request:
     branches:
-      - "*"
+      - main
   workflow_dispatch:
 
 jobs: