diff --git a/website_astro/public/scripts/map.js b/website_astro/public/scripts/map.js
index 4c60107..4840f8e 100644
--- a/website_astro/public/scripts/map.js
+++ b/website_astro/public/scripts/map.js
@@ -65,7 +65,7 @@ function selectStyle(style) {
     map.setZoom(berlin.zoom)
   }
 
-  // document.getElementById('style-url-code').innerText = styleUrl
+  document.getElementById('style-url-code').innerText = styleUrl
 }
 
 // --- start
diff --git a/website_astro/src/components/Donate.astro b/website_astro/src/components/Donate.astro
index c0c2c23..9df192f 100644
--- a/website_astro/src/components/Donate.astro
+++ b/website_astro/src/components/Donate.astro
@@ -14,3 +14,86 @@ 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_astro/src/components/Logo.astro b/website_astro/src/components/Logo.astro
index 13dfc1a..f6197ae 100644
--- a/website_astro/src/components/Logo.astro
+++ b/website_astro/src/components/Logo.astro
@@ -1,12 +1,31 @@
 ---
+interface Props {
+  title: string
+}
 
+const { title } = Astro.props
 ---
 
 <img src="/logo.jpg" alt="logo" height="200" class="logo" />
-<h1>OpenFreeMap</h1>
+
+<h1>{title}</h1>
+
 <div class="icons">
   <a href="https://github.com/hyperknot/openfreemap" target="_blank"
     ><img src="/github.svg" alt="github" height="28" /></a
   >
   <a href="https://x.com/hyperknot" target="_blank"><img src="/x.svg" alt="x" height="28" /></a>
 </div>
+
+<style>
+  .logo {
+    margin: 0 auto;
+  }
+
+  .icons {
+    margin: 0 auto;
+    width: 80px;
+    display: flex;
+    justify-content: space-between;
+  }
+</style>
diff --git a/website_astro/src/components/Map.astro b/website_astro/src/components/Map.astro
index d7b6853..b201194 100644
--- a/website_astro/src/components/Map.astro
+++ b/website_astro/src/components/Map.astro
@@ -1,10 +1,8 @@
 ---
-
+import StyleUrlBug from './StyleUrlBug.astro'
+const { showStyleURL } = Astro.props
 ---
 
-<h2>How can I use it?</h2>
-<!--<p>(Click below, it's interactive!)</p>-->
-
 <div id="map-container">
   <div id="mapbg-image">
     <div class="mapbg-attrib">
@@ -22,12 +20,81 @@
   <button data-style="liberty-3d" class="btn">3D</button>
 </div>
 
-<p>
-  Have a look at the default styles and read more about how to integrate it to your website or app
-  here:
-</p>
-
-<p><a href="#">How to use OpenFreeMap</a></p>
+{showStyleURL && <StyleUrlBug />}
 
 <script is:inline src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
 <script is:inline src="/scripts/map.js"></script>
+
+<style>
+  #map-container {
+    width: 100%;
+    height: 500px;
+    margin-bottom: 24px;
+    position: relative;
+  }
+
+  #mapbg-image {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    background-image: url('/berlin.webp');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    transition: opacity 3s;
+  }
+
+  .mapbg-attrib {
+    font:
+      12px / 20px Helvetica Neue,
+      Arial,
+      Helvetica,
+      sans-serif;
+    background-color: hsla(0, 0%, 100%, 0.5);
+    padding: 0 5px;
+    bottom: 0;
+    right: 0;
+    position: absolute;
+  }
+
+  .mapbg-attrib a {
+    color: rgba(0, 0, 0, 0.75);
+    text-decoration: none;
+  }
+
+  .mapbg-attrib a:hover {
+    text-decoration: underline;
+  }
+
+  .button-container {
+    margin: 0 auto 0.6em;
+    max-width: 600px;
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  .btn {
+    border: 0;
+    border-radius: 0.25rem;
+    background: #2f5f8b;
+    color: white;
+    font-size: 1rem;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .btn.selected {
+    background: #4892d9;
+  }
+
+  .btn:hover {
+    background: #4892d9;
+  }
+</style>
diff --git a/website_astro/src/components/StyleUrlBug.astro b/website_astro/src/components/StyleUrlBug.astro
new file mode 100644
index 0000000..b39f1e0
--- /dev/null
+++ b/website_astro/src/components/StyleUrlBug.astro
@@ -0,0 +1,11 @@
+<p>Use the following style in a MapLibre map:</p>
+<pre
+  id="style-url-pre"><code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>
+
+<style>
+  #style-url-pre {
+    background: #efefef;
+    padding: 14px;
+    font-weight: bold;
+  }
+</style>
diff --git a/website_astro/src/content/how_to_use/custom_styles.md b/website_astro/src/content/how_to_use/custom_styles.md
index b331bcf..841479f 100644
--- a/website_astro/src/content/how_to_use/custom_styles.md
+++ b/website_astro/src/content/how_to_use/custom_styles.md
@@ -4,8 +4,8 @@ You can customize the styles using the [Maputnik](https://maputnik.github.io/) e
 
 When you use a customized style, you need to host the style JSON yourself and use its URL in MapLibre.
 
-[Customize Bright](https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/bright)
+<a href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/bright" target="_blank">Customize Bright</a>
 
-[Customize Liberty](https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/liberty)
+<a href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/liberty" target="_blank">Customize Liberty</a>
 
-[Customize Positron](https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/positron)
+<a href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/positron" target="_blank">Customize Positron</a>
diff --git a/website_astro/src/content/how_to_use/maplibre.md b/website_astro/src/content/how_to_use/maplibre.md
index d9865e3..1455545 100644
--- a/website_astro/src/content/how_to_use/maplibre.md
+++ b/website_astro/src/content/how_to_use/maplibre.md
@@ -14,8 +14,8 @@ Initialize it to a div like this:
 <script>
   const map = new maplibregl.Map({
     style: 'https://tiles.openfreemap.org/styles/liberty',
-    center: [-0.114, 51.506],
-    zoom: 14.2,
+    center: [13.388, 52.517],
+    zoom: 9.5,
     container: 'map',
   })
 </script>
diff --git a/website_astro/src/pages/how_to_use.astro b/website_astro/src/pages/how_to_use.astro
deleted file mode 100644
index 4cd2f56..0000000
--- a/website_astro/src/pages/how_to_use.astro
+++ /dev/null
@@ -1,21 +0,0 @@
----
-import Layout from '../layouts/Layout.astro'
-
-import { Content as MaplibreText } from '../content/how_to_use/maplibre.md'
-import { Content as MapboxText } from '../content/how_to_use/mapbox.md'
-import { Content as LeafletText } from '../content/how_to_use/leaflet.md'
-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'
----
-
-<Layout title="How to use OpenFreeMap in your website or app">
-  <h1>How to use OpenFreeMap in your website or app</h1>
-
-  <MaplibreText />
-  <MapboxText />
-  <LeafletText />
-  <MobileText />
-  <CustomStylesText />
-  <SelfHostingText />
-</Layout>
diff --git a/website_astro/src/pages/index.astro b/website_astro/src/pages/index.astro
index 037db1b..a1cfb70 100644
--- a/website_astro/src/pages/index.astro
+++ b/website_astro/src/pages/index.astro
@@ -9,9 +9,18 @@ import { Content as RestText } from '../content/index/rest.md'
 ---
 
 <Layout title="OpenFreeMap">
-  <Logo />
+  <Logo title="OpenFreeMap" />
+
   <WhatisText />
+
+  <h2>How can I use it?</h2>
   <Map />
+  <p>
+    Have a look at the default styles and read more about how to integrate it to your website or app
+    here:
+  </p>
+  <p><a href="/quick_start">Quick Start Guide</a></p>
+
   <Donate />
   <RestText />
 
diff --git a/website_astro/src/pages/quick_start.astro b/website_astro/src/pages/quick_start.astro
new file mode 100644
index 0000000..6df56b5
--- /dev/null
+++ b/website_astro/src/pages/quick_start.astro
@@ -0,0 +1,68 @@
+---
+import Layout from '../layouts/Layout.astro'
+import Map from '../components/Map.astro'
+
+import { Content as MaplibreText } from '../content/how_to_use/maplibre.md'
+import { Content as MapboxText } from '../content/how_to_use/mapbox.md'
+import { Content as LeafletText } from '../content/how_to_use/leaflet.md'
+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'
+---
+
+<Layout title="OpenFreeMap Quick Start Guide">
+  <Logo title="OpenFreeMap Quick Start Guide" />
+
+  <div style="margin-top:30px; margin-bottom: 30px;">
+    <p>
+      This guide provides step-by-step instructions for integrating OpenFreeMap into your website or
+      mobile application.
+    </p><p>
+      To get started, choose a style from the default styles provided below. Later, there'll be
+      options to use custom styles as well.
+    </p>
+    <p>(You can navigate the map, it's interactive!)</p>
+  </div>
+
+  <Map showStyleURL={true} />
+
+  <MaplibreText />
+  <MapboxText />
+  <LeafletText />
+  <MobileText />
+  <CustomStylesText />
+  <SelfHostingText />
+</Layout>
+
+<style>
+  .col-lbl {
+    display: block;
+    cursor: pointer;
+    color: #333;
+  }
+
+  .col-chk {
+    display: none;
+  }
+
+  .col-lbl:before {
+    content: '►';
+    margin-right: 1em;
+    color: #555;
+    font-size: 0.8em;
+  }
+
+  .col-cnt {
+    display: none;
+    margin: 1em 0 2em;
+  }
+
+  .col-chk:checked ~ .col-cnt {
+    display: block;
+  }
+
+  .col-chk:checked ~ .col-lbl:before {
+    content: '▼';
+  }
+</style>
diff --git a/website_astro/src/styles/global.css b/website_astro/src/styles/global.css
index d2151c9..356bc45 100644
--- a/website_astro/src/styles/global.css
+++ b/website_astro/src/styles/global.css
@@ -7,9 +7,11 @@
 *::after {
   box-sizing: border-box;
 }
+
 * {
   margin: 0;
 }
+
 img,
 picture,
 video,
@@ -18,6 +20,7 @@ svg {
   display: block;
   max-width: 100%;
 }
+
 input,
 button,
 textarea,
@@ -49,14 +52,11 @@ button:-moz-focusring {
 
 body {
   padding-bottom: 100px;
-
   line-height: 1.5;
   font-size: 17px;
   -webkit-font-smoothing: antialiased;
-
   font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
   font-weight: normal;
-
   color: #000;
 }
 
@@ -91,9 +91,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;
 }
 
@@ -113,17 +111,6 @@ strong {
   color: #333;
 }
 
-.logo {
-  margin: 0 auto;
-}
-
-.icons {
-  margin: 0 auto;
-  width: 80px;
-  display: flex;
-  justify-content: space-between;
-}
-
 h1 {
   text-align: center;
 }
@@ -153,123 +140,14 @@ p {
 }
 
 pre {
-  /*background: #efefef;*/
   max-width: 600px;
   margin: 0 auto 0.6em;
   font-size: 14px;
-  /*overflow: scroll;*/
-  /*font-weight: bold;*/
+  padding: 7px 14px;
 }
 
-
 code {
   font-size: 14px;
-  /*font-family: 'Nimbus Mono PS', 'Courier New', monospace !important;*/
-/*  background: #efefef;*/
-}
-
-#map-container {
-  width: 100%;
-  height: 500px;
-  margin-bottom: 24px;
-  position: relative;
-}
-
-#mapbg-image {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 1;
-  background-image: url('/berlin.webp');
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  cursor: pointer;
-  transition: opacity 3s;
-}
-
-.mapbg-attrib {
-  font:
-    12px / 20px Helvetica Neue,
-    Arial,
-    Helvetica,
-    sans-serif;
-  background-color: hsla(0, 0%, 100%, 0.5);
-  padding: 0 5px;
-  bottom: 0;
-  right: 0;
-  position: absolute;
-}
-
-.mapbg-attrib a {
-  color: rgba(0, 0, 0, 0.75);
-  text-decoration: none;
-}
-
-.mapbg-attrib a:hover {
-  text-decoration: underline;
-}
-
-.btn {
-  border: 0;
-  border-radius: 0.25rem;
-  background: #2f5f8b;
-  color: white;
-  font-size: 1rem;
-  white-space: nowrap;
-  text-decoration: none;
-  padding: 0.25rem 0.5rem;
-  margin-right: 0.5rem;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-}
-
-.btn.selected {
-  background: #4892d9;
-}
-
-.button-container {
-  margin: 0 auto 0.6em;
-  max-width: 600px;
-  display: flex;
-  flex-wrap: nowrap;
-}
-
-.btn:hover {
-  background: #4892d9;
-}
-/*button:focus { }*/
-/*button:active { }*/
-
-.col-lbl {
-  display: block;
-  cursor: pointer;
-  color: #333;
-}
-
-.col-chk {
-  display: none;
-}
-
-.col-lbl:before {
-  content: '►';
-  margin-right: 1em;
-  color: #555;
-  font-size: 0.8em;
-}
-
-.col-cnt {
-  display: none;
-  margin: 1em 0 2em;
-}
-
-.col-chk:checked ~ .col-cnt {
-  display: block;
-}
-
-.col-chk:checked ~ .col-lbl:before {
-  content: '▼';
 }
 
 hr {
@@ -279,86 +157,6 @@ hr {
   margin: 2em 0;
 }
 
-#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;
-}
-
 @media (max-width: 550px) {
   body {
     padding-bottom: 40px;