diff --git a/page/src/App.css b/page/src/App.css
index 90760041..d45c5c70 100644
--- a/page/src/App.css
+++ b/page/src/App.css
@@ -142,3 +142,12 @@ button.fancy.bg-secondary:hover {
   backdrop-filter: blur(6px) brightness(0.8) saturate(1.3);
   background: transparent;
 }
+/*
+.folder-element .folder-icon {
+  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
+}
+
+.folder-element:hover .folder-icon {
+  filter: drop-shadow(0px 0px 5px rgba(80, 80, 80, 0.4));
+}
+*/
diff --git a/page/src/components/folder.tsx b/page/src/components/folder.tsx
index d881ec4c..36af18e8 100644
--- a/page/src/components/folder.tsx
+++ b/page/src/components/folder.tsx
@@ -63,7 +63,7 @@ function getIcon(
     return (
       <div className={className}>
         <div className="w-full h-full flex items-center">
-          <img className="rounded-sm" src={icon} />
+          <img className="rounded-lg folder-icon" src={icon} />
         </div>
       </div>
     );