diff --git a/frontend/src/components/gdpr/gdprbanner.tsx b/frontend/src/components/gdpr/gdprbanner.tsx
index 445cc90e..5a3313f8 100644
--- a/frontend/src/components/gdpr/gdprbanner.tsx
+++ b/frontend/src/components/gdpr/gdprbanner.tsx
@@ -81,7 +81,7 @@ const GDPRBanner: React.FC = () => {
       )}
 
       {showOptOutForm && (
-        <div className="bg-gray-12 p-4 fixed bottom-0 left-1/2 transform -translate-x-1/2 w-full max-w-lg flex flex-col items-center z-50 shadow-md rounded-lg">
+        <div className="bg-gray-12 p-4 fixed bottom-0 left-1/2 transform -translate-x-1/2 w-full max-w-lg flex flex-col items-center z-50 shadow-md rounded-lg border border-gray-2">
           <div className="text-gray-1 text-sm text-center mb-2 max-w-full">
             Please select which services you would like to opt out of.
           </div>
diff --git a/frontend/src/components/listing/ListingImageFlipper.tsx b/frontend/src/components/listing/ListingImageFlipper.tsx
index 2d5180f0..890c82b8 100644
--- a/frontend/src/components/listing/ListingImageFlipper.tsx
+++ b/frontend/src/components/listing/ListingImageFlipper.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { FaChevronLeft, FaChevronRight, FaTimes } from "react-icons/fa";
 
 import placeholder from "@/components/listing/pics/placeholder.jpg";
@@ -15,7 +15,27 @@ const ListingImageFlipper = (props: Props) => {
   const { artifacts, name, currentImageIndex, setCurrentImageIndex } = props;
   const [isFullScreen, setIsFullScreen] = useState(false);
 
-  if (artifacts.length === 0) {
+  const imageArtifacts = useMemo(
+    () =>
+      artifacts
+        .map((artifact, index) => ({ artifact, originalIndex: index }))
+        .filter(({ artifact }) => artifact.artifact_type === "image")
+        .map(({ artifact, originalIndex }, newIndex) => ({
+          artifact,
+          originalIndex,
+          newIndex,
+        })),
+    [artifacts],
+  );
+
+  const currentImageArrayIndex = useMemo(() => {
+    const found = imageArtifacts.findIndex(
+      ({ originalIndex }) => originalIndex === currentImageIndex,
+    );
+    return found >= 0 ? found : 0;
+  }, [imageArtifacts, currentImageIndex]);
+
+  if (imageArtifacts.length === 0) {
     return (
       <div className="w-full md:w-1/2 relative">
         <div className="aspect-square bg-white rounded-lg overflow-hidden">
@@ -29,7 +49,18 @@ const ListingImageFlipper = (props: Props) => {
     );
   }
 
-  const currentArtifact = artifacts[currentImageIndex];
+  const handleNavigate = (direction: "next" | "prev") => {
+    const nextIndex =
+      direction === "next"
+        ? (currentImageArrayIndex + 1) % imageArtifacts.length
+        : currentImageArrayIndex === 0
+          ? imageArtifacts.length - 1
+          : currentImageArrayIndex - 1;
+
+    setCurrentImageIndex(imageArtifacts[nextIndex].originalIndex);
+  };
+
+  const currentArtifact = imageArtifacts[currentImageArrayIndex].artifact;
 
   return (
     <>
@@ -41,24 +72,16 @@ const ListingImageFlipper = (props: Props) => {
           className="cursor-zoom-in rounded-lg w-[500px]"
         />
         {/* Navigation arrows */}
-        {artifacts.length > 1 && (
+        {imageArtifacts.length > 1 && (
           <>
             <button
-              onClick={() =>
-                setCurrentImageIndex((prev) =>
-                  prev === 0 ? artifacts.length - 1 : prev - 1,
-                )
-              }
+              onClick={() => handleNavigate("prev")}
               className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 w-8 h-8 rounded-full flex items-center justify-center shadow-md border border-gray-11"
             >
               <FaChevronLeft className="text-gray-11" />
             </button>
             <button
-              onClick={() =>
-                setCurrentImageIndex((prev) =>
-                  prev === artifacts.length - 1 ? 0 : prev + 1,
-                )
-              }
+              onClick={() => handleNavigate("next")}
               className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 w-8 h-8 rounded-full flex items-center justify-center shadow-md border border-gray-11"
             >
               <FaChevronRight className="text-gray-11" />
diff --git a/frontend/src/components/listing/ListingRenderer.tsx b/frontend/src/components/listing/ListingRenderer.tsx
index e40e60a4..6713fd4d 100644
--- a/frontend/src/components/listing/ListingRenderer.tsx
+++ b/frontend/src/components/listing/ListingRenderer.tsx
@@ -38,7 +38,12 @@ const ListingRenderer = ({ listing }: { listing: ListingResponse }) => {
     reservation_deposit_amount: reservationDepositAmount,
   } = listing;
   const [artifacts, setArtifacts] = useState(initialArtifacts);
-  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [currentImageIndex, setCurrentImageIndex] = useState(() => {
+    const firstImageIndex = artifacts.findIndex(
+      (artifact) => artifact.artifact_type === "image",
+    );
+    return firstImageIndex >= 0 ? firstImageIndex : 0;
+  });
   const isForSale = priceAmount && stripeProductId && inventoryType;
 
   const handleAddArtifacts = (newArtifacts: Artifact[]) => {
diff --git a/frontend/src/components/listings/ListingGrid.tsx b/frontend/src/components/listings/ListingGrid.tsx
index fd183d3e..286de4f8 100644
--- a/frontend/src/components/listings/ListingGrid.tsx
+++ b/frontend/src/components/listings/ListingGrid.tsx
@@ -7,6 +7,7 @@ import { paths } from "@/gen/api";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
 import ROUTES from "@/lib/types/routes";
+import { createListingDetailsMap } from "@/lib/utils/listingUtils";
 
 import ListingGridSkeleton from "./ListingGridSkeleton";
 
@@ -49,11 +50,7 @@ const ListingGrid = (props: ListingGridProps) => {
           return;
         }
 
-        const detailsMap: Record<string, ListingDetails> = {};
-        data.listings.forEach((listing) => {
-          detailsMap[listing.id] = listing;
-        });
-        setListingDetails(detailsMap);
+        setListingDetails(createListingDetailsMap(data.listings));
       })();
     }
   }, [listingInfos]);
diff --git a/frontend/src/components/listings/MyListingGrid.tsx b/frontend/src/components/listings/MyListingGrid.tsx
index b26ae742..aa482cc2 100644
--- a/frontend/src/components/listings/MyListingGrid.tsx
+++ b/frontend/src/components/listings/MyListingGrid.tsx
@@ -7,6 +7,7 @@ import { paths } from "@/gen/api";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
 import ROUTES from "@/lib/types/routes";
+import { createListingDetailsMap } from "@/lib/utils/listingUtils";
 
 type ListingInfo = {
   id: string;
@@ -47,27 +48,26 @@ const MyListingGrid = ({ userId }: MyListingGridProps) => {
       setListingInfos(data.listings);
 
       if (data.listings.length > 0) {
-        const { data: batchData, error: batchError } = await auth.client.GET(
-          "/listings/batch",
-          {
+        const fetchListingDetails = async (ids: string[]) => {
+          const { data, error } = await auth.client.GET("/listings/batch", {
             params: {
               query: {
-                ids: data.listings.map((info: ListingInfo) => info.id),
+                ids: ids,
               },
             },
-          },
-        );
+          });
+
+          if (error) {
+            addErrorAlert(error);
+            return;
+          }
 
-        if (batchError) {
-          addErrorAlert(batchError);
-          return;
-        }
+          setListingDetails(createListingDetailsMap(data.listings));
+        };
 
-        const detailsMap: Record<string, ListingDetails> = {};
-        batchData.listings.forEach((listing: ListingDetails) => {
-          detailsMap[listing.id] = listing;
-        });
-        setListingDetails(detailsMap);
+        await fetchListingDetails(
+          data.listings.map((info: ListingInfo) => info.id),
+        );
       }
     };
 
diff --git a/frontend/src/components/listings/UpvotedGrid.tsx b/frontend/src/components/listings/UpvotedGrid.tsx
index 627cfad2..d47cdfb6 100644
--- a/frontend/src/components/listings/UpvotedGrid.tsx
+++ b/frontend/src/components/listings/UpvotedGrid.tsx
@@ -7,6 +7,7 @@ import { paths } from "@/gen/api";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
 import ROUTES from "@/lib/types/routes";
+import { createListingDetailsMap } from "@/lib/utils/listingUtils";
 
 import { Button } from "../ui/button";
 
@@ -76,11 +77,7 @@ const UpvotedGrid = ({ page, setPage }: UpvotedGridProps) => {
       return;
     }
 
-    const detailsMap: Record<string, ListingDetails> = {};
-    data.listings.forEach((listing: ListingDetails) => {
-      detailsMap[listing.id] = listing;
-    });
-    setListingDetails(detailsMap);
+    setListingDetails(createListingDetailsMap(data.listings));
   };
 
   const prevButton = page > 1;
diff --git a/frontend/src/components/nav/NavButton.tsx b/frontend/src/components/nav/NavButton.tsx
new file mode 100644
index 00000000..b7a8a9a0
--- /dev/null
+++ b/frontend/src/components/nav/NavButton.tsx
@@ -0,0 +1,50 @@
+import { Link } from "react-router-dom";
+
+import { Button } from "@/components/ui/button";
+
+interface NavButtonProps {
+  to: string;
+  currentPath: string;
+  children: React.ReactNode;
+  isExternal?: boolean;
+}
+
+export const NavButton = ({
+  to,
+  currentPath,
+  children,
+  isExternal = false,
+}: NavButtonProps) => {
+  const isActive = currentPath.startsWith(to);
+
+  if (isExternal) {
+    return (
+      <Button
+        asChild
+        variant="outline"
+        className="px-2 xl:px-3 py-2 text-sm tracking-wide xl:tracking-widest text-gray-1"
+      >
+        <a
+          href={to}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-2"
+        >
+          {children}
+        </a>
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      asChild
+      variant={isActive ? "ghost" : "outline"}
+      className={`px-3 py-2 text-gray-1 ${
+        isActive ? "underline underline-offset-4 decoration-2" : ""
+      }`}
+    >
+      <Link to={to}>{children}</Link>
+    </Button>
+  );
+};
diff --git a/frontend/src/components/nav/Navbar.tsx b/frontend/src/components/nav/Navbar.tsx
index 71b52a57..3fc63eee 100644
--- a/frontend/src/components/nav/Navbar.tsx
+++ b/frontend/src/components/nav/Navbar.tsx
@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { FaExternalLinkAlt } from "react-icons/fa";
 import { FaBars } from "react-icons/fa6";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 
@@ -10,6 +9,8 @@ import { Button } from "@/components/ui/button";
 import { useAuthentication } from "@/hooks/useAuth";
 import ROUTES from "@/lib/types/routes";
 
+import { NavButton } from "./NavButton";
+
 const Navbar = () => {
   const { isAuthenticated } = useAuthentication();
   const [showSidebar, setShowSidebar] = useState<boolean>(false);
@@ -57,8 +58,24 @@ const Navbar = () => {
                     onClick={() =>
                       handleFeaturedClick(listing.username, listing.slug)
                     }
-                    variant="outline"
-                    className="px-2 xl:px-3 py-2 text-sm tracking-widest text-gray-1"
+                    variant={
+                      location.pathname ===
+                      ROUTES.BOT.buildPath({
+                        username: listing.username,
+                        slug: listing.slug || "",
+                      })
+                        ? "ghost"
+                        : "outline"
+                    }
+                    className={`px-2 xl:px-3 py-2 text-sm tracking-widest text-gray-1 ${
+                      location.pathname ===
+                      ROUTES.BOT.buildPath({
+                        username: listing.username,
+                        slug: listing.slug || "",
+                      })
+                        ? "underline underline-offset-4 decoration-2"
+                        : ""
+                    }`}
                   >
                     {listing.name}
                   </Button>
@@ -66,72 +83,55 @@ const Navbar = () => {
               </div>
               {navItems.map((item) =>
                 item.isExternal ? (
-                  <Button
-                    key={item.name}
-                    asChild
-                    variant="outline"
-                    className="px-2 xl:px-3 py-2 text-sm tracking-wide xl:tracking-widest text-gray-1"
+                  <NavButton
+                    key={item.path}
+                    to={item.path}
+                    currentPath={location.pathname}
+                    isExternal
                   >
-                    <a
-                      href={item.path}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center gap-2"
-                    >
-                      {item.name}
-                      <FaExternalLinkAlt className="h-3 w-3 text-gray-1" />
-                    </a>
-                  </Button>
+                    {item.name}
+                  </NavButton>
                 ) : (
-                  <Button
-                    key={item.name}
-                    asChild
-                    variant={
-                      location.pathname === item.path ? "default" : "outline"
-                    }
-                    className="px-2 xl:px-3 py-2 text-sm tracking-widest"
+                  <NavButton
+                    key={item.path}
+                    to={item.path}
+                    currentPath={location.pathname}
                   >
-                    <Link to={item.path}>
-                      <div className="flex items-center gap-2">{item.name}</div>
-                    </Link>
-                  </Button>
+                    {item.name}
+                  </NavButton>
                 ),
               )}
             </div>
             <div className="flex items-center space-x-4 text-gray-1 p-2 ml-4 text-sm tracking-widest">
               {isAuthenticated ? (
                 <>
-                  <Button
-                    asChild
-                    variant="outline"
-                    className="px-3 py-2 text-gray-1"
+                  <NavButton
+                    to={ROUTES.ACCOUNT.path}
+                    currentPath={location.pathname}
                   >
-                    <Link to={ROUTES.ACCOUNT.path}>Account</Link>
-                  </Button>
-                  <Button
-                    asChild
-                    variant="outline"
-                    className="px-3 py-2 text-gray-1"
+                    Account
+                  </NavButton>
+                  <NavButton
+                    to={ROUTES.LOGOUT.path}
+                    currentPath={location.pathname}
                   >
-                    <Link to={ROUTES.LOGOUT.path}>Logout</Link>
-                  </Button>
+                    Logout
+                  </NavButton>
                 </>
               ) : (
                 <>
-                  <Button
-                    asChild
-                    variant="outline"
-                    className="px-3 py-2 text-gray-1"
+                  <NavButton
+                    to={ROUTES.LOGIN.path}
+                    currentPath={location.pathname}
                   >
-                    <Link to={ROUTES.LOGIN.path}>Log In</Link>
-                  </Button>
-                  <Button
-                    asChild
-                    variant="outline"
-                    className="px-3 py-2 text-gray-1"
+                    Log In
+                  </NavButton>
+                  <NavButton
+                    to={ROUTES.SIGNUP.path}
+                    currentPath={location.pathname}
                   >
-                    <Link to={ROUTES.SIGNUP.path}>Sign Up</Link>
-                  </Button>
+                    Sign Up
+                  </NavButton>
                 </>
               )}
             </div>
diff --git a/frontend/src/components/nav/Sidebar.tsx b/frontend/src/components/nav/Sidebar.tsx
index 739b9262..80ef79e4 100644
--- a/frontend/src/components/nav/Sidebar.tsx
+++ b/frontend/src/components/nav/Sidebar.tsx
@@ -28,7 +28,7 @@ const SidebarItem = ({
   <li>
     <button
       onClick={onClick}
-      className="w-full flex items-center py-2 px-3 text-xl text-gray-1 hover:bg-gray-1 hover:text-primary-9 rounded-md"
+      className="w-full flex items-center py-2 px-3 text-xl text-gray-1 hover:bg-gray-11 hover:text-primary-9 rounded-md"
     >
       {icon && <span className="mr-2">{icon}</span>}
       <span className="flex items-center gap-2">
diff --git a/frontend/src/lib/utils/listingUtils.ts b/frontend/src/lib/utils/listingUtils.ts
new file mode 100644
index 00000000..7913a0e3
--- /dev/null
+++ b/frontend/src/lib/utils/listingUtils.ts
@@ -0,0 +1,25 @@
+import { paths } from "@/gen/api";
+
+type ListingDetails =
+  paths["/listings/batch"]["get"]["responses"][200]["content"]["application/json"]["listings"][number];
+
+export const createListingDetailsMap = (listings: ListingDetails[]) => {
+  const detailsMap: Record<string, ListingDetails> = {};
+
+  listings.forEach((listing) => {
+    const firstImageArtifact = listing.artifacts?.find(
+      (artifact) => artifact.artifact_type === "image",
+    );
+
+    if (firstImageArtifact) {
+      listing.artifacts = [
+        firstImageArtifact,
+        ...listing.artifacts.filter((a) => a !== firstImageArtifact),
+      ];
+    }
+
+    detailsMap[listing.id] = listing;
+  });
+
+  return detailsMap;
+};