diff --git a/website/src/components/Donate.astro b/website/src/components/Donate.astro
index 9df192f..c0c2c23 100644
--- a/website/src/components/Donate.astro
+++ b/website/src/components/Donate.astro
@@ -14,86 +14,3 @@ import { Content as DonateText } from '../content/index/donate.md'
 
 <script is:inline src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.js"></script>
 <script is:inline src="/scripts/donate.js"></script>
-
-<style>
-  #support-plans-slider {
-    max-width: 600px;
-    margin: 200px auto 150px;
-  }
-
-  @media (max-width: 550px) {
-    #support-plans-slider {
-      max-width: 98%;
-      margin: 170px auto 120px;
-    }
-  }
-
-  .noUi-connects {
-    cursor: pointer;
-  }
-
-  .noUi-value {
-    line-height: 0;
-    margin-top: 32px;
-    font-size: 30px;
-    transition: font-size 0.3s ease;
-    cursor: pointer;
-  }
-
-  .noUi-value.active {
-    font-size: 45px;
-  }
-
-  .noUi-marker-horizontal.noUi-marker-large {
-    height: 5px;
-  }
-
-  .noUi-marker-horizontal.noUi-marker {
-    margin-left: 0;
-    width: 1px;
-  }
-
-  .noUi-tooltip {
-    border-color: #ccc;
-    border-radius: 10px;
-    padding: 10px;
-  }
-
-  .noUi-tooltip.first {
-    left: 0;
-    transform: unset;
-  }
-
-  .noUi-tooltip.last {
-    right: 0;
-    left: unset;
-    transform: unset;
-  }
-
-  .plan-name {
-    font-weight: bold;
-    margin-bottom: 10px;
-  }
-
-  .plan-link {
-    display: block;
-    text-decoration: none;
-
-    color: white;
-    font-weight: bold;
-    letter-spacing: 0.05rem;
-    font-size: 15px;
-
-    border-radius: 20px;
-    padding: 6px 16px;
-    margin-top: 15px;
-
-    background: linear-gradient(32deg, #03a9f4, transparent) #f441a5;
-    transition: background-color 1s;
-  }
-
-  .plan-link:hover,
-  .plan-link:focus {
-    background-color: #fdb900;
-  }
-</style>
diff --git a/website/src/layouts/Layout.astro b/website/src/layouts/Layout.astro
index 8324991..b190dc2 100644
--- a/website/src/layouts/Layout.astro
+++ b/website/src/layouts/Layout.astro
@@ -5,7 +5,7 @@ interface Props {
 
 const { title } = Astro.props
 
-import '../styles/global.css'
+import '../styles/_style.css'
 ---
 
 <!doctype html>
@@ -29,7 +29,6 @@ import '../styles/global.css'
 
     <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
     <link href="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.css" rel="stylesheet" />
-    <!--<link href="https://unpkg.com/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />-->
   </head>
 
   <body>
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index f560cb1..e8fc5e9 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -23,7 +23,4 @@ import { Content as RestText } from '../content/index/rest.md'
 
   <Donate />
   <RestText />
-
-  <!--<script src="https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js"></script>-->
-  <!--<script src="https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>-->
 </Layout>
diff --git a/website/src/pages/quick_start.astro b/website/src/pages/quick_start.astro
index 6df56b5..d63b665 100644
--- a/website/src/pages/quick_start.astro
+++ b/website/src/pages/quick_start.astro
@@ -9,6 +9,7 @@ import { Content as MobileText } from '../content/how_to_use/mobile.md'
 import { Content as CustomStylesText } from '../content/how_to_use/custom_styles.md'
 import { Content as SelfHostingText } from '../content/how_to_use/self_hosting.md'
 import Logo from '../components/Logo.astro'
+import Donate from '../components/Donate.astro'
 ---
 
 <Layout title="OpenFreeMap Quick Start Guide">
@@ -33,6 +34,8 @@ import Logo from '../components/Logo.astro'
   <MobileText />
   <CustomStylesText />
   <SelfHostingText />
+
+  <Donate />
 </Layout>
 
 <style>
diff --git a/website/src/styles/_style.css b/website/src/styles/_style.css
new file mode 100644
index 0000000..8c30f0e
--- /dev/null
+++ b/website/src/styles/_style.css
@@ -0,0 +1,3 @@
+@import "reset.css";
+@import "donate.css";
+@import "global.css";
\ No newline at end of file
diff --git a/website/src/styles/donate.css b/website/src/styles/donate.css
new file mode 100644
index 0000000..dc32495
--- /dev/null
+++ b/website/src/styles/donate.css
@@ -0,0 +1,80 @@
+#support-plans-slider {
+  max-width: 600px;
+  margin: 200px auto 150px;
+}
+
+@media (max-width: 550px) {
+  #support-plans-slider {
+    max-width: 98%;
+    margin: 170px auto 120px;
+  }
+}
+
+.plan-name {
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.plan-link {
+  display: block;
+  text-decoration: none;
+  color: white;
+  font-weight: bold;
+  letter-spacing: 0.05rem;
+  font-size: 15px;
+  border-radius: 20px;
+  padding: 6px 16px;
+  margin-top: 15px;
+  background: linear-gradient(32deg, #03a9f4, transparent) #f441a5;
+  transition: background-color 1s;
+}
+
+.plan-link:hover,
+.plan-link:focus {
+  background-color: #fdb900;
+}
+
+/* noUI slider customizations */
+
+.noUi-connects {
+  cursor: pointer;
+}
+
+.noUi-value {
+  line-height: 0;
+  margin-top: 32px;
+  font-size: 30px;
+  transition: font-size 0.3s ease;
+  cursor: pointer;
+}
+
+.noUi-value.active {
+  font-size: 45px;
+}
+
+.noUi-marker-horizontal.noUi-marker-large {
+  height: 5px;
+}
+
+.noUi-marker-horizontal.noUi-marker {
+  margin-left: 0;
+  width: 1px;
+}
+
+.noUi-tooltip {
+  border-color: #ccc;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.noUi-tooltip.first {
+  left: 0;
+  transform: unset;
+}
+
+.noUi-tooltip.last {
+  right: 0;
+  left: unset;
+  transform: unset;
+}
+
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index 9b46a89..c899d25 100644
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -1,55 +1,3 @@
-/*
-  Josh's Custom CSS Reset
-  https://www.joshwcomeau.com/css/custom-css-reset/
-*/
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-* {
-  margin: 0;
-}
-
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-
-/* normalize.css */
-
-button {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-}
-
-button::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-button:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/* --- start --- */
-
 body {
   padding-bottom: 100px;
   line-height: 1.5;
@@ -91,8 +39,7 @@ h6,
   max-width: 600px;
   margin: 1em auto 0.5em;
   line-height: 1.2;
-  font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro,
-    sans-serif;
+  font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
   font-weight: bold;
 }
 
@@ -184,3 +131,4 @@ hr {
     height: 300px;
   }
 }
+
diff --git a/website/src/styles/reset.css b/website/src/styles/reset.css
new file mode 100644
index 0000000..1621e0b
--- /dev/null
+++ b/website/src/styles/reset.css
@@ -0,0 +1,50 @@
+/*
+  Josh's Custom CSS Reset
+  https://www.joshwcomeau.com/css/custom-css-reset/
+*/
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* normalize.css */
+
+button {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
