diff --git a/src/pages/Tones.module.css b/src/pages/Tones.module.css
index 510fb1a..1b8c1d6 100644
--- a/src/pages/Tones.module.css
+++ b/src/pages/Tones.module.css
@@ -31,7 +31,7 @@
     padding: 0 var(--spacing-m);
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-xs);
+    gap: var(--spacing-s);
     h5 {
       padding-block: var(--spacing-m);
       font-size: var(--font-size-m);
diff --git a/src/pages/Tones.tsx b/src/pages/Tones.tsx
index 8477a5d..903c209 100644
--- a/src/pages/Tones.tsx
+++ b/src/pages/Tones.tsx
@@ -83,6 +83,11 @@ export function Tones() {
           </aside>
           <div className={styles.tones_content}>
             <h5>Color Tones</h5>
+            <div className={styles.colors_booth}>
+              {colors.map((c, index) => (
+                <FlexColorStand key={`${c}-${index}`} color={c} valueMode={mode} />
+              ))}
+            </div>
             <div className={styles.color_value_mode}>
               <label>Copy color value in</label>
               <HSegmentedControl
@@ -97,11 +102,6 @@ export function Tones() {
                 onChange={setMode}
               />
             </div>
-            <div className={styles.colors_booth}>
-              {colors.map((c, index) => (
-                <FlexColorStand key={`${c}-${index}`} color={c} valueMode={mode} />
-              ))}
-            </div>
           </div>
         </section>
       </ScrollArea>