diff --git a/public/index.html b/public/index.html
index edf4567..1d8f581 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,9 @@
 			html {
 				scroll-behavior: smooth;
 			}
+			body {
+    overscroll-behavior: none;
+}
 			a {
 				all: unset;
 			}
diff --git a/src/components/AboutMe.scss b/src/components/AboutMe.scss
index 027ff24..5c7a70a 100644
--- a/src/components/AboutMe.scss
+++ b/src/components/AboutMe.scss
@@ -1,6 +1,5 @@
 @import "../res/theme/variable";
 :root {
-  --green: #{$green};
   --red: #{$red};
 }
 
@@ -10,9 +9,9 @@
 @media (min-width: 360px) and (max-width: 600px) {
   .about-section {
     padding-top: 3rem;
-    padding-bottom: 6rem;
+    padding-bottom: 3rem;
     align-items: center;
-    display: inline;
+    background-color: var(--black);
   }
 
   .logo {
@@ -22,8 +21,9 @@
   .about-title {
     font-weight: bold;
     font-size: 2rem;
+    padding-left: 2.5rem;
     text-align: start;
-    color: white;
+    color: var(--white);
     span {
       color: var(--red);
     }
@@ -31,7 +31,7 @@
 
   .about-text {
     text-align: justify;
-    margin: 2rem;
+    margin: 2.5rem;
     color: var(--white);
     font-size: 1.5rem;
     span {
@@ -44,21 +44,23 @@
 /* Tablets iPads (Portrait) */
 @media (min-width: 600px) and (max-width: 1024px) {
   .about-section {
-    padding-top: 3rem;
+    padding-top: 6rem;
     padding-bottom: 3rem;
     align-items: center;
     display: flex;
+    background-color: var(--black);
   }
 
   .logo {
-    height: 25rem;
+    height: 26rem;
   }
 
   .about-title {
     font-weight: bold;
-    font-size: 2.5rem;
+    font-size: 2.4rem;
+    padding-left: 2rem;
     text-align: start;
-    color: white;
+    color: var(--white);
     span {
       color: var(--red);
     }
@@ -68,7 +70,7 @@
     text-align: justify;
     margin: 2rem;
     color: var(--white);
-    font-size: 1.5rem;
+    font-size: 1.4rem;
     span {
       color: var(--red);
     }
@@ -83,6 +85,7 @@
     padding-bottom: 3rem;
     align-items: center;
     display: flex;
+    background-color: var(--black);
   }
   .logo {
     height: 35rem;
@@ -91,8 +94,9 @@
   .about-title {
     font-weight: bold;
     font-size: 2rem;
+    margin-left: 2rem;
     text-align: start;
-    color: white;
+    color: var(--white);
     span {
       color: var(--red);
     }
@@ -100,7 +104,7 @@
 
   .about-text {
     text-align: justify;
-    margin: 5rem;
+    margin: 2rem;
     color: var(--white);
     font-size: 1.5rem;
     span {
@@ -113,11 +117,10 @@
 /* Big Monitors */
 @media only screen and (min-width: 1281px) {
   .about-section {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
     display: grid;
-    align-items: center;
-    gap: 50px;
+    padding-top: 6rem;
+    box-sizing: border-box;
+    background-color: var(--black);
     grid-template-columns: 0.5fr 1.5fr;
   }
 
@@ -127,9 +130,10 @@
 
   .about-title {
     font-weight: bold;
-    font-size: 2rem;
+    font-size: 2.5rem;
+    padding-left: 5rem;
     text-align: start;
-    color: white;
+    color: var(--white);
     span {
       color: var(--red);
     }
@@ -137,14 +141,11 @@
 
   .about-text {
     text-align: justify;
-    margin: 5rem;
+    margin-inline: 5rem;
     color: var(--white);
     font-size: 1.5rem;
     span {
       color: var(--red);
     }
   }
-  .text-contain {
-    text-align: center;
-  }
 }
diff --git a/src/components/AboutMe.tsx b/src/components/AboutMe.tsx
index 43ad6a5..1612c1f 100644
--- a/src/components/AboutMe.tsx
+++ b/src/components/AboutMe.tsx
@@ -2,36 +2,34 @@ import React from "react";
 import "../components/AboutMe.scss";
 export default function SecondSection() {
   return (
-    <div style={{ backgroundColor: "#000000" }} id="aboutMe">
-      <div className="about-section">
-        <img
-          alt="about-me"
-          src={require("../res/background3.png")}
-          className="logo"
-        />
-        <div className="text-contain">
-          <p className="about-text">
-            <h3 className="about-title">
-              About <span className="about-me">Me</span>
-            </h3>
-            My self <span>Vishal Dhanotiya</span>. I am a Frontend developer. My
-            expertise lies in frontend technologies, including
-            <span> React Native</span>,<span> React.js</span>, and
-            <span> JavaScript</span>. Currently, I'm deeply engaged with
-            <span> HTML</span>,<span> CSS</span> and
-            <span> TypeScript</span>, pushing the boundaries of what can be
-            achieved. I maintain a perpetual commitment to honing my skills and
-            keeping pace with the ever-evolving landscape of industry trends.
-            <br></br>
-            <br></br>
-            <br></br>
-            I'm also a passionate to share my expertise and insights into the
-            world of frontend development. I enjoy sharing my knowledge with
-            others and helping fellow developers understand and be creative with
-            web and mobile technologies.
-          </p>
-        </div>
+    <section className="about-section" id="aboutMe">
+      <img
+        alt="about-me"
+        src={require("../res/background3.png")}
+        className="logo"
+      />
+      <div>
+        <h2 className="about-title">
+          About <span className="about-me">Me</span>
+        </h2>
+        <p className="about-text">
+          My self <span>Vishal Dhanotiya</span>. I am a Frontend developer. My
+          expertise lies in frontend technologies, including
+          <span> React Native</span>,<span> React.js</span>, and
+          <span> JavaScript</span>. Currently, I'm deeply engaged with
+          <span> HTML</span>,<span> CSS</span> and
+          <span> TypeScript</span>, pushing the boundaries of what can be
+          achieved. I maintain a perpetual commitment to honing my skills and
+          keeping pace with the ever-evolving landscape of industry trends.
+          <br></br>
+          <br></br>
+          <br></br>
+          I'm also a passionate to share my expertise and insights into the
+          world of frontend development. I enjoy sharing my knowledge with
+          others and helping fellow developers understand and be creative with
+          web and mobile technologies.
+        </p>
       </div>
-    </div>
+    </section>
   );
 }
diff --git a/src/components/Achievement.scss b/src/components/Achievement.scss
index e3a0f60..f514ab6 100644
--- a/src/components/Achievement.scss
+++ b/src/components/Achievement.scss
@@ -1,185 +1,150 @@
 @import "../res/theme/variable";
 :root {
   --white: #{$white};
+  --black: #{#000};
   --blood-red: #{$blood-red};
 }
+
 /* Extra small devices (phones, 600px and down) */
 /* Small devices (portrait tablets and large phones, 600px and up) */
 /* Mobile Devices */
 @media (min-width: 360px) and (max-width: 600px) {
-  .fifth-title {
+  .achievement-section {
+    background-color: var(--black);
+    padding: 1rem;
+  }
+
+  .achievement-title {
     color: white;
-    padding: 2rem;
     font-weight: bold;
     font-size: 2rem;
   }
-  .achievement-container {
-    padding: 10px;
-    background-color: black;
-  }
-  .pagination-container {
-    justify-content: center;
-    display: flex;
-  }
 
-  .certificate-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  .award-icon {
+    height: 5rem;
   }
-  .arrow {
-    width: 2rem;
-    height: 2rem;
-    margin-right: 1rem;
-    margin-left: 1rem;
+  .achievement-div {
+    display: block;
+    margin: 1rem;
   }
 
-  .reviewer-name {
-    justify-content: center;
-    align-items: center;
-    color: white;
+  .award-name {
     font-weight: bold;
-    font-size: 1.5rem;
+    padding-left: 1rem;
+    align-self: center;
+    color: var(--white);
+    font-size: 1.2rem;
   }
-
-  .certificate-name {
-    width: 15rem;
-    border-radius: 1%;
-    height: 10rem;
+  .center-div {
+    display: flex;
+    margin-block: 1rem;
   }
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 /* Tablets iPads (Portrait) */
 @media (min-width: 600px) and (max-width: 1024px) {
-  .fifth-title {
+  .achievement-section {
+    background-color: var(--black);
+    padding-top: 2rem;
+  }
+
+  .achievement-title {
     color: white;
-    padding: 2rem;
     font-weight: bold;
-    font-size: 2rem;
-  }
-  .achievement-container {
-    padding: 10px;
-    background-color: black;
-  }
-  .pagination-container {
-    justify-content: center;
-    display: flex;
+    font-size: 2.5rem;
   }
 
-  .certificate-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  .award-icon {
+    height: 6rem;
   }
-  .arrow {
-    width: 2rem;
-    height: 2rem;
-    margin-right: 1rem;
-    margin-left: 1rem;
+  .achievement-div {
+    display: inline-grid;
+    margin-inline: 3rem;
+    grid-template-columns: 1fr 1fr;
   }
 
-  .reviewer-name {
-    justify-content: center;
-    align-items: center;
-    color: white;
+  .award-name {
     font-weight: bold;
-    font-size: 1.5rem;
+    padding-left: 1rem;
+    align-self: center;
+    color: var(--white);
+    font-size: 1.4rem;
   }
-
-  .certificate-name {
-    width: 15rem;
-    border-radius: 1%;
-    height: 10rem;
+  .center-div {
+    display: flex;
+    margin-block: 1rem;
   }
 }
 
 /* Large devices (laptops/desktops, 992px and up) */
 /* Laptops and Desktops */
 @media (min-width: 1025px) and (max-width: 1280px) {
-  .fifth-title {
+  .achievement-section {
+    background-color: var(--black);
+    padding-top: 2rem;
+  }
+
+  .achievement-title {
     color: white;
-    padding: 2rem;
     font-weight: bold;
-    font-size: 2rem;
-  }
-  .achievement-container {
-    padding: 10px;
-    background-color: black;
-  }
-  .pagination-container {
-    justify-content: center;
-    display: flex;
+    font-size: 2.5rem;
   }
 
-  .certificate-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  .award-icon {
+    height: 5rem;
   }
-  .arrow {
-    width: 2rem;
-    height: 2rem;
-    margin-right: 1rem;
-    margin-left: 1rem;
+  .achievement-div {
+    display: grid;
+    margin-inline: 5rem;
+    grid-template-columns: 1fr 1fr;
   }
 
-  .reviewer-name {
-    justify-content: center;
-    align-items: center;
-    color: white;
+  .award-name {
     font-weight: bold;
-    font-size: 1.5rem;
+    padding-left: 1rem;
+    align-self: center;
+    color: var(--white);
+    font-size: 1.4rem;
   }
-
-  .certificate-name {
-    width: 30rem;
-    height: 20rem;
-    border-radius: 1%;
+  .center-div {
+    display: flex;
+    margin-block: 1rem;
   }
 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 /* Big Monitors */
 @media only screen and (min-width: 1281px) {
-  .fifth-title {
+  .achievement-section {
+    background-color: var(--black);
+    padding-top: 2rem;
+  }
+
+  .achievement-title {
     color: white;
-    padding: 2rem;
     font-weight: bold;
-    font-size: 3rem;
-  }
-  .achievement-container {
-    padding: 10px;
-    background-color: black;
-  }
-  .pagination-container {
-    justify-content: center;
-    display: flex;
+    font-size: 2.5rem;
   }
 
-  .certificate-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  .award-icon {
+    height: 5rem;
   }
-  .arrow {
-    width: 2rem;
-    height: 2rem;
-    margin-right: 2rem;
-    margin-left: 2rem;
+  .achievement-div {
+    display: grid;
+    margin-inline: 10rem;
+    grid-template-columns: 1fr 1fr;
   }
 
-  .reviewer-name {
-    justify-content: center;
-    align-items: center;
-    color: white;
+  .award-name {
     font-weight: bold;
-    font-size: 2rem;
+    padding-left: 1rem;
+    align-self: center;
+    color: var(--white);
+    font-size: 1.5rem;
   }
-
-  .certificate-name {
-    width: 35rem;
-    height: 20rem;
-    border-radius: 1%;
+  .center-div {
+    display: flex;
+    margin-block: 1rem;
   }
 }
diff --git a/src/components/Achievement.tsx b/src/components/Achievement.tsx
index e6b5737..e4c1640 100644
--- a/src/components/Achievement.tsx
+++ b/src/components/Achievement.tsx
@@ -1,127 +1,63 @@
-import React, { useState } from "react";
+import React from "react";
 import "./Achievement.scss";
-const gridImage = [
-  {
-    id: 1,
-    text: "Top Talent 2024",
-    value: require("../res/certificate/top2024.png"),
-  },
-  {
-    id: 2,
-    text: "Top Talent 2023",
-    value: require("../res/certificate/top2023.png"),
-  },
-  {
-    id: 3,
-    text: "Bravo - Individual Awards",
-    value: require("../res/certificate/bravo.png"),
-  },
-
-  {
-    id: 4,
-    text: "GenAI Foundation - GenAI Assisted Coding using Amazon CdeWhisperer on FY 2023",
-    value: require("../res/certificate/genai.png"),
-  },
-  {
-    id: 5,
-    text: "Interviewers Certification Workshop",
-    value: require("../res/certificate/interview.png"),
-  },
-  {
-    id: 6,
-    text: "React Native - The Practical Guide",
-    value: require("../res/certificate/rn2024.png"),
-  },
-
-  {
-    id: 7,
-    text: "Master CI/CD for React Native",
-    value: require("../res/certificate/ci-cd.png"),
-  },
-  {
-    id: 8,
-    text: "Fastlane for React Native: Deploy your app autonomously!",
-    value: require("../res/certificate/fastlane.png"),
-  },
-  {
-    id: 9,
-    text: "The Git & Github Bootcamp",
-    value: require("../res/certificate/github-bootcamp.png"),
-  },
-  {
-    id: 10,
-    text: "The Complete React Native + Hooks Course",
-    value: require("../res/certificate/hook.png"),
-  },
-  {
-    id: 11,
-    text: "Android Studio Masterclass Conquer the Android IDE",
-    value: require("../res/certificate/android-certificate.png"),
-  },
-  {
-    id: 12,
-    text: "Android Unit Testing and Test Driven Development",
-    value: require("../res/certificate/unit-testing.png"),
-  },
-];
-
-export default function Achievements() {
-  const [activeIndex, setActiveIndex] = useState(0);
 
+const Achievement = () => {
   return (
-    <div id="fifthSection" className="achievement-container">
-      <p className="fifth-title">Achievement</p>
+    <section className="achievement-section" id="achievement">
+      <h2 className="achievement-title">Achievement</h2>
 
-      <div className="certificate-container">
-        <img
-          alt="left-arrow"
-          src={require("../res/left-arrow.png")}
-          onClick={() => {
-            if (activeIndex) {
-              setActiveIndex(activeIndex - 1);
-            }
-          }}
-          className="arrow"
-        />
-        <div>
+      <div className="achievement-div">
+        <div className="center-div">
           <img
-            alt="certificate"
-            className="certificate-name"
-            src={gridImage[activeIndex].value}
+            alt="award-icon"
+            src={require("../res/award-icon.png")}
+            className="award-icon"
           />
+          <span className="award-name">{"Persistent Top Talent 2023-24"}</span>
+        </div>
+        <div className="center-div">
+          <img
+            alt="star"
+            src={require("../res/star.png")}
+            className="award-icon"
+          />
+          <span className="award-name">{"Codiant Star Performer 2020"}</span>
+        </div>
+        <div className="center-div">
+          <img
+            alt="bravo"
+            src={require("../res/bravo.png")}
+            className="award-icon"
+          />
+          <span className="award-name">{"Bravo Individual Award"}</span>
+        </div>
+        <div className="center-div">
+          <img
+            alt="diploma"
+            src={require("../res/diploma.png")}
+            className="award-icon"
+          />
+          <span className="award-name">{"Udemy Learning Certificate"}</span>
+        </div>
+        <div className="center-div">
+          <img
+            alt="creativity"
+            src={require("../res/creativity.png")}
+            className="award-icon"
+          />
+          <span className="award-name">{"Open Source Contributor"}</span>
+        </div>
+        <div className="center-div">
+          <img
+            alt="repo"
+            src={require("../res/repo.png")}
+            className="award-icon"
+          />
+          <span className="award-name">{"2K Reputation Stackoverflow"}</span>
         </div>
-
-        <img
-          alt="right-arrow"
-          src={require("../res/right-arrow.png")}
-          onClick={() => {
-            if (activeIndex < gridImage.length - 1) {
-              setActiveIndex(activeIndex + 1);
-            }
-          }}
-          className="arrow"
-        />
-      </div>
-      <div>
-        <p className="reviewer-name">{gridImage[activeIndex].text}</p>
-      </div>
-      <div className="pagination-container">
-        {gridImage.map((item, index) => {
-          return (
-            <div>
-              <div
-                style={{
-                  height: 10,
-                  width: 10,
-                  marginInline: 2,
-                  borderRadius: 5,
-                  backgroundColor: index === activeIndex ? "pink" : "gray",
-                }}
-              />
-            </div>
-          );
-        })}
       </div>
-    </div>
+    </section>
   );
-}
+};
+
+export default Achievement;
diff --git a/src/components/Blog.scss b/src/components/Blog.scss
index 5b26824..1b8cfce 100644
--- a/src/components/Blog.scss
+++ b/src/components/Blog.scss
@@ -1,7 +1,6 @@
 @import "../res/theme/variable";
 :root {
   --white: #{$white};
-  --gray: #{$gray};
   --blood-red: #{$blood-red};
 }
 /* Extra small devices (phones, 600px and down) */
@@ -11,55 +10,79 @@
   .blog-container {
     background-color: #000;
     padding: 10px;
-  }
-  .sixth-title {
-    color: var(--white);
-    padding: 2rem;
-    font-weight: bold;
-    font-size: 2rem;
+    box-sizing: border-box;
   }
   .blog-list {
+    padding-top: 3rem;
     justify-content: center;
-    align-items: center;
-    display: block;
-    padding-bottom: 5rem;
-    padding-left: 1.5rem;
-    grid-template-columns: 30rem 30rem 30rem 30rem;
-    list-style: none;
-  }
-  .blog-text-container {
-    margin: 2rem;
-    padding-top: 2rem;
+    display: grid;
+    box-sizing: border-box;
   }
   .blog-title {
-    margin-top: 3rem;
     color: var(--white);
+    padding-top: 3rem;
     font-weight: bold;
-    font-size: 1.2rem;
+    font-size: 2.5rem;
   }
-
-  .blog-content {
-    margin-top: 3rem;
-    font-size: 0.8rem;
+  .blog-text {
+    padding-inline: 2rem;
     color: var(--white);
+    font-weight: bold;
+    font-size: 1rem;
   }
-  .blog-button-container {
-    display: flex;
-    justify-content: center;
-    align-self: center;
+  .blog-sub-text {
+    padding-inline: 2rem;
+    margin-bottom: auto;
+    color: var(--white);
+    font-size: 0.8rem;
   }
 
-  .blog-image {
-    margin: 1.5rem;
-    height: 24rem;
-    width: 20rem;
-    font-weight: 500;
-    font-size: 0.9rem;
-    border-radius: 2rem;
-    background-repeat: no-repeat;
+  .blog-image1 {
+    align-content: flex-end;
+    height: 18rem;
+    width: 18rem;
+    margin-bottom: 2rem;
+
+    border-radius: 0.5rem;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/react-native.png") no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+  .blog-image2 {
+    align-content: flex-end;
+    margin-bottom: 2rem;
+
+    height: 18rem;
+    width: 18rem;
+    border-radius: 0.5rem;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/google-sign-in.png") no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+  .blog-image3 {
+    align-content: flex-end;
+    margin-bottom: 2rem;
+
+    height: 18rem;
+    width: 18rem;
+    border-radius: 0.5rem;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/expo-cli.png") no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+  .blog-image4 {
+    align-content: flex-end;
+    margin-bottom: 2rem;
+    height: 18rem;
+    width: 18rem;
+    border-radius: 0.5rem;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/google-sign-in.png") no-repeat;
     background-position: center;
     background-size: cover;
-    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), #000);
   }
 }
 
@@ -69,65 +92,77 @@
   .blog-container {
     background-color: #000;
     padding: 10px;
-  }
-  .sixth-title {
-    color: var(--white);
-    padding-top: 4rem;
-    font-weight: bold;
-    font-size: 3rem;
+    box-sizing: border-box;
   }
   .blog-list {
-    justify-content: center;
-    display: flex;
-    margin-inline: 1rem;
-    grid-template-columns: 30rem 30rem 30rem 30rem;
-    list-style: none;
-  }
-  .blog-text-container {
-    margin: 2rem;
-    padding: 0;
+    padding-top: 4rem;
+    display: inline-grid;
+    grid-template-columns: 1fr 1fr;
+    box-sizing: border-box;
   }
   .blog-title {
-    margin-top: 3rem;
     color: var(--white);
+    padding-top: 6rem;
     font-weight: bold;
-    font-size: 1.2rem;
+    font-size: 2.5rem;
   }
+  .blog-text {
+    padding-inline: 2rem;
 
-  .blog-content {
-    margin-top: 3rem;
-    font-size: 0.8rem;
     color: var(--white);
+    font-weight: bold;
+    font-size: 1rem;
   }
-  .blog-button-container {
-    display: flex;
-    justify-content: center;
-    align-self: center;
+  .blog-sub-text {
+    padding-inline: 2rem;
+    margin-bottom: auto;
+    color: var(--white);
+    font-size: 0.8rem;
   }
-  .blog-button {
-    color: var(--blood-red);
-    font-weight: 500;
-    font-size: 0.9rem;
+
+  .blog-image1 {
     margin: 2rem;
-    margin-bottom: 4rem;
-    padding-inline: 1rem;
-    padding-block: 0.8rem;
+    height: 18rem;
+    width: 18rem;
+    align-content: flex-end;
     border-radius: 0.5rem;
-    border-width: 2px;
-    border-color: var(--blood-red);
-    border-style: solid;
-  }
-  .blog-image {
-    margin: 1.5rem;
-    height: 24rem;
-    width: 20rem;
-    font-weight: 500;
-    font-size: 0.9rem;
-    border-radius: 2rem;
-    background-repeat: no-repeat;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/react-native.png") no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+  .blog-image2 {
+    align-content: flex-end;
+    margin: 2rem;
+    height: 18rem;
+    width: 18rem;
+    border-radius: 0.5rem;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/google-sign-in.png") no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+  .blog-image3 {
+    align-content: flex-end;
+    margin: 2rem;
+    height: 18rem;
+    width: 18rem;
+    border-radius: 0.5rem;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/expo-cli.png") no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+  .blog-image4 {
+    align-content: flex-end;
+    margin: 2rem;
+    height: 18rem;
+    width: 18rem;
+    border-radius: 0.5rem;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/google-sign-in.png") no-repeat;
     background-position: center;
     background-size: cover;
-    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), #000);
   }
 }
 
@@ -137,130 +172,154 @@
   .blog-container {
     background-color: #000;
     padding: 10px;
-  }
-  .sixth-title {
-    color: var(--white);
-    padding-top: 4rem;
-    font-weight: bold;
-    font-size: 2.2rem;
+    box-sizing: border-box;
   }
   .blog-list {
+    padding-top: 6rem;
     justify-content: center;
     display: flex;
-    margin-inline: 1rem;
-    grid-template-columns: 30rem 30rem 30rem 30rem;
-    list-style: none;
-  }
-  .blog-text-container {
-    margin: 2rem;
-    padding: 0;
+    box-sizing: border-box;
   }
   .blog-title {
-    margin-top: 3rem;
     color: var(--white);
+    padding-top: 6rem;
     font-weight: bold;
-    font-size: 1.2rem;
+    font-size: 2.5rem;
   }
+  .blog-text {
+    padding-inline: 2rem;
 
-  .blog-content {
-    margin-top: 3rem;
-    font-size: 0.8rem;
     color: var(--white);
+    font-weight: bold;
+    font-size: 1rem;
   }
-  .blog-button-container {
-    display: flex;
-    justify-content: center;
-    align-self: center;
+  .blog-sub-text {
+    padding-inline: 2rem;
+    margin-bottom: auto;
+    color: var(--white);
+    font-size: 0.8rem;
   }
-  .blog-button {
-    color: var(--blood-red);
-    font-weight: 500;
-    font-size: 0.9rem;
-    margin: 2rem;
-    margin-bottom: 4rem;
-    padding-inline: 1rem;
-    padding-block: 0.8rem;
+
+  .blog-image1 {
+    align-content: flex-end;
+    height: 16rem;
+    width: 16rem;
+    border-radius: 0.5rem;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/react-native.png") no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+  .blog-image2 {
+    align-content: flex-end;
+    margin-left: 2rem;
+    height: 16rem;
+    width: 16rem;
+    border-radius: 0.5rem;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/google-sign-in.png") no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+  .blog-image3 {
+    align-content: flex-end;
+    margin-left: 2rem;
+    height: 16rem;
+    width: 16rem;
+    border-radius: 0.5rem;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/expo-cli.png") no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+  .blog-image4 {
+    align-content: flex-end;
+    margin-left: 2rem;
+    height: 16rem;
+    width: 16rem;
     border-radius: 0.5rem;
-    border-width: 2px;
-    border-color: var(--blood-red);
-    border-style: solid;
-  }
-  .blog-image {
-    margin: 1.5rem;
-    height: 24rem;
-    width: 20rem;
-    font-weight: 500;
-    font-size: 0.9rem;
-    border-radius: 2rem;
-    background-repeat: no-repeat;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/google-sign-in.png") no-repeat;
     background-position: center;
     background-size: cover;
-    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), #000);
   }
 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 /* Big Monitors */
 @media only screen and (min-width: 1281px) {
-  .sixth-title {
-    color: var(--white);
-    padding-top: 6rem;
-    font-weight: bold;
-    font-size: 3rem;
-  }
   .blog-container {
     background-color: #000;
     padding: 10px;
+    box-sizing: border-box;
   }
   .blog-list {
+    padding-top: 6rem;
     justify-content: center;
     display: flex;
-    margin-inline: 1rem;
-    grid-template-columns: 30rem 30rem 30rem 30rem;
-    list-style: none;
-  }
-  .blog-text-container {
-    margin: 2rem;
-    padding: 0;
+    box-sizing: border-box;
   }
   .blog-title {
-    margin-top: 3rem;
     color: var(--white);
+    padding-top: 6rem;
     font-weight: bold;
-    font-size: 1.2rem;
+    font-size: 2.5rem;
   }
+  .blog-text {
+    padding-inline: 2rem;
 
-  .blog-content {
-    margin-top: 3rem;
-    font-size: 0.8rem;
     color: var(--white);
+    font-weight: bold;
+    font-size: 1rem;
   }
-  .blog-button-container {
-    display: flex;
-    justify-content: center;
-    align-self: center;
+  .blog-sub-text {
+    padding-inline: 2rem;
+    margin-bottom: auto;
+    color: var(--white);
+    font-size: 0.8rem;
   }
-  .blog-button {
-    color: var(--blood-red);
-    font-weight: 500;
-    font-size: 0.9rem;
-    margin: 2rem;
-    margin-bottom: 4rem;
-    padding-inline: 1rem;
-    padding-block: 0.8rem;
+
+  .blog-image1 {
+    align-content: flex-end;
+    height: 18rem;
+    width: 18rem;
+    border-radius: 0.5rem;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/react-native.png") no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+  .blog-image2 {
+    align-content: flex-end;
+    margin-left: 2rem;
+    height: 18rem;
+    width: 18rem;
+    border-radius: 0.5rem;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/google-sign-in.png") no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+  .blog-image3 {
+    align-content: flex-end;
+    margin-left: 2rem;
+    height: 18rem;
+    width: 18rem;
+    border-radius: 0.5rem;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/expo-cli.png") no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+  .blog-image4 {
+    align-content: flex-end;
+    margin-left: 2rem;
+    height: 18rem;
+    width: 18rem;
     border-radius: 0.5rem;
-    border-width: 2px;
-    border-color: var(--blood-red);
-    border-style: solid;
-  }
-  .blog-image {
-    margin: 1.5rem;
-    height: 24rem;
-    width: 20rem;
-    border-radius: 2rem;
-    background-repeat: no-repeat;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
+      url("../res/google-sign-in.png") no-repeat;
     background-position: center;
     background-size: cover;
-    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), #000);
   }
 }
diff --git a/src/components/Blog.tsx b/src/components/Blog.tsx
index 6d76b9d..071a189 100644
--- a/src/components/Blog.tsx
+++ b/src/components/Blog.tsx
@@ -26,33 +26,42 @@ const gridImage = [
 
 export default function MyBlogs() {
   return (
-    <div className="blog-container" id="blog">
-      <p className="sixth-title">Blog</p>
-
+    <section className="blog-container" id="blog">
+      <h2 className="blog-title">Blog</h2>
       <div className="blog-list">
-        {gridImage.map((item, index) => {
-          return (
-            <div
-              style={{
-                margin: 15,
-                height: 300,
-                backgroundColor: "#f0f0f0",
-                width: 300,
-                fontWeight: "500",
-                borderRadius: 5,
-                backgroundPosition: "center",
-                backgroundSize: "cover",
-                backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),url(${item.value})`,
-              }}
-            >
-              <div className="blog-text-container">
-                <p className="blog-title">{item.text}</p>
-                <p className="blog-content">{item.subTitle}</p>
-              </div>
-            </div>
-          );
-        })}
+        <div className="blog-image1">
+          <p className="blog-text">{"What is React Native?"}</p>
+          <p className="blog-sub-text">
+            {
+              "React Native helps to develop cross-platform applications for android and iOS."
+            }
+          </p>
+        </div>
+        <div className="blog-image2">
+          <p className="blog-text">
+            {"Sign In with Google in the React  Expo"}
+          </p>
+          <p className="blog-sub-text">
+            {"Explain Google sign integration for react native expo"}
+          </p>
+        </div>
+        <div className="blog-image3">
+          <p className="blog-text">{"Expo CLI vs React Native CLI"}</p>
+          <p className="blog-sub-text">
+            {
+              "There are two popular ways to create a React Native app- Expo CLI or React Native CLI"
+            }
+          </p>
+        </div>
+        <div className="blog-image4">
+          <p className="blog-text">
+            {"Coding Best Practices for React Native"}
+          </p>
+          <p className="blog-sub-text">
+            {"The purpose of this document is to detail the code conventions"}
+          </p>
+        </div>
       </div>
-    </div>
+    </section>
   );
 }
diff --git a/src/components/Contact.scss b/src/components/Contact.scss
index 9a79e91..ab4b6e0 100644
--- a/src/components/Contact.scss
+++ b/src/components/Contact.scss
@@ -1,80 +1,62 @@
 @import "../res/theme/variable";
 :root {
   --white: #{$white};
-  --gray: #{$gray};
-  --green: #{$green};
-  --dark-green: #{$dark-green};
+  --red: #{#ff004f};
+  --black: #{#000000};
 }
 /* Extra small devices (phones, 600px and down) */
 /* Small devices (portrait tablets and large phones, 600px and up) */
 /* Mobile Devices */
 @media (min-width: 360px) and (max-width: 600px) {
-  .seventh-background {
-    padding: 10px;
-    background-color: black;
+  .contact-container {
+    justify-content: center;
+    display: grid;
+    padding-top: 40px;
+    background-color: var(--black);
   }
-  .seventh-title {
-    color: var(--white);
-    padding-top: 5rem;
+  .contact-title {
     font-weight: bold;
-    font-size: 2.2rem;
-  }
-  .seventh-subtitle {
     color: var(--white);
-    font-size: 1rem;
+    font-size: 2.5rem;
+    text-align: left;
+    margin-bottom: 2rem;
   }
-  .touch-container {
-    display: inline;
-    justify-content: center;
+  .email-icon {
+    width: 45px;
+    height: 45px;
+    background-size: contain;
   }
-  .location-margin {
-    margin: 2rem;
+  .location-icon {
+    width: 45px;
+    height: 45px;
+    background-size: contain;
   }
-  .pin-image {
-    width: 1.5rem;
-    height: 1.5rem;
+  .detail {
+    justify-content: flex-start;
+    display: flex;
+    margin-block-end: 2rem;
+    align-items: center;
   }
 
-  .address-text {
-    font-size: 0.9rem;
-    color: var(--white);
-  }
   .name-input {
-    width: 15rem;
+    width: 18rem;
     height: 2.5rem;
     padding-inline: 1rem;
-    border-left-width: 0rem;
-    border-right-width: 0rem;
-    border-top-width: 0rem;
+
     margin-bottom: 1rem;
-    border-bottom-width: 0.2rem;
-    background-color: var(--white);
-    border-bottom-color: var(--white);
   }
   .email-input {
     color: var(--white);
-    width: 15rem;
+    width: 18rem;
     height: 2.5rem;
     padding-inline: 1rem;
-    border-left-width: 0rem;
-    border-right-width: 0rem;
-    border-top-width: 0rem;
     margin-bottom: 1rem;
-    border-bottom-width: 0.2rem;
-    background-color: var(--white);
-    border-bottom-color: var(--white);
   }
   .message-input {
-    width: 15rem;
-    height: 5rem;
+    width: 18rem;
+    height: 9rem;
     padding-inline: 1rem;
-    border-left-width: 0rem;
-    border-right-width: 0rem;
-    border-top-width: 0rem;
     margin-bottom: 2rem;
-    border-bottom-width: 0.2rem;
-    background-color: var(--white);
-    border-bottom-color: var(--white);
   }
   .submit-container {
     display: flex;
@@ -87,84 +69,84 @@
     font-size: 1rem;
     margin-bottom: 5rem;
     background-color: #ff004f;
-    width: 17rem;
+    width: 20rem;
     padding-block: 0.8rem;
     border-radius: 0.5rem;
-    border-width: 2px;
-    border-color: #ff004f;
-    border-style: solid;
+  }
+
+  .text-div {
+    display: inline-block;
+    text-align: left;
+    margin-left: 1rem;
+  }
+  .detail-title {
+    font-weight: bold;
+    color: var(--white);
+    font-size: 1.5rem;
+    text-align: left;
+    margin-bottom: 10px;
+  }
+  .detail-value {
+    color: var(--white);
+    font-size: 1rem;
+    text-align: left;
+    margin-bottom: 10px;
   }
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 /* Tablets iPads (Portrait) */
 @media (min-width: 600px) and (max-width: 1024px) {
-  .seventh-background {
-    padding: 10px;
-    background-color: black;
+  .contact-container {
+    justify-content: space-around;
+    display: flex;
+    padding-top: 80px;
+    padding-left: 2rem;
+    background-color: var(--black);
   }
-  .seventh-title {
-    color: var(--white);
-    padding-top: 5rem;
+  .contact-title {
     font-weight: bold;
-    font-size: 2.2rem;
-  }
-  .seventh-subtitle {
     color: var(--white);
-    font-size: 1rem;
+    font-size: 2.5rem;
+    text-align: left;
+    margin-bottom: 2rem;
   }
-  .touch-container {
-    display: flex;
-    justify-content: center;
+  .email-icon {
+    width: 45px;
+    height: 45px;
+    background-size: contain;
   }
-  .location-margin {
-    margin: 2rem;
+  .location-icon {
+    width: 45px;
+    height: 45px;
+    background-size: contain;
   }
-  .pin-image {
-    width: 2rem;
-    height: 2rem;
+  .detail {
+    display: flex;
+    margin-bottom: 1rem;
+    align-items: center;
   }
 
-  .address-text {
-    font-size: 0.9rem;
-    color: var(--white);
-  }
   .name-input {
-    width: 40rem;
+    width: 25rem;
     height: 2.5rem;
     padding-inline: 1rem;
-    border-left-width: 0rem;
-    border-right-width: 0rem;
-    border-top-width: 0rem;
+
     margin-bottom: 1rem;
-    border-bottom-width: 0.2rem;
-    background-color: var(--white);
-    border-bottom-color: var(--white);
   }
   .email-input {
     color: var(--white);
-    width: 40rem;
+    width: 25rem;
     height: 2.5rem;
     padding-inline: 1rem;
-    border-left-width: 0rem;
-    border-right-width: 0rem;
-    border-top-width: 0rem;
     margin-bottom: 1rem;
-    border-bottom-width: 0.2rem;
-    background-color: var(--white);
-    border-bottom-color: var(--white);
   }
   .message-input {
-    width: 40rem;
+    width: 25rem;
     height: 9rem;
     padding-inline: 1rem;
-    border-left-width: 0rem;
-    border-right-width: 0rem;
-    border-top-width: 0rem;
+
     margin-bottom: 2rem;
-    border-bottom-width: 0.2rem;
-    background-color: var(--white);
-    border-bottom-color: var(--white);
   }
   .submit-container {
     display: flex;
@@ -177,47 +159,63 @@
     font-size: 1rem;
     margin-bottom: 5rem;
     background-color: #ff004f;
-    width: 17rem;
+    width: 27rem;
     padding-block: 0.8rem;
     border-radius: 0.5rem;
-    border-width: 2px;
-    border-color: #ff004f;
-    border-style: solid;
   }
-}
 
-/* Large devices (laptops/desktops, 992px and up) */
-/* Laptops and Desktops */
-@media (min-width: 1025px) and (max-width: 1280px) {
-  .seventh-background {
-    padding: 10px;
-    background-color: black;
+  .text-div {
+    display: inline-block;
+    text-align: left;
+    margin-left: 1rem;
   }
-  .seventh-title {
-    color: var(--white);
-    padding-top: 5rem;
+  .detail-title {
     font-weight: bold;
-    font-size: 2.2rem;
+    color: var(--white);
+    font-size: 1.5rem;
+    text-align: left;
+    margin-bottom: 10px;
   }
-  .seventh-subtitle {
+  .detail-value {
     color: var(--white);
     font-size: 1rem;
+    text-align: left;
+    margin-bottom: 10px;
   }
-  .touch-container {
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+/* Laptops and Desktops */
+@media (min-width: 1025px) and (max-width: 1280px) {
+  .contact-container {
+    justify-content: space-around;
     display: flex;
-    justify-content: center;
+    padding-top: 80px;
+    background-color: var(--black);
   }
-  .location-margin {
-    margin: 2rem;
+  .contact-title {
+    font-weight: bold;
+    color: var(--white);
+    font-size: 2.5rem;
+    text-align: left;
+    margin-bottom: 2rem;
   }
-  .pin-image {
-    width: 2rem;
-    height: 2rem;
+  .email-icon {
+    width: 45px;
+    height: 45px;
+    background-size: contain;
   }
-  .address-text {
-    font-size: 0.9rem;
-    color: var(--white);
+  .location-icon {
+    width: 45px;
+    height: 45px;
+    background-size: contain;
+  }
+  .detail {
+    display: flex;
+    margin-bottom: 1rem;
+    align-items: center;
   }
+
   .name-input {
     width: 40rem;
     height: 2.5rem;
@@ -266,84 +264,86 @@
     font-size: 1rem;
     margin-bottom: 5rem;
     background-color: #ff004f;
-    width: 42rem;
+    width: 40rem;
     padding-block: 0.8rem;
     border-radius: 0.5rem;
     border-width: 2px;
     border-color: #ff004f;
     border-style: solid;
   }
+
+  .text-div {
+    display: inline-block;
+    text-align: left;
+    margin-left: 1rem;
+  }
+  .detail-title {
+    font-weight: bold;
+    color: var(--white);
+    font-size: 1.5rem;
+    text-align: left;
+    margin-bottom: 10px;
+  }
+  .detail-value {
+    color: var(--white);
+    font-size: 1rem;
+    text-align: left;
+    margin-bottom: 10px;
+  }
 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 /* Big Monitors */
 @media only screen and (min-width: 1281px) {
-  .seventh-background {
-    padding: 10px;
-    background-color: black;
+  .contact-container {
+    justify-content: space-between;
+    display: flex;
+    padding-top: 80px;
+    padding-inline: 6rem;
+    background-color: var(--black);
   }
-  .seventh-title {
-    color: var(--white);
-    padding-top: 5rem;
+  .contact-title {
     font-weight: bold;
-    font-size: 3rem;
-  }
-  .seventh-subtitle {
     color: var(--white);
-    font-size: 1rem;
+    font-size: 2.5rem;
+    text-align: left;
+    margin-bottom: 2rem;
   }
-  .touch-container {
-    display: flex;
-    justify-content: center;
+  .email-icon {
+    width: 45px;
+    height: 45px;
+    background-size: contain;
   }
-  .location-margin {
-    margin: 2rem;
+  .location-icon {
+    width: 45px;
+    height: 45px;
+    background-size: contain;
   }
-  .pin-image {
-    width: 2rem;
-    height: 2rem;
+  .detail {
+    display: flex;
+    margin-bottom: 1rem;
+    align-items: center;
   }
 
-  .address-text {
-    font-size: 0.9rem;
-    color: var(--white);
-  }
   .name-input {
     width: 40rem;
     height: 2.5rem;
+    margin-top: 2rem;
     padding-inline: 1rem;
-    border-left-width: 0rem;
-    border-right-width: 0rem;
-    border-top-width: 0rem;
     margin-bottom: 1rem;
-    border-bottom-width: 0.2rem;
-    background-color: var(--white);
-    border-bottom-color: var(--white);
   }
   .email-input {
     color: var(--white);
     width: 40rem;
     height: 2.5rem;
     padding-inline: 1rem;
-    border-left-width: 0rem;
-    border-right-width: 0rem;
-    border-top-width: 0rem;
     margin-bottom: 1rem;
-    border-bottom-width: 0.2rem;
-    background-color: var(--white);
-    border-bottom-color: var(--white);
   }
   .message-input {
     width: 40rem;
     height: 9rem;
     padding-inline: 1rem;
-    border-left-width: 0rem;
-    border-right-width: 0rem;
-    border-top-width: 0rem;
     margin-bottom: 2rem;
-    border-bottom-width: 0.2rem;
-    background-color: var(--white);
-    border-bottom-color: var(--white);
   }
   .submit-container {
     display: flex;
@@ -356,11 +356,27 @@
     font-size: 1rem;
     margin-bottom: 5rem;
     background-color: #ff004f;
-    width: 40rem;
-    padding-block: 0.8rem;
+    width: 42rem;
+    padding-block: 1rem;
     border-radius: 0.5rem;
-    border-width: 2px;
-    border-color: #ff004f;
-    border-style: solid;
+  }
+
+  .text-div {
+    display: inline-block;
+    text-align: left;
+    margin-left: 1rem;
+  }
+  .detail-title {
+    font-weight: bold;
+    color: var(--white);
+    font-size: 1.5rem;
+    text-align: left;
+    margin-bottom: 10px;
+  }
+  .detail-value {
+    color: var(--white);
+    font-size: 1rem;
+    text-align: left;
+    margin-bottom: 10px;
   }
 }
diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
index 8e1267a..bf2841b 100644
--- a/src/components/Contact.tsx
+++ b/src/components/Contact.tsx
@@ -1,40 +1,39 @@
 import React from "react";
-import "./Contact.scss";
-export default function ContactUs() {
-  return (
-    <div id="contact" className="seventh-background">
-      <h3 className="seventh-title">Let's Get In Touch</h3>
+import "../components/Contact.scss";
 
-      <div className="touch-container">
-        <div className="location-margin">
+const Contact = () => {
+  return (
+    <section id="contact" className="contact-container">
+      <div>
+        <h1 className="contact-title">Contact Me!</h1>
+        <div className="detail">
           <img
-            alt="location"
-            src={require("../res/pin.png")}
-            className="pin-image"
+            alt="email-icon"
+            src={require("../res/email-marketing.png")}
+            className="email-icon"
           />
-
-          <p className="address-text">India</p>
+          <div className="text-div">
+            <span className="detail-title">Mail</span>
+            <br></br>
+            <span className="detail-value">vishal.dhanotiya2@gmail.com</span>
+          </div>
         </div>
-        <div className="location-margin">
-          <img
-            src={require("../res/email.png")}
-            alt="pin"
-            className="pin-image"
-          />
 
-          <p className="address-text">vishal.dhanotiya2@gmail.com</p>
-        </div>
-        <div className="location-margin">
+        <div className="detail">
           <img
-            src={require("../res/call.png")}
-            alt="email"
-            className="pin-image"
+            alt="location-icon"
+            src={require("../res/geography.png")}
+            className="location-icon"
           />
-
-          <p className="address-text">9179237008</p>
+          <div className="text-div">
+            <span className="detail-title">Location</span>
+            <br></br>
+            <span className="detail-value">Indore, India</span>
+          </div>
         </div>
       </div>
-      <div style={{ display: "block", justifyContent: "center" }}>
+
+      <div>
         <input placeholder="Name" className="name-input" />
         <br />
         <input placeholder="Email" className="email-input" />
@@ -44,6 +43,8 @@ export default function ContactUs() {
           <div className="submit-button">{"Submit"}</div>
         </div>
       </div>
-    </div>
+    </section>
   );
-}
+};
+
+export default Contact;
diff --git a/src/components/Experience.scss b/src/components/Experience.scss
index fb33c4d..e90dfc5 100644
--- a/src/components/Experience.scss
+++ b/src/components/Experience.scss
@@ -1,7 +1,7 @@
 @import "../res/theme/variable";
 :root {
   --white: #{$white};
-  --gray: #{$gray};
+  --black: #{#000};
   --blood-red: #{$blood-red};
 }
 
@@ -11,7 +11,8 @@
 @media (min-width: 360px) and (max-width: 600px) {
   .fourth-section {
     align-items: center;
-    padding: 2rem;
+    padding: 1rem;
+    background-color: var(--black);
   }
 
   .experience-title {
@@ -53,14 +54,15 @@
   .fourth-section {
     justify-content: space-evenly;
     align-items: center;
-    padding-top: 4rem;
-    padding-left: 4rem;
+    padding-top: 3rem;
+    background-color: var(--black);
   }
 
   .experience-title {
     color: white;
     text-align: left;
     font-weight: bold;
+    padding-left: 4rem;
     font-size: 2.5rem;
   }
 
@@ -69,9 +71,12 @@
   }
   .experience-div {
     display: flex;
+    padding-left: 4rem;
   }
 
   .company-text {
+    text-align: left;
+
     font-weight: bold;
     display: flex;
     align-self: center;
@@ -98,15 +103,16 @@
   .fourth-section {
     justify-content: space-evenly;
     align-items: center;
-    padding-top: 6rem;
-    padding-left: 6rem;
+    padding-top: 2rem;
+    background-color: var(--black);
   }
 
   .experience-title {
     color: white;
     text-align: left;
     font-weight: bold;
-    font-size: 3rem;
+    font-size: 2.5rem;
+    padding-left: 4rem;
   }
 
   .office-logo {
@@ -114,6 +120,7 @@
   }
   .experience-div {
     display: grid;
+    padding-left: 4rem;
     align-items: center;
     grid-template-columns: 0.8fr 1fr;
   }
@@ -145,15 +152,17 @@
   .fourth-section {
     justify-content: space-evenly;
     align-items: center;
-    padding-top: 6rem;
-    padding-left: 6rem;
+    background-color: var(--black);
+    padding-top: 2rem;
   }
 
   .experience-title {
     color: white;
+    padding-left: 6rem;
+
     text-align: left;
     font-weight: bold;
-    font-size: 3rem;
+    font-size: 2.5rem;
   }
 
   .office-logo {
@@ -161,16 +170,15 @@
   }
   .experience-div {
     display: grid;
+    padding-left: 6rem;
     align-items: center;
     grid-template-columns: 0.8fr 1fr;
   }
 
-  .experience-box {
-    flex: 33.33%;
-  }
   .company-text {
     font-weight: bold;
     display: flex;
+    margin-bottom: 0.4rem;
     align-self: center;
     color: var(--white);
     font-size: 1.5rem;
diff --git a/src/components/Experience.tsx b/src/components/Experience.tsx
index 7d00f5e..d44e737 100644
--- a/src/components/Experience.tsx
+++ b/src/components/Experience.tsx
@@ -3,15 +3,17 @@ import "./Experience.scss";
 
 export default function MyExperience() {
   return (
-    <div style={{ backgroundColor: "#000000" }} id="experience">
+    <section className="fourth-section" id="experience">
       <div className="fourth-section">
-        <h3 className="experience-title">Experience</h3>
+        <h2 className="experience-title">Experience</h2>
 
         <div className="experience-div">
           <div>
             <div className="back-ground">
               <span className="company-text">{"Persistent Systems"}</span>
-              <span className="company-sub-text">{"Engineering Lead"}</span>
+              <span className="company-sub-text">
+                {"Senior Engineering Lead"}
+              </span>
               <span className="company-sub-text">{"Mar 2022 to Present"}</span>
             </div>
             <br></br>
@@ -49,12 +51,12 @@ export default function MyExperience() {
           <div>
             <img
               alt="office"
-              src={require("../res/office.png")}
+              src={require("../res/office1.png")}
               className="office-logo"
             />
           </div>
         </div>
       </div>
-    </div>
+    </section>
   );
 }
diff --git a/src/components/Home.scss b/src/components/Home.scss
index ed88193..aa6dab1 100644
--- a/src/components/Home.scss
+++ b/src/components/Home.scss
@@ -2,46 +2,43 @@
 :root {
   --white: #{$white};
   --red: #{#ff004f};
+  --black: #{#000000};
 }
 /* Extra small devices (phones, 600px and down) */
 /* Small devices (portrait tablets and large phones, 600px and up) */
 /* Mobile Devices */
 @media (min-width: 360px) and (max-width: 600px) {
-  .background {
-    background-color: #000;
-  }
   .home-container {
     padding-top: 10rem;
     justify-content: space-around;
     align-items: center;
+    background-color: var(--black);
   }
 
   .my-photo {
-    width: 20rem;
-    height: 25rem;
-    padding-left: 2rem;
+    height: 18rem;
+    transform: scaleX(-1);
+    -webkit-transform: scaleX(-1);
   }
 
   .name-container {
     display: inline;
     flex-direction: column;
   }
-  .hi-text {
+  .title {
     font-weight: bold;
     color: var(--white);
     font-size: 2rem;
+    span {
+      color: var(--red);
+    }
   }
-  .name-text {
-    font-weight: bold;
-    color: #ff004f;
-    font-size: 2rem;
+
+  .description {
+    font-size: 1.5rem;
     align-self: start;
-  }
-  .sub-text {
     font-weight: bold;
-    color: #ff004f;
-    font-size: 2rem;
-    align-self: start;
+    color: var(--red);
   }
 
   @keyframes wave {
@@ -82,10 +79,9 @@
     justify-content: center;
   }
   .circle {
-    width: 40px; /* Set the desired width */
-    height: 40px; /* Set the desired height */
-    border-radius: 50%; /* Make the div a circle */
-    display: flex;
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
     margin: 1rem;
     align-items: center;
     justify-content: center;
@@ -105,43 +101,37 @@
 /* Medium devices (landscape tablets, 768px and up) */
 /* Tablets iPads (Portrait) */
 @media (min-width: 600px) and (max-width: 1024px) {
-  .background {
-    background-color: #000;
-  }
-
   .home-container {
     display: grid;
     align-items: center;
     grid-template-columns: 1fr 0.3fr;
     height: 42rem;
     padding-top: 6rem;
-    justify-content: space-around;
-    align-items: center;
+    box-sizing: border-box;
+    background-color: var(--black);
   }
   .name-container {
     display: flex;
-    padding-left: 5rem;
+    padding-left: 3rem;
     flex-direction: column;
   }
   .my-photo {
-    height: 30rem;
-    width: 30rem;
+    height: 25rem;
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
   }
-  .hi-text {
+  .title {
     font-weight: bold;
     color: var(--white);
-    font-size: 2.5rem;
+    font-size: 2rem;
     text-align: left;
+    span {
+      color: var(--red);
+    }
   }
-  .name-text {
-    font-weight: bold;
-    color: #ff004f;
-    font-size: 2.5rem;
-    align-self: start;
-  }
-  .sub-text {
+  .description {
     font-weight: bold;
-    color: #ff004f;
+    color: var(--red);
     font-size: 1.5rem;
     align-self: start;
   }
@@ -180,14 +170,13 @@
 
   .social-section {
     display: flex;
-    justify-content: space-around;
   }
   .circle {
-    width: 32px; /* Set the desired width */
-    height: 32px; /* Set the desired height */
-    border-radius: 50%; /* Make the div a circle */
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
     display: flex;
-
+    margin-left: 1.5rem;
     align-items: center;
     justify-content: center;
     border-width: 1.5px;
@@ -206,9 +195,6 @@
 /* Large devices (laptops/desktops, 992px and up) */
 /* Laptops and Desktops */
 @media (min-width: 1025px) and (max-width: 1280px) {
-  .background {
-    background-color: #000;
-  }
   .home-container {
     display: flex;
     flex-direction: row;
@@ -216,32 +202,32 @@
     padding-top: 6rem;
     justify-content: space-around;
     align-items: center;
+    box-sizing: border-box;
+    background-color: var(--black);
   }
   .name-container {
     display: flex;
-    padding-left: 8rem;
     flex-direction: column;
   }
   .my-photo {
-    height: 35rem;
-    width: 35rem;
+    height: 30rem;
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
   }
-  .hi-text {
+  .title {
     font-weight: bold;
     color: var(--white);
     font-size: 2.5rem;
     text-align: left;
+    margin-bottom: 10px;
+    span {
+      color: var(--red);
+    }
   }
-  .name-text {
-    font-weight: bold;
-    color: #ff004f;
-    font-size: 2.5rem;
-    align-self: start;
-  }
-  .sub-text {
+  .description {
     font-weight: bold;
-    color: #ff004f;
-    font-size: 1.5rem;
+    color: var(--red);
+    font-size: 2rem;
     align-self: start;
   }
 
@@ -279,14 +265,13 @@
 
   .social-section {
     display: flex;
-    justify-content: space-around;
   }
   .circle {
     width: 32px; /* Set the desired width */
     height: 32px; /* Set the desired height */
     border-radius: 50%; /* Make the div a circle */
     display: flex;
-
+    margin-left: 1.5rem;
     align-items: center;
     justify-content: center;
     border-width: 1.5px;
@@ -305,42 +290,40 @@
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 /* Big Monitors */
 @media only screen and (min-width: 1281px) {
-  .background {
-    background-color: #000;
-  }
-
   .home-container {
+    grid-template-columns: 1fr 1fr;
     display: grid;
+    min-height: 100vh;
+    padding-top: 130px;
+    padding-bottom: 70px;
     align-items: center;
-    grid-template-columns: 1fr 0.3fr;
-    height: 42rem;
-    padding-top: 6rem;
-    justify-content: space-around;
+    box-sizing: border-box;
+    background-color: var(--black);
   }
 
   .name-container {
     display: flex;
-    padding-left: 8rem;
+    padding-left: 6rem;
     flex-direction: column;
   }
   .my-photo {
-    height: 40rem;
-    width: 50rem;
+    height: 35rem;
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
   }
 
-  .hi-text {
+  .title {
     font-weight: bold;
     color: var(--white);
     font-size: 2.5rem;
     text-align: left;
+    margin-bottom: 10px;
+    span {
+      color: var(--red);
+    }
   }
-  .name-text {
-    font-weight: bold;
-    color: var(--red);
-    font-size: 2.5rem;
-    align-self: start;
-  }
-  .sub-text {
+
+  .description {
     font-weight: bold;
     color: var(--red);
     font-size: 2rem;
@@ -382,11 +365,11 @@
   .social-section {
     display: flex;
     width: 60%;
-    justify-content: space-around;
   }
   .circle {
     width: 32px;
     height: 32px;
+    margin-left: 1.5rem;
     border-radius: 50%;
     border-color: var(--white);
     border-style: solid;
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 0d52d69..d076611 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -4,100 +4,81 @@ import Type from "./Type.tsx";
 
 const Home = () => {
   return (
-    <div id="home">
-      <div className="background">
-        <div className="home-container">
-          <div className="name-container">
-            <span className="hi-text">
-              Hello There! <span className="wave-emoji">👋🏻</span>
-            </span>
-            <br></br>
-            <span className="hi-text">
-              I'm <span className="name-text">Vishal Dhanotiya</span>
-            </span>
+    <section id="home" className="home-container">
+      <div className="name-container">
+        <h1 className="title">
+          Hello There! <span className="wave-emoji">👋🏻</span>
+          <br></br>
+          I'm <span>Vishal Dhanotiya</span>
+        </h1>
 
-            <p className="sub-text">
-              <Type />
-            </p>
+        <p className="description">
+          <Type />
+        </p>
 
-            <div className="social-section">
-              <span className="circle">
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href="https://github.com/vishaldhanotiya"
-                >
-                  <img
-                    alt="github"
-                    src={require("../res/github.png")}
-                    className="img"
-                  />
-                </a>
-              </span>
-              <span className="circle">
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href="https://www.facebook.com/vishal.dhanotiya.75/"
-                >
-                  <img
-                    alt="facebook"
-                    src={require("../res/facebook.png")}
-                    className="img"
-                  />
-                </a>
-              </span>
-              <span className="circle">
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href="https://stackoverflow.com/users/9158543/vishal-dhanotiya"
-                >
-                  <img
-                    alt="media"
-                    src={require("../res/stackoverflow.png")}
-                    className="img"
-                  />
-                </a>
-              </span>
-              <span className="circle">
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href="https://in.linkedin.com/in/vishal-dhanotiya-a7966599"
-                >
-                  <img
-                    alt="linkedin"
-                    src={require("../res/linkedin.png")}
-                    className="img"
-                  />
-                </a>
-              </span>
-              {/* <span className="circle">
-      <a
-        target="_blank"
-        rel="noreferrer"
-        href="https://stackoverflow.com/users/9158543/vishal-dhanotiya"
-      >
+        <div className="social-section">
+          <span className="circle">
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href="https://github.com/vishaldhanotiya"
+            >
+              <img
+                alt="github"
+                src={require("../res/github.png")}
+                className="img"
+              />
+            </a>
+          </span>
+          <span className="circle">
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href="https://www.facebook.com/vishal.dhanotiya.75/"
+            >
+              <img
+                alt="facebook"
+                src={require("../res/facebook.png")}
+                className="img"
+              />
+            </a>
+          </span>
+          <span className="circle">
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href="https://stackoverflow.com/users/9158543/vishal-dhanotiya"
+            >
+              <img
+                alt="media"
+                src={require("../res/stackoverflow.png")}
+                className="img"
+              />
+            </a>
+          </span>
+          <span className="circle">
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href="https://in.linkedin.com/in/vishal-dhanotiya-a7966599"
+            >
+              <img
+                alt="linkedin"
+                src={require("../res/linkedin.png")}
+                className="img"
+              />
+            </a>
+          </span>
+        </div>
+      </div>
+      <div>
         <img
-          alt="instagram"
-          src={require("../res/instagram.png")}
-          className="img"
+          alt="my-logo"
+          className="my-photo"
+          src={require("../res/myy.png")}
         />
-      </a>
-    </span> */}
-            </div>
-          </div>
-          <div>
-            <img
-              alt="my-logo"
-              className="my-photo"
-              src={require("../res/myy.png")}
-            />
-          </div>
-        </div>
       </div>
-    </div>
+    </section>
   );
 };
 
diff --git a/src/components/Skills.scss b/src/components/Skills.scss
index f8612c2..17295cf 100644
--- a/src/components/Skills.scss
+++ b/src/components/Skills.scss
@@ -1,7 +1,6 @@
 @import "../res/theme/variable";
 :root {
   --white: #{$white};
-  --gray: #{$gray};
   --black: #{$black};
 }
 /* Extra small devices (phones, 600px and down) */
@@ -10,13 +9,12 @@
 @media (min-width: 360px) and (max-width: 600px) {
   .main-background {
     display: flex;
-    padding: 2rem;
-    margin-top: -35px;
     flex-direction: column;
     background-color: var(--black);
   }
 
   .skill-title {
+    padding-inline: 3rem;
     font-weight: bold;
     font-size: 2rem;
     text-align: start;
@@ -106,14 +104,16 @@
 @media only screen and (min-width: 1281px) {
   .main-background {
     display: flex;
-    padding: 6rem;
+    padding-top: 5rem;
     flex-direction: column;
+    box-sizing: border-box;
     background-color: var(--black);
   }
 
   .skill-title {
     font-weight: bold;
-    font-size: 3rem;
+    font-size: 2.5rem;
+    padding-left: 6rem;
     text-align: start;
     color: white;
   }
@@ -125,7 +125,7 @@
   }
   .lang-title {
     align-self: center;
-    font-size: 2rem;
+    font-size: 1.8rem;
     font-weight: bold;
     color: var(--white);
   }
diff --git a/src/components/Skills.tsx b/src/components/Skills.tsx
index c4aeb93..3da73aa 100644
--- a/src/components/Skills.tsx
+++ b/src/components/Skills.tsx
@@ -2,10 +2,10 @@ import React from "react";
 import "../components/Skills.scss";
 export default function Skills() {
   return (
-    <div id="skills" className="main-background">
-      <h3 className="skill-title">Skills</h3>
+    <section id="skills" className="main-background">
+      <h2 className="skill-title">Skills</h2>
 
-      <h4 className="lang-title">Languages and Libraries</h4>
+      <h1 className="lang-title">Languages and Libraries</h1>
 
       <div>
         <img
@@ -54,7 +54,7 @@ export default function Skills() {
           className="skill-image"
         />
       </div>
-      <h4 className="lang-title">Tools</h4>
+      <h1 className="lang-title">Tools</h1>
 
       <div>
         <img
@@ -88,6 +88,6 @@ export default function Skills() {
           className="skill-image"
         />
       </div>
-    </div>
+    </section>
   );
 }
diff --git a/src/res/award-icon.png b/src/res/award-icon.png
new file mode 100644
index 0000000..c5b1466
Binary files /dev/null and b/src/res/award-icon.png differ
diff --git a/src/res/bravo.png b/src/res/bravo.png
new file mode 100644
index 0000000..c9ad68e
Binary files /dev/null and b/src/res/bravo.png differ
diff --git a/src/res/call.png b/src/res/call.png
deleted file mode 100644
index f43fe1a..0000000
Binary files a/src/res/call.png and /dev/null differ
diff --git a/src/res/certificate/android-certificate.png b/src/res/certificate/android-certificate.png
deleted file mode 100644
index 338ad55..0000000
Binary files a/src/res/certificate/android-certificate.png and /dev/null differ
diff --git a/src/res/certificate/bravo.png b/src/res/certificate/bravo.png
deleted file mode 100644
index 8f1c2ba..0000000
Binary files a/src/res/certificate/bravo.png and /dev/null differ
diff --git a/src/res/certificate/ci-cd.png b/src/res/certificate/ci-cd.png
deleted file mode 100644
index 4fc772f..0000000
Binary files a/src/res/certificate/ci-cd.png and /dev/null differ
diff --git a/src/res/certificate/fastlane.png b/src/res/certificate/fastlane.png
deleted file mode 100644
index a676104..0000000
Binary files a/src/res/certificate/fastlane.png and /dev/null differ
diff --git a/src/res/certificate/genai.png b/src/res/certificate/genai.png
deleted file mode 100644
index 373915b..0000000
Binary files a/src/res/certificate/genai.png and /dev/null differ
diff --git a/src/res/certificate/github-bootcamp.png b/src/res/certificate/github-bootcamp.png
deleted file mode 100644
index ff549c1..0000000
Binary files a/src/res/certificate/github-bootcamp.png and /dev/null differ
diff --git a/src/res/certificate/hook.png b/src/res/certificate/hook.png
deleted file mode 100644
index 708b23d..0000000
Binary files a/src/res/certificate/hook.png and /dev/null differ
diff --git a/src/res/certificate/interview.png b/src/res/certificate/interview.png
deleted file mode 100644
index 16eb323..0000000
Binary files a/src/res/certificate/interview.png and /dev/null differ
diff --git a/src/res/certificate/rn2024.png b/src/res/certificate/rn2024.png
deleted file mode 100644
index b98ba30..0000000
Binary files a/src/res/certificate/rn2024.png and /dev/null differ
diff --git a/src/res/certificate/top2023.png b/src/res/certificate/top2023.png
deleted file mode 100644
index ce0190b..0000000
Binary files a/src/res/certificate/top2023.png and /dev/null differ
diff --git a/src/res/certificate/top2024.png b/src/res/certificate/top2024.png
deleted file mode 100644
index 910f0a6..0000000
Binary files a/src/res/certificate/top2024.png and /dev/null differ
diff --git a/src/res/certificate/unit-testing.png b/src/res/certificate/unit-testing.png
deleted file mode 100644
index 96d34e8..0000000
Binary files a/src/res/certificate/unit-testing.png and /dev/null differ
diff --git a/src/res/creativity.png b/src/res/creativity.png
new file mode 100644
index 0000000..118bd5b
Binary files /dev/null and b/src/res/creativity.png differ
diff --git a/src/res/diploma.png b/src/res/diploma.png
new file mode 100644
index 0000000..32a8af2
Binary files /dev/null and b/src/res/diploma.png differ
diff --git a/src/res/email-marketing.png b/src/res/email-marketing.png
new file mode 100644
index 0000000..c91a3af
Binary files /dev/null and b/src/res/email-marketing.png differ
diff --git a/src/res/email.png b/src/res/email.png
deleted file mode 100644
index 5c6240c..0000000
Binary files a/src/res/email.png and /dev/null differ
diff --git a/src/res/geography.png b/src/res/geography.png
new file mode 100644
index 0000000..ed3272d
Binary files /dev/null and b/src/res/geography.png differ
diff --git a/src/res/logo.png b/src/res/logo.png
deleted file mode 100644
index 2cb2763..0000000
Binary files a/src/res/logo.png and /dev/null differ
diff --git a/src/res/my.png b/src/res/my.png
deleted file mode 100644
index a99cf18..0000000
Binary files a/src/res/my.png and /dev/null differ
diff --git a/src/res/myy.png b/src/res/myy.png
index b37dbee..c7ef163 100644
Binary files a/src/res/myy.png and b/src/res/myy.png differ
diff --git a/src/res/office.png b/src/res/office1.png
similarity index 100%
rename from src/res/office.png
rename to src/res/office1.png
diff --git a/src/res/pin.png b/src/res/pin.png
deleted file mode 100644
index f7acca0..0000000
Binary files a/src/res/pin.png and /dev/null differ
diff --git a/src/res/repo.png b/src/res/repo.png
new file mode 100644
index 0000000..031dcc1
Binary files /dev/null and b/src/res/repo.png differ
diff --git a/src/res/star.png b/src/res/star.png
new file mode 100644
index 0000000..19010c7
Binary files /dev/null and b/src/res/star.png differ
diff --git a/src/res/workspace.png b/src/res/workspace.png
new file mode 100644
index 0000000..010a2e5
Binary files /dev/null and b/src/res/workspace.png differ