diff --git a/about.html b/about.html
index 2940098..b83c500 100644
--- a/about.html
+++ b/about.html
@@ -9,73 +9,9 @@
   <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
   <link rel="manifest" href="./site.webmanifest">
+  <link rel="stylesheet" href="cum.css">
   <title>Klectr | About Me</title>
   <script src="https://cdn.tailwindcss.com"></script>
-  <style>
-    @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
-    @import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');
-
-    .ubuntu-regular {
-      font-family: "Ubuntu", sans-serif;
-      font-weight: 400;
-      font-style: normal;
-    }
-
-    .ubuntu-bold {
-      font-family: "Ubuntu", sans-serif;
-      font-weight: 700;
-      font-style: normal;
-    }
-
-    .ubuntu-regular-italic {
-      font-family: "Ubuntu", sans-serif;
-      font-weight: 400;
-      font-style: italic;
-    }
-
-    .long-cang-regular {
-      font-family: "Long Cang", cursive;
-      font-weight: 400;
-      font-style: normal;
-    }
-
-    .gradient {
-      background: radial-gradient(circle at top right, #33333399 0%, #00000000 30%), radial-gradient(circle at top left, #33333399 0%, #00000000 30%), radial-gradient(circle at bottom, #2b2200 0%, #000 30%);
-      background-repeat: no-repeat;
-    }
-
-    .glow {
-      position: relative;
-    }
-
-    .glow::before {
-      position: absolute;
-      content: 'banana';
-      background-color: #ffce00;
-      width: 0px;
-      height: 0px;
-      filter: blur(30px);
-      z-index: -1;
-      top: -6px;
-      left: -4px;
-      border-radius: 50%;
-      transition: all 0.5s;
-    }
-
-    .glow:hover::before {
-      position: absolute;
-      content: 'banana';
-      background-color: #ffce00;
-      width: 40px;
-      height: 40px;
-      filter: blur(30px);
-      z-index: -1;
-      top: -6px;
-      left: -4px;
-      border-radius: 50%;
-    }
-  </style>
-
 </head>
 
 
@@ -107,21 +43,23 @@
     <div class="my-6 flex flex-col gap-6 ">
       <p>Hello 👋, I'm a Software Engineer with a passion for <span
           class="font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#ffce00] to-red-500">Rust</span> and
-        Open-Source Software. With a knack for
-        problem solving, I balance code with exploration and find peace in a cup of hot coffee next to an open fire!</p>
+        <span class="font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#ffce00] to-red-500">Open-Source
+          Software</span>. With a knack for
+        problem solving, I balance code with exploration and find peace in a cup of hot ☕ next to an open 🔥!
+      </p>
 
 
-      <p>My journey in software development began with a curiosity about how things worked behind the
-        scenes, on the web. This led me to working with various companies across
+      <p>My journey in software development began with a curiosity about how things worked "behind the
+        scenes", on the web. This led me to working with various companies across
         industries from IoT software to revenue cycle management, and
         even dabbling in enterprise-level projects. Through these experiences, I've developed a strong
         foundation in debugging, troubleshooting, and finding creative solutions to complex problems.</p>
 
       <div class="flex gap-8 items-center my-4 relative">
         <img src="./me_1.webp" alt="me"
-          class="rounded-lg rotate-[-12deg] hover:rotate-[0deg] w-40 md:w-60 lg:w-72 ml-auto">
+          class="rounded-lg rotate-[-12deg] hover:rotate-[0deg] w-40 md:w-60 lg:w-72 ml-auto transition-transform">
         <img src="./fam_1.jpeg" alt="family"
-          class=" h-auto rounded-lg rotate-[12deg] hover:rotate-[0deg] w-40 md:w-60 lg:w-72  mr-auto">
+          class=" h-auto rounded-lg rotate-[12deg] hover:rotate-[0deg] w-40 md:w-60 lg:w-72  mr-auto  transition-transform">
         <p class="absolute top-[-30px] right-[-280px] w-60 long-cang-regular text-xl hidden lg:block">My family and I
           often travel to
           and from
@@ -185,7 +123,9 @@
 
       <p>What sets me apart is my ability to approach challenges with a humble mindset, recognizing that
         everyone makes mistakes and learning from those experiences. This has helped me grow as an engineer
-        and become more effective in my work. When I'm not coding, you can find me spending time with
+        and become more effective in my work.</p>
+
+      <p>When I'm not coding, you can find me spending time with
         family or exploring new ideas and technologies.</p>
     </div>
 
diff --git a/cum.css b/cum.css
new file mode 100644
index 0000000..1fdf3e2
--- /dev/null
+++ b/cum.css
@@ -0,0 +1,62 @@
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');
+
+.ubuntu-regular {
+  font-family: "Ubuntu", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.ubuntu-bold {
+  font-family: "Ubuntu", sans-serif;
+  font-weight: 700;
+  font-style: normal;
+}
+
+.ubuntu-regular-italic {
+  font-family: "Ubuntu", sans-serif;
+  font-weight: 400;
+  font-style: italic;
+}
+
+.long-cang-regular {
+  font-family: "Long Cang", cursive;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.gradient {
+  background: radial-gradient(circle at top right, #33333399 0%, #00000000 30%), radial-gradient(circle at top left, #33333399 0%, #00000000 30%), radial-gradient(circle at bottom, #2b2200 0%, #000 30%);
+  background-repeat: no-repeat;
+}
+
+.glow {
+  position: relative;
+}
+
+.glow::before {
+  position: absolute;
+  content: 'banana';
+  background-color: #ffce00;
+  width: 0px;
+  height: 0px;
+  filter: blur(30px);
+  z-index: -1;
+  top: -6px;
+  left: -4px;
+  border-radius: 50%;
+  transition: all 0.5s;
+}
+
+.glow:hover::before {
+  position: absolute;
+  content: 'banana';
+  background-color: #ffce00;
+  width: 40px;
+  height: 40px;
+  filter: blur(30px);
+  z-index: -1;
+  top: -6px;
+  left: -4px;
+  border-radius: 50%;
+}
diff --git a/index.html b/index.html
index 6ee78a1..caed76a 100644
--- a/index.html
+++ b/index.html
@@ -9,66 +9,9 @@
   <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
   <link rel="manifest" href="./site.webmanifest">
+  <link rel="stylesheet" href="cum.css">
   <title>Klectr | Home</title>
   <script src="https://cdn.tailwindcss.com"></script>
-  <style>
-    @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
-
-    .ubuntu-regular {
-      font-family: "Ubuntu", sans-serif;
-      font-weight: 400;
-      font-style: normal;
-    }
-
-    .ubuntu-bold {
-      font-family: "Ubuntu", sans-serif;
-      font-weight: 700;
-      font-style: normal;
-    }
-
-    .ubuntu-regular-italic {
-      font-family: "Ubuntu", sans-serif;
-      font-weight: 400;
-      font-style: italic;
-    }
-
-    .gradient {
-      background: radial-gradient(circle at top right, #33333399 0%, #00000000 30%), radial-gradient(circle at top left, #33333399 0%, #00000000 30%), radial-gradient(circle at bottom, #2b2200 0%, #000 30%);
-      background-repeat: no-repeat;
-    }
-
-    .glow {
-      position: relative;
-    }
-
-    .glow::before {
-      position: absolute;
-      content: 'banana';
-      background-color: #ffce00;
-      width: 0px;
-      height: 0px;
-      filter: blur(30px);
-      z-index: -1;
-      top: -6px;
-      left: -4px;
-      border-radius: 50%;
-      transition: all 0.5s;
-    }
-
-    .glow:hover::before {
-      position: absolute;
-      content: 'banana';
-      background-color: #ffce00;
-      width: 40px;
-      height: 40px;
-      filter: blur(30px);
-      z-index: -1;
-      top: -6px;
-      left: -4px;
-      border-radius: 50%;
-    }
-  </style>
-
 </head>