diff --git a/customize.dist/main.css b/customize.dist/main.css
index db300316c..634a23b35 100644
--- a/customize.dist/main.css
+++ b/customize.dist/main.css
@@ -245,6 +245,12 @@ tbody td:last-child {
   top: 3px;
   max-width: 100px;
 }
+.bottom-left {
+  border-bottom-left-radius: 5px;
+}
+.top-left {
+  border-top-left-radius: 5px;
+}
 form.realtime {
   padding: 0px;
   margin: 0px;
@@ -272,9 +278,57 @@ form.realtime #addoption {
   border: 1px solid #46E981;
   padding: 15px;
 }
+form.realtime #adduser {
+  border-top-left-radius: 5px;
+}
 form.realtime #addoption {
   border-bottom-left-radius: 5px;
 }
-form.realtime #adduser {
+div.modal {
+  box-sizing: border-box;
+  z-index: 9001;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100vh;
+  display: none;
+  background-color: #302B28;
+}
+div.modal .center {
+  position: relative;
+  width: 80%;
+  height: 80%;
+  margin: auto;
+  border: 1px solid #685d56;
+  text-align: center;
+}
+div.modal.shown {
+  display: block;
+}
+div.modal table {
+  margin: 30px;
+  border-collapse: collapse;
+}
+div.modal table input {
+  height: 100%;
+  width: 100%;
+  border: 3px solid #302B28;
+  display: table-cell;
+}
+div.modal table tfoot tr td {
+  z-index: 4000;
+  cursor: pointer;
+}
+div.modal #addtime,
+div.modal #adddate {
+  color: #46E981;
+  border: 1px solid #46E981;
+  padding: 15px;
+}
+div.modal #adddate {
   border-top-left-radius: 5px;
 }
+div.modal #addtime {
+  border-bottom-left-radius: 5px;
+}
diff --git a/customize.dist/src/cryptpad.less b/customize.dist/src/cryptpad.less
index 983687030..0ca61f478 100644
--- a/customize.dist/src/cryptpad.less
+++ b/customize.dist/src/cryptpad.less
@@ -288,6 +288,18 @@ tbody {
 
 
 // form things
+
+// MIXINS
+.bottom-left(@s: 5px) { border-bottom-left-radius: @s; }
+.bottom-left {
+    .bottom-left;
+}
+
+.top-left(@s: 5px) { border-top-left-radius: @s; }
+.top-left {
+    .top-left;
+}
+
 form.realtime {
     > input {
         &[type="text"] {
@@ -350,18 +362,91 @@ form.realtime {
         padding: 15px;
     }
 
-    .corner (@tl: 0px, @tr: 0px, @br: 0px, @bl: 0px) {
-        border-radius: @tl @tr @br @bl;
+    #adduser { .top-left; }
+    #addoption { .bottom-left; }
+}
+
+div.modal {
+    box-sizing: border-box;
+    z-index: 9001;
+    position: fixed;
+
+    top: 0px;
+    left: 0px;
+
+    width: 100%;
+    height: 100vh;
+    display: none;
+
+    background-color: @base;
+
+    .center {
+        position: relative;
+
+        width: 80%;
+        height: 80%;
+        margin: auto;
+        border: 1px solid @light-base;
+
+        text-align: center;
+
     }
 
-    #addoption {
-        //.corner(0px, 0px, 
-        border-bottom-left-radius: 5px;
+    &.shown {
+        display: block;
     }
 
-    #adduser {
-        border-top-left-radius: 5px;
+    table {
+        //width: 80%;
+        margin: 30px;
+
+        border-collapse: collapse;
+        tr {
+            td {
+                //border: 1px solid white;
+            }
+        }
+
+        input {
+            height: 100%;
+            width: 100%;
+            border: 3px solid @base;
+            display: table-cell;
+        }
+
+
+        thead {
+            tr {
+                td {
+
+                }
+            }
+        }
+        tbody {
+            tr {
+                td {
+
+                }
+            }
+        }
+        tfoot {
+            tr {
+                td {
+
+                    z-index: 4000;
+                    cursor: pointer;
+                }
+            }
+        }
     }
 
-}
+    #addtime,
+    #adddate {
+        color: @cp-green;
+        border: 1px solid @cp-green;
+        padding: 15px;
+    }
 
+    #adddate { .top-left; }
+    #addtime { .bottom-left; }
+}