diff --git a/pgml-dashboard/src/components/cards/marketing/slider/template.html b/pgml-dashboard/src/components/cards/marketing/slider/template.html
index b9609870c..ed1d4c7d9 100644
--- a/pgml-dashboard/src/components/cards/marketing/slider/template.html
+++ b/pgml-dashboard/src/components/cards/marketing/slider/template.html
@@ -10,7 +10,7 @@ <h5 class="title"><%- title %></h5>
         <ul class="list-group gap-3">
           <% for bullet in bullets {%>
             <div class="d-flex flex-row align-items-center gap-2">
-              <%+ Checkmark::new().active() %><div class="d-flex align-items-center gap-2"><%- bullet %></div>
+              <%+ Checkmark::new() %><div class="d-flex align-items-center gap-2"><%- bullet %></div>
             </div>
           <% } %>
         </ul>
diff --git a/pgml-dashboard/src/components/cards/newsletter_subscribe/newsletter_subscribe.scss b/pgml-dashboard/src/components/cards/newsletter_subscribe/newsletter_subscribe.scss
index 39dc2d597..d64726bce 100644
--- a/pgml-dashboard/src/components/cards/newsletter_subscribe/newsletter_subscribe.scss
+++ b/pgml-dashboard/src/components/cards/newsletter_subscribe/newsletter_subscribe.scss
@@ -1,15 +1,4 @@
 div[data-controller="cards-newsletter-subscribe"] {
-    .newsletter-subscribe-container {
-        background-position: center;
-        background-size: cover;
-        background-repeat: no-repeat;
-        @include media-breakpoint-up(md) {
-            background-image: url("/dashboard/static/images/newsletter_subscribe_background_desktop.png");
-        }
-        background-image: url("/dashboard/static/images/newsletter_subscribe_background_mobile.png");
-        background-color: #{$pink};
-    }
-
     .message {
         display: none;
 
diff --git a/pgml-dashboard/src/components/cards/newsletter_subscribe/template.html b/pgml-dashboard/src/components/cards/newsletter_subscribe/template.html
index 5d4e844cd..4851a91a4 100644
--- a/pgml-dashboard/src/components/cards/newsletter_subscribe/template.html
+++ b/pgml-dashboard/src/components/cards/newsletter_subscribe/template.html
@@ -32,7 +32,7 @@
 
 <turbo-frame id="newsletter-subscribe-frame">
   <div data-controller="cards-newsletter-subscribe">
-    <div class="d-flex flex-column flex-lg-row gap-5 justify-content-between align-items-center newsletter-subscribe-container py-5 ps-xl-5 px-3 rounded-4">
+    <div class="d-flex flex-column flex-lg-row gap-5 justify-content-between align-items-center newsletter-subscribe-container psychedelic-pink-bg py-5 ps-xl-5 px-3 rounded-4">
       <div class="d-flex flex-column gap-4 text-center text-md-start w-100">
         <h3>Subscribe to our newsletter.<br> (It’s better than you think)</h3>
         <p>No spam. No sales pitches. Just product updates. Keep up with all our articles and news. Join our newsletter and stay up to date!</p>
diff --git a/pgml-dashboard/src/components/icons/checkmark/checkmark.scss b/pgml-dashboard/src/components/icons/checkmark/checkmark.scss
index 98e0247a2..23396131a 100644
--- a/pgml-dashboard/src/components/icons/checkmark/checkmark.scss
+++ b/pgml-dashboard/src/components/icons/checkmark/checkmark.scss
@@ -1,5 +1,5 @@
 div[data-controller="icons-checkmark"] {
-  .active {
+  .blue {
     .first {
       stop-color: #3EDCFF;
     }
@@ -8,7 +8,25 @@ div[data-controller="icons-checkmark"] {
     }
   }
 
-  .inactive {
+  .green {
+    .first {
+      stop-color: #44FFDD;
+    }
+    .second {
+      stop-color: #05C168;
+    }
+  }
+
+  .orange {
+    .first {
+      stop-color: #FFB444;
+    }
+    .second {
+      stop-color: #FF6644;
+    }
+  }
+
+  .white {
     .first {
       stop-color: #{$gray-100};
     }
@@ -17,6 +35,15 @@ div[data-controller="icons-checkmark"] {
     }
   }
 
+  .purple {
+    .first {
+      stop-color: #5337FF;
+    }
+    .second {
+      stop-color: #A175FF;
+    }
+  }
+
   .disabled {
     .first {
       stop-color: #{$gray-500};
diff --git a/pgml-dashboard/src/components/icons/checkmark/mod.rs b/pgml-dashboard/src/components/icons/checkmark/mod.rs
index e0e119b27..f55087087 100644
--- a/pgml-dashboard/src/components/icons/checkmark/mod.rs
+++ b/pgml-dashboard/src/components/icons/checkmark/mod.rs
@@ -4,30 +4,27 @@ use sailfish::TemplateOnce;
 #[derive(TemplateOnce, Default)]
 #[template(path = "icons/checkmark/template.html")]
 pub struct Checkmark {
-    state: String,
+    color: String,
     twitter: bool,
+    disabled: bool,
 }
 
 impl Checkmark {
     pub fn new() -> Checkmark {
         Checkmark {
-            state: String::from("inactive"),
+            color: String::from("blue"),
             twitter: false,
+            disabled: false,
         }
     }
 
-    pub fn active(mut self) -> Self {
-        self.state = String::from("active");
-        self
-    }
-
-    pub fn inactive(mut self) -> Self {
-        self.state = String::from("inactive");
+    pub fn color(mut self, color: &str) -> Self {
+        self.color = String::from(color);
         self
     }
 
     pub fn disabled(mut self) -> Self {
-        self.state = String::from("disabled");
+        self.disabled = true;
         self
     }
 
diff --git a/pgml-dashboard/src/components/icons/checkmark/template.html b/pgml-dashboard/src/components/icons/checkmark/template.html
index e5b6f4d97..0e83cdd22 100644
--- a/pgml-dashboard/src/components/icons/checkmark/template.html
+++ b/pgml-dashboard/src/components/icons/checkmark/template.html
@@ -2,6 +2,12 @@
   use rand::Rng;
   let mut rng = rand::thread_rng();
   let id = rng.gen::<u16>();
+
+  let color_class = if disabled {
+    "disabled"
+  } else {
+    &color
+  };
 %>
 <div data-controller="icons-checkmark" class="d-flex">
   <% if twitter {%>
@@ -10,7 +16,7 @@
   </svg>
   <% } else {%>
 
-  <div class="d-flex <%- state %>">
+  <div class="d-flex <%- color_class %>">
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
       <path d="M6.80486 9.80731L4.84856 7.85103C4.73197 7.73443 4.58542 7.67478 4.4089 7.67208C4.23238 7.66937 4.08312 7.72902 3.96113 7.85103C3.83913 7.97302 3.77814 8.12093 3.77814 8.29474C3.77814 8.46855 3.83913 8.61645 3.96113 8.73844L6.27206 11.0494C6.42428 11.2016 6.60188 11.2777 6.80486 11.2777C7.00782 11.2777 7.18541 11.2016 7.33764 11.0494L12.0227 6.36435C12.1393 6.24776 12.1989 6.10121 12.2016 5.92469C12.2043 5.74817 12.1447 5.59891 12.0227 5.47692C11.9007 5.35493 11.7528 5.29393 11.579 5.29393C11.4051 5.29393 11.2572 5.35493 11.1353 5.47692L6.80486 9.80731ZM8.00141 16C6.89494 16 5.85491 15.79 4.88132 15.3701C3.90772 14.9502 3.06082 14.3803 2.34064 13.6604C1.62044 12.9405 1.05028 12.094 0.63017 11.1208C0.210057 10.1477 0 9.10788 0 8.00141C0 6.89494 0.209966 5.85491 0.629896 4.88132C1.04983 3.90772 1.61972 3.06082 2.33958 2.34064C3.05946 1.62044 3.90598 1.05028 4.87915 0.630171C5.8523 0.210058 6.89212 0 7.99859 0C9.10506 0 10.1451 0.209966 11.1187 0.629897C12.0923 1.04983 12.9392 1.61972 13.6594 2.33959C14.3796 3.05946 14.9497 3.90598 15.3698 4.87915C15.7899 5.8523 16 6.89212 16 7.99859C16 9.10506 15.79 10.1451 15.3701 11.1187C14.9502 12.0923 14.3803 12.9392 13.6604 13.6594C12.9405 14.3796 12.094 14.9497 11.1208 15.3698C10.1477 15.7899 9.10788 16 8.00141 16Z" fill="url(#paint0_linear_1258_466_<%- id%>)"/>
       <defs >
diff --git a/pgml-dashboard/src/components/inputs/mod.rs b/pgml-dashboard/src/components/inputs/mod.rs
index 047cff00b..20bdb9791 100644
--- a/pgml-dashboard/src/components/inputs/mod.rs
+++ b/pgml-dashboard/src/components/inputs/mod.rs
@@ -12,10 +12,18 @@ pub mod labels;
 pub mod radio;
 pub use radio::Radio;
 
+// src/components/inputs/range
+pub mod range;
+pub use range::Range;
+
 // src/components/inputs/range_group
 pub mod range_group;
 pub use range_group::RangeGroup;
 
+// src/components/inputs/range_group_pricing_calc
+pub mod range_group_pricing_calc;
+pub use range_group_pricing_calc::RangeGroupPricingCalc;
+
 // src/components/inputs/range_group_v_2
 pub mod range_group_v_2;
 pub use range_group_v_2::RangeGroupV2;
diff --git a/pgml-dashboard/src/components/inputs/range/mod.rs b/pgml-dashboard/src/components/inputs/range/mod.rs
new file mode 100644
index 000000000..551117fe1
--- /dev/null
+++ b/pgml-dashboard/src/components/inputs/range/mod.rs
@@ -0,0 +1,85 @@
+use crate::components::stimulus::StimulusTarget as Target;
+use pgml_components::component;
+use sailfish::TemplateOnce;
+
+#[derive(Default)]
+pub enum InterpolationType {
+    #[default]
+    Linear,
+    Exponential,
+}
+
+impl ToString for InterpolationType {
+    fn to_string(&self) -> String {
+        match self {
+            InterpolationType::Linear => String::from("linear"),
+            InterpolationType::Exponential => String::from("exponential"),
+        }
+    }
+}
+
+impl From<&str> for InterpolationType {
+    fn from(s: &str) -> Self {
+        match s {
+            "linear" => InterpolationType::Linear,
+            "exponential" => InterpolationType::Exponential,
+            _ => InterpolationType::Linear,
+        }
+    }
+}
+
+#[derive(TemplateOnce, Default)]
+#[template(path = "inputs/range/template.html")]
+pub struct Range {
+    color: String,
+    min: i32,
+    max: i32,
+    interpolation_type: InterpolationType,
+    target: Target,
+    initial_value: i32,
+}
+
+impl Range {
+    pub fn new() -> Range {
+        Range {
+            color: String::from("slate"),
+            min: 1000,
+            max: 1000000,
+            interpolation_type: InterpolationType::Linear,
+            target: Target::new(),
+            initial_value: 0,
+        }
+    }
+
+    pub fn color(mut self, color: &str) -> Self {
+        self.color = color.to_string();
+        self
+    }
+
+    pub fn min(mut self, min: i32) -> Self {
+        self.min = min;
+        self
+    }
+
+    pub fn max(mut self, max: i32) -> Self {
+        self.max = max;
+        self
+    }
+
+    pub fn interpolation_type(mut self, interpolation_type: &str) -> Self {
+        self.interpolation_type = InterpolationType::from(interpolation_type);
+        self
+    }
+
+    pub fn target(mut self, target: Target) -> Self {
+        self.target = target;
+        self
+    }
+
+    pub fn initial_value(mut self, initial_value: i32) -> Self {
+        self.initial_value = initial_value;
+        self
+    }
+}
+
+component!(Range);
diff --git a/pgml-dashboard/src/components/inputs/range/range.scss b/pgml-dashboard/src/components/inputs/range/range.scss
new file mode 100644
index 000000000..51d316c62
--- /dev/null
+++ b/pgml-dashboard/src/components/inputs/range/range.scss
@@ -0,0 +1,56 @@
+div[data-controller="inputs-range"] {
+  // This allows line overhang for rounding range edges.
+  .overlay-offset {
+    width: calc(100% - 4px);
+    margin-left: 2px;
+  }
+
+  .line {
+    width: 100%; 
+    height: 5px; 
+    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%);
+          }
+      }
+  }
+
+  // Quick resize fix. This may become a global change later.
+  .input-group {
+      padding: 8px; 
+  }
+
+  @mixin color_dependent($color) {
+    .line {
+      background: linear-gradient(to right, #{$color} 5%, #{$form-range-track-color} 5%);
+    }
+
+    .form-range {
+      & {
+        color: #{$color};
+      }
+    }
+  }
+  .slate {
+    @include color_dependent($slate-shade-100);
+  }
+  .neon {
+    @include color_dependent($neon-shade-100);
+  }
+}
diff --git a/pgml-dashboard/src/components/inputs/range/range_controller.js b/pgml-dashboard/src/components/inputs/range/range_controller.js
new file mode 100644
index 000000000..6178e6bf1
--- /dev/null
+++ b/pgml-dashboard/src/components/inputs/range/range_controller.js
@@ -0,0 +1,91 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["range", "line"];
+
+  static values = {
+    interpolationType: String,
+    min: Number,
+    max: Number,
+    initial: Number,
+  };
+
+  static outlets = [];
+
+  initialize() {}
+
+  connect() {
+    // console.log("range connected", this.initialValue)
+    this.rangeTarget.value =
+      this.interpolationTypeValue === "exponential"
+        ? this.exponentialInterpolationSolveX(this.initialValue)
+        : this.linearInterpolationSolveX(this.initialValue);
+  }
+
+  onGrab() {
+    if (this.hasLineTarget) {
+      this.lineTarget.classList.add("grab-brightness");
+    }
+  }
+
+  onRelease() {
+    if (this.hasLineTarget) {
+      this.lineTarget.classList.remove("grab-brightness");
+    }
+  }
+
+  updateSlider(e) {
+    this.rangeTarget.value =
+      this.interpolationTypeValue === "exponential"
+        ? this.exponentialInterpolationSolveX(e.detail)
+        : this.linearInterpolationSolveX(e.detail);
+  }
+
+  sliderMoved() {
+    this.dispatch("sliderMoved", {
+      detail:
+        this.interpolationTypeValue === "exponential"
+          ? this.exponentialInterpolation(this.rangeTarget.value)
+          : this.linearInterpolation(this.rangeTarget.value),
+    });
+  }
+
+  exponentialInterpolation(value) {
+    if (value < 1) {
+      return 0;
+    }
+
+    let minValue = this.minValue > 1 ? this.minValue : 1;
+
+    let pow = value / 100;
+    let out = minValue * Math.pow(this.maxValue / minValue, pow);
+    return parseInt(Number(out.toPrecision(3)));
+  }
+
+  exponentialInterpolationSolveX(value) {
+    if (value < 1) {
+      return this.linearInterpolationSolveX(value);
+    }
+
+    let minValue = this.minValue > 1 ? this.minValue : 1;
+
+    let numerator = Math.log(value / minValue);
+    let denominator = Math.log(this.maxValue / minValue);
+    let out = (numerator / denominator) * 100;
+    // console.log(numerator, denominator, out, Number(out.toPrecision(3)))
+    return parseInt(Number(out.toPrecision(3)));
+  }
+
+  linearInterpolation(value) {
+    let out = (this.maxValue - this.minValue) * (value / 100) + this.minValue;
+    return parseInt(Number(out.toPrecision(3)));
+  }
+
+  linearInterpolationSolveX(value) {
+    // console.log("linear solve x ", value, this.minValue, this.maxValue)
+    let out = ((value - this.minValue) / (this.maxValue - this.minValue)) * 100;
+    return parseInt(Number(out.toPrecision(3)));
+  }
+
+  disconnect() {}
+}
diff --git a/pgml-dashboard/src/components/inputs/range/template.html b/pgml-dashboard/src/components/inputs/range/template.html
new file mode 100644
index 000000000..3cc9707cc
--- /dev/null
+++ b/pgml-dashboard/src/components/inputs/range/template.html
@@ -0,0 +1,20 @@
+<div 
+  data-controller="inputs-range"
+  data-action="updateSlider->inputs-range#updateSlider"
+  data-inputs-range-interpolation-type-value="<%- interpolation_type.to_string() %>"
+  data-inputs-range-min-value="<%- min %>"
+  data-inputs-range-max-value="<%- max %>"
+  data-inputs-range-initial-value="<%- initial_value %>"
+  <%- target %>>
+  <div class="range-container <%- color %>">
+    <input class="form-range z-1 overlay-offset" 
+      type="range"
+      min="0"
+      max="100"
+      step="0.1"
+      data-action="inputs-range#sliderMoved mousedown->inputs-range#onGrab mouseup->inputs-range#onRelease" 
+      data-inputs-range-target="range">
+  
+    <div class="line w-100" data-inputs-range-target="line"></div>
+  </div>
+</div>
diff --git a/pgml-dashboard/src/components/inputs/range_group_pricing_calc/mod.rs b/pgml-dashboard/src/components/inputs/range_group_pricing_calc/mod.rs
new file mode 100644
index 000000000..9cb2dccc3
--- /dev/null
+++ b/pgml-dashboard/src/components/inputs/range_group_pricing_calc/mod.rs
@@ -0,0 +1,74 @@
+use crate::components::inputs::range::InterpolationType;
+use crate::components::stimulus::StimulusTarget;
+use pgml_components::component;
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default)]
+#[template(path = "inputs/range_group_pricing_calc/template.html")]
+pub struct RangeGroupPricingCalc {
+    interpolation_type: InterpolationType,
+    include_slider: bool,
+    min: i32,
+    max: i32,
+    target: StimulusTarget,
+    label: String,
+    name: String,
+    initial_value: i32,
+}
+
+impl RangeGroupPricingCalc {
+    pub fn new() -> RangeGroupPricingCalc {
+        RangeGroupPricingCalc {
+            interpolation_type: InterpolationType::Linear,
+            include_slider: true,
+            min: 0,
+            max: 1000000,
+            target: StimulusTarget::new(),
+            label: String::from(""),
+            name: String::from(""),
+            initial_value: 0,
+        }
+    }
+
+    pub fn interpolation_type(mut self, interpolation_type: &str) -> Self {
+        self.interpolation_type = InterpolationType::from(interpolation_type);
+        self
+    }
+
+    pub fn include_slider(mut self, include_slider: bool) -> Self {
+        self.include_slider = include_slider;
+        self
+    }
+
+    pub fn min(mut self, min: i32) -> Self {
+        self.min = min;
+        self
+    }
+
+    pub fn max(mut self, max: i32) -> Self {
+        self.max = max;
+        self
+    }
+
+    pub fn target(mut self, target: StimulusTarget) -> Self {
+        self.target = target;
+        self
+    }
+
+    pub fn label(mut self, label: &str) -> Self {
+        self.label = label.to_string();
+        self
+    }
+
+    pub fn name(mut self, name: &str) -> Self {
+        self.name = name.to_string();
+        self
+    }
+
+    pub fn initial_value(mut self, initial_value: i32) -> Self {
+        self.initial_value = initial_value;
+        self
+    }
+}
+
+component!(RangeGroupPricingCalc);
diff --git a/pgml-dashboard/src/components/inputs/range_group_pricing_calc/range_group_pricing_calc.scss b/pgml-dashboard/src/components/inputs/range_group_pricing_calc/range_group_pricing_calc.scss
new file mode 100644
index 000000000..efcb9d6f0
--- /dev/null
+++ b/pgml-dashboard/src/components/inputs/range_group_pricing_calc/range_group_pricing_calc.scss
@@ -0,0 +1,14 @@
+div[data-controller="inputs-range-group-pricing-calc"] {
+  input[type="text"]:focus {
+      text-decoration: underline;
+      text-underline-offset: 5px;
+    }
+
+  .error {
+    border: 2px solid #{$error};
+  }
+
+  .unit {
+    font-size: 14px;
+  }
+}
diff --git a/pgml-dashboard/src/components/inputs/range_group_pricing_calc/range_group_pricing_calc_controller.js b/pgml-dashboard/src/components/inputs/range_group_pricing_calc/range_group_pricing_calc_controller.js
new file mode 100644
index 000000000..ee212dedb
--- /dev/null
+++ b/pgml-dashboard/src/components/inputs/range_group_pricing_calc/range_group_pricing_calc_controller.js
@@ -0,0 +1,80 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["textInput", "range"];
+  static outlets = [];
+  static values = {
+    min: Number,
+    max: Number,
+  };
+
+  connect() {
+    this.updateDatasetValue();
+
+    // when connected, update the slider and trigger the inputUpdated event
+    this.textUpdated();
+  }
+
+  updateText(e) {
+    if (e.detail >= this.minValue && e.detail <= this.maxValue) {
+      this.removeErrorState();
+      this.textInputTarget.value = e.detail;
+      this.updateDatasetValue();
+      this.inputUpdated();
+    } else {
+      this.applyErrorState();
+    }
+  }
+
+  textUpdated() {
+    let value = Number(this.textInputTarget.value);
+    if (!value) {
+      value = this.minValue;
+      this.textInputTarget.value = value;
+    }
+
+    if (value > this.maxValue || value < this.minValue) {
+      this.applyErrorState();
+      value = value > this.maxValue ? this.maxValue : this.minValue;
+      value = value < this.minValue ? this.minValue : value;
+      this.dispatchToRange(value);
+    } else {
+      this.removeErrorState();
+      this.dispatchToRange(value);
+      this.updateDatasetValue();
+      this.inputUpdated();
+    }
+  }
+
+  // Tell anyone listening that the input has been updated
+  inputUpdated() {
+    this.dispatch("transmitValue", {});
+  }
+
+  // Attaches input value to the controller component
+  updateDatasetValue() {
+    this.element.dataset.value = this.textInputTarget.value;
+  }
+
+  applyErrorState() {
+    this.element
+      .getElementsByClassName("input-group")[0]
+      .classList.add("error");
+  }
+
+  removeErrorState() {
+    this.element
+      .getElementsByClassName("input-group")[0]
+      .classList.remove("error");
+  }
+
+  dispatchToRange(value) {
+    if (this.hasRangeTarget) {
+      this.rangeTarget.dispatchEvent(
+        new CustomEvent("updateSlider", { detail: value }),
+      );
+    }
+  }
+
+  disconnect() {}
+}
diff --git a/pgml-dashboard/src/components/inputs/range_group_pricing_calc/template.html b/pgml-dashboard/src/components/inputs/range_group_pricing_calc/template.html
new file mode 100644
index 000000000..1531a6012
--- /dev/null
+++ b/pgml-dashboard/src/components/inputs/range_group_pricing_calc/template.html
@@ -0,0 +1,34 @@
+<% 
+  use crate::components::inputs::range::Range;
+  use crate::components::stimulus::stimulus_target::StimulusTarget;
+
+  let range_target = StimulusTarget::new().controller("inputs-range-group-pricing-calc").name("range");
+%>
+<!-- range group pricing calc -->
+<div 
+  data-controller="inputs-range-group-pricing-calc" 
+  data-action="inputs-range:sliderMoved->inputs-range-group-pricing-calc#updateText"
+  data-inputs-range-group-pricing-calc-min-value="<%- min %>"
+  data-inputs-range-group-pricing-calc-max-value="<%- max %>"
+  data-value="0"
+  <%- target %>>
+  <div class="input-group flex-column">
+    <div class="d-flex flex-row">
+      <input class="text-input form-control w-100"
+        name="<%- name %>"
+        type="text"
+        data-inputs-range-group-pricing-calc-target="textInput"
+        data-action="focusout->inputs-range-group-pricing-calc#textUpdated"
+        value="<%= initial_value.clone() %>">
+      <div class="text-nowrap text-white-300 text-uppercase eyebrow-text unit"><%- label %></div>
+    </div>
+    <% if include_slider {%>
+    <%+ Range::new()
+        .interpolation_type(&interpolation_type.to_string())
+        .target(range_target)
+        .min(min)
+        .max(max)
+        .initial_value(initial_value) %>
+    <% } %>
+  </div>
+</div>
diff --git a/pgml-dashboard/src/components/left_nav_menu/left-nav-menu.js b/pgml-dashboard/src/components/left_nav_menu/left-nav-menu.js
index 51b15aa08..d79483f34 100644
--- a/pgml-dashboard/src/components/left_nav_menu/left-nav-menu.js
+++ b/pgml-dashboard/src/components/left_nav_menu/left-nav-menu.js
@@ -21,7 +21,7 @@ export default class extends Controller {
     this.removeAllActive();
 
     let tab = this.findTab();
-    if( tab ) {
+    if (tab) {
       tab.classList.add("active");
     }
   }
@@ -34,20 +34,20 @@ export default class extends Controller {
   }
 
   // Recursive function to find the tab that matches the current window
-  findTab(level=1, tag="a[href='/']") {
-    let element = this.element.querySelectorAll(tag);    
-    if( element.length == 1 ) {
+  findTab(level = 1, tag = "a[href='/']") {
+    let element = this.element.querySelectorAll(tag);
+    if (element.length == 1) {
       return element[0];
     } else {
       let path_vec = window.location.pathname.split("/");
-      if( level > path_vec.length ) {
-        return; 
+      if (level > path_vec.length) {
+        return;
       }
-  
+
       let path = path_vec.slice(0, level).join("/");
       let tag = 'a[href="' + path + '"]';
 
-      return this.findTab(level + 1, tag)
+      return this.findTab(level + 1, tag);
     }
   }
 
diff --git a/pgml-dashboard/src/components/lists/item/mod.rs b/pgml-dashboard/src/components/lists/item/mod.rs
index 0ae5d1b73..c9364949b 100644
--- a/pgml-dashboard/src/components/lists/item/mod.rs
+++ b/pgml-dashboard/src/components/lists/item/mod.rs
@@ -1,4 +1,4 @@
-use pgml_components::component;
+use pgml_components::{component, Component};
 use sailfish::TemplateOnce;
 use std::fmt;
 
@@ -29,6 +29,7 @@ impl fmt::Display for Color {
 pub struct Item {
     value: String,
     color: Color,
+    alt_item_indicator: Option<Component>,
 }
 
 impl Item {
@@ -36,6 +37,7 @@ impl Item {
         Item {
             value: String::from("Your list item"),
             color: Color::Green,
+            alt_item_indicator: None,
         }
     }
 
@@ -48,6 +50,11 @@ impl Item {
         self.color = color;
         self
     }
+
+    pub fn alt_item_indicator(mut self, indicator: Component) -> Item {
+        self.alt_item_indicator = Some(indicator);
+        self
+    }
 }
 
 component!(Item);
diff --git a/pgml-dashboard/src/components/lists/item/template.html b/pgml-dashboard/src/components/lists/item/template.html
index d4c85e98d..20c786abd 100644
--- a/pgml-dashboard/src/components/lists/item/template.html
+++ b/pgml-dashboard/src/components/lists/item/template.html
@@ -1,6 +1,12 @@
 <div class="list-group-item d-flex align-items-center gap-2">
+  <% if alt_item_indicator.is_some() {%>
+    <div class="align-self-start" style="padding-top: 3px;">
+      <%+ alt_item_indicator.unwrap() %>
+    </div>
+  <% } else { %>
   <span class="material-symbols-outlined text-gradient-<%- color.to_string() %> align-self-start">
     check
-    </span>
+  </span>
+  <% } %>
   <%- value %>
 </div>
diff --git a/pgml-dashboard/src/components/sections/footers/marketing_footer/template.html b/pgml-dashboard/src/components/sections/footers/marketing_footer/template.html
index 73210453f..9b3615e39 100644
--- a/pgml-dashboard/src/components/sections/footers/marketing_footer/template.html
+++ b/pgml-dashboard/src/components/sections/footers/marketing_footer/template.html
@@ -89,5 +89,9 @@ <h5 class="h5 d-flex align-items-center gap-2 mb-5">
     <div class="container">
       <p class="rights d-flex justify-content-center justify-content-sm-start">PostgresML 2023 Ⓒ All rights reserved.</p>
     </div>
+
+    <div class="container">
+      <p class="legal-text text-white-300"><span class="mb-1">*</span>Complete your profile to get $100 in free usage credits towards your first AI engine. See Terms of Service.</p>
+    </div>
   </div>
 </div>
diff --git a/pgml-dashboard/src/components/star/star.scss b/pgml-dashboard/src/components/star/star.scss
index 03f11bbc4..f35845324 100644
--- a/pgml-dashboard/src/components/star/star.scss
+++ b/pgml-dashboard/src/components/star/star.scss
@@ -5,7 +5,7 @@ div[data-controller="star"] {
     left: 0;
     transform: translate(-50%, -50%);
 
-    #star-wrapper {
+    .star-wrapper {
         position: relative;
         width: 120px;
         height: 120px;
@@ -22,7 +22,7 @@ div[data-controller="star"] {
         animation:spin 35s linear infinite;
     }
 
-    #star-content {
+    .star-content {
         position: absolute;
         top: 0;
         left: 0;
diff --git a/pgml-dashboard/src/components/star/template.html b/pgml-dashboard/src/components/star/template.html
index 18850bbc2..d6c69c51e 100644
--- a/pgml-dashboard/src/components/star/template.html
+++ b/pgml-dashboard/src/components/star/template.html
@@ -1,6 +1,6 @@
 <div data-controller="star" id='<%= id.unwrap_or("".to_string()) %>'>
-  <div id="star-wrapper">
+  <div class="star-wrapper">
     <%- svg %>
-    <div id="star-content"><%- content %></div>
+    <div class="star-content"><%- content %></div>
   </div>
 </div>
diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss
index 0ac9e1dab..126972b89 100644
--- a/pgml-dashboard/static/css/modules.scss
+++ b/pgml-dashboard/static/css/modules.scss
@@ -23,7 +23,9 @@
 @import "../../src/components/inputs/checkbox/checkbox.scss";
 @import "../../src/components/inputs/labels/with_tooltip/with_tooltip.scss";
 @import "../../src/components/inputs/radio/radio.scss";
+@import "../../src/components/inputs/range/range.scss";
 @import "../../src/components/inputs/range_group/range_group.scss";
+@import "../../src/components/inputs/range_group_pricing_calc/range_group_pricing_calc.scss";
 @import "../../src/components/inputs/range_group_v_2/range_group_v_2.scss";
 @import "../../src/components/inputs/select/select.scss";
 @import "../../src/components/inputs/switch/switch.scss";
diff --git a/pgml-dashboard/static/css/scss/abstracts/variables.scss b/pgml-dashboard/static/css/scss/abstracts/variables.scss
index d4a6b8cdb..05151f3b0 100644
--- a/pgml-dashboard/static/css/scss/abstracts/variables.scss
+++ b/pgml-dashboard/static/css/scss/abstracts/variables.scss
@@ -1,5 +1,5 @@
 //
-// Default SASS Variable Overrides
+// Default SASS Variable Overrides and Custom Variables
 //
 
 // Neutral Scale
@@ -14,7 +14,27 @@ $gray-800: #17181A;
 $gray-900: #000000;
 
 // Violet Scale
+$violet-tint-100: #A105FF;
+$violet-tint-200: #Aa1dff;
+$violet-tint-300: #b336ff;
+$violet-tint-400: #bd50ff;
+$violet-tint-500: #c669ff;
+$violet-tint-600: #d082ff;
+$violet-tint-700: #d99bff;
+$violet-tint-800: #e2b4ff;
+$violet-tint-900: #eccdff;
+$violet-tint-1000: #f5e6ff;
+
 $violet-shade-100: #A105FF;
+$violet-shade-200: #9004e5;
+$violet-shade-300: #8004cc;
+$violet-shade-400: #7003b2;
+$violet-shade-500: #600399;
+$violet-shade-600: #50027f;
+$violet-shade-700: #400266;
+$violet-shade-800: #30014c;
+$violet-shade-900: #200133;
+$violet-shade-1000: #100019;
 
 // Neon Scale 
 $neon-tint-100: #5162FF;
@@ -97,6 +117,7 @@ $slate-shade-800: #2B274C;
 $slate-shade-900: #1D1A33;
 $slate-shade-1000: #0E0D19;
 
+// Magenta Scale 
 $magenta-shade-100: #E6008A;
 $magenta-shade-200: #cf007c;
 $magenta-shade-300: #b8006e;
diff --git a/pgml-dashboard/static/css/scss/components/_buttons.scss b/pgml-dashboard/static/css/scss/components/_buttons.scss
index 9a4d39b55..31341305f 100644
--- a/pgml-dashboard/static/css/scss/components/_buttons.scss
+++ b/pgml-dashboard/static/css/scss/components/_buttons.scss
@@ -105,7 +105,7 @@
     }
 }
 
-.btn-primary-web-app {
+.btn-primary-web-app, .btn-primary-marketing {
     --bs-btn-padding-x: 30px;
     --bs-btn-padding-y: 20px;
 
@@ -143,6 +143,11 @@
     }
 }
 
+.btn-primary-marketing {
+    --bs-btn-padding-x: 24px;
+    --bs-btn-padding-y: 16px;
+}
+
 .btn-secondary-web-app {
     --bs-btn-padding-x: 30px;
     --bs-btn-padding-y: 20px;
diff --git a/pgml-dashboard/static/css/scss/layout/_containers.scss b/pgml-dashboard/static/css/scss/layout/_containers.scss
index 8515efbfe..660de0bde 100644
--- a/pgml-dashboard/static/css/scss/layout/_containers.scss
+++ b/pgml-dashboard/static/css/scss/layout/_containers.scss
@@ -169,6 +169,17 @@
     }
 }
 
+.psychedelic-pink-bg {
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    @include media-breakpoint-up(md) {
+        background-image: url("/dashboard/static/images/newsletter_subscribe_background_desktop.png");
+    }
+    background-image: url("/dashboard/static/images/newsletter_subscribe_background_mobile.png");
+    background-color: #{$pink};
+}
+
 #ai-dev-summit-tip-container {
     .admonition-title {
         display: none
diff --git a/pgml-dashboard/static/images/pricing_lp_hero_image.webp b/pgml-dashboard/static/images/pricing_lp_hero_image.webp
new file mode 100644
index 000000000..8934ffb9b
Binary files /dev/null and b/pgml-dashboard/static/images/pricing_lp_hero_image.webp differ
diff --git a/pgml-dashboard/static/images/pricing_lp_hero_image_desktop.webp b/pgml-dashboard/static/images/pricing_lp_hero_image_desktop.webp
new file mode 100644
index 000000000..d970b65b5
Binary files /dev/null and b/pgml-dashboard/static/images/pricing_lp_hero_image_desktop.webp differ
diff --git a/pgml-dashboard/templates/content/playground.html b/pgml-dashboard/templates/content/playground.html
index 144d4130b..df3527244 100644
--- a/pgml-dashboard/templates/content/playground.html
+++ b/pgml-dashboard/templates/content/playground.html
@@ -12,6 +12,7 @@
 use crate::components::icons::Checkmark;
 use crate::components::Slider;
 use crate::components::pagination::Pagination;
+use crate::components::inputs::{range::Range, RangeGroupPricingCalc};
 %>
 
 <div class="min-height: 100vh;" data-controller="playground">
@@ -37,12 +38,36 @@ <h3 class="h3">icons</h3>
   <div class="mb-5">
     <%+ GithubIcon::new() %>
   </div>
-  <div>
-    <div class="disabled">
-      <%+ Checkmark::new().active() %>
+
+  <div class="row">
+    <h5>Checkmarks</h5>
+    <div class="row">
+      <h6 class="col">normal</h6>
+      <h6 class="col">in disabled container</h6>
+      <h6 class="col">disabled attribute</h6>
+    </div>
+    <div class="col">
+      <%+ Checkmark::new().color("white") %>
+      <%+ Checkmark::new().color("blue") %>
+      <%+ Checkmark::new().color("green") %>
+      <%+ Checkmark::new().color("orange") %>
+      <%+ Checkmark::new().color("purple") %>
+    </div>
+    <div class="disabled col">
+      <%+ Checkmark::new().color("white") %>
+      <%+ Checkmark::new().color("blue") %>
+      <%+ Checkmark::new().color("green") %>
+      <%+ Checkmark::new().color("orange") %>
+      <%+ Checkmark::new().color("purple") %>
     </div>
-    <%+ Checkmark::new().disabled() %>
-    <%+ Checkmark::new().inactive() %>
+    <div class="col">
+      <%+ Checkmark::new().color("white").disabled() %>
+      <%+ Checkmark::new().color("blue").disabled() %>
+      <%+ Checkmark::new().color("green").disabled() %>
+      <%+ Checkmark::new().color("orange").disabled() %>
+      <%+ Checkmark::new().color("purple").disabled() %>
+    </div>
+    <h5>Twitter</h5>
     <%+ Checkmark::new().twitter() %>
   </div>
   <div class="mb-3">
@@ -258,6 +283,10 @@ <h3 class="h3">Inputs</h3>
     </div>
   </div>
 
+  <%+ Range::new() %>
+
+  <%+ RangeGroupPricingCalc::new() %>
+
 </div>
 
 <div style="margin-bottom: 14rem;">