diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
index ba58f17f..d2c9c3d7 100644
--- a/src/components/Footer/Footer.js
+++ b/src/components/Footer/Footer.js
@@ -3,8 +3,7 @@ import { Fade } from "react-reveal";
 import emoji from "react-easy-emoji";
 import { Form } from "react-bootstrap";
 import {FaEnvelope} from "react-icons/fa";
-import styles from "./Footer.module.css";
-/* eslint-disable jsx-a11y/accessible-emoji */
+import styles from "./footer.module.scss";
 
 export default function Footer(props) {
   return (
@@ -28,7 +27,7 @@ export default function Footer(props) {
                 <FaEnvelope className={styles.icon} size={48} />
                 <input type="email" placeholder="Enter your email" required />
               </div>
-              <button className={styles.bsClass}>SUBSCRIBE</button>{" "}
+              <button className={styles.bsClass}>SUBSCRIBE</button>
             </div>
             <Form.Text className={styles.textMuted}>We'll never share your email with anyone else.</Form.Text>
           </Form.Group>
diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
deleted file mode 100644
index e08d874b..00000000
--- a/src/components/Footer/Footer.module.css
+++ /dev/null
@@ -1,126 +0,0 @@
-.footerText {
-  text-align: center;
-  color: white;
-  font-weight: 400;
-  font-size: 1.2rem;
-  padding: 30px;
-  padding-top: 0;
-}
-
-.footerDiv {
-  position: relative;
-  margin-top: 2rem;
-  background-image: url("./../../assets/images/footer/origami.webp");
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-.topShape {
-  overflow: hidden;
-  position: relative;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  width: 100%;
-  line-height: 0;
-  direction: ltr;
-}
-.topShape svg {
-  display: block;
-  width: calc(100% + 1.3px);
-  position: relative;
-  left: 50%;
-  -webkit-transform: translateX(-50%) rotateY(180deg);
-  -ms-transform: translateX(-50%) rotateY(180deg);
-  transform: translateX(-50%) rotateY(180deg);
-  overflow: hidden;
-}
-.topShape svg .svgPath {
-  fill: #fff;
-  -webkit-transform-origin: center;
-  -ms-transform-origin: center;
-  transform-origin: center;
-  -webkit-transform: rotateY(0deg);
-  transform: rotateY(0deg);
-}
-.tint {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background: #0e1120de;
-}
-.newsletter {
-  position: relative;
-  color: white;
-  text-align: center;
-  padding: 50px 0 70px 0;
-}
-.newsletter .heading h5 {
-  font-size: 2.5rem;
-  font-weight: 300;
-  margin-bottom: 3rem;
-}
-.newsletter .heading h6 {
-  font-weight: 300;
-  margin-bottom: 0;
-}
-.emailField {
-  min-width: 320px;
-  text-align: center;
-  margin: 0 5px;
-}
-.form {
-  display: inline-block;
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-}
-.box {
-  height: 40px;
-  background-color: white;
-  border-radius: 30px 0 0 30px;
-  display: flex;
-  align-items: center;
-  padding: 15px;
-  min-width: 220px;
-}
-.box input {
-  flex: 1;
-  height: 30px;
-  border: none;
-  outline: none;
-  font-size: 16px;
-}
-.bsClass {
-  border-radius: 0 30px 30px 0;
-  padding: 6px 15px;
-  background-color: #4285f4;
-  border: 2px solid #4285f4;
-  color: white;
-}
-.bsClass:hover {
-  background-color: #1963db;
-  border: 2px solid #1963db;
-}
-.icon {
-  padding: 10px;
-  color: dodgerblue;
-  min-width: 40px;
-}
-.textMuted {
-  padding-top: 11px;
-  font-size: 13px;
-}
-@media screen and (max-width: 474px) {
-  .form {
-    margin-left: 0px;
-  }
-  .form {
-    margin-left: 0px;
-  }
-  .textMuted {
-    text-align: center;
-  }
-}
diff --git a/src/components/Footer/footer.module.scss b/src/components/Footer/footer.module.scss
new file mode 100644
index 00000000..c5b7c5b0
--- /dev/null
+++ b/src/components/Footer/footer.module.scss
@@ -0,0 +1,137 @@
+@use './../../scss/colors';
+
+.footerDiv {
+  position: relative;
+  margin-top: 2rem;
+  background-image: url("./../../assets/images/footer/origami.webp");
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+
+  .topShape {
+    overflow: hidden;
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    line-height: 0;
+    direction: ltr;
+
+    svg {
+      display: block;
+      width: calc(100% + 1.3px);
+      position: relative;
+      left: 50%;
+      -webkit-transform: translateX(-50%) rotateY(180deg);
+      -ms-transform: translateX(-50%) rotateY(180deg);
+      transform: translateX(-50%) rotateY(180deg);
+      overflow: hidden;
+
+      .svgPath {
+        fill: colors.$white;
+        -webkit-transform-origin: center;
+        -ms-transform-origin: center;
+        transform-origin: center;
+        -webkit-transform: rotateY(0deg);
+        transform: rotateY(0deg);
+      }
+    }
+  }
+  .tint {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: colors.$black-dark-tint;
+  }
+
+  .newsletter {
+    position: relative;
+    color: colors.$white;
+    text-align: center;
+    padding: 50px 0 70px 0;
+
+    .heading {
+      h5 {
+        font-size: 2.5rem;
+        font-weight: 300;
+        margin-bottom: 3rem;
+      }
+      h6 {
+        font-weight: 300;
+        margin-bottom: 0;
+      }
+    }
+    
+    .emailField {
+      min-width: 320px;
+      text-align: center;
+      margin: 0 5px;
+
+      .form {
+        display: inline-block;
+        display: flex;
+        align-items: stretch;
+        justify-content: center;
+
+        .box {
+          height: 40px;
+          background-color: colors.$white;
+          border-radius: 30px 0 0 30px;
+          display: flex;
+          align-items: center;
+          padding: 15px;
+          min-width: 220px;
+
+          .icon {
+            padding: 10px;
+            color: colors.$royal-blue;
+            min-width: 40px;
+          }
+          input {
+            flex: 1;
+            height: 30px;
+            border: none;
+            outline: none;
+            font-size: 16px;
+          }
+        }
+        .bsClass {
+          border-radius: 0 30px 30px 0;
+          padding: 6px 15px;
+          background-color: colors.$royal-blue;
+          border: 2px solid colors.$royal-blue;
+          color: colors.$white;
+
+          &:hover {
+            background-color: colors.$navy-blue;
+            border: 2px solid colors.$navy-blue;
+          }
+        }
+      }
+      .textMuted {
+        padding-top: 11px;
+        font-size: 13px;
+      }
+      @media screen and (max-width: 474px) {
+        .form {
+          margin-left: 0px;
+        }
+        .textMuted {
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .footerText {
+    text-align: center;
+    color: colors.$white;
+    font-weight: 400;
+    font-size: 1.2rem;
+    padding: 30px;
+    padding-top: 0;
+  }
+}
diff --git a/src/components/ScrollToTopButton/scroll-to-top.module.scss b/src/components/ScrollToTopButton/scroll-to-top.module.scss
index 732b0c7f..c6e7c144 100644
--- a/src/components/ScrollToTopButton/scroll-to-top.module.scss
+++ b/src/components/ScrollToTopButton/scroll-to-top.module.scss
@@ -9,13 +9,13 @@
   font-size: 23px;
   width: 49px;
   transition: all 300ms ease-in-out;
-  background-color: colors.$blue1 !important;
+  background-color: colors.$royal-blue !important;
   color: colors.$white !important;
   box-shadow: 2px 2px 3px colors.$grey;
   border: none !important;
 
   &:hover {
-    background-color: colors.$blue1 !important;
+    background-color: colors.$royal-blue !important;
     transition: all 300ms ease-in-out;
   }
 
diff --git a/src/pages/Home/sections/Contact/ContactUs.jsx b/src/pages/Home/sections/Contact/ContactUs.jsx
index 62429fa1..43857781 100644
--- a/src/pages/Home/sections/Contact/ContactUs.jsx
+++ b/src/pages/Home/sections/Contact/ContactUs.jsx
@@ -3,7 +3,7 @@ import ExperienceForm from "./components/ExperienceForm/ExperienceForm";
 import Map from "./components/Map/Map";
 
 
-import styles from "./ContactUs.module.css";
+import styles from "./contact-us.module.scss";
 
 function ContactUs() {
   const mapRef = useRef()
diff --git a/src/pages/Home/sections/Contact/ContactUs.module.css b/src/pages/Home/sections/Contact/ContactUs.module.css
deleted file mode 100644
index 5ea8545c..00000000
--- a/src/pages/Home/sections/Contact/ContactUs.module.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.ContactUs {
-  text-align: center;
-  margin-top: 5rem;
-}
-
-.ContactUs > h2 {
-  margin-top: 5px;
-}
-
-.contact_and_info_container {
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-  flex-wrap: wrap;
-  background: #fff;
-  margin: 1rem 0 9rem;
-}
-
-.map {
-  min-height: 60vh;
-  min-width: 350px;
-  display: flex;
-  align-items: center;
-  flex: 1;
-  overflow: hidden;
-  margin: 0px 20px 0px 0px;
-}
-.titleMain {
-  font-family: "Poppins", sans-serif;
-  color: #4e89ae;
-  font-size: 3rem;
-  font-weight: bold;
-  text-shadow: 3px 4px 2px #0000002e;
-}
-@media (max-width: 418px) {
-  .map {
-    min-width: 100vw;
-    min-height: 67vh;
-  }
-}
diff --git a/src/pages/Home/sections/Contact/components/EmojiRating/EmojiRating.jsx b/src/pages/Home/sections/Contact/components/EmojiRating/EmojiRating.jsx
index fb136d23..7d4f11b4 100644
--- a/src/pages/Home/sections/Contact/components/EmojiRating/EmojiRating.jsx
+++ b/src/pages/Home/sections/Contact/components/EmojiRating/EmojiRating.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import styles from "./EmojiRating.module.css";
+import styles from "./emoji-rating.module.scss";
 
 function EmojiRating() {
   return (
diff --git a/src/pages/Home/sections/Contact/components/EmojiRating/EmojiRating.module.css b/src/pages/Home/sections/Contact/components/EmojiRating/EmojiRating.module.css
deleted file mode 100644
index 522c8d4b..00000000
--- a/src/pages/Home/sections/Contact/components/EmojiRating/EmojiRating.module.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.emojis {
-  justify-content: space-between;
-  margin-top: 10px;
-  user-select: none;
-}
-
-.radio {
-  display: none;
-}
-.radio ~ span {
-  font-size: 1.2rem;
-  filter: grayscale(100);
-  cursor: pointer;
-  transition: 0.3s;
-  margin: 8px;
-  display: block;
-}
-
-.radio:checked ~ span {
-  filter: grayscale(0);
-  font-size: 1.3rem;
-  margin: 6px;
-}
-
-.emoji {
-  transition: all 0.5s ease-in;
-}
-
-.emoji:hover {
-  filter: grayscale(0);
-  opacity: 1;
-  transform: scale(1.5);
-}
diff --git a/src/pages/Home/sections/Contact/components/EmojiRating/emoji-rating.module.scss b/src/pages/Home/sections/Contact/components/EmojiRating/emoji-rating.module.scss
new file mode 100644
index 00000000..900e94d4
--- /dev/null
+++ b/src/pages/Home/sections/Contact/components/EmojiRating/emoji-rating.module.scss
@@ -0,0 +1,35 @@
+.emojis {
+  justify-content: space-between;
+  margin-top: 10px;
+  user-select: none;
+
+  .emoji {
+    transition: all 0.5s ease-in;
+
+    &:hover {
+      filter: grayscale(0);
+      opacity: 1;
+      transform: scale(1.5);
+    }
+  }
+
+  .radio {
+    display: none;
+
+    & ~ span {
+      font-size: 1.2rem;
+      filter: grayscale(100);
+      cursor: pointer;
+      transition: 0.3s;
+      margin: 8px;
+      display: block;
+    }
+
+    &:checked ~ span {
+      filter: grayscale(0);
+      font-size: 1.3rem;
+      margin: 6px;
+      transform: scale(1.3);
+    }
+  }
+}
diff --git a/src/pages/Home/sections/Contact/components/ExperienceForm/ExpForm.module.css b/src/pages/Home/sections/Contact/components/ExperienceForm/ExpForm.module.css
deleted file mode 100644
index a46e7f35..00000000
--- a/src/pages/Home/sections/Contact/components/ExperienceForm/ExpForm.module.css
+++ /dev/null
@@ -1,190 +0,0 @@
-textarea {
-  border-radius: 8px;
-}
-
-.info {
-  width: 500px;
-}
-
-.general_info {
-  background: #3d1f90;
-  color: white;
-  margin: 0.35rem 1rem;
-  border-radius: 15px;
-}
-
-.general_info h2 {
-  padding: 40px 20px 10px;
-}
-
-.general_info p {
-  margin-top: 5px;
-}
-
-.contact_form {
-  width: 80%;
-  width: 100%;
-  margin: auto;
-}
-
-.contact_form input:focus {
-  border: 1px solid white;
-  border-radius: 20px;
-}
-
-.contact_form input {
-  width: 100%;
-  border: 0;
-  background: #fcfcfc;
-  height: 43px;
-  padding: 0 20px;
-  font-size: 16px;
-  outline: none;
-  color: #7b7474;
-  border-radius: 5px;
-}
-
-.contact_form input::placeholder {
-  font-size: 13px;
-}
-
-.contact_form textarea {
-  width: 100%;
-  border: 0;
-  background: #fcfcfc;
-  font-size: 16px;
-  outline: none;
-  resize: none;
-  padding: 10px;
-  height: 110px;
-  color: #7b7474;
-}
-
-.contact_form textarea:focus{
-  border: 1px solid white;
-  border-radius: 20px;
-}
-
-.submit {
-  background: #3d1f90;
-  font-size: 14px;
-  letter-spacing: 4px;
-  font-family: "Open Sans", sans-serif;
-  margin-top: 20px;
-  width: 100%;
-  max-width: 220px;
-  height: 50px;
-  line-height: 50px;
-  display: block;
-  text-align: center;
-  cursor: pointer;
-  align-self: flex-end;
-  border: 1px #fff solid;
-  position: relative;
-  overflow: hidden;
-  box-shadow: inset 2px 0px 2px white;
-  border-radius: 20px;
-}
-.buttonText {
-  position: relative;
-  z-index: 1;
-  font-weight: bolder;
-  color: #08fdd8;
-}
-.submit:hover .buttonText {
-  color: #272727;
-}
-.hoverEffect {
-  position: absolute;
-  display: block;
-  top: 0;
-  left: 0;
-  border-radius: 0 50% 100% 0;
-  background-color: #fcfcfc;
-  width: 500px;
-  height: 100%;
-  transform: scale(0, 1);
-  transform-origin: top left;
-}
-
-.submit:hover .hoverEffect {
-  transform: scale(1);
-  height: 200%;
-}
-
-.contact_form_container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: center;
-  gap: 15px;
-  padding: 20px;
-  overflow: hidden;
-  position: relative;
-  border-radius: 15px;
-}
-
-.fieldsWrap {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  position: relative;
-  z-index: 1;
-}
-.inputDiv {
-  gap: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: center;
-}
-
-.name {
-  display: flex;
-  gap: 8px;
-}
-
-.name > * {
-  width: 149px;
-}
-
-.experience {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
-
-.circle,
-.circle2 {
-  position: absolute;
-  border-radius: 100%;
-}
-
-.circle {
-  width: 500px;
-  height: 500px;
-  bottom: -250px;
-  right: -250px;
-  background-color: #caebb7eb;
-}
-
-.circle2 {
-  width: 200px;
-  height: 200px;
-  top: -150px;
-  left: -150px;
-  background-color: #7174ffeb;
-}
-
-.experience span {
-  color: white;
-  font-weight: bold;
-}
-
-@media (max-width: 890px) {
-  .info {
-    width: 450px;
-  }
-}
-
diff --git a/src/pages/Home/sections/Contact/components/ExperienceForm/ExperienceForm.jsx b/src/pages/Home/sections/Contact/components/ExperienceForm/ExperienceForm.jsx
index 4ec3e762..83b2908b 100644
--- a/src/pages/Home/sections/Contact/components/ExperienceForm/ExperienceForm.jsx
+++ b/src/pages/Home/sections/Contact/components/ExperienceForm/ExperienceForm.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import EmojiRating from "./../EmojiRating/EmojiRating";
 
-import styles from "./ExpForm.module.css";
+import styles from "./experience-form.module.scss";
 
 function response() {
   alert("Thank You for your valuable input 😊");
diff --git a/src/pages/Home/sections/Contact/components/ExperienceForm/experience-form.module.scss b/src/pages/Home/sections/Contact/components/ExperienceForm/experience-form.module.scss
new file mode 100644
index 00000000..c0b81e37
--- /dev/null
+++ b/src/pages/Home/sections/Contact/components/ExperienceForm/experience-form.module.scss
@@ -0,0 +1,172 @@
+
+@use './../../../../../../scss/colors';
+
+.info {
+  width: 500px;
+
+  .general_info {
+    background: colors.$dark-blue;
+    color: colors.$white;
+    margin: 0.35rem 1rem;
+    border-radius: 15px;
+    & h2 {
+      padding: 40px 20px 10px;
+    }
+    & p {
+      margin-top: 5px;
+    }
+
+    .contact_form {
+      width: 80%;
+      width: 100%;
+      margin: auto;
+
+      .contact_form_container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center;
+        gap: 15px;
+        padding: 20px;
+        overflow: hidden;
+        position: relative;
+        border-radius: 15px;
+
+        .circle {
+          position: absolute;
+          border-radius: 100%;
+          width: 500px;
+          height: 500px;
+          bottom: -250px;
+          right: -250px;
+          background-color: colors.$light-pink;
+
+          .circle2 {
+            position: absolute;
+            border-radius: 100%;
+            width: 200px;
+            height: 200px;
+            top: -150px;
+            left: -150px;
+            background-color: colors.$royal-blue;
+          }
+        }
+
+        .fieldsWrap {
+          display: flex;
+          flex-direction: column;
+          gap: 20px;
+          position: relative;
+          z-index: 1;
+
+          .inputDiv {
+            gap: 8px;
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            justify-content: center;
+
+            input {
+              width: 100%;
+              border: 0;
+              background: colors.$light-grey;
+              height: 43px;
+              padding: 0 20px;
+              font-size: 16px;
+              outline: none;
+              color: colors.$grey;
+              border-radius: 5px;
+              &:focus {
+                border: 1px solid colors.$white;
+                border-radius: 20px;
+              }
+              &::placeholder {
+                font-size: 13px;
+              }
+            }
+          }
+          .experience {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
+
+            span {
+              color: colors.$white;
+              font-weight: bold;
+            }
+          }
+          textarea {
+            border-radius: 8px;
+            width: 100%;
+            border: 0;
+            background: colors.$light-grey;
+            font-size: 16px;
+            outline: none;
+            resize: none;
+            padding: 10px;
+            height: 110px;
+            color: colors.$grey;
+          }
+          .submit {
+            background: colors.$dark-blue;
+            font-size: 14px;
+            letter-spacing: 4px;
+            font-family: "Open Sans", sans-serif;
+            margin-top: 20px;
+            width: 100%;
+            max-width: 220px;
+            height: 50px;
+            line-height: 50px;
+            display: block;
+            text-align: center;
+            cursor: pointer;
+            align-self: flex-end;
+            border: 1px colors.$white solid;
+            position: relative;
+            overflow: hidden;
+            box-shadow: inset 2px 0px 2px colors.$white;
+            border-radius: 20px;
+
+            .buttonText {
+              position: relative;
+              z-index: 1;
+              font-weight: bolder;
+              color: colors.$light-blue;
+            }
+
+            .hoverEffect {
+              position: absolute;
+              display: block;
+              top: 0;
+              left: 0;
+              border-radius: 0 50% 100% 0;
+              background-color: colors.$light-grey;
+              width: 500px;
+              height: 100%;
+              transform: scale(0, 1);
+              transform-origin: top left;
+            }
+
+            &:hover {
+              
+              & .hoverEffect {
+                transform: scale(1);
+                height: 200%;
+              }
+              & .buttonText {
+                color: colors.$black-dark-tint;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .info {
+    min-width: 70%;
+  }
+}
diff --git a/src/pages/Home/sections/Contact/components/Map/Map.jsx b/src/pages/Home/sections/Contact/components/Map/Map.jsx
index 1b1f87d6..b29371c4 100644
--- a/src/pages/Home/sections/Contact/components/Map/Map.jsx
+++ b/src/pages/Home/sections/Contact/components/Map/Map.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { MapContainer, TileLayer, Marker, Popup, useMap, LayersControl } from "react-leaflet";
-import "./Map.css";
+import "./map.scss";
 import { FiCrosshair } from "react-icons/fi";
 const position = [13.0827, 80.2707];
 
diff --git a/src/pages/Home/sections/Contact/components/Map/Map.css b/src/pages/Home/sections/Contact/components/Map/map.scss
similarity index 68%
rename from src/pages/Home/sections/Contact/components/Map/Map.css
rename to src/pages/Home/sections/Contact/components/Map/map.scss
index e300ff34..edcf76ca 100644
--- a/src/pages/Home/sections/Contact/components/Map/Map.css
+++ b/src/pages/Home/sections/Contact/components/Map/map.scss
@@ -1,3 +1,5 @@
+@use './../../../../../../scss/colors';
+
 .leaflet-container {
   width: 100%;
   height: 98%;
@@ -8,48 +10,24 @@
   display: none;
 }
 
-.mapToolTip,
-.reCenter {
-  position: absolute;
-  bottom: 10px;
-  z-index: 400;
-  font-size: 17px;
-  font-weight: 300;
-  line-height: 0.5;
-  font-family: monospace, "sans-serif";
-  cursor: default;
-}
-
-.mapToolTip {
-  width: 230px;
-  padding: 1.5rem;
-  left: 10px;
-  background: rgba(29, 24, 24, 0.9);
-  color: #fff;
-  border-radius: 5px;
-}
-
-.mapToolTip a {
-  cursor: pointer;
-}
-
 .leaflet-popup-content-wrapper {
-  background-color: rgba(29, 24, 24, 0.9);
-  color: white;
+  background-color: colors.$black-dark-tint;
+  color: colors.$white;
 }
+
 .leaflet-popup-tip {
-  background-color: rgba(29, 24, 24, 0.9);
+  background-color: colors.$black-dark-tint;
 }
 
 .leaflet-control-layers.leaflet-control {
-  background: #1b1b1b;
+  background: colors.$black-dark-tint;
 }
 
 .leaflet-control-layers-base {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  color: white;
+  color: colors.$white;
   font-family: "Montserrat";
   padding: 0.5rem;
   gap: 8px;
@@ -62,11 +40,37 @@
   padding: 0, 3rem;
 }
 
+.mapToolTip,
+.reCenter {
+  position: absolute;
+  bottom: 10px;
+  z-index: 400;
+  font-size: 17px;
+  font-weight: 300;
+  line-height: 0.5;
+  font-family: monospace, "sans-serif";
+  cursor: default;
+}
+
+.mapToolTip {
+  width: 230px;
+  padding: 1.5rem;
+  left: 10px;
+  background: colors.$black-dark-tint;
+  color: colors.$white;
+  border-radius: 5px;
+
+  a {
+    cursor: pointer;
+  }
+}
+
 .reCenter {
   border-radius: 100%;
   right: 10px;
-  background: rgba(245, 245, 245, 0.9);
+  background: colors.$light-grey;
   padding: 5px;
   border: none;
-  box-shadow: 2px 2px 3px rgb(15, 14, 14);
+  box-shadow: 2px 2px 3px colors.$black-dark-tint;
 }
+
diff --git a/src/pages/Home/sections/Contact/contact-us.module.scss b/src/pages/Home/sections/Contact/contact-us.module.scss
new file mode 100644
index 00000000..ca81dbd7
--- /dev/null
+++ b/src/pages/Home/sections/Contact/contact-us.module.scss
@@ -0,0 +1,37 @@
+@use './../../../../scss/mixin';
+@use './../../../../scss/colors';
+
+.ContactUs {
+  text-align: center;
+  margin-top: 5rem;
+
+  .titleMain {
+    @include mixin.section-title;
+  }
+
+  .contact_and_info_container {
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    flex-wrap: wrap;
+    background: colors.$white;
+    margin: 1rem 0 9rem;
+
+    .map {
+      min-height: 60vh;
+      min-width: 350px;
+      display: flex;
+      align-items: center;
+      flex: 1;
+      overflow: hidden;
+      margin: 0px 20px 0px 0px;
+    }
+
+    @media (max-width: 418px) {
+      .map {
+        min-width: 100vw;
+        min-height: 67vh;
+      }
+    }
+  }
+}
diff --git a/src/pages/Home/sections/OpenSource/OpenSource.module.scss b/src/pages/Home/sections/OpenSource/OpenSource.module.scss
index 9cf25759..7c45d3d7 100644
--- a/src/pages/Home/sections/OpenSource/OpenSource.module.scss
+++ b/src/pages/Home/sections/OpenSource/OpenSource.module.scss
@@ -25,7 +25,7 @@
       grid-template-rows: auto auto auto;
       grid-template-areas: "image" "text" "stats";
       border-radius: 18px;
-      box-shadow: 2px 2px 6px 0px colors.$black_0-3;
+      box-shadow: 2px 2px 6px 0px colors.$black-light-tint;
       text-align: center;
       overflow: hidden;
       position: relative;
@@ -37,7 +37,7 @@
 
       &:hover {
         transform: scale(1.15);
-        box-shadow: 2px 2px 6px 0px colors.$black_0-3;
+        box-shadow: 2px 2px 6px 0px colors.$black-light-tint;
       }
 
       &:before {
@@ -100,11 +100,11 @@
 
         .card_btn {
           background-color: colors.$steel-blue;
-          background: linear-gradient(to bottom, colors.$white1 10%, colors.$light-purple 100%);
+          background: linear-gradient(to bottom, colors.$bluish-white 10%, colors.$light-purple 100%);
           color: colors.$white;
           transition: 0.6s;
           border-radius: 5px;
-          box-shadow: 0 3px 14px colors.$black_0-3;
+          box-shadow: 0 3px 14px colors.$black-light-tint;
           letter-spacing: 0.2px;
           padding: 0.7rem 1rem;
           text-decoration: none;
@@ -113,8 +113,8 @@
         .card_btn:hover {
           color: colors.$light-purple;
           background-color: colors.$white;
-          background: linear-gradient(to bottom, colors.$white1 10%, colors.$white 100%);
-          box-shadow: 0px 0px 10px colors.$blue1;
+          background: linear-gradient(to bottom, colors.$bluish-white 10%, colors.$white 100%);
+          box-shadow: 0px 0px 10px colors.$royal-blue;
           text-decoration: none;
         }
       }
diff --git a/src/scss/_colors.scss b/src/scss/_colors.scss
index 5aad302f..0ebf03b4 100644
--- a/src/scss/_colors.scss
+++ b/src/scss/_colors.scss
@@ -1,11 +1,22 @@
 $white: #fff;
-$white1: #bcdbee;
-$black_0-3: #0000004d;
+$bluish-white: #bcdbee;
+
+$black-light-tint: #0000004d;
+$black-dark-tint: #000000de;
 $black: #000;
+
+$light-pink: #bfdbb4;
+
+$light-grey:#fcfcfc;
+$grey: grey;
+
 $light-purple: #376f92;
 $purple: #103f5f;
+
 $light-blue: #add8e6;
 $steel-blue: #4e89ae;
-$blue1:#4285f4;
-$grey: grey;
+$royal-blue:#4285f4;
+$navy-blue:#1963db;
+$dark-blue:#3d1f90;
+
 $red: red;