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',
-          progressColor: '#d3d3d3',
-          cursorColor: 'hsl(var(--primary))',
+          waveColor: waveColor,
+          progressColor: progressColor,
+          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-[15%]">Profile</TableHead>
-                  <TableHead className="w-[10%]">Language</TableHead>
-                  <TableHead className="w-[10%]">Duration</TableHead>
-                  <TableHead className="w-[15%]">Created</TableHead>
-                  <TableHead className="w-[10%] text-right">Actions</TableHead>
+                  <TableHead className="w-[35%]">Text</TableHead>
+                  <TableHead className="w-[12%]">Profile</TableHead>
+                  <TableHead className="w-[8%]">Language</TableHead>
+                  <TableHead className="w-[8%]">Duration</TableHead>
+                  <TableHead className="w-[12%]">Created</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,54 +56,51 @@ 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">
-            <span className="flex items-center gap-1.5 min-w-0 flex-1">
-              <Mic className="h-4 w-4 shrink-0 text-muted-foreground" />
-              <span className="truncate">{profile.name}</span>
-            </span>
-            <div className="flex gap-0.5 shrink-0">
-              <CircleButton
-                icon={Eye}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setDetailOpen(true);
-                }}
-                aria-label="View details"
-              />
-              <CircleButton
-                icon={Edit}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleEdit();
-                }}
-                aria-label="Edit profile"
-              />
-              <CircleButton
-                icon={Trash2}
-                onClick={handleDeleteClick}
-                disabled={deleteProfile.isPending}
-                aria-label="Delete profile"
-              />
+          <CardTitle className="flex items-center gap-1.5 text-base font-medium">
+            <div className="h-6 w-6 rounded-full bg-muted flex items-center justify-center shrink-0">
+              <Mic className="h-3.5 w-3.5 text-muted-foreground" />
             </div>
+            <span className="break-words">{profile.name}</span>
           </CardTitle>
         </CardHeader>
-        <CardContent className="p-3 pt-0">
+        <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="flex items-center justify-between gap-2 mb-1">
+          <div className="mb-2">
             <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>
+          <div className="flex gap-0.5 justify-end items-end mt-auto">
+            <CircleButton
+              icon={Eye}
+              onClick={(e) => {
+                e.stopPropagation();
+                setDetailOpen(true);
+              }}
+              aria-label="View details"
+            />
+            <CircleButton
+              icon={Edit}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleEdit();
+              }}
+              aria-label="Edit profile"
+            />
+            <CircleButton
+              icon={Trash2}
+              onClick={handleDeleteClick}
+              disabled={deleteProfile.isPending}
+              aria-label="Delete profile"
+            />
           </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',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
+        sm: 'h-9 rounded-full px-3',
+        lg: 'h-11 rounded-full px-8',
+        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',
-          'hover:bg-accent transition-colors',
+          'h-7 w-7 rounded-full flex items-center justify-center flex-shrink-0',
+          '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,