diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 961fb312d..5f5f2dd9e 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -1,3 +1,5 @@
+@import "tailwind/inputs";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/app/assets/stylesheets/navigation/general.scss b/app/assets/stylesheets/navigation/general.scss
index 16d82cdd6..fa5e31ddb 100644
--- a/app/assets/stylesheets/navigation/general.scss
+++ b/app/assets/stylesheets/navigation/general.scss
@@ -11,7 +11,7 @@ body.navigator-collapsed {
   --left-navigation-width: 192px;
   --navbar-height: calc(var(--top-navigation-height) + var(--breadcrumbs-navigation-height));
   --navigator-navigation-width: 240px;
-  --top-navigation-height: 52px;
+  --top-navigation-height: 72px;
   display: grid;
   grid-template-areas: "left top top"
                        "left breadcrumbs breadcrumbs"
diff --git a/app/assets/stylesheets/navigation/left_menu.scss b/app/assets/stylesheets/navigation/left_menu.scss
index a4596fc66..873dc28c5 100644
--- a/app/assets/stylesheets/navigation/left_menu.scss
+++ b/app/assets/stylesheets/navigation/left_menu.scss
@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  padding: 2rem 1rem;
+  padding: 1.5rem 1rem;
   width: 100%;
 
   .sci--layout--menu-item {
diff --git a/app/assets/stylesheets/navigation/top_menu.scss b/app/assets/stylesheets/navigation/top_menu.scss
index 4ea75535e..9f800d79d 100644
--- a/app/assets/stylesheets/navigation/top_menu.scss
+++ b/app/assets/stylesheets/navigation/top_menu.scss
@@ -28,24 +28,10 @@
     }
   }
 
-  .sci--navigation--top-menu-teams {
-    height: 36px;
-    margin-left: 2em;
-    width: 220px;
-  }
-
   .sci--navigation--top-menu-search {
     margin-left: auto;
     margin-right: 1em;
     width: 240px;
-
-    input {
-      border-color: $color-alto;
-    }
-
-    .sn-icon {
-      color: $color-silver-chalice;
-    }
   }
 
   .sci--navigation--top-menu-user {
diff --git a/app/assets/stylesheets/shared/select.scss b/app/assets/stylesheets/shared/select.scss
index fa65313a5..38efa96db 100644
--- a/app/assets/stylesheets/shared/select.scss
+++ b/app/assets/stylesheets/shared/select.scss
@@ -1,15 +1,17 @@
 .sn-select {
-  border: 1px solid;
-  border-color: var(--sn-grey);
-  border-radius: 4px;
+  align-items: center;
+  border: $border-default;
+  border-color: var(--sn-light-grey);
+  border-radius: $border-radius-default;
+  box-sizing: border-box;
   cursor: pointer;
-  padding: .5em;
+  display: flex;
+  padding: .5rem .625rem .5rem 1rem;
   position: relative;
 
   &.sn-select--blank {
     .sn-select__value {
       color: var(--sn-grey);
-      font-style: italic;
     }
   }
 
@@ -26,11 +28,11 @@
   .sn-select__value {
     all: unset;
     display: inline-block;
+    flex-grow: 1;
+    line-height: 1.625rem;
     overflow: hidden;
-    padding-right: 1.5em;
     text-overflow: ellipsis;
     white-space: nowrap;
-    width: calc(100% - 1.5em);
   }
 
   &:hover {
@@ -51,12 +53,6 @@
     display: none;
   }
 
-  .sn-select__caret {
-    position: absolute;
-    right: 1em;
-    top: 1.1em;
-  }
-
   .sn-select__search-input {
     background: transparent;
     border: 0;
@@ -75,10 +71,6 @@
       display: block;
     }
 
-    .sn-select__caret {
-      transform: rotate(180deg);
-    }
-
     .sn-select__options {
       background: var(--sn-white);
       border-bottom-left-radius: 4px;
@@ -88,15 +80,15 @@
       left: 0;
       max-height: 300px;
       overflow: hidden;
-      overflow-y: scroll;
-      top: 2.5em;
+      top: 2.5rem;
       width: 100%;
       z-index: 9999;
     }
 
     .sn-select__option {
-      padding: .5em;
+      line-height: 1.75rem;
       overflow: hidden;
+      padding: .5rem 1rem;
       text-overflow: ellipsis;
       white-space: nowrap;
       width: calc(100%);
@@ -108,8 +100,7 @@
     }
 
     .sn-select__option:hover {
-      background: var(--sn-blue);
-      color: var(--sn-white);
+      background: var(--sn-super-light-grey);
     }
   }
 }
diff --git a/app/assets/stylesheets/tailwind/inputs.css b/app/assets/stylesheets/tailwind/inputs.css
new file mode 100644
index 000000000..e41eea7ca
--- /dev/null
+++ b/app/assets/stylesheets/tailwind/inputs.css
@@ -0,0 +1,27 @@
+@layer components {
+  .sci-input-container-v2 {
+    @apply relative h-[2.75rem] flex items-center;
+  }
+
+  .sci-input-container-v2 input {
+    @apply w-full h-full bg-transparent p-0.5 border rounded outline-none absolute top-0;
+    border-color: var(--sn-sleepy-grey);
+  }
+
+  .sci-input-container-v2 input::placeholder {
+    color: var(--sn-sleepy-grey);
+  }
+
+  .sci-input-container-v2 input:focus {
+    border-color: var(--sn-science-blue);
+  }
+
+  .sci-input-container-v2 .sn-icon {
+    @apply m-2;
+    color: var(--sn-black)
+  }
+
+  .sci-input-container-v2.left-icon input {
+    @apply pl-10;
+  }
+}
diff --git a/app/controllers/navigations_controller.rb b/app/controllers/navigations_controller.rb
index a0ac115b4..50189c7f8 100644
--- a/app/controllers/navigations_controller.rb
+++ b/app/controllers/navigations_controller.rb
@@ -6,6 +6,7 @@ class NavigationsController < ApplicationController
   def top_menu
     render json:  {
       root_url: root_path,
+      team_switch_url: switch_users_settings_teams_path,
       current_team: current_team&.id,
       search_url: search_path,
       teams: teams,
@@ -25,11 +26,10 @@ class NavigationsController < ApplicationController
 
   def teams
     current_user.teams.order(:name).map do |t|
-      {
-        label: t.name,
-        value: t.id,
-        params: { switch_url: switch_users_settings_team_path(t) }
-      }
+      [
+        t.id,
+        t.name
+      ]
     end
   end
 
diff --git a/app/controllers/users/settings/teams_controller.rb b/app/controllers/users/settings/teams_controller.rb
index 7a99f75ac..8a1620542 100644
--- a/app/controllers/users/settings/teams_controller.rb
+++ b/app/controllers/users/settings/teams_controller.rb
@@ -132,7 +132,7 @@ module Users
       end
 
       def switch
-        team = current_user.teams.find_by(id: params[:id])
+        team = current_user.teams.find_by(id: params[:team_id])
 
         if team && current_user.update(current_team_id: team.id)
           flash[:success] = t('users.settings.changed_team_flash',
diff --git a/app/javascript/vue/navigation/top_menu.vue b/app/javascript/vue/navigation/top_menu.vue
index 54101641e..68244da35 100644
--- a/app/javascript/vue/navigation/top_menu.vue
+++ b/app/javascript/vue/navigation/top_menu.vue
@@ -1,17 +1,18 @@
 <template>
   <div class="sci--navigation--top-menu-container">
-    <div v-if="currentTeam" class="sci--navigation--top-menu-teams">
-      <DropdownSelector
-        :selectedValue="currentTeam"
+
+    <div v-if="currentTeam" class="w-64">
+      <Select
+        :value="currentTeam"
         :options="teams"
-        :disableSearch="true"
-        :selectorId="`sciNavigationTeamSelector`"
-        :labelHTML="true"
-        @dropdown:changed="switchTeam"
-      />
+        :placeholder="'test'"
+        :noOptionsPlaceholder="'test'"
+        v-bind:disabled="false"
+        @change="switchTeam"
+      ></Select>
     </div>
-    <div v-if="user" class="sci--navigation--top-menu-search left-icon sci-input-container" :class="{'disabled' : !currentTeam}">
-      <input type="text" class="sci-input-field" :placeholder="i18n.t('nav.search')" @change="searchValue"/>
+    <div v-if="user" class="sci--navigation--top-menu-search left-icon sci-input-container-v2" :class="{'disabled' : !currentTeam}">
+      <input type="text" :placeholder="i18n.t('nav.search')" @change="searchValue"/>
       <i class="sn-icon sn-icon-search"></i>
     </div>
     <div v-if="user" class="dropdown">
@@ -83,12 +84,14 @@
 <script>
   import NotificationsFlyout from './notifications/notifications_flyout.vue'
   import DropdownSelector from '../shared/dropdown_selector.vue'
+  import Select from "../shared/select.vue";
 
   export default {
     name: 'TopMenuContainer',
     components: {
       DropdownSelector,
-      NotificationsFlyout
+      NotificationsFlyout,
+      Select
     },
     props: {
       url: String,
@@ -98,6 +101,7 @@
     data() {
       return {
         rootUrl: null,
+        teamSwitchUrl: null,
         currentTeam: null,
         teams: null,
         searchUrl: null,
@@ -127,6 +131,7 @@
       fetchData() {
         $.get(this.url, (result) => {
           this.rootUrl = result.root_url;
+          this.teamSwitchUrl = result.team_switch_url;
           this.currentTeam = result.current_team;
           this.teams = result.teams;
           this.searchUrl = result.search_url;
@@ -139,11 +144,12 @@
       switchTeam(team) {
         if (this.currentTeam == team) return;
 
-        let newTeam = this.teams.find(e => e.value == team);
+        let newTeam = this.teams.find(e => e[0] == team);
+        console.log(newTeam)
 
         if (!newTeam) return;
 
-        $.post(newTeam.params.switch_url, (result) => {
+        $.post(this.teamSwitchUrl, {team_id: team}, (result) => {
           this.currentTeam = result.currentTeam
           dropdownSelector.selectValues('#sciNavigationTeamSelector', this.currentTeam);
           $('body').attr('data-current-team-id', this.currentTeam);
diff --git a/app/javascript/vue/shared/select.vue b/app/javascript/vue/shared/select.vue
index 132ae5b26..83788fcf3 100644
--- a/app/javascript/vue/shared/select.vue
+++ b/app/javascript/vue/shared/select.vue
@@ -4,9 +4,13 @@
       <button ref="focusElement" class="sn-select__value">
         <span>{{ valueLabel || (placeholder || i18n.t('general.select')) }}</span>
       </button>
-      <span class="sn-select__caret caret"></span>
+      <i class="sn-icon" :class="{ 'sn-icon-down': !isOpen, 'sn-icon-up': isOpen}"></i>
     </slot>
-    <div ref="optionsContainer" class="sn-select__options" :style="optionPositionStyle">
+    <perfect-scrollbar
+      ref="optionsContainer"
+      :style="optionPositionStyle"
+      class="sn-select__options scroll-container"
+    >
       <template v-if="options.length">
         <div
           v-for="option in options"
@@ -22,12 +26,13 @@
         >
           {{ this.noOptionsPlaceholder }}
         </div>
-      </template> 
-    </div>
+      </template>
+    </perfect-scrollbar>
   </div>
 </template>
-
 <script>
+  import PerfectScrollbar from 'vue2-perfect-scrollbar';
+
   export default {
     name: 'Select',
     props: {
@@ -38,6 +43,7 @@
       noOptionsPlaceholder: { type: String },
       disabled: { type: Boolean, default: false }
     },
+    comments: { PerfectScrollbar },
     data() {
       return {
         isOpen: false,
diff --git a/app/javascript/vue/shared/select_search.vue b/app/javascript/vue/shared/select_search.vue
index 298cfca36..74b43d92c 100644
--- a/app/javascript/vue/shared/select_search.vue
+++ b/app/javascript/vue/shared/select_search.vue
@@ -13,7 +13,7 @@
   >
     <input ref="focusElement" v-model="query" type="text" class="sn-select__search-input" :placeholder="searchPlaceholder" />
     <span class="sn-select__value">{{ valueLabel || (placeholder || i18n.t('general.select')) }}</span>
-    <span class="sn-select__caret caret"></span>
+    <i class="sn-icon" :class="{ 'sn-icon-down': !isOpen, 'sn-icon-up': isOpen}"></i>
   </Select>
 </template>
 
diff --git a/config/routes.rb b/config/routes.rb
index 6782e3b2a..253b8d88b 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -143,7 +143,7 @@ Rails.application.routes.draw do
     namespace :users do
       namespace :settings do
         resources :teams, only: [] do
-          member do
+          collection do
             post :switch
           end
         end