diff --git a/apps/web/components/Hero.tsx b/apps/web/components/Hero.tsx
index 34fead2d..82eafc08 100644
--- a/apps/web/components/Hero.tsx
+++ b/apps/web/components/Hero.tsx
@@ -115,13 +115,13 @@ export default function Hero({ tracks }: { tracks: TrackPros[] }) {
               gradientUnits="userSpaceOnUse"
               gradientTransform="matrix(12.12436 -7 4.2 7.27461 16 16)"
             >
-              <stop stop-color="#7D7D7D" />
-              <stop offset=".267" stop-color="#7E7C7A" />
-              <stop offset=".45" stop-color="#817871" />
-              <stop offset=".608" stop-color="#867162" />
-              <stop offset=".753" stop-color="#8D684C" />
-              <stop offset=".886" stop-color="#965C30" />
-              <stop offset="1" stop-color="#A04F12" />
+              <stop stopColor="#7D7D7D" />
+              <stop offset=".267" stopColor="#7E7C7A" />
+              <stop offset=".45" stopColor="#817871" />
+              <stop offset=".608" stopColor="#867162" />
+              <stop offset=".753" stopColor="#8D684C" />
+              <stop offset=".886" stopColor="#965C30" />
+              <stop offset="1" stopColor="#A04F12" />
             </radialGradient>
           </defs>
         </motion.svg>
diff --git a/apps/web/components/Tracks.tsx b/apps/web/components/Tracks.tsx
index d9af482c..bda7c25f 100644
--- a/apps/web/components/Tracks.tsx
+++ b/apps/web/components/Tracks.tsx
@@ -128,11 +128,11 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
       initial={{ y: -20, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ duration: 0.5, ease: "easeInOut", type: "spring", damping: 10, delay: 0.5 }}
-      className="flex max-w-5xl flex-col gap-4 w-full mx-auto p-4"
+      className="mx-auto flex w-full max-w-5xl flex-col gap-4 p-4"
       id="tracks"
     >
-      <div className="flex w-full gap-4 justify-between items-center flex-col md:flex-row">
-        <div className="flex items-center gap-2 p-2 rounded-lg bg-primary/5 mx-auto md:mx-0 justify-center">
+      <div className="flex w-full flex-col items-center justify-between gap-4 md:flex-row">
+        <div className="bg-primary/5 mx-auto flex items-center justify-center gap-2 rounded-lg p-2 md:mx-0">
           <Button
             size={"lg"}
             variant={"ghost"}
@@ -141,7 +141,7 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
           >
             Cohort 2.0
           </Button>
-          <Separator className="w-0.5 h-4 bg-primary/25" />
+          <Separator className="bg-primary/25 h-4 w-0.5" />
           <Button
             size={"lg"}
             variant={"ghost"}
@@ -151,9 +151,9 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
             Cohort 3.0
           </Button>
         </div>
-        <div className="flex gap-2 p-2.5 bg-primary/5 rounded-lg w-full md:w-fit">
+        <div className="bg-primary/5 flex w-full gap-2 rounded-lg p-2.5 md:w-fit">
           {/* Filter by Categories */}
-          <div className="flex gap-2 items-center ">
+          <div className="flex items-center gap-2">
             <Select onValueChange={(e) => setSelectedCategory(e === "All" ? "" : e)}>
               <SelectTrigger className="w-[250px]">
                 <SelectValue placeholder={selectedCategory || "All"} />
@@ -187,12 +187,12 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
       </div>
 
       {/* Tracks with Animation */}
-      <motion.ul className="flex flex-col gap-4 w-full" variants={trackAnimation} initial="hidden" animate="show">
+      <motion.ul className="flex w-full flex-col gap-4" variants={trackAnimation} initial="hidden" animate="show">
         {loading ? (
           Array.from({ length: tracksPerPage }).map((_, idx) => (
             <div
               key={idx}
-              className="flex items-center space-x-4 w-full h-24 bg-neutral-100 dark:bg-neutral-900 p-4 rounded-xl"
+              className="flex h-24 w-full items-center space-x-4 rounded-xl bg-neutral-100 p-4 dark:bg-neutral-900"
             >
               <Skeleton className="h-12 w-12 rounded-2xl" />
               <div className="space-y-2">
@@ -202,7 +202,7 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
             </div>
           ))
         ) : visibleTracks.length === 0 ? (
-          <p className="text-center font-medium tracking-tighter text-lg max-w-screen-sm px-4 mx-auto">
+          <p className="mx-auto max-w-screen-sm px-4 text-center text-lg font-medium tracking-tighter">
             ☹️ Sorry - currently there are no tracks available.
           </p>
         ) : (
@@ -216,7 +216,7 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
 
       {/* Skeleton */}
       {filteredTracks.length < tracksPerPage && (
-        <div className="flex items-center space-x-4 w-full h-24 bg-neutral-100 dark:bg-neutral-900 p-4 rounded-xl">
+        <div className="flex h-24 w-full items-center space-x-4 rounded-xl bg-neutral-100 p-4 dark:bg-neutral-900">
           <Skeleton className="h-12 w-12 rounded-2xl" />
           <div className="space-y-2">
             <Skeleton className="h-4 w-[250px]" />
@@ -225,7 +225,7 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
         </div>
       )}
       {/* Pagination Controls */}
-      <div className="flex justify-end items-end mt-4 w-full">
+      <div className="mt-4 flex w-full items-end justify-end">
         <Pagination>
           <PaginationContent>
             <PaginationItem className="cursor-pointer">
@@ -248,9 +248,7 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
               </>
             )}
 
-            <PaginationItem
-            className="cursor-pointer"
-            >
+            <PaginationItem className="cursor-pointer">
               <PaginationNext
                 onClick={() => {
                   setCurrentPage((prev) => Math.min(prev + 1, totalPages));
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 1d532ed8..fdb52001 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -2,6 +2,7 @@
 
 const path = require('path');
 const webpack = require("webpack");
+const isDev = process.env.NODE_ENV === 'development';
 
 module.exports = {
   webpack: (config) => {
@@ -24,7 +25,9 @@ module.exports = {
   },
 
   transpilePackages: ["@repo/ui", "@repo/common", "@repo/recoil"],
-  images: {
-    domains: ["d2szwvl7yo497w.cloudfront.net", "appx-wsb-gcp.akamai.net.in"], // Add your domain here
-  },
+   images: isDev
+    ? { unoptimized: true }
+    : {
+        domains: ["d2szwvl7yo497w.cloudfront.net" , "appx-wsb-gcp.akamai.net.in"], //Add your domain here
+      },
 };
diff --git a/apps/web/screens/footer.tsx b/apps/web/screens/footer.tsx
index e442a6be..73813e67 100644
--- a/apps/web/screens/footer.tsx
+++ b/apps/web/screens/footer.tsx
@@ -42,7 +42,7 @@ const Footer = () => {
                     <path
                       d="M13.530750000000001 0.7153750000000001 1.46925 14.284625"
                       stroke="currentColor"
-                      stroke-linecap="round"
+                      strokeLinecap="round"
                       strokeWidth="1"
                     ></path>
                   </svg>
@@ -64,7 +64,7 @@ const Footer = () => {
                     <path
                       d="M0.7153750000000001 10.515375V4.484624999999999c0 -2.0816875 1.6875624999999999 -3.76925 3.76925 -3.76925h6.03075c2.0816875 0 3.76925 1.6875624999999999 3.76925 3.76925v6.03075c0 2.0816875 -1.6875624999999999 3.76925 -3.76925 3.76925H4.484624999999999c-2.0816875 0 -3.76925 -1.6875624999999999 -3.76925 -3.76925Z"
                       stroke="currentColor"
-                      stroke-width="1"
+                      strokeWidth="1"
                     ></path>
                     <path
                       d="m11.646125000000001 3.361375 0.0075625 -0.008375"