diff --git a/web/src/components/ui/file-uploader.tsx b/web/src/components/ui/file-uploader.tsx
index 759619e21..77d1fa018 100644
--- a/web/src/components/ui/file-uploader.tsx
+++ b/web/src/components/ui/file-uploader.tsx
@@ -1,14 +1,11 @@
-import { ArrowUpTrayIcon, DocumentTextIcon, XMarkIcon } from "@heroicons/react/24/solid"
-import * as React from "react"
-import Dropzone, {
-  type DropzoneProps,
-  type FileRejection,
-} from "react-dropzone"
+import { ArrowUpTrayIcon, DocumentTextIcon, XMarkIcon } from '@heroicons/react/24/solid';
+import * as React from 'react';
+import Dropzone, { type DropzoneProps, type FileRejection } from 'react-dropzone';
 
-import { Button } from "@/components/ui/button"
-import { useControllableState } from "@/components/ui/use-controllable-state"
-import { cn, formatBytes } from "@/lib/utils"
-import { toast } from "./use-toast"
+import { Button } from '@/components/ui/button';
+import { useControllableState } from '@/components/ui/use-controllable-state';
+import { cn, formatBytes } from '@/lib/utils';
+import { toast } from './use-toast';
 
 interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -17,7 +14,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default undefined
    * @example value={files}
    */
-  value?: File[]
+  value?: File[];
 
   /**
    * Function to be called when the value changes.
@@ -25,7 +22,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default undefined
    * @example onValueChange={(files) => setFiles(files)}
    */
-  onValueChange?: (files: File[]) => void
+  onValueChange?: (files: File[]) => void;
 
   /**
    * Accepted file types for the uploader.
@@ -36,7 +33,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * ```
    * @example accept={["image/png", "image/jpeg"]}
    */
-  accept?: DropzoneProps["accept"]
+  accept?: DropzoneProps['accept'];
 
   /**
    * Maximum file size for the uploader.
@@ -44,7 +41,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default 1024 * 1024 * 2 // 2MB
    * @example maxSize={1024 * 1024 * 2} // 2MB
    */
-  maxSize?: DropzoneProps["maxSize"]
+  maxSize?: DropzoneProps['maxSize'];
 
   /**
    * Maximum number of files for the uploader.
@@ -52,7 +49,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default 1
    * @example maxFileCount={4}
    */
-  maxFileCount?: DropzoneProps["maxFiles"]
+  maxFileCount?: DropzoneProps['maxFiles'];
 
   /**
    * Whether the uploader should accept multiple files.
@@ -60,7 +57,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default false
    * @example multiple
    */
-  multiple?: boolean
+  multiple?: boolean;
 
   /**
    * Whether the uploader is disabled.
@@ -68,7 +65,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default false
    * @example disabled
    */
-  disabled?: boolean
+  disabled?: boolean;
 }
 
 export function FileUploader(props: FileUploaderProps) {
@@ -76,7 +73,7 @@ export function FileUploader(props: FileUploaderProps) {
     value: valueProp,
     onValueChange,
     accept = {
-      "image/*": [],
+      'image/*': [],
     },
     maxSize = 1024 * 1024 * 2,
     maxFileCount = 1,
@@ -84,176 +81,147 @@ export function FileUploader(props: FileUploaderProps) {
     disabled = false,
     className,
     ...dropzoneProps
-  } = props
+  } = props;
 
   const [files, setFiles] = useControllableState({
     prop: valueProp,
     onChange: onValueChange,
-  })
+  });
 
   const onDrop = React.useCallback(
     (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
       if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {
         toast({
-          title:"Cannot upload more than 1 file at a time",
-          variant: 'destructive'
-        })
-        return
+          title: 'Cannot upload more than 1 file at a time',
+          variant: 'destructive',
+        });
+        return;
       }
 
       if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {
-        toast({title:`Cannot upload more than ${maxFileCount} files`, variant: 'destructive'})
-        return
+        toast({ title: `Cannot upload more than ${maxFileCount} files`, variant: 'destructive' });
+        return;
       }
 
       const newFiles = acceptedFiles.map((file) =>
         Object.assign(file, {
           preview: URL.createObjectURL(file),
         })
-      )
+      );
 
-      const updatedFiles = files ? [...files, ...newFiles] : newFiles
+      const updatedFiles = files ? [...files, ...newFiles] : newFiles;
 
-      setFiles(updatedFiles)
+      setFiles(updatedFiles);
 
       if (rejectedFiles.length > 0) {
         rejectedFiles.forEach(({ file }) => {
-          toast({title: `File ${file.name} was rejected`, variant: 'destructive'})
-        })
+          toast({ title: `File ${file.name} was rejected`, variant: 'destructive' });
+        });
       }
     },
 
     [files, maxFileCount, multiple, setFiles]
-  )
+  );
 
   function onRemove(index: number) {
-    if (!files) return
-    const newFiles = files.filter((_, i) => i !== index)
-    setFiles(newFiles)
-    onValueChange?.(newFiles)
+    if (!files) return;
+    const newFiles = files.filter((_, i) => i !== index);
+    setFiles(newFiles);
+    onValueChange?.(newFiles);
   }
 
-  const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount
+  const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount;
 
   return (
-    <div className="relative flex flex-col gap-6 overflow-hidden">
-     {!files?.length || (files?.length ?? 0) < maxFileCount ?<Dropzone
-        onDrop={onDrop}
-        accept={accept}
-        maxSize={maxSize}
-        maxFiles={maxFileCount}
-        multiple={maxFileCount > 1 || multiple}
-        disabled={isDisabled}
-      >
-        {({ getRootProps, getInputProps, isDragActive }) => (
-          <div
-            {...getRootProps()}
-            className={cn(
-              "group relative grid h-32 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed border-muted-foreground/25 px-5 py-2.5 text-center transition hover:bg-muted/25",
-              "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-              isDragActive && "border-muted-foreground/50",
-              isDisabled && "pointer-events-none opacity-60",
-              className
-            )}
-            {...dropzoneProps}
-          >
-            <input {...getInputProps()} />
-            {isDragActive ? (
-              <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
-                <div className="p-3 border border-dashed rounded-full">
-                  <ArrowUpTrayIcon
-                    className="size-7 text-muted-foreground"
-                    aria-hidden="true"
-                  />
-                </div>
-                <p className="font-medium text-muted-foreground">
-                  Drop the files here
-                </p>
-              </div>
-            ) : (
-              <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
-                <div className="p-3 border border-dashed rounded-full">
-                  <ArrowUpTrayIcon
-                    className="size-7 text-muted-foreground"
-                    aria-hidden="true"
-                  />
+    <div className='relative flex flex-col gap-6 overflow-hidden'>
+      {!files?.length || (files?.length ?? 0) < maxFileCount ? (
+        <Dropzone
+          onDrop={onDrop}
+          accept={accept}
+          maxSize={maxSize}
+          maxFiles={maxFileCount}
+          multiple={maxFileCount > 1 || multiple}
+          disabled={isDisabled}>
+          {({ getRootProps, getInputProps, isDragActive }) => (
+            <div
+              {...getRootProps()}
+              className={cn(
+                'group relative grid  w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed border-muted-foreground/25 px-5 py-10 text-center transition hover:bg-muted/25',
+                'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+                isDragActive && 'border-muted-foreground/50',
+                isDisabled && 'pointer-events-none opacity-60',
+                className
+              )}
+              {...dropzoneProps}>
+              <input {...getInputProps()} />
+              {isDragActive ? (
+                <div className='flex flex-col items-center justify-center gap-4 sm:px-5'>
+                  <div className='p-3 border border-dashed rounded-full'>
+                    <ArrowUpTrayIcon className='size-7 text-muted-foreground' aria-hidden='true' />
+                  </div>
+                  <p className='font-medium text-muted-foreground'>Drop the files here</p>
                 </div>
-                <div className="flex flex-col gap-px">
-                  <p className="font-medium text-muted-foreground">
-                    Drag {`'n'`} drop files here, or click to select files
-                  </p>
-                  <p className="text-sm text-muted-foreground/70">
-                    You can upload
-                    {maxFileCount > 1
-                      ? ` ${maxFileCount === Infinity ? "multiple" : maxFileCount}
+              ) : (
+                <div className='flex flex-col items-center justify-center gap-4 sm:px-5'>
+                  <div className='p-3 border border-dashed rounded-full'>
+                    <ArrowUpTrayIcon className='size-7 text-muted-foreground' aria-hidden='true' />
+                  </div>
+                  <div className='flex flex-col gap-0.5'>
+                    <p className='font-medium text-muted-foreground'>Drag {`'n'`} drop files here to start uploading</p>
+                    <p className='font-medium text-muted-foreground/80'>or</p>
+                    <p className='text-primary-600 underline'>Click here to browse files</p>
+
+                    <p className='text-sm text-muted-foreground/70'>
+                      You can upload
+                      {maxFileCount > 1
+                        ? ` ${maxFileCount === Infinity ? 'multiple' : maxFileCount}
                       files (up to ${formatBytes(maxSize)} each)`
-                      : ` a file with ${formatBytes(maxSize)}`}
-                  </p>
+                        : ` a file with ${formatBytes(maxSize)}`}
+                    </p>
+                  </div>
                 </div>
-              </div>
-            )}
-          </div>
-        )}
-      </Dropzone> : null}
+              )}
+            </div>
+          )}
+        </Dropzone>
+      ) : null}
       {files?.length ? (
-          <div className="flex flex-col gap-4 max-h-48">
-            {files?.map((file, index) => (
-              <FileCard
-                key={index}
-                file={file}
-                onRemove={() => onRemove(index)}
-              />
-            ))}
-          </div>
+        <div className='flex flex-col gap-4 max-h-48'>
+          {files?.map((file, index) => <FileCard key={index} file={file} onRemove={() => onRemove(index)} />)}
+        </div>
       ) : null}
     </div>
-  )
+  );
 }
 
 interface FileCardProps {
-  file: File
-  onRemove: () => void
+  file: File;
+  onRemove: () => void;
 }
 
 function FileCard({ file, onRemove }: FileCardProps) {
   return (
-    <div className="relative flex items-center gap-2.5">
-      <div className="flex flex-1 gap-2.5">
-        <div className="flex flex-col w-full gap-2">
-          <div className="flex flex-col gap-px">
-            <p className="text-sm font-medium line-clamp-1 text-foreground/80">
-              {file.name}
-            </p>
-            <p className="text-xs text-muted-foreground">
-              {formatBytes(file.size)}
-            </p>
+    <div className='relative flex items-center gap-2.5'>
+      <div className='flex flex-1 gap-2.5'>
+        <div className='flex flex-col w-full gap-2'>
+          <div className='flex flex-col gap-px'>
+            <p className='text-sm font-medium line-clamp-1 text-foreground/80'>{file.name}</p>
+            <p className='text-xs text-muted-foreground'>{formatBytes(file.size)}</p>
           </div>
         </div>
       </div>
-      <div className="flex items-center gap-2">
-        <Button
-          type="button"
-          variant="outline"
-          size="icon"
-          className="size-7"
-          onClick={onRemove}
-        >
-          <XMarkIcon className="size-4" aria-hidden="true" />
-          <span className="sr-only">Remove file</span>
+      <div className='flex items-center gap-2'>
+        <Button type='button' variant='outline' size='icon' className='size-7' onClick={onRemove}>
+          <XMarkIcon className='size-4' aria-hidden='true' />
+          <span className='sr-only'>Remove file</span>
         </Button>
       </div>
     </div>
-  )
+  );
 }
 
-interface FilePreviewProps {
-}
+interface FilePreviewProps {}
 
 function FilePreview(props: FilePreviewProps) {
-  return (
-    <DocumentTextIcon
-      className="size-10 text-muted-foreground"
-      aria-hidden="true"
-    />
-  )
+  return <DocumentTextIcon className='size-10 text-muted-foreground' aria-hidden='true' />;
 }
diff --git a/web/src/features/monitoring-observers/components/MonitoringObserversImport/MonitoringObserversImport.tsx b/web/src/features/monitoring-observers/components/MonitoringObserversImport/MonitoringObserversImport.tsx
index e0a62f33c..52ed1069d 100644
--- a/web/src/features/monitoring-observers/components/MonitoringObserversImport/MonitoringObserversImport.tsx
+++ b/web/src/features/monitoring-observers/components/MonitoringObserversImport/MonitoringObserversImport.tsx
@@ -5,7 +5,7 @@ import { FileUploader } from '@/components/ui/file-uploader';
 import { Separator } from '@/components/ui/separator';
 import Papa from 'papaparse';
 import { useMemo, useState } from 'react';
-import { ZodIssue, z } from 'zod';
+import { ZodIssue, ZodIssueCode, z } from 'zod';
 
 import { authApi } from '@/common/auth-api';
 import { Button } from '@/components/ui/button';
@@ -15,11 +15,11 @@ import { downloadImportExample } from '@/features/monitoring-observers/helpers';
 import { queryClient } from '@/main';
 import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
 import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
+import { LoaderIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { monitoringObserversKeys } from '../../hooks/monitoring-observers-queries';
-import { LoaderIcon } from 'lucide-react';
 import { ImportedObserversDataTable } from './ImportedObserversDataTable';
-import { useNavigate } from '@tanstack/react-router';
 
 export const importObserversSchema = z.object({
   firstName: z
@@ -94,7 +94,7 @@ export function MonitoringObserversImport(): FunctionComponent {
   }
 
   return (
-    <Layout breadcrumbs={false} enableBreadcrumbs={false}>
+    <Layout enableBreadcrumbs={true} title='Import observer list'>
       <Card>
         <CardHeader>
           <CardTitle className='mb-3.5'>Import monitoring observer list</CardTitle>
@@ -129,6 +129,8 @@ export function MonitoringObserversImport(): FunctionComponent {
                   // worker: true,
                   transformHeader: (header) => header.charAt(0).toLowerCase() + header.slice(1),
                   async complete(results) {
+                    const existingEmails = new Set();
+
                     if (results.errors.length) {
                       console.error('Parsing errors:', results.errors);
                       // Optionally show an error message to the user.
@@ -140,7 +142,13 @@ export function MonitoringObserversImport(): FunctionComponent {
                         id: crypto.randomUUID(),
                       };
 
-                      const validationResult = importObserversSchema.safeParse(observerWithId);
+                      const validationResult = importObserversSchema
+                        .superRefine((val, ctx) => {
+                          if (existingEmails.has(val.email)) {
+                            ctx.addIssue({ code: ZodIssueCode.custom, message: 'Duplicate email' });
+                          } else existingEmails.add(val.email);
+                        })
+                        .safeParse(observerWithId);
 
                       return {
                         ...observerWithId,
@@ -169,7 +177,7 @@ export function MonitoringObserversImport(): FunctionComponent {
                 </Button>
               </div>{' '}
             </CardDescription>
-            <Separator/>
+            <Separator />
           </CardHeader>
           <CardContent className='p-0'>
             <div>