diff --git a/__tests__/components/home/NowMintingDetails.test.tsx b/__tests__/components/home/NowMintingDetails.test.tsx
new file mode 100644
index 0000000000..56c808dac0
--- /dev/null
+++ b/__tests__/components/home/NowMintingDetails.test.tsx
@@ -0,0 +1,81 @@
+import NowMintingDetails from "@/components/home/now-minting/NowMintingDetails";
+import { render, screen } from "@testing-library/react";
+
+jest.mock("next/link", () => ({
+  __esModule: true,
+  default: ({ href, children, ...props }: any) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+jest.mock("@/components/home/now-minting/NowMintingHeader", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+
+jest.mock("@/components/home/now-minting/NowMintingStatsGrid", () => ({
+  __esModule: true,
+  default: () => <div data-testid="stats-grid" />,
+}));
+
+jest.mock("@/components/home/now-minting/NowMintingCountdown", () => ({
+  __esModule: true,
+  default: () => <div data-testid="countdown" />,
+}));
+
+const baseNft = {
+  id: 667,
+  name: "All the roads lead to OM",
+  artist: "Lapis Light",
+  artist_seize_handle: "lapislight",
+  mint_date: new Date("2026-03-01"),
+  floor_price: 1.23456,
+  collection: "The Memes",
+  season: 1,
+};
+
+describe("NowMintingDetails", () => {
+  it("omits file metadata rows when media metadata is missing", () => {
+    render(
+      <NowMintingDetails
+        nft={
+          {
+            ...baseNft,
+            metadata: {},
+          } as any
+        }
+      />
+    );
+
+    expect(screen.queryByText("File type")).not.toBeInTheDocument();
+    expect(screen.queryByText("Dimensions")).not.toBeInTheDocument();
+    expect(screen.getByText("Collection")).toBeInTheDocument();
+    expect(screen.getByText("Season")).toBeInTheDocument();
+  });
+
+  it("renders file metadata rows when image metadata is present", () => {
+    render(
+      <NowMintingDetails
+        nft={
+          {
+            ...baseNft,
+            metadata: {
+              image_details: {
+                format: "PNG",
+                width: 1200,
+                height: 800,
+              },
+            },
+          } as any
+        }
+      />
+    );
+
+    expect(screen.getByText("File type")).toBeInTheDocument();
+    expect(screen.getByText("PNG")).toBeInTheDocument();
+    expect(screen.getByText("Dimensions")).toBeInTheDocument();
+    expect(screen.getByText("1,200 x 800")).toBeInTheDocument();
+  });
+});
diff --git a/__tests__/components/memelab/MemeLabPage.test.tsx b/__tests__/components/memelab/MemeLabPage.test.tsx
index a8b97b373a..df34db0c50 100644
--- a/__tests__/components/memelab/MemeLabPage.test.tsx
+++ b/__tests__/components/memelab/MemeLabPage.test.tsx
@@ -2,11 +2,45 @@ import { SeizeConnectProvider } from "@/components/auth/SeizeConnectContext";
 import MemeLabPageComponent from "@/components/memelab/MemeLabPage";
 import { MEME_FOCUS } from "@/components/the-memes/MemeShared";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { act, render, screen, waitFor } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import React from "react";
 import { createConfig, http, WagmiProvider } from "wagmi";
 import { mainnet } from "wagmi/chains";
 
+jest.mock("react-bootstrap", () => {
+  const actual = jest.requireActual("react-bootstrap");
+  const Carousel = ({ children, onSlide, ...props }: any) => (
+    <div data-testid="carousel" {...props}>
+      <button
+        type="button"
+        data-testid="carousel-slide-0"
+        onClick={() => onSlide?.(0)}
+      />
+      <button
+        type="button"
+        data-testid="carousel-slide-1"
+        onClick={() => onSlide?.(1)}
+      />
+      {children}
+    </div>
+  );
+
+  Carousel.Item = ({ children, ...props }: any) => (
+    <div {...props}>{children}</div>
+  );
+
+  return {
+    ...actual,
+    Carousel,
+  };
+});
+
 // Mock TitleContext
 jest.mock("@/contexts/TitleContext", () => ({
   useTitle: jest.fn(() => ({
@@ -25,6 +59,13 @@ jest.mock("@/components/nft-marketplace-links/NFTMarketplaceLinks", () => ({
   __esModule: true,
   default: () => <div data-testid="marketplace-links" />,
 }));
+
+jest.mock("@/components/download/Download", () => ({
+  __esModule: true,
+  default: ({ href }: { href: string }) => (
+    <div data-testid="download" data-href={href} />
+  ),
+}));
 // Mock Next.js components
 jest.mock("next/link", () => ({
   __esModule: true,
@@ -299,9 +340,9 @@ function createMockTransactions(balance: number) {
   };
 }
 
-function setupMockApiCalls(balance = 1) {
+function setupMockApiCalls(balance = 1, nftOverrides: any = {}) {
   const meta = createMockMeta();
-  const nft = createMockNft();
+  const nft = createMockNft(nftOverrides);
   const transactions = createMockTransactions(balance);
   const activity = { data: [], count: 0 };
 
@@ -317,6 +358,15 @@ function setupMockApiCalls(balance = 1) {
   });
 }
 
+function getCardDetailValue(label: string): string {
+  const labelCell = screen.getByText(label);
+  const row = labelCell.closest("tr");
+  const value = row?.querySelectorAll("td")[1]?.textContent;
+
+  expect(value).toBeTruthy();
+  return value ?? "";
+}
+
 describe("MemeLabPageComponent", () => {
   it("renders without crashing", async () => {
     setupMockApiCalls();
@@ -467,6 +517,146 @@ describe("MemeLabPageComponent", () => {
     );
   });
 
+  it("falls back to top-level media URLs for art links", async () => {
+    mockUseSearchParams.mockReturnValue({
+      get: jest.fn((key: string) => {
+        if (key === "focus") return MEME_FOCUS.THE_ART;
+        return null;
+      }),
+    });
+
+    setupMockApiCalls(1, {
+      image: "https://top-level.example/image.png",
+      animation: "https://top-level.example/animation.mp4",
+      metadata: {
+        attributes: [],
+        image_details: { format: "PNG" },
+        animation_details: { format: "MP4" },
+      },
+    });
+
+    await act(async () => {
+      renderWithQueryClient(<MemeLabPageComponent nftId="1" />);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("link", {
+          name: "https://top-level.example/image.png",
+        })
+      ).toHaveAttribute("href", "https://top-level.example/image.png");
+      expect(
+        screen.getByRole("link", {
+          name: "https://top-level.example/animation.mp4",
+        })
+      ).toHaveAttribute("href", "https://top-level.example/animation.mp4");
+    });
+  });
+
+  it("ignores whitespace metadata.image and falls back to the top-level image", async () => {
+    mockUseSearchParams.mockReturnValue({
+      get: jest.fn((key: string) => {
+        if (key === "focus") return MEME_FOCUS.THE_ART;
+        return null;
+      }),
+    });
+
+    setupMockApiCalls(1, {
+      image: "  https://top-level.example/image.png  ",
+      metadata: {
+        attributes: [],
+        image: "   ",
+        image_details: { format: "PNG" },
+      },
+    });
+
+    await act(async () => {
+      renderWithQueryClient(<MemeLabPageComponent nftId="1" />);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("link", {
+          name: "https://top-level.example/image.png",
+        })
+      ).toHaveAttribute("href", "https://top-level.example/image.png");
+      expect(screen.getByTestId("download")).toHaveAttribute(
+        "data-href",
+        "https://top-level.example/image.png"
+      );
+    });
+  });
+
+  it("treats metadata.animation_url-only NFTs as animated", async () => {
+    mockUseSearchParams.mockReturnValue({
+      get: jest.fn((key: string) => {
+        if (key === "focus") return MEME_FOCUS.THE_ART;
+        return null;
+      }),
+    });
+
+    setupMockApiCalls(1, {
+      animation: "",
+      metadata: {
+        attributes: [],
+        image_details: { format: "PNG", width: 1200, height: 800 },
+        animation_details: { format: "HTML", width: 1920, height: 1080 },
+        animation_url: "https://metadata.example/animation.html",
+        image: "https://metadata.example/image.png",
+      },
+    });
+
+    await act(async () => {
+      renderWithQueryClient(<MemeLabPageComponent nftId="1" />);
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId("nft-image")).toHaveLength(2);
+      expect(
+        screen.getByRole("link", {
+          name: "https://metadata.example/animation.html",
+        })
+      ).toHaveAttribute("href", "https://metadata.example/animation.html");
+      expect(getCardDetailValue("File type")).toBe("HTML");
+      expect(getCardDetailValue("Dimensions")).toBe("1,920 x 1,080");
+    });
+  });
+
+  it("switches card details to image metadata on the image slide", async () => {
+    mockUseSearchParams.mockReturnValue({
+      get: jest.fn((key: string) => {
+        if (key === "focus") return MEME_FOCUS.THE_ART;
+        return null;
+      }),
+    });
+
+    setupMockApiCalls(1, {
+      animation: "",
+      metadata: {
+        attributes: [],
+        image_details: { format: "PNG", width: 1200, height: 800 },
+        animation_details: { format: "HTML", width: 1920, height: 1080 },
+        animation_url: "https://metadata.example/animation.html",
+        image: "https://metadata.example/image.png",
+      },
+    });
+
+    await act(async () => {
+      renderWithQueryClient(<MemeLabPageComponent nftId="1" />);
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId("nft-image")).toHaveLength(2);
+    });
+
+    fireEvent.click(screen.getByTestId("carousel-slide-1"));
+
+    await waitFor(() => {
+      expect(getCardDetailValue("File type")).toBe("PNG");
+      expect(getCardDetailValue("Dimensions")).toBe("1,200 x 800");
+    });
+  });
+
   it("handles empty metadata response", async () => {
     mockFetchUrl.mockImplementation((url: string) => {
       if (url.includes("lab_extended_data"))
diff --git a/__tests__/components/nft-image/NFTImage.test.tsx b/__tests__/components/nft-image/NFTImage.test.tsx
index eeb0c1817c..d54eac14e4 100644
--- a/__tests__/components/nft-image/NFTImage.test.tsx
+++ b/__tests__/components/nft-image/NFTImage.test.tsx
@@ -1,21 +1,23 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-import NFTImage from '@/components/nft-image/NFTImage';
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import NFTImage from "@/components/nft-image/NFTImage";
 
 // Mock next/image
-jest.mock('next/image', () => {
+jest.mock("next/image", () => {
   return function MockImage({ alt, priority, ...props }: any) {
     return <img alt={alt} {...props} />;
   };
 });
 
 // Mock all renderer components
-jest.mock('@/components/nft-image/renderers/NFTImageRenderer', () => {
+jest.mock("@/components/nft-image/renderers/NFTImageRenderer", () => {
   return function MockNFTImageRenderer(props: any) {
     return (
       <div data-testid="nft-image-renderer">
         <img role="img" alt={props.nft.name} src={props.nft.image} />
-        {props.balance > 0 && <span>SEIZED{!props.showOwned ? ` x${props.balance}` : ""}</span>}
+        {props.balance > 0 && (
+          <span>SEIZED{!props.showOwned ? ` x${props.balance}` : ""}</span>
+        )}
         {props.showUnseized && props.balance === 0 && <span>UNSEIZED</span>}
         {props.showUnseized && props.balance === -1 && <span>...</span>}
       </div>
@@ -23,12 +25,14 @@ jest.mock('@/components/nft-image/renderers/NFTImageRenderer', () => {
   };
 });
 
-jest.mock('@/components/nft-image/renderers/NFTVideoRenderer', () => {
+jest.mock("@/components/nft-image/renderers/NFTVideoRenderer", () => {
   return function MockNFTVideoRenderer(props: any) {
     return (
       <div data-testid="nft-video-renderer">
         <video src={props.nft.animation} />
-        {props.balance > 0 && <span>SEIZED{!props.showOwned ? ` x${props.balance}` : ""}</span>}
+        {props.balance > 0 && (
+          <span>SEIZED{!props.showOwned ? ` x${props.balance}` : ""}</span>
+        )}
         {props.showUnseized && props.balance === 0 && <span>UNSEIZED</span>}
         {props.showUnseized && props.balance === -1 && <span>...</span>}
       </div>
@@ -36,12 +40,14 @@ jest.mock('@/components/nft-image/renderers/NFTVideoRenderer', () => {
   };
 });
 
-jest.mock('@/components/nft-image/renderers/NFTHTMLRenderer', () => {
+jest.mock("@/components/nft-image/renderers/NFTHTMLRenderer", () => {
   return function MockNFTHTMLRenderer(props: any) {
     return (
       <div data-testid="nft-html-renderer">
         <iframe src={props.nft.animation} />
-        {props.balance > 0 && <span>SEIZED{!props.showOwned ? ` x${props.balance}` : ""}</span>}
+        {props.balance > 0 && (
+          <span>SEIZED{!props.showOwned ? ` x${props.balance}` : ""}</span>
+        )}
         {props.showUnseized && props.balance === 0 && <span>UNSEIZED</span>}
         {props.showUnseized && props.balance === -1 && <span>...</span>}
       </div>
@@ -49,12 +55,14 @@ jest.mock('@/components/nft-image/renderers/NFTHTMLRenderer', () => {
   };
 });
 
-jest.mock('@/components/nft-image/renderers/NFTModelRenderer', () => {
+jest.mock("@/components/nft-image/renderers/NFTModelRenderer", () => {
   return function MockNFTModelRenderer(props: any) {
     return (
       <div data-testid="nft-model">
         3D Model
-        {props.balance > 0 && <span>SEIZED{!props.showOwned ? ` x${props.balance}` : ""}</span>}
+        {props.balance > 0 && (
+          <span>SEIZED{!props.showOwned ? ` x${props.balance}` : ""}</span>
+        )}
         {props.showUnseized && props.balance === 0 && <span>UNSEIZED</span>}
         {props.showUnseized && props.balance === -1 && <span>...</span>}
       </div>
@@ -64,27 +72,27 @@ jest.mock('@/components/nft-image/renderers/NFTModelRenderer', () => {
 
 const mockNFT = {
   id: 1,
-  contract: '0x123',
-  token_id: '1',
-  name: 'Test NFT',
-  image: 'https://example.com/image.png',
-  thumbnail: 'https://example.com/thumb.png',
+  contract: "0x123",
+  token_id: "1",
+  name: "Test NFT",
+  image: "https://example.com/image.png",
+  thumbnail: "https://example.com/thumb.png",
   animation: null,
 };
 
 const mockNFTWithMetadata = {
   ...mockNFT,
   metadata: {
-    image: 'https://example.com/image.png',
-    animation_url: 'https://example.com/animation.html',
+    image: "https://example.com/image.png",
+    animation_url: "https://example.com/animation.html",
     animation_details: {
-      format: 'HTML',
+      format: "HTML",
     },
   },
-  animation: 'https://example.com/animation.html',
+  animation: "https://example.com/animation.html",
 };
 
-describe('NFTImage', () => {
+describe("NFTImage", () => {
   const defaultProps = {
     nft: mockNFT,
     animation: false,
@@ -93,95 +101,130 @@ describe('NFTImage', () => {
     showUnseized: false,
   };
 
-  it('renders basic NFT image', () => {
+  it("renders basic NFT image", () => {
     render(<NFTImage {...defaultProps} />);
-    
-    const image = screen.getByRole('img');
+
+    const image = screen.getByRole("img");
     expect(image).toBeInTheDocument();
-    expect(image).toHaveAttribute('alt', 'Test NFT');
+    expect(image).toHaveAttribute("alt", "Test NFT");
+  });
+
+  it("renders HTML animation when conditions are met", () => {
+    render(
+      <NFTImage {...defaultProps} nft={mockNFTWithMetadata} animation={true} />
+    );
+
+    // Should render HTML renderer for HTML animation
+    expect(screen.getByTestId("nft-html-renderer")).toBeInTheDocument();
   });
 
+  it("renders HTML animation when only metadata.animation_url is available", () => {
+    const nftWithAnimationUrlOnly = {
+      ...mockNFT,
+      animation: "",
+      metadata: {
+        image: "https://example.com/image.png",
+        animation_url: "https://example.com/animation.html",
+        animation_details: {
+          format: "HTML",
+        },
+      },
+    };
 
-  it('renders HTML animation when conditions are met', () => {
     render(
       <NFTImage
         {...defaultProps}
-        nft={mockNFTWithMetadata}
+        nft={nftWithAnimationUrlOnly}
         animation={true}
       />
     );
-    
-    // Should render HTML renderer for HTML animation
-    expect(screen.getByTestId('nft-html-renderer')).toBeInTheDocument();
+
+    expect(screen.getByTestId("nft-html-renderer")).toBeInTheDocument();
+    expect(screen.queryByTestId("nft-image-renderer")).not.toBeInTheDocument();
   });
 
-  it('renders GLB animation using NFTModelRenderer', () => {
+  it("renders GLB animation using NFTModelRenderer", () => {
     const nftWithGLB = {
       ...mockNFT,
-      animation: 'https://example.com/model.glb',
+      animation: "https://example.com/model.glb",
       metadata: {
-        image: 'https://example.com/image.png',
-        animation: 'https://example.com/model.glb',
+        image: "https://example.com/image.png",
+        animation: "https://example.com/model.glb",
         animation_details: {
-          format: 'GLB',
+          format: "GLB",
         },
       },
     };
-    render(
-      <NFTImage {...defaultProps} nft={nftWithGLB} animation={true} />
-    );
-    expect(screen.getByTestId('nft-model')).toBeInTheDocument();
+    render(<NFTImage {...defaultProps} nft={nftWithGLB} animation={true} />);
+    expect(screen.getByTestId("nft-model")).toBeInTheDocument();
   });
 
-  it('renders GLB model with balance information correctly', () => {
+  it("renders GLB model with balance information correctly", () => {
     const nftWithGLB = {
       ...mockNFT,
-      animation: 'https://example.com/model.glb',
+      animation: "https://example.com/model.glb",
       metadata: {
-        image: 'https://example.com/image.png',
-        animation: 'https://example.com/model.glb',
+        image: "https://example.com/image.png",
+        animation: "https://example.com/model.glb",
         animation_details: {
-          format: 'GLB',
+          format: "GLB",
         },
       },
     };
-    
+
     // Test with balance > 0 and showOwned = false (should show quantity)
     const { rerender } = render(
-      <NFTImage {...defaultProps} nft={nftWithGLB} animation={true} balance={3} showOwned={false} />
+      <NFTImage
+        {...defaultProps}
+        nft={nftWithGLB}
+        animation={true}
+        balance={3}
+        showOwned={false}
+      />
     );
-    expect(screen.getByTestId('nft-model')).toBeInTheDocument();
-    expect(screen.getByText('SEIZED x3')).toBeInTheDocument();
-    
+    expect(screen.getByTestId("nft-model")).toBeInTheDocument();
+    expect(screen.getByText("SEIZED x3")).toBeInTheDocument();
+
     // Test with balance > 0 and showOwned = true (should not show quantity)
     rerender(
-      <NFTImage {...defaultProps} nft={nftWithGLB} animation={true} balance={3} showOwned={true} />
+      <NFTImage
+        {...defaultProps}
+        nft={nftWithGLB}
+        animation={true}
+        balance={3}
+        showOwned={true}
+      />
     );
-    expect(screen.getByText('SEIZED')).toBeInTheDocument();
-    expect(screen.queryByText('SEIZED x3')).not.toBeInTheDocument();
-    
+    expect(screen.getByText("SEIZED")).toBeInTheDocument();
+    expect(screen.queryByText("SEIZED x3")).not.toBeInTheDocument();
+
     // Test with balance = 0 and showUnseized = true
     rerender(
-      <NFTImage {...defaultProps} nft={nftWithGLB} animation={true} balance={0} showUnseized={true} />
+      <NFTImage
+        {...defaultProps}
+        nft={nftWithGLB}
+        animation={true}
+        balance={0}
+        showUnseized={true}
+      />
     );
-    expect(screen.getByText('UNSEIZED')).toBeInTheDocument();
-    
+    expect(screen.getByText("UNSEIZED")).toBeInTheDocument();
+
     // Test loading state with balance = -1
     rerender(
-      <NFTImage {...defaultProps} nft={nftWithGLB} animation={true} balance={-1} showUnseized={true} />
+      <NFTImage
+        {...defaultProps}
+        nft={nftWithGLB}
+        animation={true}
+        balance={-1}
+        showUnseized={true}
+      />
     );
-    expect(screen.getByText('...')).toBeInTheDocument();
+    expect(screen.getByText("...")).toBeInTheDocument();
   });
-
-
-
-
-
-
-
 });
 
-describe('Media Type Detection and Renderer Selection', () => {
+describe("Media Type Detection and Renderer Selection", () => {
   const defaultProps = {
     nft: mockNFT,
     animation: false,
@@ -194,136 +237,154 @@ describe('Media Type Detection and Renderer Selection', () => {
     jest.clearAllMocks();
   });
 
-  it('renders NFTImageRenderer when animation is false', () => {
+  it("renders NFTImageRenderer when animation is false", () => {
     render(<NFTImage {...defaultProps} animation={false} />);
-    expect(screen.getByTestId('nft-image-renderer')).toBeInTheDocument();
-    expect(screen.queryByTestId('nft-video-renderer')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('nft-html-renderer')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('nft-model')).not.toBeInTheDocument();
+    expect(screen.getByTestId("nft-image-renderer")).toBeInTheDocument();
+    expect(screen.queryByTestId("nft-video-renderer")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("nft-html-renderer")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("nft-model")).not.toBeInTheDocument();
   });
 
-  it('renders NFTImageRenderer when no animation property exists', () => {
+  it("renders NFTImageRenderer when no animation property exists", () => {
     const nftWithoutAnimation = { ...mockNFT, animation: null };
-    render(<NFTImage {...defaultProps} nft={nftWithoutAnimation} animation={true} />);
-    expect(screen.getByTestId('nft-image-renderer')).toBeInTheDocument();
+    render(
+      <NFTImage {...defaultProps} nft={nftWithoutAnimation} animation={true} />
+    );
+    expect(screen.getByTestId("nft-image-renderer")).toBeInTheDocument();
   });
 
-  it('renders NFTVideoRenderer for MP4 animations', () => {
+  it("renders NFTVideoRenderer for MP4 animations", () => {
     const nftWithMP4 = {
       ...mockNFT,
-      animation: 'https://example.com/video.mp4',
+      animation: "https://example.com/video.mp4",
       metadata: {
-        image: 'https://example.com/image.png',
-        animation: 'https://example.com/video.mp4',
-        animation_details: { format: 'MP4' },
+        image: "https://example.com/image.png",
+        animation: "https://example.com/video.mp4",
+        animation_details: { format: "MP4" },
       },
     };
     render(<NFTImage {...defaultProps} nft={nftWithMP4} animation={true} />);
-    expect(screen.getByTestId('nft-video-renderer')).toBeInTheDocument();
-    expect(screen.queryByTestId('nft-image-renderer')).not.toBeInTheDocument();
+    expect(screen.getByTestId("nft-video-renderer")).toBeInTheDocument();
+    expect(screen.queryByTestId("nft-image-renderer")).not.toBeInTheDocument();
   });
 
-  it('renders NFTVideoRenderer for MOV animations', () => {
+  it("renders NFTVideoRenderer for MOV animations", () => {
     const nftWithMOV = {
       ...mockNFT,
-      animation: 'https://example.com/video.mov',
+      animation: "https://example.com/video.mov",
       metadata: {
-        image: 'https://example.com/image.png',
-        animation: 'https://example.com/video.mov',
-        animation_details: { format: 'MOV' },
+        image: "https://example.com/image.png",
+        animation: "https://example.com/video.mov",
+        animation_details: { format: "MOV" },
       },
     };
     render(<NFTImage {...defaultProps} nft={nftWithMOV} animation={true} />);
-    expect(screen.getByTestId('nft-video-renderer')).toBeInTheDocument();
+    expect(screen.getByTestId("nft-video-renderer")).toBeInTheDocument();
   });
 
-  it('renders NFTHTMLRenderer for HTML animations', () => {
+  it("renders NFTHTMLRenderer for HTML animations", () => {
     const nftWithHTML = {
       ...mockNFT,
-      animation: 'https://example.com/interactive.html',
+      animation: "https://example.com/interactive.html",
       metadata: {
-        image: 'https://example.com/image.png',
-        animation: 'https://example.com/interactive.html',
-        animation_details: { format: 'HTML' },
+        image: "https://example.com/image.png",
+        animation: "https://example.com/interactive.html",
+        animation_details: { format: "HTML" },
       },
     };
     render(<NFTImage {...defaultProps} nft={nftWithHTML} animation={true} />);
-    expect(screen.getByTestId('nft-html-renderer')).toBeInTheDocument();
-    expect(screen.queryByTestId('nft-image-renderer')).not.toBeInTheDocument();
+    expect(screen.getByTestId("nft-html-renderer")).toBeInTheDocument();
+    expect(screen.queryByTestId("nft-image-renderer")).not.toBeInTheDocument();
   });
 
-  it('renders NFTModelRenderer for GLB animations', () => {
+  it("renders NFTModelRenderer for GLB animations", () => {
     const nftWithGLB = {
       ...mockNFT,
-      animation: 'https://example.com/model.glb',
+      animation: "https://example.com/model.glb",
       metadata: {
-        image: 'https://example.com/image.png',
-        animation: 'https://example.com/model.glb',
-        animation_details: { format: 'GLB' },
+        image: "https://example.com/image.png",
+        animation: "https://example.com/model.glb",
+        animation_details: { format: "GLB" },
       },
     };
     render(<NFTImage {...defaultProps} nft={nftWithGLB} animation={true} />);
-    expect(screen.getByTestId('nft-model')).toBeInTheDocument();
-    expect(screen.queryByTestId('nft-image-renderer')).not.toBeInTheDocument();
+    expect(screen.getByTestId("nft-model")).toBeInTheDocument();
+    expect(screen.queryByTestId("nft-image-renderer")).not.toBeInTheDocument();
   });
 
-  it('falls back to NFTImageRenderer for unknown animation formats', () => {
+  it("falls back to NFTImageRenderer for unknown animation formats", () => {
     const nftWithUnknownFormat = {
       ...mockNFT,
-      animation: 'https://example.com/unknown.xyz',
+      animation: "https://example.com/unknown.xyz",
       metadata: {
-        image: 'https://example.com/image.png',
-        animation: 'https://example.com/unknown.xyz',
-        animation_details: { format: 'XYZ' },
+        image: "https://example.com/image.png",
+        animation: "https://example.com/unknown.xyz",
+        animation_details: { format: "XYZ" },
       },
     };
-    render(<NFTImage {...defaultProps} nft={nftWithUnknownFormat} animation={true} />);
-    expect(screen.getByTestId('nft-image-renderer')).toBeInTheDocument();
-    expect(screen.queryByTestId('nft-video-renderer')).not.toBeInTheDocument();
+    render(
+      <NFTImage {...defaultProps} nft={nftWithUnknownFormat} animation={true} />
+    );
+    expect(screen.getByTestId("nft-image-renderer")).toBeInTheDocument();
+    expect(screen.queryByTestId("nft-video-renderer")).not.toBeInTheDocument();
   });
 
-  it('falls back to NFTImageRenderer when animation_details are missing', () => {
+  it("falls back to NFTImageRenderer when animation_details are missing", () => {
     const nftWithoutDetails = {
       ...mockNFT,
-      animation: 'https://example.com/something.mp4',
+      animation: "https://example.com/something.mp4",
       metadata: {
-        image: 'https://example.com/image.png',
-        animation: 'https://example.com/something.mp4',
+        image: "https://example.com/image.png",
+        animation: "https://example.com/something.mp4",
       },
     };
-    render(<NFTImage {...defaultProps} nft={nftWithoutDetails} animation={true} />);
-    expect(screen.getByTestId('nft-image-renderer')).toBeInTheDocument();
+    render(
+      <NFTImage {...defaultProps} nft={nftWithoutDetails} animation={true} />
+    );
+    expect(screen.getByTestId("nft-image-renderer")).toBeInTheDocument();
   });
 
-  it('handles case-insensitive format detection', () => {
+  it("handles case-insensitive format detection", () => {
     const nftWithUppercaseFormat = {
       ...mockNFT,
-      animation: 'https://example.com/video.MP4',
+      animation: "https://example.com/video.MP4",
       metadata: {
-        image: 'https://example.com/image.png',
-        animation: 'https://example.com/video.MP4',
-        animation_details: { format: 'MP4' },
+        image: "https://example.com/image.png",
+        animation: "https://example.com/video.MP4",
+        animation_details: { format: "MP4" },
       },
     };
-    
-    const { rerender } = render(<NFTImage {...defaultProps} nft={nftWithUppercaseFormat} animation={true} />);
-    expect(screen.getByTestId('nft-video-renderer')).toBeInTheDocument();
+
+    const { rerender } = render(
+      <NFTImage
+        {...defaultProps}
+        nft={nftWithUppercaseFormat}
+        animation={true}
+      />
+    );
+    expect(screen.getByTestId("nft-video-renderer")).toBeInTheDocument();
 
     const nftWithLowercaseFormat = {
       ...mockNFT,
-      animation: 'https://example.com/video.mp4',
+      animation: "https://example.com/video.mp4",
       metadata: {
-        image: 'https://example.com/image.png',
-        animation: 'https://example.com/video.mp4',
-        animation_details: { format: 'mp4' },
+        image: "https://example.com/image.png",
+        animation: "https://example.com/video.mp4",
+        animation_details: { format: "mp4" },
       },
     };
-    rerender(<NFTImage {...defaultProps} nft={nftWithLowercaseFormat} animation={true} />);
-    expect(screen.getByTestId('nft-video-renderer')).toBeInTheDocument();
+    rerender(
+      <NFTImage
+        {...defaultProps}
+        nft={nftWithLowercaseFormat}
+        animation={true}
+      />
+    );
+    expect(screen.getByTestId("nft-video-renderer")).toBeInTheDocument();
   });
 });
 
-describe('NFTImage Error Handling and Edge Cases', () => {
+describe("NFTImage Error Handling and Edge Cases", () => {
   const defaultProps = {
     nft: mockNFT,
     animation: false,
@@ -332,115 +393,129 @@ describe('NFTImage Error Handling and Edge Cases', () => {
     showUnseized: false,
   };
 
-  it('handles NFT with missing required properties gracefully', () => {
-    const minimalNFT = { id: 1, name: 'Minimal' } as any;
-    
+  it("handles NFT with missing required properties gracefully", () => {
+    const minimalNFT = { id: 1, name: "Minimal" } as any;
+
     expect(() => {
       render(<NFTImage {...defaultProps} nft={minimalNFT} />);
     }).not.toThrow();
 
-    expect(screen.getByTestId('nft-image-renderer')).toBeInTheDocument();
+    expect(screen.getByTestId("nft-image-renderer")).toBeInTheDocument();
   });
 
-  it('handles null metadata gracefully', () => {
+  it("handles null metadata gracefully", () => {
     const nftNullMetadata = {
       ...mockNFT,
       metadata: null,
     } as any;
-    
+
     expect(() => {
-      render(<NFTImage {...defaultProps} nft={nftNullMetadata} animation={true} />);
+      render(
+        <NFTImage {...defaultProps} nft={nftNullMetadata} animation={true} />
+      );
     }).not.toThrow();
 
-    expect(screen.getByTestId('nft-image-renderer')).toBeInTheDocument();
+    expect(screen.getByTestId("nft-image-renderer")).toBeInTheDocument();
   });
 
-  it('handles undefined animation_details gracefully', () => {
+  it("handles undefined animation_details gracefully", () => {
     const nftUndefinedDetails = {
       ...mockNFT,
-      animation: 'test.mp4',
+      animation: "test.mp4",
       metadata: {
-        image: 'test.png',
+        image: "test.png",
         animation_details: undefined,
       },
     } as any;
-    
+
     expect(() => {
-      render(<NFTImage {...defaultProps} nft={nftUndefinedDetails} animation={true} />);
+      render(
+        <NFTImage
+          {...defaultProps}
+          nft={nftUndefinedDetails}
+          animation={true}
+        />
+      );
     }).not.toThrow();
 
-    expect(screen.getByTestId('nft-image-renderer')).toBeInTheDocument();
+    expect(screen.getByTestId("nft-image-renderer")).toBeInTheDocument();
   });
 
-  it('passes all required props to renderers', () => {
-    render(<NFTImage 
-      {...defaultProps} 
-      height={650}
-      balance={5}
-      showOwned={true}
-      showUnseized={true}
-      transparentBG={true}
-      id="custom-id"
-      showOriginal={true}
-      showThumbnail={true}
-    />);
-    
-    const renderer = screen.getByTestId('nft-image-renderer');
+  it("passes all required props to renderers", () => {
+    render(
+      <NFTImage
+        {...defaultProps}
+        height={650}
+        balance={5}
+        showOwned={true}
+        showUnseized={true}
+        transparentBG={true}
+        id="custom-id"
+        showOriginal={true}
+        showThumbnail={true}
+      />
+    );
+
+    const renderer = screen.getByTestId("nft-image-renderer");
     expect(renderer).toBeInTheDocument();
   });
 
-  it('handles NFTLite vs BaseNFT union types correctly', () => {
+  it("handles NFTLite vs BaseNFT union types correctly", () => {
     // Test with a basic NFTLite structure
     const nftLite = {
       id: 1,
-      name: 'Test NFT Lite',
-      image: 'https://example.com/image.png',
-      thumbnail: 'https://example.com/thumb.png',
+      name: "Test NFT Lite",
+      image: "https://example.com/image.png",
+      thumbnail: "https://example.com/thumb.png",
     } as any;
-    
+
     expect(() => {
       render(<NFTImage {...defaultProps} nft={nftLite} />);
     }).not.toThrow();
 
-    expect(screen.getByTestId('nft-image-renderer')).toBeInTheDocument();
+    expect(screen.getByTestId("nft-image-renderer")).toBeInTheDocument();
   });
 
-  it('validates height prop correctly', () => {
+  it("validates height prop correctly", () => {
     const { rerender } = render(<NFTImage {...defaultProps} height={300} />);
-    expect(screen.getByTestId('nft-image-renderer')).toBeInTheDocument();
+    expect(screen.getByTestId("nft-image-renderer")).toBeInTheDocument();
 
     rerender(<NFTImage {...defaultProps} height={650} />);
-    expect(screen.getByTestId('nft-image-renderer')).toBeInTheDocument();
+    expect(screen.getByTestId("nft-image-renderer")).toBeInTheDocument();
 
     rerender(<NFTImage {...defaultProps} height="full" />);
-    expect(screen.getByTestId('nft-image-renderer')).toBeInTheDocument();
+    expect(screen.getByTestId("nft-image-renderer")).toBeInTheDocument();
   });
 
-  it('handles balance edge cases correctly', () => {
+  it("handles balance edge cases correctly", () => {
     // Zero balance
-    const { rerender } = render(<NFTImage {...defaultProps} balance={0} showUnseized={true} />);
-    expect(screen.getByText('UNSEIZED')).toBeInTheDocument();
+    const { rerender } = render(
+      <NFTImage {...defaultProps} balance={0} showUnseized={true} />
+    );
+    expect(screen.getByText("UNSEIZED")).toBeInTheDocument();
 
     // Negative balance (loading state)
     rerender(<NFTImage {...defaultProps} balance={-1} showUnseized={true} />);
-    expect(screen.getByText('...')).toBeInTheDocument();
+    expect(screen.getByText("...")).toBeInTheDocument();
 
     // Large balance
     rerender(<NFTImage {...defaultProps} balance={999999} />);
-    expect(screen.getByText('SEIZED x999999')).toBeInTheDocument();
+    expect(screen.getByText("SEIZED x999999")).toBeInTheDocument();
   });
 
-  it('handles showOwned prop correctly', () => {
+  it("handles showOwned prop correctly", () => {
     // When showOwned is true, should show just "SEIZED" without quantity
-    const { rerender } = render(<NFTImage {...defaultProps} balance={5} showOwned={true} />);
-    expect(screen.getByText('SEIZED')).toBeInTheDocument();
-    expect(screen.queryByText('SEIZED x5')).not.toBeInTheDocument();
+    const { rerender } = render(
+      <NFTImage {...defaultProps} balance={5} showOwned={true} />
+    );
+    expect(screen.getByText("SEIZED")).toBeInTheDocument();
+    expect(screen.queryByText("SEIZED x5")).not.toBeInTheDocument();
 
     // When showOwned is false or undefined, should show quantity
     rerender(<NFTImage {...defaultProps} balance={5} showOwned={false} />);
-    expect(screen.getByText('SEIZED x5')).toBeInTheDocument();
-    
+    expect(screen.getByText("SEIZED x5")).toBeInTheDocument();
+
     rerender(<NFTImage {...defaultProps} balance={3} />);
-    expect(screen.getByText('SEIZED x3')).toBeInTheDocument();
+    expect(screen.getByText("SEIZED x3")).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});
diff --git a/__tests__/components/nft-image/NFTModel.test.tsx b/__tests__/components/nft-image/NFTModel.test.tsx
index 56e9a9dfc1..51ab3b850f 100644
--- a/__tests__/components/nft-image/NFTModel.test.tsx
+++ b/__tests__/components/nft-image/NFTModel.test.tsx
@@ -1,34 +1,50 @@
-import { render } from '@testing-library/react';
+import { render } from "@testing-library/react";
 
-jest.mock('@google/model-viewer', () => {});
-import NFTModel from '@/components/nft-image/NFTModel';
+jest.mock("@google/model-viewer", () => {});
+import NFTModel from "@/components/nft-image/NFTModel";
 
 const nft = {
   id: 1,
-  name: 'Cool',
-  scaled: 'scaled.png',
+  name: "Cool",
+  scaled: "scaled.png",
+  animation: "top-level.glb",
   metadata: {
-    animation: 'anim.glb',
-    animation_url: 'anim2.glb',
+    animation: "anim.glb",
+    animation_url: "anim2.glb",
   },
 } as any;
 
-describe('NFTModel', () => {
-  it('renders model-viewer with defaults', () => {
+describe("NFTModel", () => {
+  it("renders model-viewer with defaults", () => {
     const { container } = render(<NFTModel nft={nft} />);
-    const el = container.querySelector('model-viewer') as HTMLElement;
+    const el = container.querySelector("model-viewer") as HTMLElement;
     expect(el).toBeInTheDocument();
-    expect(el.getAttribute('id')).toBe('iframe-1');
-    expect(el.getAttribute('src')).toBe('anim.glb');
-    expect(el.getAttribute('alt')).toBe('Cool');
-    expect(el.getAttribute('poster')).toBe('scaled.png');
+    expect(el.getAttribute("id")).toBe("iframe-1");
+    expect(el.getAttribute("src")).toBe("top-level.glb");
+    expect(el.getAttribute("alt")).toBe("Cool");
+    expect(el.getAttribute("poster")).toBe("scaled.png");
   });
 
-  it('uses provided id and fallback src', () => {
-    const modified = { ...nft, metadata: { animation: undefined, animation_url: 'url.glb' } };
+  it("uses provided id and falls back to metadata.animation", () => {
+    const modified = {
+      ...nft,
+      animation: "",
+      metadata: { animation: "anim.glb", animation_url: "url.glb" },
+    };
     const { container } = render(<NFTModel nft={modified} id="custom" />);
-    const el = container.querySelector('model-viewer') as HTMLElement;
-    expect(el.getAttribute('id')).toBe('custom');
-    expect(el.getAttribute('src')).toBe('url.glb');
+    const el = container.querySelector("model-viewer") as HTMLElement;
+    expect(el.getAttribute("id")).toBe("custom");
+    expect(el.getAttribute("src")).toBe("anim.glb");
+  });
+
+  it("falls back to metadata.animation_url when earlier sources are empty", () => {
+    const modified = {
+      ...nft,
+      animation: "   ",
+      metadata: { animation: "", animation_url: "url.glb" },
+    };
+    const { container } = render(<NFTModel nft={modified} id="custom" />);
+    const el = container.querySelector("model-viewer") as HTMLElement;
+    expect(el.getAttribute("src")).toBe("url.glb");
   });
 });
diff --git a/__tests__/components/nft-image/renderers/NFTHTMLRenderer.test.tsx b/__tests__/components/nft-image/renderers/NFTHTMLRenderer.test.tsx
index 7671a70adc..6a951f4531 100644
--- a/__tests__/components/nft-image/renderers/NFTHTMLRenderer.test.tsx
+++ b/__tests__/components/nft-image/renderers/NFTHTMLRenderer.test.tsx
@@ -13,7 +13,8 @@ jest.mock("@/components/nft-image/NFTImageBalance", () => {
         data-testid="nft-image-balance"
         data-height={height}
         data-contract={contract}
-        data-token-id={tokenId}>
+        data-token-id={tokenId}
+      >
         {mockBalance > 0 && (
           <span data-testid="seized-text">SEIZED x{mockBalance}</span>
         )}
@@ -43,7 +44,7 @@ const createMockNFT = (overrides: Partial<BaseNFT> = {}): BaseNFT =>
       animation_url: "https://example.com/animation_url.html",
     },
     ...overrides,
-  } as BaseNFT);
+  }) as BaseNFT;
 
 const createMockNFTLite = (overrides: any = {}) => ({
   id: 1,
@@ -118,8 +119,27 @@ describe("NFTHTMLRenderer", () => {
   });
 
   describe("Animation Source Selection", () => {
-    it("uses metadata.animation when available on BaseNFT", () => {
+    it("uses top-level animation when available on BaseNFT", () => {
       const nft = createMockNFT({
+        animation: "https://example.com/top-level-animation.html",
+        metadata: {
+          animation: "https://example.com/priority-animation.html",
+          animation_url: "https://example.com/fallback-animation.html",
+        },
+      });
+      const props = createDefaultProps({ nft, id: "test-iframe" });
+      render(<NFTHTMLRenderer {...props} />);
+
+      const iframe = screen.getByTitle("test-iframe");
+      expect(iframe).toHaveAttribute(
+        "src",
+        "https://example.com/top-level-animation.html"
+      );
+    });
+
+    it("falls back to metadata.animation when top-level animation is not available", () => {
+      const nft = createMockNFT({
+        animation: "",
         metadata: {
           animation: "https://example.com/priority-animation.html",
           animation_url: "https://example.com/fallback-animation.html",
@@ -135,8 +155,9 @@ describe("NFTHTMLRenderer", () => {
       );
     });
 
-    it("falls back to metadata.animation_url when metadata.animation is not available", () => {
+    it("falls back to metadata.animation_url when earlier sources are not available", () => {
       const nft = createMockNFT({
+        animation: "",
         metadata: {
           animation_url: "https://example.com/fallback-animation.html",
         },
@@ -153,6 +174,7 @@ describe("NFTHTMLRenderer", () => {
 
     it("uses metadata.animation_url for NFTLite without metadata.animation", () => {
       const nft = createMockNFTLite({
+        animation: "",
         metadata: {
           animation_url: "https://example.com/nftlite-animation.html",
         },
@@ -169,6 +191,7 @@ describe("NFTHTMLRenderer", () => {
 
     it("handles undefined animation sources gracefully", () => {
       const nft = createMockNFT({
+        animation: undefined as any,
         metadata: {
           animation: undefined,
           animation_url: undefined,
@@ -187,6 +210,7 @@ describe("NFTHTMLRenderer", () => {
 
     it("handles null animation sources gracefully", () => {
       const nft = createMockNFT({
+        animation: null as any,
         metadata: {
           animation: null,
           animation_url: null,
@@ -287,7 +311,9 @@ describe("NFTHTMLRenderer", () => {
 
   describe("Edge Cases and Error Handling", () => {
     it("crashes when metadata is undefined (IMPLEMENTATION BUG)", () => {
-      const nft = createMockNFT({ ...(undefined !== undefined ? { metadata: undefined } : {}) });
+      const nft = createMockNFT({
+        ...(undefined !== undefined ? { metadata: undefined } : {}),
+      });
       const props = createDefaultProps({ nft, id: "test-iframe" });
 
       // The getSrc function has a bug - it checks "metadata" in nft but doesn't check if metadata is null/undefined
diff --git a/__tests__/components/nft-image/renderers/NFTVideoRenderer.test.tsx b/__tests__/components/nft-image/renderers/NFTVideoRenderer.test.tsx
index ff95daa736..a801562806 100644
--- a/__tests__/components/nft-image/renderers/NFTVideoRenderer.test.tsx
+++ b/__tests__/components/nft-image/renderers/NFTVideoRenderer.test.tsx
@@ -1,7 +1,7 @@
 import NFTVideoRenderer from "@/components/nft-image/renderers/NFTVideoRenderer";
 import type { BaseRendererProps } from "@/components/nft-image/types/renderer-props";
 import type { BaseNFT } from "@/entities/INFT";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 
 // Mock NFTImageBalance to match the new showBalance API
 jest.mock("@/components/nft-image/NFTImageBalance", () => {
@@ -13,7 +13,8 @@ jest.mock("@/components/nft-image/NFTImageBalance", () => {
         data-testid="nft-image-balance"
         data-height={height}
         data-contract={contract}
-        data-token-id={tokenId}>
+        data-token-id={tokenId}
+      >
         {mockBalance > 0 && (
           <span data-testid="seized-text">SEIZED x{mockBalance}</span>
         )}
@@ -166,6 +167,26 @@ describe("NFTVideoRenderer", () => {
       const video = container.querySelector("video");
       expect(video).toHaveAttribute("src", "https://example.com/video.mp4");
     });
+
+    it("falls back to metadata.animation_url when top-level animation is empty", () => {
+      const nft = createMockNFT({
+        animation: "",
+        compressed_animation: undefined,
+        metadata: {
+          ...createMockNFT().metadata,
+          animation: "",
+          animation_url: "https://example.com/metadata-fallback.mp4",
+        },
+      });
+      const props = createDefaultProps({ nft });
+      const { container } = render(<NFTVideoRenderer {...props} />);
+
+      const video = container.querySelector("video");
+      expect(video).toHaveAttribute(
+        "src",
+        "https://example.com/metadata-fallback.mp4"
+      );
+    });
   });
 
   describe("Video Attributes", () => {
@@ -284,7 +305,9 @@ describe("NFTVideoRenderer", () => {
     });
 
     it("handles missing metadata gracefully", () => {
-      const nft = createMockNFT({ ...(undefined !== undefined ? { metadata: undefined } : {}) });
+      const nft = createMockNFT({
+        ...(undefined !== undefined ? { metadata: undefined } : {}),
+      });
       const props = createDefaultProps({ nft });
 
       expect(() => {
@@ -607,6 +630,81 @@ describe("NFTVideoRenderer", () => {
         "https://example.com/compressed.mp4"
       );
     });
+
+    it("swaps from a relative compressed_animation URL to animationSrc on error", () => {
+      const nft = createMockNFT({
+        animation: "https://example.com/original.mp4",
+        compressed_animation: "/compressed/video.mp4",
+      });
+      const props = createDefaultProps({ nft, showOriginal: false });
+      const { container } = render(<NFTVideoRenderer {...props} />);
+
+      const video = container.querySelector("video") as HTMLVideoElement;
+      expect(video.src).toBe(
+        new URL("/compressed/video.mp4", window.location.href).href
+      );
+
+      fireEvent.error(video);
+
+      expect(video.src).toBe("https://example.com/original.mp4");
+    });
+
+    it("swaps from an absolute compressed_animation URL to animationSrc on error", () => {
+      const nft = createMockNFT({
+        animation: "https://example.com/original.mp4",
+        compressed_animation: "https://example.com/compressed.mp4",
+      });
+      const props = createDefaultProps({ nft, showOriginal: false });
+      const { container } = render(<NFTVideoRenderer {...props} />);
+
+      const video = container.querySelector("video") as HTMLVideoElement;
+      expect(video.src).toBe("https://example.com/compressed.mp4");
+
+      fireEvent.error(video);
+
+      expect(video.src).toBe("https://example.com/original.mp4");
+    });
+
+    it("does not swap on error when animationSrc is missing", () => {
+      const nft = createMockNFT({
+        animation: undefined as any,
+        compressed_animation: "/compressed/video.mp4",
+        metadata: {
+          ...createMockNFT().metadata,
+          animation: undefined,
+          animation_url: undefined,
+        },
+      });
+      const props = createDefaultProps({ nft, showOriginal: false });
+      const { container } = render(<NFTVideoRenderer {...props} />);
+
+      const video = container.querySelector("video") as HTMLVideoElement;
+      const expectedCompressedSrc = new URL(
+        "/compressed/video.mp4",
+        window.location.href
+      ).href;
+      expect(video.src).toBe(expectedCompressedSrc);
+
+      fireEvent.error(video);
+
+      expect(video.src).toBe(expectedCompressedSrc);
+    });
+
+    it("does not swap on error when compressed_animation is undefined", () => {
+      const nft = createMockNFT({
+        animation: "https://example.com/original.mp4",
+        compressed_animation: undefined,
+      });
+      const props = createDefaultProps({ nft, showOriginal: false });
+      const { container } = render(<NFTVideoRenderer {...props} />);
+
+      const video = container.querySelector("video") as HTMLVideoElement;
+      expect(video.src).toBe("https://example.com/original.mp4");
+
+      fireEvent.error(video);
+
+      expect(video.src).toBe("https://example.com/original.mp4");
+    });
   });
 
   describe("Error Resistance and Edge Cases", () => {
diff --git a/__tests__/components/nft-image/utils/animation-source.test.ts b/__tests__/components/nft-image/utils/animation-source.test.ts
new file mode 100644
index 0000000000..499f2f26be
--- /dev/null
+++ b/__tests__/components/nft-image/utils/animation-source.test.ts
@@ -0,0 +1,118 @@
+import { getResolvedAnimationSrc } from "@/components/nft-image/utils/animation-source";
+import type { BaseNFT, NFTLite } from "@/entities/INFT";
+
+const createMockNFT = (overrides: Partial<BaseNFT> = {}): BaseNFT => ({
+  id: 1,
+  contract: "0x123",
+  created_at: new Date("2024-01-01T00:00:00.000Z"),
+  mint_price: 0,
+  supply: 1,
+  name: "Test NFT",
+  collection: "Test Collection",
+  token_type: "ERC721",
+  description: "Test Description",
+  artist: "Test Artist",
+  artist_seize_handle: "test_artist",
+  uri: "https://example.com/token/1",
+  icon: "https://example.com/icon.png",
+  thumbnail: "https://example.com/thumb.png",
+  scaled: "https://example.com/scaled.png",
+  image: "https://example.com/image.png",
+  animation: "https://example.com/animation.mp4",
+  market_cap: 0,
+  floor_price: 0,
+  total_volume_last_24_hours: 0,
+  total_volume_last_7_days: 0,
+  total_volume_last_1_month: 0,
+  total_volume: 0,
+  highest_offer: 0,
+  ...overrides,
+});
+
+const createMockNFTLite = (overrides: Partial<NFTLite> = {}): NFTLite => ({
+  id: 1,
+  contract: "0x123",
+  name: "Test NFT Lite",
+  icon: "https://example.com/icon.png",
+  thumbnail: "https://example.com/thumb.png",
+  scaled: "https://example.com/scaled.png",
+  image: "https://example.com/image.png",
+  animation: "https://example.com/animation.mp4",
+  ...overrides,
+});
+
+describe("getResolvedAnimationSrc", () => {
+  it("returns undefined for missing nft", () => {
+    expect(getResolvedAnimationSrc(undefined)).toBeUndefined();
+  });
+
+  it("returns the trimmed top-level animation when it is non-empty", () => {
+    const nft = createMockNFT({
+      animation: "  https://example.com/top-level.mp4  ",
+      metadata: {
+        animation: "https://example.com/metadata.mp4",
+        animation_url: "https://example.com/metadata-url.mp4",
+      },
+    });
+
+    expect(getResolvedAnimationSrc(nft)).toBe(
+      "https://example.com/top-level.mp4"
+    );
+  });
+
+  it("falls back to metadata.animation when top-level animation is empty", () => {
+    const nft = createMockNFT({
+      animation: "   ",
+      metadata: {
+        animation: "  https://example.com/metadata.mp4  ",
+        animation_url: "https://example.com/metadata-url.mp4",
+      },
+    });
+
+    expect(getResolvedAnimationSrc(nft)).toBe(
+      "https://example.com/metadata.mp4"
+    );
+  });
+
+  it("falls back to metadata.animation_url when earlier candidates are empty", () => {
+    const nft = createMockNFT({
+      animation: "",
+      metadata: {
+        animation: "   ",
+        animation_url: "  https://example.com/metadata-url.mp4  ",
+      },
+    });
+
+    expect(getResolvedAnimationSrc(nft)).toBe(
+      "https://example.com/metadata-url.mp4"
+    );
+  });
+
+  it("returns undefined when every candidate is empty or invalid", () => {
+    const nft = createMockNFT({
+      animation: "   ",
+      metadata: {
+        animation: null,
+        animation_url: 123,
+      },
+    });
+
+    expect(getResolvedAnimationSrc(nft)).toBeUndefined();
+  });
+
+  it("ignores metadata for NFTLite and returns trimmed top-level animation", () => {
+    const nft = createMockNFTLite({
+      animation: "  https://example.com/lite.mp4  ",
+    });
+
+    expect(getResolvedAnimationSrc(nft)).toBe("https://example.com/lite.mp4");
+  });
+
+  it("returns undefined for NFTLite when top-level animation is whitespace only", () => {
+    const nft = createMockNFTLite({
+      animation: "   ",
+    });
+
+    expect(getResolvedAnimationSrc(nft)).toBeUndefined();
+  });
+});
diff --git a/__tests__/components/nft-image/utils/image-source.test.ts b/__tests__/components/nft-image/utils/image-source.test.ts
new file mode 100644
index 0000000000..dae8021c7e
--- /dev/null
+++ b/__tests__/components/nft-image/utils/image-source.test.ts
@@ -0,0 +1,89 @@
+import { getResolvedImageSrc } from "@/components/nft-image/utils/image-source";
+import type { BaseNFT, NFTLite } from "@/entities/INFT";
+
+const createMockNFT = (overrides: Partial<BaseNFT> = {}): BaseNFT => ({
+  id: 1,
+  contract: "0x123",
+  created_at: new Date("2024-01-01T00:00:00.000Z"),
+  mint_price: 0,
+  supply: 1,
+  name: "Test NFT",
+  collection: "Test Collection",
+  token_type: "ERC721",
+  description: "Test Description",
+  artist: "Test Artist",
+  artist_seize_handle: "test_artist",
+  uri: "https://example.com/token/1",
+  icon: "https://example.com/icon.png",
+  thumbnail: "https://example.com/thumb.png",
+  scaled: "https://example.com/scaled.png",
+  image: "https://example.com/image.png",
+  animation: "https://example.com/animation.mp4",
+  market_cap: 0,
+  floor_price: 0,
+  total_volume_last_24_hours: 0,
+  total_volume_last_7_days: 0,
+  total_volume_last_1_month: 0,
+  total_volume: 0,
+  highest_offer: 0,
+  ...overrides,
+});
+
+const createMockNFTLite = (overrides: Partial<NFTLite> = {}): NFTLite => ({
+  id: 1,
+  contract: "0x123",
+  name: "Test NFT Lite",
+  icon: "https://example.com/icon.png",
+  thumbnail: "https://example.com/thumb.png",
+  scaled: "https://example.com/scaled.png",
+  image: "https://example.com/image.png",
+  animation: "https://example.com/animation.mp4",
+  ...overrides,
+});
+
+describe("getResolvedImageSrc", () => {
+  it("returns undefined for missing nft", () => {
+    expect(getResolvedImageSrc(undefined)).toBeUndefined();
+  });
+
+  it("returns trimmed metadata.image when it is non-empty", () => {
+    const nft = createMockNFT({
+      image: "https://example.com/top-level.png",
+      metadata: {
+        image: "  https://example.com/metadata.png  ",
+      },
+    });
+
+    expect(getResolvedImageSrc(nft)).toBe("https://example.com/metadata.png");
+  });
+
+  it("falls back to top-level image when metadata.image is whitespace only", () => {
+    const nft = createMockNFT({
+      image: "  https://example.com/top-level.png  ",
+      metadata: {
+        image: "   ",
+      },
+    });
+
+    expect(getResolvedImageSrc(nft)).toBe("https://example.com/top-level.png");
+  });
+
+  it("returns undefined when every candidate is empty or invalid", () => {
+    const nft = createMockNFT({
+      image: "   ",
+      metadata: {
+        image: null,
+      },
+    });
+
+    expect(getResolvedImageSrc(nft)).toBeUndefined();
+  });
+
+  it("returns trimmed top-level image for NFTLite", () => {
+    const nft = createMockNFTLite({
+      image: "  https://example.com/lite.png  ",
+    });
+
+    expect(getResolvedImageSrc(nft)).toBe("https://example.com/lite.png");
+  });
+});
diff --git a/__tests__/components/nft-image/utils/media-type.test.ts b/__tests__/components/nft-image/utils/media-type.test.ts
index 3720982c3a..9322e7f0c8 100644
--- a/__tests__/components/nft-image/utils/media-type.test.ts
+++ b/__tests__/components/nft-image/utils/media-type.test.ts
@@ -1,26 +1,26 @@
-import { getMediaType } from '@/components/nft-image/utils/media-type';
-import type { BaseNFT, NFTLite } from '@/entities/INFT';
+import { getMediaType } from "@/components/nft-image/utils/media-type";
+import type { BaseNFT, NFTLite } from "@/entities/INFT";
 
-describe('media-type utils', () => {
-  describe('getMediaType', () => {
+describe("media-type utils", () => {
+  describe("getMediaType", () => {
     const createMockNFT = (overrides: Partial<BaseNFT> = {}): BaseNFT => ({
       id: 1,
-      contract: '0x123',
+      contract: "0x123",
       created_at: new Date(),
       mint_price: 0,
       supply: 1,
-      name: 'Test NFT',
-      collection: 'Test Collection',
-      token_type: 'ERC721',
-      description: 'Test Description',
-      artist: 'Test Artist',
-      artist_seize_handle: 'test_artist',
-      uri: 'https://example.com/token/1',
-      icon: 'https://example.com/icon.png',
-      thumbnail: 'https://example.com/thumb.png',
-      scaled: 'https://example.com/scaled.png',
-      image: 'https://example.com/image.png',
-      animation: 'https://example.com/animation.mp4',
+      name: "Test NFT",
+      collection: "Test Collection",
+      token_type: "ERC721",
+      description: "Test Description",
+      artist: "Test Artist",
+      artist_seize_handle: "test_artist",
+      uri: "https://example.com/token/1",
+      icon: "https://example.com/icon.png",
+      thumbnail: "https://example.com/thumb.png",
+      scaled: "https://example.com/scaled.png",
+      image: "https://example.com/image.png",
+      animation: "https://example.com/animation.mp4",
       market_cap: 0,
       floor_price: 0,
       total_volume_last_24_hours: 0,
@@ -28,417 +28,440 @@ describe('media-type utils', () => {
       total_volume_last_1_month: 0,
       total_volume: 0,
       highest_offer: 0,
-      ...overrides
+      ...overrides,
     });
 
     const createMockNFTLite = (overrides: Partial<NFTLite> = {}): NFTLite => ({
       id: 1,
-      contract: '0x123',
-      name: 'Test NFT',
-      icon: 'https://example.com/icon.png',
-      thumbnail: 'https://example.com/thumb.png',
-      scaled: 'https://example.com/scaled.png',
-      image: 'https://example.com/image.png',
-      animation: 'https://example.com/animation.mp4',
-      ...overrides
+      contract: "0x123",
+      name: "Test NFT",
+      icon: "https://example.com/icon.png",
+      thumbnail: "https://example.com/thumb.png",
+      scaled: "https://example.com/scaled.png",
+      image: "https://example.com/image.png",
+      animation: "https://example.com/animation.mp4",
+      ...overrides,
     });
 
-    describe('when animation is false', () => {
-      it('returns image type regardless of NFT metadata', () => {
+    describe("when animation is false", () => {
+      it("returns image type regardless of NFT metadata", () => {
         const nft = createMockNFT({
           metadata: {
-            animation_details: { format: 'HTML' }
-          }
+            animation_details: { format: "HTML" },
+          },
         });
-        
+
         const result = getMediaType(nft, false);
-        expect(result).toBe('image');
+        expect(result).toBe("image");
       });
 
-      it('returns image type for NFTLite with animation', () => {
+      it("returns image type for NFTLite with animation", () => {
         const nft = createMockNFTLite();
-        
+
         const result = getMediaType(nft, false);
-        expect(result).toBe('image');
+        expect(result).toBe("image");
       });
     });
 
-    describe('when animation is true but no animation property', () => {
-      it('returns image type when animation property is missing', () => {
-        const nft = createMockNFT({ animation: '' });
-        
+    describe("when animation is true but no animation property", () => {
+      it("returns image type when animation property is missing", () => {
+        const nft = createMockNFT({ animation: "" });
+
         const result = getMediaType(nft, true);
-        expect(result).toBe('image');
+        expect(result).toBe("image");
       });
 
-      it('returns image type when animation property is undefined', () => {
+      it("uses metadata.animation_url when top-level animation is empty", () => {
+        const nft = createMockNFT({
+          animation: "",
+          metadata: {
+            animation_url: "https://example.com/interactive.html",
+            animation_details: { format: "HTML" },
+          },
+        });
+
+        const result = getMediaType(nft, true);
+        expect(result).toBe("html");
+      });
+
+      it("returns image type when animation property is undefined", () => {
         const nft = createMockNFT({ animation: undefined as any });
-        
+
         const result = getMediaType(nft, true);
-        expect(result).toBe('image');
+        expect(result).toBe("image");
       });
 
-      it('returns image type when animation property is null', () => {
+      it("returns image type when animation property is null", () => {
         const nft = createMockNFT({ animation: null as any });
-        
+
         const result = getMediaType(nft, true);
-        expect(result).toBe('image');
+        expect(result).toBe("image");
       });
     });
 
-    describe('when animation is true but NFT has no metadata', () => {
-      it('returns image type for BaseNFT without metadata', () => {
-        const nft = createMockNFT({ ...(undefined !== undefined ? { metadata: undefined } : {}) });
-        
+    describe("when animation is true but NFT has no metadata", () => {
+      it("returns image type for BaseNFT without metadata", () => {
+        const nft = createMockNFT({
+          ...(undefined !== undefined ? { metadata: undefined } : {}),
+        });
+
         const result = getMediaType(nft, true);
-        expect(result).toBe('image');
+        expect(result).toBe("image");
       });
 
-      it('returns image type for BaseNFT with null metadata', () => {
+      it("returns image type for BaseNFT with null metadata", () => {
         const nft = createMockNFT({ metadata: null });
-        
+
         const result = getMediaType(nft, true);
-        expect(result).toBe('image');
+        expect(result).toBe("image");
       });
 
-      it('returns image type for NFTLite (no metadata property)', () => {
+      it("returns image type for NFTLite (no metadata property)", () => {
         const nft = createMockNFTLite();
-        
+
         const result = getMediaType(nft, true);
-        expect(result).toBe('image');
+        expect(result).toBe("image");
       });
     });
 
-    describe('when animation is true but no animation_details', () => {
-      it('returns image type when animation_details is missing', () => {
+    describe("when animation is true but no animation_details", () => {
+      it("returns image type when animation_details is missing", () => {
         const nft = createMockNFT({
-          metadata: {}
+          metadata: {},
         });
-        
+
         const result = getMediaType(nft, true);
-        expect(result).toBe('image');
+        expect(result).toBe("image");
       });
 
-      it('returns image type when animation_details is null', () => {
+      it("returns image type when animation_details is null", () => {
         const nft = createMockNFT({
-          metadata: { animation_details: null }
+          metadata: { animation_details: null },
         });
-        
+
         const result = getMediaType(nft, true);
-        expect(result).toBe('image');
+        expect(result).toBe("image");
       });
 
-      it('returns image type when animation_details format is missing', () => {
+      it("returns image type when animation_details format is missing", () => {
         const nft = createMockNFT({
-          metadata: { animation_details: {} }
+          metadata: { animation_details: {} },
         });
-        
+
         const result = getMediaType(nft, true);
-        expect(result).toBe('image');
+        expect(result).toBe("image");
       });
 
-      it('returns image type when animation_details format is null', () => {
+      it("returns image type when animation_details format is null", () => {
         const nft = createMockNFT({
-          metadata: { animation_details: { format: null } }
+          metadata: { animation_details: { format: null } },
         });
-        
+
         const result = getMediaType(nft, true);
-        expect(result).toBe('image');
+        expect(result).toBe("image");
       });
     });
 
-    describe('when animation is true and format is available', () => {
-      describe('HTML format', () => {
-        it('returns html for uppercase HTML', () => {
+    describe("when animation is true and format is available", () => {
+      describe("HTML format", () => {
+        it("returns html for uppercase HTML", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'HTML' }
-            }
+              animation_details: { format: "HTML" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('html');
+          expect(result).toBe("html");
         });
 
-        it('returns html for lowercase html', () => {
+        it("returns html for lowercase html", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'html' }
-            }
+              animation_details: { format: "html" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('html');
+          expect(result).toBe("html");
         });
 
-        it('returns html for mixed case Html', () => {
+        it("returns html for mixed case Html", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'Html' }
-            }
+              animation_details: { format: "Html" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('html');
+          expect(result).toBe("html");
         });
       });
 
-      describe('GLB format', () => {
-        it('returns glb for uppercase GLB', () => {
+      describe("GLB format", () => {
+        it("returns glb for uppercase GLB", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'GLB' }
-            }
+              animation_details: { format: "GLB" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('glb');
+          expect(result).toBe("glb");
         });
 
-        it('returns glb for lowercase glb', () => {
+        it("returns glb for lowercase glb", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'glb' }
-            }
+              animation_details: { format: "glb" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('glb');
+          expect(result).toBe("glb");
         });
 
-        it('returns glb for mixed case Glb', () => {
+        it("returns glb for mixed case Glb", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'Glb' }
-            }
+              animation_details: { format: "Glb" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('glb');
+          expect(result).toBe("glb");
         });
       });
 
-      describe('Video formats', () => {
-        it('returns video for uppercase MP4', () => {
+      describe("Video formats", () => {
+        it("returns video for uppercase MP4", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'MP4' }
-            }
+              animation_details: { format: "MP4" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('video');
+          expect(result).toBe("video");
         });
 
-        it('returns video for lowercase mp4', () => {
+        it("returns video for lowercase mp4", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'mp4' }
-            }
+              animation_details: { format: "mp4" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('video');
+          expect(result).toBe("video");
         });
 
-        it('returns video for mixed case Mp4', () => {
+        it("returns video for mixed case Mp4", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'Mp4' }
-            }
+              animation_details: { format: "Mp4" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('video');
+          expect(result).toBe("video");
         });
 
-        it('returns video for uppercase MOV', () => {
+        it("returns video for uppercase MOV", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'MOV' }
-            }
+              animation_details: { format: "MOV" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('video');
+          expect(result).toBe("video");
         });
 
-        it('returns video for lowercase mov', () => {
+        it("returns video for lowercase mov", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'mov' }
-            }
+              animation_details: { format: "mov" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('video');
+          expect(result).toBe("video");
         });
 
-        it('returns video for mixed case Mov', () => {
+        it("returns video for mixed case Mov", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'Mov' }
-            }
+              animation_details: { format: "Mov" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('video');
+          expect(result).toBe("video");
         });
       });
 
-      describe('Unknown formats', () => {
-        it('returns image for unknown format', () => {
+      describe("Unknown formats", () => {
+        it("returns image for unknown format", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'unknown' }
-            }
+              animation_details: { format: "unknown" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('image');
+          expect(result).toBe("image");
         });
 
-        it('returns image for gif format', () => {
+        it("returns image for gif format", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'gif' }
-            }
+              animation_details: { format: "gif" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('image');
+          expect(result).toBe("image");
         });
 
-        it('returns image for png format', () => {
+        it("returns image for png format", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'png' }
-            }
+              animation_details: { format: "png" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('image');
+          expect(result).toBe("image");
         });
 
-        it('returns image for jpg format', () => {
+        it("returns image for jpg format", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: 'jpg' }
-            }
+              animation_details: { format: "jpg" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('image');
+          expect(result).toBe("image");
         });
 
-        it('returns image for empty string format', () => {
+        it("returns image for empty string format", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: '' }
-            }
+              animation_details: { format: "" },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('image');
+          expect(result).toBe("image");
         });
 
-        it('returns image for whitespace format', () => {
+        it("returns image for whitespace format", () => {
           const nft = createMockNFT({
             metadata: {
-              animation_details: { format: '  ' }
-            }
+              animation_details: { format: "  " },
+            },
           });
-          
+
           const result = getMediaType(nft, true);
-          expect(result).toBe('image');
+          expect(result).toBe("image");
         });
       });
     });
 
-    describe('edge cases', () => {
-      it('handles deeply nested metadata structure correctly', () => {
+    describe("edge cases", () => {
+      it("handles deeply nested metadata structure correctly", () => {
         const nft = createMockNFT({
           metadata: {
-            other_property: 'value',
+            other_property: "value",
             animation_details: {
-              format: 'html',
-              other_detail: 'value'
+              format: "html",
+              other_detail: "value",
             },
-            more_data: 'value'
-          }
+            more_data: "value",
+          },
         });
-        
+
         const result = getMediaType(nft, true);
-        expect(result).toBe('html');
+        expect(result).toBe("html");
       });
 
-      it('handles format with extra whitespace', () => {
+      it("handles format with extra whitespace", () => {
         const nft = createMockNFT({
           metadata: {
-            animation_details: { format: '  mp4  ' }
-          }
+            animation_details: { format: "  mp4  " },
+          },
         });
-        
+
         const result = getMediaType(nft, true);
-        expect(result).toBe('image'); // Should not match due to whitespace
+        expect(result).toBe("image"); // Should not match due to whitespace
       });
 
-      it('throws error for non-string format types (current implementation limitation)', () => {
+      it("throws error for non-string format types (current implementation limitation)", () => {
         const nft = createMockNFT({
           metadata: {
-            animation_details: { format: 123 as any }
-          }
+            animation_details: { format: 123 as any },
+          },
         });
-        
-        expect(() => getMediaType(nft, true)).toThrow('format.toLowerCase is not a function');
+
+        expect(() => getMediaType(nft, true)).toThrow(
+          "format.toLowerCase is not a function"
+        );
       });
 
-      it('throws error for boolean format types (current implementation limitation)', () => {
+      it("throws error for boolean format types (current implementation limitation)", () => {
         const nft = createMockNFT({
           metadata: {
-            animation_details: { format: true as any }
-          }
+            animation_details: { format: true as any },
+          },
         });
-        
-        expect(() => getMediaType(nft, true)).toThrow('format.toLowerCase is not a function');
+
+        expect(() => getMediaType(nft, true)).toThrow(
+          "format.toLowerCase is not a function"
+        );
       });
 
-      it('throws error for array format types (current implementation limitation)', () => {
+      it("throws error for array format types (current implementation limitation)", () => {
         const nft = createMockNFT({
           metadata: {
-            animation_details: { format: ['html'] as any }
-          }
+            animation_details: { format: ["html"] as any },
+          },
         });
-        
-        expect(() => getMediaType(nft, true)).toThrow('format.toLowerCase is not a function');
+
+        expect(() => getMediaType(nft, true)).toThrow(
+          "format.toLowerCase is not a function"
+        );
       });
 
-      it('throws error for object format types (current implementation limitation)', () => {
+      it("throws error for object format types (current implementation limitation)", () => {
         const nft = createMockNFT({
           metadata: {
-            animation_details: { format: { type: 'html' } as any }
-          }
+            animation_details: { format: { type: "html" } as any },
+          },
         });
-        
-        expect(() => getMediaType(nft, true)).toThrow('format.toLowerCase is not a function');
+
+        expect(() => getMediaType(nft, true)).toThrow(
+          "format.toLowerCase is not a function"
+        );
       });
     });
 
-    describe('type safety', () => {
-      it('works with BaseNFT type', () => {
+    describe("type safety", () => {
+      it("works with BaseNFT type", () => {
         const nft: BaseNFT = createMockNFT({
-          metadata: { animation_details: { format: 'html' } }
+          metadata: { animation_details: { format: "html" } },
         });
-        
+
         const result = getMediaType(nft, true);
-        expect(result).toBe('html');
+        expect(result).toBe("html");
       });
 
-      it('works with NFTLite type', () => {
+      it("works with NFTLite type", () => {
         const nft: NFTLite = createMockNFTLite();
-        
+
         const result = getMediaType(nft, false);
-        expect(result).toBe('image');
+        expect(result).toBe("image");
       });
     });
   });
diff --git a/__tests__/components/the-memes/MemePageArt.test.tsx b/__tests__/components/the-memes/MemePageArt.test.tsx
index 81df516c57..06fb6d20fd 100644
--- a/__tests__/components/the-memes/MemePageArt.test.tsx
+++ b/__tests__/components/the-memes/MemePageArt.test.tsx
@@ -1,10 +1,43 @@
 import { MemePageArt } from "@/components/the-memes/MemePageArt";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+jest.mock("react-bootstrap", () => {
+  const actual = jest.requireActual("react-bootstrap");
+  const Carousel = ({ children, onSlide, ...props }: any) => (
+    <div data-testid="carousel" {...props}>
+      <button
+        type="button"
+        data-testid="carousel-slide-0"
+        onClick={() => onSlide?.(0)}
+      />
+      <button
+        type="button"
+        data-testid="carousel-slide-1"
+        onClick={() => onSlide?.(1)}
+      />
+      {children}
+    </div>
+  );
+
+  Carousel.Item = ({ children, ...props }: any) => (
+    <div {...props}>{children}</div>
+  );
+
+  return {
+    ...actual,
+    Carousel,
+  };
+});
 
 jest.mock("next/link", () => ({
   __esModule: true,
   default: ({ href, children }: any) => <a href={href}>{children}</a>,
 }));
+jest.mock("@fortawesome/react-fontawesome", () => ({
+  FontAwesomeIcon: (props: any) => (
+    <svg data-testid="fullscreen-icon" onClick={props.onClick} />
+  ),
+}));
 
 jest.mock("@/components/nft-image/NFTImage", () => ({
   __esModule: true,
@@ -12,7 +45,9 @@ jest.mock("@/components/nft-image/NFTImage", () => ({
 }));
 jest.mock("@/components/download/Download", () => ({
   __esModule: true,
-  default: () => <div data-testid="download" />,
+  default: ({ href }: { href: string }) => (
+    <div data-testid="download" data-href={href} />
+  ),
 }));
 jest.mock("@/components/the-memes/ArtistProfileHandle", () => ({
   __esModule: true,
@@ -26,14 +61,26 @@ jest.mock("@/helpers/Helpers", () => ({
   printMintDate: (d: string) => d,
 }));
 jest.mock("@/helpers/nft.helpers", () => ({
-  getFileTypeFromMetadata: () => "png",
-  getDimensionsFromMetadata: () => "100x100",
+  getAnimationDimensionsFromMetadata: jest.fn(),
+  getAnimationFileTypeFromMetadata: jest.fn(),
+  getImageDimensionsFromMetadata: jest.fn(),
+  getImageFileTypeFromMetadata: jest.fn(),
 }));
 jest.mock("@/components/nft-attributes/NFTAttributes", () => ({
   __esModule: true,
   default: () => <div data-testid="attrs" />,
 }));
 
+const mockHelpers = jest.requireMock("@/helpers/Helpers") as {
+  enterArtFullScreen: jest.Mock;
+};
+const mockNftHelpers = jest.requireMock("@/helpers/nft.helpers") as {
+  getAnimationDimensionsFromMetadata: jest.Mock;
+  getAnimationFileTypeFromMetadata: jest.Mock;
+  getImageDimensionsFromMetadata: jest.Mock;
+  getImageFileTypeFromMetadata: jest.Mock;
+};
+
 const nft = {
   id: 5,
   has_distribution: false,
@@ -58,6 +105,25 @@ const nft = {
 };
 const nftMeta = { season: 1, meme_name: "meme" };
 
+const getCardDetailValue = (label: string): string => {
+  const labelCell = screen.getByText((_, element) => {
+    return element?.textContent?.toLowerCase() === label.toLowerCase();
+  });
+  const row = labelCell.closest("tr");
+  const value = row?.querySelectorAll("td")[1]?.textContent;
+
+  expect(value).toBeTruthy();
+  return value ?? "";
+};
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockNftHelpers.getAnimationFileTypeFromMetadata.mockReturnValue("gif");
+  mockNftHelpers.getImageFileTypeFromMetadata.mockReturnValue("png");
+  mockNftHelpers.getAnimationDimensionsFromMetadata.mockReturnValue("200x300");
+  mockNftHelpers.getImageDimensionsFromMetadata.mockReturnValue("100x100");
+});
+
 describe("MemePageArt", () => {
   it("returns empty when missing data", () => {
     const { container } = render(
@@ -77,5 +143,165 @@ describe("MemePageArt", () => {
     expect(screen.getByText("Properties")).toBeInTheDocument();
     expect(screen.getByText("Stats")).toBeInTheDocument();
     expect(screen.getByText("Boosts")).toBeInTheDocument();
+    expect(getCardDetailValue("File type")).toBe("png");
+    expect(getCardDetailValue("Dimensions")).toBe("100x100");
+  });
+
+  it("falls back to top-level media URLs for art links", () => {
+    const nftWithTopLevelMedia = {
+      ...nft,
+      image: "https://top-level.example/image.png",
+      animation: "https://top-level.example/animation.mp4",
+      metadata: {
+        image_details: { format: "png", width: 1, height: 2 },
+        animation_details: { format: "gif", width: 1, height: 2 },
+        attributes: nft.metadata.attributes,
+      },
+    };
+
+    render(
+      <MemePageArt
+        show={true}
+        nft={nftWithTopLevelMedia as any}
+        nftMeta={nftMeta as any}
+      />
+    );
+
+    expect(
+      screen.getByRole("link", {
+        name: "https://top-level.example/image.png",
+      })
+    ).toHaveAttribute("href", "https://top-level.example/image.png");
+    expect(
+      screen.getByRole("link", {
+        name: "https://top-level.example/animation.mp4",
+      })
+    ).toHaveAttribute("href", "https://top-level.example/animation.mp4");
+  });
+
+  it("ignores whitespace metadata.image and falls back to the top-level image", () => {
+    const nftWithWhitespaceMetadataImage = {
+      ...nft,
+      image: "  https://top-level.example/image.png  ",
+      metadata: {
+        ...nft.metadata,
+        image: "   ",
+      },
+    };
+
+    render(
+      <MemePageArt
+        show={true}
+        nft={nftWithWhitespaceMetadataImage as any}
+        nftMeta={nftMeta as any}
+      />
+    );
+
+    expect(
+      screen.getByRole("link", {
+        name: "https://top-level.example/image.png",
+      })
+    ).toHaveAttribute("href", "https://top-level.example/image.png");
+    expect(screen.getByTestId("download")).toHaveAttribute(
+      "data-href",
+      "https://top-level.example/image.png"
+    );
+  });
+
+  it("treats metadata.animation_url-only NFTs as animated", () => {
+    const nftWithAnimationUrlOnly = {
+      ...nft,
+      animation: "",
+      metadata: {
+        image_details: { format: "png", width: 1, height: 2 },
+        animation_details: { format: "gif", width: 1, height: 2 },
+        animation_url: "https://metadata.example/animation.gif",
+        attributes: nft.metadata.attributes,
+        image: "img",
+      },
+    };
+
+    render(
+      <MemePageArt
+        show={true}
+        nft={nftWithAnimationUrlOnly as any}
+        nftMeta={nftMeta as any}
+      />
+    );
+
+    expect(screen.getAllByTestId("nft")).toHaveLength(2);
+    expect(
+      screen.getByRole("link", {
+        name: "https://metadata.example/animation.gif",
+      })
+    ).toHaveAttribute("href", "https://metadata.example/animation.gif");
+    expect(getCardDetailValue("File type")).toBe("gif");
+    expect(getCardDetailValue("Dimensions")).toBe("200x300");
+  });
+
+  it("switches card details to image metadata on the image slide", () => {
+    const nftWithAnimationUrlOnly = {
+      ...nft,
+      animation: "",
+      metadata: {
+        image_details: { format: "png", width: 1, height: 2 },
+        animation_details: { format: "gif", width: 1, height: 2 },
+        animation_url: "https://metadata.example/animation.gif",
+        attributes: nft.metadata.attributes,
+        image: "img",
+      },
+    };
+
+    render(
+      <MemePageArt
+        show={true}
+        nft={nftWithAnimationUrlOnly as any}
+        nftMeta={nftMeta as any}
+      />
+    );
+
+    fireEvent.click(screen.getByTestId("carousel-slide-1"));
+
+    expect(getCardDetailValue("File type")).toBe("png");
+    expect(getCardDetailValue("Dimensions")).toBe("100x100");
+  });
+
+  it("keeps animation active when the NFT has no image slide", () => {
+    const nftWithAnimationOnly = {
+      ...nft,
+      image: "",
+      animation: "",
+      metadata: {
+        image_details: undefined,
+        animation_details: { format: "gif", width: 1, height: 2 },
+        animation_url: "https://metadata.example/animation.gif",
+        attributes: nft.metadata.attributes,
+        image: "",
+      },
+    };
+
+    render(
+      <MemePageArt
+        show={true}
+        nft={nftWithAnimationOnly as any}
+        nftMeta={nftMeta as any}
+      />
+    );
+
+    expect(screen.getAllByTestId("nft")).toHaveLength(1);
+    expect(getCardDetailValue("File type")).toBe("gif");
+    expect(getCardDetailValue("Dimensions")).toBe("200x300");
+
+    fireEvent.click(screen.getByTestId("carousel-slide-1"));
+
+    expect(screen.getAllByTestId("nft")).toHaveLength(1);
+    expect(getCardDetailValue("File type")).toBe("gif");
+    expect(getCardDetailValue("Dimensions")).toBe("200x300");
+
+    fireEvent.click(screen.getByTestId("fullscreen-icon"));
+
+    expect(mockHelpers.enterArtFullScreen).toHaveBeenCalledWith(
+      "the-art-fullscreen-animation"
+    );
   });
 });
diff --git a/__tests__/contexts/SeizeSettingsContext.test.tsx b/__tests__/contexts/SeizeSettingsContext.test.tsx
index cabd6516bc..49d03fbb1e 100644
--- a/__tests__/contexts/SeizeSettingsContext.test.tsx
+++ b/__tests__/contexts/SeizeSettingsContext.test.tsx
@@ -7,6 +7,10 @@ import { render, screen, waitFor } from "@testing-library/react";
 jest.mock("@/services/6529api", () => ({ fetchUrl: jest.fn() }));
 const { fetchUrl } = jest.requireMock("@/services/6529api");
 
+beforeEach(() => {
+  fetchUrl.mockReset();
+});
+
 test("provides settings and helper", async () => {
   fetchUrl.mockResolvedValue({
     rememes_submission_tdh_threshold: 1,
@@ -42,6 +46,51 @@ test("provides settings and helper", async () => {
   );
 });
 
+test("captures initial load failures without leaking an unhandled rejection", async () => {
+  const expectedError = new Error("network down");
+  const onUnhandledRejection = jest.fn();
+  const unhandledRejectionHandler = (event: PromiseRejectionEvent) => {
+    event.preventDefault();
+    onUnhandledRejection(event);
+  };
+  const consoleErrorSpy = jest
+    .spyOn(console, "error")
+    .mockImplementation(() => {});
+
+  fetchUrl.mockRejectedValueOnce(expectedError);
+
+  function Consumer() {
+    const { isLoaded, loadError } = useSeizeSettings();
+    return <div>{`${isLoaded}-${loadError?.message ?? "no-error"}`}</div>;
+  }
+
+  globalThis.addEventListener("unhandledrejection", unhandledRejectionHandler);
+
+  try {
+    render(
+      <SeizeSettingsProvider>
+        <Consumer />
+      </SeizeSettingsProvider>
+    );
+
+    await waitFor(() =>
+      expect(screen.getByText("false-network down")).toBeInTheDocument()
+    );
+
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      "Failed to fetch seize settings",
+      expectedError
+    );
+    expect(onUnhandledRejection).not.toHaveBeenCalled();
+  } finally {
+    globalThis.removeEventListener(
+      "unhandledrejection",
+      unhandledRejectionHandler
+    );
+    consoleErrorSpy.mockRestore();
+  }
+});
+
 test("hook outside provider throws", () => {
   function CallHook() {
     useSeizeSettings();
diff --git a/__tests__/helpers/nft.helpers.test.ts b/__tests__/helpers/nft.helpers.test.ts
new file mode 100644
index 0000000000..7d999d1869
--- /dev/null
+++ b/__tests__/helpers/nft.helpers.test.ts
@@ -0,0 +1,90 @@
+import {
+  getAnimationDimensionsFromMetadata,
+  getAnimationFileTypeFromMetadata,
+  getDimensionsFromMetadata,
+  getFileTypeFromMetadata,
+  getImageDimensionsFromMetadata,
+  getImageFileTypeFromMetadata,
+} from "@/helpers/nft.helpers";
+
+describe("nft.helpers", () => {
+  it("prefers animation format when both media types are present", () => {
+    const metadata = {
+      animation_details: { format: "MP4", width: 1920, height: 1080 },
+      image_details: { format: "PNG", width: 1200, height: 800 },
+    };
+
+    expect(getFileTypeFromMetadata(metadata)).toBe("MP4");
+    expect(getDimensionsFromMetadata(metadata)).toBe("1,920 x 1,080");
+  });
+
+  it("falls back to image metadata when animation details are incomplete", () => {
+    const metadata = {
+      animation_details: { format: "HTML", width: 1920 },
+      image_details: { format: "PNG", width: 1200, height: 800 },
+    };
+
+    expect(getFileTypeFromMetadata(metadata)).toBe("HTML");
+    expect(getDimensionsFromMetadata(metadata)).toBe("1,200 x 800");
+  });
+
+  it("returns media-specific formats safely", () => {
+    const metadata = {
+      animation_details: { format: " MP4 ", width: 1920, height: 1080 },
+      image_details: { format: " PNG ", width: 1200, height: 800 },
+    };
+
+    expect(getAnimationFileTypeFromMetadata(metadata)).toBe("MP4");
+    expect(getImageFileTypeFromMetadata(metadata)).toBe("PNG");
+    expect(getAnimationDimensionsFromMetadata(metadata)).toBe("1,920 x 1,080");
+    expect(getImageDimensionsFromMetadata(metadata)).toBe("1,200 x 800");
+  });
+
+  it("returns null for empty, whitespace-only, and non-string formats", () => {
+    expect(
+      getAnimationFileTypeFromMetadata({
+        animation_details: { format: "   " },
+      })
+    ).toBeNull();
+
+    expect(
+      getImageFileTypeFromMetadata({
+        image_details: { format: "" },
+      })
+    ).toBeNull();
+
+    expect(
+      getAnimationFileTypeFromMetadata({
+        animation_details: { format: null as any },
+      })
+    ).toBeNull();
+
+    expect(
+      getImageFileTypeFromMetadata({
+        image_details: { format: 123 as any },
+      })
+    ).toBeNull();
+  });
+
+  it("returns null when no usable media metadata is present", () => {
+    expect(getFileTypeFromMetadata({})).toBeNull();
+    expect(getDimensionsFromMetadata({})).toBeNull();
+  });
+
+  it("returns null for nullish metadata and incomplete dimensions", () => {
+    expect(getFileTypeFromMetadata(null)).toBeNull();
+    expect(getDimensionsFromMetadata(undefined)).toBeNull();
+    expect(getAnimationDimensionsFromMetadata(undefined)).toBeNull();
+    expect(getImageDimensionsFromMetadata(null)).toBeNull();
+    expect(
+      getDimensionsFromMetadata({
+        image_details: { width: 1200 },
+      })
+    ).toBeNull();
+    expect(
+      getAnimationDimensionsFromMetadata({
+        animation_details: { width: 1920 },
+      })
+    ).toBeNull();
+  });
+});
diff --git a/components/home/now-minting/NowMintingDetailsAccordion.tsx b/components/home/now-minting/NowMintingDetailsAccordion.tsx
index 47104802b1..04228d30fe 100644
--- a/components/home/now-minting/NowMintingDetailsAccordion.tsx
+++ b/components/home/now-minting/NowMintingDetailsAccordion.tsx
@@ -5,8 +5,8 @@ import Link from "next/link";
 interface NowMintingDetailsAccordionProps {
   readonly nftId: number;
   readonly mintDate: Date | undefined;
-  readonly fileType: string;
-  readonly dimensions: string;
+  readonly fileType?: string | null | undefined;
+  readonly dimensions?: string | null | undefined;
   readonly collection: string;
   readonly season: number;
 }
@@ -21,8 +21,8 @@ export default function NowMintingDetailsAccordion({
 }: NowMintingDetailsAccordionProps) {
   const details = [
     { label: "Mint date", value: printMintDate(mintDate) },
-    { label: "File type", value: fileType },
-    { label: "Dimensions", value: dimensions },
+    ...(fileType ? [{ label: "File type", value: fileType }] : []),
+    ...(dimensions ? [{ label: "Dimensions", value: dimensions }] : []),
     { label: "Collection", value: collection },
     { label: "Season", value: `SZN${season}` },
   ];
diff --git a/components/memelab/MemeLabPage.tsx b/components/memelab/MemeLabPage.tsx
index c45c087f92..883298c094 100644
--- a/components/memelab/MemeLabPage.tsx
+++ b/components/memelab/MemeLabPage.tsx
@@ -14,6 +14,8 @@ import MemeLabLeaderboard from "@/components/leaderboard/MemeLabLeaderboard";
 import NFTAttributes from "@/components/nft-attributes/NFTAttributes";
 import { NftPageStats } from "@/components/nft-attributes/NftStats";
 import NFTImage from "@/components/nft-image/NFTImage";
+import { getResolvedAnimationSrc } from "@/components/nft-image/utils/animation-source";
+import { getResolvedImageSrc } from "@/components/nft-image/utils/image-source";
 import NFTMarketplaceLinks from "@/components/nft-marketplace-links/NFTMarketplaceLinks";
 import NftNavigation from "@/components/nft-navigation/NftNavigation";
 import TransferSingle from "@/components/nft-transfer/TransferSingle";
@@ -50,8 +52,10 @@ import {
   printMintDate,
 } from "@/helpers/Helpers";
 import {
-  getDimensionsFromMetadata,
-  getFileTypeFromMetadata,
+  getAnimationDimensionsFromMetadata,
+  getAnimationFileTypeFromMetadata,
+  getImageDimensionsFromMetadata,
+  getImageFileTypeFromMetadata,
 } from "@/helpers/nft.helpers";
 import { TypeFilter } from "@/hooks/useActivityData";
 import useCapacitor from "@/hooks/useCapacitor";
@@ -94,7 +98,8 @@ export default function MemeLabPageComponent({
 
   const [nft, setNft] = useState<LabNFT>();
 
-  const hasAnimation = nft?.animation || nft?.metadata?.animation;
+  const animationHref = getResolvedAnimationSrc(nft);
+  const hasAnimation = Boolean(animationHref);
   const fullscreenElementId =
     hasAnimation && currentSlide === 0
       ? "the-art-fullscreen-animation"
@@ -973,16 +978,16 @@ export default function MemeLabPageComponent({
     setCurrentSlide(event);
   }
 
-  let currentFormat: string | undefined;
-  if (nft?.animation) {
-    if (currentSlide === 0) {
-      currentFormat = nft.metadata.animation_details.format;
-    } else {
-      currentFormat = nft.metadata.image_details.format;
-    }
-  } else {
-    currentFormat = nft?.metadata.image_details.format;
-  }
+  const imageFormat = getImageFileTypeFromMetadata(nft?.metadata);
+  const animationFormat = getAnimationFileTypeFromMetadata(nft?.metadata);
+  const imageDimensions = getImageDimensionsFromMetadata(nft?.metadata);
+  const animationDimensions = getAnimationDimensionsFromMetadata(nft?.metadata);
+  const imageHref = getResolvedImageSrc(nft);
+  const hasImage = Boolean(imageHref);
+  const isShowingAnimation = hasAnimation && (currentSlide === 0 || !hasImage);
+  const fileType = isShowingAnimation ? animationFormat : imageFormat;
+  const dimensions = isShowingAnimation ? animationDimensions : imageDimensions;
+  const currentFormat = fileType ?? "";
 
   function printTheArt() {
     if (nft && nftMeta) {
@@ -990,7 +995,7 @@ export default function MemeLabPageComponent({
         <>
           <Container className="p-0">
             <Row className="position-relative">
-              {nft.animation ? (
+              {hasAnimation ? (
                 <>
                   <Col xs={12} className={styles["artHeader"]}>
                     <div className={styles["artHeaderContent"]}>
@@ -1083,51 +1088,42 @@ export default function MemeLabPageComponent({
                           <h3>Arweave Links</h3>
                         </Col>
                       </Row>
-                      <Row>
-                        <Col className="tw-flex tw-items-center tw-gap-1">
-                          <span>{nft.metadata.image_details.format}</span>
-                          <Link
-                            className={styles["arweaveLink"]}
-                            href={nft.metadata.image}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            {nft.metadata.image}
-                          </Link>
-                          <Download
-                            href={nft.metadata.image}
-                            name={nft.name}
-                            extension={nft.metadata.image_details.format}
-                          />
-                        </Col>
-                      </Row>
-                      {(nft.metadata.animation ||
-                        nft.metadata.animation_url) && (
+                      {imageHref && (
+                        <Row>
+                          <Col className="tw-flex tw-items-center tw-gap-1">
+                            {imageFormat && <span>{imageFormat}</span>}
+                            <Link
+                              className={styles["arweaveLink"]}
+                              href={imageHref}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              {imageHref}
+                            </Link>
+                            <Download
+                              href={imageHref}
+                              name={nft.name}
+                              extension={imageFormat ?? ""}
+                            />
+                          </Col>
+                        </Row>
+                      )}
+                      {animationHref && (
                         <Row className="pt-3">
                           <Col className="tw-flex tw-items-center tw-gap-1">
-                            <span>{nft.metadata.animation_details.format}</span>
+                            {animationFormat && <span>{animationFormat}</span>}
                             <Link
                               className={styles["arweaveLink"]}
-                              href={
-                                nft.metadata.animation
-                                  ? nft.metadata.animation
-                                  : nft.metadata.animation_url
-                              }
+                              href={animationHref}
                               target="_blank"
                               rel="noopener noreferrer"
                             >
-                              {nft.metadata.animation
-                                ? nft.metadata.animation
-                                : nft.metadata.animation_url}
+                              {animationHref}
                             </Link>
                             <Download
-                              href={
-                                nft.metadata.animation
-                                  ? nft.metadata.animation
-                                  : nft.metadata.animation_url
-                              }
+                              href={animationHref}
                               name={nft.name}
-                              extension={nft.metadata.animation_details.format}
+                              extension={animationFormat ?? ""}
                             />
                           </Col>
                         </Row>
@@ -1178,14 +1174,18 @@ export default function MemeLabPageComponent({
                             <td>Mint Date</td>
                             <td>{printMintDate(nft.mint_date)}</td>
                           </tr>
-                          <tr>
-                            <td>File Type</td>
-                            <td>{getFileTypeFromMetadata(nft.metadata)}</td>
-                          </tr>
-                          <tr>
-                            <td>Dimensions</td>
-                            <td>{getDimensionsFromMetadata(nft.metadata)}</td>
-                          </tr>
+                          {fileType && (
+                            <tr>
+                              <td>File Type</td>
+                              <td>{fileType}</td>
+                            </tr>
+                          )}
+                          {dimensions && (
+                            <tr>
+                              <td>Dimensions</td>
+                              <td>{dimensions}</td>
+                            </tr>
+                          )}
                         </tbody>
                       </Table>
                     </Col>
diff --git a/components/nft-image/NFTModel.tsx b/components/nft-image/NFTModel.tsx
index 611c5aeedc..64d38af947 100644
--- a/components/nft-image/NFTModel.tsx
+++ b/components/nft-image/NFTModel.tsx
@@ -1,5 +1,6 @@
 import "@google/model-viewer";
 import type { BaseNFT } from "@/entities/INFT";
+import { getResolvedAnimationSrc } from "./utils/animation-source";
 
 export default function NFTModel(
   props: Readonly<{ nft: BaseNFT; id?: string | undefined }>
@@ -8,12 +9,13 @@ export default function NFTModel(
     // @ts-ignore
     <model-viewer
       id={props.id ?? `iframe-${props.nft.id}`}
-      src={props.nft.metadata.animation ?? props.nft.metadata.animation_url}
+      src={getResolvedAnimationSrc(props.nft)}
       alt={props.nft.name}
       auto-rotate
       camera-controls
       ar
       // @ts-ignore
-      poster={props.nft.scaled}></model-viewer>
+      poster={props.nft.scaled}
+    ></model-viewer>
   );
 }
diff --git a/components/nft-image/renderers/NFTHTMLRenderer.tsx b/components/nft-image/renderers/NFTHTMLRenderer.tsx
index da9ecf58e1..f01ece3bd6 100644
--- a/components/nft-image/renderers/NFTHTMLRenderer.tsx
+++ b/components/nft-image/renderers/NFTHTMLRenderer.tsx
@@ -4,26 +4,19 @@ import { Col } from "react-bootstrap";
 import styles from "../NFTImage.module.scss";
 import NFTImageBalance from "../NFTImageBalance";
 import type { BaseRendererProps } from "../types/renderer-props";
+import { getResolvedAnimationSrc } from "../utils/animation-source";
 
 function getSrc(nft: BaseRendererProps["nft"]): string | undefined {
-  const hasMetadata = "metadata" in nft;
-  const hasAnimation = hasMetadata && nft.metadata.animation;
-
-  if (hasAnimation) {
-    return nft.metadata.animation;
-  } else if (hasMetadata) {
-    return nft.metadata.animation_url;
-  }
-
-  return undefined;
+  return getResolvedAnimationSrc(nft);
 }
 
 export default function NFTHTMLRenderer(props: Readonly<BaseRendererProps>) {
   const src = getSrc(props.nft);
+  const animationClassName = styles["nftAnimation"] ?? "";
 
   return (
     <Col
-      className={`${styles["nftAnimation"]} ${props.heightStyle} ${props.imageStyle} ${props.bgStyle} d-flex justify-content-center align-items-center`}
+      className={`${animationClassName} ${props.heightStyle} ${props.imageStyle} ${props.bgStyle} d-flex justify-content-center align-items-center`}
     >
       {props.showBalance && (
         <NFTImageBalance
diff --git a/components/nft-image/renderers/NFTModelRenderer.tsx b/components/nft-image/renderers/NFTModelRenderer.tsx
index 59959e38e4..d1a76de1e9 100644
--- a/components/nft-image/renderers/NFTModelRenderer.tsx
+++ b/components/nft-image/renderers/NFTModelRenderer.tsx
@@ -13,9 +13,12 @@ export default function NFTModelRenderer(props: Readonly<BaseRendererProps>) {
     return null;
   }
 
+  const animationClassName = styles["nftAnimation"] ?? "";
+
   return (
     <Col
-      className={`${styles["nftAnimation"]} ${props.imageStyle} ${props.bgStyle} d-flex justify-content-center align-items-center`}>
+      className={`${animationClassName} ${props.imageStyle} ${props.bgStyle} d-flex justify-content-center align-items-center`}
+    >
       {props.showBalance && (
         <NFTImageBalance
           contract={props.nft.contract}
diff --git a/components/nft-image/renderers/NFTVideoRenderer.tsx b/components/nft-image/renderers/NFTVideoRenderer.tsx
index 87c8238447..e38d2320fe 100644
--- a/components/nft-image/renderers/NFTVideoRenderer.tsx
+++ b/components/nft-image/renderers/NFTVideoRenderer.tsx
@@ -4,12 +4,35 @@ import { Col } from "react-bootstrap";
 import styles from "../NFTImage.module.scss";
 import NFTImageBalance from "../NFTImageBalance";
 import type { BaseRendererProps } from "../types/renderer-props";
+import { getResolvedAnimationSrc } from "../utils/animation-source";
 import { withArweaveFallback } from "../utils/arweave-fallback";
 
+const globalScope = globalThis as typeof globalThis & {
+  window?: Window | undefined;
+};
+
 export default function NFTVideoRenderer(props: Readonly<BaseRendererProps>) {
+  const animationSrc = getResolvedAnimationSrc(props.nft);
+  const animationClassName = styles["nftAnimation"] ?? "";
+  const compressedAnimationSrc =
+    "metadata" in props.nft ? props.nft.compressed_animation : undefined;
+  const normalizedCompressedAnimationSrc = (() => {
+    if (compressedAnimationSrc == null || compressedAnimationSrc === "") {
+      return undefined;
+    }
+
+    try {
+      const baseUrl = globalScope.window.location.href;
+      return new URL(compressedAnimationSrc, baseUrl).href;
+    } catch {
+      return undefined;
+    }
+  })();
+
   return (
     <Col
-      className={`${styles["nftAnimation"]} ${props.heightStyle} ${props.bgStyle} d-flex justify-content-center align-items-center`}>
+      className={`${animationClassName} ${props.heightStyle} ${props.bgStyle} d-flex justify-content-center align-items-center`}
+    >
       {props.showBalance && (
         <NFTImageBalance
           contract={props.nft.contract}
@@ -30,19 +53,19 @@ export default function NFTVideoRenderer(props: Readonly<BaseRendererProps>) {
           "metadata" in props.nft &&
           props.nft.compressed_animation
             ? props.nft.compressed_animation
-            : props.nft.animation
+            : animationSrc
         }
         className={props.imageStyle}
         onError={withArweaveFallback(({ currentTarget }) => {
           if (
             "metadata" in props.nft &&
-            currentTarget.src === props.nft.compressed_animation
+            currentTarget.src === normalizedCompressedAnimationSrc &&
+            animationSrc
           ) {
-            currentTarget.src = props.nft.animation;
-          } else if ("metadata" in props.nft) {
-            currentTarget.src = props.nft.metadata.animation;
+            currentTarget.src = animationSrc;
           }
-        })}></video>
+        })}
+      ></video>
     </Col>
   );
 }
diff --git a/components/nft-image/utils/animation-source.ts b/components/nft-image/utils/animation-source.ts
new file mode 100644
index 0000000000..5886171e64
--- /dev/null
+++ b/components/nft-image/utils/animation-source.ts
@@ -0,0 +1,43 @@
+import type { BaseNFT, NFTLite } from "@/entities/INFT";
+
+const normalizeNonEmptyString = (value: unknown): string | undefined => {
+  if (typeof value !== "string") {
+    return undefined;
+  }
+
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : undefined;
+};
+
+export function getResolvedAnimationSrc(
+  nft: BaseNFT | NFTLite | undefined
+): string | undefined {
+  if (!nft) {
+    return undefined;
+  }
+
+  const metadata =
+    "metadata" in nft &&
+    nft.metadata !== null &&
+    typeof nft.metadata === "object"
+      ? (nft.metadata as {
+          readonly animation?: unknown;
+          readonly animation_url?: unknown;
+        })
+      : undefined;
+
+  const candidates = [
+    nft.animation,
+    metadata?.animation,
+    metadata?.animation_url,
+  ];
+
+  for (const candidate of candidates) {
+    const resolved = normalizeNonEmptyString(candidate);
+    if (resolved) {
+      return resolved;
+    }
+  }
+
+  return undefined;
+}
diff --git a/components/nft-image/utils/image-source.ts b/components/nft-image/utils/image-source.ts
new file mode 100644
index 0000000000..026370d6e7
--- /dev/null
+++ b/components/nft-image/utils/image-source.ts
@@ -0,0 +1,38 @@
+import type { BaseNFT, NFTLite } from "@/entities/INFT";
+
+const normalizeNonEmptyString = (value: unknown): string | undefined => {
+  if (typeof value !== "string") {
+    return undefined;
+  }
+
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : undefined;
+};
+
+export function getResolvedImageSrc(
+  nft: BaseNFT | NFTLite | undefined
+): string | undefined {
+  if (!nft) {
+    return undefined;
+  }
+
+  const metadata =
+    "metadata" in nft &&
+    nft.metadata !== null &&
+    typeof nft.metadata === "object"
+      ? (nft.metadata as {
+          readonly image?: unknown;
+        })
+      : undefined;
+
+  const candidates = [metadata?.image, nft.image];
+
+  for (const candidate of candidates) {
+    const resolved = normalizeNonEmptyString(candidate);
+    if (resolved) {
+      return resolved;
+    }
+  }
+
+  return undefined;
+}
diff --git a/components/nft-image/utils/media-type.ts b/components/nft-image/utils/media-type.ts
index 26c5b5aba7..cc7dd8a6bc 100644
--- a/components/nft-image/utils/media-type.ts
+++ b/components/nft-image/utils/media-type.ts
@@ -1,27 +1,31 @@
 import type { BaseNFT, NFTLite } from "@/entities/INFT";
+import { getResolvedAnimationSrc } from "./animation-source";
 
-type MediaType = 'html' | 'glb' | 'video' | 'image';
+type MediaType = "html" | "glb" | "video" | "image";
 
-export function getMediaType(nft: BaseNFT | NFTLite, animation: boolean): MediaType {
-  if (!animation || !nft.animation) {
-    return 'image';
+export function getMediaType(
+  nft: BaseNFT | NFTLite,
+  animation: boolean
+): MediaType {
+  if (!animation || !getResolvedAnimationSrc(nft)) {
+    return "image";
   }
 
   if (!("metadata" in nft) || !nft.metadata?.animation_details?.format) {
-    return 'image';
+    return "image";
   }
 
   const format = nft.metadata.animation_details.format.toLowerCase();
-  
+
   switch (format) {
-    case 'html':
-      return 'html';
-    case 'glb':
-      return 'glb';
-    case 'mp4':
-    case 'mov':
-      return 'video';
+    case "html":
+      return "html";
+    case "glb":
+      return "glb";
+    case "mp4":
+    case "mov":
+      return "video";
     default:
-      return 'image';
+      return "image";
   }
 }
diff --git a/components/the-memes/MemePageArt.tsx b/components/the-memes/MemePageArt.tsx
index d1cf4ec0d4..2d5fa3abd0 100644
--- a/components/the-memes/MemePageArt.tsx
+++ b/components/the-memes/MemePageArt.tsx
@@ -3,6 +3,8 @@
 import Download from "@/components/download/Download";
 import NFTAttributes from "@/components/nft-attributes/NFTAttributes";
 import NFTImage from "@/components/nft-image/NFTImage";
+import { getResolvedAnimationSrc } from "@/components/nft-image/utils/animation-source";
+import { getResolvedImageSrc } from "@/components/nft-image/utils/image-source";
 import type { MemesExtendedData, NFT } from "@/entities/INFT";
 import {
   enterArtFullScreen,
@@ -12,8 +14,10 @@ import {
   printMintDate,
 } from "@/helpers/Helpers";
 import {
-  getDimensionsFromMetadata,
-  getFileTypeFromMetadata,
+  getAnimationDimensionsFromMetadata,
+  getAnimationFileTypeFromMetadata,
+  getImageDimensionsFromMetadata,
+  getImageFileTypeFromMetadata,
 } from "@/helpers/nft.helpers";
 import { faExpandAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -32,11 +36,25 @@ export function MemePageArt(props: {
 
   const [currentSlide, setCurrentSlide] = useState(0);
 
-  const hasAnimation = props.nft?.animation || props.nft?.metadata?.animation;
-  const fullscreenElementId =
-    hasAnimation && currentSlide === 0
-      ? "the-art-fullscreen-animation"
-      : "the-art-fullscreen-img";
+  const animationHref = getResolvedAnimationSrc(props.nft);
+  const hasAnimation = Boolean(animationHref);
+  const imageFormat = getImageFileTypeFromMetadata(props.nft?.metadata);
+  const animationFormat = getAnimationFileTypeFromMetadata(props.nft?.metadata);
+  const imageDimensions = getImageDimensionsFromMetadata(props.nft?.metadata);
+  const animationDimensions = getAnimationDimensionsFromMetadata(
+    props.nft?.metadata
+  );
+  const imageHref = getResolvedImageSrc(props.nft);
+  const hasImage = Boolean(imageHref);
+  const isShowingAnimation = hasAnimation && (currentSlide === 0 || !imageHref);
+  let fullscreenElementId = "";
+  if (isShowingAnimation) {
+    fullscreenElementId = "the-art-fullscreen-animation";
+  } else if (hasImage) {
+    fullscreenElementId = "the-art-fullscreen-img";
+  }
+  const fileType = isShowingAnimation ? animationFormat : imageFormat;
+  const dimensions = isShowingAnimation ? animationDimensions : imageDimensions;
 
   const distributionPlanLink = (() => {
     const id = props.nft?.id;
@@ -59,27 +77,20 @@ export function MemePageArt(props: {
     setCurrentSlide(event);
   }
 
-  let currentFormat: string | undefined;
-  if (props.nft?.animation || props.nft?.metadata.animation) {
-    if (currentSlide === 0) {
-      currentFormat = props.nft.metadata.animation_details.format;
-    } else {
-      currentFormat = props.nft.metadata.image_details.format;
-    }
-  } else {
-    currentFormat = props.nft?.metadata.image_details.format;
-  }
+  const currentFormat = fileType ?? "";
 
   if (props.show && props.nft && props.nftMeta) {
     return (
       <>
         <Container className="p-0">
           <Row className="position-relative">
-            {props.nft.animation || props.nft.metadata.animation ? (
+            {hasAnimation ? (
               <>
                 <Col xs={12} className={styles["artHeader"]}>
                   <div className={styles["artHeaderContent"]}>
-                    <div className={styles["artFormatLabel"]}>{currentFormat}</div>
+                    <div className={styles["artFormatLabel"]}>
+                      {currentFormat}
+                    </div>
                     {isFullScreenSupported && (
                       <FontAwesomeIcon
                         icon={faExpandAlt}
@@ -97,7 +108,8 @@ export function MemePageArt(props: {
                   interval={null}
                   indicators={false}
                   wrap={false}
-                  onSlide={carouselHandlerSlide}>
+                  onSlide={carouselHandlerSlide}
+                >
                   <Carousel.Item className="text-center">
                     <NFTImage
                       nft={props.nft}
@@ -109,24 +121,28 @@ export function MemePageArt(props: {
                       id="the-art-fullscreen-animation"
                     />
                   </Carousel.Item>
-                  <Carousel.Item className="text-center">
-                    <NFTImage
-                      nft={props.nft}
-                      animation={false}
-                      height={650}
-                      showBalance={false}
-                      transparentBG={true}
-                      showOriginal={true}
-                      id="the-art-fullscreen-img"
-                    />
-                  </Carousel.Item>
+                  {hasImage && (
+                    <Carousel.Item className="text-center">
+                      <NFTImage
+                        nft={props.nft}
+                        animation={false}
+                        height={650}
+                        showBalance={false}
+                        transparentBG={true}
+                        showOriginal={true}
+                        id="the-art-fullscreen-img"
+                      />
+                    </Carousel.Item>
+                  )}
                 </Carousel>
               </>
             ) : (
               <>
                 <Col xs={12} className={styles["artHeader"]}>
                   <div className={styles["artHeaderContent"]}>
-                    <div className={styles["artFormatLabel"]}>{currentFormat}</div>
+                    <div className={styles["artFormatLabel"]}>
+                      {currentFormat}
+                    </div>
                     {isFullScreenSupported && (
                       <FontAwesomeIcon
                         icon={faExpandAlt}
@@ -139,15 +155,17 @@ export function MemePageArt(props: {
                     )}
                   </div>
                 </Col>
-                <NFTImage
-                  nft={props.nft}
-                  animation={false}
-                  height={650}
-                  transparentBG={true}
-                  showOriginal={true}
-                  showBalance={false}
-                  id="the-art-fullscreen-img"
-                />
+                {hasImage && (
+                  <NFTImage
+                    nft={props.nft}
+                    animation={false}
+                    height={650}
+                    transparentBG={true}
+                    showOriginal={true}
+                    showBalance={false}
+                    id="the-art-fullscreen-img"
+                  />
+                )}
               </>
             )}
           </Row>
@@ -163,53 +181,42 @@ export function MemePageArt(props: {
                         <h3>Arweave Links</h3>
                       </Col>
                     </Row>
-                    <Row>
-                      <Col className="tw-flex tw-items-center tw-gap-1">
-                        <span>{props.nft.metadata.image_details.format}</span>
-                        <Link
-                          className={styles["arweaveLink"]}
-                          href={props.nft.metadata.image}
-                          target="_blank"
-                          rel="noopener noreferrer">
-                          {props.nft.metadata.image}
-                        </Link>
-                        <Download
-                          href={props.nft.metadata.image}
-                          name={props.nft.name}
-                          extension={props.nft.metadata.image_details.format}
-                        />
-                      </Col>
-                    </Row>
-                    {(props.nft.metadata.animation ||
-                      props.nft.metadata.animation_url) && (
+                    {imageHref && (
+                      <Row>
+                        <Col className="tw-flex tw-items-center tw-gap-1">
+                          {imageFormat && <span>{imageFormat}</span>}
+                          <Link
+                            className={styles["arweaveLink"]}
+                            href={imageHref}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {imageHref}
+                          </Link>
+                          <Download
+                            href={imageHref}
+                            name={props.nft.name}
+                            extension={imageFormat ?? ""}
+                          />
+                        </Col>
+                      </Row>
+                    )}
+                    {animationHref && (
                       <Row className="pt-3">
                         <Col className="tw-flex tw-items-center tw-gap-1">
-                          <span>
-                            {props.nft.metadata.animation_details.format}
-                          </span>
+                          {animationFormat && <span>{animationFormat}</span>}
                           <Link
                             className={styles["arweaveLink"]}
-                            href={
-                              props.nft.metadata.animation
-                                ? props.nft.metadata.animation
-                                : props.nft.metadata.animation_url
-                            }
+                            href={animationHref}
                             target="_blank"
-                            rel="noopener noreferrer">
-                            {props.nft.metadata.animation
-                              ? props.nft.metadata.animation
-                              : props.nft.metadata.animation_url}
+                            rel="noopener noreferrer"
+                          >
+                            {animationHref}
                           </Link>
                           <Download
-                            href={
-                              props.nft.metadata.animation
-                                ? props.nft.metadata.animation
-                                : props.nft.metadata.animation_url
-                            }
+                            href={animationHref}
                             name={props.nft.name}
-                            extension={
-                              props.nft.metadata.animation_details.format
-                            }
+                            extension={animationFormat ?? ""}
                           />
                         </Col>
                       </Row>
@@ -226,7 +233,8 @@ export function MemePageArt(props: {
               xs={{ span: 12 }}
               sm={{ span: 6 }}
               md={{ span: 6 }}
-              lg={{ span: 6 }}>
+              lg={{ span: 6 }}
+            >
               <Container>
                 <Row>
                   <Col>
@@ -267,16 +275,18 @@ export function MemePageArt(props: {
                           <td>Mint Date</td>
                           <td>{printMintDate(props.nft.mint_date)}</td>
                         </tr>
-                        <tr>
-                          <td>File Type</td>
-                          <td>{getFileTypeFromMetadata(props.nft.metadata)}</td>
-                        </tr>
-                        <tr>
-                          <td>Dimensions</td>
-                          <td>
-                            {getDimensionsFromMetadata(props.nft.metadata)}
-                          </td>
-                        </tr>
+                        {fileType && (
+                          <tr>
+                            <td>File Type</td>
+                            <td>{fileType}</td>
+                          </tr>
+                        )}
+                        {dimensions && (
+                          <tr>
+                            <td>Dimensions</td>
+                            <td>{dimensions}</td>
+                          </tr>
+                        )}
                       </tbody>
                     </Table>
                   </Col>
@@ -287,7 +297,8 @@ export function MemePageArt(props: {
               xs={{ span: 12 }}
               sm={{ span: 6 }}
               md={{ span: 6 }}
-              lg={{ span: 6 }}>
+              lg={{ span: 6 }}
+            >
               <Container>
                 <Row>
                   <Col>
@@ -305,7 +316,8 @@ export function MemePageArt(props: {
                             ? undefined
                             : "noopener noreferrer"
                         }
-                        className={styles["distributionPlanLink"]}>
+                        className={styles["distributionPlanLink"]}
+                      >
                         Distribution Plan
                       </Link>
                     </Col>
@@ -338,7 +350,8 @@ export function MemePageArt(props: {
                   <Col
                     dangerouslySetInnerHTML={{
                       __html: parseNftDescriptionToHtml(props.nft.description),
-                    }}></Col>
+                    }}
+                  ></Col>
                 </Row>
               </Container>
             </Col>
@@ -376,7 +389,8 @@ export function MemePageArt(props: {
               xs={{ span: 12 }}
               sm={{ span: 6 }}
               md={{ span: 6 }}
-              lg={{ span: 6 }}>
+              lg={{ span: 6 }}
+            >
               <Container>
                 <Row>
                   <Col>
@@ -388,7 +402,8 @@ export function MemePageArt(props: {
                     xs={{ span: 12 }}
                     sm={{ span: 10 }}
                     md={{ span: 8 }}
-                    lg={{ span: 6 }}>
+                    lg={{ span: 6 }}
+                  >
                     <Table>
                       <tbody>
                         <tr>
@@ -431,7 +446,8 @@ export function MemePageArt(props: {
               xs={{ span: 12 }}
               sm={{ span: 6 }}
               md={{ span: 6 }}
-              lg={{ span: 6 }}>
+              lg={{ span: 6 }}
+            >
               <Container>
                 <Row>
                   <Col>
@@ -443,7 +459,8 @@ export function MemePageArt(props: {
                     xs={{ span: 12 }}
                     sm={{ span: 10 }}
                     md={{ span: 8 }}
-                    lg={{ span: 6 }}>
+                    lg={{ span: 6 }}
+                  >
                     <Table>
                       <tbody>
                         {props.nft.metadata.attributes
diff --git a/contexts/SeizeSettingsContext.tsx b/contexts/SeizeSettingsContext.tsx
index 60c7c95950..74ad095020 100644
--- a/contexts/SeizeSettingsContext.tsx
+++ b/contexts/SeizeSettingsContext.tsx
@@ -93,7 +93,9 @@ export const SeizeSettingsProvider = ({
   );
 
   useEffect(() => {
-    loadSeizeSettings();
+    // Initial load failures are exposed through `loadError`; do not leak
+    // them as unhandled promise rejections from the mount effect.
+    loadSeizeSettings().catch(() => undefined);
 
     return () => {
       isMountedRef.current = false;
diff --git a/helpers/nft.helpers.ts b/helpers/nft.helpers.ts
index 55c6a1e776..6a4d7c52ad 100644
--- a/helpers/nft.helpers.ts
+++ b/helpers/nft.helpers.ts
@@ -6,16 +6,87 @@ import {
 } from "@/constants/constants";
 import { numberWithCommas } from "./Helpers";
 
-export function getFileTypeFromMetadata(metadata: any) {
-  return metadata.animation_details?.format ?? metadata.image_details.format;
+interface NFTMediaDetails {
+  readonly format?: string | null | undefined;
+  readonly width?: number | null | undefined;
+  readonly height?: number | null | undefined;
 }
 
-export function getDimensionsFromMetadata(metadata: any) {
-  return `${numberWithCommas(
-    metadata.animation_details?.width ?? metadata.image_details.width
-  )} x ${numberWithCommas(
-    metadata.animation_details?.height ?? metadata.image_details.height
-  )}`;
+type NFTMediaMetadata =
+  | {
+      readonly animation_details?: NFTMediaDetails | null | undefined;
+      readonly image_details?: NFTMediaDetails | null | undefined;
+    }
+  | null
+  | undefined;
+
+const getMediaFormat = (
+  details: NFTMediaDetails | null | undefined
+): string | null => {
+  const rawFormat = details?.format;
+  if (typeof rawFormat !== "string") {
+    return null;
+  }
+
+  const format = rawFormat.trim();
+  return format.length > 0 ? format : null;
+};
+
+const isValidDimension = (
+  value: number | null | undefined
+): value is number => {
+  return typeof value === "number" && Number.isFinite(value) && value > 0;
+};
+
+const getMediaDimensions = (
+  details: NFTMediaDetails | null | undefined
+): string | null => {
+  const width = details?.width;
+  const height = details?.height;
+
+  if (!isValidDimension(width) || !isValidDimension(height)) {
+    return null;
+  }
+
+  return `${numberWithCommas(width)} x ${numberWithCommas(height)}`;
+};
+
+export function getAnimationFileTypeFromMetadata(
+  metadata: NFTMediaMetadata
+): string | null {
+  return getMediaFormat(metadata?.animation_details);
+}
+
+export function getImageFileTypeFromMetadata(
+  metadata: NFTMediaMetadata
+): string | null {
+  return getMediaFormat(metadata?.image_details);
+}
+
+export function getAnimationDimensionsFromMetadata(
+  metadata: NFTMediaMetadata
+): string | null {
+  return getMediaDimensions(metadata?.animation_details);
+}
+
+export function getImageDimensionsFromMetadata(
+  metadata: NFTMediaMetadata
+): string | null {
+  return getMediaDimensions(metadata?.image_details);
+}
+
+export function getFileTypeFromMetadata(metadata: NFTMediaMetadata) {
+  return (
+    getAnimationFileTypeFromMetadata(metadata) ??
+    getImageFileTypeFromMetadata(metadata)
+  );
+}
+
+export function getDimensionsFromMetadata(metadata: NFTMediaMetadata) {
+  return (
+    getAnimationDimensionsFromMetadata(metadata) ??
+    getImageDimensionsFromMetadata(metadata)
+  );
 }
 
 export const isMemesEcosystemContract = (contract: string): boolean => {
diff --git a/openapi.yaml b/openapi.yaml
index 9068848dad..44f2db148d 100644
--- a/openapi.yaml
+++ b/openapi.yaml
@@ -3412,7 +3412,7 @@ paths:
       tags:
         - Ratings
       summary: >-
-        Change REP rating of multiple targets and categories in one go. Targets
+        Change REP rating of multiple targets and categories in one go. Targets 
         final REP value will be the value you supply here. If you supply
         multiple  addresses for one consolidation group then those amounts will
         be summed together.
@@ -7236,7 +7236,7 @@ components:
             $ref: "#/components/schemas/ApiWaveParticipationRequirement"
         required_metadata:
           description: |
-            The metadata that must be provided by the participant.
+            The metadata that must be provided by the participant. 
             Empty array if nothing is required.
           type: array
           items:
@@ -10107,13 +10107,6 @@ components:
           $ref: "#/components/schemas/ApiCreateNewWaveChatConfig"
         wave:
           $ref: "#/components/schemas/ApiCreateWaveConfig"
-    ApiSetPinnedDropRequest:
-      type: object
-      required:
-        - drop_id
-      properties:
-        drop_id:
-          type: string
     ApiUploadItem:
       type: object
       required:
@@ -10319,7 +10312,7 @@ components:
           type: string
     ApiWaveCreditScope:
       description: |
-        The scope of the credit.
+        The scope of the credit. 
         * WAVE - Credit is spendable across all drops in wave.
       enum:
         - WAVE
@@ -10739,7 +10732,7 @@ components:
           nullable: true
         required_metadata:
           description: |
-            The metadata that must be provided by the participant.
+            The metadata that must be provided by the participant. 
             Empty array if nothing is required.
           type: array
           items: