diff --git a/components/FilterBar/index.scss b/components/FilterBar/index.scss
index 1ba27bb5..88c2c3ea 100644
--- a/components/FilterBar/index.scss
+++ b/components/FilterBar/index.scss
@@ -12,7 +12,8 @@
   position: sticky;
   transition: box-shadow 0.24s ease-in-out;
   top: $unit * 4;
-  width: 966px;
+  width: 100%;
+  max-width: 996px;
 
   @media (max-width: $tablet) {
     position: static;
diff --git a/components/GridRep/index.scss b/components/GridRep/index.scss
index 5f138109..0ac43f8e 100644
--- a/components/GridRep/index.scss
+++ b/components/GridRep/index.scss
@@ -1,9 +1,12 @@
 .GridRep {
-  border-radius: 6px;
+  aspect-ratio: 3/2;
+  border-radius: $card-corner;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: $unit;
-  padding: $unit * 2;
+  padding: $unit-2x;
+  max-width: 320px;
 
   &:hover {
     background: var(--grid-rep-hover);
@@ -26,6 +29,7 @@
     display: flex;
     flex-direction: row;
     flex-shrink: 0;
+    gap: $unit;
 
     .weapon {
       background: var(--card-bg);
@@ -33,25 +37,27 @@
     }
 
     .grid_mainhand {
-      margin-right: $unit;
-      height: 139px;
-      width: 66px;
+      $d: 64px;
+      aspect-ratio: 200 / 418;
+      height: auto;
+      max-width: $d;
+      min-width: $d;
     }
 
     .grid_weapons {
+      $p: 29.5%;
+      box-sizing: border-box;
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      grid-template-rows: 1fr 1fr 1fr;
+      grid-template-columns: fit-content($p) fit-content($p) fit-content($p);
+      grid-template-rows: fit-content($p) fit-content($p) fit-content($p);
       gap: $unit;
       margin: 0;
       padding: 0;
-      width: fit-content;
+      width: 100%;
     }
 
     .grid_weapon {
-      float: left;
-      height: 40px;
-      width: 70px;
+      aspect-ratio: 160 / 92;
     }
 
     .grid_mainhand img[src*='jpg'],
diff --git a/components/GridRepCollection/index.scss b/components/GridRepCollection/index.scss
index 438c097c..c3f58057 100644
--- a/components/GridRepCollection/index.scss
+++ b/components/GridRepCollection/index.scss
@@ -1,9 +1,23 @@
 .GridRepCollection {
   display: grid;
-  grid-template-columns: repeat(auto-fit, 332px);
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   margin: 0 auto;
   padding: 0;
   transition: opacity 0.14s ease-in-out;
+  justify-items: center;
   // width: fit-content;
+  width: auto;
   max-width: 996px;
+
+  @media (max-width: $tablet) {
+    grid-template-columns: minmax(320px, 1fr);
+    max-width: inherit;
+    width: 100%;
+  }
+
+  @media (max-width: $phone) {
+    grid-template-columns: 1fr;
+    max-width: inherit;
+    width: 100%;
+  }
 }