diff --git a/app/truck-profile/[truckId]/page.tsx b/app/truck-profile/[truckId]/page.tsx
index 5c27c55..c9278d8 100644
--- a/app/truck-profile/[truckId]/page.tsx
+++ b/app/truck-profile/[truckId]/page.tsx
@@ -9,7 +9,9 @@ export default async function TruckProfile({
 
   return (
     <>
-      <FoodTruckProfile truckId={truckId} />
+      <div className="md:flex md:justify-center md:items-center md:min-h-screen">
+        <FoodTruckProfile truckId={truckId} />
+      </div>
     </>
   );
 }
diff --git a/components/food-truck/food-truck-profile.tsx b/components/food-truck/food-truck-profile.tsx
index 4c79d3f..b557a3a 100644
--- a/components/food-truck/food-truck-profile.tsx
+++ b/components/food-truck/food-truck-profile.tsx
@@ -150,19 +150,19 @@ export default function FoodTruckProfile({ truckId }: FoodTruckProfileProps) {
   }, [sightings]);
 
   return (
-    <div className="p-3 min-h-screen">
+    <div className="p-3 min-h-screen  md:w-[768px] md:min-w-[768px] md:flex md:flex-col md:items-center ">
       {foodTruck && (
-        <div className="relative rounded-xl bg-background overflow-clip shadow-md ring-1 ring-primary width-full">
+        <div className="relative rounded-xl bg-background overflow-clip shadow-md ring-1 ring-primary width-full md:w-full md:h-[55svh]">
           <Image
-            className="h-[200px] object-cover"
+            className="h-[200px] object-cover md:h-4/5 md:w-full"
             src={foodTruck.avatar as string}
             alt="Picture of a food truck"
             width={600}
             height={600}
           ></Image>
 
-          <div className="flex flex-row">
-            <div className="px-3 py-2 truncate">
+          <div className="flex flex-row md:bottom-0 md:flex md:h-1/5">
+            <div className="px-3 py-2 truncate md:mt-1">
               <h2 className="text-xl font-semibold truncate">
                 {foodTruck.name}
               </h2>
@@ -231,12 +231,12 @@ export default function FoodTruckProfile({ truckId }: FoodTruckProfileProps) {
           </ul>
         </div>
       ) : (
-        <div className="mt-4 text-sm ml-2">
+        <div className="mt-4 text-sm ml-2 md:w-full">
           Insufficient data to calculate chance
         </div>
       )}
 
-      <div className="border-b border-gray-200 mt-4">
+      <div className="border-b border-gray-200 mt-4 md:w-full">
         <nav className="flex -mb-px">
           {["reviews", "sightings"].map((tab) => (
             <button
@@ -255,29 +255,29 @@ export default function FoodTruckProfile({ truckId }: FoodTruckProfileProps) {
       </div>
 
       {/* Reviews Tab */}
-      <div className="pt-2">
+      <div className="pt-2 md:w-full md:h-[40vh] ">
         {activeTab === "reviews" && (
           <>
-            <div className="flex">
+            <div className="flex md:mt-1 md:mb-1 ">
               <h1
-                className={`${montserrat.className} text-2xl text-primary tracking-tight`}
+                className={`${montserrat.className} text-2xl text-primary tracking-tight `}
               >
                 <strong>Recent Reviews</strong>
               </h1>
               <button
-                className="bg-primary p-2 mr-2 text-primary-foreground rounded-xl flex-none w-9 h-9 flex justify-center items-center ml-auto mb-2"
+                className="bg-primary p-2 mr-2 text-primary-foreground rounded-xl flex-none w-9 h-9 flex justify-center items-center ml-auto mb-2 md:w-auto"
                 onClick={() => {
                   if (!user) {
                     return router.push("/sign-in?error=Not signed in");
                   }
-
                   handleToggleAddReview();
                 }}
               >
+                <p className=" hidden md:mr-2 md:flex">Add Review</p>
                 <IoCreateOutline size={24} />
               </button>
             </div>
-            <div className="grid grid-cols-1 gap-y-3">
+            <div className="grid grid-cols-1 gap-y-3  ">
               {reviews.length > 0 ? (
                 reviews.map((review) => (
                   <ReviewCard key={review.id} reviewsData={review} />
diff --git a/components/food-truck/reviews-card.tsx b/components/food-truck/reviews-card.tsx
index 5ab73a2..b25c969 100644
--- a/components/food-truck/reviews-card.tsx
+++ b/components/food-truck/reviews-card.tsx
@@ -36,14 +36,14 @@ export default function ReviewCard({ reviewsData }: ReviewCardProps) {
           </div>
         </Link>
       ) : (
-        <div className="rounded-xl bg-background overflow-clip shadow-md ring-1 ring-primary">
-          <div className="flex flex-col">
+        <div className="rounded-xl bg-background overflow-clip shadow-md ring-1 ring-primary relative  ">
+          <div className="flex flex-col ">
             <div className="p-2">
               <StarRating rating={reviewsData.rating} isClickable={false} />
               <p className="my-2">{reviewsData.content}</p>
             </div>
             <Image
-              className="h-[300px] object-cover"
+              className="h-[300px] object-cover md:w-full md:h-[55vh]"
               src={reviewsData.image}
               alt="Picture of a food truck"
               width={600}
diff --git a/components/header.tsx b/components/header.tsx
index e9f7294..9855736 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -32,7 +32,7 @@ export default function Header({ user }: HeaderProps) {
   return (
     <>
       <button
-        className="fixed top-3 right-2 z-30 text-gray-700 text-2xl border-2 border-primary bg-muted rounded-xl text-primary w-10 h-10 mr-[3px] flex justify-center items-center"
+        className="fixed top-3 right-2 z-30 text-gray-700 text-2xl border-2 border-primary bg-muted rounded-xl text-primary w-10 h-10 mr-[3px] flex justify-center items-center md:hidden"
         onClick={handleToggle}
       >
         {!isDisplayed ? <LuMenu /> : <LuX />}
diff --git a/components/logout-button.tsx b/components/logout-button.tsx
index 69fbffa..f1f73fb 100644
--- a/components/logout-button.tsx
+++ b/components/logout-button.tsx
@@ -13,10 +13,12 @@ export default function LogoutButton({ handleToggle }: LogoutButtonProps) {
         signOutAction();
         handleToggle();
       }}
-      className="flex font-semibold items-center w-48 h-12 p-3 mt-3 last:mb-4"
+      className="flex font-semibold items-center w-48 h-12 p-3 mt-3 last:mb-4, md:last:mb-0  md:mt-0"
     >
-      <LuLogOut size={26} />
-      <p className="ml-2">Logout</p>
+      <div className="flex font-semibold items-center w-48 h-9 p-3 mt-3 md:max-w-[36] md:justify-center md:p-0  md:rounded-xl md:mb-2 md:mt-2">
+        <LuLogOut size={26} />
+        <p className="ml-2 ">Logout</p>
+      </div>
     </button>
   );
 }
diff --git a/components/map/map.tsx b/components/map/map.tsx
index 050ee67..dd33f9f 100644
--- a/components/map/map.tsx
+++ b/components/map/map.tsx
@@ -153,8 +153,9 @@ export default function Map() {
   // -----Effect-----
   //initial display markers
   useEffect(() => {
-    if (!initialSightingLoaded && map && isLoaded) {
+    if (!initialSightingLoaded && map && isLoaded && filterRef.current) {
       if (initialSightingId && !isNaN(initialSightingId)) {
+        console.log(initialSightingId);
         displayInitSighting(
           initialSightingId,
           map,
@@ -164,23 +165,24 @@ export default function Map() {
         );
       }
       if (initialDisplay === "active") {
-        if (!displaySightingsMarker) {
-          const displayActiveAtInit = async () => {
-            const data = await getSightingActiveInLastWeek();
-            if (data instanceof PostgrestError) {
-              console.error(data);
-              return;
-            }
-            makeSightingMarkerUsingSighting(
-              map as google.maps.Map,
-              setSighting,
-              setSelectedSighting,
-              data
-            );
-          };
-          displayActiveAtInit();
-          setDisplaySightingsMarker(true);
-        }
+        filterRef.current.sightings();
+        //   if (!displaySightingsMarker) {
+        //     const displayActiveAtInit = async () => {
+        //       const data = await getSightingActiveInLastWeek();
+        //       if (data instanceof PostgrestError) {
+        //         console.error(data);
+        //         return;
+        //       }
+        //       makeSightingMarkerUsingSighting(
+        //         map as google.maps.Map,
+        //         setSighting,
+        //         setSelectedSighting,
+        //         data
+        //       );
+        //     };
+        //     displayActiveAtInit();
+        //     setDisplaySightingsMarker(true);
+        //   }
       }
       setInitialSightingLoaded(true);
     }
diff --git a/components/nav-button-mobile.tsx b/components/nav-button-mobile.tsx
index 1354176..526fe56 100644
--- a/components/nav-button-mobile.tsx
+++ b/components/nav-button-mobile.tsx
@@ -16,18 +16,19 @@ export default function NavButtonMobile({
   const pathname = usePathname();
 
   const Icon = NavButton.icon;
-
+  // return differently for map button
+  const isMap = NavButton.href.toString().includes("/truck-map");
   return (
     <>
-      {NavButton.href !== "/truck-map" ? (
+      {!isMap ? (
         <Link
           onClick={handleToggle}
           href={NavButton.href}
-          className={`mt-${NavButton.marginTop} last:mb-4`}
+          className={`mt-${NavButton.marginTop} last:mb-4 md:last:mb-0 md:mt-0 `}
         >
           <div
             className={clsx(
-              "flex font-semibold items-center w-48 h-12 p-3 mt-3",
+              "flex font-semibold items-center w-48 h-12 p-3 mt-3 md:max-w-[36] md:justify-center md:p-0  md:rounded-xl md:mb-2 md:mt-2",
               {
                 "bg-primary text-background": pathname === NavButton.href,
               }
@@ -38,12 +39,16 @@ export default function NavButtonMobile({
           </div>
         </Link>
       ) : (
-        <a onClick={handleToggle} href={NavButton.href}>
+        <a
+          onClick={handleToggle}
+          href={NavButton.href.toString()}
+          className=" "
+        >
           <div
             className={clsx(
-              "flex font-semibold items-center w-48 h-12 p-3 mt-3",
+              "flex font-semibold items-center w-48 h-12 p-3 mt-3 md:max-w-1/5 md:justify-center md:rounded-xl md:mb-2 md:mt-2  ",
               {
-                "bg-primary text-background": pathname === NavButton.href,
+                "bg-primary text-background": pathname.includes("/truck-map"),
               }
             )}
           >
diff --git a/components/sidebar-mobile.tsx b/components/sidebar-mobile.tsx
index 2d6b507..33d0df3 100644
--- a/components/sidebar-mobile.tsx
+++ b/components/sidebar-mobile.tsx
@@ -26,13 +26,16 @@ export default function SidebarMobile({
           "fixed top-0  w-full h-full bg-black bg-opacity-50 z-20",
           {
             hidden: !isDisplayed,
-          }
+          },
+          "md:hidden"
         )}
       ></div>
       <div
         className={clsx(
           "fixed top-0 right-0 translate-x-0 flex flex-col border-l-[1.5px] border-primary w-48 h-full pt-16 bg-muted transition-transform duration-300 z-20",
-          { "translate-x-48": !isDisplayed }
+          { "translate-x-48": !isDisplayed },
+
+          "md:absolute md:flex-row md:w-4/5 md:max-w-3/4 md:h-16 md:pt-0 md:border-l-0 md:bg-transparent md:translate-x-0 md:items-center md:justify-end md:top-0 md:border-0 md:mr-2"
         )}
       >
         {/* creates a button for each button passed to the component */}