diff --git a/src/client/dd-hub-react/src/api/filter-service.ts b/src/client/dd-hub-react/src/api/filter-service.ts
index aeb85d6..a544205 100644
--- a/src/client/dd-hub-react/src/api/filter-service.ts
+++ b/src/client/dd-hub-react/src/api/filter-service.ts
@@ -4,7 +4,7 @@ export type Type = 'BOOLEAN' | 'DATE' | 'VARCHAR' | 'INTEGER' | 'DECIMAL';
 
 export type Filter = {
     id: number;
-    label: string;
+    label?: string;
     name: string;
     type: Type;
 };
diff --git a/src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx b/src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx
index 25297e6..9071021 100644
--- a/src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx
+++ b/src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx
@@ -3,6 +3,7 @@ import { useState, useCallback, useEffect } from 'react';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import Pagination from '@mui/material/Pagination';
 
@@ -38,6 +39,19 @@ export function DocSearchView({ posts }: Props) {
     });
   }, []);
 
+  //#region example components
+    // <DocSearch posts={posts} />
+    // <DocSort
+    //   sortBy={sortBy}
+    //   onSort={handleSort}
+    //   options={[
+    //     { value: 'latest', label: 'Latest' },
+    //     { value: 'popular', label: 'Popular' },
+    //     { value: 'oldest', label: 'Oldest' },
+    //   ]}
+    // />
+  //#endregion
+
   return (
     <DashboardContent>
 
@@ -91,16 +105,7 @@ export function DocSearchView({ posts }: Props) {
               justifyContent: 'space-between',
             }}
           >
-            <DocSearch posts={posts} />
-            <DocSort
-              sortBy={sortBy}
-              onSort={handleSort}
-              options={[
-                { value: 'latest', label: 'Latest' },
-                { value: 'popular', label: 'Popular' },
-                { value: 'oldest', label: 'Oldest' },
-              ]}
-            />
+            <TextField id="filled-basic" label={filter.label ?? filter.type} variant="filled" />
           </Box>
         )
         )}