diff --git a/components/UI/Hero.jsx b/components/UI/Hero.jsx
index f1f35703..b26858e7 100644
--- a/components/UI/Hero.jsx
+++ b/components/UI/Hero.jsx
@@ -1,120 +1,101 @@
-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";
-import classes from "../../styles/hero.module.css";
+import heroImg from "/images/PiyushGarg.png"; // Use path from public folder
 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">
-        <Row>
+    <section className="relative py-16 bg-gray-900 text-white">
+      {/* Desktop / large screen */}
+      <Container id="hero-section" className="hidden md:flex">
+        <Row className="items-center">
+          {/* Left Content */}
           <Col lg="6" md="6">
-            <div className={`${classes.hero__content}`}>
+            <div className="space-y-4">
               <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
-                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.
+              <h2 className="text-4xl font-bold">I&apos;m Piyush Garg</h2>
+              <h5 className="text-xl">Fullstack Developer & Instructor</h5>
+              <p className="text-gray-300">
+                Hi there! My name is Piyush Garg and I&rsquo;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 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>
+
+              <div className="mt-5">
                 <Link
-                  target="_blank"
                   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"
+                  className="relative inline-flex items-center px-8 py-4 font-bold text-white bg-gray-800 rounded-xl group overflow-hidden"
                 >
-                  <span
-                    style={{
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center",
-                      gap: "10px",
-                    }}
-                    className="block"
-                  >
+                  <span className="absolute inset-0 bg-gradient-to-r from-[#44BCFF] via-[#FF44EC] to-[#FF675E] opacity-70 blur-lg transition-all duration-500 group-hover:opacity-100"></span>
+                  <span className="relative flex items-center gap-2">
                     Join Discord Server <BsDiscord />
                   </span>
                 </Link>
               </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" />
+
+          {/* Right Image */}
+          <Col lg="6" md="6" className="flex justify-end">
+            <div className="relative w-72 md:w-96">
+              <Image
+                src={heroImg}
+                alt="Piyush Garg"
+                width={450}
+                height={450}
+                className="object-cover rounded-xl"
+                priority
+              />
             </div>
           </Col>
         </Row>
       </Container>
 
-      {/* mobile / small screen view */}
+      {/* Mobile / small screen */}
+      <Container id="hero-section" className="md:hidden text-center">
+        <div className="flex flex-col items-center space-y-4">
+          <div className="w-64 h-64 relative">
+            <Image
+              src={heroImg}
+              alt="Piyush Garg"
+              width={450}
+              height={450}
+              className="object-cover rounded-full w-full h-full"
+              priority
+            />
+          </div>
 
-      <Container id="hero-section" className="md:hidden">
-        <Row>
-          <Col lg="6" md="6">
-            <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"
-                    />
-                  </div>
-                </Col>
-                <h2 className="mt-3 mb-3">
-                  <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
-                  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>
-            <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>
-                <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"
-                >
-                  <span
-                    style={{
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center",
-                      gap: "10px",
-                    }}
-                    className="block"
-                  >
-                    Join Discord Server <BsDiscord />
-                  </span>
-                </Link>
-              </div>
-            </div>
-          </Col>
-        </Row>
+          <h2 className="text-3xl font-bold">
+            <span className={classNames.section__subtitle}>Hello! </span>
+            I&apos;m Piyush Garg
+          </h2>
+          <h5 className="text-lg">Fullstack Developer & Instructor</h5>
+          <p className="text-gray-300 px-4">
+            Hi there! My name is Piyush Garg and I&rsquo;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 className="mt-5">
+            <Link
+              href="https://discord.gg/kRSRxBQ6xf"
+              target="_blank"
+              className="relative inline-flex items-center px-8 py-4 font-bold text-white bg-gray-800 rounded-xl group overflow-hidden"
+            >
+              <span className="absolute inset-0 bg-gradient-to-r from-[#44BCFF] via-[#FF44EC] to-[#FF675E] opacity-70 blur-lg transition-all duration-500 group-hover:opacity-100"></span>
+              <span className="relative flex items-center gap-2">
+                Join Discord Server <BsDiscord />
+              </span>
+            </Link>
+          </div>
+        </div>
       </Container>
     </section>
   );
diff --git a/components/UI/Services.jsx b/components/UI/Services.jsx
index 87050f80..0f9b0b2b 100644
--- a/components/UI/Services.jsx
+++ b/components/UI/Services.jsx
@@ -11,79 +11,83 @@ const Services = ({ youtubeStats, youtubeVideos }) => {
     dots: false,
     autoplay: true,
     speed: 500,
-    autoplaySpeed: 2000,
+    autoplaySpeed: 2500,
     infinite: true,
     swipeToSlide: true,
     slidesToShow: 1,
     slidesToScroll: 1,
     arrows: true,
   };
+
+  const formatSubscribers = (count) => {
+    if (!count) return "0 Subscribers";
+    const num = Number(count);
+    if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(1)}M Subscribers`;
+    if (num >= 1_000) return `${(num / 1_000).toFixed(1)}K Subscribers`;
+    return `${num} Subscribers`;
+  };
+
   return (
-    <section id="youtube-stats">
+    <section id="youtube-stats" className="py-10 bg-gray-900 text-white">
       <Container>
-        <Row>
-          <Col lg="3" md="12" sm="12">
-            <Slider
-              {...settings}
-              // style={{ cursor: "pointer", marginBottom: "10px" }}
-              className=" cursor-pointer mb-10 md:mb:0"
-            >
+        <Row className="gap-6 flex-wrap">
+          {/* YouTube Slider */}
+          <Col lg="4" md="12" sm="12">
+            <Slider {...settings} className="cursor-pointer">
               {youtubeVideos
                 ?.filter((video) => video.id.videoId)
                 ?.map((video) => (
                   <div
+                    key={video.id.videoId}
                     onClick={() =>
                       window.open(
                         `https://youtube.com/watch?v=${video.id.videoId}`,
-                        "_blank"
+                        "_blank",
+                        "noreferrer"
                       )
                     }
-                    style={{ padding: "10px" }}
-                    key={video.id.videoId}
+                    className="p-2"
                   >
-                    <img
-                      src={video.snippet.thumbnails.medium.url}
-                      height={0}
-                      width={0}
-                      sizes="100vw"
-                      style={{
-                        borderRadius: "20px",
-                        marginBottom: "10px",
-                        width: "100%",
-                        height: "auto",
-                      }}
-                      alt={video.snippet.title}
-                    />
-                    <p>{video.snippet.title}</p>
-                    <p className="p-2.5 bg-[#171f38] w-fit text-xs text-white mt-2 rounded-md">
+                    <div className="relative w-full h-56 md:h-64 lg:h-60">
+                      <Image
+                        src={video.snippet.thumbnails.medium.url}
+                        alt={video.snippet.title}
+                        layout="fill"
+                        objectFit="cover"
+                        className="rounded-xl"
+                        priority={false}
+                      />
+                    </div>
+                    <p className="font-medium mt-2">{video.snippet.title}</p>
+                    <p className="p-2 bg-[#171f38] w-fit text-xs rounded-md mt-2">
                       {new Date(video.snippet.publishTime).toDateString()}
                     </p>
                   </div>
                 ))}
             </Slider>
           </Col>
-          <Col lg="3" md="6">
+
+          {/* YouTube Stats */}
+          <Col lg="3" md="6" sm="12" className="space-y-4">
             <ServicesItem
-              title={`${(
-                Number(youtubeStats?.statistics?.subscriberCount) / 1000
-              ).toPrecision(3)}K Subscribers`}
+              title={formatSubscribers(youtubeStats?.statistics?.subscriberCount)}
               icon="ri-user-add-line"
             />
             <ServicesItem
-              title={`${youtubeStats?.statistics?.videoCount} Videos Uploaded`}
+              title={`${youtubeStats?.statistics?.videoCount || 0} Videos Uploaded`}
               icon="ri-film-line"
             />
           </Col>
 
-          <Col lg="6" md="6" className={`${classes.service__title}`}>
-            <SectionSubtitle subtitle="Youtube" />
-            <h3 className="mb-0 mt-4">Popular</h3>
-            <h3 className="mb-2">Uploads from My Youtube Channel</h3>
+          {/* Text Section */}
+          <Col lg="5" md="6" sm="12" className={`${classes.service__title} space-y-3`}>
+            <SectionSubtitle subtitle="YouTube" />
+            <h3 className="mt-4">Popular Uploads from My YouTube Channel</h3>
             <p>
               I would really appreciate it if you could check it out and maybe
               even hit the subscribe button if you enjoy the content.
             </p>
-            <p className="mb-3">Thanks in advance!</p>
+            <p>Thanks in advance!</p>
             <a
               href="https://www.youtube.com/@piyushgargdev?sub_confirmation=1"
               target="_blank"