diff --git a/src/components/Feedbacks.jsx b/src/components/Feedbacks.jsx
index 911985f..533417d 100644
--- a/src/components/Feedbacks.jsx
+++ b/src/components/Feedbacks.jsx
@@ -4,6 +4,7 @@ import { motion } from "framer-motion";
 import { styles } from "../styles";
 import { SectionWrapper } from "../hoc";
 import { fadeIn, textVariant } from "../utils/motion";
+import { cn } from "../utils/lib";
 import { testimonials } from "../constants";
 
 // Feedback Card
@@ -53,7 +54,7 @@ const Feedbacks = () => {
   return (
     <div className="mt-12 bg-black-100 rounded-[20px]">
       <div
-        className={`${styles.padding} bg-tertiary rounded-2xl min-h-[300px]`}
+        className={cn(styles.padding, "bg-tertiary rounded-2xl min-h-[300px]")}
       >
         {/* Title */}
         <motion.div variants={textVariant()}>
@@ -63,7 +64,7 @@ const Feedbacks = () => {
       </div>
 
       {/* Feedback Card */}
-      <div className={`${styles.paddingX} -mt-20 pb-14 flex flex-wrap gap-7`}>
+      <div className={cn(styles.paddingX, "-mt-20 pb-14 flex flex-wrap gap-7")}>
         {testimonials.map((testimonial, i) => (
           <FeedbackCard key={testimonial.name} index={i} {...testimonial} />
         ))}
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 52b2955..6798ce0 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -3,12 +3,16 @@ import { Link } from "react-router-dom";
 
 import { styles } from "../styles";
 import { socials } from "../constants";
+import { cn } from "../utils/lib";
 
 // Footer
 const Footer = () => {
   return (
     <nav
-      className={`${styles.paddingX} w-full flex items-center py-8 bg-primary border-t border-t-secondary/5`}
+      className={cn(
+        styles.paddingX,
+        "w-full flex items-center py-8 bg-primary border-t border-t-secondary/5"
+      )}
     >
       <div className="w-full flex justify-between items-center max-w-7xl mx-auto">
         <p className="text-white text-md font-bold flex">
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 0a7a8f0..dc0172b 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -3,13 +3,17 @@ import { motion } from "framer-motion";
 
 import { styles } from "../styles";
 import { ComputersCanvas } from "./canvas";
+import { cn } from "../utils/lib";
 
 // Hero
 const Hero = () => {
   return (
     <section className="relative w-full h-screen mx-auto">
       <div
-        className={`${styles.paddingX} absolute inset-0 top-[120px] max-w-7xl mx-auto flex flex-row items-start gap-5`}
+        className={cn(
+          styles.paddingX,
+          "absolute inset-0 top-[120px] max-w-7xl mx-auto flex flex-row items-start gap-5"
+        )}
       >
         {/* Title */}
         <div className="flex flex-col justify-center items-center mt-5">
@@ -19,10 +23,10 @@ const Hero = () => {
 
         {/* About Me */}
         <div>
-          <h1 className={`${styles.heroHeadText} text-white`}>
+          <h1 className={cn(styles.heroHeadText, "text-white")}>
             Hi, I'm <span className="text-[#915eff]">Shubham</span>
           </h1>
-          <p className={`${styles.heroSubText} mt-2 text-white-100`}>
+          <p className={cn(styles.heroSubText, "mt-2 text-white-100")}>
             I develop 3D visuals, user <br className="sm:block hidden" />
             interfaces and web applications
           </p>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 2c0aa35..ee00262 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import { styles } from "../styles";
 import { navLinks } from "../constants";
 import { logo, menu, close } from "../assets";
+import { cn } from "../utils/lib";
 
 // Navbar
 const Navbar = () => {
@@ -13,7 +14,10 @@ const Navbar = () => {
 
   return (
     <nav
-      className={`${styles.paddingX} w-full flex items-center py-5 fixed top-0 z-20 bg-primary`}
+      className={cn(
+        styles.paddingX,
+        "w-full flex items-center py-5 fixed top-0 z-20 bg-primary"
+      )}
     >
       <div className="w-full flex justify-between items-center max-w-7xl mx-auto">
         {/* Logo */}
@@ -36,9 +40,10 @@ const Navbar = () => {
           {navLinks.map((link) => (
             <li
               key={link.id}
-              className={`${
-                active === link.title ? "text-white" : "text-secondary"
-              } hover:text-white text-[18px] font-medium cursor-pointer`}
+              className={cn(
+                active === link.title ? "text-white" : "text-secondary",
+                "hover:text-white text-[18px] font-medium cursor-pointer"
+              )}
               onClick={() => !link?.link && setActive(link.title)}
             >
               {link?.link ? (
@@ -62,18 +67,20 @@ const Navbar = () => {
           />
 
           <div
-            className={`${
-              !toggle ? "hidden" : "flex"
-            } p-6 black-gradient absolute top-20 right-0 mx-4 my-2 min-w-[140px] z-10 rounded-xl`}
+            className={cn(
+              !toggle ? "hidden" : "flex",
+              "p-6 black-gradient absolute top-20 right-0 mx-4 my-2 min-w-[140px] z-10 rounded-xl"
+            )}
           >
             {/* Nav Links (Mobile) */}
             <ul className="list-none flex justify-end items-start flex-col gap-4">
               {navLinks.map((link) => (
                 <li
                   key={link.id}
-                  className={`${
-                    active === link.title ? "text-white" : "text-secondary"
-                  } font-poppins font-medium cursor-pointer text-[16px]`}
+                  className={cn(
+                    active === link.title ? "text-white" : "text-secondary",
+                    "font-poppins font-medium cursor-pointer text-[16px]"
+                  )}
                   onClick={() => {
                     !link?.link && setToggle(!toggle);
                     !link?.link && setActive(link.title);
diff --git a/src/components/Works.jsx b/src/components/Works.jsx
index 375b9ba..bf4cd4b 100644
--- a/src/components/Works.jsx
+++ b/src/components/Works.jsx
@@ -7,6 +7,7 @@ import { github, preview } from "../assets";
 import { SectionWrapper } from "../hoc";
 import { projects } from "../constants";
 import { fadeIn, textVariant } from "../utils/motion";
+import { cn } from "../utils/lib";
 
 // Project Card
 const ProjectCard = ({
@@ -75,7 +76,7 @@ const ProjectCard = ({
       {/* Work Tag */}
       <div className="mt-4 flex flex-wrap gap-2">
         {tags.map((tag, tagIdx) => (
-          <p key={`Tag-${tagIdx}`} className={`text-[14px] ${tag.color}`}>
+          <p key={`Tag-${tagIdx}`} className={cn(tag.color, "text-[14px]")}>
             #{tag.name}
           </p>
         ))}
diff --git a/src/hoc/SectionWrapper.jsx b/src/hoc/SectionWrapper.jsx
index 6ce35b8..1354112 100644
--- a/src/hoc/SectionWrapper.jsx
+++ b/src/hoc/SectionWrapper.jsx
@@ -3,6 +3,7 @@ import { motion } from "framer-motion";
 
 import { styles } from "../styles";
 import { staggerContainer } from "../utils/motion";
+import { cn } from "../utils/lib";
 
 const SectionWrapper = (Component, idName) =>
   function HOC() {
@@ -12,7 +13,7 @@ const SectionWrapper = (Component, idName) =>
         initial="hidden"
         whileInView="show"
         viewport={{ once: true, amount: 0.25 }}
-        className={`${styles.padding} max-w-7xl mx-auto relative z-0`}
+        className={cn(styles.padding, "max-w-7xl mx-auto relative z-0")}
       >
         <span className="hash-span" id={idName}>
           &nbsp;