diff --git a/package.json b/package.json
index 9052ff5..7bd548a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "drehmal-installer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Drehmal, Minecraft map installer",
   "productName": "Drehmal Installer",
   "author": "majorlue",
@@ -53,4 +53,4 @@
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }
-}
+}
\ No newline at end of file
diff --git a/src-electron/electron-main.ts b/src-electron/electron-main.ts
index 7753395..6a3cbc2 100644
--- a/src-electron/electron-main.ts
+++ b/src-electron/electron-main.ts
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { app, BrowserWindow, ipcMain } from 'electron';
+import { app, BrowserWindow, ipcMain, shell } from 'electron';
 import log from 'electron-log';
 import Listeners from './ipcListeners';
 const path = require('path');
@@ -52,7 +52,7 @@ function createWindow() {
     autoHideMenuBar: true,
   });
 
-  new Listeners(mainWindow, app);
+  new Listeners(mainWindow, app, shell);
 
   mainWindow.loadURL(process.env.APP_URL);
 
diff --git a/src-electron/ipcListeners.ts b/src-electron/ipcListeners.ts
index 25721d7..6fa68c1 100644
--- a/src-electron/ipcListeners.ts
+++ b/src-electron/ipcListeners.ts
@@ -1,15 +1,29 @@
-import { ipcMain, BrowserWindow, app as ElectronApp } from 'electron';
+import {
+  ipcMain,
+  BrowserWindow,
+  app as ElectronApp,
+  shell as ElectronShell,
+} from 'electron';
+import log from 'electron-log';
 // import path from 'path';
 // log.info('IPC Listener');
 let browserWindow: BrowserWindow;
 let app: typeof ElectronApp;
+let shell: typeof ElectronShell;
 
 export default class Listeners {
-  constructor(window: BrowserWindow, electronApp: typeof ElectronApp) {
+  constructor(
+    window: BrowserWindow,
+    electronApp: typeof ElectronApp,
+    electronShell: typeof ElectronShell
+  ) {
     browserWindow = window;
     app = electronApp;
+    shell = electronShell;
   }
 }
 
 ipcMain.handle('getAppPath', () => app.getAppPath());
 ipcMain.handle('getAppDataPath', () => app.getPath('appData'));
+ipcMain.handle('openInBrowser', (_event, url) => shell.openExternal(url));
+ipcMain.handle('quit', () => app.quit());
diff --git a/src/assets/images/icons/socials/discord-purple.png b/src/assets/images/icons/socials/discord-purple.png
new file mode 100644
index 0000000..7997b56
Binary files /dev/null and b/src/assets/images/icons/socials/discord-purple.png differ
diff --git a/src/assets/images/icons/socials/discord-yellow.png b/src/assets/images/icons/socials/discord-yellow.png
new file mode 100644
index 0000000..d785e2e
Binary files /dev/null and b/src/assets/images/icons/socials/discord-yellow.png differ
diff --git a/src/assets/images/icons/socials/github-purple.png b/src/assets/images/icons/socials/github-purple.png
new file mode 100644
index 0000000..b39f54f
Binary files /dev/null and b/src/assets/images/icons/socials/github-purple.png differ
diff --git a/src/assets/images/icons/socials/github-yellow.png b/src/assets/images/icons/socials/github-yellow.png
new file mode 100644
index 0000000..954bce0
Binary files /dev/null and b/src/assets/images/icons/socials/github-yellow.png differ
diff --git a/src/assets/images/icons/socials/patreon-purple.png b/src/assets/images/icons/socials/patreon-purple.png
new file mode 100644
index 0000000..49d4914
Binary files /dev/null and b/src/assets/images/icons/socials/patreon-purple.png differ
diff --git a/src/assets/images/icons/socials/patreon-yellow.png b/src/assets/images/icons/socials/patreon-yellow.png
new file mode 100644
index 0000000..fdc83db
Binary files /dev/null and b/src/assets/images/icons/socials/patreon-yellow.png differ
diff --git a/src/assets/images/icons/socials/twitter-purple.png b/src/assets/images/icons/socials/twitter-purple.png
new file mode 100644
index 0000000..1666e8e
Binary files /dev/null and b/src/assets/images/icons/socials/twitter-purple.png differ
diff --git a/src/assets/images/icons/socials/twitter-yellow.png b/src/assets/images/icons/socials/twitter-yellow.png
new file mode 100644
index 0000000..56ba121
Binary files /dev/null and b/src/assets/images/icons/socials/twitter-yellow.png differ
diff --git a/src/assets/images/icons/socials/website-purple.png b/src/assets/images/icons/socials/website-purple.png
new file mode 100644
index 0000000..4397566
Binary files /dev/null and b/src/assets/images/icons/socials/website-purple.png differ
diff --git a/src/assets/images/icons/socials/website-yellow.png b/src/assets/images/icons/socials/website-yellow.png
new file mode 100644
index 0000000..e3ee8f6
Binary files /dev/null and b/src/assets/images/icons/socials/website-yellow.png differ
diff --git a/src/assets/images/icons/socials/x-purple.png b/src/assets/images/icons/socials/x-purple.png
new file mode 100644
index 0000000..acfbb34
Binary files /dev/null and b/src/assets/images/icons/socials/x-purple.png differ
diff --git a/src/assets/images/icons/socials/x-yellow.png b/src/assets/images/icons/socials/x-yellow.png
new file mode 100644
index 0000000..42bedea
Binary files /dev/null and b/src/assets/images/icons/socials/x-yellow.png differ
diff --git a/src/assets/images/icons/socials/youtube-purple.png b/src/assets/images/icons/socials/youtube-purple.png
new file mode 100644
index 0000000..78c9c54
Binary files /dev/null and b/src/assets/images/icons/socials/youtube-purple.png differ
diff --git a/src/assets/images/icons/socials/youtube-yellow.png b/src/assets/images/icons/socials/youtube-yellow.png
new file mode 100644
index 0000000..e88265e
Binary files /dev/null and b/src/assets/images/icons/socials/youtube-yellow.png differ
diff --git a/src/assets/images/small_button_arrow_grey.png b/src/assets/images/small_button_arrow_grey.png
new file mode 100644
index 0000000..dcdd8cd
Binary files /dev/null and b/src/assets/images/small_button_arrow_grey.png differ
diff --git a/src/assets/images/small_button_arrow_purple.png b/src/assets/images/small_button_arrow_purple.png
new file mode 100644
index 0000000..558b6f0
Binary files /dev/null and b/src/assets/images/small_button_arrow_purple.png differ
diff --git a/src/assets/images/small_button_check.png b/src/assets/images/small_button_check.png
new file mode 100644
index 0000000..d53fa28
Binary files /dev/null and b/src/assets/images/small_button_check.png differ
diff --git a/src/components/DynamicImage.vue b/src/components/DynamicImage.vue
new file mode 100644
index 0000000..5db4d8d
--- /dev/null
+++ b/src/components/DynamicImage.vue
@@ -0,0 +1,22 @@
+<template>
+  <img :src="imagePath" alt="img" />
+</template>
+
+<script>
+export default {
+  props: {
+    item: String,
+  },
+  data() {
+    return {
+      imagePath: null,
+    };
+  },
+  async mounted() {
+    this.imagePath = await import(
+      // `src/assets/images/icons/socials/${this.item}-purple.png`
+      `../assets/images/${this.item}.png`
+    );
+  },
+};
+</script>
diff --git a/src/components/SocialsGrid.vue b/src/components/SocialsGrid.vue
new file mode 100644
index 0000000..3fecd06
--- /dev/null
+++ b/src/components/SocialsGrid.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="icons">
+    <div v-for="social in socials" :key="social.name">
+      <img
+        :src="social.img"
+        @mouseenter="social.img = social.hover"
+        @mouseleave="social.img = social.default"
+        @click="openUrl(social.url)"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import log from 'electron-log';
+import { Ref } from 'vue';
+const { ipcRenderer } = require('electron');
+import { ref } from 'vue';
+
+export interface Socials {
+  name: string;
+  default: string;
+  hover: string;
+  img: string;
+  url: string;
+}
+
+const socials: Ref<Socials[]> = ref([
+  {
+    name: 'discord',
+    default:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAACIUlEQVRYhe2YwW7aQBCGvzGWmuYApqghrxCllKrHphJS+gBIPRDlVfoAeZXIHCp4gCKQmh6rpnmJUInY4ZDkkLA9IFs23kC8No2R+p2s3Vl7fs94Zr3Sc4e0Oy363ZFiA2l3WtLvjhClFP3uSIkITvXlc/uVCt+7RSlFu9MS6blDBWBZQsXZLCHX/i2z2TyRbIDqq+1wslYrP49XKZlMpuGL965u5kICAhFbZTu5skDcTe+p1cpMJtNwLOGxiYijD9/C62jF6P74FLPrROxYYreKrbLN3fQ+NmYjqe6hpblbTYxdjP3E2DuN3W+NXWoEbMmg5PhgwAxFs550sFF3YhEQEZp1J2H3NmKXNjLhvQE7ngzpaGgci6KLwGN2vy49Yz8ArEyrC8R/IUWjMEJelLK4Isk+8hSCvqEru6bsva5kqF7KTIhOwPmlh7vgwMnnn+H1xdjn9Ozw0XnIVr1yS63SitR4UOv9S8jvG1mzo6vITcjDCh057ISWkts2t1l3OP44AGCmoCTwZscJ5xu7VY4OBqAUliVYCPs7lbwej51nRjQiji9igXavtYhJ5JQqUB8JMH2vhRNiitE38uXreyDeB87HHu5ZukYW6zN/fE6/Hy6xXk6O5Tfb8uAQwZRMVUsXmbTodgQmJCKy+C/8ZAwbhUkcdD5Kzx2qTT0OCgiPg7yrG2B+vhU1KDqB3zBPrXXvHv4FEnzsAqiowg1CAP4CkkKoohNdiXEAAAAASUVORK5CYII=',
+    img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAACIUlEQVRYhe2YwW7aQBCGvzGWmuYApqghrxCllKrHphJS+gBIPRDlVfoAeZXIHCp4gCKQmh6rpnmJUInY4ZDkkLA9IFs23kC8No2R+p2s3Vl7fs94Zr3Sc4e0Oy363ZFiA2l3WtLvjhClFP3uSIkITvXlc/uVCt+7RSlFu9MS6blDBWBZQsXZLCHX/i2z2TyRbIDqq+1wslYrP49XKZlMpuGL965u5kICAhFbZTu5skDcTe+p1cpMJtNwLOGxiYijD9/C62jF6P74FLPrROxYYreKrbLN3fQ+NmYjqe6hpblbTYxdjP3E2DuN3W+NXWoEbMmg5PhgwAxFs550sFF3YhEQEZp1J2H3NmKXNjLhvQE7ngzpaGgci6KLwGN2vy49Yz8ArEyrC8R/IUWjMEJelLK4Isk+8hSCvqEru6bsva5kqF7KTIhOwPmlh7vgwMnnn+H1xdjn9Ozw0XnIVr1yS63SitR4UOv9S8jvG1mzo6vITcjDCh057ISWkts2t1l3OP44AGCmoCTwZscJ5xu7VY4OBqAUliVYCPs7lbwej51nRjQiji9igXavtYhJ5JQqUB8JMH2vhRNiitE38uXreyDeB87HHu5ZukYW6zN/fE6/Hy6xXk6O5Tfb8uAQwZRMVUsXmbTodgQmJCKy+C/8ZAwbhUkcdD5Kzx2qTT0OCgiPg7yrG2B+vhU1KDqB3zBPrXXvHv4FEnzsAqiowg1CAP4CkkKoohNdiXEAAAAASUVORK5CYII=',
+    hover:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAABzElEQVRYhe2YQXKCMBSG/2eZju3CqrDvjOg5PII7b9EzaM/QU+hKb6DnUHoCUctCXTi8LpgAQlqBZAbo9Ftp8gj/z0vyILSYrTAaD7Gcrxk1ZDQe0nK+BjEzlvM1ExHanaeydeXieDiDmTEaD4kWsxUDQKNBeGnXy8jX8QzfDyaSAQCd7nPYaZqtclTlxHW98MEf9qfAiECYaLaM9JUV4uJdYZotuK4XtqUUFzFhbyfSdqf/XijuHs2WgYt3vWkzQLnGkDOw0m3OLlvcRhKXFwIMUnBif04AH3KBtgV7k8iALG4QxeXNjIAAGIBC+bAlwuLIhP8Up5iZhtLVFeLfSNWojpFHFSmUriNZCOtB1sWchdeuwu7FxYz8VA9SBZA+oj/ODk7vl34xbsHdS9/UojtD+druJEXjGin3c0afES7XiL7X3IEFezsNfjMDREDfjPp7VrRJEAENAnpdbbc3tD7IuPAkD9C7y8VgrlIdUeTPGCm0Rhx+A5CoA5I6co+b67cuHHsK9IsoqlJGFBer0q4lzUxeRCYLZkKQykjyW7iKyDTSYrbiuh4HCcLjoMP+BCA434oHVB2hGwimlo5zlLIhsdgJAMcd1ggCgG++oJDts2wnOwAAAABJRU5ErkJggg==',
+    url: 'https://discord.com/invite/n6VVwDFp?utm_source=Discord%20Widget&utm_medium=Connect',
+  },
+  {
+    name: 'website',
+    default:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAACLElEQVRYhe2YsU7jQBCG/7FccFf47LN0yUMgHFGGIjquuS4ShdPxIDwAD3LSSZcUKOloLCVCdyUCOt4ACuOcC6AIHorNWiYmJvYuJEF8RaR41zv7e2d2Z4f63SHafguD3oixhrT9Fg16IxAzY9AbMRHBdj4te16lGEd3YGa0/RZRvztkADAMwhd7vYT8H98hSYQjmQDgfP2cNrqupWxg/+eosP3XcUvZRhjG6YePbm6FEIkUsWGZ+TdL0Kg7c9vOryLl8e/jCVzXQhjG6bPciFWMdJoBGABB/Hi1+UK8uoNOM0j/M4Devx+l7G1YJu7jyZNnprCuhlewAi/1P7uK1CdAgEk6lMxwcLRd2H64d6rVHgEwxOKqM0mqjWMaej6kUtR1mgGICFs1G5dhjN8n3xd6T67Y4d4pNr/Z8KcxUzZWshiV34Tw9a2aDQCYPCSVxyna5RZFScgqoU3IchM1ei8rwu9FyEeM5NF/rJZD6RzJngde3Vn4POjsBGAW2+7F9Rh//u6qTAOAZtda9Dzwak7aN2E9+52paZyURsHK+M0A9EJ2XAXmVwr2eSvTqDs5EQatQK4lmc12i7Lb8+sxuhpiYpY3335Zty9PUc5+c0xjYJ7DyBgyiJ6IqnJTzKIkpPBmWOD6z8WQ6k2R+t0hyyqKruLDayPv67L4kKuihGEM17VyF/tVJFtBAaauFd3cAhD1rdkOq4ycNyB2rWWnSTog6VoEgLMK1wgCgEenfq0XUoNxeAAAAABJRU5ErkJggg==',
+    img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAACLElEQVRYhe2YsU7jQBCG/7FccFf47LN0yUMgHFGGIjquuS4ShdPxIDwAD3LSSZcUKOloLCVCdyUCOt4ACuOcC6AIHorNWiYmJvYuJEF8RaR41zv7e2d2Z4f63SHafguD3oixhrT9Fg16IxAzY9AbMRHBdj4te16lGEd3YGa0/RZRvztkADAMwhd7vYT8H98hSYQjmQDgfP2cNrqupWxg/+eosP3XcUvZRhjG6YePbm6FEIkUsWGZ+TdL0Kg7c9vOryLl8e/jCVzXQhjG6bPciFWMdJoBGABB/Hi1+UK8uoNOM0j/M4Devx+l7G1YJu7jyZNnprCuhlewAi/1P7uK1CdAgEk6lMxwcLRd2H64d6rVHgEwxOKqM0mqjWMaej6kUtR1mgGICFs1G5dhjN8n3xd6T67Y4d4pNr/Z8KcxUzZWshiV34Tw9a2aDQCYPCSVxyna5RZFScgqoU3IchM1ei8rwu9FyEeM5NF/rJZD6RzJngde3Vn4POjsBGAW2+7F9Rh//u6qTAOAZtda9Dzwak7aN2E9+52paZyURsHK+M0A9EJ2XAXmVwr2eSvTqDs5EQatQK4lmc12i7Lb8+sxuhpiYpY3335Zty9PUc5+c0xjYJ7DyBgyiJ6IqnJTzKIkpPBmWOD6z8WQ6k2R+t0hyyqKruLDayPv67L4kKuihGEM17VyF/tVJFtBAaauFd3cAhD1rdkOq4ycNyB2rWWnSTog6VoEgLMK1wgCgEenfq0XUoNxeAAAAABJRU5ErkJggg==',
+    hover:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB20lEQVRYhe2YPXLCMBCF33pckBQGYiZ9xlDlEByBjlvkCBkmkyNwCqjgBnCIVA5NygzGxAVQOCiFkcc2RiBLJODJV0qrn2fterWi0WCCTreN8XDKcIV0um0aD6cgxhjGwykjItTqN3+9LymW/hqMMXS6baLRYMIAwDAI1dp1CflarrHdRo5kAkD97jbutG1LeYHHz1dh/9v9s/IanhfEH95frCIhHC6iYpn7I2WoNg73uXPl+TdBCNu24HlB3LY3Y5FFnPdeuqElENJqwHHT9rPmi9R6FcvEJghTbSZIao58RBs/Zu/O1dcnwCQtStLM2JOw36G+1vUIgAFoSh9hwXlIz4dUiro4NloN4MPH7KEnHrCDn5hDfaBpxzEjGytJjMIjgUgA9/fvrdo8iqgJuSBKIoTKIoSVRUhpXKtEQpTySCofJO5Qx/JBKv+488i+qbIT3Sdyaj5I5h9NmEx3gSs4mdRJaISxc8XIoY2e4SQ4ihVURPa2K7zd8pjgKMYG5/+vBeRUhhzJCpGjcvtVc62i/p43TrFS3BOyCcKT63ZhJZjj+7L2h8jW60BGiOcFsG0r1/DSSL6gADsh/mIFIHrfyhpcMnzfQPTX0v/68PsQdy0CwJIKrwgCgB+QhJMjqNhVTwAAAABJRU5ErkJggg==',
+    url: 'https://www.drehmal.net/',
+  },
+  {
+    name: 'patreon',
+    default:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAACOElEQVRYhd1YTW7aQBT+HvIiZeHieBEWuUIT1GWyQEq6R+rCaa/QI/QAPUokWERwgEQgRV1W/ckhIlRj1wtCJYfXhRk6NpPaeMYE+u38/MZ+37zfGep3h+h4bQx6I8YOouO1adAbgZgZg96IiQgN58Vz27UWwuABzIyO1ybqd4cMALUa4WVjt4j8Ch8wnyeBZAGAs19fvnRd+3msWhO+Hy03PphMEyICgsSeba2u3CLMohiua8P3o6VsxWITJLyT6xUZARDVpPf5XOv7e7aFWRSnZBZI65tKtJqOUh7PGXfj0PwPCbDIAJMLyQOM/B1/d3oDZi6snwcCYP11eHkcSx74eh/k6h8dNNbSLwJjWX03DnF5e1ZI9+PVawDAp7dfTP3eHJH5PxybTX45lEylqBaR96c3eGROGSaMlmUi+RnAdymUhGdUa9ZFrfRKAK8OGqhRek/linVxcp3yBiHJJy8jf6rKFQfpEcnDcdNRGqlveBZcLZFNYuNEHhdVwXQfrnSoUpXZH+NQuwGq8N+ElrZH5KLFnH4WEJ6pEtTvDlmcR1zXLjX9lu0DOv1jFsXLMT6YTM2EVtly2mo6Sg+WgbFkby0aHZC/w0LPZD8xWrVaTQffCkyz5huiISLZZP7w5hY/p7+VugSgW0H5raSPHNp1HNp15TtT548sVojMolj73F51uc2e14EMEd+P4Lq2UnHbIN+gAAsiwWQKILnfyipsM4TdQDKiVHCPsnGQCC0CwDLDHQIBwB8J0cEDHb1wiQAAAABJRU5ErkJggg==',
+    img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAACOElEQVRYhd1YTW7aQBT+HvIiZeHieBEWuUIT1GWyQEq6R+rCaa/QI/QAPUokWERwgEQgRV1W/ckhIlRj1wtCJYfXhRk6NpPaeMYE+u38/MZ+37zfGep3h+h4bQx6I8YOouO1adAbgZgZg96IiQgN58Vz27UWwuABzIyO1ybqd4cMALUa4WVjt4j8Ch8wnyeBZAGAs19fvnRd+3msWhO+Hy03PphMEyICgsSeba2u3CLMohiua8P3o6VsxWITJLyT6xUZARDVpPf5XOv7e7aFWRSnZBZI65tKtJqOUh7PGXfj0PwPCbDIAJMLyQOM/B1/d3oDZi6snwcCYP11eHkcSx74eh/k6h8dNNbSLwJjWX03DnF5e1ZI9+PVawDAp7dfTP3eHJH5PxybTX45lEylqBaR96c3eGROGSaMlmUi+RnAdymUhGdUa9ZFrfRKAK8OGqhRek/linVxcp3yBiHJJy8jf6rKFQfpEcnDcdNRGqlveBZcLZFNYuNEHhdVwXQfrnSoUpXZH+NQuwGq8N+ElrZH5KLFnH4WEJ6pEtTvDlmcR1zXLjX9lu0DOv1jFsXLMT6YTM2EVtly2mo6Sg+WgbFkby0aHZC/w0LPZD8xWrVaTQffCkyz5huiISLZZP7w5hY/p7+VugSgW0H5raSPHNp1HNp15TtT548sVojMolj73F51uc2e14EMEd+P4Lq2UnHbIN+gAAsiwWQKILnfyipsM4TdQDKiVHCPsnGQCC0CwDLDHQIBwB8J0cEDHb1wiQAAAABJRU5ErkJggg==',
+    hover:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB/0lEQVRYhd2YTXLaQBBGX2MtnJRLsSOqfADBOTgCO04RzkCyygFyCrMyNzDnMEr2qcg4WtgsKDoLEKVfW3gaDHlV2oxaUn/qnu6ZkdubO/qDHpPxVDlB+oOeTMZTRFWZjKcqIlxefXhvv3bicf6MqtIf9ERub+4UoNUSPl2elpC/j8+sVutE8gCuPn/c3gwC/3282pE4TrY/fv7wtBaSkoo4973yk0fEIlkSBD5xnGzHSh5biAhnoxfvR51vTu8/9z0WyTI35iFO76ym264eXyr8iu2/J+CJgZJiBGr/+BnQ2cG+IQJ4YNA+shG4/2Nv3wC7WT2LicKv0HndNNIhAKH8MPu8nRCtj6x1KlXhJCT8OYLVxrFNJFKnc87WpFKkw9yccRHYevOTAGFFdco4Hc5G5VLcbZfH66pcY8RRyGt029VOOjteRPcs5IAcXsgLRcGFvS6qKsvsLM4VByv+m9Ryj4hklzgKFUueNDKAeSRSPJeUjXQIYb4PRPqlsbO5/uEgUNUqtd5aTg3LsN1k77YJ75t16G0zNBRiO9mbOlbXKB0wiUhxMoe/v0OyqLfPRsxo8u+nj1xfrK8qjPYfRUpCFsnSed+ei1ARgwgU9+tQEBLHCUHgVxoeG9kTFNgImT88AevzraLBMZP6DeuqtY9zlEMjaWoJoFmFJ4QA/AN3pquoEpmkcgAAAABJRU5ErkJggg==',
+    url: 'https://www.patreon.com/drehmal',
+  },
+  {
+    name: 'twitter',
+    default:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAACN0lEQVRYhdWYTW6bQBTH/494kXZBoKgyd4jiWF5iRZbSA1jqAlfqTXyAniX2wooPQBsv0mXVOOodgiICYZF44Xq64KMYE2eYIf74rexhGN5vmPcGoMvBFbp2B+PhhGEP6dodGg8nIMYYxsMJIyJo+rttx1WKwH8GYwxdu0N0ObhiAKAohCNtv0Qeg2csFtFCqgGA/uF9etAw1O1EVRLPC9OJ9x+eIpGEROJQra2euUPMwjkMQ4XnhWnbSsRvLdFrO2CZsjL8+an0GIdqDbNwvtRWA8mGxo9tOWiaevqfxW0iMksQoJCgiW05sC2nVP+sRHx9nJh6qXGKIABKNC/laZo6mqaOL+3v3P2LOIiPlZ2YPIrwmTGNuvaqDE+AL4nyIizSH7XS3426hq9nP9BrFwfME+TvO18qV6RKVH/UwrfPvwAAxx+PACxXJekkLoGwSM9yMCgI9LT+f/Zty8EBEU7q2tqx/tw/SkqT+NI65ag2TVN/VQIA5n8XomHEMLkckU3QKIRqkKpa2YQX5dYNCpdoWaTLr6zMglVzT6RFdoWtikzdoLISrVRxZ0WW143r4+L6XP7iABir8I70Ry1uoakbYHBd7Wa58Teomzu/kiqVR0okvyEqRGis2QBln6fWISXCuyFO3aCyfHgJ6YfGhOThMcsmBBJWRGbhXOi9vYpdnpf8+zqQE/G8EIahFnbcNbJfUIBYxH94AhB938p32GWSuIFoH9ngd5Q3g5KlRQBY1nCPIAD4ByXrvtAfeP3WAAAAAElFTkSuQmCC',
+    img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAACN0lEQVRYhdWYTW6bQBTH/494kXZBoKgyd4jiWF5iRZbSA1jqAlfqTXyAniX2wooPQBsv0mXVOOodgiICYZF44Xq64KMYE2eYIf74rexhGN5vmPcGoMvBFbp2B+PhhGEP6dodGg8nIMYYxsMJIyJo+rttx1WKwH8GYwxdu0N0ObhiAKAohCNtv0Qeg2csFtFCqgGA/uF9etAw1O1EVRLPC9OJ9x+eIpGEROJQra2euUPMwjkMQ4XnhWnbSsRvLdFrO2CZsjL8+an0GIdqDbNwvtRWA8mGxo9tOWiaevqfxW0iMksQoJCgiW05sC2nVP+sRHx9nJh6qXGKIABKNC/laZo6mqaOL+3v3P2LOIiPlZ2YPIrwmTGNuvaqDE+AL4nyIizSH7XS3426hq9nP9BrFwfME+TvO18qV6RKVH/UwrfPvwAAxx+PACxXJekkLoGwSM9yMCgI9LT+f/Zty8EBEU7q2tqx/tw/SkqT+NI65ag2TVN/VQIA5n8XomHEMLkckU3QKIRqkKpa2YQX5dYNCpdoWaTLr6zMglVzT6RFdoWtikzdoLISrVRxZ0WW143r4+L6XP7iABir8I70Ry1uoakbYHBd7Wa58Teomzu/kiqVR0okvyEqRGis2QBln6fWISXCuyFO3aCyfHgJ6YfGhOThMcsmBBJWRGbhXOi9vYpdnpf8+zqQE/G8EIahFnbcNbJfUIBYxH94AhB938p32GWSuIFoH9ngd5Q3g5KlRQBY1nCPIAD4ByXrvtAfeP3WAAAAAElFTkSuQmCC',
+    hover:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB30lEQVRYhdWYS1bCMBhG718ZqIP6qCswug6WwIxdsIYe1+AqZCQ7kHUAugEL2oEyQOKgptJSsU1aHvccBi19fDfJn7SVx4cnOt02g/5Qc4B0um0Z9IeI1ppBf6hFhPOLk13nqsTb7BOtNZ1uW+Tx4UkDeJ5wdn5YIu9vnyyXyUBqAVxcnqZ/BoG/m1QViaI4bfjZ9CMRMRiJY7+1fuYeMY8XBIFPFMXpvrXETUuocZjZntzcVb7Gsd9iHi8y+zzEKVcl1DiE26vMLy9mhYAnliZqHFYKkUrkuXaXEcADy+WjaosWSQAckV7HRcizPtNQQqZUwL9ES2ItMtG9TAj1cvd34DIhR69WhW9wmqImuoeS+2Tj+hIANfqVcQlWFWsRNQ6Lg660vhqFSZ+rf3rkeeooLQ41UqbQb6/+lwD4WlrHSNCONeJYoHXiNGtlCt4WxyI3OE+/tcjUgPs6sifsVqSmYQXg6RpecK2GV40SWtfYIxPdKy9Uo4Rh+0OrAQlwfEQpXBA3rS0NSYCjSOkF0QjcON1tI84PjYb04XGVLQgY1kTm8cLqvb2w0BsSyL+vQ04kimKCwC88cN9Y/YICPyKz6QeQfN/KH7DPmNyQTL9b/I7SGGKGlgB61fCAEIBvAgyxjIy6aB4AAAAASUVORK5CYII=',
+    url: 'https://twitter.com/DrehmalMC?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor',
+  },
+  {
+    name: 'github',
+    default:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB7ElEQVRYhd1YsVLCQBB9m0mBFpGYAr5CGEsaZvQDmLHAf/ED/BZJ4cAHMAOFlg74FVCEYAqgQNYi5CZAAuItBHzl3WWz7/be7d5Ss9FBrV5Fy+0yzhC1epVabhfEzGi5XSYi5O2LrP3aC2N/CmZGrV4lajY6DACGQbjKnxeRr/EUi0V4kEwAsK8v1aTjWNl4tSc8L1Ab748mIZEIEYmcZW5+eUKYBXM4jgXPC9TYhscSJOqV9tZ59/1ey37OMjEL5itjJkjLZiLKRTt1rj/05X9IgEkCTB4rbXBoDwBQ2kKkVLBVxAgAQz9CBMAMTelhm+NJiEesP5CJkLiqewNf7fDzw8fOcSkY4hZTkHaAiWREqhWRSBtp4n56vd1p46aQV5rR0YpWREpFe+sN9Vvo2yA5jcQ1sAtRpOS0wnIaMYyjyS35/1KGzAMk1n0gRuR7ke1zRozIgv8JkUPUbPvA1NnI+O0Tr6EirN9iqsZaki4VbHwOx3h5u/u7EwCYhUuUeD7oJdRQSflC6kgetNY6JsQv/6ykIhKR9ZpqpXaKP1RS1kvgIOm4XLSVoI8VImo2Ohx1Uc6p+QBANR82uiieF8BxrI2H/Ski3kEBlhrxRxMAYX9rfcEpI/IbCDWScU4WAUVHiwBwnOEZgQDgB7fbpmp5FTs4AAAAAElFTkSuQmCC',
+    img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB7ElEQVRYhd1YsVLCQBB9m0mBFpGYAr5CGEsaZvQDmLHAf/ED/BZJ4cAHMAOFlg74FVCEYAqgQNYi5CZAAuItBHzl3WWz7/be7d5Ss9FBrV5Fy+0yzhC1epVabhfEzGi5XSYi5O2LrP3aC2N/CmZGrV4lajY6DACGQbjKnxeRr/EUi0V4kEwAsK8v1aTjWNl4tSc8L1Ab748mIZEIEYmcZW5+eUKYBXM4jgXPC9TYhscSJOqV9tZ59/1ey37OMjEL5itjJkjLZiLKRTt1rj/05X9IgEkCTB4rbXBoDwBQ2kKkVLBVxAgAQz9CBMAMTelhm+NJiEesP5CJkLiqewNf7fDzw8fOcSkY4hZTkHaAiWREqhWRSBtp4n56vd1p46aQV5rR0YpWREpFe+sN9Vvo2yA5jcQ1sAtRpOS0wnIaMYyjyS35/1KGzAMk1n0gRuR7ke1zRozIgv8JkUPUbPvA1NnI+O0Tr6EirN9iqsZaki4VbHwOx3h5u/u7EwCYhUuUeD7oJdRQSflC6kgetNY6JsQv/6ykIhKR9ZpqpXaKP1RS1kvgIOm4XLSVoI8VImo2Ohx1Uc6p+QBANR82uiieF8BxrI2H/Ski3kEBlhrxRxMAYX9rfcEpI/IbCDWScU4WAUVHiwBwnOEZgQDgB7fbpmp5FTs4AAAAAElFTkSuQmCC',
+    hover:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAABwElEQVRYhd2YzXHCMBCF3zLODMnBgZgOgDoogRtdUEMmNaQKOOEOoA7HHWAgPgAHxpuDY4//BLa1YOA7yvJKb1crrUSL2RLjyQj2fMV4QMaTEdnzFYiZYc9XTETodF+bnlcldtsDmBnjyYhoMVsyALRahPfOYwn53R0QBOFCMgCg+/EWf7Qss5lZVcTz/Njx280+FBIRiWibRv7PO+Lon2BZJjzPj9tyM5YQ0f/5PPvdHXxp2W+bBo7+KdVmgLRsFjPsqb85a/nxCDBIQEkuAueEDHvoO+n+uhEiAAYgcHycm/il/kIRaolYSeKs4fIULk/LtQshL6QhtLaoODcUSyvl/YHCSCJndHJFLyLDXvX8UNnRgvQiksJZhx5VeT5BFKk+fQsNzoI5EjSbbnKjv4hZqoWcEA7ETNVBcGmJWarF85wjrFGhpHafEjVUYU1WYbdTwax5IOa4VENJnDkK5G9QAh6uw/PkiISRbE0V5YKqdipVg1XkOhG5Yi6oyEXk6J+07+0uTws9LXUXyd7XgYwQz/NhWWZhx3sj+YIC/AvZbvYAwvetbId7Jpo3EObINd5Rbg1FS4sAcFLhA0EA8AfPqpkkYIelLQAAAABJRU5ErkJggg==',
+    url: 'https://github.com/Drehmal-Team/installer',
+  },
+  {
+    name: 'youtube',
+    default:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB0ElEQVRYhd2YTU7CUBSFz60doINKrRGW4AgJQxiQ6AJIHDSshQW4FYUBgQVAYIBDY3QTalJaOwAHpNcBtCk/xr7a14LfqH/39Z6e+3pfS732CA2zjn5nzDhAGmad+p0xiJnR74yZiJDXj7POSwjHnoOZ0TDrRL32iAFAUQin+cMS8unM4XnLQlIBQD87CU4ahpZNVoJYlhs8eHs6Wwrx8UXkNHU7co/4chcwDA2W5QbHlM2L9l0EsDtHFSQ+kFkdJJDOOn4aChHuJ9fCwSrFUFIu6sIxUXl+s4VjCIAKRG8fZnUAIqB0oYNiOBmFclEPHO883kSO25ojv93kqiBPRPg+oiQ+s1/eHTysavzu9inp4X9EyJEoeJzNSkfqu7bVrazty3OIknckGzhdIa1uZculpPgnjkieI5uY1QEUIpQK+cTHTlWIzBWBVCHN2nBtX4YTPmrSr/2cehRsy0w8DLMERy7PNTRrQ3jMUktpEymllZYTYYSE+D1AVof2mPH64aA9ib7q9dmrPqIQIe6cjVVasrrzX9hy5MtdZJGHELtyXHPEslwYhnYQYsJ/UICVEHs6A7D8v7V5wT7j5w0sS0vyh2sqkF9aBIDDCg8IAoBv2mZ+zRHVTp4AAAAASUVORK5CYII=',
+    img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB0ElEQVRYhd2YTU7CUBSFz60doINKrRGW4AgJQxiQ6AJIHDSshQW4FYUBgQVAYIBDY3QTalJaOwAHpNcBtCk/xr7a14LfqH/39Z6e+3pfS732CA2zjn5nzDhAGmad+p0xiJnR74yZiJDXj7POSwjHnoOZ0TDrRL32iAFAUQin+cMS8unM4XnLQlIBQD87CU4ahpZNVoJYlhs8eHs6Wwrx8UXkNHU7co/4chcwDA2W5QbHlM2L9l0EsDtHFSQ+kFkdJJDOOn4aChHuJ9fCwSrFUFIu6sIxUXl+s4VjCIAKRG8fZnUAIqB0oYNiOBmFclEPHO883kSO25ojv93kqiBPRPg+oiQ+s1/eHTysavzu9inp4X9EyJEoeJzNSkfqu7bVrazty3OIknckGzhdIa1uZculpPgnjkieI5uY1QEUIpQK+cTHTlWIzBWBVCHN2nBtX4YTPmrSr/2cehRsy0w8DLMERy7PNTRrQ3jMUktpEymllZYTYYSE+D1AVof2mPH64aA9ib7q9dmrPqIQIe6cjVVasrrzX9hy5MtdZJGHELtyXHPEslwYhnYQYsJ/UICVEHs6A7D8v7V5wT7j5w0sS0vyh2sqkF9aBIDDCg8IAoBv2mZ+zRHVTp4AAAAASUVORK5CYII=',
+    hover:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAABoklEQVRYhd2YwXWCQBCG/yEckhyIZm3AqGnDErzZhTXkpYZUoSftQOtQOnDVcFAPPicHssSAyWORQfA78YCB+flnmQEaD6fo9buYjGaMCtLrd2kymoGYGZPRjIkItfrDtfOyYrPegZnR63eJxsMpA4DjEJ5q1RLyudnheAwLyQWA+vNjdFAp7zpZWaJ1ED349WobCjEYEfeem4wsEfvgAKU8aB1E+5z4SWUXAZzP0QXZX6i1eMshnT9wAP/l3S6GAJeyKOk07GPSMl9ahxAAF0jfPiInXhXAGR5AGjoNtObhffx2emfsFoRxQrp1dhrWziQW+8XMl/B5AJ8HuV/6P/IXciVE37VxV1r0IXQnuhVHuFghkmvnRhwRXiNxoj4k0FCLHawEJwJRIYmZTFII592l3bufbcmZ7ARmCUea9WhWKkoIIFVaBQowWAkxPUCsQzMDCx1OvW270HL1Ecr+aZCptEQnW0snDAlH9sHh0lTEOZfjL0e0DqCUVwkxp39QgG8h69UWQPh/K35CmTF5A2FpCX18FwqZ0iIAfKqwQhAAfAEL7XoFotAz7wAAAABJRU5ErkJggg==',
+    url: 'https://www.youtube.com/@rift0110',
+  },
+]);
+// function getImage(image: string) {
+//   return require('src/assets/images/icons/socials/' + image + '?url');
+// }
+const openUrl = (url: string) => {
+  ipcRenderer.invoke('openInBrowser', url);
+};
+</script>
+<style scoped>
+.icons {
+  display: flex;
+  gap: 10px;
+}
+.icons > div {
+  /* background-color: #8151c4; */
+  /* border: 1px solid #511f95; */
+  /* height: 67px; */
+  /* width: 67px; */
+  /* text-align: center; */
+  /* line-height: 64px; */
+}
+</style>
diff --git a/src/pages/InstallComplete.vue b/src/pages/InstallComplete.vue
new file mode 100644
index 0000000..3b3c5b3
--- /dev/null
+++ b/src/pages/InstallComplete.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="border-body">
+    <q-layout view="hHh lpR fFf">
+      <q-header>
+        <div class="border-header">
+          <div class="header">
+            <img src="../assets/images/title-img.png" alt="" />
+          </div>
+        </div>
+      </q-header>
+
+      <q-page-container>
+        <div class="body">
+          <hr />
+          <p>
+            Thanks for downloading Drehmal! To get started, open the Minecraft
+            launcher and select the Drehmal Apotheosis profile, then hit play.
+          </p>
+          <img
+            src="../assets/images/transparent-logo.png"
+            style="max-width: 224px"
+          />
+          <!-- <p>
+            Next steps:
+            <q-list bordered separator dense padding>
+              <q-item>Open the Minecraft Launcher</q-item>
+              <q-item>From the profile list, select Drehmal Apotheosis</q-item>
+              <q-item>Press play!</q-item>
+            </q-list>
+          </p>
+          <p>Check out our socials using any of the buttons below</p> -->
+        </div>
+      </q-page-container>
+
+      <q-footer>
+        <!-- don't touch these class names-->
+        <div class="border-footer">
+          <div class="footer">
+            <!-- Footer Content -->
+            <div class="nav-footer">
+              <!-- <next-button path="/path/"></next-button> -->
+              <div>
+                <q-btn
+                  size="20px"
+                  color="secondary"
+                  @click="closeInstaller"
+                  label="Close Installer"
+                  class="close-btn"
+                >
+                </q-btn>
+                <socials-grid />
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-footer>
+    </q-layout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import log from 'electron-log';
+const { ipcRenderer } = require('electron');
+import SocialsGrid from '../components/SocialsGrid.vue';
+
+const closeInstaller = () => {
+  log.info('Opening Minecraft Launcher and closing process');
+
+  // Send call to main process to close application
+  ipcRenderer.invoke('quit');
+};
+</script>
+
+<style scoped>
+.nav-footer {
+  /* display: flex; */
+  /* flex-direction: column; */
+  /* gap: 50px; */
+  margin-bottom: 10px;
+}
+.close-btn {
+  margin-bottom: 20px;
+}
+.nav-footer img {
+  height: 128px;
+  width: 128px;
+}
+</style>
diff --git a/src/pages/InstallPage.vue b/src/pages/InstallPage.vue
index c9556da..62e49f6 100644
--- a/src/pages/InstallPage.vue
+++ b/src/pages/InstallPage.vue
@@ -25,7 +25,7 @@
           <div class="footer">
             <div class="nav-footer">
               <back-button path="/path/"></back-button>
-              <!-- <next-button path="/complete/"></next-button> -->
+              <next-button path="/complete/"></next-button>
             </div>
           </div>
         </div>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index bff0b0a..883e2a5 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -17,10 +17,13 @@ const routes: RouteRecordRaw[] = [
     props: true,
   },
   {
-    // name: 'path',
     path: '/install/',
     component: () => import('pages/InstallPage.vue'),
-    // meta: {title: appTitle}
+    props: true,
+  },
+  {
+    path: '/complete/',
+    component: () => import('pages/InstallComplete.vue'),
     props: true,
   },