diff --git a/backend/app/app.go b/backend/app/app.go
index d85608d..445c7de 100644
--- a/backend/app/app.go
+++ b/backend/app/app.go
@@ -162,7 +162,8 @@ func (app *Application) GetMaxProcs() int {
 	return runtime.GOMAXPROCS(0)
 }
 
-// Num is clamped between 1 and NumCPU*2 as any further is unnecessary and may cause overhead.
+// Sets GOMAXPROCS to given value and ensures it is clamped between 1 and NumCPU*2 as any further may degrade performance due to context switching.
+// Note that blocking syscalls can have their own threads regardless of the limit set here.
 func SetMaxProcs(num uint8) int {
 	return runtime.GOMAXPROCS(lo.Clamp(int(num), 1, runtime.NumCPU()*2))
 }
diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index a8cc3c4..a208aa2 100644
Binary files a/frontend/bun.lockb and b/frontend/bun.lockb differ
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index dcea524..e268557 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -15,10 +15,7 @@ import {
 import { useAppStore } from '@stores'
 import { getOpenDialogs } from '@composables'
 
-const appStore = useAppStore()
-const {
-    setMaxThreads
-} = appStore
+const { setMaxThreads } = useAppStore()
 
 //const settingsDialog = useDialog('settings')
 
diff --git a/frontend/src/components/general/Sidebar.vue b/frontend/src/components/general/Sidebar.vue
index fb67128..3b20a06 100644
--- a/frontend/src/components/general/Sidebar.vue
+++ b/frontend/src/components/general/Sidebar.vue
@@ -1,28 +1,33 @@
 <script lang="ts" setup>
 import router from "../../router"
-import { useDialog } from '@composables'
 
 import { tooltipOpts } from "../../util"
+
 import { t } from '@i18n'
+import { useDialog } from '@composables'
+import { useAppStore } from "@stores"
+import { storeToRefs } from "pinia"
 
 const settings = useDialog('settings')
 const appInfo = useDialog('app-info')
 
+const appStore = useAppStore()
+const { expanded, sidebarWidth } = storeToRefs(appStore)
+
 const Dashboard = () => router.push('/')
 const GameSelection = () => router.push('/game-selection')
 const ModDevTools = () => router.push('/mod-dev-tools')
 </script>
 
 <template>
-<div class="sidebar drag">
+<div v-if="expanded" class="sidebar-expanded">
     <img class="icon no-select" src="../../assets/images/appicon.png">
 
     <div class="flex column h-full">
         <div class="top flex column">
             <Button 
-                plain severity="secondary"
                 class="btn margin-lr no-drag" icon="pi pi-home" 
-                v-tooltip="tooltipOpts(t('tooltips.sidebar.dashboard'))"
+                :label="t('tooltips.sidebar.dashboard')"
                 @click="Dashboard"
             />
 
@@ -30,6 +35,7 @@ const ModDevTools = () => router.push('/mod-dev-tools')
                 plain severity="secondary"
                 class="btn margin-lr no-drag" 
                 v-tooltip="tooltipOpts(t('tooltips.sidebar.game-selection'))"
+                label="Games"
                 @click="GameSelection"
             >
                 <template #icon>
@@ -64,6 +70,63 @@ const ModDevTools = () => router.push('/mod-dev-tools')
             <Button
                 severity="secondary"
                 class="btn margin-lr spin-hover no-drag" icon="pi pi-cog" 
+                :label="t('keywords.settings')"
+                @click="settings.setVisible()"
+            />
+        </div>
+    </div>
+</div>
+
+<div v-else class="sidebar">
+    <img class="icon-alt no-select" src="../../assets/images/appicon.png">
+
+    <div class="flex column h-full">
+        <div class="top flex column">
+            <Button 
+                plain severity="secondary"
+                class="btn-alt margin-lr no-drag" icon="pi pi-home" 
+                v-tooltip="tooltipOpts(t('tooltips.sidebar.dashboard'))"
+                @click="Dashboard"
+            />
+
+            <Button 
+                plain severity="secondary"
+                class="btn-alt margin-lr no-drag" 
+                v-tooltip="tooltipOpts(t('tooltips.sidebar.game-selection'))"
+                @click="GameSelection"
+            >
+                <template #icon>
+                    <span class="material-symbols-sharp">stadia_controller</span>
+                </template>
+            </Button>
+        </div>
+    
+        <div class="spacer"></div>
+
+        <div class="top flex column">
+            <Button 
+                severity="secondary"
+                class="btn-alt margin-lr no-drag" icon="pi pi-wrench"
+                v-tooltip="tooltipOpts(t('tooltips.sidebar.mod-dev-tools'))"
+                @click="ModDevTools"
+            />
+
+            <!-- <Button plain outlined class="btn margin-lr no-drag" icon="pi pi-upload"/> -->
+        </div>
+
+        <div class="spacer"></div>
+ 
+        <div class="bottom flex column">
+            <Button severity="secondary"
+                class="btn-alt margin-lr no-drag"
+                icon="pi pi-info-circle"
+                @click="appInfo.setVisible()"
+            />
+
+            <!-- <Button text class="btn margin-lr no-drag" :icon="themeMode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'" @click="ToggleThemeMode"/> -->
+            <Button
+                severity="secondary"
+                class="btn-alt margin-lr spin-hover no-drag" icon="pi pi-cog" 
                 v-tooltip="tooltipOpts(t('keywords.settings'))"
                 @click="settings.setVisible()"
             />
@@ -80,26 +143,52 @@ const ModDevTools = () => router.push('/mod-dev-tools')
     position: fixed;
     z-index: 999;
     height: 100vh;
-    width: 75px;
+    width: v-bind(sidebarWidth);
     border-right: 1px outset rgba(255, 255, 255, 0.45);
-    background-color: #202125;
+    background-color: #252529;
 }
 
-.sidebar img {
-    margin: 15px 0px 20px 0px;
+.sidebar-expanded {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: fixed;
+    z-index: 999;
+    height: 100vh;
+    width: v-bind(sidebarWidth);
+    padding-left: 20px;
 }
 
 .icon {
-    width: 50px;
-    height: 58px;
+    width: 70px;
+    height: 77px;
+    margin: 20px 0px 20px 0px;
+}
+
+.icon-alt {
+    width: 53px;
+    height: 60px;
+    margin: 20px 0px 20px 0px;
 }
 
 .btn {
+    position: relative;
+    border-radius: 3px;
+    background: transparent !important;
+    color: rgba(255, 255, 255, 0.85);
+    border: none !important;
+}
+
+.btn-alt {
     position: relative;
     border-radius: 3px;
     border: 1px solid rgba(255, 255, 255, 0.3) !important;
 }
 
+.btn > * {
+    font-size: 20px;
+}
+
 .top .p-button {
     margin-bottom: 10px;
 }
@@ -124,6 +213,7 @@ const ModDevTools = () => router.push('/mod-dev-tools')
 }
 
 .material-symbols-sharp {
+    font-size: 25px;
     font-variation-settings: 'FILL' 0, 'wght' 270, 'GRAD' 100, 'opsz' 40
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/stores/game.ts b/frontend/src/stores/game.ts
index 4e7b576..26f4a55 100644
--- a/frontend/src/stores/game.ts
+++ b/frontend/src/stores/game.ts
@@ -2,7 +2,7 @@ import type { ThunderstoreGame } from '@types'
 import { defineStore } from 'pinia'
 
 import { Save, SetFavouriteGames } from '@backend/app/Persistence'
-import { type Ref, ref, computed } from 'vue'
+import { ref, computed } from 'vue'
 
 import { GetPersistence } from '@backend/app/Application.js'
 import { BepinexInstalled } from '@backend/game/GameManager.js'
@@ -18,11 +18,13 @@ export interface GameState {
 
 export const useGameStore = defineStore('GameStore', () => {
     //#region State
-    const selectedGame = ref({
-        identifier: ''
-    }) as Ref<ThunderstoreGame>
+    const selectedGame = ref<ThunderstoreGame>({
+        title: 'Placeholder',
+        identifier: '',
+        steamID: 0,
+    })
 
-    const games = ref(new Map()) as Ref<Map<string, ThunderstoreGame>>
+    const games = ref<Map<string, ThunderstoreGame>>(new Map())
     //#endregion
 
     //#region Getters
diff --git a/frontend/src/stores/index.ts b/frontend/src/stores/index.ts
index c221b2e..941266a 100644
--- a/frontend/src/stores/index.ts
+++ b/frontend/src/stores/index.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 export interface AppState {
     maxThreads: number
@@ -8,12 +8,25 @@ export interface AppState {
 export const useAppStore = defineStore('AppStore', () => {
     const maxThreads = ref(2)
 
-    function setMaxThreads(num: number) {
-        maxThreads.value = num
+    const expanded = ref(false)
+    const sidebarWidth = computed(() => (expanded.value ? '180px' : '75px'))
+  
+    function toggleSidebar() {
+        expanded.value = !expanded.value
     }
 
-    return {
+    /**
+     * Updates value of `maxThreads` ref to make frontend aware of max logical CPUs.
+     */
+    async function setMaxThreads(count: number) {
+        maxThreads.value = count
+    }
+
+    return { 
         maxThreads,
+        expanded, 
+        sidebarWidth, 
+        toggleSidebar,
         setMaxThreads
     }
 })
diff --git a/frontend/src/stores/settings.ts b/frontend/src/stores/settings.ts
index 3681557..2bdfe34 100644
--- a/frontend/src/stores/settings.ts
+++ b/frontend/src/stores/settings.ts
@@ -15,9 +15,9 @@ import type { app } from "@backend/models.js"
 import type { Theme } from "@types"
 import { ref } from 'vue'
 
-export interface SettingsState {
+// export interface SettingsState {
 
-}
+// }
 
 export const useSettingsStore = defineStore("SettingsStore", () => {
     //#region State
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index 35ecdaf..3c5ff26 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -8,8 +8,14 @@ import FloatLabel from 'primevue/floatlabel'
 import { reactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useAppStore } from '@stores'
+import { storeToRefs } from 'pinia'
+
 const { t } = useI18n()
 
+const appStore = useAppStore()
+const { sidebarWidth } = storeToRefs(appStore)
+
 interface PackageInfo {
     name: string
     resultText?: string
@@ -59,7 +65,7 @@ async function getPackages() {
 <!-- #region Style -->
 <style scoped>
 .dashboard {
-    margin-left: 75px; /* Account for sidebar */
+    margin-left: v-bind(sidebarWidth); /* Account for sidebar */
     position: relative;
     text-align: center;
     user-select: none;
diff --git a/frontend/src/views/GameSelection.vue b/frontend/src/views/GameSelection.vue
index 66dab2e..b542a4e 100644
--- a/frontend/src/views/GameSelection.vue
+++ b/frontend/src/views/GameSelection.vue
@@ -21,21 +21,24 @@ import type {
 import { t } from '@i18n'
 import { tooltipOpts, openLink } from "../../src/util"
 
-import { useGameStore } from '@stores'
+import { useGameStore, useAppStore } from '@stores'
 import { storeToRefs } from 'pinia'
 
 import router from '../router'
 
-const store = useGameStore()
+const appStore = useAppStore()
+const { sidebarWidth } = storeToRefs(appStore)
+
+const gameStore = useGameStore()
 const {
     gamesAsArray,
-} = storeToRefs(store)
+} = storeToRefs(gameStore)
 
 const {
     toggleFavouriteGame,
     setSelectedGame,
     initGames
-} = store
+} = gameStore
 
 const loading = ref(true)
 const searchInput = ref<Nullable<string>>(null)
@@ -82,7 +85,7 @@ const filterBySearch = (games: ThunderstoreGame[]) => {
     return games.filter(g => {
         const lowerTitle = g.title?.toLowerCase() ?? ""
 
-        // Necessary to not show irrelevent games with only 1 letter input.
+        // Only show relevent games that start with this (only) letter.
         if (input.length == 1 && !lowerTitle.startsWith(lowerInput)) {
             return false
         }
@@ -148,7 +151,7 @@ const scrollToGame = () => {
     const game = gameElements.value[i]
     if (!game) return
 
-    // We only need Element for scroll methods.
+    // We only need it as a base Element for the scroll methods.
     (game as Element).scrollIntoView({ block: 'start' })
 }
 
@@ -274,7 +277,7 @@ onMounted(async () => {
                             </Dropdown>
                         </div>
                         
-                        <div class="flex flex-row">
+                        <div class="flex flex-row" style="border: 1px solid var(--p-inputtext-border-color); border-radius: 6.5px;">
                             <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                                 <template #option="{ option }">
                                     <i :class="[option === 'list' ? 'pi pi-list' : 'pi pi-th-large']" />
@@ -392,7 +395,7 @@ onMounted(async () => {
 <style scoped>
 .game-selection {
     padding-top: 0px;
-    margin-left: 75px; /* Account for sidebar */
+    margin-left: v-bind(sidebarWidth); /* Account for sidebar */
 }
 
 .game-selection .header {
@@ -484,7 +487,6 @@ onMounted(async () => {
 }
 
 :deep(.searchbar .p-inputtext) {
-    background: rgba(0, 0, 0, 0.2);
     margin-left: auto;
     margin-right: auto;
     width: 350px;
diff --git a/frontend/src/views/ModDevTools.vue b/frontend/src/views/ModDevTools.vue
index e9f76ec..d927a76 100644
--- a/frontend/src/views/ModDevTools.vue
+++ b/frontend/src/views/ModDevTools.vue
@@ -15,6 +15,12 @@ import {
     ValidateReadme
 } from '@backend/thunderstore/Tools'
 
+import { useAppStore } from "@stores"
+import { storeToRefs } from "pinia"
+
+const appStore = useAppStore()
+const { sidebarWidth } = storeToRefs(appStore)
+
 // Validates each required file for uploading a Thunderstore mod.
 function ValidateFiles(icon: experimental.IconValidatorParams, readme: TSPackageFile, manifest: TSPackageManifest) {
     ValidateIcon(icon)
@@ -63,7 +69,7 @@ const items = ref([{
 
 <style scoped>
 .mod-dev-tools {
-    margin-left: 75px; /* Account for sidebar */
+    margin-left: v-bind(sidebarWidth); /* Account for sidebar */
     top: 350px;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/SelectedGame.vue b/frontend/src/views/SelectedGame.vue
index 901383a..b8fe0dc 100644
--- a/frontend/src/views/SelectedGame.vue
+++ b/frontend/src/views/SelectedGame.vue
@@ -20,9 +20,13 @@ import {
 } from "@components"
 
 import type { Package, Nullable } from "@types"
-import { useGameStore } from "@stores"
+import { useAppStore, useGameStore } from "@stores"
 
 import { debounce } from "../util"
+import { storeToRefs } from "pinia"
+
+const appStore = useAppStore()
+const { sidebarWidth } = storeToRefs(appStore)
 
 const gameStore = useGameStore()
 const { selectedGame, updateModCache } = gameStore
@@ -40,7 +44,7 @@ const modElements = ref<any[]>([])
 const scrollIndex = ref(0)
 
 const mods = ref<thunderstore.StrippedPackage[]>([])
-const currentPageMods= ref<Package[]>([])
+const currentPageMods = ref<Package[]>([])
 
 const installing = ref(false)
 const lastInstalledMod = ref<Nullable<v1.PackageVersion>>(null)
@@ -190,7 +194,7 @@ const scrollToMod = () => {
     const game = modElements.value[i]
     if (!game) return
 
-    (game as Element).scrollIntoView({ block: 'start' })
+    game.scrollIntoView({ block: 'start' })
 }
 
 const handleScroll = (e: WheelEvent) => {
@@ -214,7 +218,7 @@ const handleScroll = (e: WheelEvent) => {
         <div class="flex column">
             <Card class="selected-game-card no-drag">
                 <template #title>
-                    <p class="selected-game-card-header mt-0 mb-1">
+                    <p class="selected-game-card-header mt-0 mb-2">
                         {{ $t('selected-game.currently-selected') }}
                     </p>
                 </template>
@@ -412,12 +416,13 @@ const handleScroll = (e: WheelEvent) => {
 .selected-game {
     display: flex;
     flex-direction: column;
-    margin-left: 75px; /* Account for sidebar */
+    margin-left: v-bind(sidebarWidth); /* Account for sidebar */
     margin-top: 30px;
 }
 
 .selected-game-card {
     background: none;
+    box-shadow: none;
     width: max-content;
     flex-shrink: 0;
 }
@@ -426,6 +431,8 @@ const handleScroll = (e: WheelEvent) => {
     font-size: 34px;
     font-weight: 540;
     user-select: none;
+    justify-self: start;
+    text-align: start;
 }
 
 .selected-game-card :deep(.p-card-body) {
@@ -529,6 +536,7 @@ const handleScroll = (e: WheelEvent) => {
     background: none !important;
 }
 
+/* TODO: Investigate why this padding affects profile manager. */
 :deep(.p-dataview-header) {
     background: none !important;
     padding: 10px 0px 10px 0px;