diff --git a/frontend/src/assets/images/nexus.png b/frontend/src/assets/images/nexus.png
new file mode 100644
index 0000000..04dc726
Binary files /dev/null and b/frontend/src/assets/images/nexus.png differ
diff --git a/frontend/src/assets/images/ts.webp b/frontend/src/assets/images/ts.webp
new file mode 100644
index 0000000..cdc5b2c
Binary files /dev/null and b/frontend/src/assets/images/ts.webp differ
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index beff376..5f37f76 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -3,6 +3,7 @@ export { default as ControlButtons } from './general/ControlButtons.vue'
 export { default as Sidebar } from './general/Sidebar.vue'
 
 export { default as CardOverlay } from './reusable/CardOverlay.vue'
+export { default as PlatformSelectPanels } from './reusable/PlatformSelectPanels.vue'
 
 export { default as ModListFilter } from './selected-game/ModListFilter.vue'
 export { default as ProfileManager } from './selected-game/ProfileManager.vue'
diff --git a/frontend/src/components/reusable/OutlineHoverButton.vue b/frontend/src/components/reusable/OutlineHoverButton.vue
new file mode 100644
index 0000000..3e44c25
--- /dev/null
+++ b/frontend/src/components/reusable/OutlineHoverButton.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+interface HoverProps {
+    invert: boolean
+}
+
+const props = withDefaults(defineProps<HoverProps>(), { invert: false })
+const outlined = ref(props.invert)
+</script>
+
+<template>
+    <Button :outlined="outlined" 
+        @mouseover="outlined = props.invert ? false : true" 
+        @mouseleave="outlined = props.invert ? true : false"
+    />
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/reusable/PlatformSelectPanels.vue b/frontend/src/components/reusable/PlatformSelectPanels.vue
new file mode 100644
index 0000000..c6cc35c
--- /dev/null
+++ b/frontend/src/components/reusable/PlatformSelectPanels.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import Splitter from 'primevue/splitter'
+import SplitterPanel from 'primevue/splitterpanel'
+//import OutlineHoverButton from "./OutlineHoverButton.vue"
+
+const props = defineEmits(['selectThunderstore', 'selectNexus'])
+</script>
+
+<template>
+<Splitter 
+    class="platform-splitter"
+    gutterSize.number="2"
+    stateStorage="local"
+    stateKey="platform-splitter-state"
+>
+    <SplitterPanel :min-size="1" class="platform-splitter-panel panel-ts">
+        <div class="blur w-full h-full">
+            <div class="flex column panel-text">
+                Thunderstore
+                <Button class="mt-3" label="Select" @click="$emit('selectThunderstore')"/>
+            </div>
+        </div>
+    </SplitterPanel>
+
+    <SplitterPanel :min-size="1" class="platform-splitter-panel panel-nexus">
+        <div class="blur w-full h-full">
+            <div class="flex column panel-text">
+                Nexus Mods
+                <Button class="mt-3" label="Select" @click="$emit('selectNexus')"/>
+            </div>
+        </div>
+    </SplitterPanel>
+</Splitter>
+</template>
+
+<style scoped>
+.platform-splitter {
+    margin-left: 75px;
+    height: 100vh;
+    width: 100vw;
+    background: transparent !important;
+    border: none;
+}
+
+.platform-splitter-panel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.panel-text {
+    font-size: 55px;
+    font-weight: 510;
+    user-select: none;
+    color: #ffffff;
+    text-shadow: 0 0 5px rgb(25, 25, 25);
+    text-wrap: nowrap;
+}
+
+.panel-ts {
+    background-image: url('../../assets/images/ts.webp');
+    background-position: center;
+    background-position-y: 0px;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.panel-nexus {
+    background-image: url('../../assets/images/nexus.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.blur {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: brightness(26%); /* TODO: Also use blur here, but on GPU not CPU */
+}
+
+:deep(.p-splitter-gutter) { 
+    background: #202125;
+    border: 1px solid rgba(255, 255, 255, 0.259);
+}
+
+:deep(.p-splitter-gutter-handle) { 
+    background: rgba(255, 255, 255, 0.617) !important;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
index 49bb53f..07f6cfb 100644
--- a/frontend/src/router/routes.ts
+++ b/frontend/src/router/routes.ts
@@ -3,11 +3,14 @@ import type { RouteRecordRaw } from 'vue-router'
 const Dashboard = () => import('../views/Dashboard.vue')
 const GameSelection = () => import('../views/GameSelection.vue')
 const SelectedGame = () => import('../views/SelectedGame.vue')
-const ModDevTools = () => import('../views/ModDevTools.vue')
+
+const ModDevTools = () => import('../views/mod-dev-tools/PlatformSelection.vue')
+const ModDevToolsThunderstore = () => import('../views/mod-dev-tools/Thunderstore.vue')
+const ModDevToolsNexus = () => import('../views/mod-dev-tools/Nexus.vue')
 
 const ROUTES: RouteRecordRaw[] = [{
-    path: '/', 
-    name: 'Dashboard', 
+    path: '/',
+    name: 'Dashboard',
     component: Dashboard
 }, {
     path: '/game-selection',
@@ -19,8 +22,16 @@ const ROUTES: RouteRecordRaw[] = [{
     component: SelectedGame
 }, {
     path: '/mod-dev-tools',
-    name: 'Mod Dev Tools',
+    name: 'Mod Dev Tools (Platform Selection)',
     component: ModDevTools
+}, {
+    path: '/mod-dev-tools/thunderstore',
+    name: 'Mod Dev Tools (Thunderstore)',
+    component: ModDevToolsThunderstore
+}, {
+    path: '/mod-dev-tools/nexus',
+    name: 'Mod Dev Tools (Nexus)',
+    component: ModDevToolsNexus
 }]
 
 export default ROUTES
\ No newline at end of file
diff --git a/frontend/src/views/mod-dev-tools/Nexus.vue b/frontend/src/views/mod-dev-tools/Nexus.vue
new file mode 100644
index 0000000..4082f3e
--- /dev/null
+++ b/frontend/src/views/mod-dev-tools/Nexus.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+    
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/mod-dev-tools/PlatformSelection.vue b/frontend/src/views/mod-dev-tools/PlatformSelection.vue
new file mode 100644
index 0000000..49dbc9d
--- /dev/null
+++ b/frontend/src/views/mod-dev-tools/PlatformSelection.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { PlatformSelectPanels } from "@components"
+import { onUnmounted, ref } from "vue"
+
+// enum Platform {
+//     THUNDERSTORE = 1,
+//     NEXUS
+// }
+
+// const selectedPlatform = ref(0)
+// const setSelectedPlatform = (platform: Platform) => {
+//     selectedPlatform.value = platform
+//     console.log(`[ModDevTools] Selected platform set to '${Platform[platform]}'. Index: ${platform}`)
+// }
+
+// onUnmounted(() => {
+//     selectedPlatform.value = 0
+// })
+</script>
+
+<template>
+    <PlatformSelectPanels
+        @selectThunderstore="$router.push('/mod-dev-tools/thunderstore')" 
+        @selectNexus="$router.push('/mod-dev-tools/nexus')"
+    />
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/mod-dev-tools/Thunderstore.vue b/frontend/src/views/mod-dev-tools/Thunderstore.vue
new file mode 100644
index 0000000..c168256
--- /dev/null
+++ b/frontend/src/views/mod-dev-tools/Thunderstore.vue
@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import { TSPackageManifest, TSPackageFile } from '@types'
+import { experimental } from '@frontend/wailsjs/go/models'
+
+// TODO: Finish implementing pack/unpack functionality
+import { 
+    //UnpackZip, 
+    ValidateIcon, 
+    ValidateManifest, 
+    ValidateReadme
+} from '@backend/thunderstore/Tools'
+
+// Validates each required file for uploading a Thunderstore mod.
+function ValidateFiles(icon: experimental.IconValidatorParams, readme: TSPackageFile, manifest: TSPackageManifest) {
+    ValidateIcon(icon)
+    ValidateReadme(readme.data)
+
+    if (!manifest.author) return
+    ValidateManifest(manifest.author, manifest.data)
+}
+
+const items = ref([{ 
+    label: 'Your Packages', 
+    icon: 'pi pi-box' 
+}, {
+    label: 'Package Validater',
+    icon: 'pi pi-check-square' 
+}])
+</script>
+
+<template>
+<div class="mod-dev-tools column">
+    <DataView dataKey="dev-package-list">
+
+    </DataView>
+</div>
+
+<div class="no-drag">
+    <FileUpload
+        name="demo[]"
+        accept=".zip"
+        :multiple="false"
+        :maxFileSize="1000000"
+        :showUploadButton="false"
+        @select=""
+    >
+        <template #content>
+
+        </template>
+
+        <template #empty>
+            <div class="flex row pi pi-upload gap-2">
+                <div>Drag and drop your mod zip file here.</div>
+            </div>
+        </template>
+    </FileUpload>
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file