diff --git a/site/src/components/docs/demos/Demo.astro b/site/src/components/docs/demos/Demo.astro
index 9d3cc57b..226218f2 100644
--- a/site/src/components/docs/demos/Demo.astro
+++ b/site/src/components/docs/demos/Demo.astro
@@ -18,7 +18,7 @@ const { files } = Astro.props;
 ---
 
 <div class="my-6 w-full max-w-3xl mx-auto flex flex-col rounded-lg overflow-hidden border border-light-40 dark:border-dark-80">
-  <div class="relative z-20 p-6 bg-light-80 dark:bg-dark-100">
+  <div class="relative z-20 bg-light-80 dark:bg-dark-100">
     <slot />
   </div>
   <TabsRoot client:idle maxWidth={false} className="my-0 rounded-none border-0 border-t border-light-40 dark:border-dark-80">
diff --git a/site/src/components/docs/demos/time/html/css/CurrentDuration.css b/site/src/components/docs/demos/time/html/css/CurrentDuration.css
index eff28ff2..d2eaa1bd 100644
--- a/site/src/components/docs/demos/time/html/css/CurrentDuration.css
+++ b/site/src/components/docs/demos/time/html/css/CurrentDuration.css
@@ -7,5 +7,18 @@
 }
 
 .time-current-duration__group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/html/css/CurrentTime.css b/site/src/components/docs/demos/time/html/css/CurrentTime.css
index 25bccc71..a01d8c06 100644
--- a/site/src/components/docs/demos/time/html/css/CurrentTime.css
+++ b/site/src/components/docs/demos/time/html/css/CurrentTime.css
@@ -7,5 +7,15 @@
 }
 
 .time-current-time__value {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.css b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.css
index 3a2ef6fa..3f2c05cf 100644
--- a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.css
+++ b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.css
@@ -7,5 +7,15 @@
 }
 
 .time-custom-negative-sign__value {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/html/css/CustomSeparator.css b/site/src/components/docs/demos/time/html/css/CustomSeparator.css
index a6e2c604..d6050440 100644
--- a/site/src/components/docs/demos/time/html/css/CustomSeparator.css
+++ b/site/src/components/docs/demos/time/html/css/CustomSeparator.css
@@ -7,5 +7,18 @@
 }
 
 .time-custom-separator__group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/html/css/Remaining.css b/site/src/components/docs/demos/time/html/css/Remaining.css
index 0e13d895..aba8cd8a 100644
--- a/site/src/components/docs/demos/time/html/css/Remaining.css
+++ b/site/src/components/docs/demos/time/html/css/Remaining.css
@@ -7,5 +7,15 @@
 }
 
 .time-remaining__value {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/react/css/CurrentDuration.css b/site/src/components/docs/demos/time/react/css/CurrentDuration.css
index eff28ff2..d2eaa1bd 100644
--- a/site/src/components/docs/demos/time/react/css/CurrentDuration.css
+++ b/site/src/components/docs/demos/time/react/css/CurrentDuration.css
@@ -7,5 +7,18 @@
 }
 
 .time-current-duration__group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/react/css/CurrentTime.css b/site/src/components/docs/demos/time/react/css/CurrentTime.css
index 25bccc71..a01d8c06 100644
--- a/site/src/components/docs/demos/time/react/css/CurrentTime.css
+++ b/site/src/components/docs/demos/time/react/css/CurrentTime.css
@@ -7,5 +7,15 @@
 }
 
 .time-current-time__value {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css
index 3a2ef6fa..3f2c05cf 100644
--- a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css
+++ b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css
@@ -7,5 +7,15 @@
 }
 
 .time-custom-negative-sign__value {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/react/css/CustomSeparator.css b/site/src/components/docs/demos/time/react/css/CustomSeparator.css
index a6e2c604..d6050440 100644
--- a/site/src/components/docs/demos/time/react/css/CustomSeparator.css
+++ b/site/src/components/docs/demos/time/react/css/CustomSeparator.css
@@ -7,5 +7,18 @@
 }
 
 .time-custom-separator__group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/react/css/Remaining.css b/site/src/components/docs/demos/time/react/css/Remaining.css
index 0e13d895..aba8cd8a 100644
--- a/site/src/components/docs/demos/time/react/css/Remaining.css
+++ b/site/src/components/docs/demos/time/react/css/Remaining.css
@@ -7,5 +7,15 @@
 }
 
 .time-remaining__value {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }