diff --git a/challenges/interactive_pricing_component/index.html b/challenges/interactive_pricing_component/index.html
index b1acb8de..3aa50e1d 100644
--- a/challenges/interactive_pricing_component/index.html
+++ b/challenges/interactive_pricing_component/index.html
@@ -42,9 +42,104 @@
       rel="stylesheet"
     />
   </head>
-  <body class="m-0">
+  <body class="text-grayishBlue bg-veryPaleBlue font-manrope m-0 items-center">
+    <header class="">
+      <div class="z-10">
+        <img class="relative h-[50vh]" src="images/bg-pattern.svg" alt="" />
+        <img
+          class="absolute left-[29%] top-9 md:left-[45%]"
+          src="images/pattern-circles.svg"
+          alt=""
+        />
+      </div>
+      <div
+        class="absolute top-16 ml-[2.5%] flex flex-col items-center justify-center text-center md:ml-[30%] lg:ml-[35%]"
+      >
+        <h1 class="text-darkDesaturatedBlue text-2xl font-bold">
+          Simple, traffic-based pricing
+        </h1>
+        <p class="ml-[-18px] mt-2 w-[60%] text-sm">
+          Sign-up for our 30-day trial. No credit card required.
+        </p>
+      </div>
+    </header>
+    <main
+      x-data="app"
+      class="shadow-lightGrayishBlueOne relative top-[-130px] ml-[5%] w-[90%] space-y-6 rounded-md bg-white py-8 text-center shadow-xl md:ml-[20%] md:w-[60%] lg:ml-[30%] lg:w-[40%]"
+    >
+      <h1
+        class="md:ml-[-50%]"
+        x-text="getPageViews(getIndex(data))+ ' PAGEVIEWS'"
+      ></h1>
+      <div class="relative z-10">
+        <input
+          class="price-slider range-lg bg-softCyan h-3 w-4/5 cursor-pointer appearance-none rounded-full px-8"
+          type="range"
+          name="price"
+          min="1"
+          max="5"
+          id="price-slider"
+          x-model="data"
+        />
+        <div
+          class="cover width-[100%] height-[100%] absolute left-0 top-0 z-0 bg-[#ccc]"
+        ></div>
+      </div>
+      <div
+        class="flex items-center justify-center md:absolute md:left-[58%] md:top-[1%]"
+      >
+        <h2
+          class="text-darkDesaturatedBlue text-3xl font-bold"
+          x-text="getPrice(getIndex(data))"
+        ></h2>
+        <span>/month</span>
+      </div>
+      <div class="flex items-center justify-center space-x-3 text-xs">
+        <span>Monthly Billing</span>
+        <a href="#" id="yearly-billing-toggle">
+          <label class="relative inline-flex cursor-pointer items-center">
+            <input
+              type="checkbox"
+              value=""
+              class="peer sr-only"
+              @click="yearly = !yearly"
+            />
+            <div
+              class="bg-lightGrayishBlueTwo after:border-lightGrayishBlueTwo peer-checked:bg-darkDesaturatedBlue hover:bg-softCyan h-6 w-11 rounded-full after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none"
+            ></div>
+          </label>
+        </a>
+
+        <span>Yearly Billing</span>
+        <span
+          class="bg-lightGrayishRed text-lightRed rounded-full p-[3px] px-2 font-bold"
+          >25% discount
+        </span>
+      </div>
+      <hr class="my-12" />
+      <ul class="space-y-2">
+        <li class="flex items-center justify-center gap-4">
+          <img class="block w-[12px]" src="images/icon-check.svg" alt="" />
+          <p>Unlimited websites</p>
+        </li>
+        <li class="flex items-center justify-center gap-4">
+          <img class="block w-[12px]" src="images/icon-check.svg" alt="" />
+          <p>100% data ownership</p>
+        </li>
+        <li class="flex items-center justify-center gap-4">
+          <img class="block w-[12px]" src="images/icon-check.svg" alt="" />
+          <p>Email report</p>
+        </li>
+      </ul>
+      <button
+        class="bg-darkDesaturatedBlue text-paleBlue mb-8 mt-8 rounded-full px-8 py-3 font-bold"
+      >
+        Start my trial
+      </button>
+    </main>
+
     <div
-      class="flex h-[100vh] w-full flex-col place-content-center text-center"
+      class="mt-[-80px] flex w-full flex-col place-content-center text-center"
     >
       <div>
         <a
@@ -68,10 +163,48 @@
       <div class="mt-3">
         <a
           class="text-optimum-blue hover:text-optimum-darkblue"
-          href="https://github.com/optimumBA/frontend_mentor_challenges/tree/interactive_pricing_component/challenges/interactive_pricing_component"
+          href="https://github.com/akinyiv/frontend_mentor_challenges/tree/interactive_pricing_component/challenges/interactive_pricing_component"
           >Source code</a
         >
       </div>
     </div>
+    <script>
+      document.addEventListener('alpine:init', () => {
+        Alpine.data('app', () => ({
+          data: '3',
+          yearly: false,
+          pageviews: ['10K', '50K', '100K', '500K', '1M'],
+          price: ['$8.00', '$12.00', '$16.00', '$24.00', '$36.00'],
+          yearlyPrice: ['$6.00', '$9.00', '$12.00', '$18.00', '$27.00'],
+          getIndex(val) {
+            switch (val) {
+              case '1':
+                return 0
+              case '2':
+                return 1
+              case '3':
+                return 2
+              case '4':
+                return 3
+              case '5':
+                return 4
+              default:
+                return null
+                break
+            }
+          },
+          getPageViews(val) {
+            return this.pageviews[val]
+          },
+          getPrice(val) {
+            if (this.yearly) {
+              return this.yearlyPrice[val]
+            } else {
+              return this.price[val]
+            }
+          },
+        }))
+      })
+    </script>
   </body>
 </html>
diff --git a/challenges/interactive_pricing_component/style.css b/challenges/interactive_pricing_component/style.css
index b5c61c95..ed38ffa5 100644
--- a/challenges/interactive_pricing_component/style.css
+++ b/challenges/interactive_pricing_component/style.css
@@ -1,3 +1,37 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  #price-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 50%;
+    width: 45px;
+    height: 45px;
+    background: #11d8c5;
+    background-image: url('./images/icon-slider.svg');
+    filter: drop-shadow(3px 20px 24px #11d8c5);
+    background-repeat: no-repeat;
+    background-position: center;
+    cursor: pointer;
+  }
+
+  /* Pseudo-class variant for 'active' state when slider is grabbed */
+  #price-slider::-webkit-slider-thumb:active {
+    background-color: #0f9e8d;
+    cursor: grab;
+  }
+
+  #price-slider::-moz-range-thumb {
+    width: 25px;
+    height: 25px;
+    cursor: pointer;
+  }
+
+  /* Pseudo-class variant for 'active' state when slider is grabbed */
+  #price-slider::-moz-range-thumb:active {
+    background-color: #f6ad55;
+    cursor: grab;
+  }
+}
diff --git a/challenges/interactive_pricing_component/tailwind.config.js b/challenges/interactive_pricing_component/tailwind.config.js
index 5879511d..0570eafc 100644
--- a/challenges/interactive_pricing_component/tailwind.config.js
+++ b/challenges/interactive_pricing_component/tailwind.config.js
@@ -5,16 +5,16 @@ module.exports = {
       colors: {
         'optimum-blue': '#009efc',
         'optimum-darkblue': '#0389e1',
-        softCyan: 'hsl(174, 77%, 80%)', 
+        softCyan: 'hsl(174, 77%, 80%)',
         strongCyan: 'hsl(174, 86%, 45%)',
-        lightGrayishRed: 'hsl(14, 92%, 95%)', 
-        lightRed: 'hsl(15, 100%, 70%)', 
-        paleBlue: 'hsl(226, 100%, 87%)', 
+        lightGrayishRed: 'hsl(14, 92%, 95%)',
+        lightRed: 'hsl(15, 100%, 70%)',
+        paleBlue: 'hsl(226, 100%, 87%)',
         veryPaleBlue: 'hsl(230, 100%, 99%)',
         lightGrayishBlueOne: 'hsl(224, 65%, 95%)',
-        lightGrayishBlueTwo: 'hsl(223, 50%, 87%)', 
-        grayishBlue: 'hsl(225, 20%, 60%)', 
-        darkDesaturatedBlue: 'hsl(227, 35%, 25%)', 
+        lightGrayishBlueTwo: 'hsl(223, 50%, 87%)',
+        grayishBlue: 'hsl(225, 20%, 60%)',
+        darkDesaturatedBlue: 'hsl(227, 35%, 25%)',
       },
       fontFamily: {
         manrope: ['Manrope', 'sans-serif'],
