diff --git a/index.html b/index.html
index 654434e..048a3b4 100644
--- a/index.html
+++ b/index.html
@@ -20,113 +20,7 @@
       href="https://cdn.tailgrids.com/tailgrids-fallback.css"
     />
     <title>Seasonal Food App</title>
-    <style>
-      html, body {
-        width: 100%;
-        overflow-x: hidden;
-      }
-      .iphone-x {
-        position: relative;
-        margin: -10px auto;
-        max-width: 360px;
-        width: 100%;
-        min-width: 20vw;
-        aspect-ratio: calc(360/780);
-        background-color: #7371ee;
-        background-image: linear-gradient(60deg, #7371ee 1%, #a1d9d6 100%);
-        border-radius: 40px;
-        box-shadow: 0px 0px 0px 11px #1f1f1f, 0px 0px 0px 13px #191919,
-          0px 0px 0px 20px #111;
-        z-index: 100;
-      }
-      .iphone-x:before,
-      .iphone-x:after {
-        content: "";
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 5;
-      }
-      .iphone-x:after {
-        bottom: 7px;
-        width: 140px;
-        height: 4px;
-        background-color: #f2f2f2;
-        border-radius: 10px;
-      }
-      .iphone-x:before {
-        top: 0px;
-        width: 56%;
-        height: 30px;
-        background-color: #1f1f1f;
-        border-radius: 0px 0px 40px 40px;
-      }
-      .iphone-x i,
-      .iphone-x b,
-      .iphone-x s,
-      .iphone-x span {
-        position: absolute;
-        display: block;
-        color: transparent;
-        z-index: 10;
-      }
-      .iphone-x i {
-        top: 0px;
-        left: 50%;
-        transform: translate(-50%, 6px);
-        height: 8px;
-        width: 15%;
-        background-color: #101010;
-        border-radius: 8px;
-        box-shadow: inset 0px -3px 3px 0px rgba(255, 255, 255, 0.2);
-      }
-      .iphone-x b {
-        left: 10%;
-        top: 0px;
-        transform: translate(180px, 4px);
-        width: 12px;
-        height: 12px;
-        background-color: #101010;
-        border-radius: 12px;
-        box-shadow: inset 0px -3px 2px 0px rgba(255, 255, 255, 0.2);
-      }
-      .iphone-x b:after {
-        content: "";
-        position: absolute;
-        background-color: #2d4d76;
-        width: 6px;
-        height: 6px;
-        top: 2px;
-        left: 2px;
-        top: 3px;
-        left: 3px;
-        display: block;
-        border-radius: 4px;
-        box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5);
-      }
-      .iphone-x s {
-        top: 50px;
-        color: #fff;
-        text-align: center;
-        text-decoration: none;
-        width: 100%;
-        font-size: 70px;
-        font-weight: 100;
-        padding-top: 60px;
-      }
-      .iphone-x span {
-        bottom: 50px;
-        width: 40px;
-        height: 40px;
-        background-color: rgba(0, 0, 0, 0.3);
-        border-radius: 50%;
-        left: 30px;
-      }
-      .iphone-x span + span {
-        left: auto;
-        right: 30px;
-      }
-    </style>
+  
   </head>
 
   <body class="bg-[#f3ecf1] font-sans m-0 flex flex-col text-[#393232]">
@@ -159,13 +53,13 @@ <h3 class="font-display text-2xl md:text-4xl text-center my-5">
     </header>
     <!-- MAIN SECTION OF THE WEBSITE -->
     <main
-      class="mt-4 w-full flex flex-col md:flex-row items-center justify-center md:gap-8"
+      class="mt-4 w-full flex flex-col md:flex-row items-center gap-6"
     >
       <div
-        class="py-20 text-[#074e67] h-full md:order-2 text-center md:text-left md:flex-grow"
+        class="md:basis-1/2 py-20 text-[#074e67] h-full md:order-2 text-center md:text-left"
       >
         <div>
-          <p class="mx-7 text-4xl md:text-6xl">
+          <p class="mx-7 text-4xl md:text-6xl justify-start">
             Find out when <br />
             it's best to buy <br />
             <strong>your local produce </strong>
@@ -188,10 +82,10 @@ <h3 class="font-display text-2xl md:text-4xl text-center my-5">
           </div>
         </div>
       </div>
-      <div class="w-full md:w-auto md:flex-grow">
-        <div class="iphone-x overflow-hidden">
+      <div class="md:relative  w-full md:w-auto md:basis-1/2 md:min-h-[760px] md:top-4  ">
+        <div class="md:absolute relative md:right-[10px] iphone-x overflow-hidden ">
           <img
-            class="absolute top-0 w-full h-full"
+            class="absolute top-0 w-full h-full "
             src="./assets/phone-print.png"
           />
           <i>Speaker</i>
@@ -206,7 +100,7 @@ <h3 class="font-display text-2xl md:text-4xl text-center my-5">
       class="md:flex gap-6 md:gap-24 w-full bg-[#05878a] text-slate-50 text-center px-6 xl:px-56 py-5 pt-6 pb-8"
     >
       <div class="flex flex-col md:basis-1/3 md:justify-center items-center">
-        <img src="./assets/icon-month.svg" class="w-10 mt-2 mb-1" />
+        <img src="./assets/icon-month.svg" class="w-10 pt-8 md:pt-2 mb-1" />
         <h3 class="text-xl font-display">Monthly view</h3>
         <article class="">
           An easy to use app to check the seasonality of fruits and vegetables.
diff --git a/style.css b/style.css
index 7ae6caf..9f632aa 100644
--- a/style.css
+++ b/style.css
@@ -195,4 +195,111 @@ input[type=checkbox]:checked ~ #overlay-button span:after {
   text-decoration: none;
   
 }
+/* PHONE CSS */
+html, body {
+  width: 100%;
+  overflow-x: hidden;
+}
+.iphone-x {
+  /* position: relative; */
+  margin: -10px auto;
+  max-width: 360px;
+  width: 100%;
+  min-width: 20vw;
+  aspect-ratio: calc(360/780);
+  background-color: #7371ee;
+  background-image: linear-gradient(60deg, #7371ee 1%, #a1d9d6 100%);
+  border-radius: 40px;
+  box-shadow: 0px 0px 0px 11px #1f1f1f, 0px 0px 0px 13px #191919,
+    0px 0px 0px 20px #111;
+  z-index: 100;
+}
+.iphone-x:before,
+.iphone-x:after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 5;
+}
+.iphone-x:after {
+  bottom: 7px;
+  width: 140px;
+  height: 4px;
+  background-color: #f2f2f2;
+  border-radius: 10px;
+}
+.iphone-x:before {
+  top: 0px;
+  width: 56%;
+  height: 30px;
+  background-color: #1f1f1f;
+  border-radius: 0px 0px 40px 40px;
+}
+.iphone-x i,
+.iphone-x b,
+.iphone-x s,
+.iphone-x span {
+  position: absolute;
+  display: block;
+  color: transparent;
+  z-index: 10;
+}
+.iphone-x i {
+  top: 0px;
+  left: 50%;
+  transform: translate(-50%, 6px);
+  height: 8px;
+  width: 15%;
+  background-color: #101010;
+  border-radius: 8px;
+  box-shadow: inset 0px -3px 3px 0px rgba(255, 255, 255, 0.2);
+}
+.iphone-x b {
+  left: 10%;
+  top: 0px;
+  transform: translate(180px, 4px);
+  width: 12px;
+  height: 12px;
+  background-color: #101010;
+  border-radius: 12px;
+  box-shadow: inset 0px -3px 2px 0px rgba(255, 255, 255, 0.2);
+}
+.iphone-x b:after {
+  content: "";
+  position: absolute;
+  background-color: #2d4d76;
+  width: 6px;
+  height: 6px;
+  top: 2px;
+  left: 2px;
+  top: 3px;
+  left: 3px;
+  display: block;
+  border-radius: 4px;
+  box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5);
+}
+.iphone-x s {
+  top: 50px;
+  color: #fff;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  font-size: 70px;
+  font-weight: 100;
+  padding-top: 60px;
+}
+.iphone-x span {
+  bottom: 50px;
+  width: 40px;
+  height: 40px;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  left: 30px;
+}
+.iphone-x span + span {
+  left: auto;
+  right: 30px;
+}
+
 
