diff --git a/ui/v2.5/src/components/Galleries/GalleryCard.tsx b/ui/v2.5/src/components/Galleries/GalleryCard.tsx
index 01b21bcc744..1a4b5ff90a5 100644
--- a/ui/v2.5/src/components/Galleries/GalleryCard.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryCard.tsx
@@ -27,6 +27,13 @@ export const GalleryPreview: React.FC<IGalleryPreviewProps> = ({
   gallery,
   onScrubberClick,
 }) => {
+  const [isPortrait, setIsPortrait] = React.useState(false);
+
+  function identifyPortaitImage(e: React.UIEvent<HTMLImageElement>) {
+    const img = e.target as HTMLImageElement;
+    setIsPortrait(img.width < img.height);
+  }
+
   const [imgSrc, setImgSrc] = useState<string | undefined>(
     gallery.paths.cover ?? undefined
   );
@@ -36,9 +43,10 @@ export const GalleryPreview: React.FC<IGalleryPreviewProps> = ({
       {!!imgSrc && (
         <img
           loading="lazy"
-          className="gallery-card-image"
+          className={`gallery-card-image ${isPortrait ? "portrait-image" : ""}`}
           alt={gallery.title ?? ""}
           src={imgSrc}
+          onLoad={identifyPortaitImage}
         />
       )}
       {gallery.image_count > 0 && (
@@ -60,6 +68,7 @@ interface IProps {
   selecting?: boolean;
   selected?: boolean | undefined;
   zoomIndex?: number;
+  titleOnImage?: boolean;
   onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
 }
 
@@ -231,6 +240,7 @@ export const GalleryCard: React.FC<IProps> = (props) => {
       selected={props.selected}
       selecting={props.selecting}
       onSelectedChanged={props.onSelectedChanged}
+      titleOnImage={props.titleOnImage}
     />
   );
 };
diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx
index 7dc2a17b6ac..e88ba72e3ff 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx
@@ -43,6 +43,7 @@ import cx from "classnames";
 import { useRatingKeybinds } from "src/hooks/keybinds";
 import { ConfigurationContext } from "src/hooks/Config";
 import { TruncatedText } from "src/components/Shared/TruncatedText";
+import ScreenUtils from "src/utils/screen";
 
 interface IProps {
   gallery: GQL.GalleryDataFragment;
@@ -59,9 +60,11 @@ export const GalleryPage: React.FC<IProps> = ({ gallery, add }) => {
   const Toast = useToast();
   const intl = useIntl();
   const { configuration } = useContext(ConfigurationContext);
+  const uiConfig = configuration?.ui;
+  const enableBackgroundImage = uiConfig?.enableGalleryBackgroundImage ?? false;
   const showLightbox = useGalleryLightbox(gallery.id, gallery.chapters);
 
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(ScreenUtils.isSmallScreen());
 
   const [activeTabKey, setActiveTabKey] = useState("gallery-details-panel");
 
@@ -118,6 +121,30 @@ export const GalleryPage: React.FC<IProps> = ({ gallery, add }) => {
     return collapsed ? faChevronRight : faChevronLeft;
   }
 
+  function maybeRenderHeaderBackgroundImage() {
+    if (enableBackgroundImage && gallery != null && gallery.studio != null) {
+      let image = gallery.studio.image_path;
+      if (image) {
+        const imageURL = new URL(image);
+        let isDefaultImage = imageURL.searchParams.get("default");
+        if (!isDefaultImage) {
+          return (
+            <div className="background-image-container">
+              <picture>
+                <source src={image} />
+                <img
+                  className="background-image"
+                  src={image}
+                  alt={`${gallery.studio.name} background`}
+                />
+              </picture>
+            </div>
+          );
+        }
+      }
+    }
+  }
+
   async function onRescan() {
     if (!gallery || !path) {
       return;
@@ -380,63 +407,74 @@ export const GalleryPage: React.FC<IProps> = ({ gallery, add }) => {
   const title = galleryTitle(gallery);
 
   return (
-    <div className="row">
+    <div id="gallery-page" className="row">
       <Helmet>
         <title>{title}</title>
       </Helmet>
       {maybeRenderDeleteDialog()}
-      <div className={`gallery-tabs ${collapsed ? "collapsed" : ""}`}>
-        <div>
-          <div className="gallery-header-container">
-            {gallery.studio && (
-              <h1 className="text-center gallery-studio-image">
-                <Link to={`/studios/${gallery.studio.id}`}>
-                  <img
-                    src={gallery.studio.image_path ?? ""}
-                    alt={`${gallery.studio.name} logo`}
-                    className="studio-logo"
+      <div
+        className={`gallery-tabs order-xl-first order-last ${
+          collapsed ? "collapsed" : ""
+        }`}
+      >
+        <div className="detail-header">
+          {maybeRenderHeaderBackgroundImage()}
+          <div className="detail-container">
+            <div className="gallery-header-container">
+              {gallery.studio && (
+                <>
+                  <h1 className="text-center gallery-studio-image">
+                    <Link to={`/studios/${gallery.studio.id}`}>
+                      <img
+                        src={gallery.studio.image_path ?? ""}
+                        alt={`${gallery.studio.name} logo`}
+                        className="studio-logo"
+                      />
+                    </Link>
+                  </h1>
+                </>
+              )}
+              <h3
+                className={cx("gallery-header", {
+                  "no-studio": !gallery.studio,
+                })}
+              >
+                <TruncatedText lineCount={2} text={title} />
+              </h3>
+            </div>
+
+            <div className="gallery-subheader">
+              {!!gallery.date && (
+                <span className="date" data-value={gallery.date}>
+                  <FormattedDate
+                    value={gallery.date}
+                    format="long"
+                    timeZone="utc"
                   />
-                </Link>
-              </h1>
-            )}
-            <h3
-              className={cx("gallery-header", { "no-studio": !gallery.studio })}
-            >
-              <TruncatedText lineCount={2} text={title} />
-            </h3>
-          </div>
-
-          <div className="gallery-subheader">
-            {!!gallery.date && (
-              <span className="date" data-value={gallery.date}>
-                <FormattedDate
-                  value={gallery.date}
-                  format="long"
-                  timeZone="utc"
+                </span>
+              )}
+            </div>
+
+            <div className="gallery-toolbar">
+              <span className="gallery-toolbar-group">
+                <RatingSystem
+                  value={gallery.rating100}
+                  onSetRating={setRating}
+                  clickToRate
+                  withoutContext
                 />
               </span>
-            )}
-          </div>
-
-          <div className="gallery-toolbar">
-            <span className="gallery-toolbar-group">
-              <RatingSystem
-                value={gallery.rating100}
-                onSetRating={setRating}
-                clickToRate
-                withoutContext
-              />
-            </span>
-            <span className="gallery-toolbar-group">
-              <span>
-                <OrganizedButton
-                  loading={organizedLoading}
-                  organized={gallery.organized}
-                  onClick={onOrganizedClick}
-                />
+              <span className="gallery-toolbar-group">
+                <span>
+                  <OrganizedButton
+                    loading={organizedLoading}
+                    organized={gallery.organized}
+                    onClick={onOrganizedClick}
+                  />
+                </span>
+                <span>{renderOperations()}</span>
               </span>
-              <span>{renderOperations()}</span>
-            </span>
+            </div>
           </div>
         </div>
         {renderTabs()}
@@ -446,6 +484,11 @@ export const GalleryPage: React.FC<IProps> = ({ gallery, add }) => {
           <Icon className="fa-fw" icon={getCollapseButtonIcon()} />
         </Button>
       </div>
+      <div className="floating-gallery-divider">
+        <Button onClick={() => setCollapsed(!collapsed)}>
+          {collapsed ? "Show Details" : "Hide Details"}
+        </Button>
+      </div>
       <div className={`gallery-container ${collapsed ? "expanded" : ""}`}>
         {renderRightTabs()}
       </div>
diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryChaptersPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryChaptersPanel.tsx
index ea970b7ae88..a8bf60985a4 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryChaptersPanel.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryChaptersPanel.tsx
@@ -52,7 +52,7 @@ export const GalleryChapterPanel: React.FC<IGalleryChapterPanelProps> = ({
     );
 
   return (
-    <div>
+    <div id="gallery-chapter-panel">
       <Button onClick={() => onOpenEditor()}>
         <FormattedMessage id="actions.create_chapters" />
       </Button>
diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryDetailPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryDetailPanel.tsx
index 597a57b15e1..09553c757f5 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryDetailPanel.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryDetailPanel.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import TextUtils from "src/utils/text";
@@ -6,6 +6,11 @@ import { TagLink } from "src/components/Shared/TagLink";
 import { PerformerCard } from "src/components/Performers/PerformerCard";
 import { sortPerformers } from "src/core/performers";
 import { PhotographerLink } from "src/components/Shared/Link";
+import { useContainerDimensions } from "src/components/Shared/GridCard/GridCard";
+import {
+  DetailItem,
+  maybeRenderShowMoreLess,
+} from "src/components/Shared/DetailItem";
 
 interface IGalleryDetailProps {
   gallery: GQL.GalleryDataFragment;
@@ -16,40 +21,79 @@ export const GalleryDetailPanel: React.FC<IGalleryDetailProps> = ({
 }) => {
   const intl = useIntl();
 
-  function renderDetails() {
-    if (!gallery.details) return;
-    return (
+  const [collapsedDetails, setCollapsedDetails] = useState<boolean>(true);
+  const [collapsedPerformers, setCollapsedPerformers] = useState<boolean>(true);
+  const [collapsedTags, setCollapsedTags] = useState<boolean>(true);
+
+  const [detailsRef, { height: detailsHeight }] = useContainerDimensions();
+  const [perfRef, { height: perfHeight }] = useContainerDimensions();
+  const [tagRef, { height: tagHeight }] = useContainerDimensions();
+
+  const details = useMemo(() => {
+    const limit = 160;
+    return gallery.details?.length ? (
       <>
-        <h6>
-          <FormattedMessage id="details" />:{" "}
-        </h6>
-        <p className="pre">{gallery.details}</p>
+        <div
+          className={`details ${
+            collapsedDetails && detailsHeight >= limit
+              ? "collapsed-detail"
+              : "expanded-detail"
+          }`}
+        >
+          <p className="pre" ref={detailsRef}>
+            {gallery.details}
+          </p>
+        </div>
+        {maybeRenderShowMoreLess(
+          detailsHeight,
+          limit,
+          detailsRef,
+          setCollapsedDetails,
+          collapsedDetails
+        )}
       </>
-    );
-  }
+    ) : undefined;
+  }, [
+    gallery.details,
+    detailsRef,
+    detailsHeight,
+    setCollapsedDetails,
+    collapsedDetails,
+  ]);
 
-  function renderTags() {
+  const tags = useMemo(() => {
+    const limit = 160;
     if (gallery.tags.length === 0) return;
-    const tags = gallery.tags.map((tag) => (
-      <TagLink key={tag.id} tag={tag} linkType="gallery" />
+    const galleryTags = gallery.tags.map((tag) => (
+      <TagLink key={tag.id} tag={tag} />
     ));
     return (
       <>
-        <h6>
-          <FormattedMessage
-            id="countables.tags"
-            values={{ count: gallery.tags.length }}
-          />
-        </h6>
-        {tags}
+        <div
+          className={`gallery-tags ${
+            collapsedTags && tagHeight >= limit
+              ? "collapsed-detail"
+              : "expanded-detail"
+          }`}
+          ref={tagRef}
+        >
+          {galleryTags}
+        </div>
+        {maybeRenderShowMoreLess(
+          tagHeight,
+          limit,
+          tagRef,
+          setCollapsedTags,
+          collapsedTags
+        )}
       </>
     );
-  }
+  }, [gallery.tags, tagRef, tagHeight, setCollapsedTags, collapsedTags]);
 
-  function renderPerformers() {
-    if (gallery.performers.length === 0) return;
-    const performers = sortPerformers(gallery.performers);
-    const cards = performers.map((performer) => (
+  const performers = useMemo(() => {
+    const limit = 365;
+    const sorted = sortPerformers(gallery.performers);
+    const cards = sorted.map((performer) => (
       <PerformerCard
         key={performer.id}
         performer={performer}
@@ -59,55 +103,78 @@ export const GalleryDetailPanel: React.FC<IGalleryDetailProps> = ({
 
     return (
       <>
-        <h6>
-          <FormattedMessage
-            id="countables.performers"
-            values={{ count: gallery.performers.length }}
-          />
-        </h6>
-        <div className="row justify-content-center gallery-performers">
+        <div
+          className={`row justify-content-center gallery-performers ${
+            collapsedPerformers && perfHeight >= limit
+              ? "collapsed-detail"
+              : "expanded-detail"
+          }`}
+          ref={perfRef}
+        >
           {cards}
         </div>
+        {maybeRenderShowMoreLess(
+          perfHeight,
+          limit,
+          perfRef,
+          setCollapsedPerformers,
+          collapsedPerformers
+        )}
       </>
     );
-  }
+  }, [
+    gallery.performers,
+    gallery.date,
+    perfRef,
+    perfHeight,
+    collapsedPerformers,
+    setCollapsedPerformers,
+  ]);
 
   // filename should use entire row if there is no studio
   const galleryDetailsWidth = gallery.studio ? "col-9" : "col-12";
 
   return (
     <>
-      <div className="row">
+      <div id="gallery-details-panel" className="row">
         <div className={`${galleryDetailsWidth} col-12 gallery-details`}>
-          <h6>
-            <FormattedMessage id="created_at" />:{" "}
-            {TextUtils.formatDateTime(intl, gallery.created_at)}{" "}
-          </h6>
-          <h6>
-            <FormattedMessage id="updated_at" />:{" "}
-            {TextUtils.formatDateTime(intl, gallery.updated_at)}{" "}
-          </h6>
-          {gallery.code && (
-            <h6>
-              <FormattedMessage id="scene_code" />: {gallery.code}{" "}
-            </h6>
-          )}
-          {gallery.photographer && (
-            <h6>
-              <FormattedMessage id="photographer" />:{" "}
-              <PhotographerLink
-                photographer={gallery.photographer}
-                linkType="gallery"
-              />
-            </h6>
-          )}
-        </div>
-      </div>
-      <div className="row">
-        <div className="col-12">
-          {renderDetails()}
-          {renderTags()}
-          {renderPerformers()}
+          <div className="detail-group">
+            <DetailItem id="studio" value={gallery.studio?.name} fullWidth />
+            <DetailItem id="scene_code" value={gallery.code} fullWidth />
+            <DetailItem
+              id="director"
+              value={
+                gallery.photographer ? (
+                  <PhotographerLink
+                    photographer={gallery.photographer}
+                    linkType="gallery"
+                  />
+                ) : undefined
+              }
+              fullWidth
+            />
+            <DetailItem id="details" value={details} />
+            <DetailItem
+              id="tags"
+              heading={<FormattedMessage id="tags" />}
+              value={gallery.tags.length ? tags : undefined}
+            />
+            <DetailItem
+              id="performers"
+              heading={<FormattedMessage id="performers" />}
+              value={gallery.performers.length ? performers : undefined}
+            />
+            <DetailItem
+              id="created_at"
+              value={TextUtils.formatDateTime(intl, gallery.created_at)}
+              fullWidth
+            />
+            <DetailItem
+              id="updated_at"
+              value={TextUtils.formatDateTime(intl, gallery.updated_at)}
+              fullWidth
+            />
+          </div>
         </div>
       </div>
     </>
diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryFileInfoPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryFileInfoPanel.tsx
index 63fedd40078..587d1c10df5 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryFileInfoPanel.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryFileInfoPanel.tsx
@@ -145,12 +145,12 @@ export const GalleryFileInfoPanel: React.FC<IGalleryFileInfoPanelProps> = (
   }, [props.gallery, loading, Toast, deletingFile]);
 
   return (
-    <>
+    <div id="gallery-file-info-panel">
       <dl className="container gallery-file-info details-list">
         <URLsField id="urls" urls={props.gallery.urls} truncate />
       </dl>
 
       {filesPanel}
-    </>
+    </div>
   );
 };
diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryScenesPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryScenesPanel.tsx
index 32c4af63500..a9198238931 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryScenesPanel.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryScenesPanel.tsx
@@ -9,7 +9,7 @@ interface IGalleryScenesPanelProps {
 export const GalleryScenesPanel: React.FC<IGalleryScenesPanelProps> = ({
   scenes,
 }) => (
-  <div className="container gallery-scenes">
+  <div id="gallery-scenes-panel" className="container gallery-scenes">
     {scenes.map((scene) => (
       <SceneCard scene={scene} key={scene.id} />
     ))}
diff --git a/ui/v2.5/src/components/Galleries/GalleryPopover.tsx b/ui/v2.5/src/components/Galleries/GalleryPopover.tsx
new file mode 100644
index 00000000000..c8384304c9b
--- /dev/null
+++ b/ui/v2.5/src/components/Galleries/GalleryPopover.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import * as GQL from "src/core/generated-graphql";
+import { HoverPopover } from "../Shared/HoverPopover";
+import { GalleryCard } from "./GalleryCard";
+import { ConfigurationContext } from "../../hooks/Config";
+import { Placement } from "react-bootstrap/esm/Overlay";
+
+interface IGalleryPopoverCardProps {
+  gallery: GQL.SlimGalleryDataFragment;
+}
+
+export const GalleryPopoverCard: React.FC<IGalleryPopoverCardProps> = ({
+  gallery,
+}) => {
+  return (
+    <div className="tag-popover-card">
+      <GalleryCard gallery={gallery} zoomIndex={0} />
+    </div>
+  );
+};
+
+interface IGalleryPopoverProps {
+  gallery: GQL.SlimGalleryDataFragment;
+  hide?: boolean;
+  placement?: Placement;
+  target?: React.RefObject<HTMLElement>;
+}
+
+export const GalleryPopover: React.FC<IGalleryPopoverProps> = ({
+  gallery,
+  hide,
+  children,
+  placement = "top",
+  target,
+}) => {
+  const { configuration: config } = React.useContext(ConfigurationContext);
+
+  const showTagCardOnHover = config?.ui.showTagCardOnHover ?? true;
+
+  if (hide || !showTagCardOnHover) {
+    return <>{children}</>;
+  }
+
+  return (
+    <HoverPopover
+      target={target}
+      placement={placement}
+      enterDelay={500}
+      leaveDelay={100}
+      content={<GalleryPopoverCard gallery={gallery} />}
+    >
+      {children}
+    </HoverPopover>
+  );
+};
diff --git a/ui/v2.5/src/components/Galleries/styles.scss b/ui/v2.5/src/components/Galleries/styles.scss
index d2314955281..158a30da5b6 100644
--- a/ui/v2.5/src/components/Galleries/styles.scss
+++ b/ui/v2.5/src/components/Galleries/styles.scss
@@ -6,22 +6,8 @@
   }
 }
 
-@include media-breakpoint-only(lg) {
-  .gallery-header-container {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-
-    .gallery-header {
-      flex: 0 0 75%;
-      order: 1;
-    }
-
-    .gallery-studio-image {
-      flex: 0 0 25%;
-      order: 2;
-    }
-  }
+.floating-gallery-divider {
+  display: none;
 }
 
 .gallery-header {
@@ -115,24 +101,89 @@
   }
 }
 
-.gallery-tabs {
-  max-height: calc(100vh - 4rem);
+@media (max-width: 1200px) {
+  .row .gallery-tabs,
+  .row .gallery-container {
+    padding-left: 0;
+  }
 
-  overflow: auto;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
+  .gallery-container,
+  .gallery-tabs.collapsed {
+    display: none;
+  }
+
+  .gallery-container.expanded {
+    display: block;
+  }
+
+  .gallery-header-container {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+
+    .gallery-header {
+      flex: 0 0 75%;
+      order: 1;
+    }
+
+    .gallery-studio-image {
+      flex: 0 0 25%;
+      order: 2;
+    }
+  }
+
+  .gallery-tabs {
+    overflow: auto;
+    width: 100%;
+
+    .nav-tabs {
+      padding: 0 15px;
+    }
+  }
+
+  .gallery-tabs > .tab-content {
+    padding: 0 15px;
+  }
+
+  .gallery-tabs > div,
+  .row .gallery-container {
+    overflow-x: hidden;
+  }
+
+  /* stylelint-disable declaration-no-important */
+  .floating-gallery-divider {
+    bottom: 3rem;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);
+    display: unset !important;
+    position: absolute;
+    right: 3rem;
+    z-index: 100;
+  }
+  /* stylelint-enable declaration-no-important */
 }
 
 $galleryTabWidth: 450px;
 
 @media (min-width: 1200px) {
+  .floating-gallery-divider {
+    display: none;
+  }
+
   .gallery-tabs {
     flex: 0 0 $galleryTabWidth;
     max-width: $galleryTabWidth;
+    overflow: auto;
 
     &.collapsed {
       display: none;
     }
+
+    .tab-content {
+      flex: 1 1 auto;
+      min-height: 15rem;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
   }
 
   .gallery-divider {
@@ -166,6 +217,7 @@ $galleryTabWidth: 450px;
     height: calc(100vh - 4rem);
     max-width: calc(100% - #{$galleryTabWidth} - 15px);
     overflow: auto;
+    padding-left: 0;
 
     &.expanded {
       flex: 0 0 calc(100% - 15px);
@@ -176,25 +228,30 @@ $galleryTabWidth: 450px;
 
 .gallery-tabs,
 .gallery-container {
-  padding-left: 15px;
-  padding-right: 15px;
   position: relative;
   width: 100%;
 }
 
-@media (min-width: 1200px), (max-width: 575px) {
-  .gallery-performers {
-    .performer-card {
-      width: 15rem;
+.gallery-container {
+  padding-left: 15px;
+}
 
-      &-gallery {
-        height: 22.5rem;
-      }
+.gallery-container {
+  height: calc(100vh - 4rem);
+  overflow: auto;
+}
 
-      &-image {
-        height: 22.5rem;
-        width: 15rem;
-      }
+.gallery-performers {
+  .performer-card {
+    width: 13.5rem;
+
+    &-gallery {
+      height: 22.5rem;
+    }
+
+    .card-popovers,
+    hr {
+      display: none;
     }
   }
 }
diff --git a/ui/v2.5/src/components/Groups/GroupCard.tsx b/ui/v2.5/src/components/Groups/GroupCard.tsx
index 85fa9ed077e..c9b88024e89 100644
--- a/ui/v2.5/src/components/Groups/GroupCard.tsx
+++ b/ui/v2.5/src/components/Groups/GroupCard.tsx
@@ -42,6 +42,7 @@ interface IProps {
   selecting?: boolean;
   selected?: boolean;
   onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
+  titleOnImage?: boolean;
   fromGroupId?: string;
   onMove?: (srcIds: string[], targetId: string, after: boolean) => void;
 }
@@ -53,6 +54,7 @@ export const GroupCard: React.FC<IProps> = ({
   selecting,
   selected,
   onSelectedChanged,
+  titleOnImage,
   fromGroupId,
   onMove,
 }) => {
@@ -182,6 +184,7 @@ export const GroupCard: React.FC<IProps> = ({
       selecting={selecting}
       onSelectedChanged={onSelectedChanged}
       popovers={maybeRenderPopoverButtonGroup()}
+      titleOnImage={titleOnImage}
     />
   );
 };
diff --git a/ui/v2.5/src/components/Images/ImageDetails/Image.tsx b/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
index 0a77180ceaa..d78c19bff47 100644
--- a/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
+++ b/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
@@ -48,6 +48,8 @@ const ImagePage: React.FC<IProps> = ({ image }) => {
   const Toast = useToast();
   const intl = useIntl();
   const { configuration } = useContext(ConfigurationContext);
+  const uiConfig = configuration?.ui;
+  const enableBackgroundImage = uiConfig?.enableImageBackgroundImage ?? false;
 
   const [incrementO] = useImageIncrementO(image.id);
   const [decrementO] = useImageDecrementO(image.id);
@@ -73,6 +75,30 @@ const ImagePage: React.FC<IProps> = ({ image }) => {
     );
   }
 
+  function maybeRenderHeaderBackgroundImage() {
+    if (enableBackgroundImage && image != null && image.studio != null) {
+      let imageSrc = image.studio.image_path;
+      if (imageSrc) {
+        const imageURL = new URL(imageSrc);
+        let isDefaultImage = imageURL.searchParams.get("default");
+        if (!isDefaultImage) {
+          return (
+            <div className="background-image-container">
+              <picture>
+                <source src={imageSrc} />
+                <img
+                  className="background-image"
+                  src={imageSrc}
+                  alt={`${image.studio.name} background`}
+                />
+              </picture>
+            </div>
+          );
+        }
+      }
+    }
+  }
+
   async function onRescan() {
     if (!image || !image.visual_files.length) {
       return;
@@ -288,77 +314,84 @@ const ImagePage: React.FC<IProps> = ({ image }) => {
   }, [file?.width, file?.height]);
 
   return (
-    <div className="row">
+    <div id="image-page" className="row">
       <Helmet>
         <title>{title}</title>
       </Helmet>
 
       {maybeRenderDeleteDialog()}
       <div className="image-tabs order-xl-first order-last">
-        <div>
-          <div className="image-header-container">
-            {image.studio && (
-              <h1 className="text-center image-studio-image">
-                <Link to={`/studios/${image.studio.id}`}>
-                  <img
-                    src={image.studio.image_path ?? ""}
-                    alt={`${image.studio.name} logo`}
-                    className="studio-logo"
+        <div className="detail-header">
+          {maybeRenderHeaderBackgroundImage()}
+          <div className="detail-container">
+            <div className="image-header-container">
+              {image.studio && (
+                <>
+                  <h1 className="text-center image-studio-image">
+                    <Link to={`/studios/${image.studio.id}`}>
+                      <img
+                        src={image.studio.image_path ?? ""}
+                        alt={`${image.studio.name} logo`}
+                        className="studio-logo"
+                      />
+                    </Link>
+                  </h1>
+                </>
+              )}
+              <h3
+                className={cx("image-header", { "no-studio": !image.studio })}
+              >
+                <TruncatedText lineCount={2} text={title} />
+              </h3>
+            </div>
+
+            <div className="image-subheader">
+              <span className="date" data-value={image.date}>
+                {!!image.date && (
+                  <FormattedDate
+                    value={image.date}
+                    format="long"
+                    timeZone="utc"
                   />
-                </Link>
-              </h1>
-            )}
-            <h3 className={cx("image-header", { "no-studio": !image.studio })}>
-              <TruncatedText lineCount={2} text={title} />
-            </h3>
-          </div>
-
-          <div className="image-subheader">
-            <span className="date" data-value={image.date}>
-              {!!image.date && (
-                <FormattedDate
-                  value={image.date}
-                  format="long"
-                  timeZone="utc"
+                )}
+              </span>
+              {resolution ? (
+                <span className="resolution" data-value={resolution}>
+                  {resolution}
+                </span>
+              ) : undefined}
+            </div>
+
+            <div className="image-toolbar">
+              <span className="image-toolbar-group">
+                <RatingSystem
+                  value={image.rating100}
+                  onSetRating={setRating}
+                  clickToRate
+                  withoutContext
                 />
-              )}
-            </span>
-            {resolution ? (
-              <span className="resolution" data-value={resolution}>
-                {resolution}
               </span>
-            ) : undefined}
+              <span className="image-toolbar-group">
+                <span>
+                  <OCounterButton
+                    value={image.o_counter || 0}
+                    onIncrement={onIncrementClick}
+                    onDecrement={onDecrementClick}
+                    onReset={onResetClick}
+                  />
+                </span>
+                <span>
+                  <OrganizedButton
+                    loading={organizedLoading}
+                    organized={image.organized}
+                    onClick={onOrganizedClick}
+                  />
+                </span>
+                <span>{renderOperations()}</span>
+              </span>
+            </div>
           </div>
         </div>
-
-        <div className="image-toolbar">
-          <span className="image-toolbar-group">
-            <RatingSystem
-              value={image.rating100}
-              onSetRating={setRating}
-              clickToRate
-              withoutContext
-            />
-          </span>
-          <span className="image-toolbar-group">
-            <span>
-              <OCounterButton
-                value={image.o_counter || 0}
-                onIncrement={onIncrementClick}
-                onDecrement={onDecrementClick}
-                onReset={onResetClick}
-              />
-            </span>
-            <span>
-              <OrganizedButton
-                loading={organizedLoading}
-                organized={image.organized}
-                onClick={onOrganizedClick}
-              />
-            </span>
-            <span>{renderOperations()}</span>
-          </span>
-        </div>
         {renderTabs()}
       </div>
       <div className="image-container">
diff --git a/ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx b/ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx
index 65cce87de64..6b80adc6689 100644
--- a/ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx
+++ b/ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
 import * as GQL from "src/core/generated-graphql";
 import TextUtils from "src/utils/text";
 import { GalleryLink, TagLink } from "src/components/Shared/TagLink";
@@ -6,6 +6,11 @@ import { PerformerCard } from "src/components/Performers/PerformerCard";
 import { sortPerformers } from "src/core/performers";
 import { FormattedMessage, useIntl } from "react-intl";
 import { PhotographerLink } from "src/components/Shared/Link";
+import { useContainerDimensions } from "src/components/Shared/GridCard/GridCard";
+import {
+  DetailItem,
+  maybeRenderShowMoreLess,
+} from "src/components/Shared/DetailItem";
 interface IImageDetailProps {
   image: GQL.ImageDataFragment;
 }
@@ -13,40 +18,91 @@ interface IImageDetailProps {
 export const ImageDetailPanel: React.FC<IImageDetailProps> = (props) => {
   const intl = useIntl();
 
-  function renderDetails() {
-    if (!props.image.details) return;
+  const [collapsedDetails, setCollapsedDetails] = useState<boolean>(true);
+  const [collapsedPerformers, setCollapsedPerformers] = useState<boolean>(true);
+  const [collapsedTags, setCollapsedTags] = useState<boolean>(true);
+
+  const [detailsRef, { height: detailsHeight }] = useContainerDimensions();
+  const [perfRef, { height: perfHeight }] = useContainerDimensions();
+  const [tagRef, { height: tagHeight }] = useContainerDimensions();
+
+  const details = useMemo(() => {
+    const limit = 160;
+    return props.image.details?.length ? (
+      <>
+        <div
+          className={`details ${
+            collapsedDetails && detailsHeight >= limit
+              ? "collapsed-detail"
+              : "expanded-detail"
+          }`}
+        >
+          <p className="pre" ref={detailsRef}>
+            {props.image.details}
+          </p>
+        </div>
+        {maybeRenderShowMoreLess(
+          detailsHeight,
+          limit,
+          detailsRef,
+          setCollapsedDetails,
+          collapsedDetails
+        )}
+      </>
+    ) : undefined;
+  }, [
+    props.image.details,
+    detailsRef,
+    detailsHeight,
+    setCollapsedDetails,
+    collapsedDetails,
+  ]);
+
+  const tags = useMemo(() => {
+    const limit = 160;
+    if (props.image.tags.length === 0) return;
+    const imageTags = props.image.tags.map((tag) => (
+      <TagLink key={tag.id} tag={tag} />
+    ));
     return (
       <>
-        <h6>
-          <FormattedMessage id="details" />:{" "}
-        </h6>
-        <p className="pre">{props.image.details}</p>
+        <div
+          className={`image-tags ${
+            collapsedTags && tagHeight >= limit
+              ? "collapsed-detail"
+              : "expanded-detail"
+          }`}
+          ref={tagRef}
+        >
+          {imageTags}
+        </div>
+        {maybeRenderShowMoreLess(
+          tagHeight,
+          limit,
+          tagRef,
+          setCollapsedTags,
+          collapsedTags
+        )}
       </>
     );
-  }
+  }, [props.image.tags, tagRef, tagHeight, setCollapsedTags, collapsedTags]);
 
-  function renderTags() {
-    if (props.image.tags.length === 0) return;
-    const tags = props.image.tags.map((tag) => (
-      <TagLink key={tag.id} tag={tag} linkType="image" />
+  const galleries = useMemo(() => {
+    if (props.image.galleries.length === 0) return;
+    const imageGalleries = props.image.galleries.map((gallery) => (
+      <GalleryLink key={gallery.id} gallery={gallery} />
     ));
     return (
       <>
-        <h6>
-          <FormattedMessage
-            id="countables.tags"
-            values={{ count: props.image.tags.length }}
-          />
-        </h6>
-        {tags}
+        <div className={`image-galleries`}>{imageGalleries}</div>
       </>
     );
-  }
+  }, [props.image.galleries]);
 
-  function renderPerformers() {
-    if (props.image.performers.length === 0) return;
-    const performers = sortPerformers(props.image.performers);
-    const cards = performers.map((performer) => (
+  const performers = useMemo(() => {
+    const limit = 365;
+    const sorted = sortPerformers(props.image.performers);
+    const cards = sorted.map((performer) => (
       <PerformerCard
         key={performer.id}
         performer={performer}
@@ -56,36 +112,33 @@ export const ImageDetailPanel: React.FC<IImageDetailProps> = (props) => {
 
     return (
       <>
-        <h6>
-          <FormattedMessage
-            id="countables.performers"
-            values={{ count: props.image.performers.length }}
-          />
-        </h6>
-        <div className="row justify-content-center image-performers">
+        <div
+          className={`row justify-content-center image-performers ${
+            collapsedPerformers && perfHeight >= limit
+              ? "collapsed-detail"
+              : "expanded-detail"
+          }`}
+          ref={perfRef}
+        >
           {cards}
         </div>
+        {maybeRenderShowMoreLess(
+          perfHeight,
+          limit,
+          perfRef,
+          setCollapsedPerformers,
+          collapsedPerformers
+        )}
       </>
     );
-  }
-
-  function renderGalleries() {
-    if (props.image.galleries.length === 0) return;
-    const galleries = props.image.galleries.map((gallery) => (
-      <GalleryLink key={gallery.id} gallery={gallery} />
-    ));
-    return (
-      <>
-        <h6>
-          <FormattedMessage
-            id="countables.galleries"
-            values={{ count: props.image.galleries.length }}
-          />
-        </h6>
-        {galleries}
-      </>
-    );
-  }
+  }, [
+    props.image.performers,
+    props.image.date,
+    perfRef,
+    perfHeight,
+    collapsedPerformers,
+    setCollapsedPerformers,
+  ]);
 
   // filename should use entire row if there is no studio
   const imageDetailsWidth = props.image.studio ? "col-9" : "col-12";
@@ -94,41 +147,52 @@ export const ImageDetailPanel: React.FC<IImageDetailProps> = (props) => {
     <>
       <div className="row">
         <div className={`${imageDetailsWidth} col-12 image-details`}>
-          {renderGalleries()}
-          {
-            <h6>
-              {" "}
-              <FormattedMessage id="created_at" />:{" "}
-              {TextUtils.formatDateTime(intl, props.image.created_at)}{" "}
-            </h6>
-          }
-          {
-            <h6>
-              <FormattedMessage id="updated_at" />:{" "}
-              {TextUtils.formatDateTime(intl, props.image.updated_at)}{" "}
-            </h6>
-          }
-          {props.image.code && (
-            <h6>
-              <FormattedMessage id="scene_code" />: {props.image.code}{" "}
-            </h6>
-          )}
-          {props.image.photographer && (
-            <h6>
-              <FormattedMessage id="photographer" />:{" "}
-              <PhotographerLink
-                photographer={props.image.photographer}
-                linkType="image"
-              />
-            </h6>
-          )}
-        </div>
-      </div>
-      <div className="row">
-        <div className="col-12">
-          {renderDetails()}
-          {renderTags()}
-          {renderPerformers()}
+          <div className="detail-group">
+            <DetailItem
+              id="studio"
+              value={props.image.studio?.name}
+              fullWidth
+            />
+            <DetailItem id="scene_code" value={props.image.code} fullWidth />
+            <DetailItem
+              id="director"
+              value={
+                props.image.photographer ? (
+                  <PhotographerLink
+                    photographer={props.image.photographer}
+                    linkType="gallery"
+                  />
+                ) : undefined
+              }
+              fullWidth
+            />
+            <DetailItem id="details" value={details} />
+            <DetailItem
+              id="tags"
+              heading={<FormattedMessage id="tags" />}
+              value={props.image.tags.length ? tags : undefined}
+            />
+            <DetailItem
+              id="performers"
+              heading={<FormattedMessage id="performers" />}
+              value={props.image.performers.length ? performers : undefined}
+            />
+            <DetailItem
+              id="galleries"
+              heading={<FormattedMessage id="galleries" />}
+              value={props.image.galleries.length ? galleries : undefined}
+            />
+            <DetailItem
+              id="created_at"
+              value={TextUtils.formatDateTime(intl, props.image.created_at)}
+              fullWidth
+            />
+            <DetailItem
+              id="updated_at"
+              value={TextUtils.formatDateTime(intl, props.image.updated_at)}
+              fullWidth
+            />
+          </div>
         </div>
       </div>
     </>
diff --git a/ui/v2.5/src/components/Images/styles.scss b/ui/v2.5/src/components/Images/styles.scss
index 936947bc34e..459f5c114e1 100644
--- a/ui/v2.5/src/components/Images/styles.scss
+++ b/ui/v2.5/src/components/Images/styles.scss
@@ -137,12 +137,14 @@ $imageTabWidth: 450px;
 
 .image-tabs,
 .image-container {
-  padding-left: 15px;
-  padding-right: 15px;
   position: relative;
   width: 100%;
 }
 
+.image-container {
+  padding-left: 15px;
+}
+
 .image-container {
   display: flex;
 
@@ -153,20 +155,20 @@ $imageTabWidth: 450px;
   }
 }
 
-@media (min-width: 1200px) {
-  .image-container {
-    height: calc(100vh - 4rem);
+.image-performers {
+  .performer-card {
+    width: 13.5rem;
+
+    .card-popovers,
+    hr {
+      display: none;
+    }
   }
 }
-@media (min-width: 1200px), (max-width: 575px) {
-  .image-performers {
-    .performer-card {
-      width: 15rem;
 
-      &-image {
-        height: 22.5rem;
-      }
-    }
+@media (min-width: 1200px) {
+  .image-container {
+    height: calc(100vh - 4rem);
   }
 }
 
diff --git a/ui/v2.5/src/components/ScenePlayer/styles.scss b/ui/v2.5/src/components/ScenePlayer/styles.scss
index 1b4fc6b25fc..b33777b1257 100644
--- a/ui/v2.5/src/components/ScenePlayer/styles.scss
+++ b/ui/v2.5/src/components/ScenePlayer/styles.scss
@@ -398,11 +398,14 @@ $sceneTabWidth: 450px;
 
 .scene-tabs,
 .scene-player-container {
-  padding-left: 15px;
   position: relative;
   width: 100%;
 }
 
+.scene-player-container {
+  padding-left: 15px;
+}
+
 .scene-player-container {
   padding-right: 15px;
 }
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
index 4a0c67ff126..b1cc57da77c 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
@@ -6,6 +6,7 @@ import React, {
   useContext,
   useRef,
   useLayoutEffect,
+  useCallback,
 } from "react";
 import { FormattedDate, FormattedMessage, useIntl } from "react-intl";
 import { Link, RouteComponentProps } from "react-router-dom";
@@ -58,9 +59,6 @@ const ScenePlayer = lazyComponent(
   () => import("src/components/ScenePlayer/ScenePlayer")
 );
 
-const GalleryViewer = lazyComponent(
-  () => import("src/components/Galleries/GalleryViewer")
-);
 const ExternalPlayerButton = lazyComponent(
   () => import("./ExternalPlayerButton")
 );
@@ -70,10 +68,6 @@ const SceneMarkersPanel = lazyComponent(() => import("./SceneMarkersPanel"));
 const SceneFileInfoPanel = lazyComponent(() => import("./SceneFileInfoPanel"));
 const SceneDetailPanel = lazyComponent(() => import("./SceneDetailPanel"));
 const SceneHistoryPanel = lazyComponent(() => import("./SceneHistoryPanel"));
-const SceneGroupPanel = lazyComponent(() => import("./SceneGroupPanel"));
-const SceneGalleriesPanel = lazyComponent(
-  () => import("./SceneGalleriesPanel")
-);
 const DeleteScenesDialog = lazyComponent(() => import("../DeleteScenesDialog"));
 const GenerateDialog = lazyComponent(
   () => import("../../Dialogs/GenerateDialog")
@@ -117,7 +111,7 @@ const VideoFrameRateResolution: React.FC<{
 
   const divider = useMemo(() => {
     return resolution && frameRateDisplay ? (
-      <span className="divider"> | </span>
+      <span className="divider"> • </span>
     ) : undefined;
   }, [resolution, frameRateDisplay]);
 
@@ -176,6 +170,8 @@ const ScenePage: React.FC<IProps> = ({
   const [updateScene] = useSceneUpdate();
   const [generateScreenshot] = useSceneGenerateScreenshot();
   const { configuration } = useContext(ConfigurationContext);
+  const uiConfig = configuration?.ui;
+  const enableBackgroundImage = uiConfig?.enableSceneBackgroundImage ?? false;
 
   const [showDraftModal, setShowDraftModal] = useState(false);
   const boxes = configuration?.general?.stashBoxes ?? [];
@@ -199,6 +195,60 @@ const ScenePage: React.FC<IProps> = ({
   const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState<boolean>(false);
   const [isGenerateDialogOpen, setIsGenerateDialogOpen] = useState(false);
 
+  const tabNavRef = useRef<HTMLDivElement>(null);
+  const dropDownRef = useRef<HTMLDivElement>(null);
+
+  const [dropdownWidths, setDropdownWidths] = useState<number[]>([]);
+
+  const autoCollapseTabs = useCallback(() => {
+    const nav = tabNavRef.current;
+    const dropdown = dropDownRef.current;
+    if (nav == null || dropdown == null) {
+      return;
+    }
+
+    let height = nav.clientHeight;
+    const dropdownTabs = dropdown.children[1];
+
+    const maxHeight = 40;
+    let navChildren = nav.children;
+    let dropdownChildren = dropdownTabs.children;
+    if (height >= maxHeight) {
+      dropdown.classList.remove("d-none");
+
+      while (height >= maxHeight) {
+        let { length } = navChildren;
+        dropdownWidths.push(navChildren[length - 2].clientWidth);
+        setDropdownWidths(dropdownWidths);
+        dropdownTabs.prepend(navChildren[length - 2]);
+        height = nav.clientHeight;
+      }
+    } else {
+      const padding = 15;
+      const buttonWidth = 25;
+      let width = 0;
+      for (let i = 0; i < navChildren.length - 1; i++) {
+        width += navChildren[i].clientWidth;
+      }
+      width += padding;
+
+      while (
+        height < maxHeight &&
+        navChildren.length > 0 &&
+        dropdownChildren.length > 0 &&
+        dropdownWidths[0] + width + buttonWidth < nav.clientWidth
+      ) {
+        nav.insertBefore(dropdownChildren[0], dropdown);
+        dropdownWidths.shift();
+        height = nav.clientHeight;
+      }
+
+      if (dropdownChildren.length === 0) {
+        dropdown.classList.add("d-none");
+      }
+    }
+  }, [dropdownWidths]);
+
   const onIncrementOClick = async () => {
     try {
       await incrementO();
@@ -207,6 +257,14 @@ const ScenePage: React.FC<IProps> = ({
     }
   };
 
+  useEffect(() => {
+    window.addEventListener("resize", autoCollapseTabs);
+  }, [autoCollapseTabs]);
+
+  useEffect(() => {
+    autoCollapseTabs(); // update on reload
+  }, [queueScenes, autoCollapseTabs]);
+
   function setRating(v: number | null) {
     updateScene({
       variables: {
@@ -416,13 +474,129 @@ const ScenePage: React.FC<IProps> = ({
     </Dropdown>
   );
 
+  function maybeRenderHeaderBackgroundImage() {
+    if (enableBackgroundImage && scene != null && scene.studio != null) {
+      let image = scene.studio.image_path;
+      if (image) {
+        const imageURL = new URL(image);
+        let isDefaultImage = imageURL.searchParams.get("default");
+        if (!isDefaultImage) {
+          return (
+            <div className="background-image-container">
+              <picture>
+                <source src={image} />
+                <img
+                  className="background-image"
+                  src={image}
+                  alt={`${scene.studio.name} background`}
+                />
+              </picture>
+            </div>
+          );
+        }
+      }
+    }
+  }
+
+  const title = objectTitle(scene);
+
+  const file = useMemo(
+    () => (scene.files.length > 0 ? scene.files[0] : undefined),
+    [scene]
+  );
+
+  function renderDetailHeader(isPrimaryHeader: boolean) {
+    return (
+      <div
+        className={`${isPrimaryHeader ? "primary" : "secondary"} detail-header`}
+      >
+        {maybeRenderHeaderBackgroundImage()}
+        <div className="detail-container">
+          <div className="scene-header-container">
+            {scene.studio && (
+              <>
+                <h1 className="text-center scene-studio-image">
+                  <Link to={`/studios/${scene.studio.id}`}>
+                    <img
+                      src={scene.studio.image_path ?? ""}
+                      alt={`${scene.studio.name} logo`}
+                      className="studio-logo"
+                    />
+                  </Link>
+                </h1>
+              </>
+            )}
+            <h3 className={cx("scene-header", { "no-studio": !scene.studio })}>
+              <TruncatedText lineCount={2} text={title} />
+            </h3>
+          </div>
+
+          <div className="scene-subheader">
+            <span className="date" data-value={scene.date}>
+              {!!scene.date && (
+                <FormattedDate
+                  value={scene.date}
+                  format="long"
+                  timeZone="utc"
+                />
+              )}
+            </span>
+            <VideoFrameRateResolution
+              width={file?.width}
+              height={file?.height}
+              frameRate={file?.frame_rate}
+            />
+          </div>
+
+          <div className="scene-toolbar">
+            <span className="scene-toolbar-group">
+              <RatingSystem
+                value={scene.rating100}
+                onSetRating={setRating}
+                clickToRate
+                withoutContext
+              />
+            </span>
+            <span className="scene-toolbar-group">
+              <span className="external-player-button-container">
+                <ExternalPlayerButton scene={scene} />
+              </span>
+              <span className="view-count-button-container">
+                <ViewCountButton
+                  value={scene.play_count ?? 0}
+                  onIncrement={() => incrementPlayCount()}
+                />
+              </span>
+              <span className="o-counter-button-container">
+                <OCounterButton
+                  value={scene.o_counter ?? 0}
+                  onIncrement={() => onIncrementOClick()}
+                />
+              </span>
+              <span className="organized-button-container">
+                <OrganizedButton
+                  loading={organizedLoading}
+                  organized={scene.organized}
+                  onClick={onOrganizedClick}
+                />
+              </span>
+              <span className="operations-button-container">
+                {renderOperations()}
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   const renderTabs = () => (
     <Tab.Container
       activeKey={activeTabKey}
       onSelect={(k) => k && setActiveTabKey(k)}
     >
       <div>
-        <Nav variant="tabs" className="mr-auto">
+        <Nav variant="tabs" className="mr-auto" ref={tabNavRef}>
           <Nav.Item>
             <Nav.Link eventKey="scene-details-panel">
               <FormattedMessage id="details" />
@@ -442,28 +616,6 @@ const ScenePage: React.FC<IProps> = ({
               <FormattedMessage id="markers" />
             </Nav.Link>
           </Nav.Item>
-          {scene.groups.length > 0 ? (
-            <Nav.Item>
-              <Nav.Link eventKey="scene-group-panel">
-                <FormattedMessage
-                  id="countables.groups"
-                  values={{ count: scene.groups.length }}
-                />
-              </Nav.Link>
-            </Nav.Item>
-          ) : (
-            ""
-          )}
-          {scene.galleries.length >= 1 ? (
-            <Nav.Item>
-              <Nav.Link eventKey="scene-galleries-panel">
-                <FormattedMessage
-                  id="countables.galleries"
-                  values={{ count: scene.galleries.length }}
-                />
-              </Nav.Link>
-            </Nav.Item>
-          ) : undefined}
           <Nav.Item>
             <Nav.Link eventKey="scene-video-filter-panel">
               <FormattedMessage id="effect_filters.name" />
@@ -485,12 +637,28 @@ const ScenePage: React.FC<IProps> = ({
               <FormattedMessage id="actions.edit" />
             </Nav.Link>
           </Nav.Item>
+          <Dropdown ref={dropDownRef}>
+            <Dropdown.Toggle
+              variant="secondary"
+              id="tab-dropdown"
+              className="minimal"
+            >
+              <Icon icon={faEllipsisV} />
+            </Dropdown.Toggle>
+            <Dropdown.Menu
+              className="bg-secondary text-white"
+              renderOnMount={true}
+            ></Dropdown.Menu>
+          </Dropdown>
         </Nav>
       </div>
 
       <Tab.Content>
         <Tab.Pane eventKey="scene-details-panel">
-          <SceneDetailPanel scene={scene} />
+          <>
+            {renderDetailHeader(false)}
+            <SceneDetailPanel scene={scene} />
+          </>
         </Tab.Pane>
         <Tab.Pane eventKey="scene-queue-panel">
           <QueueViewer
@@ -515,17 +683,6 @@ const ScenePage: React.FC<IProps> = ({
             isVisible={activeTabKey === "scene-markers-panel"}
           />
         </Tab.Pane>
-        <Tab.Pane eventKey="scene-group-panel">
-          <SceneGroupPanel scene={scene} />
-        </Tab.Pane>
-        {scene.galleries.length >= 1 && (
-          <Tab.Pane eventKey="scene-galleries-panel">
-            <SceneGalleriesPanel galleries={scene.galleries} />
-            {scene.galleries.length === 1 && (
-              <GalleryViewer galleryId={scene.galleries[0].id} />
-            )}
-          </Tab.Pane>
-        )}
         <Tab.Pane eventKey="scene-video-filter-panel">
           <SceneVideoFilterPanel scene={scene} />
         </Tab.Pane>
@@ -551,13 +708,6 @@ const ScenePage: React.FC<IProps> = ({
     return collapsed ? faChevronRight : faChevronLeft;
   }
 
-  const title = objectTitle(scene);
-
-  const file = useMemo(
-    () => (scene.files.length > 0 ? scene.files[0] : undefined),
-    [scene]
-  );
-
   return (
     <>
       <Helmet>
@@ -570,77 +720,7 @@ const ScenePage: React.FC<IProps> = ({
           collapsed ? "collapsed" : ""
         }`}
       >
-        <div>
-          <div className="scene-header-container">
-            {scene.studio && (
-              <h1 className="text-center scene-studio-image">
-                <Link to={`/studios/${scene.studio.id}`}>
-                  <img
-                    src={scene.studio.image_path ?? ""}
-                    alt={`${scene.studio.name} logo`}
-                    className="studio-logo"
-                  />
-                </Link>
-              </h1>
-            )}
-            <h3 className={cx("scene-header", { "no-studio": !scene.studio })}>
-              <TruncatedText lineCount={2} text={title} />
-            </h3>
-          </div>
-
-          <div className="scene-subheader">
-            <span className="date" data-value={scene.date}>
-              {!!scene.date && (
-                <FormattedDate
-                  value={scene.date}
-                  format="long"
-                  timeZone="utc"
-                />
-              )}
-            </span>
-            <VideoFrameRateResolution
-              width={file?.width}
-              height={file?.height}
-              frameRate={file?.frame_rate}
-            />
-          </div>
-
-          <div className="scene-toolbar">
-            <span className="scene-toolbar-group">
-              <RatingSystem
-                value={scene.rating100}
-                onSetRating={setRating}
-                clickToRate
-                withoutContext
-              />
-            </span>
-            <span className="scene-toolbar-group">
-              <span>
-                <ExternalPlayerButton scene={scene} />
-              </span>
-              <span>
-                <ViewCountButton
-                  value={scene.play_count ?? 0}
-                  onIncrement={() => incrementPlayCount()}
-                />
-              </span>
-              <span>
-                <OCounterButton
-                  value={scene.o_counter ?? 0}
-                  onIncrement={() => onIncrementOClick()}
-                />
-              </span>
-              <span>
-                <OrganizedButton
-                  loading={organizedLoading}
-                  organized={scene.organized}
-                  onClick={onOrganizedClick}
-                />
-              </span>
-              <span>{renderOperations()}</span>
-            </span>
-          </div>
-        </div>
+        {renderDetailHeader(true)}
         {renderTabs()}
       </div>
       <div className="scene-divider d-none d-xl-block">
@@ -916,7 +996,7 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
   }
 
   return (
-    <div className="row">
+    <div id="scene-page" className="row">
       <ScenePage
         scene={scene}
         setTimestamp={setTimestamp}
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneDetailPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneDetailPanel.tsx
index ad7663e9d8f..f48602244af 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneDetailPanel.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneDetailPanel.tsx
@@ -1,11 +1,22 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import TextUtils from "src/utils/text";
-import { TagLink } from "src/components/Shared/TagLink";
+import { GalleryDetailedLink, TagLink } from "src/components/Shared/TagLink";
 import { PerformerCard } from "src/components/Performers/PerformerCard";
 import { sortPerformers } from "src/core/performers";
 import { DirectorLink } from "src/components/Shared/Link";
+import {
+  DetailItem,
+  maybeRenderShowMoreLess,
+} from "src/components/Shared/DetailItem";
+import { useContainerDimensions } from "src/components/Shared/GridCard/GridCard";
+import { GroupCard } from "src/components/Groups/GroupCard";
+import { GalleryCard } from "src/components/Galleries/GalleryCard";
+import { faCompress, faExpand } from "@fortawesome/free-solid-svg-icons";
+import { Icon } from "src/components/Shared/Icon";
+import { Button } from "react-bootstrap";
+import GalleryViewer from "src/components/Galleries/GalleryViewer";
 
 interface ISceneDetailProps {
   scene: GQL.SceneDataFragment;
@@ -14,40 +25,144 @@ interface ISceneDetailProps {
 export const SceneDetailPanel: React.FC<ISceneDetailProps> = (props) => {
   const intl = useIntl();
 
-  function renderDetails() {
-    if (!props.scene.details || props.scene.details === "") return;
-    return (
+  const [collapsedDetails, setCollapsedDetails] = useState<boolean>(true);
+  const [collapsedGalleries, setCollapsedGalleries] = useState<boolean>(true);
+  const [collapsedPerformers, setCollapsedPerformers] = useState<boolean>(true);
+  const [collapsedTags, setCollapsedTags] = useState<boolean>(true);
+
+  const [viewingGallery, setViewingGallery] = useState<number>(-1);
+
+  const [detailsRef, { height: detailsHeight }] = useContainerDimensions();
+  const [galleriesRef, { height: galleriesHeight }] = useContainerDimensions();
+  const [perfRef, { height: perfHeight }] = useContainerDimensions();
+  const [tagRef, { height: tagHeight }] = useContainerDimensions();
+
+  const details = useMemo(() => {
+    const limit = 160;
+    return props.scene.details?.length ? (
       <>
-        <h6>
-          <FormattedMessage id="details" />:{" "}
-        </h6>
-        <p className="pre">{props.scene.details}</p>
+        <div
+          className={`details ${
+            collapsedDetails && detailsHeight >= limit
+              ? "collapsed-detail"
+              : "expanded-detail"
+          }`}
+        >
+          <p className="pre" ref={detailsRef}>
+            {props.scene.details}
+          </p>
+        </div>
+        {maybeRenderShowMoreLess(
+          detailsHeight,
+          limit,
+          detailsRef,
+          setCollapsedDetails,
+          collapsedDetails
+        )}
       </>
-    );
-  }
+    ) : undefined;
+  }, [
+    props.scene.details,
+    detailsRef,
+    detailsHeight,
+    setCollapsedDetails,
+    collapsedDetails,
+  ]);
+
+  const groups = useMemo(
+    () =>
+      props.scene.groups.map((sceneGroup) => (
+        <GroupCard
+          key={sceneGroup.group.id}
+          group={sceneGroup.group}
+          sceneNumber={sceneGroup.scene_index ?? undefined}
+          titleOnImage={true}
+        />
+      )),
+    [props.scene.groups]
+  );
 
-  function renderTags() {
+  const tags = useMemo(() => {
+    const limit = 160;
     if (props.scene.tags.length === 0) return;
-    const tags = props.scene.tags.map((tag) => (
+    const sceneTags = props.scene.tags.map((tag) => (
       <TagLink key={tag.id} tag={tag} />
     ));
     return (
       <>
-        <h6>
-          <FormattedMessage
-            id="countables.tags"
-            values={{ count: props.scene.tags.length }}
-          />
-        </h6>
-        {tags}
+        <div
+          className={`scene-tags ${
+            collapsedTags && tagHeight >= limit
+              ? "collapsed-detail"
+              : "expanded-detail"
+          }`}
+          ref={tagRef}
+        >
+          {sceneTags}
+        </div>
+        {maybeRenderShowMoreLess(
+          tagHeight,
+          limit,
+          tagRef,
+          setCollapsedTags,
+          collapsedTags
+        )}
       </>
     );
-  }
+  }, [props.scene.tags, tagRef, tagHeight, setCollapsedTags, collapsedTags]);
+
+  const galleries = useMemo(() => {
+    const limit = 210;
+    const sceneGalleries = props.scene.galleries.map((gallery, i) => (
+      <div key={i} className="gallery-card-container">
+        <Button
+          className="minimal viewer-button"
+          onClick={() => setViewingGallery(i)}
+        >
+          <Icon icon={faExpand} />
+        </Button>
+        <GalleryCard key={gallery.id} gallery={gallery} titleOnImage={true} />
+      </div>
+    ));
+    /* provides a slimmer options users can swap to via CSS to reduce tab height */
+    const slimSceneGalleries = props.scene.galleries.map((gallery) => (
+      <GalleryDetailedLink key={gallery.id} gallery={gallery} />
+    ));
+    return (
+      <>
+        <div
+          className={`scene-galleries ${
+            collapsedGalleries && galleriesHeight >= limit
+              ? "collapsed-detail"
+              : "expanded-detail"
+          }`}
+          ref={galleriesRef}
+        >
+          {sceneGalleries}
+          {slimSceneGalleries}
+          {}
+        </div>
+        {maybeRenderShowMoreLess(
+          galleriesHeight,
+          limit,
+          galleriesRef,
+          setCollapsedGalleries,
+          collapsedGalleries
+        )}
+      </>
+    );
+  }, [
+    props.scene.galleries,
+    galleriesRef,
+    galleriesHeight,
+    setCollapsedGalleries,
+    collapsedGalleries,
+  ]);
 
-  function renderPerformers() {
-    if (props.scene.performers.length === 0) return;
-    const performers = sortPerformers(props.scene.performers);
-    const cards = performers.map((performer) => (
+  const performers = useMemo(() => {
+    const limit = 365;
+    const sorted = sortPerformers(props.scene.performers);
+    const cards = sorted.map((performer) => (
       <PerformerCard
         key={performer.id}
         performer={performer}
@@ -57,17 +172,48 @@ export const SceneDetailPanel: React.FC<ISceneDetailProps> = (props) => {
 
     return (
       <>
-        <h6>
-          <FormattedMessage
-            id="countables.performers"
-            values={{ count: props.scene.performers.length }}
-          />
-        </h6>
-        <div className="row justify-content-center scene-performers">
+        <div
+          className={`row justify-content-center scene-performers ${
+            collapsedPerformers && perfHeight >= limit
+              ? "collapsed-detail"
+              : "expanded-detail"
+          }`}
+          ref={perfRef}
+        >
           {cards}
         </div>
+        {maybeRenderShowMoreLess(
+          perfHeight,
+          limit,
+          perfRef,
+          setCollapsedPerformers,
+          collapsedPerformers
+        )}
       </>
     );
+  }, [
+    props.scene.performers,
+    props.scene.date,
+    perfRef,
+    perfHeight,
+    collapsedPerformers,
+    setCollapsedPerformers,
+  ]);
+
+  function maybeRenderGalleryViewer() {
+    if (viewingGallery >= 0) {
+      return (
+        <div className="gallery-viewer-container">
+          <Button
+            className="minimal viewer-button"
+            onClick={() => setViewingGallery(-1)}
+          >
+            <Icon icon={faCompress} />
+          </Button>
+          <GalleryViewer galleryId={props.scene.galleries[viewingGallery].id} />
+        </div>
+      );
+    }
   }
 
   // filename should use entire row if there is no studio
@@ -75,34 +221,62 @@ export const SceneDetailPanel: React.FC<ISceneDetailProps> = (props) => {
 
   return (
     <>
-      <div className="row">
+      {maybeRenderGalleryViewer()}
+      <div
+        id="scene-details-panel"
+        className={`row ${viewingGallery >= 0 ? "d-none" : ""}`}
+      >
         <div className={`${sceneDetailsWidth} col-12 scene-details`}>
-          <h6>
-            <FormattedMessage id="created_at" />:{" "}
-            {TextUtils.formatDateTime(intl, props.scene.created_at)}{" "}
-          </h6>
-          <h6>
-            <FormattedMessage id="updated_at" />:{" "}
-            {TextUtils.formatDateTime(intl, props.scene.updated_at)}{" "}
-          </h6>
-          {props.scene.code && (
-            <h6>
-              <FormattedMessage id="scene_code" />: {props.scene.code}{" "}
-            </h6>
-          )}
-          {props.scene.director && (
-            <h6>
-              <FormattedMessage id="director" />:{" "}
-              <DirectorLink director={props.scene.director} linkType="scene" />
-            </h6>
-          )}
-        </div>
-      </div>
-      <div className="row">
-        <div className="col-12">
-          {renderDetails()}
-          {renderTags()}
-          {renderPerformers()}
+          <div className="detail-group">
+            <DetailItem
+              id="studio"
+              value={props.scene.studio?.name}
+              fullWidth
+            />
+            <DetailItem id="scene_code" value={props.scene.code} fullWidth />
+            <DetailItem
+              id="director"
+              value={
+                props.scene.director ? (
+                  <DirectorLink
+                    director={props.scene.director}
+                    linkType="scene"
+                  />
+                ) : undefined
+              }
+              fullWidth
+            />
+            <DetailItem id="details" value={details} />
+            <DetailItem
+              id="tags"
+              heading={<FormattedMessage id="tags" />}
+              value={props.scene.tags.length ? tags : undefined}
+            />
+            <DetailItem
+              id="performers"
+              heading={<FormattedMessage id="performers" />}
+              value={props.scene.performers.length ? performers : undefined}
+            />
+            <DetailItem
+              id="groups"
+              value={groups.length ? groups : undefined}
+            />
+            <DetailItem
+              id="galleries"
+              heading={<FormattedMessage id="galleries" />}
+              value={props.scene.galleries.length ? galleries : undefined}
+            />
+            <DetailItem
+              id="created_at"
+              value={TextUtils.formatDateTime(intl, props.scene.created_at)}
+              fullWidth
+            />
+            <DetailItem
+              id="updated_at"
+              value={TextUtils.formatDateTime(intl, props.scene.updated_at)}
+              fullWidth
+            />
+          </div>
         </div>
       </div>
     </>
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneFileInfoPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneFileInfoPanel.tsx
index 8db3f93886e..5c148ba7655 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneFileInfoPanel.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneFileInfoPanel.tsx
@@ -67,7 +67,7 @@ const FileInfoPanel: React.FC<IFileInfoPanelProps> = (
   }
 
   return (
-    <div>
+    <div id="scene-file-info-panel">
       <dl className="container scene-file-info details-list">
         {props.primary && (
           <>
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneHistoryPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneHistoryPanel.tsx
index 1ac9dd5a27b..785b107bf1c 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneHistoryPanel.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneHistoryPanel.tsx
@@ -51,7 +51,7 @@ const History: React.FC<{
   }
 
   return (
-    <div className="scene-history">
+    <div id="scene-history-panel" className="scene-history">
       <ul className={className}>
         {history.map((playdate, index) => (
           <li key={index}>
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkersPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkersPanel.tsx
index 331c58c784f..a9e99ec5c8e 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkersPanel.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkersPanel.tsx
@@ -62,7 +62,7 @@ export const SceneMarkersPanel: React.FC<ISceneMarkersPanelProps> = ({
   ).reduce((prev, current) => [...prev, ...current], []);
 
   return (
-    <div className="scene-markers-panel">
+    <div id="scene-markers-panel" className="scene-markers-panel">
       <Button onClick={() => onOpenEditor()}>
         <FormattedMessage id="actions.create_marker" />
       </Button>
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneVideoFilterPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneVideoFilterPanel.tsx
index e547e750f7d..2dc97b5c6b1 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneVideoFilterPanel.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneVideoFilterPanel.tsx
@@ -649,7 +649,7 @@ export const SceneVideoFilterPanel: React.FC<ISceneVideoFilterPanelProps> = (
   updateVideoStyle();
 
   return (
-    <div className="container scene-video-filter">
+    <div id="scene-video-filter-panel" className="container scene-video-filter">
       <div className="row form-group">
         <span className="col-12">
           <h5>
diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss
index b9df2f7b5c6..2e22896b8cb 100644
--- a/ui/v2.5/src/components/Scenes/styles.scss
+++ b/ui/v2.5/src/components/Scenes/styles.scss
@@ -63,7 +63,11 @@
   max-width: 100%;
 }
 
-@include media-breakpoint-only(lg) {
+@media (max-width: 1200px) {
+  .primary.detail-header {
+    display: none;
+  }
+
   .scene-header-container {
     align-items: center;
     display: flex;
@@ -214,6 +218,78 @@ textarea.scene-description {
   }
 }
 
+.gallery-card-container,
+.gallery-viewer-container {
+  position: relative;
+}
+
+.gallery-card-container {
+  position: relative;
+
+  .viewer-button {
+    background-color: rgb(0 0 0 / 28%);
+    padding: 1px 5px;
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    z-index: 11;
+  }
+}
+
+.gallery-viewer-container {
+  position: relative;
+
+  .viewer-button {
+    background-color: $primary;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);
+    left: calc(100% - 40px);
+    padding: 1px 5px;
+    position: sticky;
+    top: 15px;
+    z-index: 11;
+  }
+
+  .gallery {
+    margin-top: -20px;
+  }
+}
+
+.gallery-card-container,
+.gallery-viewer-container {
+  position: relative;
+}
+
+.gallery-card-container {
+  position: relative;
+
+  .viewer-button {
+    background-color: rgb(0 0 0 / 28%);
+    padding: 1px 5px;
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    z-index: 11;
+  }
+}
+
+.gallery-viewer-container {
+  position: relative;
+
+  .viewer-button {
+    background-color: $primary;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);
+    left: calc(100% - 40px);
+    padding: 1px 5px;
+    position: sticky;
+    top: 15px;
+    z-index: 11;
+  }
+
+  .gallery {
+    margin-top: -20px;
+  }
+}
+
 .scene-card,
 .gallery-card {
   .scene-specs-overlay {
@@ -316,18 +392,6 @@ textarea.scene-description {
   display: none;
 }
 
-.scene-tabs {
-  display: flex;
-  flex-direction: column;
-  max-height: calc(100vh - 4rem);
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-
-  > div {
-    flex: 0 1 auto;
-  }
-}
-
 /* stylelint-disable selector-class-pattern */
 .table .cover_image-head,
 .table .cover_image-data {
@@ -519,21 +583,22 @@ input[type="range"].blue-slider {
   }
 }
 
+.scene-performers {
+  .performer-card {
+    width: 13.5rem;
+
+    .card-popovers,
+    hr {
+      display: none;
+    }
+  }
+}
+
 @media (min-width: 1200px), (max-width: 575px) {
   .performer-card .fi {
     height: 1.33rem;
     width: 2rem;
   }
-
-  .scene-performers {
-    .performer-card {
-      width: 15rem;
-
-      &-image {
-        height: 22.5rem;
-      }
-    }
-  }
 }
 
 #scene-edit-details {
@@ -594,6 +659,10 @@ input[type="range"].blue-slider {
 }
 
 @media (min-width: 1200px) {
+  .secondary.detail-header {
+    display: none;
+  }
+
   #queue-viewer {
     .queue-scene-details {
       width: 245px;
@@ -847,6 +916,51 @@ input[type="range"].blue-slider {
   }
 }
 
+.show-more,
+.show-less {
+  align-items: center;
+  color: #b3b3b3;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.secondary.detail-header {
+  background-color: unset;
+  border-bottom: solid 1px #ffffff2b;
+  margin-bottom: 1rem;
+  overflow: hidden;
+  padding: 0;
+
+  .background-image-container {
+    display: none;
+  }
+}
+
+.scene-details {
+  .group-card {
+    padding-bottom: 0;
+    width: 10rem;
+
+    .card-section-title,
+    .movie-scene-number {
+      font-size: 1rem;
+    }
+
+    .movie-scene-number {
+      color: $text-muted;
+    }
+
+    .group-card__details,
+    .card-section,
+    .card-popovers,
+    hr {
+      display: none;
+    }
+  }
+}
+
 .scene-select-option {
   .scene-select-row {
     align-items: center;
diff --git a/ui/v2.5/src/components/Settings/SettingsInterfacePanel/SettingsInterfacePanel.tsx b/ui/v2.5/src/components/Settings/SettingsInterfacePanel/SettingsInterfacePanel.tsx
index c174847c982..b5f9c3ee7c7 100644
--- a/ui/v2.5/src/components/Settings/SettingsInterfacePanel/SettingsInterfacePanel.tsx
+++ b/ui/v2.5/src/components/Settings/SettingsInterfacePanel/SettingsInterfacePanel.tsx
@@ -585,6 +585,18 @@ export const SettingsInterfacePanel: React.FC = PatchComponent(
               </div>
               <div />
             </div>
+            <BooleanSetting
+              id="enableGalleryBackgroundImage"
+              headingID="gallery"
+              checked={ui.enableGalleryBackgroundImage ?? undefined}
+              onChange={(v) => saveUI({ enableGalleryBackgroundImage: v })}
+            />
+            <BooleanSetting
+              id="enableImageBackgroundImage"
+              headingID="image"
+              checked={ui.enableImageBackgroundImage ?? undefined}
+              onChange={(v) => saveUI({ enableImageBackgroundImage: v })}
+            />
             <BooleanSetting
               id="enableMovieBackgroundImage"
               headingID="group"
@@ -597,6 +609,12 @@ export const SettingsInterfacePanel: React.FC = PatchComponent(
               checked={ui.enablePerformerBackgroundImage ?? undefined}
               onChange={(v) => saveUI({ enablePerformerBackgroundImage: v })}
             />
+            <BooleanSetting
+              id="enableSceneBackgroundImage"
+              headingID="scene"
+              checked={ui.enableSceneBackgroundImage ?? undefined}
+              onChange={(v) => saveUI({ enableSceneBackgroundImage: v })}
+            />
             <BooleanSetting
               id="enableStudioBackgroundImage"
               headingID="studio"
diff --git a/ui/v2.5/src/components/Shared/DetailItem.tsx b/ui/v2.5/src/components/Shared/DetailItem.tsx
index 304655a4c69..d8def32a32e 100644
--- a/ui/v2.5/src/components/Shared/DetailItem.tsx
+++ b/ui/v2.5/src/components/Shared/DetailItem.tsx
@@ -1,8 +1,45 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
+import cx from "classnames";
+import { Icon } from "./Icon";
+import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
+
+export function maybeRenderShowMoreLess(
+  height: number,
+  limit: number,
+  ref: React.MutableRefObject<HTMLDivElement | null>,
+  setCollapsed: React.Dispatch<React.SetStateAction<boolean>>,
+  collapsed: boolean
+) {
+  if (height < limit) {
+    return;
+  }
+  return (
+    <span
+      className={`show-${collapsed ? "more" : "less"}`}
+      onClick={() => {
+        const container = ref.current;
+        if (container == null) {
+          return;
+        }
+        if (container.style.maxHeight) {
+          container.style.maxHeight = "";
+        } else {
+          container.style.maxHeight = container.scrollHeight + "px";
+        }
+        setCollapsed(!collapsed);
+      }}
+    >
+      {collapsed ? "Show more" : "Show less"}
+      <Icon className="fa-solid" icon={collapsed ? faCaretDown : faCaretUp} />
+    </span>
+  );
+}
 
 interface IDetailItem {
   id?: string | null;
+  messageId?: string;
+  heading?: React.ReactNode;
   value?: React.ReactNode;
   title?: string;
   fullWidth?: boolean;
@@ -10,6 +47,8 @@ interface IDetailItem {
 
 export const DetailItem: React.FC<IDetailItem> = ({
   id,
+  messageId,
+  heading,
   value,
   title,
   fullWidth,
@@ -18,19 +57,24 @@ export const DetailItem: React.FC<IDetailItem> = ({
     return <></>;
   }
 
-  const message = <FormattedMessage id={id} />;
+  const message = <FormattedMessage id={messageId ?? id} />;
+
+  // according to linter rule CSS classes shouldn't use underscores
+  const cssId = id?.replace("_", "-");
 
   return (
-    // according to linter rule CSS classes shouldn't use underscores
-    <div className={`detail-item ${id}`}>
-      <span className={`detail-item-title ${id.replace("_", "-")}`}>
-        {message}
-        {fullWidth ? ":" : ""}
+    <div className={cx(`detail-item ${cssId}`, { "full-width": fullWidth })}>
+      <span className={`detail-item-title ${cssId}`}>
+        {heading ? (
+          heading
+        ) : (
+          <>
+            {message}
+            {fullWidth ? ":" : ""}
+          </>
+        )}
       </span>
-      <span
-        className={`detail-item-value ${id.replace("_", "-")}`}
-        title={title}
-      >
+      <span className={`detail-item-value ${cssId}`} title={title}>
         {value}
       </span>
     </div>
diff --git a/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx b/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
index 33aa24e32cd..947cad7aa55 100644
--- a/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
+++ b/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
@@ -36,6 +36,7 @@ interface ICardProps {
   // move logic - both of the following are required to enable move dragging
   objectId?: string; // required for move dragging
   onMove?: (srcIds: string[], targetId: string, after: boolean) => void;
+  titleOnImage?: boolean;
 }
 
 export const calculateCardWidth = (
@@ -213,6 +214,7 @@ export const GridCard: React.FC<ICardProps> = (props: ICardProps) => {
 
       <div className={cx(props.thumbnailSectionClassName, "thumbnail-section")}>
         <Link
+          title={props.titleOnImage ? props.title.toString() : ""}
           to={props.url}
           className={props.linkClassName}
           onClick={handleImageClick}
diff --git a/ui/v2.5/src/components/Shared/TagLink.tsx b/ui/v2.5/src/components/Shared/TagLink.tsx
index d01eee2d5ff..36ca4e04499 100644
--- a/ui/v2.5/src/components/Shared/TagLink.tsx
+++ b/ui/v2.5/src/components/Shared/TagLink.tsx
@@ -13,6 +13,7 @@ import { Placement } from "react-bootstrap/esm/Overlay";
 import { faFolderTree } from "@fortawesome/free-solid-svg-icons";
 import { Icon } from "../Shared/Icon";
 import { FormattedMessage } from "react-intl";
+import { GalleryPopover } from "../Galleries/GalleryPopover";
 
 type SceneMarkerFragment = Pick<GQL.SceneMarker, "id" | "title" | "seconds"> & {
   scene: Pick<GQL.Scene, "id">;
@@ -198,6 +199,37 @@ export const GalleryLink: React.FC<IGalleryLinkProps> = ({
   );
 };
 
+interface IGalleryDetailedLinkProps {
+  gallery: GQL.SlimGalleryDataFragment;
+  linkType?: "gallery";
+  className?: string;
+  hoverPlacement?: Placement;
+}
+
+export const GalleryDetailedLink: React.FC<IGalleryDetailedLinkProps> = ({
+  gallery,
+  linkType = "gallery",
+  className,
+  hoverPlacement,
+}) => {
+  const link = useMemo(() => {
+    switch (linkType) {
+      case "gallery":
+        return `/galleries/${gallery.id}`;
+    }
+  }, [gallery, linkType]);
+
+  const title = galleryTitle(gallery);
+
+  return (
+    <CommonLinkComponent link={link} className={className}>
+      <GalleryPopover gallery={gallery ?? ""} placement={hoverPlacement}>
+        {title}
+      </GalleryPopover>
+    </CommonLinkComponent>
+  );
+};
+
 interface ITagLinkProps {
   tag: INamedObject;
   linkType?:
diff --git a/ui/v2.5/src/core/config.ts b/ui/v2.5/src/core/config.ts
index 1b85ebe6dcb..7596e8ce671 100644
--- a/ui/v2.5/src/core/config.ts
+++ b/ui/v2.5/src/core/config.ts
@@ -51,11 +51,17 @@ export interface IUIConfig {
 
   ratingSystemOptions?: RatingSystemOptions;
 
+  // if true a background image will be display on header
+  enableGalleryBackgroundImage?: boolean;
+  // if true a background image will be display on header
+  enableImageBackgroundImage?: boolean;
   // if true a background image will be display on header
   enableMovieBackgroundImage?: boolean;
   // if true a background image will be display on header
   enablePerformerBackgroundImage?: boolean;
   // if true a background image will be display on header
+  enableSceneBackgroundImage?: boolean;
+  // if true a background image will be display on header
   enableStudioBackgroundImage?: boolean;
   // if true a background image will be display on header
   enableTagBackgroundImage?: boolean;
diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss
index a2dce6acb92..7f27d9853fd 100755
--- a/ui/v2.5/src/index.scss
+++ b/ui/v2.5/src/index.scss
@@ -54,8 +54,11 @@ body {
   }
 }
 
+#gallery-page,
+#image-page,
 #group-page,
 #performer-page,
+#scene-page,
 #studio-page,
 #tag-page {
   margin-top: -0.5rem;
@@ -276,13 +279,100 @@ dd {
   }
 }
 
-.collapsed .detail-item-value {
+.detail-header.collapsed .detail-item-value {
   -webkit-box-orient: vertical;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   overflow: hidden;
 }
 
+.gallery-tabs,
+.image-tabs,
+.scene-tabs {
+  .detail-item {
+    background-color: #202b33;
+    padding-right: 1rem;
+    width: 100%;
+  }
+
+  .detail-item.studio {
+    display: none;
+  }
+
+  .gallery-performers,
+  .image-performers,
+  .scene-performers {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .tab-content,
+  .nav-tabs {
+    padding-left: 15px;
+
+    .dropdown {
+      display: flex;
+    }
+  }
+
+  .collapsed .detail-item-value {
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+  }
+
+  .gallery-tags,
+  .image-tags,
+  .scene-tags,
+  .gallery-performers,
+  .image-performers,
+  .scene-performers,
+  .scene-galleries,
+  .details p.pre {
+    height: auto;
+    transition: max-height 0.3s linear;
+  }
+
+  .details .collapsed-detail p.pre {
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    -webkit-line-clamp: 8;
+    max-height: 175px;
+    overflow-y: hidden;
+  }
+
+  .gallery-tags.collapsed-detail,
+  .image-tags.collapsed-detail,
+  .scene-tags.collapsed-detail {
+    max-height: 180px;
+    overflow-y: hidden;
+  }
+
+  .gallery-performers.collapsed-detail,
+  .image-performers.collapsed-detail,
+  .scene-performers.collapsed-detail {
+    max-height: 365px;
+    overflow-y: hidden;
+  }
+
+  .scene-galleries {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: start;
+  }
+
+  .scene-galleries.collapsed-detail {
+    max-height: 210px;
+    overflow-y: hidden;
+  }
+
+  .scene-galleries .tag-item {
+    display: none;
+  }
+}
+
 .full-width {
   .detail-header-image {
     height: auto;
@@ -315,6 +405,22 @@ dd {
   }
 }
 
+.detail-item.full-width {
+  display: table;
+  padding-right: 0;
+  width: 100%;
+
+  .detail-item-title {
+    display: table-cell;
+    width: 130px;
+  }
+
+  .detail-item-value.age {
+    border-bottom: unset;
+    width: fit-content;
+  }
+}
+
 .detail-header-image {
   display: flex;
   float: left;
@@ -351,6 +457,25 @@ dd {
   }
 }
 
+.gallery-tabs,
+.image-tabs,
+.scene-tabs {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 4rem);
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  > div {
+    flex: 0 1 auto;
+  }
+
+  .detail-header {
+    min-height: unset;
+    overflow: unset;
+  }
+}
+
 #group-page .detail-header-image .group-images img {
   max-width: 13rem;
 }
@@ -1154,6 +1279,189 @@ $detailTabWidth: calc(100% / 3);
   width: 100%;
 }
 
+.gallery-details,
+.image-details,
+.scene-details {
+  .detail-group {
+    flex-direction: column;
+    padding-top: 0;
+  }
+
+  .details p.pre {
+    margin-bottom: 0;
+  }
+
+  .detail-item-title {
+    color: #f5f8fa;
+  }
+
+  span.detail-item-value {
+    color: #d3d0d0;
+  }
+
+  .detail-item {
+    &.studio-code,
+    &.director,
+    &.files,
+    &.created-at,
+    &.updated-at,
+    &.details .detail-item-value {
+      font-size: 1rem;
+    }
+
+    &.rating,
+    &.tags,
+    &.performers,
+    &.details {
+      flex-basis: 100%;
+    }
+
+    &:not(.full-width) .detail-item-title {
+      margin-bottom: 0.25em;
+    }
+
+    .gallery-card {
+      margin: 8px;
+      overflow: unset;
+      padding-bottom: 0;
+      transition: ease 0.5s;
+
+      .thumbnail-section {
+        background-color: white;
+        border: solid 1px black;
+        height: auto;
+        padding: 3px;
+        z-index: 10;
+      }
+
+      .gallery-card-image {
+        height: auto;
+        width: 12.9rem;
+      }
+
+      .preview-scrubber {
+        display: none;
+      }
+
+      .gallery-card-image.portrait-image {
+        height: 12.9rem;
+        width: auto;
+      }
+
+      .card-section,
+      .performer-count,
+      .scene-count,
+      .tag-count,
+      .studio-overlay,
+      hr {
+        display: none;
+      }
+
+      .image-count {
+        background-color: #00000059;
+        border-radius: 5px;
+        bottom: 0.5rem;
+        padding-bottom: 3px;
+        padding-right: 3px;
+        position: absolute;
+        right: 10px;
+        z-index: 100;
+      }
+
+      .image-count > button {
+        padding: 0;
+      }
+    }
+
+    .gallery-card:hover {
+      transform: rotate(2deg);
+    }
+
+    .gallery-card::before {
+      background-color: white;
+      border: solid 1px black;
+      content: "";
+      height: 100%;
+      position: absolute;
+      transform: rotate(-3deg);
+      transition: ease 0.5s;
+      width: 100%;
+    }
+
+    .gallery-card:hover::before {
+      transform: rotate(3deg);
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .row .gallery-tabs,
+  .row .image-tabs {
+    height: calc(100vh - 4rem);
+  }
+
+  .row .gallery-tabs,
+  .row .gallery-container {
+    padding-left: 0;
+  }
+
+  .gallery-container,
+  .gallery-tabs.collapsed {
+    display: none;
+  }
+
+  .gallery-container.expanded {
+    display: block;
+  }
+
+  .gallery-header-container,
+  .image-header-container {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+
+    .gallery-header,
+    .image-header {
+      flex: 0 0 75%;
+      order: 1;
+    }
+
+    .gallery-studio-image,
+    .image-studio-image {
+      flex: 0 0 25%;
+      order: 2;
+    }
+  }
+
+  .gallery-tabs,
+  .image-tabs {
+    overflow: auto;
+    width: 100%;
+
+    .nav-tabs {
+      padding: 0 15px;
+    }
+  }
+
+  .gallery-tabs > .tab-content,
+  .image-tabs > .tab-content {
+    padding: 0 15px;
+  }
+
+  .gallery-tabs > div,
+  .row .gallery-container {
+    overflow-x: hidden;
+  }
+
+  .floating-gallery-divider {
+    bottom: 3rem;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);
+    display: unset !important;
+    position: absolute;
+    right: 3rem;
+    z-index: 100;
+  }
+}
 @media (min-width: 768px) {
   .details-tab {
     flex: 0 0 $detailTabWidth;
diff --git a/ui/v2.5/src/locales/en-GB.json b/ui/v2.5/src/locales/en-GB.json
index f2c5c5d1fb9..011b9f338f0 100644
--- a/ui/v2.5/src/locales/en-GB.json
+++ b/ui/v2.5/src/locales/en-GB.json
@@ -966,6 +966,7 @@
   "dimensions": "Dimensions",
   "director": "Director",
   "disambiguation": "Disambiguation",
+  "discover": "Discover",
   "display_mode": {
     "grid": "Grid",
     "list": "List",
@@ -1123,7 +1124,7 @@
     "o_count": "O Count",
     "performer_card": {
       "age": "{age} {years_old}",
-      "age_context": "{age} {years_old} in this scene"
+      "age_context": "{age} in this scene"
     },
     "phash": "PHash",
     "play_count": "Play Count",
diff --git a/ui/v2.5/src/utils/screen.ts b/ui/v2.5/src/utils/screen.ts
index 0f4a0a3c6a7..ea47d50e759 100644
--- a/ui/v2.5/src/utils/screen.ts
+++ b/ui/v2.5/src/utils/screen.ts
@@ -3,9 +3,12 @@ const isMobile = () =>
 
 const isTouch = () => window.matchMedia("(pointer: coarse)").matches;
 
+const isSmallScreen = () => window.matchMedia("(max-width: 1200px)").matches;
+
 const ScreenUtils = {
   isMobile,
   isTouch,
+  isSmallScreen,
 };
 
 export default ScreenUtils;