diff --git a/solutions/day-04/day-04-exercises/src/App.js b/solutions/day-04/day-04-exercises/src/App.js
index 3258b88..c3d2f76 100644
--- a/solutions/day-04/day-04-exercises/src/App.js
+++ b/solutions/day-04/day-04-exercises/src/App.js
@@ -1,12 +1,18 @@
 import React from 'react'
-import Background from './pages/Background'
+// import Background from './pages/Background'
 import './App.css'
+import Stripe from './pages/Stripe'
 
 
-const App = () => {
+const App = (props) => {
   return (
     <div>
-        <Background />
+        {/* <Background /> */}
+        <Stripe bgColor="#518cef" color="#518cef" />
+        <Stripe bgColor="#3b10c4" color="#3b10c4" />
+        <Stripe bgColor="#9aede6" color="#9aede6" />
+        <Stripe bgColor="#8ee763" color="#8ee763" />
+        <Stripe bgColor="#a30dd0" color="#a30dd0" />
     </div>
   )
 }
diff --git a/solutions/day-04/day-04-exercises/src/pages/Stripe.js b/solutions/day-04/day-04-exercises/src/pages/Stripe.js
new file mode 100644
index 0000000..4bfd5db
--- /dev/null
+++ b/solutions/day-04/day-04-exercises/src/pages/Stripe.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import styles from './Stripe.module.css'
+
+const Stripe = (props) => {
+  return (
+    <div className={styles.container} style={{ backgroundColor: `${props.bgColor}` }}>{props.color}</div>
+  )
+}
+
+export default Stripe
\ No newline at end of file
diff --git a/solutions/day-04/day-04-exercises/src/pages/Stripe.module.css b/solutions/day-04/day-04-exercises/src/pages/Stripe.module.css
new file mode 100644
index 0000000..8b05b30
--- /dev/null
+++ b/solutions/day-04/day-04-exercises/src/pages/Stripe.module.css
@@ -0,0 +1,12 @@
+.container {
+    width: 100vw;
+    height: 15vh;
+    margin-bottom: 5px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-weight: bold;
+    font-size: 1.5em;
+}
\ No newline at end of file