diff --git a/src/App.css b/src/App.css
index 33331d4..c829a2b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,3 +11,10 @@ button:not(.toggle-btn):active {
   background-color: var(--color-persianblue);
   color: white;
 }
+button.active {
+  background-color: var(--color-persianblue);
+  color: white;
+}
+button.active:hover {
+  background-color: var(--color-persianblue);
+}
\ No newline at end of file
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 756e7a3..1c0af15 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -1,8 +1,9 @@
+import { useNavigate } from 'react-router-dom';
 import { tv } from 'tailwind-variants/lite';
 
 const buttonVariants = tv({
     // base styles for all buttons
-    base: 'flex items-center justify-center drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]',
+    base: 'font-poppins flex items-center justify-center drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]',
     // all button variants
     variants: {
         size: {
@@ -24,7 +25,7 @@ const buttonVariants = tv({
     },
     // conditional style cases for specific prop combinations
     compoundVariants: [
-        // remove drop shadow and lower font weight for onboarding quiz button
+        // remove drop shadow and lower font weight for user selection button
         {
             color: 'secondary',
             size: 'md',
@@ -33,8 +34,18 @@ const buttonVariants = tv({
     ]
 });
 
-export default function Button({ size, color, label }) {
+export default function Button({ size, color, label, onClick, isActive, to }) {
+    let navigate = useNavigate();
+
+    function handleClick(){
+        if (to){
+            navigate(to);
+        } else {
+            onClick();
+        }
+    }
+
     return (
-        <button className={buttonVariants({ size, color })}>{label}</button>
-    )
+        <button onClick={handleClick} className={isActive ? `${buttonVariants({ size, color })} active` : buttonVariants({ size, color })}>{label}</button>
+    );
 }
\ No newline at end of file