diff --git a/assets/styles/base.less b/assets/styles/base.less
index 828a901b09..1629d3e164 100644
--- a/assets/styles/base.less
+++ b/assets/styles/base.less
@@ -262,7 +262,6 @@ button {
   &.is-primary {
     &:extend(.background-flair-gradient);
     &:extend(.glow-flair);
-    &:extend(.font-primary);
 
     &[disabled] {
       &:extend(.background-flair-gradient);
@@ -715,34 +714,10 @@ button {
   }
 }
 
-//Inputs
-.input {
-  &:extend(.input-bg);
-  &:extend(.font-primary);
-  box-shadow: none !important;
-  &:active,
-  &:focus {
-    background: @semitransparent-lightest-gradient !important;
-  }
-}
-
 ::placeholder {
   color: @text-muted !important;
 }
 
-.is-primary.input,
-.is-dark.input {
-  &:extend(.input-bg);
-  &:extend(.font-primary);
-  border-color: transparent;
-
-  &:active,
-  &:focus {
-    border: none;
-    outline: none;
-  }
-}
-
 //Search Input
 .search-query-highlight {
   &:extend(.background-flair);
diff --git a/components/interactables/Input/Input.html b/components/interactables/Input/Input.html
index e136c7b600..0aa59a4438 100644
--- a/components/interactables/Input/Input.html
+++ b/components/interactables/Input/Input.html
@@ -1,36 +1,49 @@
-<div>
-  <TypographyLabel
-    class="input-label"
-    v-if="labelText.length"
-    :text="labelText"
-  />
-  <div
-    :class="{'search-box': true, 'right-icon': deleteIcon && internalText.length}"
-  >
-    <input
-      v-model="internalText"
-      class="input"
-      :class="{invalid : invalid, [`is-${size} is-${type}`]: true}"
-      :readonly="readonly"
-      :disabled="disabled"
-      :type="inputKind"
-      :placeholder="placeholder"
-      @input="update"
-      ref="input"
-      :maxLength="maxLength"
-      :minLength="minLength"
-      @keydown.space="preventLeadingSpace"
-      @paste="preventEmptyPaste"
-      @keydown.enter="submitEnter"
-      @focus="$emit('focus', $event)"
-      @blur="$emit('blur', $event)"
-    />
+<div class="input-group">
+  <TypographyLabel v-if="label" class="input-label" :text="label" />
+  <div class="input-outer">
+    <div class="input-inner">
+      <input
+        ref="input"
+        class="input font-color-light"
+        :class="[
+          `font-size-${size} is-${color}`,
+          {
+            'show-clear-button': showClear,
+            'is-danger': error || invalid
+          }
+        ]"
+        :value="text"
+        :type="type"
+        :readonly="readonly"
+        :placeholder="placeholder"
+        :minLength="minLength"
+        :maxLength="maxLength"
+        :disabled="disabled"
+        @keydown.enter="handleSubmit"
+        @input="handleInput"
+        data-cy="input-group"
+      />
+      <button
+        v-if="showClear && !isEmpty"
+        class="clear-button"
+        @click="clearInput"
+      >
+        <delete-icon size="1x" />
+      </button>
+    </div>
     <button
-      v-if="deleteIcon && internalText.length"
-      class="search-clear"
-      @click="clearSearch"
+      v-if="$slots.default"
+      class="button font-color-light"
+      :class="[`font-size-${size} is-${color}`, {disabled: disabled}]"
+      @click="handleSubmit"
+      data-cy="submit-input"
     >
-      <delete-icon size="1x" />
+      <UiLoadersSpinner v-if="loading" spinning />
+      <slot v-else></slot>
     </button>
   </div>
+  <span v-if="showLimit" class="char-limit">
+    {{ text.length }}/{{ maxLength }}
+  </span>
+  <TypographyError v-if="error" class="error" :text="error" small />
 </div>
diff --git a/components/interactables/Input/Input.less b/components/interactables/Input/Input.less
index 1be10150cf..a85c6d8d6f 100644
--- a/components/interactables/Input/Input.less
+++ b/components/interactables/Input/Input.less
@@ -1,51 +1,74 @@
-.input-label {
-  text-align: left;
-}
-.is-full-width {
-  &:extend(.full-width);
-}
-.search-box {
-  &.right-icon {
-    input {
-      padding-right: 34px;
+.input-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .input-outer {
+    display: flex;
+    align-items: stretch;
+    flex-grow: 1;
+
+    .input-inner {
+      position: relative;
+      display: flex;
+      flex-grow: 1;
+
+      .input {
+        flex-grow: 1;
+        padding: 0.5rem;
+        box-shadow: none;
+        background: @input-gradient;
+        background-size: calc(100% + 2px) calc(100% + 2px);
+        background-position: center;
+        &:extend(.round-corners);
+
+        &.show-clear-button {
+          padding-right: 2rem;
+        }
+
+        &:focus {
+          background-image: @semitransparent-lightest-gradient;
+        }
+      }
+
+      .clear-button {
+        position: absolute;
+        inset: 0 0 0 auto;
+        font-size: @tiny-icon-size;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.5rem;
+        color: @text-muted;
+      }
+
+      &:not(:last-child) .input {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-right: 0;
+      }
     }
-  }
-  .search-clear {
-    &:extend(.font-primary);
-    &:focus {
-      background: @background;
+
+    .button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
     }
-    position: absolute;
-    font-size: @tiny-icon-size;
-    top: 0;
-    right: 0;
-    width: 34px;
-    height: @full;
-    background: transparent;
-    border-color: transparent;
-    cursor: pointer;
-    &:extend(.first-layer);
   }
-  position: relative;
 
-  .input {
+  .char-limit {
+    float: right;
+    margin-right: 0.5rem;
     font-size: @mini-text-size;
-    font-family: @secondary-font;
-    &.is-normal {
-      height: 2.3rem;
-    }
-    &:disabled {
-      &::placeholder {
-        /* without !important it does not work */
-        color: grey !important;
-      }
-    }
-    &.invalid {
-      border: 1px solid @red;
-    }
+    &:extend(.font-muted);
+    margin-left: auto;
+  }
 
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+  .error {
+    margin-top: 0.5rem;
+  }
+
+  // TODO: remove after removing bulma
+  .is-primary:not(.is-danger) {
+    border-color: transparent;
   }
 }
diff --git a/components/interactables/Input/Input.vue b/components/interactables/Input/Input.vue
index 1d92f429ec..98e50cd78b 100644
--- a/components/interactables/Input/Input.vue
+++ b/components/interactables/Input/Input.vue
@@ -1,10 +1,10 @@
 <template src="./Input.html"></template>
+
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-
 import { DeleteIcon } from 'satellite-lucide-icons'
-
-import { InputTypes, InputStyle, InputSize } from './types.d'
+import { InputType, InputColor } from './types'
+import { Size } from '~/types/typography'
 
 export default Vue.extend({
   components: {
@@ -12,112 +12,77 @@ export default Vue.extend({
   },
   model: {
     prop: 'text',
-    event: 'update',
+    event: 'change',
   },
   props: {
-    /**
-     * If enabled, the button will take up 100% of the parent container
-     */
-    fullWidth: Boolean,
-    /**
-     * If enabled, delete text icon will appear
-     */
-    deleteIcon: Boolean,
-    /**
-     * Default text can be included here
-     */
     text: {
-      type: [String, Number],
+      type: String,
       default: '',
     },
-    /**
-     * Used for display only inputs
-     */
     readonly: {
       type: Boolean,
       default: false,
     },
-    /**
-     * Used for set disabled status
-     */
-    disabled: {
+    autofocus: {
       type: Boolean,
-      required: false,
       default: false,
     },
-    /**
-     * Abstraction of native "type"
-     */
-    inputKind: {
-      type: String as PropType<InputTypes>,
+    type: {
+      type: String as PropType<InputType>,
       default: 'text',
     },
-    /**
-     * Placeholder text for blank inputs
-     */
+    size: {
+      type: String as PropType<Size>,
+      default: 'md',
+    },
+    color: {
+      type: String as PropType<InputColor>,
+      default: 'primary',
+    },
     placeholder: {
       type: String,
-      default: 'Placeholder...',
+      default: '',
     },
-    /**
-     * Size of the input, reference InputSize types or Bulma.io
-     */
-    size: {
-      type: String as PropType<InputSize>,
-      default: 'normal',
+    disabled: {
+      type: Boolean,
+      default: false,
     },
-    /**
-     * Style of the input, reference InputStyle types or Bulma.io
-     */
-    type: {
-      type: String as PropType<InputStyle>,
-      default: 'normal',
+    loading: {
+      type: Boolean,
+      default: false,
     },
-    /**
-     * Add a label to the top of the input
-     */
-    labelText: {
+    label: {
       type: String,
-      required: false,
       default: '',
     },
-    /**
-     * Autofocus when page loads
-     */
-    autofocus: {
+    showLimit: {
       type: Boolean,
-      required: false,
       default: false,
     },
-    maxLength: {
-      type: Number,
-      default: 256,
-    },
     minLength: {
       type: Number,
       default: 0,
     },
-    invalid: {
+    maxLength: {
+      type: Number,
+      default: 256,
+    },
+    showClear: {
       type: Boolean,
       default: false,
     },
-    // if there is a :watchEnter true on the parent component, it will trigger the parent method on @watchEnter
-    watchEnter: {
+    invalid: {
       type: Boolean,
-      required: false,
       default: false,
     },
+    error: {
+      type: String,
+      default: '',
+    },
   },
-  data() {
-    return {
-      internalText: this.text ? this.text : '',
-    }
-  },
-  watch: {
-    internalText(val) {
-      if (!val.trim().length) {
-        this.internalText = ''
-      }
+  computed: {
+    isEmpty() {
+      return !this.text.length
     },
   },
   mounted() {
@@ -126,53 +91,24 @@ export default Vue.extend({
     }
   },
   methods: {
-    /**
-     * @method submitEnter
-     * @description emits @watchEnter in the parent if :watchEnter is true,
-     *   useful for allowing enter input on some inputs
-     */
-    submitEnter() {
-      if (this.watchEnter) {
-        this.$emit('watchEnter', this.watchEnter)
+    handleSubmit(event: InputEvent) {
+      if (this.disabled || this.loading || this.error || this.invalid) {
+        return
       }
+      this.$emit('submit', event)
     },
-    /**
-     * @method update
-     * @description Emits the update event with updated internalText string
-     */
-    update() {
-      this.$emit('update', this.internalText)
-    },
-    /**
-     * @method clearSearch
-     * @description Sets internalText in data to an empty string
-     */
-    clearSearch() {
-      this.internalText = ''
-      this.update()
-    },
-    /**
-     * @method preventLeadingSpace
-     * @description Prevent space if empty input
-     */
-    preventLeadingSpace(event: KeyboardEvent) {
-      if (!this.internalText.toString().length) {
-        event.preventDefault()
+    handleInput(event: InputEvent) {
+      if (!event.target) {
+        return
       }
+      const target = event.target as HTMLInputElement
+      this.$emit('change', target.value)
     },
-    /**
-     * @method preventEmptyPaste
-     * @description Prevent space if empty input
-     */
-    preventEmptyPaste(event: ClipboardEvent) {
-      if (
-        event.clipboardData &&
-        !event.clipboardData.getData('Text').trim().length
-      ) {
-        event.preventDefault()
-      }
+    clearInput() {
+      this.$emit('change', '')
     },
   },
 })
 </script>
+
 <style scoped lang="less" src="./Input.less"></style>
diff --git a/components/interactables/Input/README.md b/components/interactables/Input/README.md
index da365c50de..60f36847c3 100644
--- a/components/interactables/Input/README.md
+++ b/components/interactables/Input/README.md
@@ -6,11 +6,15 @@ Generic input component.
 
 ```vue
 <InteractablesInput
-  v-model="something"
-  delete-icon="true"
-  size="small"
-  input-kind="number"
-  type="dark"
+  v-model="input2Text"
+  size="xs"
+  type="number"
+  :loading="inputGroupLoading"
+  @submit="
+    () => {
+      inputGroupLoading = true
+    }
+  "
 />
 ```
 
@@ -18,10 +22,18 @@ Generic input component.
 
 **text** Input display text
 
-**delete-icon** Show delete text icon
-
 **size** Input display size, honors bulma.io sizes
 
 **input-kind** Abstracts generic input type attribute
 
+**disabled** Disables the input button
+
+**action** Action that should happen when the attached button is pressed
+
+**icon** Provide in component slot
+
+**buttonText** Optional attached button text
+
 **label-text** Optional label appended to input
+
+**copy-content** If provided, the button will also copy the content to clipboard
diff --git a/components/interactables/Input/types.d.ts b/components/interactables/Input/types.d.ts
index 754f398cb3..417fc31a3c 100644
--- a/components/interactables/Input/types.d.ts
+++ b/components/interactables/Input/types.d.ts
@@ -1,9 +1,9 @@
-export type InputTypes = 'text' | 'number' | 'password'
-export type InputStyle =
+export type InputType = 'text' | 'number' | 'password'
+export type InputColor =
   | 'primary'
   | 'link'
   | 'info'
   | 'success'
   | 'warning'
   | 'danger'
-export type InputSize = 'small' | 'normal' | 'medium' | 'large'
+  | null
diff --git a/components/interactables/InputGroup/InputGroup.html b/components/interactables/InputGroup/InputGroup.html
deleted file mode 100644
index 21307dc13f..0000000000
--- a/components/interactables/InputGroup/InputGroup.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<div>
-  <TypographyText v-if="label" as="label" uppercase> {{label}} </TypographyText>
-  <div class="input-wrapper">
-    <input
-      ref="input"
-      class="input"
-      :class="`is-${size} is-${type}`"
-      :value="text"
-      :type="inputKind"
-      :readonly="readonly"
-      :placeholder="placeholder"
-      :maxLength="maxLength"
-      :disabled="disabled || loading"
-      @keydown.enter="action"
-      @input="$emit('change', $event.target.value)"
-      data-cy="input-group"
-    />
-    <button
-      class="button"
-      :class="[`is-${type} is-${size}`, {disabled: disabled}]"
-      @click="disabled || loading ? null : action()"
-      data-cy="submit-input"
-    >
-      <UiLoadersSpinner v-if="loading" spinning />
-      <slot v-else></slot>
-    </button>
-  </div>
-  <span v-if="showLimit" class="char-limit"> {{ textLength }} </span>
-</div>
diff --git a/components/interactables/InputGroup/InputGroup.less b/components/interactables/InputGroup/InputGroup.less
deleted file mode 100644
index c204d08806..0000000000
--- a/components/interactables/InputGroup/InputGroup.less
+++ /dev/null
@@ -1,21 +0,0 @@
-.control:nth-child(1) {
-  &:extend(.full-width);
-}
-.input-wrapper {
-  display: flex;
-  &:extend(.bordered);
-  &:extend(.round-corners);
-}
-
-.input.is-normal,
-.button.is-normal {
-  height: 2.3rem;
-  font-size: @text-size;
-}
-.char-limit {
-  float: right;
-  margin-right: @light-spacing;
-  font-size: @mini-text-size;
-  &:extend(.font-muted);
-  margin-left: auto;
-}
diff --git a/components/interactables/InputGroup/InputGroup.vue b/components/interactables/InputGroup/InputGroup.vue
deleted file mode 100644
index e26a8c9ebd..0000000000
--- a/components/interactables/InputGroup/InputGroup.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template src="./InputGroup.html"></template>
-<script lang="ts">
-import Vue, { PropType } from 'vue'
-import { toArray } from 'lodash'
-import { InputTypes, InputStyle, InputSize } from './types.d'
-
-export default Vue.extend({
-  model: {
-    prop: 'text',
-    event: 'change',
-  },
-  props: {
-    text: {
-      type: String,
-      default: '',
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * autofocus the input on mount
-     */
-    autofocus: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Abstraction of native "type"
-     */
-    inputKind: {
-      type: String as PropType<InputTypes>,
-      default: 'text',
-    },
-    /**
-     * Placeholder text for blank inputs
-     */
-    placeholder: {
-      type: String,
-      default: 'Placeholder...',
-    },
-    /**
-     * Size of the input, reference InputSize types or Bulma.io
-     */
-    size: {
-      type: String as PropType<InputSize>,
-      default: 'normal',
-    },
-    /**
-     * Style of the input, reference InputStyle types or Bulma.io
-     */
-    type: {
-      type: String as PropType<InputStyle>,
-      default: 'normal',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    action: {
-      type: Function,
-      required: true,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    showLimit: {
-      type: Boolean,
-      default: false,
-    },
-    maxLength: {
-      type: Number,
-      default: 256,
-    },
-  },
-  computed: {
-    textLength(): string {
-      /* toArray(): https://lodash.com/docs/4.17.15#toArray */
-      return `${toArray(this.text).length}/${this.maxLength}`
-    },
-  },
-  mounted() {
-    if (this.autofocus) {
-      this.$nextTick(() => (this.$refs?.input as HTMLElement).focus())
-    }
-  },
-})
-</script>
-<style scoped lang="less" src="./InputGroup.less"></style>
diff --git a/components/interactables/InputGroup/README.md b/components/interactables/InputGroup/README.md
deleted file mode 100644
index 039118f36a..0000000000
--- a/components/interactables/InputGroup/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# Description
-
-Generic input group component.
-
-# Usage
-
-```vue
-<InteractablesInputGroup
-  v-model="input2Text"
-  size="small"
-  input-kind="number"
-  type="dark"
-  :loading="inputGroupLoading"
-  :action="
-    () => {
-      inputGroupLoading = true
-    }
-  "
-/>
-```
-
-# Props
-
-**text** Input display text
-
-**size** Input display size, honors bulma.io sizes
-
-**input-kind** Abstracts generic input type attribute
-
-**disabled** Disables the input button
-
-**action** Action that should happen when the attached button is pressed
-
-**icon** Provide in component slot
-
-**buttonText** Optional attached button text
-
-**label-text** Optional label appended to input
-
-**copy-content** If provided, the button will also copy the content to clipboard
diff --git a/components/interactables/InputGroup/types.d.ts b/components/interactables/InputGroup/types.d.ts
deleted file mode 100644
index 754f398cb3..0000000000
--- a/components/interactables/InputGroup/types.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type InputTypes = 'text' | 'number' | 'password'
-export type InputStyle =
-  | 'primary'
-  | 'link'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'danger'
-export type InputSize = 'small' | 'normal' | 'medium' | 'large'
diff --git a/components/interactables/QuickProfile/QuickProfile.html b/components/interactables/QuickProfile/QuickProfile.html
index 98c12b49ad..9fe990301f 100644
--- a/components/interactables/QuickProfile/QuickProfile.html
+++ b/components/interactables/QuickProfile/QuickProfile.html
@@ -23,16 +23,15 @@
   <TypographyText> {{ user.status }} </TypographyText>
   <template v-if="!isMe">
     <UiHorizontalRule />
-    <InteractablesInputGroup
-      type="primary"
+    <InteractablesInput
       v-model="text"
       :placeholder="`${$t('friends.message')} ${user.name}...`"
-      :action="sendMessage"
+      @submit="sendMessage"
       :maxLength="$Config.chat.maxChars"
       showLimit
     >
       <arrow-right-icon size="1x" />
-    </InteractablesInputGroup>
+    </InteractablesInput>
     <TypographyError
       v-if="isEmptyMessage"
       :text="$t('errors.chat.empty_message_error')"
diff --git a/components/interactables/UserPicker/UserPicker.html b/components/interactables/UserPicker/UserPicker.html
index d72eff0ec2..c19bd652c6 100644
--- a/components/interactables/UserPicker/UserPicker.html
+++ b/components/interactables/UserPicker/UserPicker.html
@@ -11,8 +11,7 @@
   </div>
   <InteractablesInput
     v-model="filter"
-    size="small"
-    type="dark"
+    size="xs"
     :placeholder="$t('servers.create.select_friends_placeholder')"
   />
   <div class="users" :style="{ height: height }">
diff --git a/components/views/chat/enhancers/Enhancers.html b/components/views/chat/enhancers/Enhancers.html
index 696868ca20..26d89081f9 100644
--- a/components/views/chat/enhancers/Enhancers.html
+++ b/components/views/chat/enhancers/Enhancers.html
@@ -47,7 +47,7 @@
               <InteractablesInput
                 v-model="search"
                 type="dark"
-                size="small"
+                size="xs"
                 :placeholder="$t('ui.search')"
               />
             </div>
diff --git a/components/views/chat/enhancers/glyphs/Glyphs.html b/components/views/chat/enhancers/glyphs/Glyphs.html
index a147e0921e..7e73578aea 100644
--- a/components/views/chat/enhancers/glyphs/Glyphs.html
+++ b/components/views/chat/enhancers/glyphs/Glyphs.html
@@ -2,7 +2,7 @@
   <div class="search-glyph-box">
     <InteractablesInput
       :placeholder="$t('ui.search')"
-      size="small"
+      size="xs"
       v-model="searchText"
       input-kind="text"
       type="primary"
diff --git a/components/views/files/controls/Controls.html b/components/views/files/controls/Controls.html
index 2e80d28f0e..537574fd67 100644
--- a/components/views/files/controls/Controls.html
+++ b/components/views/files/controls/Controls.html
@@ -6,9 +6,7 @@
       :tooltipPosition="'top'"
     >
       <InteractablesInput
-        size="small"
-        input-kind="text"
-        type="dark"
+        size="xs"
         :placeholder="$t('pages.files.browse.search')"
         class="search"
       />
@@ -32,16 +30,15 @@
     >
       <file-plus-icon size="1.3x" />
     </InteractablesButton>
-    <InteractablesInputGroup
+    <InteractablesInput
       v-model="text"
       class="name"
-      size="small"
-      type="primary"
-      :action="addFolder"
+      size="xs"
+      @submit="addFolder"
       :placeholder="$t('pages.files.controls.name_folder')"
     >
       <folder-plus-icon size="1.3x" />
-    </InteractablesInputGroup>
+    </InteractablesInput>
     <input
       ref="upload"
       type="file"
diff --git a/components/views/files/rename/Rename.html b/components/views/files/rename/Rename.html
index e277b60622..6c416ef7b7 100644
--- a/components/views/files/rename/Rename.html
+++ b/components/views/files/rename/Rename.html
@@ -1,14 +1,13 @@
 <div class="rename" data-cy="files-rename">
   <InteractablesClose :action="closeModal" />
   <TypographyTitle :size="3" :text="$t('modal.rename')" />
-  <InteractablesInputGroup
-    type="primary"
+  <InteractablesInput
     v-model="text"
-    :action="renameItem"
     ref="inputGroup"
     data-cy="files-rename-input"
+    @submit="renameItem"
   >
     <save-icon size="1.3x" />
-  </InteractablesInputGroup>
+  </InteractablesInput>
   <TypographyError v-if="error" :text="error" />
 </div>
diff --git a/components/views/friends/search/Search.vue b/components/views/friends/search/Search.vue
index e45de30a20..00431d29e5 100644
--- a/components/views/friends/search/Search.vue
+++ b/components/views/friends/search/Search.vue
@@ -1,13 +1,10 @@
 <template>
   <div>
     <InteractablesInput
-      ref="input"
       v-model="friendId"
-      type="primary"
-      size="small"
       :placeholder="$t('friends.search_placeholder')"
       autofocus
-      @update="_searchFriend"
+      @change="_searchFriend"
     />
     <TypographyError v-if="error" :text="$t(error)" />
     <UiLoadersLoadingBar v-else-if="searching" />
@@ -98,9 +95,6 @@ export default Vue.extend({
       this.user = null
       this.friendId = ''
       // @ts-ignore
-      const input = this.$refs.input.$refs.input as HTMLInputElement
-      input.value = ''
-      // @ts-ignore
       this.$toast.show(this.$t('friends.request_sent') as string)
     },
     copyId() {
diff --git a/components/views/marketplace/searchbox/Searchbox.html b/components/views/marketplace/searchbox/Searchbox.html
index fc93d7e377..82ff1ac86f 100644
--- a/components/views/marketplace/searchbox/Searchbox.html
+++ b/components/views/marketplace/searchbox/Searchbox.html
@@ -1,9 +1,7 @@
 <div class="search-box">
   <InteractablesInput
     :placeholder="$t('ui.search')"
-    size="small"
+    size="xs"
     v-model="internalText"
-    input-kind="text"
-    type="primary"
   />
 </div>
diff --git a/components/views/navigation/server/sidebar/Sidebar.html b/components/views/navigation/server/sidebar/Sidebar.html
index 8037d016c1..81b33b2b08 100644
--- a/components/views/navigation/server/sidebar/Sidebar.html
+++ b/components/views/navigation/server/sidebar/Sidebar.html
@@ -11,8 +11,7 @@
       <InteractablesInput
         :placeholder="`${$t('ui.search')}...`"
         size="small"
-        input-kind="text"
-        :delete-icon="true"
+        showClear
         type="dark"
         full-width
       />
diff --git a/components/views/navigation/sidebar/Sidebar.html b/components/views/navigation/sidebar/Sidebar.html
index 076ee929b7..46b84ebc85 100644
--- a/components/views/navigation/sidebar/Sidebar.html
+++ b/components/views/navigation/sidebar/Sidebar.html
@@ -9,12 +9,9 @@
       >
         <InteractablesInput
           :placeholder="`${$t('ui.search')}...`"
-          size="small"
-          input-kind="text"
-          :delete-icon="true"
-          type="dark"
+          size="xs"
           disabled
-          full-width
+          showClear
         />
       </UiComingSoon>
       <InteractablesSidebarToggle />
diff --git a/components/views/navigation/sidebar/quick/Quick.html b/components/views/navigation/sidebar/quick/Quick.html
index 617e1e0fcb..ef0e3f24fb 100644
--- a/components/views/navigation/sidebar/quick/Quick.html
+++ b/components/views/navigation/sidebar/quick/Quick.html
@@ -9,17 +9,14 @@
   <template v-if="friends.length > 1">
     <InteractablesInput
       v-model.trim="name"
-      size="small"
-      type="dark"
-      input-kind="text"
+      size="xs"
       :placeholder="$t('pages.chat.new_group_name')"
       :minLength="$Config.chat.groupNameMinLength"
       :maxLength="$Config.chat.groupNameMaxLength"
       :invalid="isInvalidName && Boolean(error)"
-      :watchEnter="true"
-      @watchEnter="confirm"
+      @submit="confirm"
+      :error="error"
     />
-    <TypographyError v-if="error" :text="error" small />
   </template>
   <InteractablesButton
     :type="friends.length ? 'primary' : 'dark'"
diff --git a/components/views/servers/create/Create.html b/components/views/servers/create/Create.html
index 194d92bd25..81220669d2 100644
--- a/components/views/servers/create/Create.html
+++ b/components/views/servers/create/Create.html
@@ -39,8 +39,6 @@
         <InteractablesInput
           :placeholder="$t('servers.create.server_name_placeholder')"
           v-model="name"
-          input-kind="text"
-          type="primary"
         />
       </div>
 
diff --git a/components/views/settings/pages/accounts/Accounts.html b/components/views/settings/pages/accounts/Accounts.html
index 7cc7291eca..d1b30c7b3d 100644
--- a/components/views/settings/pages/accounts/Accounts.html
+++ b/components/views/settings/pages/accounts/Accounts.html
@@ -9,14 +9,9 @@
 
   <SettingsUnit>
     <TypographyLabel :text="$t('pages.settings.accounts.active')" />
-    <InteractablesInputGroup
-      readonly
-      type="primary"
-      :action="copyAddress"
-      :text="accounts.active"
-    >
+    <InteractablesInput readonly :text="accounts.active" @submit="copyAddress">
       <clipboard-icon size="1x" />
-    </InteractablesInputGroup>
+    </InteractablesInput>
   </SettingsUnit>
 
   <!-- <SettingsSection>
diff --git a/components/views/settings/pages/developer/Info.html b/components/views/settings/pages/developer/Info.html
index 2431fb9a36..af9e857ed0 100644
--- a/components/views/settings/pages/developer/Info.html
+++ b/components/views/settings/pages/developer/Info.html
@@ -13,13 +13,7 @@
     <SettingsUnit>
       <TypographyLabel :text="$t('pages.settings.developer.identifier')" />
       <br />
-      <InteractablesInput
-        size="small"
-        input-kind="text"
-        type="dark"
-        readonly
-        v-model="accounts.active"
-      />
+      <InteractablesInput size="xs" readonly v-model="accounts.active" />
     </SettingsUnit>
   </SettingsSection>
 </SettingsPage>
diff --git a/components/views/settings/pages/notifications/Notifications.html b/components/views/settings/pages/notifications/Notifications.html
index 3a4b2259a4..267ee30191 100644
--- a/components/views/settings/pages/notifications/Notifications.html
+++ b/components/views/settings/pages/notifications/Notifications.html
@@ -46,28 +46,26 @@
         <TypographyLabel
           :text="$t('pages.settings.notifications.send_label')"
         />
-        <InteractablesInputGroup
+        <InteractablesInput
           v-if="NotificationStatus === 'granted' || Platform === PlatformTypeEnum.ELECTRON"
           class="modal-input"
-          size="small"
-          type="primary"
+          size="xs"
           v-model="$data.NotificationText"
           :placeholder="$t('pages.settings.notifications.send_placeholder')"
-          :action="sendNotification"
+          @submit="sendNotification"
         >
           <arrow-right-icon size="1x" />
-        </InteractablesInputGroup>
+        </InteractablesInput>
       </span>
       <span v-if="Platform === PlatformTypeEnum.ANDROID">
-        <InteractablesInputGroup
-          class="modal-input"
-          size="small"
-          type="primary"
+        <InteractablesInput
           v-model="NotificationText"
-          :action="sendNotification"
+          class="modal-input"
+          size="xs"
+          @submit="sendNotification"
         >
           <arrow-right-icon size="1x" />
-        </InteractablesInputGroup>
+        </InteractablesInput>
       </span>
     </SettingsUnit>
   </SettingsSection>
diff --git a/components/views/settings/pages/privacy/Privacy.html b/components/views/settings/pages/privacy/Privacy.html
index bee74e8550..343f23401d 100644
--- a/components/views/settings/pages/privacy/Privacy.html
+++ b/components/views/settings/pages/privacy/Privacy.html
@@ -80,7 +80,7 @@
       <InteractablesInput
         v-model="ownInfo"
         type="dark"
-        size="small"
+        size="xs"
         :placeholder="$t('pages.privacy.ownInfo.placeholder')"
         class="ownInfo-input"
       />
diff --git a/components/views/settings/pages/profile/Profile.html b/components/views/settings/pages/profile/Profile.html
index 7b00170bdc..212adf5695 100644
--- a/components/views/settings/pages/profile/Profile.html
+++ b/components/views/settings/pages/profile/Profile.html
@@ -74,16 +74,14 @@
                 <TypographyTitle :size="6" :text="accounts.details.name" />
               </div>
               <div class="status-input">
-                <InteractablesInputGroup
+                <InteractablesInput
                   v-model="status"
-                  size="small"
-                  input-kind="text"
-                  type="primary"
+                  size="xs"
+                  type="text"
                   :placeholder="$t('pages.settings.profile.status_placeholder')"
-                  :action="() => {}"
                 >
                   <edit-icon size="1x" />
-                </InteractablesInputGroup>
+                </InteractablesInput>
               </div>
             </div>
             <div v-if="!!accounts.details.status" class="status">
@@ -139,16 +137,14 @@
                   <info-icon size="1.5x" class="section-icon-tooltip" />
                 </div>
               </div>
-              <InteractablesInputGroup
+              <InteractablesInput
                 v-model="accountUrl"
-                size="small"
-                input-kind="text"
-                type="primary"
+                size="xs"
+                type="text"
                 :placeholder="$t('pages.settings.profile.accounts.url_placeholder')"
-                :action="() => {}"
               >
                 <edit-icon size="1x" />
-              </InteractablesInputGroup>
+              </InteractablesInput>
             </div>
 
             <div class="accounts-subtitle-wrapper">
diff --git a/components/views/wallet/balance/Balance.html b/components/views/wallet/balance/Balance.html
index 27921f4c20..c42750260a 100644
--- a/components/views/wallet/balance/Balance.html
+++ b/components/views/wallet/balance/Balance.html
@@ -8,13 +8,9 @@
       <TypographyTitle :size="5" text="123,456.78" />
       <TypographyText> Last Updated: Today </TypographyText>
       <div class="inline">
-        <InteractablesInputGroup
-          class="modal-input"
-          size="small"
-          type="primary"
-        >
+        <InteractablesInput class="modal-input" size="xs">
           <send-icon size="1x" />
-        </InteractablesInputGroup>
+        </InteractablesInput>
         <InteractablesSelect class="form-control" />
       </div>
       <div class="inline">
diff --git a/components/views/wallet/mini/body/Body.html b/components/views/wallet/mini/body/Body.html
index 7f640e365c..8bfea2c129 100644
--- a/components/views/wallet/mini/body/Body.html
+++ b/components/views/wallet/mini/body/Body.html
@@ -5,17 +5,16 @@
   </div>
   <UiSpacer :height="45" />
   <div class="flex-row">
-    <InteractablesInputGroup
+    <InteractablesInput
+      v-model="accountID"
       class="input-container"
-      type="primary"
-      size="small"
+      size="xs"
       :placeholder="$t('friends.search_placeholder')"
-      :action="searchFriend"
-      v-model="accountID"
       :loading="searching"
+      @submit="searchFriend"
     >
       <check-circle-2-icon size="1x" />
-    </InteractablesInputGroup>
+    </InteractablesInput>
     <InteractablesSelect
       v-model="paymentOption"
       :options="[{ text: 'USD', value: 'usd' }]"
diff --git a/pages/auth/unlock/Unlock.html b/pages/auth/unlock/Unlock.html
index 39247ad654..25b3d84331 100644
--- a/pages/auth/unlock/Unlock.html
+++ b/pages/auth/unlock/Unlock.html
@@ -14,20 +14,21 @@
         {{$t('pages.unlock.choose_pin_description_2')}}
       </TypographyText>
     </div>
-    <InteractablesInputGroup
+    <InteractablesInput
       v-model="pin"
-      size="small"
-      input-kind="password"
-      :type="`${error ? 'danger' : 'primary'}`"
-      :data-cy="`pin-label`"
+      size="xs"
+      type="password"
+      :color="error ? 'danger' : 'primary'"
+      data-cy="pin-label"
       :label="step === 'login' ? $t('pages.unlock.decrypt') : $t('pages.unlock.choose_pin')"
       :placeholder="$t('pages.unlock.placeholder')"
       :loading="status === 'loading'"
-      :action="action"
+      autofocus
+      @submit="action"
     >
       <unlock-icon size="1x" v-if="getIcon() === 'unlocked'" />
       <chevron-right-icon size="1x" v-else />
-    </InteractablesInputGroup>
+    </InteractablesInput>
     <TypographyError v-if="error" :text="$t(error)" />
     <InteractablesSwitch
       v-model="storePin"
diff --git a/pages/auth/unlock/index.vue b/pages/auth/unlock/index.vue
index 23b0dbf451..7862cb960e 100644
--- a/pages/auth/unlock/index.vue
+++ b/pages/auth/unlock/index.vue
@@ -101,6 +101,7 @@ export default Vue.extend({
      */
     async decrypt(redirect = true) {
       try {
+        this.status = 'loading'
         await this.$store.dispatch(
           'accounts/unlock',
           this.pin || (this.isDev ? DEV_PIN : ''),
@@ -118,8 +119,10 @@ export default Vue.extend({
           redirect && this.$router.replace('/')
         }
       } catch (error: any) {
-        this.error = error.message
         this.pin = ''
+        this.error = error.message
+      } finally {
+        this.status = 'idle'
       }
     },
     // Create & store a new pin, then decrypt.
@@ -130,10 +133,13 @@ export default Vue.extend({
      */
     async create() {
       try {
+        this.status = 'loading'
         await this.$store.dispatch('accounts/setPin', this.pin)
         await this.decrypt()
       } catch (error: any) {
         this.error = error.message
+      } finally {
+        this.status = 'idle'
       }
     },
     async deleteAccount() {
@@ -144,8 +150,11 @@ export default Vue.extend({
       location.reload()
     },
     action() {
-      this.status = 'loading'
-      return this.step === 'login' ? this.decrypt() : this.create()
+      if (this.step === 'login') {
+        this.decrypt()
+        return
+      }
+      this.create()
     },
     // FOR DEVELOPMENT PURPOSES ONLY
     async createRandom() {
diff --git a/pages/components.vue b/pages/components.vue
index 15a8b7fe70..d80b2fba4c 100644
--- a/pages/components.vue
+++ b/pages/components.vue
@@ -183,26 +183,20 @@
           <div class="content">
             <InteractablesInput v-model="input1Text" :label-text="input1Text" />
             <p>Text: {{ input2Text }}</p>
-            <InteractablesInput
-              v-model="input2Text"
-              size="small"
-              input-kind="number"
-              type="primary"
-            />
+            <InteractablesInput v-model="input2Text" size="xs" type="number" />
             <p>Grouped Input</p>
-            <InteractablesInputGroup
+            <InteractablesInput
               v-model="input2Text"
-              size="small"
-              input-kind="number"
-              type="primary"
-              :label-text="input2Text.toString()"
+              size="sm"
+              type="number"
+              :label="input2Text.toString()"
               :loading="inputGroupLoading"
-              :action="
+              :icon="{ style: 'far', name: 'lock-open' }"
+              @submit="
                 () => {
                   inputGroupLoading = !inputGroupLoading
                 }
               "
-              :icon="{ style: 'far', name: 'lock-open' }"
             />
           </div>
         </div>
diff --git a/pages/message/NewMessage.html b/pages/message/NewMessage.html
index 6b83e066b0..8b47ff1194 100644
--- a/pages/message/NewMessage.html
+++ b/pages/message/NewMessage.html
@@ -17,9 +17,7 @@
   <template v-if="friends.length > 1">
     <InteractablesInput
       v-model="name"
-      size="small"
-      type="dark"
-      input-kind="text"
+      size="xs"
       :placeholder="$t('pages.chat.new_group_name')"
       :minLength="$Config.chat.groupNameMinLength"
       :maxLength="$Config.chat.groupNameMaxLength"
diff --git a/pages/mobile/chat/_id.vue b/pages/mobile/chat/_id.vue
index 2761cc623a..12f75cd74e 100644
--- a/pages/mobile/chat/_id.vue
+++ b/pages/mobile/chat/_id.vue
@@ -9,9 +9,7 @@
           <InteractablesInput
             class="search"
             :placeholder="`${$t('ui.search')}...`"
-            :delete-icon="true"
-            input-kind="text"
-            type="dark"
+            show-clear
           />
           <button v-if="$route.params.id" @click="swiper.slideNext()">
             <menu-icon class="toggle-sidebar" size="1.5x" />