diff --git a/src/App.svelte b/src/App.svelte
index 11b36cd..c73e3d3 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,13 +1,13 @@
 <script>
   import _data from "./json/data.json";
-  import Gallery from "./lib/Gallery.svelte";
+  import Gallery from "./lib/GallerySection.svelte";
   import FixedScrollUpButton from "./lib/FixedScrollUpButton.svelte";
   import Header from "./lib/Header.svelte";
   import HeaderBar from "./lib/HeaderBar.svelte";
   import { fade } from "svelte/transition";
-  import Prices from "./lib/Prices.svelte";
+  import Prices from "./lib/PricesSection.svelte";
   import { deactivateTag } from "./assets/ToggleStore.js";
-    import Tos from "./lib/Tos.svelte";
+    import Tos from "./lib/TosSection.svelte";
 
   let currentHash = location.hash;
 
diff --git a/src/lib/Gallery.svelte b/src/lib/Gallery.svelte
index e2229d3..4a8ef18 100644
--- a/src/lib/Gallery.svelte
+++ b/src/lib/Gallery.svelte
@@ -1,38 +1,13 @@
 <script>
-  import BackButton from "./BackButton.svelte";
-import Image from "./Image.svelte";
-  import ToggleButton from "./ToggleButton.svelte";
+    import Image from "./Image.svelte";
 
-  export let images;
-  const tags = ["All", "Comms", "Pokemon", "PMD", "Transform", "Zorio", "Nahi", "Other"]
+    export let images;
 </script>
 
-<div class="w-full px-1">
-  <ul class="flex flex-wrap w-fit h-fit">
-    {#each tags as tag, i}
-    <li class="flex-grow xl:m-2 m-1">
-    <ToggleButton text={tag} enabled={i == 0}/>
-    </li>
-  {/each}
-  </ul>
-</div>
-
 <div class="w-full">
-  <ul class="flex flex-wrap w-full h-fit">
-    {#each images as i}
-       <Image image={i} thumbnail={{...i, src: i.src.replace('gallery\\', 'thumbnails\\')}}  />
-    {/each}
-  </ul>
-</div>
-
-<div class="w-full flex justify-center">
-  <BackButton />
-</div>
-
-<div class="flex flex-col w-full h-fit pt-8 xl:px-16 px-8">
-  <h1 class="xl:text-sm text-xs text-slate-300 text-center pb-4">
-    The characters and trademarks mentioned are the property of their respective owners.
-    their respective owners. This content is used for illustrative purposes only and is not intended to
-    infringe the copyrights of the mentioned owners.
-  </h1>
-</div>
\ No newline at end of file
+    <ul class="flex flex-wrap w-full h-fit">
+      {#each images as i}
+         <Image image={i} thumbnail={{...i, src: i.src.replace('gallery\\', 'thumbnails\\')}}  />
+      {/each}
+    </ul>
+  </div>
\ No newline at end of file
diff --git a/src/lib/GallerySection.svelte b/src/lib/GallerySection.svelte
new file mode 100644
index 0000000..c1ea253
--- /dev/null
+++ b/src/lib/GallerySection.svelte
@@ -0,0 +1,33 @@
+<script>
+  import BackButton from "./BackButton.svelte";
+    import Gallery from "./Gallery.svelte";
+import Image from "./Image.svelte";
+  import ToggleButton from "./ToggleButton.svelte";
+
+  export let images;
+  const tags = ["All", "Comms", "Pokemon", "PMD", "Transform", "Zorio", "Nahi", "Other"]
+</script>
+
+<div class="w-full px-1">
+  <ul class="flex flex-wrap w-fit h-fit">
+    {#each tags as tag, i}
+    <li class="flex-grow xl:m-2 m-1">
+    <ToggleButton text={tag} enabled={i == 0}/>
+    </li>
+  {/each}
+  </ul>
+</div>
+
+<Gallery {images} />
+
+<div class="w-full flex justify-center">
+  <BackButton />
+</div>
+
+<div class="flex flex-col w-full h-fit pt-8 xl:px-16 px-8">
+  <h1 class="xl:text-sm text-xs text-slate-300 text-center pb-4">
+    The characters and trademarks mentioned are the property of their respective owners.
+    their respective owners. This content is used for illustrative purposes only and is not intended to
+    infringe the copyrights of the mentioned owners.
+  </h1>
+</div>
\ No newline at end of file
diff --git a/src/lib/Prices.svelte b/src/lib/PricesSection.svelte
similarity index 92%
rename from src/lib/Prices.svelte
rename to src/lib/PricesSection.svelte
index 69b30c1..c28b0ca 100644
--- a/src/lib/Prices.svelte
+++ b/src/lib/PricesSection.svelte
@@ -4,6 +4,7 @@
   import prices_posttf from "../json/prices_posttf.json";
   import Image from "./Image.svelte";
   import BackButton from "./BackButton.svelte";
+    import Gallery from "./Gallery.svelte";
 
   const categories = [
     {
@@ -33,13 +34,7 @@
       <h2 class="title">{category.title}</h2>
       <p class="text-white xl:text-2xl text-lg font-bold quicksand xl:py-8 py-4">{category.description}</p>
 
-      <div class="w-full">
-        <ul class="flex flex-wrap w-full h-fit">
-          {#each category.prices as price}
-            <Image image={price} thumbnail={{...price, src: price.src.replace('gallery\\', 'thumbnails\\')}}/>
-          {/each}
-        </ul>
-      </div>
+      <Gallery images={category.prices} />
 
       <h3 class="text-white text-2xl font-bold quicksand pt-8">
         Base price starting at <span class="quicksand-bold">{category.basePrice}</span><span class="font-semibold font-sans">€</span>
diff --git a/src/lib/Tos.svelte b/src/lib/TosSection.svelte
similarity index 100%
rename from src/lib/Tos.svelte
rename to src/lib/TosSection.svelte