diff --git a/docs/css/extra.css b/docs/css/extra.css
index 15c8e6d..868d09a 100644
--- a/docs/css/extra.css
+++ b/docs/css/extra.css
@@ -52,10 +52,16 @@ div.gh-badge img {
 }
 
 a.donate-badge img {
-	margin-top: 10;
-	margin-bottom: 0;
-	padding: 0;
-	height: 35px;
+    margin-top: 10px;
+    margin-bottom: 0;
+    padding: 0;
+    height: 35px;
+}
+
+@media only screen and (min-width: 1000px) {
+    a.donate-badge img {
+        margin-top: 0;
+    }
 }
 
 /* Definition List styles */
@@ -81,8 +87,8 @@ body.homepage>div.container div.col-md-3 {
 }
 
 body.homepage>div.container div.col-md-9 {
-    margin-left: 0;
-    padding-left: 0;
+    /* margin-left: 0; */
+    /* padding-left: 0; */
     flex: 0 0 100%;
     max-width: 100%;
 }
@@ -146,78 +152,100 @@ a:hover {
     background-color: #453A62;
 }
 
+.ghcup-intro {
+    text-align: center;
+}
+
 .main-buttons {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	justify-content: center;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
 }
 
 .main-buttons a {
-	margin-right: 5px;
-	margin-bottom: 5px;
+    margin-right: 5px;
+    margin-bottom: 5px;
 }
 
 .command-button {
-	display: flex;
-	align-items: center;
+    display: flex;
+    align-items: center;
 }
 
 .command-button > pre {
+    flex: 0 1 80%;
+    margin: 0;
+    padding: 10px;
+    text-align: center;
     background-color: #515151;
     color: white;
-    margin: auto;
-	margin-top: 0px;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-    padding-right: 1rem;
-    text-align: center;
     border-radius: 3px;
     box-shadow: inset 0px 0px 20px 0px #333333;
     font-size: 1em;
-    width: 55rem;
-	overflow: auto;
-	white-space: nowrap;
+    white-space: nowrap;
+    overflow: auto;
 }
 
 .ghcup-command:before {
     color: #999;
     content: " $ ";
-	margin-left: 15px;
+    margin-left: 15px;
 }
 
 div.command-button {
-	display: flex;
-	align-items: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.command-button pre {
+
 }
 
 div.command-button button {
-	color: #515151;
-	/* border: none; */
-	background: rgb(230, 230, 230);
-	border-width: 2px !important;
-	border-style: solid !important;
-	border-radius: 3px !important;
-	border: grey;
-
-    margin-left: 0.5rem !important;
-    margin-right: auto !important;
-    text-align: center !important;
-
-	padding: 18px;
-	padding-bottom: 16px;
+    color: #515151;
+    background: rgb(230, 230, 230);
+    border: 1px solid grey;
+    margin: 0 0 0 10px;
+    padding: 10px;
+    flex-basis: 0 0 20%;
 }
 
 div.command-button button .fa {
-	font-size: x-large;
+    font-size: x-large;
 }
 
 div.command-button button:hover {
-	background: rgb(220, 220, 220);
-	color: black;
-	border: black;
+    background: rgb(220, 220, 220);
+    color: black;
+    border: 1px solid black;
 }
 
 div.command-button button:focus {
-	color: green;
+    background-color: #04aa6d;
 }
+
+footer > hr {
+    border-top: 0.5px solid #CCC;
+}
+
+.qi-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.ghcup-os-container {
+    width: 100%;
+    margin: 10px 0;
+}
+.ghcup-os-container > * {
+    text-align: center;
+}
+
+/* fix list overflows (esp about page) */
+ul > li {
+    overflow-wrap: anywhere;
+}
+
diff --git a/docs/index.md b/docs/index.md
index 6531d58..3062982 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -10,7 +10,7 @@ hide:
 
 # ![](./haskell_logo.png){: .main-logo style="width:100px"} GHCup
 
-GHCup is an installer for the general purpose language [Haskell](https://www.haskell.org/).
+<p class="ghcup-intro">GHCup is an installer for the general purpose language <a href="https://www.haskell.org">Haskell</a>.</p>
 
 <div class="text-center gh-badge">
 <a href="https://kiwiirc.com/nextclient/irc.libera.chat/?nick=Guest%7C?#haskell,#haskell-ghcup"><img src="https://img.shields.io/badge/chat-on%20libera%20IRC-brightgreen.svg" alt="Join the chat at Libera.chat"></a>
@@ -35,28 +35,32 @@ It follows the unix UNIX philosophy of [do one thing and do it well](https://en.
 
 [![GHCup](./ghcup.gif){: .center style="width:700px"}](install#installation)
 
-<h2 class="text-center" id="quick-install">Quick Install<a class="headerlink" href="#quick-install" title="Permanent link"></a>
-</h2>
+<section class="qi-container">
+    <h2 class="text-center" id="quick-install">Quick Install<a class="headerlink" href="#quick-install" title="Permanent link"></a></h2>
 
-### Linux, macOS, FreeBSD or [WSL2](https://docs.microsoft.com/en-us/windows/wsl/)
-
-Run the following in a terminal (as a non-root user):
-
-<div class="command-button">
-	<pre><span class="ghcup-command" id="ghcup-command-linux">curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
-<button class="btn" onclick="copyToClipboardNux()" id="ghcup-linux-button"><i class="fa fa-copy"></i></button>
-</div>
-<span>
-
-</span>
-
-### Windows
-
-Run the following in a PowerShell session (as a non-admin user):
-
-<div class="command-button">
-	<pre><span class="ghcup-command" id="ghcup-command-windows">Set-ExecutionPolicy Bypass -Scope Process -Force;[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072;Invoke-Command -ScriptBlock ([ScriptBlock]::Create((Invoke-WebRequest https://www.haskell.org/ghcup/sh/bootstrap-haskell.ps1 -UseBasicParsing))) -ArgumentList $true</span></pre>
-<button class="btn" onclick="copyToClipboardWin()" id="ghcup-windows-button"><i class="fa fa-copy"></i></button>
-</div>
+    <div class="ghcup-os-container">
+      <h3>Linux, macOS, FreeBSD or <a href="https://docs.microsoft.com/en-us/windows/wsl/"> WSL2 </a></h3>
+      <p>Run the following in a terminal (as a non-root user):<p>
+      <div class="command-button">
+	    <pre>
+            <span class="ghcup-command" id="ghcup-command-linux">curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span>
+          </pre>
+        <button class="btn" onclick="copyToClipboardNux()" id="ghcup-linux-button"><i class="fa fa-copy"></i></button>
+      </div>
+      <span>
+      </span>
+    </div>
 
+    <div class="ghcup-os-container">
+      <h3>Windows</h3>
+      <p>Run the following in a PowerShell session (as a non-admin user):<p>
 
+      <div class="command-button">
+	    <pre>
+          <span class="ghcup-command" id="ghcup-command-windows">Set-ExecutionPolicy Bypass -Scope Process -Force;[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072;Invoke-Command -ScriptBlock ([ScriptBlock]::Create((Invoke-WebRequest https://www.haskell.org/ghcup/sh/bootstrap-haskell.ps1 -UseBasicParsing))) -ArgumentList $true
+          </span>
+        </pre>
+        <button class="btn" onclick="copyToClipboardWin()" id="ghcup-windows-button"><i class="fa fa-copy"></i></button>
+      </div>
+    </div>
+</section>