diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index a5743fb1..6f715eef 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -32,9 +32,11 @@ export default function Item({ service, group }) {
   return (
     <li key={service.name}>
       <div
-        className={`${
-          hasLink ? "cursor-pointer " : " "
-        }transition-all h-15 mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative overflow-clip`}
+        className={classNames(
+          settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? '-' : ""}${settings.cardBlur}`,
+          hasLink && "cursor-pointer",
+          'transition-all h-15 mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative overflow-clip'
+        )}
       >
         <div className="flex select-none z-0">
           {service.icon &&