diff --git a/src/pages/Auth/Auth.css b/src/pages/Auth/Auth.css
deleted file mode 100644
index 465c375..0000000
--- a/src/pages/Auth/Auth.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.Webname > h1 {
-    font-size: 3rem;
-    background-color: red;
-  
-    /* Create the gradient. */
-    background-image: linear-gradient(98.63deg, #2eaafa 0%, #1060d7 100%);
-    
-    /* Set the background size and repeat properties. */
-    background-size: 100%;
-    background-repeat: repeat;
-  
-    /* Use the text as a mask for the background. */
-    /* This will show the gradient as a text color rather than element bg. */
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent; 
-    -moz-background-clip: text;
-    -moz-text-fill-color: transparent;
-}
\ No newline at end of file
diff --git a/src/pages/Auth/Auth.jsx b/src/pages/Auth/Auth.jsx
index d524a5d..1671715 100644
--- a/src/pages/Auth/Auth.jsx
+++ b/src/pages/Auth/Auth.jsx
@@ -45,12 +45,15 @@ const Auth = () => {
     return (
         <div className="Auth flex items-center justify-center h-screen gap-16 relative">
             <div className="a-left flex flex-col lg:flex-row gap-4 items-center justify-center">
-                <div className="items-center justify-center lg:flex-row flex-col flex">
+                <div className="items-center justify-center lg:flex-row flex-col flex select-none">
                     <img src={Logo} alt="" className="h-24 w-24" />
                     <div className="Webname flex flex-col font-bold text-center lg:text-start">
-                        <h1 className="font-bold text-3xl  bg-[100%] bg-repeat bg-gradient-to-r from-[#2eaafa]-to-[#1060d7] leading-normal">
-                            FeatherPerfect
-                        </h1>
+                    <h1 className="text-5xl bg-gradient-to-r from-[#2eaafa] to-[#1060d7] bg-clip-text text-transparent leading-normal Class
+Properties
+select-none">
+                    FeatherPerfect  
+                    </h1>
+
                         <h6 className="dark:text-white pt-0 mb-1">IPF is our Brand Ambassador!</h6>
                         <h6 className="text-xs font-extralight dark:text-white/80">
                             (You guessed it right! It has Perfect Feathers!)
diff --git a/tailwind.config.js b/tailwind.config.js
index 476347f..4a207be 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,9 @@ module.exports = {
             },
         },
     },
+     variants: {
+        backgroundClip: ['responsive', 'hover', 'focus'],
+      },
     plugins: [],
     darkMode: "selector",
 };