diff --git a/assets/fonts/otf/manrope-bold.otf b/assets/fonts/otf/manrope-bold.otf
new file mode 100644
index 0000000..c5bc096
Binary files /dev/null and b/assets/fonts/otf/manrope-bold.otf differ
diff --git a/assets/fonts/variable/Manrope[wght].ttf b/assets/fonts/variable/Manrope[wght].ttf
new file mode 100644
index 0000000..9c9a74a
Binary files /dev/null and b/assets/fonts/variable/Manrope[wght].ttf differ
diff --git a/assets/fonts/web/manrope-bold.woff2 b/assets/fonts/web/manrope-bold.woff2
new file mode 100644
index 0000000..280f478
Binary files /dev/null and b/assets/fonts/web/manrope-bold.woff2 differ
diff --git a/index.css b/index.css
index 6916d08..d3fee49 100644
--- a/index.css
+++ b/index.css
@@ -1,9 +1,30 @@
+@charset "UTF-8";
+@font-face {
+  font-family: "Manrope VF";
+  src: url("/assets/fonts/variable/Manrope%5Bwght%5D.ttf")
+    format("truetype-variations");
+  font-style: normal;
+  font-weight: 200 800;
+}
+
+@font-face {
+  font-family: "Manrope";
+  src: url("/assets/fonts/web/manrope-bold.woff2") format("woff2"),
+    url("/assets/fonts/otf/manrope-bold.otf") format("opentype");
+  font-style: normal;
+  font-weight: 700;
+}
+
 body {
   align-items: center;
   background: var(--bg-color);
   color: var(--text-color);
-  font-family: "Manrope", sans-serif;
+  font-family: "Manrope VF", Manrope, sans-serif;
   font-feature-settings: "calt", "liga";
+  font-size: 64px;
+  font-variation-ligatures: normal;
+  font-variation-settings: "wght" 500;
+  font-weight: 700;
   margin: 0%;
   max-width: 100vw;
   overflow-x: hidden;
@@ -54,8 +75,11 @@ body {
 
 .footer a {
   color: var(--text-color) !important;
-  font-family: "Manrope", sans-serif;
-  font-weight: bold;
+  font-family: "Manrope VF", Manrope, sans-serif;
+  font-feature-settings: "calt", "liga";
+  font-variation-ligatures: normal;
+  font-variation-settings: "wght" 500;
+  font-weight: 700;
   text-decoration: none;
 }
 
diff --git a/index.html b/index.html
index fb7e13c..ba94b96 100644
--- a/index.html
+++ b/index.html
@@ -10,15 +10,11 @@
       href="https://fonts.googleapis.com/css?family=Asap|Asap+Condensed&display=swap"
       rel="stylesheet"
     />
-    <link
-      href="https://github.com/sharanda/manrope/raw/master/fonts/web/index.css"
-      rel="stylesheet"
-    />
     <script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
-    <script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
+    <script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
     <script
-      src="https://code.jquery.com/jquery-3.4.1.min.js"
-      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
+      src="https://code.jquery.com/jquery-3.5.0.min.js"
+      integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
       crossorigin="anonymous"
     ></script>
     <link rel="stylesheet" href="index.css" />
@@ -52,27 +48,27 @@
         <span>K_</span>
       </div>
       <div id="username">
-        <span id="text" style="display:block;"></span>
+        <span id="text" style="display: block;"></span>
         <div class="console-underscore" id="console">_</div>
       </div>
       <div id="about">
-        <span style="display:none;">
+        <span style="display: none;">
           <span class="iconify" data-icon="mdi-face"></span>
           &nbsp; null
         </span>
-        <span style="display:block;">
+        <span style="display: block;">
           <a href="https://github.com/k4ustu3h">
             <span class="iconify" data-icon="mdi-github-circle"></span>
             &nbsp;&nbsp;@k4ustu3h
           </a>
         </span>
-        <span style="display:block;">
+        <span style="display: block;">
           <a href="mailto:k4ustu3h@gmail.com" target="_blank" class="socials">
             <span class="iconify" data-icon="mdi-email"></span>
             &nbsp;&nbsp;k4ustu3h@gmail.com
           </a>
         </span>
-        <span style="display:block;">
+        <span style="display: block;">
           <a
             href="https://www.google.com/maps/search/?api=1&amp;query=Jabalpur, Madhya Pradesh, India"
           >
@@ -80,12 +76,12 @@
             &nbsp;&nbsp;Jabalpur, Madhya Pradesh, India
           </a>
         </span>
-        <span style="display:none;">
+        <span style="display: none;">
           <span class="iconify" data-icon="mdi-account-tie"></span>
           &nbsp;&nbsp; Available for hire
         </span>
         <div class="socials">
-          <span style="display:block;">
+          <span style="display: block;">
             <a
               href="https://codepen.io/k4ustu3h"
               target="_blank"
@@ -94,12 +90,12 @@
               <span class="iconify" data-icon="simple-icons:codepen"></span>
             </a>
           </span>
-          <span style="display:block;">
+          <span style="display: block;">
             <a href="https://dev.to/k4ustu3h" target="_blank" class="socials">
               <span class="iconify" data-icon="mdi-dev-to"></span>
             </a>
           </span>
-          <span style="display:block;">
+          <span style="display: block;">
             <a
               href="https://www.dribbble.com/k4ustu3h"
               target="_blank"
@@ -108,7 +104,7 @@
               <span class="iconify" data-icon="mdi-dribbble"></span>
             </a>
           </span>
-          <span style="display:block;">
+          <span style="display: block;">
             <a
               href="https://facebook.com/k4ustu3h"
               target="_blank"
@@ -117,7 +113,7 @@
               <span class="iconify" data-icon="mdi-facebook-box"></span>
             </a>
           </span>
-          <span style="display:block;">
+          <span style="display: block;">
             <a
               href="https://www.instagram.com/k4ustu3h"
               target="_blank"
@@ -126,7 +122,7 @@
               <span class="iconify" data-icon="mdi-instagram"></span>
             </a>
           </span>
-          <span style="display:block;">
+          <span style="display: block;">
             <a
               href="https://keybase.io/k4ustu3h"
               target="_blank"
@@ -135,7 +131,7 @@
               <span class="iconify" data-icon="simple-icons:keybase"></span>
             </a>
           </span>
-          <span style="display:block;">
+          <span style="display: block;">
             <a
               href="https://medium.com/@k4ustu3h"
               target="_blank"
@@ -144,7 +140,7 @@
               <span class="iconify" data-icon="fa-brands:medium-m"></span>
             </a>
           </span>
-          <span style="display:block;">
+          <span style="display: block;">
             <a
               href="https://www.reddit.com/u/kaustubhladiya"
               target="_blank"
@@ -153,7 +149,7 @@
               <span class="iconify" data-icon="fa:reddit-alien"></span>
             </a>
           </span>
-          <span style="display:block;">
+          <span style="display: block;">
             <a
               href="https://stackexchange.com/users/16727002"
               target="_blank"
@@ -162,7 +158,7 @@
               <span class="iconify" data-icon="mdi:stack-exchange"></span>
             </a>
           </span>
-          <span style="display:block;">
+          <span style="display: block;">
             <a
               href="https://steamcommunity.com/id/k4ustu3h"
               target="_blank"
@@ -171,12 +167,12 @@
               <span class="iconify" data-icon="mdi:steam"></span>
             </a>
           </span>
-          <span style="display:block;">
+          <span style="display: block;">
             <a href="https://t.me/k4ustu3h" target="_blank" class="socials">
               <span class="iconify" data-icon="mdi-telegram"></span>
             </a>
           </span>
-          <span style="display:block;">
+          <span style="display: block;">
             <a
               href="https://www.twitter.com/k4ustu3h_"
               target="_blank"
@@ -185,7 +181,7 @@
               <span class="iconify" data-icon="mdi-twitter"></span>
             </a>
           </span>
-          <span style="display:block;">
+          <span style="display: block;">
             <a
               href="https://forum.xda-developers.com/member.php?u=9461231"
               target="_blank"
@@ -208,10 +204,10 @@
             <section>
               <div class="section_title">k4ustu3h.github.io</div>
               <div class="about_section">
-                <span style="display:none;">undefined</span>
+                <span style="display: none;">undefined</span>
               </div>
               <div class="bottom_section">
-                <span style="display:inline-block;">
+                <span style="display: inline-block;">
                   <span class="iconify" data-icon="mdi-code-tags"></span>
                   &nbsp; HTML
                 </span>
@@ -235,12 +231,12 @@
             <section>
               <div class="section_title">anothericonpack</div>
               <div class="about_section">
-                <span style="display:block;">
+                <span style="display: block;">
                   Free and open source icon pack for Android.
                 </span>
               </div>
               <div class="bottom_section">
-                <span style="display:inline-block;">
+                <span style="display: inline-block;">
                   <span class="iconify" data-icon="mdi-code-tags"></span>
                   &nbsp; Kotlin
                 </span>
@@ -259,12 +255,12 @@
             <section>
               <div class="section_title">bash-insulter</div>
               <div class="about_section">
-                <span style="display:block;">
+                <span style="display: block;">
                   Insults the user when typing wrong command
                 </span>
               </div>
               <div class="bottom_section">
-                <span style="display:none;">
+                <span style="display: none;">
                   <span class="iconify" data-icon="mdi-code-tags"></span>
                   &nbsp; null
                 </span>
@@ -283,13 +279,13 @@
             <section>
               <div class="section_title">kotin.ga</div>
               <div class="about_section">
-                <span style="display:block;">
+                <span style="display: block;">
                   Kotinga - Modern URL shortener with support for custom alias
                   &amp; can be hosted even in GitHub pages
                 </span>
               </div>
               <div class="bottom_section">
-                <span style="display:inline-block;">
+                <span style="display: inline-block;">
                   <span class="iconify" data-icon="mdi-code-tags"></span>
                   &nbsp; JavaScript
                 </span>
@@ -308,13 +304,13 @@
             <section>
               <div class="section_title">gitfolio</div>
               <div class="about_section">
-                <span style="display:block;">
+                <span style="display: block;">
                   A gitfolio fork that automatically deploys the output to
                   GitHub Pages using Travis CI
                 </span>
               </div>
               <div class="bottom_section">
-                <span style="display:inline-block;">
+                <span style="display: inline-block;">
                   <span class="iconify" data-icon="mdi-code-tags"></span>
                   &nbsp; JavaScript
                 </span>
@@ -349,7 +345,7 @@
           static: true,
           useMin: false,
           maxColumns: 2,
-          useTransform: true
+          useTransform: true,
         });
 
         const magicForksGrid = new MagicGrid({
@@ -359,7 +355,7 @@
           static: true,
           useMin: false,
           maxColumns: 2,
-          useTransform: true
+          useTransform: true,
         });
 
         $("document").ready(() => {
@@ -370,7 +366,7 @@
         // function([string1, string2],target id,[color1,color2])
         consoleText(["Kaustubh Ladiya", "Just another copy-paster"], "text", [
           "white",
-          "white"
+          "white",
         ]);
 
         function consoleText(words, id, colors) {
@@ -382,11 +378,11 @@
           var waiting = false;
           var target = document.getElementById(id);
           target.setAttribute("style", "color:" + colors[0]);
-          window.setInterval(function() {
+          window.setInterval(function () {
             if (letterCount === 0 && waiting === false) {
               waiting = true;
               target.innerHTML = words[0].substring(0, letterCount);
-              window.setTimeout(function() {
+              window.setTimeout(function () {
                 var usedColor = colors.shift();
                 colors.push(usedColor);
                 var usedWord = words.shift();
@@ -401,7 +397,7 @@
               waiting === false
             ) {
               waiting = true;
-              window.setTimeout(function() {
+              window.setTimeout(function () {
                 x = -1;
                 letterCount += x;
                 waiting = false;
@@ -411,7 +407,7 @@
               letterCount += x;
             }
           }, 120);
-          window.setInterval(function() {
+          window.setInterval(function () {
             if (visible === true) {
               con.className = "console-underscore hidden";
               visible = false;