diff --git a/src/components/PremiumOnboarding/CareerOnboarding.js b/src/components/PremiumOnboarding/CareerOnboarding.js
index c21f639..29f6b65 100644
--- a/src/components/PremiumOnboarding/CareerOnboarding.js
+++ b/src/components/PremiumOnboarding/CareerOnboarding.js
@@ -1,4 +1,4 @@
-// CareerOnboarding.js (inline implementation of career search)
+// CareerOnboarding.js
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { Input } from '../ui/input.js'; // Ensure path matches your structure
@@ -25,24 +25,23 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
     }
   }, []);
 
-  // Fetch careers exactly once on mount
   useEffect(() => {
     const fetchCareerTitles = async () => {
       try {
         const response = await fetch('/career_clusters.json');
         const data = await response.json();
-  
+
         const careerTitlesSet = new Set();
-  
+
         const clusters = Object.keys(data);
         for (let i = 0; i < clusters.length; i++) {
           const cluster = clusters[i];
           const subdivisions = Object.keys(data[cluster]);
-  
+
           for (let j = 0; j < subdivisions.length; j++) {
             const subdivision = subdivisions[j];
             const careersArray = data[cluster][subdivision];
-  
+
             for (let k = 0; k < careersArray.length; k++) {
               const careerObj = careersArray[k];
               if (careerObj.title) {
@@ -51,18 +50,17 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
             }
           }
         }
-  
+
         setCareers([...careerTitlesSet]);
-  
+
       } catch (error) {
         console.error("Error fetching or processing career_clusters.json:", error);
       }
     };
-  
+
     fetchCareerTitles();
   }, []);
-  
-  // Update career selection automatically whenever the searchInput matches a valid career explicitly
+
   useEffect(() => {
     if (careers.includes(searchInput)) {
       setSelectedCareer(searchInput);
@@ -77,14 +75,13 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
   const handleCareerInputChange = (e) => {
     const inputValue = e.target.value;
     setSearchInput(inputValue);
-  
-    // only set explicitly when an exact match occurs
+
     if (careers.includes(inputValue)) {
       setSelectedCareer(inputValue);
       setData(prev => ({ ...prev, career_name: inputValue }));
     }
   };
-  
+
   const handleSubmit = () => {
     if (!selectedCareer || !currentlyWorking || !collegeEnrollmentStatus) {
       alert("Please complete all required fields before continuing.");
@@ -110,31 +107,33 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
     nextStep();
   };
 
-
   return (
-    <div>
-      <h2>Career Details</h2>
+    <div className="max-w-md mx-auto p-6 space-y-4">
+      <h2 className="text-2xl font-semibold">Career Details</h2>
 
-      <label className="block font-medium">
-        Are you currently working or earning any income (even part-time)?
-      </label>
-      <select 
-        value={currentlyWorking} 
-        onChange={(e) => setCurrentlyWorking(e.target.value)}
-        className="w-full border rounded p-2"
-      >
-        <option value="">Select one</option>
-        <option value="yes">Yes</option>
-        <option value="no">No</option>
-      </select>
+      <div className="space-y-2">
+        <label className="block font-medium">
+          Are you currently working or earning any income (even part-time)?
+        </label>
+        <select
+          value={currentlyWorking}
+          onChange={(e) => setCurrentlyWorking(e.target.value)}
+          className="w-full border rounded p-2"
+        >
+          <option value="">Select one</option>
+          <option value="yes">Yes</option>
+          <option value="no">No</option>
+        </select>
+      </div>
 
-      <div>
-        <h3>Search for Career</h3>
+      <div className="space-y-2">
+        <h3 className="font-medium">Search for Career</h3>
         <input
           value={searchInput}
           onChange={handleCareerInputChange}
           placeholder="Start typing a career..."
           list="career-titles"
+          className="w-full border rounded p-2"
         />
         <datalist id="career-titles">
           {careers.map((career, index) => (
@@ -143,38 +142,79 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
         </datalist>
       </div>
 
-      {selectedCareer && <p>Selected Career: <strong>{selectedCareer}</strong></p>}
+      {selectedCareer && (
+        <p className="text-gray-700">
+          Selected Career: <strong>{selectedCareer}</strong>
+        </p>
+      )}
 
-      <label>Status:</label>
-      <select name="status" onChange={handleChange} value={data.status || ''}>
-        <option value="">Select Status</option>
-        <option value="Planned">Planned</option>
-        <option value="Current">Current</option>
-        <option value="Exploring">Exploring</option>
-      </select>
+      <div className="space-y-2">
+        <label className="block font-medium">Status:</label>
+        <select
+          name="status"
+          onChange={handleChange}
+          value={data.status || ''}
+          className="w-full border rounded p-2"
+        >
+          <option value="">Select Status</option>
+          <option value="Planned">Planned</option>
+          <option value="Current">Current</option>
+          <option value="Exploring">Exploring</option>
+        </select>
+      </div>
 
-      <label>Career Start Date:</label>
-      <input name="start_date" type="date" onChange={handleChange} value={data.start_date || ''} />
+      <div className="space-y-2">
+        <label className="block font-medium">Career Start Date:</label>
+        <input
+          name="start_date"
+          type="date"
+          onChange={handleChange}
+          value={data.start_date || ''}
+          className="w-full border rounded p-2"
+        />
+      </div>
 
-      <label>Projected End Date (optional):</label>
-      <input name="projected_end_date" type="date" onChange={handleChange} value={data.projected_end_date || ''} />
+      <div className="space-y-2">
+        <label className="block font-medium">Projected End Date (optional):</label>
+        <input
+          name="projected_end_date"
+          type="date"
+          onChange={handleChange}
+          value={data.projected_end_date || ''}
+          className="w-full border rounded p-2"
+        />
+      </div>
 
-      <label className="block font-medium">
-        Are you currently enrolled in college or planning to enroll?
-      </label>
-      <select 
-        value={collegeEnrollmentStatus} 
-        onChange={(e) => setCollegeEnrollmentStatus(e.target.value)}
-        className="w-full border rounded p-2"
-      >
-        <option value="">Select one</option>
-        <option value="not_enrolled">Not Enrolled / Not Planning</option>
-        <option value="currently_enrolled">Currently Enrolled</option>
-        <option value="prospective_student">Planning to Enroll (Prospective Student)</option>
-      </select>
+      <div className="space-y-2">
+        <label className="block font-medium">
+          Are you currently enrolled in college or planning to enroll?
+        </label>
+        <select
+          value={collegeEnrollmentStatus}
+          onChange={(e) => setCollegeEnrollmentStatus(e.target.value)}
+          className="w-full border rounded p-2"
+        >
+          <option value="">Select one</option>
+          <option value="not_enrolled">Not Enrolled / Not Planning</option>
+          <option value="currently_enrolled">Currently Enrolled</option>
+          <option value="prospective_student">Planning to Enroll (Prospective Student)</option>
+        </select>
+      </div>
 
-      <button onClick={prevStep}>Back</button>
-      <button onClick={handleSubmit}>Financial →</button>
+      <div className="flex justify-between pt-4">
+        <button
+          onClick={prevStep}
+          className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded"
+        >
+          Back
+        </button>
+        <button
+          onClick={handleSubmit}
+          className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded"
+        >
+          Financial →
+        </button>
+      </div>
     </div>
   );
 };
diff --git a/src/components/PremiumOnboarding/CollegeOnboarding.js b/src/components/PremiumOnboarding/CollegeOnboarding.js
index c1a015a..9575068 100644
--- a/src/components/PremiumOnboarding/CollegeOnboarding.js
+++ b/src/components/PremiumOnboarding/CollegeOnboarding.js
@@ -1,7 +1,7 @@
+// CollegeOnboarding.js
 import React, { useState, useEffect } from 'react';
 import authFetch from '../../utils/authFetch.js';
 
-
 function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId }) {
   // CIP / iPEDS local states (purely for CIP data and suggestions)
   const [schoolData, setSchoolData] = useState([]);
@@ -11,8 +11,6 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
   const [availableProgramTypes, setAvailableProgramTypes] = useState([]);
 
   // ---- DESCTRUCTURE PARENT DATA FOR ALL FIELDS EXCEPT TUITION/PROGRAM_LENGTH ----
-  // We'll store user "typed" values for tuition/program_length in local states,
-  // but everything else comes directly from `data`.
   const {
     college_enrollment_status = '',
     selected_school = '',
@@ -34,59 +32,42 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
     hours_completed = '',
     credit_hours_required = '',
     tuition_paid = '',
-    // We do NOT consume data.tuition or data.program_length directly here
-    // because we store them in local states (manualTuition, manualProgramLength).
   } = data;
 
   // ---- 1. LOCAL STATES for auto/manual logic on TWO fields ----
-  // manualTuition: user typed override
-  // autoTuition: iPEDS calculation
-  const [manualTuition, setManualTuition] = useState(''); // '' means no manual override
+  const [manualTuition, setManualTuition] = useState('');
   const [autoTuition, setAutoTuition] = useState(0);
 
-  // same approach for program_length
   const [manualProgramLength, setManualProgramLength] = useState('');
   const [autoProgramLength, setAutoProgramLength] = useState('0.00');
 
-  // ------------------------------------------
-  //  Universal handleChange for all parent fields
-  // ------------------------------------------
+  // -- universal handleChange for all parent fields except tuition/program_length
   const handleParentFieldChange = (e) => {
     const { name, value, type, checked } = e.target;
     let val = value;
     if (type === 'checkbox') {
       val = checked;
     }
-    // parse numeric fields that are NOT tuition or program_length
     if (['interest_rate','loan_term','extra_payment','expected_salary'].includes(name)) {
       val = parseFloat(val) || 0;
     } else if (
       ['annual_financial_aid','existing_college_debt','credit_hours_per_year',
-       'hours_completed','credit_hours_required','tuition_paid']
-      .includes(name)
+       'hours_completed','credit_hours_required','tuition_paid'].includes(name)
     ) {
       val = val === '' ? '' : parseFloat(val);
     }
-
     setData(prev => ({ ...prev, [name]: val }));
   };
 
-  // ------------------------------------------
-  //  handleManualTuition, handleManualProgramLength
-  //  for local fields
-  // ------------------------------------------
   const handleManualTuitionChange = (e) => {
-    // user typed something => override
-    setManualTuition(e.target.value); // store as string for partial typing
+    setManualTuition(e.target.value);
   };
 
   const handleManualProgramLengthChange = (e) => {
     setManualProgramLength(e.target.value);
   };
 
-  // ------------------------------------------
-  // CIP Data fetch once
-  // ------------------------------------------
+  // CIP fetch
   useEffect(() => {
     async function fetchCipData() {
       try {
@@ -104,9 +85,7 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
     fetchCipData();
   }, []);
 
-  // ------------------------------------------
-  // iPEDS Data fetch once
-  // ------------------------------------------
+  // iPEDS fetch
   useEffect(() => {
     async function fetchIpedsData() {
       try {
@@ -125,9 +104,7 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
     fetchIpedsData();
   }, []);
 
-  // ------------------------------------------
-  //  handleSchoolChange, handleProgramChange, etc. => update parent fields
-  // ------------------------------------------
+  // handleSchoolChange
   const handleSchoolChange = (e) => {
     const value = e.target.value;
     setData(prev => ({
@@ -137,7 +114,6 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
       program_type: '',
       credit_hours_required: '',
     }));
-    // CIP suggestions
     const filtered = schoolData.filter(s =>
       s.INSTNM.toLowerCase().includes(value.toLowerCase())
     );
@@ -163,7 +139,6 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
   const handleProgramChange = (e) => {
     const value = e.target.value;
     setData(prev => ({ ...prev, selected_program: value }));
-
     if (!value) {
       setProgramSuggestions([]);
       return;
@@ -188,11 +163,11 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
       program_type: val,
       credit_hours_required: '',
     }));
-    setManualProgramLength(''); // reset manual override
+    setManualProgramLength('');
     setAutoProgramLength('0.00');
   };
 
-  // Once we have school+program, load possible program types
+  // once we have school+program, load possible program types
   useEffect(() => {
     if (!selected_program || !selected_school || !schoolData.length) return;
     const possibleTypes = schoolData
@@ -204,15 +179,11 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
     setAvailableProgramTypes([...new Set(possibleTypes)]);
   }, [selected_program, selected_school, schoolData]);
 
-  // ------------------------------------------
-  //  Auto-calc Tuition => store in local autoTuition
-  // ------------------------------------------
+  // auto-calc tuition
   useEffect(() => {
-    // do we have enough to calc?
     if (!icTuitionData.length) return;
     if (!selected_school || !program_type || !credit_hours_per_year) return;
 
-    // find row
     const found = schoolData.find(s => s.INSTNM.toLowerCase() === selected_school.toLowerCase());
     if (!found) return;
     const unitId = found.UNITID;
@@ -221,7 +192,6 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
     const match = icTuitionData.find(row => row.UNITID === unitId);
     if (!match) return;
 
-    // grad or undergrad
     const isGradOrProf = [
       "Master's Degree",
       "Doctoral Degree",
@@ -258,7 +228,6 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
 
     const chpy = parseFloat(credit_hours_per_year) || 0;
     let estimate = 0;
-    // threshold
     if (chpy < 24 && partTimeRate) {
       estimate = partTimeRate * chpy;
     } else {
@@ -266,15 +235,12 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
     }
 
     setAutoTuition(Math.round(estimate));
-    
   }, [
     icTuitionData, selected_school, program_type,
     credit_hours_per_year, is_in_state, is_in_district, schoolData
   ]);
 
-  // ------------------------------------------
-  //  Auto-calc Program Length => store in local autoProgramLength
-  // ------------------------------------------
+  // auto-calc program length
   useEffect(() => {
     if (!program_type) return;
     if (!hours_completed || !credit_hours_per_year) return;
@@ -299,264 +265,315 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
     setAutoProgramLength(calcLength);
   }, [program_type, hours_completed, credit_hours_per_year, credit_hours_required]);
 
-  // ------------------------------------------
-  //  handleSubmit => merges final chosen values
-  // ------------------------------------------
+  // final handleSubmit
   const handleSubmit = () => {
-    const chosenTuition = manualTuition.trim() === '' 
-      ? autoTuition 
+    const chosenTuition = manualTuition.trim() === ''
+      ? autoTuition
       : parseFloat(manualTuition);
     const chosenProgramLength = manualProgramLength.trim() === ''
       ? autoProgramLength
       : manualProgramLength;
 
-    // Update parent’s data (collegeData)
     setData(prev => ({
       ...prev,
-      tuition: chosenTuition,   // match name used by parent or server
-      program_length: chosenProgramLength // match name used by parent
+      tuition: chosenTuition,
+      program_length: chosenProgramLength
     }));
 
-    // Then go to the next step in the parent’s wizard
     nextStep();
   };
 
-  // The displayed tuition => (manualTuition !== '' ? manualTuition : autoTuition)
   const displayedTuition = (manualTuition.trim() === '' ? autoTuition : manualTuition);
-
-  // The displayed program length => (manualProgramLength !== '' ? manualProgramLength : autoProgramLength)
   const displayedProgramLength = (manualProgramLength.trim() === '' ? autoProgramLength : manualProgramLength);
 
-  
   return (
-    <div>
-      <h2>College Details</h2>
+    <div className="max-w-md mx-auto p-6 space-y-4">
+      <h2 className="text-2xl font-semibold">College Details</h2>
 
       {(college_enrollment_status === 'currently_enrolled' ||
         college_enrollment_status === 'prospective_student') ? (
-        <>
-        <label>
+        <div className="space-y-4">
+          <div className="flex items-center space-x-2">
             <input
               type="checkbox"
               name="is_in_district"
               checked={is_in_district}
               onChange={handleParentFieldChange}
+              className="h-4 w-4"
             />
-            In District?
-          </label>
+            <label className="font-medium">In District?</label>
+          </div>
 
-          <label>
+          <div className="flex items-center space-x-2">
             <input
               type="checkbox"
               name="is_in_state"
               checked={is_in_state}
               onChange={handleParentFieldChange}
+              className="h-4 w-4"
             />
-            In State Tuition?
-          </label>
+            <label className="font-medium">In State Tuition?</label>
+          </div>
 
-          <label>
+          <div className="flex items-center space-x-2">
             <input
               type="checkbox"
               name="is_online"
               checked={is_online}
               onChange={handleParentFieldChange}
+              className="h-4 w-4"
             />
-            Program is Fully Online
-          </label>
+            <label className="font-medium">Program is Fully Online</label>
+          </div>
 
-          <label>
+          <div className="flex items-center space-x-2">
             <input
               type="checkbox"
               name="loan_deferral_until_graduation"
               checked={loan_deferral_until_graduation}
               onChange={handleParentFieldChange}
+              className="h-4 w-4"
             />
-            Defer Loan Payments until Graduation?
-          </label>
-          
-          <label>School Name*</label>
-          <input
-            name="selected_school"
-            value={selected_school}
-            onChange={handleSchoolChange}
-            list="school-suggestions"
-            placeholder="Enter school name..."
-          />
-          <datalist id="school-suggestions">
-            {schoolSuggestions.map((sch, idx) => (
-              <option
-                key={idx}
-                value={sch}
-                onClick={() => handleSchoolSelect(sch)}
-              />
-            ))}
-          </datalist>
+            <label className="font-medium">Defer Loan Payments until Graduation?</label>
+          </div>
 
-          <label>Program Name*</label>
-          <input
-            name="selected_program"
-            value={selected_program}
-            onChange={handleProgramChange}
-            list="program-suggestions"
-            placeholder="Enter program name..."
-          />
-          <datalist id="program-suggestions">
-            {programSuggestions.map((prog, idx) => (
-              <option
-                key={idx}
-                value={prog}
-                onClick={() => handleProgramSelect(prog)}
-              />
-            ))}
-          </datalist>
+          <div className="space-y-1">
+            <label className="block font-medium">School Name*</label>
+            <input
+              name="selected_school"
+              value={selected_school}
+              onChange={handleSchoolChange}
+              list="school-suggestions"
+              placeholder="Enter school name..."
+              className="w-full border rounded p-2"
+            />
+            <datalist id="school-suggestions">
+              {schoolSuggestions.map((sch, idx) => (
+                <option
+                  key={idx}
+                  value={sch}
+                  onClick={() => handleSchoolSelect(sch)}
+                />
+              ))}
+            </datalist>
+          </div>
 
-          <label>Program Type*</label>
-          <select
-            name="program_type"
-            value={program_type}
-            onChange={handleProgramTypeSelect}
-          >
-            <option value="">Select Program Type</option>
-            {availableProgramTypes.map((t, i) => (
-              <option key={i} value={t}>{t}</option>
-            ))}
-          </select>
+          <div className="space-y-1">
+            <label className="block font-medium">Program Name*</label>
+            <input
+              name="selected_program"
+              value={selected_program}
+              onChange={handleProgramChange}
+              list="program-suggestions"
+              placeholder="Enter program name..."
+              className="w-full border rounded p-2"
+            />
+            <datalist id="program-suggestions">
+              {programSuggestions.map((prog, idx) => (
+                <option
+                  key={idx}
+                  value={prog}
+                  onClick={() => handleProgramSelect(prog)}
+                />
+              ))}
+            </datalist>
+          </div>
+
+          <div className="space-y-1">
+            <label className="block font-medium">Program Type*</label>
+            <select
+              name="program_type"
+              value={program_type}
+              onChange={handleProgramTypeSelect}
+              className="w-full border rounded p-2"
+            >
+              <option value="">Select Program Type</option>
+              {availableProgramTypes.map((t, i) => (
+                <option key={i} value={t}>{t}</option>
+              ))}
+            </select>
+          </div>
 
           {(program_type === 'Graduate/Professional Certificate' ||
             program_type === 'First Professional Degree' ||
             program_type === 'Doctoral Degree') && (
-            <>
-              <label>Credit Hours Required</label>
+            <div className="space-y-1">
+              <label className="block font-medium">Credit Hours Required</label>
               <input
                 type="number"
                 name="credit_hours_required"
                 value={credit_hours_required}
                 onChange={handleParentFieldChange}
                 placeholder="e.g. 30"
+                className="w-full border rounded p-2"
               />
-            </>
+            </div>
           )}
 
-          <label>Credit Hours Per Year</label>
-          <input
-            type="number"
-            name="credit_hours_per_year"
-            value={credit_hours_per_year}
-            onChange={handleParentFieldChange}
-            placeholder="e.g. 24"
-          />
+          <div className="space-y-1">
+            <label className="block font-medium">Credit Hours Per Year</label>
+            <input
+              type="number"
+              name="credit_hours_per_year"
+              value={credit_hours_per_year}
+              onChange={handleParentFieldChange}
+              placeholder="e.g. 24"
+              className="w-full border rounded p-2"
+            />
+          </div>
 
-          <label>Yearly Tuition</label>
-          {/* If user typed a custom value => manualTuition, else autoTuition */}
-          <input
-            type="number"
-            value={displayedTuition}
-            onChange={handleManualTuitionChange}
-            placeholder="Leave blank to use auto, or type an override"
-          />
+          <div className="space-y-1">
+            <label className="block font-medium">Yearly Tuition</label>
+            <input
+              type="number"
+              value={displayedTuition}
+              onChange={handleManualTuitionChange}
+              placeholder="Leave blank to use auto, or type an override"
+              className="w-full border rounded p-2"
+            />
+          </div>
 
-          <label>Annual Financial Aid</label>
-          <input
-            type="number"
-            name="annual_financial_aid"
-            value={annual_financial_aid}
-            onChange={handleParentFieldChange}
-            placeholder="e.g. 2000"
-          />
+          <div className="space-y-1">
+            <label className="block font-medium">Annual Financial Aid</label>
+            <input
+              type="number"
+              name="annual_financial_aid"
+              value={annual_financial_aid}
+              onChange={handleParentFieldChange}
+              placeholder="e.g. 2000"
+              className="w-full border rounded p-2"
+            />
+          </div>
 
-          <label>Existing College Loan Debt</label>
-          <input
-            type="number"
-            name="existing_college_debt"
-            value={existing_college_debt}
-            onChange={handleParentFieldChange}
-            placeholder="e.g. 2000"
-          />
+          <div className="space-y-1">
+            <label className="block font-medium">Existing College Loan Debt</label>
+            <input
+              type="number"
+              name="existing_college_debt"
+              value={existing_college_debt}
+              onChange={handleParentFieldChange}
+              placeholder="e.g. 2000"
+              className="w-full border rounded p-2"
+            />
+          </div>
 
           {college_enrollment_status === 'currently_enrolled' && (
             <>
-              <label>Tuition Paid</label>
-              <input
-                type="number"
-                name="tuition_paid"
-                value={tuition_paid}
-                onChange={handleParentFieldChange}
-                placeholder="Already paid"
-              />
+              <div className="space-y-1">
+                <label className="block font-medium">Tuition Paid</label>
+                <input
+                  type="number"
+                  name="tuition_paid"
+                  value={tuition_paid}
+                  onChange={handleParentFieldChange}
+                  placeholder="Already paid"
+                  className="w-full border rounded p-2"
+                />
+              </div>
 
-              <label>Hours Completed</label>
-              <input
-                type="number"
-                name="hours_completed"
-                value={hours_completed}
-                onChange={handleParentFieldChange}
-                placeholder="Credit hours done"
-              />
+              <div className="space-y-1">
+                <label className="block font-medium">Hours Completed</label>
+                <input
+                  type="number"
+                  name="hours_completed"
+                  value={hours_completed}
+                  onChange={handleParentFieldChange}
+                  placeholder="Credit hours done"
+                  className="w-full border rounded p-2"
+                />
+              </div>
 
-              <label>Program Length</label>
-              {/* If user typed a custom => manualProgramLength, else autoProgramLength */}
-              <input
-                type="number"
-                value={displayedProgramLength}
-                onChange={handleManualProgramLengthChange}
-                placeholder="Leave blank to use auto, or type an override"
-              />
+              <div className="space-y-1">
+                <label className="block font-medium">Program Length</label>
+                <input
+                  type="number"
+                  value={displayedProgramLength}
+                  onChange={handleManualProgramLengthChange}
+                  placeholder="Leave blank to use auto, or type an override"
+                  className="w-full border rounded p-2"
+                />
+              </div>
             </>
           )}
 
-          <label>Expected Graduation</label>
-          <input
-            type="date"
-            name="expected_graduation"
-            value={expected_graduation}
-            onChange={handleParentFieldChange}
-          />
+          <div className="space-y-1">
+            <label className="block font-medium">Expected Graduation</label>
+            <input
+              type="date"
+              name="expected_graduation"
+              value={expected_graduation}
+              onChange={handleParentFieldChange}
+              className="w-full border rounded p-2"
+            />
+          </div>
 
-          <label>Loan Interest Rate (%)</label>
-          <input
-            type="number"
-            name="interest_rate"
-            value={interest_rate}
-            onChange={handleParentFieldChange}
-            placeholder="e.g. 5.5"
-          />
+          <div className="space-y-1">
+            <label className="block font-medium">Loan Interest Rate (%)</label>
+            <input
+              type="number"
+              name="interest_rate"
+              value={interest_rate}
+              onChange={handleParentFieldChange}
+              placeholder="e.g. 5.5"
+              className="w-full border rounded p-2"
+            />
+          </div>
 
-          <label>Loan Term (years)</label>
-          <input
-            type="number"
-            name="loan_term"
-            value={loan_term}
-            onChange={handleParentFieldChange}
-            placeholder="e.g. 10"
-          />
+          <div className="space-y-1">
+            <label className="block font-medium">Loan Term (years)</label>
+            <input
+              type="number"
+              name="loan_term"
+              value={loan_term}
+              onChange={handleParentFieldChange}
+              placeholder="e.g. 10"
+              className="w-full border rounded p-2"
+            />
+          </div>
 
-          <label>Extra Monthly Payment</label>
-          <input
-            type="number"
-            name="extra_payment"
-            value={extra_payment}
-            onChange={handleParentFieldChange}
-            placeholder="Optional"
-          />
+          <div className="space-y-1">
+            <label className="block font-medium">Extra Monthly Payment</label>
+            <input
+              type="number"
+              name="extra_payment"
+              value={extra_payment}
+              onChange={handleParentFieldChange}
+              placeholder="Optional"
+              className="w-full border rounded p-2"
+            />
+          </div>
 
-          <label>Expected Salary After Graduation</label>
-          <input
-            type="number"
-            name="expected_salary"
-            value={expected_salary}
-            onChange={handleParentFieldChange}
-            placeholder="e.g. 65000"
-          />
-
-          
-        </>
+          <div className="space-y-1">
+            <label className="block font-medium">Expected Salary After Graduation</label>
+            <input
+              type="number"
+              name="expected_salary"
+              value={expected_salary}
+              onChange={handleParentFieldChange}
+              placeholder="e.g. 65000"
+              className="w-full border rounded p-2"
+            />
+          </div>
+        </div>
       ) : (
         <p>Not currently enrolled or prospective student. Skipping college onboarding.</p>
       )}
 
-      <button onClick={prevStep} style={{ marginRight: '1rem' }}>← Previous</button>
-      <button onClick={handleSubmit}>Finish Onboarding</button>
+      <div className="pt-4">
+        <button
+          onClick={prevStep}
+          style={{ marginRight: '1rem' }}
+          className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded"
+        >
+          ← Previous
+        </button>
+        <button
+          onClick={handleSubmit}
+          className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded"
+        >
+          Finish Onboarding
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/src/components/PremiumOnboarding/FinancialOnboarding.js b/src/components/PremiumOnboarding/FinancialOnboarding.js
index 6d6da21..295f8cf 100644
--- a/src/components/PremiumOnboarding/FinancialOnboarding.js
+++ b/src/components/PremiumOnboarding/FinancialOnboarding.js
@@ -1,3 +1,4 @@
+// FinancialOnboarding.js
 import React from 'react';
 
 const FinancialOnboarding = ({ nextStep, prevStep, data, setData, isEditMode = false }) => {
@@ -13,7 +14,6 @@ const FinancialOnboarding = ({ nextStep, prevStep, data, setData, isEditMode = f
     emergency_contribution = 0,
     extra_cash_emergency_pct = "",
     extra_cash_retirement_pct = "",
-
     planned_monthly_expenses = '',
     planned_monthly_debt_payments = '',
     planned_monthly_retirement_contribution = '',
@@ -22,7 +22,7 @@ const FinancialOnboarding = ({ nextStep, prevStep, data, setData, isEditMode = f
     planned_surplus_retirement_pct = '',
     planned_additional_income = ''
   } = data;
-  
+
   const handleChange = (e) => {
     const { name, value } = e.target;
     let val = parseFloat(value) || 0;
@@ -42,172 +42,250 @@ const FinancialOnboarding = ({ nextStep, prevStep, data, setData, isEditMode = f
         extra_cash_emergency_pct: 100 - val
       }));
     } else {
-      setData(prevData => ({
-        ...prevData,
-        [name]: val
-      }));
+      setData(prevData => ({ ...prevData, [name]: val }));
     }
   };
 
   return (
-    <div>
-      <h2>Financial Details</h2>
+    <div className="max-w-md mx-auto p-6 space-y-6">
+      <h2 className="text-2xl font-semibold">Financial Details</h2>
 
       {currently_working === 'yes' && (
-        <>
-          <input 
-            name="current_salary" 
-            type="number" 
-            placeholder="Current Annual Salary"
-            value={current_salary || ''}  // controlled
-            onChange={handleChange} 
-          />
+        <div className="space-y-4">
+          <div>
+            <label className="block font-medium">Current Annual Salary</label>
+            <input
+              name="current_salary"
+              type="number"
+              placeholder="Current Annual Salary"
+              value={current_salary || ''}
+              onChange={handleChange}
+              className="w-full border rounded p-2"
+            />
+          </div>
 
-          <input 
-            name="additional_income"
-            type="number" 
-            placeholder="Additional Annual Income (Investments, annuitites, additional jobs, etc. - optional)"
-            value={additional_income || ''}
-            onChange={handleChange} 
-          />
-        </>
+          <div>
+            <label className="block font-medium">Additional Annual Income</label>
+            <input
+              name="additional_income"
+              type="number"
+              placeholder="Investments, side jobs, etc. (optional)"
+              value={additional_income || ''}
+              onChange={handleChange}
+              className="w-full border rounded p-2"
+            />
+          </div>
+        </div>
       )}
 
-      <input 
-        name="monthly_expenses" 
-        type="number" 
-        placeholder="Monthly Expenses"
-        value={monthly_expenses || ''}
-        onChange={handleChange} 
-      />
-
-      <input 
-        name="monthly_debt_payments" 
-        type="number"
-        placeholder="Monthly Debt Payments (optional)"
-        value={monthly_debt_payments || ''}
-        onChange={handleChange} 
-      />
-
-      <input 
-        name="retirement_savings" 
-        type="number" 
-        placeholder="Retirement Savings"
-        value={retirement_savings || ''}
-        onChange={handleChange} 
-      />
-
-      <input 
-        name="retirement_contribution"
-        type="number"
-        placeholder="Monthly Retirement Contribution"
-        value={retirement_contribution || ''}
-        onChange={handleChange} 
-      />
-
-      <input 
-        name="emergency_fund"
-        type="number" 
-        placeholder="Emergency Fund Savings"
-        value={emergency_fund || ''}
-        onChange={handleChange} 
-      />
-
-      <input 
-        name="emergency_contribution"
-        type="number"
-        placeholder="Monthly Emergency Fund Contribution (optional)"
-        value={emergency_contribution || ''}
-        onChange={handleChange}
-      />
-
-      <h3>Extra Monthly Cash Allocation</h3>
-      <p>If you have extra money left each month after expenses, how would you like to allocate it? (Must add to 100%)</p>
-
-      <label>Extra Monthly Cash to Emergency Fund (%)</label>
-      <input 
-        name="extra_cash_emergency_pct"
-        type="number"
-        placeholder="% to Emergency Savings (e.g., 30)"
-        value={extra_cash_emergency_pct}
-        onChange={handleChange}
-      />
-
-      <label>Extra Monthly Cash to Retirement Fund (%)</label>
-      <input 
-        name="extra_cash_retirement_pct"
-        type="number"
-        placeholder="% to Retirement Savings (e.g., 70)"
-        value={extra_cash_retirement_pct}
-        onChange={handleChange}
-      />
-
-{/* Only show the planned overrides if isEditMode is true */}
-{isEditMode && (
-        <>
-          <hr />
-          <h2>Planned Scenario Overrides</h2>
-          <p>These fields let you override your real finances for this scenario.</p>
-
-          <label>Planned Monthly Expenses</label>
+      <div className="space-y-4">
+        <div>
+          <label className="block font-medium">Monthly Expenses</label>
           <input
+            name="monthly_expenses"
             type="number"
-            name="planned_monthly_expenses"
-            value={planned_monthly_expenses}
+            placeholder="Monthly Expenses"
+            value={monthly_expenses || ''}
             onChange={handleChange}
+            className="w-full border rounded p-2"
           />
+        </div>
 
-          <label>Planned Monthly Debt Payments</label>
+        <div>
+          <label className="block font-medium">Monthly Debt Payments (optional)</label>
           <input
+            name="monthly_debt_payments"
             type="number"
-            name="planned_monthly_debt_payments"
-            value={planned_monthly_debt_payments}
+            placeholder="Monthly Debt Payments"
+            value={monthly_debt_payments || ''}
             onChange={handleChange}
+            className="w-full border rounded p-2"
           />
+        </div>
 
-          <label>Planned Monthly Retirement Contribution</label>
+        <div>
+          <label className="block font-medium">Retirement Savings</label>
           <input
+            name="retirement_savings"
             type="number"
-            name="planned_monthly_retirement_contribution"
-            value={planned_monthly_retirement_contribution}
+            placeholder="Retirement Savings"
+            value={retirement_savings || ''}
             onChange={handleChange}
+            className="w-full border rounded p-2"
           />
+        </div>
 
-          <label>Planned Monthly Emergency Contribution</label>
+        <div>
+          <label className="block font-medium">Monthly Retirement Contribution</label>
           <input
+            name="retirement_contribution"
             type="number"
-            name="planned_monthly_emergency_contribution"
-            value={planned_monthly_emergency_contribution}
+            placeholder="Monthly Retirement Contribution"
+            value={retirement_contribution || ''}
             onChange={handleChange}
+            className="w-full border rounded p-2"
           />
+        </div>
 
-          <label>Planned Surplus % to Emergency</label>
+        <div>
+          <label className="block font-medium">Emergency Fund Savings</label>
           <input
+            name="emergency_fund"
             type="number"
-            name="planned_surplus_emergency_pct"
-            value={planned_surplus_emergency_pct}
+            placeholder="Emergency Fund Savings"
+            value={emergency_fund || ''}
             onChange={handleChange}
+            className="w-full border rounded p-2"
           />
+        </div>
 
-          <label>Planned Surplus % to Retirement</label>
+        <div>
+          <label className="block font-medium">Monthly Emergency Fund Contribution</label>
           <input
+            name="emergency_contribution"
             type="number"
-            name="planned_surplus_retirement_pct"
-            value={planned_surplus_retirement_pct}
+            placeholder="Monthly Emergency Fund Contribution (optional)"
+            value={emergency_contribution || ''}
             onChange={handleChange}
+            className="w-full border rounded p-2"
           />
+        </div>
+      </div>
 
-          <label>Planned Additional Annual Income</label>
+      <div className="space-y-2">
+        <h3 className="text-lg font-medium">Extra Monthly Cash Allocation</h3>
+        <p className="text-gray-600">
+          If you have extra money left each month after expenses, how would you like to allocate it?
+          (Must add to 100%)
+        </p>
+
+        <div>
+          <label className="block font-medium">Extra Monthly Cash to Emergency Fund (%)</label>
           <input
+            name="extra_cash_emergency_pct"
             type="number"
-            name="planned_additional_income"
-            value={planned_additional_income}
+            placeholder="% to Emergency Savings (e.g., 30)"
+            value={extra_cash_emergency_pct}
             onChange={handleChange}
+            className="w-full border rounded p-2"
           />
-        </>
+        </div>
+
+        <div>
+          <label className="block font-medium">Extra Monthly Cash to Retirement Fund (%)</label>
+          <input
+            name="extra_cash_retirement_pct"
+            type="number"
+            placeholder="% to Retirement Savings (e.g., 70)"
+            value={extra_cash_retirement_pct}
+            onChange={handleChange}
+            className="w-full border rounded p-2"
+          />
+        </div>
+      </div>
+
+      {/* Only show the planned overrides if isEditMode is true */}
+      {isEditMode && (
+        <div className="space-y-4">
+          <hr className="my-4" />
+          <h2 className="text-xl font-medium">Planned Scenario Overrides</h2>
+          <p className="text-gray-600">
+            These fields let you override your real finances for this scenario.
+          </p>
+
+          <div>
+            <label className="block font-medium">Planned Monthly Expenses</label>
+            <input
+              type="number"
+              name="planned_monthly_expenses"
+              value={planned_monthly_expenses}
+              onChange={handleChange}
+              className="w-full border rounded p-2"
+            />
+          </div>
+
+          <div>
+            <label className="block font-medium">Planned Monthly Debt Payments</label>
+            <input
+              type="number"
+              name="planned_monthly_debt_payments"
+              value={planned_monthly_debt_payments}
+              onChange={handleChange}
+              className="w-full border rounded p-2"
+            />
+          </div>
+
+          <div>
+            <label className="block font-medium">Planned Monthly Retirement Contribution</label>
+            <input
+              type="number"
+              name="planned_monthly_retirement_contribution"
+              value={planned_monthly_retirement_contribution}
+              onChange={handleChange}
+              className="w-full border rounded p-2"
+            />
+          </div>
+
+          <div>
+            <label className="block font-medium">Planned Monthly Emergency Contribution</label>
+            <input
+              type="number"
+              name="planned_monthly_emergency_contribution"
+              value={planned_monthly_emergency_contribution}
+              onChange={handleChange}
+              className="w-full border rounded p-2"
+            />
+          </div>
+
+          <div>
+            <label className="block font-medium">Planned Surplus % to Emergency</label>
+            <input
+              type="number"
+              name="planned_surplus_emergency_pct"
+              value={planned_surplus_emergency_pct}
+              onChange={handleChange}
+              className="w-full border rounded p-2"
+            />
+          </div>
+
+          <div>
+            <label className="block font-medium">Planned Surplus % to Retirement</label>
+            <input
+              type="number"
+              name="planned_surplus_retirement_pct"
+              value={planned_surplus_retirement_pct}
+              onChange={handleChange}
+              className="w-full border rounded p-2"
+            />
+          </div>
+
+          <div>
+            <label className="block font-medium">Planned Additional Annual Income</label>
+            <input
+              type="number"
+              name="planned_additional_income"
+              value={planned_additional_income}
+              onChange={handleChange}
+              className="w-full border rounded p-2"
+            />
+          </div>
+        </div>
       )}
-      <button onClick={prevStep}>← Previous: Career</button>
-      <button onClick={nextStep}>Next: College →</button>
+
+      <div className="flex justify-between pt-4">
+        <button
+          onClick={prevStep}
+          className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded"
+        >
+          ← Previous: Career
+        </button>
+        <button
+          onClick={nextStep}
+          className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded"
+        >
+          Next: College →
+        </button>
+      </div>
     </div>
   );
 };
diff --git a/src/components/PremiumOnboarding/PremiumWelcome.js b/src/components/PremiumOnboarding/PremiumWelcome.js
index c5fdbc6..98a7f8d 100644
--- a/src/components/PremiumOnboarding/PremiumWelcome.js
+++ b/src/components/PremiumOnboarding/PremiumWelcome.js
@@ -2,12 +2,17 @@
 import React from 'react';
 
 const PremiumWelcome = ({ nextStep }) => (
-  <div>
-    <h2>Welcome to AptivaAI Premium!</h2>
-    <p>
+  <div className="max-w-md mx-auto text-center p-6">
+    <h2 className="text-2xl font-semibold mb-4">Welcome to AptivaAI Premium!</h2>
+    <p className="mb-6">
       Let's get started by gathering some quick information to personalize your experience.
     </p>
-    <button onClick={nextStep}>Get Started</button>
+    <button
+      className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded"
+      onClick={nextStep}
+    >
+      Get Started
+    </button>
   </div>
 );