diff --git a/public/SEOIMAGE.webp b/public/SEOIMAGE.webp
new file mode 100644
index 0000000..916e8a6
Binary files /dev/null and b/public/SEOIMAGE.webp differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 6854685..5447c0c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -42,7 +42,8 @@ body {
   background-color: rgb(255, 255, 255);
   /*font-family: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", "Arial",sans-serif;*/
   line-height: 1;
-  text-rendering: optimizeSpeed;
+  /*text-rendering: optimizeSpeed;*/
+  text-rendering: optimizeLegibility;
   display: flex;
   flex-direction: column;
   justify-content: center;
diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx
index 33d6d18..94e588b 100644
--- a/src/app/map/page.tsx
+++ b/src/app/map/page.tsx
@@ -1,115 +1,3 @@
-// "use client";
-//
-// import { useRef } from 'react';
-// import map from "/public/mapUk.svg";
-// import styles from "./page.module.css";
-// import Image from "next/image";
-//
-// const Map = () => {
-//     console.log("Map.tsx");
-//
-//     const zoomLevelRef = useRef<number>(1);
-//     const marginLeftLevelRef = useRef<number>(0);
-//     const marginTopLevelRef = useRef<number>(0);
-//     const mapImageRef = useRef<HTMLImageElement | null>(null);
-//     const mapBoxHeightRef = useRef<HTMLDivElement | null>(null);
-//     const increaseMapBoxHeightRef = useRef<number>(6930);
-//
-//     const handleZoomIn = () => {
-//         if (mapBoxHeightRef.current) {
-//             mapBoxHeightRef.current.style.aspectRatio = `10800/${increaseMapBoxHeightRef.current += 3000}`;
-//         }
-//         zoomLevelRef.current += 1;
-//         marginLeftLevelRef.current += 46.2;
-//         marginTopLevelRef.current += 29;
-//         updateMapStyle();
-//     };
-//
-//     const handleZoomOut = () => {
-//         if (increaseMapBoxHeightRef.current > 6930 && mapBoxHeightRef.current) {
-//             mapBoxHeightRef.current.style.aspectRatio = `10800/${increaseMapBoxHeightRef.current -= 3000}`;
-//         }
-//         if (zoomLevelRef.current > 1) {
-//             zoomLevelRef.current -= 1;
-//             marginLeftLevelRef.current -= 46.2;
-//             marginTopLevelRef.current -= 29;
-//             updateMapStyle();
-//         }
-//     };
-//
-//     const updateMapStyle = () => {
-//         if (mapImageRef.current) {
-//             mapImageRef.current.style.transform = `scale(${zoomLevelRef.current})`;
-//             mapImageRef.current.style.marginTop = `${marginTopLevelRef.current}vw`;
-//             mapImageRef.current.style.marginLeft = `${marginLeftLevelRef.current}vw`;
-//         }
-//     };
-//
-//     return (
-//         <div>
-//             <div className={styles["uttarakhand-map"]}>
-//                 <h1 className={styles["uttarakhand-map-heading"]}>Map of Uttarakhand</h1>
-//                 <p>Detailed map of Uttarakhand</p>
-//                 <div ref={mapBoxHeightRef} className={styles["uttarakhand-map-container"]}>
-//                     <Image className={styles["map-image"]} ref={mapImageRef} src={map} alt="Important Map of Uttarakhand" decoding="async" />
-//                 </div>
-//                 <div className={styles["zoom-button-container"]}>
-//                     <p onClick={handleZoomIn} className={styles["zoom-level-button"]}>+</p>
-//                     <p onClick={handleZoomOut} className={styles["zoom-level-button"]}>-</p>
-//                 </div>
-//                 <p>Zoom to view Map</p>
-//             </div>
-//         </div>
-//     );
-// };
-//
-// export default Map;
-//
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/*** New Logic is here ***/
-
-
-
 "use client";
 
 import { useRef } from 'react';
diff --git a/src/app/page.tsx b/src/app/page.tsx
index df5e9db..60e086e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,6 +11,7 @@ import Nanda_Sunanda from "/public/Nanda-Sunanda.webp";
 import Notify_Banner from "/public/notify-early-banner.jpg"
 import PahadiWomen from "/public/bhotiaWoman.webp"
 import Screen from "@/components/Screen";
+import Festivals from "@/components/Festivals";
 
 export default function Home() {
 
@@ -145,6 +146,8 @@ export default function Home() {
 
             </section>
 
+            {/*<Festivals />*/}
+
 
         </>
     );
diff --git a/src/app/working-error.tsx b/src/app/working-error.tsx
index e13f34f..dda2af2 100644
--- a/src/app/working-error.tsx
+++ b/src/app/working-error.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-const Custom404 = () => {
+const WorkingError = () => {
     return (
         <div style={{
             display: 'flex',
@@ -66,4 +66,4 @@ const Custom404 = () => {
     );
 };
 
-export default Custom404;
+export default WorkingError;
diff --git a/src/components/Festivals.tsx b/src/components/Festivals.tsx
index e69de29..a022fc2 100644
--- a/src/components/Festivals.tsx
+++ b/src/components/Festivals.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { getUpcomingFestival } from "@/utils/festivals";
+import SectionCard from "@/components/ui/SectionCard";
+import Nanda_Sunanda from "/public/Nanda-Sunanda.webp";
+
+
+const Festivals: React.FC = () => {
+    const upcomingFestival = getUpcomingFestival();  // Get the upcoming festival
+
+    // Function to format a date in DD-MM-YYYY format
+    const formatFestivalDate = (festivalDate: string): string => {
+        const [day, month] = festivalDate.split('-');
+        const currentYear = new Date().getFullYear();
+        return `${day}-${month}-${currentYear}`;  // Convert to DD-MM-YYYY format
+    };
+
+    return (
+        <div>
+            <h1>Upcoming Festivals in Uttarakhand</h1>
+            {upcomingFestival ? (
+                <div>
+                    <strong>{upcomingFestival.name}</strong> - {formatFestivalDate(upcomingFestival.date)}
+                </div>
+            ) : (
+                <p>No upcoming festivals</p>
+            )}
+
+            <SectionCard cardTitle={"UPCOMING FESTIVAL"} title={upcomingFestival.name} subTitle={formatFestivalDate(upcomingFestival.date)}                 description={"Egaas Bagwal is a unique festival celebrated 11 days after Diwali in the hilly regions of Uttarakhand. According to local belief, Lord Rama returned from exile late to these areas, which is why people here celebrate Egaas with great enthusiasm. The festival involves preparing traditional delicacies, performing joyful folk dances, and lighting up homes, much like Diwali. A standout tradition is spinning a flaming rope called \"Bhailo\", where villagers twirl a fire-lit rope, creating a mesmerizing display symbolizing light’s triumph over darkness. Egaas Bagwal reflects Uttarakhand’s rich cultural heritage, offering a glimpse into the community’s deep-rooted traditions and festive spirit. For the people of Uttarakhand, it’s not just a festival, but a meaningful tribute to their ancestors and the vibrant life of the hills."}
+                         image={Nanda_Sunanda} readMoreLink={""} />
+        </div>
+    );
+};
+
+export default Festivals;
diff --git a/src/utils/festivals.ts b/src/utils/festivals.ts
index e69de29..12e1c00 100644
--- a/src/utils/festivals.ts
+++ b/src/utils/festivals.ts
@@ -0,0 +1,58 @@
+// Define an interface 'Festival' that represents the structure of a festival object
+// This interface ensures that every festival object will have two properties:
+// 1. 'name' - a string that stores the name of the festival.
+// 2. 'date' - a string that represents the date of the festival (in DD-MM format).
+export interface Festival {
+    name: string;  // The name of the festival, e.g., "Harela".
+    date: string;  // The date of the festival in DD-MM format, e.g., "16-07".
+}
+
+// Define a constant 'festivals', which is an array of objects, each object conforming
+// to the 'Festival' interface. This array contains details about several Uttarakhand festivals.
+export const festivals: Festival[] = [
+    { name: "Harela", date: "16-07" },
+    { name: "Phool Dei", date: "14-03" },
+    { name: "Nanda Devi Raj Jat", date: "05-09" },
+    { name: "Bikhauti", date: "14-04" },
+    { name: "Kauthig", date: "22-02" },
+    { name: "Ghee Sankranti", date: "17-02" },
+    { name: "Egaas Bhagwal", date: "12-03" }
+];
+
+// Define a function 'getUpcomingFestival' which returns the festival happening today or the next upcoming festival,
+// and if all festivals for the current year have passed, it returns the first festival of the next year.
+export const getUpcomingFestival = (): Festival => {
+
+    // Get the current date.
+    const currentDate = new Date();
+    const currentDay = currentDate.getDate();
+    const currentMonth = currentDate.getMonth() + 1; // Months are zero-indexed in JS, so add 1.
+
+    // Function to compare festival date with current date, accounting for annual recurrence.
+    const compareDate = (festivalDate: string): number => {
+        const [day, month] = festivalDate.split('-').map(Number);
+
+        // Create date objects with the current year.
+        const festivalThisYear = new Date(currentDate.getFullYear(), month - 1, day);
+        const today = new Date(currentDate.getFullYear(), currentMonth - 1, currentDay);
+
+        // Calculate the difference in time (in milliseconds).
+        return festivalThisYear.getTime() - today.getTime();
+    };
+
+    // Filter the 'festivals' array to only keep future festivals or today's festival.
+    const upcomingFestivals = festivals
+        .filter(festival => compareDate(festival.date) >= 0)
+        .sort((a, b) => compareDate(a.date) - compareDate(b.date));
+
+    // If there are upcoming festivals for the current year, return the first one.
+    if (upcomingFestivals.length > 0) {
+        return upcomingFestivals[0];
+    }
+
+    // If no festivals are left for this year, return the first festival of the next year.
+    // Assume the festivals repeat annually.
+    return festivals.sort((a, b) => compareDate(a.date) - compareDate(b.date))[0];
+};
+
+