diff --git a/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/VastaanottajaHaku.tsx b/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/VastaanottajaHaku.tsx
new file mode 100644
index 00000000..58b2866b
--- /dev/null
+++ b/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/VastaanottajaHaku.tsx
@@ -0,0 +1,50 @@
+'use client';
+import { FormControl, FormLabel, InputLabel, MenuItem, Select, TextField } from '@mui/material';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useDebouncedCallback } from 'use-debounce';
+import { useCallback } from 'react';
+
+export default function VastaanottajaHaku() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  const { replace } = useRouter();
+  
+  // lisätään hakuparametreihin uusi key-value-pari
+  const createQueryString = useCallback(
+    (name: string, value: any) => {
+      const params = new URLSearchParams(searchParams?.toString() || '')
+      params.set(name, value)
+ 
+      return params.toString()
+    },
+    [searchParams]
+  )
+
+  // päivitetään 3s viiveellä hakuparametrit
+  const handleTypedSearch = useDebouncedCallback((term) => {
+    const params = new URLSearchParams(searchParams?.toString() || '');
+    if (term) {
+      params.set('hakusana', term);
+    } else {
+      params.delete('hakusana');
+    }
+    replace(`${pathname}?${params.toString()}`);
+  }, 3000);
+  
+  return (
+    <FormControl fullWidth>
+      <FormLabel>Hae vastaanottajia</FormLabel>
+      <TextField  
+        id="hakusana"
+        variant="outlined" 
+        disabled
+        placeholder={'Hae nimellä tai sähköpostiosoitteella'}
+        onChange={(e) => {
+          handleTypedSearch(e.target.value);
+        }} 
+        defaultValue={searchParams?.get('hakutermi')?.toString()}/>
+    </FormControl>
+  );
+}
diff --git a/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/Vastaanottajat.tsx b/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/Vastaanottajat.tsx
new file mode 100644
index 00000000..853cd56a
--- /dev/null
+++ b/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/Vastaanottajat.tsx
@@ -0,0 +1,50 @@
+'use client'
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import { VastaanotonTila, Vastaanottaja } from "../../lib/types";
+import { getLahetysStatus } from "../../lib/util";
+import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import { StatusIcon } from "@/app/components/LahetysStatus";
+
+  const lahetyksenStatus = (tila: VastaanotonTila): string => {
+    const status = 'Lähetys ' + getLahetysStatus([tila])
+    return status
+  }
+
+  const toiminnot = (tila: VastaanotonTila): string => {
+    if(getLahetysStatus([tila])==='epäonnistui') {
+      return 'Lähetä uudelleen'
+    }
+    return ''
+  }
+
+const VastaanottajatTable = ({vastaanottajat}: {vastaanottajat: Vastaanottaja[]}) => {
+  return (
+  <TableContainer sx={{ maxHeight: 440 }}>
+  <Table
+    stickyHeader
+    aria-label="Vastaanottajat"
+  >
+    <TableHead>
+      <TableRow>
+        <TableCell>Nimi</TableCell>
+        <TableCell>Sähköposti</TableCell>
+        <TableCell>Tila</TableCell>
+        <TableCell>Toiminnot</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {vastaanottajat
+        .map((row) => (
+          <TableRow key={row.tunniste}>
+            <TableCell>{row.nimi}</TableCell>
+            <TableCell>{row.sahkoposti}</TableCell>
+            <TableCell><Box display="flex" alignItems="center"><StatusIcon status={lahetyksenStatus(row.tila)} />&nbsp; {lahetyksenStatus(row.tila)}</Box></TableCell>
+            <TableCell>{toiminnot(row.tila)}</TableCell>
+          </TableRow>
+        ))}
+    </TableBody>
+  </Table>
+</TableContainer>
+)}
+
+export default VastaanottajatTable
diff --git a/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/page.tsx b/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/page.tsx
index a289cf79..8bc861a0 100644
--- a/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/page.tsx
+++ b/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/page.tsx
@@ -1,11 +1,12 @@
 import { Suspense } from 'react'
 import { fetchLahetyksenVastaanottajat, fetchLahetys } from "../../lib/data";
-import { Grid, Skeleton } from '@mui/material';
+import { FormControl, FormLabel, Grid, Skeleton, TextField } from '@mui/material';
 import { Lahetys } from '@/app/lib/types';
 import LocalDateTime from '@/app/components/LocalDateTime';
 import { lahetyksenStatus } from '@/app/lib/util';
 import VastaanottajatTable from './Vastaanottajat';
 import { LahetysStatus } from '@/app/components/LahetysStatus';
+import VastaanottajaHaku from './VastaanottajaHaku';
    
   export default async function Page({ params }: { params: { tunniste: string } }) {
     const lahetys: Lahetys = await fetchLahetys(params.tunniste)
@@ -33,6 +34,8 @@ import { LahetysStatus } from '@/app/components/LahetysStatus';
           <Grid item xs={9} display="flex" alignItems="center"><LahetysStatus tilat={lahetys.tilat || []}/></Grid>
           <Grid item xs={12}>
             <h2>Vastaanottajat</h2>
+            <LahetysStatus tilat={lahetys.tilat || []}/>
+            <VastaanottajaHaku />
             <Suspense fallback={<Skeleton variant="rectangular" width={210} height={60} />}>
               <VastaanottajatTable vastaanottajat={data.vastaanottajat}/>
             </Suspense>