diff --git a/src/components/categories/category-icons/category-icons.module.css b/src/components/categories/category-icons/category-icons.module.css
index ec78856..35e52d0 100644
--- a/src/components/categories/category-icons/category-icons.module.css
+++ b/src/components/categories/category-icons/category-icons.module.css
@@ -26,9 +26,9 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 50px;
-        height: 50px;
-        font-size: var(--font-lg);
+        width: 48px;
+        height: 48px;
+        font-size: var(--font-md);
         background: linear-gradient(
           var(--color-neutral-50),
           var(--color-neutral-100)
diff --git a/src/components/categories/category-icons/category-icons.tsx b/src/components/categories/category-icons/category-icons.tsx
index 55ef4c1..d526535 100644
--- a/src/components/categories/category-icons/category-icons.tsx
+++ b/src/components/categories/category-icons/category-icons.tsx
@@ -12,17 +12,17 @@ export default function CategoryIcons() {
       <div className={styles.wrapper}>
         <h3 className={styles.title}>Categories</h3>
         <div className={styles.categoryIconsWrapper}>
-          {categories.map(category => {
-            return (
-              <a href={`#category-${category.id}`} key={category.id}>
-                <Tooltip.Provider delayDuration={0}>
+          <Tooltip.Provider delayDuration={0}>
+            {categories.map(category => {
+              return (
+                <a href={`#category-${category.id}`} key={category.id}>
                   <Tooltip content={category.title} placement="bottom">
                     <div className={styles.icon}>{category.icon}</div>
                   </Tooltip>
-                </Tooltip.Provider>
-              </a>
-            );
-          })}
+                </a>
+              );
+            })}
+          </Tooltip.Provider>
         </div>
       </div>
     </Container>