diff --git a/src/renderer/src/pages/settings/add-theme-modal.tsx b/src/renderer/src/pages/settings/add-theme-modal.tsx
new file mode 100644
index 00000000..a3f20f43
--- /dev/null
+++ b/src/renderer/src/pages/settings/add-theme-modal.tsx
@@ -0,0 +1,40 @@
+import { useTranslation } from "react-i18next";
+import { Modal, Button } from "@renderer/components";
+
+interface AddThemeModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onAddTheme: () => void;
+}
+
+export function AddThemeModal({
+  visible,
+  onClose,
+  onAddTheme,
+}: AddThemeModalProps) {
+  const { t } = useTranslation("settings");
+
+  return (
+    <Modal title={t("add_theme")} visible={visible} onClose={onClose}>
+      <div className="add-theme-modal">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            onAddTheme();
+          }}
+        >
+          <div className="modal-content">{/* placeholder for now */}</div>
+
+          <div className="modal-footer">
+            <Button type="button" theme="outline" onClick={onClose}>
+              {t("cancel")}
+            </Button>
+            <Button type="submit" theme="primary">
+              {t("add")}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </Modal>
+  );
+}