diff --git a/app/@modal/(.)gallery/[...uuid]/page.tsx b/app/@modal/(.)gallery/[uuid]/page.tsx
similarity index 93%
rename from app/@modal/(.)gallery/[...uuid]/page.tsx
rename to app/@modal/(.)gallery/[uuid]/page.tsx
index 70372016..823b74f9 100644
--- a/app/@modal/(.)gallery/[...uuid]/page.tsx
+++ b/app/@modal/(.)gallery/[uuid]/page.tsx
@@ -6,12 +6,12 @@ import {graphqlClient} from "@lib/gql/gql-client"
 import {notFound} from "next/navigation"
 
 type Props = {
-  params: Promise<{uuid: string[]}>
+  params: Promise<{uuid: string}>
 }
 
 const Page = async (props: Props) => {
   const params = await props.params
-  const [paragraphId, mediaUuid] = params.uuid
+  const [paragraphId, mediaUuid] = decodeURIComponent(params.uuid).split(":")
 
   const paragraphQuery = await graphqlClient().Paragraph({uuid: paragraphId})
   if (paragraphQuery.paragraph?.__typename !== "ParagraphStanfordGallery") notFound()
@@ -58,7 +58,7 @@ const Page = async (props: Props) => {
                     <li className="mr-auto">
                       <Link
                         className="text-white no-underline hocus:text-white hocus:underline"
-                        href={`/gallery/${paragraph.id}/${paragraph.suGalleryImages?.[prevImageIndex].id}`}
+                        href={`/gallery/${paragraph.id}:${paragraph.suGalleryImages?.[prevImageIndex].id}`}
                         replace={true}
                         scroll={false}
                       >
@@ -70,7 +70,7 @@ const Page = async (props: Props) => {
                     <li className="ml-auto">
                       <Link
                         className="text-white no-underline hocus:text-white hocus:underline"
-                        href={`/gallery/${paragraph.id}/${paragraph.suGalleryImages?.[nextImageIndex].id}`}
+                        href={`/gallery/${paragraph.id}:${paragraph.suGalleryImages?.[nextImageIndex].id}`}
                         replace={true}
                         scroll={false}
                       >
diff --git a/app/gallery/[...uuid]/page.tsx b/app/gallery/[uuid]/page.tsx
similarity index 93%
rename from app/gallery/[...uuid]/page.tsx
rename to app/gallery/[uuid]/page.tsx
index 7fba5fce..dff9bc0c 100644
--- a/app/gallery/[...uuid]/page.tsx
+++ b/app/gallery/[uuid]/page.tsx
@@ -12,12 +12,12 @@ export const metadata = {
 }
 
 type Props = {
-  params: Promise<{uuid: string[]}>
+  params: Promise<{uuid: string}>
 }
 
 const Page = async (props: Props) => {
   const params = await props.params
-  const [paragraphId, mediaUuid] = params.uuid
+  const [paragraphId, mediaUuid] = decodeURIComponent(params.uuid).split(":")
 
   const paragraphQuery = await graphqlClient().Paragraph({uuid: paragraphId})
   if (paragraphQuery.paragraph?.__typename !== "ParagraphStanfordGallery") notFound()
diff --git a/src/components/paragraphs/stanford-gallery/gallery-paragraph.tsx b/src/components/paragraphs/stanford-gallery/gallery-paragraph.tsx
index 7c037d22..0f897ca0 100644
--- a/src/components/paragraphs/stanford-gallery/gallery-paragraph.tsx
+++ b/src/components/paragraphs/stanford-gallery/gallery-paragraph.tsx
@@ -114,7 +114,7 @@ const GalleryImage = ({
     <li {...props}>
       <figure className="h-full w-full">
         <Link
-          href={`/gallery/${galleryId}/${image.id}`}
+          href={`/gallery/${galleryId}:${image.id}`}
           className={twMerge(
             "relative block h-full w-full overflow-hidden border-5 border-white transition-colors hover:border-cardinal-red focus-visible:border-cardinal-red hocus:outline-none",
             linkClasses