diff --git a/index.html b/index.html
index 42381a9..45e7963 100644
--- a/index.html
+++ b/index.html
@@ -46,24 +46,33 @@
 
 <body>
     <div class="page">
-        <h1 class="header">
+        <h1 class="header coiny-regular">
             Hi, I'm Mike 👋🏻
         </h1>
 
         <div class="bio">
-            <h4>A Student and a Software Developer</h4>
+            <p class="small-text">I'm currently working on new fascinating projects, so be sure to follow me!</p>
+            
+            <h2 class="coiny-regular">Student / Software Developer</h2>
 
-            <p>I'm currently working on new fascinating projects,
-                so be sure to follow me!</p>
+            <p>
+                I am currently pursuing a degree in Computer Science at the Silesian University of Technology in Gliwice. Programming is my passion. I have experience working with a variety of languages. Recently, I have been focusing my attention on Rust and JavaScript. 
+            </p>
+            <p>
+                I am also interested in artificial intelligence and machine learning. In addition, I actively create and develop many projects to further enhance my skills.
+            </p>
 
-            <h4>About Mike</h4>
+            <h2 class="coiny-regular">My Projects</h2>
+            
+            <a class="button" href="https://github.com/eRgo35?tab=repositories">Go to <i>Projects</i></a>
+
+            <!--        
             <ul>
                 <li>⚙️ I use daily: <code>.rs</code>, <code>.js</code> <code>.py</code> <code>.sh</code> <code>.tex</code> <code>.md</code></li>
-                <li>🏗️ Developed: <a href="https://github.com/eRgo35/lyra">lyra</a>, <a href="https://github.com/eRgo35/ah">ah</a>, <a href="https://github.com/eRgo35/ti">ti</a>, <a href="https://github.com/eRgo35/ascii">ascii</a>, etc...</li>
                 <li>🍚 Check out my: <a href="https://github.com/eRgo35/dots">dotfiles</a>, <a href="https://github.com/eRgo35/nix-config">nix flake</a></li>
-            </ul>
+            </ul> -->
 
-            <h4>Mike around the web</h4>
+            <h2 class="coiny-regular">Mike around the web</h2>
             <ul>
                 <li>🐙 take a look at my <a href="https://github.com/eRgo35">GitHub</a></li>
                 <li>💼 find me on <a href="https://www.linkedin.com/in/mike-czyz">LinkedIn</a></li>
@@ -74,10 +83,10 @@
         <div class="world">
             <!-- <p>Also, checkout <a href="https://scientia.c2yz.com">this site</a>. You might find it interesting. 👀</p> -->
 
-            <!-- <p>[📎 <a href="assets/resume.pdf"">resume</a>] [📧 <a href=" mailto:mike@c2yz.com?subject=Hi">contact</a>]</p> -->
-            <p>[📧 <a href=" mailto:mike@c2yz.com?subject=Hi">contact</a>]</p>
+            <p>[📎 <a href="assets/Michał_Czyż_CV.pdf"">cv</a>] [📧 <a href=" mailto:mike@c2yz.com?subject=Hi">contact</a>]</p>
+            <!-- <p>[📧 <a href=" mailto:mike@c2yz.com?subject=Hi">contact</a>]</p> -->
 
-            <span class="separator">. . .</span>
+            <!-- <span class="separator">. . .</span> -->
         </div>
 
         <div class="aside">
diff --git a/styles.css b/styles.css
index 0814df5..42b393a 100644
--- a/styles.css
+++ b/styles.css
@@ -1,70 +1,56 @@
 @import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap");
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+@import url('https://fonts.googleapis.com/css2?family=Coiny&display=swap');
 
 * {
     transition: background-color 0.15s ease-in-out;
 }
 
-html {
-    --rosewater: #dc8a78;
-    --flamingo: #dd7878;
-    --pink: #ea76cb;
-    --mauve: #8839ef;
-    --red: #d20f39;
-    --maroon: #e64553;
-    --peach: #fe640b;
-    --yellow: #df8e1d;
-    --green: #40a02b;
-    --teal: #179299;
-    --sky: #04a5e5;
-    --sapphire: #209fb5;
-    --blue: #1e66f5;
-    --lavender: #7287fd;
-    --text: #434f69;
-    --subtext1: #5c5f77;
-    --subtext0: #6c6f85;
-    --overlay2: #7c7f93;
-    --overlay1: #8c8fa1;
-    --overlay0: #9ca0b0;
-    --surface2: #acb0be;
-    --surface1: #bcc0cc;
-    --surface0: #ccd0da;
-    --base: #eff1f5;
-    --mantle: #e6e9ef;
-    --crust: #dce0e8;
+:root {
+    --base: #faf4ed;
+    --surface: #fffaf3;
+    --overlay: #f2e9e1;
+    --muted: #9893a5;
+    --subtle: #797593;
+    --text: #575279;
+    --love: #b4637a;
+    --gold: #ea9d34;
+    --rose: #d7827e;
+    --pine: #286983;
+    --foam: #56949f;
+    --iris: #907aa9;
+    --highlight-low: #f4ede8;
+    --highlight-med: #dfdad9;
+    --highlight-high: #cecacd;
 }
 
 .dark {
-    --rosewater: #f4dbd6;
-    --flamingo: #f0c6c6;
-    --pink: #f5bde6;
-    --mauve: #c6a0f6;
-    --red: #ed8796;
-    --maroon: #ee99a0;
-    --peach: #f5a97f;
-    --yellow: #eed49f;
-    --green: #a6da95;
-    --teal: #8bd5ca;
-    --sky: #91d7e3;
-    --sapphire: #7dc4e4;
-    --blue: #8aadf4;
-    --lavender: #b7bdf8;
-    --text: #cad3f5;
-    --subtext1: #b8c0e0;
-    --subtext0: #a5adcb;
-    --overlay2: #939ab7;
-    --overlay1: #8087a2;
-    --overlay0: #6e738d;
-    --surface2: #5b6078;
-    --surface1: #494d64;
-    --surface0: #363a4f;
-    --base: #24273a;
-    --mantle: #1e2030;
-    --crust: #181926;
+    --base: #191724;
+    --surface: #1f1d2e;
+    --overlay: #26233a;
+    --muted: #6e6a86;
+    --subtle: #908caa;
+    --text: #e0def4;
+    --love: #eb6f92;
+    --gold: #f6c177;
+    --rose: #ebbcba;
+    --pine: #31748f;
+    --foam: #9ccfd8;
+    --iris: #c4a7e7;
+    --highlight-low: #21202e;
+    --highlight-med: #403d52;
+    --highlight-high: #524f67;
 }
 
+.coiny-regular {
+  font-family: "Coiny", system-ui;
+  font-weight: 400;
+  font-style: normal;
+}
+
+
 ::selection {
-    background-color: var(--overlay0);
+    background-color: var(--overlay);
 }
 
 @keyframes fadein {
@@ -89,7 +75,7 @@ body {
     width: 100%;
     min-height: 100vh;
     /* height: 100vh; */
-    background-color: var(--crust);
+    background-color: var(--base);
     color: var(--text);
     display: grid;
     place-items: center;
@@ -108,13 +94,13 @@ body {
     height: 8in;
     margin-top: 5px;
     margin-bottom: 5px;
-    background-color: var(--base);
+    background-color: var(--surface);
     padding: 0.5in;
     position: relative;
     animation: 0.5s ease-out 0s 1 fadein;
     display: grid;
     grid-template-columns: 1fr 2.5in;
-    grid-template-rows: 0.85in 0.2fr 0.4fr auto;
+    grid-template-rows: 1.1in 0.2fr 0.4fr auto;
     gap: 0px 0px;
     grid-template-areas:
         "header header"
@@ -126,37 +112,45 @@ body {
 }
 
 a {
-    color: var(--sapphire);
+    color: var(--pine);
     transition:
         0.1s color ease-in-out,
         0.1s text-decoration ease-in-out;
     text-decoration: none;
+    font-weight: 500;
 }
 
 a:hover,
 a:active,
 a:focus {
-    color: var(--blue);
+    color: var(--iris);
     text-decoration: underline;
 }
 
 .header {
     grid-area: header;
+    font-size: 3em;
 }
 
 .bio {
     grid-area: bio;
     padding: 0 0.5in 0 0;
     text-align: justify;
+    overflow-wrap: break-word;
+    hyphens: auto;
+}
+
+.small-text {
+    font-style: italic;
+    font-size: 0.8em;
+    padding: 0;
+    margin: 0;
 }
 
 .world {
     grid-area: world;
 }
 
-.separator {
-}
-
 .aside {
     grid-area: aside;
     display: flex;
@@ -192,13 +186,64 @@ a:focus {
     position: relative;
 }
 
+.button {
+    display: block;
+    padding: 1em 2em;
+    color: var(--text);
+    z-index: 0;
+    position: relative;
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+.button:hover, .button:active, .button:focus {
+    text-decoration: unset;
+}
+
+.button:before {
+    content: '';
+    background: linear-gradient(45deg, var(--love), var(--gold), var(--rose), var(--pine), var(--foam), var(--iris), var(--love));
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    background-size: 200%;
+    z-index: -1;
+    filter: blur(4px);
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
+    animation: glowing 30s linear infinite;
+    opacity: 0;
+    transition: opacity .3s ease-in-out;
+    border-radius: 10px;
+    opacity: 1;
+}
+
+.button:after {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--base);
+    left: 0;
+    top: 0;
+    border-radius: 10px;
+    transition: background 0.1s ease-in-out;
+}
+
+@keyframes glowing {
+    0% { background-position: 0 0; }
+    50% { background-position: 400% 0; }
+    100% { background-position: 0 0; }
+}
+
 .theme {
     position: absolute;
     bottom: 0.125in;
     right: 0.125in;
-    background-color: var(--mantle);
-    color: var(--yellow);
-    border: 1px solid var(--overlay0);
+    background-color: var(--base);
+    color: var(--gold);
+    border: 1px solid var(--overlay);
     border-radius: 10in;
     margin: 0.125in 0 0;
     padding: 0.125in;
