diff --git a/app/javascript/flavours/glitch/features/compose/components/search.jsx b/app/javascript/flavours/glitch/features/compose/components/search.jsx
index 983688613..eb8f26a73 100644
--- a/app/javascript/flavours/glitch/features/compose/components/search.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/search.jsx
@@ -346,7 +346,8 @@ class Search extends PureComponent {
     const hasValue = value.length > 0 || submitted;
 
     return (
-      <div className={classNames("search", { active: expanded })}>
+      <div className={classNames('search', { active: expanded })}>
+        <Icon id='magnifying-glass'  className='search__icon' />
         <input
           ref={this.setRef}
           className='search__input'
@@ -359,11 +360,9 @@ class Search extends PureComponent {
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
         />
-
-        <div role='button' tabIndex={0} className='search__icon' onClick={this.handleClear}>
-          <Icon id='magnifying-glass' className={hasValue ? '' : 'active'} />
-          <Icon id='x-circle' className={hasValue ? 'active' : ''} />
-        </div>
+        <button type="button" className={hasValue ? 'search__button active' : 'search__button'} onClick={this.handleClear}>
+          <Icon id='x' />
+        </button>
         <div className='search__popout'>
           {options.length === 0 && (
             <>
diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss
index 6643cd1aa..9579da8c0 100644
--- a/app/javascript/flavours/glitch/styles/_mixins.scss
+++ b/app/javascript/flavours/glitch/styles/_mixins.scss
@@ -52,17 +52,14 @@
 }
 
 @mixin search-input() {
-  outline: 0;
-  box-sizing: border-box;
   width: 100%;
-  border: 0;
-  box-shadow: none;
+  border: 1px solid var(--color-accent-lines);
+  border-radius: var(--drawer-border-radius);
+  box-sizing: border-box;
+  color: var(--color-accent-fg);
   font-family: inherit;
-  background: $ui-base-color;
-  color: $darker-text-color;
-  border-radius: 4px;
-  font-size: 14px;
-  margin: 0;
+  font-size: inherit;
+  background: var(--color-accent-bg);
 }
 
 @mixin search-popout() {
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index c64f0758c..c08820e92 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -361,8 +361,9 @@
   display: flex;
   gap: 8px;
   padding: 6px;
+  border: 1px solid var(--color-accent-lines);
   cursor: default;
-  background: darken($ui-base-color, 4%);
+  background: var(--color-accent-bg);
 
   a,
   button {
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index bf879d211..3e11b1620 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -343,6 +343,8 @@ $ui-header-height: 55px;
 
 .column-header {
   display: flex;
+  border: 1px solid var(--color-lines);
+  border-bottom: 0;
   border-radius: var(--drawer-border-radius) var(--drawer-border-radius) 0 0;
   color: $darker-text-color;
   font-size: 16px;
@@ -371,13 +373,13 @@ $ui-header-height: 55px;
   gap: 15px;
   align-items: center;
   flex-grow: 1;
-  padding: 13px 0 13px 15px;
+  padding: 12px 0 13px 15px;
 }
 
 .column-header__buttons {
   display: flex;
   gap: 5px;
-  padding: 5px;
+  padding: 4px 5px 5px;
 }
 
 .column-header__button,
@@ -418,9 +420,10 @@ $ui-header-height: 55px;
   }
 
   > .scrollable {
+    border: 1px solid var(--color-lines);
+    border-top: 0;
+    border-radius: 0 0 var(--drawer-border-radius) var(--drawer-border-radius);
     background: $ui-base-color;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
   }
 }
 
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index c1f6d67d5..bcdbb1b8c 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -53,7 +53,8 @@
   display: flex;
   gap: 10px;
   margin-bottom: 10px;
-  padding: 5px;
+  padding: 4px;
+  border: 1px solid var(--color-lines);
   border-radius: var(--drawer-border-radius);
   color: $darker-text-color;
   font-size: 16px;
@@ -209,20 +210,21 @@
 }
 
 .drawer__pager {
-  box-sizing: border-box;
-  padding: 0;
-  flex-grow: 1;
   position: relative;
-  overflow: hidden;
   display: flex;
-  border-radius: 4px;
+  flex-grow: 1;
+  padding: 0;
+  border: 1px solid var(--color-lines);
+  border-radius: var(--drawer-border-radius);
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
 .drawer__inner {
   position: absolute;
   top: 0;
   inset-inline-start: 0;
-  background: lighten($ui-base-color, 13%);
+  background: lighten($ui-base-color, 4%);
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -238,8 +240,8 @@
 }
 
 .drawer__inner__mastodon {
-  background: lighten($ui-base-color, 13%)
-    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>')
+  background: lighten($ui-base-color, 4%)
+    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z"/></svg>')
     no-repeat bottom / 100% auto;
   flex: 1;
   min-height: 47px;
@@ -293,7 +295,7 @@
           bottom /
           100%
           auto,
-        lighten($ui-base-color, 13%);
+        lighten($ui-base-color, 4%);
     } @else {
       background:
         url('~flavours/glitch/images/wave-drawer-glitched.png')
@@ -301,7 +303,7 @@
           bottom /
           100%
           auto,
-        lighten($ui-base-color, 13%);
+        lighten($ui-base-color, 4%);
     }
 
     & > .mastodon {
diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss
index aa54fc26d..bc4eaba9d 100644
--- a/app/javascript/flavours/glitch/styles/components/search.scss
+++ b/app/javascript/flavours/glitch/styles/components/search.scss
@@ -1,184 +1,154 @@
 .search {
-  margin-bottom: 10px;
   position: relative;
+  margin-bottom: 10px;
+}
 
-  &__popout {
-    box-sizing: border-box;
-    display: none;
-    position: absolute;
-    inset-inline-start: 0;
-    margin-top: -2px;
-    width: 100%;
-    background: $ui-base-color;
-    border-radius: 0 0 4px 4px;
-    box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
-    z-index: 99;
-    font-size: 13px;
-    padding: 15px 5px;
-
-    h4 {
-      text-transform: uppercase;
-      color: $dark-text-color;
-      font-weight: 500;
-      padding: 0 10px;
-      margin-bottom: 10px;
-    }
-
-    &__menu {
-      margin-bottom: 20px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      &__message {
-        color: $dark-text-color;
-        padding: 0 10px;
-      }
-
-      &__item {
-        display: block;
-        box-sizing: border-box;
-        width: 100%;
-        border: 0;
-        font: inherit;
-        background: transparent;
-        color: $darker-text-color;
-        padding: 10px;
-        cursor: pointer;
-        border-radius: 4px;
-        text-align: start;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-
-        &--flex {
-          display: flex;
-          justify-content: space-between;
-        }
-
-        .icon-button {
-          transition: none;
-        }
-
-        &:hover,
-        &:focus,
-        &:active,
-        &.selected {
-          background: $ui-highlight-color;
-          color: $primary-text-color;
-
-          .icon-button {
-            color: $primary-text-color;
-          }
-        }
-
-        mark {
-          background: transparent;
-          font-weight: 700;
-          color: $primary-text-color;
-        }
-
-        span {
-          overflow: inherit;
-          text-overflow: inherit;
-        }
-      }
-    }
-  }
-
-  &.active {
-    .search__popout {
-      display: block;
-    }
-  }
+.search__icon,
+.search__icon.gts-icon {
+  position: absolute;
+  top: 13px;
+  left: 13px;
+  --size: 20px;
 }
 
 .search__input {
   @include search-input;
 
   display: block;
-  padding: 15px;
-  padding-inline-end: 30px;
-  line-height: 18px;
+  padding: 12px 40px;
   font-size: 16px;
+  line-height: 20px;
 
   &::placeholder {
     color: lighten($darker-text-color, 4%);
-  }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
+    font-weight: 500;
   }
 
   &:focus {
-    background: lighten($ui-base-color, 4%);
+    background: darken($ui-base-color, 4%);
   }
 }
 
-.search__icon {
-  &::-moz-focus-inner {
-    border: 0;
+.search__button {
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  display: none;
+  padding: 6px;
+  border: 0;
+  border-radius: var(--button-border-radius);
+  color: inherit;
+  font: inherit;
+  background: transparent;
+  transition: all 0.3s;
+
+  .gts-icon {
+    --size: 20px;
+    display: block;
   }
 
-  &::-moz-focus-inner,
-  &:focus {
-    outline: 0 !important;
+  &:focus-visible,
+  &:hover {
+    background: darken($ui-base-color, 10%);
+  }
+}
+
+.search__button.active {
+  display: flex;
+}
+
+.search__popout {
+  position: absolute;
+  display: none;
+  margin-top: 10px;
+  padding: 15px 5px;
+  width: 100%;
+  border: 1px solid var(--color-lines);
+  border-radius: var(--drawer-border-radius);
+  box-sizing: border-box;
+  background: $ui-base-color;
+
+  inset-inline-start: 0;
+  box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
+  z-index: 99;
+  // font-size: 13px;
+  // padding: 15px 5px;
+
+  h4 {
+    text-transform: uppercase;
+    color: $dark-text-color;
+    font-weight: 500;
+    padding: 0 10px;
+    margin-bottom: 10px;
   }
 
-  .fa {
-    position: absolute;
-    top: 16px;
-    inset-inline-end: 10px;
-    display: inline-block;
-    opacity: 0;
-    transition: all 100ms linear;
-    transition-property: color, transform, opacity;
-    font-size: 18px;
-    width: 18px;
-    height: 18px;
-    color: $secondary-text-color;
-    cursor: default;
-    pointer-events: none;
+  &__menu {
+    margin-bottom: 20px;
 
-    &.active {
-      pointer-events: auto;
-      opacity: 0.3;
-    }
-  }
-
-  .fa-search {
-    transform: rotate(0deg);
-
-    &.active {
-      pointer-events: auto;
-      opacity: 0.3;
-    }
-  }
-
-  .fa-times-circle {
-    top: 17px;
-    transform: rotate(0deg);
-    color: $action-button-color;
-    cursor: pointer;
-
-    &.active {
-      transform: rotate(90deg);
-      opacity: 1;
+    &:last-child {
+      margin-bottom: 0;
     }
 
-    &:hover {
-      color: lighten($action-button-color, 7%);
+    &__message {
+      color: $dark-text-color;
+      padding: 0 10px;
+    }
+
+    &__item {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      border: 0;
+      font: inherit;
+      background: transparent;
+      color: $darker-text-color;
+      padding: 10px;
+      cursor: pointer;
+      border-radius: 4px;
+      text-align: start;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+
+      &--flex {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .icon-button {
+        transition: none;
+      }
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.selected {
+        background: $ui-highlight-color;
+        color: $primary-text-color;
+
+        .icon-button {
+          color: $primary-text-color;
+        }
+      }
+
+      mark {
+        background: transparent;
+        font-weight: 700;
+        color: $primary-text-color;
+      }
+
+      span {
+        overflow: inherit;
+        text-overflow: inherit;
+      }
     }
   }
 }
 
+.search.active .search__popout {
+  display: block;
+}
+
 .search-results__header {
   color: $dark-text-color;
   background: lighten($ui-base-color, 2%);
diff --git a/app/javascript/flavours/glitch/styles/gts.scss b/app/javascript/flavours/glitch/styles/gts.scss
index 8f2d504e7..5623947aa 100644
--- a/app/javascript/flavours/glitch/styles/gts.scss
+++ b/app/javascript/flavours/glitch/styles/gts.scss
@@ -4,6 +4,14 @@
 :root {
   --drawer-border-radius: 8px;
   --button-border-radius: 6px;
+
+  --color-bg: #261f3c;
+  --color-fg: #d6d2e0;
+  --color-lines: #3d4455;
+
+  --color-accent-bg: #1f232b;
+  --color-accent-fg: #ffffff;
+  --color-accent-lines: rgba(172, 172, 249, 0.3);
 }
 
 /* Diff */