diff --git a/src/App.jsx b/src/App.jsx
index 0fa4e90..910845a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -59,7 +59,7 @@ export default function App() {
           <Route path="/" element={<Home />} />
           <Route path="/weather" element={<Weather />} />
             <Route path="/crypto" element={<Crypto />} />
-            <Route path="/space" element={<Space />} />
+            <Route path="/space" element={<Space theme={theme} />} />
             <Route path="/movies" element={<Movies />} />
             <Route path="/recipes" element={<Recipes />} />
             <Route path="/trivia" element={<Trivia />} />
diff --git a/src/pages/Space.jsx b/src/pages/Space.jsx
index d6a9115..1e88f72 100644
--- a/src/pages/Space.jsx
+++ b/src/pages/Space.jsx
@@ -3,8 +3,8 @@
  * ---------------------------------
  * Easy:
  *  - [x] Refresh button / auto-refresh interval selector
- *  - [ ] Show last updated timestamp
- *  - [ ] Style astronauts list with craft grouping
+ *  - [x] Show last updated timestamp
+ *  - [x] Style astronauts list with craft grouping
  *  - [ ] Add loading skeleton or placeholder map area
  * Medium:
  *  - [ ] Integrate Leaflet map w/ marker at ISS coords
@@ -24,13 +24,16 @@ import Card from '../components/Card.jsx';
 import IssMap from '../components/IssMap.jsx';
 import DashboardControls from "../components/DashboardControls.jsx";
 
-export default function Space() {
+
+export default function Space({ theme = 'light' }) {
   const [iss, setIss] = useState(null);
   const [crew, setCrew] = useState([]);
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(false);
   const [lastUpdated, setLastUpdated] = useState(null);
-  
+
+  const isDark = theme === 'dark';
+
   // Fetch both ISS position + crew
   async function fetchData() {
     try {
@@ -56,34 +59,177 @@ export default function Space() {
   useEffect(() => {
     fetchData();
   }, []);
-  
-  //leaflet map component
+
+  // Proper dark/light theme colors
+  const bgColor = isDark ? '#0f172a' : '#f8fafc';
+  const textColor = isDark ? '#f1f5f9' : '#1e293b';
+  const cardBg = isDark ? '#1e293b' : '#ffffff';
+  const subText = isDark ? '#94a3b8' : '#64748b';
+  const accent = isDark ? '#38bdf8' : '#2563eb';
+  const listBg = isDark ? '#334155' : '#f1f5f9';
+  const borderColor = isDark ? '#334155' : '#e2e8f0';
+
   return (
-    <div>
-      <h2>Space & Astronomy</h2>
-      <DashboardControls onRefresh={fetchData} />
+    <div
+      style={{
+        maxWidth: '1000px',
+        margin: '2rem auto',
+        padding: '2rem',
+        backgroundColor: bgColor,
+        borderRadius: '16px',
+        boxShadow: isDark
+          ? '0 4px 10px rgba(0,0,0,0.3)'
+          : '0 4px 10px rgba(0,0,0,0.08)',
+        color: textColor,
+        fontFamily: 'Inter, system-ui, sans-serif',
+        transition: 'background-color 0.3s ease, color 0.3s ease',
+        border: isDark ? '1px solid #334155' : 'none',
+      }}
+    >
+      <h2
+        style={{
+          textAlign: 'center',
+          marginBottom: '1.8rem',
+          fontSize: '2rem',
+          fontWeight: '600',
+          color: accent,
+          letterSpacing: '0.5px',
+        }}
+      >
+        🌌 Space & Astronomy Dashboard
+      </h2>
+
+      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '1.5rem' }}>
+        <DashboardControls onRefresh={fetchData} />
+      </div>
+
       {loading && <Loading />}
       <ErrorMessage error={error} />
-      {iss && (
-        <Card title="ISS Current Location">
-          <p>Latitude: {iss.iss_position.latitude}</p>
-          <p>Longitude: {iss.iss_position.longitude}</p>
-          {lastUpdated && (
-            <p style={{ fontSize: '0.8rem', color: '#666' }}>
-              Last updated: {lastUpdated.toLocaleTimeString()}
-            </p>
-          )}
-          <IssMap latitude={iss.iss_position.latitude} longitude={iss.iss_position.longitude} />
+
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1.5rem',
+          justifyContent: 'center',
+        }}
+      >
+        {iss && (
+          <Card
+            title="🛰️ ISS Current Location"
+            style={{
+              backgroundColor: cardBg,
+              borderRadius: '12px',
+              padding: '1.5rem',
+              boxShadow: isDark
+                ? '0 2px 8px rgba(0,0,0,0.2)'
+                : '0 2px 8px rgba(0,0,0,0.05)',
+              transition: 'all 0.3s ease',
+              border: `1px solid ${borderColor}`,
+            }}
+          >
+            <div style={{ lineHeight: '1.6' }}>
+              <p style={{ color: textColor, margin: '0.5rem 0' }}>
+                <strong>Latitude:</strong> {iss.iss_position.latitude}
+              </p>
+              <p style={{ color: textColor, margin: '0.5rem 0' }}>
+                <strong>Longitude:</strong> {iss.iss_position.longitude}
+              </p>
+              {lastUpdated && (
+                <p style={{ fontSize: '0.9rem', color: subText, margin: '0.5rem 0' }}>
+                  Last updated: {lastUpdated.toLocaleTimeString()}
+                </p>
+              )}
+            </div>
+
+            <div style={{ marginTop: '1rem' }}>
+              <IssMap
+                latitude={iss.iss_position.latitude}
+                longitude={iss.iss_position.longitude}
+              />
+            </div>
+          </Card>
+        )}
+
+        <Card
+          title={`👩‍🚀 Astronauts in Space (${crew.length})`}
+          style={{
+            backgroundColor: cardBg,
+            borderRadius: '12px',
+            padding: '1.5rem',
+            boxShadow: isDark
+              ? '0 2px 8px rgba(0,0,0,0.2)'
+              : '0 2px 8px rgba(0,0,0,0.05)',
+            transition: 'all 0.3s ease',
+            border: `1px solid ${borderColor}`,
+          }}
+        >
+          <ul style={{ 
+            paddingLeft: '0', 
+            listStyleType: 'none', 
+            margin: '0',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.5rem'
+          }}>
+            {crew.map((p) => (
+              <li
+                key={p.name}
+                style={{
+                  backgroundColor: listBg,
+                  padding: '0.75rem 1rem',
+                  borderRadius: '8px',
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  transition: 'all 0.3s ease',
+                  border: `1px solid ${borderColor}`,
+                }}
+              >
+                <span style={{ 
+                  fontWeight: '500', 
+                  color: textColor 
+                }}>
+                  {p.name}
+                </span>
+                <span style={{ 
+                  fontSize: '0.9rem', 
+                  color: subText,
+                  backgroundColor: isDark ? '#475569' : '#e2e8f0',
+                  padding: '0.25rem 0.75rem',
+                  borderRadius: '6px',
+                  fontWeight: '500'
+                }}>
+                  🚀 {p.craft}
+                </span>
+              </li>
+            ))}
+          </ul>
         </Card>
-      )}
-      <Card title={`Astronauts in Space (${crew.length})`}>
-        <ul>
-          {crew.map(p => (
-            <li key={p.name}>{p.name} — {p.craft}</li>
-          ))}
-        </ul>
-      </Card>
-      {/* TODO: Add next ISS pass prediction form */}
+      </div>
+
+      <p
+        style={{
+          marginTop: '2rem',
+          textAlign: 'center',
+          fontSize: '0.9rem',
+          color: subText,
+        }}
+      >
+        Data sourced from{' '}
+        <a
+          href="http://api.open-notify.org"
+          style={{
+            color: accent,
+            textDecoration: 'none',
+            fontWeight: '500',
+          }}
+          onMouseEnter={(e) => e.target.style.textDecoration = 'underline'}
+          onMouseLeave={(e) => e.target.style.textDecoration = 'none'}
+        >
+          Open Notify API
+        </a>
+      </p>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/Weather.jsx b/src/pages/Weather.jsx
index 1aae834..6a68d52 100644
--- a/src/pages/Weather.jsx
+++ b/src/pages/Weather.jsx
@@ -81,10 +81,14 @@ function renderWeatherAnimation(variant) {
     return (
       <div className="rain-layer">
         {Array.from({ length: 12 }).map((_, i) => (
-          <i key={i} className="raindrop" style={{
-            left: `${(i / 12) * 100}%`,
-            animationDelay: `${(i % 5) * 0.15}s`,
-          }} />
+          <i
+            key={i}
+            className="raindrop"
+            style={{
+              left: `${(i / 12) * 100}%`,
+              animationDelay: `${(i % 5) * 0.15}s`,
+            }}
+          />
         ))}
       </div>
     );
@@ -92,20 +96,22 @@ function renderWeatherAnimation(variant) {
 
   if (variant === "snow") {
     return (
-      <>
-        <div className="snow-layer snow-layer--back">
-          {Array.from({ length: 12 }).map((_, i) => (
-            <i key={`back-${i}`} className="snowflake" style={{
+      <div className="snow-layer snow-layer--back">
+        {Array.from({ length: 12 }).map((_, i) => (
+          <i
+            key={`back-${i}`}
+            className="snowflake"
+            style={{
               left: `${(i / 12) * 100}%`,
               animationDelay: `${(i % 6) * 0.4}s`,
-              '--dur': `${10 + (i % 6)}s`,
-              '--drift': `${(i % 2 === 0 ? -40 : 40)}px`,
+              "--dur": `${10 + (i % 6)}s`,
+              "--drift": `${(i % 2 === 0 ? -40 : 40)}px`,
               width: `${8 + (i % 3) * 4}px`,
               height: `${8 + (i % 3) * 4}px`,
-            }} />
-          ))}
-        </div>
-      </>
+            }}
+          />
+        ))}
+      </div>
     );
   }
 
@@ -234,59 +240,109 @@ export default function Weather() {
         </form>
 
         <div className="dev-tools">
-          <button onClick={handleClearCache}>Clear Cache</button>
-          <button onClick={handleShowCacheStats}>Cache Stats</button>
-          <button onClick={() => setUnit(unit === "C" ? "F" : "C")}>
+          <button onClick={handleClearCache} className="dev-btn">
+            Clear Cache
+          </button>
+          <button onClick={handleShowCacheStats} className="dev-btn">
+            Cache Stats
+          </button>
+          <button
+            onClick={() => setUnit(unit === "C" ? "F" : "C")}
+            className="dev-btn"
+          >
             Switch to °{unit === "C" ? "F" : "C"}
           </button>
         </div>
 
         {loading && <Loading />}
-        {error && <ErrorMessage message={error.message} onRetry={() => fetchWeather(city)} />}
+        {error && (
+          <ErrorMessage
+            message={error.message}
+            onRetry={() => fetchWeather(city)}
+          />
+        )}
 
         {data && !loading && (
           <div className="dashboard-grid">
-            <Card title={`Current in ${city}`}>
-              {current && (
-                <>
-                  {getIconUrl(current.weatherIconUrl) && (
-                    <img
-                      src={getIconUrl(current.weatherIconUrl)}
-                      alt="Weather icon"
-                      style={{ width: 48, height: 48 }}
-                    />
-                  )}
-                  <p>
-                    Temperature: {displayTemp(Number(current.temp_C))}°{unit}
-                  </p>
-                  <p>Feels Like: {displayTemp(Number(current.FeelsLikeC))}°{unit}</p>
-                  <p>Wind: {current.windspeedKmph} km/h</p>
-                  <p>Humidity: {current.humidity}%</p>
-                  <p>Desc: {current.weatherDesc?.[0]?.value}</p>
-                </>
-              )}
+            {/* Current Weather */}
+            <Card title="Current Weather" size="large">
+              <h2>{data.nearest_area?.[0]?.areaName?.[0]?.value || city}</h2>
+              <p style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+                {current && getIconUrl(current.weatherIconUrl) && (
+                  <img
+                    src={getIconUrl(current.weatherIconUrl)}
+                    alt={current.weatherDesc?.[0]?.value || "weather icon"}
+                    style={{ width: 48, height: 48, objectFit: "contain" }}
+                  />
+                )}
+                <span>
+                  <strong>Temperature:</strong>{" "}
+                  {displayTemp(Number(current.temp_C))}°{unit}
+                </span>
+              </p>
+              <p>
+                <strong>Humidity:</strong> {current.humidity}%
+              </p>
+              <p>
+                <strong>Desc:</strong> {current.weatherDesc?.[0]?.value}
+              </p>
             </Card>
 
+            {/* 3-Day Forecast */}
             {forecast.map((day, i) => {
-              const badge = getBadgeStyle(day.hourly?.[0]?.weatherDesc?.[0]?.value);
+              const condition =
+                day.hourly?.[0]?.weatherDesc?.[0]?.value || "Clear";
+              const badge = getBadgeStyle(condition);
+
               return (
                 <Card key={i} title={i === 0 ? "Today" : `Day ${i + 1}`}>
+                  {day.hourly?.[0] &&
+                    getIconUrl(day.hourly?.[0]?.weatherIconUrl) && (
+                      <div style={{ marginTop: 8 }}>
+                        <img
+                          src={getIconUrl(day.hourly?.[0]?.weatherIconUrl)}
+                          alt={
+                            day.hourly?.[0]?.weatherDesc?.[0]?.value ||
+                            "forecast icon"
+                          }
+                          style={{ width: 40, height: 40, objectFit: "contain" }}
+                          onError={(e) =>
+                            (e.currentTarget.style.display = "none")
+                          }
+                        />
+                      </div>
+                    )}
+
                   <div
                     style={{
-                      backgroundColor: badge.color,
-                      borderRadius: "8px",
-                      padding: "4px 8px",
-                      fontSize: "12px",
-                      fontWeight: "bold",
-                      color: "#333",
-                      marginBottom: "8px",
+                      display: "flex",
+                      gap: "8px",
+                      marginTop: "17px",
                     }}
                   >
-                    {badge.label}
+                    <strong>Avg Temp:</strong>{" "}
+                    {displayTemp(Number(day.avgtempC))}°{unit}
+                    <div
+                      style={{
+                        backgroundColor: badge.color,
+                        borderRadius: "8px",
+                        padding: "4px 8px",
+                        display: "inline-block",
+                        fontSize: "12px",
+                        fontWeight: "bold",
+                        marginBottom: "8px",
+                        color: "#333",
+                      }}
+                    >
+                      {badge.label}
+                    </div>
                   </div>
-                  <p>Avg Temp: {displayTemp(Number(day.avgtempC))}°{unit}</p>
-                  <p>Sunrise: {day.astronomy?.[0]?.sunrise}</p>
-                  <p>Sunset: {day.astronomy?.[0]?.sunset}</p>
+                  <p>
+                    <strong>Sunrise:</strong> {day.astronomy?.[0]?.sunrise}
+                  </p>
+                  <p>
+                    <strong>Sunset:</strong> {day.astronomy?.[0]?.sunset}
+                  </p>
                 </Card>
               );
             })}
@@ -295,13 +351,15 @@ export default function Weather() {
 
         {loading && (
           <div className="grid">
-            {Array(3).fill(null).map((_, i) => (
-              <Card key={i} title={<Skeleton width="80px" />}>
-                <Skeleton width="40px" />
-                <Skeleton width="60px" />
-                <Skeleton width="50px" />
-              </Card>
-            ))}
+            {Array(3)
+              .fill(null)
+              .map((_, i) => (
+                <Card key={i} title={<Skeleton width="80px" />}>
+                  <Skeleton width="40px" />
+                  <Skeleton width="60px" />
+                  <Skeleton width="50px" />
+                </Card>
+              ))}
           </div>
         )}
       </div>