diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 5e86134..6d94c8a 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -26,7 +26,11 @@ import "react-dropdown/style.css";
 import "./Search.css";
 import { SavedSearchBtn } from "./SavedSearches";
 // import useSearch from "../../utils/hooks/useSearch";
+import DITData from "../../backend/scraper/drop_in.json";
+import PTData from "../../backend/scraper/peer_tutoring.json";
 import SIData from "../../backend/scraper/si.json";
+import ClubsData from "../../backend/scraper/tartanconnect.json";
+import CareerData from "../../backend/scraper/handshake.json";
 
 
 // https://plainenglish.io/blog/how-to-implement-a-search-bar-in-react-js
@@ -43,20 +47,21 @@ const Search: React.FC<SearchComponentProps> = ({ page }) => {
   // search results
   // const [data, setData] = useState(null)
   // date picker
-  const [startDate, setStartDate] = useState<Dayjs | null>(dayjs());
-  const [endDate, setEndDate] = useState<Dayjs | null>(dayjs());
+  const [startDate, setStartDate] = useState<Dayjs>(dayjs());
+  const [endDate, setEndDate] = useState<Dayjs>(dayjs().add(7, 'day'));
   const showDatePicker = true;
 
   
-  // useEffect(()=> {
-  //   const [data, setData] = useState([]);
+  useEffect(()=> {
+    // const [data, setData] = useState([]);
 
-  //   const fuse = new Fuse(SIData, {
-  //     keys: ["course_id", "course_name"],
-  //   });
+    // const fuse = new Fuse(SIData, {
+    //   keys: ["course_id", "course_name"],
+    // });
 
-  //   setData([fuse.search(searchInput)]);
-  // },[searchInput])
+    // setData([fuse.search(searchInput)]);
+    getCategoryData(page);
+  },[categoryName])
   
   
   // search
@@ -77,6 +82,68 @@ const Search: React.FC<SearchComponentProps> = ({ page }) => {
     );
   };
 
+  const inDateRange = (date: string) => {
+    const startDateObj = startDate.toDate(); 
+    const endDateObj = endDate.toDate();
+    const eventDate = new Date(date);
+    return eventDate >= startDateObj && eventDate <= endDateObj;
+  }
+
+  const getCategoryData = (currPage:string) => {
+    // console.log("running category data");
+    switch(currPage) {
+      case "academics":
+        const optionsAcademics = { keys: ['resource_type', 'course_id', 'course_name'] }
+        let combinedData = [...DITData, ...SIData, ...PTData];
+        const fuseAcademics = new Fuse(combinedData, optionsAcademics);
+        // const fuse = new Fuse(SIData, options);
+        if (categoryName.length == 0 || categoryName.length==4) {
+          return fuseAcademics.search(searchInput);
+        } else {
+          if (!categoryName.includes("Supplemental Instructions")) {
+            fuseAcademics.remove((doc) => {
+              return doc.resource_type === 'SI';
+            })
+          }
+          if (!categoryName.includes("Drop-in Tutoring")) {
+            fuseAcademics.remove((doc) => {
+              return doc.resource_type === 'DIT';
+            })
+          }
+          if (!categoryName.includes("Peer Tutoring")) {
+            fuseAcademics.remove((doc) => {
+              return doc.resource_type === 'PT'
+            })
+          }
+          return fuseAcademics.search(searchInput);
+        }
+        break;
+      case "clubs":
+        const optionsClubs = { keys: ['resource_type', 'event_name', 'event_host', 'categories'] }
+        const fuseClubs = new Fuse(ClubsData, optionsClubs);
+        return fuseClubs.search(searchInput);
+        break;
+      case "career":
+        const optionsCareer = { keys: ['resource_type', 'event_name', 'event_host', 'categories'] }
+        const fuseCareer = new Fuse(CareerData, optionsCareer);
+        return fuseCareer.search(searchInput);
+        break;
+    }
+  }
+
+  const getWeekday = (weekday: number) => {
+    const today = new Date();
+    const dayOfWeekToday = today.getDay(); // 0 (Sunday) to 6 (Saturday)
+    const offSet = dayOfWeekToday - weekday;
+    if (offSet === 0 || offSet === 7) {
+      return today.toDateString();
+    } else {
+      const targetDay = new Date(today);
+      targetDay.setDate(today.getDate() - offSet);
+      return targetDay.toDateString();
+    }    
+  }
+
   const getNumCategories = () => {
     if (page==="academics") {
       return categoryListAcademics.length;
@@ -146,14 +213,13 @@ const Search: React.FC<SearchComponentProps> = ({ page }) => {
       </Select>
     </FormControl>
   );
-  
 
-  const startDateFn = (date: Dayjs | null) => {
+  const startDateFn = (date: Dayjs) => {
     setStartDate(date);
     console.log(`start: ${date}`);
   };
 
-  const endDateFn = (date: Dayjs | null) => {
+  const endDateFn = (date: Dayjs) => {
     setEndDate(date);
     console.log(`end: ${date}`);
   };
@@ -242,20 +308,42 @@ const Search: React.FC<SearchComponentProps> = ({ page }) => {
         </div>
         
         <div className="overflow-scroll" style={{height: '70vh'}}>
-        {searchInput && SIData.map( (event) => {
-          return (
-            <SearchCard
-          eventName={`${event.resource_type} for ${event.course_name}`}
-          orgName={`${event.course_id} Staff`}
-          startDate={"xx-xx-xxxx"}
-          startTime={"xx:xxPM"}
-          endDate={"xx-xx-xxxx"}
-          endTime={"xx:xxPM"}
-          location={"placeholder"}
-          // eventCategory={eventCategory1}
-          // eventSubcategory={eventSubcategory1}
-        />
-          )})}
+        {searchInput && page==="academics" && getCategoryData(page)?.map( (result) => {
+          for (let i = 0; i<result.item.events.length; i++) {
+            if (inDateRange(getWeekday(result.item.events[i].weekday))) {
+              return ( 
+                  <SearchCard
+                    key={result.refIndex}
+                    eventName={`${result.item.resource_type} for ${result.item.course_name}`}
+                    orgName={`${result.item.course_id} Staff`}
+                    startDate={getWeekday(result.item.events[i].weekday) || `null`}
+                    startTime={result.item.events[i].start_time}
+                    endDate={getWeekday(result.item.events[i].weekday) || `null`}
+                    endTime={result.item.events[i].end_time}
+                    location={result.item.events[i].location}
+                  />
+              )
+            }  
+          }
+        })}
+        {searchInput && (page==="clubs" || page==="career") && getCategoryData(page)?.map( (result) => {
+          for (let i = 0; i<result.item.events.length; i++) {
+            if (inDateRange(getWeekday(result.item.events[i].weekday))) {
+              return ( 
+                  <SearchCard
+                    key={result.refIndex}
+                    eventName={`${result.item.event_name}`}
+                    orgName={`${result.item.event_host}`}
+                    startDate={getWeekday(result.item.events[i].weekday) || `null`}
+                    startTime={result.item.events[i].start_time}
+                    endDate={getWeekday(result.item.events[i].weekday) || `null`}
+                    endTime={result.item.events[i].end_time}
+                    location={result.item.events[i].location}
+                  />
+              )
+            }  
+          }
+        })}
         </div>
 
 
diff --git a/src/components/SearchCard.tsx b/src/components/SearchCard.tsx
index 65f2028..3fd0e85 100644
--- a/src/components/SearchCard.tsx
+++ b/src/components/SearchCard.tsx
@@ -26,18 +26,23 @@ const SearchCard: React.FC<SearchCardProps> = ({
   // eventSubcategory,
 }) => {
   const [buttonClicked, setButtonClicked] = useState(false);
+  const [cardClicked, setCardClicked] = useState(false);
 
   const handleAddToCalendar = () => {
     setButtonClicked((prevClicked) => !prevClicked);
     // Logic for calling GCal
   };
 
+  const handleCardClicked = () => {
+    setCardClicked(!cardClicked);
+  }
+  // {eventName}
   return (
-    <div className="bg-white w-full my-3.5 px-6 py-4 rounded-lg flex items-center align-stretch">
-      <div className="flex-1">
-        <p className="text-xl">{eventName}</p>
-        <p className="text-base">By {orgName}</p>
-        <div className="flex items-center gap-2">
+    <div className="bg-white w-full my-3.5 px-6 py-4 rounded-lg flex items-center align-stretch relative">
+      <div className="flex-1" onClick={handleCardClicked}>
+        <p className={`text-xl w-3/5 my-0.5 ${cardClicked? "": "ease-in-out truncate"}`}>{eventName}</p>
+        <p className="text-base my-0.5">By {orgName}</p>
+        <div className="flex items-center gap-2 my-0.5">
           <FaRegClock className="h-4 w-4 text-gray-600 mr-2" />
           {endDate !== startDate ? (
             <p>
@@ -49,12 +54,12 @@ const SearchCard: React.FC<SearchCardProps> = ({
             </p>
           )}
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 my-0.5">
           <IoLocationSharp className="h-4 w-4 text-gray-600 mr-2" />
           <p>{location}</p>
         </div>
       </div>
-      <div className="flex-shrink-0">
+      <div className="flex-shrink-0 absolute right-3">
         <button
           className={`rounded-full border border-teal px-4 py-2 flex items-center gap-1 ${
             buttonClicked ? "bg-teal text-white" : ""