diff --git a/projects/FrontendMentor/newbie/qr-code-component/css/style.css b/projects/FrontendMentor/newbie/qr-code-component/css/style.css
new file mode 100644
index 0000000..c7fb0bc
--- /dev/null
+++ b/projects/FrontendMentor/newbie/qr-code-component/css/style.css
@@ -0,0 +1,98 @@
+/*
+ * design sizing
+ *  Desktop: 1440x800
+ *  Mobile: 375x667
+ */
+
+*,
+::before,
+::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    /* Colors */
+    --col-primary-dark-blue: hsl(218, 44%, 22%);
+    --col-primary-grayish-blue: hsl(220, 15%, 55%);
+    --col-neutral-white: hsl(0, 0%, 100%);
+    --col-neutral-light-gray: hsl(212, 45%, 89%);
+
+    --col-page-background: var(--col-neutral-light-gray);
+    --col-card-background: var(--col-neutral-white);
+    --col-heading: var(--col-primary-dark-blue);
+    --col-body: var(--col-primary-grayish-blue);
+
+    /* Typography */
+    --fs-heading: 1.375rem;
+    --lh-heading: 1.75rem;
+    --fw-heading: 700;
+
+    --fs-body: 0.9375rem;
+    --lh-body: 1.1875rem;
+    --fw-body: 400;
+    --ls-body: 0.1875px;
+
+    /* Styling */
+    --border-radius--outer: 1.25rem;
+    --border-radius--inner: 0.625rem;
+    /* Positioning */
+    --width-qr-card__body: 26ch;
+
+    /* Other */
+    --img: url(images/image-qr-code.png);
+}
+
+body {
+    min-height: 100vh;
+
+    display: grid;
+    place-content: center;
+
+    background-color: var(--col-page-background);
+}
+
+.qr-card {
+    font-family: "Outfit", sans-serif;
+
+    background-color: var(--col-card-background);
+    border-radius: var(--border-radius--outer);
+
+    padding: 1rem 1rem 2.5rem 1rem;
+
+    width: 20rem;
+
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+}
+
+.qr-card__img {
+    border-radius: var(--border-radius--inner);
+    margin-bottom: 1.5rem;
+
+    width: 100%;
+}
+
+.qr-card__heading {
+    color: var(--col-heading);
+    font-size: var(--fs-heading);
+    font-weight: var(--fw-heading);
+    line-height: var(--lh-heading);
+    text-align: center;
+
+    margin-bottom: 1rem;
+}
+
+.qr-card__body {
+    color: var(--col-body);
+    font-size: var(--fs-body);
+    font-weight: var(--fw-body);
+    line-height: var(--lh-body);
+    letter-spacing: var(--ls-body);
+
+    text-align: center;
+
+    width: var(--width-qr-card__body);
+}
diff --git a/projects/FrontendMentor/newbie/qr-code-component/index.html b/projects/FrontendMentor/newbie/qr-code-component/index.html
index 228e6e5..c5b7e9e 100644
--- a/projects/FrontendMentor/newbie/qr-code-component/index.html
+++ b/projects/FrontendMentor/newbie/qr-code-component/index.html
@@ -1,28 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
+  <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="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
+
+  <link rel="stylesheet" href="css/style.css">
+
   <title>Frontend Mentor | QR code component</title>
 
   <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
   <style>
-    .attribution { font-size: 11px; text-align: center; }
-    .attribution a { color: hsl(228, 45%, 44%); }
+    .attribution {
+      font-size: 11px;
+      text-align: center;
+    }
+
+    .attribution a {
+      color: hsl(228, 45%, 44%);
+    }
   </style>
 </head>
+
 <body>
 
-  Improve your front-end skills by building projects
+  <main>
+    <section class="qr-card">
+      <picture>
+        <img class="qr-card__img" src="images/image-qr-code.png" alt="QR Code">
+      </picture>
+      <h1 class="qr-card__heading">
+        Improve your front-end skills by building projects
+      </h1>
+      <p class="qr-card__body">
+        Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
+      </p>
 
-  Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
-  
-  <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>
+    </section>
+  </main>
+
+
+  <!-- <footer>
+    <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>
+  </footer> -->
 </body>
+
 </html>
\ No newline at end of file
