diff --git a/packages/web/package.json b/packages/web/package.json
index d689ef6b..885ff143 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -12,6 +12,7 @@
"@mui/icons-material": "^5.11.9",
"@mui/lab": "^5.0.0-alpha.120",
"@mui/material": "^5.11.10",
+ "@mui/x-date-pickers": "^6.5.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
diff --git a/packages/web/src/components/ExecutionsFilter/index.tsx b/packages/web/src/components/ExecutionsFilter/index.tsx
new file mode 100644
index 00000000..6ea891d7
--- /dev/null
+++ b/packages/web/src/components/ExecutionsFilter/index.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import InputAdornment from '@mui/material/InputAdornment';
+import TextField from '@mui/material/TextField';
+import Grid from '@mui/material/Grid';
+import ConditionalIconButton from 'components/ConditionalIconButton';
+import SearchIcon from '@mui/icons-material/Search';
+
+export default function ExecutionFilters() {
+ return (
+
+
+
+
+
+
+
+ ),
+ }}
+ variant="outlined"
+ />
+
+
+ }
+ data-test="create-flow-button"
+ >
+ Search
+
+
+
+
+ );
+}
diff --git a/packages/web/src/pages/Executions/index.tsx b/packages/web/src/pages/Executions/index.tsx
index f14999b3..3e280bd9 100644
--- a/packages/web/src/pages/Executions/index.tsx
+++ b/packages/web/src/pages/Executions/index.tsx
@@ -10,6 +10,7 @@ import PaginationItem from '@mui/material/PaginationItem';
import type { IExecution } from '@automatisch/types';
import NoResultFound from 'components/NoResultFound';
+import ExecutionsFilter from 'components/ExecutionsFilter';
import ExecutionRow from 'components/ExecutionRow';
import Container from 'components/Container';
import PageTitle from 'components/PageTitle';
@@ -60,25 +61,22 @@ export default function Executions(): React.ReactElement {
{formatMessage('executions.title')}
-
-
+
+
{loading && (
)}
-
{!loading && !hasExecutions && (
)}
-
{!loading &&
executions?.map((execution) => (
))}
-
{pageInfo && pageInfo.totalPages > 1 && (