diff --git a/public/index.html b/public/index.html
index fff7fa0..dba20e7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,6 +23,7 @@
             <header class="layout-header">
                 <nav>
                     <div class="nav-wrapper brown">
+                        <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
                         <a href="/" class="brand-logo">Fast Calorie</a>
                         <ul id="nav" class="right">
                             <li class="datepicker" style="margin-right: 1rem;">
@@ -33,6 +34,36 @@
                 </nav>
             </header>
             <main class="layout-content">
+                <ul id="slide-out" class="sidenav">
+                    <li class="brown">
+                        <a href="#!"><i class="material-icons">home</i>Fast Calorie</a>
+                    </li>
+                    <li class="brown">
+                        <div class="user-view">
+                            <div style="min-height: 6rem;">
+                                <!-- <img src="images/office.jpg"> -->
+                            </div>
+                            <a href=""><span class="white-text name">Version 0.0.0</span></a>
+                            <a href=""><span class="white-text email">&copy;2020 Geoff Doty</span></a>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="divider"></div>
+                    </li>
+                    <li><a href="#!"><i class="material-icons">input</i>Log Weight</a></li>
+                    <li>
+                        <div class="divider"></div>
+                    </li>
+                    <li><a class="subheader">Reports</a></li>
+                    <li><a class="waves-effect" href="#!"><i class="material-icons">trending_down</i>Calories</a></li>
+                    <li><a class="waves-effect" href="#!"><i class="material-icons">trending_down</i>Weight</a></li>
+                    <li>
+                        <div class="divider"></div>
+                    </li>
+                    <li><a class="waves-effect" href="#!"><i class="material-icons">info_outline</i>About</a></li>
+                    <li ><a class="waves-effect" href="#!"><i class="material-icons">settings</i>Settings</a></li>
+                </ul>
+
                 <section class="section">
                     <div class="row">
                         <div class="col s2"></div>
diff --git a/public/js/index.js b/public/js/index.js
index e016d1a..d02ffcd 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -165,6 +165,9 @@ Litedom({
         // [M]aterial modal
         let modal = document.querySelector('#detailsModal');
         M.Modal.init(modal, {});
+
+        var sidebar = document.querySelectorAll('.sidenav');
+        M.Sidenav.init(sidebar, {});
     },
     removed() {},
     populate() {