diff --git a/web/bun.lockb b/web/bun.lockb
index 84d2b9b..407add8 100755
Binary files a/web/bun.lockb and b/web/bun.lockb differ
diff --git a/web/package.json b/web/package.json
index c82976a..a872d85 100644
--- a/web/package.json
+++ b/web/package.json
@@ -13,10 +13,10 @@
   "dependencies": {
     "@headlessui/react": "^2.1.10",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@tabler/icons-react": "^3.14.0",
     "caniuse-lite": "^1.0.30001698",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
+    "lucide-react": "^0.475.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwind-merge": "^2.5.2",
diff --git a/web/src/components/CodeBlock.tsx b/web/src/components/CodeBlock.tsx
index 4de3fe1..6f14f63 100644
--- a/web/src/components/CodeBlock.tsx
+++ b/web/src/components/CodeBlock.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, useState } from "react";
 import { theme } from "../theme";
-import { IconCheck, IconClipboard } from "@tabler/icons-react";
+import { Clipboard, ClipboardCheck } from "lucide-react";
 
 export function CodeBlock({
   children,
@@ -29,7 +29,7 @@ export function CodeBlock({
       {enableCopy &&
         navigator.clipboard &&
         (copySuccess ? (
-          <IconCheck
+          <ClipboardCheck
             className={`absolute right-3 size-7 bg-${theme}-100 py-1 pl-2 dark:bg-${theme}-950`}
           />
         ) : (
@@ -37,7 +37,7 @@ export function CodeBlock({
             className={`duration-50 absolute right-3 bg-${theme}-100 py-1 pl-2 opacity-0 transition-opacity group-hover:opacity-100 dark:bg-${theme}-950`}
             onClick={handleCopy(`docker pull ${children}`)}
           >
-            <IconClipboard className="size-5" />
+            <Clipboard className="size-5" />
           </button>
         ))}
     </div>
diff --git a/web/src/components/Image.tsx b/web/src/components/Image.tsx
index c1e6a14..f2d161b 100644
--- a/web/src/components/Image.tsx
+++ b/web/src/components/Image.tsx
@@ -5,19 +5,11 @@ import {
   DialogPanel,
   DialogTitle,
 } from "@headlessui/react";
-import {
-  IconAlertTriangleFilled,
-  IconCircleArrowUpFilled,
-  IconCircleCheckFilled,
-  IconCube,
-  IconHelpCircleFilled,
-  IconStopwatch,
-  IconX,
-} from "@tabler/icons-react";
 import { WithTooltip } from "./Tooltip";
 import type { Image } from "../types";
 import { theme } from "../theme";
 import { CodeBlock } from "./CodeBlock";
+import { Box, CircleArrowUp, CircleCheck, HelpCircle, Timer, TriangleAlert, X } from "lucide-react";
 
 const clickable_registries = [
   "registry-1.docker.io",
@@ -53,7 +45,7 @@ export default function Image({ data }: { data: Image }) {
     <>
       <button onClick={handleOpen} className="w-full">
         <li className="flex items-center gap-4 break-all px-6 py-4 text-start">
-          <IconCube className="size-6 shrink-0" />
+          <Box className="size-6 shrink-0" />
           {data.reference}
           <Icon data={data} />
         </li>
@@ -73,7 +65,7 @@ export default function Image({ data }: { data: Image }) {
                 className={`flex flex-col gap-3 px-6 py-4 text-${theme}-400 dark:text-${theme}-600`}
               >
                 <div className="mb-4 flex items-center gap-3">
-                  <IconCube className="size-6 shrink-0 text-black dark:text-white" />
+                  <Box className="size-6 shrink-0 text-black dark:text-white" />
                   <DialogTitle className="text-black dark:text-white">
                     {url ? (
                       <>
@@ -103,21 +95,21 @@ export default function Image({ data }: { data: Image }) {
                     )}
                   </DialogTitle>
                   <button onClick={handleClose} className="ml-auto">
-                    <IconX className="size-6 shrink-0 text-gray-500" />
+                    <X className="size-6 shrink-0 text-gray-500" />
                   </button>
                 </div>
                 <div className="flex items-center gap-3">
                   <DialogIcon data={data} />
                 </div>
                 <div className="mb-4 flex items-center gap-3">
-                  <IconStopwatch className="size-6 shrink-0 text-gray-500" />
+                  <Timer className="size-6 shrink-0 text-gray-500" />
                   <span>
                     Checked in <b>{data.time}</b> ms
                   </span>
                 </div>
                 {data.result.error && (
                   <div className="break-before mb-4 flex items-center gap-3 overflow-hidden rounded-md bg-yellow-400/10 px-3 py-2">
-                    <IconAlertTriangleFilled className="size-6 shrink-0 text-yellow-500" />
+                    <TriangleAlert className="size-6 shrink-0 text-yellow-500" />
                     {data.result.error}
                   </div>
                 )}
@@ -164,7 +156,7 @@ function Icon({ data }: { data: Image }) {
           text="Unknown"
           className="ml-auto size-6 shrink-0 text-gray-500"
         >
-          <IconHelpCircleFilled />
+          <HelpCircle />
         </WithTooltip>
       );
     case false:
@@ -173,7 +165,7 @@ function Icon({ data }: { data: Image }) {
           text="Up to date"
           className="ml-auto size-6 shrink-0 text-green-500"
         >
-          <IconCircleCheckFilled />
+          <CircleCheck />
         </WithTooltip>
       );
     case true:
@@ -185,7 +177,7 @@ function Icon({ data }: { data: Image }) {
                 text="Major Update"
                 className="ml-auto size-6 shrink-0 text-red-500"
               >
-                <IconCircleArrowUpFilled />
+                <CircleArrowUp />
               </WithTooltip>
             );
           case "minor":
@@ -194,7 +186,7 @@ function Icon({ data }: { data: Image }) {
                 text="Minor Update"
                 className="ml-auto size-6 shrink-0 text-yellow-500"
               >
-                <IconCircleArrowUpFilled />
+                <CircleArrowUp />
               </WithTooltip>
             );
           case "patch":
@@ -203,7 +195,7 @@ function Icon({ data }: { data: Image }) {
                 text="Patch Update"
                 className="ml-auto size-6 shrink-0 text-blue-500"
               >
-                <IconCircleArrowUpFilled />
+                <CircleArrowUp />
               </WithTooltip>
             );
         }
@@ -213,7 +205,7 @@ function Icon({ data }: { data: Image }) {
             text="Update available"
             className="ml-auto size-6 shrink-0 text-blue-500"
           >
-            <IconCircleArrowUpFilled />
+            <CircleArrowUp />
           </WithTooltip>
         );
       }
@@ -225,14 +217,14 @@ function DialogIcon({ data }: { data: Image }) {
     case null:
       return (
         <>
-          <IconHelpCircleFilled className="size-6 shrink-0 text-gray-500" />
+          <HelpCircle className="size-6 shrink-0 text-gray-500" />
           Unknown
         </>
       );
     case false:
       return (
         <>
-          <IconCircleCheckFilled className="size-6 shrink-0 text-green-500" />
+          <CircleCheck className="size-6 shrink-0 text-green-500" />
           Up to date
         </>
       );
@@ -242,21 +234,21 @@ function DialogIcon({ data }: { data: Image }) {
           case "major":
             return (
               <>
-                <IconCircleArrowUpFilled className="size-6 shrink-0 text-red-500" />
+                <CircleArrowUp className="size-6 shrink-0 text-red-500" />
                 Major update
               </>
             );
           case "minor":
             return (
               <>
-                <IconCircleArrowUpFilled className="size-6 shrink-0 text-yellow-500" />
+                <CircleArrowUp className="size-6 shrink-0 text-yellow-500" />
                 Minor update
               </>
             );
           case "patch":
             return (
               <>
-                <IconCircleArrowUpFilled className="size-6 shrink-0 text-blue-500" />
+                <CircleArrowUp className="size-6 shrink-0 text-blue-500" />
                 Patch update
               </>
             );
@@ -264,7 +256,7 @@ function DialogIcon({ data }: { data: Image }) {
       } else if (data.result.info?.type === "digest") {
         return (
           <>
-            <IconCircleArrowUpFilled className="size-6 shrink-0 text-blue-500" />
+            <CircleArrowUp className="size-6 shrink-0 text-blue-500" />
             Update available
           </>
         );
diff --git a/web/src/components/Loading.tsx b/web/src/components/Loading.tsx
index 907e337..67fe256 100644
--- a/web/src/components/Loading.tsx
+++ b/web/src/components/Loading.tsx
@@ -1,7 +1,7 @@
-import { IconLoader2 } from "@tabler/icons-react";
 import { Data } from "../types";
 import Logo from "./Logo";
 import { theme } from "../theme";
+import { RefreshCw } from "lucide-react";
 
 export default function Loading({ onLoad }: { onLoad: (data: Data) => void }) {
   fetch(
@@ -28,7 +28,7 @@ export default function Loading({ onLoad }: { onLoad: (data: Data) => void }) {
           <div
             className={`flex h-full items-center justify-center gap-1 text-${theme}-500 dark:text-${theme}-400`}
           >
-            Loading <IconLoader2 className="animate-spin" />
+            Loading <RefreshCw className="animate-spin" />
           </div>
         </div>
       </div>
diff --git a/web/src/components/Search.tsx b/web/src/components/Search.tsx
index b4cd82a..ee221a9 100644
--- a/web/src/components/Search.tsx
+++ b/web/src/components/Search.tsx
@@ -1,6 +1,6 @@
 import { ChangeEvent, useState } from "react";
 import { theme } from "../theme";
-import { IconSearch, IconX } from "@tabler/icons-react";
+import { SearchIcon, X } from "lucide-react";
 
 export default function Search({
   onChange,
@@ -27,7 +27,7 @@ export default function Search({
       <div
         className={`flex w-full items-center rounded-md border border-${theme}-300 dark:border-${theme}-700 gap-1 px-2 bg-${theme}-200 dark:bg-${theme}-800 peer flex-nowrap`}
       >
-        <IconSearch className="size-5" />
+        <SearchIcon className="size-5" />
         <div className="w-full">
           <input
             className={`h-10 w-full text-sm text-${theme}-600 dark:text-${theme}-400 peer bg-transparent focus:outline-none placeholder:text-${theme}-500`}
@@ -41,7 +41,7 @@ export default function Search({
             onClick={handleClear}
             className={`hover:text-${theme}-600 dark:hover:text-${theme}-400`}
           >
-            <IconX className="size-5" />
+            <X className="size-5" />
           </button>
         )}
       </div>
diff --git a/web/src/components/Server.tsx b/web/src/components/Server.tsx
index c7ccb72..2669d65 100644
--- a/web/src/components/Server.tsx
+++ b/web/src/components/Server.tsx
@@ -4,7 +4,7 @@ import {
   DisclosurePanel,
 } from "@headlessui/react";
 import { theme } from "../theme";
-import { IconChevronDown } from "@tabler/icons-react";
+import { ChevronDown } from "lucide-react";
 
 export function Server({
   name,
@@ -29,7 +29,7 @@ export function Server({
         >
           {name}
         </span>
-        <IconChevronDown
+        <ChevronDown
           className={`duration-300 size-5 text-${theme}-600 transition-transform group-data-[open]:rotate-180 dark:text-${theme}-400 group-data-[hover]:text-${theme}-800 group-data-[hover]:dark:text-${theme}-200 transition-colors`}
         />
       </DisclosureButton>
diff --git a/web/src/components/Statistic.tsx b/web/src/components/Statistic.tsx
index a368c45..c76432c 100644
--- a/web/src/components/Statistic.tsx
+++ b/web/src/components/Statistic.tsx
@@ -1,9 +1,4 @@
-import {
-  IconCircleArrowUpFilled,
-  IconCircleCheckFilled,
-  IconEyeFilled,
-  IconHelpCircleFilled,
-} from "@tabler/icons-react";
+import { CircleArrowUp, CircleCheck, Eye, HelpCircle } from "lucide-react";
 import { theme } from "../theme";
 import { Data } from "../types";
 
@@ -39,14 +34,14 @@ export default function Statistic({
             {metrics[name]}
           </dd>
           {name === "monitored_images" && (
-            <IconEyeFilled className="size-6 shrink-0 text-black dark:text-white" />
+            <Eye className="size-6 shrink-0 text-black dark:text-white" />
           )}
           {name === "up_to_date" && (
-            <IconCircleCheckFilled className="size-6 shrink-0 text-green-500" />
+            <CircleCheck className="size-6 shrink-0 text-green-500" />
           )}
           {name === "updates_available" && getUpdatesAvailableIcon(metrics)}
           {name === "unknown" && (
-            <IconHelpCircleFilled className="size-6 shrink-0 text-gray-500" />
+            <HelpCircle className="size-6 shrink-0 text-gray-500" />
           )}
         </div>
       </div>
@@ -75,5 +70,5 @@ function getUpdatesAvailableIcon(metrics: Data["metrics"]) {
     default:
       color = "text-blue-500";
   }
-  return <IconCircleArrowUpFilled className={`size-6 shrink-0 ${color}`} />;
+  return <CircleArrowUp className={`size-6 shrink-0 ${color}`} />;
 }