diff --git a/dribbblish.js b/dribbblish.js
index 4c09b32..19b035c 100644
--- a/dribbblish.js
+++ b/dribbblish.js
@@ -3,7 +3,7 @@
 class ConfigMenu {
     /**
      * @typedef {Object} DribbblishConfigOptions
-     * @property {"checkbox" | "select" | "button" | "slider" | "number" | "text"} type
+     * @property {"checkbox" | "select" | "button" | "slider" | "number" | "text" | "time"} type
      * @property {String?} area
      * @property {any?} data
      * @property {String?} key
@@ -205,6 +205,20 @@ class ConfigMenu {
                 this.set(options.key, e.target.value);
                 options.onChange(e.target.value);
             });
+        } else if (options.type == "time") {
+            // Validate
+            if (options.defaultValue == null) options.defaultValue = "00:00";
+
+            const input = /* html */ `
+                <input type="time" id="dribbblish-config-input-${options.key}" name="${options.name}" value="${this.get(options.key, options.defaultValue)}">
+            `;
+            this.addInputHTML({ ...options, input });
+
+            document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("input", (e) => {
+                document.getElementById(`dribbblish-config-input-${options.key}`).setAttribute("value", e.target.value);
+                this.set(options.key, e.target.value);
+                options.onChange(e.target.value);
+            });
         } else {
             throw new Error(`Config Type "${options.type}" invalid`);
         }
diff --git a/user.css b/user.css
index 9b908a8..80ddd0e 100644
--- a/user.css
+++ b/user.css
@@ -151,7 +151,8 @@ input[type=range]::-webkit-slider-runnable-track {
 }
 
 input[type=number],
-input[type=text] {
+input[type=text],
+input[type=time] {
     height: 32px;
     border: none;
     border-radius: 4px !important;
@@ -163,10 +164,16 @@ input[type=text] {
 input[type=number]:hover,
 input[type=number]:active,
 input[type=text]:hover,
-input[type=text]:active {
+input[type=text]:active,
+input[type=time]:hover,
+input[type=time]:active {
     background-color: rgba(var(--spice-rgb-selected-row), .6) !important;
 }
 
+input[type="time"]::-webkit-calendar-picker-indicator {
+    filter: invert(calc(1 - var(--is_light)));
+}
+
 .x-searchInput-searchInputSearchIcon,
 .x-searchInput-searchInputClearButton {
     color: var(--spice-text) !important;