diff --git a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
index b1486566e..0ad6fc9d2 100644
--- a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
+++ b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
@@ -663,11 +663,78 @@ const PublicPageControls = () => {
               options={Object.keys(HeroPatterns)}
             />
           </div>
+          <Show when={extraParams["heroPattern"]?.heroPatternName !== "Blank"}>
+            <div class="flex flex-row items-center justify-start gap-4 pt-4">
+              <div class="">
+                <label class="block" for="">
+                  Foreground Color
+                </label>
+                <input
+                  placeholder="#FFFFFF"
+                  value={extraParams.heroPattern?.foregroundColor || "#FFFFFF"}
+                  onInput={(e) => {
+                    setExtraParams(
+                      "heroPattern",
+                      "foregroundColor",
+                      e.currentTarget.value,
+                    );
+                  }}
+                  class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
+                />
+              </div>
+              <div class="">
+                <Show
+                  when={
+                    extraParams.heroPattern?.heroPatternName !== "Blank" &&
+                    extraParams.heroPattern?.heroPatternName !== "Solid"
+                  }
+                >
+                  <label class="block" for="">
+                    Background Color
+                  </label>
+                  <input
+                    placeholder="#FFFFFF"
+                    value={
+                      extraParams.heroPattern?.backgroundColor || "#FFFFFF"
+                    }
+                    onChange={(e) => {
+                      setExtraParams(
+                        "heroPattern",
+                        "backgroundColor",
+                        e.currentTarget.value,
+                      );
+                    }}
+                    class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
+                  />
+                </Show>
+              </div>
+              <div class="">
+                <label class="block" for="">
+                  Foreground Opacity
+                </label>
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  onChange={(e) => {
+                    setExtraParams(
+                      "heroPattern",
+                      "foregroundOpacity",
+                      parseInt(e.currentTarget.value) / 100,
+                    );
+                  }}
+                  value={
+                    (extraParams.heroPattern?.foregroundOpacity || 0.5) * 100
+                  }
+                />
+              </div>
+            </div>
+          </Show>
           <div class="grow">
             <div class="flex items-center gap-1">
               <label class="block">Video Link</label>
               <Tooltip
-                tooltipText="Text shown in the search box before user input"
+                tooltipText="Video that will be displayed on the public page."
                 body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
               />
             </div>
@@ -681,69 +748,6 @@ const PublicPageControls = () => {
             />
           </div>
         </div>
-        <Show when={extraParams["heroPattern"]?.heroPatternName !== "Blank"}>
-          <div class="flex flex-row items-center justify-start gap-4 pt-4">
-            <div class="">
-              <label class="block" for="">
-                Foreground Color
-              </label>
-              <input
-                placeholder="#FFFFFF"
-                value={extraParams.heroPattern?.foregroundColor || "#FFFFFF"}
-                onInput={(e) => {
-                  setExtraParams(
-                    "heroPattern",
-                    "foregroundColor",
-                    e.currentTarget.value,
-                  );
-                }}
-                class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
-              />
-            </div>
-            <div class="">
-              <Show
-                when={
-                  extraParams.heroPattern?.heroPatternName !== "Blank" &&
-                  extraParams.heroPattern?.heroPatternName !== "Solid"
-                }
-              >
-                <label class="block" for="">
-                  Background Color
-                </label>
-                <input
-                  placeholder="#FFFFFF"
-                  value={extraParams.heroPattern?.backgroundColor || "#FFFFFF"}
-                  onChange={(e) => {
-                    setExtraParams(
-                      "heroPattern",
-                      "backgroundColor",
-                      e.currentTarget.value,
-                    );
-                  }}
-                  class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
-                />
-              </Show>
-            </div>
-            <div class="">
-              <label class="block" for="">
-                Foreground Opacity 0-1
-              </label>
-              <input
-                type="number"
-                placeholder="1000"
-                value={extraParams.heroPattern?.foregroundOpacity || 0.5}
-                onInput={(e) => {
-                  setExtraParams(
-                    "heroPattern",
-                    "foregroundOpacity",
-                    parseFloat(e.currentTarget.value),
-                  );
-                }}
-                class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
-              />
-            </div>
-          </div>
-        </Show>
         <details class="pt-4">
           <summary class="cursor-pointer text-sm font-medium">
             Advanced Settings
diff --git a/server/static/output.css b/server/static/output.css
index a2e625659..f2b52896a 100644
--- a/server/static/output.css
+++ b/server/static/output.css
@@ -612,10 +612,6 @@ video {
   margin-top: 2rem;
 }
 
-.mt-0\.5 {
-  margin-top: 0.125rem;
-}
-
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -800,11 +796,6 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -913,16 +904,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
-.text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }