diff --git a/apps/stage-web/src/components/Menu/IconItem.vue b/apps/stage-web/src/components/Menu/IconItem.vue
index a29b6a094..d30806551 100644
--- a/apps/stage-web/src/components/Menu/IconItem.vue
+++ b/apps/stage-web/src/components/Menu/IconItem.vue
@@ -12,7 +12,7 @@ defineProps<{
   <RouterLink
     flex="~ row"
     bg="neutral-50 dark:neutral-800"
-    border="neutral-100 dark:neutral-700 hover:primary-500 dark:hover:primary-400 solid 2"
+    border="neutral-100 dark:neutral-700 hover:primary-500/30 dark:hover:primary-400/30 solid 2"
     drop-shadow="none hover:[0px_4px_4px_rgba(220,220,220,0.4)] active:[0px_0px_0px_rgba(220,220,220,0.25)] dark:hover:none"
     class="menu-icon-item"
     transition="all ease-in-out duration-200"
@@ -48,24 +48,47 @@ defineProps<{
 </template>
 
 <style scoped>
-.menu-icon-item::after {
-  --at-apply: 'bg-dotted-[neutral-200] hover:bg-dotted-[primary-300/50] dark:bg-dotted-[neutral-700/80] dark:hover:bg-dotted-[primary-200/20]';
+.menu-icon-item {
+  position: relative;
+  overflow: hidden;
+}
+
+.menu-icon-item::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/0 to-primary-500/0 dark:from-primary-400/0 dark:to-primary-400/0';
+  content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
+  width: 0%;
+  height: 100%;
+  transition: all 0.35s ease-in-out;
+  mask-image: linear-gradient(120deg, white 30%, transparent 50%);
+}
+
+.menu-icon-item:hover::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
+  width: 85%;
+}
+
+.menu-icon-item::after {
+  --at-apply: 'bg-dotted-[neutral-200/80] hover:bg-dotted-[primary-300/50] dark:bg-dotted-[neutral-700/50] dark:hover:bg-dotted-[primary-200/20]';
+  position: absolute;
+  inset: 0;
+  z-index: -2;
   width: 100%;
   height: 100%;
   background-size: 10px 10px;
   content: '';
   mask-image: linear-gradient(165deg, white 30%, transparent 50%);
+  transition: all 0.35s ease-in-out;
 }
 
 .menu-icon-item:hover .menu-icon-item-title {
-  --at-apply: text-primary-500;
+  --at-apply: text-primary-600;
 }
 
 .menu-icon-item:hover .menu-icon-item-description {
-  --at-apply: text-primary-500;
+  --at-apply: text-primary-600;
   opacity: 0.8;
 }
 
@@ -76,11 +99,11 @@ defineProps<{
 }
 
 .dark .menu-icon-item:hover .menu-icon-item-title {
-  --at-apply: text-primary-400;
+  --at-apply: text-primary-300;
 }
 
 .dark .menu-icon-item:hover .menu-icon-item-description {
-  --at-apply: text-primary-400;
+  --at-apply: text-primary-300;
   opacity: 0.8;
 }
 
diff --git a/apps/stage-web/src/components/Menu/IconStatusItem.vue b/apps/stage-web/src/components/Menu/IconStatusItem.vue
index fd79abf2a..76be5d475 100644
--- a/apps/stage-web/src/components/Menu/IconStatusItem.vue
+++ b/apps/stage-web/src/components/Menu/IconStatusItem.vue
@@ -14,7 +14,7 @@ const props = defineProps<{
   <div
     flex="~ col"
     bg="neutral-200/50 dark:neutral-700"
-    border="neutral-100 dark:neutral-700 hover:primary-500 dark:hover:primary-400 solid 2"
+    border="neutral-100 dark:neutral-700 hover:primary-500/30 dark:hover:primary-400/30 solid 2"
     drop-shadow="none hover:[0px_4px_4px_rgba(220,220,220,0.4)] active:[0px_0px_0px_rgba(220,220,220,0.25)] dark:hover:none"
     class="menu-icon-status-item"
     transition="all ease-in-out duration-200"
@@ -22,6 +22,7 @@ const props = defineProps<{
   >
     <RouterLink
       flex="~ row"
+      class="menu-icon-status-item-link"
       bg="neutral-50 dark:neutral-800"
       transition="all ease-in-out duration-200"
       relative w-full items-center overflow-hidden rounded-lg p-5 text-left
@@ -81,24 +82,47 @@ const props = defineProps<{
 </template>
 
 <style scoped>
-.menu-icon-status-item::after {
-  --at-apply: 'bg-dotted-[neutral-200] hover:bg-dotted-[primary-300/50] dark:bg-dotted-[neutral-700/80] dark:hover:bg-dotted-[primary-200/20]';
+.menu-icon-status-item {
+  position: relative;
+  overflow: hidden;
+}
+
+.menu-icon-status-item::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/0 to-primary-500/0 dark:from-primary-400/0 dark:to-primary-400/0';
+  content: '';
   position: absolute;
   inset: 0;
-  z-index: -1;
+  z-index: 0;
+  width: 0%;
+  height: 100%;
+  transition: all 0.35s ease-in-out;
+  mask-image: linear-gradient(120deg, white 100%);
+}
+
+.menu-icon-status-item:hover::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
+  width: 50%;
+}
+
+.menu-icon-status-item-link::after {
+  --at-apply: 'bg-dotted-[neutral-200/80] hover:bg-dotted-[primary-300/50] dark:bg-dotted-[neutral-700/50] dark:hover:bg-dotted-[primary-200/20]';
+  position: absolute;
+  inset: 0;
+  z-index: -2;
   width: 100%;
   height: 100%;
   background-size: 10px 10px;
   content: '';
   mask-image: linear-gradient(165deg, white 30%, transparent 50%);
+  transition: all 0.35s ease-in-out;
 }
 
 .menu-icon-status-item:hover .menu-icon-status-item-title {
-  --at-apply: text-primary-500;
+  --at-apply: text-primary-600;
 }
 
 .menu-icon-status-item:hover .menu-icon-status-item-description {
-  --at-apply: text-primary-500;
+  --at-apply: text-primary-600;
   opacity: 0.8;
 }
 
@@ -106,25 +130,14 @@ const props = defineProps<{
   --at-apply: text-primary-500;
   scale: 1.2;
   opacity: 0.2;
-  filter: grayscale(0);
-}
-
-.menu-icon-status-item:hover .menu-icon-status-item-icon-color {
-  scale: 1.2;
-  filter: grayscale(0);
-}
-
-.menu-icon-status-item:hover .menu-icon-status-item-icon-image {
-  scale: 1.2;
-  filter: grayscale(0);
 }
 
 .dark .menu-icon-status-item:hover .menu-icon-status-item-title {
-  --at-apply: text-primary-400;
+  --at-apply: text-primary-300;
 }
 
 .dark .menu-icon-status-item:hover .menu-icon-status-item-description {
-  --at-apply: text-primary-400;
+  --at-apply: text-primary-300;
   opacity: 0.8;
 }