diff --git a/src/App.js b/src/App.js
index cee6881..9eb71fd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
 import PremiumRoute from './components/PremiumRoute.js';
 import SessionExpiredHandler from './components/SessionExpiredHandler.js';
@@ -19,23 +19,69 @@ function App() {
   const location = useLocation();
 
   // Track whether user is authenticated
-  const [isAuthenticated, setIsAuthenticated] = useState(() => {
-    return !!localStorage.getItem('token');
-  });
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
 
   // Track the user object, including is_premium
   const [user, setUser] = useState(null);
 
-  // We hide the "Upgrade to Premium" CTA if we're already on certain premium routes
+  // We might also track a "loading" state so we don't redirect prematurely
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Hide the "Upgrade to Premium" CTA on certain premium routes
   const premiumPaths = [
     '/milestone-tracker',
     '/paywall',
     '/financial-profile',
     '/multi-scenario',
-    '/premium-onboarding'
+    '/premium-onboarding',
   ];
   const showPremiumCTA = !premiumPaths.includes(location.pathname);
 
+  // On first mount, rehydrate user if there's a token
+  useEffect(() => {
+    const token = localStorage.getItem('token');
+    if (!token) {
+      setIsLoading(false);
+      return; // No token => not authenticated
+    }
+
+    // If we have a token, let's validate it and fetch user data
+    fetch('https://dev1.aptivaai.com/api/user-profile', {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
+      .then((res) => {
+        if (!res.ok) {
+          // e.g. 401 means token invalid/expired
+          throw new Error('Token invalid or expired');
+        }
+        return res.json();
+      })
+      .then((profile) => {
+        // We have a valid user profile -> set states
+        setUser(profile);
+        setIsAuthenticated(true);
+      })
+      .catch((err) => {
+        console.error(err);
+        // If invalid, remove the token to avoid loops
+        localStorage.removeItem('token');
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, []);
+
+  if (isLoading) {
+    // Optionally show a loading spinner or placeholder
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <p>Loading...</p>
+      </div>
+    );
+  }
+
   return (
     <div className="flex min-h-screen flex-col bg-gray-50 text-gray-800">
       {/* Header */}
@@ -65,13 +111,13 @@ function App() {
             element={
               <SignIn
                 setIsAuthenticated={setIsAuthenticated}
-                setUser={setUser} // We pass setUser so SignIn can store user details
+                setUser={setUser} 
               />
             }
           />
           <Route path="/signup" element={<SignUp />} />
 
-          {/* Paywall - open to everyone for subscription */}
+          {/* Paywall (accessible to all) */}
           <Route path="/paywall" element={<Paywall />} />
 
           {/* Authenticated routes */}
diff --git a/src/components/AISuggestedMilestones.js b/src/components/AISuggestedMilestones.js
index 63a4f34..1609387 100644
--- a/src/components/AISuggestedMilestones.js
+++ b/src/components/AISuggestedMilestones.js
@@ -1,72 +1,85 @@
-// src/components/AISuggestedMilestones.js
 import React, { useEffect, useState } from 'react';
-
+import { Button } from './ui/button.js';
 
 const AISuggestedMilestones = ({ userId, career, careerPathId, authFetch, activeView, projectionData }) => {
   const [suggestedMilestones, setSuggestedMilestones] = useState([]);
   const [selected, setSelected] = useState([]);
   const [loading, setLoading] = useState(false);
 
+  // Show a warning if projectionData is not an array
   useEffect(() => {
     if (!Array.isArray(projectionData)) {
       console.warn('⚠️ projectionData is not an array:', projectionData);
       return;
     }
-  
     console.log('📊 projectionData sample:', projectionData.slice(0, 3));
   }, [projectionData]);
-  
-  
+
+  // Generate AI-based suggestions from projectionData
   useEffect(() => {
     if (!career || !Array.isArray(projectionData)) return;
-  
-    // Dynamically suggest milestones based on projection data
     const suggested = [];
-  
-    // Find salary or savings growth points from projectionData:
+
+    // Example: if retirement crosses $50k or if loans are paid off, we suggest a milestone
     projectionData.forEach((monthData, index) => {
-      if (index === 0) return; // Skip first month for comparison
+      if (index === 0) return;
       const prevMonth = projectionData[index - 1];
-  
-      // Example logic: suggest milestones when retirement savings hit certain thresholds
-      if (monthData.totalRetirementSavings >= 50000 && prevMonth.totalRetirementSavings < 50000) {
+
+      // Retirement crossing 50k
+      if (
+        monthData.totalRetirementSavings >= 50000 &&
+        prevMonth.totalRetirementSavings < 50000
+      ) {
         suggested.push({
           title: `Reach $50k Retirement Savings`,
           date: monthData.month + '-01',
-          progress: 0,
+          progress: 0
         });
       }
-  
-      // Milestone when loan is paid off
+
+      // Loan paid off
       if (monthData.loanBalance <= 0 && prevMonth.loanBalance > 0) {
         suggested.push({
           title: `Student Loans Paid Off`,
           date: monthData.month + '-01',
-          progress: 0,
+          progress: 0
         });
       }
     });
-  
-    // Career-based suggestions still possible (add explicitly if desired)
+
+    // Career-based suggestions
     suggested.push(
-      { title: `Entry-Level ${career}`, date: projectionData[6]?.month + '-01' || '2025-06-01', progress: 0 },
-      { title: `Mid-Level ${career}`, date: projectionData[24]?.month + '-01' || '2027-01-01', progress: 0 },
-      { title: `Senior-Level ${career}`, date: projectionData[60]?.month + '-01' || '2030-01-01', progress: 0 }
+      {
+        title: `Entry-Level ${career}`,
+        date: projectionData[6]?.month + '-01' || '2025-06-01',
+        progress: 0
+      },
+      {
+        title: `Mid-Level ${career}`,
+        date: projectionData[24]?.month + '-01' || '2027-01-01',
+        progress: 0
+      },
+      {
+        title: `Senior-Level ${career}`,
+        date: projectionData[60]?.month + '-01' || '2030-01-01',
+        progress: 0
+      }
     );
-  
+
     setSuggestedMilestones(suggested);
     setSelected([]);
   }, [career, projectionData]);
-  
-  
+
+  // Toggle selection of a milestone
   const toggleSelect = (index) => {
-    setSelected(prev =>
-      prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]
+    setSelected((prev) =>
+      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
     );
   };
 
+  // Confirm the selected items => POST them as new milestones
   const confirmSelectedMilestones = async () => {
-    const milestonesToSend = selected.map(index => {
+    const milestonesToSend = selected.map((index) => {
       const m = suggestedMilestones[index];
       return {
         title: m.title,
@@ -74,30 +87,30 @@ const AISuggestedMilestones = ({ userId, career, careerPathId, authFetch, active
         date: m.date,
         progress: m.progress,
         milestone_type: activeView || 'Career',
-        career_path_id: careerPathId,
+        career_path_id: careerPathId
       };
     });
-  
+
     try {
       setLoading(true);
       const res = await authFetch(`/api/premium/milestone`, {
         method: 'POST',
         body: JSON.stringify({ milestones: milestonesToSend }),
-        headers: { 'Content-Type': 'application/json' },
+        headers: { 'Content-Type': 'application/json' }
       });
-
       if (!res.ok) throw new Error('Failed to save selected milestones');
+
       const data = await res.json();
       console.log('Confirmed milestones:', data);
+
       setSelected([]); // Clear selection
-      window.location.reload();
+      window.location.reload(); // Re-fetch or reload as needed
     } catch (error) {
       console.error('Error saving selected milestones:', error);
     } finally {
       setLoading(false);
     }
   };
-  
 
   if (!suggestedMilestones.length) return null;
 
@@ -116,9 +129,12 @@ const AISuggestedMilestones = ({ userId, career, careerPathId, authFetch, active
           </li>
         ))}
       </ul>
-      <button onClick={confirmSelectedMilestones} disabled={loading || selected.length === 0}>
+      <Button
+        onClick={confirmSelectedMilestones}
+        disabled={loading || selected.length === 0}
+      >
         {loading ? 'Saving...' : 'Confirm Selected'}
-      </button>
+      </Button>
     </div>
   );
 };
diff --git a/src/components/CareerSearch.js b/src/components/CareerSearch.js
index ad4d8eb..37e5e6d 100644
--- a/src/components/CareerSearch.js
+++ b/src/components/CareerSearch.js
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { Button } from './ui/button.js';
 
 const CareerSearch = ({ onCareerSelected }) => {
   const [careerObjects, setCareerObjects] = useState([]);
@@ -24,38 +25,30 @@ const CareerSearch = ({ onCareerSelected }) => {
 
             for (let k = 0; k < careersList.length; k++) {
               const c = careersList[k];
-              // If there's a title and soc_code, store the first we encounter for that title.
               if (c.title && c.soc_code && c.cip_code !== undefined) {
                 if (!uniqueByTitle.has(c.title)) {
-                  // Add it if we haven't seen this exact title yet
                   uniqueByTitle.set(c.title, {
                     title: c.title,
                     soc_code: c.soc_code,
-                    cip_code: c.cip_code,
+                    cip_code: c.cip_code
                   });
                 }
-                // If you truly only want to keep the first occurrence,
-                // just do nothing if we see the same title again.
               }
             }
           }
         }
 
-        // Convert Map to array
         const dedupedArr = [...uniqueByTitle.values()];
         setCareerObjects(dedupedArr);
-
       } catch (error) {
         console.error('Error loading or parsing career_clusters.json:', error);
       }
     };
-
     fetchCareerData();
   }, []);
 
-  // Called when user clicks "Confirm New Career"
   const handleConfirmCareer = () => {
-    // Find the full object by exact title match
+    // find the full object by exact title match
     const foundObj = careerObjects.find(
       (obj) => obj.title.toLowerCase() === searchInput.toLowerCase()
     );
@@ -83,9 +76,9 @@ const CareerSearch = ({ onCareerSelected }) => {
         ))}
       </datalist>
 
-      <button onClick={handleConfirmCareer} style={{ marginLeft: '8px' }}>
+      <Button onClick={handleConfirmCareer} style={{ marginLeft: '8px' }}>
         Confirm
-      </button>
+      </Button>
     </div>
   );
 };
diff --git a/src/components/MilestoneTimeline.js b/src/components/MilestoneTimeline.js
index 60e2ade..0daa254 100644
--- a/src/components/MilestoneTimeline.js
+++ b/src/components/MilestoneTimeline.js
@@ -1,5 +1,5 @@
-// src/components/MilestoneTimeline.js
 import React, { useEffect, useState, useCallback } from 'react';
+import { Button } from './ui/button.js';
 
 const today = new Date();
 
@@ -12,7 +12,6 @@ export default function MilestoneTimeline({
 }) {
   const [milestones, setMilestones] = useState({ Career: [], Financial: [] });
 
-  // "new or edit" milestone form data
   const [newMilestone, setNewMilestone] = useState({
     title: '',
     description: '',
@@ -23,7 +22,6 @@ export default function MilestoneTimeline({
     isUniversal: 0
   });
   const [impactsToDelete, setImpactsToDelete] = useState([]);
-
   const [showForm, setShowForm] = useState(false);
   const [editingMilestone, setEditingMilestone] = useState(null);
 
@@ -36,33 +34,23 @@ export default function MilestoneTimeline({
   const [copyWizardMilestone, setCopyWizardMilestone] = useState(null);
 
   // ------------------------------------------------------------------
-  // 1) HELPER FUNCTIONS (defined above usage)
+  // 1) HELPER: Add or remove an impact from newMilestone
   // ------------------------------------------------------------------
-
-  // Insert a new blank impact
   function addNewImpact() {
     setNewMilestone((prev) => ({
       ...prev,
       impacts: [
         ...prev.impacts,
-        {
-          impact_type: 'ONE_TIME',
-          direction: 'subtract',
-          amount: 0,
-          start_date: '',
-          end_date: ''
-        }
+        { impact_type: 'ONE_TIME', direction: 'subtract', amount: 0, start_date: '', end_date: '' }
       ]
     }));
   }
 
-  // Remove an impact from newMilestone.impacts
   function removeImpact(idx) {
     setNewMilestone((prev) => {
       const newImpacts = [...prev.impacts];
       const removed = newImpacts[idx];
       if (removed && removed.id) {
-        // queue for DB DELETE
         setImpactsToDelete((old) => [...old, removed.id]);
       }
       newImpacts.splice(idx, 1);
@@ -70,7 +58,6 @@ export default function MilestoneTimeline({
     });
   }
 
-  // Update a specific impact property
   function updateImpact(idx, field, value) {
     setNewMilestone((prev) => {
       const newImpacts = [...prev.impacts];
@@ -92,10 +79,9 @@ export default function MilestoneTimeline({
       }
       const data = await res.json();
       if (!data.milestones) {
-        console.warn('No milestones field in response:', data);
+        console.warn('No milestones in response:', data);
         return;
       }
-
       const categorized = { Career: [], Financial: [] };
       data.milestones.forEach((m) => {
         if (categorized[m.milestone_type]) {
@@ -104,7 +90,6 @@ export default function MilestoneTimeline({
           console.warn(`Unknown milestone type: ${m.milestone_type}`);
         }
       });
-
       setMilestones(categorized);
     } catch (err) {
       console.error('Failed to fetch milestones:', err);
@@ -116,7 +101,7 @@ export default function MilestoneTimeline({
   }, [fetchMilestones]);
 
   // ------------------------------------------------------------------
-  // 3) Load scenarios for copy wizard
+  // 3) Load Scenarios for copy wizard
   // ------------------------------------------------------------------
   useEffect(() => {
     async function loadScenarios() {
@@ -139,7 +124,6 @@ export default function MilestoneTimeline({
   async function handleEditMilestone(m) {
     try {
       setImpactsToDelete([]);
-
       const res = await authFetch(`/api/premium/milestone-impacts?milestone_id=${m.id}`);
       if (!res.ok) {
         console.error('Failed to fetch milestone impacts. Status:', res.status);
@@ -270,7 +254,7 @@ export default function MilestoneTimeline({
         }
       }
 
-      // Optionally re-fetch or update local
+      // Re-fetch or update local
       await fetchMilestones();
 
       // reset form
@@ -360,7 +344,6 @@ export default function MilestoneTimeline({
 
         // Brute force page refresh
         window.location.reload();
-
         onClose();
       } catch (err) {
         console.error('Error copying milestone:', err);
@@ -371,7 +354,9 @@ export default function MilestoneTimeline({
       <div className="modal-backdrop">
         <div className="modal-container">
           <h3>Copy Milestone to Other Scenarios</h3>
-          <p>Milestone: <strong>{milestone.title}</strong></p>
+          <p>
+            Milestone: <strong>{milestone.title}</strong>
+          </p>
 
           {scenarios.map((s) => (
             <div key={s.id}>
@@ -387,8 +372,10 @@ export default function MilestoneTimeline({
           ))}
 
           <div style={{ marginTop: '1rem' }}>
-            <button onClick={onClose} style={{ marginRight: '0.5rem' }}>Cancel</button>
-            <button onClick={handleCopy}>Copy</button>
+            <Button onClick={onClose} style={{ marginRight: '0.5rem' }}>
+              Cancel
+            </Button>
+            <Button onClick={handleCopy}>Copy</Button>
           </div>
         </div>
       </div>
@@ -425,17 +412,16 @@ export default function MilestoneTimeline({
       // normal => single scenario
       await deleteSingleMilestone(m);
     }
-
-    // done => brute force
     window.location.reload();
   }
 
   async function deleteSingleMilestone(m) {
     try {
-      const delRes = await authFetch(`/api/premium/milestones/${m.id}`, { method: 'DELETE' });
+      const delRes = await authFetch(`/api/premium/milestones/${m.id}`, {
+        method: 'DELETE'
+      });
       if (!delRes.ok) {
         console.error('Failed to delete single milestone:', delRes.status);
-        return;
       }
     } catch (err) {
       console.error('Error removing milestone from scenario:', err);
@@ -464,17 +450,17 @@ export default function MilestoneTimeline({
     <div className="milestone-timeline">
       <div className="view-selector">
         {['Career', 'Financial'].map((view) => (
-          <button
+          <Button
             key={view}
             className={activeView === view ? 'active' : ''}
             onClick={() => setActiveView(view)}
           >
             {view}
-          </button>
+          </Button>
         ))}
       </div>
 
-      <button
+      <Button
         onClick={() => {
           if (showForm) {
             // Cancel form
@@ -496,11 +482,11 @@ export default function MilestoneTimeline({
         }}
       >
         {showForm ? 'Cancel' : '+ New Milestone'}
-      </button>
+      </Button>
 
+      {/* CREATE/EDIT FORM */}
       {showForm && (
         <div className="form">
-          {/* Title / Desc / Date / Progress */}
           <input
             type="text"
             placeholder="Title"
@@ -515,11 +501,8 @@ export default function MilestoneTimeline({
           />
           <input
             type="date"
-            placeholder="Milestone Date"
             value={newMilestone.date}
-            onChange={(e) =>
-              setNewMilestone((prev) => ({ ...prev, date: e.target.value }))
-            }
+            onChange={(e) => setNewMilestone({ ...newMilestone, date: e.target.value })}
           />
           <input
             type="number"
@@ -531,7 +514,6 @@ export default function MilestoneTimeline({
             }}
           />
 
-          {/* If Financial => newSalary + impacts */}
           {activeView === 'Financial' && (
             <div>
               <input
@@ -587,6 +569,7 @@ export default function MilestoneTimeline({
                         onChange={(e) => updateImpact(idx, 'start_date', e.target.value)}
                       />
                     </div>
+
                     {imp.impact_type === 'MONTHLY' && (
                       <div>
                         <label>End Date (blank if indefinite): </label>
@@ -598,18 +581,14 @@ export default function MilestoneTimeline({
                       </div>
                     )}
 
-                    <button
-                      className="text-red-500 mt-2"
-                      onClick={() => removeImpact(idx)}
-                    >
+                    <Button className="text-red-500 mt-2" onClick={() => removeImpact(idx)}>
                       Remove Impact
-                    </button>
+                    </Button>
                   </div>
                 ))}
-
-                <button onClick={addNewImpact} className="bg-gray-200 px-2 py-1 mt-2">
+                <Button onClick={addNewImpact} className="bg-gray-200 px-2 py-1 mt-2">
                   + Add Impact
-                </button>
+                </Button>
               </div>
             </div>
           )}
@@ -631,16 +610,15 @@ export default function MilestoneTimeline({
             </label>
           </div>
 
-          <button onClick={saveMilestone} style={{ marginTop: '1rem' }}>
+          <Button onClick={saveMilestone} style={{ marginTop: '1rem' }}>
             {editingMilestone ? 'Update' : 'Add'} Milestone
-          </button>
+          </Button>
         </div>
       )}
 
-      {/* Actual timeline */}
+      {/* TIMELINE VISUAL */}
       <div className="milestone-timeline-container">
         <div className="milestone-timeline-line" />
-
         {milestones[activeView].map((m) => {
           const leftPos = calcPosition(m.date);
           return (
@@ -649,10 +627,7 @@ export default function MilestoneTimeline({
               className="milestone-timeline-post"
               style={{ left: `${leftPos}%` }}
             >
-              <div
-                className="milestone-timeline-dot"
-                onClick={() => handleEditMilestone(m)}
-              />
+              <div className="milestone-timeline-dot" onClick={() => handleEditMilestone(m)} />
               <div className="milestone-content">
                 <div className="title">{m.title}</div>
                 {m.description && <p>{m.description}</p>}
@@ -662,6 +637,7 @@ export default function MilestoneTimeline({
                 </div>
                 <div className="date">{m.date}</div>
 
+                {/* Tasks */}
                 {m.tasks && m.tasks.length > 0 && (
                   <ul>
                     {m.tasks.map((t) => (
@@ -674,29 +650,26 @@ export default function MilestoneTimeline({
                   </ul>
                 )}
 
-                <button
+                <Button
                   onClick={() => {
                     setShowTaskForm(showTaskForm === m.id ? null : m.id);
                     setNewTask({ title: '', description: '', due_date: '' });
                   }}
                 >
                   {showTaskForm === m.id ? 'Cancel Task' : 'Add Task'}
-                </button>
+                </Button>
 
                 <div style={{ marginTop: '0.5rem' }}>
-                  <button onClick={() => handleEditMilestone(m)}>Edit</button>
-                  <button
-                    style={{ marginLeft: '0.5rem' }}
-                    onClick={() => setCopyWizardMilestone(m)}
-                  >
+                  <Button onClick={() => handleEditMilestone(m)}>Edit</Button>
+                  <Button style={{ marginLeft: '0.5rem' }} onClick={() => setCopyWizardMilestone(m)}>
                     Copy
-                  </button>
-                  <button
-                    style={{ marginLeft: '0.5rem', color: 'red' }}
+                  </Button>
+                  <Button
+                    style={{ marginLeft: '0.5rem', background: 'red', color: 'black' }}
                     onClick={() => handleDeleteMilestone(m)}
                   >
                     Delete
-                  </button>
+                  </Button>
                 </div>
 
                 {showTaskForm === m.id && (
@@ -718,7 +691,7 @@ export default function MilestoneTimeline({
                       value={newTask.due_date}
                       onChange={(e) => setNewTask({ ...newTask, due_date: e.target.value })}
                     />
-                    <button onClick={() => addTask(m.id)}>Save Task</button>
+                    <Button onClick={() => addTask(m.id)}>Save Task</Button>
                   </div>
                 )}
               </div>
diff --git a/src/components/MilestoneTracker.css b/src/components/MilestoneTracker.css
index eb96e60..1e1dbb1 100644
--- a/src/components/MilestoneTracker.css
+++ b/src/components/MilestoneTracker.css
@@ -21,17 +21,9 @@
     margin-bottom: 20px;
   }
   
-  .view-selector button {
-    padding: 10px 15px;
-    border: none;
-    cursor: pointer;
-    background: #4caf50;
-    color: white;
-    border-radius: 5px;
-  }
   
   .view-selector button.active {
-    background: #2e7d32;
+    background: #0703e2;
   }
   
   .timeline-container {
diff --git a/src/components/MilestoneTracker.js b/src/components/MilestoneTracker.js
index dd4b10e..ca27bc3 100644
--- a/src/components/MilestoneTracker.js
+++ b/src/components/MilestoneTracker.js
@@ -14,7 +14,7 @@ import {
 } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import { Filler } from 'chart.js';
-
+import { Button } from './ui/button.js';
 import authFetch from '../utils/authFetch.js';
 import CareerSelectDropdown from './CareerSelectDropdown.js';
 import CareerSearch from './CareerSearch.js';
@@ -520,7 +520,7 @@ const MilestoneTracker = ({ selectedCareer: initialCareer }) => {
 
       {/* Confirm new career scenario */}
       {pendingCareerForModal && (
-        <button
+        <Button
           onClick={() => {
             // Example action
             console.log('User confirmed new career path:', pendingCareerForModal);
@@ -529,7 +529,7 @@ const MilestoneTracker = ({ selectedCareer: initialCareer }) => {
           className="bg-blue-500 hover:bg-blue-600 text-white font-semibold px-4 py-2 rounded"
         >
           Confirm Career Change to {pendingCareerForModal}
-        </button>
+        </Button>
       )}
     </div>
   );
diff --git a/src/components/MultiScenarioView.js b/src/components/MultiScenarioView.js
index 84c74c2..39b2911 100644
--- a/src/components/MultiScenarioView.js
+++ b/src/components/MultiScenarioView.js
@@ -3,6 +3,7 @@
 import React, { useEffect, useState } from 'react';
 import authFetch from '../utils/authFetch.js';
 import ScenarioContainer from './ScenarioContainer.js';
+import { Button } from './ui/button.js';
 
 /**
  * MultiScenarioView
@@ -248,19 +249,11 @@ export default function MultiScenarioView() {
 
       {/* Add Scenario button */}
       <div style={{ alignSelf: 'flex-start' }}>
-        <button
+        <Button
           onClick={handleAddScenario}
-          style={{
-            padding: '0.5rem 1rem',
-            height: 'auto',
-            backgroundColor: '#76b900',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer'
-          }}
         >
           + Add Scenario
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/src/components/ScenarioContainer.js b/src/components/ScenarioContainer.js
index 41eab30..c40559d 100644
--- a/src/components/ScenarioContainer.js
+++ b/src/components/ScenarioContainer.js
@@ -1,48 +1,45 @@
+// src/components/ScenarioContainer.js
+
 import React, { useState, useEffect, useCallback } from 'react';
 import { Line } from 'react-chartjs-2';
 import { Chart as ChartJS } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
-
+import { Button } from './ui/button.js';  // <-- Universal Button
 import authFetch from '../utils/authFetch.js';
 import { simulateFinancialProjection } from '../utils/FinancialProjectionService.js';
 import AISuggestedMilestones from './AISuggestedMilestones.js';
 import ScenarioEditModal from './ScenarioEditModal.js';
 
-// Register the annotation plugin (though we won't use it for milestone markers).
+// Register the annotation plugin
 ChartJS.register(annotationPlugin);
 
 /**
  * ScenarioContainer
  * -----------------
  * This component:
- *  - Renders a <select> to pick from all scenarios, or uses the 'scenario' prop if set
- *  - Fetches the collegeProfile for that scenario
- *  - Fetches all milestones, plus their tasks and impacts
- *  - Builds a "mergedProfile" like in single-scenario code, including:
- *    -- Overridden fields from the scenario
- *    -- The user's global financialProfile
- *    -- milestoneImpacts from all milestones
- *    -- The "inCollege" flag, etc.
- *  - Calls simulateFinancialProjection(mergedProfile)
- *  - Displays the results (chart, loan payoff, final retirement)
- *  - Provides Milestone CRUD
- *  - "Clone" / "Remove" scenario methods are delegated to parent
+ *  1) Lets the user pick a scenario (via <select>), or uses the provided `scenario` prop.
+ *  2) Loads the collegeProfile + milestones/impacts for that scenario.
+ *  3) Merges scenario + user financial data + milestone impacts → runs `simulateFinancialProjection`.
+ *  4) Shows a chart of net savings / retirement / loan balances over time.
+ *  5) Allows milestone CRUD (create, edit, delete, copy).
+ *  6) Offers “Clone” / “Delete” scenario callbacks from the parent.
  */
+
 export default function ScenarioContainer({
-  scenario,           // The scenario row from career_paths
-  financialProfile,   // The user’s overall financial snapshot
-  onRemove,
-  onClone,
-  onEdit
+  scenario,         // The scenario row from career_paths
+  financialProfile, // The user’s overall financial snapshot
+  onRemove,         // Callback for deleting scenario
+  onClone,          // Callback for cloning scenario
+  onEdit            // (Optional) If you want a scenario editing callback
 }) {
   /*************************************************************
-   * 1) SCENARIO DROPDOWN: allScenarios, localScenario, etc.
+   * 1) SCENARIO DROPDOWN: Load, store, and let user pick
    *************************************************************/
   const [allScenarios, setAllScenarios] = useState([]);
-  // We keep a local copy of scenario so you can switch from dropdown
+  // We keep a local copy of `scenario` so user can switch from the dropdown
   const [localScenario, setLocalScenario] = useState(scenario || null);
 
-  // A) On mount, fetch all scenarios to populate the dropdown
+  // (A) On mount, fetch all scenarios to populate the <select>
   useEffect(() => {
     async function loadScenarios() {
       try {
@@ -59,17 +56,20 @@ export default function ScenarioContainer({
     loadScenarios();
   }, []);
 
-  // B) If the parent changes the scenario prop => update local
+  // (B) If parent changes the `scenario` prop, update local
   useEffect(() => {
     setLocalScenario(scenario || null);
   }, [scenario]);
 
-  // C) scenario <select> handler
+  // (C) <select> handler for picking a scenario from dropdown
   function handleScenarioSelect(e) {
     const chosenId = e.target.value;
     const found = allScenarios.find((s) => s.id === chosenId);
-    if (found) setLocalScenario(found);
-    else setLocalScenario(null);
+    if (found) {
+      setLocalScenario(found);
+    } else {
+      setLocalScenario(null);
+    }
   }
 
   /*************************************************************
@@ -79,15 +79,17 @@ export default function ScenarioContainer({
   const [milestones, setMilestones] = useState([]);
   const [impactsByMilestone, setImpactsByMilestone] = useState({});
 
+  // We'll also track a scenario edit modal
   const [showEditModal, setShowEditModal] = useState(false);
   const [editingScenarioData, setEditingScenarioData] = useState({
     scenario: null,
     collegeProfile: null
   });
 
-  // (A) Load the college profile for localScenario
+  // (A) Load the college profile for the selected scenario
   useEffect(() => {
     if (!localScenario?.id) {
+      // if no scenario selected, clear the collegeProfile
       setCollegeProfile(null);
       return;
     }
@@ -97,7 +99,7 @@ export default function ScenarioContainer({
         const res = await authFetch(url);
         if (res.ok) {
           const data = await res.json();
-          // Might be an object or array
+          // in some setups, the endpoint returns an array, in others an object
           setCollegeProfile(Array.isArray(data) ? data[0] || {} : data);
         } else {
           setCollegeProfile({});
@@ -110,7 +112,7 @@ export default function ScenarioContainer({
     loadCollegeProfile();
   }, [localScenario]);
 
-  // (B) Load milestones
+  // (B) Load milestones for localScenario (and each milestone’s impacts)
   const fetchMilestones = useCallback(async () => {
     if (!localScenario?.id) {
       setMilestones([]);
@@ -160,7 +162,7 @@ export default function ScenarioContainer({
     // Wait until we have localScenario + collegeProfile + financialProfile
     if (!financialProfile || !localScenario?.id || !collegeProfile) return;
 
-    // Gather all milestoneImpacts into one array for the aggregator
+    // Gather all milestoneImpacts
     let allImpacts = [];
     Object.keys(impactsByMilestone).forEach((mId) => {
       allImpacts = allImpacts.concat(impactsByMilestone[mId]);
@@ -168,9 +170,9 @@ export default function ScenarioContainer({
 
     const simYears = parseInt(simulationYearsInput, 10) || 20;
 
-    // Build the mergedProfile exactly like single-scenario aggregator
+    // Build mergedProfile from scenario + user financial + college + milestone
     const mergedProfile = {
-      // Base user financial
+      // base user data
       currentSalary: financialProfile.current_salary || 0,
 
       monthlyExpenses:
@@ -178,7 +180,6 @@ export default function ScenarioContainer({
       monthlyDebtPayments:
         localScenario.planned_monthly_debt_payments ?? financialProfile.monthly_debt_payments ?? 0,
 
-      // Overridden savings from scenario or fallback to financialProfile
       retirementSavings: financialProfile.retirement_savings ?? 0,
       emergencySavings: financialProfile.emergency_fund ?? 0,
 
@@ -203,7 +204,7 @@ export default function ScenarioContainer({
       additionalIncome:
         localScenario.planned_additional_income ?? financialProfile.additional_income ?? 0,
 
-      // College data
+      // college-related
       studentLoanAmount: collegeProfile.existing_college_debt || 0,
       interestRate: collegeProfile.interest_rate || 5,
       loanTerm: collegeProfile.loan_term || 10,
@@ -213,7 +214,6 @@ export default function ScenarioContainer({
       calculatedTuition: collegeProfile.tuition || 0,
       extraPayment: collegeProfile.extra_payment || 0,
 
-      // Are we in college?
       inCollege:
         collegeProfile.college_enrollment_status === 'currently_enrolled' ||
         collegeProfile.college_enrollment_status === 'prospective_student',
@@ -225,18 +225,18 @@ export default function ScenarioContainer({
       programLength: collegeProfile.program_length || 0,
       expectedSalary: collegeProfile.expected_salary || financialProfile.current_salary || 0,
 
-      // Scenario start date
+      // scenario date + simulation horizon
       startDate: localScenario.start_date || new Date().toISOString(),
       simulationYears: simYears,
 
-      // MILESTONE IMPACTS
+      // milestone impacts
       milestoneImpacts: allImpacts
     };
 
     // Run the simulation
     const { projectionData, loanPaidOffMonth } = simulateFinancialProjection(mergedProfile);
 
-    // Optionally compute a "cumulativeNetSavings" to display
+    // Optionally add a "cumulativeNetSavings" for display
     let cumulative = mergedProfile.emergencySavings || 0;
     const finalData = projectionData.map((monthRow) => {
       cumulative += (monthRow.netSavings || 0);
@@ -245,7 +245,6 @@ export default function ScenarioContainer({
 
     setProjectionData(finalData);
     setLoanPaidOffMonth(loanPaidOffMonth);
-
   }, [
     financialProfile,
     localScenario,
@@ -264,16 +263,17 @@ export default function ScenarioContainer({
   }
 
   /*************************************************************
-   * 4) CHART: lines + milestone markers
+   * 4) CHART: build data, handle milestone markers
    *************************************************************/
-  // Create arrays from projectionData
+  // x-axis labels (e.g. "2025-01", "2025-02", etc.)
   const chartLabels = projectionData.map((p) => p.month);
-  // We'll show netSavings, retirementSavings, and loanBalance
+
+  // dataset arrays
   const netSavingsData = projectionData.map((p) => p.cumulativeNetSavings || 0);
   const retData = projectionData.map((p) => p.retirementSavings || 0);
   const loanData = projectionData.map((p) => p.loanBalance || 0);
 
-  // Build a "milestone points" array to place markers on the chart
+  // milestone markers => we find index by matching YYYY-MM
   function getLabelIndexForMilestone(m) {
     if (!m.date) return -1;
     const short = m.date.slice(0, 7); // "YYYY-MM"
@@ -284,11 +284,7 @@ export default function ScenarioContainer({
     .map((m) => {
       const xIndex = getLabelIndexForMilestone(m);
       if (xIndex < 0) return null;
-      return {
-        x: xIndex,
-        y: 0, // place them at 0 or some other reference
-        milestoneObj: m
-      };
+      return { x: xIndex, y: 0, milestoneObj: m };
     })
     .filter(Boolean);
 
@@ -314,7 +310,6 @@ export default function ScenarioContainer({
         fill: false
       },
       {
-        // The milestone dataset for clickable markers
         label: 'Milestones',
         data: milestonePoints,
         showLine: false,
@@ -360,7 +355,7 @@ export default function ScenarioContainer({
   };
 
   /*************************************************************
-   * 5) MILESTONE CRUD: same as your code (Add, Copy, etc.)
+   * 5) MILESTONE CRUD
    *************************************************************/
   const [showForm, setShowForm] = useState(false);
   const [editingMilestone, setEditingMilestone] = useState(null);
@@ -397,12 +392,12 @@ export default function ScenarioContainer({
     setShowForm(true);
   }
 
+  // edit an existing milestone => fetch impacts
   async function handleEditMilestone(m) {
     if (!localScenario?.id) return;
     setEditingMilestone(m);
     setImpactsToDelete([]);
 
-    // fetch impacts for this milestone
     try {
       const impRes = await authFetch(`/api/premium/milestone-impacts?milestone_id=${m.id}`);
       if (impRes.ok) {
@@ -436,16 +431,11 @@ export default function ScenarioContainer({
       ...prev,
       impacts: [
         ...prev.impacts,
-        {
-          impact_type: 'ONE_TIME',
-          direction: 'subtract',
-          amount: 0,
-          start_date: '',
-          end_date: ''
-        }
+        { impact_type: 'ONE_TIME', direction: 'subtract', amount: 0, start_date: '', end_date: '' }
       ]
     }));
   }
+
   function removeImpact(idx) {
     setNewMilestone((prev) => {
       const copy = [...prev.impacts];
@@ -457,6 +447,7 @@ export default function ScenarioContainer({
       return { ...prev, impacts: copy };
     });
   }
+
   function updateImpact(idx, field, value) {
     setNewMilestone((prev) => {
       const copy = [...prev.impacts];
@@ -465,6 +456,7 @@ export default function ScenarioContainer({
     });
   }
 
+  // create or update milestone
   async function saveMilestone() {
     if (!localScenario?.id) return;
 
@@ -474,7 +466,7 @@ export default function ScenarioContainer({
     const method = editingMilestone ? 'PUT' : 'POST';
 
     const payload = {
-      milestone_type: 'Financial', // or "Career" if needed
+      milestone_type: 'Financial', // or "Career" if your scenario is about career
       title: newMilestone.title,
       description: newMilestone.description,
       date: newMilestone.date,
@@ -513,14 +505,14 @@ export default function ScenarioContainer({
           end_date: imp.end_date || null
         };
         if (imp.id) {
-          // PUT
+          // update existing
           await authFetch(`/api/premium/milestone-impacts/${imp.id}`, {
             method: 'PUT',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(impPayload)
           });
         } else {
-          // POST
+          // create new
           await authFetch('/api/premium/milestone-impacts', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
@@ -529,6 +521,7 @@ export default function ScenarioContainer({
         }
       }
 
+      // done => re-fetch
       await fetchMilestones();
 
       // reset form
@@ -550,6 +543,7 @@ export default function ScenarioContainer({
     }
   }
 
+  // delete milestone => if universal, ask user if removing from all or just this scenario
   async function handleDeleteMilestone(m) {
     if (m.is_universal === 1) {
       const userChoice = window.confirm(
@@ -569,6 +563,7 @@ export default function ScenarioContainer({
     }
     await fetchMilestones();
   }
+
   async function deleteSingleMilestone(m) {
     try {
       await authFetch(`/api/premium/milestones/${m.id}`, { method: 'DELETE' });
@@ -577,6 +572,7 @@ export default function ScenarioContainer({
     }
   }
 
+  // tasks
   async function addTask(milestoneId) {
     try {
       const payload = {
@@ -602,11 +598,9 @@ export default function ScenarioContainer({
     }
   }
 
-  // Instead of immediately calling `onEdit(scenario)`, we handle locally:
+  // scenario-level editing
   function handleEditScenario() {
     if (!localScenario) return;
-    // We'll store the scenario and also fetch the collegeProfile if needed
-    // or we can just reuse the existing `collegeProfile` state.
     setEditingScenarioData({
       scenario: localScenario,
       collegeProfile
@@ -614,14 +608,12 @@ export default function ScenarioContainer({
     setShowEditModal(true);
   }
 
-  // Scenario-level
   function handleDeleteScenario() {
     if (localScenario) onRemove(localScenario.id);
   }
   function handleCloneScenario() {
     if (localScenario) onClone(localScenario);
   }
-  
 
   /*************************************************************
    * 6) COPY WIZARD
@@ -649,7 +641,7 @@ export default function ScenarioContainer({
         });
         if (!res.ok) throw new Error('Failed to copy milestone');
         onClose();
-        // Optionally reload the page or call fetchMilestones again
+        // Optionally reload
         window.location.reload();
       } catch (err) {
         console.error('Error copying milestone:', err);
@@ -696,10 +688,10 @@ export default function ScenarioContainer({
           ))}
 
           <div style={{ marginTop: '1rem' }}>
-            <button onClick={onClose} style={{ marginRight: '0.5rem' }}>
+            <Button onClick={onClose} style={{ marginRight: '0.5rem' }}>
               Cancel
-            </button>
-            <button onClick={handleCopy}>Copy</button>
+            </Button>
+            <Button onClick={handleCopy}>Copy</Button>
           </div>
         </div>
       </div>
@@ -761,11 +753,11 @@ export default function ScenarioContainer({
             </div>
           )}
 
-          <button onClick={handleNewMilestone} style={{ marginTop: '0.5rem' }}>
+          <Button onClick={handleNewMilestone} style={{ marginTop: '0.5rem' }}>
             + New Milestone
-          </button>
+          </Button>
 
-          {/* AI-Suggested Milestones (unchanged) */}
+          {/* AI-Suggested Milestones */}
           <AISuggestedMilestones
             career={localScenario.career_name || localScenario.scenario_title || ''}
             careerPathId={localScenario.id}
@@ -775,17 +767,16 @@ export default function ScenarioContainer({
           />
 
           <div style={{ marginTop: '0.5rem' }}>
-            {/* Instead of calling onEdit(localScenario), show local modal */}
-            <button onClick={handleEditScenario}>Edit</button>
-            <button onClick={handleCloneScenario} style={{ marginLeft: '0.5rem' }}>
+            <Button onClick={handleEditScenario}>Edit</Button>
+            <Button onClick={handleCloneScenario} style={{ marginLeft: '0.5rem' }}>
               Clone
-            </button>
-            <button
+            </Button>
+            <Button
               onClick={handleDeleteScenario}
-              style={{ marginLeft: '0.5rem', color: 'red' }}
+              style={{ marginLeft: '0.5rem', background: 'red', color: 'black' }}
             >
               Delete
-            </button>
+            </Button>
           </div>
 
           {/* The inline form for milestone creation/edit */}
@@ -821,7 +812,7 @@ export default function ScenarioContainer({
                     progress: parseInt(e.target.value || '0', 10)
                   }))
                 }
-              />        
+              />
 
               {/* Impacts sub-form */}
               <div style={{ border: '1px solid #ccc', padding: '1rem', marginTop: '1rem' }}>
@@ -878,22 +869,22 @@ export default function ScenarioContainer({
                         />
                       </div>
                     )}
-                    <button
+                    <Button
                       style={{ marginLeft: '0.5rem', color: 'red' }}
                       onClick={() => removeImpact(idx)}
                     >
                       Remove
-                    </button>
+                    </Button>
                   </div>
                 ))}
-                <button onClick={addNewImpact}>+ Add Impact</button>
+                <Button onClick={addNewImpact}>+ Add Impact</Button>
               </div>
 
               <div style={{ marginTop: '1rem' }}>
-                <button onClick={saveMilestone}>
+                <Button onClick={saveMilestone}>
                   {editingMilestone ? 'Update' : 'Add'} Milestone
-                </button>
-                <button
+                </Button>
+                <Button
                   style={{ marginLeft: '0.5rem' }}
                   onClick={() => {
                     setShowForm(false);
@@ -911,7 +902,7 @@ export default function ScenarioContainer({
                   }}
                 >
                   Cancel
-                </button>
+                </Button>
               </div>
             </div>
           )}
@@ -943,29 +934,32 @@ export default function ScenarioContainer({
                   </ul>
                 )}
 
-                <button
+                <Button
                   onClick={() => {
                     setShowTaskForm(showTaskForm === m.id ? null : m.id);
                     setNewTask({ title: '', description: '', due_date: '' });
                   }}
                 >
                   {showTaskForm === m.id ? 'Cancel Task' : 'Add Task'}
-                </button>
-                <button style={{ marginLeft: '0.5rem' }} onClick={() => handleEditMilestone(m)}>
+                </Button>
+                <Button
+                  style={{ marginLeft: '0.5rem' }}
+                  onClick={() => handleEditMilestone(m)}
+                >
                   Edit
-                </button>
-                <button
+                </Button>
+                <Button
                   style={{ marginLeft: '0.5rem' }}
                   onClick={() => setCopyWizardMilestone(m)}
                 >
                   Copy
-                </button>
-                <button
-                  style={{ marginLeft: '0.5rem', color: 'red' }}
+                </Button>
+                <Button
+                  style={{ marginLeft: '0.5rem', background: 'red', color: 'black' }}
                   onClick={() => handleDeleteMilestone(m)}
                 >
                   Delete
-                </button>
+                </Button>
 
                 {/* Task form */}
                 {showTaskForm === m.id && (
@@ -987,20 +981,20 @@ export default function ScenarioContainer({
                       value={newTask.due_date}
                       onChange={(e) => setNewTask({ ...newTask, due_date: e.target.value })}
                     />
-                    <button onClick={() => addTask(m.id)}>Save Task</button>
+                    <Button onClick={() => addTask(m.id)}>Save Task</Button>
                   </div>
                 )}
               </div>
             );
           })}
 
-          {/*  (B) RENDER THE EDIT MODAL IF showEditModal */}
-            <ScenarioEditModal
-              show={showEditModal}
-              onClose={() => setShowEditModal(false)}
-              scenario={editingScenarioData.scenario}
-              collegeProfile={editingScenarioData.collegeProfile}
-            />
+          {/* (B) Show the scenario edit modal if needed */}
+          <ScenarioEditModal
+            show={showEditModal}
+            onClose={() => setShowEditModal(false)}
+            scenario={editingScenarioData.scenario}
+            collegeProfile={editingScenarioData.collegeProfile}
+          />
 
           {/* The copy wizard if copying a milestone */}
           {copyWizardMilestone && (