diff --git a/src/page-components/harmonies/HarmonyPreview.module.css b/src/page-components/harmonies/HarmonyPreview.module.css
index 394df47..d6311e7 100644
--- a/src/page-components/harmonies/HarmonyPreview.module.css
+++ b/src/page-components/harmonies/HarmonyPreview.module.css
@@ -1,6 +1,7 @@
 @layer pages {
   .preview {
     width: 100%;
+    height: 100%;
     padding: 0 var(--spacing-m);
     display: flex;
     flex-direction: column;
@@ -9,6 +10,7 @@
       font-size: var(--font-size-m);
     }
     .color_blocks {
+      flex: 1;
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
@@ -16,6 +18,7 @@
       flex-wrap: nowrap;
       gap: var(--spacing-s);
       .color_block {
+        max-height: 23em;
         display: flex;
         flex-direction: column;
         align-items: stretch;
@@ -42,14 +45,25 @@
           padding-inline: var(--spacing-s);
           font-size: var(--font-size-s);
         }
-        .color_code {
+        .color_code_row {
           height: 1.5em;
           padding-inline: var(--spacing-s);
           font-size: var(--font-size-s);
-          text-transform: uppercase;
-          text-align: right;
-          > span {
-            cursor: pointer;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-end;
+          align-items: center;
+          gap: var(--spacing-xs);
+          overflow: visible;
+          .color_code {
+            height: 1.5em;
+            padding-inline: var(--spacing-s);
+            font-size: var(--font-size-s);
+            text-transform: uppercase;
+            text-align: right;
+            > span {
+              cursor: pointer;
+            }
           }
         }
       }
diff --git a/src/page-components/harmonies/HarmonyPreview.tsx b/src/page-components/harmonies/HarmonyPreview.tsx
index dc77602..e5dcd9d 100644
--- a/src/page-components/harmonies/HarmonyPreview.tsx
+++ b/src/page-components/harmonies/HarmonyPreview.tsx
@@ -1,6 +1,7 @@
 import cx from 'clsx';
 import { constant, flatten, isEqual, take, times } from 'lodash-es';
 import { useMemo } from 'react';
+import ContextMenu from '../../components/ContextMenu';
 import { useCopyColor } from '../../hooks/useCopyColor';
 import { HarmonyColor } from '../../models';
 import styles from './HarmonyPreview.module.css';
@@ -33,8 +34,11 @@ export function HarmonyPreview({ colors = [] }: HarmonyPreviewProps) {
             style={{ flexGrow: ratio }}>
             <div className={styles.color_ratio}>{ratio > 0 && `Ratio: ${ratio}`}</div>
             <div className={styles.color_square} style={{ backgroundColor: `#${color}` }}></div>
-            <div className={styles.color_code}>
-              {ratio > 0 && <span onClick={() => copyColor(color)}>#{color}</span>}
+            <div className={styles.color_code_row}>
+              <div className={styles.color_code}>
+                {ratio > 0 && <span onClick={() => copyColor(color)}>#{color}</span>}
+              </div>
+              <ContextMenu color={color} />
             </div>
           </div>
         ))}