diff --git a/gallery/src/pages/components/ha-bar-slider.markdown b/gallery/src/pages/components/ha-bar-slider.markdown
index aea201fb5c..5d45928b4e 100644
--- a/gallery/src/pages/components/ha-bar-slider.markdown
+++ b/gallery/src/pages/components/ha-bar-slider.markdown
@@ -1,3 +1,3 @@
 ---
-title: Bar Sliders
+title: Bar Slider
 ---
diff --git a/gallery/src/pages/components/ha-bar-switch.markdown b/gallery/src/pages/components/ha-bar-switch.markdown
index cd5d4507af..b47b9bb183 100644
--- a/gallery/src/pages/components/ha-bar-switch.markdown
+++ b/gallery/src/pages/components/ha-bar-switch.markdown
@@ -1,3 +1,3 @@
 ---
-title: Bar Switches
+title: Bar Switch
 ---
diff --git a/gallery/src/pages/components/ha-chips.markdown b/gallery/src/pages/components/ha-chips.markdown
index 300489b7e6..c9ee58b80b 100644
--- a/gallery/src/pages/components/ha-chips.markdown
+++ b/gallery/src/pages/components/ha-chips.markdown
@@ -1,3 +1,3 @@
 ---
-title: Chips
+title: Chip
 ---
diff --git a/gallery/src/pages/components/dialogs.markdown b/gallery/src/pages/components/ha-dialogs.markdown
similarity index 90%
rename from gallery/src/pages/components/dialogs.markdown
rename to gallery/src/pages/components/ha-dialogs.markdown
index 472265b091..f3736d213a 100644
--- a/gallery/src/pages/components/dialogs.markdown
+++ b/gallery/src/pages/components/ha-dialogs.markdown
@@ -1,11 +1,11 @@
 ---
-title: Dialogs
+title: Dialog
 subtitle: Dialogs provide important prompts in a user flow.
 ---
 
 # Material Design 3
 
-Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on it's [website](https://m3.material.io/components/dialogs/overview). 
+Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview). 
 
 # Highlighted guidelines
 
diff --git a/gallery/src/pages/components/ha-gauge.markdown b/gallery/src/pages/components/ha-gauge.markdown
new file mode 100644
index 0000000000..33419c9588
--- /dev/null
+++ b/gallery/src/pages/components/ha-gauge.markdown
@@ -0,0 +1,61 @@
+---
+title: Gauge
+---
+
+<style>
+  ha-gauge {
+    display: block;
+    width: 200px;
+    margin-top: 15px;
+    margin-bottom: 50px;
+  }
+</style>
+
+# Gauge `<ha-gauge>`
+
+A gauge that can be used to represent sensor data and provide visual feedback about the value and the corresponding severity (success, warning, error).
+
+## Examples
+
+Info color gauge
+<ha-gauge value="75" style="--gauge-color: var(--info-color)"></ha-gauge>
+
+Success color gauge
+<ha-gauge value="25" style="--gauge-color: var(--success-color)" label="°C"></ha-gauge>
+
+Warning color gauge
+<ha-gauge value="50" style="--gauge-color: var(--warning-color)" label="°C"></ha-gauge>
+
+Error color gauge
+<ha-gauge value="75" style="--gauge-color: var(--error-color)" label="°C"></ha-gauge>
+
+Gauge with background color
+<ha-gauge value="75" style="--gauge-color: var(--info-color); --primary-background-color: lightgray"></ha-gauge>
+
+
+## CSS variables
+
+### Gauge
+
+`primary-background-color`  
+Background color of the dial (rounded arch)
+
+`primary-text-color`  
+Text color below dial (value and unit of measurement) plus needle color (if gauge is in needle mode)
+
+#### Dial colors
+
+`gauge-color`  
+Used in the coding to control what color the gauge value is rendered with, but cannot be set via theme since its value will dynamically be set (either to `info-color` or to the matching severity variable if the severity color mode is used). To control the used colors, adjust the following variables.
+
+`success-color`  
+Dial color for the "green" severity level
+
+`warning-color`  
+Dial color for the "yellow" severity level
+
+`error-color`  
+Dial color for the "red" severity level
+
+`info-color`  
+Static dial color if not in severity color mode
diff --git a/gallery/src/pages/components/ha-gauge.ts b/gallery/src/pages/components/ha-gauge.ts
new file mode 100644
index 0000000000..d31970e7e2
--- /dev/null
+++ b/gallery/src/pages/components/ha-gauge.ts
@@ -0,0 +1 @@
+import "../../../../src/components/ha-gauge";
diff --git a/gallery/src/pages/components/ha-switch.markdown b/gallery/src/pages/components/ha-switch.markdown
new file mode 100644
index 0000000000..d281c3b0e8
--- /dev/null
+++ b/gallery/src/pages/components/ha-switch.markdown
@@ -0,0 +1,39 @@
+---
+title: Switch / Toggle
+---
+
+<style>
+  ha-switch {
+    display: block;
+  }
+</style>
+
+# Switch `<ha-switch>`
+
+A toggle switch can represent two states: on and off.
+
+## Examples
+
+Switch in on state
+<ha-switch checked></ha-switch>
+
+Switch in off state
+<ha-switch></ha-switch>
+
+Disabled switch
+<ha-switch disabled></ha-switch>
+
+## CSS variables
+
+For the switch / toggle there are always two variables, one for the on / checked state and one for the off / unchecked state.
+
+The track element (background rounded rectangle that the round circular handle travels on) is set to being half transparent, so the final color will also be impacted by the color behind the track.
+
+`switch-checked-color` / `switch-unchecked-color`  
+Set both the color of the round handle  and the track behind it. If you want to control them separately, use the variables below instead.
+
+`switch-checked-button-color` / `switch-unchecked-button-color`  
+Color of the round handle
+
+`switch-checked-track-color` / `switch-unchecked-track-color`  
+Color of the track behind the round handle
diff --git a/gallery/src/pages/components/ha-switch.ts b/gallery/src/pages/components/ha-switch.ts
new file mode 100644
index 0000000000..787decc94b
--- /dev/null
+++ b/gallery/src/pages/components/ha-switch.ts
@@ -0,0 +1 @@
+import "../../../../src/components/ha-switch";
diff --git a/gallery/src/pages/components/ha-tip.markdown b/gallery/src/pages/components/ha-tip.markdown
index a3bc162733..476fa14d4b 100644
--- a/gallery/src/pages/components/ha-tip.markdown
+++ b/gallery/src/pages/components/ha-tip.markdown
@@ -1,3 +1,3 @@
 ---
-title: Tips
+title: Tip
 ---
diff --git a/gallery/src/pages/lovelace/gauge-card.ts b/gallery/src/pages/lovelace/gauge-card.ts
index 9094f678b8..ae99d1b1be 100644
--- a/gallery/src/pages/lovelace/gauge-card.ts
+++ b/gallery/src/pages/lovelace/gauge-card.ts
@@ -23,13 +23,12 @@ const CONFIGS = [
     heading: "Basic example",
     config: `
 - type: gauge
-  title: Humidity
   entity: sensor.outside_humidity
   name: Outside Humidity
     `,
   },
   {
-    heading: "Custom Unit of Measurement",
+    heading: "Custom unit of measurement",
     config: `
 - type: gauge
   entity: sensor.outside_temperature
@@ -38,7 +37,16 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Setting Severity Levels",
+    heading: "Rendering needle",
+    config: `
+- type: gauge
+  entity: sensor.outside_humidity
+  name: Outside Humidity
+  needle: true
+    `,
+  },
+  {
+    heading: "Setting severity levels",
     config: `
 - type: gauge
   entity: sensor.brightness
@@ -50,7 +58,7 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Setting Severity Levels",
+    heading: "Setting severity levels",
     config: `
 - type: gauge
   entity: sensor.brightness_medium
@@ -62,7 +70,7 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Setting Severity Levels",
+    heading: "Setting severity levels",
     config: `
 - type: gauge
   entity: sensor.brightness_high
@@ -74,7 +82,7 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Setting Min (0) and Max (15) Values",
+    heading: "Setting min (0) and mx (15) values",
     config: `
 - type: gauge
   entity: sensor.brightness
@@ -84,14 +92,14 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Invalid Entity",
+    heading: "Invalid entity",
     config: `
 - type: gauge
   entity: sensor.invalid_entity
     `,
   },
   {
-    heading: "Non-Numeric Value",
+    heading: "Non-numeric value",
     config: `
 - type: gauge
   entity: plant.bonsai