diff --git a/web/src/features/monitoring-observers/components/CreateMonitoringObserver.tsx b/web/src/features/monitoring-observers/components/MonitoringObserversList/CreateMonitoringObserverDialog.tsx
similarity index 73%
rename from web/src/features/monitoring-observers/components/CreateMonitoringObserver.tsx
rename to web/src/features/monitoring-observers/components/MonitoringObserversList/CreateMonitoringObserverDialog.tsx
index 8bd9e07a5..79e61078d 100644
--- a/web/src/features/monitoring-observers/components/CreateMonitoringObserver.tsx
+++ b/web/src/features/monitoring-observers/components/MonitoringObserversList/CreateMonitoringObserverDialog.tsx
@@ -1,28 +1,28 @@
 import { authApi } from '@/common/auth-api';
-import Layout from '@/components/layout/Layout';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Dialog, DialogClose, DialogContent, DialogFooter, DialogTitle } from '@/components/ui/dialog';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { Separator } from '@/components/ui/separator';
 import TagsSelectFormField from '@/components/ui/tag-selector';
 import { toast } from '@/components/ui/use-toast';
 import { useCurrentElectionRoundStore } from '@/context/election-round.store';
 import { useMonitoringObserversTags } from '@/hooks/tags-queries';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useNavigate } from '@tanstack/react-router';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { MonitorObserverBackButton } from './MonitoringObserverBackButton';
-import { monitoringObserversKeys } from '../hooks/monitoring-observers-queries';
+import { monitoringObserversKeys } from '../../hooks/monitoring-observers-queries';
 
-export default function CreateMonitoringObserver() {
+export interface CreateMonitoringObserverDialogProps {
+  open: boolean;
+  onOpenChange: (open: any) => void;
+}
+
+function CreateMonitoringObserverDialog({ open, onOpenChange }: CreateMonitoringObserverDialogProps) {
   const { t } = useTranslation('translation', { keyPrefix: 'observers.addObserver' });
   const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
   const { data: availableTags } = useMonitoringObserversTags(currentElectionRoundId);
-  const navigate = useNavigate();
   const queryClient = useQueryClient();
   const newObserverSchema = z.object({
     firstName: z.string(),
@@ -47,18 +47,15 @@ export default function CreateMonitoringObserver() {
       return authApi.post(`/election-rounds/${electionRoundId}/monitoring-observers`, { observers: [values] });
     },
 
-    onSuccess: (_, {electionRoundId}) => {
+    onSuccess: (_, { electionRoundId }) => {
       toast({
         title: 'Success',
         description: t('onSuccess'),
       });
 
       queryClient.invalidateQueries({ queryKey: monitoringObserversKeys.all(electionRoundId) });
-
-      navigate({
-        to: '/monitoring-observers/$tab',
-        params: { tab: 'list' },
-      });
+      form.reset({});
+      onOpenChange(false);
     },
     onError: () => {
       toast({
@@ -68,16 +65,19 @@ export default function CreateMonitoringObserver() {
       });
     },
   });
+
   return (
-    <Layout title={''} backButton={<MonitorObserverBackButton />} enableBreadcrumbs={false}>
-      <Card className='w-[800px] pt-0'>
-        <CardHeader className='flex gap-2 flex-column'>
-          <div className='flex flex-row items-center justify-between'>
-            <CardTitle className='text-xl'>{t('title')}</CardTitle>
-          </div>
-          <Separator />
-        </CardHeader>
-        <CardContent>
+    <Dialog open={open} onOpenChange={onOpenChange} modal={true}>
+      <DialogContent
+        className='min-w-[650px] min-h-[350px]'
+        onInteractOutside={(e) => {
+          e.preventDefault();
+        }}
+        onEscapeKeyDown={(e) => {
+          e.preventDefault();
+        }}>
+        <DialogTitle className='mb-3.5'>{t('title')}</DialogTitle>
+        <div className='flex flex-col gap-3'>
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
               <FormField
@@ -147,29 +147,22 @@ export default function CreateMonitoringObserver() {
                 )}
               />
 
-              <div className='flex justify-between'>
-                <div className='flex gap-2'>
-                  <Button
-                    variant='outline'
-                    type='button'
-                    onClick={() => {
-                      void navigate({
-                        to: '/monitoring-observers/$tab',
-                        params: { tab: 'list' },
-                      });
-                    }}>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button className='text-purple-900 border border-purple-900 border-input bg-background hover:bg-purple-50 hover:text-purple-600'>
                     Cancel
                   </Button>
-
-                  <Button title={t('addBtnText')} type='submit' className='px-6'>
-                    {t('addBtnText')}
-                  </Button>
-                </div>
-              </div>
+                </DialogClose>
+                <Button title={t('addBtnText')} type='submit' className='px-6'>
+                  {t('addBtnText')}
+                </Button>
+              </DialogFooter>
             </form>
           </Form>
-        </CardContent>
-      </Card>
-    </Layout>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 }
+
+export default CreateMonitoringObserverDialog;
diff --git a/web/src/features/monitoring-observers/components/MonitoringObserversList/MonitoringObserversList.tsx b/web/src/features/monitoring-observers/components/MonitoringObserversList/MonitoringObserversList.tsx
index f806b18d4..c1a498074 100644
--- a/web/src/features/monitoring-observers/components/MonitoringObserversList/MonitoringObserversList.tsx
+++ b/web/src/features/monitoring-observers/components/MonitoringObserversList/MonitoringObserversList.tsx
@@ -16,7 +16,7 @@ import { Separator } from '@/components/ui/separator';
 import { useDialog } from '@/components/ui/use-dialog';
 import { Cog8ToothIcon, EllipsisVerticalIcon, FunnelIcon, PaperAirplaneIcon } from '@heroicons/react/24/outline';
 import { useMutation } from '@tanstack/react-query';
-import { Link, useNavigate, useRouter } from '@tanstack/react-router';
+import { useNavigate, useRouter } from '@tanstack/react-router';
 import { CellContext, ColumnDef } from '@tanstack/react-table';
 import { useEffect, useMemo, useState } from 'react';
 
@@ -38,6 +38,7 @@ import { MonitoringObserver, MonitoringObserverStatus } from '../../models/monit
 import ImportMonitoringObserversDialog from '../MonitoringObserversList/ImportMonitoringObserversDialog';
 import ImportMonitoringObserversErrorsDialog from '../MonitoringObserversList/ImportMonitoringObserversErrorsDialog';
 import ConfirmResendInvitationDialog from './ConfirmResendInvitationDialog';
+import CreateMonitoringObserverDialog from './CreateMonitoringObserverDialog';
 
 function MonitoringObserversList() {
   const navigate = useNavigate();
@@ -45,84 +46,85 @@ function MonitoringObserversList() {
   const search = Route.useSearch();
   const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
 
-  const monitoringObserverColDefs: ColumnDef<MonitoringObserver>[] = useMemo(()=>{
+  const monitoringObserverColDefs: ColumnDef<MonitoringObserver>[] = useMemo(() => {
     return [
-    {
-      header: ({ column }) => <DataTableColumnHeader title='Name' column={column} />,
-      accessorKey: 'name',
-      enableSorting: true,
-      enableGlobalFilter: true,
-      cell: ({
-        row: {
-          original: { firstName, lastName },
-        },
-      }) => (
-        <p>
-          {firstName} {lastName}
-        </p>
-      ),
-    },
-    {
-      header: ({ column }) => <DataTableColumnHeader title='Email' column={column} />,
-      accessorKey: 'email',
-      enableSorting: true,
-    },
-    {
-      header: ({ column }) => <DataTableColumnHeader title='Observer tags' column={column} />,
-      accessorKey: 'tags',
-      cell: ({
-        row: {
-          original: { tags },
-        },
-      }) => <TableTagList tags={tags} />,
-    },
-    {
-      header: ({ column }) => <DataTableColumnHeader title='Phone' column={column} />,
-      accessorKey: 'phoneNumber',
-      enableSorting: true,
-    },
-    {
-      header: ({ column }) => <DataTableColumnHeader title='Observer status' column={column} />,
-      accessorKey: 'status',
-      enableSorting: true,
-      cell: ({
-        row: {
-          original: { status },
-        },
-      }) => <Badge className={'badge-' + status}>{status}</Badge>,
-    },
-    {
-      header: ({ column }) => <DataTableColumnHeader title='Latest activity at' column={column} />,
-      accessorKey: 'latestActivityAt',
-      enableSorting: true,
-      cell: ({
-        row: {
-          original: { latestActivityAt },
-        },
-      }) => <p>{latestActivityAt ? format(latestActivityAt, DateTimeFormat) : '-'}</p>,
-    },
-    {
-      header: '',
-      accessorKey: 'action',
-      enableSorting: true,
-      cell: ({ row }) => (
-        <DropdownMenu>
-          <DropdownMenuTrigger>
-            <EllipsisVerticalIcon className='w-[24px] h-[24px] text-purple-600' />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem onClick={() => navigateToObserver(row.original.id)}>View</DropdownMenuItem>
-            <DropdownMenuItem onClick={() => navigateToEdit(row.original.id)}>Edit</DropdownMenuItem>
-            <DropdownMenuItem
-              disabled={row.original.status !== MonitoringObserverStatus.Pending}
-              onClick={() => handleResendInviteToObserver(row.original.id)}>
-              Resend invitation email
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ),
-    },
-  ];}, [currentElectionRoundId]);
+      {
+        header: ({ column }) => <DataTableColumnHeader title='Name' column={column} />,
+        accessorKey: 'name',
+        enableSorting: true,
+        enableGlobalFilter: true,
+        cell: ({
+          row: {
+            original: { firstName, lastName },
+          },
+        }) => (
+          <p>
+            {firstName} {lastName}
+          </p>
+        ),
+      },
+      {
+        header: ({ column }) => <DataTableColumnHeader title='Email' column={column} />,
+        accessorKey: 'email',
+        enableSorting: true,
+      },
+      {
+        header: ({ column }) => <DataTableColumnHeader title='Observer tags' column={column} />,
+        accessorKey: 'tags',
+        cell: ({
+          row: {
+            original: { tags },
+          },
+        }) => <TableTagList tags={tags} />,
+      },
+      {
+        header: ({ column }) => <DataTableColumnHeader title='Phone' column={column} />,
+        accessorKey: 'phoneNumber',
+        enableSorting: true,
+      },
+      {
+        header: ({ column }) => <DataTableColumnHeader title='Observer status' column={column} />,
+        accessorKey: 'status',
+        enableSorting: true,
+        cell: ({
+          row: {
+            original: { status },
+          },
+        }) => <Badge className={'badge-' + status}>{status}</Badge>,
+      },
+      {
+        header: ({ column }) => <DataTableColumnHeader title='Latest activity at' column={column} />,
+        accessorKey: 'latestActivityAt',
+        enableSorting: true,
+        cell: ({
+          row: {
+            original: { latestActivityAt },
+          },
+        }) => <p>{latestActivityAt ? format(latestActivityAt, DateTimeFormat) : '-'}</p>,
+      },
+      {
+        header: '',
+        accessorKey: 'action',
+        enableSorting: true,
+        cell: ({ row }) => (
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <EllipsisVerticalIcon className='w-[24px] h-[24px] text-purple-600' />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem onClick={() => navigateToObserver(row.original.id)}>View</DropdownMenuItem>
+              <DropdownMenuItem onClick={() => navigateToEdit(row.original.id)}>Edit</DropdownMenuItem>
+              <DropdownMenuItem
+                disabled={row.original.status !== MonitoringObserverStatus.Pending}
+                onClick={() => handleResendInviteToObserver(row.original.id)}>
+                Resend invitation email
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ),
+      },
+    ];
+  }, [currentElectionRoundId]);
 
   const [searchText, setSearchText] = useState(search.searchText);
   const debouncedSearch = useDebounce(search, 300);
@@ -130,6 +132,7 @@ function MonitoringObserversList() {
 
   const [importErrorsFileId, setImportErrorsFileId] = useState<string | undefined>();
   const [monitoringObserverId, setMonitoringObserverId] = useState<string | undefined>();
+  const createMonitoringObserverDialog = useDialog();
   const importMonitoringObserversDialog = useDialog();
   const importMonitoringObserverErrorsDialog = useDialog();
   const confirmResendInvitesDialog = useDialog();
@@ -155,7 +158,7 @@ function MonitoringObserversList() {
     const params = [
       ['status', debouncedSearch.monitoringObserverStatus],
       ['tags', debouncedSearch.tags],
-      ['searchText', debouncedSearch.searchText]
+      ['searchText', debouncedSearch.searchText],
     ].filter(([_, value]) => value);
 
     return Object.fromEntries(params);
@@ -184,7 +187,7 @@ function MonitoringObserversList() {
       });
     },
 
-    onSuccess: (_, {electionRoundId}) => {
+    onSuccess: (_, { electionRoundId }) => {
       queryClient.invalidateQueries({ queryKey: monitoringObserversKeys.all(electionRoundId) });
       router.invalidate();
 
@@ -251,19 +254,13 @@ function MonitoringObserversList() {
         <div className='flex flex-row items-center justify-between px-6'>
           <CardTitle className='text-xl'>Monitoring observers list</CardTitle>
           <div className='flex flex-row-reverse gap-4 table-actions flex-row-'>
-            <Link to='/monitoring-observers/new-observer'>
-              <Button>
-                <Plus className='mr-2' width={18} height={18} />
-                {i18n.t('observers.addObserver.addBtnText')}
-              </Button>
-            </Link>
-
             {!!importErrorsFileId && (
               <ImportMonitoringObserversErrorsDialog
                 fileId={importErrorsFileId}
                 {...importMonitoringObserverErrorsDialog.dialogProps}
               />
             )}
+
             <ImportMonitoringObserversDialog
               {...importMonitoringObserversDialog.dialogProps}
               onImportError={(fileId) => {
@@ -291,6 +288,12 @@ function MonitoringObserversList() {
               </svg>
               Import observer list
             </Button>
+            <Button variant='secondary' onClick={() => createMonitoringObserverDialog.trigger()}>
+              <Plus className='mr-2' width={18} height={18} />
+              {i18n.t('observers.addObserver.addBtnText')}
+            </Button>
+            <CreateMonitoringObserverDialog {...createMonitoringObserverDialog.dialogProps} />
+
             <Button
               className='text-purple-900 bg-background hover:bg-purple-50 hover:text-purple-500'
               onClick={exportMonitoringObservers}>
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 23941bcd9..eeac91c49 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -102,7 +102,6 @@
     "closingAndCounting": "Closing And Counting",
     "other": "Other"
   },
-
   "form": {
     "field.code": "Form Code",
     "field.name": "Form Name",
@@ -141,7 +140,7 @@
       "lastName": "Last name",
       "email": "Email",
       "phone": "Phone number",
-      "addBtnText": "Add observer",
+      "addBtnText": "Add individual observer",
       "onSuccess": "Observer created",
       "onError": "Error adding observer"
     }
@@ -149,56 +148,44 @@
   "ngoAdminDashboard": {
     "title": "Dashboard",
     "subtitle": "Key indicators",
-
     "observersAccounts": {
       "cardTitle": "Observers Accounts",
       "indicatorTitle": "Total accounts"
     },
-
     "observersOnFieldCardTitle": "Observers on field",
-
     "observersInPollingStations": {
       "indicatorTitle": "Observers in polling stations",
       "metricLabel": "With at least one question answered"
     },
-
     "pollingStationCardTitle": "Polling stations",
-
     "stationsVisitedByAtLeastOneObserver": {
       "indicatorTitle": "Stations visited by at least one observer",
       "metricLabel": "coverage"
     },
-
     "timeSpentObserving": {
       "cardTitle": "Time spent observing",
       "indicatorTitle": "Based on start-end times reported"
     },
-
     "startedForms": {
       "cardTitle": "Started forms",
       "indicatorTitle": "forms started between {{interval}}"
     },
-
     "questionsAnswered": {
       "cardTitle": "Questions answered",
       "indicatorTitle": "questions answered between {{interval}}"
     },
-
     "flaggedAnswers": {
       "cardTitle": "Flagged answers",
       "indicatorTitle": "answers were flagged through forms between {{interval}}"
     },
-
     "quickReports": {
       "cardTitle": "Quick reports",
       "indicatorTitle": "quick reports were signalled between {{interval}}"
     },
-
     "citizenReports": {
       "cardTitle": "Citizen reports",
       "indicatorTitle": "citizen reports were signalled between {{interval}}"
     },
-
     "incidentReports": {
       "cardTitle": "Incident reports",
       "indicatorTitle": "incidents reports were signalled between {{interval}}"
@@ -242,11 +229,8 @@
     "guides": {
       "citizenGuidesTabTitle": "Citizen Guides",
       "citizenGuidesCardTitle": "Citizen guides",
-
       "citizenNotificationsTabTitle": "Citizen Notifications",
       "citizenNotificationsCardTitle": "Citizen notifications",
-
-
       "observerGuidesTabTitle": "Observer Guides",
       "observerGuidesCardTitle": "Observer guides",
       "headers": {
@@ -369,4 +353,4 @@
       "All": "All"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/web/src/routeTree.gen.ts b/web/src/routeTree.gen.ts
index 0c6355d39..56647f9e5 100644
--- a/web/src/routeTree.gen.ts
+++ b/web/src/routeTree.gen.ts
@@ -27,7 +27,6 @@ import { Route as ResetPasswordSuccessImport } from './routes/reset-password/suc
 import { Route as ObserversObserverIdImport } from './routes/observers/$observerId'
 import { Route as ObserverGuidesNewImport } from './routes/observer-guides/new'
 import { Route as NgosNgoIdImport } from './routes/ngos/$ngoId'
-import { Route as MonitoringObserversNewObserverImport } from './routes/monitoring-observers/new-observer'
 import { Route as MonitoringObserversCreateNewMessageImport } from './routes/monitoring-observers/create-new-message'
 import { Route as MonitoringObserversTabImport } from './routes/monitoring-observers/$tab'
 import { Route as FormsFormIdImport } from './routes/forms/$formId'
@@ -139,12 +138,6 @@ const NgosNgoIdRoute = NgosNgoIdImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
-const MonitoringObserversNewObserverRoute =
-  MonitoringObserversNewObserverImport.update({
-    path: '/monitoring-observers/new-observer',
-    getParentRoute: () => rootRoute,
-  } as any)
-
 const MonitoringObserversCreateNewMessageRoute =
   MonitoringObserversCreateNewMessageImport.update({
     path: '/monitoring-observers/create-new-message',
@@ -341,10 +334,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MonitoringObserversCreateNewMessageImport
       parentRoute: typeof rootRoute
     }
-    '/monitoring-observers/new-observer': {
-      preLoaderRoute: typeof MonitoringObserversNewObserverImport
-      parentRoute: typeof rootRoute
-    }
     '/ngos/$ngoId': {
       preLoaderRoute: typeof NgosNgoIdImport
       parentRoute: typeof rootRoute
@@ -500,7 +489,6 @@ export const routeTree = rootRoute.addChildren([
   FormsFormIdRoute,
   MonitoringObserversTabRoute,
   MonitoringObserversCreateNewMessageRoute,
-  MonitoringObserversNewObserverRoute,
   NgosNgoIdRoute,
   ObserverGuidesNewRoute,
   ObserversObserverIdRoute,
diff --git a/web/src/routes/monitoring-observers/new-observer.tsx b/web/src/routes/monitoring-observers/new-observer.tsx
deleted file mode 100644
index 0eb5c8d6e..000000000
--- a/web/src/routes/monitoring-observers/new-observer.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import CreateMonitoringObserver from '@/features/monitoring-observers/components/CreateMonitoringObserver';
-import { redirectIfNotAuth } from '@/lib/utils';
-import { createFileRoute } from '@tanstack/react-router';
-
-export const Route = createFileRoute('/monitoring-observers/new-observer')({
-  beforeLoad: () => {
-    redirectIfNotAuth();
-  },
-  component: CreateNewObserver,
-});
-
-function CreateNewObserver() {
-  return <CreateMonitoringObserver />;
-}