diff --git a/docs/docs/stylesheets/extra.css b/docs/docs/stylesheets/extra.css
index df4ae937..a3d9eafd 100644
--- a/docs/docs/stylesheets/extra.css
+++ b/docs/docs/stylesheets/extra.css
@@ -40,7 +40,7 @@
   --md-primary-fg-color--light:    var(--gray-800);
   --md-primary-fg-color--dark:     #00ff00;
 
-  --md-accent-fg-color:              var(--gray-600);
+  --md-accent-fg-color:              #8dc103;
   --md-accent-fg-color--transparent: var(--gray-800);
   --md-accent-bg-color:              var(--gray-200);
   --md-accent-bg-color--light:       var(--gray-200);
diff --git a/resources/linux_title_bar_dark_2x.png b/resources/linux_title_bar_dark_2x.png
new file mode 100644
index 00000000..1d5eb66a
Binary files /dev/null and b/resources/linux_title_bar_dark_2x.png differ
diff --git a/templates/template_base.html b/templates/template_base.html
index 18503739..ba9b7e15 100644
--- a/templates/template_base.html
+++ b/templates/template_base.html
@@ -21,10 +21,9 @@
     <link rel="apple-touch-icon" sizes="180x180" href="{{ main_url_base }}/xemu_180x180.png">
     <link rel="icon" sizes="192x192" href="{{ main_url_base }}/xemu_192x192.png">
     <link rel="stylesheet" href="{{ main_url_base }}/theme.css">
-
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Roboto&display=swap" rel="stylesheet">
 
     <title>{%block title %}{% endblock %}{% if self.title() %} | {% endif %}xemu: Original Xbox Emulator</title>
     {% block append_head %}{% endblock %}
diff --git a/templates/template_index.html b/templates/template_index.html
index 036e4da8..bc6c5e6e 100644
--- a/templates/template_index.html
+++ b/templates/template_index.html
@@ -55,10 +55,24 @@
   margin: -60px 0 0; /* negative fixed header height */
 }
 
+.feature-card {
+  background-color: #181818;
+  border: 1px #0e0e0e solid;
+  border-radius: 5px;
+  min-height: 100%;
+  padding: 1rem;
+  padding-left: 3.5rem;
+}
+
+.feature-card p {
+  margin: 0;
+}
+
 .feature-icon {
-  font-size: 0.7em;
-  padding-right: 0.25em;
-  vertical-align: 10%;
+  width: 3.5rem;
+  margin: 0;
+  margin-left: -3.5rem;
+  text-align: center;
 }
 
 .button-icon {
@@ -102,6 +116,23 @@
 h2 {
   margin-top: 1em;
 }
+
+.screenshot-window {
+  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.6);
+  border-radius: 10px;
+  max-width: 642px;
+  margin: auto;
+}
+
+.screenshot-titlebar {
+  width: 100%;
+}
+
+#screenshot-carousel {
+  border: 1px rgba(0, 0, 0, 0.6) solid;
+  border-top: 0;
+  width: 100%;
+}
 </style>
 {% endblock %}
 
@@ -111,47 +142,45 @@ h2 {
   <div class="container">
   <div class="row mt-5">
     <div class="col-md-6 mt-4 pb-5 pb-md-0 text-center">
-    <img src="xbox_logo.png" id="xbox-logo" class="img-fluid" width=450 />
+      <img src="xbox_logo.png" id="xbox-logo" class="img-fluid" width=450 />
     </div>
     <div class="col-md-6">
-    <h1 class="display-3">
-      <canvas id="logo-canvas" class="gl-logo"></canvas>
-      <img id="logo-fallback" alt="xemu logo" src="/logo-green-jumbotron.svg" style="height: 1.03em;">
-    </h1>
-    <h4 class="card-subtitle mb-2">Original Xbox Emulator</h4>
-    <p>
-    A free and open-source application that emulates the original Microsoft
-    Xbox game console, enabling people to play their original Xbox games on
-    Windows, macOS, and Linux systems.
-    </p>
+      <h1 class="display-3">
+        <canvas id="logo-canvas" class="gl-logo"></canvas>
+        <img id="logo-fallback" alt="xemu logo" src="/logo-green-jumbotron.svg" style="height: 1.03em;">
+      </h1>
+      <h4 class="card-subtitle mb-2">Original Xbox Emulator</h4>
+      <p>
+      A free and open-source application that emulates the original Microsoft
+      Xbox game console, enabling people to play their original Xbox games on
+      Windows, macOS, and Linux systems.
+      </p>
 
-    <div class="container pl-2 p-0">
-      <div class="row">
-        <div class="column text-center text-md-left p-2">
-          <a class="btn btn-green btn-lg" role="button" id="download-gen" href="/docs/download">
-            <i class="fa fa-laptop button-icon" aria-hidden="true"></i>View Download Options
-          </a>
-          <a class="btn btn-green btn-lg" role="button" id="download-win" style="display: none" href="https://github.com/xemu-project/xemu/releases/latest/download/xemu-win-release.zip">
-            <i class="fab fa-windows button-icon" aria-hidden="true"></i>Download for Windows
-          </a>
-          <a class="btn btn-green btn-lg" role="button" id="download-mac" style="display: none" href="https://github.com/xemu-project/xemu/releases/latest/download/xemu-macos-universal-release.zip">
-            <i class="fab fa-apple button-icon" aria-hidden="true"></i>Download for macOS
-          </a>
-          <a class="btn btn-green btn-lg" role="button" id="download-linux" style="display: none" href="/docs/download/#download-for-linux">
-            <i class="fab fa-linux button-icon" aria-hidden="true"></i>Download for Linux
-          </a>
-        </div>
-        <div class="column p-2">
-          <strong>Latest release:</strong> v{{xemu_build_version}} ({{xemu_build_date.strftime('%b %-d, %Y')}})
-          <br />
-          <a href="/docs/download" id="download-options" style="display: none">Alternative download options</a>
+      <div class="container pl-2 p-0">
+        <div class="row">
+          <div class="column text-center text-md-left p-2">
+            <a class="btn btn-green btn-lg" role="button" id="download-gen" href="/docs/download">
+              <i class="fa fa-laptop button-icon" aria-hidden="true"></i>View Download Options
+            </a>
+            <a class="btn btn-green btn-lg" role="button" id="download-win" style="display: none" href="https://github.com/xemu-project/xemu/releases/latest/download/xemu-win-release.zip">
+              <i class="fab fa-windows button-icon" aria-hidden="true"></i>Download for Windows
+            </a>
+            <a class="btn btn-green btn-lg" role="button" id="download-mac" style="display: none" href="https://github.com/xemu-project/xemu/releases/latest/download/xemu-macos-universal-release.zip">
+              <i class="fab fa-apple button-icon" aria-hidden="true"></i>Download for macOS
+            </a>
+            <a class="btn btn-green btn-lg" role="button" id="download-linux" style="display: none" href="/docs/download/#download-for-linux">
+              <i class="fab fa-linux button-icon" aria-hidden="true"></i>Download for Linux
+            </a>
+          </div>
+          <div class="column p-2">
+            <strong>Latest release:</strong> v{{xemu_build_version}} ({{xemu_build_date.strftime('%b %-d, %Y')}})
+            <br />
+            <a href="/docs/download" id="download-options" style="display: none">Alternative download options</a>
+          </div>
         </div>
       </div>
     </div>
-
-    </div>
   </div>
-
   </div>
 </div>
 {% endblock %}
@@ -159,63 +188,78 @@ h2 {
 {% block content %}
 <h2 class="mb-4 text-center">Features</h2>
 <div class="row">
-  <div class="col-md-4">
-    <h4><i class="fab fa-github feature-icon"></i> Open Source</h4>
-    <p>The source code for xemu is publicly available. Users are invited to help improve the project!</p>
+  <div class="col-md-6 p-1">
+    <div class="feature-card">
+      <h4><i class="fab fa-github feature-icon"></i>Open Source</h4>
+      <p>The source code for xemu is publicly available. Users are invited to help improve the project!</p>
+    </div>
   </div>
-  <div class="col-md-4">
-    <h4><i class="fas fa-users feature-icon"></i> Cross Platform</h4>
-    <p>xemu runs natively on Windows, macOS, and Linux platforms. Pre-compiled binaries are available for Windows, macOS, and Ubuntu.</p>
+  <div class="col-md-6 p-1">
+    <div class="feature-card">
+      <h4><i class="fas fa-users feature-icon"></i>Cross Platform</h4>
+      <p>xemu runs natively on Windows, macOS, and Linux platforms. Pre-compiled binaries are available for Windows, macOS, and Ubuntu.</p>
+    </div>
   </div>
-  <div class="col-md-4">
-    <h4><i class="fas fa-people-arrows feature-icon"></i> System Link</h4>
-    <p>Networking is supported out of the box. Connect to other instances of xemu and even real Xboxes, locally or over the Internet.</p>
+  <div class="col-md-6 p-1">
+    <div class="feature-card">
+      <h4><i class="fas fa-people-arrows feature-icon"></i>Networking</h4>
+      <p>Networking is supported out of the box. Connect to other instances of xemu and even real Xboxes, locally or over the Internet.</p>
+    </div>
   </div>
-  <div class="col-md-4">
-    <h4><i class="fas fa-gamepad feature-icon"></i> Gamepad Support</h4>
-    <p>Built on SDL2, xemu supports virtually all gamepads. Connect up to 4 controllers at any time, just like a real Xbox.</p>
+  <div class="col-md-6 p-1">
+    <div class="feature-card">
+      <h4><i class="fas fa-gamepad feature-icon"></i>Gamepad Support</h4>
+      <p>Built on SDL2, xemu supports virtually all gamepads. Connect up to 4 controllers at any time, just like a real Xbox.</p>
+    </div>
   </div>
-  <div class="col-md-4">
-    <h4><i class="fas fa-history feature-icon"></i> Snapshots (Save States)</h4>
-    <p>No need to wait for game checkpoints. xemu supports saving the current state and loading it back up at any time.</p>
+  <div class="col-md-6 p-1">
+    <div class="feature-card">
+      <h4><i class="fas fa-history feature-icon"></i>Snapshots (Save States)</h4>
+      <p>No need to wait for game checkpoints. xemu supports saving the current state and loading it back up at any time.</p>
+    </div>
   </div>
-  <div class="col-md-4">
-    <h4><i class="fas fa-expand-alt feature-icon"></i> Render Scaling</h4>
-    <p>Breathe new life into your original Xbox games by easily scaling up the resolution that games render at.</p>
+  <div class="col-md-6 p-1">
+    <div class="feature-card">
+      <h4><i class="fas fa-expand-alt feature-icon"></i>Render Scaling</h4>
+      <p>Breathe new life into your original Xbox games by easily scaling up the resolution that games render at.</p>
+    </div>
   </div>
 </div>
 
 <h2 id="screenshots" class="mb-4 text-center">Screenshots</h2>
-<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
+<div class="screenshot-window">
+<img src="linux_title_bar_dark_2x.png" class="screenshot-titlebar" />
+<div id="screenshot-carousel" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
     <div class="carousel-item active">
-      <img src="/screenshots/0.png" class="img-fluid lazy col" />
+      <img src="/screenshots/0.png" class="img-fluid lazy" />
     </div>
     <div class="carousel-item">
-      <img src="/screenshots/1.png" class="img-fluid lazy col" />
+      <img src="/screenshots/1.png" class="img-fluid lazy" />
     </div>
     <div class="carousel-item">
-      <img src="/screenshots/2.png" class="img-fluid lazy col" />
+      <img src="/screenshots/2.png" class="img-fluid lazy" />
     </div>
     <div class="carousel-item">
-      <img src="/screenshots/3.png" class="img-fluid lazy col" />
+      <img src="/screenshots/3.png" class="img-fluid lazy" />
     </div>
     <div class="carousel-item">
-      <img src="/screenshots/4.png" class="img-fluid lazy col" />
+      <img src="/screenshots/4.png" class="img-fluid lazy" />
     </div>
     <div class="carousel-item">
-      <img src="/screenshots/5.png" class="img-fluid lazy col" />
+      <img src="/screenshots/5.png" class="img-fluid lazy" />
     </div>
   </div>
-  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+  <a class="carousel-control-prev" href="#screenshot-carousel" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
-  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+  <a class="carousel-control-next" href="#screenshot-carousel" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
 </div>
+</div>
 
 <h2 id="compatibility" class="mb-4 text-center">Compatibility</h2>
 <p>Title compatibility status is provided by volunteer reporters in the community, as the reporter experienced the title in the current version of xemu on their computer at time of reporting. As the project evolves, reports may need to be updated. You are invited to help improve the project by submitting an updated compatibility report. Join the Discord server to learn how to contribute!</p>
diff --git a/theme.scss b/theme.scss
index 76eabc77..a2e44570 100644
--- a/theme.scss
+++ b/theme.scss
@@ -55,7 +55,7 @@ $body-color:                $gray-400;
 // Links
 
 $link-color:                $white !default;
-$link-hover-color:          $white !default;
+$link-hover-color:          #8dc103 !default;
 
 // Fonts
 
@@ -115,7 +115,7 @@ $nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-colo
 /*$navbar-padding-y:                  1rem !default;*/
 
 $navbar-dark-color:                $link-color !default;
-$navbar-dark-hover-color:          $white !default;
+$navbar-dark-hover-color:          $link-hover-color !default;
 
 $navbar-light-color:                rgba($gray-900, .7) !default;
 $navbar-light-hover-color:          $gray-900 !default;
@@ -437,7 +437,25 @@ $pre-color:                         inherit !default;
 }
 
 .btn-green {
-    @include button-outline-variant(#82b540, $gray-900, #8dc103, #8dc103);
+  @include button-variant(#8dc103, $gray-900, #8dc103, #8dc103);
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.btn-green:hover {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.btn-green {
+  background: linear-gradient(128deg, rgba(2,0,36,0) 0%, rgba(134, 186, 64, 0.4) 150%); 
+  color: #86ba41;
+  border: 1px #86ba41 solid;
+}
+
+.btn-green:hover {
+  background-color: #5f7200;
+  color: #091100;
+  box-shadow: 0 0 25px 5px #a6c102 inset;
+  border: 1px #93ac00 solid;
 }
 
 .nav-social {
@@ -450,3 +468,7 @@ $pre-color:                         inherit !default;
   background-color: rgba(0, 0, 0, 0.6) !important;
   transition: background-color 200ms linear;
 }
+
+h1, h2, h3, h4, h5 {
+  font-family: "Chakra Petch", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}