diff --git a/desktop/src-tauri/capabilities/default.json b/desktop/src-tauri/capabilities/default.json
index fbd04506..cf8c9fe1 100644
--- a/desktop/src-tauri/capabilities/default.json
+++ b/desktop/src-tauri/capabilities/default.json
@@ -12,6 +12,7 @@
 		"window:allow-destroy",
 		"window:allow-start-dragging",
 		"window:allow-minimize",
-		"event:default"
+		"event:default",
+		"shell:allow-open"
 	]
 }
diff --git a/desktop/src/globals.css b/desktop/src/globals.css
index af1a365b..77657ac3 100644
--- a/desktop/src/globals.css
+++ b/desktop/src/globals.css
@@ -27,9 +27,16 @@ h4 { @apply text-lg font-medium; }
 .os-scrollbar {
     --os-size: 10px;
     --os-track-border-radius: theme(borderRadius.lg);
-    /* --os-handle-bg: theme("colors.gray[0.05]");
-    --os-handle-bg-hover: theme(colors.gray[0.10]); */
-    /* --os-handle-bg-active: theme(colors.gray[0.05]); */
+    --os-handle-bg: rgba(255, 255, 255, 0.05);
+    --os-handle-bg-hover: rgba(255, 255, 255, 0.10);
+    --os-handle-bg-active: rgba(255, 255, 255, 0.07);
+    --os-handle-perpendicular-size-hover: 140%;
+    --os-handle-perpendicular-size-active: 140%;
+    --os-handle-interactive-area-offset: 1;
+}
+
+.os-scrollbar-offset-right {
+    --os-padding-axis: 10;
 }
 
 .os-hide-horizontal-scrollbar > .os-scrollbar-horizontal {
@@ -37,7 +44,7 @@ h4 { @apply text-lg font-medium; }
 }
 
 .page-animation-enter-active, .page-animation-leave-active {
-    transition: opacity 200ms, transform 250ms;
+    transition: opacity 160ms, transform 175ms;
     transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
diff --git a/desktop/src/ui/App.tsx b/desktop/src/ui/App.tsx
index 83e5f422..446bc1c6 100644
--- a/desktop/src/ui/App.tsx
+++ b/desktop/src/ui/App.tsx
@@ -14,7 +14,7 @@ function App(props: ParentProps) {
 	}
 
 	return (
-<main class="flex flex-col bg-primary w-full min-h-screen overflow-hidden h-screen max-h-screen text-fg-primary">
+		<main class="flex flex-col bg-primary w-full min-h-screen overflow-hidden h-screen max-h-screen text-fg-primary">
 			<ErrorBoundary><WindowFrame /></ErrorBoundary>
 			<div class="flex flex-col px-8">
 				<Navbar />
@@ -35,4 +35,4 @@ function App(props: ParentProps) {
 	);
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/desktop/src/ui/components/Sidebar.tsx b/desktop/src/ui/components/Sidebar.tsx
index 82a140a3..2bee13ee 100644
--- a/desktop/src/ui/components/Sidebar.tsx
+++ b/desktop/src/ui/components/Sidebar.tsx
@@ -48,7 +48,7 @@ function Sidebar(props: SidebarProps) {
 										<a
 											onClick={() => goto(link[2])}
 											class={
-                                                `px-3 py-1 rounded-md text-md hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2]) ? 'bg-gray-0.05' : ''}`
+                                                `px-3 py-1 rounded-md text-md hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2]) ? 'bg-gray-05' : ''}`
                                             }
 										>
 											<span class="flex flex-row items-center gap-x-3 *:w-5">
diff --git a/desktop/src/ui/components/base/Button.module.scss b/desktop/src/ui/components/base/Button.module.scss
index 21290884..dcca45e4 100644
--- a/desktop/src/ui/components/base/Button.module.scss
+++ b/desktop/src/ui/components/base/Button.module.scss
@@ -6,8 +6,8 @@
         @apply bg-brand hover:bg-brand-hover active:bg-brand-pressed disabled:bg-brand-disabled;
     }
 
-    &__secondary {
-        @apply border border-gray-0.05;
+    &__secondary, &__iconSecondary {
+        @apply border border-gray-05;
         @apply text-fg-primary hover:text-fg-primary-hover active:text-fg-primary-pressed disabled:text-fg-primary-disabled;
         @apply bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed disabled:bg-component-bg-disabled;
     }
@@ -17,11 +17,11 @@
     }
 
     &__ghost {
-        @apply hover:bg-gray-0.05 active:bg-gray-0.10;
+        @apply hover:bg-gray-05 active:bg-gray-10;
     }
 
-    &__icon {
-        @apply p-1.5 hover:bg-gray-0.05 active:bg-gray-0.10 aspect-square box-border w-8 h-8;
+    &__icon, &__iconSecondary {
+        @apply p-1.5 hover:bg-gray-05 active:bg-gray-10 aspect-square box-border w-8 h-8;
 
         &.large {
             @apply w-9 h-9;
diff --git a/desktop/src/ui/components/base/Button.tsx b/desktop/src/ui/components/base/Button.tsx
index 383449a3..c857415d 100644
--- a/desktop/src/ui/components/base/Button.tsx
+++ b/desktop/src/ui/components/base/Button.tsx
@@ -5,7 +5,7 @@ import styles from './Button.module.scss';
 type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & ParentProps & {
 	iconLeft?: JSX.Element;
 	iconRight?: JSX.Element;
-	buttonStyle?: 'primary' | 'secondary' | 'danger' | 'icon' | 'ghost';
+	buttonStyle?: 'primary' | 'secondary' | 'danger' | 'icon' | 'iconSecondary' | 'ghost';
 	large?: boolean;
 };
 
diff --git a/desktop/src/ui/components/base/Tag.module.scss b/desktop/src/ui/components/base/Tag.module.scss
index f9b902f0..af25cce4 100644
--- a/desktop/src/ui/components/base/Tag.module.scss
+++ b/desktop/src/ui/components/base/Tag.module.scss
@@ -1,6 +1,6 @@
 .tag {
     @apply flex flex-row justify-center items-center gap-x-2;
-    @apply bg-component-bg/60 border border-gray-0.05 text-fg-secondary text-sm font-medium backdrop-blur-md rounded-lg px-2.5 py-0.5;
+    @apply bg-component-bg/60 border border-gray-05 text-fg-secondary text-sm font-medium backdrop-blur-md rounded-lg px-2.5 py-0.5;
 }
 
 .icon > * {
diff --git a/desktop/src/ui/components/base/TextField.module.scss b/desktop/src/ui/components/base/TextField.module.scss
index b7a307d0..a8d1de10 100644
--- a/desktop/src/ui/components/base/TextField.module.scss
+++ b/desktop/src/ui/components/base/TextField.module.scss
@@ -1,6 +1,6 @@
 .textfield {
     @apply bg-component-bg [&:not(:focus-within)]:hover:bg-component-bg-hover focus-within:bg-component-bg-pressed disabled:bg-component-bg-disabled;
-    @apply border border-gray-0.05 text-fg-primary fill-fg-primary;
+    @apply border border-gray-05 text-fg-primary fill-fg-primary;
     @apply rounded-lg px-2.5 py-1.5;
     @apply flex flex-row gap-x-1.5;
 
diff --git a/desktop/src/ui/components/overlay/AccountPopup.tsx b/desktop/src/ui/components/overlay/AccountPopup.tsx
index 81c03e06..a5c5e244 100644
--- a/desktop/src/ui/components/overlay/AccountPopup.tsx
+++ b/desktop/src/ui/components/overlay/AccountPopup.tsx
@@ -12,7 +12,7 @@ interface AccountComponentProps {
 
 function AccountComponent(props: AccountComponentProps) {
 	return (
-		<div class={`flex flex-row justify-between p-2 rounded-lg ${!props.loggedIn && 'hover:bg-gray-0.05 active:bg-gray-0.10 hover:text-fg-primary-hover'}`}>
+		<div class={`flex flex-row justify-between p-2 rounded-lg ${!props.loggedIn && 'hover:bg-gray-05 active:bg-gray-10 hover:text-fg-primary-hover'}`}>
 			<div class="flex flex-row justify-start flex-1 gap-x-3">
 				<PlayerHead class="w-8 h-8 rounded-md" uuid={props.uuid} />
 				<div class="flex flex-col items-center justify-center">
@@ -36,17 +36,17 @@ function AccountPopup(props: Popup.PopupProps) {
 
 	return (
 		<Popup {...props}>
-			<div class="bg-secondary rounded-xl border border-gray-0.10 w-72 p-2 shadow-lg shadow-black/50">
+			<div class="bg-secondary rounded-xl border border-gray-10 w-72 p-2 shadow-lg shadow-black/50">
 				<div class="flex flex-col gap-y-2 text-fg-primary">
 					<AccountComponent username={loggedInAccount.username} uuid={loggedInAccount.uuid} loggedIn />
 
-					<div class="w-full h-px bg-gray-0.05 rounded-md" />
+					<div class="w-full h-px bg-gray-05 rounded-md" />
 
 					<AccountComponent username="Caledonian" uuid="f247be7c5b8241c69148793ded77e71f" />
 					<AccountComponent username="Caledonian" uuid="069a79f4-44e9-4726-a5be-fca90e38aaf5" />
 					<AccountComponent username="Caledonian" uuid="f247be7c5b8241c69148793ded77e71f" />
 
-					<div class="w-full h-px bg-gray-0.05 rounded-md" />
+					<div class="w-full h-px bg-gray-05 rounded-md" />
 
 					<div class="flex flex-row justify-between">
 						<div>
diff --git a/desktop/src/ui/components/overlay/ContextMenu.tsx b/desktop/src/ui/components/overlay/ContextMenu.tsx
index d341df48..610ce235 100644
--- a/desktop/src/ui/components/overlay/ContextMenu.tsx
+++ b/desktop/src/ui/components/overlay/ContextMenu.tsx
@@ -36,7 +36,7 @@ function ContextMenu(props: ContextMenuProps) {
 			visible={props.visible}
 			setVisible={props.setVisible}
 		>
-			<div ref={setRef} class="bg-secondary rounded-xl border border-gray-0.10 p-1 shadow-lg shadow-black/50">
+			<div ref={setRef} class="bg-secondary rounded-xl border border-gray-10 p-1 shadow-lg shadow-black/50">
 				<div class="flex flex-col gap-y-1 text-fg-primary">
 					{props.children}
 				</div>
@@ -46,7 +46,7 @@ function ContextMenu(props: ContextMenuProps) {
 }
 
 ContextMenu.Seperator = function () {
-	return <div class="border-b mx-1 border-gray-0.05" />;
+	return <div class="border-b mx-1 border-gray-05" />;
 };
 
 interface ContextMenuRowProps {
@@ -59,7 +59,7 @@ ContextMenu.Row = function (props: ContextMenuRowProps) {
 	return (
 		<div
 			onClick={e => props.onClick?.(e)}
-			class="flex items-center gap-x-2 m-px px-1.5 py-0.5 rounded-lg hover:bg-gray-0.05 active:bg-gray-0.10 [&>svg]:w-[18px]"
+			class="flex items-center gap-x-2 m-px px-1.5 py-0.5 rounded-lg hover:bg-gray-05 active:bg-gray-10 [&>svg]:w-[18px]"
 		>
 			{props.icon}
 			{props.text}
diff --git a/desktop/src/ui/components/overlay/notifications/NotificationPopup.tsx b/desktop/src/ui/components/overlay/notifications/NotificationPopup.tsx
index bb18399b..5cc8546e 100644
--- a/desktop/src/ui/components/overlay/notifications/NotificationPopup.tsx
+++ b/desktop/src/ui/components/overlay/notifications/NotificationPopup.tsx
@@ -46,7 +46,7 @@ function NotificationPopup(props: Popup.PopupProps) {
 
 	return (
 		<Popup {...props}>
-			<div class="bg-secondary rounded-xl border border-gray-0.10 w-96 p-2 shadow-lg shadow-black/50">
+			<div class="bg-secondary rounded-xl border border-gray-10 w-96 p-2 shadow-lg shadow-black/50">
 				<div class="overflow-hidden transition-[height]" ref={parent}>
 					<div class="flex flex-col justify-start items-stretch text-start gap-2" ref={inner}>
 						<p class="text-2lg px-2 pt-1">Notifications</p>
@@ -59,7 +59,7 @@ function NotificationPopup(props: Popup.PopupProps) {
 											{noti => (
 												<div class="flex flex-col w-full">
 													<NotificationComponent data={noti} overlay={false} />
-													<span class="bg-gray-0.05 h-px w-full" />
+													<span class="bg-gray-05 h-px w-full" />
 												</div>
 											)}
 										</For>
@@ -68,7 +68,7 @@ function NotificationPopup(props: Popup.PopupProps) {
 							</Match>
 							<Match when={notifications().length === 0}>
 								<span class="px-2">You have no notifications</span>
-								<span class="bg-gray-0.05 h-px" />
+								<span class="bg-gray-05 h-px" />
 							</Match>
 						</Switch>
 
diff --git a/desktop/src/ui/pages/Home.tsx b/desktop/src/ui/pages/Home.tsx
index 51d2ae44..f0749883 100644
--- a/desktop/src/ui/pages/Home.tsx
+++ b/desktop/src/ui/pages/Home.tsx
@@ -135,7 +135,7 @@ function ClusterCard(props: Core.ClusterWithManifest) {
 				onMouseDown={e => onMouseDown(e)}
 				onContextMenu={e => openContextMenu(e)}
 				ref={ref}
-				class="relative h-[152px] group flex flex-col rounded-xl bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed border border-gray-0.05"
+				class="relative h-[152px] group flex flex-col rounded-xl bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed border border-gray-05"
 			>
 				<div class="flex-1 relative overflow-hidden rounded-t-xl">
 					<div
diff --git a/desktop/src/ui/pages/cluster/ClusterLogs.tsx b/desktop/src/ui/pages/cluster/ClusterLogs.tsx
index 046ae7c2..eb4692f4 100644
--- a/desktop/src/ui/pages/cluster/ClusterLogs.tsx
+++ b/desktop/src/ui/pages/cluster/ClusterLogs.tsx
@@ -36,7 +36,7 @@ function ClusterLogs() {
 							const pretty = log.split('/').pop();
 							return (
 								<button
-									class={`border border-gray-0.10 rounded-md px-2 py-1 ${activeLogFile() === log ? 'bg-gray-0.10' : ''}`}
+									class={`border border-gray-10 rounded-md px-2 py-1 ${activeLogFile() === log ? 'bg-gray-10' : ''}`}
 									onClick={() => setActiveLogFile(log)}
 									children={pretty}
 								/>
diff --git a/desktop/src/ui/pages/cluster/ClusterMods.tsx b/desktop/src/ui/pages/cluster/ClusterMods.tsx
index 9c7f4252..b1c465d1 100644
--- a/desktop/src/ui/pages/cluster/ClusterMods.tsx
+++ b/desktop/src/ui/pages/cluster/ClusterMods.tsx
@@ -1,9 +1,94 @@
+import { open } from '@tauri-apps/plugin-shell';
+import { ArrowRightIcon, Edit02Icon, LinkExternal01Icon, Trash03Icon } from '@untitled-theme/icons-solid';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid';
+import { For, Show } from 'solid-js';
+import * as uuid from 'uuid';
+import Button from '~ui/components/base/Button';
+
+const mods = Array<ModEntryProps>(15).fill({
+	id: uuid.v4(),
+	name: 'Mod Name',
+	author: 'Author Name',
+	version: '1.0.0',
+	description: 'This is a mod description',
+	provider: 'curseforge',
+	thumbnail: 'https://cdn.modrinth.com/data/AANobbMI/icon.png',
+});
+
 function ClusterMods() {
 	return (
-		<div>
+		<div class="flex flex-col flex-1">
 			<h1>Mods</h1>
+			<div class="flex flex-col flex-1 rounded-lg overflow-hidden w-[calc(100%+14px)]">
+				<OverlayScrollbarsComponent class="os-hide-horizontal-scrollbar relative flex-1">
+					<div class="flex flex-col absolute w-[calc(100%-14px)] gap-2">
+						<For each={mods}>
+							{mod => (
+								<ModEntry {...mod} />
+							)}
+						</For>
+					</div>
+				</OverlayScrollbarsComponent>
+			</div>
 		</div>
 	);
 }
 
 export default ClusterMods;
+
+// TODO: Mod
+interface ModEntryProps {
+	id: string;
+	thumbnail: string;
+	name: string;
+	author: string;
+	version: string;
+	description: string;
+	provider: 'curseforge' | 'modrinth' | 'polyfrost';
+};
+
+function ModEntry(props: ModEntryProps) {
+	return (
+		<div class="bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed p-3 gap-3 rounded-xl flex flex-row items-center">
+			<div>
+				<img src={props.thumbnail} alt={props.name} class="aspect-ratio-square h-10 rounded-lg" />
+			</div>
+			<div class="flex flex-col flex-1">
+				<div class="flex flex-row justify-between items-center">
+					<div class="flex flex-col items-start justify-center">
+						<div class="flex flex-row items-center">
+							<h3>{props.name}</h3>
+							<span class="flex flex-row items-center text-sm font-600 text-fg-secondary/50 ml-2">
+								{props.version}
+								{/* TODO: Add version checker */}
+								{/* <Show when={props.version.includes()}> */}
+								<ArrowRightIcon class="w-4 stroke-success" />
+								<span class="text-success">1.0.1</span>
+								{/* </Show> */}
+							</span>
+						</div>
+
+						<span class="flex flex-row text-xs -mb-1 gap-1 items-center text-fg-secondary opacity-50">
+							by
+							{/* TODO: Implement prompt */}
+							<a onClick={() => open('https://google.com/')} class="text-fg-primary hover:opacity-70 flex flex-row gap-1 items-center">
+								{props.author}
+								<LinkExternal01Icon class="w-3" />
+							</a>
+						</span>
+					</div>
+
+					<div class="flex flex-row gap-2 items-end justify-center">
+						<Button buttonStyle="iconSecondary">
+							<Edit02Icon />
+						</Button>
+
+						<Button buttonStyle="iconSecondary">
+							<Trash03Icon class="!stroke-danger" />
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/desktop/src/ui/pages/cluster/ClusterOverview.tsx b/desktop/src/ui/pages/cluster/ClusterOverview.tsx
index 88b243bf..6559755a 100644
--- a/desktop/src/ui/pages/cluster/ClusterOverview.tsx
+++ b/desktop/src/ui/pages/cluster/ClusterOverview.tsx
@@ -28,7 +28,7 @@ function ClusterOverview() {
 function Banner({ cluster, manifest }: Core.ClusterWithManifest) {
 	return (
 		<div class="flex flex-row bg-component-bg rounded-xl p-2.5 gap-x-2.5">
-			<div class="w-48 rounded-lg overflow-hidden border border-gray-0.10">
+			<div class="w-48 rounded-lg overflow-hidden border border-gray-10">
 				<ClusterCover cluster={cluster} />
 			</div>
 
@@ -50,10 +50,10 @@ function Banner({ cluster, manifest }: Core.ClusterWithManifest) {
 				</span>
 			</div>
 
-			<div class="flex flex-row items-end gap-x-2.5 *:h-8 *:w-8">
+			<div class="flex flex-row items-end gap-x-2.5 *:h-8">
 				<Button
-					buttonStyle="secondary"
-					iconLeft={<Share07Icon />}
+					buttonStyle="iconSecondary"
+					children={<Share07Icon />}
 				/>
 				<Button
 					buttonStyle="primary"
diff --git a/desktop/uno.config.ts b/desktop/uno.config.ts
index af7e5762..76e2cb3c 100644
--- a/desktop/uno.config.ts
+++ b/desktop/uno.config.ts
@@ -43,8 +43,8 @@ export default defineConfig({
 			black: '#000000',
 
 			gray: {
-				'0.05': '#FFFFFF0D',
-				'0.10': '#FFFFFF1A',
+				'05': '#FFFFFF0D',
+				'10': '#FFFFFF1A',
 			},
 
 			fg: {
@@ -83,6 +83,13 @@ export default defineConfig({
 				disabled: '#FF444480',
 			},
 
+			success: {
+				DEFAULT: '#239A60',
+				hover: '#1A8752',
+				pressed: '#2CAC6E',
+				disabled: '#239A6080',
+			},
+
 			component: {
 				bg: {
 					DEFAULT: '#1A2229',