3 files changed, 38 insertions, 8 deletions
diff --git a/src/app/index.html b/src/app/index.html
index f5d92e0..ffc31a6 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -26,6 +26,18 @@
 					<button id="northstar" onclick="launch()">%%gui.launchnorthstar%%</button>
 				</div>
 			</div>
+			<div id="modsdiv">
+			</div>
+			<div class="line">
+				<div class="text" id="modcount">%%gui.mods%%</div>
+				<div class="buttons">
+					<button id="removemod">%%gui.mods.remove%%</button>
+					<button id="removeall">%%gui.mods.removeall%%</button>
+					<button id="togglemod">%%gui.mods.toggle%%</button>
+					<button id="toggleall">%%gui.mods.toggleall%%</button>
+					<button id="installmod">%%gui.mods.install%%</button>
+				</div>
+			</div>
 		</div>
 
 		<script src="lang.js"></script>
diff --git a/src/app/main.css b/src/app/main.css
index c2ca627..c6c9bb9 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -1,7 +1,9 @@
 :root {
+	--padding: 15px;
 	--disabled: #656E7F;
-	--background: #4C515B;
 	--foreground: #DDE2EB;
+	--background: #4C515B;
+	--boxbackground: #666E7F;
 	--subforeground: #AFAFAF;
 	--btnforeground: var(--foreground);
 }
@@ -10,6 +12,7 @@
 	:root {
 		--background: #FFFFFF;
 		--foreground: #4C566A;
+		--boxbackground: #EEF0F4;
 		--btnforeground: var(--background);
 	}
 }
@@ -40,34 +43,40 @@ nobr {white-space: nowrap}
 
 .line {
 	display: flex;
-	margin-top: 15px;
+	margin-top: var(--padding);
+}
+
+#modsdiv {
+	border-radius: var(--padding);
+	background: var(--boxbackground);
+	margin: calc(var(--padding) / 3) var(--padding);
 }
 
 .buttons {
 	text-align: right;
 	margin-left: auto;
 	user-select: none;
-	margin-right: 7px;
+	margin-right: calc(var(--padding) / 1.9);
 }
 
 .text {max-width: 38vw}
 .buttons {max-width: 55vw}
 
-button, .text {
+button, .text, .mod {
 	border: none;
 	outline: none;
-	padding: 5px 15px;
 	user-select: none;
 	border-radius: 50px;
 	transition: 0.2s ease-in-out;
+	padding: calc(var(--padding) / 3) var(--padding);
 }
 
 #welcome {padding: 0px}
 
 button {
-	margin-bottom: 10px;
 	color: var(--btnforeground);
 	-webkit-app-region: no-drag;
+	margin-bottom: calc(var(--padding) / 1.5);
 }
 
 button:hover {opacity: 0.9}
@@ -77,8 +86,9 @@ button:active {
 }
 
 
-#update {background: #81A1C1}
 #setpath {background: #5E81AC}
-#northstar {background: #C7777F}
 #vanilla, #exit {background: #656E7F}
+#update, #installmod {background: #81A1C1}
+#togglemod, #toggleall {background: #ECD19A}
+#northstar, #removeall, #removemod {background: #C7777F}
 button:disabled {background: var(--disabled) !important; opacity: 0.5}
diff --git a/src/app/main.js b/src/app/main.js
index d30489e..ab80ba9 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -54,6 +54,14 @@ ipcRenderer.on("newpath", (event, newpath) => {
 
 ipcRenderer.on("log", (event, msg) => {log(msg)})
 
+ipcRenderer.on("mods", (event, mods) => {
+	modcount.innerHTML = `${lang("gui.mods.count")} ${mods.length}`;
+	modsdiv.innerHTML = "";
+	for (let i = 0; i < mods.length; i++) {
+		modsdiv.innerHTML += `<div class="mod">${mods[i].Name}</div>`;
+	}
+})
+
 ipcRenderer.on("version", (event, versions) => {
 	vpversion.innerText = lang("gui.versions.viper") + ": " + versions.vp;
 	nsversion.innerText = lang("gui.versions.northstar") + ": " + versions.ns;