diff --git a/src/app/types/config.ts b/src/app/types/config.ts
index 37e6481..9eed5d3 100644
--- a/src/app/types/config.ts
+++ b/src/app/types/config.ts
@@ -26,10 +26,10 @@ export type Config = {
     /**
      * Social links for this app.
      */
-    socialLinks: SocialLink[];
+    socialLinks: SocialLinkType[];
 };
 
-type SocialLink = {
+export type SocialLinkType = {
     /**
      * The name of this social link.
      */
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 9574586..d51cc1c 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -8,6 +8,7 @@ import { cn } from "@/lib/utils";
 import { ExternalLink } from "lucide-react";
 import SocialLink from "@/components/social-link";
 import config from "@/config";
+import { SocialLinkType } from "@/types/config";
 
 const links = {
     Resources: [
@@ -56,7 +57,7 @@ const Footer = (): ReactElement => (
 
                     {/* Socials */}
                     <div className="pl-1 flex gap-2.5 items-center z-50">
-                        {config.socialLinks.map((link: SocialLink) => (
+                        {config.socialLinks.map((link: SocialLinkType) => (
                             <SocialLink
                                 key={link.name}
                                 className="w-5 h-5"
diff --git a/src/components/mdx.tsx b/src/components/mdx.tsx
index ffe79c6..eb3b4a9 100644
--- a/src/components/mdx.tsx
+++ b/src/components/mdx.tsx
@@ -13,6 +13,7 @@ import {
 import Link from "next/link";
 import { capitalizeWords } from "@/lib/string";
 import ImageViewer from "@/components/image-viewer";
+import Image from "next/image";
 
 const blockquoteStyles: { [key: string]: any } = {
     NOTE: {
@@ -96,10 +97,13 @@ const components = {
     // Media
     img: ({ src, alt }: { src: string; alt: string }): ReactElement => (
         <ImageViewer className="m-2 my-2.5">
-            <img
+            <Image
                 className="ring-1 ring-muted/45 rounded-2xl select-none"
                 src={src}
                 alt={alt}
+                width={1920}
+                height={1080}
+                unoptimized
                 draggable={false}
             />
         </ImageViewer>
diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
index 792ec0b..2c71086 100644
--- a/src/components/navbar/navbar.tsx
+++ b/src/components/navbar/navbar.tsx
@@ -7,6 +7,7 @@ import QuickSearchDialog from "@/components/navbar/search-dialog";
 import Sidebar from "@/components/sidebar/sidebar";
 import SocialLink from "@/components/social-link";
 import config from "@/config";
+import { SocialLinkType } from "@/types/config";
 
 const Navbar = ({ pages }: { pages: DocsContentMetadata[] }): ReactElement => (
     <nav className="fixed left-0 inset-x-0 bg-white/95 dark:bg-white/[0.007] backdrop-saturate-100 backdrop-blur-xl border-b z-50">
@@ -37,8 +38,8 @@ const Navbar = ({ pages }: { pages: DocsContentMetadata[] }): ReactElement => (
                 {/* Social */}
                 <div className="flex gap-5 items-center">
                     {config.socialLinks
-                        .filter((link: SocialLink) => link.navbar)
-                        .map((link: SocialLink) => (
+                        .filter((link: SocialLinkType) => link.navbar)
+                        .map((link: SocialLinkType) => (
                             <SocialLink key={link.name} {...link} />
                         ))}
                 </div>
diff --git a/src/components/social-link.tsx b/src/components/social-link.tsx
index 70d06a0..51b0dd3 100644
--- a/src/components/social-link.tsx
+++ b/src/components/social-link.tsx
@@ -4,8 +4,9 @@ import Image from "next/image";
 import { cn } from "@/lib/utils";
 import Icon from "@/components/ui/icon";
 import { icons } from "lucide-react";
+import { SocialLinkType } from "@/types/config";
 
-type SocialLinkProps = SocialLink & {
+type SocialLinkProps = SocialLinkType & {
     className?: string | undefined;
 };
 
diff --git a/src/components/ui/animated-grid-pattern.tsx b/src/components/ui/animated-grid-pattern.tsx
index 0f82422..26b88fc 100644
--- a/src/components/ui/animated-grid-pattern.tsx
+++ b/src/components/ui/animated-grid-pattern.tsx
@@ -83,14 +83,16 @@ export function GridPattern({
                 });
             }
         });
+        let current = undefined;
 
         if (containerRef.current) {
             resizeObserver.observe(containerRef.current);
+            current = containerRef.current;
         }
 
         return () => {
-            if (containerRef.current) {
-                resizeObserver.unobserve(containerRef.current);
+            if (current) {
+                resizeObserver.unobserve(current);
             }
         };
     }, [containerRef]);