diff --git a/challenges/qr_code_component/images/favicon-32x32.png b/challenges/qr_code_component/images/favicon-32x32.png
new file mode 100644
index 00000000..1e2df7f0
Binary files /dev/null and b/challenges/qr_code_component/images/favicon-32x32.png differ
diff --git a/challenges/qr_code_component/images/image-qr-code.png b/challenges/qr_code_component/images/image-qr-code.png
new file mode 100644
index 00000000..2e0095ad
Binary files /dev/null and b/challenges/qr_code_component/images/image-qr-code.png differ
diff --git a/challenges/qr_code_component/index.html b/challenges/qr_code_component/index.html
index 57aec46a..02d8355b 100644
--- a/challenges/qr_code_component/index.html
+++ b/challenges/qr_code_component/index.html
@@ -28,35 +28,53 @@
     <link rel="manifest" href="../site.webmanifest" />
     <link rel="stylesheet" href="style.css" />
   </head>
-  <body class="m-0">
+  <body>
     <div
-      class="flex h-[100vh] w-full flex-col place-content-center text-center"
+      class="bg-Light-gray flex h-screen flex-col items-center justify-center py-40"
     >
-      <div>
-        <a
-          class="text-optimum-blue hover:text-optimum-darkblue"
-          href="https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H"
-          target="_blank"
-          >Frontend Mentor challenge</a
-        >
-      </div>
-      <div>
-        for
-        <a
-          class="text-optimum-blue hover:text-optimum-darkblue"
-          href="https://github.com/optimumBA"
-          target="_blank"
-          >Optimum BH</a
-        >
-        Internship.
+      <div class="w-80 rounded-xl bg-white">
+        <div class="rounded-lg px-4 py-4">
+          <img src="images/image-qr-code.png" alt="" class="rounded-lg" />
+        </div>
+        <div class="px-4 text-center">
+          <h1 class="font-outfit text-Dark-blue px-4 pb-4 text-xl font-bold">
+            Improve your front-end skills by building projects
+          </h1>
+          <p class="text-Grayish-blue px-6 pb-8 text-sm">
+            Scan the QR code to visit Frontend Mentor and take your coding
+            skills to the next level
+          </p>
+        </div>
       </div>
+      <div
+        class="mt-6 flex h-[100vh] flex-col place-content-center text-center"
+      >
+        <div>
+          <a
+            class="text-optimum-blue hover:text-optimum-darkblue"
+            href="https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H"
+            target="_blank"
+            >Frontend Mentor challenge</a
+          >
+        </div>
+        <div>
+          for
+          <a
+            class="text-optimum-blue hover:text-optimum-darkblue"
+            href="https://github.com/optimumBA"
+            target="_blank"
+            >Optimum BH</a
+          >
+          Internship.
+        </div>
 
-      <div class="mt-3">
-        <a
-          class="text-optimum-blue hover:text-optimum-darkblue"
-          href="https://github.com/optimumBA/frontend_mentor_challenges/tree/qr_code_component/challenges/qr_code_component"
-          >Source code</a
-        >
+        <div class="mt-3">
+          <a
+            class="text-optimum-blue hover:text-optimum-darkblue"
+            href="https://github.com/akinyiv/frontend_mentor_challenges/tree/qr_code_component/challenges/qr_code_component"
+            >Source code</a
+          >
+        </div>
       </div>
     </div>
   </body>
diff --git a/challenges/qr_code_component/tailwind.config.js b/challenges/qr_code_component/tailwind.config.js
index bf7a0ba7..9d8a8823 100644
--- a/challenges/qr_code_component/tailwind.config.js
+++ b/challenges/qr_code_component/tailwind.config.js
@@ -5,6 +5,13 @@ module.exports = {
       colors: {
         'optimum-blue': '#009efc',
         'optimum-darkblue': '#0389e1',
+        White: 'hsl(0, 0%, 100%)',
+        'Light-gray': 'hsl(212, 45%, 89%)',
+        'Grayish-blue': 'hsl(220, 15%, 55%)',
+        'Dark-blue': 'hsl(218, 44%, 22%)',
+      },
+      fontFamily: {
+        outfit: ['Outfit', 'sans-serif'],
       },
     },
   },
