diff --git a/src/st_keyup/__init__.py b/src/st_keyup/__init__.py
index 03cdde6..7593fd7 100644
--- a/src/st_keyup/__init__.py
+++ b/src/st_keyup/__init__.py
@@ -13,7 +13,7 @@ def st_keyup(
     value: str = "",
     max_chars: Optional[int] = None,
     key: Optional[str] = None,
-    type: str = "default",
+    type: str = "text",
     debounce: Optional[int] = None,
     on_change: Optional[Callable] = None,
     args: Optional[Tuple[Any, ...]] = None,
@@ -22,23 +22,59 @@ def st_keyup(
     placeholder: str = "",
     disabled: bool = False,
     label_visibility: str = "visible",
-):
-    """
-    Generate a text input that renders on keyup, debouncing the input by the
+)-> str:
+        
+    r"""Generate a text input that renders on keyup, debouncing the input by the
     specified amount of milliseconds.
-
     Debounce means that it will wait at least the specified amount of milliseconds
     before updating the value. This is useful for preventing excessive updates
     when the user is typing. Since the input updating will cause the app to rerun,
     if you are having performance issues, you should consider setting a debounce
     value.
 
-    on_change is a callback function that will be called when the value changes.
-
-    args and kwargs are optional arguments which are passed to the on_change callback
-    function
-    """
-
+    Parameters
+    ----------
+    label : str
+        A short label explaining to the user what this input is for.
+    value : object
+        The text value of this widget when it first renders. This will be
+        cast to str internally.
+    max_chars : int or None
+        Max number of characters allowed in text input.
+    key : str or int
+        An optional string or integer to use as the unique key for the widget.
+        If this is omitted, a key will be generated for the widget
+        based on its content. Multiple widgets of the same type may
+        not share the same key.
+    type : str
+        The type of the text input. This can be any of these following types in the list below.
+        If no value is passed, it defaults to "text".
+        ["password", ("tel" or "phone"), "email", "number", "text"]
+    debounce: int
+        An optional int in miliseconds that will wait that amount of time before updating.
+    on_change : callable
+        An optional callback invoked when this text input's value changes.
+    args : tuple
+        An optional tuple of args to pass to the callback.
+    kwargs : dict
+        An optional dict of kwargs to pass to the callback.
+    placeholder : str or None
+        An optional string displayed when the text input is empty. If None,
+        no text is displayed. This argument can only be supplied by keyword.
+    disabled : bool
+        An optional boolean, which disables the text input if set to True.
+        The default is False. This argument can only be supplied by keyword.
+    label_visibility : "visible", "hidden", or "collapsed"
+        The visibility of the label. If "hidden", the label doesn't show but there
+        is still empty space for it above the widget (equivalent to label="").
+        If "collapsed", both the label and the space are removed. Default is
+        "visible". This argument can only be supplied by keyword.
+
+    Returns
+    -------
+    str
+        The current keyup values of the text input widget.
+"""   
     if key is None:
         key = "st_keyup_" + label
 
diff --git a/src/st_keyup/frontend/main.js b/src/st_keyup/frontend/main.js
index 16a1e82..a2e3e7a 100644
--- a/src/st_keyup/frontend/main.js
+++ b/src/st_keyup/frontend/main.js
@@ -43,10 +43,18 @@ function onRender(event) {
       input.value = value
     }
 
-    if (type == "password") {
+    if(type == "password"){
       input.type = "password"
     }
-    else {
+    else if (type == "phone" || type == "tel") {
+      input.type = "tel"
+    }
+    else if (type == "email"){
+      input.type = "email"
+    }
+    else if (type =="number"){
+      input.type = "number"
+    }else{
       input.type = "text"
     }
 
diff --git a/src/st_keyup/frontend/style.css b/src/st_keyup/frontend/style.css
index 1756324..21d5c8a 100644
--- a/src/st_keyup/frontend/style.css
+++ b/src/st_keyup/frontend/style.css
@@ -29,10 +29,10 @@ label {
   font-size: 13px;
   font-weight: normal;
   line-height: 1.6;
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-top-left-radius: 0.45rem;
+  border-top-right-radius: 0.45rem;
+  border-bottom-right-radius: 0.45rem;
+  border-bottom-left-radius: 0.45rem;
   transition-duration: 200ms;
   display: flex;
   width: 100%;
@@ -54,10 +54,11 @@ label {
   border-bottom-color: rgb(240, 242, 246);
   background-color: rgb(240, 242, 246);
   position: absolute;
+
   left: 0;
   right: 0;
   bottom: 0;
-  top: 33px;
+  top: 30px;
 }
 input {
   text-size-adjust: 100%;
@@ -84,12 +85,16 @@ input {
   max-width: 100%;
   cursor: text;
   margin: 0px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-left: 14px;
-  padding-right: 14px;
-  caret-color: rgb(49, 51, 63);
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+  border-right-width: 1px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   min-width: 0px;
+  caret-color: auto;
 }
 .input:focus-within {
   text-size-adjust: 100%;
@@ -100,11 +105,15 @@ input {
   font-size: 1rem;
   font-weight: normal;
   line-height: 1.6;
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-top-left-radius: 0.45rem;
+  border-top-right-radius: 0.45rem;
+  border-bottom-right-radius: 0.45rem;
+  border-bottom-left-radius: 0.45rem;
   transition-duration: 200ms;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+  border-right-width: 1px;
   display: flex;
   width: 100%;
   box-sizing: border-box;
@@ -147,3 +156,44 @@ input {
 .label-collapsed .input {
   top: 0 !important;
 }
+@media (prefers-color-scheme: dark) {
+  label {
+    color: rgb(250, 250, 250);
+  }
+  .input {
+    border-left-color: rgb(38, 39, 48);
+    border-right-color: rgb(38, 39, 48);
+    border-top-color: rgb(38, 39, 48);
+    border-bottom-color: rgb(38, 39, 48);
+    background-color: rgb(38, 39, 48);
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+  
+  input {
+    color: rgb(255, 255, 255);
+    caret-color: auto;
+  }
+  .input:focus-within {
+    border-left-color: rgb(255,75, 75);
+    border-right-color: rgb(255,75, 75);
+    border-top-color: rgb(255,75, 75);
+    border-bottom-color: rgb(255,75, 75);
+    background-color: rgb(38, 39, 48);
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    border-right-width: 1px;
+  }
+  .disabled label {
+    color: rgba(206, 204, 192, 0.4) !important;
+  }
+    .disabled input {
+    color: rgba(206, 204, 192, 0.4) !important;
+  }
+}
+.st-bx {
+background-color: transparent;
+}
\ No newline at end of file