diff --git a/next.config.ts b/next.config.ts
index 8583ac6..8f13165 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,11 +1,18 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
-  images: {
-    remotePatterns: [new URL('https://upload.wikimedia.org/**')]
-  },
-  output: "standalone",
+	/* config options here */
+	images: {
+		remotePatterns: [
+			new URL("https://upload.wikimedia.org/**"),
+			{
+				protocol: "https",
+				hostname: "archivebackend.feroxfoxxo.com",
+				pathname: "**",
+			},
+		],
+	},
+	output: "standalone",
 };
 
 export default nextConfig;
diff --git a/src/components/client/memory-content-card.tsx b/src/components/client/memory-content-card.tsx
index e02158c..6e2c02c 100644
--- a/src/components/client/memory-content-card.tsx
+++ b/src/components/client/memory-content-card.tsx
@@ -15,11 +15,13 @@ import {
 } from "lucide-react"
 import {
   Dialog,
+  DialogTitle,
   DialogContent,
   DialogTrigger,
   DialogClose,
 } from "@/components/ui/dialog"
 import { useState } from "react"
+import Image from "next/image"
 
 type MemoryContentCardProps = {
   postId: string
@@ -41,18 +43,25 @@ export const MemoryContentCard = ({ postId }: MemoryContentCardProps) => {
                 className="focus:ring-primary h-full w-full rounded object-cover transition-transform hover:scale-105 focus:ring-2 focus:outline-none"
                 onClick={() => setSelectedImage(fileUrl)}
               >
-                <img
+                <Image
                   src={fileUrl}
                   alt={`Image ${index + 1}`}
                   className="h-full w-full rounded object-cover"
+                  width={400}
+                  height={250}
                 />
               </button>
             </DialogTrigger>
             <DialogContent className="max-h-[90vh] max-w-[90vw] overflow-clip p-0">
-              <img
+              <DialogTitle className="block w-full p-2 text-center">
+                Media
+              </DialogTitle>
+              <Image
                 src={fileUrl}
                 alt={`Image ${index + 1}`}
                 className="h-full w-full object-contain"
+                width={800}
+                height={600}
               />
             </DialogContent>
           </Dialog>
diff --git a/src/components/generic/MemoryCard.tsx b/src/components/generic/MemoryCard.tsx
index 2f14277..fcf992b 100644
--- a/src/components/generic/MemoryCard.tsx
+++ b/src/components/generic/MemoryCard.tsx
@@ -24,6 +24,7 @@ import { useFavouritePost, useUnfavouritePost } from "@/lib/mutations/posts"
 import { cn } from "@/lib/utils"
 import { StarIcon } from "lucide-react"
 import { Button } from "../ui/button"
+import Image from "next/image"
 import Link from "next/link"
 
 dayjs.extend(utc)
@@ -125,21 +126,25 @@ export const MemoryCard: FC<MemoryCardProps> = memo(
                   // NAH YOU SUCK ~ brandon
                   <Dialog key={index}>
                     <DialogTrigger className="max-h-full w-fit flex-shrink-0 odd:hidden">
-                      <img
+                      <Image
                         className="h-40 max-h-full w-fit flex-shrink-0 cursor-pointer rounded"
                         src={`${process.env.NEXT_PUBLIC_API_URL}/api/file/${image.fileName}`}
                         alt={`Image ${index + 1}`}
+                        width={200}
+                        height={125}
                       />
                     </DialogTrigger>
-                    <DialogContent className="flex w-fit min-w-5xl flex-col items-center">
+                    <DialogContent className="flex max-h-[80vh] w-fit min-w-5xl flex-col items-center">
                       <DialogHeader>
                         <DialogTitle>Image</DialogTitle>
                       </DialogHeader>
-                      <img
+                      <Image
                         src={`${process.env.NEXT_PUBLIC_API_URL}/api/file/${image.fileName}`}
                         alt={`Image ${index + 1}`}
                         key={index}
                         className="h-80 max-w-5xl rounded object-cover"
+                        width={800}
+                        height={600}
                       />
                     </DialogContent>
                   </Dialog>
@@ -151,21 +156,25 @@ export const MemoryCard: FC<MemoryCardProps> = memo(
                 .map((image, index) => (
                   <Dialog key={index}>
                     <DialogTrigger className="max-h-full w-fit flex-shrink-0 even:hidden">
-                      <img
-                        className="h-40 max-h-full w-fit flex-shrink-0 cursor-pointer rounded"
+                      <Image
+                        className="max-h-full w-fit flex-shrink-0 cursor-pointer rounded"
                         src={`${process.env.NEXT_PUBLIC_API_URL}/api/file/${image.fileName}`}
                         alt={`Image ${index + 1}`}
+                        width={200}
+                        height={125}
                       />
                     </DialogTrigger>
-                    <DialogContent className="flex w-fit min-w-5xl flex-col items-center">
+                    <DialogContent className="flex max-h-[80vh] w-fit min-w-5xl flex-col items-center overflow-scroll">
                       <DialogHeader>
                         <DialogTitle>Image</DialogTitle>
                       </DialogHeader>
-                      <img
+                      <Image
                         src={`${process.env.NEXT_PUBLIC_API_URL}/api/file/${image.fileName}`}
                         alt={`Image ${index + 1}`}
                         key={index}
-                        className="h-80 max-w-5xl rounded object-cover"
+                        className="max-w-5xl rounded object-cover"
+                        width={800}
+                        height={600}
                       />
                     </DialogContent>
                   </Dialog>