From faca1cdce60fcd6fcdaa267faa7d95af9f96fd84 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 17 Oct 2025 11:09:07 +0200
Subject: [PATCH] feat: enhance UI components with backdrop blur effects and
 improved background styles for better visual aesthetics

---
 src/components/LanguageSelector.tsx           |  4 ++--
 src/components/admin/DeleteUserDialog.tsx     |  2 +-
 src/components/auth/LoginForm.tsx             |  6 ++---
 src/components/auth/RegisterForm.tsx          |  8 +++----
 src/components/common/CompactModeButton.tsx   |  2 +-
 src/components/common/UnreadFilterButton.tsx  |  2 +-
 src/components/debug/DebugInfo.tsx            | 14 ++++++------
 src/components/downloads/DownloadManager.tsx  |  2 +-
 src/components/home/HeroSection.tsx           |  4 ++--
 src/components/home/MediaRow.tsx              |  2 +-
 src/components/layout/ClientLayout.tsx        |  2 +-
 src/components/layout/Header.tsx              |  2 +-
 src/components/layout/Sidebar.tsx             |  2 +-
 .../library/PaginatedSeriesGrid.tsx           |  2 +-
 src/components/reader/BookReader.tsx          |  4 ++--
 .../reader/components/ControlButtons.tsx      | 16 +++++++-------
 .../reader/components/NavigationBar.tsx       |  4 ++--
 .../reader/components/PageInput.tsx           |  4 ++--
 src/components/series/PaginatedBookGrid.tsx   |  2 +-
 src/components/series/SeriesHeader.tsx        |  2 +-
 .../settings/BackgroundSettings.tsx           |  2 +-
 src/components/settings/CacheSettings.tsx     | 22 +++++++++----------
 src/components/settings/DisplaySettings.tsx   |  2 +-
 src/components/settings/KomgaSettings.tsx     | 12 +++++-----
 src/components/skeletons/BookSkeleton.tsx     |  8 +++----
 src/components/ui/ErrorMessage.tsx            |  2 +-
 src/components/ui/InstallPWA.tsx              |  6 ++---
 src/components/ui/NetworkStatus.tsx           |  2 +-
 src/components/ui/Pagination.tsx              |  8 +++----
 src/components/ui/alert-dialog.tsx            |  2 +-
 src/components/ui/badge.tsx                   |  6 ++---
 src/components/ui/button.tsx                  | 10 ++++-----
 src/components/ui/card.tsx                    |  2 +-
 src/components/ui/cover-client.tsx            |  2 +-
 src/components/ui/dialog.tsx                  |  2 +-
 src/components/ui/dropdown-menu.tsx           |  4 ++--
 src/components/ui/input.tsx                   |  2 +-
 src/components/ui/progress-bar.tsx            |  2 +-
 src/components/ui/progress.tsx                |  2 +-
 src/components/ui/select.tsx                  |  4 ++--
 src/components/ui/table.tsx                   |  4 ++--
 src/components/ui/tabs.tsx                    |  4 ++--
 src/components/ui/toast.tsx                   |  4 ++--
 src/styles/globals.css                        | 13 ++++++++++-
 44 files changed, 112 insertions(+), 101 deletions(-)

diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
index eb7a239..911e78d 100644
--- a/src/components/LanguageSelector.tsx
+++ b/src/components/LanguageSelector.tsx
@@ -27,13 +27,13 @@ export default function LanguageSelector() {
       <DropdownMenuContent align="end">
         <DropdownMenuItem
           onClick={() => handleLanguageChange("fr")}
-          className={i18n.language === "fr" ? "bg-accent" : ""}
+          className={i18n.language === "fr" ? "bg-accent/80 backdrop-blur-md" : ""}
         >
           {t("language.fr")}
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => handleLanguageChange("en")}
-          className={i18n.language === "en" ? "bg-accent" : ""}
+          className={i18n.language === "en" ? "bg-accent/80 backdrop-blur-md" : ""}
         >
           {t("language.en")}
         </DropdownMenuItem>
diff --git a/src/components/admin/DeleteUserDialog.tsx b/src/components/admin/DeleteUserDialog.tsx
index 4d0374a..9be1c40 100644
--- a/src/components/admin/DeleteUserDialog.tsx
+++ b/src/components/admin/DeleteUserDialog.tsx
@@ -80,7 +80,7 @@ export function DeleteUserDialog({
           <AlertDialogAction
             onClick={handleDelete}
             disabled={isLoading}
-            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            className="bg-destructive/90 backdrop-blur-md text-destructive-foreground hover:bg-destructive/80"
           >
             {isLoading ? "Suppression..." : "Supprimer"}
           </AlertDialogAction>
diff --git a/src/components/auth/LoginForm.tsx b/src/components/auth/LoginForm.tsx
index 2825d1f..096d359 100644
--- a/src/components/auth/LoginForm.tsx
+++ b/src/components/auth/LoginForm.tsx
@@ -62,7 +62,7 @@ export function LoginForm({ from }: LoginFormProps) {
           autoComplete="email"
           required
           defaultValue="demo@stripstream.local"
-          className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          className="flex h-10 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
         />
       </div>
       <div className="space-y-2">
@@ -79,7 +79,7 @@ export function LoginForm({ from }: LoginFormProps) {
           autoComplete="current-password"
           required
           defaultValue="fft$VSD96dis"
-          className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          className="flex h-10 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
         />
       </div>
       <div className="flex items-center space-x-2">
@@ -105,7 +105,7 @@ export function LoginForm({ from }: LoginFormProps) {
       <button
         type="submit"
         disabled={isLoading}
-        className="bg-[#4F46E5] inline-flex w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 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="bg-[#4F46E5] inline-flex w-full items-center justify-center rounded-md bg-primary/90 backdrop-blur-md px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
       >
         {isLoading ? t("login.form.submit.loading.login") : t("login.form.submit.login")}
       </button>
diff --git a/src/components/auth/RegisterForm.tsx b/src/components/auth/RegisterForm.tsx
index 346859f..576a2d5 100644
--- a/src/components/auth/RegisterForm.tsx
+++ b/src/components/auth/RegisterForm.tsx
@@ -100,7 +100,7 @@ export function RegisterForm({ from: _from }: RegisterFormProps) {
           type="email"
           autoComplete="email"
           required
-          className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          className="flex h-10 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
         />
       </div>
       <div className="space-y-2">
@@ -116,7 +116,7 @@ export function RegisterForm({ from: _from }: RegisterFormProps) {
           type="password"
           autoComplete="new-password"
           required
-          className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          className="flex h-10 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
         />
       </div>
       <div className="space-y-2">
@@ -132,14 +132,14 @@ export function RegisterForm({ from: _from }: RegisterFormProps) {
           type="password"
           autoComplete="new-password"
           required
-          className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          className="flex h-10 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
         />
       </div>
       {error && <ErrorMessage errorCode={error.code} variant="form" />}
       <button
         type="submit"
         disabled={isLoading}
-        className="bg-[#4F46E5] inline-flex w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 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="bg-[#4F46E5] inline-flex w-full items-center justify-center rounded-md bg-primary/90 backdrop-blur-md px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
       >
         {isLoading ? t("login.form.submit.loading.register") : t("login.form.submit.register")}
       </button>
diff --git a/src/components/common/CompactModeButton.tsx b/src/components/common/CompactModeButton.tsx
index 0212743..9f68272 100644
--- a/src/components/common/CompactModeButton.tsx
+++ b/src/components/common/CompactModeButton.tsx
@@ -19,7 +19,7 @@ export function CompactModeButton({ onToggle }: CompactModeButtonProps) {
   return (
     <button
       onClick={handleClick}
-      className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
+      className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground whitespace-nowrap"
       title={isCompact ? t("series.filters.normal") : t("series.filters.compact")}
     >
       {isCompact ? <LayoutTemplate className="h-4 w-4" /> : <LayoutGrid className="h-4 w-4" />}
diff --git a/src/components/common/UnreadFilterButton.tsx b/src/components/common/UnreadFilterButton.tsx
index 07d326b..37936c4 100644
--- a/src/components/common/UnreadFilterButton.tsx
+++ b/src/components/common/UnreadFilterButton.tsx
@@ -14,7 +14,7 @@ export function UnreadFilterButton({ showOnlyUnread, onToggle }: UnreadFilterBut
   return (
     <button
       onClick={onToggle}
-      className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
+      className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground whitespace-nowrap"
       title={showOnlyUnread ? t("series.filters.showAll") : t("series.filters.unread")}
     >
       <Filter className="h-4 w-4" />
diff --git a/src/components/debug/DebugInfo.tsx b/src/components/debug/DebugInfo.tsx
index 147aac5..1d26621 100644
--- a/src/components/debug/DebugInfo.tsx
+++ b/src/components/debug/DebugInfo.tsx
@@ -90,11 +90,11 @@ export function DebugInfo() {
 
   return (
     <div
-      className={`fixed bottom-4 right-4 bg-zinc-900 border border-zinc-700 rounded-lg shadow-lg p-4 text-zinc-100 z-50 ${
+      className={`fixed bottom-4 right-4 bg-zinc-900/90 backdrop-blur-md border border-zinc-700 rounded-lg shadow-lg p-4 text-zinc-100 z-50 ${
         isMinimized ? "w-auto" : "w-[800px] max-h-[50vh] overflow-auto"
       }`}
     >
-      <div className="flex items-center justify-between mb-4 sticky top-0 bg-zinc-900 pb-2">
+      <div className="flex items-center justify-between mb-4 sticky top-0 bg-zinc-900/90 backdrop-blur-md pb-2">
         <div className="flex items-center gap-2">
           <h2 className="font-bold text-lg">{t("debug.title")}</h2>
           {!isMinimized && (
@@ -107,7 +107,7 @@ export function DebugInfo() {
           {!isMinimized && (
             <button
               onClick={() => setShowFilters(!showFilters)}
-              className={`hover:bg-zinc-700 rounded-full p-1.5 ${showFilters ? "bg-zinc-700" : ""}`}
+              className={`hover:bg-zinc-700/80 hover:backdrop-blur-md rounded-full p-1.5 ${showFilters ? "bg-zinc-700/80 backdrop-blur-md" : ""}`}
               aria-label="Filtres"
             >
               <Filter className="h-5 w-5" />
@@ -115,7 +115,7 @@ export function DebugInfo() {
           )}
           <button
             onClick={fetchLogs}
-            className="hover:bg-zinc-700 rounded-full p-1.5"
+            className="hover:bg-zinc-700/80 hover:backdrop-blur-md rounded-full p-1.5"
             aria-label={t("debug.actions.refresh")}
             disabled={isRefreshing}
           >
@@ -123,14 +123,14 @@ export function DebugInfo() {
           </button>
           <button
             onClick={() => setIsMinimized(!isMinimized)}
-            className="hover:bg-zinc-700 rounded-full p-1.5"
+            className="hover:bg-zinc-700/80 hover:backdrop-blur-md rounded-full p-1.5"
             aria-label={t(isMinimized ? "debug.actions.maximize" : "debug.actions.minimize")}
           >
             {isMinimized ? <Maximize2 className="h-5 w-5" /> : <Minimize2 className="h-5 w-5" />}
           </button>
           <button
             onClick={clearLogs}
-            className="hover:bg-zinc-700 rounded-full p-1.5"
+            className="hover:bg-zinc-700/80 hover:backdrop-blur-md rounded-full p-1.5"
             aria-label={t("debug.actions.clear")}
           >
             <X className="h-5 w-5" />
@@ -139,7 +139,7 @@ export function DebugInfo() {
       </div>
 
       {!isMinimized && showFilters && (
-        <div className="mb-4 p-3 bg-zinc-800 rounded-lg">
+        <div className="mb-4 p-3 bg-zinc-800/80 backdrop-blur-md rounded-lg">
           <div className="flex flex-wrap gap-2">
             {[
               { key: "all", label: "Toutes", icon: Calendar },
diff --git a/src/components/downloads/DownloadManager.tsx b/src/components/downloads/DownloadManager.tsx
index ccde685..b1bb3c5 100644
--- a/src/components/downloads/DownloadManager.tsx
+++ b/src/components/downloads/DownloadManager.tsx
@@ -307,7 +307,7 @@ function BookDownloadCard({ book, status, onDelete, onRetry }: BookDownloadCardP
   return (
     <Card className="p-4">
       <div className="flex items-center gap-4">
-        <div className="relative w-12 aspect-[2/3] bg-muted rounded overflow-hidden">
+        <div className="relative w-12 aspect-[2/3] bg-muted/80 backdrop-blur-md rounded overflow-hidden">
           <Image
             src={`/api/komga/images/books/${book.id}/thumbnail`}
             alt={t("books.coverAlt", { title: book.metadata?.title })}
diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index d7cf1b7..71665db 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -30,7 +30,7 @@ export function HeroSection({ series }: HeroSectionProps) {
         {series?.map((series) => (
           <div
             key={series.id}
-            className="relative aspect-[2/3] bg-muted rounded-lg overflow-hidden"
+            className="relative aspect-[2/3] bg-muted/80 backdrop-blur-md rounded-lg overflow-hidden"
           >
             <SeriesCover
               series={series as KomgaSeries}
@@ -42,7 +42,7 @@ export function HeroSection({ series }: HeroSectionProps) {
       </div>
 
       {/* Overlay gradient */}
-      <div className="absolute inset-0 bg-gradient-to-b from-background/50 to-background" />
+      <div className="absolute inset-0 bg-gradient-to-b from-background/70 to-background backdrop-blur-sm" />
 
       {/* Contenu */}
       <div className="relative h-full container flex flex-col items-center justify-center text-center space-y-2 sm:space-y-4">
diff --git a/src/components/home/MediaRow.tsx b/src/components/home/MediaRow.tsx
index b3e3d68..18f2901 100644
--- a/src/components/home/MediaRow.tsx
+++ b/src/components/home/MediaRow.tsx
@@ -130,7 +130,7 @@ function MediaCard({ item, onClick }: MediaCardProps) {
   return (
     <div
       onClick={onClick}
-      className="flex-shrink-0 w-[200px] relative flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors overflow-hidden cursor-pointer"
+      className="flex-shrink-0 w-[200px] relative flex flex-col rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground transition-colors overflow-hidden cursor-pointer"
     >
       <div className="relative aspect-[2/3] bg-muted">
         {isSeries ? (
diff --git a/src/components/layout/ClientLayout.tsx b/src/components/layout/ClientLayout.tsx
index 42e1b99..637bdb9 100644
--- a/src/components/layout/ClientLayout.tsx
+++ b/src/components/layout/ClientLayout.tsx
@@ -95,7 +95,7 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
       <DebugProvider>
-        <div className="relative min-h-screen h-full" style={backgroundStyle}>
+        <div className="relative min-h-screen bg-background" style={backgroundStyle}>
           {!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
           {!isPublicRoute && (
             <Sidebar 
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 2b66003..cc5819a 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -16,7 +16,7 @@ export function Header({ onToggleSidebar }: HeaderProps) {
   };
 
   return (
-    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 pt-safe">
+    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/70 backdrop-blur-md supports-[backdrop-filter]:bg-background/50 pt-safe">
       <div className="container flex h-14 max-w-screen-2xl items-center">
         <button
           onClick={onToggleSidebar}
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index ef35941..af634f3 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -167,7 +167,7 @@ export function Sidebar({ isOpen, onClose, initialLibraries, initialFavorites, u
       suppressHydrationWarning
       className={cn(
         "fixed left-0 top-14 z-30 h-[calc(100vh-3.5rem)] w-64 border-r border-border/40",
-        "bg-background/80 backdrop-blur-sm supports-[backdrop-filter]:bg-background/60",
+        "bg-background/70 backdrop-blur-md supports-[backdrop-filter]:bg-background/50",
         "transition-transform duration-300 ease-in-out flex flex-col",
         isOpen ? "translate-x-0" : "-translate-x-full"
       )}
diff --git a/src/components/library/PaginatedSeriesGrid.tsx b/src/components/library/PaginatedSeriesGrid.tsx
index 90d4e16..a02ea8b 100644
--- a/src/components/library/PaginatedSeriesGrid.tsx
+++ b/src/components/library/PaginatedSeriesGrid.tsx
@@ -124,7 +124,7 @@ export function PaginatedSeriesGrid({
         {/* Loading indicator */}
         {isChangingPage && (
           <div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm z-10">
-            <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-background border shadow-sm">
+            <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-background/70 backdrop-blur-md border shadow-sm">
               <Loader2 className="h-4 w-4 animate-spin" />
               <span className="text-sm">{t("sidebar.libraries.loading")}</span>
             </div>
diff --git a/src/components/reader/BookReader.tsx b/src/components/reader/BookReader.tsx
index 50fec82..6ea1c16 100644
--- a/src/components/reader/BookReader.tsx
+++ b/src/components/reader/BookReader.tsx
@@ -98,12 +98,12 @@ export function BookReader({ book, pages, onClose, nextBook }: BookReaderProps)
         <div className="relative h-full w-full flex items-center justify-center">
           {showEndMessage && (
             <div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-50">
-              <div className="bg-background border rounded-lg shadow-lg p-6 max-w-md text-center">
+              <div className="bg-background/80 backdrop-blur-md border rounded-lg shadow-lg p-6 max-w-md text-center">
                 <h3 className="text-lg font-semibold mb-2">{t("reader.endOfSeries")}</h3>
                 <p className="text-muted-foreground mb-4">{t("reader.endOfSeriesMessage")}</p>
                 <button
                   onClick={() => onClose?.(currentPage)}
-                  className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+                  className="px-4 py-2 bg-primary/90 backdrop-blur-md text-primary-foreground rounded-md hover:bg-primary/80 transition-colors"
                 >
                   {t("reader.backToSeries")}
                 </button>
diff --git a/src/components/reader/components/ControlButtons.tsx b/src/components/reader/components/ControlButtons.tsx
index 0ce8307..a522fec 100644
--- a/src/components/reader/components/ControlButtons.tsx
+++ b/src/components/reader/components/ControlButtons.tsx
@@ -53,7 +53,7 @@ export const ControlButtons = ({
             e.stopPropagation();
             onToggleDoublePage();
           }}
-          className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
+          className="p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-colors"
           aria-label={t(
             isDoublePage
               ? "reader.controls.doublePage.disable"
@@ -71,7 +71,7 @@ export const ControlButtons = ({
             e.stopPropagation();
             onToggleDirection();
           }}
-          className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
+          className="p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-colors"
           aria-label={t("reader.controls.direction.current", {
             direction: t(
               direction === "ltr"
@@ -91,7 +91,7 @@ export const ControlButtons = ({
             e.stopPropagation();
             onToggleFullscreen();
           }}
-          className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
+          className="p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-colors"
           aria-label={t(
             isFullscreen ? "reader.controls.fullscreen.exit" : "reader.controls.fullscreen.enter"
           )}
@@ -104,7 +104,7 @@ export const ControlButtons = ({
             onToggleThumbnails();
           }}
           className={cn(
-            "p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors",
+            "p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-colors",
             showThumbnails && "ring-2 ring-primary"
           )}
           aria-label={t(
@@ -113,7 +113,7 @@ export const ControlButtons = ({
         >
           <Images className="h-6 w-6" />
         </button>
-        <div className="p-2 rounded-full bg-background/50" onClick={(e) => e.stopPropagation()}>
+        <div className="p-2 rounded-full bg-background/70 backdrop-blur-md" onClick={(e) => e.stopPropagation()}>
           <PageInput
             currentPage={currentPage}
             totalPages={totalPages}
@@ -133,7 +133,7 @@ export const ControlButtons = ({
             onClose(currentPage);
           }}
           className={cn(
-            "absolute top-4 right-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-30",
+            "absolute top-4 right-4 p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-all duration-300 z-30",
             showControls ? "opacity-100" : "opacity-0 pointer-events-none"
           )}
           aria-label={t("reader.controls.close")}
@@ -150,7 +150,7 @@ export const ControlButtons = ({
             onPreviousPage();
           }}
           className={cn(
-            "absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
+            "absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-all duration-300 z-20",
             direction === "rtl" ? "right-4" : "left-4",
             showControls ? "opacity-100" : "opacity-0 pointer-events-none"
           )}
@@ -168,7 +168,7 @@ export const ControlButtons = ({
             onNextPage();
           }}
           className={cn(
-            "absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
+            "absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-all duration-300 z-20",
             direction === "rtl" ? "left-4" : "right-4",
             showControls ? "opacity-100" : "opacity-0 pointer-events-none"
           )}
diff --git a/src/components/reader/components/NavigationBar.tsx b/src/components/reader/components/NavigationBar.tsx
index 968ecc6..a6dae68 100644
--- a/src/components/reader/components/NavigationBar.tsx
+++ b/src/components/reader/components/NavigationBar.tsx
@@ -55,7 +55,7 @@ export const NavigationBar = ({
   return (
     <div
       className={cn(
-        "absolute bottom-0 left-0 right-0 bg-background/50 backdrop-blur-sm border-t border-border/40 transition-all duration-300 ease-in-out z-30",
+        "absolute bottom-0 left-0 right-0 bg-background/70 backdrop-blur-md border-t border-border/40 transition-all duration-300 ease-in-out z-30",
         showThumbnails ? "h-52 opacity-100" : "h-0 opacity-0"
       )}
     >
@@ -90,7 +90,7 @@ export const NavigationBar = ({
           </div>
 
           {showControls && (
-            <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 rounded-full bg-background/50 text-sm">
+            <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 rounded-full bg-background/70 backdrop-blur-md text-sm">
               Page {currentPage} / {pages.length}
             </div>
           )}
diff --git a/src/components/reader/components/PageInput.tsx b/src/components/reader/components/PageInput.tsx
index 9606ea8..2b6ab0b 100644
--- a/src/components/reader/components/PageInput.tsx
+++ b/src/components/reader/components/PageInput.tsx
@@ -69,7 +69,7 @@ export const PageInput = ({ currentPage, totalPages, onPageChange }: PageInputPr
             value={inputValue}
             onChange={handleChange}
             className={cn(
-              "w-12 bg-background/50 text-center rounded-md py-1 px-2",
+              "w-12 bg-background/70 backdrop-blur-md text-center rounded-md py-1 px-2",
               "focus:outline-none focus:ring-2 focus:ring-primary",
               "text-sm text-foreground"
             )}
@@ -80,7 +80,7 @@ export const PageInput = ({ currentPage, totalPages, onPageChange }: PageInputPr
           <button
             onClick={handleGoToPage}
             data-action="goto"
-            className="p-1 rounded-md bg-background/50 hover:bg-background/80 transition-colors"
+            className="p-1 rounded-md bg-background/70 backdrop-blur-md hover:bg-background/80 transition-colors"
             aria-label="Aller à cette page"
           >
             <ArrowRight className="h-4 w-4" />
diff --git a/src/components/series/PaginatedBookGrid.tsx b/src/components/series/PaginatedBookGrid.tsx
index 73b4ad7..fc08e54 100644
--- a/src/components/series/PaginatedBookGrid.tsx
+++ b/src/components/series/PaginatedBookGrid.tsx
@@ -137,7 +137,7 @@ export function PaginatedBookGrid({
         {/* Loading indicator */}
         {isChangingPage && (
           <div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm z-10">
-            <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-background border shadow-sm">
+            <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-background/70 backdrop-blur-md border shadow-sm">
               <Loader2 className="h-4 w-4 animate-spin" />
               <span className="text-sm">{t("books.loading")}</span>
             </div>
diff --git a/src/components/series/SeriesHeader.tsx b/src/components/series/SeriesHeader.tsx
index f22dfc7..5304ab4 100644
--- a/src/components/series/SeriesHeader.tsx
+++ b/src/components/series/SeriesHeader.tsx
@@ -134,7 +134,7 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
       <div className="relative container mx-auto px-4 py-8">
         <div className="flex flex-col md:flex-row gap-6 items-center md:items-start w-full">
           {/* Image principale */}
-          <div className="relative w-[180px] aspect-[2/3] rounded-lg overflow-hidden shadow-lg bg-muted flex-shrink-0">
+          <div className="relative w-[180px] aspect-[2/3] rounded-lg overflow-hidden shadow-lg bg-muted/80 backdrop-blur-md flex-shrink-0">
             <SeriesCover
               series={series as KomgaSeries}
               alt={t("series.header.coverAlt", { title: series.metadata.title })}
diff --git a/src/components/settings/BackgroundSettings.tsx b/src/components/settings/BackgroundSettings.tsx
index 9efb2f8..8fd9227 100644
--- a/src/components/settings/BackgroundSettings.tsx
+++ b/src/components/settings/BackgroundSettings.tsx
@@ -94,7 +94,7 @@ export function BackgroundSettings() {
   };
 
   return (
-    <div className="rounded-lg border bg-card text-card-foreground shadow-sm">
+    <div className="rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm">
       <div className="p-5 space-y-6">
         <div>
           <h2 className="text-xl font-semibold flex items-center gap-2">
diff --git a/src/components/settings/CacheSettings.tsx b/src/components/settings/CacheSettings.tsx
index 2b9617f..e2fe977 100644
--- a/src/components/settings/CacheSettings.tsx
+++ b/src/components/settings/CacheSettings.tsx
@@ -186,7 +186,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
   };
 
   return (
-    <div className="rounded-lg border bg-card text-card-foreground shadow-sm">
+    <div className="rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm">
       <div className="p-5 space-y-4">
         <div>
           <h2 className="text-xl font-semibold flex items-center gap-2">
@@ -205,7 +205,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
         </div>
 
         {/* Informations sur la taille du cache */}
-        <div className="rounded-md border bg-muted/50 p-4 space-y-3">
+        <div className="rounded-md border bg-muted/50 backdrop-blur-md p-4 space-y-3">
           <div className="flex items-center gap-2 font-medium">
             <HardDrive className="h-4 w-4" />
             {t("settings.cache.size.title")}
@@ -255,7 +255,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
                 min="1"
                 value={ttlConfig.defaultTTL}
                 onChange={handleTTLChange}
-                className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
               />
             </div>
             <div className="space-y-2">
@@ -269,7 +269,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
                 min="1"
                 value={ttlConfig.homeTTL}
                 onChange={handleTTLChange}
-                className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
               />
             </div>
             <div className="space-y-2">
@@ -283,7 +283,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
                 min="1"
                 value={ttlConfig.librariesTTL}
                 onChange={handleTTLChange}
-                className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
               />
             </div>
             <div className="space-y-2">
@@ -297,7 +297,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
                 min="1"
                 value={ttlConfig.seriesTTL}
                 onChange={handleTTLChange}
-                className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
               />
             </div>
             <div className="space-y-2">
@@ -311,7 +311,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
                 min="1"
                 value={ttlConfig.booksTTL}
                 onChange={handleTTLChange}
-                className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
               />
             </div>
             <div className="space-y-2">
@@ -325,14 +325,14 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
                 min="1"
                 value={ttlConfig.imagesTTL}
                 onChange={handleTTLChange}
-                className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
               />
             </div>
           </div>
           <div className="flex gap-3">
             <button
               type="submit"
-              className="flex-1 inline-flex items-center justify-center rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 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="flex-1 inline-flex items-center justify-center rounded-md bg-primary/90 backdrop-blur-md px-3 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
             >
               {t("settings.cache.buttons.saveTTL")}
             </button>
@@ -340,7 +340,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
               type="button"
               onClick={handleClearCache}
               disabled={isCacheClearing}
-              className="flex-1 inline-flex items-center justify-center rounded-md bg-destructive px-3 py-2 text-sm font-medium text-destructive-foreground ring-offset-background transition-colors hover:bg-destructive/90 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="flex-1 inline-flex items-center justify-center rounded-md bg-destructive/90 backdrop-blur-md px-3 py-2 text-sm font-medium text-destructive-foreground ring-offset-background transition-colors hover:bg-destructive/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
             >
               {isCacheClearing ? (
                 <>
@@ -357,7 +357,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
               type="button"
               onClick={handleClearServiceWorkerCache}
               disabled={isServiceWorkerClearing}
-              className="flex-1 inline-flex items-center justify-center rounded-md bg-destructive px-3 py-2 text-sm font-medium text-destructive-foreground ring-offset-background transition-colors hover:bg-destructive/90 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="flex-1 inline-flex items-center justify-center rounded-md bg-destructive/90 backdrop-blur-md px-3 py-2 text-sm font-medium text-destructive-foreground ring-offset-background transition-colors hover:bg-destructive/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
             >
               {isServiceWorkerClearing ? (
                 <>
diff --git a/src/components/settings/DisplaySettings.tsx b/src/components/settings/DisplaySettings.tsx
index 53a3ae6..78eb334 100644
--- a/src/components/settings/DisplaySettings.tsx
+++ b/src/components/settings/DisplaySettings.tsx
@@ -27,7 +27,7 @@ export function DisplaySettings() {
   };
 
   return (
-    <div className="rounded-lg border bg-card text-card-foreground shadow-sm">
+    <div className="rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm">
       <div className="p-5 space-y-4">
         <div>
           <h2 className="text-xl font-semibold flex items-center gap-2">
diff --git a/src/components/settings/KomgaSettings.tsx b/src/components/settings/KomgaSettings.tsx
index ba623b2..47e7275 100644
--- a/src/components/settings/KomgaSettings.tsx
+++ b/src/components/settings/KomgaSettings.tsx
@@ -144,7 +144,7 @@ export function KomgaSettings({ initialConfig }: KomgaSettingsProps) {
   };
 
   return (
-    <div className="rounded-lg border bg-card text-card-foreground shadow-sm">
+    <div className="rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm">
       <div className="p-5 space-y-4">
         <div>
           <h2 className="text-xl font-semibold flex items-center gap-2">
@@ -173,7 +173,7 @@ export function KomgaSettings({ initialConfig }: KomgaSettingsProps) {
             <button
               type="button"
               onClick={() => setIsEditingConfig(true)}
-              className="inline-flex items-center justify-center rounded-md bg-secondary px-3 py-2 text-sm font-medium text-secondary-foreground ring-offset-background transition-colors hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              className="inline-flex items-center justify-center rounded-md bg-secondary/80 backdrop-blur-md px-3 py-2 text-sm font-medium text-secondary-foreground ring-offset-background transition-colors hover:bg-secondary/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
             >
               {t("settings.komga.buttons.edit")}
             </button>
@@ -192,7 +192,7 @@ export function KomgaSettings({ initialConfig }: KomgaSettingsProps) {
                   required
                   value={config.serverUrl}
                   onChange={handleInputChange}
-                  className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                 />
               </div>
               <div className="space-y-2">
@@ -206,7 +206,7 @@ export function KomgaSettings({ initialConfig }: KomgaSettingsProps) {
                   required
                   value={config.username}
                   onChange={handleInputChange}
-                  className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                 />
               </div>
               <div className="space-y-2">
@@ -220,7 +220,7 @@ export function KomgaSettings({ initialConfig }: KomgaSettingsProps) {
                   required
                   value={config.password}
                   onChange={handleInputChange}
-                  className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                 />
               </div>
             </div>
@@ -228,7 +228,7 @@ export function KomgaSettings({ initialConfig }: KomgaSettingsProps) {
               <button
                 type="submit"
                 disabled={isSaving}
-                className="flex-1 inline-flex items-center justify-center rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 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="flex-1 inline-flex items-center justify-center rounded-md bg-primary/90 backdrop-blur-md px-3 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
               >
                 {isSaving ? (
                   <>
diff --git a/src/components/skeletons/BookSkeleton.tsx b/src/components/skeletons/BookSkeleton.tsx
index 5ac7b66..84a8b2b 100644
--- a/src/components/skeletons/BookSkeleton.tsx
+++ b/src/components/skeletons/BookSkeleton.tsx
@@ -1,15 +1,15 @@
 export function BookSkeleton() {
   return (
-    <div className="fixed inset-0 bg-background flex items-center justify-center">
+    <div className="fixed inset-0 bg-background/80 backdrop-blur-md flex items-center justify-center">
       <div className="w-full h-full max-w-6xl mx-auto flex flex-col items-center justify-center space-y-4">
         {/* Barre de navigation */}
-        <div className="w-full h-12 bg-muted rounded animate-pulse" />
+        <div className="w-full h-12 bg-muted/80 backdrop-blur-md rounded animate-pulse" />
 
         {/* Page du livre */}
-        <div className="w-full flex-1 bg-muted rounded animate-pulse" />
+        <div className="w-full flex-1 bg-muted/80 backdrop-blur-md rounded animate-pulse" />
 
         {/* Barre de contrôles */}
-        <div className="w-full h-16 bg-muted rounded animate-pulse" />
+        <div className="w-full h-16 bg-muted/80 backdrop-blur-md rounded animate-pulse" />
       </div>
     </div>
   );
diff --git a/src/components/ui/ErrorMessage.tsx b/src/components/ui/ErrorMessage.tsx
index bf58f12..0c9337b 100644
--- a/src/components/ui/ErrorMessage.tsx
+++ b/src/components/ui/ErrorMessage.tsx
@@ -53,7 +53,7 @@ export const ErrorMessage = ({
     <div
       role="alert"
       aria-live="assertive"
-      className="relative overflow-hidden rounded-lg border border-destructive/50 bg-background p-6 shadow-lg dark:border-destructive/30 dark:bg-destructive/5"
+      className="relative overflow-hidden rounded-lg border border-destructive/50 bg-background/80 backdrop-blur-md p-6 shadow-lg dark:border-destructive/30 dark:bg-destructive/5"
     >
       <div className="absolute inset-0 bg-destructive/5 dark:bg-gradient-to-b dark:from-destructive/10 dark:to-destructive/5" />
 
diff --git a/src/components/ui/InstallPWA.tsx b/src/components/ui/InstallPWA.tsx
index ae37838..e3c2393 100644
--- a/src/components/ui/InstallPWA.tsx
+++ b/src/components/ui/InstallPWA.tsx
@@ -102,7 +102,7 @@ export function InstallPWA() {
 
   return (
     <div className="fixed bottom-4 left-4 right-4 sm:left-auto sm:right-4 z-50">
-      <div className="bg-card border shadow-lg rounded-lg p-4 max-w-sm mx-auto sm:mx-0">
+      <div className="bg-card/80 backdrop-blur-md border shadow-lg rounded-lg p-4 max-w-sm mx-auto sm:mx-0">
         <div className="flex items-start gap-4">
           <Download className="h-6 w-6 flex-shrink-0 text-primary" />
           <div className="flex-1">
@@ -120,7 +120,7 @@ export function InstallPWA() {
             ) : (
               <button
                 onClick={handleInstallClick}
-                className="w-full bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors"
+                className="w-full bg-primary/90 backdrop-blur-md text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/80 transition-colors"
               >
                 Installer l'application
               </button>
@@ -128,7 +128,7 @@ export function InstallPWA() {
           </div>
           <button
             onClick={handleDismiss}
-            className="p-1 hover:bg-accent hover:text-accent-foreground rounded-md transition-colors"
+            className="p-1 hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground rounded-md transition-colors"
             aria-label="Fermer"
           >
             <X className="h-4 w-4" />
diff --git a/src/components/ui/NetworkStatus.tsx b/src/components/ui/NetworkStatus.tsx
index 391ab9c..c6c9334 100644
--- a/src/components/ui/NetworkStatus.tsx
+++ b/src/components/ui/NetworkStatus.tsx
@@ -9,7 +9,7 @@ export function NetworkStatus() {
   if (isOnline) return null;
 
   return (
-    <div className="fixed bottom-4 left-4 z-[100] flex items-center gap-2 rounded-lg bg-destructive px-4 py-2 text-sm text-destructive-foreground shadow-lg">
+    <div className="fixed bottom-4 left-4 z-[100] flex items-center gap-2 rounded-lg bg-destructive/90 backdrop-blur-md px-4 py-2 text-sm text-destructive-foreground shadow-lg">
       <WifiOff className="h-4 w-4" />
       <span>Hors ligne</span>
     </div>
diff --git a/src/components/ui/Pagination.tsx b/src/components/ui/Pagination.tsx
index 3e8c1e0..8c3456d 100644
--- a/src/components/ui/Pagination.tsx
+++ b/src/components/ui/Pagination.tsx
@@ -61,7 +61,7 @@ export function Pagination({ currentPage, totalPages, onPageChange, className }:
       <button
         onClick={() => onPageChange(currentPage - 1)}
         disabled={currentPage === 1}
-        className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 gap-1 hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+        className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 gap-1 hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
         aria-label="Page précédente"
       >
         <ChevronLeft className="h-4 w-4" />
@@ -87,8 +87,8 @@ export function Pagination({ currentPage, totalPages, onPageChange, className }:
               className={cn(
                 "inline-flex items-center justify-center rounded-md text-sm font-medium h-10 w-10",
                 page === currentPage
-                  ? "bg-primary text-primary-foreground"
-                  : "hover:bg-accent hover:text-accent-foreground"
+                  ? "bg-primary/90 backdrop-blur-md text-primary-foreground"
+                  : "hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground"
               )}
               aria-label={`Page ${page}`}
               aria-current={page === currentPage ? "page" : undefined}
@@ -103,7 +103,7 @@ export function Pagination({ currentPage, totalPages, onPageChange, className }:
       <button
         onClick={() => onPageChange(currentPage + 1)}
         disabled={currentPage === totalPages}
-        className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 gap-1 hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+        className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 gap-1 hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
         aria-label="Page suivante"
       >
         <span className="sr-only md:not-sr-only">Suivant</span>
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index 6ceecf7..124de13 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -36,7 +36,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background/80 backdrop-blur-md p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 9ec9a1a..90911e1 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -9,11 +9,11 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+          "border-transparent bg-primary/90 backdrop-blur-md text-primary-foreground hover:bg-primary/70",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "border-transparent bg-secondary/80 backdrop-blur-md text-secondary-foreground hover:bg-secondary/70",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+          "border-transparent bg-destructive/90 backdrop-blur-md text-destructive-foreground hover:bg-destructive/70",
         outline: "text-foreground",
       },
     },
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index b16205e..763dff4 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -8,11 +8,11 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/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",
+        default: "bg-primary/90 backdrop-blur-md text-primary-foreground hover:bg-primary/80",
+        destructive: "bg-destructive/90 backdrop-blur-md text-destructive-foreground hover:bg-destructive/80",
+        outline: "border border-input bg-background/70 backdrop-blur-md hover:bg-accent/80 hover:text-accent-foreground",
+        secondary: "bg-secondary/80 backdrop-blur-md text-secondary-foreground hover:bg-secondary/70",
+        ghost: "hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index b81ed0e..ba29868 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+      className={cn("rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm", className)}
       {...props}
     />
   )
diff --git a/src/components/ui/cover-client.tsx b/src/components/ui/cover-client.tsx
index 21264a9..920fd9a 100644
--- a/src/components/ui/cover-client.tsx
+++ b/src/components/ui/cover-client.tsx
@@ -55,7 +55,7 @@ export const CoverClient = ({
 
   if (imageError) {
     return (
-      <div className="w-full h-full flex items-center justify-center bg-muted rounded-lg">
+      <div className="w-full h-full flex items-center justify-center bg-muted/80 backdrop-blur-md rounded-lg">
         <ImageOff className="w-12 h-12 text-muted-foreground" />
       </div>
     );
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index b7d4880..17d24e7 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background/80 backdrop-blur-md p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 20b0e3c..60eeb62 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -46,7 +46,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover/80 backdrop-blur-md p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -63,7 +63,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover/80 backdrop-blur-md p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index a4f7d29..d6ea7b6 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
diff --git a/src/components/ui/progress-bar.tsx b/src/components/ui/progress-bar.tsx
index 871d467..9e58bc7 100644
--- a/src/components/ui/progress-bar.tsx
+++ b/src/components/ui/progress-bar.tsx
@@ -11,7 +11,7 @@ export function ProgressBar({ progress, total, type }: ProgressBarProps) {
     ? "bg-gradient-to-r from-purple-500 to-pink-500" 
     : "bg-gradient-to-r from-blue-500 to-cyan-500";
   return (
-    <div className="absolute bottom-0 left-0 right-0 px-3 py-2 bg-black/50 backdrop-blur-sm border-t border-white/10">
+    <div className="absolute bottom-0 left-0 right-0 px-3 py-2 bg-black/70 backdrop-blur-md border-t border-white/10">
       <div className="h-2 bg-white/30 rounded-full overflow-hidden">
         <div
           className={`h-full transition-all duration-300 ${barColor}`}
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
index 1741cd2..6b668f7 100644
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -15,7 +15,7 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="h-full w-full flex-1 bg-primary/90 backdrop-blur-md transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index a85ac64..d772aaa 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className
     )}
     {...props}
@@ -40,7 +40,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover/80 backdrop-blur-md text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index a9d9298..82fe10d 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -37,7 +37,7 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+    className={cn("border-t bg-muted/50 backdrop-blur-md font-medium [&>tr]:last:border-b-0", className)}
     {...props}
   />
 ));
@@ -48,7 +48,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
     <tr
       ref={ref}
       className={cn(
-        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        "border-b transition-colors hover:bg-muted/50 hover:backdrop-blur-md data-[state=selected]:bg-muted/80 data-[state=selected]:backdrop-blur-md",
         className
       )}
       {...props}
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index ac60b17..0140a37 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -61,7 +61,7 @@ const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(({ className, .
   <div
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted/80 backdrop-blur-md p-1 text-muted-foreground",
       className
     )}
     {...props}
@@ -87,7 +87,7 @@ const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
         aria-selected={isSelected}
         className={cn(
           "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-          isSelected && "bg-background text-foreground shadow-sm",
+          isSelected && "bg-background/90 backdrop-blur-md text-foreground shadow-sm",
           className
         )}
         onClick={() => onValueChange(value)}
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index fdc3825..da20cb0 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -27,9 +27,9 @@ const toastVariants = cva(
   {
     variants: {
       variant: {
-        default: "border border-border/40 bg-background/60 text-foreground shadow-lg",
+        default: "border border-border/40 bg-background/70 backdrop-blur-md text-foreground shadow-lg",
         destructive:
-          "destructive group border-destructive/20 bg-destructive/60 text-destructive-foreground font-medium",
+          "destructive group border-destructive/20 bg-destructive/70 backdrop-blur-md text-destructive-foreground font-medium",
       },
     },
     defaultVariants: {
diff --git a/src/styles/globals.css b/src/styles/globals.css
index a8ad966..b0ee781 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -88,7 +88,7 @@ body {
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply text-foreground;
   }
 }
 
@@ -105,4 +105,15 @@ body {
   .pt-safe {
     padding-top: env(safe-area-inset-top, 0);
   }
+
+  /* Glassmorphism utilities */
+  .glass {
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+  
+  .glass-strong {
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+  }
 }