Update UI components and styles for improved functionality and aesthetics

- Changed accent color variables in index.css for better visual consistency.
- Added a new voicebox logo to the Sidebar component for branding enhancement.
- Refactored AudioPlayer to utilize CSS variables for wave and progress colors, improving theme adaptability.
- Adjusted HistoryTable column widths for better layout and readability.
- Enhanced ProfileCard layout with improved button positioning and styling.
- Updated button styles to use accent colors for better visual coherence.
- Improved CircleButton styling for consistent appearance across the application.

app/src/components/AudioPlayer/AudioPlayer.tsx

@@ -73,11 +73,22 @@ export function AudioPlayer() {
       });
 
       try {
+        // Get computed CSS variable values
+        const root = document.documentElement;
+        const getCSSVar = (varName: string) => {
+          const value = getComputedStyle(root).getPropertyValue(varName).trim();
+          return value ? `hsl(${value})` : '';
+        };
+
+        const waveColor = getCSSVar('--muted');
+        const progressColor = getCSSVar('--accent');
+        const cursorColor = getCSSVar('--accent');
+
         const wavesurfer = WaveSurfer.create({
           container: container,
-          waveColor: '#ffffff',
+          waveColor: waveColor,
-          progressColor: '#d3d3d3',
+          progressColor: progressColor,
-          cursorColor: 'hsl(var(--primary))',
+          cursorColor: cursorColor,
           barWidth: 2,
           barRadius: 2,
           height: 80,

app/src/components/History/HistoryTable.tsx

@@ -79,12 +79,12 @@ export function HistoryTable() {
             <Table className="w-full table-fixed">
               <TableHeader className="sticky top-0 bg-background z-10">
                 <TableRow>
-                  <TableHead className="w-[40%]">Text</TableHead>
+                  <TableHead className="w-[35%]">Text</TableHead>
-                  <TableHead className="w-[15%]">Profile</TableHead>
+                  <TableHead className="w-[12%]">Profile</TableHead>
-                  <TableHead className="w-[10%]">Language</TableHead>
+                  <TableHead className="w-[8%]">Language</TableHead>
-                  <TableHead className="w-[10%]">Duration</TableHead>
+                  <TableHead className="w-[8%]">Duration</TableHead>
-                  <TableHead className="w-[15%]">Created</TableHead>
+                  <TableHead className="w-[12%]">Created</TableHead>
-                  <TableHead className="w-[10%] text-right">Actions</TableHead>
+                  <TableHead className="w-[15%] text-right min-w-[100px]">Actions</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -107,9 +107,9 @@ export function HistoryTable() {
                       <TableCell className="text-xs text-muted-foreground/60">
                         {formatDate(gen.created_at)}
                       </TableCell>
-                      <TableCell className="text-right">
+                      <TableCell className="text-right min-w-[100px]">
                         <div
-                          className="flex justify-end gap-0.5"
+                          className="flex justify-end gap-0.5 flex-nowrap"
                           onClick={(e) => e.stopPropagation()}
                         >
                           <CircleButton

app/src/components/Sidebar.tsx

@@ -1,5 +1,6 @@
 import { Home, Settings } from 'lucide-react';
 import { cn } from '@/lib/utils/cn';
+import voiceboxLogo from '@/assets/voicebox-logo.png';
 
 interface SidebarProps {
   activeTab: string;
@@ -14,6 +15,15 @@ const tabs = [
 export function Sidebar({ activeTab, onTabChange }: SidebarProps) {
   return (
     <div className="fixed left-0 top-0 h-full w-20 bg-sidebar border-r border-border flex flex-col items-center py-6 gap-6">
+      {/* Logo */}
+      <div className="mb-2">
+        <img
+          src={voiceboxLogo}
+          alt="Voicebox"
+          className="w-12 h-12 object-contain"
+        />
+      </div>
+
       {/* Navigation Buttons */}
       <div className="flex flex-col gap-3">
         {tabs.map((tab) => {
@@ -28,7 +38,7 @@ export function Sidebar({ activeTab, onTabChange }: SidebarProps) {
               className={cn(
                 'w-12 h-12 rounded-full flex items-center justify-center transition-all duration-200',
                 'hover:bg-accent hover:text-accent-foreground',
-                isActive ? 'bg-primary text-primary-foreground shadow-lg' : 'text-muted-foreground',
+                isActive ? 'bg-accent text-accent-foreground shadow-lg' : 'text-muted-foreground',
               )}
               title={tab.label}
               aria-label={tab.label}

app/src/components/VoiceProfiles/ProfileCard.tsx

@@ -2,6 +2,7 @@ import { Edit, Eye, Mic, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { CircleButton } from '@/components/ui/circle-button';
 import {
   Dialog,
@@ -11,11 +12,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { cn } from '@/lib/utils/cn';
 import type { VoiceProfileResponse } from '@/lib/api/types';
 import { useDeleteProfile } from '@/lib/hooks/useProfiles';
-import { formatDate } from '@/lib/utils/format';
+import { cn } from '@/lib/utils/cn';
 import { useUIStore } from '@/stores/uiStore';
 import { ProfileDetail } from './ProfileDetail';
 
@@ -57,18 +56,29 @@ export function ProfileCard({ profile }: ProfileCardProps) {
     <>
       <Card
         className={cn(
-          'cursor-pointer hover:shadow-md transition-all',
+          'cursor-pointer hover:shadow-md transition-all flex flex-col',
           isSelected && 'ring-2 ring-primary shadow-md',
         )}
         onClick={handleSelect}
       >
         <CardHeader className="p-3 pb-2">
-          <CardTitle className="flex items-center justify-between gap-2 text-base font-medium">
+          <CardTitle className="flex items-center gap-1.5 text-base font-medium">
-            <span className="flex items-center gap-1.5 min-w-0 flex-1">
+            <div className="h-6 w-6 rounded-full bg-muted flex items-center justify-center shrink-0">
-              <Mic className="h-4 w-4 shrink-0 text-muted-foreground" />
+              <Mic className="h-3.5 w-3.5 text-muted-foreground" />
-              <span className="truncate">{profile.name}</span>
+            </div>
-            </span>
+            <span className="break-words">{profile.name}</span>
-            <div className="flex gap-0.5 shrink-0">
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-3 pt-0 flex flex-col flex-1">
+          <p className="text-xs text-muted-foreground mb-1.5 line-clamp-2 leading-relaxed">
+            {profile.description || 'No description'}
+          </p>
+          <div className="mb-2">
+            <Badge variant="outline" className="text-xs h-5 px-1.5">
+              {profile.language}
+            </Badge>
+          </div>
+          <div className="flex gap-0.5 justify-end items-end mt-auto">
             <CircleButton
               icon={Eye}
               onClick={(e) => {
@@ -92,20 +102,6 @@ export function ProfileCard({ profile }: ProfileCardProps) {
               aria-label="Delete profile"
             />
           </div>
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="p-3 pt-0">
-          <p className="text-xs text-muted-foreground mb-1.5 line-clamp-2 leading-relaxed">
-            {profile.description || 'No description'}
-          </p>
-          <div className="flex items-center justify-between gap-2 mb-1">
-            <Badge variant="outline" className="text-xs h-5 px-1.5">
-              {profile.language}
-            </Badge>
-            <p className="text-xs text-muted-foreground/60 text-right">
-              {formatDate(profile.created_at)}
-            </p>
-          </div>
         </CardContent>
       </Card>
 

app/src/components/ui/button.tsx

@@ -4,22 +4,22 @@ import * as React from 'react';
 import { cn } from '@/lib/utils/cn';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'bg-accent text-accent-foreground hover:bg-accent/90',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+        link: 'text-accent underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
+        sm: 'h-9 rounded-full px-3',
-        lg: 'h-11 rounded-md px-8',
+        lg: 'h-11 rounded-full px-8',
-        icon: 'h-10 w-10',
+        icon: 'h-10 w-10 rounded-full',
       },
     },
     defaultVariants: {

app/src/components/ui/circle-button.tsx

@@ -11,8 +11,8 @@ const CircleButton = React.forwardRef<HTMLButtonElement, CircleButtonProps>(
       <button
         ref={ref}
         className={cn(
-          'h-7 w-7 rounded-full flex items-center justify-center',
+          'h-7 w-7 rounded-full flex items-center justify-center flex-shrink-0',
-          'hover:bg-accent transition-colors',
+          'hover:bg-muted transition-colors',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
           'disabled:pointer-events-none disabled:opacity-50',
           className,

app/src/index.css

@@ -42,26 +42,26 @@
 }
 
 :root {
-  --background: 0 0% 100%;
+  --background: 0 0% 95%;
   --foreground: 222.2 84% 4.9%;
-  --card: 0 0% 100%;
+  --card: 0 0% 97%;
   --card-foreground: 222.2 84% 4.9%;
-  --popover: 0 0% 100%;
+  --popover: 0 0% 97%;
   --popover-foreground: 222.2 84% 4.9%;
   --primary: 222.2 47.4% 11.2%;
   --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
+  --secondary: 210 40% 92%;
   --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
+  --muted: 210 40% 90%;
   --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
+  --accent: 43 50% 50%;
   --accent-foreground: 222.2 47.4% 11.2%;
   --destructive: 0 84.2% 60.2%;
   --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
+  --border: 214.3 31.8% 85%;
-  --input: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 88%;
   --ring: 222.2 84% 4.9%;
-  --sidebar: 0 0% 98%;
+  --sidebar: 0 0% 92%;
   --radius: 0.5rem;
   --chart-1: 12 76% 61%;
   --chart-2: 173 58% 39%;
@@ -71,26 +71,26 @@
 }
 
 .dark {
-  --background: 0 0% 8%;
+  --background: 0 0% 6%;
   --foreground: 0 0% 95%;
-  --card: 0 0% 10%;
+  --card: 0 0% 8%;
   --card-foreground: 0 0% 95%;
-  --popover: 0 0% 10%;
+  --popover: 0 0% 8%;
   --popover-foreground: 0 0% 95%;
-  --primary: 0 0% 20%;
+  --primary: 0 0% 18%;
   --primary-foreground: 0 0% 95%;
-  --secondary: 0 0% 15%;
+  --secondary: 0 0% 12%;
   --secondary-foreground: 0 0% 95%;
-  --muted: 0 0% 15%;
+  --muted: 0 0% 12%;
   --muted-foreground: 0 0% 60%;
-  --accent: 0 0% 15%;
+  --accent: 43 50% 45%;
   --accent-foreground: 0 0% 95%;
   --destructive: 0 62.8% 50%;
   --destructive-foreground: 0 0% 95%;
-  --border: 0 0% 15%;
+  --border: 0 0% 12%;
-  --input: 0 0% 15%;
+  --input: 0 0% 12%;
   --ring: 0 0% 40%;
-  --sidebar: 0 0% 6%;
+  --sidebar: 0 0% 4%;
   --chart-1: 220 70% 50%;
   --chart-2: 160 60% 45%;
   --chart-3: 30 80% 55%;

landing/src/app/page.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import Link from 'next/link';
+import { Cloud, Code, Cpu, Github, Shield, Zap } from 'lucide-react';
-import { Github, Zap, Cpu, Cloud, Shield, Code } from 'lucide-react';
+import Image from 'next/image';
+import { AppleIcon, LinuxIcon, WindowsIcon } from '@/components/PlatformIcons';
 import { Button } from '@/components/ui/button';
 import { Hero } from '@/components/ui/hero';
 import { Section, SectionTitle } from '@/components/ui/section';
-import { Card, CardContent } from '@/components/ui/card';
+import { DOWNLOAD_LINKS, GITHUB_REPO } from '@/lib/constants';
-import { FeatureCard } from '@/components/ui/feature-card';
+import { FeatureCard } from '../components/ui/feature-card';
-import { GITHUB_REPO, DOWNLOAD_LINKS } from '@/lib/constants';
-import { AppleIcon, WindowsIcon, LinuxIcon } from '@/components/PlatformIcons';
 
 export default function Home() {
   const features = [
@@ -53,9 +52,19 @@ export default function Home() {
       {/* Hero Section */}
       <Hero
         title="voicebox"
-        description="Professional voice cloning powered by Qwen3-TTS. Create natural-sounding speech from text with near-perfect voice replication."
+        description="Open source voice cloning powered by Qwen3-TTS. Create natural-sounding speech from text with near-perfect voice replication."
         actions={
           <div className="space-y-4 w-full lg:w-auto">
+            <div className="w-full max-w-2xl mb-6">
+              <Image
+                src="/App.webp"
+                alt="Voicebox Application Screenshot"
+                width={1920}
+                height={1080}
+                className="w-full h-auto rounded-lg border border-border shadow-lg"
+                priority
+              />
+            </div>
             <div>
               <h2 className="text-2xl sm:text-3xl font-bold mb-1">Download</h2>
               <p className="text-sm text-muted-foreground">Choose your platform</p>

landing/src/components/ui/hero.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { ReactNode } from 'react';
-import { cn } from '@/lib/utils';
 import Image from 'next/image';
+import type { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
 
 interface HeroProps {
   title: ReactNode;
@@ -21,7 +21,7 @@ export function Hero({ title, description, actions, className, showLogo = true }
           {showLogo && (
             <div className="flex lg:justify-start justify-center mb-6">
               <Image
-                src="/voicebox-logo.png"
+                src="/voicebox-logo-2.png"
                 alt="Voicebox Logo"
                 width={1024}
                 height={1024}

scripts/update-icons.sh

@@ -11,7 +11,7 @@ ICON_BUNDLE="tauri/assets/voicebox.icon"
 ASSETS_DIR="$ICON_BUNDLE/Assets"
 ICONS_DIR="tauri/src-tauri/icons"
 LANDING_LOGO="landing/public/voicebox-logo.png"
-SOURCE_ICON="$EXPORTS_DIR/voicebox-iOS-Default[email protected]"
+SOURCE_ICON="$EXPORTS_DIR/voicebox-iOS-Dark[email protected]"
 
 echo "🎨 Updating all Voicebox icons from exports..."
 echo ""