diff --git a/public/index.html b/public/index.html
index dba20e7..36e017c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -34,6 +34,7 @@
                 </nav>
             </header>
             <main class="layout-content">
+                <!-- Side Menu -->
                 <ul id="slide-out" class="sidenav">
                     <li class="brown">
                         <a href="#!"><i class="material-icons">home</i>Fast Calorie</a>
@@ -50,7 +51,7 @@
                     <li>
                         <div class="divider"></div>
                     </li>
-                    <li><a href="#!"><i class="material-icons">input</i>Log Weight</a></li>
+                    <li><a href="#!" data-target="weightModal" class="modal-trigger"><i class="material-icons">input</i>Log Weight</a></li>
                     <li>
                         <div class="divider"></div>
                     </li>
@@ -179,8 +180,34 @@
                 <button class="btn red" @click="remove" idx="{this.selected.idx}">Remove Entry</button>
             </div>
         </div>
+
+        <div id="weightModal" class="modal">
+            <div class="modal-content">
+                <h4>Log Weight</h4>
+                <p>
+                    <table>
+                        <tr>
+                            <th colspan="2">
+                                {this.date}
+                            </th>
+                        </tr>
+                        <tr>
+                            <th>Weight</th>
+                            <td>
+                                <!-- TODO: should show last weight -->
+                                <input type="number" placeholder="100">
+                            </td>
+                        </tr>
+                    </table>
+                </p>
+            </div>
+            <div class="modal-footer">
+                <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
+                <button class="btn red" @click="addWeight">Log Weight</button>
+            </div>
+        </div>
     </div>
 
     <script type="module" src="/js/index.js"></script>
-  </body>
+</body>
 </html>
diff --git a/public/js/index.js b/public/js/index.js
index d02ffcd..420084e 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -145,6 +145,9 @@ Litedom({
         // set focus
         document.getElementById('calories').focus();
     },
+    addWeight() {
+        console.log('add weight');
+    },
     created() {
         // start service worker
         if ('serviceWorker' in navigator) {
@@ -162,10 +165,14 @@ Litedom({
         let pickers = document.querySelector('.datepicker');
         M.Datepicker.init(pickers, {});
 
-        // [M]aterial modal
+        // [M]aterial modal - calorie detail
         let modal = document.querySelector('#detailsModal');
         M.Modal.init(modal, {});
 
+        // [M]aterial modal - add weight
+        let weight = document.querySelector('#weightModal');
+        M.Modal.init(weight, {});
+
         var sidebar = document.querySelectorAll('.sidenav');
         M.Sidenav.init(sidebar, {});
     },