From beff49a3ef362f2d1b1a61b807ed2c8e0df5becf Mon Sep 17 00:00:00 2001
From: Dylan De Faoite <dylanseandefaoite@gmail.com>
Date: Wed, 29 Jul 2026 22:21:45 +0100
Subject: [PATCH] rename Box to Card

---
 ethos.md                             | 138 +++++++++++++++++++++++++++
 frontend/src/components/Box.tsx      |  14 ---
 frontend/src/components/Card.tsx     |  14 +++
 frontend/src/components/Sidebar.tsx  |  16 ++--
 frontend/src/index.css               |   1 +
 frontend/src/layouts/MainLayout.tsx  |   2 +-
 frontend/src/pages/ClipEdit.tsx      |  14 +--
 frontend/src/pages/ClipUpload.tsx    |   6 +-
 frontend/src/pages/EditClip.tsx      |   6 +-
 frontend/src/pages/EditVod.tsx       |   6 +-
 frontend/src/pages/Home.tsx          |  21 ++--
 frontend/src/pages/MediaPlayer.tsx   |   6 +-
 frontend/src/pages/Profile.tsx       |  10 +-
 frontend/src/pages/StreamControl.tsx |  22 ++---
 14 files changed, 210 insertions(+), 66 deletions(-)
 create mode 100644 ethos.md
 delete mode 100644 frontend/src/components/Box.tsx
 create mode 100644 frontend/src/components/Card.tsx

diff --git a/ethos.md b/ethos.md
new file mode 100644
index 0000000..a9540a4
--- /dev/null
+++ b/ethos.md
@@ -0,0 +1,138 @@
+# The VoD System — Frontend Design Reference
+
+Warm, editorial, low-key. Soft shadows instead of borders, cream surfaces, one terracotta and one olive accent. No dark-dashboard chrome.
+
+---
+
+## 1. Typography
+
+| Role | Family | Usage |
+| --- | --- | --- |
+| Display / headings | **Newsreader** (serif, weight 400) | Page titles, card headings, item titles, greeting, logo wordmark. Always regular weight — never bold. |
+| UI / body | **IBM Plex Sans** (400, 500) | Nav, labels, buttons, body copy, table cells. 500 only for the active nav item. |
+| Data / mono | **IBM Plex Mono** (400, 500) | Timecodes, stream key, ingest URL, durations, bitrates, file facts, kickers, job stages. |
+
+Fallbacks: `system-ui, sans-serif` for Plex Sans; `serif` for Newsreader; `monospace` for Plex Mono.
+
+### Type scale
+
+| Element | Size | Family | Notes |
+| --- | --- | --- | --- |
+| Greeting (dashboard h1) | 40px | Newsreader | `letter-spacing: -0.015em` |
+| Page h1 | 36px | Newsreader | -0.015em |
+| Detail title | 31px | Newsreader | -0.015em |
+| Drop-zone headline | 25px | Newsreader | |
+| Section h2 | 23px | Newsreader | |
+| Logo wordmark | 22px | Newsreader | -0.01em |
+| Card heading (in-panel) | 20–22px | Newsreader | |
+| Status headline | 27px | Newsreader | line-height 1.25 |
+| VOD tile title | 17.5–18px | Newsreader | line-height 1.3 |
+| Big metric | 21px | Plex Mono | elapsed, marker count, bitrate |
+| Range length | 15px | Plex Mono | |
+| Body paragraph | 14.5px | Plex Sans | line-height 1.65, `text-wrap: pretty`, max 62ch |
+| Primary button | 13.5–14px | Plex Sans | |
+| Field value | 13.5–14px | Plex Sans / Mono | mono for timecodes and sizes |
+| Table cell | 13.5px | Plex Sans | mono for numeric columns |
+| Clip tile title | 13.5px | Plex Sans | |
+| Meta line | 12–13px | Plex Sans | muted ink |
+| Field label | 11.5px | Plex Sans | muted ink |
+| Kicker / eyebrow | 10.5–11px | Plex Mono | `letter-spacing: 0.10–0.14em`, uppercase |
+| Ruler / tick caption | 10–10.5px | Plex Mono | |
+
+---
+
+## 2. Colour
+
+### Surfaces
+| Token | Hex | Where |
+| --- | --- | --- |
+| Canvas | `#F7F4EE` | Page background |
+| Sidebar | `#F2EEE6` | Nav column and collapsed rail |
+| Card | `#FDFBF7` | Cards, library tiles, active nav pill |
+| Field well | `#F4F0E8` | Inputs, credential wells, timeline track |
+| Muted panel | `#F1ECE3` / `#F1EDE4` | Secondary buttons, "how it works", clip-cutter panel |
+| Drop zone (idle) | `#F9F6EF` | Upload empty state |
+| Armed / selected | `#F6EFE6` | Selected marker row, filled range card |
+| Live card | `#F0EBE1` | Dashboard status block when live |
+| Player body | `#2B2620` | Video chrome, also the dark button |
+| Player stripes | `#3A342C` / `#332E27` | Placeholder frame texture |
+
+### Ink
+| Token | Hex | Where |
+| --- | --- | --- |
+| Primary | `#2B2620` | Headings, metrics |
+| Strong | `#35302A` | Field values, tile titles |
+| Body | `#554D44` | Paragraph copy |
+| Control label | `#4A423A` | Secondary button text |
+| Secondary | `#6E6559` | Supporting copy |
+| Table value | `#7A7166` | History rows |
+| Muted | `#9A9084` | Labels, meta, kickers |
+| Faint | `#A79C8E` | Mono captions, ruler ticks, hints |
+| On dark | `#FBF8F2` | Text on player / dark button |
+| On accent | `#FDFBF7` | Text on terracotta / olive |
+
+### Accents
+| Token | Hex | Where |
+| --- | --- | --- |
+| Terracotta | `#A85A38` | Logo mark, primary CTA, links, marker timecodes, playheads |
+| Terracotta hover | `#94492A` | Primary button hover |
+| Terracotta light | `#C87A52` | Progress bars, scrubber fill, selected marker ring |
+| Terracotta disabled | `#C9AE9C` | "Waiting for a file" button |
+| Olive | `#6E7A50` | Clip actions, trim in/out handles |
+| Olive hover | `#5D6843` | |
+| Olive light | `#8A9668` | Completed job bar |
+| Live red | `#B5432E` | Live dot and "LIVE NOW" label |
+
+### Lines, chips, placeholders
+| Token | Hex | Where |
+| --- | --- | --- |
+| Hairline | `#F0EBE2` | Row dividers (1px) |
+| Chip fill | `#EAE3D7`, `#EFE9DE`, `#E4DDD0` | Progress track, toggles, nav-hide button |
+| Chip hover | `#E7E0D2`, `#DAD1C0`, `#EAE4D9` | |
+| Drop-zone ring | `#E2DACB` | `inset 0 0 0 1.5px` |
+| Inactive marks | `#DED7CA`, `#C4BAA9` | Unchecked boxes, unselected ticks |
+| Zoom window outline | `#8E8577` | Overview strip frame |
+| VOD thumbnail | `#E3DACB` / `#DAD0BF` | 135° stripes, 9px |
+| Clip thumbnail | `#DFE0D2` / `#D6D8C7` | 135° stripes, 9px |
+| Avatar | `#D9C9AE` on `#5C4A32` | Google account chip |
+
+---
+
+## 3. Elevation & shape
+
+- **Card**: `0 1px 2px rgba(60,48,32,.05), 0 10px 26px -18px rgba(60,48,32,.35)`
+- **Card hover**: `0 2px 4px rgba(60,48,32,.07), 0 18px 34px -18px rgba(60,48,32,.45)`
+- **Panel (heavier)**: `0 1px 2px rgba(60,48,32,.05), 0 16px 36px -22px rgba(60,48,32,.3)`
+- **Player**: `0 1px 2px rgba(60,48,32,.08), 0 22px 46px -26px rgba(60,48,32,.5)`
+- **Terracotta button**: `0 1px 2px rgba(90,40,20,.2), 0 12px 22px -14px rgba(90,40,20,.55)`
+- **Olive button**: `0 1px 2px rgba(50,60,30,.18), 0 10px 20px -14px rgba(50,60,30,.55)`
+- **Inset ring** (used instead of borders): `inset 0 0 0 1px rgba(60,48,32,.08)`
+
+Radii: 16px hero/status blocks · 15px panels · 13px tiles · 12px thumbnails/player · 10px inputs & dark buttons · 9px buttons, nav pills, logo mark · 8px chips and fields · 5–6px overlay badges · 50% avatars and play button.
+
+Media ratios: 16/9 VOD thumbnails and player · 4/3 clip thumbnails · 16/7 upload drop zone.
+
+---
+
+## 4. Layout
+
+- Shell: `252px` sidebar + fluid main; collapsed rail is `62px`.
+- Main padding `40px 52px 72px`, content max-width `1060–1180px`.
+- Library grids: 3 columns for VODs (gap 22px), 4 for clips (gap 18–20px).
+- Detail and stream pages: content column + `330–340px` sticky side panel, gap 26px.
+- Spacing rhythm: 26–34px between sections, 14–20px inside cards, 6–10px label-to-field. Always flex/grid with `gap`.
+
+---
+
+## 5. Motion & state
+
+- `livePulse` — 2.2s ease-in-out infinite opacity/scale pulse, live dot only. Nothing else animates decoratively.
+- Hover: background shifts one step darker within the same family; cards deepen their shadow. No transforms.
+- Selection: `#F6EFE6` fill plus a `1.5px` terracotta inset ring.
+- Progress is always a bar with a stage word and remaining time (`queued → reading source → encoding → writing file → complete`) — never a spinner.
+
+---
+
+## 6. Copy tone
+
+Lowercase mono for machine facts, sentence case for everything else. Personal and specific ("Cat walks across the patch bay"), never marketing voice. Durations as `h:mm:ss`, timecodes as `hh:mm:ss`, sizes in MB/GB.
diff --git a/frontend/src/components/Box.tsx b/frontend/src/components/Box.tsx
deleted file mode 100644
index 31a3872..0000000
--- a/frontend/src/components/Box.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import clsx from "clsx";
-
-type Props = {
-    children: React.ReactNode;
-    className?: string;
-};
-
-const Box = ({ children, className }: Props) => (
-    <div className={clsx("bg-white border border-gray-200 shadow-sm rounded-lg", className)}>
-        {children}
-    </div>
-);
-
-export default Box;
diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx
new file mode 100644
index 0000000..b7ffc48
--- /dev/null
+++ b/frontend/src/components/Card.tsx
@@ -0,0 +1,14 @@
+import clsx from "clsx";
+
+type Props = {
+    children: React.ReactNode;
+    className?: string;
+};
+
+const Card = ({ children, className }: Props) => (
+    <div className={clsx("bg-card shadow-md rounded-lg", className)}>
+        {children}
+    </div>
+);
+
+export default Card;
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 2b4409a..2d804ef 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import SidebarButton from "./buttons/SidebarButton.tsx";
-import { Plus, Film, Home, Video, Radio, PlaySquareIcon} from 'lucide-react';
+import { Plus, Film, Home, Video, Radio } from 'lucide-react';
 import {useAuth} from "../utils/AuthContext.tsx";
 import {type CredentialResponse, GoogleLogin} from "@react-oauth/google";
 import {getUser, login, logout} from "../utils/api/users.ts";
@@ -9,7 +9,7 @@ type props = {
     className?: string
 }
 
-const Divider = () => <hr className="my-1.5 mx-2 border-hover" />;
+const Divider = () => <hr className="w-full my-1.5 mx-2 border-hover" />;
 
 const Sidebar = ({ className }: props) => {
     const { user, setUser } = useAuth()
@@ -40,21 +40,19 @@ const Sidebar = ({ className }: props) => {
     }
 
     return (
-        <aside className={clsx("h-screen flex flex-col bg-sidebar border-r border-hairline p-2 items-center", className)}>
-            <div className="pb-4 flex flex-row justify-between items-center">
-                <PlaySquareIcon className="text-terracotta" size={40} />
-                <h2 className={"font-heading text-xl"}>The VoD System</h2>
-            </div>
+        <aside className={clsx("h-screen flex flex-col bg-sidebar border-r border-hairline p-2 items-center gap-1", className)}>
+            <h2 className={"font-heading text-3xl"}>The VoD System</h2>
 
             <nav className="flex flex-col flex-1 items-center">
+                <Divider />
                 <div className="flex flex-col gap-0.5 w-full">
                     <SidebarButton url="/" logo={<Home size={18}/>} label="Home" />
-                    <SidebarButton url="/create" logo={<Plus size={18}/>} label="Create Clip" />
+                    <SidebarButton url="/create" logo={<Plus size={18}/>} label="Upload" />
                 </div>
+                <Divider />
 
                 {user && (
                     <div className="flex flex-col gap-0.5 w-full">
-                        <Divider />
                         <div>
                             <SidebarButton url="/stream" logo={<Radio size={18}/>} label="Stream" />
                             <SidebarButton url="/my-clips" logo={<Film size={18}/>} label="Clips" />
diff --git a/frontend/src/index.css b/frontend/src/index.css
index fe6a963..47bc54c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -13,6 +13,7 @@
     --color-card: #FDFBF7;
     --color-accent: #A85A38;
     --color-accent-hover: #94492A;
+    --color-live-card: #F0EBE1;
 
     /* Colour Fonts */
     --color-text-primary: #2B2620;
diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
index 37c2940..87425bd 100644
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/frontend/src/layouts/MainLayout.tsx
@@ -7,7 +7,7 @@ const MainLayout = () => {
     const [sidebarToggled] = useState(false);
 
     return (
-        <div className={`transition-all duration-300 grid h-screen ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[240px_1fr]"} grid-rows-[auto_1fr]`}>
+        <div className={`transition-all duration-300 grid h-screen ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[280px_1fr]"} grid-rows-[auto_1fr]`}>
             <Sidebar
                 className={`row-span-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${sidebarToggled ? "-translate-x-full" : "translate-x-0"}`}/>
             <div>
diff --git a/frontend/src/pages/ClipEdit.tsx b/frontend/src/pages/ClipEdit.tsx
index cc0f4e4..084ea0d 100644
--- a/frontend/src/pages/ClipEdit.tsx
+++ b/frontend/src/pages/ClipEdit.tsx
@@ -8,7 +8,7 @@ import ExportWidget from "../components/video/ExportWidget.tsx";
 import { compress } from "../utils/api/media"
 import { getJob } from "../utils/api/jobs"
 import type { VideoMetadata } from "../utils/types.ts";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import MetadataBox from "../components/video/MetadataBox.tsx";
 
 const API_URL = import.meta.env.VITE_API_URL;
@@ -132,13 +132,13 @@ const ClipEdit = () => {
                 onLoadedMetadata={handleVideoMetadataLoaded}
             />
 
-            <Box className={"w-4/5 h-full m-auto"}>
+            <Card className={"w-4/5 h-full m-auto"}>
                 <MetadataBox setMetadata={setOutputMetadata} />
                 <ConfigBox setMetadata={setOutputMetadata} />
-            </Box>
+            </Card>
 
             {metadata &&
-                <Box className={"mt-4 p-5"}>
+                <Card className={"mt-4 p-5"}>
                     <Playbar
                         video={videoRef.current}
                         videoMetadata={metadata}
@@ -166,10 +166,10 @@ const ClipEdit = () => {
                             {error}
                         </div>
                     )}
-                </Box>
+                </Card>
             }
 
-            <Box className={"flex flex-col gap-2 w-4/5 m-auto mt-4 p-5"}>
+            <Card className={"flex flex-col gap-2 w-4/5 m-auto mt-4 p-5"}>
                 <ExportWidget
                     dataSend={sendData}
                     handleDownload={handleDownload}
@@ -177,7 +177,7 @@ const ClipEdit = () => {
                     progress={progress}
                     uploading={uploading}
                 />
-            </Box>
+            </Card>
         </div>
     );
 };
diff --git a/frontend/src/pages/ClipUpload.tsx b/frontend/src/pages/ClipUpload.tsx
index cf4cbb4..6ed1da8 100644
--- a/frontend/src/pages/ClipUpload.tsx
+++ b/frontend/src/pages/ClipUpload.tsx
@@ -1,7 +1,7 @@
 import {useState} from "react";
 import {useNavigate} from "react-router-dom";
 import BlueButton from "../components/buttons/BlueButton.tsx";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 
 const ClipUpload = () => {
     const [file, setFile] = useState<File | null>(null);
@@ -18,7 +18,7 @@ const ClipUpload = () => {
 
     return (
         <div className="flex items-start justify-center p-8 min-h-full">
-            <Box className="flex flex-col gap-4 p-6 w-full max-w-md">
+            <Card className="flex flex-col gap-4 p-6 w-full max-w-md">
                 <h1 className="text-lg font-semibold text-gray-900">Upload Clip</h1>
 
                 <input
@@ -34,7 +34,7 @@ const ClipUpload = () => {
                 <BlueButton onClick={press}>Upload</BlueButton>
 
                 {error && <p className="text-sm text-red-500 text-center">{error}</p>}
-            </Box>
+            </Card>
         </div>
     )
 };
diff --git a/frontend/src/pages/EditClip.tsx b/frontend/src/pages/EditClip.tsx
index dc5f8d2..398270e 100644
--- a/frontend/src/pages/EditClip.tsx
+++ b/frontend/src/pages/EditClip.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft, Check } from "lucide-react";
 import { getClipById, patchClip } from "../utils/api/clips.ts";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import BlueButton from "../components/buttons/BlueButton.tsx";
 
 const inputClass = "border border-gray-300 bg-white rounded-md w-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors";
@@ -61,7 +61,7 @@ const EditClip = () => {
             {loading ? (
                 <div className="text-gray-400 text-sm">Loading...</div>
             ) : (
-                <Box className="p-6 flex flex-col gap-4">
+                <Card className="p-6 flex flex-col gap-4">
                     <div className="flex flex-col gap-1.5">
                         <label className="text-sm font-medium text-gray-700">Title</label>
                         <input
@@ -99,7 +99,7 @@ const EditClip = () => {
                             Cancel
                         </button>
                     </div>
-                </Box>
+                </Card>
             )}
         </div>
     );
diff --git a/frontend/src/pages/EditVod.tsx b/frontend/src/pages/EditVod.tsx
index 89c1cd9..2d17afe 100644
--- a/frontend/src/pages/EditVod.tsx
+++ b/frontend/src/pages/EditVod.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft, Check } from "lucide-react";
 import { getVodById, patchVod } from "../utils/api/vods.ts";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import BlueButton from "../components/buttons/BlueButton.tsx";
 
 const inputClass = "border border-gray-300 bg-white rounded-md w-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors";
@@ -61,7 +61,7 @@ const EditVod = () => {
             {loading ? (
                 <div className="text-gray-400 text-sm">Loading...</div>
             ) : (
-                <Box className="p-6 flex flex-col gap-4">
+                <Card className="p-6 flex flex-col gap-4">
                     <div className="flex flex-col gap-1.5">
                         <label className="text-sm font-medium text-gray-700">Title</label>
                         <input
@@ -99,7 +99,7 @@ const EditVod = () => {
                             Cancel
                         </button>
                     </div>
-                </Box>
+                </Card>
             )}
         </div>
     );
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 870cec6..e527150 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,6 +1,7 @@
 import {useAuth} from "../utils/AuthContext.tsx";
 import NoAccessPage from "../components/NoAccessPage.tsx";
 import {Link} from "react-router-dom";
+import Card from "../components/Card.tsx";
 
 type TimeOfDay = "morning" | "afternoon" | "evening" | "night";
 
@@ -43,7 +44,6 @@ function getGreetingSubtext(date: Date = new Date()): string {
     return options[Math.floor(Math.random() * options.length)];
 }
 
-
 const Home = () => {
     const { user } = useAuth();
     const now = new Date();
@@ -59,19 +59,26 @@ const Home = () => {
     }
 
     return (
-        <div>
-            <div className={"p-10 flex flex-row justify-between"}>
+        <div className={"w-10/12 m-auto pt-10"}>
+            <div className={"flex flex-row justify-between items-start pb-10"}>
                 <div>
                     <p className={"font-data text-faint-mono text-sm tracking-widest"}>{formatted.toLocaleUpperCase()}</p>
                     <h1 className={"font-heading font text-5xl text-text-strong tracking-[-0.015em]"}>{getGreetingSubtext(new Date())}</h1>
                 </div>
 
-                <Link to={"/stream"}>
-                    <button className={"bg-accent rounded-md text-hover text-sm p-1 pl-2 pr-2 hover:bg-accent-hover shadow-md"}>
-                        Open Stream Panel
-                    </button>
+                <Link to={"/stream"} className={"bg-accent rounded-md text-hover text-sm p-2 hover:bg-accent-hover shadow-md"}>
+                     Open Stream Panel
                 </Link>
             </div>
+
+            <Card className={"bg-live-card pb-10"}>
+                <p></p>
+            </Card>
+
+            <div>
+                <h2 className={"font-heading text-2xl"}>Recent VoDs</h2>
+            </div>
+
         </div>
     );
 };
diff --git a/frontend/src/pages/MediaPlayer.tsx b/frontend/src/pages/MediaPlayer.tsx
index f1dbed6..dda1dac 100644
--- a/frontend/src/pages/MediaPlayer.tsx
+++ b/frontend/src/pages/MediaPlayer.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft, Lock, Maximize, Minimize, Pause, Play, Volume1, Volume2, VolumeX } from "lucide-react";
 import { AuthError } from "../utils/api/client.ts";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import { dateToTimeAgo, formatTime, stringToDate } from "../utils/utils.ts";
 
 // Both VoDs and clips share the same on-screen shape.
@@ -339,10 +339,10 @@ const MediaPlayer = ({ noun, getMediaUrl, fetchDetails }: MediaPlayerProps) => {
                 </div>
             )}
 
-            <Box className="p-4 flex-shrink-0">
+            <Card className="p-4 flex-shrink-0">
                 <p className="text-xl font-semibold text-gray-900">{item?.title || "(No Title)"}</p>
                 <p className="text-sm text-gray-500 mt-1">{timeAgo}</p>
-            </Box>
+            </Card>
         </div>
     );
 };
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 156a560..7fe802d 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { Eye, EyeOff, Copy, Check } from "lucide-react";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import { getUser } from "../utils/api/users.ts";
 import type { User } from "../utils/types.ts";
 import { formatLocalDate } from "../utils/utils.ts";
@@ -33,7 +33,7 @@ const Profile = () => {
         <div className="px-8 py-10 max-w-2xl mx-auto">
             <h1 className="text-2xl font-semibold text-gray-900 mb-6">Profile</h1>
 
-            <Box className="p-6 mb-4 flex items-center gap-5">
+            <Card className="p-6 mb-4 flex items-center gap-5">
                 <img
                     src={user.profilePictureUrl}
                     referrerPolicy="no-referrer"
@@ -48,9 +48,9 @@ const Profile = () => {
                         Member since {formatLocalDate(user.createdAt)}
                     </p>
                 </div>
-            </Box>
+            </Card>
 
-            <Box className="p-6">
+            <Card className="p-6">
                 <h2 className="text-sm font-semibold text-gray-800 mb-1">Stream Key</h2>
                 <p className="text-sm text-gray-500 mb-4">
                     Use this key in OBS or any RTMP-compatible software to start streaming.
@@ -78,7 +78,7 @@ const Profile = () => {
                         {copied ? <Check size={16} className="text-green-600" /> : <Copy size={16} />}
                     </button>
                 </div>
-            </Box>
+            </Card>
         </div>
     );
 };
diff --git a/frontend/src/pages/StreamControl.tsx b/frontend/src/pages/StreamControl.tsx
index 480ee20..5d6f2af 100644
--- a/frontend/src/pages/StreamControl.tsx
+++ b/frontend/src/pages/StreamControl.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Radio, Check, Bookmark, Scissors, Film, Activity, Loader2, X } from "lucide-react";
 import clsx from "clsx";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import BlueButton from "../components/buttons/BlueButton.tsx";
 import { getUser } from "../utils/api/users.ts";
 import { getCurrentStream, getStreamHistory } from "../utils/api/stream.ts";
@@ -244,7 +244,7 @@ const StreamControl = () => {
             <h1 className="text-2xl font-semibold text-gray-900">Stream Control</h1>
 
             {/* Hero status bar */}
-            <Box className={clsx(
+            <Card className={clsx(
                 "p-6 flex items-center justify-between gap-6 border-l-4",
                 isStreaming ? "border-l-red-500" : "border-l-gray-200"
             )}>
@@ -271,12 +271,12 @@ const StreamControl = () => {
                 ) : (
                     <Radio size={28} className="text-gray-200" />
                 )}
-            </Box>
+            </Card>
 
             {isStreaming && (
                 <>
                     {/* Quick mark toolbar */}
-                    <Box className="p-4 flex flex-col gap-3">
+                    <Card className="p-4 flex flex-col gap-3">
                         <div className="flex items-center gap-3">
                             <Bookmark size={18} className="text-accent flex-shrink-0" />
                             <input
@@ -328,11 +328,11 @@ const StreamControl = () => {
                                 })}
                             </div>
                         )}
-                    </Box>
+                    </Card>
 
                     {/* Forefront actions */}
                     <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 items-stretch">
-                        <Box className="p-6 flex flex-col gap-3">
+                        <Card className="p-6 flex flex-col gap-3">
                             <CardHeader icon={Scissors} title="Clip the last few seconds" />
                             <div className="flex flex-col gap-1.5">
                                 <label className={labelClass}>Duration (seconds)</label>
@@ -348,9 +348,9 @@ const StreamControl = () => {
                             <textarea placeholder="Description" value={clipDescription} onChange={(e) => setClipDescription(e.target.value)} rows={2} className={inputClass + " resize-none"} />
                             {clipError && <p className="text-sm text-red-500">{clipError}</p>}
                             <BlueButton onClick={handleClip} className="self-start mt-auto">Clip</BlueButton>
-                        </Box>
+                        </Card>
 
-                        <Box className="p-6 flex flex-col gap-3">
+                        <Card className="p-6 flex flex-col gap-3">
                             <CardHeader icon={Film} title="Save between two markers" accent="accent" />
                             {markers.length < 2 ? (
                                 <p className="text-sm text-gray-400">Add at least two markers above to save a section between them.</p>
@@ -377,10 +377,10 @@ const StreamControl = () => {
                                 </>
                             )}
                             <BlueButton onClick={handleSaveByMarkers} disabled={markers.length < 2} className="self-start mt-auto">Save</BlueButton>
-                        </Box>
+                        </Card>
                     </div>
 
-                    <Box className="p-5 flex flex-col gap-3">
+                    <Card className="p-5 flex flex-col gap-3">
                         <CardHeader icon={Activity} title="Recent actions" />
                         {jobs.length === 0 ? (
                             <p className="text-sm text-gray-400">Clip and save actions will show up here.</p>
@@ -389,7 +389,7 @@ const StreamControl = () => {
                                 {jobs.map((job) => <JobStatus key={job.uuid} job={job} />)}
                             </div>
                         )}
-                    </Box>
+                    </Card>
                 </>
             )}
         </div>