diff --git a/frontend/src/app/main/ui/components/search_bar.scss b/frontend/src/app/main/ui/components/search_bar.scss
index b67317ba21..e287819f37 100644
--- a/frontend/src/app/main/ui/components/search_bar.scss
+++ b/frontend/src/app/main/ui/components/search_bar.scss
@@ -56,6 +56,7 @@
   @extend .button-tag;
   border-radius: $br-8;
   height: 100%;
+  padding-right: $s-8;
   svg {
     @extend .button-icon-small;
     color: transparent;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
index 5b38aab489..2817e233d9 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
@@ -32,6 +32,11 @@
   overflow: hidden;
   cursor: pointer;
 
+  .variant-mark {
+    background-color: var(--color-background-tertiary);
+    border-radius: $br-8;
+  }
+
   .cell-name {
     @include bodySmallTypography;
     @include textEllipsis;
@@ -122,7 +127,7 @@
   align-items: center;
   column-gap: $s-8;
   height: $s-44;
-
+  padding-right: $s-4;
   padding: $s-2;
   border-radius: $br-8;
   background-color: var(--assets-item-background-color);
@@ -159,6 +164,7 @@
 
 .enum-item-with-mark {
   grid-template-columns: auto 1fr $s-24;
+  padding-right: $s-4;
 }
 
 .item-name {
@@ -224,11 +230,6 @@
   border: $s-2 solid var(--assets-item-border-color-drag);
 }
 
-.variant-mark {
-  background-color: var(--color-background-tertiary);
-  border-radius: $br-8;
-}
-
 .variant-mark-cell {
   position: absolute;
   right: $s-2;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
index bf94c33ede..9f63ad592d 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
@@ -297,7 +297,7 @@
   display: flex;
   align-items: center;
   margin-bottom: $s-4;
-  padding-right: $s-8;
+  padding-right: $s-4;
   font-size: $s-12;
   cursor: pointer;
   width: 100%;
@@ -306,6 +306,10 @@
   background-color: var(--assets-item-background-color);
   color: var(--assets-item-name-foreground-color);
 
+  .variant-icon {
+    background-color: none;
+  }
+
   .component-name {
     @include textEllipsis;
     width: 80%;
@@ -342,14 +346,14 @@
 
 .component-grid {
   display: grid;
-  grid-template-columns: repeat(2, $s-124);
-  grid-auto-rows: $s-124;
+  grid-template-columns: repeat(auto-fill, minmax($s-96, 1fr));
   gap: $s-4;
 }
 
 .grid-cell {
   @include flexCenter;
   place-items: center;
+  aspect-ratio: 1 / 1;
   flex-wrap: wrap;
   position: relative;
   padding: $s-8;
@@ -360,6 +364,10 @@
   border: $s-4 solid var(--assets-component-current-border-color);
   cursor: pointer;
 
+  .variant-icon {
+    background-color: var(--color-background-tertiary);
+  }
+
   img {
     height: auto;
     width: auto;
@@ -381,21 +389,24 @@
     @include textEllipsis;
     display: none;
     position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    padding: $s-2;
-    text-align: center;
+    left: $s-4;
+    bottom: $s-4;
+    height: calc($s-24 - $s-2);
+    width: calc(100% - 2 * $s-4);
+    padding: $s-2 $s-6;
+    column-gap: $s-4;
+    border-radius: $br-4;
+    background-color: var(--assets-item-name-background-color);
+    border: $s-1 solid transparent;
+    color: var(--assets-item-name-foreground-color);
     direction: rtl;
   }
 
   &:hover {
-    background-color: var(--assets-item-background-color-hover);
-
     .component-name {
       display: block;
       color: var(--assets-item-name-foreground-color-hover);
-      background: linear-gradient(to top, var(--assets-item-background-color-hover) 0%, transparent 100%);
+      background: var(--assets-item-background-color-hover);
     }
   }
 
@@ -439,7 +450,6 @@
 
 .component-swap {
   padding-top: $s-12;
-  max-width: $s-248;
 }
 
 .component-swap-content {
@@ -789,7 +799,6 @@
   @include flexCenter;
   height: $s-24;
   width: $s-24;
-  background-color: var(--color-background-tertiary);
   border-radius: $br-8;
   order: 3;