diff --git a/components/UI/Hero.jsx b/components/UI/Hero.jsx
index f1f35703..5acb3d96 100644
--- a/components/UI/Hero.jsx
+++ b/components/UI/Hero.jsx
@@ -1,7 +1,7 @@
-import React, { Suspense } from "react";
+import React from "react";
 import Link from "next/link";
 import SectionSubtitle from "./SectionSubtitle";
-import { Container, Row, Col, Button } from "reactstrap";
+import { Container, Row, Col } from "reactstrap";
 import { BsDiscord } from "react-icons/bs";
 import Image from "next/image";
 import heroImg from "../../public/images/PiyushGarg.png";
@@ -10,46 +10,40 @@ import classNames from "../../styles/subtitle.module.css";
 
 const Hero = () => {
   return (
-    <section className={` ${classes.hero} `}>
-      {/* desktop / large screen view */}
-      <Container id="hero-section " className="md:flex hidden">
+    <section className={`${classes.hero}`}>
+      {/* Desktop / Large screen view */}
+      <Container id="hero-section" className="md:flex hidden">
         <Row>
           <Col lg="6" md="6">
-            <div className={`${classes.hero__content}`}>
+            <div className={classes.hero__content}>
               <SectionSubtitle subtitle="Hello" />
               <h2 className="mt-3 mb-3">I&apos;m Piyush Garg</h2>
               <h5 className="mb-4">Fullstack Developer & Instructor</h5>
               <p id="about-me">
-                Hi there! My name is Piyush Garg and I&rsquo;m a software
+                Hi there! My name is Piyush Garg and I&apos;m a software
                 engineer with over 5 years of experience in the industry. I love
                 all things tech and coding, and on my channel, I share my
                 knowledge and experience with others.
               </p>
             </div>
+
+            {/* Discord Button - Desktop */}
             <div className="mt-5 flex place-content-center md:block">
               <div className="relative inline-flex group">
-                <div className="absolute transitiona-all duration-1000 opacity-70 -inset-px bg-gradient-to-r animate-pulse hover:animate-none from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt"></div>
-                <Link
-                  target="_blank"
+                <div className="absolute transition-all duration-1000 opacity-70 -inset-px bg-gradient-to-r animate-pulse hover:animate-none from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt"></div>
+                <a
                   href="https://discord.gg/kRSRxBQ6xf"
-                  className="relative text-sm sm:text-md md:text-lg text-center items-center justify-center px-8 py-4  font-bold text-white transition-all duration-200 bg-gray-900 font-pj rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
-                  role="button"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="relative w-full text-sm sm:text-md md:text-lg text-center flex items-center justify-center gap-2 px-8 py-4 font-bold text-white transition-all duration-200 bg-gray-900 font-pj rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
                 >
-                  <span
-                    style={{
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center",
-                      gap: "10px",
-                    }}
-                    className="block"
-                  >
-                    Join Discord Server <BsDiscord />
-                  </span>
-                </Link>
+                  Join Discord Server <BsDiscord />
+                </a>
+
               </div>
             </div>
           </Col>
+
           <Col lg="6" md="6">
             <div className={`${classes.hero__img} text-end`}>
               <Image alt="Piyush Garg" src={heroImg} width="450" height="450" />
@@ -58,58 +52,41 @@ const Hero = () => {
         </Row>
       </Container>
 
-      {/* mobile / small screen view */}
-
+      {/* Mobile / Small screen view */}
       <Container id="hero-section" className="md:hidden">
         <Row>
           <Col lg="6" md="6">
-            <div className={`${classes.hero__content}`}>
+            <div className={classes.hero__content}>
               <div className="flex flex-col items-center justify-center">
                 <Col lg="6" md="6">
                   <div className={`${classes.hero__img} text-end`}>
-                    <Image
-                      alt="Piyush Garg"
-                      src={heroImg}
-                      width="450"
-                      height="450"
-                    />
+                    <Image alt="Piyush Garg" src={heroImg} width="450" height="450" />
                   </div>
                 </Col>
                 <h2 className="mt-3 mb-3">
-                  <span className={`${classNames.section__subtitle}`}>
-                    Hello !{" "}
-                  </span>
+                  <span className={classNames.section__subtitle}>Hello!</span>{" "}
                   I&apos;m Piyush Garg
                 </h2>
                 <h5 className="mb-4">Fullstack Developer & Instructor</h5>
                 <p id="about-me" className="text-center">
-                  Hi there! My name is Piyush Garg and I&rsquo;m a software
+                  Hi there! My name is Piyush Garg and I&apos;m a software
                   engineer with over 5 years of experience in the industry. I
                   love all things tech and coding, and on my channel, I share my
                   knowledge and experience with others.
                 </p>
               </div>
             </div>
+
+            {/* Discord Button - Mobile */}
             <div className="mt-5 flex flex-col items-center justify-center">
               <div className="relative inline-flex group">
-                <div className="absolute w-full transitiona-all duration-1000 opacity-70 -inset-px bg-gradient-to-r animate-pulse hover:animate-none from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt"></div>
+                <div className="absolute w-full transition-all duration-1000 opacity-70 -inset-px bg-gradient-to-r animate-pulse hover:animate-none from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt"></div>
                 <Link
-                  target="_blank"
                   href="https://discord.gg/kRSRxBQ6xf"
-                  className="relative w-full text-sm sm:text-md md:text-lg text-center items-center justify-center px-8 py-4  font-bold text-white transition-all duration-200 bg-gray-900 font-pj rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
-                  role="button"
+                  target="_blank"
+                  className="relative w-full text-sm sm:text-md md:text-lg text-center flex items-center justify-center px-8 py-4 font-bold text-white transition-all duration-200 bg-gray-900 font-pj rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 gap-2"
                 >
-                  <span
-                    style={{
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center",
-                      gap: "10px",
-                    }}
-                    className="block"
-                  >
-                    Join Discord Server <BsDiscord />
-                  </span>
+                  Join Discord Server <BsDiscord />
                 </Link>
               </div>
             </div>
diff --git a/styles/globals.css b/styles/globals.css
index 2426545f..b2c457f8 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -156,19 +156,6 @@ footer {
   display: block;
   border: 5px solid #2980b9;
 }
-.ribbon span {
-  position: absolute;
-  display: block;
-  width: 225px;
-  padding: 15px 0;
-  background-color: #3498db;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-  color: #fff;
-  font: 700 18px/1 "Lato", sans-serif;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-  text-transform: uppercase;
-  text-align: center;
-}
 
 /* top left*/
 .ribbon-top-left {
@@ -266,6 +253,23 @@ footer {
   transform: rotate(-225deg);
 }
 
+.discord-btn {
+  background-color: #5865F2;
+  color: white;
+  font-weight: 600;
+  padding: 12px 24px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.4);
+}
+
+.discord-btn:hover {
+  background-color: #4752c4;
+  transform: scale(1.05);
+  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.6);
+}
+
+
 @media only screen and (max-width: 992px) {
   p {
     font-size: 0.9rem !important;