diff --git a/website/assets/pricing.json b/website/assets/pricing.json
new file mode 100644
index 0000000..74eff73
--- /dev/null
+++ b/website/assets/pricing.json
@@ -0,0 +1,34 @@
+[
+  {
+    "price": 10,
+    "name": "Iron"
+  },
+  {
+    "price": 20,
+    "name": "Steel"
+  },
+  {
+    "price": 40,
+    "name": "Copper"
+  },
+  {
+    "price": 75,
+    "name": "Bronze"
+  },
+  {
+    "price": 150,
+    "name": "Silver"
+  },
+  {
+    "price": 250,
+    "name": "Gold"
+  },
+  {
+    "price": 500,
+    "name": "Platinum"
+  },
+  {
+    "price": 1000,
+    "name": "Diamond"
+  }
+]
diff --git a/website/assets/style.css b/website/assets/style.css
index a318b27..5182048 100644
--- a/website/assets/style.css
+++ b/website/assets/style.css
@@ -239,3 +239,8 @@ hr {
     max-width: 100%;
   }
 }
+
+#support-plans-slider {
+    max-width: 600px;
+  margin: 50px auto;
+}
\ No newline at end of file
diff --git a/website/assets/support_plans.js b/website/assets/support_plans.js
new file mode 100644
index 0000000..e441298
--- /dev/null
+++ b/website/assets/support_plans.js
@@ -0,0 +1,22 @@
+const slider = document.getElementById('support-plans-slider');
+
+var arbitraryValuesForSlider = ['128MB', '256MB', '1GB', '8GB', '16GB', '32GB'];
+
+var format = {
+    to: function(value) {
+        return arbitraryValuesForSlider[Math.round(value)];
+    },
+    from: function (value) {
+        return arbitraryValuesForSlider.indexOf(value);
+    }
+};
+
+noUiSlider.create(slider, {
+    // start values are parsed by 'format'
+    start: '1GB',
+    range: { min: 0, max: arbitraryValuesForSlider.length - 1 },
+    step: 1,
+    tooltips: true,
+    format: format,
+    pips: { mode: 'steps', format: format, density: 50 },
+});
\ No newline at end of file
diff --git a/website/blocks/support_plans.html b/website/blocks/support_plans.html
new file mode 100644
index 0000000..92bf340
--- /dev/null
+++ b/website/blocks/support_plans.html
@@ -0,0 +1 @@
+<div id="support-plans-slider"></div>
diff --git a/website/generate.py b/website/generate.py
index 5e46b41..60d7b69 100755
--- a/website/generate.py
+++ b/website/generate.py
@@ -20,8 +20,12 @@ def generate():
 
     index_html = template.replace('{main}', main_html)
 
-    style_selector = open('blocks/map_docs.html').read()
-    index_html = index_html.replace('<!--map_docs-->', style_selector)
+    map_docs = open('blocks/map_docs.html').read()
+    index_html = index_html.replace('<!--map_docs-->', map_docs)
+
+    support_plans = open('blocks/support_plans.html').read()
+    index_html = index_html.replace('<!--support_plans-->', support_plans)
+
     open(OUT_DIR / 'index.html', 'w').write(index_html)
 
     make_static_page('privacy', 'Privacy Policy')
@@ -33,7 +37,8 @@ def copy_assets():
     for file in [
         'style.css',
         'logo.jpg',
-        'map.js',
+        'map_docs.js',
+        'support_plans.js',
         'favicon.ico',
         'github.svg',
         'x.svg',
diff --git a/website/template.html b/website/template.html
index b8fd28f..9773c53 100644
--- a/website/template.html
+++ b/website/template.html
@@ -17,9 +17,8 @@
 
     <!--    <link rel="icon" href="/favicon.ico" sizes="any" />-->
 
-    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
     <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>
 
@@ -42,7 +41,11 @@ <h1>OpenFreeMap</h1>
       <a href="tos">Terms of Service</a>
     </div>
 
-    <script src="map.js"></script>
+    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
+    <script src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.js"></script>
+
+    <script src="map_docs.js"></script>
+    <script src="support_plans.js"></script>
 
     <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>