diff --git a/pgml-dashboard/src/components/inputs/range_group/mod.rs b/pgml-dashboard/src/components/inputs/range_group/mod.rs
index 4953856ff..a42493bc6 100644
--- a/pgml-dashboard/src/components/inputs/range_group/mod.rs
+++ b/pgml-dashboard/src/components/inputs/range_group/mod.rs
@@ -16,6 +16,9 @@ pub struct RangeGroup {
     pub cost_rate: Option<f32>,
     pub units: String,
     pub group_target: StimulusTarget,
+    pub options: Vec<Vec<String>>,
+    pub show_value: bool,
+    pub show_title: bool,
 }
 
 impl RangeGroup {
@@ -32,6 +35,9 @@ impl RangeGroup {
             cost_rate: None,
             units: String::default(),
             group_target: StimulusTarget::new(),
+            options: Vec::new(),
+            show_value: true,
+            show_title: true,
         }
     }
 
@@ -76,6 +82,29 @@ impl RangeGroup {
         self.group_target = target;
         self
     }
+
+    pub fn options(mut self, options: Vec<Vec<String>>) -> Self {
+        self.options = options;
+        self.min = 1;
+        self.max = self.options.len() as i64;
+        self.step = 1.0;
+        self
+    }
+
+    pub fn title(mut self, title: &str) -> Self {
+        self.title = title.to_owned();
+        self
+    }
+
+    pub fn hide_title(mut self) -> Self {
+        self.show_title = false;
+        self
+    }
+
+    pub fn hide_value(mut self) -> Self {
+        self.show_value = false;
+        self
+    }
 }
 
 component!(RangeGroup);
diff --git a/pgml-dashboard/src/components/inputs/range_group/range_group.scss b/pgml-dashboard/src/components/inputs/range_group/range_group.scss
index 16436ce80..da68a1172 100644
--- a/pgml-dashboard/src/components/inputs/range_group/range_group.scss
+++ b/pgml-dashboard/src/components/inputs/range_group/range_group.scss
@@ -26,4 +26,73 @@ div[data-controller="inputs-range-group"] {
     .unit {
         width: 28px;
     }
+
+    .tick {
+        width: 5px;
+        height: 1.5rem;
+        background-color: $form-range-track-color;
+        border-radius: 1rem;
+
+        &.active-color {
+            background-color: #{$neon-shade-100} !important;
+        }
+    }
+
+    .input-offset {
+        width: 80%;
+        margin-left: 3%;
+        display: flex;
+    }
+
+    .tick-container {
+        position: relative;
+        top: -24px;
+        margin-bottom: -24px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 80%;
+        margin-left: 3%;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    .tick-unit {
+        overflow: visible;
+        width: 5px;
+    }
+
+    .tick-text {
+        color: #{$slate-tint-100};
+        &.active-color {
+            color: #{$slate-tint-700};
+        }
+    }
+
+    .line {
+        width: 100%; 
+        height: 5px; 
+        background: linear-gradient(to right, #{$neon-shade-100} 5%, #{$form-range-track-color} 5%);
+        position: absolute;
+        top: 11px;
+        border-radius: 1rem;
+    }
+
+    .grab-brightness {
+        filter: brightness(90%) !important;
+    }
+
+    .range-container {
+        position: relative; 
+
+        &:hover {
+            .line {
+                filter: brightness(110%);
+            }
+
+            .active-color {
+                filter: brightness(110%);
+            }
+        }
+    }
 }
diff --git a/pgml-dashboard/src/components/inputs/range_group/range_group_controller.js b/pgml-dashboard/src/components/inputs/range_group/range_group_controller.js
index b67d8e833..d16e868cb 100644
--- a/pgml-dashboard/src/components/inputs/range_group/range_group_controller.js
+++ b/pgml-dashboard/src/components/inputs/range_group/range_group_controller.js
@@ -5,7 +5,11 @@ export default class extends Controller {
   static targets = [
     "range",
     "text",
-    "group"
+    "group",
+    "line",
+    "tick",
+    "tickText",
+    "smScreenText"
   ]
 
   static values = {
@@ -15,11 +19,14 @@ export default class extends Controller {
 
   initialize() {
     this.textTarget.value = this.rangeTarget.value
+    this.updateTicks(this.rangeTarget.value)
+    this.updateTicksText(this.rangeTarget.value)
   }
 
   updateText(e) {
     this.textTarget.value = e.target.value
-    this.groupTarget.dispatchEvent(new Event("rangeInput"))
+    this.element.dataset.detail = e.target.value
+    this.groupTarget.dispatchEvent(new CustomEvent("rangeInput", { detail: e.target.value }))
   }
 
   updateRange(e) {
@@ -34,7 +41,8 @@ export default class extends Controller {
       this.rangeTarget.value = e.target.value
     }
 
-    this.groupTarget.dispatchEvent(new Event("rangeInput"))
+    this.element.dataset.detail = this.rangeTarget.value
+    this.groupTarget.dispatchEvent(new CustomEvent("rangeInput", { detail: this.rangeTarget.value }))
   }
 
   isNumeric(n) {
@@ -44,5 +52,65 @@ export default class extends Controller {
   reset() {
     this.rangeTarget.value = this.initialValue
     this.textTarget.value = this.initialValue
+    this.updateTicks(this.initialValue)
+    this.updateTicksText(this.initialValue)
+    this.element.dataset.detail = this.initialValue
+    this.groupTarget.dispatchEvent(new CustomEvent("rangeInput", { detail: this.rangeTarget.value }))
+  }
+
+  on_grab () {
+    if(!this.hasTickTarget || !this.hasLineTarget ) return;
+
+    this.lineTarget.classList.add("grab-brightness")
+    this.tickTargets.forEach((tick, index) => {
+      if( index < this.rangeTarget.value ) {
+        tick.classList.add("grab-brightness")
+      } else {
+        tick.classList.remove("grab-brightness")
+      }})
+  }
+
+  on_release() {
+    if(!this.hasTickTarget || !this.hasLineTarget ) return;
+
+    this.lineTarget.classList.remove("grab-brightness")
+    this.tickTargets.forEach((tick, index) => {
+      if( index < this.rangeTarget.value ) {
+        tick.classList.remove("grab-brightness")
+      }})
+  }
+
+  updateTicks(value) {
+    if(!this.hasTickTarget) return;
+
+    this.tickTargets.forEach((tick, index) => {
+      if( index < value ) {
+        tick.classList.add("active-color")
+      } else {
+        tick.classList.remove("active-color")
+      }
+    })
+  }
+
+  updateTicksText(value) {
+    if(this.hasTickTextTarget && this.hasSmScreenTextTarget) {
+      this.tickTextTargets.forEach((tickText, index) => {
+        if( index + 1 == value ) {
+          tickText.classList.add("active-color")
+          this.smScreenTextTargets[index].style.display = "flex"
+        } else {
+          tickText.classList.remove("active-color")
+          this.smScreenTextTargets[index].style.display = "none"
+        }
+      })
+    }
+  }
+
+  updateTicksEventWrapper(e) {
+    this.updateTicks(e.target.value)
+  }
+
+  updateTicksTextEventWrapper(e) {
+    this.updateTicksText(e.target.value)
   }
 }
diff --git a/pgml-dashboard/src/components/inputs/range_group/template.html b/pgml-dashboard/src/components/inputs/range_group/template.html
index 6f48debb5..f70e5cc8c 100644
--- a/pgml-dashboard/src/components/inputs/range_group/template.html
+++ b/pgml-dashboard/src/components/inputs/range_group/template.html
@@ -1,14 +1,17 @@
 <div data-controller="inputs-range-group" 
       data-inputs-range-group-bounds-value='{"min": <%- min%>, "max": <%- max%>}'
       data-inputs-range-group-initial-value="<%- initial_value.to_string() %>"
+      data-detail="<%- initial_value.to_string() %>"
       data-inputs-range-group-target="group"
       <%- group_target %>
       data-action="reset->inputs-range-group#reset">
   <div class="d-flex flex-column flex-md-row">
+    <% if show_title { %>
     <div class="flex-grow-1">
         <h6 class="h6"><%- title %></h6>
     </div>
-    <div>
+    <% } %>
+    <div <% if !show_value { %> style="display: none"<% } %>>
       <div class="input-group">
         <input class="text-input form-control text-end text-white fw-bold" maxlength="5" type="text" 
           data-inputs-range-group-target="text"
@@ -21,16 +24,43 @@ <h6 class="h6"><%- title %></h6>
     </div>
   </div>
 
-  <input class="form-range"
-    type="range"
-    name="<%- identifier %>"
-    min="<%- min %>"
-    max="<%- max %>"
-    step="<%- step %>"
-    value="<%- initial_value.to_string() %>"
-    data-action="inputs-range-group#updateText" 
-    data-inputs-range-group-target="range"
-    <%- range_target %>>
+  <div class="range-container">
+    <input class="form-range z-1 <% if options.len() > 0 { %> input-offset <% } %>" 
+      type="range"
+      name="<%- identifier %>"
+      min="<%- min %>"
+      max="<%- max %>"
+      step="<%- step %>"
+      value="<%- initial_value.to_string() %>"
+      data-action="inputs-range-group#updateText mousedown->inputs-range-group#on_grab mouseup->inputs-range-group#on_release inputs-range-group#updateTicksEventWrapper inputs-range-group#updateTicksTextEventWrapper" 
+      data-inputs-range-group-target="range"
+      <%- range_target %>>
+
+      <% if options.len() > 0 { %>
+      <div class="tick-container">
+        <% for item in &options { %>
+          <div class="tick-unit">
+            <div class="tick" data-inputs-range-group-target="tick"></div>
+
+            <div class="d-none d-lg-flex flex-column text-nowrap mt-2 tick-text" data-inputs-range-group-target="tickText">
+              <% for info in item { %>
+              <div class="legal-text fw-bold" ><%- info %></div>
+              <% } %>
+            </div>
+
+            <div class="d-block d-lg-none">
+              <div class="flex-column text-nowrap mt-2 tick-text" data-inputs-range-group-target="smScreenText">
+                <% for info in item { %>
+                <div class="legal-text fw-bold" ><%- info.replace("Memory", "") %></div>
+                <% } %>
+              </div>
+            </div>
+          </div>
+        <% } %>
+      </div>
+      <div class="line w-100" data-inputs-range-group-target="line"></div>
+      <% } %>
+    </div>
     
     <% if cost_rate.is_some() { %>
     <div class="w-100 d-flex justify-content-end">
diff --git a/pgml-dashboard/src/components/inputs/switch/switch.scss b/pgml-dashboard/src/components/inputs/switch/switch.scss
index 6641fceb8..ac8ffe4d9 100644
--- a/pgml-dashboard/src/components/inputs/switch/switch.scss
+++ b/pgml-dashboard/src/components/inputs/switch/switch.scss
@@ -11,6 +11,7 @@ div[data-controller="inputs-switch"] {
         border-radius: 5rem;
         text-align: center;
         display: flex;
+        justify-content: center;
         @extend .gap-2;
     }
 
diff --git a/pgml-dashboard/static/css/scss/abstracts/variables.scss b/pgml-dashboard/static/css/scss/abstracts/variables.scss
index fae66c3e7..943b80b54 100644
--- a/pgml-dashboard/static/css/scss/abstracts/variables.scss
+++ b/pgml-dashboard/static/css/scss/abstracts/variables.scss
@@ -174,6 +174,7 @@ $form-check-radio-checked-bg-image: none;
 
 $form-range-track-height: .4rem;
 $form-range-track-box-shadow: none;
+$form-range-track-color: #{$gray-600};
 $form-range-thumb-width: 1rem;
 $form-range-thumb-box-shadow: none;
 $form-range-thumb-transition: none;
diff --git a/pgml-dashboard/static/css/scss/base/_typography.scss b/pgml-dashboard/static/css/scss/base/_typography.scss
index 8ddfe763f..a1ffc9e23 100644
--- a/pgml-dashboard/static/css/scss/base/_typography.scss
+++ b/pgml-dashboard/static/css/scss/base/_typography.scss
@@ -1,19 +1,62 @@
 // all other displays are default bootstrap styling
 .display-2 {
-    font-weight: 700;
+    font-weight: $font-weight-bold;
     font-size: 4rem;
     line-height: 80px;
 }
 
-// TODO: Go through html and ensure headers use appropriate header class, header and class do not need to match.
-// .h1 {font-weight: 700; font-size: 64px; line-height: 72px;}
-// .h2 {font-weight: 700; font-size: 48px; line-height: 54px;}
-// .h3 {font-weight: 700; font-size: 40px; line-height: 46px;}
-// .h4 {font-weight: 700; font-size: 32px; line-height: 40px;}
-// .h5 {font-weight: 700; font-size: 28px; line-height: 34px;}
-// .h6 {font-weight: 700; font-size: 24px; line-height: 30px;}
+.h1-big {
+    font-weight: $font-weight-bold; font-size: 80px; line-height: 84px;
+    @include media-breakpoint-down(md) {
+        font-size: 48px; line-height: 52px;
+    } 
+}
+h1, .h1 { 
+    font-weight: $font-weight-bold; font-size: 64px; line-height: 72px;
+    @include media-breakpoint-down(md) {
+        font-size: 44px; line-height: 48px;
+    }
+}
+h2, .h2 {
+    font-weight: $font-weight-bold; font-size: 48px; line-height: 54px;
+    @include media-breakpoint-down(md) {
+        font-size: 40px; line-height: 44px;
+    }
+}
+h3, .h3 {
+    font-weight: $font-weight-bold; font-size: 40px; line-height: 46px;
+    @include media-breakpoint-down(md) {
+        font-size: 32px; line-height: 36px;
+    }
+}
+h4, .h4 {
+    font-weight: $font-weight-bold; font-size: 32px; line-height: 40px;
+    @include media-breakpoint-down(md) {
+        font-size: 28px; line-height: 32px;
+    }
+}
+h5, .h5 {
+    font-weight: $font-weight-bold; font-size: 28px; line-height: 34px;
+    @include media-breakpoint-down(md) {
+        font-size: 24px; line-height: 28px;
+    }
+}
+h6, .h6 {
+    font-weight: $font-weight-bold; font-size: 24px; line-height: 30px;
+    @include media-breakpoint-down(md) {
+        font-size: 20px; line-height: 26px;
+    }
+}
+
+.eyebrow {
+    font-weight: $font-weight-bold; font-size: 18px; line-height: 24px;
+    @include media-breakpoint-down(md) {
+        font-size: 16px; line-height: 22px;
+    }
+}
 
 .subcopy-text {
+    font-family: Inter;
     font-size: 18px;
     line-height: 22px;
 }
@@ -22,6 +65,7 @@
     line-height: 20px;
 }
 .legal-text {
+    font-family: Inter;
     font-size: 12px;
     line-height: 16px;
 }
diff --git a/pgml-dashboard/static/css/scss/components/_forms.scss b/pgml-dashboard/static/css/scss/components/_forms.scss
index 5b211ca7a..cc11d237c 100644
--- a/pgml-dashboard/static/css/scss/components/_forms.scss
+++ b/pgml-dashboard/static/css/scss/components/_forms.scss
@@ -79,11 +79,11 @@
     & {
         color: #{$neon-tint-100};
         --thumb-height: 1.125em;
-        --track-height: 0.125em;
+        --track-height: 4px;
         --brightness-hover: 110%;
         --brightness-down: 90%;
         --clip-edges: 0.125em;
-        --track-color: #{$gray-600};
+        --track-color: #{$form-range-track-color};
         --bg-color: transparent;
     }
 
diff --git a/pgml-dashboard/static/js/playground.js b/pgml-dashboard/static/js/playground.js
index 0fbf32902..7da1aa83e 100644
--- a/pgml-dashboard/static/js/playground.js
+++ b/pgml-dashboard/static/js/playground.js
@@ -1,13 +1,17 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static targets = ["test", "switch"]
+  static targets = ["test", "switch", "rangeOptions"]
 
   initialize() {
     this.errorH3 = new CustomEvent("error", { detail: "message passed through event h3" })
     this.clearH3 = new Event("clear")
     this.errorH2 = new CustomEvent("error", { detail: "message passed through event h2" })
     this.clearH2 = new Event("clear")
+
+    this.rangeOptionsTarget.addEventListener("rangeInput", (e) => {
+      console.log("rangeOptionsTarget input event value = ", e.detail)
+    })
   }
 
 
@@ -39,4 +43,12 @@ export default class extends Controller {
     this.switchTarget.dispatchEvent(new Event("reset"))
   }
 
+  resetOptionsRange() {
+    this.rangeOptionsTarget.dispatchEvent(new Event("reset"))
+  }
+
+  logOptionsRange() {
+    console.log("rangeOptionsTarget current value = ", this.rangeOptionsTarget.dataset.detail)
+  }
+
 }
diff --git a/pgml-dashboard/templates/content/playground.html b/pgml-dashboard/templates/content/playground.html
index a6e641139..5dc8dcebf 100644
--- a/pgml-dashboard/templates/content/playground.html
+++ b/pgml-dashboard/templates/content/playground.html
@@ -123,6 +123,59 @@ <h3 class="h3">Inputs</h3>
         .units("GB")
         .cost_rate(0.144) %>
       </div>
+
+      <div class="my-5">
+        <%+ RangeGroup::new("range with ticks")
+            .initial_value(2.0)
+            .group_target(
+              StimulusTarget::new()
+                .controller("playground")
+                .name("rangeOptions")
+            )
+            .options(
+              vec!(
+                vec!(
+                  "4 CPU".to_owned(),
+                  "16 GB Memory".to_owned(),
+                  "24 GB GPU Memory".to_owned(),
+                ), 
+                vec!(
+                  "8 CPU".to_owned(),
+                  "32 GB Memory".to_owned(),
+                  "24 GB GPU Memory".to_owned(),
+                ),
+                vec!(
+                  "16 CPU".to_owned(),
+                  "64 GB Memory".to_owned(),
+                  "24 GB GPU Memory".to_owned(),
+                ),
+                vec!(
+                  "32 CPU".to_owned(),
+                  "128 GB Memory".to_owned(),
+                  "24 GB GPU Memory".to_owned(),
+                ),
+                vec!(
+                  "32 CPU".to_owned(),
+                  "128 GB Memory".to_owned(),
+                  "24 GB GPU Memory".to_owned(),
+                ),
+                vec!(
+                  "64 CPU".to_owned(),
+                  "256 GB Memory".to_owned(),
+                  "24 GB GPU Memory".to_owned(),
+                ),
+                vec!(
+                  "48 CPU".to_owned(),
+                  "192 GB Memory".to_owned(),
+                  "96 GB GPU Memory".to_owned(),
+                ),
+              )
+            )
+            .hide_title()
+            .hide_value() %>
+      </div>
+      <button data-action="playground#resetOptionsRange">Reset Options Input</button>
+      <button data-action="playground#logOptionsRange">log value</button>
     </div>
 
     <div class="d-flex flex-row justify-content-between">

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/postgresml/postgresml/pull/1094.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/postgresml/postgresml/pull/1094.diff" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/postgresml/postgresml/pull/1094.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/postgresml/postgresml/pull/1094.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>