diff --git a/css/_atlaskit_overrides.scss b/css/_atlaskit_overrides.scss
index 47de9b121..b722e6516 100644
--- a/css/_atlaskit_overrides.scss
+++ b/css/_atlaskit_overrides.scss
@@ -18,23 +18,23 @@
     /**
      * The text color of the selected tab and hovered tabs.
      */
-    li.bcVmZW,
-    li.bcVmZW:hover,
-    li.kheoEp:hover {
+    .bVobOt,
+    .bVobOt:hover,
+    .ebveIl:hover {
         color: #172B4D;
     }
 
     /**
      * The color of the inactive tab text.
      */
-    li.kheoEp {
+    .ebveIl {
         color: #FFFFFF;
     }
 
     /**
      * The color of the underline of a selected tab.
      */
-    li>span.kByArU {
+    .kByArU {
         background-color: #172B4D;
     }
 }
@@ -54,4 +54,4 @@
     .gBLqhw[data-role=droplistContent] {
         border: 1px solid #455166;
     }
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
index c4f0aef86..2d342ecdc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -420,37 +420,16 @@
       }
     },
     "@atlaskit/tabs": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@atlaskit/tabs/-/tabs-4.0.1.tgz",
-      "integrity": "sha1-vM2WQ8nSO9kR+0GCK4U1oYJHHM8=",
+      "version": "8.0.8",
+      "resolved": "https://registry.npmjs.org/@atlaskit/tabs/-/tabs-8.0.8.tgz",
+      "integrity": "sha512-zNzF/vwazWWrSHLLleIVzuRszALy9xRN7jAaS/u1aaJwrGF5exYbtQ4RZQ9Bx46d7p4HLx3mb+/74GmR6yJ6Gw==",
       "requires": {
-        "@atlaskit/theme": "^2.0.0",
-        "@atlaskit/util-shared-styles": "^1.0.0",
+        "@atlaskit/analytics-next": "^3.0.6",
+        "@atlaskit/theme": "^6.0.2",
         "classnames": "^2.2.5",
         "css-element-queries": "^0.3.2",
         "debounce": "^1.0.0",
-        "keycode": "^2.1.4",
-        "prop-types": "^15.5.10",
-        "styled-components": "^1.3.0"
-      },
-      "dependencies": {
-        "@atlaskit/theme": {
-          "version": "2.4.1",
-          "resolved": "http://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz",
-          "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==",
-          "requires": {
-            "prop-types": "^15.5.10",
-            "styled-components": "1.4.6 - 3"
-          }
-        },
-        "@atlaskit/util-shared-styles": {
-          "version": "1.7.1",
-          "resolved": "https://registry.npmjs.org/@atlaskit/util-shared-styles/-/util-shared-styles-1.7.1.tgz",
-          "integrity": "sha1-CDLLbMF5dDHEzPZ9F4qkES3zBeI=",
-          "requires": {
-            "babel-runtime": "^6.11.6"
-          }
-        }
+        "keycode": "^2.1.7"
       }
     },
     "@atlaskit/tag": {
@@ -5229,9 +5208,9 @@
       "dev": true
     },
     "debounce": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.1.0.tgz",
-      "integrity": "sha512-ZQVKfRVlwRfD150ndzEK8M90ABT+Y/JQKs4Y7U4MXdpuoUkkrr4DwKbVux3YjylA5bUMUj0Nc3pMxPJX6N2QQQ=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
+      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
     },
     "debug": {
       "version": "2.6.9",
diff --git a/package.json b/package.json
index 14fad85e1..3ad88dcf5 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "@atlaskit/modal-dialog": "6.0.12",
     "@atlaskit/multi-select": "11.0.6",
     "@atlaskit/spinner": "9.0.8",
-    "@atlaskit/tabs": "4.0.1",
+    "@atlaskit/tabs": "8.0.8",
     "@atlaskit/theme": "6.0.2",
     "@atlaskit/tooltip": "12.0.14",
     "@microsoft/microsoft-graph-client": "1.1.0",
diff --git a/react/features/base/dialog/components/DialogWithTabs.web.js b/react/features/base/dialog/components/DialogWithTabs.web.js
index 49d010169..a9e62cb6a 100644
--- a/react/features/base/dialog/components/DialogWithTabs.web.js
+++ b/react/features/base/dialog/components/DialogWithTabs.web.js
@@ -53,6 +53,11 @@ export type Props = {
  */
 type State = {
 
+    /**
+     * The index of the tab that should be displayed.
+     */
+    selectedTab: number,
+
     /**
      * An array of the states of the tabs.
      */
@@ -74,9 +79,11 @@ class DialogWithTabs extends Component<Props, State> {
     constructor(props: Props) {
         super(props);
         this.state = {
+            selectedTab: this.props.defaultTab || 0,
             tabStates: this.props.tabs.map(tab => tab.props)
         };
         this._onSubmit = this._onSubmit.bind(this);
+        this._onTabSelected = this._onTabSelected.bind(this);
         this._onTabStateChange = this._onTabStateChange.bind(this);
     }
 
@@ -125,13 +132,29 @@ class DialogWithTabs extends Component<Props, State> {
         return { ...currentTabState };
     }
 
+    _onTabSelected: (Object, number) => void;
+
+    /**
+     * Callback invoked when the desired tab to display should be changed.
+     *
+     * @param {Object} tab - The configuration passed into atlaskit tabs to
+     * describe how to display the selected tab.
+     * @param {number} tabIndex - The index of the tab within the array of
+     * displayed tabs.
+     * @private
+     * @returns {void}
+     */
+    _onTabSelected(tab, tabIndex) { // eslint-disable-line no-unused-vars
+        this.setState({ selectedTab: tabIndex });
+    }
+
     /**
      * Renders the tabs from the tab information passed on props.
      *
      * @returns {void}
      */
     _renderTabs() {
-        const { defaultTab = 0, t, tabs } = this.props;
+        const { t, tabs } = this.props;
 
         if (tabs.length === 1) {
             return this._renderTab({
@@ -143,6 +166,8 @@ class DialogWithTabs extends Component<Props, State> {
         if (tabs.length > 1) {
             return (
                 <Tabs
+                    onSelect = { this._onTabSelected }
+                    selected = { this.state.selectedTab }
                     tabs = {
                         tabs.map(({ component, label, styles }, idx) => {
                             return {
@@ -151,7 +176,6 @@ class DialogWithTabs extends Component<Props, State> {
                                     styles,
                                     tabId: idx
                                 }),
-                                defaultSelected: defaultTab === idx,
                                 label: t(label)
                             };
                         })
diff --git a/react/features/desktop-picker/components/DesktopPicker.js b/react/features/desktop-picker/components/DesktopPicker.js
index c896d9603..994ea59f0 100644
--- a/react/features/desktop-picker/components/DesktopPicker.js
+++ b/react/features/desktop-picker/components/DesktopPicker.js
@@ -81,6 +81,7 @@ class DesktopPicker extends Component<*, *> {
 
     state = {
         selectedSource: {},
+        selectedTab: 0,
         sources: {},
         types: []
     };
@@ -283,15 +284,19 @@ class DesktopPicker extends Component<*, *> {
      * Stores the selected tab and updates the selected source via
      * {@code _getSelectedSource}.
      *
-     * @param {int} idx - The index of the selected tab.
+     * @param {Object} tab - The configuration passed into atlaskit tabs to
+     * describe how to display the selected tab.
+     * @param {number} tabIndex - The index of the tab within the array of
+     * displayed tabs.
      * @returns {void}
      */
-    _onTabSelected(idx) {
+    _onTabSelected(tab, tabIndex) { // eslint-disable-line no-unused-vars
         const { types, sources } = this.state;
 
-        this._selectedTabType = types[idx];
+        this._selectedTabType = types[tabIndex];
         this.setState({
-            selectedSource: this._getSelectedSource(sources)
+            selectedSource: this._getSelectedSource(sources),
+            selectedTab: tabIndex
         });
     }
 
@@ -315,7 +320,6 @@ class DesktopPicker extends Component<*, *> {
                             selectedSourceId = { selectedSource.id }
                             sources = { sources[type] }
                             type = { type } />,
-                        defaultSelected: type === DEFAULT_TAB_TYPE,
                         label: t(TAB_LABELS[type])
                     };
                 });
@@ -323,6 +327,7 @@ class DesktopPicker extends Component<*, *> {
         return (
             <Tabs
                 onSelect = { this._onTabSelected }
+                selected = { this.state.selectedTab }
                 tabs = { tabs } />);
     }
 
diff --git a/react/features/device-selection/components/AudioInputPreview.js b/react/features/device-selection/components/AudioInputPreview.js
index 98306b23c..132225c0e 100644
--- a/react/features/device-selection/components/AudioInputPreview.js
+++ b/react/features/device-selection/components/AudioInputPreview.js
@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 
 import { JitsiTrackEvents } from '../../base/lib-jitsi-meet';
 
 /**
  * React component for displaying a audio level meter for a JitsiLocalTrack.
  */
-class AudioInputPreview extends PureComponent {
+class AudioInputPreview extends Component {
     /**
      * AudioInputPreview component's property types.
      *
@@ -53,8 +53,10 @@ class AudioInputPreview extends PureComponent {
      * @returns {void}
      */
     componentWillReceiveProps(nextProps) {
-        this._listenForAudioUpdates(nextProps.track);
-        this._updateAudioLevel(0);
+        if (nextProps.track !== this.props.track) {
+            this._listenForAudioUpdates(nextProps.track);
+            this._updateAudioLevel(0);
+        }
     }
 
     /**
diff --git a/react/features/welcome/components/WelcomePage.web.js b/react/features/welcome/components/WelcomePage.web.js
index 258ea7d49..d321b2b81 100644
--- a/react/features/welcome/components/WelcomePage.web.js
+++ b/react/features/welcome/components/WelcomePage.web.js
@@ -43,7 +43,8 @@ class WelcomePage extends AbstractWelcomePage {
             ...this.state,
 
             generateRoomnames:
-                interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE
+                interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE,
+            selectedTab: 0
         };
 
         /**
@@ -70,6 +71,7 @@ class WelcomePage extends AbstractWelcomePage {
         this._onRoomChange = this._onRoomChange.bind(this);
         this._setAdditionalContentRef
             = this._setAdditionalContentRef.bind(this);
+        this._onTabSelected = this._onTabSelected.bind(this);
     }
 
     /**
@@ -198,6 +200,20 @@ class WelcomePage extends AbstractWelcomePage {
         super._onRoomChange(event.target.value);
     }
 
+    /**
+     * Callback invoked when the desired tab to display should be changed.
+     *
+     * @param {Object} tab - The configuration passed into atlaskit tabs to
+     * describe how to display the selected tab.
+     * @param {number} tabIndex - The index of the tab within the array of
+     * displayed tabs.
+     * @private
+     * @returns {void}
+     */
+    _onTabSelected(tab, tabIndex) { // eslint-disable-line no-unused-vars
+        this.setState({ selectedTab: tabIndex });
+    }
+
     /**
      * Renders tabs to show previous meetings and upcoming calendar events. The
      * tabs are purposefully hidden on mobile browsers.
@@ -219,8 +235,7 @@ class WelcomePage extends AbstractWelcomePage {
         if (CalendarList) {
             tabs.push({
                 label: t('welcomepage.calendar'),
-                content: <CalendarList />,
-                defaultSelected: true
+                content: <CalendarList />
             });
         }
 
@@ -235,7 +250,10 @@ class WelcomePage extends AbstractWelcomePage {
                 <div className = 'welcome-page-settings'>
                     <SettingsButton defaultTab = { SETTINGS_TABS.CALENDAR } />
                 </div>
-                <Tabs tabs = { tabs } />
+                <Tabs
+                    onSelect = { this._onTabSelected }
+                    selected = { this.state.selectedTab }
+                    tabs = { tabs } />
             </div>);
     }