diff --git a/package-lock.json b/package-lock.json
index 9377a554..c8a1d4b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,9 @@
         "react-simple-typewriter": "^5.0.1",
         "use-sound": "^4.0.1",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "sass": "^1.68.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -8254,6 +8257,12 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "devOptional": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -13759,6 +13768,23 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "node_modules/sass": {
+      "version": "1.68.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.68.0.tgz",
+      "integrity": "sha512-Lmj9lM/fef0nQswm1J2HJcEsBUba4wgNx2fea6yJHODREoMFnwRpZydBnX/RjyXw2REIwdkbqE4hrTo4qfDBUA==",
+      "devOptional": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -21976,6 +22002,12 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz",
       "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA=="
     },
+    "immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "devOptional": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -25792,6 +25824,17 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "sass": {
+      "version": "1.68.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.68.0.tgz",
+      "integrity": "sha512-Lmj9lM/fef0nQswm1J2HJcEsBUba4wgNx2fea6yJHODREoMFnwRpZydBnX/RjyXw2REIwdkbqE4hrTo4qfDBUA==",
+      "devOptional": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
diff --git a/package.json b/package.json
index 3db29b8d..c9af9515 100644
--- a/package.json
+++ b/package.json
@@ -36,5 +36,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "sass": "^1.68.0"
   }
 }
diff --git a/src/App.js b/src/App.js
index 1960c759..1991dd23 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,7 +9,6 @@ import RandomContributors from "./Components/randomcontributor/RandomContributor
 const App = () => {
   return (
     <React.Fragment>
-      <RandomContributors />
       <Header />
       <div
         className="flex justify-content-center"
diff --git a/src/Components/Header/Header.jsx b/src/Components/Header/Header.jsx
index b9730c83..9ea9fc11 100644
--- a/src/Components/Header/Header.jsx
+++ b/src/Components/Header/Header.jsx
@@ -1,17 +1,21 @@
 import React, { useState, useEffect } from "react";
 // import styles of this component
-import styles from "./Header.module.css"
-
+import "./Header.scss";
 // import other components
+// import ContainerCard from "../ContainerCard/ContainerCard";
+// import Nav from "../Nav/Nav";
+// import BrickLayout from "../BrickLayout/BrickLayout";
+// import { Typewriter } from "react-simple-typewriter";
 import ContainerCard from '../ContainerCard/ContainerCard';
 import Nav from "../Nav/Nav"
 import BrickLayout from "../BrickLayout/BrickLayout";
 import { Typewriter } from 'react-simple-typewriter'
+import RandomContributors from "../randomcontributor/RandomContributors";
 
 
 // Header component
 const Header = () => {
-  const [isMobile, setIsMobile] = useState(window.innerWidth > 640)
+  const [isMobile, setIsMobile] = useState(window.innerWidth > 640);
 
   useEffect(() => {
     function handleSize() {
@@ -21,55 +25,95 @@ const Header = () => {
 
     return () => {
       window.removeEventListener("resize", handleSize);
-    }
-  }, [])
-
+    };
+  }, []);
   return (
-    <header className={`${styles.header} flex justify-content-center`}>
-      <ContainerCard className="flex flex-column">
-        <div className={styles["blur-circle-shape"]}></div>
-        <Nav />
-        {isMobile && <BrickLayout />}
-        <div className={styles["blur-circle-shape-two"]}></div>
-        <div className={`${styles["headings-header"]} flex justify-content-center flex-column`}>
-          <h1 className={styles["heading-header-second-title"]}>
-            <p className={styles["text_open-source-project"]} >
-              <span
-                className={styles["span_open-source-project"]}
-                style={{ color: "#006dff" }}
-              >
-                An Open
-                <br />
-                <br />
-                Source
-                <br />
-                <br />
-                Project
-              </span>{" "}
-              <br />
-              <br />
-              <span style={{ color: '#FFE439', fontWeight: 'bold' }}>
-                <Typewriter
-                  words={[
-                    'to plant seeds 🌱 of inspiration.',
-                    'to codify 💻 your purpose.',
-                    'to compile your bucket 🪣 list.',
-                    'to learn how to contribute 📚.'
-                  ]}
-                  loop={true}
-                  cursor
-                  cursorStyle="_"
-                  typeSpeed={50}
-                  deleteSpeed={50}
-                  delaySpeed={1500}
-                />
-              </span>
-            </p>
-          </h1>
+    <header className={`flex`}>
+      <div className="text__container">
+        <div className="opensource__title">
+          <span>
+            An Open<br></br> Source<br></br> Project
+          </span>
+        </div>
+
+        <div className="github__section">
+          <div>
+            <span>
+              {" "}
+              Join us and <br></br>share your wish
+            </span>
+          </div>
+          <a
+            className="button"
+            href="https://github.com/BeforeIDieCode/BeforeIDieAchievements"
+            target="/black"
+          >
+            GitHub Repo
+          </a>
+        </div>
+      </div>
+      <div className={"animation__container flex justify-content-center"}>
+        <div className={"untitled"}>
+          <div className="untitled__slides">
+            <div className="untitled__slide">
+              <div className="untitled__slideBg"></div>
+              <div className="untitled__slideContent">
+                <span>
+                  Plant seeds🌱<br></br>of inspiration{" "}
+                </span>
+              </div>
+            </div>
+            <div className="untitled__slide">
+              <div className="untitled__slideBg"></div>
+              <div className="untitled__slideContent">
+                <span>
+                  To codify 💻<br></br> your purpose{" "}
+                </span>
+              </div>
+            </div>
+            <div className="untitled__slide">
+              <div className="untitled__slideBg"></div>
+              <div className="untitled__slideContent">
+                <span>
+                  To compile your<br></br> bucket 🪣 list
+                </span>
+              </div>
+            </div>
+
+            <div className="untitled__slide">
+              <div className="untitled__slideBg"></div>
+              <div className="untitled__slideContent">
+                <span>To learn how to contribute 📚
+                </span>
+              </div>
+            </div>
+            <div className="untitled__slide">
+              <div className="untitled__slideBg"></div>
+              <div className="untitled__slideContent">
+                <span>
+                  To learn <br></br>new skills 🎯
+                </span>
+              </div>
+            </div>
+            <div className="untitled__slide">
+              <div className="untitled__slideBg"></div>
+              <div className="untitled__slideContent">
+                <span>
+                  To advance <br></br>your career 💼
+                </span>
+              </div>
+            </div>
+            <div className="untitled__slide">
+              <div className="untitled__slideBg"></div>
+              <div className="untitled__slideContent"></div>
+            </div>
+          </div>
+          <div className="untitled__shutters"></div>
         </div>
-      </ContainerCard>
+      </div>
     </header>
+
   );
-}
+};
 
 export default Header;
diff --git a/src/Components/Header/Header.module.css b/src/Components/Header/Header.module.css
deleted file mode 100644
index bb9376e4..00000000
--- a/src/Components/Header/Header.module.css
+++ /dev/null
@@ -1,86 +0,0 @@
-.header {
-  position: relative;
-  height: 1000px;
-}
-
-.blur-circle-shape {
-  position: absolute;
-  top: -125px;
-  left: -125px;
-  border-bottom: 500px;
-  border-radius: 100%;
-  width: 861px;
-  height: 351px;
-  background: yellow;
-  z-index: 0;
-  filter: blur(250px);
-}
-
-.headings-header {
-  height: 100%;
-  margin-left: 40px;
-  z-index: 2;
-}
-
-.heading-header-title {
-  position: relative;
-  font-size: 1.2rem;
-  color: var(--green-400);
-  margin-left: 70px;
-}
-
-.heading-header-title::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: -70px;
-  transform: translateY(-50%);
-  width: 60px;
-  height: 2px;
-  background-color: var(--green-400);
-}
-
-.heading-header-title::after {
-  content: "";
-  position: relative;
-  top: 50%;
-  left: -28px;
-  transform: translateY(-50%) rotate(45deg);
-  width: 10px;
-  height: 10px;
-  background-color: var(--green-400);
-  box-shadow: 0 0 1px 3px var(--dark-900);
-  border-radius: 4px;
-}
-
-.heading-header-second-title {
-  color: #004aad;
-  font-size: 2.3rem;
-  margin-top: 0; /* Updated */
-  font-weight: bolder;
-  line-height: 50px;
-}
-
-.text_open-source-project {
-  font-size: 55px;
-}
-
-.span_open-source-project {
-  font-weight: bolder;
-  text-decoration: underline;
-  text-decoration-color: #feea3a;
-  font-size: 125px;
-}
-
-@media (max-width: 640px) {
-  .text_open-source-project {
-    font-size: 25px;
-  }
-  .span_open-source-project {
-    font-size: 75px;
-  }
-}
-
-.heading-header-second-title span {
-  color: var(--white-100);
-}
diff --git a/src/Components/Header/Header.scss b/src/Components/Header/Header.scss
new file mode 100644
index 00000000..6ef1ef67
--- /dev/null
+++ b/src/Components/Header/Header.scss
@@ -0,0 +1,291 @@
+$t: 2s;
+$e1: cubic-bezier(0.8, 0, 0.1, 1);
+$e2: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+$er: linear;
+$color: hsl(250, 96%, 49%);
+$slides: 7;
+$images: url("../../../public/img/dummy_image/1.jpg")
+  url("../../../public/img/dummy_image/2.jpg")
+  url("../../../public/img/dummy_image/3.jpg")
+  url("../../../public/img/dummy_image/4.jpg")
+  url("../../../public/img/dummy_image/6.jpg")
+  url("../../../public/img/dummy_image/7.jpg")
+  url("../../../public/img/dummy_image/5.jpg");
+
+header {
+  background-color: #09090a;
+  height: 100vh;
+  flex-direction: row-reverse;
+}
+.text__container {
+  flex-basis: 30%;
+  display: flex;
+  flex-direction: column;
+  gap: 10vmax;
+  padding: 5vmin;
+  .opensource__title {
+    span {
+      color: $color;
+      font-family: "Mefika", sans-serif;
+      font-size: 5vmax;
+      animation: rotateHue infinite $t * $slides * 2 linear;
+      animation-delay: calc($t / 17);
+    }
+  }
+  .github__section {
+    font-family: "Roboto Mono", sans-serif;
+    font-size: 3vmin;
+    font-weight: 800;
+    color: #efe4e4;
+    span {
+      line-height: 2vmax;
+      letter-spacing: 0.5vmax;
+    }
+
+    .button {
+      text-decoration: none;
+      text-transform: uppercase;
+      display: inline-block;
+      position: relative;
+      border: 3px solid white;
+      box-shadow: -0.5vmin 0.5vmin 0 rgba(white, 0.5);
+      background: transparent;
+      margin-top: 5vmin;
+      mix-blend-mode: lighten;
+      color: white;
+      padding: 3vmin 3vmin 2.4vmin 3vmin;
+      letter-spacing: 0.2em;
+      text-shadow: none;
+      line-height: 1;
+      transform: translate3d(0.5vmin, -0.5vmin, 0);
+      transition: all 100ms linear;
+      &:hover {
+        transform: translate3d(1vmin, -1vmin, 0);
+        box-shadow: -1vmin 1vmin 0 rgba(white, 0.5);
+        background: white;
+        color: black;
+      }
+      &:active {
+        transform: translate3d(0px, 0px, 0);
+        box-shadow: -0px 0px 0 rgba(white, 0.5);
+      }
+    }
+  }
+}
+.animation__container {
+  position: relative;
+  flex-basis: 70%;
+}
+
+.untitled {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  animation: rotateHue infinite $t * $slides * 2 linear;
+  animation-delay: calc($t / 7);
+  overflow: hidden;
+
+  &__shutters {
+    position: absolute;
+    height: 150vmax;
+    width: 150vmax;
+    left: calc(50% - 75vmax);
+    top: calc(50% - 75vmax);
+    pointer-events: none;
+    z-index: 2;
+    animation: rotateFrame $t * 4 $er infinite;
+
+    &:before,
+    &:after {
+      content: "hellooo";
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      left: 50%;
+      transform: translate3d(-50%, 0, 0);
+      background-color: $color;
+
+      pointer-events: auto;
+    }
+    &:before {
+      bottom: 50%;
+      animation: openTop $t * 2 infinite;
+    }
+    &:after {
+      top: 50%;
+      animation: openBottom $t * 2 infinite;
+    }
+  }
+
+  &__slides {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background-color: $color;
+  }
+
+  &__slide {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+    animation: showHideSlide infinite $t * $slides * 2 steps(1);
+    @for $i from 1 through $slides {
+      &:nth-child(#{$i}) {
+        animation-delay: $t * ($i - 1) * 2;
+        object-fit: cover;
+        .untitled__slideBg {
+          background-image: nth($images, $i);
+        }
+      }
+    }
+  }
+
+  &__slideBg {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: $color;
+    background-blend-mode: hard-light;
+    opacity: 1;
+    z-index: -1;
+    animation: bgInOut 4s -4s infinite;
+  }
+  &__slideContent {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    color: rgb(248, 252, 252);
+    line-height: 1;
+    letter-spacing: -0.025em;
+    z-index: 2;
+    opacity: 1;
+    text-shadow: #FEEA3A 5px 10px 10px;
+    span {
+      display: block;
+      font-size: 12vmin;
+      font-family: "Mefika", sans-serif;
+    }
+  }
+}
+
+@keyframes openTop {
+  0% {
+    transform: translate3d(-50%, 0, 0);
+    animation-timing-function: $e1;
+  }
+  40% {
+    transform: translate3d(-50%, -65vmax, 0);
+    animation-timing-functon: $e2;
+  }
+  70% {
+    transform: translate3d(-50%, -65vmax, 0);
+    animation-timing-functon: $e2;
+  }
+  100% {
+    transform: translate3d(-50%, 0, 0);
+    animation-timing-function: $e2;
+  }
+}
+@keyframes rotateHue {
+  0% {
+    filter: hue-rotate(0deg);
+  }
+  20% {
+    filter: hue-rotate(45deg);
+  }
+  25% {
+    filter: hue-rotate(90deg);
+  }
+  45% {
+    filter: hue-rotate(135deg);
+  }
+  50% {
+    filter: hue-rotate(180deg);
+  }
+  70% {
+    filter: hue-rotate(225deg);
+  }
+  75% {
+    filter: hue-rotate(270deg);
+  }
+  95% {
+    filter: hue-rotate(315deg);
+  }
+  100% {
+    filter: hue-rotate(360deg);
+  }
+}
+
+@keyframes rotateFrame {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(180deg);
+  }
+}
+@keyframes openBottom {
+  0% {
+    transform: translate3d(-50%, 0, 0);
+    animation-timing-function: $e1;
+  }
+  40% {
+    transform: translate3d(-50%, 65vmax, 0);
+    animation-timing-functon: $e2;
+  }
+  70% {
+    transform: translate3d(-50%, 65vmax, 0);
+    animation-timing-functon: $e2;
+  }
+  100% {
+    transform: translate3d(-50%, 0, 0);
+    animation-timing-function: $e2;
+  }
+}
+
+@keyframes showHideSlide {
+  0% {
+    opacity: 1;
+    pointer-events: auto;
+    z-index: 1;
+  }
+  #{ calc(100% / $slides)} {
+    opacity: 0;
+    pointer-events: none;
+    z-index: -1;
+  }
+  100% {
+    opacity: 0;
+    pointer-events: none;
+    z-index: -1;
+  }
+}
+
+@keyframes bgInOut {
+  0% {
+    transform: rotate(-45deg) scale(1.1);
+    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
+  33% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(0deg);
+  }
+  66% {
+    transform: rotate(0deg);
+    animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  }
+  100% {
+    transform: rotate(45deg) scale(0.9);
+  }
+}
diff --git a/src/Components/MasonryLayout/MasonryBox/MasonryBox.jsx b/src/Components/MasonryLayout/MasonryBox/MasonryBox.jsx
index d20e315e..c85a1814 100644
--- a/src/Components/MasonryLayout/MasonryBox/MasonryBox.jsx
+++ b/src/Components/MasonryLayout/MasonryBox/MasonryBox.jsx
@@ -76,7 +76,7 @@ const MasonryBox = ({
               className={styles.enlargedPhotoText}
               onClick={toggleText}
               // Adds 100% width if users text is 50 or less characters.
-              style={userText.length <= 50 ? { width: "100%" } : null}
+              style={userText.length <= 100 ? { width: "100%" } : null}
             >
               <h3>{presetText}</h3>
               <div style={{ position: "relative" }}>
diff --git a/src/Components/Title/Title.jsx b/src/Components/Title/Title.jsx
new file mode 100644
index 00000000..5f723edf
--- /dev/null
+++ b/src/Components/Title/Title.jsx
@@ -0,0 +1,258 @@
+import React, { useEffect } from "react";
+import "./Title.scss";
+
+function Title() {
+  const masks = [
+    "a-1",
+    "a-2",
+    "n",
+    "o",
+    "p-1",
+    "p-2",
+    "e",
+    "n-2",
+    "s",
+    "o-2",
+    "u",
+    "r",
+    "c",
+    "e-2",
+    "p-2-1",
+    "p-2-2",
+    "r-2",
+    "o-3",
+    "j-1",
+    "j-2",
+    "j-3",
+    "e-3",
+    "c-t-1",
+    "c-t-2",
+  ];
+  useEffect(() => {
+    masks.forEach((mask) => {
+      const id = `#mask-${mask}`;
+
+      let path = document.querySelector(id);
+
+      const length = path.getTotalLength();
+      console.log(length, id);
+      path.style.strokeDasharray = length;
+      path.style.strokeDashoffset = length;
+    });
+  }, []);
+
+  return (
+    <div className="title__container">
+      <svg
+        viewBox="0 0 560 536"
+        fill="none"
+        className="svg-draw"
+      >
+        <g>
+          <path
+            className="mask"
+            d="M5.48409 109.296C3.47891 109.296 8.26538 106.366 9.61023 105.38C17.1383 99.859 22.4104 94.5505 27.7232 86.777C43.5076 63.682 53.6961 38.2022 64.6485 12.6467C65.0114 11.8001 68.0391 1.9831 68.355 5.93297C69.2511 17.1334 67.3144 28.3766 66.4668 39.5015C64.6075 63.9047 67.1645 98.707 97.3778 100.484"
+            stroke="#B3401A"
+            id="mask-a-1"
+            stroke-width="10"
+            stroke-linecap="round"
+          />
+          <path
+            className="mask"
+            d="M19.3311 71.5314C20.8216 67.5568 48.1416 70.2144 52.3401 69.7131C71.0712 67.4766 90.0956 66.8418 108.707 63.9785"
+            stroke="#B3401A"
+            id="mask-a-2"
+            stroke-width="10"
+            stroke-linecap="round"
+          />
+        </g>
+        <path
+          className="mask"
+          d="M115 85.6958C115 76.5395 123.88 64.3486 133.812 63.107C138.429 62.5299 142.648 105.463 145.282 102.83C150.804 97.3076 158.272 56.5596 172.906 63.8763C187.391 71.119 174.309 98.2839 195.564 98.2839"
+          stroke="#B3401A"
+          stroke-width="10"
+          stroke-linecap="round"
+          id="mask-n"
+        />{" "}
+        <path
+          className="mask"
+          d="M288.685 114.189C268.14 120.276 246.049 109.906 232.388 94.5372C208.089 67.2006 235.085 32.2059 266.446 30.1277C296.875 28.1113 318.705 50.2096 323.163 79.4314C326.801 103.283 305.765 115.448 283.65 115.448"
+          stroke="#B3401A"
+          stroke-width="10"
+          stroke-linecap="round"
+          id="mask-o"
+        />
+        <g>
+          <path
+            className="mask"
+            d="M351.059 78.1207C351.059 73.3652 351.059 68.6096 351.059 63.8541C351.059 23.3972 349.687 144.829 346.024 185.12"
+            stroke="#B3401A"
+            stroke-width="10"
+            stroke-linecap="round"
+            id="mask-p-1"
+          />
+          <path
+            className="mask"
+            d="M335 59.3653C335 42.058 367.689 37.58 380.178 39.3641C391.856 41.0325 407.953 48.6343 409.9 61.8131C412.26 77.7879 390.067 88.211 378.01 91.605C373.77 92.7984 345.141 100.145 344.511 90.6959C344.024 83.3869 352.946 78.2525 358.638 76.5692C380.961 69.9667 401.176 97.4336 418.082 108.459"
+            stroke="#B3401A"
+            stroke-width="10"
+            stroke-linecap="round"
+            id="mask-p-2"
+          />
+        </g>
+        <path
+          className="mask"
+          d="M474 78.6958C474 69.5395 482.88 57.3486 492.812 56.107C497.429 55.5299 501.648 98.4629 504.282 95.8297C509.804 90.3076 517.272 49.5596 531.906 56.8763C546.391 64.119 533.309 91.2839 554.564 91.2839"
+          stroke="#B3401A"
+          stroke-width="10"
+          stroke-linecap="round"
+          id="mask-e"
+        />{" "}
+        <path
+          className="mask"
+          d="M426.367 63.5274C435.477 63.5274 466.027 64.643 456.159 48.7013C449.177 37.424 438.746 44.9995 433.919 53.1771C429.214 61.1498 420.296 74.9524 425.667 84.9273C430.191 93.3286 445.624 92.8696 453.431 92.3403C464.739 91.5737 469.948 84.4281 474.202 74.8567"
+          stroke="#B3401A"
+          stroke-width="10"
+          stroke-linecap="round"
+          id="mask-n-2"
+        />
+        <path
+          className="mask"
+          d="M94.0134 133.45C94.0134 114.871 58.3592 135.453 52.7521 140.863C33.8815 159.069 48.4887 170.537 66.4593 180.725C84.0241 190.683 110.431 204.518 107.161 228.98C103.877 253.548 69.0178 263.707 49.1156 267.024C35.6823 269.263 -1.46574 268.948 9.39288 244.365C15.092 231.463 44.5833 221.363 55.8293 232.477C70.4708 246.946 34.3736 268.88 26.0373 274.437"
+          stroke="#B3401A"
+          stroke-width="10"
+          stroke-linecap="round"
+          id="mask-s"
+        />
+        <path
+          className="mask"
+          d="M169.906 249.126C181.455 249.126 157.861 260.21 155.639 260.875C133.986 267.356 122.092 256.608 120.113 234.44C118.037 211.193 145.053 195.242 166.409 202.969C177.75 207.073 189.635 217.93 190.746 230.524C192.417 249.457 171.144 259.692 158.577 269.267"
+          stroke="#B3401A"
+          stroke-width="10"
+          stroke-linecap="round"
+          id="mask-o-2"
+        />
+        <path
+          className="mask"
+          d="M215.623 216.347C215.623 212.31 213.839 213.939 211.288 216.767C204.663 224.112 198 233.42 198 243.622C198 263.909 221.822 264.49 233.667 251.385C239.745 244.66 242.817 236.136 244.017 227.257C244.577 223.112 244.576 218.912 244.576 214.739C244.576 212.897 245.878 207.912 244.576 209.214C240.943 212.848 239.977 227.643 239.821 232.432C239.536 241.141 243.558 248.969 247.094 256.63"
+          stroke="#B3401A"
+          stroke-width="10"
+          stroke-linecap="round"
+          id="mask-u"
+        />
+        <path
+          className="mask"
+          d="M267.786 217.423C267.786 209.827 267.786 235.031 267.786 236.655C267.786 238.634 263.779 261.312 264.01 252.53C264.729 225.193 294.015 209.219 318.139 219.940"
+          stroke="#B3401A"
+          stroke-width="10"
+          stroke-linecap="round"
+          id="mask-r"
+        />
+        <path
+          className="mask"
+          d="M359.427 211.073C357.724 203.409 338.359 212.254 334.88 214.22C326.4 219.013 319.565 228.844 318.166 238.488C316.202 252.012 332.131 257.948 343.202 258.769C360.021 260.014 367.226 257.727 378.309 245.061"
+          stroke="#B3401A"
+          stroke-width="10"
+          stroke-linecap="round"
+          id="mask-c"
+        />
+        <path
+          className="mask"
+          d="M390.793 230.047C401.018 230.047 421.308 228.113 428.278 219.207C434.712 210.986 418.623 205.673 413.452 205.15C396.091 203.394 388.462 217.315 385.408 233.054C383.342 243.703 389.309 250.762 398.906 255.083C423.409 266.116 450.771 255.25 475.134 250.188"
+          stroke="#B3401A"
+          stroke-width="10"
+          stroke-linecap="round"
+          id="mask-e-2"
+        />
+        <g>
+          <path
+            className="mask"
+            d="M51.2136 341.154C36.9961 341.154 42.4019 391.919 42.4019 402.137C42.4019 435.519 42.4019 468.901 42.4019 502.283"
+            stroke="#B3401A"
+            stroke-width="10"
+            stroke-linecap="round"
+            id="mask-p-2-1"
+          />
+          <path
+            className="mask"
+            d="M24.7784 415.425C16.1158 399.281 8.67975 380.839 11.7706 361.995C16.1943 335.025 50.0891 326.444 72.6135 322.832C89.1019 320.187 110.99 316.634 126.743 324.51C136.419 329.349 143.274 341.917 137.932 352.344C126.336 374.979 86.9037 379.055 65.0606 382.696"
+            stroke="#B3401A"
+            stroke-width="10"
+            stroke-linecap="round"
+            id="mask-p-2-2"
+          />
+        </g>{" "}
+        <path
+          className="mask"
+          d="M157.331 341.294C157.331 359.654 156.575 414.417 153.834 396.262C151.865 383.215 153.01 363.654 161.317 352.903C167.735 344.598 180.5 335 191.319 335"
+          stroke="#B3401A"
+          stroke-width="10"
+          stroke-linecap="round"
+          id="mask-r-2"
+        />
+        <path
+          className="mask"
+          d="M236.538 389.927C247.814 392.425 222.381 398.145 220.068 398.314C197.526 399.959 188.237 386.894 191.098 364.822C194.098 341.676 223.924 331.944 243.104 344.107C253.289 350.565 262.546 363.735 260.907 376.271C258.445 395.118 235.461 400.511 221.121 407.142"
+          stroke="#B3401A"
+          stroke-width="10"
+          stroke-linecap="round"
+          id="mask-o-3"
+        />
+        <g>
+          <path
+            className="mask"
+            d="M286.837 351.812C285.186 366.676 283.335 380.928 285.159 396.43C287.764 418.577 295.432 439.96 299.425 461.888C302.328 477.826 305.922 494.397 300.684 510.283C296.32 523.521 281.665 529.151 268.654 530.004C253.629 530.99 240.301 519.693 235.366 505.947C223.358 472.508 259.871 448.416 281.802 429.858"
+            stroke="#B3401A"
+            stroke-width="10"
+            stroke-linecap="round"
+            id="mask-j-1"
+          />
+          <path
+            className="mask"
+            d="M300.684 343C289.277 343 255.435 347.668 266.836 348.035C282.358 348.536 297.972 346.445 313.272 344.259"
+            stroke="#B3401A"
+            stroke-width="10"
+            stroke-linecap="round"
+            id="mask-j-2"
+          />
+          <path
+            className="mask"
+            d="M294.165 297.096C295.856 297.265 297.559 297.944 299.201 298.355"
+            stroke="#B3401A"
+            stroke-width="10"
+            stroke-linecap="round"
+            id="mask-j-3"
+          />
+        </g>
+        <path
+          className="mask"
+          d="M313 366.936C318.289 372.981 349.21 363.293 353.702 356.306C361.345 344.416 351.733 335.693 339.715 338.543C318.056 343.679 311.635 386.12 320.553 402.323C325.595 411.483 337.827 415.017 347.687 413.653C359.015 412.085 365.653 401.62 372.164 393.372"
+          stroke="#B3401A"
+          stroke-width="10"
+          stroke-linecap="round"
+          id="mask-e-3"
+        />
+        <g>
+          <path
+            className="mask"
+            d="M422.345 355.661C420.73 349.741 413.799 346.277 408.078 347.409C392.069 350.578 385 374.53 385 388.111C385 405.311 397.85 413.586 414.093 413.777C436.403 414.039 444.67 390.07 448.5 372.026C451.886 356.074 452.914 339.726 456.333 323.771C459.296 309.946 451.385 338.442 450.808 340.346C446.001 356.223 442.708 388.376 461.998 396.643C486.031 406.943 505.67 383.469 516.756 365.732"
+            stroke="#B3401A"
+            stroke-width="10"
+            stroke-linecap="round"
+            id="mask-c-t-1"
+          />
+          <path
+            className="mask"
+            d="M389.836 339.896C394.79 346.502 420.386 340.852 426.131 340.315C444.275 338.622 462.327 336.372 480.47 334.86"
+            stroke="#B3401A"
+            stroke-width="10"
+            stroke-linecap="round"
+            id="mask-c-t-2"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+export default Title;
diff --git a/src/Components/Title/Title.scss b/src/Components/Title/Title.scss
new file mode 100644
index 00000000..90d8080d
--- /dev/null
+++ b/src/Components/Title/Title.scss
@@ -0,0 +1,124 @@
+$t: 2s;
+$slides: 9;
+$color: hsl(15, 75%, 40%);
+
+.svg-draw {
+  width: 15vmax;
+  height: 20vmax;
+  stroke: $color;
+  animation: rotateHue infinite $t * $slides * 2 linear;
+  @keyframes rotateHue {
+    0% {
+      filter: hue-rotate(0deg);
+    }
+    20% {
+      filter: hue-rotate(45deg);
+    }
+    25% {
+      filter: hue-rotate(90deg);
+    }
+    45% {
+      filter: hue-rotate(135deg);
+    }
+    50% {
+      filter: hue-rotate(180deg);
+    }
+    70% {
+      filter: hue-rotate(225deg);
+    }
+    75% {
+      filter: hue-rotate(270deg);
+    }
+    95% {
+      filter: hue-rotate(315deg);
+    }
+    100% {
+      filter: hue-rotate(360deg);
+    }
+  }
+  animation-delay: calc($t / 21);
+}
+@keyframes strokeOffset {
+  to {
+    stroke-dashoffset: 0px;
+  }
+}
+
+#mask-a-1 {
+  animation: strokeOffset 1s linear forwards;
+}
+#mask-a-2 {
+  animation: strokeOffset 1s linear forwards 1s;
+}
+#mask-n {
+  animation: strokeOffset 0.5s linear forwards 2s;
+}
+#mask-o {
+  animation: strokeOffset 0.5s linear forwards 2.5s;
+}
+#mask-p-1 {
+  animation: strokeOffset 0.5s linear forwards 3s;
+}
+
+#mask-p-2 {
+  animation: strokeOffset 0.5s linear forwards 3.5s;
+}
+
+#mask-n-2 {
+  animation: strokeOffset 0.5s linear forwards 4s;
+}
+#mask-e {
+  animation: strokeOffset 0.5s linear forwards 4.5s;
+}
+#mask-s {
+  animation: strokeOffset 0.5s linear forwards 5s;
+}
+
+#mask-o-2 {
+  animation: strokeOffset 0.5s linear forwards 5.5s;
+}
+#mask-u {
+  animation: strokeOffset 0.5s linear forwards 6s;
+}
+#mask-r {
+  animation: strokeOffset 0.5s linear forwards 6.5s;
+}
+
+#mask-c {
+  animation: strokeOffset 0.5s linear forwards 7s;
+}
+#mask-e-2 {
+  animation: strokeOffset 0.5s linear forwards 7.5s;
+}
+
+#mask-p-2-1 {
+  animation: strokeOffset 0.5s linear forwards 8s;
+}
+#mask-p-2-2 {
+  animation: strokeOffset 0.5s linear forwards 8.5s;
+}
+#mask-r-2 {
+  animation: strokeOffset 0.5s linear forwards 9s;
+}
+#mask-o-3 {
+  animation: strokeOffset 0.5s linear forwards 9.5s;
+}
+#mask-j-1 {
+  animation: strokeOffset 0.5s linear forwards 10s;
+}
+
+#mask-j-2 {
+  animation: strokeOffset 0.5s linear forwards 10.5s;
+}
+#mask-j-3 {
+  animation: strokeOffset 0.5s linear forwards 11s;
+}
+#mask-e-3 {
+  animation: strokeOffset 0.5s linear forwards 11.5s;
+}
+#mask-c-t-1 {
+  animation: strokeOffset 0.5s linear forwards 12s;
+}
+#mask-c-t-2 {
+  animation: strokeOffset 0.5s linear forwards 12.5s;
+}
diff --git a/src/fonts/Mefika/Mefikademo.ttf b/src/fonts/Mefika/Mefikademo.ttf
new file mode 100644
index 00000000..ada65bc2
Binary files /dev/null and b/src/fonts/Mefika/Mefikademo.ttf differ
diff --git a/src/index.css b/src/index.css
index 44b17c5a..80bccbe7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -12,6 +12,13 @@
   font-family: "Chalk_3";
   src: local("Chalk_3"), url("./fonts/Chalk/Chalk-3.ttf") format("truetype");
 }
+@font-face {
+
+    font-family: "Mefika";
+    src: local("Mefika"),
+     url("./fonts/Mefika/Mefikademo.ttf") format("truetype");
+
+}
 body {
   background: var(--dark-900);
 }