diff --git a/src/app/(default)/components/AreaAndClimb/AreaAndClimbPageActions.tsx b/src/app/(default)/components/AreaAndClimb/AreaAndClimbPageActions.tsx
index d746ccbfb..4007c700c 100644
--- a/src/app/(default)/components/AreaAndClimb/AreaAndClimbPageActions.tsx
+++ b/src/app/(default)/components/AreaAndClimb/AreaAndClimbPageActions.tsx
@@ -16,21 +16,32 @@ export const AreaAndClimbPageActions: React.FC<{ uuid: string, name: string, tar
   let enableEdit = true
   let editLabel = 'Edit'
   let navigateUuid = ''
+  let targetSlug = ''
   switch (targetType) {
     case TagTargetType.area:
+      targetSlug = 'area'
       url = `/editArea/${uuid}/general`
       sharePath = `/area/${uuid}`
       navigateUuid = uuid
       break
     case TagTargetType.climb:
+      targetSlug = 'climb'
       url = `/editClimb/${uuid}`
       sharePath = `/climb/${uuid}`
       enableEdit = true
       editLabel = 'Edit'
       navigateUuid = parentUuid ?? ''
   }
+
   return (
     <ul className='flex items-center justify-between gap-2'>
+      <Link
+        href={`/gallery/${uuid}?type=${targetSlug}`}
+        className='btn btn-primary'
+      >
+        SSR Gallery (in progress)
+      </Link>
+
       <Link href={url} className={clz('btn no-animation shadow-md', enableEdit ? 'btn-solid btn-accent' : 'btn-disabled')}>
         <PencilSimple size={20} weight='duotone' /> {editLabel}
       </Link>
diff --git a/src/app/(default)/gallery/@modal/(.)p/[uuid]/[photoId]/page.tsx b/src/app/(default)/gallery/@modal/(.)p/[uuid]/[photoId]/page.tsx
new file mode 100644
index 000000000..1f691c2ec
--- /dev/null
+++ b/src/app/(default)/gallery/@modal/(.)p/[uuid]/[photoId]/page.tsx
@@ -0,0 +1,77 @@
+import React from 'react'
+import { getEntityDataForPhotoDisplay } from '@/app/(default)/gallery/util/galleryUtils'
+import PhotoDialogWrapper from '@/app/(default)/gallery/components/PhotoDialogWrapper'
+
+interface PhotoModalProps {
+  params: {
+    uuid: string
+    photoId: string
+  }
+  searchParams: {
+    type?: 'area' | 'climb'
+  }
+}
+
+export default async function PhotoModal ({
+  params,
+  searchParams
+}: PhotoModalProps): Promise<JSX.Element | null> {
+  const { uuid, photoId: currentPhotoId } = params
+  const type = searchParams.type
+
+  if (uuid === '' || currentPhotoId === '' || (type !== 'area' && type !== 'climb')) {
+    console.error(
+      'PhotoModal: Missing uuid, currentPhotoId, or type from searchParams.',
+      { params, searchParams }
+    )
+    return null
+  }
+
+  const entityData = await getEntityDataForPhotoDisplay(uuid, type)
+
+  if ((entityData == null) || entityData.photos == null || entityData.photos.length === 0) {
+    console.warn(
+      `PhotoModal: No photos found for entity ${uuid} (type: ${type}).`
+    )
+    return (
+      <PhotoDialogWrapper
+        images={[]}
+        currentIndex={-1}
+        uuid={uuid}
+        type={type}
+        userinfoData={{ name: '' }}
+        authData={{ isAuthorized: false, isAuthenticated: false }}
+      />
+    )
+  }
+
+  const photos = entityData.photos
+  const currentIndex = photos.findIndex((p) => p.id === currentPhotoId)
+
+  if (currentIndex === -1) {
+    console.warn(
+      `PhotoModal: Photo ID ${currentPhotoId} not found in entity ${uuid}.`
+    )
+    return (
+      <PhotoDialogWrapper
+        images={photos}
+        currentIndex={-1}
+        uuid={uuid}
+        type={type}
+        userinfoData={{ name: '' }}
+        authData={{ isAuthorized: false, isAuthenticated: false }}
+      />
+    )
+  }
+
+  return (
+    <PhotoDialogWrapper
+      images={photos}
+      currentIndex={currentIndex}
+      uuid={uuid}
+      type={type}
+      userinfoData={{ name: '' }}
+      authData={{ isAuthorized: false, isAuthenticated: false }}
+    />
+  )
+}
diff --git a/src/app/(default)/gallery/@modal/default.tsx b/src/app/(default)/gallery/@modal/default.tsx
new file mode 100644
index 000000000..a9a923ea5
--- /dev/null
+++ b/src/app/(default)/gallery/@modal/default.tsx
@@ -0,0 +1,3 @@
+export default function ModalSlot (): null {
+  return null
+}
diff --git a/src/app/(default)/gallery/[...slug]/page.tsx b/src/app/(default)/gallery/[...slug]/page.tsx
new file mode 100644
index 000000000..bd96d9623
--- /dev/null
+++ b/src/app/(default)/gallery/[...slug]/page.tsx
@@ -0,0 +1,177 @@
+import Image from 'next/image'
+import { Suspense } from 'react'
+import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import {
+  getAreaPageFriendlyUrl,
+  getClimbPageFriendlyUrl,
+  parseUuidAsFirstParam
+} from '@/js/utils'
+import { PageWithCatchAllUuidProps } from '@/js/types/pages'
+import { getAreaRSC } from '@/js/graphql/getAreaRSC'
+import { getClimbByIdRSC } from '@/js/graphql/getClimbRSC'
+
+interface GalleryPageProps extends PageWithCatchAllUuidProps {
+  searchParams?: { [key: string]: string | string[] | undefined }
+}
+
+interface PhotoData {
+  id: string
+  mediaUrl: string
+  [key: string]: any
+}
+
+interface EntityGalleryData {
+  id: string
+  name: string
+  photos: PhotoData[]
+  pageUrl: string
+  type: 'area' | 'climb'
+}
+
+type AreaData = NonNullable<Awaited<ReturnType<typeof getAreaRSC>>['area']>
+type ClimbData = NonNullable<Awaited<ReturnType<typeof getClimbByIdRSC>>>
+
+const formatAreaData = (area: AreaData): EntityGalleryData => {
+  const photos = (area.media ?? []).map(p => ({
+    ...p,
+    id: p.id,
+    mediaUrl: p.mediaUrl
+  }))
+
+  return {
+    type: 'area',
+    id: area.uuid,
+    name: area.areaName,
+    photos,
+    pageUrl: getAreaPageFriendlyUrl(area.uuid, area.areaName)
+  }
+}
+
+const formatClimbData = (climb: ClimbData): EntityGalleryData => {
+  const photos = (climb.media ?? []).map(p => ({
+    ...p,
+    id: p.id,
+    mediaUrl: p.mediaUrl
+  }))
+
+  return {
+    type: 'climb',
+    id: climb.id,
+    name: climb.name,
+    photos,
+    pageUrl: getClimbPageFriendlyUrl(climb.id, climb.name)
+  }
+}
+
+export default async function GalleryPage ({ params, searchParams }: GalleryPageProps): Promise<JSX.Element> {
+  const id = parseUuidAsFirstParam({ params })
+  const entityTypeParam = searchParams?.type as 'area' | 'climb' | undefined
+
+  if (id === '') {
+    notFound()
+  }
+
+  let galleryData: EntityGalleryData | null = null
+
+  try {
+    // If type param is 'area', fetch only AREA
+    if (entityTypeParam === 'area') {
+      const areaData = await getAreaRSC(id)
+      if (areaData?.area != null) {
+        galleryData = formatAreaData(areaData.area)
+      } else {
+        notFound()
+      }
+    } else if (entityTypeParam === 'climb') {
+      // If type param is 'climb', fetch only CLIMB
+      const climbData = await getClimbByIdRSC(id)
+      if (climbData != null) {
+        galleryData = formatClimbData(climbData)
+      } else {
+        notFound()
+      }
+    } else {
+      // If no type param or invalid, try to fetch both AREA and CLIMB
+      const areaData = await getAreaRSC(id)
+      if (areaData?.area != null) {
+        galleryData = formatAreaData(areaData.area)
+      } else {
+        const climbData = await getClimbByIdRSC(id)
+        if (climbData != null) {
+          galleryData = formatClimbData(climbData)
+        }
+      }
+    }
+  } catch (error) {
+    console.error(`Gallery data fetch failed for ID ${id}:`, error)
+    notFound()
+  }
+  // if no galleryData, show notFound
+  if (galleryData === null) {
+    notFound()
+  }
+
+  const { name: entityName, photos: photoList, pageUrl: entityPageUrl, type: entityType } = galleryData
+
+  return (
+    <Suspense fallback={<LoadingGridState />}>
+      <div className='container mx-auto px-4 py-8'>
+        <h1 className='text-3xl font-bold mb-2'>Photo Gallery for {entityName}</h1>
+        <p className='mb-4 text-secondary'>
+          <Link href={entityPageUrl} className='link-hover'>
+            &larr; Back to {entityName} {entityType} page
+          </Link>
+        </p>
+
+        {photoList.length === 0
+          ? (
+            <div className='mt-8 p-4 bg-gray-100 rounded-lg text-center text-gray-600'>
+              <p>No photos have been uploaded for this {entityType} yet.</p>
+              <p><strong>TODO: Add a CTA to upload photos</strong></p>
+            </div>
+            )
+          : (
+            <div className='mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4'>
+              {photoList.map((photo, index) => {
+                const imageAltText = `Photo ${index + 1} for ${entityName} (${entityType}) - ID: ${photo.id}`
+
+                return (
+                  <Link
+                    key={photo.id}
+                    href={`/gallery/p/${id}/${photo.id}?type=${entityType}`}
+                    className='relative aspect-square block bg-gray-100 rounded-lg overflow-hidden group'
+                  >
+                    <Image
+                      src={photo.mediaUrl}
+                      alt={imageAltText}
+                      fill
+                      sizes='(min-width: 1024px) 25vw, (min-width: 768px) 33vw, (min-width: 640px) 50vw, 100vw'
+                      className='object-cover transition-transform duration-300 ease-in-out group-hover:scale-105'
+                      priority={index < 4}
+                    />
+                  </Link>
+                )
+              })}
+            </div>
+            )}
+      </div>
+    </Suspense>
+  )
+}
+
+function LoadingGridState (): JSX.Element {
+  return (
+    <div className='container mx-auto px-4 py-8'>
+      <div className='animate-pulse'>
+        <div className='h-8 bg-gray-200 rounded w-3/4 mb-2' />
+        <div className='h-4 bg-gray-200 rounded w-1/4 mb-8' />
+        <div className='mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4'>
+          {[...Array(8)].map((_, index) => (
+            <div key={index} className='aspect-square bg-gray-200 rounded-lg' />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/(default)/gallery/components/CardContentPlaceholder.tsx b/src/app/(default)/gallery/components/CardContentPlaceholder.tsx
new file mode 100644
index 000000000..5d2c89c8a
--- /dev/null
+++ b/src/app/(default)/gallery/components/CardContentPlaceholder.tsx
@@ -0,0 +1,17 @@
+import ContentLoader from 'react-content-loader'
+
+export const CardContentPlaceholder: React.FC<{ uniqueKey?: string }> = (props) => (
+  <ContentLoader
+    uniqueKey={props.uniqueKey}
+    height={500}
+    speed={0}
+    backgroundColor='rgb(243 244 246)'
+    viewBox='0 0 300 400'
+    {...props}
+  >
+    <circle cx='30' cy='30' r='15' />
+    <rect x='58' y='24' rx='2' ry='2' width='140' height='10' />
+    <rect x='15' y='80' rx='10' ry='10' width='80' height='16' />
+    <rect x='105' y='80' rx='10' ry='10' width='80' height='16' />
+  </ContentLoader>
+)
diff --git a/src/app/(default)/gallery/components/DesktopModal.tsx b/src/app/(default)/gallery/components/DesktopModal.tsx
new file mode 100644
index 000000000..c034069b2
--- /dev/null
+++ b/src/app/(default)/gallery/components/DesktopModal.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import * as Dialog from '@radix-ui/react-dialog'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+import React, { ReactElement } from 'react'
+import { Button, ButtonVariant } from '@/components/ui/BaseButton'
+
+interface DesktopModalProps {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  mediaContainer: JSX.Element | null
+  rhsContainer: ReactElement
+  controlContainer?: JSX.Element | null
+  dialogTitle?: string
+}
+
+/**
+ * Full screen photo viewer using Radix UI Dialog
+ * Layout: Media on left/main, RHS panel for info, optional controls.
+ */
+export default function DesktopModal ({
+  isOpen,
+  onOpenChange,
+  mediaContainer,
+  rhsContainer,
+  controlContainer = null,
+  dialogTitle = 'Gallery Viewer'
+}: DesktopModalProps): JSX.Element {
+  return (
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={onOpenChange}
+    >
+      <Dialog.Portal>
+        <Dialog.Overlay
+          className='fixed inset-0 z-40 bg-black/70 backdrop-blur-sm data-[state=open]:animate-overlayShow'
+        />
+        <Dialog.Content
+          onEscapeKeyDown={() => onOpenChange(false)}
+          onPointerDownOutside={() => onOpenChange(false)}
+          className='fixed left-1/2 top-1/2 z-50 flex h-[90vh] w-[95vw] max-w-screen-2xl -translate-x-1/2 -translate-y-1/2 items-stretch bg-neutral text-neutral-content shadow-lg data-[state=open]:animate-contentShow focus:outline-none sm:rounded-lg overflow-hidden'
+        >
+          <Dialog.Title className='sr-only'>{dialogTitle}</Dialog.Title>
+
+          <div className='flex h-full w-full flex-col lg:flex-row'>
+            <div className='relative flex-grow bg-black flex items-center justify-center overflow-hidden p-2 lg:p-0'>
+              {mediaContainer}
+            </div>
+            <Dialog.Description asChild>
+              <div className='w-full lg:w-[350px] xl:w-[400px] shrink-0 bg-base-100 text-base-content h-auto max-h-[50vh] lg:max-h-full lg:h-full flex flex-col border-t lg:border-t-0 lg:border-l border-base-300 overflow-y-auto'>
+                {rhsContainer}
+              </div>
+            </Dialog.Description>
+          </div>
+
+          <Dialog.Close asChild>
+            <Button
+              ariaLabel='Close dialog'
+              label={<XMarkIcon className='h-5 w-5' />}
+              variant={ButtonVariant.ROUNDED_ICON_SOLID}
+            />
+          </Dialog.Close>
+
+          {controlContainer != null && (
+            <div className='absolute bottom-4 left-1/2 z-10 -translate-x-1/2 flex justify-center'>
+              {controlContainer}
+            </div>
+          )}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
diff --git a/src/app/(default)/gallery/components/InfoContainer.tsx b/src/app/(default)/gallery/components/InfoContainer.tsx
new file mode 100644
index 000000000..ec816884a
--- /dev/null
+++ b/src/app/(default)/gallery/components/InfoContainer.tsx
@@ -0,0 +1,55 @@
+import { ReactElement } from 'react'
+import TagList from '@/components/media/TagList'
+import { LightBulbIcon } from '@heroicons/react/24/outline'
+import { MediaWithTags } from '@/js/types'
+import { WithPermission } from '@/js/types/User'
+
+interface InfoContainerProps {
+  currentImage: MediaWithTags | null
+  auth: WithPermission
+  keyboardTip?: boolean
+  onClose?: () => void
+}
+
+export const InfoContainer = ({ currentImage, auth, keyboardTip = true, onClose }: InfoContainerProps): ReactElement | null => {
+  if (currentImage == null) return null
+
+  const { entityTags } = currentImage
+  const tagCount = entityTags.length
+  return (
+    <>
+      <div className='my-8'>
+        <div className='text-primary text-sm'>
+          Tags: {tagCount === 0 && <span className='text-tertiary'>none</span>}
+        </div>
+        {tagCount > 0 &&
+          <TagList
+            mediaWithTags={currentImage}
+            {...auth}
+            showDelete
+            className='my-2'
+          />}
+      </div>
+
+      {tagCount === 0 &&
+        <div className='my-8 text-secondary flex items-center space-x-1'>
+          <LightBulbIcon className='w-6 h-6 stroke-1 stroke-ob-primary' />
+          <span className='mt-1 text-xs'>Your tags help others learn more about the crag</span>
+        </div>}
+
+      <div className='flex-1' />
+      {keyboardTip &&
+        <div className='mb-2 flex flex-col gap-4 text-sm text-base-300 font-semibold'>
+          <div> Keyboard shortcuts:</div>
+          <div className='flex flex-col gap-2'>
+            <span><kbd className='mr-2 kbd'>◀︎</kbd>PREVIOUS</span>
+            <span><kbd className='mr-2 kbd'>▶︎</kbd>NEXT</span>
+          </div>
+        </div>}
+      {auth.isAuthorized &&
+        <div className='my-8 flex items-center hover:bg-rose-50 p-2 rounded-lg transition'>
+          <div className='text-primary text-sm flex-1'>Enable <b>Power mode</b> to delete this image</div>
+        </div>}
+    </>
+  )
+}
diff --git a/src/app/(default)/gallery/components/Modal.tsx b/src/app/(default)/gallery/components/Modal.tsx
new file mode 100644
index 000000000..0e94919fb
--- /dev/null
+++ b/src/app/(default)/gallery/components/Modal.tsx
@@ -0,0 +1,192 @@
+'use client'
+
+import Image from 'next/image'
+import React, { useEffect, useRef } from 'react'
+import useEmblaCarousel from 'embla-carousel-react'
+import Link from 'next/link'
+import downloadPhoto from '../util/downloadPhoto'
+import { MediaWithTags } from '@/js/types'
+import {
+  usePrevNextButtons,
+  PrevButton as EmblaPrevButton,
+  NextButton as EmblaNextButton
+} from '@/components/carousel/useNextPrevButtons'
+import { Download, Share } from '@phosphor-icons/react'
+
+export interface SharedModalProps {
+  index: number
+  images?: MediaWithTags[]
+  changePhotoId: (newVal: number) => void
+  closeModal: () => void
+  navigation: boolean
+  currentPhoto?: MediaWithTags
+  direction?: number
+}
+
+export default function SharedModal ({
+  index,
+  images,
+  changePhotoId,
+  navigation
+}: SharedModalProps): JSX.Element | null {
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: true,
+    align: 'center',
+    skipSnaps: false,
+    startIndex: index
+  })
+
+  const currentThumbnailRef = useRef<HTMLButtonElement>(null)
+
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick
+  } = usePrevNextButtons(emblaApi)
+
+  useEffect(() => {
+    if (emblaApi == null) return
+
+    const handleEmblaSlideSelect = (): void => {
+      const newSelectedSnap = emblaApi.selectedScrollSnap()
+      if (newSelectedSnap !== index) {
+        console.log(`SharedModal: Embla selected snap ${newSelectedSnap}, current prop index ${index}. Calling changePhotoId.`)
+        changePhotoId(newSelectedSnap)
+      }
+    }
+
+    emblaApi.on('select', handleEmblaSlideSelect)
+    emblaApi.on('reInit', handleEmblaSlideSelect)
+
+    return () => {
+      if (emblaApi != null) {
+        emblaApi.off('select', handleEmblaSlideSelect)
+        emblaApi.off('reInit', handleEmblaSlideSelect)
+      }
+    }
+  }, [emblaApi, changePhotoId, index])
+
+  useEffect(() => {
+    if (emblaApi != null && emblaApi.selectedScrollSnap() !== index) {
+      console.log(`SharedModal: Index prop changed to ${index}, Embla at ${emblaApi.selectedScrollSnap()}. Scrolling Embla.`)
+      emblaApi.scrollTo(index, true)
+      changePhotoId(index)
+    }
+  }, [index, emblaApi])
+
+  useEffect(() => {
+    if (currentThumbnailRef.current != null) {
+      currentThumbnailRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'center'
+      })
+    }
+  }, [index])
+
+  const currentImage = images?.[index]
+
+  if (images == null || images.length === 0) {
+    return <div className='flex items-center justify-center h-full text-white/70 bg-black'>No images provided.</div>
+  }
+
+  if (currentImage == null) {
+    console.warn(`SharedModal: currentImage is null. Index: ${index}, Images count: ${images.length}`)
+    return <div className='flex items-center justify-center h-full text-white/70 bg-black'>Image not found or invalid index.</div>
+  }
+
+  const fullSizeImageUrl = currentImage.mediaUrl
+
+  return (
+    <div className='relative flex flex-col justify-center items-center w-full h-full'>
+      <div className='embla overflow-hidden relative w-full max-w-7xl aspect-[3/2]' ref={emblaRef}>
+        <div className='embla__container flex h-full'>
+          {images.map((image, i) => (
+            <div className='embla__slide flex-[0_0_100%] min-w-0 relative flex justify-center items-center' key={image.id}>
+              <Image
+                src={image.mediaUrl}
+                fill
+                style={{ objectFit: 'contain' }}
+                priority={i === index}
+                alt={`Image ${i + 1}`}
+                onError={() => console.error(`Failed to load image: ${image.id}`)}
+                sizes='(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 60vw'
+              />
+            </div>
+          ))}
+        </div>
+
+        {navigation && images.length > 1 && (
+          <div className='embla__controls absolute inset-0 flex items-center justify-between px-1 md:px-3 pointer-events-none'>
+            <div className='pointer-events-auto'>
+              <EmblaPrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
+            </div>
+            <div className='pointer-events-auto'>
+              <EmblaNextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className='absolute inset-x-0 top-0 mx-auto max-w-7xl opacity-100'>
+        <div className='relative w-full h-0'>
+          <div className='absolute top-0 right-0 flex items-center gap-2 p-3'>
+            {navigation && fullSizeImageUrl != null && (
+              <Link
+                href={fullSizeImageUrl}
+                className='btn btn-sm btn-circle btn-ghost backdrop-blur-sm bg-black/30 hover:bg-black/50 text-white'
+                target='_blank' title='Open fullsize version' rel='noreferrer' aria-label='Open fullsize image in new tab'
+              >
+                <Share className='h-5 w-5' />
+              </Link>
+            )}
+            <button
+              onClick={() => {
+                if (fullSizeImageUrl != null && currentImage.id != null) {
+                  downloadPhoto(fullSizeImageUrl, `${currentImage.id}.jpg`)
+                }
+              }}
+              disabled={fullSizeImageUrl == null}
+              className='btn btn-sm btn-circle btn-ghost backdrop-blur-sm bg-black/30 hover:bg-black/50 text-white disabled:opacity-50'
+              title='Download fullsize version' aria-label='Download fullsize image'
+            >
+              <Download className='h-5 w-5' />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {navigation && images.length > 1 && (
+        <div className='absolute bottom-0 left-0 right-0 z-10 w-full overflow-hidden bg-gradient-to-b from-black/0 to-black/60 pb-4 pt-4'>
+          <div className='mx-auto flex h-16 items-center justify-start gap-2 overflow-x-auto px-4 scroll-smooth scrollbar-hide'>
+            {images.map((image, i) => {
+              const isActive = i === index
+              return (
+                <button
+                  ref={isActive ? currentThumbnailRef : null}
+                  key={image.id}
+                  onClick={() => {
+                    if (emblaApi != null) {
+                      emblaApi.scrollTo(i)
+                    }
+                  }}
+                  className={`btn btn-ghost btn-square h-14 w-20 flex-shrink-0 p-0 overflow-hidden relative transition-transform duration-150 ease-in-out ${isActive ? 'scale-110 border-2 border-white' : 'scale-100 opacity-60 hover:opacity-100'}`}
+                  aria-label={`Go to image ${i + 1}`}
+                  aria-current={isActive ? 'true' : 'false'}
+                >
+                  <Image
+                    alt={`Thumbnail image ${i + 1}`}
+                    width={100} height={75}
+                    className='h-full w-full object-cover'
+                    src={image.mediaUrl}
+                  />
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/app/(default)/gallery/components/PhotoDialogWrapper.tsx b/src/app/(default)/gallery/components/PhotoDialogWrapper.tsx
new file mode 100644
index 000000000..c25882ae4
--- /dev/null
+++ b/src/app/(default)/gallery/components/PhotoDialogWrapper.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+import React from 'react'
+import SlideViewer from './SlideViewer'
+import { MediaWithTags } from '@/js/types'
+import { WithPermission } from '@/js/types/User'
+
+interface PhotoDialogWrapperProps {
+  images: MediaWithTags[]
+  currentIndex: number
+  uuid: string
+  type: 'area' | 'climb'
+  entityName?: string
+  userinfoData: { name?: string }
+  authData: WithPermission
+}
+
+export default function PhotoDialogWrapper ({
+  images,
+  currentIndex,
+  uuid,
+  type,
+  entityName,
+  userinfoData,
+  authData
+}: PhotoDialogWrapperProps): JSX.Element | null {
+  const userinfoElement = (userinfoData?.name != null && userinfoData.name !== '') ? <span>Uploaded by: {userinfoData.name}</span> : <></>
+  const dialogTitleForSlideViewer = (entityName != null && entityName !== '') ? entityName : undefined
+
+  if (images == null || images.length === 0) {
+    return (
+      <SlideViewer
+        initialIndex={-1}
+        imageList={[]}
+        userinfo={userinfoElement}
+        auth={authData}
+        galleryType={type}
+        dialogTitle={dialogTitleForSlideViewer != null ? dialogTitleForSlideViewer : 'Gallery Error'}
+        uuid={uuid}
+      />
+    )
+  }
+
+  return (
+    <SlideViewer
+      initialIndex={currentIndex}
+      imageList={images}
+      userinfo={userinfoElement}
+      auth={authData}
+      galleryType={type}
+      dialogTitle={dialogTitleForSlideViewer}
+      uuid={uuid}
+    />
+  )
+}
diff --git a/src/app/(default)/gallery/components/RhsContainer.tsx b/src/app/(default)/gallery/components/RhsContainer.tsx
new file mode 100644
index 000000000..ef213acc8
--- /dev/null
+++ b/src/app/(default)/gallery/components/RhsContainer.tsx
@@ -0,0 +1,29 @@
+import { ReactElement } from 'react'
+import { CardContentPlaceholder } from './CardContentPlaceholder'
+
+interface RhsContainerProps {
+  loaded: boolean
+  userinfo: ReactElement
+  content: ReactElement
+  footer?: null | ReactElement
+}
+
+export const RhsContainer = ({ loaded, userinfo, content, footer = null }: RhsContainerProps): React.ReactNode => {
+  return loaded
+    ? (
+      <div className='flex flex-col justify-start h-[inherit] lg:max-w-[400px] min-w-[350px] bg-white'>
+        <div className='grow flex-col flex'>
+          <div className='border-b px-4 py-4'>
+            {userinfo}
+          </div>
+          <div className='px-4 grow flex flex-col'>
+            {content}
+          </div>
+        </div>
+        <div className='border-t'>
+          {footer}
+        </div>
+      </div>
+      )
+    : (<CardContentPlaceholder uniqueKey='1' />)
+}
diff --git a/src/app/(default)/gallery/components/SlideViewer.tsx b/src/app/(default)/gallery/components/SlideViewer.tsx
new file mode 100644
index 000000000..7021c00a2
--- /dev/null
+++ b/src/app/(default)/gallery/components/SlideViewer.tsx
@@ -0,0 +1,139 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { MediaWithTags } from '@/js/types'
+import { WithPermission } from '@/js/types/User'
+import DesktopModal from './DesktopModal'
+import SharedModal from './Modal'
+import { InfoContainer } from './InfoContainer'
+import { RhsContainer } from './RhsContainer'
+import AddTagCta from '@/components/media/slideshow/AddTagCta'
+
+interface SlideViewerProps {
+  initialIndex: number
+  imageList: MediaWithTags[]
+  userinfo: JSX.Element
+  auth: WithPermission
+  galleryType: 'area' | 'climb' | 'user'
+  dialogTitle?: string
+  uuid: string
+}
+
+export default function SlideViewer ({
+  initialIndex,
+  imageList,
+  userinfo,
+  auth,
+  galleryType,
+  dialogTitle,
+  uuid
+}: SlideViewerProps): JSX.Element | null {
+  const router = useRouter()
+  const [isModalOpen, setIsModalOpen] = useState(true)
+  const currentImage = (imageList != null && imageList.length > 0 && initialIndex >= 0 && initialIndex < imageList.length)
+    ? imageList[initialIndex]
+    : null
+  const hotkeysEnabled = isModalOpen && currentImage != null
+
+  const internalNavigate = (newIndex: number): void => {
+    if (imageList != null && newIndex >= 0 && newIndex < imageList.length) {
+      const newPhoto = imageList[newIndex]
+      if (newPhoto?.id != null && newPhoto.id !== '') {
+        router.push(`/gallery/p/${uuid}/${newPhoto.id}?type=${galleryType}`)
+      }
+    }
+  }
+
+  const handleModalOpenChange = (open: boolean): void => {
+    setIsModalOpen(open)
+    if (!open) {
+      router.back()
+    }
+  }
+
+  useHotkeys('left', () => {
+    if (currentImage != null && initialIndex > 0) {
+      internalNavigate(initialIndex - 1)
+    }
+  }, { enabled: hotkeysEnabled }, [initialIndex, internalNavigate, hotkeysEnabled, currentImage])
+
+  useHotkeys('right', () => {
+    if (currentImage != null && imageList != null && initialIndex < imageList.length - 1) {
+      internalNavigate(initialIndex + 1)
+    }
+  }, { enabled: hotkeysEnabled }, [initialIndex, imageList, internalNavigate, hotkeysEnabled, currentImage])
+
+  if (!isModalOpen) {
+    return null
+  }
+
+  if (imageList == null || imageList.length === 0) {
+    return (
+      <DesktopModal
+        isOpen={isModalOpen}
+        onOpenChange={handleModalOpenChange}
+        dialogTitle='Error'
+        mediaContainer={<div className='flex items-center justify-center h-full text-neutral-content/50'>No images available.</div>}
+        rhsContainer={<div>Please select a gallery.</div>}
+      />
+    )
+  }
+
+  const mediaContainerContent = currentImage != null
+    ? (
+      <SharedModal
+        index={initialIndex}
+        closeModal={() => handleModalOpenChange(false)}
+        images={imageList}
+        changePhotoId={internalNavigate}
+        navigation
+      />
+      )
+    : (
+      <div className='flex items-center justify-center h-full text-neutral-content/50'>
+        Image not found or invalid index.
+      </div>
+      )
+
+  // const controlContainerContent = (imageList.length > 1) ? ( // imageList confirmed non-null & non-empty
+  //   <div className='flex gap-2'>
+  //     <button className='btn btn-primary btn-sm' onClick={() => internalNavigate(initialIndex - 1)} disabled={initialIndex <= 0}>Prev</button>
+  //     <button className='btn btn-primary btn-sm' onClick={() => internalNavigate(initialIndex + 1)} disabled={initialIndex >= imageList.length - 1}>Next</button>
+  //   </div>
+  // ) : null'
+
+  const effectiveDialogTitle = (currentImage != null && imageList.length > 0)
+    ? `${(dialogTitle != null && dialogTitle !== '') ? dialogTitle : 'Gallery'}: Image ${initialIndex + 1} of ${imageList.length}`
+    : ((dialogTitle != null && dialogTitle !== '') ? dialogTitle : 'Gallery')
+
+  const rhsFooterContent = (currentImage?.entityTags != null)
+    ? (
+      <AddTagCta tagCount={currentImage.entityTags.length} auth={auth} />
+      )
+    : null
+
+  return (
+    <DesktopModal
+      isOpen={isModalOpen}
+      onOpenChange={handleModalOpenChange}
+      dialogTitle={effectiveDialogTitle}
+      mediaContainer={mediaContainerContent}
+      rhsContainer={
+        <RhsContainer
+          loaded={currentImage != null}
+          userinfo={userinfo}
+          content={
+            <InfoContainer
+              currentImage={currentImage}
+              auth={auth}
+            />
+          }
+          footer={rhsFooterContent}
+        />
+      }
+      // controlContainer={controlContainerContent}
+    />
+  )
+}
diff --git a/src/app/(default)/gallery/layout.tsx b/src/app/(default)/gallery/layout.tsx
new file mode 100644
index 000000000..44254c745
--- /dev/null
+++ b/src/app/(default)/gallery/layout.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default function GalleryLayout ({
+  children,
+  modal
+}: {
+  children: React.ReactNode
+  modal: React.ReactNode
+}): JSX.Element {
+  return (
+    <>
+      {children}
+      {modal}
+    </>
+  )
+}
diff --git a/src/app/(default)/gallery/p/[uuid]/[photoId]/page.tsx b/src/app/(default)/gallery/p/[uuid]/[photoId]/page.tsx
new file mode 100644
index 000000000..206216921
--- /dev/null
+++ b/src/app/(default)/gallery/p/[uuid]/[photoId]/page.tsx
@@ -0,0 +1,128 @@
+import Link from 'next/link'
+import Image from 'next/image'
+import { notFound } from 'next/navigation'
+import { getAreaPageFriendlyUrl, getClimbPageFriendlyUrl } from '@/js/utils'
+import { getEntityDataForPhotoDisplay } from '@/app/(default)/gallery/util/galleryUtils'
+
+interface PhotoPageProps {
+  params: {
+    uuid: string
+    photoId: string
+  }
+  searchParams?: {
+    type?: 'area' | 'climb'
+  }
+}
+
+// Server component to display a single photo as a fallback for the modal
+export default async function PhotoPage ({ params, searchParams }: PhotoPageProps): Promise<JSX.Element> {
+  const { uuid, photoId: currentPhotoId } = params
+  const entityType = searchParams?.type
+
+  if (uuid === undefined || currentPhotoId === undefined || (entityType !== 'area' && entityType !== 'climb')) {
+    console.error('PhotoParamsPage: Missing critical parameters.', { params, searchParams })
+    notFound()
+  }
+
+  const entityData = await getEntityDataForPhotoDisplay(uuid, entityType)
+
+  if ((entityData == null) || entityData.photos == null || entityData.photos.length === 0) {
+    console.warn(`PhotoParamsPage: No photos found for entity ${uuid} (type: ${entityType}).`)
+    notFound()
+  }
+
+  const photos = entityData.photos
+  const currentIndex = photos.findIndex((p) => p.id === currentPhotoId)
+
+  if (currentIndex === -1) {
+    console.warn(`PhotoParamsPage: Photo ID ${currentPhotoId} not found in entity ${uuid}.`)
+    notFound()
+  }
+
+  const currentPhoto = photos[currentIndex]
+  const prevPhoto = currentIndex > 0 ? photos[currentIndex - 1] : null
+  const nextPhoto = currentIndex < photos.length - 1 ? photos[currentIndex + 1] : null
+
+  // Determine the URL back to the main gallery for this entity
+  const galleryListUrl = entityType === 'area'
+    ? getAreaPageFriendlyUrl(entityData.id, entityData.name)
+    : getClimbPageFriendlyUrl(entityData.id, entityData.name)
+
+  return (
+    <div className='container mx-auto h-full px-4 py-8 flex flex-col items-center'>
+      <div className='w-full max-w-5xl'>
+        <div className='mb-4 flex justify-between items-center'>
+          <Link href={galleryListUrl} className='text-blue-600 hover:underline'>
+            &larr; Back to {entityData.name} Gallery
+          </Link>
+          <h1 className='text-2xl font-bold text-center'>
+            {entityData.name} - Photo {currentIndex + 1} of {photos.length}
+          </h1>
+          {/* Placeholder for equal spacing or other actions */}
+          <div style={{ width: 'calc(env(safe-area-inset-left) + 100px)' }} />
+
+        </div>
+
+        {/* Basic Image Display */}
+        <div className='relative w-full aspect-[3/2] bg-gray-200 rounded-lg overflow-hidden mb-4'>
+          {currentPhoto.mediaUrl !== undefined && (
+            <Image
+              src={currentPhoto.mediaUrl}
+              alt={`Photo ${currentIndex + 1} for ${entityData.name}`}
+              fill
+              className='object-contain'
+              priority
+            />
+          )}
+        </div>
+
+        {/* Basic Next/Previous Navigation */}
+        <div className='flex justify-between items-center'>
+          {(prevPhoto != null)
+            ? (
+              <Link
+                href={`/gallery/p/${uuid}/${prevPhoto.id}?type=${entityType}`}
+                className='px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded text-gray-800'
+              >
+                &larr; Previous
+              </Link>
+              )
+            : (
+              <div className='px-4 py-2 invisible'>Previous</div>
+              )}
+
+          {(nextPhoto != null)
+            ? (
+              <Link
+                href={`/gallery/p/${uuid}/${nextPhoto.id}?type=${entityType}`}
+                className='px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded text-gray-800'
+              >
+                Next &rarr;
+              </Link>
+              )
+            : (
+              <div className='px-4 py-2 invisible'>Next</div>
+              )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export async function generateMetadata ({ params, searchParams }: PhotoPageProps): Promise<{ title: string, description?: string }> {
+  const { uuid, photoId } = params
+  const entityType = searchParams?.type
+
+  if (uuid === undefined || photoId === undefined || (entityType !== 'area' && entityType !== 'climb')) return { title: 'Photo' }
+
+  const entityData = await getEntityDataForPhotoDisplay(uuid, entityType)
+  if ((entityData == null) || entityData.photos == null || entityData.photos.length === 0) return { title: `Gallery - ${entityData?.name !== undefined ? entityData.name : uuid}` }
+
+  const currentPhoto = entityData.photos.find(p => p.id === photoId)
+  const photoTitle = (currentPhoto != null) ? `Photo of ${entityData.name}` : `${entityData.name} Gallery`
+
+  return {
+    title: `${photoTitle} (ID: ${photoId.substring(0, 8)})`,
+    description: `View photo for ${entityData.name} (${entityType})`
+  }
+}
diff --git a/src/app/(default)/gallery/util/downloadPhoto.ts b/src/app/(default)/gallery/util/downloadPhoto.ts
new file mode 100644
index 000000000..ea1e8ed15
--- /dev/null
+++ b/src/app/(default)/gallery/util/downloadPhoto.ts
@@ -0,0 +1,27 @@
+function forceDownload (blobUrl: string, filename: string): void {
+  const a: any = document.createElement('a')
+  a.download = filename
+  a.href = blobUrl
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+}
+
+export default function downloadPhoto (url: string, filename: string): void {
+  if (filename !== '') {
+    const splitUrl = url.split('\\').pop()?.split('/')
+    filename = splitUrl !== undefined ? (splitUrl.pop() ?? '') : ''
+  }
+  fetch(url, {
+    headers: new Headers({
+      Origin: location.origin
+    }),
+    mode: 'cors'
+  })
+    .then(async (response) => await response.blob())
+    .then((blob) => {
+      const blobUrl = window.URL.createObjectURL(blob)
+      forceDownload(blobUrl, filename)
+    })
+    .catch((e) => console.error(e))
+}
diff --git a/src/app/(default)/gallery/util/galleryUtils.ts b/src/app/(default)/gallery/util/galleryUtils.ts
new file mode 100644
index 000000000..b86dba541
--- /dev/null
+++ b/src/app/(default)/gallery/util/galleryUtils.ts
@@ -0,0 +1,71 @@
+import { getAreaRSC } from '@/js/graphql/getAreaRSC'
+import { getClimbByIdRSC } from '@/js/graphql/getClimbRSC'
+import { MediaWithTags } from '@/js/types'
+import { getAreaPageFriendlyUrl, getClimbPageFriendlyUrl } from '@/js/utils'
+
+interface EntityGalleryData {
+  id: string
+  name: string
+  photos: MediaWithTags[]
+  pageUrl: string
+  type: 'area' | 'climb'
+}
+
+type AreaDataRSC = NonNullable<Awaited<ReturnType<typeof getAreaRSC>>['area']>
+type ClimbDataRSC = NonNullable<Awaited<ReturnType<typeof getClimbByIdRSC>>>
+
+const formatAreaData = (area: AreaDataRSC): EntityGalleryData => {
+  return {
+    type: 'area',
+    id: area.uuid,
+    name: area.areaName,
+    photos: area.media,
+    pageUrl: getAreaPageFriendlyUrl(area.uuid, area.areaName)
+  }
+}
+
+const formatClimbData = (climb: ClimbDataRSC): EntityGalleryData => {
+  return {
+    type: 'climb',
+    id: climb.id,
+    name: climb.name,
+    photos: climb.media,
+    pageUrl: getClimbPageFriendlyUrl(climb.id, climb.name)
+  }
+}
+
+// Main Data Fetcher Utility
+export async function getEntityDataForPhotoDisplay (
+  entityId: string,
+  entityType: 'area' | 'climb'
+): Promise<EntityGalleryData | null> {
+  if (entityId === undefined || (entityType !== 'area' && entityType !== 'climb')) {
+    console.error('getEntityDataForPhotoDisplay: entityId or entityType is missing.')
+    return null
+  }
+
+  let galleryData: EntityGalleryData | null = null
+
+  try {
+    if (entityType === 'area') {
+      const areaDataContainer = await getAreaRSC(entityId)
+      if ((areaDataContainer?.area) != null) {
+        galleryData = formatAreaData(areaDataContainer.area)
+      }
+    } else if (entityType === 'climb') {
+      const climbData = await getClimbByIdRSC(entityId)
+      if (climbData != null) {
+        galleryData = formatClimbData(climbData)
+      }
+    }
+  } catch (error) {
+    console.error(`Failed to fetch or format data for ${entityType} ${entityId}:`, error)
+    return null
+  }
+
+  if (galleryData == null) {
+    console.warn(`No gallery data resolved for ${entityType} ${entityId}.`)
+  }
+
+  return galleryData
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 8056852fb..2e79f6fe1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -37,6 +37,32 @@ module.exports = {
       },
       screens: {
         '3xl': '2560px'
+      },
+      animation: {
+        // For Dialog Overlay
+        overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        overlayHide: 'overlayHide 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        // For Dialog Content
+        contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        contentHide: 'contentHide 150ms cubic-bezier(0.16, 1, 0.3, 1)'
+      },
+      keyframes: {
+        overlayShow: {
+          from: { opacity: '0' },
+          to: { opacity: '1' }
+        },
+        overlayHide: {
+          from: { opacity: '1' },
+          to: { opacity: '0' }
+        },
+        contentShow: {
+          from: { opacity: '0', transform: 'translate(-50%, -48%) scale(0.96)' },
+          to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' }
+        },
+        contentHide: {
+          from: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
+          to: { opacity: '0', transform: 'translate(-50%, -48%) scale(0.96)' }
+        }
       }
     }
   },