diff --git a/components/Colors.jsx b/components/Colors.jsx
new file mode 100644
index 0000000..2042f2c
--- /dev/null
+++ b/components/Colors.jsx
@@ -0,0 +1,21 @@
+import styles from '@styles/Colors.module.scss'
+
+export default () => {
+  const colors = ['#a1e8af', '#94c595', '#747c92', '#372772', '#3a2449']
+
+  return (
+    <div className={styles.colors}>
+      {colors.map((color, key) => {
+        return (
+          <div
+            key={key}
+            className={styles.color}
+            style={{ backgroundColor: color }}
+          >
+            {color}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/pages/index.jsx b/pages/index.jsx
index 47ec5b7..b6ea9d5 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -1,5 +1,7 @@
 import Head from 'next/head'
 
+import Colors from '@components/Colors'
+
 export default () => {
   return (
     <>
@@ -7,7 +9,7 @@ export default () => {
         <title>Colors</title>
       </Head>
 
-      <div>Hello World!</div>
+      <Colors />
     </>
   )
 }
diff --git a/styles/Colors.module.scss b/styles/Colors.module.scss
new file mode 100644
index 0000000..a7c6871
--- /dev/null
+++ b/styles/Colors.module.scss
@@ -0,0 +1,10 @@
+.colors {
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+
+  .color {
+    flex: 1;
+    height: 100%;
+  }
+}