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 cfab0fe..2de1a63 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
@@ -40,25 +40,25 @@ export function DocSearchView({ posts }: Props) {
   }, []);
 
   //#region example components
-    // <Box
-    //   sx={{
-    //     mb: 5,
-    //     display: 'flex',
-    //     alignItems: 'center',
-    //     justifyContent: 'space-between',
-    //   }}
-    // >
-    //   <DocSearch posts={posts} />
-    //   <DocSort
-    //     sortBy={sortBy}
-    //     onSort={handleSort}
-    //     options={[
-    //       { value: 'latest', label: 'Latest' },
-    //       { value: 'popular', label: 'Popular' },
-    //       { value: 'oldest', label: 'Oldest' },
-    //     ]}
-    //   />
-    // </Box>
+  // <Box
+  //   sx={{
+  //     mb: 5,
+  //     display: 'flex',
+  //     alignItems: 'center',
+  //     justifyContent: 'space-between',
+  //   }}
+  // >
+  //   <DocSearch posts={posts} />
+  //   <DocSort
+  //     sortBy={sortBy}
+  //     onSort={handleSort}
+  //     options={[
+  //       { value: 'latest', label: 'Latest' },
+  //       { value: 'popular', label: 'Popular' },
+  //       { value: 'oldest', label: 'Oldest' },
+  //     ]}
+  //   />
+  // </Box>
   //#endregion
 
   return (
@@ -84,19 +84,31 @@ export function DocSearchView({ posts }: Props) {
       </Box>
 
       <>
-        {filters.map((filter, index) =>
-        (
-          <Box
-            sx={{
-              mb: 5,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-            }}
-          >
-            <TextField id="filled-basic" label={filter.label ?? filter.type} variant="filled" />
-          </Box>
-        )
+        {filters.map((filter, index) => {
+          let filterComp;
+          switch (filter.type) {
+            case 'VARCHAR':
+            case 'BOOLEAN':
+            case 'INTEGER':
+            case 'DECIMAL':
+            case 'DATE':
+            default:
+              filterComp = (<TextField id="filled-basic" label={filter.label ?? filter.type} variant="filled" />)
+              break;
+          }
+          return (
+            <Box
+              sx={{
+                mb: 5,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}
+            >
+              {filterComp}
+            </Box>
+          )
+        }
         )}
       </>