diff --git a/fclauncher/frontend/package.json.md5 b/fclauncher/frontend/package.json.md5
index 20dd88f..b063894 100755
--- a/fclauncher/frontend/package.json.md5
+++ b/fclauncher/frontend/package.json.md5
@@ -1 +1 @@
-48cb20b8d107dab0a7876a449352234a
\ No newline at end of file
+ad9da3c17151b053a4d2fda8e3578901
\ No newline at end of file
diff --git a/fclauncher/frontend/src/App.svelte b/fclauncher/frontend/src/App.svelte
index 360865b..94a9a88 100644
--- a/fclauncher/frontend/src/App.svelte
+++ b/fclauncher/frontend/src/App.svelte
@@ -2,6 +2,7 @@
   import logo from './assets/images/fc-logo.png'
   import Instances from './Instances.svelte'
 	import Loading from './Loading.svelte'
+	import Modpacks from './Modpacks.svelte'
   import {CheckPrerequisites} from '../wailsjs/go/main/App.js'
 	import { onMount } from 'svelte'
 	import { loading, testPage, currentPage } from './global'
@@ -58,6 +59,10 @@
 		<div transition:slide="{{duration:100}}" class="central">
   		<Instances />
 		</div>
+	{:else if $currentPage == 3}
+		<div transition:slide="{{duration:100}}" class="central">
+  		<Modpacks />
+		</div>
 	{/if}
   	</body>	
 	</div>
diff --git a/fclauncher/frontend/src/Modpacks.svelte b/fclauncher/frontend/src/Modpacks.svelte
new file mode 100644
index 0000000..ba6223c
--- /dev/null
+++ b/fclauncher/frontend/src/Modpacks.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import {onMount} from 'svelte'
+    import {GetModpacks} from '../wailsjs/go/main/ModpackManager.js'
+    import { main } from '../wailsjs/go/models';
+    let modpacks: main.Modpack[] = []
+    let pack: main.Modpack
+
+    onMount(() => {
+        GetModpacks().then((result) => {
+            modpacks = result
+        })
+    })
+
+</script>
+
+<main>
+    <select id="pack" bind:value={pack} name="pack">Select a Modpack: 
+        {#each modpacks as pack}
+            <option value={pack}>{pack.Name}</option>
+        {/each}
+    </select>
+</main>
\ No newline at end of file
diff --git a/fclauncher/frontend/src/Navbar.svelte b/fclauncher/frontend/src/Navbar.svelte
index 2fcb506..4352bb0 100644
--- a/fclauncher/frontend/src/Navbar.svelte
+++ b/fclauncher/frontend/src/Navbar.svelte
@@ -32,7 +32,7 @@ function unextend(){
 
         </li>
         <li class="nav-item">
-            <a href="#" class="nav-link">
+            <a href="#" class="nav-link" on:click={() => {$currentPage = 3}}>
                 <svg xmlns="http://www.w3.org/2000/svg" class="nav-icon" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
 
                 <span class="link-text">Browse Packs</span>