diff --git a/index.js b/index.js
index 3433889..9c63f20 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,9 @@
 const WIDTH = 4; //64;
 const HEIGHT = 4; //32;
 
+// Canvas
+const canvas = document.createElement('div');
+canvas.className = 'canvas';
 for(let y = 0; y < HEIGHT; y++) {
     const row = document.createElement('div');
     row.className = 'row';
@@ -12,5 +15,18 @@ for(let y = 0; y < HEIGHT; y++) {
         });
         row.appendChild(pixel);
     }
-    document.body.appendChild(row);
-}
\ No newline at end of file
+    canvas.appendChild(row);
+}
+document.body.appendChild(canvas);
+
+// Palette
+const colors = ['red', 'blue'];
+const palette = document.createElement('div');
+palette.className = 'palette';
+for(let color of colors) {
+    const swatch = document.createElement('div');
+    swatch.className = 'swatch';
+    swatch.style.backgroundColor = color;
+    palette.appendChild(swatch);
+}
+document.body.appendChild(palette);
\ No newline at end of file
diff --git a/style.css b/style.css
index b229fab..c5d3a69 100644
--- a/style.css
+++ b/style.css
@@ -11,4 +11,16 @@ body {
     width: 14px;
     height: 14px;
     border: 1px solid rgb(229, 229, 229);
+}
+
+.palette {
+    display: flex;
+}
+
+.swatch {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    display: flex;
+    margin: 2px;
 }
\ No newline at end of file