diff --git a/CONTRIBUTORS b/CONTRIBUTORS
index d90b7dbcc..c8ecec8d5 100644
--- a/CONTRIBUTORS
+++ b/CONTRIBUTORS
@@ -251,6 +251,7 @@ Matbe766 <matildabergstrom01@gmail.com>
 Amanda Sternberg <mandis.sternberg@gmail.com>
 arold0 <arold0@icloud.com> 
 nav1s <nav1s@proton.me>
+medProgAyat <hosseinmehriyari1383@gmail.com>
 Ranjit Odedra <ranjitodedra.dev@gmail.com>
 Eltaurus <https://github.com/Eltaurus-Lt>
 jariji
diff --git a/ftl/core/importing.ftl b/ftl/core/importing.ftl
index b23d12654..891c5e05d 100644
--- a/ftl/core/importing.ftl
+++ b/ftl/core/importing.ftl
@@ -160,7 +160,7 @@ importing-cards-added =
         [one] { $count } card added.
        *[other] { $count } cards added.
     }
-importing-file-empty = The file you selected is empty.
+importing-file-empty = The selected file is empty. Please choose a valid file.
 importing-notes-added =
     { $count ->
         [one] { $count } new note imported.
diff --git a/ts/lib/components/ErrorPage.svelte b/ts/lib/components/ErrorPage.svelte
index 01bcb1224..eaacb359e 100644
--- a/ts/lib/components/ErrorPage.svelte
+++ b/ts/lib/components/ErrorPage.svelte
@@ -2,17 +2,45 @@
 Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
+
 <script lang="ts">
+    import { bridgeCommand } from "@tslib/bridgecommand";
+    import * as tr from "@generated/ftl";
+
     export let error: Error;
+
+    function closePage() {
+        try {
+            bridgeCommand("close");
+        } catch {
+            history.back();
+        }
+    }
 </script>
 
-<div class="message">
-    {error.message}
+<div class="error-box">
+    <p class="error-text">{error.message}</p>
+    <button class="btn btn-primary" on:click={closePage}>
+        {tr.actionsClose()}
+    </button>
 </div>
 
 <style lang="scss">
-    .message {
+    .error-box {
+        background-color: var(--window-bg);
+        border: 1px solid var(--error-fg);
+        color: var(--fg);
+        padding: 1rem;
+        border-radius: 0.5rem;
+        max-width: 400px;
+        margin: 1rem auto;
         text-align: center;
-        margin: 50px 0 0;
+        box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
+    }
+
+    .error-text {
+        color: var(--error-fg);
+        font-weight: 600;
+        margin-bottom: 0.75rem;
     }
 </style>
diff --git a/ts/lib/generated/post.ts b/ts/lib/generated/post.ts
index 90e372520..0ed02549c 100644
--- a/ts/lib/generated/post.ts
+++ b/ts/lib/generated/post.ts
@@ -19,7 +19,9 @@ export async function postProto<T>(
         return outputType.fromBinary(outputBytes);
     } catch (err) {
         const { alertOnError = true } = options;
-        if (alertOnError && !(err instanceof Error && err.message === "500: Interrupted")) {
+        if (
+            alertOnError && !(err instanceof Error && err.message === "500: Interrupted")
+        ) {
             alert(err);
         }
         throw err;
@@ -41,7 +43,12 @@ async function postProtoInner(url: string, body: Uint8Array): Promise<Uint8Array
         } catch {
             // ignore
         }
-        throw new Error(`${result.status}: ${msg}`);
+        // hide HTTP status in production builds
+        throw new Error(
+            process.env.NODE_ENV === "production"
+                ? `${msg}`
+                : `${result.status}: ${msg}`,
+        );
     }
     const blob = await result.blob();
     const respBuf = await new Response(blob).arrayBuffer();
diff --git a/ts/routes/import-csv/[...path]/+page.svelte b/ts/routes/import-csv/[...path]/+page.svelte
index 4553c1bfe..08bb5d2b3 100644
--- a/ts/routes/import-csv/[...path]/+page.svelte
+++ b/ts/routes/import-csv/[...path]/+page.svelte
@@ -3,10 +3,15 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import ErrorPage from "$lib/components/ErrorPage.svelte";
     import ImportCsvPage from "../ImportCsvPage.svelte";
     import type { PageData } from "./$types";
 
     export let data: PageData;
 </script>
 
-<ImportCsvPage state={data.state} />
+{#if data.initialError}
+    <ErrorPage error={data.initialError} />
+{:else}
+    <ImportCsvPage state={data.state} />
+{/if}
diff --git a/ts/routes/import-csv/[...path]/+page.ts b/ts/routes/import-csv/[...path]/+page.ts
index cda2bace9..2f947f791 100644
--- a/ts/routes/import-csv/[...path]/+page.ts
+++ b/ts/routes/import-csv/[...path]/+page.ts
@@ -6,14 +6,19 @@ import { ImportCsvState } from "../lib";
 import type { PageLoad } from "./$types";
 
 export const load = (async ({ params }) => {
-    const [notetypes, decks, metadata] = await Promise.all([
-        getNotetypeNames({}),
-        getDeckNames({
-            skipEmptyDefault: false,
-            includeFiltered: false,
-        }),
-        getCsvMetadata({ path: params.path }, { alertOnError: false }),
-    ]);
-    const state = new ImportCsvState(params.path, notetypes, decks, metadata);
-    return { state };
+    try {
+        const [notetypes, decks, metadata] = await Promise.all([
+            getNotetypeNames({}),
+            getDeckNames({
+                skipEmptyDefault: false,
+                includeFiltered: false,
+            }),
+            getCsvMetadata({ path: params.path }, { alertOnError: false }),
+        ]);
+        const state = new ImportCsvState(params.path, notetypes, decks, metadata);
+        return { state };
+    } catch (error: any) {
+        const rawMsg = error?.message ?? String(error ?? "");
+        return { initialError: new Error(rawMsg) };
+    }
 }) satisfies PageLoad;