diff --git a/botfiles/.config/homepage/index.html b/botfiles/.config/homepage/index.html
index 78e35d8..5b6cd65 100644
--- a/botfiles/.config/homepage/index.html
+++ b/botfiles/.config/homepage/index.html
@@ -1,26 +1,60 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <head>
-	<meta charset="utf-8">
-	<link rel="stylesheet" type="text/css" href="./style.css">
-	<title>Home</title>
+  <meta charset="utf-8" />
+  <link rel="stylesheet" type="text/css" href="./style.css" />
+  <title>Home</title>
 </head>
-<body background="/home/samedamci/.config/wallpapers/1920x1080/wall1.png">
-	<form class="search-bar" action="https://duckduckgo.com/">
-		<input autofocus type="search" name="q" placeholder="We need go deeper..." autocomplete="off">	
-	</form>
-	<div id="bookmarks">
-		<div class="bmark"><p><a href="https://reddit.com/">redd.it</a></p></div>
-		<div class="bmark"><p><a href="https://wiki.archlinux.org/">arch wiki</a></p></div>
-		<div class="bmark"><p><a href="https://invidio.us/">invidio.us</a></p></div>
-    <div class="bmark"><p><a href="https://github.com/">github</a></p></div>
-		
-    <div class="bmark"><p><a href="https://minecraft.net/">minecraft</a></p></div>
-		<div class="bmark"><p><a href="https://planetminecraft.com/">planetminecraft</a></p></div>
-		<div class="bmark"><p><a href="https://gitlab.com/">gitlab</a></p></div>
-    <div class="bmark"><p><a href="https://fontawesome.com/cheatsheet?from=io">fontawesome</a></p></div>
+<body>
+  <form class="search-bar" action="https://duckduckgo.com/">
+    <input
+      autofocus
+      type="search"
+      name="q"
+      placeholder="We need go deeper..."
+      autocomplete="off"
+    />
+  </form>
+  <div id="bookmarks">
+    <a href="https://reddit.com/">
+      <div class="bmark">
+        <p>redd.it</p>
+      </div>
+    </a>
+    <a href="https://wiki.archlinux.org/">
+      <div class="bmark">
+        <p>arch wiki</p>
+      </div>
+    </a>
+    <div class="bmark">
+      <p><a href="https://invidio.us/">invidio.us</a></p>
+    </div>
+    <div class="bmark">
+      <p><a href="https://github.com/">github</a></p>
+    </div>
 
-    <div class="bmark"><p><a href="https://kernel.org">kernel.org</a></p></div>
-    <div class="bmark"><p><a href="https://openstreetmap.org">openstreetmap</a></p></div>
-		<div class="bmark"><p><a href="https://openweathermap.org/">openweathermap</a></p></div>
-	</div>
+    <div class="bmark">
+      <p><a href="https://minecraft.net/">minecraft</a></p>
+    </div>
+    <div class="bmark">
+      <p><a href="https://planetminecraft.com/">planetminecraft</a></p>
+    </div>
+    <div class="bmark">
+      <p><a href="https://gitlab.com/">gitlab</a></p>
+    </div>
+    <div class="bmark">
+      <p>
+        <a href="https://fontawesome.com/cheatsheet?from=io">fontawesome</a>
+      </p>
+    </div>
+
+    <div class="bmark">
+      <p><a href="https://kernel.org">kernel.org</a></p>
+    </div>
+    <div class="bmark">
+      <p><a href="https://openstreetmap.org">openstreetmap</a></p>
+    </div>
+    <div class="bmark">
+      <p><a href="https://openweathermap.org/">openweathermap</a></p>
+    </div>
+  </div>
 </body>
diff --git a/botfiles/.config/homepage/style.css b/botfiles/.config/homepage/style.css
index 6dabee0..975da99 100644
--- a/botfiles/.config/homepage/style.css
+++ b/botfiles/.config/homepage/style.css
@@ -1,37 +1,58 @@
-* {
-    font-family: Monospace;
-    text-align: center;
-    color: #dfdfdf;
-    text-decoration: none;
+:root {
+  --bg: #071616;
+  --fg: #dfdfdf;
+  --bru: #353234;
+  --brf: #144949;
 }
 
-.search-bar input {
-    background: rgba(10, 2, 0, 0.9);
-    border: none;
-    width: 100%;
-    height: 35px;
+* {
+  font-family: Monospace;
+  text-align: center;
+  color: var(--fg);
+  text-decoration: none;
+}
+
+body {
+  background: var(--bg);
 }
 
 .search-bar {
-    margin: 100px auto 0px auto;
-    width: 70%;
+  margin: 100px auto 0px auto;
+  width: 1100px;
+}
+.search-bar input {
+  background: var(--bg);
+  width: 100%;
+  height: 35px;
+  border: none;
+}
+
+.search-bar input:focus {
+  outline: none;
 }
 
 #bookmarks {
-    height: 40px;
-    width: 70%;
-    margin: 15px auto;
+  height: auto;
+  width: 1100px;
+  margin: 50px auto;
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: auto auto auto auto; 
 }
 
 .bmark {
-    background: rgba(10, 2, 0, 0.9);
-    width: 24.7%;
-    height: 100%;
-    float: left;
-    margin: 0 0 3px 3px;
+  background: var(--bg);
+  width: auto;
+  height: 40px;
+  margin: 0 0 3px 3px;
 }
 
-a:hover {
-  color: #aaaaaa;
+.bmark, .search-bar {
+  border: 1px solid var(--bru);
+}
+
+.bmark:hover, .search-bar:hover {
+  border-color: var(--brf);
+  color: var(--brf);
   transition: .3s;
 }
