diff --git a/__tests__/pages/utilities/svg-viewer.test.tsx b/__tests__/pages/utilities/svg-viewer.test.tsx
new file mode 100644
index 0000000..6316047
--- /dev/null
+++ b/__tests__/pages/utilities/svg-viewer.test.tsx
@@ -0,0 +1,136 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import SVGViewer from "../../../pages/utilities/svg-viewer";
+
+// Mock SVG content for testing
+const mockSVGContent = `<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
+</svg>`;
+
+describe("SVGViewer", () => {
+  test("should render both paste and upload tabs", () => {
+    render(<SVGViewer />);
+
+    expect(
+      screen.getByRole("tab", { name: "Paste SVG Code" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("tab", { name: "Upload SVG File" })
+    ).toBeInTheDocument();
+  });
+
+  test("should display SVG code textarea in paste tab by default", () => {
+    render(<SVGViewer />);
+
+    expect(screen.getByLabelText("SVG code input")).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText("Paste SVG code here")
+    ).toBeInTheDocument();
+  });
+
+  test("should switch to upload tab and show upload component", async () => {
+    const user = userEvent.setup();
+    render(<SVGViewer />);
+
+    const uploadTab = screen.getByRole("tab", { name: "Upload SVG File" });
+    await user.click(uploadTab);
+
+    expect(
+      screen.getByText("Drag and drop your SVG file here, or click to select")
+    ).toBeInTheDocument();
+    expect(screen.getByText("Max size 2MB")).toBeInTheDocument();
+  });
+
+  test("should accept and process SVG file upload", async () => {
+    const user = userEvent.setup();
+    render(<SVGViewer />);
+
+    // Switch to upload tab
+    const uploadTab = screen.getByRole("tab", { name: "Upload SVG File" });
+    await user.click(uploadTab);
+
+    // Create a mock SVG file
+    const file = new File([mockSVGContent], "test.svg", {
+      type: "image/svg+xml",
+    });
+
+    // Find the hidden file input
+    const fileInput = screen
+      .getByRole("tabpanel", { name: "Upload SVG File" })
+      .querySelector('input[type="file"]') as HTMLInputElement;
+    expect(fileInput).toBeInTheDocument();
+
+    // Upload the file
+    await user.upload(fileInput, file);
+
+    // Wait for the uploaded content to appear
+    await waitFor(() => {
+      expect(screen.getByLabelText("Uploaded SVG code")).toBeInTheDocument();
+    });
+
+    // Check that the SVG content is displayed in the textarea
+    const uploadedTextarea = screen.getByLabelText(
+      "Uploaded SVG code"
+    ) as HTMLTextAreaElement;
+    expect(uploadedTextarea.value).toContain("<svg");
+    expect(uploadedTextarea.value).toContain("circle");
+  });
+
+  test("paste tab should work with manual input", async () => {
+    const user = userEvent.setup();
+    render(<SVGViewer />);
+
+    const textarea = screen.getByLabelText("SVG code input");
+    await user.type(textarea, mockSVGContent);
+
+    expect(textarea).toHaveValue(mockSVGContent);
+  });
+
+  test("should show error for invalid SVG content", async () => {
+    const user = userEvent.setup();
+    render(<SVGViewer />);
+
+    const textarea = screen.getByLabelText("SVG code input");
+    await user.type(textarea, "not an svg");
+
+    await waitFor(() => {
+      expect(
+        screen.getByText("Input does not contain an SVG tag")
+      ).toBeInTheDocument();
+    });
+  });
+
+  test("uploaded content should be accessible in paste tab", async () => {
+    const user = userEvent.setup();
+    render(<SVGViewer />);
+
+    // Upload file in upload tab
+    const uploadTab = screen.getByRole("tab", { name: "Upload SVG File" });
+    await user.click(uploadTab);
+
+    const file = new File([mockSVGContent], "test.svg", {
+      type: "image/svg+xml",
+    });
+
+    const fileInput = screen
+      .getByRole("tabpanel", { name: "Upload SVG File" })
+      .querySelector('input[type="file"]') as HTMLInputElement;
+    await user.upload(fileInput, file);
+
+    // Wait for upload to complete
+    await waitFor(() => {
+      expect(screen.getByLabelText("Uploaded SVG code")).toBeInTheDocument();
+    });
+
+    // Switch to paste tab
+    const pasteTab = screen.getByRole("tab", { name: "Paste SVG Code" });
+    await user.click(pasteTab);
+
+    // Check that the uploaded content is available in the paste tab
+    const pasteTextarea = screen.getByLabelText(
+      "SVG code input"
+    ) as HTMLTextAreaElement;
+    expect(pasteTextarea.value).toContain("<svg");
+    expect(pasteTextarea.value).toContain("circle");
+  });
+});
diff --git a/components/ds/SVGUploadComponent.tsx b/components/ds/SVGUploadComponent.tsx
new file mode 100644
index 0000000..61a25ad
--- /dev/null
+++ b/components/ds/SVGUploadComponent.tsx
@@ -0,0 +1,182 @@
+"use client";
+import { DragEvent, useCallback, useMemo, useRef, useState } from "react";
+import UploadIcon from "@/components/icons/UploadIcon";
+
+type Status = "idle" | "loading" | "error" | "unsupported" | "hover";
+
+const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB default for SVG files
+
+interface SVGUploadProps {
+  onSVGSelect: (svgContent: string) => void;
+  maxFileSize?: number;
+}
+
+const SVGUploadComponent = ({
+  onSVGSelect,
+  maxFileSize = MAX_FILE_SIZE,
+}: SVGUploadProps) => {
+  const [status, setStatus] = useState<Status>("idle");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const formattedMaxSize = useMemo((): string => {
+    const sizeInMB = maxFileSize / (1024 * 1024);
+    return Number.isInteger(sizeInMB)
+      ? `${sizeInMB}MB`
+      : `${sizeInMB.toFixed(2)}MB`;
+  }, [maxFileSize]);
+
+  const validateSVGFile = useCallback(
+    (file: File): boolean => {
+      // Check file extension
+      if (!file.name.toLowerCase().endsWith(".svg")) {
+        return false;
+      }
+
+      // Check file type
+      if (file.type && !file.type.includes("svg")) {
+        return false;
+      }
+
+      // Check file size
+      if (file.size > maxFileSize) {
+        return false;
+      }
+
+      return true;
+    },
+    [maxFileSize]
+  );
+
+  const readSVGFile = useCallback(
+    (file: File) => {
+      const reader = new FileReader();
+
+      reader.onload = (e) => {
+        try {
+          const content = e.target?.result as string;
+
+          // Basic SVG content validation
+          if (!content.toLowerCase().includes("<svg")) {
+            setStatus("unsupported");
+            return;
+          }
+
+          onSVGSelect(content);
+          setStatus("idle");
+        } catch (error) {
+          console.error("Error reading SVG file:", error);
+          setStatus("error");
+        }
+      };
+
+      reader.onerror = () => {
+        setStatus("error");
+      };
+
+      reader.readAsText(file);
+    },
+    [onSVGSelect]
+  );
+
+  const handleDrop = useCallback(
+    (event: DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+
+      const file = event.dataTransfer.files[0];
+      if (!file) {
+        setStatus("unsupported");
+        return;
+      }
+
+      if (!validateSVGFile(file)) {
+        setStatus(file.size > maxFileSize ? "error" : "unsupported");
+        return;
+      }
+
+      setStatus("loading");
+      readSVGFile(file);
+    },
+    [validateSVGFile, readSVGFile, maxFileSize]
+  );
+
+  const handleDragOver = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      setStatus("hover");
+    },
+    []
+  );
+
+  const handleDragLeave = useCallback(() => {
+    setStatus("idle");
+  }, []);
+
+  const handleClick = () => {
+    inputRef.current?.click();
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      if (!validateSVGFile(file)) {
+        setStatus(file.size > maxFileSize ? "error" : "unsupported");
+        return;
+      }
+
+      setStatus("loading");
+      readSVGFile(file);
+    }
+  };
+
+  return (
+    <div
+      onDrop={handleDrop}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onClick={handleClick}
+      className="flex flex-col border border-dashed border-border p-6 text-center text-muted-foreground rounded-lg min-h-40 items-center justify-center bg-muted cursor-pointer mb-2"
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept=".svg,image/svg+xml"
+        className="hidden"
+        onChange={handleFileChange}
+      />
+      <UploadIcon />
+      {statusComponents[status](formattedMaxSize)}
+    </div>
+  );
+};
+
+const StatusComponent = ({
+  title,
+  message,
+}: {
+  title: string;
+  message?: string;
+}) => (
+  <div>
+    <p>{title}</p>
+    <p>{message || "\u00A0"}</p>
+  </div>
+);
+
+const statusComponents: Record<Status, (maxSize: string) => JSX.Element> = {
+  idle: (maxSize) => (
+    <StatusComponent
+      title="Drag and drop your SVG file here, or click to select"
+      message={`Max size ${maxSize}`}
+    />
+  ),
+  loading: () => <StatusComponent title="Loading..." />,
+  error: (maxSize) => (
+    <StatusComponent title="SVG file is too big!" message={`${maxSize} max`} />
+  ),
+  unsupported: () => (
+    <StatusComponent title="Please provide a valid SVG file" />
+  ),
+  hover: () => <StatusComponent title="Drop it like it's hot! 🔥" />,
+};
+
+export { SVGUploadComponent };
diff --git a/pages/utilities/svg-viewer.tsx b/pages/utilities/svg-viewer.tsx
index 40a163f..1fe348f 100644
--- a/pages/utilities/svg-viewer.tsx
+++ b/pages/utilities/svg-viewer.tsx
@@ -8,6 +8,13 @@ import { CMDK } from "@/components/CMDK";
 import CallToActionGrid from "@/components/CallToActionGrid";
 import Meta from "@/components/Meta";
 import GitHubContribution from "@/components/GitHubContribution";
+import { SVGUploadComponent } from "@/components/ds/SVGUploadComponent";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ds/TabsComponent";
 
 type Status = "idle" | "invalid" | "error";
 
@@ -27,45 +34,56 @@ export default function SVGViewer() {
   const [base64, setBase64] = useState<string | null>(null);
   const [status, setStatus] = useState<Status>("idle");
 
-  const handleChange = useCallback(
-    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-      const value = event.currentTarget.value;
-      setInput(value);
+  const processSVGContent = useCallback((value: string) => {
+    if (value.trim() === "") {
+      setBase64(null);
+      setStatus("idle");
+      return;
+    }
 
-      if (value.trim() === "") {
+    try {
+      if (!value.toLowerCase().includes("<svg")) {
+        setStatus("invalid");
         setBase64(null);
-        setStatus("idle");
         return;
       }
 
-      try {
-        if (!value.toLowerCase().includes("<svg")) {
-          setStatus("invalid");
-          setBase64(null);
-          return;
-        }
-
-        const blob = new Blob([value], { type: "image/svg+xml" });
-        const reader = new FileReader();
-
-        reader.onload = () => {
-          setBase64(reader.result as string);
-          setStatus("idle");
-        };
-
-        reader.onerror = () => {
-          setStatus("error");
-          setBase64(null);
-        };
-
-        reader.readAsDataURL(blob);
-      } catch (err) {
-        console.error("Failed to process SVG:", err);
+      const blob = new Blob([value], { type: "image/svg+xml" });
+      const reader = new FileReader();
+
+      reader.onload = () => {
+        setBase64(reader.result as string);
+        setStatus("idle");
+      };
+
+      reader.onerror = () => {
         setStatus("error");
         setBase64(null);
-      }
+      };
+
+      reader.readAsDataURL(blob);
+    } catch (err) {
+      console.error("Failed to process SVG:", err);
+      setStatus("error");
+      setBase64(null);
+    }
+  }, []);
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const value = event.currentTarget.value;
+      setInput(value);
+      processSVGContent(value);
     },
-    []
+    [processSVGContent]
+  );
+
+  const handleSVGFileSelect = useCallback(
+    (svgContent: string) => {
+      setInput(svgContent);
+      processSVGContent(svgContent);
+    },
+    [processSVGContent]
   );
 
   return (
@@ -86,15 +104,46 @@ export default function SVGViewer() {
 
       <section className="container max-w-2xl mb-6">
         <Card className="flex flex-col p-6 hover:shadow-none shadow-none rounded-xl">
-          <div>
-            <Label>SVG Code</Label>
-            <Textarea
-              rows={6}
-              placeholder="Paste SVG code here"
-              onChange={handleChange}
-              value={input}
-              aria-label="SVG code input"
-            />
+          <Tabs defaultValue="paste" className="w-full">
+            <TabsList className="grid w-full grid-cols-2 mb-4">
+              <TabsTrigger value="paste">Paste SVG Code</TabsTrigger>
+              <TabsTrigger value="upload">Upload SVG File</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="paste" className="space-y-4">
+              <div>
+                <Label>SVG Code</Label>
+                <Textarea
+                  rows={6}
+                  placeholder="Paste SVG code here"
+                  onChange={handleChange}
+                  value={input}
+                  aria-label="SVG code input"
+                />
+              </div>
+            </TabsContent>
+
+            <TabsContent value="upload" className="space-y-4">
+              <div>
+                <Label>Upload SVG File</Label>
+                <SVGUploadComponent
+                  onSVGSelect={handleSVGFileSelect}
+                  maxFileSize={2 * 1024 * 1024} // 2MB
+                />
+                {input && (
+                  <div className="mt-4">
+                    <Label>Uploaded SVG Code</Label>
+                    <Textarea
+                      rows={6}
+                      value={input}
+                      onChange={handleChange}
+                      aria-label="Uploaded SVG code"
+                      className="mt-2"
+                    />
+                  </div>
+                )}
+              </div>
+            </TabsContent>
 
             {status !== "idle" && (
               <div className="mt-6 flex text-red-600 text-sm" role="alert">
@@ -117,7 +166,7 @@ export default function SVGViewer() {
                 </div>
               )}
             </div>
-          </div>
+          </Tabs>
         </Card>
       </section>