diff --git a/simon-says/src/features/patternGen/buttonLayout.css b/simon-says/src/features/patternGen/buttonLayout.css
new file mode 100644
index 0000000000000000000000000000000000000000..e7e3133f79620f3df5dfc34b774cd340b04e0118
--- /dev/null
+++ b/simon-says/src/features/patternGen/buttonLayout.css
@@ -0,0 +1,35 @@
+.redbutton{
+    background-color: #f44336;
+    border: none;
+    width: 50%;
+    height: 300px;
+}
+.bluebutton{
+    background-color: #008CBA;
+    border: none;
+    width: 50%;
+    height: 300px;
+}
+.yellowbutton{
+    background-color: #ffff00;
+    border: none;
+    width: 50%;
+    height: 300px;
+}
+.greenbutton{
+    background-color: #4CAF50;
+    border: none;
+    width: 50%;
+    height: 300px;
+}
+#wrapper{
+    width: 100%;
+    background-color:#ffffff;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top:10px;
+    margin-bottom:10px;
+    padding:10px;
+    line-height:150%;
+    clear:both; 
+}
\ No newline at end of file
diff --git a/simon-says/src/features/patternGen/patternGeneration.js b/simon-says/src/features/patternGen/patternGeneration.js
index cfe8a601186c6a54529e26c704194fc92aecd8c4..dbf89a03a022417948f4fdf78d01a996ba8fee51 100644
--- a/simon-says/src/features/patternGen/patternGeneration.js
+++ b/simon-says/src/features/patternGen/patternGeneration.js
@@ -1,20 +1,22 @@
 import React from 'react';
+import styles from './buttonLayout.css';
 
 export function Pattern() {
   return (
     <main>
-      <button>
-
+      <div>
+      <button class = "redbutton">
       </button>
-      <button>
+      <button class = "bluebutton">
         
       </button>
-      <button>
+      <button class = 'yellowbutton'>
         
       </button>
-      <button>
+      <button class = 'greenbutton'>
         
       </button>
+      </div>
     </main>
   );
 }
\ No newline at end of file