diff --git a/package-lock.json b/package-lock.json
index e180277..b6e684e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "libresplit-website",
       "version": "0.0.0",
       "dependencies": {
+        "@libresplit/libresplit-converter": "^0.1.2",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-navigation-menu": "^1.2.14",
         "@radix-ui/react-slot": "^1.2.3",
@@ -696,6 +697,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@libresplit/libresplit-converter": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@libresplit/libresplit-converter/-/libresplit-converter-0.1.2.tgz",
+      "integrity": "sha512-mi5k0ACymnjl7rl+O8GzHspHdnte+llzb8670Yw0eqiHBxhhOzD8l3nOnXrYwIohNvzyjqz5zitMW74cTwfeLg==",
+      "license": "GPL-3.0-or-later"
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
diff --git a/package.json b/package.json
index 6c04174..14508e4 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@libresplit/libresplit-converter": "^0.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-slot": "^1.2.3",
diff --git a/src/app/converter.tsx b/src/app/converter.tsx
index ac5be87..29788c3 100644
--- a/src/app/converter.tsx
+++ b/src/app/converter.tsx
@@ -1,7 +1,91 @@
+import React, { useState } from "react";
+
+import init, { convert } from "@libresplit/libresplit-converter";
+import wasmUrl from "@libresplit/libresplit-converter/libresplit_converter_bg.wasm?url";
+
 export function Converter() {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [result, setResult] = useState<string | null>(null);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0] || null;
+    setSelectedFile(file);
+  };
+
+  const handleSubmit = async () => {
+    if (!selectedFile) {
+      alert("Please select a file before submitting!");
+      return;
+    }
+
+    try {
+      const text = await selectedFile.text();
+
+      await init(wasmUrl);
+
+      const converted = convert(text);
+
+      setResult(converted);
+    } catch (error) {
+      console.error("Error processing file: ", error);
+      alert("Failed to process file. See console for details.");
+    }
+  };
+
+  const handleDownload = () => {
+    if (!result || !selectedFile) return;
+
+    const fileName = selectedFile.name.replace(/\.[^/.]+$/, ".json");
+
+    const blob = new Blob([result], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    link.click();
+
+    URL.revokeObjectURL(url);
+  };
+
   return (
-    <div className="flex h-screen w-screen items-center justify-center">
-      <p className="text-gray-500">Placeholder page for converter.</p>
+    <div className="flex min-h-screen items-center justify-center bg-linear-to-tr from-gray-700 to-sky-900 p-6">
+      <div className="w-full max-w-lg space-y-6 rounded-lg bg-gray-800 p-6 shadow-lg">
+        <h1 className="text-center text-2xl font-bold text-white">
+          LibreSplit Converter
+        </h1>
+        <div className="space-y-4">
+          <input
+            type="file"
+            accept=".lss"
+            onChange={handleFileChange}
+            className="block w-full rounded-md border border-white px-3 py-2 text-white focus:ring focus:ring-indigo-500 focus:outline-none"
+          />
+          <button
+            onClick={handleSubmit}
+            disabled={!selectedFile}
+            className={
+              '${selectedFile ? "bg-indigo-600 hover:bg-indigo-700" : "bg-gray-400 cursor-not-allowed"} w-full rounded-md px-4 py-2 font-semibold text-white'
+            }
+          >
+            Convert
+          </button>
+        </div>
+        {result && (
+          <div className="space-y-4">
+            <p className="text-center font-medium text-green-600">
+              Conversion successful! Click the button below to download your
+              LibreSplit file.
+            </p>
+            <button
+              onClick={handleDownload}
+              className="w-full rounded-md bg-green-600 px-4 py-2 font-semibold text-white hover:bg-green-700"
+            >
+              Download
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/src/components/libresplit/AppNav.tsx b/src/components/libresplit/AppNav.tsx
index 9b2a763..d52c815 100644
--- a/src/components/libresplit/AppNav.tsx
+++ b/src/components/libresplit/AppNav.tsx
@@ -26,7 +26,7 @@ export function AppNav() {
 
           <NavigationMenuItem>
             <NavigationMenuLink asChild>
-              <a href="https://converter.libresplit.org/">Converter</a>
+              <Link to="/converter">Converter</Link>
             </NavigationMenuLink>
           </NavigationMenuItem>
         </NavigationMenuList>
diff --git a/vite.config.ts b/vite.config.ts
index 90378c9..705e935 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,4 +11,9 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  server: {
+    fs: {
+      allow: [".."],
+    },
+  },
 });