diff --git a/src/app/featuredToursPage/[tourId]/page.tsx b/src/app/featuredToursPage/[tourId]/page.tsx
new file mode 100644
index 00000000..dd1f5cbf
--- /dev/null
+++ b/src/app/featuredToursPage/[tourId]/page.tsx
@@ -0,0 +1,137 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { fetchAllDisplays } from '../../../supabase/displays/queries';
+import { fetchMedia } from '../../../supabase/media/queries';
+import { fetchTour } from '../../../supabase/tours/queries';
+import { fetchTourDisplays } from '../../../supabase/tour_displays/queries';
+import { fetchTourMedia } from '../../../supabase/tour_media/queries';
+import {
+  DisplayRow,
+  MediaRow,
+  TourDisplaysRow,
+  TourMediaRow,
+  TourRow,
+} from '../../../types/types';
+
+import BackButton from '../../../components/userComponents/BackButton/BackButton';
+import NavBar from '../../../components/userComponents/navBar/navBar';
+
+/**
+ * @param params -
+ * @param params.params -
+ * @param params.params.tourId - The tour ID
+ * @returns The tour start page
+ */
+export default function TourStartPage({
+  params,
+}: {
+  params: { tourId: string };
+}) {
+  const [tour, setTour] = useState<TourRow>();
+  const [tourDisplays, setTourDisplays] = useState<TourDisplaysRow[]>([]);
+  const [displays, setDisplays] = useState<DisplayRow[]>([]);
+  const [tourMedia, setTourMedia] = useState<TourMediaRow[]>([]);
+  const [media, setMedia] = useState<MediaRow[]>([]);
+
+  useEffect(() => {
+    // Fetch tour, tour displays, and tour media data
+    const fetchData = async () => {
+      const fetchedTour = await fetchTour(params.tourId);
+      setTour(fetchedTour);
+      const fetchedTourDisplays = await fetchTourDisplays(params.tourId);
+      setTourDisplays(fetchedTourDisplays);
+      const fetchedDisplays = await fetchAllDisplays();
+      setDisplays(fetchedDisplays);
+      const fetchedTourMedia = await fetchTourMedia(params.tourId);
+      setTourMedia(fetchedTourMedia);
+      const fetchedMedia = await fetchMedia();
+      setMedia(fetchedMedia);
+    };
+
+    fetchData();
+  }, [params.tourId]);
+
+  return (
+    tour && (
+      <div className="bg-ivory w-[24.375rem] min-h-screen">
+        <NavBar />
+        <Link
+          href="/featuredToursPage"
+          className="absolute top-[5.25rem] left-[1.12rem] z-10"
+        >
+          <BackButton />
+        </Link>
+        <div className="bg-scary-forest relative w-[24.375rem] h-[15.3125rem]">
+          {media.length > 0 && (
+            <Image
+              key={media.find(m => m.id === tourMedia[0]?.media_id)?.id}
+              src={media.find(m => m.id === tourMedia[0]?.media_id)?.url ?? ''}
+              alt={media.find(m => m.id === tourMedia[0]?.media_id)?.text ?? ''}
+              layout="fill"
+              objectFit="cover"
+              priority
+            />
+          )}
+        </div>
+
+        <div className="w-[24.375rem] flex flex-col px-[1.125rem] absolute top-[17.81rem] gap-6 mb-[2.5rem]">
+          <div className="bg-mint-green w-[22.125rem] rounded-md px-[2.1875rem] py-[2.25rem] flex-col items-center gap-3 inline-flex">
+            <div className="flex flex-col w-[22.125rem] rounded-md px-[2.1875rem] text-center gap-1">
+              <h2 className="text-night text-sm font-lato font-normal">
+                WELCOME TO
+              </h2>
+              <h1 className="text-night font-lato text-[2rem] truncate font-bold">
+                {tour.name}
+              </h1>
+            </div>
+            <div className="w-[12.625rem] px-4 py-[0.62rem] bg-asparagus rounded-lg justify-center items-center gap-2.5">
+              <Link
+                href={`/featuredToursPage/${params.tourId}/${tourDisplays[0]?.display_id}`}
+              >
+                <h2 className="text-ivory text-center text-base font-lato font-bold">
+                  Start Tour
+                </h2>
+              </Link>
+            </div>
+          </div>
+
+          <p className="text-night font-lato font-normal">{tour.description}</p>
+
+          <div className="flex flex-col relative gap-4 mb-10">
+            <div className="flex justify-between items-center">
+              <h3 className="text-night font-lato text-lg font-bold">
+                In this tour
+              </h3>
+              <div className="bg-[#F5EDCF80] w-[4.375rem] h-[1.5rem] rounded-[0.5625rem] px-3 py-1">
+                <p className="text-night font-lato font-normal text-xs text-center">
+                  {tour.stop_count} stops
+                </p>
+              </div>
+            </div>
+            <ol>
+              {tourDisplays.map(tourDisplay => (
+                <li key={tourDisplay.display_id} className="mb-[0.44rem] ml-4">
+                  <h4 className="font-normal font-lato">
+                    {tourDisplay.display_order != null
+                      ? tourDisplay.display_order + 1
+                      : ''}
+                    .{' '}
+                    {
+                      displays.find(
+                        display => display.id === tourDisplay.display_id,
+                      )?.title
+                    }
+                  </h4>
+                </li>
+              ))}
+            </ol>
+          </div>
+        </div>
+      </div>
+    )
+  );
+}
diff --git a/src/app/featuredToursPage/[tourId]/tourEndPage/page.tsx b/src/app/featuredToursPage/[tourId]/tourEndPage/page.tsx
new file mode 100644
index 00000000..e514f030
--- /dev/null
+++ b/src/app/featuredToursPage/[tourId]/tourEndPage/page.tsx
@@ -0,0 +1,142 @@
+'use client';
+
+import Link from 'next/link';
+import React, { useEffect, useState } from 'react';
+
+import NavBar from '../../../../components/userComponents/navBar/navBar';
+import {
+  MediaRow,
+  TourRow,
+  TourMediaRow,
+  TourDisplaysRow,
+} from '../../../../types/types';
+import { fetchMedia } from '../../../../supabase/media/queries';
+import { fetchTour } from '../../../../supabase/tours/queries';
+import { fetchTourDisplays } from '../../../../supabase/tour_displays/queries';
+import { fetchTourMedia } from '../../../../supabase/tour_media/queries';
+import {
+  BackArrow,
+  Congratulations,
+  ExternalLinkIcon,
+} from '../../../../../public/icons';
+
+/**
+ * @param params -
+ * @param params.params -
+ * @param params.params.tourId - The tour ID
+ * @returns The tour end page
+ */
+export default function TourEndPage({
+  params,
+}: {
+  params: { tourId: string };
+}) {
+  const [media, setMedia] = useState<MediaRow[]>([]);
+  const [tour, setTour] = useState<TourRow>();
+  const [tourMedia, setTourMedia] = useState<TourMediaRow[]>([]);
+  const [backLink, setBackLink] = useState<string>(
+    `/featuredToursPage/${params.tourId}`,
+  );
+
+  useEffect(() => {
+    // Get tour
+    const getTour = async () => {
+      const fetchedTour = await fetchTour(params.tourId);
+      setTour(fetchedTour);
+    };
+
+    // Get tour media
+    const getTourMedia = async () => {
+      const fetchedTourMedia = await fetchTourMedia(params.tourId);
+      setTourMedia(fetchedTourMedia);
+    };
+
+    // Get media
+    const getMedia = async () => {
+      const fetchedMedia = await fetchMedia();
+      setMedia(fetchedMedia);
+    };
+
+    /**
+     * @returns The link to the previous page.
+     */
+    async function getBackLink() {
+      const tourDisplays: TourDisplaysRow[] = await fetchTourDisplays(
+        params.tourId,
+      );
+      setBackLink(
+        `/featuredToursPage/${params.tourId}/${
+          tourDisplays[tourDisplays.length - 1].display_id
+        }`,
+      );
+    }
+
+    getTour();
+    getTourMedia();
+    getMedia();
+    getBackLink();
+  }, [params.tourId]);
+
+  return (
+    <div className="bg-ivory w-[24.375rem] min-h-screen">
+      <NavBar />
+      <Link href={backLink} className="relative top-4 left-[1.12rem]">
+        <BackArrow />
+      </Link>
+
+      <div className="flex flex-col gap-10 mt-8 mb-10">
+        <div className="flex flex-col items-center gap-8 mx-[3.47rem]">
+          <div className="flex flex-col gap-3 text-center">
+            <div className="flex flex-col items-center gap-5 mx-[2.34rem]">
+              <Congratulations />
+              <h1 className="text-night font-lato text-xl font-semibold">
+                {`You've reached the end of this tour!`}
+              </h1>
+            </div>
+            <p className="text-night font-lato text-sm font-normal">
+              Thanks for visiting {tour?.name}.
+            </p>
+          </div>
+          <div className="bg-asparagus w-[13.75rem] text-center rounded-lg">
+            <Link href="/featuredToursPage">
+              <h2 className="text-ivory font-lato text-base font-bold px-4 py-[0.62rem]">
+                Back to Virtual Tours
+              </h2>
+            </Link>
+          </div>
+        </div>
+
+        <div className="bg-[#F5F6F5] mb-10">
+          <div className="bg-[#BDBDBD] h-[0.03125rem]" />
+          <div className="flex flex-col px-[1.12rem] py-8 gap-6">
+            <h3 className="text-night font-lato font-bold">Related Links</h3>
+            <ol className="px-[0.88rem]">
+              {tourMedia.map((tm, index) => (
+                <li key={tm.media_id} className="flex flex-col gap-4">
+                  <Link
+                    href={media.find(m => m.id === tm.media_id)?.url ?? '-1'}
+                    className="flex flex-col gap-1"
+                  >
+                    <div className="flex flex-row items-center gap-2">
+                      <h4 className="text-shadow font-lato text-sm font-normal uppercase">
+                        {media.find(m => m.id === tm.media_id)?.type}
+                      </h4>
+                      <ExternalLinkIcon />
+                    </div>
+                    <h4 className="text-night font-lato font-medium">
+                      {media.find(m => m.id === tm.media_id)?.title}
+                    </h4>
+                  </Link>
+                  {index !== tourMedia.length - 1 && (
+                    <div className="bg-[#BDBDBD] h-[0.03125rem] mb-6" />
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+          <div className="bg-[#BDBDBD] h-[0.03125rem]" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/featuredToursPage/page.tsx b/src/app/featuredToursPage/page.tsx
new file mode 100644
index 00000000..28b7ac88
--- /dev/null
+++ b/src/app/featuredToursPage/page.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { fetchAllTours } from '../../supabase/tours/queries';
+import { fetchMedia } from '../../supabase/media/queries';
+import { fetchAllTourMedia } from '../../supabase/tour_media/queries';
+import { TourRow, MediaRow, TourMediaRow } from '../../types/types';
+
+import { BackArrow } from '../../../public/icons';
+import NavBar from '../../components/userComponents/navBar/navBar';
+import NextButton from '../../components/userComponents/NextButton/NextButton';
+
+/**
+ * @returns The featured tours page.
+ */
+export default function FeaturedToursPage() {
+  const [tours, setTours] = useState<TourRow[]>([]);
+  const [allTourMedia, setAllTourMedia] = useState<TourMediaRow[]>([]);
+  const [media, setMedia] = useState<MediaRow[]>([]);
+
+  useEffect(() => {
+    // Fetch tour and tour media data
+    const fetchData = async () => {
+      const fetchedTours = await fetchAllTours();
+      setTours(fetchedTours);
+      const fetchedAllTourMedia = await fetchAllTourMedia();
+      setAllTourMedia(fetchedAllTourMedia);
+      const fetchedMedia = await fetchMedia();
+      setMedia(fetchedMedia);
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <div className="bg-ivory min-h-screen">
+      <NavBar />
+
+      <div className="px-[1.12rem] pt-4 pb-[3.69rem]">
+        <div className="mb-4">
+          <Link href="/">
+            <BackArrow />
+          </Link>
+        </div>
+
+        <h1 className="text-night font-lato text-3xl font-bold mb-2">
+          Virtual Tours
+        </h1>
+        <p className="text-night font-lato font-normal mb-6">
+          Take a virtual sneak peek behind the scenes at our Wildlife Care
+          Center. Here you will find outside enclosures where sick, injured, and
+          orphaned wildlife recuperate and acclimate before being released back
+          into their natural habitat. Choose your favorite animal to start the
+          tour.
+        </p>
+
+        <ul className="list-none flex flex-col gap-5">
+          {tours.map(
+            tour =>
+              tour.spotlight === false && (
+                <li key={tour.id}>
+                  <Link
+                    href={`/featuredToursPage/${tour.id}`}
+                    className="w-full rounded-lg block"
+                  >
+                    <div className="bg-scary-forest relative w-full h-[12.3125rem] rounded-lg overflow-hidden">
+                      {media.length > 0 && (
+                        <Image
+                          className="rounded-lg"
+                          src={
+                            media.find(
+                              m =>
+                                m.id ===
+                                allTourMedia.find(tm => tm.tour_id === tour.id)
+                                  ?.media_id,
+                            )?.url ?? ''
+                          }
+                          alt={
+                            media.find(
+                              m =>
+                                m.id ===
+                                allTourMedia.find(tm => tm.tour_id === tour.id)
+                                  ?.media_id,
+                            )?.text ?? ''
+                          }
+                          layout="fill"
+                          objectFit="cover"
+                          priority
+                        />
+                      )}
+                      <div
+                        className="absolute bottom-0 w-full h-48 rounded-lg p-[1.31rem] flex flex-col justify-end"
+                        style={{
+                          background:
+                            'linear-gradient(180deg, rgba(51, 51, 51, 0.0) 0%, rgba(51, 51, 51, 0.4) 50%, rgba(0, 0, 0, 0.8) 100%)',
+                        }}
+                      >
+                        <h4 className="text-ivory font-lato text-xs font-normal mt-0.5 relative bottom-[0.44rem]">
+                          {tour.stop_count} stops
+                        </h4>
+                        <div className="flex items-center justify-between">
+                          <h2 className="text-ivory font-lato text-2xl font-normal truncate relative bottom-[0.31rem]">
+                            {tour.name}
+                          </h2>
+                          <div className="relative bottom-[0.35rem]">
+                            <NextButton />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </Link>
+                </li>
+              ),
+          )}
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 26300222..e5f2f4e8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import type { Metadata } from 'next';
 import { Inter, Lato } from 'next/font/google';
 import React from 'react';
 import { WindowWidthProvider } from '../context/WindowWidthContext/WindowWidthContext';
+import NavBar from '../components/userComponents/navBar/navBar';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -26,19 +27,23 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
+        <style>
+          @import
+          url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+        </style>
         <link
           rel="stylesheet"
           href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
           integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
           crossOrigin=""
         />
-        <link
+        {/* <link
           href="https://fonts.googleapis.com/css?family=Lato:400,700"
           rel="stylesheet"
           integrity="sha384-DelNu+PL/74bL4pHGH8gPG8J5Q6wrLpZiiVttBSvpOibBVQf3EOXerhZlmHcnZsI"
           type="text/css"
           crossOrigin=""
-        />
+        /> */}
         <script
           src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
           integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
diff --git a/src/app/newsFeedPage/page.tsx b/src/app/newsFeedPage/page.tsx
new file mode 100644
index 00000000..5aba744f
--- /dev/null
+++ b/src/app/newsFeedPage/page.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import BackButton from '../../components/userComponents/BackButton/page';
+import NavBar from '../../components/userComponents/navBar/navBar';
+import { NewsRow } from '../../types/types';
+import { fetchAllNewsByDate } from '../../supabase/news/queries';
+import NewsDisplay from '../../components/userComponents/NewsDisplay/NewsDisplay';
+
+/**
+ * @returns news feed page
+ */
+export default function App() {
+  const [news, setNews] = useState<NewsRow[]>([]);
+  useEffect(() => {
+    // Get news
+    const getNews = async () => {
+      const fetchedNews: NewsRow[] = await fetchAllNewsByDate();
+      setNews(fetchedNews);
+    };
+    getNews();
+  }, [news]);
+
+  return (
+    <div className="bg-ivory h-screen">
+      <NavBar />
+      <div className="p-4">
+        <BackButton />
+        <h1 className="text-night text-3xl font-bold mt-2 -ml-[1.8px]">News</h1>
+        <ul>
+          {news.map(article => (
+            <NewsDisplay
+              key={article.updated_at}
+              id={article.id}
+              contentLink={article.content_link}
+              createdAt={article.created_at}
+              title={article.title}
+            />
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 40422605..116866cb 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,9 +29,9 @@ function Home() {
     <div className="HomePage w-full h-full m-0 flex-col justify-center font-normal">
       <NavBar />
       <WelcomeGraphic />
-      <div className="IntroInfo web:w-full web:h-72 bg-ivory web:bg-mint-cream inline-flex flex-col justify-center items-center">
-        {!isWebDevice && (
-          <p className="b3 w-full px-4 py-10 text-night text-center text-base gap-4">
+      <div className="IntroInfo md:w-full md:h-72 bg-ivory md:bg-mint-cream inline-flex flex-col justify-center items-center">
+        {windowWidth < 768 && (
+          <p className="b3 w-full px-[2rem] mt-10 text-night text-center text-base gap-4">
             The Peninsula Humane Society & SPCA (PHS/SPCA) is a local, private,
             non-profit charitable organization dedicated to animal welfare.
             PHS/SPCA is truly an open admission shelter, not only accepting many
@@ -43,7 +43,7 @@ function Home() {
           className="web:w-auto h-48 rounded-lg bg-mint-cream web:bg-ivory justify-center 
         items-center mt-10 web:mt-0 m-2 inline-flex px-10 py-11 web:px-[4.59rem] py-[2.875rem]"
         >
-          <h3 className="max-w-64 web:w-96 text-scary-forest text-center font-normal italic">
+          <h3 className="w-64 md:w-96 text-scary-forest text-center font-normal italic">
             Peninsula Humane Society & SPCA guided by the humane ethics, builds
             healthy relationships between people and animals.
           </h3>
diff --git a/src/app/siteMapPage/page.tsx b/src/app/siteMapPage/page.tsx
new file mode 100644
index 00000000..d2436dae
--- /dev/null
+++ b/src/app/siteMapPage/page.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import React, { useState } from 'react';
+import dynamic from 'next/dynamic';
+import NavBar from '../../components/userComponents/navBar/navBar';
+import FilterButton from '../../components/userComponents/FilterButton/FilterButton';
+
+const filterButtonContent: string[] = ['Virtual Tour Map', 'Exhibits Map'];
+
+const SiteMap = dynamic(
+  () => import('../../components/userComponents/SiteMap/SiteMap'),
+  {
+    ssr: false,
+    loading: () => <p>Loading...</p>,
+  },
+);
+type ModeState = 'tours' | 'exhibits';
+
+/**
+ * @returns Page for the interactive map
+ */
+function MapPage() {
+  const [selectedMap, setSelectedMap] = useState(filterButtonContent[0]); // "Virtual Tour Map" by default
+  const [mode, setMode] = useState<ModeState>('tours');
+
+  // move tour logic here: need to share state between filter
+  const handleFilter = (mapName: string) => {
+    setSelectedMap(mapName);
+    if (mapName === 'Virtual Tour Map') {
+      setMode('tours');
+    } else if (mapName === 'Exhibits Map') {
+      setMode('exhibits');
+    }
+  };
+
+  const renderFilterContainer = () => (
+    <div className="mb-6  pl-0 pr-0 ">
+      <div className="pt-9 pr-2 pl-2 pb-7">
+        <p className="text-night font-lato text-2xl font-semibold">
+          Wildlife Care Center Maps
+        </p>
+      </div>
+      <div className="flex flex-row items-center gap-x-0 pr-1 pl-1 w-full rounded-lg bg-mint-cream  border-mint-cream border-[5px]">
+        {filterButtonContent &&
+          filterButtonContent.map(text => (
+            <FilterButton
+              key={text}
+              content={text}
+              onClick={() => handleFilter(text)} // Fixed here
+              isSelected={selectedMap === text}
+            />
+          ))}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="bg-ivory">
+      <NavBar />
+      <div className="pt-0 pl-2 pr-2 bg-ivory">
+        {renderFilterContainer()}
+        <div className=" w-full pr-2 pl-2 flex h-2/3 mb-8">
+          <SiteMap mode={mode} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MapPage;
diff --git a/src/app/spotlightPage/[spotlightId]/[displayId]/page.tsx b/src/app/spotlightPage/[spotlightId]/[displayId]/page.tsx
new file mode 100644
index 00000000..023a7c85
--- /dev/null
+++ b/src/app/spotlightPage/[spotlightId]/[displayId]/page.tsx
@@ -0,0 +1,163 @@
+'use client';
+
+import Link from 'next/link';
+import React, { useEffect, useState } from 'react';
+
+import { DisplayRow, MediaRow, TourMediaRow } from '../../../../types/types';
+import NavBar from '../../../../components/userComponents/navBar/navBar';
+import { fetchDisplayFromId } from '../../../../supabase/displays/queries';
+import { fetchDisplayfromSpotlight } from '../../../../supabase/tour_displays/queries';
+import BackButton from '../../../../components/userComponents/BackButton/BackButton';
+import Carousel from '../../../../components/userComponents/ImageScroller/ImageScroller';
+import { fetchImagesForDisplay } from '../../../../supabase/media/queries';
+import { ExternalLinkIcon } from '../../../../../public/icons';
+import { fetchTourMedia } from '../../../../supabase/tour_media/queries';
+
+/**
+ * @param root0 -
+ * @param root0.params -
+ * @param root0.params.displayId - The display ID
+ * @param root0.params.spotlightId - The spotlight ID
+ * @returns display page
+ */
+export default function Page({
+  params,
+}: {
+  params: { displayId: string; spotlightId: string };
+}) {
+  const [display, setDisplay] = useState<DisplayRow>([]);
+  const [otherDisplays, setOtherDisplays] = useState<DisplayRow[]>([]);
+  const [media, setMedia] = useState<MediaRow[]>([]);
+  const [tourMedia, setTourMedia] = useState<TourMediaRow[]>([]);
+
+  useEffect(() => {
+    /**
+     * @returns a display
+     */
+    async function fetchData() {
+      try {
+        const currentDisplayData: DisplayRow = await fetchDisplayFromId(
+          params.displayId,
+        );
+        setDisplay(currentDisplayData);
+
+        const displaysFromSpotlight: DisplayRow[] =
+          await fetchDisplayfromSpotlight(params.spotlightId);
+        const currentDisplayId = params.displayId;
+        const responseDataOtherDisplays = displaysFromSpotlight.filter(
+          aDisplay => aDisplay.id !== currentDisplayId,
+        );
+
+        setOtherDisplays(responseDataOtherDisplays);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
+    // Get tour media
+    const getTourMedia = async () => {
+      const fetchedTourMedia = await fetchTourMedia(params.spotlightId);
+      setTourMedia(fetchedTourMedia);
+    };
+
+    // Fetch the display media
+    const fetchDisplayMedia = async () => {
+      const displayMedia = await fetchImagesForDisplay(params.displayId);
+      setMedia(displayMedia || []);
+    };
+
+    fetchData();
+    getTourMedia();
+    fetchDisplayMedia();
+  }, []);
+
+  return (
+    <div className="bg-ivory w-[24.375rem] min-h-screen">
+      <NavBar />
+      <Link
+        href={`/spotlightPage/${params.spotlightId}`}
+        className="absolute top-[5.25rem] left-[1.12rem] z-10"
+      >
+        <BackButton />
+      </Link>
+      <div className="mb-6">
+        {media.length > 0 ? (
+          <Carousel media={media} />
+        ) : (
+          <div className="bg-scary-forest relative w-full h-[15.3125rem]" />
+        )}
+      </div>
+      <h1 className="text-night font-lato text-3xl text-14 font-bold px-[18px] pt-[8px]">
+        {display.title}
+      </h1>
+      <p className="text-night font-normal font-lato px-[18px] pt-[16px] pb-[32px]">
+        {display.description}
+      </p>
+
+      {otherDisplays.length > 0 && (
+        <div>
+          <h1 className="text-night font-bold font-lato text-[18px] px-[18px]">
+            More in this spotlight...
+          </h1>
+
+          <div className="flex flex-wrap flex-col gap-[14px] px-[18px] pt-[16px] pb-[48px] w-screen overflow-x-auto">
+            {otherDisplays.map(otherDisplay => (
+              <Link
+                key={otherDisplay.id}
+                href={`/spotlightPage/${params.spotlightId}/${otherDisplay.id}?spotlightId=${params.spotlightId}`}
+              >
+                <button
+                  type="button"
+                  className="bg-mint-cream border-l-[0.3125rem] border-l-asparagus text-scary-forest font-lato w-[354px] h-[60px] font-bold rounded-2xl px-[31px] truncate"
+                >
+                  {otherDisplay.title}
+                </button>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {tourMedia.length > 0 && (
+        <div>
+          <div className="bg-[#F5F6F5] mb-4">
+            <div className="bg-[#BDBDBD] h-[0.03125rem]" />
+            <div className="flex flex-col px-[1.12rem] py-8 gap-6">
+              <h3 className="text-night font-lato font-normal">
+                Related Links
+              </h3>
+              <ol className="px-[0.88rem]">
+                {tourMedia.map((tm, index) => (
+                  <li key={tm.media_id} className="flex flex-col gap-4">
+                    <Link
+                      href={media.find(m => m.id === tm.media_id)?.url ?? '-1'}
+                      className="flex flex-col gap-1"
+                    >
+                      <div className="flex flex-row items-center gap-2">
+                        <h4 className="text-shadow font-lato text-sm font-light uppercase">
+                          {media.find(m => m.id === tm.media_id)?.type}
+                        </h4>
+                        <ExternalLinkIcon />
+                      </div>
+                      <h4 className="text-night font-lato font-normal">
+                        {media.find(m => m.id === tm.media_id)?.title}
+                      </h4>
+                    </Link>
+                    {index !== tourMedia.length - 1 && (
+                      <div className="bg-[#BDBDBD] h-[0.03125rem] mb-6" />
+                    )}
+                  </li>
+                ))}
+              </ol>
+            </div>
+            <div className="bg-[#BDBDBD] h-[0.03125rem]" />
+          </div>
+        </div>
+      )}
+
+      <h4 className="text-[#386131] font-lato font-semibold px-[25px] pb-[40px]">
+        <Link href="/spotlightPage">See all spotlights</Link>
+      </h4>
+    </div>
+  );
+}
diff --git a/src/app/spotlightPage/[spotlightId]/page.tsx b/src/app/spotlightPage/[spotlightId]/page.tsx
new file mode 100644
index 00000000..ea662b15
--- /dev/null
+++ b/src/app/spotlightPage/[spotlightId]/page.tsx
@@ -0,0 +1,203 @@
+'use client';
+
+import Link from 'next/link';
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+
+import {
+  TourRow,
+  DisplayRow,
+  MediaRow,
+  TourMediaRow,
+} from '../../../types/types';
+import { fetchTour } from '../../../supabase/tours/queries';
+import { fetchMedia } from '../../../supabase/media/queries';
+import {
+  fetchAllTourMedia,
+  fetchTourMedia,
+} from '../../../supabase/tour_media/queries';
+import NavBar from '../../../components/userComponents/navBar/navBar';
+import {
+  fetchDisplayfromSpotlight,
+  fetchRelatedSpotlightsfromSpotlightId,
+} from '../../../supabase/tour_displays/queries';
+import BackButton from '../../../components/userComponents/BackButton/BackButton';
+
+/**
+ * @param params -
+ * @param params.params -
+ * @param params.params.spotlightId -
+ * @returns a spotlight page given a spotlight Id
+ */
+export default function Page({ params }: { params: { spotlightId: string } }) {
+  const [spotlight, setSpotlight] = useState<TourRow>([]);
+  const [displays, setDisplays] = useState<DisplayRow[]>([]);
+  const [media, setMedia] = useState<MediaRow[]>([]);
+  const [tourMedia, setTourMedia] = useState<TourMediaRow[]>([]);
+  const [allTourMedia, setAllTourMedia] = useState<TourMediaRow[]>([]);
+  const [relatedSpotlights, setRelatedSpotlights] = useState<TourRow[]>([]);
+
+  useEffect(() => {
+    /**
+     * @returns data from tour table and display table
+     */
+    async function fetchData() {
+      const responseDataForSpotlight: TourRow = await fetchTour(
+        params.spotlightId,
+      );
+      setSpotlight(responseDataForSpotlight);
+
+      const responseDataForDisplays: DisplayRow[] =
+        await fetchDisplayfromSpotlight(params.spotlightId);
+      setDisplays(responseDataForDisplays);
+
+      const responseDataForRelatedSpotlights: TourRow[] =
+        await fetchRelatedSpotlightsfromSpotlightId(params.spotlightId);
+      setRelatedSpotlights(responseDataForRelatedSpotlights);
+    }
+
+    // Get tour media
+    const getTourMedia = async () => {
+      const fetchedTourMedia = await fetchTourMedia(params.spotlightId);
+      setTourMedia(fetchedTourMedia);
+    };
+
+    // Get all tour media
+    const getAllTourMedia = async () => {
+      const fetchedAllTourMedia = await fetchAllTourMedia();
+      setAllTourMedia(fetchedAllTourMedia);
+    };
+
+    // Get media
+    const getMedia = async () => {
+      const fetchedMedia = await fetchMedia();
+      setMedia(fetchedMedia);
+    };
+
+    fetchData();
+    getTourMedia();
+    getMedia();
+    getAllTourMedia();
+  }, []);
+
+  return (
+    <div className="bg-ivory w-[24.375rem] min-h-screen">
+      <NavBar />
+      <Link
+        href="/spotlightPage"
+        className="absolute top-[5.25rem] left-[1.12rem] z-10"
+      >
+        <BackButton />
+      </Link>
+      <div className="bg-scary-forest relative w-[24.375rem] h-[15.3125rem]">
+        {media.length > 0 && (
+          <Image
+            className="w-[24.375rem] h-[15.3125rem] relative"
+            key={media.find(m => m.id === tourMedia[0]?.media_id)?.id}
+            src={media.find(m => m.id === tourMedia[0]?.media_id)?.url ?? ''}
+            alt={media.find(m => m.id === tourMedia[0]?.media_id)?.text ?? ''}
+            layout="fill"
+            objectFit="cover"
+            priority
+          />
+        )}
+      </div>
+      <div className="flex flex-col px-[18px] pt-[32px] pb-[24px] gap-2">
+        <h1 className="text-night font-lato text-3xl text-14 font-bold">
+          {spotlight.name}
+        </h1>
+        <p className="text-night font-normal font-lato">
+          {spotlight.description}
+        </p>
+      </div>
+
+      {displays.length > 0 && (
+        <div className="flex flex-col px-[18px] gap-[20px] pb-[40px]">
+          <h1 className="text-night font-lato font-bold text-[18px]">
+            In this spotlight...
+          </h1>
+
+          <div className="flex flex-wrap gap-[14px]">
+            {displays.map(display => (
+              <Link
+                key={display.id}
+                href={`/spotlightPage/${spotlight.id}/${display.id}?spotlightId=${spotlight.id}`}
+              >
+                <button
+                  type="button"
+                  className="bg-mint-cream border-l-[0.3125rem] border-l-asparagus w-[354px] h-[60px] text-scary-forest font-lato font-bold truncate rounded-2xl px-[31px]"
+                >
+                  {display.title}
+                </button>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {relatedSpotlights.length > 0 && (
+        <div>
+          <div className="bg-[#BDBDBD] h-[0.03125rem] mb-[40px]" />
+
+          <div className="flex flex-col gap-4 pb-[40px]">
+            <h1 className="text-night font-lato font-bold text-[18px] px-[18px]">
+              Related Spotlights
+            </h1>
+
+            <ul className="list-none flex overflow-x-auto whitespace-nowrap px-[18px] gap-[12px]">
+              {relatedSpotlights.map(otherSpotlight => (
+                <li className="w-[162px]" key={otherSpotlight.id}>
+                  <Link href={`/spotlightPage/${otherSpotlight.id}`}>
+                    <div className="relative w-full h-[169px] rounded-2xl flex flex-col">
+                      {media.length > 0 && (
+                        <Image
+                          className="rounded-lg"
+                          key={
+                            media.find(
+                              m =>
+                                m.id ===
+                                allTourMedia.find(
+                                  tm => tm.tour_id === otherSpotlight.id,
+                                )?.media_id,
+                            )?.id
+                          }
+                          src={
+                            media.find(
+                              m =>
+                                m.id ===
+                                allTourMedia.find(
+                                  tm => tm.tour_id === otherSpotlight.id,
+                                )?.media_id,
+                            )?.url ?? ''
+                          }
+                          alt={
+                            media.find(
+                              m =>
+                                m.id ===
+                                allTourMedia.find(
+                                  tm => tm.tour_id === otherSpotlight.id,
+                                )?.media_id,
+                            )?.text ?? ''
+                          }
+                          layout="fill"
+                          objectFit="cover"
+                          priority
+                        />
+                      )}
+                    </div>
+                    <h4 className="text-night font-lato text-20 font-bold mt-2 truncate">
+                      {otherSpotlight.name}
+                    </h4>
+                    <h2 className="text-shadow font-lato text-sm font-normal truncate mb-2">
+                      {otherSpotlight.preview_text}
+                    </h2>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/spotlightPage/page.tsx b/src/app/spotlightPage/page.tsx
new file mode 100644
index 00000000..6ce6be29
--- /dev/null
+++ b/src/app/spotlightPage/page.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import Link from 'next/link';
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+
+import { fetchAllSpotlights } from '../../supabase/tours/queries';
+import { fetchMedia } from '../../supabase/media/queries';
+import { fetchAllTourMedia } from '../../supabase/tour_media/queries';
+import NavBar from '../../components/userComponents/navBar/navBar';
+import { TourRow, MediaRow, TourMediaRow } from '../../types/types';
+import { BackArrow } from '../../../public/icons';
+
+/**
+ * @returns spotlights from tours table
+ */
+function App() {
+  const [spotlights, setSpotlights] = useState<TourRow[]>([]);
+  const [media, setMedia] = useState<MediaRow[]>([]);
+  const [allTourMedia, setAllTourMedia] = useState<TourMediaRow[]>([]);
+
+  useEffect(() => {
+    /**
+     * @returns spotlight data
+     */
+    async function fetchData() {
+      try {
+        const responseData: TourRow[] = await fetchAllSpotlights();
+        setSpotlights(responseData);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
+    // Get all tour media
+    const getAllTourMedia = async () => {
+      const fetchedAllTourMedia = await fetchAllTourMedia();
+      setAllTourMedia(fetchedAllTourMedia);
+    };
+
+    // Get media
+    const getMedia = async () => {
+      const fetchedMedia = await fetchMedia();
+      setMedia(fetchedMedia);
+    };
+
+    fetchData();
+    getAllTourMedia();
+    getMedia();
+  }, []);
+
+  return (
+    <div className="bg-ivory min-h-screen">
+      <NavBar />
+
+      <div className="px-[18px] pt-[16px] pb-[44px]">
+        <div className="mb-6">
+          <Link href="/">
+            <BackArrow />
+          </Link>
+        </div>
+
+        <h1 className="text-night font-lato text-3xl font-bold mb-4">
+          Our Wildlife Spotlights
+        </h1>
+        <p className="text-night font-normal font-lato mb-6">
+          Wildlife Spotlights offer insights into common questions we receive.
+          Browse a Spotlight to learn more about important wildlife topics.
+        </p>
+        <div className="bg-[#BDBDBD] h-[0.03125rem] mx-[-18px] mb-4" />
+
+        <ul className="list-none">
+          {spotlights.map(spotlight => (
+            <li className="my-4" key={spotlight.id}>
+              <Link
+                href={`/spotlightPage/${spotlight.id}`}
+                className="w-full rounded-lg"
+              >
+                <div className="bg-scary-forest relative w-full h-[13.375rem] rounded-lg flex flex-col">
+                  {media.length > 0 && (
+                    <Image
+                      className="w-[24.375rem] h-[13.375rem] rounded-lg"
+                      key={
+                        media.find(
+                          m =>
+                            m.id ===
+                            allTourMedia.find(m => m.tour_id === spotlight.id)
+                              ?.media_id,
+                        )?.id
+                      }
+                      src={
+                        media.find(
+                          m =>
+                            m.id ===
+                            allTourMedia.find(m => m.tour_id === spotlight.id)
+                              ?.media_id,
+                        )?.url ?? ''
+                      }
+                      alt={
+                        media.find(
+                          m =>
+                            m.id ===
+                            allTourMedia.find(m => m.tour_id === spotlight.id)
+                              ?.media_id,
+                        )?.text ?? ''
+                      }
+                      layout="fill"
+                      objectFit="cover"
+                      priority
+                    />
+                  )}
+                </div>
+                <h4 className="text-night font-lato text-2xl truncate font-normal pt-[14px]">
+                  {spotlight.name}
+                </h4>
+                <h2 className="text-shadow font-lato text-sm font-normal pt-[4px]">
+                  {spotlight.preview_text}
+                </h2>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/app/testing/page.tsx b/src/app/testing/page.tsx
new file mode 100644
index 00000000..3866541a
--- /dev/null
+++ b/src/app/testing/page.tsx
@@ -0,0 +1,10 @@
+// @ts-nocheck
+'use client';
+
+/* eslint-disable */
+
+import React from 'react';
+
+export default function Test() {
+  return <div />;
+}
diff --git a/src/components/userComponents/FilterButton/FilterButton.tsx b/src/components/userComponents/FilterButton/FilterButton.tsx
index d7b6bb18..8b35c30c 100644
--- a/src/components/userComponents/FilterButton/FilterButton.tsx
+++ b/src/components/userComponents/FilterButton/FilterButton.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
 
+// interface FilterButtonProps {
+//   content: string;
+//   onClick?: () => void;
+// }
 interface FilterButtonProps {
   content: string;
   onClick: () => void;
@@ -17,20 +21,17 @@ interface FilterButtonProps {
 
 /**
  *
- * @param props - props for the FilterButton component
- * @param props.content - content of the button
- * @param props.onClick - function to handle the functionality we want to tie to our filter buttons
- * @param props.isSelected - boolean to determine if the button is selected
- * @returns JSX.Element
+ * @param root0
+ * @param root0.content
+ * @param root0.onClick
+ * @param root0.isSelected
  */
 function FilterButton({ content, onClick, isSelected }: FilterButtonProps) {
-  const baseStyle =
-    'py-2.5 px-3 whitespace-nowrap font-lato text-base font-normal rounded-lg flex-grow text-center';
-  const selectedStyle = 'bg-hunter-green text-white';
-  const unselectedStyle = 'bg-mint-cream text-scary-forest';
+  const selectedStyle =
+    'bg-hunter-green text-white font-lato text-base font-medium rounded-lg';
 
-  const buttonClass = `${baseStyle} ${
-    isSelected ? selectedStyle : unselectedStyle
+  const buttonClass = `py-2 px-6 whitespace-nowrap border-solid text-scary-forest flex-grow font-lato text-base font-medium  ${
+    isSelected ? selectedStyle : ''
   }`;
 
   return (
diff --git a/src/components/userComponents/HomePageComponents/VisitorResources/MapButton.tsx b/src/components/userComponents/HomePageComponents/VisitorResources/MapButton.tsx
index 7b6f76cd..e8ea1d36 100644
--- a/src/components/userComponents/HomePageComponents/VisitorResources/MapButton.tsx
+++ b/src/components/userComponents/HomePageComponents/VisitorResources/MapButton.tsx
@@ -15,7 +15,7 @@ function MapButton() {
       className="MapButton w-full h-full rounded-md gap-3
       justify-center items-center inline-flex z-10
       p-4 web:px-8 web:py-6
-      // p-4 web:pl-9 web:pr-24 web:pt-7 web:pb-[1.625rem]
+      web:pl-9 web:pr-24 web:pt-7 web:pb-[1.625rem]
       bg-ivory group hover:bg-mint-cream focus:bg-mint-cream
       shadow-darkest focus:shadow-vignette"
       href="/site-maps"
diff --git a/src/components/userComponents/HomePageComponents/WelcomeGraphic/WelcomeGraphic.tsx b/src/components/userComponents/HomePageComponents/WelcomeGraphic/WelcomeGraphic.tsx
index 82c500ec..725668f4 100644
--- a/src/components/userComponents/HomePageComponents/WelcomeGraphic/WelcomeGraphic.tsx
+++ b/src/components/userComponents/HomePageComponents/WelcomeGraphic/WelcomeGraphic.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import { useWebDeviceDetection } from '../../../../context/WindowWidthContext/WindowWidthContext';
 
 /**
- * @returns - Welcome graphic on the home page.  Button available for "start tour" leads to the featured tours page and flow
+ * @returns - Welcome graphic on the home page.
  */
 function WelcomeGraphic() {
   const isWebDevice = useWebDeviceDetection();
   return (
     <div
-      className="h-96 bg-neutral-900 bg-opacity-60 flex justify-center items-center relative"
+      className="h-96 web:h-[45.188rem] bg-neutral-900 bg-opacity-60 flex justify-center items-center relative"
       style={{
         backgroundImage: `url('https://qkkuacqtcsfjbnzmxmhk.supabase.co/storage/v1/object/public/images/EllisonCover.png?t=2023-11-05T03%3A22%3A44.379Z')`,
         backgroundSize: 'cover',
@@ -16,13 +16,15 @@ function WelcomeGraphic() {
       }}
     >
       <div className="w-80 h-38 flex-col justify-start items-center gap-1 inline-flex">
-        {/* <div className="flex-col justify-start items-center gap-1 flex"> */}
         <p className=" font-light text-center">WELCOME TO</p>
-        <h1 className="text-center w-80">The Peninsula Humane</h1>
+        <h1 className="text-center w-80 web:w-[46.938rem]">
+          The Peninsula Humane Society & SPCA Wildlife Care Center
+        </h1>
+        {/* <h1 className="text-center w-80">The Peninsula Humane</h1>
         <h1 className="text-center w-80">Society & SPCA</h1>
-        <h1 className="text-center w-80">Wildlife Care Center</h1>
+        <h1 className="text-center w-80">Wildlife Care Center</h1> */}
         {isWebDevice && (
-          <p className="b3 font-light mt-7 w-96 text-center">
+          <p className="b3 font-light mt-7 w-[33.563rem] text-center">
             Peninsula Humane Society & SPCA (PHS & SPCA) is a local, private,
             non-profit charitable organization dedicated to animal welfare.
           </p>
diff --git a/src/components/userComponents/NextStopButton/NextStopButton.tsx b/src/components/userComponents/NextStopButton/NextStopButton.tsx
index 5059154e..4932f6b7 100644
--- a/src/components/userComponents/NextStopButton/NextStopButton.tsx
+++ b/src/components/userComponents/NextStopButton/NextStopButton.tsx
@@ -27,7 +27,7 @@ export default function NextStopButton({ text, link }: NextStopButtonProps) {
       onClick={handleClick}
     >
       <div className="flex items-center justify-end w-full gap-[1.31rem]">
-        <p className="b1 text-ivory">{text}</p>
+        <h4 className="text-ivory font-lato font-bold text-center">{text}</h4>
         <CaretRight />
       </div>
     </Link>
diff --git a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
new file mode 100644
index 00000000..eb2e6c49
--- /dev/null
+++ b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from 'react';
+import { LatLngExpression } from 'leaflet';
+import { useMapEvents } from 'react-leaflet';
+import Link from 'next/link';
+import Image from 'next/image';
+import { ExhibitWithCategoryRow, TourRow } from '../../../types/types';
+import { fetchImagesForTour } from '../../../supabase/media/queries';
+import { fetchExhibitImage } from '../../../supabase/exhibits/queries';
+import { CloseIcon } from '../../../../public/icons';
+
+interface DisplayCardProps {
+  tour: TourRow | ExhibitWithCategoryRow;
+  handleClose: () => void;
+  handleClick?: () => void;
+}
+
+/**
+ * Display a preview card component.
+ * @param DisplayCardProps - The props for the display card component.
+ * @param DisplayCardProps.tour - The tour or exhibit to preview.
+ * @param DisplayCardProps.handleClick - The function to handle actions when clicked.
+ * @param DisplayCardProps.handleClose - The function to handle closing of the preview card.
+ * @returns The preview card component to display within the Leaflet map container.
+ */
+function DisplayPreviewCard({
+  tour,
+  handleClick,
+  handleClose,
+}: DisplayCardProps) {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [previewImage, setPreviewImage] = useState<string>('');
+  const [name1, setname1] = useState<string>('');
+  const { id, description, coordinates, category } = tour;
+  // name, for tour title for exhibit
+
+  // Map Context
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const map = useMapEvents({
+    click: e => {
+      if (!e.latlng.equals(coordinates as LatLngExpression)) {
+        handleClose();
+      }
+    },
+  });
+
+  // fetch image to use for preview
+  useEffect(() => {
+    const fetchDetails = async () => {
+      setLoading(true);
+
+      let imageUrl = '';
+      let displayName = '';
+
+      if ('name' in tour) {
+        const images = await fetchImagesForTour(tour.id);
+        if (images && images.length > 0) {
+          imageUrl = images[0].url;
+        }
+        displayName = tour.name;
+      } else {
+        // Handle as an ExhibitWithCategoryRow
+        // const imageObj = await fetchExhibitImage(tour.id);
+        // if (imageObj) {
+        imageUrl = tour.image;
+        console.log(tour);
+        // }
+        displayName = tour.category;
+      }
+
+      // Set state variables
+      setPreviewImage(imageUrl);
+      setname1(displayName);
+      setLoading(false);
+    };
+
+    fetchDetails();
+  }, [tour]);
+
+  /** route this to spotlights */
+
+  return (
+    <div className="flex flex-col items-center justify-center w-[25rem] h-[8.25rem] max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto p-4 pb-[2.87rem] pr-[1.19rem] pl-[1.19rem] rounded-md">
+      <div
+        className="flex flex-row items-center rounded-md overflow-hidden bg-ivory cursor-pointer w-full sm:w-4/4 md:w-5/5 lg:w-2/2 xl:w-5/5 flex-shrink-0 shadow-xl"
+        aria-hidden="true"
+      >
+        {!loading && (
+          <div className="relative w-[7.8125rem] z-10 h-[8.25rem] shrink-0 rounded-tl-md rounded-tr-none rounded-br-none rounded-bl-md">
+            <Image
+              src={previewImage}
+              alt="placeholder"
+              layout="fill"
+              objectFit="cover"
+            />
+          </div>
+        )}
+        <div
+          className="justify-items-center align-middle z-20 overflow-hidden w-full h-full"
+          onClick={handleClick}
+          onKeyDown={e => {
+            if (handleClick && e.key === 'Enter') {
+              handleClick();
+            }
+          }}
+          role="button"
+          tabIndex={0}
+        >
+          <div className="">
+            <div
+              className="flex justify-end items-center pt-2 pr-2"
+              aria-label="Close preview card"
+              role="button"
+              tabIndex={0}
+              onClick={e => {
+                e.stopPropagation(); //  prevents the click from propagating to the parent link
+                handleClose();
+              }}
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.stopPropagation();
+                  handleClose();
+                }
+              }}
+            >
+              <CloseIcon />
+            </div>
+            <Link href={`/spotlightPage/${id}`}>
+              <h3 className="relative truncate text-asparagus pr-[0.31rem] pl-[0.75rem] pt-[0rem] uppercase font-light text-xs leading-normal">
+                {category}
+              </h3>
+              <h3 className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0.30rem] pb-[0rem] text-base leading-normal">
+                {name1}
+              </h3>
+
+              <h4 className="relative font-lato h-[2rem] pr-[0.31rem] pt-[0rem] pl-[0.75rem] pb-[2.4rem] text-shadow line-clamp-2 text-sm">
+                {description}
+              </h4>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DisplayPreviewCard;
diff --git a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
index 310c9512..d85c68f5 100644
--- a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
@@ -61,20 +61,21 @@ function ExhibitPreviewCard({
   // fetch image to use for preview
   useEffect(() => {
     const fetchDetails = async () => {
-      if (!tour.image) {
-        setLoading(true);
+      setLoading(true);
 
-        let imageUrl = '';
-        let displayName = '';
+      let imageUrl = '';
+      let displayName = '';
 
-        imageUrl = tour.image;
-        displayName = tour.category;
+      // const imageObj = await fetchExhibitImage(tour.id);
+      // if (imageObj) {
+      imageUrl = tour.image;
+      // }
+      displayName = tour.category;
 
-        // Set state variables
-        setPreviewImage(imageUrl);
-        setname1(displayName);
-        setLoading(false);
-      }
+      // Set state variables
+      setPreviewImage(imageUrl);
+      setname1(displayName);
+      setLoading(false);
     };
 
     fetchDetails();
@@ -83,19 +84,17 @@ function ExhibitPreviewCard({
   /** route this to spotlights */
 
   return (
-    <div
-      className="flex flex-col items-center justify-center mx-auto rounded-md px-[0.56rem]"
-      style={{ width, height }}
-    >
+    <div className="flex flex-col items-center justify-center w-[25rem] h-[8.25rem] max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto p-4 pb-[2.87rem] pr-[1.19rem] pl-[1.19rem] rounded-md">
       <div
-        className="flex flex-row items-center rounded-md overflow-hidden bg-ivory cursor-pointer flex-shrink-0 shadow-xl"
+        className="flex flex-row items-center rounded-md overflow-hidden bg-ivory cursor-pointer w-full sm:w-4/4 md:w-5/5 lg:w-2/2 xl:w-5/5 flex-shrink-0 shadow-xl"
         aria-hidden="true"
       >
         {!loading && (
-          <div className="relative w-[5.875rem] z-10 h-full shrink-0 rounded-tl-md rounded-tr-none rounded-br-none rounded-bl-md">
+          <div className="relative w-[5.8125rem] z-10 h-full shrink-0 rounded-tl-md rounded-tr-none rounded-br-none rounded-bl-md">
             <Image
               src={previewImage}
               alt="placeholder"
+              alt="placeholder"
               layout="fill"
               objectFit="cover"
             />
@@ -116,18 +115,9 @@ function ExhibitPreviewCard({
             <div
               className="flex justify-end items-center pt-2 pr-2"
               onClick={e => {
-                e.stopPropagation();
+                e.stopPropagation(); //  prevents the click from propagating to the parent link
                 handleClose();
               }}
-              onKeyDown={e => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.stopPropagation();
-                  handleClose();
-                }
-              }}
-              role="button"
-              tabIndex={0}
-              aria-label="Close preview"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -138,29 +128,29 @@ function ExhibitPreviewCard({
               >
                 <path
                   d="M10.0523 11.0274L3.35083 4.32596M10.0524 4.32596L3.35083 11.0275"
-                  stroke="silver"
+                  stroke="#272929"
                   strokeWidth="1.11692"
                   strokeLinecap="round"
                   strokeLinejoin="round"
                 />
               </svg>
             </div>
-            <Link href={`/exhibits#a${id}`}>
-              <h3 className="relative pr-[0.31rem] pl-[0.75rem] pt-[0.3rem] pb-[0rem]">
-                <p className="truncate font-medium font-lato text-night  text-base leading-normal">
-                  {name1}
-                </p>
+            <Link href={`/spotlightPage/${id}`}>
+              <h3 className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0rem] pb-[0rem] text-base leading-normal">
+                {name1}
               </h3>
-              <h4 className="relative h-[2rem] pr-[0.31rem] pt-[0rem] pl-[0.75rem] pb-[2.4rem]">
-                <p className="line-clamp-2 text-shadow text-xs font-normal font-lato">
-                  {description}{' '}
-                </p>
+
+              <h4 className="relative font-lato h-[2rem] pr-[0.31rem] pt-[0rem] pl-[0.75rem] pb-[2.4rem] text-shadow line-clamp-2 text-sm">
+                {description}
               </h4>
-              <h6 className="relative pt-[0rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right">
-                Go to exhibit &gt;
+              <h6 className="relative pt-[0.2rem] pr-[1rem] text-silver font-lato text-xs text-right">
+                Go to exhibit `&gt;`
               </h6>
             </Link>
           </div>
+          {/* <div>
+                <h6>Go to exhibit > </h6>
+            </div> */}
         </div>
       </div>
     </div>
diff --git a/src/components/userComponents/SiteMap/SiteMap.tsx b/src/components/userComponents/SiteMap/SiteMap.tsx
index a794d8d2..45ef979e 100644
--- a/src/components/userComponents/SiteMap/SiteMap.tsx
+++ b/src/components/userComponents/SiteMap/SiteMap.tsx
@@ -1,9 +1,13 @@
+'use client';
+
 import L, { LatLngExpression } from 'leaflet';
-import React, { useEffect, useState, useRef } from 'react';
-import { MapContainer, TileLayer, Marker } from 'react-leaflet';
+import React, { useEffect, useState } from 'react';
+import { LayersControl, MapContainer, TileLayer, Marker } from 'react-leaflet';
 import { renderToStaticMarkup } from 'react-dom/server';
+
 import { fetchAllSpotlights } from '../../../supabase/tours/queries';
 import { ExhibitWithCategoryRow, TourRow } from '../../../types/types';
+
 import Control from './Control';
 import { fetchAllExhibits } from '../../../supabase/exhibits/queries';
 import { getCategoryColor1 } from '../../../supabase/category/queries';
@@ -14,7 +18,6 @@ import {
 } from '../../../../public/icons';
 import ExhibitPreviewCard from './ExhibitPreviewCard';
 import TourPreviewCard from './TourPreviewCard';
-import { useWebDeviceDetection } from '../../../context/WindowWidthContext/WindowWidthContext';
 
 const center: LatLngExpression = {
   lat: 37.58748,
@@ -60,47 +63,27 @@ function SiteMap({ mode }: SiteMapProps) {
   >(null);
   const [mapCenter, setMapCenter] = useState<LatLngExpression>(center);
   const [selectedMarker, setSelectedMarker] = useState<number | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-  const isWebDevice = useWebDeviceDetection();
-  const cacheRef = useRef<{
-    tours?: TourRow[];
-    exhibits?: ExhibitWithCategoryRow[];
-  }>({});
 
+  // fetch tours where spotlight == True
   useEffect(() => {
     /**
-     * This useEffect will manage fetching Data depending on if the chosen map is tours or exhibits.
-     * It will also manage the initial state of the map when no marker is chosen
-     * It will fetch tours when spotlights == True
+     *
      */
     async function fetchData() {
-      setLoading(true);
       try {
         let data;
         if (mode === 'tours') {
-          if (cacheRef.current.tours) {
-            data = cacheRef.current.tours;
-          } else {
-            data = await fetchAllSpotlights();
-            cacheRef.current.tours = data;
-          }
+          data = await fetchSpotlightTours();
         } else if (mode === 'exhibits') {
-          if (cacheRef.current.exhibits) {
-            data = cacheRef.current.exhibits;
-          } else {
-            data = await fetchAllExhibits();
-            cacheRef.current.exhibits = data;
-          }
+          data = await fetchAllExhibits();
         }
-
-        if (data) {
+        if (data && mode === 'tours') {
           const colors = await Promise.all(
             data.map(async item => ({
               id: item.id,
               color: await getCategoryColor1(item.id),
             })),
           );
-
           const newColorsMap = colors.reduce(
             (acc, curr) => ({
               ...acc,
@@ -108,22 +91,40 @@ function SiteMap({ mode }: SiteMapProps) {
             }),
             {},
           );
+          setColorsMap(newColorsMap);
+        } else if (data && mode === 'exhibits') {
+          console.log(data);
 
+          const colors = await Promise.all(
+            data.map(async item => ({
+              id: item.id,
+              color: await getCategoryColor1(item.id),
+            })),
+          );
+          console.log(colors);
+          const newColorsMap = colors.reduce(
+            (acc, curr) => ({
+              ...acc,
+              [curr.id]: curr.color,
+            }),
+            {},
+          );
+          console.log('COLOR MAP!!');
           setColorsMap(newColorsMap);
-          setSpotlightTours(data ?? []);
+
+          console.log(newColorsMap);
         }
+        setSpotlightTours(data ?? []);
       } catch (error) {
-        // eslint-disable-next-line no-console
         console.error(`Encountered an error fetching data: ${error}`);
-      } finally {
-        setLoading(false);
       }
     }
-
     fetchData();
-    setMapCenter(center);
-    setSelectedMarker(null);
+  }, [mode]);
+  useEffect(() => {
+    // Reset selectedTour and selectedMarker when mode changes to ensure popups start closed
     setSelectedTour(null);
+    setSelectedMarker(null);
   }, [mode]);
 
   useEffect(() => {
@@ -152,69 +153,53 @@ function SiteMap({ mode }: SiteMapProps) {
       zoomControl={false}
       scrollWheelZoom
       style={{
-        height: '40vh',
+        height: '75vh',
         width: '100%',
-        minHeight: '532px',
+        minHeight: '544px',
         zIndex: '10',
         marginBottom: '25px',
       }}
       key={new Date().getTime()}
     >
       <TileLayer {...tileLayer} />
-      {loading ? (
-        <div className="loading-spinner">Loading...</div>
-      ) : (
-        spotlightTours &&
-        spotlightTours.map((tour, i) => {
-          const color = colorsMap[tour.id] || '#F17373'; // Fallback color
-          return (
-            <Marker
-              key={tour.id}
-              position={{
-                lat: (tour.coordinates as { lat: number })?.lat ?? 0,
-                lng: (tour.coordinates as { lng: number })?.lng ?? 0,
-              }}
-              eventHandlers={{ click: () => handleMarkerSelect(tour, i) }}
-              icon={
-                selectedMarker === i
-                  ? createSelectedMarkerIcon(color)
-                  : createDefaultMarkerIcon(color)
-              }
-            />
-          );
-        })
-      )}
-      {selectedTour &&
-        (isWebDevice ? (
+      <LayersControl position="topright">
+        {spotlightTours &&
+          spotlightTours.map((tour, i) => {
+            // Fetch the color for this tour/exhibit; fallback to a default color if not found
+            console.log(tour);
+            const color = colorsMap[tour.id] || '#F17373'; // Fallback color
+            return (
+              <Marker
+                key={tour.id}
+                position={{
+                  lat: (tour.coordinates as { lat: number })?.lat ?? 0,
+                  lng: (tour.coordinates as { lng: number })?.lng ?? 0,
+                }}
+                eventHandlers={{ click: () => handleMarkerSelect(tour, i) }}
+                icon={
+                  selectedMarker === i
+                    ? createSelectedMarkerIcon(color)
+                    : createDefaultMarkerIcon(color)
+                }
+              />
+            );
+          })}
+        {selectedTour && (
           <Control position="bottomright">
             {mode === 'tours' ? (
               <TourPreviewCard
-                tour={selectedTour as TourRow}
+                tour={selectedTour as TourRow} // Assuming you have proper type checks or type casting
                 handleClose={handlePreviewClose}
               />
             ) : (
               <ExhibitPreviewCard
-                tour={selectedTour as ExhibitWithCategoryRow}
+                tour={selectedTour as ExhibitWithCategoryRow} // Assuming you have proper type checks or type casting
                 handleClose={handlePreviewClose}
               />
             )}
           </Control>
-        ) : (
-          <div className="bottom-center">
-            {mode === 'tours' ? (
-              <TourPreviewCard
-                tour={selectedTour as TourRow}
-                handleClose={handlePreviewClose}
-              />
-            ) : (
-              <ExhibitPreviewCard
-                tour={selectedTour as ExhibitWithCategoryRow}
-                handleClose={handlePreviewClose}
-              />
-            )}
-          </div>
-        ))}
-
+        )}
+      </LayersControl>
       {selectedTour == null && <RecenterMap center={center} />}
     </MapContainer>
   );
diff --git a/src/components/userComponents/VisitorResources/AdmissionButton.tsx b/src/components/userComponents/VisitorResources/AdmissionButton.tsx
new file mode 100644
index 00000000..b296d31b
--- /dev/null
+++ b/src/components/userComponents/VisitorResources/AdmissionButton.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import Link from 'next/link';
+import { MdOutlineCalendarMonth } from 'react-icons/md';
+
+/**
+ * @returns - Button for the user to view the hours and location of the wildlife care center
+ * This button is part of the Visitor Resources section of the home page
+ */
+function AdmissionButton() {
+  return (
+    <Link
+      className="AdmissionButton bg-ivory w-full py-5 rounded-md shadow 
+        justify-center items-center inline-flex z-10
+        px-5 web:px-8 web:py-6"
+      href="/hoursAdmissionPage"
+    >
+      <div
+        className="GreenCircle w-10 h-10 relative bg-mint-cream 
+        rounded-full flex justify-center items-center"
+      >
+        <MdOutlineCalendarMonth className="w-7 h-7 text-scary-forest" />
+      </div>
+      <div
+        className="flex-col justify-start
+        items-start gap-0.5 inline-flex"
+      >
+        <p className="b1 text-night whitespace-normal web:text-nowrap">
+          Hours & Location
+        </p>
+      </div>
+    </Link>
+  );
+}
+
+export default AdmissionButton;
diff --git a/src/components/userComponents/navBar/navBar.tsx b/src/components/userComponents/navBar/navBar.tsx
new file mode 100644
index 00000000..d9864e07
--- /dev/null
+++ b/src/components/userComponents/navBar/navBar.tsx
@@ -0,0 +1,126 @@
+import Link from 'next/link';
+import React, { useState, useEffect } from 'react';
+
+import { HamburgerMenu, CloseMenu } from '../../../../public/icons';
+
+/**
+ * @returns The navigation bar for the web app
+ */
+export default function NavBar() {
+  const [showMenu, setShowMenu] = useState(false);
+  const [isWide, setIsWide] = useState(false);
+
+  useEffect(() => {
+    if (showMenu) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+  }, [showMenu]);
+
+  useEffect(() => {
+    if (window) {
+      setIsWide(window.innerWidth >= 1024);
+    }
+    // Update isWide state on window resize
+    const handleResize = () => setIsWide(window.innerWidth >= 1024);
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  /**
+   * Toggles the side menu
+   */
+  function handleClick() {
+    setShowMenu(!showMenu);
+  }
+
+  return isWide ? (
+    <nav className="bg-scary-forest w-full h-[4.625rem] flex flex-col justify-between sticky top-0 left-0 z-[9999]">
+      <div className="flex flex-row pl-[3.88rem] pr-[4.75rem] pt-5 justify-between items-center">
+        <Link href="/">
+          <img
+            src="https://qkkuacqtcsfjbnzmxmhk.supabase.co/storage/v1/object/public/images/PHSLogo.jpg"
+            alt="PHSLogo"
+            className="w-[6.5rem] h-[2.25rem]"
+          />
+        </Link>
+        <p className="b1 text-ivory flex flex-row gap-[3.19rem]">
+          <Link href="/hours-and-location">Hours & Location</Link>
+          <Link href="/exhibits">Exhibits</Link>
+          <Link href="/site-maps">Site Maps</Link>
+          <Link href="/virtual-tours">Virtual Tours</Link>
+          <Link href="/wildlife-spotlights">Wildlife Spotlights</Link>
+          <Link href="/news">News</Link>
+        </p>
+      </div>
+      <div className="bg-hunter-green w-full h-[0.375rem]" />
+    </nav>
+  ) : (
+    <nav className="w-full sticky top-0 left-0 z-[9999]">
+      <div className="bg-scary-forest h-[4.25rem] flex flex-col justify-between relative">
+        <div className="flex flex-row pl-[1.12rem] pr-[0.88rem] pt-2 justify-between">
+          <Link href="/">
+            <img
+              src="https://qkkuacqtcsfjbnzmxmhk.supabase.co/storage/v1/object/public/images/PHSLogo.jpg"
+              alt="PHSLogo"
+              className="object-contain w-[6.5rem] h-[2.25rem]"
+            />
+          </Link>
+          <button
+            type="button"
+            className="w-10 h-10"
+            onClick={handleClick}
+            aria-label="Toggle Menu"
+          >
+            <div className="flex justify-center">
+              {showMenu ? <CloseMenu /> : <HamburgerMenu />}
+            </div>
+          </button>
+        </div>
+        <div className="bg-hunter-green w-full h-[0.375rem]" />
+      </div>
+
+      {showMenu && (
+        <div className="flex flex-row w-full top-[4.25rem] absolute right-0 z-[999]">
+          <button
+            type="button"
+            className="bg-[#000000B2] flex-auto min-h-screen"
+            onClick={handleClick}
+            aria-label="Exit Menu"
+          />
+          <div className="bg-ivory flex flex-col gap-[2.12rem] w-[18.8125rem] h-screen px-[1.65rem] py-[2.81rem]">
+            <div className="flex flex-col gap-5">
+              <p className="s1 text-scary-forest uppercase">WELCOME</p>
+              <h4 className="text-night pl-5">
+                <Link href="/">Home</Link>
+              </h4>
+            </div>
+            <div className="flex flex-col gap-5">
+              <p className="s1 text-scary-forest uppercase">VISIT</p>
+              <h4 className="text-night flex flex-col gap-[1.38rem] pl-5">
+                <Link href="/hours-and-location">Hours & Location</Link>
+                <Link href="/site-maps">Site Maps</Link>
+                <Link href="/exhibits">Exhibits</Link>
+              </h4>
+            </div>
+            <div>
+              <div className="flex flex-col gap-5">
+                <p className="s1 text-scary-forest uppercase">
+                  LEARN & EXPLORE
+                </p>
+                <h4 className="text-night flex flex-col gap-[1.38rem] pl-5">
+                  <Link href="/virtual-tours">Virtual Tours</Link>
+                  <Link href="/wildlife-spotlights">Wildlife Spotlights</Link>
+                  <Link href="/news">News</Link>
+                </h4>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}
diff --git a/src/context/WindowWidthContext/WindowWidthContext.tsx b/src/context/WindowWidthContext/WindowWidthContext.tsx
index f8330ce6..e69de29b 100644
--- a/src/context/WindowWidthContext/WindowWidthContext.tsx
+++ b/src/context/WindowWidthContext/WindowWidthContext.tsx
@@ -1,62 +0,0 @@
-'use client';
-
-import React, {
-  createContext,
-  useState,
-  useEffect,
-  useContext,
-  useMemo,
-  useCallback,
-} from 'react';
-
-interface WindowWidthContextProps {
-  isWeb: boolean;
-}
-
-const WindowWidthContext = createContext<WindowWidthContextProps | undefined>(
-  undefined,
-);
-/**
- *
- * @param root0 - Provider that checks window width and calculates if this is a web or mobile screen
- * @param root0.children - Provider will give context to its children components.
- * @returns The WindowWidthProvider component, should be wrapped across the whole project for
- * responsive design, per the Progressive Web Application functionality.
- * This provider is used in the root layout of the project such that we have global access to the window width
- * and can conditionally render accordingly.
- */
-export function WindowWidthProvider({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const [isWeb, setIsWeb] = useState(false);
-  const handleResize = useCallback(() => {
-    setIsWeb(window.innerWidth >= 1024);
-  }, []);
-
-  useEffect(() => {
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [handleResize]);
-
-  const windowWidthValue = useMemo(() => ({ isWeb }), [isWeb]);
-
-  return (
-    <WindowWidthContext.Provider value={windowWidthValue}>
-      {children}
-    </WindowWidthContext.Provider>
-  );
-}
-
-export const useWebDeviceDetection = () => {
-  const context = useContext(WindowWidthContext);
-  if (context === undefined) {
-    throw new Error('useIsWeb must be used within a WindowWidthProvider');
-  }
-
-  return context.isWeb;
-};
diff --git a/src/supabase/category/queries.ts b/src/supabase/category/queries.ts
new file mode 100644
index 00000000..4a81885a
--- /dev/null
+++ b/src/supabase/category/queries.ts
@@ -0,0 +1,51 @@
+import supabase from '../client';
+
+import { CategoryRow } from '../../types/types';
+
+// Assume this function is in `supabase/category/queries.js`
+/**
+ *
+ * @param category category to retreive color
+
+ * @param id
+ * @returns color for category, else null
+ */
+// eslint-disable-next-line import/prefer-default-export
+export async function getCategoryColor1(id: string | number) {
+  try {
+    const { data, error } = await supabase
+      .from('categories')
+      .select('color_hex')
+
+      .eq('id', id);
+
+    if (error) {
+      console.error('Error fetching from Supabase:', error.message);
+      return null; // Return null on query error
+    }
+
+    // Check if data array is not empty
+    if (data && data.length > 0 && data[0].color_hex) {
+      // console.log(`Color for ${category}:`, data[0].color_hex);
+
+      return data[0].color_hex;
+    }
+    console.log('No matching category found or color_hex is undefined');
+    return null; // Return null if no matching data found
+  } catch (error) {
+    console.error(`An unexpected error occurred:`, error);
+    return null; // Return null on unexpected error
+  }
+}
+
+/**
+ * Fetches all categories from the database.
+ * @returns A promise that resolves to an array of ExhibitRow objects.
+ */
+export async function fetchAllCategories(): Promise<CategoryRow[]> {
+  const { data, error } = await supabase.from('categories').select('*');
+  if (error) {
+    throw new Error(error.message);
+  }
+  return data;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index c34d1fcb..d470b60b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -37,6 +37,9 @@ const config: Config = {
         sans: ['Lato'],
         lato: ['Lato'],
       },
+      screens: {
+        web: '1024px',
+      },
       theme: {
         fontSize: {
           sm: ['14px', '20px'],