diff --git a/src/lib/StoreButtons.svelte b/src/lib/StoreButtons.svelte
new file mode 100644
index 0000000..fa9082d
--- /dev/null
+++ b/src/lib/StoreButtons.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+let meow = "";
+</script>
+
+{#snippet StoreButton(store: string, url: string)}
+	<a aria-label="Store Page Button" href={url}"></a>
+{/snippet}
+
+<style lang="scss">
+	.StoreButton {
+		display: block;
+		width: fit-content;
+		height: 30px;
+		border: 2px outset #1da1f2;
+		background: #1da1f2;
+		margin: 2px;
+
+		img {
+			height: auto;
+		}
+	}
+	.StoreButton:hover {
+		filter: brightness(110%);
+	}
+
+	.StoreButton:active {
+		border-style: inset;
+
+		img {
+		}
+	}
+</style>
diff --git a/src/lib/nav.svelte b/src/lib/nav.svelte
index 55504ae..5c37d69 100644
--- a/src/lib/nav.svelte
+++ b/src/lib/nav.svelte
@@ -7,6 +7,7 @@
 	<nav class="nav">
 		<a href="/">Home</a>
 		<a href="/posts">Posts</a>
+		<a href="/store">Store</a>
 		<a href="/changelog">Changelog</a>
 	</nav>
 {/snippet}
diff --git a/src/lib/web_buttons/webButtons.svelte b/src/lib/web_buttons/webButtons.svelte
index dbc2a3a..8e1fb34 100644
--- a/src/lib/web_buttons/webButtons.svelte
+++ b/src/lib/web_buttons/webButtons.svelte
@@ -2,7 +2,7 @@
 	import json from "./dic.json";
 	import "./webButton.scss";
 	const imageModules = import.meta.glob(
-		"./imgs/*.{avif,AVIF,heif,HEIF,jpeg,JPEG,jpg,JPG,png,PNG,tiff,TIFF,webp,WEBP}",
+		"./imgs/*.{avif,AVIF,heif,HEIF,jpeg,JPEG,jpg,JPG,png,PNG,tiff,TIFF,webp,WEBP,gif,GIF}",
 		{
 			eager: true,
 			import: "default",
@@ -11,13 +11,13 @@
 			},
 		},
 	);
-	const gifModules = import.meta.glob("./imgs/*.{gif,GIF}", {
-		eager: true,
-		import: "default",
-	});
+	// const gifModules = import.meta.glob("./imgs/*.{gif,GIF}", {
+	// 	eager: true,
+	// 	import: "default",
+	// });
 	function getImageUrl(name: string): any {
 		let query = "./imgs/" + name;
-		return imageModules[query] || gifModules[query];
+		return imageModules[query];
 	}
 	export { WebButtons };
 </script>
diff --git a/src/routes/changelog/+page.svelte b/src/routes/changelog/+page.svelte
index 6b2342c..d6dafed 100644
--- a/src/routes/changelog/+page.svelte
+++ b/src/routes/changelog/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { commitCard } from "./commitCard.svelte";
+	import commitCard from "./commitCard.svelte";
 
 	let { data } = $props();
 	let commits = data.data.commits;
diff --git a/src/routes/store/+page.server.ts b/src/routes/store/+page.server.ts
new file mode 100644
index 0000000..c67ede4
--- /dev/null
+++ b/src/routes/store/+page.server.ts
@@ -0,0 +1,21 @@
+export const prerender = true;
+
+import { execSync } from 'child_process';
+
+export type StoreEntity = {
+	image: string,
+	name: string,
+	short: string, // Short Description
+	gumroad?: string,
+	jinxxy?: string
+}
+
+const Catalog: StoreEntity[] = [
+	{ name: "Magic Circle", image: "MagicCircle", short: "", gumroad: undefined, jinxxy: "" } // Placeholder
+];
+
+export async function load() {
+	return {
+		catalog: Catalog
+	};
+}
diff --git a/src/routes/store/+page.svelte b/src/routes/store/+page.svelte
new file mode 100644
index 0000000..a5f137b
--- /dev/null
+++ b/src/routes/store/+page.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	let { data } = $props();
+	import { snackProduct } from "./snacks.svelte";
+</script>
+
+{#each data.catalog as item}
+	{@render snackProduct(item)}
+{/each}
diff --git a/src/routes/store/func.svelte b/src/routes/store/func.svelte
new file mode 100644
index 0000000..68c82db
--- /dev/null
+++ b/src/routes/store/func.svelte
@@ -0,0 +1,22 @@
+<script lang="ts" module>
+	const imgs = import.meta.glob(
+		"./imgs/*.{avif,AVIF,heif,HEIF,jpeg,JPEG,jpg,JPG,png,PNG,tiff,TIFF,webp,WEBP,svg,SVG,gif,GIF}",
+		{
+			eager: true,
+			import: "default",
+			query: {
+				enhanced: true,
+			},
+		},
+	);
+	let trimmedImgs: Record<string, unknown> = {};
+	Object.entries(imgs).forEach(([key, value]) => {
+		let trimmedString = key.replace("./imgs/", "");
+		let trimmedString2 = trimmedString.replace(/(.*)\.[^.]+$/, "$1");
+		trimmedImgs[trimmedString2] = value;
+	});
+
+	export function snackImage(img: string) {
+		return trimmedImgs[img];
+	}
+</script>
diff --git a/src/routes/store/imgs/MagicCircle.gif b/src/routes/store/imgs/MagicCircle.gif
new file mode 100644
index 0000000..9510e75
Binary files /dev/null and b/src/routes/store/imgs/MagicCircle.gif differ
diff --git a/src/routes/store/snacks.scss b/src/routes/store/snacks.scss
new file mode 100644
index 0000000..a95b8e8
--- /dev/null
+++ b/src/routes/store/snacks.scss
@@ -0,0 +1,26 @@
+.SnackProductContainer {
+  display: flex;
+  flex-direction: column;
+
+  border-width: 3px;
+  border-style: groove;
+  border-color: blue;
+
+  width: 300px;
+  height: 500px;
+
+  picture {
+    width: 300px;
+    height: 300px;
+  }
+
+  img {
+    width: 300px;
+    height: 300px;
+  }
+}
+
+.SnackProductDetails {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/routes/store/snacks.svelte b/src/routes/store/snacks.svelte
new file mode 100644
index 0000000..306112f
--- /dev/null
+++ b/src/routes/store/snacks.svelte
@@ -0,0 +1,16 @@
+<script lang="ts" module>
+	import { type StoreEntity } from "./+page.server.ts";
+	import { snackImage } from "./func.svelte";
+	import "./snacks.scss";
+	export { snackProduct };
+</script>
+
+{#snippet snackProduct(product: StoreEntity)}
+	<div class="SnackProductContainer">
+		<enhanced:img src={snackImage(product.image)} />
+		<div class="SnackProductDetails">
+			<h1>{product.name}</h1>
+			<div class="SnackProductButtons"></div>
+		</div>
+	</div>
+{/snippet}
diff --git a/vite.config.ts b/vite.config.ts
index 15ad958..8c7ec67 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,7 +5,10 @@ import tsconfigPaths from 'vite-tsconfig-paths'
 
 export default defineConfig({
 	// publicDir: "./meowmeowmeow",
-	plugins: [enhancedImages(), sveltekit(), tsconfigPaths()],
+	plugins: [
+		enhancedImages(),
+		sveltekit(),
+		tsconfigPaths()],
 	build: {
 	},
 	resolve: {