diff --git a/package.json b/package.json
index 1a5f41a..e260a8c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,5 @@
 {
   "name": "katy-resource",
-  "homepage": "https://slhstsa.github.io/webpage",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -28,8 +27,6 @@
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
     ]
   },
   "browserslist": {
diff --git a/public/images/background_train.jpg b/public/images/background_train.jpg
new file mode 100644
index 0000000..ad74814
Binary files /dev/null and b/public/images/background_train.jpg differ
diff --git a/public/images/horses-real.gif b/public/images/horses-real.gif
new file mode 100644
index 0000000..8cdac7c
Binary files /dev/null and b/public/images/horses-real.gif differ
diff --git a/public/images/horses-real.jpg b/public/images/horses-real.jpg
new file mode 100644
index 0000000..788626a
Binary files /dev/null and b/public/images/horses-real.jpg differ
diff --git a/public/images/horses.jpg b/public/images/horses.jpg
new file mode 100644
index 0000000..a99ecd5
Binary files /dev/null and b/public/images/horses.jpg differ
diff --git a/public/images/i10.jpeg b/public/images/i10.jpeg
new file mode 100644
index 0000000..8fe2e4a
Binary files /dev/null and b/public/images/i10.jpeg differ
diff --git a/public/images/mkt_caboose.png b/public/images/mkt_caboose.png
new file mode 100644
index 0000000..c3b779d
Binary files /dev/null and b/public/images/mkt_caboose.png differ
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 09eb1e6..778faca 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -4,7 +4,7 @@ function Footer(){
     <footer>
       <div className='footer'>
         <h2>
-          GOOD <span className="O">O</span><span className="L">L</span><span className="D">D</span> KATY
+          GOOD <span className='old-thing'><span className="O">O</span><span className="L">L</span><span className="D">D</span> </span>KATY
         </h2>
 
         <div className='subscribe-section'>
diff --git a/src/components/documentation/Documentation.js b/src/components/documentation/Documentation.js
index 1684e82..b5b6fe2 100644
--- a/src/components/documentation/Documentation.js
+++ b/src/components/documentation/Documentation.js
@@ -13,8 +13,8 @@ function Documentation() {
           Community <span className="doc-title-accent">Reference</span>
         </h1>
         <p className="doc-subtitle">
-          A quick guide to the Good Old Katy hub, its layout, and the imagery that
-          helps tell our story.
+          A quick guide to the Good Old Katy hub, its layout, and the imagery
+          that helps tell our story.
         </p>
       </header>
 
@@ -23,17 +23,19 @@ function Documentation() {
           <h2 className="doc-heading">Community Corner</h2>
           <p>
             Good Old Katy is a community-built hub that gathers local resources,
-            events, and history into one welcoming place. We spotlight neighbors,
-            organizations, and stories that make Katy feel connected and alive.
+            events, and history into one welcoming place. We spotlight
+            neighbors, organizations, and stories that make Katy feel connected
+            and alive.
           </p>
         </section>
 
         <section className="doc-card">
           <h2 className="doc-heading">How This Hub Helps</h2>
           <p>
-            Use the site to discover services, track local happenings, explore the
-            map, and step through the timeline of Katy's growth. Everything here
-            is organized to keep the community informed, supported, and inspired.
+            Use the site to discover services, track local happenings, explore
+            the map, and step through the timeline of Katy's growth. Everything
+            here is organized to keep the community informed, supported, and
+            inspired.
           </p>
         </section>
 
@@ -47,17 +49,29 @@ function Documentation() {
               <div>
                 <h3>General</h3>
                 <ul className="doc-list">
-                  <li><Link to="/">Home</Link></li>
-                  <li><Link to="/documentation">Documentation</Link></li>
+                  <li>
+                    <Link to="/">Home</Link>
+                  </li>
+                  <li>
+                    <Link to="/documentation">Documentation</Link>
+                  </li>
                 </ul>
               </div>
               <div>
                 <h3>Explore</h3>
                 <ul className="doc-list">
-                  <li><Link to="/resources">Resources</Link></li>
-                  <li><Link to="/events">Events</Link></li>
-                  <li><Link to="/map">Map</Link></li>
-                  <li><Link to="/timeline">Timeline</Link></li>
+                  <li>
+                    <Link to="/resources">Resources</Link>
+                  </li>
+                  <li>
+                    <Link to="/events">Events</Link>
+                  </li>
+                  <li>
+                    <Link to="/map">Map</Link>
+                  </li>
+                  <li>
+                    <Link to="/timeline">Timeline</Link>
+                  </li>
                 </ul>
               </div>
             </div>
@@ -112,68 +126,130 @@ function Documentation() {
           <h2 className="doc-heading">Sources</h2>
           <ul className="doc-list doc-sources">
             <li>
-              <a href="https://www.cityofkaty.com/about/city-history" target="_blank" rel="noreferrer">
+              <a
+                href="https://www.cityofkaty.com/about/city-history"
+                target="_blank"
+                rel="noreferrer"
+              >
                 Katy, TX History Source (City of Katy)
               </a>
             </li>
             <li>
-              <a href="https://www.shutterstock.com/image-photo/katy-tx-view-air-drone-2277819783" target="_blank" rel="noreferrer">
+              <a
+                href="https://www.shutterstock.com/image-photo/katy-tx-view-air-drone-2277819783"
+                target="_blank"
+                rel="noreferrer"
+              >
                 Katy, TX aerial view (Shutterstock)
               </a>
             </li>
             <li>
-              <a href="https://www.istockphoto.com/photo/houston-texas-downtown-drone-skyline-aerial-gm2168127480-588161879" target="_blank" rel="noreferrer">
+              <a
+                href="https://www.istockphoto.com/photo/houston-texas-downtown-drone-skyline-aerial-gm2168127480-588161879"
+                target="_blank"
+                rel="noreferrer"
+              >
                 Downtown skyline aerial (iStock)
               </a>
             </li>
             <li>
-              <a href="https://www.homes.com/local-guide/katy-tx/" target="_blank" rel="noreferrer">
+              <a
+                href="https://www.homes.com/local-guide/katy-tx/"
+                target="_blank"
+                rel="noreferrer"
+              >
                 Katy, TX local guide photo (Homes.com)
               </a>
             </li>
             <li>
-              <a href="https://www.houstonfoodbank.org/find-help/" target="_blank" rel="noreferrer">
+              <a
+                href="https://www.houstonfoodbank.org/find-help/"
+                target="_blank"
+                rel="noreferrer"
+              >
                 Houston Food Bank imagery (Houston Food Bank)
               </a>
             </li>
             <li>
-              <a href="https://www.houstontexans.com/photos/houston-texans-ymca-slideshow-3127811#5afa7194-9138-4310-b35a-3cd8c9fb4ce6" target="_blank" rel="noreferrer">
+              <a
+                href="https://www.houstontexans.com/photos/houston-texans-ymca-slideshow-3127811#5afa7194-9138-4310-b35a-3cd8c9fb4ce6"
+                target="_blank"
+                rel="noreferrer"
+              >
                 YMCA community center photo (Houston Texans)
               </a>
             </li>
             <li>
-              <a href="https://commons.wikimedia.org/wiki/File:Richmond_TX_George_Library.JPG" target="_blank" rel="noreferrer">
+              <a
+                href="https://commons.wikimedia.org/wiki/File:Richmond_TX_George_Library.JPG"
+                target="_blank"
+                rel="noreferrer"
+              >
                 George Memorial Library, Richmond TX (Wikimedia Commons)
               </a>
             </li>
             <li>
-              <a href="https://www.flickr.com/photos/8113246@N02/2546920569/in/photolist-4T4CKB-4ZtwBa-GVotW2-7LL1RE-bAT1vj-6CeBzg-96xE25-cuGFhh-9qaxyu-8MB83W-9qfVNR-96Qbs3-7NcYEy-7oRh8N-28NyyD8-9vQyUc-x5LvnQ-LYiC95-LYiCgu-d4KcxG-9stbWU-MSKdQQ-4TABMQ-w9qUcy-27zgu19-wNVGyb-LYiCAC-qLPKXv-MSKd25-MSKdn5-MSKcJ1-quyDBB-2ajZDdF-pQd6mP-MKJCdG-LYiCkC-w9Emye-MSKcv5-x4dwfA-MKJBQC-LYiCsm-quq661-4T4WxQ-4Ud7xq-7KFZuD-59qaoH-4T4Wuj-4UZFSg-4SUSPX-4V4VuU" target="_blank" rel="noreferrer">
+              <a
+                href="https://www.flickr.com/photos/8113246@N02/2546920569/in/photolist-4T4CKB-4ZtwBa-GVotW2-7LL1RE-bAT1vj-6CeBzg-96xE25-cuGFhh-9qaxyu-8MB83W-9qfVNR-96Qbs3-7NcYEy-7oRh8N-28NyyD8-9vQyUc-x5LvnQ-LYiC95-LYiCgu-d4KcxG-9stbWU-MSKdQQ-4TABMQ-w9qUcy-27zgu19-wNVGyb-LYiCAC-qLPKXv-MSKd25-MSKdn5-MSKcJ1-quyDBB-2ajZDdF-pQd6mP-MKJCdG-LYiCkC-w9Emye-MSKcv5-x4dwfA-MKJBQC-LYiCsm-quq661-4T4WxQ-4Ud7xq-7KFZuD-59qaoH-4T4Wuj-4UZFSg-4SUSPX-4V4VuU"
+                target="_blank"
+                rel="noreferrer"
+              >
                 Katy Prairie Image (flickr)
               </a>
             </li>
             <li>
-              <a href="https://commons.wihttps://commons.wikimedia.org/wiki/File:Missouri,_Kansas_and_Texas_Railway_system_map_(1918).svg" target="_blank" rel="noreferrer">
-                Map of Missouri-Kansas-Texas Railroad (Wikimedia Commons)
+              <a
+                href="https://www.flickr.com/photos/reweston-sat/102481954/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Photo of the MKT train (Bob Weston)
               </a>
             </li>
             <li>
-              <a href="https://commons.wikimedia.org/wiki/File:Mature_Rice_(India)_by_Augustus_Binu.jpg" target="_blank" rel="noreferrer">
+              <a
+                href="https://commons.wikimedia.org/wiki/File:Mature_Rice_(India)_by_Augustus_Binu.jpg"
+                target="_blank"
+                rel="noreferrer"
+              >
                 Photo of Mature Rice (Wikimedia Commons)
               </a>
             </li>
             <li>
-              <a href="https://commons.wikimedia.org/wiki/File:Richmond_TX_George_Library.JPGhttps://en.wikipedia.org/wiki/File:City_of_katy_logo.png" target="_blank" rel="noreferrer">
-                City of Katy Logo (Wikimedia Commons)
+              <a
+                href="https://www.freepik.com/photos/aerial-suburbs?utm_medium=organic&utm_source=yandexsmartcamerag"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Suburban Overview (freepik)
               </a>
             </li>
             <li>
-              <a href="https://commons.wikimedia.org/wiki/File:I-10.svg" target="_blank" rel="noreferrer">
-                Interstate 10 logo(Wikimedia Commons)
+              <a
+                href="https://photos.wikimapia.org/p/00/02/12/32/16_full.jpeg"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Photo of I10 (Wikimapia Commons)
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://wanbridge.com/educate/moving-to-pearland-tx/?utm_medium=organic&utm_source=yandexsmartcamera"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Sky High image of Pearland Texas(wanbridge)
               </a>
             </li>
+            
             <li>
-              <a href="https://communityimpact.com/houston/katy/government/2020/02/25/new-mural-to-be-painted-on-katy-water-tank/#&gid=1&pid=1" target="_blank" rel="noreferrer">
-                Katy Water tower (Community Impact)
+              <a
+                href="https://www.cityofkaty.com/about/city-history"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Information over Katy History (City of Katy)
               </a>
             </li>
           </ul>
diff --git a/src/components/events/EventsList.js b/src/components/events/EventsList.js
index 8c1103a..dd9ec50 100644
--- a/src/components/events/EventsList.js
+++ b/src/components/events/EventsList.js
@@ -92,13 +92,12 @@ export default function EventsList() {
   return (
     <div className="page-wrapper events-page">
       <h1>
-        Browse Over 
+        Plan Over 
         <span className="hundred">
-          <span className="one"> 2</span>
-          <span className="zero">0</span>
+          <span className="one"> 1</span>
+          <span className="zero">5</span>
           <span className="zero-second"></span>
-        </span> 
-        <br />
+        </span>{" "}
         Events
       </h1>
       <h2>Upcoming Events ({filtered.length})</h2>
@@ -138,56 +137,60 @@ export default function EventsList() {
         </select>
       </div>
 
-      <div className="card-grid">
-        {filtered.map((e) => {
-          const href = toHref(e.website || e.url || KATY_EVENTS_URL);
-          const Wrapper = href ? "a" : "div";
-          const repeats = recurrenceLabel(e.recurrence);
-
-          return (
-            <Wrapper
-              key={e.id}
-              className="card-link"
-              {...(href ? { href, target: "_blank", rel: "noreferrer" } : {})}
-            >
-              <div className={`info-card ${href ? "clickable" : ""}`}>
-                <div className="top-row">
-                  <div style={{ fontWeight: 700 }}>{e.title}</div>
-                  <div className="muted">{e.category}</div>
-                </div>
-
-                <div className="muted">{toDateLabel(e.start)}</div>
-                {repeats ? <div className="muted">{repeats}</div> : null}
-
-                {e.locationName ? (
-                  <div className="muted">{e.locationName}</div>
-                ) : null}
-                {e.address ? <div className="muted">{e.address}</div> : null}
-
-                {e.tags && e.tags.length ? (
-                  <div className="pill-row">
-                    {e.tags.slice(0, 6).map((t) => (
-                      <span key={t} className="pill">
-                        {t}
-                      </span>
-                    ))}
+      <div className="resources-container">
+        <div className="cards-container">
+          <div className="card-grid">
+            {filtered.map((e) => {
+              const href = toHref(e.website || e.url || KATY_EVENTS_URL);
+              const Wrapper = href ? "a" : "div";
+              const repeats = recurrenceLabel(e.recurrence);
+
+              return (
+                <Wrapper
+                  key={e.id}
+                  className="card-link"
+                  {...(href ? { href, target: "_blank", rel: "noreferrer" } : {})}
+                >
+                  <div className={`info-card ${href ? "clickable" : ""}`}>
+                    <div className="top-row">
+                      <div className="card-title">{e.title}</div>
+                      <div className="muted">{e.category}</div>
+                    </div>
+
+                    <div className="muted">{toDateLabel(e.start)}</div>
+                    {repeats ? <div className="muted">{repeats}</div> : null}
+
+                    {e.locationName ? (
+                      <div className="muted">{e.locationName}</div>
+                    ) : null}
+                    {e.address ? <div className="muted">{e.address}</div> : null}
+
+                    {e.tags && e.tags.length ? (
+                      <div className="pill-row">
+                        {e.tags.slice(0, 6).map((t) => (
+                          <span key={t} className="pill">
+                            {t}
+                          </span>
+                        ))}
+                      </div>
+                    ) : null}
+
+                    <div className="meta-row">
+                      <div className="muted">
+                        {e.cost ? <span>Cost: {e.cost}</span> : null}
+                      </div>
+                      {href ? (
+                        <span style={{ color: "var(--accent)" }}>
+                          View details →
+                        </span>
+                      ) : null}
+                    </div>
                   </div>
-                ) : null}
-
-                <div className="meta-row">
-                  <div className="muted">
-                    {e.cost ? <span>Cost: {e.cost}</span> : null}
-                  </div>
-                  {href ? (
-                    <span style={{ color: "var(--accent)" }}>
-                      View details →
-                    </span>
-                  ) : null}
-                </div>
-              </div>
-            </Wrapper>
-          );
-        })}
+                </Wrapper>
+              );
+            })}
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/footer.css b/src/components/footer.css
index c8da549..09b4a43 100644
--- a/src/components/footer.css
+++ b/src/components/footer.css
@@ -5,8 +5,12 @@ footer h2{
   margin: 20px 0px 20px 50px;
 }
 
+footer{
+  background-color: #c18b4d;
+}
 .footer{
   display: flex;
+	background-color: #e3c18a;
   justify-content: space-between;
   padding-top: 50px;
   padding-bottom: 50px;
@@ -43,7 +47,7 @@ footer h2{
 .email-input button{
   height: 70%;
   align-self: center;
-  background-color: #dda15e;
+  background-color: #606c38;
   border-radius: 2px;
   border: 1px black solid;
   width: 60px;
@@ -122,3 +126,8 @@ footer h2{
     font-size: 20px;
   }
 }
+
+.old-thing{
+  letter-spacing: 8px;
+  text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000;
+}
\ No newline at end of file
diff --git a/src/components/home-page/home-page-resources/about.css b/src/components/home-page/home-page-resources/about.css
index 1ff9246..1b3a191 100644
--- a/src/components/home-page/home-page-resources/about.css
+++ b/src/components/home-page/home-page-resources/about.css
@@ -250,3 +250,10 @@
     height: 280px;
   }
 }
+
+@media (max-width: 768px) {
+  .right-section,
+  .about-image {
+    display: none;
+  }
+}
diff --git a/src/components/home-page/home-page-resources/about.js b/src/components/home-page/home-page-resources/about.js
index 29ab52d..0ccf289 100644
--- a/src/components/home-page/home-page-resources/about.js
+++ b/src/components/home-page/home-page-resources/about.js
@@ -1,36 +1,58 @@
-import { Link } from 'react-router-dom';
-import './about.css';
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import "./about.css";
 
 function About() {
+  const [markerVisible, setMarkerVisible] = useState(false);
+
+  const handleMapClick = () => {
+    setMarkerVisible(true);
+  };
+
   return (
     <section className="about-section">
       <div className="about-container">
         <div className="about-content">
-          <div className='about-text-area'>
-              <h2>About Us</h2>
+          <div className="about-text-area">
+            <h2>About Us</h2>
             <p>
-              Good Old Katy is a resource hub and center for all things Houston and Katy texas. We demonstrate the many opportunities and resources of over 600 square miles of texan land. Our mission is to display the rich history of Katy and offer our aid to all of its inhabitants.
+              Good Old Katy is a Community hub and center for all things Houston
+              and Katy Texas. We demonstrate the many opportunities and
+              resources of over 600 square miles of Texan land. Our mission is
+              to display the rich history of Katy and offer our aid to all of
+              its inhabitants.
             </p>
-            
           </div>
         </div>
+
         <div className="about-image">
-          <img src={`${process.env.PUBLIC_URL}/images/texas.svg`} alt="Katy Community" />
-          <img className="katy-marker"src={`${process.env.PUBLIC_URL}/images/katypin.svg`} alt="Community" />
+          <img
+            src={`${process.env.PUBLIC_URL}/images/texas.svg`}
+            alt="Katy Community"
+            onClick={handleMapClick}
+            style={{ cursor: "pointer" }}
+          />
+
+          <img
+            className="katy-marker"
+            src={`${process.env.PUBLIC_URL}/images/katypin.svg`}
+            alt="Community"
+            style={{ opacity: markerVisible ? 1 : 0 }}
+          />
         </div>
-        <div className='right-section'>
-          <div className="katy-locate">
-            Can you find where Katy is located?
-          </div>
-          
-          <div className='katy-link'>
-            <Link to="/map"className='plink'>
-            See Katy Map
-            </Link>
-            <img src={`${process.env.PUBLIC_URL}/images/right-arrow.svg`} alt='right arrow' />
-          </div>
+
+        <div className="right-section">
+          <div className="katy-locate">Can you find where Katy is located?</div>
+          <Link to="/map" className="plink">
+            <div className="katy-link">
+              See Katy Map
+              <img
+                src={`${process.env.PUBLIC_URL}/images/right-arrow.svg`}
+                alt="right arrow"
+              />
+            </div>
+          </Link>
         </div>
-        
       </div>
     </section>
   );
diff --git a/src/components/home-page/home-page-resources/featured-resource.js b/src/components/home-page/home-page-resources/featured-resource.js
index e8608d3..870b5ef 100644
--- a/src/components/home-page/home-page-resources/featured-resource.js
+++ b/src/components/home-page/home-page-resources/featured-resource.js
@@ -1,108 +1,113 @@
-import Polaroid from './polaroid-pic';
+import Polaroid from "./polaroid-pic";
 import "./featured.css";
-import {useState} from 'react';
+import { useState, useEffect } from "react";
 
-import { Link } from 'react-router-dom';
-function Featured(){
+import { Link } from "react-router-dom";
+function Featured() {
   const img = (p) => `${process.env.PUBLIC_URL}${p}`;
-  
 
-  const featuredSourceList = [[
-    'Houston Food Bank',
-    "Food & Basic Needs",
-    '535 Portwall St. Houston TX 77029',
-    'food bank',
-    'pantry locator',
-    'SNAP',
-    'regional',
-    'emergency food',
-    "/images/food-bank.jpg",
-    "donate",
-    "https://www.houstonfoodbank.org/?gad_source=1&gad_campaignid=22841324772&gbraid=0AAAAAD8PsMZQH-6QJaSTFI74kLlGAWBm7&gclid=CjwKCAiAybfLBhAjEiwAI0mBBpNMVQ9Y1rgCJ0r1xUlyFpy7FiQsir78tAgg--GH7JxY75z0Ctsc_xoCtIMQAvD_BwE"
-  ],[
-    'YMCA International',
-    "Legal & Immigration Aid",
-    '3110 Hayes Road Suite 300, Houston, TX 77082',
-    'refugees',
-    'employment',
-    'citizenship',
-    'immigration',
-    'all ages',
-    "/images/ymca.jpg",
-    "aid",
-    "https://ymcahouston.org/locations/ymca-international-services?gad_source=1&gad_campaignid=23438547325&gbraid=0AAAAADuTxhs1zhGiM222Z6AnwahEGF_kT&gclid=CjwKCAiAybfLBhAjEiwAI0mBBpLcFVEUEL4F32l4l2IIiaI_GU23hmajOBQPrVD3i0hQcLn7-wA7IRoCUA4QAvD_BwE"
-  ],[
-    'Fort Bend Libraries',
-    "Learning & Recreation",
-    'Online/Multiple locations',
-    'library',
-    'information',
-    'referrals',
-    'internet access',
-    'Fort Bend',
-    "/images/library.jpg",
-    "learn",
-    "https://www.fortbendlibraries.gov/"
-  ]];
+  const featuredSourceList = [
+    [
+      "Houston Food Bank",
+      "Food & Basic Needs",
+      "535 Portwall St. Houston TX 77029",
+      "food bank",
+      "pantry locator",
+      "SNAP",
+      "regional",
+      "emergency food",
+      "/images/food-bank.jpg",
+      "donate",
+      "https://www.houstonfoodbank.org/?gad_source=1&gad_campaignid=22841324772&gbraid=0AAAAAD8PsMZQH-6QJaSTFI74kLlGAWBm7&gclid=CjwKCAiAybfLBhAjEiwAI0mBBpNMVQ9Y1rgCJ0r1xUlyFpy7FiQsir78tAgg--GH7JxY75z0Ctsc_xoCtIMQAvD_BwE",
+    ],
+    [
+      "YMCA International",
+      "Legal & Immigration Aid",
+      "3110 Hayes Road Suite 300, Houston, TX 77082",
+      "refugees",
+      "employment",
+      "citizenship",
+      "immigration",
+      "all ages",
+      "/images/ymca.jpg",
+      "aid",
+      "https://ymcahouston.org/locations/ymca-international-services?gad_source=1&gad_campaignid=23438547325&gbraid=0AAAAADuTxhs1zhGiM222Z6AnwahEGF_kT&gclid=CjwKCAiAybfLBhAjEiwAI0mBBpLcFVEUEL4F32l4l2IIiaI_GU23hmajOBQPrVD3i0hQcLn7-wA7IRoCUA4QAvD_BwE",
+    ],
+    [
+      "Fort Bend Libraries",
+      "Learning & Recreation",
+      "Online/Multiple locations",
+      "library",
+      "information",
+      "referrals",
+      "internet access",
+      "Fort Bend",
+      "/images/library.jpg",
+      "learn",
+      "https://www.fortbendlibraries.gov/",
+    ],
+  ];
   const [currentSource, setCurrentSource] = useState(0);
-  
-  function changeResource(){
-    if(currentSource === 2){
-      setCurrentSource(0)
-    }
-    else{
-     setCurrentSource(currentSource+1)
-    }
 
-    
+  useEffect(() => {
+    featuredSourceList.forEach((source) => {
+      const image = new Image();
+      image.src = img(source[8]);
+    });
+  }, []);
+
+  function changeResource() {
+    if (currentSource === 2) {
+      setCurrentSource(0);
+    } else {
+      setCurrentSource(currentSource + 1);
+    }
   }
-  
-  return(
+
+  return (
     <div className="featured-resource-container">
       <div className="polaroid-holder">
-        <Polaroid imageurl={img(featuredSourceList[currentSource][8])} text={featuredSourceList[currentSource][9]}/>
-      </div>  
+        <Polaroid
+          imageurl={img(featuredSourceList[currentSource][8])}
+          text={featuredSourceList[currentSource][9]}
+        />
+      </div>
       <div className="text-section">
-        <div className='text-header-please'>
-          Our Featured Resources
-        </div>
-        <div className='featured-info'>
-          <h2>{featuredSourceList[currentSource][0]}<span>{featuredSourceList[currentSource][1]}</span></h2>
+        <div className="text-header-please">Our Featured Resources</div>
+        <div className="featured-info">
+          <h2>
+            {featuredSourceList[currentSource][0]}
+            <span>{featuredSourceList[currentSource][1]}</span>
+          </h2>
           <p>{featuredSourceList[currentSource][2]}</p>
           <div className="aspects">
-            <div className='aspect'>
-              {featuredSourceList[currentSource][3]}
-            </div>
-            <div className='aspect'>
-              {featuredSourceList[currentSource][4]}
-            </div>
-            <div className='aspect'>
-              {featuredSourceList[currentSource][5]}
-            </div>
-            <div className='aspect'>
-              {featuredSourceList[currentSource][6]}
-            </div>
-            <div className='aspect'>
-              {featuredSourceList[currentSource][7]}
-            </div>
+            <div className="aspect">{featuredSourceList[currentSource][3]}</div>
+            <div className="aspect">{featuredSourceList[currentSource][4]}</div>
+            <div className="aspect">{featuredSourceList[currentSource][5]}</div>
+            <div className="aspect">{featuredSourceList[currentSource][6]}</div>
+            <div className="aspect">{featuredSourceList[currentSource][7]}</div>
           </div>
         </div>
-        <div className='flex-holder'>
-          <a href={featuredSourceList[currentSource][10]}className="link">
+        <div className="flex-holder">
+          <a href={featuredSourceList[currentSource][10]} className="link">
             Visit Site
           </a>
-          <Link to="/resources" className='link'>
+          <Link to="/resources" className="link">
             Find
           </Link>
         </div>
       </div>
-      <div onClick={() => changeResource()} className='next-button-container'>
+      <div onClick={() => changeResource()} className="next-button-container">
         <button>
-          <img src={`${process.env.PUBLIC_URL}/images/arrow-down.svg`} alt="Katy Community" />
+          <img
+            src={`${process.env.PUBLIC_URL}/images/arrow-down.svg`}
+            alt="Katy Community"
+          />
         </button>
       </div>
     </div>
   );
 }
 
-export default Featured;
\ No newline at end of file
+export default Featured;
+
diff --git a/src/components/home-page/home-page-resources/featured.css b/src/components/home-page/home-page-resources/featured.css
index 08b1ba4..c4614d8 100644
--- a/src/components/home-page/home-page-resources/featured.css
+++ b/src/components/home-page/home-page-resources/featured.css
@@ -41,9 +41,7 @@
   background-color: rgba(96, 108, 56, 1);
   transition: .2s ease-in-out;
 }
-.aspect:hover{
-  box-shadow: 4px 5px rgb(0,0,0);
-}
+
 .featured-info h2 span{
     font-size: 30px;
     margin-bottom: 5px;
@@ -66,10 +64,11 @@
 
 }
 .polaroid-holder{
-    display: flex;
-    justify-content: end;
-    transform: rotate(-7deg);
-    margin-top: 20px;
+  display: flex;
+	cursor: pointer;
+  justify-content: end;
+  transform: rotate(-7deg);
+  margin-top: 20px;
 }
 
 .text-section{
@@ -152,6 +151,7 @@
   .polaroid-holder {
     justify-content: center;
     transform: rotate(-4deg);
+		cursor: pointer;
   }
 
   .text-header-please {
diff --git a/src/components/home-page/home-page-resources/polaroid.css b/src/components/home-page/home-page-resources/polaroid.css
index c31a38e..b12b402 100644
--- a/src/components/home-page/home-page-resources/polaroid.css
+++ b/src/components/home-page/home-page-resources/polaroid.css
@@ -23,7 +23,7 @@
 .polaroid-text{
   font-family: 'Yearbook Solid W01';
   text-align: center;
-  color:#606c38;
+  color: var(--text-main);
   font-size: 80px;
 }
 
diff --git a/src/components/home-page/home-page-resources/tabbed-section.js b/src/components/home-page/home-page-resources/tabbed-section.js
index 424aa04..4e3d7cd 100644
--- a/src/components/home-page/home-page-resources/tabbed-section.js
+++ b/src/components/home-page/home-page-resources/tabbed-section.js
@@ -39,7 +39,7 @@ function Tabbed(){
             </div>
             <div className="right-area">
               <p>
-                The Houston community is one of uplifting one another and helping each other through hard times. Especially was we approach winter storm season there is no better time to explore all the different resources and services Katy has to offer. Use our huge catalogue of resources to enrich your life in Katy. From food banks to libraries to shelters, there are hundreds of different ways to pitch in and help in your community.
+                The Houston community is one of uplifting one another and helping each other through hard times. Especially as we approach winter-storm season, there is no better time to explore all the different resources and services Katy has to offer. Use our huge catalogue of resources to enrich your life in Katy. From food banks to libraries to shelters, there are hundreds of different ways to pitch in and help in your community.
               </p>
               <div className='link-holder'>
                 <Link to="/resources" className='link-tab'>
@@ -61,7 +61,7 @@ function Tabbed(){
             </div>
             <div className="right-area">
               <p>
-                The Good Old Katy project is not just about helping Houstonians, but also about connecting Katy together. Here we offer a look into many different events and ways Katy citizens can connect with eachother and join their greater community. From christmas socials, game nights, and markets, we offer a look into many different events throughout the year. Additionally, help contribute to the Good Old Katy project by suggesting resources and events that are lacking in our community.
+                The Good Old Katy project is not just about helping Houstonians, but also about connecting Katy together. Here we offer a look into many different events and ways Katy citizens can connect with eachother and join their greater community. From Christmas socials, game nights, and markets, we offer a look into many different events throughout the year. Additionally, help contribute to the Good Old Katy project by suggesting resources and events that are lacking in our community.
               </p>
               <div className='link-holder'>
                 <Link to="/events" className='link-tab'>
diff --git a/src/components/home-page/home-page.css b/src/components/home-page/home-page.css
index 4db8f51..bbd79d9 100644
--- a/src/components/home-page/home-page.css
+++ b/src/components/home-page/home-page.css
@@ -2,35 +2,38 @@
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-  gap: 20px;
+  gap: 24px;
   padding: 0 24px 24px;
   
   animation: popup 1s ease-out  forwards;
 }
 
+@media (max-width: 860px) {
+	.polaroid-string {
+		display: none !important;
+	}	
+}
+
 @keyframes popup
 {
   100%{
-    gap: 100px
+    gap: 150px
   }
 }
 @media (max-width: 600px) {
   .polaroid-string {
-    gap: 18px;
-    padding: 0 16px 16px;
+    display: none;
   }
 }
 
 @media (max-width: 600px) {
   .polaroid-string {
-    margin-top: 18px;
+    display: none;
   }
 }
 
 @media (max-width: 520px) {
   .polaroid-string {
-    margin-top: 22px;
-    position: relative;
-    z-index: 1;
+    display: none;
   }
 }
diff --git a/src/components/home-page/home-page.js b/src/components/home-page/home-page.js
index 020d73a..83496c9 100644
--- a/src/components/home-page/home-page.js
+++ b/src/components/home-page/home-page.js
@@ -2,47 +2,47 @@ import About from "./home-page-resources/about";
 import Polaroid from "./home-page-resources/polaroid-pic";
 import RetroBanner from "./retro-banner";
 import "./home-page.css";
-import Tabbed from './home-page-resources/tabbed-section'
-import Featured from './home-page-resources/featured-resource'
+import Tabbed from "./home-page-resources/tabbed-section";
+import Featured from "./home-page-resources/featured-resource";
 
 function Home() {
   const img = (p) => `${process.env.PUBLIC_URL}${p}`;
 
   return (
     <>
-      <RetroBanner />
+      <section className="hero-polaroid-section">
+        <RetroBanner />
 
-      <div className="polaroid-string">
-        <div style={{ transform: "rotate(5deg)" }}>
-          <Polaroid
-            imageurl={img("/images/katy-stock.jpg")}
-            text="learn"
-            to="/timeline"
-          />
-        </div>
+        <div className="polaroid-string">
+          <div style={{ transform: "rotate(5deg)" }}>
+            <Polaroid
+              imageurl={img("/images/katy-stock.jpg")}
+              text="learn"
+              to="/timeline"
+            />
+          </div>
 
-        <div style={{ transform: "rotate(-5deg)" }}>
-          <Polaroid
-            imageurl={img("/images/katy-hero.jpg")}
-            text="search"
-            to="/map"
-          />
-        </div>
+          <div style={{ transform: "rotate(-5deg)" }}>
+            <Polaroid
+              imageurl={img("/images/katy-hero.jpg")}
+              text="search"
+              to="/map"
+            />
+          </div>
 
-        <div style={{ transform: "rotate(7deg)" }}>
-          <Polaroid
-            imageurl={img("/images/katy-tx.jpg")}
-            text="join"
-            to="/resources"
-          />
+          <div style={{ transform: "rotate(7deg)" }}>
+            <Polaroid
+              imageurl={img("/images/katy-tx.jpg")}
+              text="join"
+              to="/resources"
+            />
+          </div>
         </div>
-      </div>
+      </section>
+
       <About />
-      
       <Tabbed />
       <Featured />
-
-      
     </>
   );
 }
diff --git a/src/components/home-page/navBar.css b/src/components/home-page/navBar.css
index 9eb81b1..60d18ba 100644
--- a/src/components/home-page/navBar.css
+++ b/src/components/home-page/navBar.css
@@ -10,6 +10,8 @@
 }
 
 .nav-bar-container {
+  z-index: 1000;
+
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -32,11 +34,6 @@
   animation-range-start: 110vh;
   animation-range-end: 120vh;
 }
-
-.nav-bar-container.compact {
-}
-
-
 .brand-mark {
   display: flex;
   flex-direction: column;
@@ -65,26 +62,20 @@
   font-family: "DIN Condensed Web", "Helvetica Neue", Arial, sans-serif;
   font-size: 25px;
 }
-
-.nav-bar-container.compact .brand-text {
-  font-size: 24px;
-}
-
-.nav-bar-container.compact .brand-subtext {
-  font-size: 19px;
-}
-
-
 .banner-links-header {
   flex: 1;
   display: flex;
   justify-content: center;
   min-width: 0;
 }
-
+@media (max-width: 1100px){
+  .brand-mark{
+    display: none;
+  }
+}
 .nav-links {
   display: flex;
-  gap: 1.4em;
+  gap: 1em;
   list-style: none;
   padding: 0;
   margin: 0;
@@ -111,15 +102,6 @@
   color: #1f1b16;
 }
 
-.nav-bar-container.compact .nav-links {
-  font-size: 20px;
-}
-
-.nav-bar-container.compact .nav-link {
-  padding: 0.3em 0.7em;
-}
-
-
 .nav-actions {
   display: flex;
   align-items: center;
@@ -220,12 +202,6 @@
 
 
 @media (max-width: 860px) {
-  .brand-mark {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    min-width: 0;
-  }
 
   .nav-actions input[type="search"],
   .nav-actions input {
@@ -240,19 +216,6 @@
     padding: 10px 12px 14px;
   }
 
-  .brand-mark {
-    width: 100%;
-  }
-
-  .brand-text {
-    font-size: 24px;
-    letter-spacing: 0.04em;
-  }
-
-  .brand-subtext {
-    font-size: 18px;
-  }
-
   .banner-links-header {
     display: none;
   }
@@ -361,10 +324,4 @@
   .nav-bar-container {
     animation: none;
   }
-
-  .nav-bar-container.compact {
-    height: auto;
-    padding: 10px 12px 14px;
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
-  }
 }
diff --git a/src/components/home-page/navBar.js b/src/components/home-page/navBar.js
index e43ae7b..1470867 100644
--- a/src/components/home-page/navBar.js
+++ b/src/components/home-page/navBar.js
@@ -4,25 +4,17 @@ import { NavLink, useNavigate } from "react-router-dom";
 
 const NAV_ITEMS = [
   { label: "Home", to: "/" },
+  { label: "Map", to: "/map" },
   { label: "Resources", to: "/resources" },
   { label: "Events", to: "/events" },
-  { label: "Map", to: "/map" },
-  { label: "Timeline", to: "/timeline" }
-];
-
-const MORE_ITEMS = [
+  { label: "Timeline", to: "/timeline" },
   { label: "References", to: "/documentation" },
-  { label: "Resources", to: "/resources" },
-  { label: "Events", to: "/events" }
 ];
 
-const MOBILE_ITEMS = Array.from(
-  new Map([...NAV_ITEMS, ...MORE_ITEMS].map((item) => [item.to, item])).values()
-);
+const MOBILE_ITEMS = NAV_ITEMS;
 
 function Navigation() {
   const navigate = useNavigate();
-  const [dropdownValue, setDropdownValue] = useState("");
   const [mobileValue, setMobileValue] = useState("");
   const [isCompact, setIsCompact] = useState(false);
 
@@ -39,14 +31,6 @@ function Navigation() {
     };
   }, []);
 
-  const select = (event) => {
-    const path = event.target.value;
-    if (path) {
-      navigate(path);
-      setDropdownValue("");
-    }
-  };
-
   const selectMobile = (event) => {
     const path = event.target.value;
     if (path) {
@@ -59,7 +43,15 @@ function Navigation() {
     <div className="center-header">
       <div className={`nav-bar-container${isCompact ? " compact" : ""}`}>
         <div className="brand-mark">
-          <div className="brand-text">GOOD <span><span className="O">O</span><span className="L">L</span><span className="D">D </span></span>KATY</div>
+          <div className="brand-text">
+            GOOD{" "}
+            <span>
+              <span className="O">O</span>
+              <span className="L">L</span>
+              <span className="D">D </span>
+            </span>
+            KATY
+          </div>
           <span className="brand-subtext">Resource Hub</span>
         </div>
 
@@ -97,24 +89,7 @@ function Navigation() {
           </select>
         </div>
 
-        <div className="nav-actions">
-          <div className="more-dropdown">
-            <select
-              className="header-link"
-              onChange={select}
-              value={dropdownValue}
-            >
-              <option value="" disabled>
-                More
-              </option>
-              {MORE_ITEMS.map(item => (
-                <option key={item.to} value={item.to}>
-                  {item.label}
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
+        <div className="nav-actions" />
       </div>
     </div>
   );
diff --git a/src/components/home-page/retrobanner.css b/src/components/home-page/retrobanner.css
index d8a2b9b..5691f83 100644
--- a/src/components/home-page/retrobanner.css
+++ b/src/components/home-page/retrobanner.css
@@ -56,7 +56,7 @@
     padding-left: 16px;
     padding-right: 16px;
     white-space: normal;
-    line-height: 0.92;
+    line-height: 120px;
   }
 
   .old {
@@ -106,7 +106,6 @@
   .PLEASE {
     margin-top: 80px;
     margin-bottom: 14px;
-    line-height: 0.9;
     position: relative;
     z-index: 2;
   }
diff --git a/src/components/map/Map.css b/src/components/map/Map.css
index bb6a074..e11c2e5 100644
--- a/src/components/map/Map.css
+++ b/src/components/map/Map.css
@@ -26,7 +26,7 @@
   border-radius: 3px;
   overflow: hidden;
   box-shadow: 2px 3px rgba(0, 0, 0, 1);
-  min-width: 0;
+  min-width: 80%;
   background: rgba(254, 250, 224, 1);
 }
 
@@ -34,6 +34,22 @@
   border-radius: 0;
 }
 
+.leaflet-container {
+	touch-action: pan-x pan-y;
+}
+
+@media (max-width: 968px) {
+	.map-wrapper {
+		min-height: 400px;
+		height: 50vh;
+		min-width: 100%;
+	}
+
+	.map-wrapper .leaflet-container {
+		height: 100% !important;
+	}
+}
+
 .resources-sidebar {
   width: 350px;
   min-width: 300px;
@@ -45,6 +61,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+	-webkit-overflow-scrolling: touch;
 }
 
 .sidebar-header {
@@ -270,4 +287,8 @@
 
 .popup-content strong {
   color: var(--text-main);
-}
\ No newline at end of file
+}
+
+.leaflet-control-zoom {
+	display: none;
+}
diff --git a/src/components/map/Map.js b/src/components/map/Map.js
index c1b7c08..9847c89 100644
--- a/src/components/map/Map.js
+++ b/src/components/map/Map.js
@@ -16,7 +16,8 @@ L.Icon.Default.mergeOptions({
 });
 
 // Default center coordinates: 29°47'40.3"N 95°49'29.1"W (Katy, TX)
-const center = [29.7945, -95.8248];
+// 29.939345, -95.304114
+const center = [29.730367, -95.578197];
 
 function MapEventHandler({ onBoundsChange, isZoomingRef, mapRef }) {
   const map = useMap();
@@ -60,6 +61,7 @@ function Map() {
   const mapRef = useRef(null);
   const markersRef = useRef([]);
   const isZoomingRef = useRef(false);
+  const markerRefs = useRef({});
 
   useEffect(() => {
     const validResources = resourcesData.filter(
@@ -99,18 +101,24 @@ function Map() {
   }, []);
 
   const handleResourceClick = (resource) => {
-    if (mapRef.current) {
-      isZoomingRef.current = true;
+    if (!mapRef.current) return;
 
-      mapRef.current.flyTo([resource.lat, resource.lng], 16, {
-        animate: true,
-        duration: 0.8,
-      });
+    isZoomingRef.current = true;
 
-      setTimeout(() => {
-        isZoomingRef.current = false;
-      }, 900);
-    }
+    const map = mapRef.current;
+
+    map.once("moveend", () => {
+      const marker = markerRefs.current[resource.id];
+      if (marker) {
+        marker.openPopup();
+      }
+      isZoomingRef.current = false;
+    });
+
+    map.flyTo([resource.lat, resource.lng], 16, {
+      animate: true,
+      duration: 0.8,
+    });
   };
 
   return (
@@ -131,9 +139,13 @@ function Map() {
         <div className="map-wrapper">
           <MapContainer
             center={center}
-            zoom={13}
+            zoom={11}
             style={{ height: "70vh", minHeight: "420px", width: "100%" }}
             scrollWheelZoom={true}
+            tap={true}
+            touchZoom={true}
+            dragging={true}
+            zoomControl={true}
           >
             <MapEventHandler
               onBoundsChange={handleBoundsChange}
@@ -148,6 +160,11 @@ function Map() {
               <Marker
                 key={marker.resource.id || index}
                 position={marker.position}
+                ref={(ref) => {
+                  if (ref && marker.resource.id) {
+                    markerRefs.current[marker.resource.id] = ref;
+                  }
+                }}
               >
                 <Popup>
                   <div className="popup-content">
diff --git a/src/components/resources/ResourcesList.js b/src/components/resources/ResourcesList.js
index 9f443e6..34f1c45 100644
--- a/src/components/resources/ResourcesList.js
+++ b/src/components/resources/ResourcesList.js
@@ -3,127 +3,154 @@ import "../styles/pages.css";
 import resources from "../../data/resources.json";
 
 export default function ResourcesList() {
-    const ALL_CATEGORIES = "All Categories";
-    const ALL_REGIONS = "All Regions";
-    const live = (resources || []).filter(
-        r => r && (r.status === "active" || r.status === "published")
-    );
-
-    const [category, setCategory] = useState(ALL_CATEGORIES);
-    const [area, setArea] = useState(ALL_REGIONS);
-    const [query, setQuery] = useState("");
-
-    const categories = [ALL_CATEGORIES, ...new Set(live.map(r => r.category).filter(Boolean))];
-    const areas = [ALL_REGIONS, ...new Set(live.flatMap(r => r.service_area || []).filter(Boolean))];
-
-    const filtered = useMemo(() => {
-        const q = query.trim().toLowerCase();
-
-        return live.filter(r => {
-            const okCategory = category === ALL_CATEGORIES || r.category === category;
-            const okArea = area === ALL_REGIONS || (r.service_area || []).includes(area);
-
-            const okQuery =
-                !q ||
-                (r.name || "").toLowerCase().includes(q) ||
-                (r.description || "").toLowerCase().includes(q) ||
-                (r.tags || []).some(t => (t || "").toLowerCase().includes(q));
-
-            return okCategory && okArea && okQuery;
-        });
-    }, [live, category, area, query]);
-
-    return (
-        
-        <div className="page-wrapper resources-page">
-            <h1>
-                Browse Over 
-                <span class="hundred">
-                    <span class="one"> 1</span>
-                    <span class="zero">0</span>
-                    <span class="zero-second">0 </span>
-                </span> 
-                Resources
-            </h1>
-            <h2>Current Resources ({filtered.length})</h2>
-            
-            <div className="bar-wrapper"><div className="search-bar-this">
-                <img
-  className="magnifying-img"
-  src={`${process.env.PUBLIC_URL}/images/searchicon.svg`}
-  alt="Magnifying glass"
-/>
-
-                <input type="text"
-                    placeholder="Search resources…"
-                    value={query}
-                    onChange={e => setQuery(e.target.value)}
-                    className="bar-this"
-                    />
-            </div></div>
-            <div className="filter-bar">
-                
-
-                <select value={category} onChange={e => setCategory(e.target.value)}>
-                    {categories.map(c => (
-                        <option key={c} value={c}>{c}</option>
-                    ))}
-                </select>
-
-                <select value={area} onChange={e => setArea(e.target.value)}>
-                    {areas.map(a => (
-                        <option key={a} value={a}>{a}</option>
-                    ))}
-                </select>
-            </div>
-
-            <div className="card-grid">
-                {filtered.map(r => {
-                    const href = r.website || "";
-                    const Wrapper = href ? "a" : "div";
-
-                    return (
-                        <Wrapper
-                            key={r.id}
-                            className="card-link"
-                            {...(href ? { href, target: "_blank", rel: "noreferrer" } : {})}
-                        >
-                            <div className={`info-card ${href ? "clickable" : ""}`}>
-                                <div className="top-row">
-                                    <div style={{ fontWeight: 700 }}>{r.name}</div>
-                                    <div className="muted">{r.category}</div>
-                                </div>
-
-                                {r.address ? <div className="muted">{r.address}</div> : null}
-
-                                <div className="pill-row">
-                                    {(r.tags || []).map(t => (
-                                        <span key={t} className="pill">{t}</span>
-                                    ))}
-                                </div>
-
-                                <div className="meta-row">
-                                    <div className="muted">
-                                        {r.phone ? <span>{r.phone}</span> : null}
-                                    </div>
-                                    {r.website ? (
-                                        <span style={{ color: "var(--accent)" }}>
-                                            Visit site →
-                                        </span>
-                                    ) : null}
-                                </div>
-
-                                {(r.hours || r.eligibility) ? (
-                                    <div className="muted">
-                                        {r.hours ? <div><b>Hours:</b> {r.hours}</div> : null}
-                                        {r.eligibility ? <div><b>Eligibility:</b> {r.eligibility}</div> : null}
-                                    </div>
-                                ) : null}
-                            </div>
-                        </Wrapper>
-                    );
-                })}
-            </div>
+  const ALL_CATEGORIES = "All Categories";
+  const ALL_REGIONS = "All Regions";
+  const live = (resources || []).filter(
+    (r) => r && (r.status === "active" || r.status === "published"),
+  );
+
+  const [category, setCategory] = useState(ALL_CATEGORIES);
+  const [area, setArea] = useState(ALL_REGIONS);
+  const [query, setQuery] = useState("");
+
+  const categories = [
+    ALL_CATEGORIES,
+    ...new Set(live.map((r) => r.category).filter(Boolean)),
+  ];
+  const areas = [
+    ALL_REGIONS,
+    ...new Set(live.flatMap((r) => r.service_area || []).filter(Boolean)),
+  ];
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+
+    return live.filter((r) => {
+      const okCategory = category === ALL_CATEGORIES || r.category === category;
+      const okArea =
+        area === ALL_REGIONS || (r.service_area || []).includes(area);
+
+      const okQuery =
+        !q ||
+        (r.name || "").toLowerCase().includes(q) ||
+        (r.description || "").toLowerCase().includes(q) ||
+        (r.tags || []).some((t) => (t || "").toLowerCase().includes(q));
+
+      return okCategory && okArea && okQuery;
+    });
+  }, [live, category, area, query]);
+
+  return (
+    <div className="page-wrapper resources-page">
+      <h1>
+        Browse Over
+        <span class="hundred">
+          <span class="one"> 1</span>
+          <span class="zero">0</span>
+          <span class="zero-second">0 </span>
+        </span>
+        Resources
+      </h1>
+      <h2>Current Resources ({filtered.length})</h2>
+
+      <div className="bar-wrapper">
+        <div className="search-bar-this">
+          <img
+            className="magnifying-img"
+            src={`${process.env.PUBLIC_URL}/images/searchicon.svg`}
+            alt="Magnifying glass"
+          />
+
+          <input
+            type="text"
+            placeholder="Search resources…"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            className="bar-this"
+          />
+        </div>
+      </div>
+      <div className="filter-bar">
+        <select value={category} onChange={(e) => setCategory(e.target.value)}>
+          {categories.map((c) => (
+            <option key={c} value={c}>
+              {c}
+            </option>
+          ))}
+        </select>
+
+        <select value={area} onChange={(e) => setArea(e.target.value)}>
+          {areas.map((a) => (
+            <option key={a} value={a}>
+              {a}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="resources-container">
+        <div className="cards-container">
+          <div className="card-grid">
+            {filtered.map((r) => {
+              const href = r.website || "";
+              const Wrapper = href ? "a" : "div";
+
+              return (
+                <Wrapper
+                  key={r.id}
+                  className="card-link"
+                  {...(href
+                    ? { href, target: "_blank", rel: "noreferrer" }
+                    : {})}
+                >
+                  <div className={`info-card ${href ? "clickable" : ""}`}>
+                    <div className="top-row">
+                      <div className="card-title">{r.name}</div>
+                      <div className="muted">{r.category}</div>
+                    </div>
+
+                    {r.address ? (
+                      <div className="muted">{r.address}</div>
+                    ) : null}
+
+                    <div className="pill-row">
+                      {(r.tags || []).map((t) => (
+                        <span key={t} className="pill">
+                          {t}
+                        </span>
+                      ))}
+                    </div>
+                    {r.hours || r.eligibility ? (
+                      <div className="muted">
+                        {r.hours ? (
+                          <div>
+                            <b>Hours:</b> {r.hours}
+                          </div>
+                        ) : null}
+                        {r.eligibility ? (
+                          <div>
+                            <b>Eligibility:</b> {r.eligibility}
+                          </div>
+                        ) : null}
+                      </div>
+                    ) : null}
+
+                    <div className="meta-row">
+                      <div className="muted">
+                        {r.phone ? <span>{r.phone}</span> : null}
+                      </div>
+                      {r.website ? (
+                        <span style={{ color: "var(--accent)" }}>
+                          Visit site →
+                        </span>
+                      ) : null}
+                    </div>
+                  </div>
+                </Wrapper>
+              );
+            })}
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 }
diff --git a/src/components/styles/pages.css b/src/components/styles/pages.css
index e1238aa..33b7b82 100644
--- a/src/components/styles/pages.css
+++ b/src/components/styles/pages.css
@@ -8,7 +8,7 @@
   min-height: 100vh;
   padding: 0 20px 48px;
   text-align: center;
-  max-width: 1180px;
+  max-width: 1500px;
   margin: 0 auto;
   color: var(--text-main);
   font-family: 'Yearbook Solid W01', 'Helvetica Neue', Arial, sans-serif;
@@ -43,11 +43,60 @@
 .card-grid {
   display: grid;
   gap: 14px;
+	width: 100%;
+  grid-template-columns: 1fr;
+}
+
+.resources-container {
+  width: 100%;
+	min-width: 80%;
+	align-self: center;
+	align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  text-align: center;
+  padding: 0 20px 48px;
+}
+
+.cards-container {
+	border: 3px solid #000;
+	border-radius: 3px;
+	background: #dda15e;
+	box-shadow: 2px 3px rgba(0,0,0,1);
+  height: 65vh;
+	max-height: 70vh;
+  overflow-y: auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+	-webkit-overflow-scrolling: touch;
+}
+
+.cards-container::-webkit-scrollbar {
+  width: 8px;
+}
+
+.cards-container::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,0.2);
+  border-radius: 6px;
 }
 
 @media (min-width: 720px) {
   .card-grid {
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .card-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1200px) {
+  .card-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
 .filter-bar{
@@ -130,11 +179,10 @@
 }
 
 .info-card {
-  border: 1.5px solid var(--border-muted);
-  border-radius: 0;
-  padding: 14px 16px;
+  border: 2px solid black;
+  border-radius: 4px;
+  padding: 16px;
   background: rgba(255, 255, 255, 0.65);
-  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
   transition:
     transform 0.15s ease,
     box-shadow 0.2s ease,
@@ -142,8 +190,9 @@
     background-color 0.2s ease;
   display: flex;
   flex-direction: column;
+  border-radius: 4px;
   gap: 8px;
-  
+  box-shadow: 3px 3px rgba(0, 0, 0, 0.44);
 }
 
 .info-card.clickable {
@@ -152,9 +201,7 @@
 
 .info-card:hover {
   transform: translateY(-2px);
-  background: var(--accent-soft);
-  border-color: var(--accent);
-  box-shadow: 0 14px 28px rgba(196, 62, 92, 0.18);
+  box-shadow: 3px 3px rgb(0,0,0, 1);
 }
 
 .info-card .pill-row {
@@ -169,6 +216,8 @@
   border: 1px solid #ccc;
   border-radius: 999px;
   background: rgba(0, 0, 0, 0.03);
+  font-family: "DIN Condensed Web";
+  font-size: 18px;
 }
 
 .info-card .top-row,
@@ -179,8 +228,17 @@
   align-items: center;
 }
 
+.info-card .meta-row {
+  margin-top: auto;
+}
+
+.info-card .card-title {
+  font-weight: 700;
+}
+
 .info-card .muted {
   opacity: 0.8;
+  font-family: 'DIN Condensed Web';
 }
 
 .page-cta-row {
diff --git a/src/components/timeline/timeline.css b/src/components/timeline/timeline.css
index c42d752..c5b1d32 100644
--- a/src/components/timeline/timeline.css
+++ b/src/components/timeline/timeline.css
@@ -2,13 +2,17 @@
   position: relative;
   width: 100%;
   height: 100vh;
-  background-color: #fefae0; 
+  background-color: #fefae0;
   overflow: hidden;
   display: flex;
   justify-content: center;
   padding-top: 80px;
-	overscroll-behavior: contain;
+  overscroll-behavior: contain;
+  --wheel-size: 1600px;
+  --wheel-offset: 60px;
+  --wheel-top: calc(100% - (var(--wheel-size) / 2) + var(--wheel-offset));
 }
+
 .content-card h2{
   font-family: 'Yearbook Solid W01';
   letter-spacing: 2px;
@@ -17,31 +21,44 @@
   margin-top: 10px;
   margin-bottom: 0px;
 }
+
 .content-card p{
   font-weight: bold;
 }
+
 .content-box {
   position: absolute;
-  top: 40px; 
+  top: 40px;
   width: 400px;
   text-align: center;
   z-index: 10;
-  pointer-events: none; 
+  pointer-events: none;
 }
 
 .content-title {
-  font-family: "DIN Condensed Web";
+  font-family: "Yearbook Solid W01";
   font-size: 3rem;
-  color: #bc6c25; 
-  margin-top: 5px; 
+	text-align: center;
+  letter-spacing: 2px;
+  color: black; 
+  background-color: #bc6c25;
+  border: 2px solid black;
+  box-shadow: 3px 3px rgba(0,0,0,.2);
+  border-radius: 6px;
+	min-height: 120px;
   width: 600px;  
   margin-left: 50%; 
   transform: translateX(-50%);
+
+	display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .fun-fact{
   font-size: 15px;
 }
+
 .content-card {
   background: white;
   padding: 10px 30px 30px 30px;
@@ -50,23 +67,68 @@
   font-family: sans-serif;
   color: #555;
   line-height: 1.6;
-  margin-top:40px; 
+  margin-top:40px;
+}
+
+.image-mask-container {
+  position: absolute;
+  width: var(--wheel-size);
+  height: var(--wheel-size);
+  top: var(--wheel-top);
+  left: 50%;
+  margin-left: calc(var(--wheel-size) / -2);
+  pointer-events: none;
+  z-index: 1;
+  
+  -webkit-mask-image: radial-gradient(circle at 50% 0%, black 49.5%, transparent 50%);
+  mask-image: radial-gradient(circle at 50% 0%, black 49.5%, transparent 50%);
+  -webkit-mask-size: 100% 200%;
+  mask-size: 100% 200%;
+  -webkit-mask-position: 0% 0%;
+  mask-position: 0% 0%;
+  
+  overflow: hidden;
+  border-radius: 50%;
+
+  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.image-mask-container::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  pointer-events: none;
+}
+
+.masked-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top 50%;
+  opacity: 0.9;
+  filter: brightness(0.8) saturate(0.9);
+  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
 }
 
 .circular-timeline {
   position: absolute;
-  width: 1600px; 
-  height: 1600px;
+  width: var(--wheel-size);
+  height: var(--wheel-size);
   border-radius: 50%;
   background-color: #bc6b2532;
   background-color: rgba(0);
   border: 3px solid #606c38;
   
-  top: 300px; 
+  top: var(--wheel-top);
   left: 50%;
-  margin-left: -800px; 
+  margin-left: calc(var(--wheel-size) / -2);
   
   transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
+  z-index: 2;
 }
 
 .timeline-item {
@@ -90,7 +152,8 @@
   border: 4px solid #f9f7f2; 
   border-radius: 50%;
   position: absolute;
-  top: -14px; 
+  top: -14px;
+  margin-left: -16px;
   transition: all 0.3s ease;
   z-index: 2;
   box-shadow: 0 0 0 1px #283618; 
@@ -98,18 +161,18 @@
 
 .timeline-date {
   position: absolute;
-  top: -30px; 
+  top: -30px;
   font-family: serif;
   font-weight: bold;
   font-size: 1.1rem;
-  color: #606c38;
+  color: #283618;
+  text-shadow: 0 2px 6px rgba(255, 255, 255, 0.35);
   transition: all 0.3s ease;
   writing-mode: vertical-rl;
   text-orientation: mixed;
-  transform: rotate(180deg) translateY(100%); 
+  transform: rotate(180deg) translateY(100%);
 }
 
-
 .timeline-item:hover .timeline-dot {
   transform: scale(1.2);
 }
@@ -125,49 +188,91 @@
   color: #bc6c25;
   font-size: 1.3rem;
   top: -35px;
-  display: none; 
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
 }
 
-.year-image {
-    height:300px; 
-    width:auto; 
-    margin-top: 415px;
-    border-radius: 25px;
-    z-index: 2;
+.wheel-nav {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(var(--wheel-top) + (var(--wheel-size) / 6));
+  display: flex;
+  justify-content: space-between;
+  padding: 0 48px;
+  z-index: 4;
+  pointer-events: none;
 }
 
-@media (max-width: 1200px) {
-  .circular-timeline {
-    width: 1200px;
-    height: 1200px;
-    margin-left: -600px;
-    top: 240px;
-  }
+.wheel-button {
+  pointer-events: auto;
+  background: rgba(254, 250, 224, 0.92);
+  border: 1px solid rgba(96, 108, 56, 0.4);
+  color: #283618;
+  font-family: "DIN Condensed Web", "Helvetica Neue", Arial, sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: 600;
+  font-size: 0.85rem;
+  padding: 10px 16px;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+}
+
+.wheel-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
+}
+
+.wheel-button:disabled {
+  opacity: 0.45;
+  cursor: default;
+  transform: none;
+  box-shadow: none;
+}
 
-  .year-image {
-    margin-top: 320px;
+.wheel-arrow {
+  font-size: 1rem;
+  line-height: 1;
+}
+
+@media (max-width: 1200px) {
+  .timeline-wrapper {
+    --wheel-size: 1200px;
+    --wheel-offset: 50px;
   }
 }
 
 @media (max-width: 900px) {
+  .timeline-wrapper {
+    --wheel-size: 900px;
+    --wheel-offset: 40px;
+  }
+
   .content-box {
     width: 320px;
   }
 
-  .circular-timeline {
-    width: 900px;
-    height: 900px;
-    margin-left: -450px;
-    top: 220px;
+  .wheel-nav {
+    padding: 0 24px;
   }
 
-  .year-image {
-    height: 120px;
-    margin-top: 350px;
+  .wheel-button {
+    font-size: 0.75rem;
+    padding: 8px 12px;
   }
 }
 
 @media (max-width: 600px) {
+  .timeline-wrapper {
+    --wheel-size: 720px;
+    --wheel-offset: 30px;
+  }
+
   .content-box {
     width: 280px;
   }
@@ -179,4 +284,8 @@
   .content-card {
     padding: 20px;
   }
+
+  .wheel-nav {
+    padding: 0 16px;
+  }
 }
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index f257b7f..9ed933b 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -20,7 +20,7 @@ const timelineData = [
     description:
       "Katy is founded as a railroad stop along the Missouri-Kansas-Texas (MKT) Railroad.",
     fact: "Katy actually owes its name to this railroad! It became colloquially known as the K-T (Katy) by its riders.",
-    image: `${process.env.PUBLIC_URL}/images/MKT.svg`,
+    image: `${process.env.PUBLIC_URL}/images/mkt_caboose.png`,
   },
   {
     id: 1,
@@ -34,12 +34,11 @@ const timelineData = [
   {
     id: 2,
     year: "1940s-1950s",
-    title: "Agriculture Shifts",
+    title: "Economic Shifts",
     description:
       "Rice farming declines and the local economy begins transitioning beyond agriculture.",
-    fact:
-      "It was during this time that Katy was officially incorporated as a city.",
-    image: `${process.env.PUBLIC_URL}/images/cityofkaty.jpg`,
+    fact: "It was during this time that Katy was officially incorporated as a city.",
+    image: `${process.env.PUBLIC_URL}/images/horses-real.jpg`,
   },
   {
     id: 3,
@@ -47,9 +46,8 @@ const timelineData = [
     title: "Interstate 10 Growth",
     description:
       "Construction of Interstate 10 accelerates suburban development and regional access.",
-      fact:
-      "While I-10 was under construction since 1957, the final stretch of the highway was not finished until 1990.",
-    image: `${process.env.PUBLIC_URL}/images/I-10.svg`,
+    fact: "While I-10 was under construction since 1957, the final stretch of the highway was not finished until 1990.",
+    image: `${process.env.PUBLIC_URL}/images/i10.jpeg`,
   },
   {
     id: 4,
@@ -57,9 +55,8 @@ const timelineData = [
     title: "Master-Planned Boom",
     description:
       "Rapid population growth leads to major expansion and master-planned communities.",
-      fact:
-      "During this time Katy grew from around 8000 people to over 11000. Katy saw a 3000 person increase!",
-    image: `${process.env.PUBLIC_URL}/images/katy-hero.jpg`,
+    fact: "During this time Katy grew from around 8000 people to over 11000. Katy saw a 3000 person increase!",
+    image: `${process.env.PUBLIC_URL}/images/katy-view.jpg`,
   },
   {
     id: 5,
@@ -67,9 +64,8 @@ const timelineData = [
     title: "Continued Urban Growth",
     description:
       "Katy continues to grow with new neighborhoods, businesses, and community services.",
-      fact:
-      "In 1919 KISD was found with only 1 school, and it now registers over 85,000 students and over 40 schools",
-    image: `${process.env.PUBLIC_URL}/images/Katy-Tower.jpg`,
+    fact: "In 1919 KISD was found with only 1 school, and it now registers over 85,000 students and over 40 schools",
+    image: `${process.env.PUBLIC_URL}/images/2nd-katy-stock.jpg`,
   },
 ];
 
@@ -82,6 +78,8 @@ function Timeline() {
   const angleSep = 180 / (n + 1);
   const currentRotation = -(activeIndex * angleSep);
   const wrapperReference = useRef(null);
+  const goPrev = () => setActiveIndex((prev) => Math.max(prev - 1, 0));
+  const goNext = () => setActiveIndex((prev) => Math.min(prev + 1, n - 1));
 
   useEffect(() => {
     const handleWheel = (e) => {
@@ -118,10 +116,32 @@ function Timeline() {
         <div className="content-card">
           <h2>{timelineData[activeIndex].year}</h2>
           <p>{timelineData[activeIndex].description}</p>
-          <div className="fun-fact"> Fun Fact: {timelineData[activeIndex].fact}</div>
+          <div className="fun-fact">
+            {" "}
+            Fun Fact: {timelineData[activeIndex].fact}
+          </div>
         </div>
       </div>
 
+      <div
+        className="image-mask-container"
+        style={{ transform: `rotate(${currentRotation * 0.6}deg)` }}
+      >
+        <img
+          src={timelineData[activeIndex].image}
+          alt=""
+          className="masked-image"
+          key={activeIndex}
+          style={{
+            transform: `
+      rotate(${-currentRotation * 0.6}deg)
+      scale(1.1)
+      translateY(-400px)
+    `,
+          }}
+        />
+      </div>
+
       <div
         className="circular-timeline"
         style={{ transform: `rotate(${currentRotation}deg)` }}
@@ -144,15 +164,28 @@ function Timeline() {
           );
         })}
       </div>
-
-      <div className="image-box-timeline">
-      <img
-        src={timelineData[activeIndex].image}
-        alt="TSA logo"
-        className="year-image"
-      />
+      <div className="wheel-nav">
+        <button
+          type="button"
+          className="wheel-button prev"
+          onClick={goPrev}
+          disabled={activeIndex === 0}
+          aria-label="Previous timeline entry"
+        >
+          <span className="wheel-arrow">&lt;</span>
+          <span className="wheel-text">Prev</span>
+        </button>
+        <button
+          type="button"
+          className="wheel-button next"
+          onClick={goNext}
+          disabled={activeIndex === n - 1}
+          aria-label="Next timeline entry"
+        >
+          <span className="wheel-text">Next</span>
+          <span className="wheel-arrow">&gt;</span>
+        </button>
       </div>
-      
     </div>
   );
 }
diff --git a/src/components/timeline/timelineApp.css b/src/components/timeline/timelineApp.css
index 588b0c5..560b90a 100644
--- a/src/components/timeline/timelineApp.css
+++ b/src/components/timeline/timelineApp.css
@@ -2,4 +2,42 @@
   border: 1px solid #606c38;
   width: 100%;
   justify-self: center;
-}
\ No newline at end of file
+  margin-bottom: 30px;
+}
+
+.timeline-header{
+  background-color: #606c38;
+  height: 450px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  margin-top: 50px;
+  padding-top: 0px;
+}
+
+.timeline-header span{
+  font-size: 27px;
+  background-color: #bc6c25;
+  border-radius: 3px;
+  border: 2px solid black;
+  padding: 5px 10px 5px 10px;
+  margin-top: 5px;
+  box-shadow: 2px 2px rgba(0,0,0, .5);
+}
+
+.timeline-div{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.timeline-header p{
+  text-align: center;
+  margin-bottom: 0px;
+  line-height: 120px;
+  font-family: "DIN Condensed Web";
+  margin-top: 0px;
+  font-size: 150px;
+}
diff --git a/src/components/timeline/timelineApp.js b/src/components/timeline/timelineApp.js
index d6d4ba6..064456b 100644
--- a/src/components/timeline/timelineApp.js
+++ b/src/components/timeline/timelineApp.js
@@ -1,13 +1,20 @@
-import './timelineApp.css';
-import Timeline from './timeline'; 
+import "./timelineApp.css";
+import Timeline from "./timeline";
 
 function TimelineApp() {
   return (
     <>
+      <div className="timeline-header">
+        <div className="timeline-div">
+          <p>LEARN ABOUT KATY </p>
+          <br />
+          <span>Over a century of History and development</span>
+        </div>
+      </div>
       <Timeline />
       <div className="line"></div>
     </>
   );
 }
 
-export default TimelineApp;
\ No newline at end of file
+export default TimelineApp;
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..92f747b
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,4 @@
+{
+  "rewrites": [{ "source": "/webpage/(.*)", "destination": "/" }],
+  "redirects": [{ "source": "/", "destination": "/webpage", "permanent": false }]
+}