diff --git a/src/app/converter-selector/converter-selector.component.scss b/src/app/converter-selector/converter-selector.component.scss
index a44a0ad..ca856d6 100644
--- a/src/app/converter-selector/converter-selector.component.scss
+++ b/src/app/converter-selector/converter-selector.component.scss
@@ -20,22 +20,22 @@
 }
 
 select {
-  background-color: #eee;
+  background-color: #222;
   border: none;
-  color: #111;
+  color: #eee;
   font-family: "ABeeZee", sans-serif;
   margin: 0;
   padding: 0.5em;
   transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
 
   &:focus, &:hover {
-    background-color: #fff;
-    color: #000;
+    background-color: #333;
+    color: #fff;
   }
 }
 
 .arrow_box {
-  border: 1px solid transparent;
+  border: 1px solid #888;
   position: relative;
   transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
 
@@ -53,18 +53,29 @@ select {
 
   &:after {
     border-color: rgba(255, 255, 255, 0);
-    border-top-color: #eee;
+    border-top-color: #222;
     border-width: 1em;
     margin-left: -1em;
   }
 
   &:before {
+    border-top-color: #888;
     border-width: calc(1em + 1px);
     margin-left: calc(-1em - 1px);
   }
 
-  &:has(>select:focus, >select:hover):after {
-    border-top-color: #fff;
+  &:has(>select:focus, >select:hover) {
+    &:after {
+      border-top-color: #333;
+    }
+
+    &:before {
+      border-top-color: #bbb;
+    }
+  }
+
+  &:hover {
+    border-color: #bbb;
   }
 
   .select_wrapper > & {
diff --git a/src/app/text-input-field/text-input-field.component.scss b/src/app/text-input-field/text-input-field.component.scss
index 56fbf07..a026e44 100644
--- a/src/app/text-input-field/text-input-field.component.scss
+++ b/src/app/text-input-field/text-input-field.component.scss
@@ -1,43 +1,65 @@
 :host {
-  border: none;
+  border: 1px solid #888;
   display: block;
   margin: 0 0 1em 0;
   padding: 0 1em 0 0;
   position: relative;
+  transition: border ease-in-out 200ms;
 
-  &:after {
-    border: 1em solid transparent;
-    border-top-color: #eee;
+  &:after, &:before {
+    border: solid transparent;
     content: " ";
     height: 0;
     left: 50%;
-    margin-left: -1em;
     pointer-events: none;
     position: absolute;
     top: 100%;
-    transition: border-top-color ease-in-out 200ms;
+    transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
     width: 0;
   }
 
-  &:has(>textarea:focus, >textarea:hover):after {
-    border-top-color: #fff;
+  &:after {
+    border-top-color: #222;
+    border-width: 1em;
+    margin-left: -1em;
+  }
+
+  &:before {
+    border-top-color: #888;
+    border-width: calc(1em + 1px);
+    margin-left: calc(-1em - 1px);
+  }
+
+  &:has(>textarea:focus, >textarea:hover) {
+    &:after {
+      border-top-color: #333;
+    }
+
+    &:before {
+      border-top-color: #bbb;
+    }
+  }
+
+  &:hover {
+    border-color: #bbb;
   }
 }
 
 textarea {
-  background-color: #eee;
+  background-color: #222;
   border: none;
-  color: #111;
+  color: #ddd;
   font-family: "Liberation Mono", monospace;
   height: 10em;
   margin: 0;
   padding: 0.5em;
   resize: vertical;
-  transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
+  transition: background-color ease-in-out 200ms, border-color ease-in-out 200ms, color ease-in-out 200ms;
   width: 100%;
 
   &:focus, &:hover {
-    background-color: #fff;
-    color: #000;
+    background-color: #333;
+    border-color: #bbb;
+    color: #fff;
   }
 }