diff --git a/electron/src/components/FileInput.tsx b/electron/src/components/FileInput.tsx
new file mode 100644
index 00000000..f906a4f8
--- /dev/null
+++ b/electron/src/components/FileInput.tsx
@@ -0,0 +1,84 @@
+import React, { useId } from "react";
+import { Icon, IconName } from "./Icon";
+
+export type FileInputProps = {
+  children: React.ReactNode;
+  accept?: string;
+  icon?: IconName;
+  onFile?: (files: File) => void;
+  onFiles?: (files: FileList) => void;
+};
+
+export const FileInput = ({
+  children,
+  icon,
+  accept,
+  onFiles,
+  onFile,
+}: FileInputProps) => {
+  const id = useId();
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+
+    if (!files || files.length == 0) {
+      return;
+    }
+
+    if (onFile && files.length == 1) {
+      onFile(files[0]);
+    }
+
+    if (onFiles) {
+      onFiles(files);
+    }
+  };
+
+  return (
+    <label
+      htmlFor={id}
+      className="bg-primary text-primary-foreground item-center flex w-full cursor-pointer flex-row justify-center gap-2 rounded-md px-6 py-6 select-none"
+    >
+      <Icon name={icon} className="size-6" />
+      {children}
+      <input
+        id={id}
+        type="file"
+        accept={accept}
+        onChange={handleFileChange}
+        multiple={!!onFiles}
+        className="hidden"
+      />
+    </label>
+  );
+};
+
+export type JsonFileInputProps = {
+  children: React.ReactNode;
+  icon?: IconName;
+  onJson: (json: any) => void;
+};
+
+export function JsonFileInput({ children, icon, onJson }: JsonFileInputProps) {
+  const handleFile = (file: File) => {
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      try {
+        const text = e.target?.result as string;
+        const json = JSON.parse(text);
+        onJson(json);
+      } catch (err) {
+        console.error("Invalid JSON file:", err);
+      }
+    };
+
+    reader.readAsText(file);
+  };
+
+  return (
+    <FileInput accept=".json,application/json" onFile={handleFile} icon={icon}>
+      {children}
+    </FileInput>
+  );
+}
diff --git a/electron/src/components/preset/PresetsPage.tsx b/electron/src/components/preset/PresetsPage.tsx
index 3ae1fb63..4aaf72a7 100644
--- a/electron/src/components/preset/PresetsPage.tsx
+++ b/electron/src/components/preset/PresetsPage.tsx
@@ -7,6 +7,7 @@ import { PresetCard } from "./PresetCard";
 import { PresetPreviewEntries } from "./PresetPreviewTable";
 import { NewPresetDialog } from "./NewPresetDialog";
 import { downloadJson } from "@/lib/download";
+import { JsonFileInput } from "../FileInput";
 
 type PresetsPageProps<T extends PresetSchema> = UsePresetsParams<T> & {
   applyPreset: (preset: Preset<T>) => void;
@@ -56,14 +57,22 @@ export function PresetsPage<T extends PresetSchema>({
     downloadJson(data, filename);
   };
 
+  const handlePresetImport = (json: any) => {
+    console.log(json);
+  };
+
   return (
     <Page>
-      <NewPresetDialog
-        previewEntries={previewEntries}
-        onSave={presets.createFromCurrentState}
-        currentState={currentState}
-      />
       <ControlGrid columns={2}>
+        <NewPresetDialog
+          previewEntries={previewEntries}
+          onSave={presets.createFromCurrentState}
+          currentState={currentState}
+        />
+        <JsonFileInput onJson={handlePresetImport} icon="lu:Upload">
+          Import Preset from File
+        </JsonFileInput>
+        ;
         {presets.get().map((preset) => {
           const isLatest = presets.isLatest(preset);
           return (
@@ -80,7 +89,6 @@ export function PresetsPage<T extends PresetSchema>({
             />
           );
         })}
-
         {presets.defaultPreset !== undefined && (
           <PresetCard
             preset={presets.defaultPreset}