diff --git a/src/components/elements/GalleryComponent.vue b/src/components/elements/GalleryComponent.vue
index 032e1547..258a2901 100644
--- a/src/components/elements/GalleryComponent.vue
+++ b/src/components/elements/GalleryComponent.vue
@@ -6,7 +6,8 @@
     <div
       v-for="card in state.cards"
       :key="card.id"
-      class="hover:scale-110 drop-shadow-glowCCYellow"
+      class="transition duration-500 hover:scale-110 hover:duration-300"
+      :class="shadowClass(card)"
       @click="emit('cardClicked', card.id)"
     >
       <div>
@@ -14,13 +15,26 @@
       </div>
     </div>
   </div>
+
+  <div class="mt-12 flex flex-row justify-center items-center">
+    <BaseCCButton
+      :type="Color.RED"
+      @click="load()"
+      :class="{ invisible: !loadButtonVisible }"
+    >
+      Reckless Card Loading
+    </BaseCCButton>
+  </div>
 </template>
 
 <script setup lang="ts">
+import * as R from "ramda";
 import { computed, onBeforeUnmount, onMounted, reactive, watch } from "vue";
 import { useCards } from "@/def-composables/useCards";
 import { Card } from "@/model/Card";
 import CardComponent from "@/components/elements/CardComponent.vue";
+import { Color } from "@/components/utils/color";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 
 const { getCard } = useCards();
 const emit = defineEmits(["cardClicked"]);
@@ -54,11 +68,35 @@ const cardIdsOnPage = computed(() => {
   return props.allCardIds.slice(0, state.cardsOnPage);
 });
 
+
+const shadowClass = (card) => {
+  let classes = 0
+  R.forEachObjIndexed(entry => {
+    if (entry) classes++;
+  }, card.Class)
+  if (classes > 1) return {
+    'drop-shadow-glowCCYellow': true,
+  }
+  else return {
+    'drop-shadow-glowCCRed': card.Class.Culture,
+    'drop-shadow-glowCCBlue': card.Class.Technology,
+    'drop-shadow-glowCCGreen': card.Class.Nature,
+    'drop-shadow-glowCCPurple': card.Class.Mysticism
+    }
+};
+
 onMounted(() => {
   state.cardsOnPage = props.cardsPerPage;
-  window.addEventListener("scroll", onScroll);
 });
 
+let loadButtonVisible = true;
+
+const load = () => {
+  state.cardsOnPage += 10;
+  loadButtonVisible = false;
+  window.addEventListener("scroll", onScroll);
+};
+
 onBeforeUnmount(() => {
   window.removeEventListener("scroll", onScroll);
 });
diff --git a/src/views/GalleryPage.vue b/src/views/GalleryPage.vue
index 6702f8be..679a8ef8 100644
--- a/src/views/GalleryPage.vue
+++ b/src/views/GalleryPage.vue
@@ -1,110 +1,133 @@
 <template>
-  <div class="flex text-white">
+  <div class="flex text-white max-lg:flex-col justify-center">
+    
     <div
-      class="self-start sticky top-0 min-w-[25rem] flex justify-center p-16 h-[100vh] mt-0 bg-[#552026] max-lg:hidden"
+      class="self-start lg:sticky top-0 min-w-[25rem] flex justify-center lg:p-16 h-[100vh] mt-0 bg-[#552026] 
+            max-lg:w-full max-lg:h-full max-lg:p-4 "
     >
-      <div class="space-y-6">
-        <GalleryFilterImageChooser :options="classOptions" />
-        <Checkbox v-model="galleryFilters.multiClass">
-          Show multi-class only
-        </Checkbox>
-        <GalleryFilterImageChooser :options="typeOptions" />
-        <div class="">
-          <p>Search for</p>
+
+      <div class="">
+
+        <div class="flex flex-row justify-center items-center lg:invisible max-lg:pt-2 max-lg:pb-6">
+          <BaseCCButton
+            :type="Color.RED"
+            @click="filtersVisible = !filtersVisible"
+          >
+            Gallery Filters
+          </BaseCCButton>
+        </div>
+
+        <div
+          v-if="filtersVisible"
+          class="space-y-6 justify-self-center"
+        >
+
+          <GalleryFilterImageChooser :options="classOptions" />
+          <Checkbox v-model="galleryFilters.multiClass">
+            Show multi-class only
+          </Checkbox>
+          <GalleryFilterImageChooser :options="typeOptions" />
+          <div class="">
+            <p>Search for</p>
+            <div class="space-y-4">
+              <CCInput
+                v-model="galleryFilters.nameContains"
+                placeholder="name"
+              />
+              <br>
+              <CCInput
+                v-model="galleryFilters.notesContains"
+                placeholder="notes"
+              />
+              <br>
+              <CCInput
+                v-model="galleryFilters.keywordsContains"
+                placeholder="keywords"
+              />
+            </div>
+          </div>
+          <CCInput
+            v-model="galleryFilters.owner"
+            placeholder="owner"
+            :max-length="41"
+          />
+          <Checkbox
+            v-if="loggedIn"
+            :model-value="galleryFilters.owner === address"
+            @update:model-value="
+              (v: boolean) => (galleryFilters.owner = v ? address : '')
+            "
+          >
+            My Cards
+          </Checkbox>
           <div class="space-y-4">
-            <CCInput
-              v-model="galleryFilters.nameContains"
-              placeholder="name"
-            />
-            <br>
-            <CCInput
-              v-model="galleryFilters.notesContains"
-              placeholder="notes"
+            Rarity:
+            <Dropdown
+              v-model="galleryFilters.rarity"
+              :display-fn="
+                (v?) => (typeof v === 'undefined' ? '?' : CardRarity[v])
+              "
+              :options="[
+                undefined,
+                CardRarity.common,
+                CardRarity.uncommon,
+                CardRarity.rare,
+                CardRarity.exceptional,
+                CardRarity.unique,
+              ]"
             />
             <br>
-            <CCInput
-              v-model="galleryFilters.keywordsContains"
-              placeholder="keywords"
+            Status:
+            <Dropdown
+              v-model="galleryFilters.status"
+              :display-fn="(v) => (v == 'playable' ? 'playable' : Status[v])"
+              :options="
+                new Array<GalleryStatus>(
+                  'playable',
+                  Status.prototype,
+                  Status.trial,
+                  Status.permanent,
+                  Status.bannedSoon,
+                  Status.bannedVerySoon,
+                  Status.banned,
+                )
+              "
             />
           </div>
+
         </div>
-        <CCInput
-          v-model="galleryFilters.owner"
-          placeholder="owner"
-          :max-length="41"
-        />
-        <Checkbox
-          v-if="loggedIn"
-          :model-value="galleryFilters.owner === address"
-          @update:model-value="
-            (v: boolean) => (galleryFilters.owner = v ? address : '')
-          "
-        >
-          My Cards
-        </Checkbox>
-        <div class="space-y-4">
-          Rarity:
-          <Dropdown
-            v-model="galleryFilters.rarity"
-            :display-fn="
-              (v?) => (typeof v === 'undefined' ? '?' : CardRarity[v])
-            "
-            :options="[
-              undefined,
-              CardRarity.common,
-              CardRarity.uncommon,
-              CardRarity.rare,
-              CardRarity.exceptional,
-              CardRarity.unique,
-            ]"
-          />
-          <br>
-          Status:
-          <Dropdown
-            v-model="galleryFilters.status"
-            :display-fn="(v) => (v == 'playable' ? 'playable' : Status[v])"
-            :options="
-              new Array<GalleryStatus>(
-                'playable',
-                Status.prototype,
-                Status.trial,
-                Status.permanent,
-                Status.bannedSoon,
-                Status.bannedVerySoon,
-                Status.banned,
-              )
-            "
-          />
-        </div>
+        
       </div>
     </div>
 
-    <div class="bg-black w-[75%] py-8 md:p-8 lg:p-16 text-white grow">
+    <div class="bg-black lg:w-[75%] py-8 md:p-8 lg:p-16 text-white grow">
       <div class="mx-16">
-        <div class="relative h-8">
-          <p class="absolute text-5xl mx-auto left-0 right-0 text-center">
-            Gallery
-          </p>
+        <div class="relative h-8 flex flex-row justify-between">
           <div class="flex justify-center max-md:hidden md:justify-between">
-            <p class="text-xl my-auto">
+            <p class="md:text-xl lg:text-lg xl:text-xl  my-auto">
               {{ cardList.length }} Results
             </p>
-            <div class="flex space-x-4">
-              <p class="text-xl my-auto max-md:hidden">
-                Sort by
-              </p>
-              <Dropdown
-                v-model="galleryFilters.sortBy"
-                class="my-auto"
-                :type="Color.RED"
-                :options="['Name', 'CastingCost', 'Id']"
-                :display-fn="(v) => (v == 'CastingCost' ? 'Casting cost' : v)"
-              />
-              <SortDirectionButton
-                v-model="revertSort"
-                class="my-auto"
-              />
-            </div>
+          </div>
+          <div>
+            <p class="md:text-4xl lg:text-2xl xl:text-4xl  text-center">
+              Gallery
+            </p>
+          </div>
+          <div class="flex space-x-2">
+            <p class="md:text-xl xl:text-xl lg:text-lg my-auto max-md:hidden">
+              Sort by
+            </p>
+            <Dropdown
+              v-model="galleryFilters.sortBy"
+              class="my-auto"
+              :type="Color.RED"
+              :options="['Name', 'CastingCost', 'Id']"
+              :display-fn="(v) => (v == 'CastingCost' ? 'Casting cost' : v)"
+            />
+            <SortDirectionButton
+              v-model="revertSort"
+              class="my-auto"
+            />
           </div>
         </div>
         <div class="mt-8 h-1 rounded w-full bg-white" />
@@ -112,7 +135,7 @@
 
       <GalleryComponent
         class="p-16"
-        :cards-per-page="galleryFilters.cardsPerPage"
+        :cards-2per-page="galleryFilters.cardsPerPage"
         :all-card-ids="revertSort ? cardList.toReversed() : cardList"
         @card-clicked="openCardviewModel"
       />
@@ -129,6 +152,7 @@
 import * as R from "ramda";
 import { onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 import GalleryComponent from "@/components/elements/GalleryComponent.vue";
 import techActive from "@/assets/figma/ClassesButtons/tech.png";
 import techInactive from "@/assets/figma/ClassesButtons/tech_unselected.png";
@@ -178,6 +202,8 @@ const {
   galleryFiltersFromPageQuery,
 } = useGallery();
 
+let filtersVisible = ref(true);
+
 const revertSort = ref(false);
 
 const classOptions: GalleryFilterImageChooserOptions<GalleryFilters> = [
diff --git a/tailwind.config.js b/tailwind.config.js
index 17d0c347..c83cf102 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -24,6 +24,10 @@ module.exports = {
         header: ["8px 8px 3px rgba(0, 0, 0, 0.25)"],
         glowTeal: ["0px 0px 24px #40C1C7"],
         glowCCYellow: ["0px 0px 24px #FEC560"],
+        glowCCRed: ["0px 0px 24px rgba(216, 32, 39, 0.90)"],
+        glowCCBlue: ["0px 0px 24px rgba(39, 32, 216, 0.90)"],
+        glowCCGreen: ["0px 0px 24px rgba(32, 216, 39, 0.90)"],
+        glowCCPurple: ["0px 0px 24px rgba(216, 32, 216, 0.90)"],
       },
     },
   },