diff --git a/FrontendMentor/newbie/order-summary-component/index.html b/FrontendMentor/newbie/order-summary-component/index.html
index 0eca502..6f63f60 100644
--- a/FrontendMentor/newbie/order-summary-component/index.html
+++ b/FrontendMentor/newbie/order-summary-component/index.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
 
   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+  <link rel="stylesheet" href="css/style.css">
   
   <title>Frontend Mentor | Order summary card</title>
 
@@ -16,22 +17,28 @@
 </head>
 <body>
 
-  Order Summary
-
-  You can now listen to millions of songs, audiobooks, and podcasts on any 
-  device anywhere you like!
-
-  Annual Plan
-  $59.99/year
-
-  Change
-
-  Proceed to Payment
-  Cancel Order
+  <div class="card">
+    <div class="hero-image"></div>
+    <h1>Order Summary</h1>
+    <p>
+      You can now listen to millions of songs, audiobooks, and podcasts on any
+      device anywhere you like!
+    </p>
+    <div class="price-plan">
+      <div class="icon"></div>
+      <div class="plan-type-area">
+        <div class="plan-type">Annual Plan</div>
+        <div class="plan-price">$59.99/year</div>
+      </div>
+      <div class="change-button">Change</div>
+    </div>
+    <div class="payment-button">Proceed to Payment</div>
+    <div class="cancel-button">Cancel Order</div>
+  </div>
   
-  <div class="attribution">
+  <!-- <div class="attribution">
     Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
     Coded by <a href="#">Your Name Here</a>.
-  </div>
+  </div> -->
 </body>
 </html>
\ No newline at end of file
