diff --git a/package-lock.json b/package-lock.json
index 1850a882..9e92a03b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,11 +18,11 @@
         "i": "^0.3.7",
         "leaflet": "^1.9.4",
         "moment": "^2.30.1",
-        "next": "latest",
+        "next": "^14.2.1",
         "node": "^21.7.1",
-        "react": "latest",
+        "react": "^18.2.0",
         "react-bootstrap": "^2.9.0",
-        "react-dom": "latest",
+        "react-dom": "^18.2.0",
         "react-icons": "^4.12.0",
         "react-leaflet": "^4.2.1",
         "react-responsive-carousel": "^3.2.23",
@@ -308,9 +308,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.4.tgz",
-      "integrity": "sha512-e7X7bbn3Z6DWnDi75UWn+REgAbLEqxI8Tq2pkFOFAMpWAWApz/YCUhtWMWn410h8Q2fYiYL7Yg5OlxMOCfFjJQ=="
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.1.tgz",
+      "integrity": "sha512-qsHJle3GU3CmVx7pUoXcghX4sRN+vINkbLdH611T8ZlsP//grzqVW87BSUgOZeSAD4q7ZdZicdwNe/20U2janA=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "14.1.4",
@@ -368,9 +368,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.4.tgz",
-      "integrity": "sha512-ubmUkbmW65nIAOmoxT1IROZdmmJMmdYvXIe8211send9ZYJu+SqxSnJM4TrPj9wmL6g9Atvj0S/2cFmMSS99jg==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.1.tgz",
+      "integrity": "sha512-kGjnjcIJehEcd3rT/3NAATJQndAEELk0J9GmGMXHSC75TMnvpOhONcjNHbjtcWE5HUQnIHy5JVkatrnYm1QhVw==",
       "cpu": [
         "arm64"
       ],
@@ -383,9 +383,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.4.tgz",
-      "integrity": "sha512-b0Xo1ELj3u7IkZWAKcJPJEhBop117U78l70nfoQGo4xUSvv0PJSTaV4U9xQBLvZlnjsYkc8RwQN1HoH/oQmLlQ==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.1.tgz",
+      "integrity": "sha512-dAdWndgdQi7BK2WSXrx4lae7mYcOYjbHJUhvOUnJjMNYrmYhxbbvJ2xElZpxNxdfA6zkqagIB9He2tQk+l16ew==",
       "cpu": [
         "x64"
       ],
@@ -398,9 +398,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.4.tgz",
-      "integrity": "sha512-457G0hcLrdYA/u1O2XkRMsDKId5VKe3uKPvrKVOyuARa6nXrdhJOOYU9hkKKyQTMru1B8qEP78IAhf/1XnVqKA==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.1.tgz",
+      "integrity": "sha512-2ZctfnyFOGvTkoD6L+DtQtO3BfFz4CapoHnyLTXkOxbZkVRgg3TQBUjTD/xKrO1QWeydeo8AWfZRg8539qNKrg==",
       "cpu": [
         "arm64"
       ],
@@ -413,9 +413,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.4.tgz",
-      "integrity": "sha512-l/kMG+z6MB+fKA9KdtyprkTQ1ihlJcBh66cf0HvqGP+rXBbOXX0dpJatjZbHeunvEHoBBS69GYQG5ry78JMy3g==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.1.tgz",
+      "integrity": "sha512-jazZXctiaanemy4r+TPIpFP36t1mMwWCKMsmrTRVChRqE6putyAxZA4PDujx0SnfvZHosjdkx9xIq9BzBB5tWg==",
       "cpu": [
         "arm64"
       ],
@@ -428,9 +428,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.4.tgz",
-      "integrity": "sha512-BapIFZ3ZRnvQ1uWbmqEGJuPT9cgLwvKtxhK/L2t4QYO7l+/DxXuIGjvp1x8rvfa/x1FFSsipERZK70pewbtJtw==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.1.tgz",
+      "integrity": "sha512-VjCHWCjsAzQAAo8lkBOLEIkBZFdfW+Z18qcQ056kL4KpUYc8o59JhLDCBlhg+hINQRgzQ2UPGma2AURGOH0+Qg==",
       "cpu": [
         "x64"
       ],
@@ -443,9 +443,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.4.tgz",
-      "integrity": "sha512-mqVxTwk4XuBl49qn2A5UmzFImoL1iLm0KQQwtdRJRKl21ylQwwGCxJtIYo2rbfkZHoSKlh/YgztY0qH3wG1xIg==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.1.tgz",
+      "integrity": "sha512-7HZKYKvAp4nAHiHIbY04finRqjeYvkITOGOurP1aLMexIFG/1+oCnqhGogBdc4lao/lkMW1c+AkwWSzSlLasqw==",
       "cpu": [
         "x64"
       ],
@@ -458,9 +458,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.4.tgz",
-      "integrity": "sha512-xzxF4ErcumXjO2Pvg/wVGrtr9QQJLk3IyQX1ddAC/fi6/5jZCZ9xpuL9Tzc4KPWMFq8GGWFVDMshZOdHGdkvag==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.1.tgz",
+      "integrity": "sha512-YGHklaJ/Cj/F0Xd8jxgj2p8po4JTCi6H7Z3Yics3xJhm9CPIqtl8erlpK1CLv+HInDqEWfXilqatF8YsLxxA2Q==",
       "cpu": [
         "arm64"
       ],
@@ -473,9 +473,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.4.tgz",
-      "integrity": "sha512-WZiz8OdbkpRw6/IU/lredZWKKZopUMhcI2F+XiMAcPja0uZYdMTZQRoQ0WZcvinn9xZAidimE7tN9W5v9Yyfyw==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.1.tgz",
+      "integrity": "sha512-o+ISKOlvU/L43ZhtAAfCjwIfcwuZstiHVXq/BDsZwGqQE0h/81td95MPHliWCnFoikzWcYqh+hz54ZB2FIT8RA==",
       "cpu": [
         "ia32"
       ],
@@ -488,9 +488,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.4.tgz",
-      "integrity": "sha512-4Rto21sPfw555sZ/XNLqfxDUNeLhNYGO2dlPqsnuCg8N8a2a9u1ltqBOPQ4vj1Gf7eJC0W2hHG2eYUHuiXgY2w==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.1.tgz",
+      "integrity": "sha512-GmRoTiLcvCLifujlisknv4zu9/C4i9r0ktsA8E51EMqJL4bD4CpO7lDYr7SrUxCR0tS4RVcrqKmCak24T0ohaw==",
       "cpu": [
         "x64"
       ],
@@ -675,10 +675,17 @@
         "@supabase/storage-js": "^2.5.4"
       }
     },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
+    },
     "node_modules/@swc/helpers": {
-      "version": "0.5.2",
-      "license": "Apache-2.0",
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
       "dependencies": {
+        "@swc/counter": "^0.1.3",
         "tslib": "^2.4.0"
       }
     },
@@ -3461,6 +3468,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "license": "MIT"
@@ -3851,12 +3864,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.1.4.tgz",
-      "integrity": "sha512-1WTaXeSrUwlz/XcnhGTY7+8eiaFvdet5z9u3V2jb+Ek1vFo0VhHKSAIJvDWfQpttWjnyw14kBeq28TPq7bTeEQ==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.1.tgz",
+      "integrity": "sha512-SF3TJnKdH43PMkCcErLPv+x/DY1YCklslk3ZmwaVoyUfDgHKexuKlf9sEfBQ69w+ue8jQ3msLb+hSj1T19hGag==",
       "dependencies": {
-        "@next/env": "14.1.4",
-        "@swc/helpers": "0.5.2",
+        "@next/env": "14.2.1",
+        "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
         "graceful-fs": "^4.2.11",
@@ -3870,18 +3883,19 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.1.4",
-        "@next/swc-darwin-x64": "14.1.4",
-        "@next/swc-linux-arm64-gnu": "14.1.4",
-        "@next/swc-linux-arm64-musl": "14.1.4",
-        "@next/swc-linux-x64-gnu": "14.1.4",
-        "@next/swc-linux-x64-musl": "14.1.4",
-        "@next/swc-win32-arm64-msvc": "14.1.4",
-        "@next/swc-win32-ia32-msvc": "14.1.4",
-        "@next/swc-win32-x64-msvc": "14.1.4"
+        "@next/swc-darwin-arm64": "14.2.1",
+        "@next/swc-darwin-x64": "14.2.1",
+        "@next/swc-linux-arm64-gnu": "14.2.1",
+        "@next/swc-linux-arm64-musl": "14.2.1",
+        "@next/swc-linux-x64-gnu": "14.2.1",
+        "@next/swc-linux-x64-musl": "14.2.1",
+        "@next/swc-win32-arm64-msvc": "14.2.1",
+        "@next/swc-win32-ia32-msvc": "14.2.1",
+        "@next/swc-win32-x64-msvc": "14.2.1"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sass": "^1.3.0"
@@ -3890,6 +3904,9 @@
         "@opentelemetry/api": {
           "optional": true
         },
+        "@playwright/test": {
+          "optional": true
+        },
         "sass": {
           "optional": true
         }
diff --git a/package.json b/package.json
index 2b17aba9..6f86fe32 100644
--- a/package.json
+++ b/package.json
@@ -29,11 +29,11 @@
     "i": "^0.3.7",
     "leaflet": "^1.9.4",
     "moment": "^2.30.1",
-    "next": "latest",
+    "next": "^14.2.1",
     "node": "^21.7.1",
-    "react": "latest",
+    "react": "^18.2.0",
     "react-bootstrap": "^2.9.0",
-    "react-dom": "latest",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
     "react-leaflet": "^4.2.1",
     "react-responsive-carousel": "^3.2.23",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b5d1919c..4a99b147 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -46,6 +46,7 @@ export default function RootLayout({
           crossOrigin=""
         />
         <script src="html5-qrcode.min.js" />
+        
       </head>
 
       <body className={inter.className}>{children}</body>
diff --git a/src/app/siteMapPage/page.tsx b/src/app/siteMapPage/page.tsx
index 44b34e72..a9ab9631 100644
--- a/src/app/siteMapPage/page.tsx
+++ b/src/app/siteMapPage/page.tsx
@@ -1,11 +1,14 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } 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 filterButtonContent: string[] = [
+  'Virtual Tour Map',
+  'Exhibits Map',
+];
 
 const SiteMap = dynamic(
   () => import('../../components/userComponents/SiteMap/SiteMap'),
@@ -22,51 +25,125 @@ 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');
+  // const [isWide, setIsWide] = useState(window.innerWidth >= 768);
+  const [isWide, setIsWide] = useState(false);
+
+  useEffect(() => {
+    /**
+     *
+     */
+    function handleResize() {
+      setIsWide(window.innerWidth >= 768);
+    }
+
+    handleResize(); // Set initial size on client-side mount
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
 
   // 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');
+    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'>
+    <div className="mb-6  w-[22.125rem]">
+      {/* <div className='pt-9 pr-2 pl-2 pb-3'>
       <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]">
+      </div> */}
+      <div className="flex flex-row items-center pr-0 pl-0 rounded-lg bg-mint-cream  border-mint-cream border-[8px]"
+      style={{ width: '93%', marginLeft: 'auto', marginRight: 'auto' }}>  
+      
        
-
+     
+        {filterButtonContent &&
+          filterButtonContent.map(text => (
+            <FilterButton 
+            key={text} 
+            content={text} 
+            onClick={() => handleFilter(text)} // Fixed here
+            isSelected={selectedMap === text}
+            />
+          
+          ))}
+      </div>
+    </div>
+  );
+  const renderFilterContainerWide = () => (
+    <div className="flex justify-end w-[23.875rem] h-[3.25rem]">
+      <div className="flex flex-row items-center rounded-lg bg-mint-cream  border-mint-cream border-[8px]"
+      style={{ width: '100%', marginLeft: 'auto', marginRight: 'auto' }}>  
+           
         {filterButtonContent &&
           filterButtonContent.map(text => (
-            <FilterButton
-              key={text}
-              content={text}
-              onClick={() => handleFilter(text)} // Fixed here
-              isSelected={selectedMap === text}
+            <FilterButton 
+            key={text} 
+            content={text} 
+            onClick={() => handleFilter(text)} // Fixed here
+            isSelected={selectedMap === text}
             />
+          
           ))}
  
       </div>
     </div>
   );
 
-  return (
-    <div className="bg-ivory">
+  return isWide ? (
+
+    <>
+   
+    
       <NavBar />
+      <div className='justify-center mx-auto w-[70%]'>
+        <div className="pt-0 pl-2 pr-2 bg-ivory">
+
+      <div className="pt-20 pb-6 pl-2 ">
+        <span className="text-scary-forest font-lato text-sm font-normal">
+          Home  <span className='text-night'> / Wildlife Care Center Maps </span>
+        </span> 
+      </div>
+      <div className="flex items-center  pb-4">
+        <div className='flex-initial pr-2 pl-2'>
+          <p className="text-night font-lato font-normal text-3xl">Wildlife Care Center Maps</p>
+        </div>
+        <div className="flex-grow flex justify-end pr-2 pl-2 pb-3">
+          {renderFilterContainerWide()}
+        </div>
+      </div>
+        <div className="w-full pr-2 pl-2 flex h-2/3 mb-8">
+          <SiteMap mode={mode} />
+        </div>
+      </div>
+      </div>
+
+    </>
+  ) : (
+    <>
+     <NavBar />
+    <div className='pt-6.25 pr-2 pl-2 pb-2 bg-ivory'>
+      <div className="p-4">
+        <p className="text-night font-lato text-2xl font-normal">Wildlife Care Center Maps</p>
+      </div>
+
+      {renderFilterContainer()}
       <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">
+        <div className="w-full pr-2 pl-2 flex h-2/3 mb-8">
           <SiteMap mode={mode} />
         </div>
       </div>
     </div>
+    </>
   );
 }
 
diff --git a/src/components/userComponents/FilterButton/FilterButton.tsx b/src/components/userComponents/FilterButton/FilterButton.tsx
index a1d05e50..e6c307f6 100644
--- a/src/components/userComponents/FilterButton/FilterButton.tsx
+++ b/src/components/userComponents/FilterButton/FilterButton.tsx
@@ -19,6 +19,9 @@ interface FilterButtonProps {
  * @param onClick.onClick
  */
 
+
+
+
 /**
  *
  * @param root0
@@ -27,10 +30,10 @@ interface FilterButtonProps {
  * @param root0.isSelected
  */
 function FilterButton({ content, onClick, isSelected }: FilterButtonProps) {
-  const selectedStyle = 'bg-hunter-green text-white font-lato text-base font-medium rounded-lg';
+  const selectedStyle = 'bg-hunter-green text-white font-lato text-base font-normal rounded-lg w-auto';
   
 
-  const buttonClass = `py-2 px-6 whitespace-nowrap border-solid text-scary-forest flex-grow font-lato text-base font-medium  ${
+  const buttonClass = `py-2.5 px-6 whitespace-nowrap text-scary-forest flex-grow font-lato text-base font-normal  ${
     isSelected ? selectedStyle : ''
   }`;
 
diff --git a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
deleted file mode 100644
index 434bc743..00000000
--- a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-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 42af2ad7..910f1e21 100644
--- a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
@@ -3,16 +3,12 @@ import { LatLngExpression } from 'leaflet';
 import { useMapEvents } from 'react-leaflet';
 import Link from 'next/link';
 import Image from 'next/image';
-
 import { ExhibitWithCategoryRow } from '../../../types/types';
 
-
 import { fetchExhibitImage } from '../../../supabase/exhibits/queries';
 
 interface ExhibitCardProps {
-
   tour: ExhibitWithCategoryRow;
-
   handleClose: () => void;
   handleClick?: () => void;
 }
@@ -37,7 +33,27 @@ function ExhibitPreviewCard({
   const [name1, setname1] = useState<string>('');
 
   const { id, description, coordinates, category } = tour;
-  // name, for tour title for exhibit
+  const [width, setWidth] = useState('20.06rem');
+  const [height, setHeight] = useState('7.687rem');
+
+  useEffect(() => {
+    /**
+     *
+     */
+    function handleResize() {
+      if (window.innerWidth >= 768) {
+        setWidth('27.06rem');
+        setHeight('8.5rem');
+      } else {
+        setWidth('20.06rem');
+        setHeight('7.687rem');
+      }
+    }
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   // Map Context
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -58,14 +74,12 @@ function ExhibitPreviewCard({
       let displayName = ''; 
   
 
-
     // const imageObj = await fetchExhibitImage(tour.id); 
     // if (imageObj) {
         imageUrl = tour.image; 
     // }
     displayName = tour.category;
 
-
       
   
       // Set state variables
@@ -81,68 +95,48 @@ function ExhibitPreviewCard({
   /** 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-[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'
-              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" onClick={(e) => {
-                  e.stopPropagation(); //  prevents the click from propagating to the parent link
-                  handleClose(); 
-                }}>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
-                    <path d="M10.0523 11.0274L3.35083 4.32596M10.0524 4.32596L3.35083 11.0275" stroke="#272929" strokeWidth="1.11692" strokeLinecap="round" strokeLinejoin="round"/>
-                  </svg>
-                </div>
-              <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 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-[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 className="flex flex-col items-center justify-center mx-auto rounded-md pl-[0.8rem] pr-[0rem]" style={{ width, height }}>
+    <div className="flex flex-row items-center rounded-md overflow-hidden bg-ivory cursor-pointer 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">
+          <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" onClick={e => {
+                e.stopPropagation();
+                handleClose(); 
+              }}>
+ 
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
+              <path d="M10.0523 11.0274L3.35083 4.32596M10.0524 4.32596L3.35083 11.0275" stroke="silver" strokeWidth="1.11692" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
           </div>
+          <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 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-[0.7rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right'>
+              Go to virtual tour &gt;
+            </h6>
+          </Link>
         </div>
       </div>
-
-
+    </div>
+  </div>
   );
 }
 
diff --git a/src/components/userComponents/SiteMap/SiteMap.tsx b/src/components/userComponents/SiteMap/SiteMap.tsx
index 3bf07f40..7dfe6c75 100644
--- a/src/components/userComponents/SiteMap/SiteMap.tsx
+++ b/src/components/userComponents/SiteMap/SiteMap.tsx
@@ -2,12 +2,10 @@
 
 import L, { LatLngExpression } from 'leaflet';
 import React, { useEffect, useState } from 'react';
-import { LayersControl, MapContainer, TileLayer, Marker } from 'react-leaflet';
+import { 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';
@@ -73,12 +71,11 @@ function SiteMap({ mode }: SiteMapProps) {
       try {
         let data;
         if (mode === 'tours') {
-          data = await fetchSpotlightTours();
+          data = await fetchAllSpotlights();
         } else if (mode === 'exhibits') {
           data = await fetchAllExhibits();
         }
         if (data && mode === 'tours') {
-
           const colors = await Promise.all(
             data.map(async item => ({
               id: item.id,
@@ -95,7 +92,6 @@ 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,
@@ -112,9 +108,7 @@ function SiteMap({ mode }: SiteMapProps) {
           );
           console.log("COLOR MAP!!");
           setColorsMap(newColorsMap);
-
           console.log(newColorsMap);
-
         }
         setSpotlightTours(data ?? []);
       } catch (error) {
@@ -155,55 +149,52 @@ function SiteMap({ mode }: SiteMapProps) {
       zoomControl={false}
       scrollWheelZoom
       style={{
-        height: '75vh',
+        height: '40vh',
         width: '100%',
-        minHeight: '544px',
+        minHeight: '532px',
         zIndex: '10',
         marginBottom: '25px',
       }}
       key={new Date().getTime()}
     >
       <TileLayer {...tileLayer} />
-      <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} // Assuming you have proper type checks or type casting
-                handleClose={handlePreviewClose}
-              />
-            ) : (
-              <ExhibitPreviewCard
-
-                tour={selectedTour as ExhibitWithCategoryRow} // Assuming you have proper type checks or type casting
-
-                handleClose={handlePreviewClose}
-              />
-            )}
-          </Control>
-        )}
-      </LayersControl>
+      {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} // Assuming you have proper type checks or type casting
+              handleClose={handlePreviewClose}
+            />
+          ) : (
+            <ExhibitPreviewCard
+              tour={selectedTour as ExhibitWithCategoryRow} // Assuming you have proper type checks or type casting
+              handleClose={handlePreviewClose}
+            />
+          )}
+        </Control>
+      )}
+ 
       {selectedTour == null && <RecenterMap center={center} />}
     </MapContainer>
   );
diff --git a/src/components/userComponents/SiteMap/TourPreviewCard.tsx b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
index 302c3a0c..98c45f22 100644
--- a/src/components/userComponents/SiteMap/TourPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
@@ -5,138 +5,91 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { TourRow } from '../../../types/types';
 import { fetchImagesForTour } from '../../../supabase/media/queries';
-// import { fetchExhibitImage } from '../../../supabase/exhibits/queries';
 
 interface TourCardProps {
   tour: TourRow;
   handleClose: () => void;
   handleClick?: () => void;
 }
-/**
- * Props for the tour preview card component.
- * @param props - The props for the tour preview card.
- * @param props.tour – tour to render preview
- * @param props.handleClick – onClick function for preview card
- * @param props.handleClose – close function for preview card
- * @returns - The rendered tour preview card component.
- */
+
 function TourPreviewCard({ tour, handleClick, handleClose }: TourCardProps) {
   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
+  const { id, description, category } = tour;
+
+  // Responsive dimension states
+  const [width, setWidth] = useState('20.06rem');
+  const [height, setHeight] = useState('7.687rem');
 
-  // Map Context
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const map = useMapEvents({
-    click: e => {
-      if (!e.latlng.equals(coordinates as LatLngExpression)) {
-        handleClose();
+  useEffect(() => {
+    function handleResize() {
+      if (window.innerWidth >= 768) {
+        setWidth('27.06rem');
+        setHeight('8.5rem');
+      } else {
+        setWidth('20.06rem');
+        setHeight('7.687rem');
       }
-    },
-  });
+    }
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
-  // fetch image to use for preview
   useEffect(() => {
     const fetchDetails = async () => {
       setLoading(true);
-
-      let imageUrl = '';
-      let displayName = '';
-
-      // Fetch images for a tour
       const images = await fetchImagesForTour(tour.id);
-      if (images && images.length > 0) {
-        imageUrl = images[0].url;
-      }
-      displayName = tour.name;
-      // Set state variables
-      setPreviewImage(imageUrl);
-      setname1(displayName);
+      setPreviewImage(images && images.length > 0 ? images[0].url : '');
+      setname1(tour.name);
       setLoading(false);
     };
 
     fetchDetails();
   }, [tour]);
 
-  /** route this to spotlights */
-
   return (
-    <div className="flex flex-col items-center justify-center w-[25rem] h-[7.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"
-      >
+    <div className="flex flex-col items-center justify-center mx-auto rounded-md pl-[0.8rem] pr-[0rem]" style={{ width, height }}>
+      <div className="flex flex-row items-center rounded-md overflow-hidden bg-ivory cursor-pointer flex-shrink-0 shadow-xl" aria-hidden="true">
         {!loading && (
-          <div className="relative w-[5.8125rem] z-10 h-full shrink-0 rounded-tl-md rounded-tr-none rounded-br-none rounded-bl-md">
+          <div className="relative w-[5.875rem] 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"
-            />
+            /> 
           </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
-              aria-label="Close preview card"
-              className="flex justify-end items-center pt-2 pr-[0.5rem]"
-              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 === ' ') {
+        <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" onClick={e => {
                   e.stopPropagation();
-                  handleClose();
-                }
-              }}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="14"
-                height="15"
-                viewBox="0 0 14 15"
-                fill="none"
-              >
-                <path
-                  d="M10.0523 11.0274L3.35083 4.32596M10.0524 4.32596L3.35083 11.0275"
-                  stroke="#272929"
-                  strokeWidth="1.11692"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
+                  handleClose(); 
+                }}>
+              <div className='pl-[0.75rem] w-full'>
+                <span className='text-shadow bg-[#F173731A] pr-2 pl-2 rounded-md'>{category}</span>
+              </div>
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
+                <path d="M10.0523 11.0274L3.35083 4.32596M10.0524 4.32596L3.35083 11.0275" stroke="silver" strokeWidth="1.11692" strokeLinecap="round" strokeLinejoin="round"/>
               </svg>
             </div>
             <Link href={`/spotlightPage/${id}`}>
-              <div className=" pl-[0.75rem] pr-[9.87] pt-[0rem] font-lato text-xs text-shadow bg-[#F173731A]  rounded-lg w-[8rem]">
-                {category}
-              </div>
-
               <h3 className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0.3rem] 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">
+              <h4 className="relative font-lato h-[2rem] pr-[0.31rem] pt-[0rem] pl-[0.75rem] pb-[2.4rem] text-shadow line-clamp-2 font-normal line-height-normal">
                 {description}
               </h4>
-              <h6 className="relative pt-[0.2rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right">
-                Go to virtual tour `&gt;`
+              <h6 className='relative pt-[0rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right'>
+                Go to virtual tour &gt;
               </h6>
             </Link>
           </div>
diff --git a/src/supabase/category/queries.ts b/src/supabase/category/queries.ts
index 013f1692..f3778c7d 100644
--- a/src/supabase/category/queries.ts
+++ b/src/supabase/category/queries.ts
@@ -1,23 +1,18 @@
 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) {
@@ -27,9 +22,7 @@ export async function getCategoryColor1(id: string|number) {
 
         // 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");
@@ -39,7 +32,6 @@ export async function getCategoryColor1(id: string|number) {
         console.error(`An unexpected error occurred:`, error);
         return null; // Return null on unexpected error
     }
-
 }
 
 /**
@@ -52,5 +44,4 @@ export async function fetchAllCategories(): Promise<CategoryRow[]> {
       throw new Error(error.message);
     }
     return data;
-  }
-
+  }
\ No newline at end of file
diff --git a/src/supabase/category/queries.tsx b/src/supabase/category/queries.tsx
deleted file mode 100644
index 16e83ac5..00000000
--- a/src/supabase/category/queries.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client';
-
-import { DisplayRow } from '../../types/types';
-import supabase from '../client';
-
-// eslint-disable-next-line jsdoc/require-returns
-/**
- *
- * @param category_in
- */
-// eslint-disable-next-line import/prefer-default-export, camelcase
-// export async function get_category_color(category_in: string) {
-//     const { data, error } = await supabase.rpc('get_category_color', { category_in });
-//     if (error) {
-//       // Log the error message for debugging
-//       console.error(`An error occurred trying to generate color: ${error.message}`);
-//       // Throw a new error with the message for further handling
-//       throw new Error(`An error occurred trying to generate color: ${error.message}`);
-//     }
-//     return data;
-// }
-// Assume this function is in `supabase/category/queries.js`
-/**
- *
- */
-// eslint-disable-next-line import/prefer-default-export
-export async function getCategoryColor1(category: string) {
-  try {
-    const { data, error } = await supabase
-      .from('categories') // Adjust according to your actual table name
-      .select('color')
-      .eq('category', category); // Use this if you're sure there's only one entry per category
-
-    if (error) {
-      throw new Error(error.message);
-    }
-
-    // Assuming 'color' is the column you want and each category has a unique color.
-    // 'data' would be the object containing 'color', so we return data.color.
-    // Check if 'data' exists to avoid accessing property 'color' of null.
-    console.log(`Color for ${category}:`, data[0].color);
-    return data ? data[0].color : null;
-  } catch (error) {
-    console.error(`Error fetching color for category ${category}:`, error);
-    // Return null or a default color to handle errors gracefully
-    return null;
-  }
-}
diff --git a/src/supabase/media/queries.ts b/src/supabase/media/queries.ts
index 9256c5da..341c3354 100644
--- a/src/supabase/media/queries.ts
+++ b/src/supabase/media/queries.ts
@@ -38,7 +38,7 @@ export async function fetchImagesForDisplay(displayId: string | undefined) {
 
 /**
  *
- * @param tourId id of the tour to fetch images for
+ * @param tourId id of the tour to fetch images for 
  * @returns an array of image objects corresponding to the display
  */
 export async function fetchImagesForTour(
@@ -55,7 +55,7 @@ export async function fetchImagesForTour(
     throw new Error(error.message);
   }
 
-  return data;
+  return data; 
 }
 /**
  *
diff --git a/src/types/supabase.ts b/src/types/supabase.ts
index 46636d0a..568c97e6 100644
--- a/src/types/supabase.ts
+++ b/src/types/supabase.ts
@@ -4,7 +4,7 @@ export type Json =
   | boolean
   | null
   | { [key: string]: Json | undefined }
-  | Json[];
+  | Json[]
 
 export type Database = {
   public: {
@@ -14,357 +14,375 @@ export type Database = {
           category: string | null
           color_hex: string
           created_at: string
+          description: string
           id: number
+          image: string
         }
         Insert: {
           category?: string | null
           color_hex: string
           created_at?: string
+          description: string
           id?: number
+          image: string
         }
         Update: {
           category?: string | null
           color_hex?: string
           created_at?: string
+          description?: string
           id?: number
+          image?: string
         }
         Relationships: []
       }
       display_media: {
         Row: {
-          display_id: string;
-          media_id: string;
-          media_placement: string | null;
-        };
+          display_id: string
+          media_id: string
+          media_placement: string | null
+        }
         Insert: {
-          display_id: string;
-          media_id: string;
-          media_placement?: string | null;
-        };
+          display_id: string
+          media_id: string
+          media_placement?: string | null
+        }
         Update: {
-          display_id?: string;
-          media_id?: string;
-          media_placement?: string | null;
-        };
+          display_id?: string
+          media_id?: string
+          media_placement?: string | null
+        }
         Relationships: [
           {
-            foreignKeyName: 'display_media_display_id_fkey';
-            columns: ['display_id'];
-            isOneToOne: false;
-            referencedRelation: 'displays';
-            referencedColumns: ['id'];
+            foreignKeyName: "display_media_display_id_fkey"
+            columns: ["display_id"]
+            isOneToOne: false
+            referencedRelation: "displays"
+            referencedColumns: ["id"]
           },
           {
-            foreignKeyName: 'display_media_media_id_fkey';
-            columns: ['media_id'];
-            isOneToOne: false;
-            referencedRelation: 'media';
-            referencedColumns: ['id'];
+            foreignKeyName: "display_media_media_id_fkey"
+            columns: ["media_id"]
+            isOneToOne: false
+            referencedRelation: "media"
+            referencedColumns: ["id"]
           },
-        ];
-      };
+        ]
+      }
       displays: {
         Row: {
-          coordinates: Json | null;
-          created_at: string;
-          description: string;
-          id: string;
-          title: string;
-          updated_at: string | null;
-        };
+          coordinates: Json | null
+          created_at: string
+          description: string
+          id: string
+          title: string
+          updated_at: string | null
+        }
         Insert: {
-          coordinates?: Json | null;
-          created_at?: string;
-          description?: string;
-          id?: string;
-          title?: string;
-          updated_at?: string | null;
-        };
+          coordinates?: Json | null
+          created_at?: string
+          description?: string
+          id?: string
+          title?: string
+          updated_at?: string | null
+        }
         Update: {
-          coordinates?: Json | null;
-          created_at?: string;
-          description?: string;
-          id?: string;
-          title?: string;
-          updated_at?: string | null;
-        };
-        Relationships: [];
-      };
+          coordinates?: Json | null
+          created_at?: string
+          description?: string
+          id?: string
+          title?: string
+          updated_at?: string | null
+        }
+        Relationships: []
+      }
       emails: {
         Row: {
-          emails: string | null;
-          first_name: string | null;
-          id: number;
-        };
+          emails: string | null
+          id: number
+        }
         Insert: {
-          emails?: string | null;
-          first_name?: string | null;
-          id?: number;
-        };
+          emails?: string | null
+          id?: number
+        }
         Update: {
-          emails?: string | null;
-          first_name?: string | null;
-          id?: number;
-        };
-        Relationships: [];
-      };
+          emails?: string | null
+          id?: number
+        }
+        Relationships: []
+      }
       exhibits: {
         Row: {
+          category_id: number
           coordinates: Json | null
-          description: string
           id: string
-          image: string | null
           title: string
         }
         Insert: {
+          category_id: number
           coordinates?: Json | null
-          description: string
           id?: string
-          image?: string | null
           title: string
         }
         Update: {
+          category_id?: number
           coordinates?: Json | null
-          description?: string
           id?: string
-          image?: string | null
           title?: string
         }
-        Relationships: []
+        Relationships: [
+          {
+            foreignKeyName: "public_exhibits_category_id_fkey"
+            columns: ["category_id"]
+            isOneToOne: false
+            referencedRelation: "categories"
+            referencedColumns: ["id"]
+          },
+        ]
       }
       media: {
         Row: {
-          created_at: string;
-          id: string;
-          text: string | null;
-          title: string | null;
-          type: string | null;
-          url: string;
-        };
+          created_at: string
+          id: string
+          text: string | null
+          title: string | null
+          type: string | null
+          url: string
+        }
         Insert: {
-          created_at?: string;
-          id?: string;
-          text?: string | null;
-          title?: string | null;
-          type?: string | null;
-          url?: string;
-        };
+          created_at?: string
+          id?: string
+          text?: string | null
+          title?: string | null
+          type?: string | null
+          url?: string
+        }
         Update: {
-          created_at?: string;
-          id?: string;
-          text?: string | null;
-          title?: string | null;
-          type?: string | null;
-          url?: string;
-        };
-        Relationships: [];
-      };
+          created_at?: string
+          id?: string
+          text?: string | null
+          title?: string | null
+          type?: string | null
+          url?: string
+        }
+        Relationships: []
+      }
       news: {
         Row: {
-          content_link: string;
-          created_at: string;
-          id: string;
-          title: string;
-          updated_at: string | null;
-        };
+          content_link: string
+          created_at: string
+          id: string
+          title: string
+          updated_at: string | null
+        }
         Insert: {
-          content_link: string;
-          created_at?: string;
-          id?: string;
-          title: string;
-          updated_at?: string | null;
-        };
+          content_link: string
+          created_at?: string
+          id?: string
+          title: string
+          updated_at?: string | null
+        }
         Update: {
-          content_link?: string;
-          created_at?: string;
-          id?: string;
-          title?: string;
-          updated_at?: string | null;
-        };
-        Relationships: [];
-      };
+          content_link?: string
+          created_at?: string
+          id?: string
+          title?: string
+          updated_at?: string | null
+        }
+        Relationships: []
+      }
       spotlight_recommendations: {
         Row: {
-          source_display_id: string;
-          target_display_id: string;
-        };
+          source_display_id: string
+          target_display_id: string
+        }
         Insert: {
-          source_display_id: string;
-          target_display_id: string;
-        };
+          source_display_id: string
+          target_display_id: string
+        }
         Update: {
-          source_display_id?: string;
-          target_display_id?: string;
-        };
+          source_display_id?: string
+          target_display_id?: string
+        }
         Relationships: [
           {
-            foreignKeyName: 'spotlight_recommendations_source_display_id_fkey';
-            columns: ['source_display_id'];
-            isOneToOne: false;
-            referencedRelation: 'tours';
-            referencedColumns: ['id'];
+            foreignKeyName: "spotlight_recommendations_source_display_id_fkey"
+            columns: ["source_display_id"]
+            isOneToOne: false
+            referencedRelation: "tours"
+            referencedColumns: ["id"]
           },
           {
-            foreignKeyName: 'spotlight_recommendations_target_display_id_fkey';
-            columns: ['target_display_id'];
-            isOneToOne: false;
-            referencedRelation: 'tours';
-            referencedColumns: ['id'];
+            foreignKeyName: "spotlight_recommendations_target_display_id_fkey"
+            columns: ["target_display_id"]
+            isOneToOne: false
+            referencedRelation: "tours"
+            referencedColumns: ["id"]
           },
-        ];
-      };
+        ]
+      }
       tour_displays: {
         Row: {
-          display_id: string;
-          display_order: number | null;
-          tour_id: string;
-        };
+          display_id: string
+          display_order: number | null
+          tour_id: string
+        }
         Insert: {
-          display_id: string;
-          display_order?: number | null;
-          tour_id: string;
-        };
+          display_id: string
+          display_order?: number | null
+          tour_id: string
+        }
         Update: {
-          display_id?: string;
-          display_order?: number | null;
-          tour_id?: string;
-        };
+          display_id?: string
+          display_order?: number | null
+          tour_id?: string
+        }
         Relationships: [
           {
-            foreignKeyName: 'tour_displays_display_id_fkey';
-            columns: ['display_id'];
-            isOneToOne: false;
-            referencedRelation: 'displays';
-            referencedColumns: ['id'];
+            foreignKeyName: "tour_displays_display_id_fkey"
+            columns: ["display_id"]
+            isOneToOne: false
+            referencedRelation: "displays"
+            referencedColumns: ["id"]
           },
           {
-            foreignKeyName: 'tour_displays_tour_id_fkey';
-            columns: ['tour_id'];
-            isOneToOne: false;
-            referencedRelation: 'tours';
-            referencedColumns: ['id'];
+            foreignKeyName: "tour_displays_tour_id_fkey"
+            columns: ["tour_id"]
+            isOneToOne: false
+            referencedRelation: "tours"
+            referencedColumns: ["id"]
           },
-        ];
-      };
+        ]
+      }
       tour_media: {
         Row: {
-          media_id: string;
-          tour_id: string;
-        };
+          media_id: string
+          tour_id: string
+        }
         Insert: {
-          media_id: string;
-          tour_id: string;
-        };
+          media_id: string
+          tour_id: string
+        }
         Update: {
-          media_id?: string;
-          tour_id?: string;
-        };
+          media_id?: string
+          tour_id?: string
+        }
         Relationships: [
           {
-            foreignKeyName: 'tour_media_media_id_fkey';
-            columns: ['media_id'];
-            isOneToOne: false;
-            referencedRelation: 'media';
-            referencedColumns: ['id'];
+            foreignKeyName: "tour_media_media_id_fkey"
+            columns: ["media_id"]
+            isOneToOne: false
+            referencedRelation: "media"
+            referencedColumns: ["id"]
           },
           {
-            foreignKeyName: 'tour_media_tour_id_fkey';
-            columns: ['tour_id'];
-            isOneToOne: false;
-            referencedRelation: 'tours';
-            referencedColumns: ['id'];
+            foreignKeyName: "tour_media_tour_id_fkey"
+            columns: ["tour_id"]
+            isOneToOne: false
+            referencedRelation: "tours"
+            referencedColumns: ["id"]
           },
-        ];
-      };
+        ]
+      }
       tours: {
         Row: {
-          category: Database['public']['Enums']['tour_category'];
-          coordinates: Json | null;
-          created_at: string;
-          description: string | null;
-          id: string;
-          name: string;
-          preview_text: string | null;
-          spotlight: boolean;
-          stop_count: number | null;
-        };
+          category: Database["public"]["Enums"]["tour_category"]
+          coordinates: Json | null
+          created_at: string
+          description: string | null
+          id: string
+          name: string
+          preview_text: string | null
+          spotlight: boolean
+          stop_count: number | null
+        }
         Insert: {
-          category?: Database['public']['Enums']['tour_category'];
-          coordinates?: Json | null;
-          created_at?: string;
-          description?: string | null;
-          id?: string;
-          name: string;
-          preview_text?: string | null;
-          spotlight?: boolean;
-          stop_count?: number | null;
-        };
+          category?: Database["public"]["Enums"]["tour_category"]
+          coordinates?: Json | null
+          created_at?: string
+          description?: string | null
+          id?: string
+          name: string
+          preview_text?: string | null
+          spotlight?: boolean
+          stop_count?: number | null
+        }
         Update: {
-          category?: Database['public']['Enums']['tour_category'];
-          coordinates?: Json | null;
-          created_at?: string;
-          description?: string | null;
-          id?: string;
-          name?: string;
-          preview_text?: string | null;
-          spotlight?: boolean;
-          stop_count?: number | null;
-        };
-        Relationships: [];
-      };
-    };
+          category?: Database["public"]["Enums"]["tour_category"]
+          coordinates?: Json | null
+          created_at?: string
+          description?: string | null
+          id?: string
+          name?: string
+          preview_text?: string | null
+          spotlight?: boolean
+          stop_count?: number | null
+        }
+        Relationships: []
+      }
+    }
     Views: {
-      [_ in never]: never;
-    };
+      [_ in never]: never
+    }
     Functions: {
       fetch_recommended_spotlights: {
         Args: {
-          source_spotlight_id: string;
-        };
+          source_spotlight_id: string
+        }
         Returns: {
-          id: string;
-          name: string;
-          description: string;
-          created_at: string;
-          stop_count: number;
-          spotlight: boolean;
-          preview_text: string;
-          coordinates: Json;
-          category: Database['public']['Enums']['tour_category'];
-        }[];
-      };
+          id: string
+          name: string
+          description: string
+          created_at: string
+          stop_count: number
+          spotlight: boolean
+          preview_text: string
+          coordinates: Json
+          category: Database["public"]["Enums"]["tour_category"]
+        }[]
+      }
       fetchimagesfordisplay: {
         Args: {
-          displayid: string;
-        };
+          displayid: string
+        }
         Returns: {
-          id: string;
-          url: string;
-          type: string;
-          title: string;
-          text: string;
-          created_at: string;
-        }[];
-      };
+          id: string
+          url: string
+          type: string
+          title: string
+          text: string
+          created_at: string
+        }[]
+      }
       fetchimagesfortour: {
         Args: {
-          tourid: string;
-        };
+          tourid: string
+        }
         Returns: {
-          id: string;
-          url: string;
-          type: string;
-          title: string;
-          text: string;
-          created_at: string;
-        }[];
-      };
+          id: string
+          url: string
+          type: string
+          title: string
+          text: string
+          created_at: string
+        }[]
+      }
       get_category_color: {
         Args: {
           category_in: string
         }
         Returns: string
       }
+      get_exhibit_details: {
+        Args: Record<PropertyKey, never>
+        Returns: {
+          coordinates: Json
+          id: number
+          category: string
+          description: string
+          image: string
+        }[]
+      }
       get_non_spotlight_tours: {
         Args: Record<PropertyKey, never>
         Returns: {
@@ -380,7 +398,7 @@ export type Database = {
         }[]
       }
       join_all_spotlights_with_media: {
-        Args: Record<PropertyKey, never>;
+        Args: Record<PropertyKey, never>
         Returns: {
           id: string
           name: string
@@ -394,6 +412,20 @@ export type Database = {
           media_url: string
         }[]
       }
+      join_all_tours_with_media: {
+        Args: Record<PropertyKey, never>
+          id: string
+          name: string
+          description: string
+          created_at: string
+          stop_count: number
+          spotlight: boolean
+          preview_text: string
+          coordinates: Json
+          category: Database["public"]["Enums"]["tour_category"]
+          media_url: string
+        }[]
+      }
       join_all_tours_with_media: {
         Args: Record<PropertyKey, never>
         Returns: {
@@ -409,98 +441,111 @@ export type Database = {
           media_url: string
         }[]
       }
+    }
+          id: string
+          name: string
+          description: string
+          created_at: string
+          stop_count: number
+          spotlight: boolean
+          preview_text: string
+          coordinates: Json
+          category: Database["public"]["Enums"]["tour_category"]
+          media_url: string
+        }[]
+      }
     }
     Enums: {
-      media_type: 'image' | 'video' | 'link';
+      media_type: "image" | "video" | "link"
       tour_category:
-        | 'BuildingsAndServices'
-        | 'ParksAviariesEnclosures'
-        | 'SiteFeatures';
-    };
+        | "BuildingsAndServices"
+        | "ParksAviariesEnclosures"
+        | "SiteFeatures"
+    }
     CompositeTypes: {
-      [_ in never]: never;
-    };
-  };
-};
+      [_ in never]: never
+    }
+  }
+}
 
-type PublicSchema = Database[Extract<keyof Database, 'public'>];
+type PublicSchema = Database[Extract<keyof Database, "public">]
 
 export type Tables<
   PublicTableNameOrOptions extends
-    | keyof (PublicSchema['Tables'] & PublicSchema['Views'])
+    | keyof (PublicSchema["Tables"] & PublicSchema["Views"])
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof (Database[PublicTableNameOrOptions['schema']]['Tables'] &
-        Database[PublicTableNameOrOptions['schema']]['Views'])
+    ? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+        Database[PublicTableNameOrOptions["schema"]]["Views"])
     : never = never,
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? (Database[PublicTableNameOrOptions['schema']]['Tables'] &
-      Database[PublicTableNameOrOptions['schema']]['Views'])[TableName] extends {
-      Row: infer R;
+  ? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+      Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
+      Row: infer R
     }
     ? R
     : never
-  : PublicTableNameOrOptions extends keyof (PublicSchema['Tables'] &
-      PublicSchema['Views'])
-  ? (PublicSchema['Tables'] &
-      PublicSchema['Views'])[PublicTableNameOrOptions] extends {
-      Row: infer R;
-    }
-    ? R
+  : PublicTableNameOrOptions extends keyof (PublicSchema["Tables"] &
+        PublicSchema["Views"])
+    ? (PublicSchema["Tables"] &
+        PublicSchema["Views"])[PublicTableNameOrOptions] extends {
+        Row: infer R
+      }
+      ? R
+      : never
     : never
-  : never;
 
 export type TablesInsert<
   PublicTableNameOrOptions extends
-    | keyof PublicSchema['Tables']
+    | keyof PublicSchema["Tables"]
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
+    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
     : never = never,
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
-      Insert: infer I;
+  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Insert: infer I
     }
     ? I
     : never
-  : PublicTableNameOrOptions extends keyof PublicSchema['Tables']
-  ? PublicSchema['Tables'][PublicTableNameOrOptions] extends {
-      Insert: infer I;
-    }
-    ? I
+  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
+    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+        Insert: infer I
+      }
+      ? I
+      : never
     : never
-  : never;
 
 export type TablesUpdate<
   PublicTableNameOrOptions extends
-    | keyof PublicSchema['Tables']
+    | keyof PublicSchema["Tables"]
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
+    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
     : never = never,
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
-      Update: infer U;
+  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Update: infer U
     }
     ? U
     : never
-  : PublicTableNameOrOptions extends keyof PublicSchema['Tables']
-  ? PublicSchema['Tables'][PublicTableNameOrOptions] extends {
-      Update: infer U;
-    }
-    ? U
+  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
+    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+        Update: infer U
+      }
+      ? U
+      : never
     : never
-  : never;
 
 export type Enums<
   PublicEnumNameOrOptions extends
-    | keyof PublicSchema['Enums']
+    | keyof PublicSchema["Enums"]
     | { schema: keyof Database },
   EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicEnumNameOrOptions['schema']]['Enums']
+    ? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
     : never = never,
 > = PublicEnumNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicEnumNameOrOptions['schema']]['Enums'][EnumName]
-  : PublicEnumNameOrOptions extends keyof PublicSchema['Enums']
-  ? PublicSchema['Enums'][PublicEnumNameOrOptions]
-  : never;
+  ? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
+  : PublicEnumNameOrOptions extends keyof PublicSchema["Enums"]
+    ? PublicSchema["Enums"][PublicEnumNameOrOptions]
+    : never