diff --git a/example/App.jsx b/example/App.jsx
index 6eafdd6..984e921 100644
--- a/example/App.jsx
+++ b/example/App.jsx
@@ -19,7 +19,8 @@ export default class App extends Component {
             category= {[
               {label: "Name",name:"name",type: "text"},
               {label: "First Name",name:"firstName",type: "text"},
-              {label: "Gender", name:"gender",type: "list", options:[{label:"Male",value: "M"},{label:"Female",value: "F"}]}
+              {label: "Gender", name:"gender",type: "list", options:[{label:"Male",value: "M"},{label:"Female",value: "F"}]},
+              {label: "Date of Birth", name:"birthDate",type: "date", options:{}}
             ]}
             onFilter= {this.onFilter}
           />
diff --git a/libs/Component/InputList.jsx b/libs/Component/InputList.jsx
index f3f3708..d1c62eb 100644
--- a/libs/Component/InputList.jsx
+++ b/libs/Component/InputList.jsx
@@ -154,7 +154,7 @@ export default class InputList extends Component {
             placement="bottom"
             container={this.context.searchComponent}
             >
-            <Popover id="input_list_options">
+            <Popover id="input_list_options" className="popover_options">
               <div className="list_wrapper">
                 {
                   this.showOptionList()
diff --git a/libs/Component/SearchComponent.jsx b/libs/Component/SearchComponent.jsx
index d742ef3..62c3ae7 100644
--- a/libs/Component/SearchComponent.jsx
+++ b/libs/Component/SearchComponent.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import InputText from './InputText';
 import InputList from './InputList';
+import InputDate from './InputDate';
 
 export default class SearchComponent extends Component {
   constructor(props) {
@@ -34,6 +35,10 @@ export default class SearchComponent extends Component {
         return (
           <InputList data={data} {...defaultProps} />
         )
+      case "date":
+        return (
+          <InputDate data={data} {...defaultProps} />
+        )
       default: throw('Please set valid Type')
     }
   }
diff --git a/libs/css/visual_search.css b/libs/css/visual_search.css
index 99f0624..cb94d36 100644
--- a/libs/css/visual_search.css
+++ b/libs/css/visual_search.css
@@ -5,6 +5,18 @@
   ----****----
 */
 
+.text-center {
+  text-align: center !important;
+}
+
+.text-left {
+  text-align: left !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
 .visual_search {
   position: relative;
 }
@@ -66,21 +78,29 @@
   margin: 2px;
 }
 
-#input_list_options {
+.popover_options {
   width: 100%;
-  margin-top: 0px;
+  margin-top: 0px !important;
   border-radius: 0px;
   top: 27px !important;
   left: 0px !important;
 }
 
-#input_list_options .option {
+.popover_options .option {
   display: block;
   padding: 5px 5px 5px 5px;
   border-bottom: 1px solid #ccc;
   cursor: pointer;
 }
 
-#input_list_options .arrow {
+.popover_options .arrow {
   display: none;
 }
+
+.pickeryear {
+  padding: 10px;
+}
+
+.pickermonth {
+  padding: 10px;
+}