diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/file-drop.directive.ts b/apps/client/src/app/directives/file-drop/file-drop.directive.ts
similarity index 100%
rename from apps/client/src/app/pages/portfolio/activities/import-activities-dialog/file-drop.directive.ts
rename to apps/client/src/app/directives/file-drop/file-drop.directive.ts
diff --git a/apps/client/src/app/directives/file-drop/file-drop.module.ts b/apps/client/src/app/directives/file-drop/file-drop.module.ts
new file mode 100644
index 000000000..a0148516e
--- /dev/null
+++ b/apps/client/src/app/directives/file-drop/file-drop.module.ts
@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { FileDropDirective } from './file-drop.directive';
+
+@NgModule({
+  declarations: [FileDropDirective],
+  exports: [FileDropDirective]
+})
+export class GfFileDropModule {}
diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts
index 54f23bad4..d11cafdb9 100644
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts
@@ -137,6 +137,20 @@ export class ImportActivitiesDialog implements OnDestroy {
     }
   }
 
+  public onFilesDropped({
+    files,
+    stepper
+  }: {
+    files: FileList;
+    stepper: MatStepper;
+  }): void {
+    if (files.length === 0) {
+      return;
+    }
+
+    this.handleFile({ stepper, file: files[0] });
+  }
+
   public onImportStepChange(event: StepperSelectionEvent) {
     if (event.selectedIndex === ImportStep.UPLOAD_FILE) {
       this.importStep = ImportStep.UPLOAD_FILE;
@@ -175,7 +189,38 @@ export class ImportActivitiesDialog implements OnDestroy {
     aStepper.reset();
   }
 
-  private async handleFile(file: File): Promise<void> {
+  public onSelectFile(stepper: MatStepper) {
+    const input = document.createElement('input');
+    input.accept = 'application/JSON, .csv';
+    input.type = 'file';
+
+    input.onchange = (event) => {
+      // Getting the file reference
+      const file = (event.target as HTMLInputElement).files[0];
+      this.handleFile({ file, stepper });
+    };
+
+    input.click();
+  }
+
+  public updateSelection(activities: Activity[]) {
+    this.selectedActivities = activities.filter(({ error }) => {
+      return !error;
+    });
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private async handleFile({
+    file,
+    stepper
+  }: {
+    file: File;
+    stepper: MatStepper;
+  }): Promise<void> {
     this.snackBar.open('⏳ ' + $localize`Validating data...`);
 
     // Setting up the reader
@@ -186,12 +231,13 @@ export class ImportActivitiesDialog implements OnDestroy {
       const fileContent = readerEvent.target.result as string;
 
       try {
-        if (file.type === 'application/json' || file.name.endsWith('.json')) {
+        if (file.name.endsWith('.json')) {
           const content = JSON.parse(fileContent);
+
           this.accounts = content.accounts;
 
-          if (!Array.isArray(content.activities)) {
-            if (Array.isArray(content.orders)) {
+          if (!isArray(content.activities)) {
+            if (isArray(content.orders)) {
               this.handleImportError({
                 activities: [],
                 error: {
@@ -206,65 +252,57 @@ export class ImportActivitiesDialog implements OnDestroy {
             }
           }
 
-          const { activities } = await this.importActivitiesService.importJson({
-            accounts: content.accounts,
-            activities: content.activities,
-            isDryRun: true
-          });
-          this.activities = activities;
-        } else if (file.type === 'text/csv' || file.name.endsWith('.csv')) {
-          const data = await this.importActivitiesService.importCsv({
-            fileContent,
-            isDryRun: true,
-            userAccounts: this.data.user.accounts
-          });
-          this.activities = data.activities;
-        } else {
-          throw new Error();
+          try {
+            const { activities } =
+              await this.importActivitiesService.importJson({
+                accounts: content.accounts,
+                activities: content.activities,
+                isDryRun: true
+              });
+            this.activities = activities;
+          } catch (error) {
+            console.error(error);
+            this.handleImportError({ error, activities: content.activities });
+          }
+
+          return;
+        } else if (file.name.endsWith('.csv')) {
+          try {
+            const data = await this.importActivitiesService.importCsv({
+              fileContent,
+              isDryRun: true,
+              userAccounts: this.data.user.accounts
+            });
+            this.activities = data.activities;
+          } catch (error) {
+            console.error(error);
+            this.handleImportError({
+              activities: error?.activities ?? [],
+              error: {
+                error: { message: error?.error?.message ?? [error?.message] }
+              }
+            });
+          }
+
+          return;
         }
+
+        throw new Error();
       } catch (error) {
         console.error(error);
-        this.handleImportError({ error, activities: [] });
+        this.handleImportError({
+          activities: [],
+          error: { error: { message: ['Unexpected format'] } }
+        });
       } finally {
         this.importStep = ImportStep.SELECT_ACTIVITIES;
         this.snackBar.dismiss();
-        this.changeDetectorRef.markForCheck();
-      }
-    };
-  }
 
-  public onFilesDropped(files: FileList): void {
-    if (files.length === 0) {
-      return;
-    }
-
-    const droppedFile = files[0];
-    this.handleFile(droppedFile);
-  }
-
-  public onSelectFile(aStepper: MatStepper) {
-    const input = document.createElement('input');
-    input.accept = 'application/JSON, .csv';
-    input.type = 'file';
+        stepper.next();
 
-    input.onchange = (event) => {
-      // Getting the file reference
-      const file = (event.target as HTMLInputElement).files[0];
-      this.handleFile(file);
+        this.changeDetectorRef.markForCheck();
+      }
     };
-
-    input.click();
-  }
-
-  public updateSelection(activities: Activity[]) {
-    this.selectedActivities = activities.filter(({ error }) => {
-      return !error;
-    });
-  }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
   }
 
   private handleImportError({
diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
index 3a0194d16..06cadad8e 100644
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
@@ -70,13 +70,13 @@
         <ng-template #selectFile>
           <div class="d-flex flex-column justify-content-center">
             <button
-              class="drop-area cursor-pointer text-center p-4"
+              class="drop-area p-4 text-center text-muted"
               gfFileDrop
               (click)="onSelectFile(stepper)"
-              (filesDropped)="onFilesDropped($event)"
+              (filesDropped)="onFilesDropped({stepper, files: $event})"
             >
               <div
-                class="button-content d-flex align-items-center justify-content-center flex-column"
+                class="align-items-center d-flex flex-column justify-content-center"
               >
                 <ion-icon
                   class="cloud-icon"
@@ -85,21 +85,23 @@
                 <span i18n>Choose or drop a file here</span>
               </div>
             </button>
-            <p class="mb-0 mt-4 text-center">
-              <span class="mr-1" i18n
-                >The following file formats are supported:</span
-              >
-              <a
-                href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok.csv"
-                target="_blank"
-                >CSV</a
-              >
-              <span class="mx-1" i18n>or</span>
-              <a
-                href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok.json"
-                target="_blank"
-                >JSON</a
-              >
+            <p class="mb-0 mt-3 text-center">
+              <small>
+                <span class="mr-1" i18n
+                  >The following file formats are supported:</span
+                >
+                <a
+                  href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok.csv"
+                  target="_blank"
+                  >CSV</a
+                >
+                <span class="mx-1" i18n>or</span>
+                <a
+                  href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok.json"
+                  target="_blank"
+                  >JSON</a
+                >
+              </small>
             </p>
           </div>
         </ng-template>
@@ -116,7 +118,7 @@
         >
       </ng-template>
       <div class="pt-3">
-        <ng-container *ngIf="errorMessages.length === 0; else errorMessage">
+        <ng-container *ngIf="errorMessages?.length === 0; else errorMessage">
           <gf-activities-table
             *ngIf="importStep === 1"
             [activities]="activities"
diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts
index b0f6ff19e..23eeda312 100644
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts
@@ -10,20 +10,21 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatStepperModule } from '@angular/material/stepper';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
+import { GfFileDropModule } from '@ghostfolio/client/directives/file-drop/file-drop.module';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
 
-import { FileDropDirective } from './file-drop.directive';
 import { ImportActivitiesDialog } from './import-activities-dialog.component';
 
 @NgModule({
-  declarations: [FileDropDirective, ImportActivitiesDialog],
+  declarations: [ImportActivitiesDialog],
   imports: [
     CommonModule,
     FormsModule,
     GfActivitiesTableModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
+    GfFileDropModule,
     GfSymbolModule,
     MatButtonModule,
     MatDialogModule,
diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss
index 914e37e8a..2dbbdaefc 100644
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss
@@ -34,26 +34,30 @@
   }
 
   .drop-area {
-    border: 3px dashed rgba(var(--palette-primary-500), 1);
-    border-radius: 8px;
-    background-color: inherit;
-    transition: border-color 0.1s ease;
-    color: rgba(var(--palette-primary-500), 1);
+    background-color: rgba(var(--palette-foreground-base), 0.02);
+    border: 1px dashed
+      rgba(
+        var(--palette-foreground-divider),
+        var(--palette-foreground-divider-alpha)
+      );
+    border-radius: 0.25rem;
 
-    .button-content {
-      font-weight: bolder;
+    &:hover {
+      border-color: rgba(var(--palette-primary-500), 1) !important;
+      color: rgba(var(--palette-primary-500), 1);
     }
 
     .cloud-icon {
-      font-size: 35px; /* Adjust the icon size as needed */
-      font-weight: bolder;
-      margin-bottom: 8px; /* Adjust the spacing between icon and text */
-      color: inherit;
+      font-size: 2.5rem;
     }
+  }
+}
 
-    &:hover {
-      border-color: #28a745;
-      color: #28a745;
-    }
+:host-context(.is-dark-theme) {
+  .drop-area {
+    border-color: rgba(
+      var(--palette-foreground-divider-dark),
+      var(--palette-foreground-divider-alpha-dark)
+    );
   }
 }
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 36a5b11b4..c7624c83e 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -430,6 +430,11 @@ ngx-skeleton-loader {
   }
 }
 
+.mat-stepper-vertical,
+.mat-stepper-horizontal {
+  background: transparent !important;
+}
+
 .mdc-button {
   &.mat-accent,
   &.mat-primary {