diff --git a/app/components/ImageComment.tsx b/app/components/ImageComment.tsx
index 92c0fd6..64879db 100644
--- a/app/components/ImageComment.tsx
+++ b/app/components/ImageComment.tsx
@@ -1,12 +1,11 @@
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
-import { Heart, Trash2 } from "lucide-react";
+import { Heart, MessageCircle, Trash2 } from "lucide-react";
 import { Link, useFetcher } from "@remix-run/react";
 import { useLoggedInUser } from "~/hooks";
 import React from "react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
-import { AvatarImage } from "@radix-ui/react-avatar";
 
 interface CommentUser {
   id: string;
@@ -117,19 +116,25 @@ export const ImageComment = ({
               variant="ghost"
               size="icon"
               className={cn(
-                "h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity",
-                isLiked && "text-red-500 opacity-100"
+                "h-8 w-8 group-hover:opacity-100 transition-opacity",
+                isLiked
+                  ? "text-red-500 opacity-100"
+                  : "hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-500 rounded-full"
               )}
               onClick={handleLikeClick}
               disabled={isLoading || !loggedInUser}
             >
-              <Heart className={cn("h-4 w-4", isLiked && "fill-current")} />
+              {isLiked ? (
+                <Heart className="h-4 w-4 fill-current" />
+              ) : (
+                <Heart className="h-4 w-4" strokeWidth={1.5} />
+              )}
             </Button>
             {isCommentOwner && (
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                className="h-8 w-8 group-hover:opacity-100 transition-opacity text-zinc-500 rounded-full"
                 onClick={handleDeleteClick}
                 disabled={isDeleting}
               >
diff --git a/app/pages/ExploreImageDetailsPage.tsx b/app/pages/ExploreImageDetailsPage.tsx
index ee6e967..a6bb886 100644
--- a/app/pages/ExploreImageDetailsPage.tsx
+++ b/app/pages/ExploreImageDetailsPage.tsx
@@ -14,6 +14,11 @@ import { CommentForm } from "~/components/CommentForm";
 import { ImageComment } from "~/components/ImageComment";
 import { AddImageToCollectionButton } from "~/components/AddImageToCollectionButton";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 
 interface ExploreImageDetailsPageProps {
   onClose: () => void;
@@ -86,20 +91,56 @@ const ExploreImageDetailsPageAccessor = () => {
   const userData = useLoggedInUser();
   const isUserLoggedIn = Boolean(userData);
 
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 768) {
+        setIsPopoverOpen(false);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   if (!imageData) return null;
 
   return (
     <>
-      <div className="flex h-full">
-        {/* Left side - Image */}
-        <div className="flex-1 bg-black">
-          <div className="h-full flex items-center justify-center">
+      {/* Mobile header - hidden on desktop */}
+      <div className="md:hidden shrink-0 py-2 px-4 border-b border-zinc-200 dark:border-zinc-800 flex items-center justify-between bg-white dark:bg-zinc-900 sticky top-0 z-10">
+        <div className="flex items-center gap-2">
+          <Avatar className="h-6 w-6">
+            <AvatarImage
+              src={imageUserData.image}
+              alt={imageUserData.username}
+            />
+            <AvatarFallback>
+              {imageUserData?.username.charAt(0) || ""}
+            </AvatarFallback>
+          </Avatar>
+          <Link
+            to={`/profile/${imageUserData?.id}`}
+            className="font-semibold text-sm hover:underline"
+            prefetch="intent"
+          >
+            {imageUserData?.username}
+          </Link>
+          {/* TODO: Maybe add tooltip or something here for user to see image data? */}
+        </div>
+      </div>
+
+      <div className="flex md:flex-row flex-col h-full">
+        {/* Image section - Mobile optimized, desktop unchanged */}
+        <div className="md:flex-1 md:bg-black">
+          <div className="md:h-full md:flex md:items-center md:justify-center">
             <img
               loading="lazy"
               decoding="async"
               src={imageData.url}
               alt={imageData.prompt || "Generated Image"}
-              className="max-h-[90vh] w-auto object-contain"
+              className="w-full h-auto object-contain md:max-h-[90vh] md:w-auto"
               onError={(e) => {
                 e.currentTarget.src = fallbackImageSource;
               }}
@@ -107,13 +148,13 @@ const ExploreImageDetailsPageAccessor = () => {
           </div>
         </div>
 
-        {/* Right side - Details */}
-        <div className="w-[420px] flex flex-col h-[90vh] border-l border-zinc-200 dark:border-zinc-800">
-          {/* Header */}
-          <div className="shrink-0 p-4 border-b border-zinc-200 dark:border-zinc-800">
+        {/* Details section */}
+        <div className="md:w-[420px] w-full flex flex-col md:h-[90vh] h-[calc(100vh-100vw)] border-l border-zinc-200 dark:border-zinc-800">
+          {/* Desktop header - hidden on mobile */}
+          <div className="hidden md:block shrink-0 p-4 border-b border-zinc-200 dark:border-zinc-800">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-3">
-                <Avatar className="h-8 w-8">
+                <Avatar className="h-6 w-6">
                   <AvatarImage
                     src={imageUserData.image}
                     alt={imageUserData.username}
@@ -122,122 +163,212 @@ const ExploreImageDetailsPageAccessor = () => {
                     {imageUserData?.username.charAt(0) || ""}
                   </AvatarFallback>
                 </Avatar>
-                <div className="flex flex-col">
-                  <Link
-                    to={`/profile/${imageUserData?.id}`}
-                    className="font-semibold text-sm hover:underline"
-                    prefetch="intent"
-                  >
-                    {imageUserData?.username}
-                  </Link>
-                </div>
+                <Link
+                  to={`/profile/${imageUserData?.id}`}
+                  className="font-semibold text-sm hover:underline"
+                  prefetch="intent"
+                >
+                  {imageUserData?.username}
+                </Link>
               </div>
             </div>
           </div>
 
-          {/* Tabs Section */}
-          <Tabs defaultValue="comments" className="flex-1 flex flex-col mt-2">
-            <TabsList className="grid w-full grid-cols-2 p-1">
-              <TabsTrigger value="comments" className="flex items-center gap-2">
-                <MessageCircle className="h-4 w-4" />
-                Comments
-              </TabsTrigger>
-              <TabsTrigger value="info" className="flex items-center gap-2">
-                <Info className="h-4 w-4" />
-                Info
-              </TabsTrigger>
-            </TabsList>
-
-            <TabsContent value="comments" className="flex-1 overflow-y-auto">
-              <div className="p-4 space-y-4">
-                {imageData.comments && imageData.comments.length > 0 ? (
-                  imageData.comments.map((comment) => (
-                    <ImageComment
-                      key={comment.id}
-                      id={comment.id}
-                      message={comment.message}
-                      createdAt={comment.createdAt}
-                      user={comment.user}
-                      likes={comment.likes}
-                    />
-                  ))
-                ) : (
-                  <p className="text-center text-sm text-zinc-500 py-8">
-                    No comments yet.
-                  </p>
-                )}
+          {/* Action buttons - Mobile only */}
+          <div className="shrink-0 p-4 border-b border-zinc-200 dark:border-zinc-800 md:hidden">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <LikeImageButton imageData={imageData} />
               </div>
-            </TabsContent>
+              <div className="flex items-center gap-2">
+                <p className="text-xs text-zinc-500">
+                  {convertUtcDateToLocalDateString(imageData.createdAt!)}
+                </p>
+                <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <button className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-full transition-colors">
+                      <Info className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    side="bottom"
+                    align="end"
+                    className="max-w-[280px] p-3 space-y-2 z-[2000] w-screen sm:w-auto mx-4 sm:mx-0 bg-zinc-800"
+                  >
+                    <p>Image Details</p>
+                    {imageData.setId && (
+                      <div className="space-y-1">
+                        <p className="text-xs">
+                          <Link
+                            to={`/sets/${imageData.setId}`}
+                            className="ml-1 text-blue-500 hover:text-blue-600 hover:underline"
+                            prefetch="intent"
+                          >
+                            View Set
+                          </Link>
+                        </p>
+                      </div>
+                    )}
+                    <div className="space-y-1">
+                      <p className="text-xs">
+                        <span className="font-semibold">Model:</span>{" "}
+                        <span className="italic">{imageData.model}</span>
+                      </p>
+                    </div>
+                    {imageData.stylePreset && (
+                      <div className="space-y-1">
+                        <p className="text-xs">
+                          <span className="font-semibold">Style:</span>{" "}
+                          <span className="italic">
+                            {imageData.stylePreset}
+                          </span>
+                        </p>
+                      </div>
+                    )}
+                    <div className="space-y-1">
+                      <p className="text-xs">
+                        <span className="font-semibold">Prompt:</span>{" "}
+                        <span className="italic">{imageData.prompt}</span>
+                      </p>
+                      {/* <CopyToClipboardButton
+                        stringToCopy={imageData.prompt || ""}
+                      /> */}
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+          </div>
 
-            <TabsContent value="info" className="flex-1 overflow-y-auto">
-              <div className="p-4 space-y-4">
-                {imageData.setId && (
-                  <div className="space-y-1">
-                    <h4 className="font-semibold">Set</h4>
-                    <Link
-                      to={`/sets/${imageData.setId}`}
-                      className="text-sm text-blue-500 hover:text-blue-600 hover:underline"
-                      prefetch="intent"
-                    >
-                      View Set
-                    </Link>
+          {/* Tabs Section - Desktop only */}
+          <div className="hidden md:flex md:flex-col flex-1 overflow-y-auto">
+            <Tabs defaultValue="comments" className="flex flex-col flex-1">
+              <TabsList className="shrink-0 grid w-full grid-cols-2 p-1">
+                <TabsTrigger
+                  value="comments"
+                  className="flex items-center gap-2"
+                >
+                  <MessageCircle className="h-4 w-4" />
+                  Comments
+                </TabsTrigger>
+                <TabsTrigger value="info" className="flex items-center gap-2">
+                  <Info className="h-4 w-4" />
+                  Info
+                </TabsTrigger>
+              </TabsList>
+
+              <div className="flex-1 min-h-0">
+                <TabsContent
+                  value="comments"
+                  className="h-full overflow-y-auto"
+                >
+                  <div className="p-4 space-y-4">
+                    {imageData.comments && imageData.comments.length > 0 ? (
+                      imageData.comments.map((comment) => (
+                        <ImageComment
+                          key={comment.id}
+                          id={comment.id}
+                          message={comment.message}
+                          createdAt={comment.createdAt}
+                          user={comment.user}
+                          likes={comment.likes}
+                        />
+                      ))
+                    ) : (
+                      <p className="text-center text-sm text-zinc-500 py-8">
+                        No comments yet.
+                      </p>
+                    )}
                   </div>
-                )}
+                </TabsContent>
 
-                <div className="space-y-1">
-                  <h4 className="font-semibold">Engine Model</h4>
-                  <p className="italic text-sm">{imageData.model}</p>
-                </div>
+                <TabsContent value="info" className="h-full overflow-y-auto">
+                  <div className="p-4 space-y-4">
+                    {imageData.setId && (
+                      <div className="space-y-1">
+                        <h4 className="font-semibold">Set</h4>
+                        <Link
+                          to={`/sets/${imageData.setId}`}
+                          className="text-sm text-blue-500 hover:text-blue-600 hover:underline"
+                          prefetch="intent"
+                        >
+                          View Set
+                        </Link>
+                      </div>
+                    )}
 
-                <div className="space-y-1">
-                  <h4 className="font-semibold">Style Preset</h4>
-                  {imageData.stylePreset ? (
-                    <p className="italic text-sm">{imageData.stylePreset}</p>
-                  ) : (
-                    <p className="italic text-sm text-zinc-500">none</p>
-                  )}
-                </div>
+                    <div className="space-y-1">
+                      <h4 className="font-semibold">Engine Model</h4>
+                      <p className="italic text-sm">{imageData.model}</p>
+                    </div>
 
-                <div className="space-y-1">
-                  <h4 className="font-semibold">Prompt</h4>
-                  <div className="flex items-start gap-2">
-                    <p className="italic text-sm">{imageData.prompt}</p>
-                    <CopyToClipboardButton
-                      stringToCopy={imageData.prompt || ""}
-                    />
-                  </div>
-                </div>
-              </div>
-            </TabsContent>
-          </Tabs>
+                    <div className="space-y-1">
+                      <h4 className="font-semibold">Style Preset</h4>
+                      {imageData.stylePreset ? (
+                        <p className="italic text-sm">
+                          {imageData.stylePreset}
+                        </p>
+                      ) : (
+                        <p className="italic text-sm text-zinc-500">none</p>
+                      )}
+                    </div>
 
-          {/* Actions Bar - Fixed at bottom */}
-          <div className="shrink-0 border-t border-zinc-200 dark:border-zinc-800">
-            <div className="p-4">
-              <div className="flex items-center justify-between mb-1">
-                <div className="flex items-center gap-4">
-                  <LikeImageButton imageData={imageData} />
-                </div>
-                {/* <AddImageToCollectionButton
-                  imageId={imageData.id}
-                  disabled={!isUserLoggedIn}
-                  initialCollections={imageData.collections || []}
-                  isInitiallySaved={imageData.savedToCollection}
-                /> */}
+                    <div className="space-y-1">
+                      <h4 className="font-semibold">Prompt</h4>
+                      <div className="flex items-start gap-2">
+                        <p className="italic text-sm">{imageData.prompt}</p>
+                        {/* <CopyToClipboardButton
+                          stringToCopy={imageData.prompt || ""}
+                        /> */}
+                      </div>
+                    </div>
+                  </div>
+                </TabsContent>
               </div>
+            </Tabs>
+          </div>
 
-              <div className="mb-4 pb-3 border-b border-zinc-200 dark:border-zinc-800">
-                <p className="text-xs text-zinc-500">
-                  {convertUtcDateToLocalDateString(imageData.createdAt!)}
+          {/* Comments section - Improved mobile scrolling */}
+          <div className="flex-1 overflow-y-auto min-h-0 md:hidden">
+            <div className="p-4 space-y-4 pb-32 md:pb-4 mb-8">
+              {imageData.comments && imageData.comments.length > 0 ? (
+                imageData.comments.map((comment) => (
+                  <ImageComment
+                    key={comment.id}
+                    id={comment.id}
+                    message={comment.message}
+                    createdAt={comment.createdAt}
+                    user={comment.user}
+                    likes={comment.likes}
+                  />
+                ))
+              ) : (
+                <p className="text-center text-sm text-zinc-500 py-8">
+                  No comments yet.
                 </p>
-              </div>
-
-              {/* Comment Input - Now separated with better contrast */}
-              {isUserLoggedIn && (
-                <CommentForm imageId={imageData.id as string} />
               )}
             </div>
           </div>
+
+          {/* Action buttons - Desktop only */}
+          <div className="shrink-0 p-4 border-b border-zinc-200 dark:border-zinc-800 hidden md:block">
+            <div className="flex items-center justify-between">
+              <LikeImageButton imageData={imageData} />
+              <p className="text-xs text-zinc-500">
+                {convertUtcDateToLocalDateString(imageData.createdAt!)}
+              </p>
+            </div>
+          </div>
+          {/* Comment input section */}
+          <div className="shrink-0 border-t border-zinc-200 dark:border-zinc-800 p-4 md:relative fixed bottom-0 left-0 right-0 bg-white dark:bg-zinc-900">
+            {isUserLoggedIn ? (
+              <CommentForm imageId={imageData.id as string} />
+            ) : (
+              <p className="text-center text-sm text-zinc-500">
+                Log in to comment
+              </p>
+            )}
+          </div>
         </div>
       </div>
     </>
@@ -271,7 +402,7 @@ const ExploreImageDetailsPage = ({ onClose }: ExploreImageDetailsPageProps) => {
         >
           <Dialog open={true} onOpenChange={onClose}>
             <DialogContent
-              className="max-w-[90%] h-[90vh] p-0 gap-0 dark:bg-zinc-900 overflow-hidden z-[100] [&>button]:absolute [&>button]:right-4 [&>button]:top-4 [&>button]:z-10 [&>button_span]:hidden"
+              className="w-full md:max-w-[90%] md:h-[90vh] h-[100vh] p-0 gap-0 dark:bg-zinc-900 overflow-hidden z-[100] [&>button]:absolute [&>button]:right-4 [&>button]:top-4 [&>button]:z-10 [&>button_span]:hidden"
               onInteractOutside={(e) => e.preventDefault()}
             >
               <VisuallyHidden asChild>