diff --git a/app/Member/MemberController.php b/app/Member/MemberController.php
index 3077cacf..624d31ec 100644
--- a/app/Member/MemberController.php
+++ b/app/Member/MemberController.php
@@ -22,7 +22,7 @@ class MemberController extends Controller
 
     public $filter = [
         'ausstand' => false,
-        'bill_kind' => false,
+        'bill_kind' => null,
     ];
 
     public function index(Request $request): Response {
diff --git a/resources/css/app.css b/resources/css/app.css
index b549e5dd..5dbd4f57 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -8,3 +8,4 @@
 @import "table";
 @import "sidebar";
 @import "bool";
+@import "form";
diff --git a/resources/css/form.css b/resources/css/form.css
new file mode 100644
index 00000000..27edf281
--- /dev/null
+++ b/resources/css/form.css
@@ -0,0 +1,310 @@
+:root {
+    --h-field-sm: 23px;
+    --h-field-base: 35px;
+    --h-field-lg: 42px;
+    --m-field-sm: 0.2rem;
+    --m-field-base: 0.3rem;
+    --m-field-lg: 0.4rem;
+}
+.size-sm {
+    height: var(--h-field-sm);
+}
+.size-base {
+    height: var(--h-field-base);
+}
+.size-lg {
+    height: var(--h-field-lg);
+}
+
+.checkbox {
+    @apply flex flex-col relative cursor-pointer;
+    input[type="checkbox"] {
+        @apply invisible absolute;
+        & + span {
+            @apply transition-colors duration-300 flex items-center;
+            span {
+                @apply border-2 border-gray-800 relative rounded cursor-pointer flex flex-none justify-center items-center;
+            }
+            svg {
+                @apply text-white transition-opacity duration-300;
+                opacity: 0;
+            }
+            & + span {
+                a {
+                    @apply text-primary-300;
+                }
+            }
+        }
+        &:checked + span svg {
+            opacity: 1;
+        }
+    }
+    &.size-sm {
+        height: auto;
+        input[type="checkbox"] {
+            & + span {
+                min-height: var(--h-field-sm);
+                span {
+                    width: var(--h-field-sm);
+                    height: var(--h-field-sm);
+                }
+                svg {
+                    width: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
+                    height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
+                }
+            }
+            & + span + span {
+                min-height: var(--h-field-sm);
+            }
+        }
+    }
+    &.size-base {
+        height: auto;
+        input[type="checkbox"] {
+            & + span {
+                min-height: var(--h-field-base);
+                span {
+                    width: var(--h-field-base);
+                    height: var(--h-field-base);
+                }
+                svg {
+                    width: calc(var(--h-field-base) - var(--m-field-base) * 2);
+                    height: calc(var(--h-field-base) - var(--m-field-base) * 2);
+                }
+            }
+            & + span + span {
+                min-height: var(--h-field-base);
+            }
+        }
+    }
+    &.size-lg {
+        height: auto;
+        input[type="checkbox"] {
+            & + span {
+                min-height: var(--h-field-lg);
+                span {
+                    width: var(--h-field-lg);
+                    height: var(--h-field-lg);
+                }
+                svg {
+                    width: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
+                    height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
+                }
+            }
+            & + span + span {
+                min-height: var(--h-field-lg);
+            }
+        }
+    }
+}
+
+.field-wrap {
+    @apply flex flex-col;
+
+    .field-label {
+        @apply font-semibold leading-none text-gray-400;
+    }
+
+    .real-field-wrap {
+        @apply relative flex-none flex;
+    }
+
+    .info-wrap {
+        @apply h-full items-center flex;
+        &:not(.info-wrap-inline) {
+            @apply absolute top-0 right-0;
+        }
+        &.info-wrap-inline {
+            @apply ml-2;
+        }
+        .info-button {
+            @apply text-primary-200;
+        }
+        svg.chevron {
+            @apply text-gray-400;
+        }
+    }
+
+    input:not([type="checkbox"]):not([type="color"]), select {
+        @apply border-gray-600 text-gray-300 leading-none border-solid bg-gray-700 w-full appearance-none outline-none rounded-lg;
+        &:disabled {
+            @apply bg-gray-400;
+        }
+    }
+    .switch {
+        input[type="checkbox"] {
+            @apply invisible absolute;
+            & + span {
+                @apply rounded transition-colors duration-300 relative cursor-pointer flex flex-grow h-full;
+                span {
+                    @apply absolute flex items-center justify-center;
+                }
+                var {
+                    @apply duration-300;
+                    transition-property: left;
+                }
+            }
+        }
+    }
+
+    &.field-wrap-sm {
+        .field-label {
+            @apply text-xs;
+        }
+        input:not([type="checkbox"]), select, input:not([type="color"]) {
+            @apply size-sm text-xs px-1 border;
+        }
+        input[type="color"] {
+            @apply size-sm px-0;
+        }
+        .switch {
+            width: calc(var(--h-field-sm) * 2);
+            input[type="checkbox"] {
+                & + span {
+                    span:nth-of-type(1) {
+                        width: calc(var(--h-field-sm) - var(--m-field-sm));
+                        height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
+                        top: var(--m-field-sm);
+                        left: var(--m-field-sm);
+                    }
+                    span:nth-of-type(2) {
+                        width: calc(var(--h-field-sm) - var(--m-field-sm));
+                        height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
+                        top: var(--m-field-sm);
+                        left: calc(100% - var(--h-field-sm));
+                    }
+                    var {
+                        width: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
+                        height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
+                        top: var(--m-field-sm);
+                        left: var(--m-field-sm);
+                    }
+                    svg {
+                        @apply w-2 h-2;
+                    }
+                }
+                &:checked + span var {
+                    left: calc(var(--h-field-sm) + var(--m-field-sm));
+                }
+            }
+        }
+        .info-wrap {
+            @apply mr-1;
+            .info-button {
+                @apply w-4 h-4;
+            }
+        }
+    }
+
+    &.field-wrap-base {
+        .field-label {
+            @apply text-sm;
+        }
+        input:not([type="checkbox"]):not([type="color"]), select {
+            @apply size-base text-sm px-2 border-2;
+        }
+        input[type="color"] {
+            @apply size-base px-0;
+        }
+        .switch {
+            width: calc(var(--h-field-base) * 2);
+            input[type="checkbox"] {
+                & + span {
+                    span:nth-of-type(1) {
+                        width: calc(var(--h-field-base) - var(--m-field-base));
+                        height: calc(var(--h-field-base) - var(--m-field-base) * 2);
+                        top: var(--m-field-base);
+                        left: var(--m-field-base);
+                    }
+                    span:nth-of-type(2) {
+                        width: calc(var(--h-field-base) - var(--m-field-base));
+                        height: calc(var(--h-field-base) - var(--m-field-base) * 2);
+                        top: var(--m-field-base);
+                        left: calc(100% - var(--h-field-base));
+                    }
+                    var {
+                        width: calc(var(--h-field-base) - var(--m-field-base) * 2);
+                        height: calc(var(--h-field-base) - var(--m-field-base) * 2);
+                        top: var(--m-field-base);
+                        left: var(--m-field-base);
+                    }
+                    svg {
+                        @apply w-3 h-3;
+                    }
+                }
+                &:checked + span var {
+                    left: calc(var(--h-field-base) + var(--m-field-base));
+                }
+            }
+        }
+        .info-wrap {
+            @apply mr-2;
+            .info-button {
+                @apply w-5 h-5;
+            }
+        }
+    }
+
+    &.field-wrap-lg {
+        .field-label {
+            @apply text-sm;
+        }
+        input:not([type="checkbox"]):not([type="color"]), select {
+            @apply size-lg px-3 border-2;
+        }
+        input[type="color"] {
+            @apply size-lg px-0;
+        }
+        .switch {
+            width: calc(var(--h-field-lg) * 2);
+            input[type="checkbox"] {
+                & + span {
+                    span:nth-of-type(1) {
+                        width: calc(var(--h-field-lg) - var(--m-field-lg));
+                        height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
+                        top: var(--m-field-lg);
+                        left: var(--m-field-lg);
+                    }
+                    span:nth-of-type(2) {
+                        width: calc(var(--h-field-lg) - var(--m-field-lg));
+                        height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
+                        top: var(--m-field-lg);
+                        left: calc(100% - var(--h-field-lg));
+                    }
+                    var {
+                        width: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
+                        height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
+                        top: var(--m-field-lg);
+                        left: var(--m-field-lg);
+                    }
+                    svg {
+                        @apply w-5 h-5;
+                    }
+                }
+                &:checked + span var {
+                    left: calc(var(--h-field-lg) + var(--m-field-lg));
+                }
+            }
+        }
+        .info-wrap {
+            @apply mr-3;
+            .info-button {
+                @apply w-6 h-6;
+            }
+        }
+    }
+
+}
+
+.pointer-events-none {
+    pointer-events: none;
+}
+
+input:disabled, selct:disabled {
+    @apply bg-gray-400;
+}
+
+.justify-self-end {
+    justify-self: end;
+}
+
diff --git a/resources/img/sprite.svg b/resources/img/sprite.svg
index 0c4f5d22..79ca3b63 100644
--- a/resources/img/sprite.svg
+++ b/resources/img/sprite.svg
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 20 20" id="check" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></symbol><symbol viewBox="0 0 20 20" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></symbol><symbol viewBox="0 0 486.4 486.4" id="document" xmlns="http://www.w3.org/2000/svg"><path d="M320 0H115.2C87.04 0 64 23.04 64 51.2v384c0 28.16 23.04 51.2 51.2 51.2h256c28.16 0 51.2-23.04 51.2-51.2V102.4L320 0zM166.4 153.6h102.4c15.36 0 25.6 10.24 25.6 25.6s-10.24 25.6-25.6 25.6H166.4c-15.36 0-25.6-10.24-25.6-25.6s12.8-25.6 25.6-25.6zm153.6 256H166.4c-15.36 0-25.6-10.24-25.6-25.6 0-15.36 10.24-25.6 25.6-25.6H320c15.36 0 25.6 10.24 25.6 25.6 0 12.8-10.24 25.6-25.6 25.6zm0-102.4H166.4c-15.36 0-25.6-10.24-25.6-25.6 0-15.36 10.24-25.6 25.6-25.6H320c15.36 0 25.6 10.24 25.6 25.6 0 12.8-10.24 25.6-25.6 25.6z"/></symbol><symbol viewBox="0 0 512 512" id="loss" xmlns="http://www.w3.org/2000/svg"><path d="M448 281.6h-25.6c-7.68 0-12.8 5.12-12.8 12.8v115.2h51.2V294.4c0-7.68-5.12-12.8-12.8-12.8zM345.6 230.4H320c-7.68 0-12.8 5.12-12.8 12.8v166.4h51.2V243.2c0-7.68-5.12-12.8-12.8-12.8zM243.2 179.2h-25.6c-7.68 0-12.8 5.12-12.8 12.8v217.6H256V192c0-7.68-5.12-12.8-12.8-12.8zM140.8 102.4h-25.6c-7.68 0-12.8 5.12-12.8 12.8v294.4h51.2V115.2c0-7.68-5.12-12.8-12.8-12.8z"/><path d="M486.4 460.8H51.2V25.6C51.2 10.24 40.96 0 25.6 0 10.24 0 0 10.24 0 25.6v460.8C0 501.76 10.24 512 25.6 512h460.8c15.36 0 25.6-10.24 25.6-25.6 0-15.36-10.24-25.6-25.6-25.6z"/></symbol><symbol viewBox="0 0 512 512" id="money" xmlns="http://www.w3.org/2000/svg"><path d="M330.24 94.72l46.08-53.76C391.68 25.6 381.44 0 358.4 0H153.6c-23.04 0-33.28 25.6-20.48 40.96l46.08 53.76C76.8 145.92 0 289.28 0 386.56 0 506.88 115.2 512 256 512s256-5.12 256-125.44c0-97.28-76.8-240.64-181.76-291.84zM256 281.6c10.24 0 17.92 2.56 25.6 5.12 30.72 10.24 51.2 38.4 51.2 71.68 0 33.28-20.48 61.44-51.2 71.68v30.72h-51.2v-30.72c-30.72-10.24-51.2-38.4-51.2-71.68h51.2c0 15.36 10.24 25.6 25.6 25.6s25.6-10.24 25.6-25.6c0-15.36-10.24-25.6-25.6-25.6-10.24 0-17.92-2.56-25.6-5.12-30.72-10.24-51.2-38.4-51.2-71.68 0-33.28 20.48-61.44 51.2-71.68V153.6h51.2v30.72c30.72 10.24 51.2 38.4 51.2 71.68h-51.2c0-15.36-10.24-25.6-25.6-25.6s-25.6 10.24-25.6 25.6 10.24 25.6 25.6 25.6z"/></symbol><symbol viewBox="0 0 512 512" id="pencil" xmlns="http://www.w3.org/2000/svg"><path d="M51.2 353.28L0 512l158.72-51.2zM87.16 316.492L336.96 66.69l108.61 108.61L195.77 425.102zM504.32 79.36L432.64 7.68c-10.24-10.24-25.6-10.24-35.84 0l-23.04 23.04 107.52 107.52 23.04-23.04c10.24-10.24 10.24-25.6 0-35.84z"/></symbol><symbol viewBox="0 0 426.667 426.667" id="plus" xmlns="http://www.w3.org/2000/svg"><path d="M405.332 192H234.668V21.332C234.668 9.559 225.109 0 213.332 0 201.559 0 192 9.559 192 21.332V192H21.332C9.559 192 0 201.559 0 213.332c0 11.777 9.559 21.336 21.332 21.336H192v170.664c0 11.777 9.559 21.336 21.332 21.336 11.777 0 21.336-9.559 21.336-21.336V234.668h170.664c11.777 0 21.336-9.559 21.336-21.336 0-11.773-9.559-21.332-21.336-21.332zm0 0"/></symbol><symbol viewBox="0 0 512 512" id="trash" xmlns="http://www.w3.org/2000/svg"><path d="M486.4 102.4h-128V25.6c0-15.36-10.24-25.6-25.6-25.6H179.2c-15.36 0-25.6 10.24-25.6 25.6v76.8h-128C10.24 102.4 0 112.64 0 128s10.24 25.6 25.6 25.6h460.8c15.36 0 25.6-10.24 25.6-25.6s-10.24-25.6-25.6-25.6zm-179.2 0H204.8V51.2h102.4v51.2zM25.6 204.8l48.64 284.16c2.56 12.8 12.8 23.04 25.6 23.04h312.32c12.8 0 23.04-10.24 25.6-23.04L486.4 204.8H25.6zm128 256c-15.36 0-25.6-10.24-25.6-25.6l-25.6-153.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6l25.6 153.6c0 15.36-10.24 25.6-25.6 25.6zm128-25.6c0 15.36-10.24 25.6-25.6 25.6s-25.6-10.24-25.6-25.6V281.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v153.6zm102.4 0c0 15.36-10.24 25.6-25.6 25.6-15.36 0-25.6-10.24-25.6-25.6l25.6-153.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6L384 435.2z"/></symbol><symbol viewBox="0 0 512 512" id="user" xmlns="http://www.w3.org/2000/svg"><path d="M0 435.2V512h512v-76.8c0-171.52-512-171.52-512 0z"/><circle cx="256" cy="128" r="128"/></symbol></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 20 20" id="check" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></symbol><symbol viewBox="0 0 407.437 407.437" id="chevron-down" xmlns="http://www.w3.org/2000/svg"><path d="M386.258 91.567l-182.54 181.945L21.179 91.567 0 112.815 203.718 315.87l203.719-203.055z"/></symbol><symbol viewBox="0 0 20 20" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></symbol><symbol viewBox="0 0 486.4 486.4" id="document" xmlns="http://www.w3.org/2000/svg"><path d="M320 0H115.2C87.04 0 64 23.04 64 51.2v384c0 28.16 23.04 51.2 51.2 51.2h256c28.16 0 51.2-23.04 51.2-51.2V102.4L320 0zM166.4 153.6h102.4c15.36 0 25.6 10.24 25.6 25.6s-10.24 25.6-25.6 25.6H166.4c-15.36 0-25.6-10.24-25.6-25.6s12.8-25.6 25.6-25.6zm153.6 256H166.4c-15.36 0-25.6-10.24-25.6-25.6 0-15.36 10.24-25.6 25.6-25.6H320c15.36 0 25.6 10.24 25.6 25.6 0 12.8-10.24 25.6-25.6 25.6zm0-102.4H166.4c-15.36 0-25.6-10.24-25.6-25.6 0-15.36 10.24-25.6 25.6-25.6H320c15.36 0 25.6 10.24 25.6 25.6 0 12.8-10.24 25.6-25.6 25.6z"/></symbol><symbol viewBox="0 0 512 512" id="loss" xmlns="http://www.w3.org/2000/svg"><path d="M448 281.6h-25.6c-7.68 0-12.8 5.12-12.8 12.8v115.2h51.2V294.4c0-7.68-5.12-12.8-12.8-12.8zM345.6 230.4H320c-7.68 0-12.8 5.12-12.8 12.8v166.4h51.2V243.2c0-7.68-5.12-12.8-12.8-12.8zM243.2 179.2h-25.6c-7.68 0-12.8 5.12-12.8 12.8v217.6H256V192c0-7.68-5.12-12.8-12.8-12.8zM140.8 102.4h-25.6c-7.68 0-12.8 5.12-12.8 12.8v294.4h51.2V115.2c0-7.68-5.12-12.8-12.8-12.8z"/><path d="M486.4 460.8H51.2V25.6C51.2 10.24 40.96 0 25.6 0 10.24 0 0 10.24 0 25.6v460.8C0 501.76 10.24 512 25.6 512h460.8c15.36 0 25.6-10.24 25.6-25.6 0-15.36-10.24-25.6-25.6-25.6z"/></symbol><symbol viewBox="0 0 512 512" id="money" xmlns="http://www.w3.org/2000/svg"><path d="M330.24 94.72l46.08-53.76C391.68 25.6 381.44 0 358.4 0H153.6c-23.04 0-33.28 25.6-20.48 40.96l46.08 53.76C76.8 145.92 0 289.28 0 386.56 0 506.88 115.2 512 256 512s256-5.12 256-125.44c0-97.28-76.8-240.64-181.76-291.84zM256 281.6c10.24 0 17.92 2.56 25.6 5.12 30.72 10.24 51.2 38.4 51.2 71.68 0 33.28-20.48 61.44-51.2 71.68v30.72h-51.2v-30.72c-30.72-10.24-51.2-38.4-51.2-71.68h51.2c0 15.36 10.24 25.6 25.6 25.6s25.6-10.24 25.6-25.6c0-15.36-10.24-25.6-25.6-25.6-10.24 0-17.92-2.56-25.6-5.12-30.72-10.24-51.2-38.4-51.2-71.68 0-33.28 20.48-61.44 51.2-71.68V153.6h51.2v30.72c30.72 10.24 51.2 38.4 51.2 71.68h-51.2c0-15.36-10.24-25.6-25.6-25.6s-25.6 10.24-25.6 25.6 10.24 25.6 25.6 25.6z"/></symbol><symbol viewBox="0 0 512 512" id="pencil" xmlns="http://www.w3.org/2000/svg"><path d="M51.2 353.28L0 512l158.72-51.2zM87.16 316.492L336.96 66.69l108.61 108.61L195.77 425.102zM504.32 79.36L432.64 7.68c-10.24-10.24-25.6-10.24-35.84 0l-23.04 23.04 107.52 107.52 23.04-23.04c10.24-10.24 10.24-25.6 0-35.84z"/></symbol><symbol viewBox="0 0 426.667 426.667" id="plus" xmlns="http://www.w3.org/2000/svg"><path d="M405.332 192H234.668V21.332C234.668 9.559 225.109 0 213.332 0 201.559 0 192 9.559 192 21.332V192H21.332C9.559 192 0 201.559 0 213.332c0 11.777 9.559 21.336 21.332 21.336H192v170.664c0 11.777 9.559 21.336 21.332 21.336 11.777 0 21.336-9.559 21.336-21.336V234.668h170.664c11.777 0 21.336-9.559 21.336-21.336 0-11.773-9.559-21.332-21.336-21.332zm0 0"/></symbol><symbol viewBox="0 0 512 512" id="trash" xmlns="http://www.w3.org/2000/svg"><path d="M486.4 102.4h-128V25.6c0-15.36-10.24-25.6-25.6-25.6H179.2c-15.36 0-25.6 10.24-25.6 25.6v76.8h-128C10.24 102.4 0 112.64 0 128s10.24 25.6 25.6 25.6h460.8c15.36 0 25.6-10.24 25.6-25.6s-10.24-25.6-25.6-25.6zm-179.2 0H204.8V51.2h102.4v51.2zM25.6 204.8l48.64 284.16c2.56 12.8 12.8 23.04 25.6 23.04h312.32c12.8 0 23.04-10.24 25.6-23.04L486.4 204.8H25.6zm128 256c-15.36 0-25.6-10.24-25.6-25.6l-25.6-153.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6l25.6 153.6c0 15.36-10.24 25.6-25.6 25.6zm128-25.6c0 15.36-10.24 25.6-25.6 25.6s-25.6-10.24-25.6-25.6V281.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v153.6zm102.4 0c0 15.36-10.24 25.6-25.6 25.6-15.36 0-25.6-10.24-25.6-25.6l25.6-153.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6L384 435.2z"/></symbol><symbol viewBox="0 0 512 512" id="user" xmlns="http://www.w3.org/2000/svg"><path d="M0 435.2V512h512v-76.8c0-171.52-512-171.52-512 0z"/><circle cx="256" cy="128" r="128"/></symbol></svg>
\ No newline at end of file
diff --git a/resources/img/svg/chevron-down.svg b/resources/img/svg/chevron-down.svg
new file mode 100644
index 00000000..60dc1ad1
--- /dev/null
+++ b/resources/img/svg/chevron-down.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 407.437 407.437" style="enable-background:new 0 0 407.437 407.437;" xml:space="preserve">
+<polygon points="386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 "/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/resources/js/components/FSelect.vue b/resources/js/components/FSelect.vue
index e773cf21..b313692c 100644
--- a/resources/js/components/FSelect.vue
+++ b/resources/js/components/FSelect.vue
@@ -1,36 +1,26 @@
 <template>
-    <label class="flex flex-col relative" :for="id" :class="{['h-field-'+size]: inset === true}">
-        <div class="relative h-full flex flex-col">
-            <span v-if="label && !inset" class="leading-none font-semibold relative z-10 text-gray-400" :class="{
-                'text-xs': size == 'sm',
-                'text-sm': size === null
-            }">{{ label }}<span v-show="required" class="text-red-300">&nbsp;*</span></span>
-            <span v-if="label && inset" class="absolute z-10 top-0 left-0 -mt-2 px-1 ml-3 inset-bg font-semibold text-gray-700" :class="{
-                'text-xs': size == 'sm',
-                'text-sm': size === null
-            }" v-text="label"></span>
-            <div class="relative h-full mt-1" :class="{['h-field-'+size]: inset === false}">
-                <select :value="value" @change="trigger"
-                    class="border-gray-600 border-solid bg-gray-700 w-full appearance-none outline-none"
-                    :class="{
-                        'rounded-lg text-sm border-2 p-2 text-gray-300': size === null,
-                        'rounded-lg py-2 px-2 text-xs border-2 text-gray-800': size == 'sm'
-                    }"
-                >
-                    <option v-if="placeholder" v-html="placeholder" :value="null"></option>
+    <label class="field-wrap" :for="id" :class="`field-wrap-${size}`">
+        <span v-if="label" class="field-label">
+            {{ label }}
+            <span v-show="required" class="text-red-800">&nbsp;*</span>
+        </span>
+        <div class="real-field-wrap" :class="`size-${size}`">
+            <select :disabled="disabled" :value="value" @change="trigger">
+                <option v-if="placeholder" v-html="placeholder" :value="null"></option>
 
-                    <option v-for="(option, key) in parsedOptions" :key="key"
-                        v-html="option" :value="key"
-                    ></option>
-                </select>
-
-                <div class="absolute pointer-events-none top-0 right-0 -mx-1 flex items-center h-full mr-4 cursor-pointer">
-                    <div v-if="hint" v-tooltip="hint" class="px-1">
-                        <sprite src="info-button" class="w-5 h-5 text-indigo-200"></sprite>
-                    </div>
-                    <div class="px-1 relative">
-                        <sprite class="w-3 h-3 fill-current" src="chevron-down"></sprite>
-                    </div>
+                <option v-for="option in parsedOptions" :key="option.id"
+                    v-html="option.name" :value="option.id"
+                ></option>
+            </select>
+            <div class="info-wrap pointer-events-none">
+                <div v-if="hint" v-tooltip="hint">
+                    <sprite src="info-button" class="info-button"></sprite>
+                </div>
+                <div class="px-1 relative" v-if="size != 'xs'">
+                    <sprite class="chevron w-3 h-3 fill-current" src="chevron-down"></sprite>
+                </div>
+                <div class="px-1 relative" v-if="size == 'xs'">
+                    <sprite class="chevron w-2 h-2 fill-current" src="chevron-down"></sprite>
                 </div>
             </div>
         </div>
@@ -38,15 +28,23 @@
 </template>
 
 <script>
+import mapValues from 'lodash/mapValues';
+import keyBy from 'lodash/keyBy';
+import map from 'lodash/map';
+
 export default {
     props: {
+        disabled: {
+            type: Boolean,
+            default: function() { return false; }
+        },
         id: {},
         inset: {
             type: Boolean,
             default: false
         },
         size: {
-            default: function() { return null; }
+            default: function() { return 'base'; }
         },
         emptyLabel: {
             default: false,
@@ -78,7 +76,11 @@ export default {
     },
     computed: {
         parsedOptions() {
-            return this.options;
+            return Array.isArray(this.options)
+                ? this.options
+                : map(this.options, (value, key) => {
+                    return {'name': value, id: key};
+                });
         }
     },
     methods: {
diff --git a/resources/js/components/FText.vue b/resources/js/components/FText.vue
index b8b58839..c0ac656c 100644
--- a/resources/js/components/FText.vue
+++ b/resources/js/components/FText.vue
@@ -1,27 +1,14 @@
 <template>
-    <label class="flex flex-col relative" :for="id" :class="{['h-field-'+size]: inset === true}">
-        <div class="relative h-full flex flex-col">
-            <span v-if="label && !inset" class="font-semibold leading-none relative z-10 text-gray-400" :class="{
-                'text-xs': size == 'sm',
-                'text-sm': size === null
-            }">{{ label }}<span v-show="required" class="text-red-300">&nbsp;*</span></span>
-            <span v-if="label && inset" class="absolute z-10 top-0 left-0 -mt-2 px-1 ml-3 inset-bg font-semibold text-gray-700" :class="{
-                'text-xs': size == 'sm',
-                'text-sm': size === null
-            }" v-text="label"></span>
-            <div class="relative h-full mt-1" :class="{['h-field-'+size]: inset === false}">
-                <input :type="type" :name="name" :value="transformedValue" @input="onInput" @change="onChange" :disabled="disabled" :placeholder="placeholder"
-                    @focus="onFocus" @blur="onBlur"
-                    class="border-gray-600 border-solid bg-gray-700 w-full appearance-none outline-none h-full"
-                    :class="{
-                        'rounded-lg text-sm border-2 p-2 text-gray-300': size === null,
-                        'rounded-lg py-2 px-2 text-xs border-2 text-gray-800': size == 'sm'
-                    }"
-                />
-                <div class="absolute top-0 right-0 -mx-1 flex items-center h-full cursor-pointer">
-                    <div v-if="hint" class="absolute top-0 right-0 h-full items-center mr-2 flex w-6" v-tooltip="hint">
-                        <sprite src="info-button" class="w-5 h-5 text-indigo-200"></sprite>
-                    </div>
+    <label class="field-wrap" :for="id" :class="`field-wrap-${size}`">
+        <span v-if="label" class="field-label">
+            {{ label }}
+            <span v-show="required" class="text-red-800">&nbsp;*</span>
+        </span>
+        <div class="real-field-wrap" :class="`size-${size}`">
+            <input :name="name" :type="type" :value="transformedValue" @input="onInput" @change="onChange" :disabled="disabled" :placeholder="placeholder" @focus="onFocus" @blur="onBlur">
+            <div v-if="hint" class="info-wrap">
+                <div v-tooltip="hint">
+                    <sprite src="info-button" class="info-button"></sprite>
                 </div>
             </div>
         </div>
@@ -54,6 +41,17 @@ var numb = {
             return a / 100;
         }
     }),
+    naturalDetailRaw: wNumb({
+        mark: '',
+        thousand: '',
+        decimals: 0,
+        decoder(a) {
+            return a * 10000;
+        },
+        encoder(a) {
+            return a / 10000;
+        }
+    }),
     area: wNumb({
         mark: ',',
         thousand: '.',
@@ -65,6 +63,17 @@ var numb = {
             return a / 100;
         }
     }),
+    areaDetail: wNumb({
+        mark: ',',
+        thousand: '.',
+        decimals: 4,
+        decoder(a) {
+            return a * 10000;
+        },
+        encoder(a) {
+            return a / 10000;
+        }
+    }),
     twoDecimalRaw: wNumb({
         mark: ',',
         thousand: '',
@@ -75,6 +84,17 @@ var numb = {
         encoder(a) {
             return a / 100;
         }
+    }),
+    fourDecimalRaw: wNumb({
+        mark: ',',
+        thousand: '',
+        decimals: 4,
+        decoder(a) {
+            return a * 10000;
+        },
+        encoder(a) {
+            return a / 10000;
+        }
     })
 };
 
@@ -136,6 +156,25 @@ var transformers = {
                 return numb.twoDecimalRaw.from(v);
             }
         }
+    },
+    currencyDetail: {
+        display: {
+            to(v) { return v === null ? '' : numb.areaDetail.to(v); },
+            from(v) { return v === '' ? null : numb.areaDetail.from(v); }
+        },
+        edit: {
+            to(v) {
+                if (v === null) { return ''; }
+                if (Math.round(v / 10000) * 10000 === v) { return numb.naturalDetailRaw.to(v); }
+                return numb.fourDecimalRaw.to(v);
+            },
+            from(v) {
+                if (v === '') { return null; }
+                if (v.indexOf(',') === -1) { return numb.naturalDetailRaw.from(v); }
+
+                return numb.fourDecimalRaw.from(v);
+            }
+        }
     }
 };
 
@@ -146,11 +185,6 @@ export default {
         };
     },
     props: {
-        name: {
-            default: function() {
-                return '';
-            }
-        },
         placeholder: {
             default: function() {
                 return '';
@@ -170,7 +204,9 @@ export default {
             }
         },
         size: {
-            default: null
+            default: function() {
+                return 'base';
+            }
         },
         id: {
             required: true
@@ -194,7 +230,8 @@ export default {
         disabled: {
             default: false,
             type: Boolean
-        }
+        },
+        name: {},
     },
     methods: {
         onFocus() {