diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index c9717d2e2..a20913f92 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -207,6 +207,8 @@
   --assets-component-background-color-disabled: var(
     --off-white
   ); // We don't want this color to change with palette
+  --assets-component-border-color: var(--color-background-tertiary);
+  --assets-component-border-selected: var(--color-select);
 
   --radio-btns-background-color: var(--color-background-tertiary);
   --radio-btn-background-color-selected: var(--color-background-quaternary);
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
index 40cef8642..e5f1a9479 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
@@ -343,9 +343,11 @@
                              :on-change toggle-list-style
                              :name "swap-listing-style"}
            [:& radio-button {:icon i/view-as-list-refactor
+                             :icon-class (stl/css :radio-button)
                              :value "list"
                              :id "swap-opt-list"}]
            [:& radio-button {:icon i/flex-grid-refactor
+                             :icon-class (stl/css :radio-button)
                              :value "grid"
                              :id "swap-opt-grid"}]]]
 
@@ -376,7 +378,8 @@
                     root-shape (ctf/get-component-root data item)
                     loop?      (or (contains? parent-components (:main-instance-id item))
                                    (contains? parent-components (:id item)))]
-                [:& component-swap-item {:item item
+                [:& component-swap-item {:key (:id item)
+                                         :item item
                                          :loop loop?
                                          :shapes shapes
                                          :file-id current-library-id
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 0171600c9..61d328299 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
@@ -96,16 +96,6 @@
   }
 
   .component-swap {
-
-
-    svg {
-      stroke: var(--icon-foreground);
-      fill: var(--icon-foreground);
-      height: $s-12;
-      width: $s-12;
-      cursor: pointer;
-    }
-
     .search-field {
       display: flex;
       align-items: center;
@@ -175,8 +165,6 @@
       padding-left: $s-20;
     }
 
-
-
     .listing-options-wrapper {
       width: 100%;
     }
@@ -262,116 +250,119 @@
           }
         }
       }
+    }
+  }
+}
 
-      .component-group {
-        @include titleTipography;
-        text-align: left;
-        display: flex;
-        align-items: center;
-        margin: 0 $s-16 $s-8 $s-8;
-        justify-content: space-between;
-        cursor: pointer;
-        height: $s-24;
-        svg {
-          height: $s-8;
-          width: $s-8;
-        }
+.component-group {
+  @include titleTipography;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  margin: 0 $s-16 $s-8 $s-8;
+  justify-content: space-between;
+  cursor: pointer;
+  height: $s-24;
+  svg {
+    height: $s-8;
+    width: $s-8;
+  }
+  div {
+    display: flex;
+    width: 90%;
+  }
+  span {
+    @include textEllipsis;
+  }
+  .component-group-path {
+    direction: rtl;
+  }
+  .component-group-name {
+    color: var(--assets-item-name-foreground-color);
+  }
+  &:hover {
+    color: var(--assets-item-name-foreground-color-hover);
+    .component-group-name {
+      color: var(--assets-item-name-foreground-color-hover);
+    }
+  }
+}
 
-        div {
-          display: flex;
-          width: 90%;
-        }
-        span {
-          @include textEllipsis;
-        }
-        .component-group-path {
-          direction: rtl;
-        }
-        .component-group-name {
-          color: var(--assets-item-name-foreground-color);
-        }
-        &:hover {
-          color: var(--assets-item-name-foreground-color-hover);
-          .component-group-name {
-            color: var(--assets-item-name-foreground-color-hover);
-          }
-        }
-      }
+.component-grid {
+  display: grid;
+  grid-template-columns: repeat(2, $s-124);
+  grid-auto-rows: $s-124;
+  gap: $s-4;
+}
+
+.grid-cell {
+  @include flexCenter;
+  place-items: center;
+  flex-wrap: wrap;
+  position: relative;
+  padding: $s-8;
+  border-radius: $br-8;
+  background-color: var(--assets-component-background-color);
+  overflow: hidden;
+  --assets-component-current-border-color: var(--assets-component-border-color);
+  border: $s-4 solid var(--assets-component-current-border-color);
+  cursor: pointer;
+  img {
+    height: auto;
+    width: auto;
+    max-height: 100%;
+    max-width: 100%;
+    pointer-events: none;
+    border: 0;
+  }
+  svg {
+    height: 100%;
+    width: 100%;
+    stroke: none;
+    object-fit: contain;
+  }
+  .component-name {
+    @include titleTipography;
+    @include textEllipsis;
+    display: none;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    padding: $s-2;
+    text-align: center;
+    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%);
     }
   }
 
-  .component-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-auto-rows: calc(10vh + $s-16);
-    gap: $s-4;
-    margin: 0 $s-4 0 $s-8;
-    .grid-cell {
-      @include flexCenter;
-      flex-wrap: wrap;
-      position: relative;
-      padding: $s-8;
-      border-radius: $br-8;
-      background-color: var(--assets-component-background-color);
-      overflow: hidden;
-      cursor: pointer;
-      img {
-        height: auto;
-        width: auto;
-        max-height: 100%;
-        max-width: 100%;
-        pointer-events: none;
-        border: 0;
-      }
-      svg {
-        height: 10vh;
-        width: 10vh;
-        stroke: none;
-      }
-      .component-name {
-        @include titleTipography;
-        @include textEllipsis;
-        display: none;
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        padding: $s-2;
-        text-align: center;
-        direction: rtl;
-      }
+  &.selected {
+    --assets-component-current-border-color: var(--assets-item-border-color);
+    .component-name {
+      color: var(--assets-item-name-foreground-color-hover);
+    }
+  }
 
-      &: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%);
-        }
-      }
-
-      &.selected {
-        border: $s-1 solid var(--assets-item-border-color);
-        .component-name {
-          color: var(--assets-item-name-foreground-color-hover);
-        }
-      }
-
-      &.disabled {
-        background: var(--assets-component-background-color-disabled);
-        cursor: auto;
-        svg {
-          cursor: auto;
-        }
-        .component-name {
-          background: linear-gradient(
-            to top,
-            var(--assets-component-background-color-disabled) 0%,
-            transparent 100%
-          );
-          color: var(--assets-item-name-foreground-color-hover);
-        }
-      }
+  &.disabled {
+    background: var(--assets-component-background-color-disabled);
+    cursor: auto;
+    svg {
+      cursor: auto;
+    }
+    .component-name {
+      background: linear-gradient(
+        to top,
+        var(--assets-component-background-color-disabled) 0%,
+        transparent 100%
+      );
+      color: var(--assets-item-name-foreground-color-hover);
     }
   }
 }
@@ -388,4 +379,14 @@
   text-transform: uppercase;
   margin: $s-16 $s-4 0 $s-12;
   color: var(--title-foreground-color);
-}
\ No newline at end of file
+}
+
+.radio-button {
+  svg {
+    stroke: var(--icon-foreground);
+    fill: var(--icon-foreground);
+    height: $s-12;
+    width: $s-12;
+    cursor: pointer;
+  }
+}