From 91c32593311295821eaf1576d918dd92a622ea26 Mon Sep 17 00:00:00 2001
From: Dylan De Faoite <dylanseandefaoite@gmail.com>
Date: Sat, 20 Jun 2026 12:52:51 +0100
Subject: [PATCH] feat(frontend): restyle and design frontend

---
 frontend/src/components/Box.tsx               |  2 +-
 frontend/src/components/Dropdown.tsx          |  8 +-
 frontend/src/components/Selector.tsx          |  5 +-
 frontend/src/components/Sidebar.tsx           | 53 ++++-------
 frontend/src/components/Topbar.tsx            |  2 +-
 .../src/components/buttons/BlueButton.tsx     |  2 +-
 .../src/components/buttons/MenuButton.tsx     |  2 +-
 .../src/components/buttons/SidebarButton.tsx  | 14 +--
 frontend/src/components/video/ConfigBox.tsx   | 36 +++-----
 .../src/components/video/ExportWidget.tsx     | 24 ++---
 frontend/src/components/video/MetadataBox.tsx | 10 +-
 frontend/src/components/video/Playbar.tsx     |  2 +-
 frontend/src/components/video/VideoCard.tsx   | 35 ++-----
 frontend/src/index.css                        | 91 ++++---------------
 frontend/src/layouts/MainLayout.tsx           |  2 +-
 frontend/src/pages/ClipEdit.tsx               |  4 +-
 frontend/src/pages/ClipUpload.tsx             | 42 ++++-----
 frontend/src/pages/Home.tsx                   | 25 +++--
 frontend/src/pages/MyClips.tsx                | 33 ++++---
 frontend/src/pages/Profile.tsx                | 22 ++---
 frontend/src/pages/VideoPlayer.tsx            | 37 +++++---
 21 files changed, 185 insertions(+), 266 deletions(-)

diff --git a/frontend/src/components/Box.tsx b/frontend/src/components/Box.tsx
index c0d857f..55536fa 100644
--- a/frontend/src/components/Box.tsx
+++ b/frontend/src/components/Box.tsx
@@ -7,7 +7,7 @@ type props = {
 
 const Box = ({children, className}: props) => {
     return (
-        <div className={clsx("bg-gray-200 shadow-lg rounded-lg", className)}>
+        <div className={clsx("bg-white border border-gray-200 shadow-sm rounded-lg", className)}>
             { children }
         </div>
     )
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index 4be7738..b35b0b0 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -9,7 +9,7 @@ type DropdownItemProps = {
 
 const DropdownItem = ({ item, onClick, className }: DropdownItemProps) => {
     return (
-        <li className={clsx(className, "cursor-pointer hover:bg-gray-100 px-4 py-2 align-middle")}
+        <li className={clsx("cursor-pointer hover:bg-gray-50 px-3 py-2 text-sm text-gray-700", className)}
             onClick={() => onClick(item)}
         >
             {item}
@@ -49,12 +49,12 @@ const Dropdown = ({ label, children, className }: DropdownProps) => {
             ref={ref}>
             <button
                 onClick={toggleDropdown}
-                className={"inline-flex justify-between w-full rounded-xl px-4 py-2 bg-white text-sm font-medium text-gray-600 hover:bg-gray-50"}
+                className="inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors duration-150"
             >
                 {label}
             </button>
             {isOpen && (
-                <ul className={"absolute w-30 origin-top-right rounded-md bg-white shadow-lg font-medium"}>
+                <ul className="absolute right-0 mt-1 w-36 origin-top-right rounded-lg bg-white border border-gray-200 shadow-md z-50 py-1 overflow-hidden">
                     {children}
                 </ul>
             )}
@@ -64,4 +64,4 @@ const Dropdown = ({ label, children, className }: DropdownProps) => {
 
 
 
-export { Dropdown, DropdownItem };
\ No newline at end of file
+export { Dropdown, DropdownItem };
diff --git a/frontend/src/components/Selector.tsx b/frontend/src/components/Selector.tsx
index 7792c7a..6e8cd8b 100644
--- a/frontend/src/components/Selector.tsx
+++ b/frontend/src/components/Selector.tsx
@@ -8,11 +8,10 @@ type props = {
 const Selector = ({children, label}: props) => {
     return (
         <div className={"flex items-center gap-2"}>
-            <label
-                className={"w-full"}>
+            <label className={"w-full text-sm text-gray-600"}>
                 { label }
             </label>
-            <div className={"w-px h-6 bg-gray-400 mx-3"} />
+            <div className={"w-px h-5 bg-gray-200 mx-2"} />
             {children}
         </div>
     )
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 0c9c121..48f547b 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,7 +1,6 @@
 import clsx from "clsx";
 import SidebarButton from "./buttons/SidebarButton.tsx";
 import { Plus, Film, Home, User as UserIcon } from 'lucide-react';
-import Box from "./Box.tsx";
 import type {User} from "../utils/types.ts";
 
 type props = {
@@ -11,40 +10,26 @@ type props = {
 
 const Sidebar = ({user, className}: props) => {
     return (
-        <Box className={clsx("h-screen flex flex-col mr-5", className)}>
-            <img
-                className={"w-45 mx-auto"}
-                src={"../../public/logo.png"}
-                alt={"VoD System Logo"}
-            />
-            <SidebarButton
-                url={"/"}
-                logo={<Home size={20}/>}
-                label={"Home"}
-            />
-
-            <SidebarButton
-                url={"/create"}
-                logo={<Plus size={20}/>}
-                label={"Create Clip"}
-            />
-
-            { user && (
-                <>
-                    <SidebarButton
-                        url={"/my-clips"}
-                        logo={<Film size={20}/>}
-                        label={"My Clips"}
-                    />
-                    <SidebarButton
-                        url={"/profile"}
-                        logo={<UserIcon size={20}/>}
-                        label={"Profile"}
-                    />
-                </>
+        <aside className={clsx("h-screen flex flex-col bg-white border-r border-gray-200", className)}>
+            <div className="px-4 pt-5 pb-3">
+                <img
+                    className="w-36 mx-auto"
+                    src="../../public/logo.png"
+                    alt="VoD System Logo"
+                />
+            </div>
+            <nav className="flex flex-col flex-1 gap-0.5 px-2 pb-4">
+                <SidebarButton url="/" logo={<Home size={18}/>} label="Home" />
+                <SidebarButton url="/create" logo={<Plus size={18}/>} label="Create Clip" />
+                {user && (
+                    <>
+                        <SidebarButton url="/my-clips" logo={<Film size={18}/>} label="My Clips" />
+                        <SidebarButton url="/profile" logo={<UserIcon size={18}/>} label="Profile" />
+                    </>
                 )}
-        </Box>
+            </nav>
+        </aside>
     );
 };
 
-export default Sidebar;
\ No newline at end of file
+export default Sidebar;
diff --git a/frontend/src/components/Topbar.tsx b/frontend/src/components/Topbar.tsx
index 8fdef00..bce7a54 100644
--- a/frontend/src/components/Topbar.tsx
+++ b/frontend/src/components/Topbar.tsx
@@ -56,7 +56,7 @@ const Topbar = ({
     }
 
     return (
-        <div className={clsx(className, "flex justify-between")}>
+        <div className={clsx(className, "flex justify-between items-center px-4 py-2 bg-white border-b border-gray-200")}>
             <MenuButton onClick={() => setSidebarToggled(!sidebarToggled)}>
                 {sidebarToggled ? <Menu size={24}/> :  <X size={24}/>}
             </MenuButton>
diff --git a/frontend/src/components/buttons/BlueButton.tsx b/frontend/src/components/buttons/BlueButton.tsx
index 42ac4ef..4dce83e 100644
--- a/frontend/src/components/buttons/BlueButton.tsx
+++ b/frontend/src/components/buttons/BlueButton.tsx
@@ -5,7 +5,7 @@ type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
 const BlueButton: React.FC<Props> = ({ className = "", ...props }) => {
   return (
     <button
-      className={`bg-primary text-text rounded-lg hover:bg-primary-pressed transition-colors duration-100 h-10 ${className}`}
+      className={`bg-primary text-white font-medium rounded-lg hover:bg-primary-pressed transition-colors duration-150 h-10 px-4 ${className}`}
       {...props}
     />
   );
diff --git a/frontend/src/components/buttons/MenuButton.tsx b/frontend/src/components/buttons/MenuButton.tsx
index f859e51..f1717ef 100644
--- a/frontend/src/components/buttons/MenuButton.tsx
+++ b/frontend/src/components/buttons/MenuButton.tsx
@@ -6,7 +6,7 @@ type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
 const MenuButton: React.FC<Props> = ({ className = "", ...props }) => {
     return (
         <button
-            className={clsx("p-2 rounded-lg hover:bg-gray-300 hover:text-black transition-colors duration-200", className)}
+            className={clsx("p-2 rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors duration-150", className)}
             {...props}
         />
     );
diff --git a/frontend/src/components/buttons/SidebarButton.tsx b/frontend/src/components/buttons/SidebarButton.tsx
index 5d9d3aa..01e177c 100644
--- a/frontend/src/components/buttons/SidebarButton.tsx
+++ b/frontend/src/components/buttons/SidebarButton.tsx
@@ -1,5 +1,5 @@
 import MenuButton from "./MenuButton.tsx";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 
 type props = {
     url: string;
@@ -8,16 +8,16 @@ type props = {
 }
 
 const SidebarButton = ({url, logo, label}: props) => {
+    const { pathname } = useLocation();
+    const isActive = url === "/" ? pathname === "/" : pathname.startsWith(url);
+
     return (
-        <Link
-            className={"w-full"}
-            to={url}
-        >
-            <MenuButton className={"flex items-center gap-2 w-full"}>
+        <Link className="w-full" to={url}>
+            <MenuButton className={`flex items-center gap-2.5 w-full px-3 py-2 text-sm font-medium rounded-md ${isActive ? "bg-gray-100 text-gray-900" : "text-gray-600"}`}>
                 {logo}{label}
             </MenuButton>
         </Link>
     )
 }
 
-export default SidebarButton;
\ No newline at end of file
+export default SidebarButton;
diff --git a/frontend/src/components/video/ConfigBox.tsx b/frontend/src/components/video/ConfigBox.tsx
index 5cebb9c..140a44b 100644
--- a/frontend/src/components/video/ConfigBox.tsx
+++ b/frontend/src/components/video/ConfigBox.tsx
@@ -7,6 +7,8 @@ type prop = {
     className?: string;
 }
 
+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";
+
 export default function ConfigBox({setMetadata, className}: prop) {
     const updateRes = (e: React.ChangeEvent<HTMLSelectElement>) => {
         const vals = e.target.value.split(",");
@@ -32,15 +34,12 @@ export default function ConfigBox({setMetadata, className}: prop) {
     }
 
     return (
-        <div className={clsx("flex flex-col gap-2 p-10", className)}>
-            <h2 className={"text-xl font-bold"}>Export</h2>
+        <div className={clsx("flex flex-col gap-3 p-6", className)}>
+            <h2 className="text-sm font-semibold text-gray-800 mb-1">Export Settings</h2>
 
-            <Selector label={"Resolution"}>
-                <select id="resolution"
-                        name="resolution"
-                        defaultValue="1280,720"
-                        onChange={updateRes}
-                        className={"border-black bg-gray-200 rounded-md w-full p-2"}>
+            <Selector label="Resolution">
+                <select id="resolution" name="resolution" defaultValue="1280,720"
+                        onChange={updateRes} className={inputClass}>
                     <option value="3840,2160">2160p</option>
                     <option value="2560,1440">1440p</option>
                     <option value="1920,1080">1080p</option>
@@ -50,27 +49,20 @@ export default function ConfigBox({setMetadata, className}: prop) {
                 </select>
             </Selector>
 
-            <Selector label={"FPS"}>
-                <select id="fps"
-                        name="fps"
-                        defaultValue="30"
-                        onChange={updateFps}
-                        className={"border-black bg-gray-200 rounded-md w-full p-2"}>
+            <Selector label="FPS">
+                <select id="fps" name="fps" defaultValue="30"
+                        onChange={updateFps} className={inputClass}>
                     <option value="60">60</option>
                     <option value="30">30</option>
                     <option value="15">15</option>
                 </select>
             </Selector>
 
-            <Selector label={"File Size Limit (MB)"}>
-                <input type="number"
-                       min="1"
-                       defaultValue="10"
-                       onChange={updateFileSize}
-                       className={"border-black bg-gray-200 rounded-md w-full p-2"}
+            <Selector label="File Size Limit (MB)">
+                <input type="number" min="1" defaultValue="10"
+                       onChange={updateFileSize} className={inputClass}
                 />
             </Selector>
-
         </div>
     )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/video/ExportWidget.tsx b/frontend/src/components/video/ExportWidget.tsx
index ac9a743..35aef1c 100644
--- a/frontend/src/components/video/ExportWidget.tsx
+++ b/frontend/src/components/video/ExportWidget.tsx
@@ -16,17 +16,19 @@ const ExportWidget = ({dataSend, handleDownload, downloadable, progress}: props)
                 Export
             </BlueButton>
 
-            { downloadable ?
-                (<BlueButton
-                    onClick={handleDownload}>
-                    Download
-                </BlueButton>)
-                :(
-                    <progress
-                        value={progress}
-                        className={"bg-gray-300 rounded-lg h-1"}>
-                    </progress> )
-            }
+            <div className="h-10 flex items-center">
+                { downloadable ?
+                    (<BlueButton className="w-full" onClick={handleDownload}>
+                        Download
+                    </BlueButton>)
+                    :(
+                        <progress
+                            value={progress}
+                            className="w-full h-1.5 rounded bg-gray-200">
+                        </progress>
+                    )
+                }
+            </div>
         </div>
     )
 }
diff --git a/frontend/src/components/video/MetadataBox.tsx b/frontend/src/components/video/MetadataBox.tsx
index 1959848..2be2d0f 100644
--- a/frontend/src/components/video/MetadataBox.tsx
+++ b/frontend/src/components/video/MetadataBox.tsx
@@ -8,10 +8,8 @@ type MetadataBoxProps = {
 
 const MetadataBox = ({setMetadata, className}: MetadataBoxProps) => {
     return (
-        <div className={clsx("flex flex-col content-between p-10 gap-2", className)}>
-            {/*<h2 className={"text-2xl font-bold col-span-2"}>Metadata</h2>*/}
-
-            <p className={"w-full font-bold text-xl "}>Title</p>
+        <div className={clsx("flex flex-col content-between p-6 gap-2", className)}>
+            <p className="w-full font-semibold text-gray-800 text-sm">Title</p>
             <input
                 type="text"
                 placeholder="Enter title"
@@ -19,10 +17,10 @@ const MetadataBox = ({setMetadata, className}: MetadataBoxProps) => {
                     ...prevState,
                     title: e.target.value
                 }))}
-                className={"border-black bg-gray-200 rounded-md w-full p-2"}
+                className="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"
             />
         </div>
     )
 }
 
-export default MetadataBox;
\ No newline at end of file
+export default MetadataBox;
diff --git a/frontend/src/components/video/Playbar.tsx b/frontend/src/components/video/Playbar.tsx
index 5698c69..9f5cc35 100644
--- a/frontend/src/components/video/Playbar.tsx
+++ b/frontend/src/components/video/Playbar.tsx
@@ -77,7 +77,7 @@ export default function Playbar({ video, videoMetadata, className }: Props) {
             </div>
             <button
                 onClick={togglePlay}
-                className={"hover:bg-gray-300 rounded-full p-1"}
+                className={"hover:bg-gray-100 rounded-full p-1.5 transition-colors duration-150 text-gray-700"}
             >
                 {isPlaying ? <Pause size={24} /> : <Play size={24} />}
             </button>
diff --git a/frontend/src/components/video/VideoCard.tsx b/frontend/src/components/video/VideoCard.tsx
index 5b7a06e..6ba423c 100644
--- a/frontend/src/components/video/VideoCard.tsx
+++ b/frontend/src/components/video/VideoCard.tsx
@@ -40,41 +40,24 @@ const VideoCard = ({
             });
     }, []);
 
-
     return (
         <Link to={"/video/" + id}>
-            <div className={clsx("flex flex-col", className)}>
-                <div className={"relative inline-block"}>
+            <div className={clsx("flex flex-col group cursor-pointer", className)}>
+                <div className="relative overflow-hidden rounded-lg">
                     <img
                         src={thumbnailAvailable ? API_URL + `/api/v1/download/thumbnail/${id}` : fallbackThumbnail}
                         alt="Video Thumbnail"
+                        className="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-200"
                     />
-
-                    <p className="
-                            absolute
-                            top-2
-                            left-2
-                            bg-black bg-opacity-60
-                            text-white
-                            px-2
-                            py-1
-                            rounded
-                            pointer-events-none
-                            text-sm
-                            z-1
-                          ">
+                    <span className="absolute top-1.5 left-1.5 bg-black/70 text-white px-1.5 py-0.5 rounded text-xs font-medium pointer-events-none">
                         {formatTime(duration)}
-                    </p>
+                    </span>
                 </div>
-
-
-                <div className={"flex flex-col justify-between p-2"}>
-                    <p>{title == "" ? "(No Title)" : title}</p>
-                    <p
-                        className={"text-gray-600 text-sm"}
-                    >
-                        {timeAgo}
+                <div className="flex flex-col p-2">
+                    <p className="font-medium text-gray-900 text-sm leading-snug line-clamp-2">
+                        {title === "" ? "(No Title)" : title}
                     </p>
+                    <p className="text-gray-500 text-xs mt-0.5">{timeAgo}</p>
                 </div>
             </div>
         </Link>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index fc20e05..6c52b81 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,95 +2,44 @@
 @plugin "flowbite-react/plugin/tailwindcss";
 @source "../.flowbite-react/class-list.json";
 
-
 @theme {
-    --font-display: "Satoshi", "sans-serif";
+    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 
     /* Breakpoints */
     --breakpoint-3xl: 1920px;
 
-    --color-primary: oklch(0.55 0.21 254);    /* Modern Blue (#2563EB) */
-    --color-secondary: oklch(0.94 0.01 250);  /* Light Gray (#E5E7EB) */
-    --color-accent: oklch(0.68 0.20 288);     /* Indigo Accent (#6366F1) */
-    --color-text: oklch(0.17 0.01 270);       /* Dark Slate (#111827) */
-    --color-background: oklch(0.98 0.005 250);/* Soft off-white (#F9FAFB) */
-
+    --color-primary: oklch(0.55 0.21 254);
     --color-primary-pressed: oklch(0.45 0.21 254);
+    --color-secondary: oklch(0.94 0.01 250);
+    --color-accent: oklch(0.68 0.20 288);
+    --color-text: oklch(0.17 0.01 270);
+    --color-background: oklch(0.97 0.005 250);
+    --color-surface: oklch(1 0 0);
+    --color-border: oklch(0.91 0.008 250);
 
     /* Easing */
     --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
     --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
 }
 
-#range-slider .range-slider__range{
+#range-slider .range-slider__range {
     background: var(--color-primary);
 }
 
-#range-slider .range-slider__thumb{
+#range-slider .range-slider__thumb {
     background: var(--color-primary);
 }
 
 :root {
-  font-family: Helvetica;
-  line-height: 1.5;
-  font-weight: 400;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
-/*a {*/
-/*  font-weight: 500;*/
-/*  color: #646cff;*/
-/*  text-decoration: inherit;*/
-/*}*/
-/*a:hover {*/
-/*  color: #535bf2;*/
-/*}*/
-
-/*body {*/
-/*  margin: 0;*/
-/*  display: flex;*/
-/*  place-items: center;*/
-/*  min-width: 320px;*/
-/*  min-height: 100vh;*/
-/*}*/
-
-/*h1 {*/
-/*  font-size: 3.2em;*/
-/*  line-height: 1.1;*/
-/*}*/
-
-/*button {*/
-/*  border-radius: 8px;*/
-/*  border: 1px solid transparent;*/
-/*  padding: 0.6em 1.2em;*/
-/*  font-size: 1em;*/
-/*  font-weight: 500;*/
-/*  font-family: inherit;*/
-/*  background-color: #1a1a1a;*/
-/*  cursor: pointer;*/
-/*  transition: border-color 0.25s;*/
-/*}*/
-/*button:hover {*/
-/*  border-color: #646cff;*/
-/*}*/
-/*button:focus,*/
-/*button:focus-visible {*/
-/*  outline: 4px auto -webkit-focus-ring-color;*/
-/*}*/
-
-/*@media (prefers-color-scheme: light) {*/
-/*  :root {*/
-/*    color: #213547;*/
-/*    background-color: #ffffff;*/
-/*  }*/
-/*  a:hover {*/
-/*    color: #747bff;*/
-/*  }*/
-/*  button {*/
-/*    background-color: #f9f9f9;*/
-/*  }*/
-/*}*/
+body {
+    background-color: var(--color-background);
+}
diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
index 3e42247..e75d60f 100644
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/frontend/src/layouts/MainLayout.tsx
@@ -34,7 +34,7 @@ const MainLayout = () => {
                 setSidebarToggled={setSidebarToggled}
                 user={user}
                 fetchUser={fetchUser}/>
-            <div className="overflow-auto">
+            <div className="overflow-auto bg-background">
                 <Outlet />
             </div>
         </div>
diff --git a/frontend/src/pages/ClipEdit.tsx b/frontend/src/pages/ClipEdit.tsx
index ffc9814..64d6c4d 100644
--- a/frontend/src/pages/ClipEdit.tsx
+++ b/frontend/src/pages/ClipEdit.tsx
@@ -95,10 +95,10 @@ const ClipEdit = () => {
     }, [id]);
 
     return (
-        <div className={"grid grid-cols-[7fr_3fr]"}>
+        <div className={"grid grid-cols-[7fr_3fr] gap-4 p-4"}>
             <video
                    ref={videoRef}
-                   className={"w-full rounded-lg shadow-lg border border-gray-300 bg-black m-auto"}>
+                   className={"w-full rounded-lg shadow-sm bg-black"}>
                 <source src={videoUrl} type="video/mp4" />
                 <source src={videoUrl} type="video/webm" />
                 <source src={videoUrl} type="video/ogg" />
diff --git a/frontend/src/pages/ClipUpload.tsx b/frontend/src/pages/ClipUpload.tsx
index d227f79..c373e89 100644
--- a/frontend/src/pages/ClipUpload.tsx
+++ b/frontend/src/pages/ClipUpload.tsx
@@ -38,20 +38,16 @@ const ClipUpload = () => {
             return;
         }
 
-
         uploadFile(file)
             .then(uuid => {
-
                 if (isVideoFileSupported(file)) {
                     navigate(`/create/${uuid}`)
                 } else {
                     convertFile(uuid);
                     const interval = setInterval(async() => await pollProgress(uuid, interval), 500);
                 }
-
             })
             .catch((e: Error) => setError(`Failed to upload file: ${e.message}`));
-
     });
 
     const pollProgress = async (id: string, intervalId: number) => {
@@ -71,27 +67,27 @@ const ClipUpload = () => {
     }
 
     return (
-        <Box className={"flex flex-col justify-between gap-3 p-5"}>
-            <input
-                type="file"
-                onChange={(e) => {
-                    const selected = e.target.files?.[0] ?? null;
-                    setFile(selected);
-                }}
-                className={"h-100 cursor-pointer rounded-lg border border-dashed border-gray-400 bg-white p-4 text-center hover:bg-gray-50 transition"}
-            />
+        <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">
+                <h1 className="text-lg font-semibold text-gray-900">Upload Clip</h1>
 
-            <BlueButton
-                onClick={press}>
-                Upload
-            </BlueButton>
+                <input
+                    type="file"
+                    onChange={(e) => {
+                        const selected = e.target.files?.[0] ?? null;
+                        setFile(selected);
+                        setError(null);
+                    }}
+                    className="h-36 cursor-pointer rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4 text-center text-sm text-gray-500 hover:bg-gray-100 hover:border-primary transition-colors duration-150"
+                />
 
-            <label className={"text-center text-red-500"}>{error}</label>
-            <progress
-                value={progress}
-                className={"bg-gray-300 rounded-lg h-1"}>
-            </progress>
-        </Box>
+                <BlueButton onClick={press}>Upload</BlueButton>
+
+                {error && <p className="text-sm text-red-500 text-center">{error}</p>}
+
+                <progress value={progress} className="w-full h-1 rounded bg-gray-200" />
+            </Box>
+        </div>
     )
 };
 
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 1e2cf29..9c2a3b4 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,42 +1,39 @@
 const Home = () => {
-
     return (
-        <div className={"max-h-screen flex flex-col justify-center items-center px-6 py-12 text-gray-900"}>
-            {/* Logo */}
+        <div className="flex flex-col items-center justify-center px-6 py-12 min-h-full">
             <img
                 src="/logo.png"
                 alt="VoD System Logo"
-                className={"h-44 mb-8 object-contain"}
+                className="h-36 mb-8 object-contain"
             />
 
-            {/* Description Container */}
-            <div className={"max-w-xl text-center"}>
-                <h2 className={"text-3xl font-semibold mb-6 text-gray-700"}>
+            <div className="max-w-xl text-center">
+                <h2 className="text-3xl font-semibold mb-4 text-gray-900">
                     What is the VoD System?
                 </h2>
-                <p className={"text-lg leading-relaxed text-gray-600 mb-6"}>
+                <p className="text-base leading-relaxed text-gray-600 mb-6">
                     The VoD System is a powerful clip management platform designed to streamline how you
                     handle your video content. Whether you're a content creator, streamer, or educator,
                     VoD System lets you:
                 </p>
 
-                <ul className={"list-disc list-inside text-gray-600 mb-8 space-y-2"}>
+                <ul className="list-disc list-inside text-gray-600 mb-8 space-y-2 text-left">
                     <li>Upload clips effortlessly and securely.</li>
                     <li>Edit and trim videos with intuitive controls.</li>
                     <li>Compress files to specific file sizes.</li>
                     <li>Organize your clips for quick access and sharing.</li>
                 </ul>
 
-                <p className={"text-lg leading-relaxed text-gray-600"}>
+                <p className="text-base leading-relaxed text-gray-600 mb-8">
                     Designed with simplicity and efficiency in mind, VoD System adapts to your workflow,
                     making video clip management faster and more enjoyable than ever.
                 </p>
             </div>
 
-            {/* File Support Note */}
-            <div className={"bg-gray-100 border border-gray-300 rounded-md p-4 text-sm text-gray-500 max-w-md mx-auto"}>
-                <strong>Note:</strong> Currently, only <code>.mp4</code> files are supported for upload and processing.
-                Support for additional video formats will be added in future updates.
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-700 max-w-md mx-auto">
+                <strong>Note:</strong> Currently, only{" "}
+                <code className="font-mono bg-blue-100 px-1 rounded">.mp4</code> files are supported
+                for upload and processing. Support for additional video formats will be added in future updates.
             </div>
         </div>
     );
diff --git a/frontend/src/pages/MyClips.tsx b/frontend/src/pages/MyClips.tsx
index 9f70b46..867d55d 100644
--- a/frontend/src/pages/MyClips.tsx
+++ b/frontend/src/pages/MyClips.tsx
@@ -14,18 +14,29 @@ const MyClips = () => {
     }, []);
 
     return (
-        <div className={"flex flex-row"}>
-            {clips.map((clip) => (
-                <VideoCard
-                    id={clip.id}
-                    title={clip.title}
-                    duration={clip.duration}
-                    createdAt={clip.createdAt}
-                    className={"w-40 m-5"}
-                />
-            ))}
+        <div className="p-6">
+            <h1 className="text-2xl font-semibold text-gray-900 mb-6">My Clips</h1>
 
-            {error}
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                {clips.map((clip) => (
+                    <VideoCard
+                        key={clip.id}
+                        id={clip.id}
+                        title={clip.title}
+                        duration={clip.duration}
+                        createdAt={clip.createdAt}
+                    />
+                ))}
+            </div>
+
+            {clips.length === 0 && !error && (
+                <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+                    <p className="text-base">No clips yet.</p>
+                    <p className="text-sm mt-1">Upload your first clip to get started.</p>
+                </div>
+            )}
+
+            {error && <p className="text-sm text-red-500 mt-4">{error.toString()}</p>}
         </div>
     );
 }
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 1df29f8..6203410 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -22,7 +22,7 @@ const Profile = () => {
 
     if (!user) {
         return (
-            <div className="flex justify-center items-center h-full text-gray-500 text-lg">
+            <div className="flex justify-center items-center h-full text-gray-400 text-base">
                 Please log in to view your profile.
             </div>
         );
@@ -30,17 +30,17 @@ const Profile = () => {
 
     return (
         <div className="px-8 py-10 max-w-2xl mx-auto">
-            <h1 className="text-2xl font-semibold text-gray-700 mb-6">Profile</h1>
+            <h1 className="text-2xl font-semibold text-gray-900 mb-6">Profile</h1>
 
-            <Box className="p-6 mb-6 flex items-center gap-6">
+            <Box className="p-6 mb-4 flex items-center gap-5">
                 <img
                     src={user.profilePictureUrl}
                     referrerPolicy="no-referrer"
                     alt="Profile picture"
-                    className="w-20 h-20 rounded-full shadow"
+                    className="w-20 h-20 rounded-full shadow-sm"
                 />
                 <div>
-                    <p className="text-xl font-semibold text-gray-800">{user.name}</p>
+                    <p className="text-lg font-semibold text-gray-900">{user.name}</p>
                     <p className="text-sm text-gray-500">@{user.username}</p>
                     <p className="text-sm text-gray-500">{user.email}</p>
                     <p className="text-xs text-gray-400 mt-1">
@@ -50,31 +50,31 @@ const Profile = () => {
             </Box>
 
             <Box className="p-6">
-                <h2 className="text-lg font-semibold text-gray-700 mb-1">Stream Key</h2>
+                <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.
                     Keep it private — anyone with this key can stream to your account.
                 </p>
 
                 <div className="flex items-center gap-2">
-                    <div className="flex-1 bg-gray-100 border border-gray-300 rounded-md px-4 py-2 font-mono text-sm text-gray-700 overflow-hidden">
+                    <div className="flex-1 bg-gray-50 border border-gray-200 rounded-md px-4 py-2 font-mono text-sm text-gray-700 overflow-hidden">
                         {keyVisible ? user.streamKey : "•".repeat(user.streamKey.length)}
                     </div>
 
                     <button
                         onClick={() => setKeyVisible(v => !v)}
                         title={keyVisible ? "Hide key" : "Show key"}
-                        className="p-2 rounded-md bg-gray-300 hover:bg-gray-400 transition-colors text-gray-700"
+                        className="p-2 rounded-md bg-gray-100 hover:bg-gray-200 transition-colors duration-150 text-gray-600"
                     >
-                        {keyVisible ? <EyeOff size={18} /> : <Eye size={18} />}
+                        {keyVisible ? <EyeOff size={16} /> : <Eye size={16} />}
                     </button>
 
                     <button
                         onClick={handleCopy}
                         title="Copy key"
-                        className="p-2 rounded-md bg-gray-300 hover:bg-gray-400 transition-colors text-gray-700"
+                        className="p-2 rounded-md bg-gray-100 hover:bg-gray-200 transition-colors duration-150 text-gray-600"
                     >
-                        {copied ? <Check size={18} className="text-green-600" /> : <Copy size={18} />}
+                        {copied ? <Check size={16} className="text-green-600" /> : <Copy size={16} />}
                     </button>
                 </div>
             </Box>
diff --git a/frontend/src/pages/VideoPlayer.tsx b/frontend/src/pages/VideoPlayer.tsx
index 6bab7db..c09d8b1 100644
--- a/frontend/src/pages/VideoPlayer.tsx
+++ b/frontend/src/pages/VideoPlayer.tsx
@@ -1,12 +1,14 @@
 import {useEffect, useState} from "react";
-import {useParams} from "react-router-dom";
+import {useNavigate, useParams} from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
 import type {Clip} from "../utils/types";
-import {getClipById, getVideoBlob  } from "../utils/endpoints.ts";
+import {getClipById, getVideoBlob} from "../utils/endpoints.ts";
 import Box from "../components/Box.tsx"
 import {dateToTimeAgo, stringToDate} from "../utils/utils.ts";
 
 const VideoPlayer = () => {
     const { id } = useParams();
+    const navigate = useNavigate();
     const [videoUrl, setVideoUrl] = useState<string | undefined>(undefined);
     const [error, setError] = useState<string | null>(null);
     const [clip, setClip] = useState<Clip | null>(null);
@@ -24,7 +26,6 @@ const VideoPlayer = () => {
                 setVideoUrl(url);
             })
 
-
         getClipById(id)
             .then((fetchedClip) => {setClip(fetchedClip)})
             .catch((err) => {
@@ -34,7 +35,6 @@ const VideoPlayer = () => {
 
     }, [id]);
 
-    // Update timeAgo live every second
     useEffect(() => {
         if (!clip || !clip.createdAt) return;
 
@@ -43,16 +43,24 @@ const VideoPlayer = () => {
             setTimeAgo(dateToTimeAgo(date));
         };
 
-        update(); // initial update
+        update();
         const interval = setInterval(update, 1000);
 
-        return () => clearInterval(interval); // cleanup
+        return () => clearInterval(interval);
     }, [clip]);
 
     return (
-        <div className={"w-9/10 m-auto"}>
+        <div className="p-6 max-w-5xl mx-auto">
+            <button
+                onClick={() => navigate(-1)}
+                className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-900 mb-4 transition-colors duration-150"
+            >
+                <ArrowLeft size={16} />
+                Back
+            </button>
+
             <video
-                className={"w-full h-full rounded-lg m-auto"}
+                className="w-full rounded-xl shadow-md bg-black"
                 controls
                 autoPlay
                 src={videoUrl}
@@ -63,16 +71,15 @@ const VideoPlayer = () => {
                 Your browser does not support the video tag.
             </video>
 
-            {error && <div className="text-red-500 mt-2">{error}</div>}
-            {!videoUrl && !error && <div className="text-gray-500 mt-2">Loading video...</div>}
+            {error && <div className="text-red-500 text-sm mt-3">{error}</div>}
+            {!videoUrl && !error && <div className="text-gray-400 text-sm mt-3">Loading video...</div>}
 
-            <Box className={"p-2 m-2 flex flex-col"}>
-                <p className={"text-2xl font-bold text-gray-600"}>{clip?.title ? clip?.title : "(No Title)"}</p>
-                <p>{timeAgo}</p>
+            <Box className="p-4 mt-4">
+                <p className="text-xl font-semibold text-gray-900">{clip?.title || "(No Title)"}</p>
+                <p className="text-sm text-gray-500 mt-1">{timeAgo}</p>
             </Box>
-
         </div>
     );
 };
 
-export default VideoPlayer;
\ No newline at end of file
+export default VideoPlayer;