diff --git a/app/(auth)/sign-in/page.jsx b/app/(auth)/sign-in/page.jsx
index f94bf5e..4f2d42a 100644
--- a/app/(auth)/sign-in/page.jsx
+++ b/app/(auth)/sign-in/page.jsx
@@ -15,7 +15,7 @@ import { Button } from "../../../@/components/ui/button";
 import { Input } from "../../../@/components/ui/input";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useToast } from "../../../@/components/ui/use-toast";
+import { useToast } from "../../../@/hooks/use-toast";
 import { signInSchema } from "../../../model/Schema/signInSchema";
 import React, { useState } from "react";
 import {
@@ -156,6 +156,7 @@ export default function SignInForm() {
                     className="w-full  font-bold"
                     type="submit"
                     disabled={isLoading}
+                    arial-label="signin-btn"
                   >
                     {isLoading ? (
                       <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -174,6 +175,7 @@ export default function SignInForm() {
                       variant="default"
                       className="w-full flex gap-4"
                       onClick={handleGoogleSignIn}
+                      arial-label="google-signin-btn"
                     >
                       <FaGoogle className="h-4 w-4" />
                     </Button>
@@ -182,6 +184,7 @@ export default function SignInForm() {
                       variant="default"
                       className="w-full flex gap-4"
                       onClick={handleDiscordSignIn}
+                      arial-label="discord-signin-btn"
                     >
                       <FaDiscord className="h-4 w-4" />
                     </Button>
@@ -191,6 +194,7 @@ export default function SignInForm() {
                     <Link
                       href="/sign-up"
                       className="hover:text-blue-800 underline transition-all "
+                      aria-label="signup-btn"
                     >
                       Sign up
                     </Link>
diff --git a/app/(auth)/sign-up/page.jsx b/app/(auth)/sign-up/page.jsx
index 4838754..c738312 100644
--- a/app/(auth)/sign-up/page.jsx
+++ b/app/(auth)/sign-up/page.jsx
@@ -202,6 +202,7 @@ const Page = () => {
                     type="submit"
                     className="w-full font-bold"
                     disabled={isSubmitting}
+                    arial-label="signup-btn"
                   >
                     {isSubmitting ? (
                       <>
@@ -218,6 +219,7 @@ const Page = () => {
                     <Link
                       href="/sign-in"
                       className="hover:text-blue-800 underline transition-all "
+                      aria-label="signin-btn"
                     >
                       Sign in
                     </Link>
diff --git a/app/(auth)/verify/[username]/page.jsx b/app/(auth)/verify/[username]/page.jsx
index e6cf711..accf97d 100644
--- a/app/(auth)/verify/[username]/page.jsx
+++ b/app/(auth)/verify/[username]/page.jsx
@@ -104,7 +104,11 @@ const VerifyAccount = () => {
                   />
                 </CardContent>
                 <CardFooter>
-                  <Button className="font-bold" type="submit">
+                  <Button
+                    className="font-bold"
+                    type="submit"
+                    arial-label="submit-btn"
+                  >
                     Submit
                   </Button>
                 </CardFooter>
diff --git a/app/blogs/[slug]/page.jsx b/app/blogs/[slug]/page.jsx
index 413be9f..663c7c9 100644
--- a/app/blogs/[slug]/page.jsx
+++ b/app/blogs/[slug]/page.jsx
@@ -46,7 +46,11 @@ const page = async ({ params }) => {
   return (
     <div className="flex flex-col items-center gap-7">
       <h1 className="relative flex flex-row items-center">
-        <Link href="/blog" className="absolute mt-2 left-[-128px]">
+        <Link
+          href="/blog"
+          className="absolute mt-2 left-[-128px]"
+          aria-label="blog-redirect"
+        >
           <ArrowLeft />
         </Link>
         <span className="block mt-2 text-3xl font-bold leading-8 tracking-tight text-center sm:text-4xl">
diff --git a/app/blogs/page.jsx b/app/blogs/page.jsx
index a589b9c..d9bd67f 100644
--- a/app/blogs/page.jsx
+++ b/app/blogs/page.jsx
@@ -86,8 +86,14 @@ const page = async () => {
                 <Button
                   asChild
                   className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded"
+                  arial-label="read-more-btn"
                 >
-                  <Link href={`/blogs/${item.currentSlug}`}>Read More</Link>
+                  <Link
+                    href={`/blogs/${item.currentSlug}`}
+                    aria-label="read-more"
+                  >
+                    Read More
+                  </Link>
                 </Button>
               </CardContent>
             </Card>
diff --git a/app/bracket/page.js b/app/bracket/page.js
index e70d4fd..25fba5e 100644
--- a/app/bracket/page.js
+++ b/app/bracket/page.js
@@ -11,6 +11,7 @@ const BracketPage = () => {
         <Link
           href="/bracket/create"
           className={`ml-auto ${buttonVariants({ variant: "default" })}`}
+          aria-label="bracket-create-redirect"
         >
           Create a bracket
         </Link>
diff --git a/app/create/team/page.jsx b/app/create/team/page.jsx
index a1ace23..c731453 100644
--- a/app/create/team/page.jsx
+++ b/app/create/team/page.jsx
@@ -317,7 +317,9 @@ export default function CreateTeamForm() {
               />
             </div>
             <div className="flex justify-center">
-              <Button type="submit">Create</Button>
+              <Button type="submit" arial-label="team-create-btn">
+                Create
+              </Button>
             </div>
           </form>
         </Form>
diff --git a/app/create/tournament/page.js b/app/create/tournament/page.js
index a321093..8bd4e04 100644
--- a/app/create/tournament/page.js
+++ b/app/create/tournament/page.js
@@ -338,7 +338,9 @@ export default function Page() {
             Prize Configuration{" "}
             <span className="text-foreground/50 text-sm">ⓘ</span>
           </h3>
-          <Button className="px-4 py-2 rounded">Add Prize</Button>
+          <Button arial-label="add-prize-btn" className="px-4 py-2 rounded">
+            Add Prize
+          </Button>
         </div>
 
         {/* Rules */}
@@ -351,13 +353,20 @@ export default function Page() {
             className="w-fit bg-foreground/5 p-2 rounded mb-2 text-sm"
             placeholder="Enter Rule"
           />
-          <Button className="px-4 py-2 rounded w-fit">Add Rule</Button>
+          <Button
+            arial-label="add-rule-btn"
+            className="px-4 py-2 rounded w-fit"
+          >
+            Add Rule
+          </Button>
         </div>
 
         {/* Sponsors */}
         <div className="mt-8">
           <h3 className="text-xl font-semibold mb-4">Sponsors</h3>
-          <Button className=" px-4 py-2 rounded">Add Sponsor</Button>
+          <Button arial-label="add-sponsor-btn" className=" px-4 py-2 rounded">
+            Add Sponsor
+          </Button>
         </div>
 
         {/* Game Configuration */}
@@ -389,7 +398,9 @@ export default function Page() {
               />
             </div>
           </div>
-          <Button className="mt-4 px-4 py-2">Add Game Config</Button>
+          <Button arial-label="add-game-config-btn" className="mt-4 px-4 py-2">
+            Add Game Config
+          </Button>
         </div>
 
         {/* Tournament Configuration */}
@@ -466,7 +477,10 @@ export default function Page() {
               />
             </div>
           </div>
-          <Button className="mt-4 px-4 py-2 rounded">
+          <Button
+            arial-label="add-tournament-config-btn"
+            className="mt-4 px-4 py-2 rounded"
+          >
             Add Tournament Config
           </Button>
         </div>
@@ -477,6 +491,7 @@ export default function Page() {
             type="submit"
             className={`mt-10 px-6 py-2 rounded-md font-semibold text-white ${isSubmitting ? "bg-blue-500" : "bg-blue-600 hover:bg-blue-700"} transition-colors duration-300`}
             disabled={isSubmitting}
+            arial-label="team-create-btn"
           >
             {isSubmitting ? "Creating..." : "Create Tournament"}
           </button>
diff --git a/app/create/tournament/tournament/page.js b/app/create/tournament/tournament/page.js
index b539ebc..e7d31e8 100644
--- a/app/create/tournament/tournament/page.js
+++ b/app/create/tournament/tournament/page.js
@@ -144,6 +144,7 @@ export default function Page() {
                         : "bg-slate-500 hover:bg-slate-600"
                     }`}
                     onClick={() => setSelectedPlatform(platform)}
+                    arial-label="platform-btn"
                   >
                     {platform}
                   </button>
@@ -216,6 +217,7 @@ export default function Page() {
                 type="submit"
                 className={`px-6 py-2 rounded-md  ${isSubmitting ? "bg-blue-300" : "bg-blue-600 hover:bg-blue-700"} transition-colors duration-300`}
                 disabled={isSubmitting}
+                arial-label="create-tournament-btn"
               >
                 {isSubmitting ? "Creating..." : "Create Tournament"}
               </button>
@@ -223,6 +225,7 @@ export default function Page() {
                 type="button"
                 className="px-6 py-2 rounded-md text-white bg-red-600 hover:bg-red-700 transition-colors duration-300"
                 onClick={handleReset}
+                arial-label="reset-btn"
               >
                 Reset
               </button>
diff --git a/app/games/[id]/page.js b/app/games/[id]/page.js
index ee13dfd..5478767 100644
--- a/app/games/[id]/page.js
+++ b/app/games/[id]/page.js
@@ -67,6 +67,7 @@ export default function GamePage({ params }) {
           <Button
             className="flex items-center gap-2 px-2 py-1 md:px-4 md:py-2 font-medium text- text-white bg-indigo-500 hover:bg-indigo-600 rounded-md active:scale-90 transition-all"
             onClick={handleClick}
+            arial-label="fav-btn"
           >
             Favourite
             {isFavourite ? (
@@ -93,7 +94,11 @@ export default function GamePage({ params }) {
           <div className="relative">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="flex gap-2">
+                <Button
+                  variant="outline"
+                  className="flex gap-2"
+                  arial-label="filter-btn"
+                >
                   Filter
                   <ListFilter className="w-4 h-4 mb-0.5" />
                 </Button>
@@ -152,6 +157,7 @@ export default function GamePage({ params }) {
                   variant="ghost"
                   onClick={clearFilters}
                   className="w-full rounded transition-colors"
+                  arial-label="clear-filter-btn"
                 >
                   Clear Filters
                 </Button>
diff --git a/app/games/page.js b/app/games/page.js
index abad5ac..46ed6e6 100644
--- a/app/games/page.js
+++ b/app/games/page.js
@@ -49,6 +49,7 @@ export default async function page({ searchParams }) {
                 <Link
                   href={`/games/${game._id}`}
                   className="relative h-64 w-full rounded-xl hover:scale-105 transition-all"
+                  aria-label="game-id-page"
                 >
                   <Image
                     src={game.gameBannerPhoto}
diff --git a/app/layout.js b/app/layout.js
index f327b54..eb5f585 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -6,7 +6,6 @@ import Footer from "../components/Footer";
 import AuthProvider from "../context/AuthProvider";
 import NextTopLoader from "nextjs-toploader";
 import dotenv from "dotenv";
-// import { Toaster } from "react-hot-toast";
 import { Toaster } from "../@/components/ui/toaster";
 
 dotenv.config();
@@ -59,7 +58,7 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <AuthProvider>
-      <html lang="en">
+      <html lang="en" suppressHydrationWarning>
         <body className={helvetica.className}>
           <ThemeProvider
             attribute="class"
@@ -71,8 +70,6 @@ export default function RootLayout({ children }) {
             <Navbar />
             <main className="mx-auto mt-10">{children}</main>
             <Footer />
-
-            {/* <Toaster position="bottom-right" reverseOrder={true} /> */}
             <Toaster />
           </ThemeProvider>
         </body>
diff --git a/app/manage/tournament/page.jsx b/app/manage/tournament/page.jsx
index 9ef1a5d..cb322ad 100644
--- a/app/manage/tournament/page.jsx
+++ b/app/manage/tournament/page.jsx
@@ -194,6 +194,7 @@ export default function Page() {
               className="p-3 bg-green-400 rounded-md text-white"
               onClick={addParticipant}
               disabled={loading}
+              arial-label="add-participant-btn"
             >
               {loading ? "Adding..." : "+Add Participant"}
             </button>
@@ -221,6 +222,7 @@ export default function Page() {
               className="p-3 bg-green-400 rounded-md text-white"
               onClick={handleCreateStage}
               disabled={loading}
+              arial-label="create-new-stage-btn"
             >
               {loading ? "Creating..." : "+Create new stage"}
             </button>
@@ -238,6 +240,7 @@ export default function Page() {
               className="p-3 bg-blue-400 rounded-md text-white"
               onClick={handleEnableRegistration}
               disabled={loading}
+              arial-label="enable-registration-btn"
             >
               {loading ? "Enabling..." : "Enable Registration"}
             </button>
diff --git a/app/onboarding/completeprofile/page.js b/app/onboarding/completeprofile/page.js
index 348ed44..1e25c29 100644
--- a/app/onboarding/completeprofile/page.js
+++ b/app/onboarding/completeprofile/page.js
@@ -62,6 +62,7 @@ export default function CompleteProfilePage() {
                 <button
                   key={idx}
                   type="button"
+                  arial-label="complete-profile-btn"
                   className={`px-2 py-2 text-sm md:px-4 md:text-base rounded-xl transition-all
                     ${
                       selectedExpLevel === button
@@ -149,7 +150,11 @@ export default function CompleteProfilePage() {
           </div>
 
           <div className="flex justify-end items-end">
-            <Button type="submit" className="px-4 py-2">
+            <Button
+              type="submit"
+              className="px-4 py-2"
+              arial-label="create-profile-submit-btn"
+            >
               Submit
             </Button>
           </div>
diff --git a/app/onboarding/selectgame/page.js b/app/onboarding/selectgame/page.js
index b1fd316..de74fa9 100644
--- a/app/onboarding/selectgame/page.js
+++ b/app/onboarding/selectgame/page.js
@@ -78,6 +78,7 @@ export default function SelectGamesPage() {
                     type="submit"
                     variant="outline"
                     className="w-full px-4 py-2 rounded"
+                    arial-label="onboarding-selectgame-btn"
                   >
                     Submit
                   </Button>
diff --git a/app/teams/page.jsx b/app/teams/page.jsx
index 7849bf9..5a08c0f 100644
--- a/app/teams/page.jsx
+++ b/app/teams/page.jsx
@@ -105,6 +105,7 @@ const TeamFinder = () => {
         <Button
           onClick={() => router.push("/create/team")}
           className="w-1/5 flex gap-2 items-center"
+          arial-label="create-team-btn"
         >
           <PlusCircle className="size-4" />
           <p>Create Team</p>
@@ -135,37 +136,3 @@ const TeamFinder = () => {
 };
 
 export default TeamFinder;
-{
-  /* <div className="max-w-7xl mx-auto">
-<div className="flex gap-4 mb-4 ">
-  <input
-    className=" outline-none py-2 px-4 rounded-md bg-[#222124] text-sm w-4/5 "
-    onChange={(e) => handleTeamSearch(e.target.value)}
-    placeholder="Search team "
-  />
-  <Button onClick={() => router.push("/create/team")} className="w-1/5">
-    Create Team
-  </Button>
-</div>
-
-<div className="flex flex-col  md:flex-row mx-auto ">
-  <div className="max-h-[100vh] pt-5 transition-all overflow-y-scroll flex flex-col gap-12  no-scrollbar transition-all border-0 w-3/4">
-    {filteredTeams.length > 0 ? (
-      filteredTeams.map((team, index) => (
-        <TeamCard key={index} team={team} />
-      ))
-    ) : (
-      <p>No teams found. Try creating one!</p>
-    )}
-  </div>
-
-  <div className=" mx-auto border-2 w-1/4">
-    <FiltersSidebar
-      filters={filters}
-      setFilters={setFilters}
-      onReset={handleResetFilters}
-    />
-  </div>
-</div>
-</div> */
-}
diff --git a/app/tournaments/[id]/page.js b/app/tournaments/[id]/page.js
index 8efb6d6..73a3d6c 100644
--- a/app/tournaments/[id]/page.js
+++ b/app/tournaments/[id]/page.js
@@ -81,7 +81,9 @@ export default function TournamentPage({ params }) {
     return (
       <div className="flex flex-col items-center justify-center min-h-[60vh] gap-4">
         <p className="text-destructive text-lg">{error}</p>
-        <Button onClick={loadTournamentData}>Retry</Button>
+        <Button onClick={loadTournamentData} arial-label="retry-btn">
+          Retry
+        </Button>
       </div>
     );
   }
@@ -120,12 +122,19 @@ export default function TournamentPage({ params }) {
                 animate={{ y: 0, opacity: 1 }}
                 transition={{ delay: 0.4 }}
               >
-                <Button size="lg" asChild>
-                  <Link href={`/tournaments/${tournament._id}/register`}>
+                <Button size="lg" asChild arial-label="register-now-btn">
+                  <Link
+                    href={`/tournaments/${tournament._id}/register`}
+                    aria-label="register-now"
+                  >
                     Register Now
                   </Link>
                 </Button>
-                <Button size="lg" variant="outline">
+                <Button
+                  size="lg"
+                  variant="outline"
+                  arial-label="view-details-btn"
+                >
                   View Details
                 </Button>
               </motion.div>
diff --git a/app/tournaments/[id]/register/page.js b/app/tournaments/[id]/register/page.js
index ee5e5bd..907b8b6 100644
--- a/app/tournaments/[id]/register/page.js
+++ b/app/tournaments/[id]/register/page.js
@@ -183,6 +183,7 @@ export default function RegisterPage({ params }) {
           <button
             type="submit"
             className="w-full bg-blue-600 text-white p-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
+            arial-label="tournament-id-register-btn"
           >
             Register
           </button>
diff --git a/app/tournaments/page.js b/app/tournaments/page.js
index 48951a6..2affa55 100644
--- a/app/tournaments/page.js
+++ b/app/tournaments/page.js
@@ -42,7 +42,11 @@ const TournamentPage = () => {
           <div className="relative">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="flex gap-2">
+                <Button
+                  variant="outline"
+                  className="flex gap-2"
+                  arial-label="tournament-filter-btn"
+                >
                   Filter
                   <ListFilter className="w-4 h-4 mb-0.5" />
                 </Button>
@@ -101,6 +105,7 @@ const TournamentPage = () => {
                   variant="ghost"
                   onClick={clearFilters}
                   className="w-full  transition-colors"
+                  arial-label="tournament-clear-filter-btn"
                 >
                   Clear Filters
                 </Button>
diff --git a/components/BracketForm.jsx b/components/BracketForm.jsx
index a0aa6ed..be51c75 100644
--- a/components/BracketForm.jsx
+++ b/components/BracketForm.jsx
@@ -193,7 +193,9 @@ export default function BracketForm() {
               )}
             />
             <div className="col-span-2">
-              <Button type="submit">Create Bracket</Button>
+              <Button type="submit" arial-label="create-bracket-btn">
+                Create Bracket
+              </Button>
             </div>
           </form>
         </Form>
@@ -231,11 +233,16 @@ export default function BracketForm() {
               onClick={() =>
                 teamForm.setValue("teams", [...teamForm.watch("teams"), ""])
               }
+              arial-label="add-another-team-btn"
             >
               Add Another Team
             </Button>
             <div>
-              <Button type="submit" disabled={teamForm.formState.isSubmitting}>
+              <Button
+                type="submit"
+                disabled={teamForm.formState.isSubmitting}
+                arial-label="submit-team-btn"
+              >
                 Submit Teams
               </Button>
             </div>
diff --git a/components/BracketList.jsx b/components/BracketList.jsx
index 42be9d9..7840322 100644
--- a/components/BracketList.jsx
+++ b/components/BracketList.jsx
@@ -41,7 +41,11 @@ const BracketList = () => {
       ) : (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {brackets.map((bracket) => (
-            <Link href={`/bracket/${bracket._id}`} key={bracket._id}>
+            <Link
+              href={`/bracket/${bracket._id}`}
+              key={bracket._id}
+              aria-label="bracket-id-page"
+            >
               <div className="border p-4 rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer">
                 {bracket.bracketImage && (
                   <div className="relative w-full h-40 mb-2">
diff --git a/components/Contatct/Contact-left.jsx b/components/Contatct/Contact-left.jsx
index f3b6b5a..4d40e4e 100644
--- a/components/Contatct/Contact-left.jsx
+++ b/components/Contatct/Contact-left.jsx
@@ -34,7 +34,7 @@ export default function ContactLeftComp({ className }) {
         <div className="flex gap-4">
           {socialLinks.map((e, i) => {
             return (
-              <Link href={e.link} key={i}>
+              <Link href={e.link} key={i} aria-label={`${e.title}-social`}>
                 <e.icon className="invert size-6" />
               </Link>
             );
diff --git a/components/Contatct/Contact-right.jsx b/components/Contatct/Contact-right.jsx
index 7d9de9c..7afa729 100644
--- a/components/Contatct/Contact-right.jsx
+++ b/components/Contatct/Contact-right.jsx
@@ -186,6 +186,7 @@ export default function ContactRightComp({ className }) {
             disabled={loading}
             type="submit"
             className="flex gap-2 items-center"
+            arial-label="send-contact-btn"
           >
             {loading ? (
               <Loader className="animate-spin" />
@@ -219,7 +220,7 @@ export default function ContactRightComp({ className }) {
       <div className="sm:hidden justify-center mt-8 flex flex-wrap gap-4">
         {socialLinks.map((e, i) => {
           return (
-            <Link href={e.link} key={i}>
+            <Link href={e.link} key={i} aria-label={`${e.title}-social}`}>
               <e.icon className=" size-4" />
             </Link>
           );
diff --git a/components/FaqSection.jsx b/components/FaqSection.jsx
index fb4cc98..6077410 100644
--- a/components/FaqSection.jsx
+++ b/components/FaqSection.jsx
@@ -41,7 +41,10 @@ const FaqsCard = ({ faqsList, idx }) => {
       className="border border-border rounded-lg overflow-hidden hover:border-primary/50 transition-colors"
       onClick={() => setIsOpen(!isOpen)}
     >
-      <button className="w-full px-6 py-4 flex items-center justify-between text-left">
+      <button
+        className="w-full px-6 py-4 flex items-center justify-between text-left"
+        arial-label="faq-btn"
+      >
         <h3 className="font-semibold text-lg">{faqsList.title}</h3>
         <span className="text-primary">
           {isOpen ? <FaMinus /> : <FaPlus />}
diff --git a/components/FeatureSection/FeatureSectionGrid.jsx b/components/FeatureSection/FeatureSectionGrid.jsx
index 01c6ca1..524146f 100644
--- a/components/FeatureSection/FeatureSectionGrid.jsx
+++ b/components/FeatureSection/FeatureSectionGrid.jsx
@@ -131,6 +131,7 @@ export const SkeletonThree = () => {
       href="https://discord.com/invite/AB2vCdyw"
       target="__blank"
       className="relative flex gap-10  h-full group/image border-b"
+      aria-label="discord-btn"
     >
       <div className="w-full  mx-auto bg-transparent dark:bg-transparent group h-full">
         <div
diff --git a/components/FiltersSidebar.jsx b/components/FiltersSidebar.jsx
index bbddf88..b08585e 100644
--- a/components/FiltersSidebar.jsx
+++ b/components/FiltersSidebar.jsx
@@ -16,6 +16,7 @@ const FiltersSidebar = ({ filters, setFilters, onReset }) => {
             type="button"
             className="transition-all"
             onClick={onReset}
+            arial-label="reset-btn"
           >
             Reset
           </Button>
@@ -78,7 +79,7 @@ const FiltersSidebar = ({ filters, setFilters, onReset }) => {
           </select>
         </div>
 
-        <Button type="button" className="w-full mt-5">
+        <Button type="button" className="w-full mt-5" arial-label="apply-btn">
           Apply
         </Button>
       </form>
diff --git a/components/Footer.jsx b/components/Footer.jsx
index 4e9e0c3..e123d30 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -36,7 +36,11 @@ export default function Footer() {
         <div className="flex flex-col">
           {/* logo */}
           <div>
-            <Link href="/" className="flex items-center gap-2">
+            <Link
+              href="/"
+              className="flex items-center gap-2"
+              aria-label="home-page"
+            >
               <Image
                 src="/sanity_esports_logo.jpg"
                 alt="logo"
@@ -65,6 +69,7 @@ export default function Footer() {
                 href={item.link}
                 target="_blank"
                 className="hover:scale-110 transition-all duration-300"
+                aria-label={`${item.title}-icon`}
               >
                 {/* <item.icon /> */}
                 <item.icon
@@ -83,10 +88,15 @@ export default function Footer() {
             <Link
               href="https://discord.com/invite/rUYVa93Svr"
               className="hover:underline"
+              aria-label="join-community"
             >
               Join Community
             </Link>
-            <Link href="/contact" className="hover:underline">
+            <Link
+              href="/contact"
+              className="hover:underline"
+              aria-label="contact-btn"
+            >
               Contact
             </Link>
           </div>
diff --git a/components/HeroSection.jsx b/components/HeroSection.jsx
index 656d940..7f8b304 100644
--- a/components/HeroSection.jsx
+++ b/components/HeroSection.jsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { Button } from "./ui/button";
 import Image from "next/image";
 import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
 
 export default function HeroSection() {
   return (
@@ -14,9 +15,12 @@ export default function HeroSection() {
       transition={{ duration: 0.8, delay: 0.4 }}
     >
       <div className="text-center max-w-4xl mx-auto space-y-6">
-        <span className="inline-block px-4 py-1.5 bg-primary/10 text-primary rounded-full text-sm font-medium">
-          Discover new heights
-        </span>
+        <div className="flex items-center  gap-2 w-fit mx-auto px-4 py-1.5  rounded-full text-sm font-medium border border-neutral-700">
+          <p className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+            &#10024; Discover new heights{" "}
+          </p>
+          <ArrowRight className="size-4" />
+        </div>
 
         <h1 className="text-5xl md:text-6xl font-bold leading-tight">
           Level Up Your Esports Journey with{" "}
@@ -31,10 +35,14 @@ export default function HeroSection() {
         </p>
 
         <div className="flex items-center justify-center gap-4 pt-4">
-          <Button size="lg" className="bg-primary hover:bg-primary-hover">
+          <Button
+            size="lg"
+            className="bg-primary hover:bg-primary-hover"
+            arial-label="get-started-btn"
+          >
             Get Started
           </Button>
-          <Button size="lg" variant="outline">
+          <Button size="lg" variant="outline" arial-label="learn-more-btn">
             Learn More
           </Button>
         </div>
diff --git a/components/ModeToggle.jsx b/components/ModeToggle.jsx
index 6fcf74e..3d565e6 100644
--- a/components/ModeToggle.jsx
+++ b/components/ModeToggle.jsx
@@ -17,8 +17,8 @@ export function ModeToggle() {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
+      <DropdownMenuTrigger asChild aria-label="theme-toggle-btn">
+        <Button variant="outline" size="icon" arial-label="toggle-theme-btn">
           <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
index 8906a07..908b0d1 100644
--- a/components/Navbar.jsx
+++ b/components/Navbar.jsx
@@ -51,7 +51,11 @@ const Navbar = () => {
       <div className="flex gap-20">
         {/* Logo */}
         <div className="flex items-center">
-          <Link href="/" className="flex items-center gap-2">
+          <Link
+            href="/"
+            className="flex items-center gap-2"
+            aria-label="home-page"
+          >
             <Image
               src="/sanity_esports_logo.jpg"
               alt="logo"
@@ -74,6 +78,7 @@ const Navbar = () => {
               className={`font-medium hover:text-foreground/90 transition-all
                 ${isActive(pathname, item.href) ? "text-foreground" : "text-foreground/60"}
               `}
+              aria-label={`${item.href}-nav-item`}
             >
               {item.title}
             </Link>
@@ -84,8 +89,15 @@ const Navbar = () => {
       {/* buttons */}
       <div className="hidden lg:flex items-center pt-2 gap-4 transition-all">
         <NotificationBar />
-        <Link href="https://discord.com/invite/rUYVa93Svr">
-          <Button variant="outline" className="px-5 rounded-md">
+        <Link
+          href="https://discord.com/invite/rUYVa93Svr"
+          aria-label="join-community"
+        >
+          <Button
+            variant="outline"
+            className="px-5 rounded-md"
+            arial-label="join-community-btn"
+          >
             Join Community
           </Button>
         </Link>
@@ -96,10 +108,8 @@ const Navbar = () => {
       <div className="lg:hidden flex gap-8 items-center  transition-all">
         <NotificationBar />
         <Sheet>
-          <SheetTrigger asChild>
-            <Button variant="outline">
-              <AlignJustify />
-            </Button>
+          <SheetTrigger>
+            <AlignJustify aria-label="nav-toggle-mob" />
           </SheetTrigger>
           <SheetContent className="flex flex-col items-start justify-start bg-black">
             <SheetHeader>
@@ -115,6 +125,7 @@ const Navbar = () => {
                     key={index}
                     href={item.href}
                     className="font-medium text-lg"
+                    aria-label={`${item.title}-nav-item`}
                   >
                     {item.title}
                   </Link>
@@ -122,8 +133,15 @@ const Navbar = () => {
               </nav>
             </div>
             <SheetFooter className="mt-10">
-              <Link href="https://discord.com/invite/rUYVa93Svr">
-                <Button variant="link" className="px-5 -ml-5 text-lg underline">
+              <Link
+                href="https://discord.com/invite/rUYVa93Svr"
+                aria-label="join-community"
+              >
+                <Button
+                  variant="link"
+                  className="px-5 -ml-5 text-lg underline"
+                  arial-label="join-community-btn"
+                >
                   Join Community
                 </Button>
               </Link>
diff --git a/components/NewsItem.jsx b/components/NewsItem.jsx
index b117b79..5729407 100644
--- a/components/NewsItem.jsx
+++ b/components/NewsItem.jsx
@@ -26,6 +26,7 @@ const NewsItem = ({ title, description, url, urlToImage }) => {
           className="bg-white text-black font-semibold hover:bg-tertiary transition-all text-[15px] px-4 py-2"
           href={url}
           target="_blank"
+          aria-label="read-article"
         >
           Read Article
         </Link>
diff --git a/components/Notification.jsx b/components/Notification.jsx
index fede7ef..75a1df8 100644
--- a/components/Notification.jsx
+++ b/components/Notification.jsx
@@ -12,10 +12,8 @@ export default function NotificationBar() {
   return (
     <div>
       <Popover>
-        <PopoverTrigger>
-          <div>
-            <Inbox />
-          </div>
+        <PopoverTrigger aria-label="notification-trigger">
+          <Inbox />
         </PopoverTrigger>
         <PopoverContent className="duration-500 mt-4 border border-neutral-700 shadow-none rounded-md bg-black w-screen sm:w-fit sm:mx-12  ">
           <div>
diff --git a/components/TeamCard.jsx b/components/TeamCard.jsx
index c3e462f..900703b 100644
--- a/components/TeamCard.jsx
+++ b/components/TeamCard.jsx
@@ -56,7 +56,9 @@ const TeamCard = ({ team }) => {
       </div>
 
       <div>
-        <Button className="w-full">Request to Join</Button>
+        <Button className="w-full" arial-label="request-to-join-btn">
+          Request to Join
+        </Button>
       </div>
     </div>
   );
diff --git a/components/TournamentSection.jsx b/components/TournamentSection.jsx
index 4a18c20..2269aee 100644
--- a/components/TournamentSection.jsx
+++ b/components/TournamentSection.jsx
@@ -108,6 +108,7 @@ export default function TournamentSection({ filters }) {
               href={`/tournaments/${tournament._id}`}
               className=""
               prefetch={true} // prefetch the tournament page
+              aria-label="tournament-redirect-btn"
             >
               <TournamentCard {...tournament} />
             </Link>