diff --git a/client/package-lock.json b/client/package-lock.json
index f5ee1d165..cf10f29a6 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1891,11 +1891,29 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "luxon": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.4.4.tgz",
+      "integrity": "sha512-M21p8nbKZRLqVnQ0XAhhCo+2Z3Z6+zm9tuogDMZ2vlkFkw8AREF+d5/abn8tz1/ycu4cemNlqcQcc7HqjhrpTw=="
+    },
     "map-stream": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
       "integrity": "sha1-ih8HiW2CsQkmvTdEokIACfiJdKg="
     },
+    "material-ui-pickers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/material-ui-pickers/-/material-ui-pickers-1.0.1.tgz",
+      "integrity": "sha512-FRJwgeFUQdQxzNAybZvf11204KFBxqKS6sg4JvAO0cWmHULXJhrc9kuEDT8F7Pomwnv6+AyfxygsoMgIRcBMNg==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "keycode": "^2.2.0",
+        "react-event-listener": "^0.6.4",
+        "react-text-mask": "=5.4.1",
+        "react-transition-group": "^2.5.0",
+        "tslib": "^1.9.3"
+      }
+    },
     "memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -2451,6 +2469,14 @@
         "warning": "^4.0.1"
       }
     },
+    "react-text-mask": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.4.1.tgz",
+      "integrity": "sha512-mGx1n0x0skktwsKcpgAGnrgExFlXDflbWEHh8PC1UaQP8+EdHkW7JYczTghsBo2rnVwU9/4A9x/2bVt3HY46/w==",
+      "requires": {
+        "prop-types": "^15.5.6"
+      }
+    },
     "react-transition-group": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.0.tgz",
diff --git a/client/package.json b/client/package.json
index de1fa9e82..a61a66e6f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -22,6 +22,8 @@
     "@material-ui/icons": "^3.0.1",
     "classnames": "^2.2.6",
     "graphql-tag": "^2.10.0",
+    "luxon": "^1.4.4",
+    "material-ui-pickers": "^1.0.1",
     "react": "^16.5.2",
     "react-apollo": "^2.2.4",
     "react-router-dom": "^4.3.1"
diff --git a/client/src/index.js b/client/src/index.js
index 2e4c0c8b6..a0212d5fd 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,6 +1,9 @@
 import React, { Component } from 'react'
 import { Route, BrowserRouter, Switch } from 'react-router-dom'
 
+import { MuiPickersUtilsProvider } from 'material-ui-pickers'
+import LuxonUtils from 'material-ui-pickers/utils/luxon-utils'
+
 import { getItem } from './utils/local-storage'
 
 import TopBar from './Components/TopBar'
@@ -32,15 +35,17 @@ class App extends Component {
       loggedIn = ''
     }
     return (
-      <BrowserRouter basename={this.props.match.path}>
-        <div>
-          {loggedIn}
-          <Switch>
-            <Route exact path='/' component={Search} />
-            <Route path='/hosted-events' component={HostedEvent} />
-          </Switch>
-        </div>
-      </BrowserRouter>
+      <MuiPickersUtilsProvider utils={LuxonUtils}>
+        <BrowserRouter basename={this.props.match.path}>
+          <div>
+            {loggedIn}
+            <Switch>
+              <Route exact path='/' component={Search} />
+              <Route path='/hosted-events' component={HostedEvent} />
+            </Switch>
+          </div>
+        </BrowserRouter>
+      </MuiPickersUtilsProvider>
     )
   }
 }