diff --git a/App/Views/Data/edit_pengumuman.html b/App/Views/Data/edit_pengumuman.html
index 94c4e4c..4275c97 100644
--- a/App/Views/Data/edit_pengumuman.html
+++ b/App/Views/Data/edit_pengumuman.html
@@ -94,7 +94,7 @@
                             <label for="valid_at">Berlaku dari: </label>
                         </div>
                         <div class="stack">
-                            <input type="date" name="valid_at" value="{{ post.valid_at }}">
+                            <input id="left" name="valid_at" value="{{ post.valid_at }}">
                         </div>
                         <input type="hidden" name="old_valid_at" value="{{ post.valid_at }}">
                     </div>
@@ -104,7 +104,7 @@
                             <label for="expired_at">Berlaku sampai: </label>
                         </div>
                         <div class="stack">
-                            <input type="date" name="expired_at" value="{{ post.expired_at }}">
+                            <input id="right" name="expired_at" value="{{ post.expired_at }}">
                         </div>
                         <input type="hidden" name="old_expired_at" value="{{ post.expired_at }}">
                     </div>
@@ -148,6 +148,16 @@
         </div>
         {% endif %}
     </section>
-
 </main>
+
+<script>
+    rome(left, {
+        dateValidator: rome.val.beforeEq(right),
+        time: false
+    });
+    rome(right, {
+        dateValidator: rome.val.afterEq(left),
+        time: false
+    });
+</script>
 {% endblock %}
diff --git a/App/Views/Data/entry_pengumuman.html b/App/Views/Data/entry_pengumuman.html
index f3737bb..ab673ad 100644
--- a/App/Views/Data/entry_pengumuman.html
+++ b/App/Views/Data/entry_pengumuman.html
@@ -20,12 +20,12 @@
                     <br>
 
                     <label for="expired_at">Berlaku dari: </label>
-                    <input type="date" name="valid_at" value="{{ timestamp }}">
+                    <input id="left" name="valid_at" value="{{ timestamp }}">
 
                     <br>
 
                     <label for="expired_at">Berlaku sampai: </label>
-                    <input type="date" name="expired_at" value="{{ timestamp }}">
+                    <input id="right" name="expired_at" value="{{ timestamp }}">
 
                     <br>
                 </div>
@@ -55,4 +55,15 @@
         </form>
     </section>
 </main>
+
+<script>
+    rome(left, {
+        dateValidator: rome.val.beforeEq(right),
+        time: false
+    });
+    rome(right, {
+        dateValidator: rome.val.afterEq(left),
+        time: false
+    });
+</script>
 {% endblock %}
diff --git a/App/Views/base.html b/App/Views/base.html
index 82c8369..34c6fe9 100644
--- a/App/Views/base.html
+++ b/App/Views/base.html
@@ -4,6 +4,7 @@
         <meta charset="utf-8">
         <script src="https://use.fontawesome.com/0aa8f3d106.js"></script>
         <link rel="stylesheet" href="/css/picnic.min.css">
+        <link rel="stylesheet" href="/css/rome.css">
         <title>{% block title %}{% endblock %}</title>
 
         <style>
@@ -46,6 +47,10 @@
             .fr {
                 float: right;
             }
+
+            td, th {
+                padding: .3em .45em .3em .6em;
+            }
         </style>
     </head>
     <body>
@@ -55,9 +60,9 @@
             </a>
             {% block nav %}{% endblock %}
         </nav>
+        <script src="/js/rome.js"></script>
         {% block body %}
         {% endblock %}
 
-        <script src="/js/rome.js"></script>
     </body>
 </html>
diff --git a/public/css/rome.css b/public/css/rome.css
new file mode 100644
index 0000000..8f44345
--- /dev/null
+++ b/public/css/rome.css
@@ -0,0 +1,95 @@
+/**
+ * rome - Customizable date (and time) picker. Opt-in UI, no jQuery!
+ * @version v2.1.22
+ * @link https://github.com/bevacqua/rome
+ * @license MIT
+ */
+.rd-container {
+  display: none;
+  /*border: 1px solid #333;*/
+  border: none;
+  background-color: #fff;
+  padding: 10px;
+  text-align: center;
+}
+.rd-container-attachment {
+  position: absolute;
+}
+.rd-month {
+  display: inline-block;
+  margin-right: 25px;
+}
+.rd-month:last-child {
+  margin-right: 0;
+}
+.rd-back,
+.rd-next {
+  cursor: pointer;
+  border: none;
+  outline: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+}
+.rd-back[disabled],
+.rd-next[disabled] {
+  cursor: default;
+}
+.rd-back {
+  float: left;
+}
+.rd-next {
+  float: right;
+}
+.rd-back:before {
+  display: block;
+  content: '\2190';
+}
+.rd-next:before {
+  display: block;
+  content: '\2192';
+}
+.rd-day-body {
+  cursor: pointer;
+  text-align: center;
+}
+.rd-day-selected,
+.rd-time-selected,
+.rd-time-option:hover {
+  cursor: pointer;
+  background-color: #333;
+  color: #fff;
+}
+.rd-day-prev-month,
+.rd-day-next-month {
+  color: #999;
+}
+.rd-day-disabled {
+  cursor: default;
+  color: #fcc;
+}
+.rd-time {
+  position: relative;
+  display: inline-block;
+  margin-top: 5px;
+  min-width: 80px;
+}
+.rd-time-list {
+  display: none;
+  position: absolute;
+  overflow-y: scroll;
+  max-height: 160px;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  color: #333;
+}
+.rd-time-selected {
+  padding: 5px;
+}
+.rd-time-option {
+  padding: 5px;
+}
+.rd-day-concealed {
+  visibility: hidden;
+}
