diff --git a/package-lock.json b/package-lock.json
index 4f6948d67..ebafa383f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5031,11 +5031,6 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
-    "bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
-    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -14280,6 +14275,11 @@
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
       "dev": true
     },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
diff --git a/package.json b/package.json
index 88b8224d2..a923faaf6 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "autosize": "^5.0.0",
     "axios": "^0.21.1",
     "bignumber.js": "^9.0.1",
-    "bootstrap": "^4.5.3",
     "chart.js": "^2.9.4",
     "chartjs-plugin-annotation": "^0.5.7",
     "core-js": "^3.15.1",
@@ -34,6 +33,7 @@
     "is-fqdn": "^2.0.1",
     "jitsi-iframe-api": "^1.0.0",
     "lodash-es": "^4.17.21",
+    "normalize.css": "^8.0.1",
     "sophia-bonding-curve": "github:aeternity/BondingCurve#1.0.0-alpha.2",
     "soundcloud-widget": "^0.2.1",
     "tipping-contract": "github:aeternity/tipping-contract#v5.0.0-alpha1",
diff --git a/src/App.vue b/src/App.vue
index cf961d82b..62f9cc63e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
     :class="$route.meta.layoutClass"
   >
     <MobileNavigation v-if="!$route.meta.fullScreen" />
-    <div class="not-bootstrap-row">
+    <div class="row">
       <div
         v-if="!$route.meta.fullScreen"
         class="sidebar-sticky"
@@ -140,7 +140,7 @@ export default {
   display: flex;
   flex-direction: column;
 
-  .not-bootstrap-row {
+  .row {
     flex-grow: 1;
     display: flex;
     flex-wrap: nowrap;
diff --git a/src/components/ActivityRibbon.vue b/src/components/ActivityRibbon.vue
index 7d7548a42..1fc33fd6b 100644
--- a/src/components/ActivityRibbon.vue
+++ b/src/components/ActivityRibbon.vue
@@ -6,11 +6,7 @@
       :class="{ active: value === tab.activity }"
       @click="updateValue(tab.activity)"
     >
-      <Component :is="tab.icon" />
-
-      <span class="text">
-        {{ tab.text }}
-      </span>
+      <Component :is="tab.icon" /> <span>{{ tab.text }}</span>
     </FilterButton>
     <slot name="left" />
     <div class="separator" />
@@ -45,8 +41,11 @@ export default {
   display: flex;
   align-items: center;
 
-  .text {
-    padding-left: 0.15rem;
+  .filter-button {
+    svg,
+    span {
+      vertical-align: middle;
+    }
   }
 
   .separator {
diff --git a/src/components/AeInputAmount.vue b/src/components/AeInputAmount.vue
index bc98517c0..e4ec7be34 100644
--- a/src/components/AeInputAmount.vue
+++ b/src/components/AeInputAmount.vue
@@ -160,7 +160,7 @@ export default {
       height: 2.1rem;
     }
 
-    .not-bootstrap-modal-content {
+    .modal-content {
       margin-top: 0.25rem;
     }
   }
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index 10897c65d..cafd12ddd 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -103,6 +103,7 @@ export default {
     color: $standard_font_color;
     box-shadow: inset 0 0 0.1rem $article_content_color;
     border-radius: unset;
+    white-space: nowrap;
 
     &:first-child {
       border-radius: 0.15rem 0.15rem 0 0;
@@ -121,7 +122,7 @@ export default {
     padding: 0;
   }
 
-  &::v-deep .not-bootstrap-modal-content {
+  &::v-deep .modal-content {
     max-height: 10rem;
     overflow-y: auto;
     scrollbar-width: none;
@@ -132,7 +133,7 @@ export default {
     }
   }
 
-  &.right::v-deep .not-bootstrap-modal-content {
+  &.right::v-deep .modal-content {
     right: 0;
   }
 
diff --git a/src/components/FilterButton.vue b/src/components/FilterButton.vue
index a1f6ec02c..90d0244ba 100644
--- a/src/components/FilterButton.vue
+++ b/src/components/FilterButton.vue
@@ -21,7 +21,7 @@ export default {
   border-radius: 50px;
   font-size: 16px;
   font-weight: 700;
-  line-height: 18px;
+  line-height: 22px;
   padding: 8px 16px;
   color: $tip_note_color;
   height: 40px;
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 98822ade3..3e3c77006 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -22,6 +22,8 @@
   padding: 8.5px 16px;
 
   &:focus {
+    transition: 0.3s;
+    transition-property: background-color, border-color;
     border-color: $secondary_color;
     background-color: $actions_ribbon_background_color;
   }
diff --git a/src/components/Loader.vue b/src/components/Loader.vue
index 9e559b3a4..288cbf646 100644
--- a/src/components/Loader.vue
+++ b/src/components/Loader.vue
@@ -53,6 +53,8 @@ export default {
   .svg {
     width: 56px;
     height: 56px;
+    display: block;
+    margin: 0 auto;
   }
 
   &.lg .svg {
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index de2094648..868b954e3 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="not-bootstrap-modal">
+  <div class="modal">
     <div
       class="overlay"
       @click.stop="$emit('close')"
     />
-    <div class="not-bootstrap-modal-content">
+    <div class="modal-content">
       <slot />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.not-bootstrap-modal {
+.modal {
   .overlay {
     bottom: 0;
     left: 0;
@@ -21,7 +21,7 @@
     z-index: 90;
   }
 
-  .not-bootstrap-modal-content {
+  .modal-content {
     position: absolute;
     z-index: 90;
   }
diff --git a/src/components/TabBarButton.vue b/src/components/TabBarButton.vue
index cab7ff168..c4830c600 100644
--- a/src/components/TabBarButton.vue
+++ b/src/components/TabBarButton.vue
@@ -38,5 +38,12 @@ export default {
       border-color: $custom_links_color;
       color: $custom_links_color;
     }
+
+    ::v-deep {
+      svg,
+      span {
+        vertical-align: middle;
+      }
+    }
   }
 </style>
diff --git a/src/components/ThreeDotsMenu.vue b/src/components/ThreeDotsMenu.vue
index 8d0be8bcb..f0939e80f 100644
--- a/src/components/ThreeDotsMenu.vue
+++ b/src/components/ThreeDotsMenu.vue
@@ -44,7 +44,7 @@ export default {
     color: #fff;
   }
 
-  ::v-deep .not-bootstrap-modal-content {
+  ::v-deep .modal-content {
     font-size: 0.75rem;
     border-radius: 0.25rem;
     border: 0.05rem solid $article_content_color;
diff --git a/src/components/TipInput.vue b/src/components/TipInput.vue
index c54039b51..af17e4b73 100644
--- a/src/components/TipInput.vue
+++ b/src/components/TipInput.vue
@@ -46,7 +46,7 @@
           maxlength="280"
           :placeholder="$t('addMessage')"
         />
-        <div class="not-bootstrap-row">
+        <div class="row">
           <AeInputAmount
             v-model="inputValue"
             :select-token-f="token => (inputToken = token)"
@@ -275,7 +275,7 @@ export default {
     }
   }
 
-  .not-bootstrap-modal > ::v-deep .not-bootstrap-modal-content {
+  .modal > ::v-deep .modal-content {
     background-color: $article_content_color;
     border-radius: 0.25rem;
     margin-top: 0.25rem;
@@ -288,7 +288,7 @@ export default {
     }
   }
 
-  .not-bootstrap-modal .not-bootstrap-modal-content {
+  .modal .modal-content {
     .error {
       text-align: center;
       font-size: 12px;
@@ -301,7 +301,7 @@ export default {
       margin-bottom: 0.5rem;
     }
 
-    .not-bootstrap-row {
+    .row {
       display: flex;
 
       .ae-button {
diff --git a/src/components/TopicList.vue b/src/components/TopicList.vue
index 0ea8fcbc7..19ed52ff9 100644
--- a/src/components/TopicList.vue
+++ b/src/components/TopicList.vue
@@ -3,7 +3,7 @@
     <div
       v-for="[topic, data] in topics"
       :key="topic"
-      class="not-bootstrap-row"
+      class="row"
     >
       <Topic
         class="text-ellipsis"
@@ -30,7 +30,7 @@ export default {
 
 <style lang="scss" scoped>
 .topic-list {
-  .not-bootstrap-row {
+  .row {
     display: flex;
     align-items: center;
     margin: 0.5rem 0;
diff --git a/src/components/UserInfo.vue b/src/components/UserInfo.vue
index d24fa70a5..1f3a186f5 100644
--- a/src/components/UserInfo.vue
+++ b/src/components/UserInfo.vue
@@ -640,6 +640,10 @@ input[type="file"] {
   color: $lighter_font_color;
   font-size: 0.7rem;
   vertical-align: middle;
+
+  img {
+    vertical-align: middle;
+  }
 }
 
 .profile-section {
@@ -775,6 +779,7 @@ input[type="file"] {
       height: 0.9rem;
       margin-bottom: 0.2rem;
       margin-right: 0.2rem;
+      vertical-align: middle;
     }
   }
 
diff --git a/src/components/VoteCard.vue b/src/components/VoteCard.vue
index f03325b7b..ea1d2422a 100644
--- a/src/components/VoteCard.vue
+++ b/src/components/VoteCard.vue
@@ -58,23 +58,12 @@
         </OutlinedButton>
       </div>
 
-      <label
-        v-if="vote.showVoteOption"
-        class="stake-label"
-      >
-        {{ $t('components.VoteCard.Amount') }}
-      </label>
-      <label
-        v-if="vote.accountHasVoted"
-        class="stake-label"
-      >
-        {{ $t('components.VoteCard.Staked') }}
-      </label>
-      <label
-        v-if="!vote.showVoteOption && !vote.accountHasVoted"
-        class="stake-label"
-      >
-        {{ $t('components.VoteCard.NotParticipate') }}
+      <label class="stake-label">
+        {{
+          vote.showVoteOption && $t('components.VoteCard.Amount')
+          || vote.accountHasVoted && $t('components.VoteCard.Staked')
+          || $t('components.VoteCard.NotParticipate')
+        }}
       </label>
 
       <div class="input-bar">
@@ -354,6 +343,7 @@ export default {
       svg {
         height: 16px;
         width: auto;
+        vertical-align: middle;
       }
 
       time {
@@ -385,10 +375,6 @@ export default {
   &:active,
   &:hover {
     background-color: $card_hover_color;
-
-    ::v-deep .form-control {
-      background-color: $super_dark;
-    }
   }
 
   .vote-progress-bar {
@@ -460,23 +446,6 @@ export default {
     }
   }
 
-  .input-group {
-    width: 50%;
-    height: 100%;
-
-    .input-group-append > span.append__ae {
-      font-size: 0.62rem;
-    }
-
-    .form-control {
-      height: 100%;
-    }
-
-    @include mobile {
-      width: 100%;
-    }
-  }
-
   ::v-deep .ae-button {
     font-weight: bold;
     font-size: 0.8rem;
diff --git a/src/components/WordBuySellButtons.vue b/src/components/WordBuySellButtons.vue
index 9864313fc..3ea409f62 100644
--- a/src/components/WordBuySellButtons.vue
+++ b/src/components/WordBuySellButtons.vue
@@ -368,12 +368,12 @@ export default {
   }
 }
 
-::v-deep.not-bootstrap-modal {
+::v-deep.modal {
   .overlay {
     z-index: 1;
   }
 
-  .not-bootstrap-modal-content {
+  .modal-content {
     background-color: $actions_ribbon_background_color;
     border: 1px solid $background_color;
     box-sizing: border-box;
@@ -412,11 +412,6 @@ export default {
   }
 }
 
-.input-group {
-  width: 228px;
-  margin-bottom: 24px;
-}
-
 .return-amount {
   display: flex;
   flex-direction: row;
diff --git a/src/components/WordInfo.vue b/src/components/WordInfo.vue
index 09e7dfe88..6382a09c7 100644
--- a/src/components/WordInfo.vue
+++ b/src/components/WordInfo.vue
@@ -424,6 +424,10 @@ export default {
         }
       }
     }
+
+    figure {
+      margin: 0 0 1rem;
+    }
   }
 
   .legend {
diff --git a/src/components/WordListing.vue b/src/components/WordListing.vue
index c245543ca..a41eb1eda 100644
--- a/src/components/WordListing.vue
+++ b/src/components/WordListing.vue
@@ -186,6 +186,7 @@ export default {
     height: 24px;
     color: $standard_font_color;
     transition: color 0.3s;
+    vertical-align: middle;
 
     &.asc {
       transform: rotate(180deg);
@@ -345,7 +346,7 @@ export default {
 
   ::v-deep .word-buy-sell-buttons {
     .buy-modal {
-      .not-bootstrap-modal-content {
+      .modal-content {
         margin-left: -204px;
 
         @include desktop {
@@ -356,7 +357,7 @@ export default {
     }
 
     .sell-modal {
-      .not-bootstrap-modal-content {
+      .modal-content {
         @include desktop {
           margin-left: -260px;
           margin-top: 56px;
diff --git a/src/components/WordVoting.vue b/src/components/WordVoting.vue
index 8879b88c0..9837431e3 100644
--- a/src/components/WordVoting.vue
+++ b/src/components/WordVoting.vue
@@ -70,18 +70,16 @@
           </i18n>
 
           <div class="initiate-vote-inputs">
-            <input
+            <Input
               v-model.trim="newVotePayout"
-              class="form-control"
               :placeholder="$t('views.WordDetail.CreateVote.AddressPlaceholder')"
-            >
+            />
 
             <AeButton
               :disabled="!newVotePayout || !description.length"
               @click="createVote"
             >
-              <IconCheckmarkCircle />
-              {{ $t('views.WordDetail.Initiate') }}
+              <IconCheckmarkCircle /> <span>{{ $t('views.WordDetail.Initiate') }}</span>
             </AeButton>
           </div>
         </template>
@@ -232,6 +230,7 @@ import TabBar from './TabBar.vue';
 import TabBarButton from './TabBarButton.vue';
 import ButtonPlain from './ButtonPlain.vue';
 import Loader from './Loader.vue';
+import Input from './Input.vue';
 import { shiftDecimalPlaces, blockToDate } from '../utils';
 
 export default {
@@ -251,6 +250,7 @@ export default {
     ButtonPlain,
     WordBuySellButtons,
     Loader,
+    Input,
   },
   props: {
     data: { type: Object, required: true },
@@ -462,7 +462,8 @@ export default {
 
     &.fade-enter-active,
     &.fade-leave-active {
-      transition: all 0.5s ease;
+      transition: 0.5s ease;
+      transition-property: transform opacity;
     }
 
     &.fade-enter,
@@ -480,20 +481,16 @@ export default {
       flex-direction: row;
       margin-top: 0.4rem;
 
-      input {
-        background-color: $buttons_background;
-        color: $standard_font_color;
-        border: 0.05rem solid $buttons_background;
-        border-radius: 0.25rem;
+      .input {
         flex: 1;
         margin-right: 1.2rem;
-        font-size: 14px;
         height: 40px;
+      }
 
-        &:focus,
-        &:active {
-          border: 0.05rem solid $secondary_color;
-          box-shadow: none;
+      .ae-button {
+        svg,
+        span {
+          vertical-align: middle;
         }
       }
     }
@@ -511,6 +508,8 @@ export default {
     color: $small_heading_color;
     font-weight: 500;
     font-size: 0.75rem;
+    display: inline-block;
+    margin-bottom: 0.5rem;
     padding-left: 0.1rem;
   }
 
@@ -519,17 +518,23 @@ export default {
     flex-direction: column;
 
     h3 {
+      margin-top: 0;
+      line-height: 1.2;
       color: $pure_white;
       font-size: 15px;
       font-weight: 500;
     }
 
+    p {
+      margin-top: 0;
+    }
+
     .buttons {
       display: flex;
       justify-content: center;
       align-items: center;
 
-      ::v-deep .not-bootstrap-modal-content {
+      ::v-deep .modal-content {
         @include mobile {
           margin-left: 0;
         }
@@ -552,6 +557,11 @@ export default {
             }
           }
         }
+
+        svg,
+        span {
+          vertical-align: middle;
+        }
       }
     }
   }
diff --git a/src/components/layout/MobileNavigation.vue b/src/components/layout/MobileNavigation.vue
index 7a3aaa29d..312af63a3 100644
--- a/src/components/layout/MobileNavigation.vue
+++ b/src/components/layout/MobileNavigation.vue
@@ -169,7 +169,7 @@ export default {
   }
 }
 
-::v-deep .not-bootstrap-modal {
+::v-deep .modal {
   .overlay {
     background-color: rgba($background_color, 0.6);
   }
diff --git a/src/components/layout/RightSectionWallet.vue b/src/components/layout/RightSectionWallet.vue
index 46e2a7088..9858e489a 100644
--- a/src/components/layout/RightSectionWallet.vue
+++ b/src/components/layout/RightSectionWallet.vue
@@ -19,7 +19,7 @@
       <div class="address">
         {{ address }}
       </div>
-      <div class="not-bootstrap-row">
+      <div class="row">
         <Dropdown
           v-if="hasContractV2Address"
           :options="tokenBalancesOptions"
@@ -190,7 +190,7 @@ export default {
     top: -0.5rem;
   }
 
-  .not-bootstrap-row {
+  .row {
     display: flex;
     align-items: center;
 
diff --git a/src/components/layout/SearchInput.vue b/src/components/layout/SearchInput.vue
index 99dda9ac7..60ad5ffc3 100644
--- a/src/components/layout/SearchInput.vue
+++ b/src/components/layout/SearchInput.vue
@@ -79,12 +79,13 @@ export default {
     }
   }
 
-  ::v-deep svg {
+  svg {
     height: 24px;
     opacity: 0.44;
     color: $standard_font_color;
     transition: opacity 0.3s;
     cursor: pointer;
+    vertical-align: middle;
 
     .background {
       opacity: 0;
@@ -100,6 +101,10 @@ export default {
     }
   }
 
+  .iconEraser {
+    padding: 4px;
+  }
+
   &.sided {
     height: 44px;
 
diff --git a/src/components/layout/sendTip/SendPost.vue b/src/components/layout/sendTip/SendPost.vue
index 34641da70..477978fe7 100644
--- a/src/components/layout/sendTip/SendPost.vue
+++ b/src/components/layout/sendTip/SendPost.vue
@@ -18,7 +18,7 @@
       v-if="showGifs"
       @add-gif="media.push({ link: $event })"
     />
-    <div class="not-bootstrap-row">
+    <div class="row">
       <div class="actions">
         <label>
           <IconPictures />
@@ -187,7 +187,7 @@ export default {
 .send-post {
   overflow: hidden;
 
-  .not-bootstrap-row {
+  .row {
     display: flex;
     flex-direction: row;
     margin: 0.5rem 0 1rem 0;
diff --git a/src/components/layout/sendTip/SendTip.vue b/src/components/layout/sendTip/SendTip.vue
index 019ed3711..ff2b98cb7 100644
--- a/src/components/layout/sendTip/SendTip.vue
+++ b/src/components/layout/sendTip/SendTip.vue
@@ -19,7 +19,7 @@
           maxlength="280"
           :placeholder="$t('addMessage')"
         />
-        <div class="not-bootstrap-row">
+        <div class="row">
           <div class="url-input">
             <UrlStatus
               :url="sendTipForm.url"
@@ -184,7 +184,7 @@ export default {
   form {
     padding: 12px 20px 0 20px;
 
-    .not-bootstrap-row {
+    .row {
       display: flex;
       flex-direction: row;
       align-items: center;
diff --git a/src/components/tipRecords/TipComment.vue b/src/components/tipRecords/TipComment.vue
index 23b8b8be4..7b0c669b7 100644
--- a/src/components/tipRecords/TipComment.vue
+++ b/src/components/tipRecords/TipComment.vue
@@ -19,15 +19,13 @@
         :comment="{ tipId, id }"
         @click.native.stop
       />
-      <div
+      <ButtonPlain
         class="comments-count"
         :title="$t('components.tipRecords.TipComment.Replies')"
+        @click.stop="$emit('reply')"
       >
-        <ButtonPlain @click.stop="$emit('reply')">
-          <IconReply />
-        </ButtonPlain>
-        <span>&nbsp;{{ children.length }}</span>
-      </div>
+        <IconReply /> <span>{{ children.length }}</span>
+      </ButtonPlain>
     </div>
   </div>
 </template>
@@ -109,21 +107,23 @@ export default {
     }
 
     .comments-count {
-      span {
-        vertical-align: middle;
+      &:hover svg {
+        transition: color 0.3s;
+        color: $standard_font_color;
       }
 
-      .button-plain {
+      svg {
         color: $search_nav_border_color;
-        transition: color 0.3s;
+        height: 14px;
+      }
 
-        &:hover {
-          color: $standard_font_color;
-        }
+      svg,
+      span {
+        vertical-align: middle;
+      }
 
-        svg {
-          height: 14px;
-        }
+      span {
+        color: $standard_font_color;
       }
     }
 
diff --git a/src/components/tipRecords/TipPreview.vue b/src/components/tipRecords/TipPreview.vue
index c7fae6684..4aeb8aa06 100644
--- a/src/components/tipRecords/TipPreview.vue
+++ b/src/components/tipRecords/TipPreview.vue
@@ -492,6 +492,7 @@ export default {
     .title {
       font-size: 0.8rem;
       font-weight: 500;
+      margin-top: 0;
       margin-bottom: 0.15rem;
       color: $tip_note_color;
       overflow: hidden;
diff --git a/src/styles/base.scss b/src/styles/base.scss
index 982c63235..b54215e51 100644
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -1,11 +1,5 @@
-//Bootstrap customizations go here:
-$theme-colors: (
-  "primary": $primary_color,
-  "light": $light_color
-);
-
 @import "fonts";
-@import "node_modules/bootstrap/scss/bootstrap";
+@import "~normalize.css";
 
 /* Global Styles */
 body {
@@ -46,36 +40,6 @@ a {
   white-space: nowrap;
 }
 
-.input-group,
-.form-group {
-  .form-control {
-    border: 1px solid transparent;
-    box-shadow: none;
-    transition: none;
-
-    &:focus {
-      border: 1px solid $secondary_color;
-    }
-  }
-}
-
-.input-group {
-  padding-left: 0;
-  padding-right: 0;
-
-  .form-control {
-    background-color: $buttons_background;
-    border: 1px solid $white_color;
-    color: $standard_font_color;
-    font-size: 14px;
-    height: 40px;
-
-    &:focus {
-      background-color: $background_color;
-    }
-  }
-}
-
 img.fail {
   visibility: hidden;
 }
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index 92a27beb7..0894ef8d4 100644
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -12,11 +12,14 @@
   border: solid transparent;
   border-width: 1px 0;
   border-radius: 6px;
+  outline: none;
   font-size: 14px;
   line-height: 22.65px;
   color: $standard_font_color;
 
   &:focus-within {
+    transition: 0.3s;
+    transition-property: background-color, border-color;
     border-color: $secondary_color;
     background-color: $actions_ribbon_background_color;
   }
diff --git a/src/views/FAQ.vue b/src/views/FAQ.vue
index 6eac494c2..5e5f117bf 100644
--- a/src/views/FAQ.vue
+++ b/src/views/FAQ.vue
@@ -48,7 +48,7 @@ export default {
 .mission-page,
 .tutorial-page {
   background-color: $light_color;
-  padding: 2.75rem 2rem;
+  padding: 1.75rem 2rem;
 
   h1 {
     font-size: 1.5rem;
@@ -75,7 +75,8 @@ export default {
   }
 
   hr {
-    background: $search_nav_border_color;
+    border: 0;
+    border-top: 1px solid $search_nav_border_color;
     margin-bottom: 1rem;
   }
 }
diff --git a/src/views/FeedList.vue b/src/views/FeedList.vue
index 2da52c8b0..029102eb0 100644
--- a/src/views/FeedList.vue
+++ b/src/views/FeedList.vue
@@ -19,7 +19,7 @@
           <IconHashtag />
         </FilterButton>
       </div>
-      <div class="not-bootstrap-row">
+      <div class="row">
         <ButtonPlain :to="genLocation({ sortBy: null })">
           {{ $t('views.TipList.SortingLatest') }}
         </ButtonPlain>
@@ -151,7 +151,7 @@ export default {
     }
   }
 
-  .not-bootstrap-row {
+  .row {
     background-color: $actions_ribbon_background_color;
     display: flex;
     align-items: center;
diff --git a/src/views/Landing.vue b/src/views/Landing.vue
index 5a018cf39..bce0cdbe5 100644
--- a/src/views/Landing.vue
+++ b/src/views/Landing.vue
@@ -379,17 +379,8 @@
             </div>
             <div class="sh-col-6 right-subscribe">
               <form class="subscribe-form">
-                <div class="form-group">
-                  <input
-                    class="form-control"
-                    name=""
-                    placeholder="Get started"
-                    type="text"
-                  >
-                  <button class="subscribe-button">
-                    Subscribe now
-                  </button>
-                </div>
+                <input placeholder="Get started">
+                <button>Subscribe now</button>
               </form>
             </div>
           </div>
@@ -1059,7 +1050,9 @@ section.superhero-footer {
 }
 
 .subscribe-form {
-  input.form-control {
+  display: flex;
+
+  input {
     background-color: #fff;
     border: 1px solid #fff;
     border-radius: 5px 0 0 5px;
@@ -1070,22 +1063,17 @@ section.superhero-footer {
     width: 100%;
   }
 
-  .form-group {
-    display: flex;
-    margin-bottom: 0;
+  button {
+    background-color: #1161fe;
+    border: 1px solid #0043b3;
+    border-radius: 0 5px 5px 0;
+    color: #fff;
+    font-size: 16px;
+    font-weight: 500;
+    min-width: 154px;
   }
 }
 
-button.subscribe-button {
-  background-color: #1161fe;
-  border: 1px solid #0043b3;
-  border-radius: 0 5px 5px 0;
-  color: #fff;
-  font-size: 16px;
-  font-weight: 500;
-  min-width: 154px;
-}
-
 .center-sh-foot p {
   color: #999;
   font-size: 14px;
diff --git a/src/views/TipsAndComments.vue b/src/views/TipsAndComments.vue
index f1224d8f6..9685d9d24 100644
--- a/src/views/TipsAndComments.vue
+++ b/src/views/TipsAndComments.vue
@@ -216,6 +216,7 @@ export default {
     p {
       font-size: 0.75rem;
       text-transform: capitalize;
+      margin-top: 0;
       margin-bottom: 0.7rem;
       color: white;
       font-weight: 600;
diff --git a/src/views/WordBazaar.vue b/src/views/WordBazaar.vue
index c9b67e1c6..5702d70da 100644
--- a/src/views/WordBazaar.vue
+++ b/src/views/WordBazaar.vue
@@ -112,6 +112,7 @@ export default {
     .bubbleArrow {
       height: 40px;
       color: $secondary_color;
+      vertical-align: middle;
     }
 
     .activity-icon {
@@ -143,6 +144,7 @@ export default {
         height: 24px;
         margin-bottom: 2px;
         flex-shrink: 0;
+        vertical-align: middle;
       }
 
       .desktop { margin-left: 2px; }
diff --git a/src/views/WordBazaarCreateToken.vue b/src/views/WordBazaarCreateToken.vue
index 1eaed496d..63a01ecf0 100644
--- a/src/views/WordBazaarCreateToken.vue
+++ b/src/views/WordBazaarCreateToken.vue
@@ -43,19 +43,18 @@
           />
         </div>
       </div>
-      <div class="create-inputs input-group">
+      <div class="create-inputs">
         <div class="input-block">
           <label for="name">{{ $t('components.CreateToken.Name.Title') }}</label>
-          <input
+          <Input
             v-if="!loadingState"
             id="name"
             v-model="name"
             :placeholder="$t('components.CreateToken.Name.Placeholder')"
-            class="form-control"
             :class="{ error: error.name }"
             minlength="1"
             :disabled="loadingState"
-          >
+          />
           <p
             v-else
             class="abbreviation"
@@ -80,7 +79,6 @@
             id="description"
             v-model="description"
             :placeholder="$t('components.CreateToken.Description.Placeholder')"
-            class="form-control"
             :class="{ multiline: description.split('\n').length > 1,
                       error: error.description }"
             :rows="description.split('\n').length || 1"
@@ -104,31 +102,29 @@
             </div>
           </div>
         </div>
-        <div class="input-block">
-          <div class="button">
-            <AeButton
-              v-if="success"
-              :to="{ name: 'word-bazaar-assets' }"
-            >
-              <RightArrow />
-              <span>
-                {{ $t('components.CreateToken.Proceed') }}
-              </span>
-            </AeButton>
-            <AeButton
-              v-else
-              :disabled="loadingState ||
-                !name.length || !description.length || !!error.name || !!error.description"
-              @click="createWordSale"
-            >
-              <RightArrow />
-              <span>
-                {{ loadingState ?
-                  $t('components.CreateToken.Proceed') :
-                  $t('components.CreateToken.CreateToken') }}
-              </span>
-            </AeButton>
-          </div>
+        <div class="input-block button">
+          <AeButton
+            v-if="success"
+            :to="{ name: 'word-bazaar-assets' }"
+          >
+            <RightArrow />
+            <span>
+              {{ $t('components.CreateToken.Proceed') }}
+            </span>
+          </AeButton>
+          <AeButton
+            v-else
+            :disabled="loadingState ||
+              !name.length || !description.length || !!error.name || !!error.description"
+            @click="createWordSale"
+          >
+            <RightArrow />
+            <span>
+              {{ loadingState ?
+                $t('components.CreateToken.Proceed') :
+                $t('components.CreateToken.CreateToken') }}
+            </span>
+          </AeButton>
         </div>
       </div>
     </div>
@@ -138,12 +134,14 @@
 <script>
 import Backend from '../utils/backend';
 import { EventBus } from '../utils/eventBus';
+import Input from '../components/Input.vue';
 import AeButton from '../components/AeButton.vue';
 import RightArrow from '../assets/rightArrow.svg?icon-component';
 
 export default {
   name: 'CreateToken',
   components: {
+    Input,
     AeButton,
     RightArrow,
   },
@@ -289,6 +287,13 @@ export default {
     flex-direction: column;
     align-items: center;
 
+    h2,
+    h3 {
+      margin-top: 0;
+      margin-bottom: 0.5rem;
+      line-height: 1.2;
+    }
+
     h2 {
       font-size: 1.6rem;
       font-weight: bold;
@@ -305,9 +310,7 @@ export default {
       font-size: 0.75rem;
       font-weight: 500;
       color: $pure_white;
-      margin-top: 1rem;
-      margin-left: 16px;
-      margin-right: 16px;
+      margin: 1rem;
       text-align: center;
     }
   }
@@ -392,27 +395,24 @@ export default {
       font-weight: 500;
       font-size: 15px;
       line-height: 19px;
+      display: inline-block;
+      margin-bottom: 0.5rem;
     }
 
     input,
     textarea {
-      background: $buttons_background;
+      display: block;
+      width: 100%;
+      height: 40px;
       resize: none;
       padding: 8px 16px;
-      height: 40px;
-      border: 1px solid transparent;
-      transition: 0.3s;
-      transition-property: background-color, border-color;
+
+      @include input-like;
 
       &.multiline {
         height: 100%;
       }
 
-      &:focus {
-        background-color: $actions_ribbon_background_color;
-        border-color: $secondary_color;
-      }
-
       &.error {
         border-color: $red_color;
       }
@@ -449,6 +449,7 @@ export default {
           padding: 0.2rem;
           margin-bottom: 0.1rem;
           margin-right: 3px;
+          vertical-align: middle;
         }
       }
     }
diff --git a/src/views/WordBazaarHowItWorks.vue b/src/views/WordBazaarHowItWorks.vue
index 99d8e73a2..e5e62ed9d 100644
--- a/src/views/WordBazaarHowItWorks.vue
+++ b/src/views/WordBazaarHowItWorks.vue
@@ -41,7 +41,8 @@ export default {
   padding-right: 16px;
 
   p {
-    margin-bottom: 32px;
+    margin-top: 0;
+    margin-bottom: 29px;
   }
 
   .subtitle {
@@ -54,11 +55,18 @@ export default {
     font-size: 20px;
     font-weight: 500;
     color: $standard_font_color;
-    margin-bottom: 12px;
+    margin-top: 0;
+    margin-bottom: 9px;
   }
 
   a {
     color: $custom_links_color;
   }
+
+  hr {
+    margin: 1rem 0;
+    border: 0;
+    border-top: 1px solid transparent;
+  }
 }
 </style>
diff --git a/src/views/WordDetail.vue b/src/views/WordDetail.vue
index 9a38cc259..79287fde6 100644
--- a/src/views/WordDetail.vue
+++ b/src/views/WordDetail.vue
@@ -122,9 +122,13 @@ export default {
       border-radius: 20px;
       font-size: 16px;
 
+      svg,
+      span {
+        vertical-align: middle;
+      }
+
       svg {
         height: 24px;
-        margin-bottom: 2px;
         flex-shrink: 0;
       }
 
@@ -152,7 +156,7 @@ export default {
 
     .word-buy-sell-buttons {
       .buy-modal {
-        .not-bootstrap-modal-content {
+        .modal-content {
           margin-left: -204px;
 
           @include desktop {
@@ -162,7 +166,7 @@ export default {
       }
 
       .sell-modal {
-        .not-bootstrap-modal-content {
+        .modal-content {
           @include desktop {
             margin-left: -120px;
           }
@@ -187,8 +191,12 @@ export default {
     z-index: 2;
 
     .button-plain {
+      svg,
+      span {
+        vertical-align: middle;
+      }
+
       .plus {
-        margin-bottom: 1px;
         transition: transform 0.5s;
         height: 20px;
 
@@ -239,6 +247,7 @@ export default {
       font-weight: 400;
 
       h3 {
+        margin-top: 0;
         margin-bottom: 8px;
       }
 
@@ -303,7 +312,9 @@ export default {
         font-weight: 700;
         transition: color 0.3s;
         color: $light_font_color;
+        margin-top: 0;
         margin-bottom: 9px;
+        line-height: 1.2;
       }
 
       &:hover {