diff --git a/components/FilterBar/index.scss b/components/FilterBar/index.scss
index fe2dbabf..1ba27bb5 100644
--- a/components/FilterBar/index.scss
+++ b/components/FilterBar/index.scss
@@ -1,10 +1,11 @@
 .FilterBar {
   align-items: center;
   background: var(--bar-bg);
-  border-radius: 6px;
+  border-radius: $card-corner;
+  box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  gap: $unit * 2;
+  gap: $unit-2x;
   margin: 0 auto;
   margin-top: 7px; // Line up with HeaderMenu
   padding: $unit * 2;
@@ -13,6 +14,26 @@
   top: $unit * 4;
   width: 966px;
 
+  @media (max-width: $tablet) {
+    position: static;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .Filters {
+    display: flex;
+    box-sizing: border-box;
+    flex-direction: row;
+    flex-grow: 1;
+    gap: $unit;
+    width: auto;
+
+    @media (max-width: $tablet) {
+      flex-direction: column;
+      width: 100%;
+    }
+  }
+
   &.shadow {
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
   }
@@ -41,6 +62,12 @@
     &:hover {
       background-color: var(--select-contained-bg-hover);
     }
+
+    @media (max-width: $tablet) {
+      width: 100%;
+      max-width: inherit;
+      text-align: center;
+    }
   }
 
   .SelectTrigger {
diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx
index e145b12c..426dd856 100644
--- a/components/FilterBar/index.tsx
+++ b/components/FilterBar/index.tsx
@@ -68,76 +68,78 @@ const FilterBar = (props: Props) => {
   return (
     <div className={classes}>
       {props.children}
-      <Select
-        value={`${props.element}`}
-        open={elementOpen}
-        onOpenChange={() => onSelectChange('element')}
-        onValueChange={elementSelectChanged}
-        onClick={openElementSelect}
-      >
-        <SelectItem data-element="all" key={-1} value={-1}>
-          {t('elements.full.all')}
-        </SelectItem>
-        <SelectItem data-element="null" key={0} value={0}>
-          {t('elements.full.null')}
-        </SelectItem>
-        <SelectItem data-element="wind" key={1} value={1}>
-          {t('elements.full.wind')}
-        </SelectItem>
-        <SelectItem data-element="fire" key={2} value={2}>
-          {t('elements.full.fire')}
-        </SelectItem>
-        <SelectItem data-element="water" key={3} value={3}>
-          {t('elements.full.water')}
-        </SelectItem>
-        <SelectItem data-element="earth" key={4} value={4}>
-          {t('elements.full.earth')}
-        </SelectItem>
-        <SelectItem data-element="dark" key={5} value={5}>
-          {t('elements.full.dark')}
-        </SelectItem>
-        <SelectItem data-element="light" key={6} value={6}>
-          {t('elements.full.light')}
-        </SelectItem>
-      </Select>
+      <div className="Filters">
+        <Select
+          value={`${props.element}`}
+          open={elementOpen}
+          onOpenChange={() => onSelectChange('element')}
+          onValueChange={elementSelectChanged}
+          onClick={openElementSelect}
+        >
+          <SelectItem data-element="all" key={-1} value={-1}>
+            {t('elements.full.all')}
+          </SelectItem>
+          <SelectItem data-element="null" key={0} value={0}>
+            {t('elements.full.null')}
+          </SelectItem>
+          <SelectItem data-element="wind" key={1} value={1}>
+            {t('elements.full.wind')}
+          </SelectItem>
+          <SelectItem data-element="fire" key={2} value={2}>
+            {t('elements.full.fire')}
+          </SelectItem>
+          <SelectItem data-element="water" key={3} value={3}>
+            {t('elements.full.water')}
+          </SelectItem>
+          <SelectItem data-element="earth" key={4} value={4}>
+            {t('elements.full.earth')}
+          </SelectItem>
+          <SelectItem data-element="dark" key={5} value={5}>
+            {t('elements.full.dark')}
+          </SelectItem>
+          <SelectItem data-element="light" key={6} value={6}>
+            {t('elements.full.light')}
+          </SelectItem>
+        </Select>
 
-      <RaidDropdown
-        currentRaid={props.raidSlug}
-        defaultRaid="all"
-        showAllRaidsOption={true}
-        onChange={raidSelectChanged}
-      />
+        <RaidDropdown
+          currentRaid={props.raidSlug}
+          defaultRaid="all"
+          showAllRaidsOption={true}
+          onChange={raidSelectChanged}
+        />
 
-      <Select
-        value={`${props.recency}`}
-        trigger={'All time'}
-        open={recencyOpen}
-        onOpenChange={() => onSelectChange('recency')}
-        onValueChange={recencySelectChanged}
-        onClick={openRecencySelect}
-      >
-        <SelectItem key={-1} value={-1}>
-          {t('recency.all_time')}
-        </SelectItem>
-        <SelectItem key={86400} value={86400}>
-          {t('recency.last_day')}
-        </SelectItem>
-        <SelectItem key={604800} value={604800}>
-          {t('recency.last_week')}
-        </SelectItem>
-        <SelectItem key={2629746} value={2629746}>
-          {t('recency.last_month')}
-        </SelectItem>
-        <SelectItem key={7889238} value={7889238}>
-          {t('recency.last_3_months')}
-        </SelectItem>
-        <SelectItem key={15778476} value={15778476}>
-          {t('recency.last_6_months')}
-        </SelectItem>
-        <SelectItem key={31556952} value={31556952}>
-          {t('recency.last_year')}
-        </SelectItem>
-      </Select>
+        <Select
+          value={`${props.recency}`}
+          trigger={'All time'}
+          open={recencyOpen}
+          onOpenChange={() => onSelectChange('recency')}
+          onValueChange={recencySelectChanged}
+          onClick={openRecencySelect}
+        >
+          <SelectItem key={-1} value={-1}>
+            {t('recency.all_time')}
+          </SelectItem>
+          <SelectItem key={86400} value={86400}>
+            {t('recency.last_day')}
+          </SelectItem>
+          <SelectItem key={604800} value={604800}>
+            {t('recency.last_week')}
+          </SelectItem>
+          <SelectItem key={2629746} value={2629746}>
+            {t('recency.last_month')}
+          </SelectItem>
+          <SelectItem key={7889238} value={7889238}>
+            {t('recency.last_3_months')}
+          </SelectItem>
+          <SelectItem key={15778476} value={15778476}>
+            {t('recency.last_6_months')}
+          </SelectItem>
+          <SelectItem key={31556952} value={31556952}>
+            {t('recency.last_year')}
+          </SelectItem>
+        </Select>
+      </div>
     </div>
   )
 }
diff --git a/components/PartyDetails/index.scss b/components/PartyDetails/index.scss
index b8279fd2..70297220 100644
--- a/components/PartyDetails/index.scss
+++ b/components/PartyDetails/index.scss
@@ -84,6 +84,11 @@
         width: 60%;
         height: 60%;
 
+        @media (max-width: $tablet) {
+          width: 100%;
+          height: 100%;
+        }
+
         /* gradient */
         &::before {
           content: '';
diff --git a/components/PartySegmentedControl/index.scss b/components/PartySegmentedControl/index.scss
index d37ee3fb..207a38da 100644
--- a/components/PartySegmentedControl/index.scss
+++ b/components/PartySegmentedControl/index.scss
@@ -10,13 +10,16 @@
 
   @media (max-width: $phone) {
     gap: $unit;
-    justify-content: flex-start;
     margin-left: 0;
     margin-right: 0;
     padding: 0 $unit;
     max-width: auto;
     width: 100%;
 
+    &.Editable {
+      justify-content: flex-start;
+    }
+
     .SegmentedControl {
       flex-grow: 1;
     }
diff --git a/components/PartySegmentedControl/index.tsx b/components/PartySegmentedControl/index.tsx
index c4705bcb..b4bdc495 100644
--- a/components/PartySegmentedControl/index.tsx
+++ b/components/PartySegmentedControl/index.tsx
@@ -11,6 +11,7 @@ import ToggleSwitch from '~components/ToggleSwitch'
 import { GridType } from '~utils/enums'
 
 import './index.scss'
+import classNames from 'classnames'
 
 interface Props {
   selectedTab: GridType
@@ -64,7 +65,12 @@ const PartySegmentedControl = (props: Props) => {
   )
 
   return (
-    <div className="PartyNavigation">
+    <div
+      className={classNames({
+        PartyNavigation: true,
+        Editable: party.editable,
+      })}
+    >
       <SegmentedControl elementClass={getElement()}>
         {/* <Segment
                     groupName="grid"
diff --git a/components/UncapStar/index.scss b/components/UncapStar/index.scss
index 0319a146..3320e197 100644
--- a/components/UncapStar/index.scss
+++ b/components/UncapStar/index.scss
@@ -1,12 +1,20 @@
 .UncapStar {
-  background-repeat: no-repeat;
-  background-size: 18px 18px;
-  display: block;
-  height: 18px;
-  width: 18px;
+  $size: 18px;
 
-  &:hover {
-    transform: scale(1.2);
+  @media (max-width: $tablet) {
+    $size: 12px;
+  }
+
+  background-repeat: no-repeat;
+  background-size: $size;
+  display: block;
+  height: $size;
+  width: $size;
+
+  @media (min-width: $laptop) {
+    &:hover {
+      transform: scale(1.2);
+    }
   }
 
   &.empty,
@@ -14,23 +22,23 @@
   &.empty.flb,
   &.empty.ulb,
   &.empty.special {
-    background: url('/icons/uncap/empty.svg');
+    background-image: url('/icons/uncap/empty.svg');
 
     &:hover {
-      background: url('/icons/uncap/empty-hover.svg');
+      background-image: url('/icons/uncap/empty-hover.svg');
     }
   }
 
   &.mlb {
-    background: url('/icons/uncap/yellow.svg');
+    background-image: url('/icons/uncap/yellow.svg');
 
     &:hover {
-      background: url('/icons/uncap/yellow-hover.svg');
+      background-image: url('/icons/uncap/yellow-hover.svg');
     }
   }
 
   &.special {
-    background: url('/icons/uncap/red.svg');
+    background-image: url('/icons/uncap/red.svg');
 
     &:hover {
       background: url('/icons/uncap/red-hover.svg');
@@ -38,7 +46,7 @@
   }
 
   &.flb {
-    background: url('/icons/uncap/blue.svg');
+    background-image: url('/icons/uncap/blue.svg');
 
     &:hover {
       background: url('/icons/uncap/blue-hover.svg');
@@ -46,10 +54,10 @@
   }
 
   &.ulb {
-    background: url('/icons/uncap/purple.svg');
+    background-image: url('/icons/uncap/purple.svg');
 
     &:hover {
-      background: url('/icons/uncap/purple-hover.svg');
+      background-image: url('/icons/uncap/purple-hover.svg');
     }
   }
 }
diff --git a/components/WeaponGrid/index.scss b/components/WeaponGrid/index.scss
index 8556dc51..3d563baf 100644
--- a/components/WeaponGrid/index.scss
+++ b/components/WeaponGrid/index.scss
@@ -2,6 +2,11 @@
   display: flex;
   justify-content: center;
 
+  @media (max-width: $phone) {
+    display: grid;
+    grid-template-columns: 1fr auto;
+  }
+
   .grid_weapons {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
@@ -15,12 +20,17 @@
 #MainGrid,
 #ExtraGrid {
   .grid_weapons > * {
-    margin-bottom: $unit * 3;
-    margin-right: $unit * 3;
+    margin-bottom: $unit-3x;
+    margin-right: $unit-3x;
 
-    @media (max-width: $medium-screen) {
-      margin-bottom: $unit * 2;
-      margin-right: $unit * 2;
+    @media (max-width: $tablet) {
+      margin-bottom: $unit-2x;
+      margin-right: $unit-2x;
+    }
+
+    @media (max-width: $phone) {
+      margin-bottom: $unit;
+      margin-right: $unit;
     }
 
     &:nth-last-child(-n + 3) {
diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss
index 225b005d..5b74454d 100644
--- a/components/WeaponUnit/index.scss
+++ b/components/WeaponUnit/index.scss
@@ -25,11 +25,15 @@
   }
 
   &.mainhand {
-    margin-right: $unit * 3;
+    margin-right: $unit-3x;
     max-width: 200px;
 
-    @media (max-width: $medium-screen) {
-      margin-right: $unit * 2;
+    @media (max-width: $tablet) {
+      margin-right: $unit-2x;
+    }
+
+    @media (max-width: $phone) {
+      margin-right: $unit;
     }
 
     &.editable .WeaponImage:hover {
diff --git a/styles/globals.scss b/styles/globals.scss
index 9477c243..db6d8992 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -303,9 +303,3 @@ i.tag {
     transform: translate(-50%, -50%) scale(1);
   }
 }
-
-@media (max-width: $phone) {
-  body {
-    padding: $unit !important;
-  }
-}
diff --git a/styles/variables.scss b/styles/variables.scss
index 56a08c9e..2664dab6 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -21,6 +21,7 @@ $unit: 8px;
 $unit-fourth: calc($unit / 4);
 $unit-half: calc($unit / 2);
 $unit-2x: $unit * 2;
+$unit-3x: $unit * 3;
 $unit-4x: $unit * 4;
 $unit-6x: $unit * 6;
 $unit-8x: $unit * 8;