diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b47bce231..f68aa387b5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## vNext
+
+### Chores
+
+- Refactor topbar to use relative position ([PR 2782](https://github.com/input-output-hk/daedalus/pull/2782))
+
 ## 4.6.0
 
 ### Features
diff --git a/source/renderer/app/components/layout/TopBar.scss b/source/renderer/app/components/layout/TopBar.scss
index a4158f6d2d..d37f9facf1 100644
--- a/source/renderer/app/components/layout/TopBar.scss
+++ b/source/renderer/app/components/layout/TopBar.scss
@@ -4,14 +4,9 @@
   display: flex;
   height: 84px;
   padding: 0 26px;
-  position: relative;
   z-index: 100;
 
   &.withoutWallet {
-    /* background: var(--theme-topbar-background-color)
-      url('../../assets/images/header-logo.svg') no-repeat center !important;
-    background-size: 61px !important; */
-
     .headerLogo {
       margin: auto;
       width: 61px;
@@ -25,24 +20,21 @@
 
   &.withWallet {
     .walletInfo {
-      align-items: center;
       color: var(--theme-topbar-wallet-info-color);
       display: flex;
       flex-direction: column;
       font-family: var(--font-regular);
-      max-width: 60%;
+      overflow: hidden;
       text-align: center;
       user-select: text;
 
       .walletName {
         -webkit-box-orient: vertical;
         color: var(--theme-topbar-wallet-name-color);
-        display: inline;
         font-size: 21px;
         line-height: 25px;
         margin-bottom: 4px;
         overflow: hidden;
-        position: relative;
         text-overflow: ellipsis;
         white-space: nowrap;
         width: 100%;
@@ -64,8 +56,10 @@
     align-items: center;
     cursor: pointer;
     display: flex;
+    flex-shrink: 0;
     height: 50px;
     justify-content: center;
+    margin-right: 26px;
     width: 50px;
 
     .sidebarIcon {
@@ -80,25 +74,14 @@
   }
 
   .topBarTitle {
-    align-items: center;
-    display: flex;
-    flex-grow: 1;
-    justify-content: center;
-    left: 70px;
-    position: absolute;
-    width: calc(100% - 230px);
+    margin: auto;
+    min-width: 0;
   }
 
   .rectangle {
-    &.hasTadaIcon {
-      right: 220px;
-    }
-
-    background-color: var(--theme-node-sync-icon-color);
+    border-right: 1px solid var(--theme-node-sync-icon-color);
     height: 12px;
+    margin-right: 28px;
     opacity: 0.3;
-    position: absolute;
-    right: 162px;
-    width: 1px;
   }
 }
diff --git a/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.js b/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.js
index 337089dd9d..6dd4f46148 100644
--- a/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.js
+++ b/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.js
@@ -188,12 +188,14 @@ export default class SyncingConnecting extends Component<Props, State> {
             />
           )}
           {showNewsFeedIcon && (
-            <NewsFeedIcon
-              onNewsFeedIconClick={onToggleNewsFeedIconClick}
-              newsFeedIconClass={newsFeedIconStyles}
-              hasNotification={hasNotification}
-              hasUpdate={hasUpdate}
-            />
+            <div className={styles.newsFeedContainer}>
+              <NewsFeedIcon
+                onNewsFeedIconClick={onToggleNewsFeedIconClick}
+                newsFeedIconClass={newsFeedIconStyles}
+                hasNotification={hasNotification}
+                hasUpdate={hasUpdate}
+              />
+            </div>
           )}
           <LogosDisplay isConnected={isConnected} />
         </div>
diff --git a/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.scss b/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.scss
index 1088d3fe52..3615f77948 100644
--- a/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.scss
+++ b/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.scss
@@ -13,6 +13,15 @@
     z-index: 2000;
   }
 
+  .newsFeedContainer {
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 26px;
+    padding-top: 20px;
+    position: absolute;
+    width: 100%;
+  }
+
   :global {
     .connectingScreen {
       span svg path {
diff --git a/source/renderer/app/components/widgets/NewsFeedIcon.scss b/source/renderer/app/components/widgets/NewsFeedIcon.scss
index d737e47e72..96034a2a88 100644
--- a/source/renderer/app/components/widgets/NewsFeedIcon.scss
+++ b/source/renderer/app/components/widgets/NewsFeedIcon.scss
@@ -1,7 +1,5 @@
 .component {
-  position: absolute;
-  right: 29px;
-  top: 20px;
+  position: relative;
 
   &.notificationDot {
     @extend .dot;
diff --git a/source/renderer/app/components/widgets/NodeSyncStatusIcon.js b/source/renderer/app/components/widgets/NodeSyncStatusIcon.js
index 7d858b74db..3fd256c578 100644
--- a/source/renderer/app/components/widgets/NodeSyncStatusIcon.js
+++ b/source/renderer/app/components/widgets/NodeSyncStatusIcon.js
@@ -21,7 +21,6 @@ const messages = defineMessages({
 type Props = {
   isSynced: boolean,
   syncPercentage: number,
-  hasTadaIcon?: boolean,
 };
 
 export default class NodeSyncStatusIcon extends Component<Props> {
@@ -30,13 +29,12 @@ export default class NodeSyncStatusIcon extends Component<Props> {
   };
 
   render() {
-    const { isSynced, syncPercentage, hasTadaIcon } = this.props;
+    const { isSynced, syncPercentage } = this.props;
     const { intl } = this.context;
     const statusIcon = isSynced ? syncedIcon : spinnerIcon;
     const componentClasses = classNames([
       styles.component,
       isSynced ? styles.synced : styles.syncing,
-      hasTadaIcon ? styles.hasTadaIcon : null,
     ]);
     const percentage = syncPercentage.toFixed(syncPercentage === 100 ? 0 : 2);
 
diff --git a/source/renderer/app/components/widgets/NodeSyncStatusIcon.scss b/source/renderer/app/components/widgets/NodeSyncStatusIcon.scss
index 1e2a2c172c..aa731bd275 100644
--- a/source/renderer/app/components/widgets/NodeSyncStatusIcon.scss
+++ b/source/renderer/app/components/widgets/NodeSyncStatusIcon.scss
@@ -1,11 +1,7 @@
 .component {
+  margin-left: 26px;
+  margin-right: 39px;
   overflow: visible;
-  position: absolute;
-  right: 202px;
-
-  &.hasTadaIcon {
-    right: 260px;
-  }
 
   &:hover {
     .info {
diff --git a/source/renderer/app/components/widgets/TadaButton.scss b/source/renderer/app/components/widgets/TadaButton.scss
index 49cae4a4ad..f98cbcd098 100644
--- a/source/renderer/app/components/widgets/TadaButton.scss
+++ b/source/renderer/app/components/widgets/TadaButton.scss
@@ -1,8 +1,8 @@
 .component {
   cursor: pointer;
   font-size: 19px;
-  position: absolute;
-  right: 94px;
+  margin-left: 8px;
+  margin-right: 20px;
   transform-origin: bottom left;
   &.animate {
     animation: animation 0.7s cubic-bezier(0.7, 0, 0.24, 1.01) infinite;
diff --git a/source/renderer/app/containers/TopBarContainer.js b/source/renderer/app/containers/TopBarContainer.js
index 60bfb47d3e..fd00409be8 100644
--- a/source/renderer/app/containers/TopBarContainer.js
+++ b/source/renderer/app/containers/TopBarContainer.js
@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import { observer, inject } from 'mobx-react';
-import classnames from 'classnames';
 import TopBar from '../components/layout/TopBar';
 import NodeSyncStatusIcon from '../components/widgets/NodeSyncStatusIcon';
 import { DiscreetToggleTopBar } from '../features/discreet-mode';
@@ -94,18 +93,9 @@ const TopBarContainer = (
       isShelleyActivated={isShelleyActivated}
     >
       {testnetLabel}
-      <NodeSyncStatusIcon
-        isSynced={isSynced}
-        syncPercentage={syncPercentage}
-        hasTadaIcon={shouldShowTadaIcon}
-      />
-      <span
-        className={classnames(
-          topBarStyles.rectangle,
-          shouldShowTadaIcon && topBarStyles.hasTadaIcon
-        )}
-      />
-      <DiscreetToggleTopBar hasTadaIcon={shouldShowTadaIcon} />
+      <NodeSyncStatusIcon isSynced={isSynced} syncPercentage={syncPercentage} />
+      <span className={topBarStyles.rectangle} />
+      <DiscreetToggleTopBar />
       {shouldShowTadaIcon && (
         <TadaButton
           onClick={onClickTadaButton}
diff --git a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.js b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.js
index 666382b7dd..033f2983e2 100644
--- a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.js
+++ b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.js
@@ -1,6 +1,5 @@
 // @flow
 import React, { useState } from 'react';
-import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import { injectIntl, FormattedHTMLMessage } from 'react-intl';
@@ -12,10 +11,9 @@ import type { Intl } from '../../../../types/i18nTypes';
 
 type Props = {
   intl: Intl,
-  hasTadaIcon?: boolean,
 };
 
-const DiscreetToggleTopBar = ({ intl, hasTadaIcon }: Props) => {
+const DiscreetToggleTopBar = ({ intl }: Props) => {
   const {
     isDiscreetMode,
     isSettingsTooltipEnabled,
@@ -27,7 +25,7 @@ const DiscreetToggleTopBar = ({ intl, hasTadaIcon }: Props) => {
 
   return (
     <div
-      className={classnames(styles.root, hasTadaIcon && styles.hasTadaIcon)}
+      className={styles.root}
       onMouseEnter={() => setVisible(true)}
       onMouseLeave={() => setVisible(false)}
     >
diff --git a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss
index 6e7e5d9676..20e6a9c0dd 100644
--- a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss
+++ b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss
@@ -1,10 +1,5 @@
 .root {
-  position: absolute;
-  right: 91px;
-
-  &.hasTadaIcon {
-    right: 149px;
-  }
+  margin-right: 18px;
 
   .discreetToggle {
     border-radius: 50%;
diff --git a/storybook/stories/_support/StoryLayout.js b/storybook/stories/_support/StoryLayout.js
index 5bd9e1b66e..d41a108644 100644
--- a/storybook/stories/_support/StoryLayout.js
+++ b/storybook/stories/_support/StoryLayout.js
@@ -7,7 +7,6 @@ import { observer, inject } from 'mobx-react';
 import { get } from 'lodash';
 import { action } from '@storybook/addon-actions';
 import { select, boolean } from '@storybook/addon-knobs';
-import classNames from 'classnames';
 import { isShelleyTestnetTheme } from './utils';
 
 // Assets and helpers
@@ -228,15 +227,9 @@ export default class StoryLayout extends Component<Props> {
         syncPercentage={100}
         isProduction
         isMainnet
-        {...(boolean('hasTadaIcon', true) ? { hasTadaIcon: true } : {})}
       />
-      <span
-        className={classNames(
-          topBarStyles.rectangle,
-          boolean('hasTadaIcon') && topBarStyles.hasTadaIcon
-        )}
-      />
-      <DiscreetToggleTopBar hasTadaIcon={boolean('hasTadaIcon')} />
+      <span className={topBarStyles.rectangle} />
+      <DiscreetToggleTopBar />
       {boolean('hasTadaIcon') && (
         <TadaButton onClick={action('onClickTadaButton')} shouldAnimate />
       )}
diff --git a/storybook/stories/nodes/environment/TopBarEnvironment.stories.js b/storybook/stories/nodes/environment/TopBarEnvironment.stories.js
index 45ed4af2d3..aafb20717a 100644
--- a/storybook/stories/nodes/environment/TopBarEnvironment.stories.js
+++ b/storybook/stories/nodes/environment/TopBarEnvironment.stories.js
@@ -3,7 +3,6 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
-import classNames from 'classnames';
 import StoryDecorator from '../../_support/StoryDecorator';
 import StoryProvider from '../../_support/StoryProvider';
 import SidebarLayout from '../../../../source/renderer/app/components/layout/SidebarLayout';
@@ -33,12 +32,9 @@ const topBarTestEnv = (currentTheme) => (
       syncPercentage={100}
       isProduction={false}
       isMainnet={false}
-      hasTadaIcon
     />
-    <span
-      className={classNames(topBarStyles.rectangle, topBarStyles.hasTadaIcon)}
-    />
-    <DiscreetToggleTopBar hasTadaIcon />
+    <span className={topBarStyles.rectangle} />
+    <DiscreetToggleTopBar />
     <TadaButton onClick={action('onClickTadaButton')} shouldAnimate />
     <NewsFeedIcon
       onNewsFeedIconClick={action('onNewsFeedIconClick')}
@@ -63,12 +59,9 @@ const topBarStagingEnv = (currentTheme) => (
       syncPercentage={100}
       isProduction={false}
       isMainnet={false}
-      hasTadaIcon
-    />
-    <span
-      className={classNames(topBarStyles.rectangle, topBarStyles.hasTadaIcon)}
     />
-    <DiscreetToggleTopBar hasTadaIcon />
+    <span className={topBarStyles.rectangle} />
+    <DiscreetToggleTopBar />
     <TadaButton onClick={action('onClickTadaButton')} shouldAnimate />
     <NewsFeedIcon
       onNewsFeedIconClick={action('onNewsFeedIconClick')}
@@ -87,17 +80,9 @@ const topBarProductionEnv = (currentTheme) => (
     isShelleyActivated={isShelleyTestnetTheme(currentTheme)}
     isAlonzoActivated={boolean('isAlonzoActivated', false)}
   >
-    <NodeSyncStatusIcon
-      isSynced
-      syncPercentage={100}
-      isProduction
-      isMainnet
-      hasTadaIcon
-    />
-    <span
-      className={classNames(topBarStyles.rectangle, topBarStyles.hasTadaIcon)}
-    />
-    <DiscreetToggleTopBar hasTadaIcon />
+    <NodeSyncStatusIcon isSynced syncPercentage={100} isProduction isMainnet />
+    <span className={topBarStyles.rectangle} />
+    <DiscreetToggleTopBar />
     <TadaButton onClick={action('onClickTadaButton')} shouldAnimate />
     <NewsFeedIcon
       onNewsFeedIconClick={action('onNewsFeedIconClick')}
diff --git a/storybook/stories/staking/CountdownParty.stories.js b/storybook/stories/staking/CountdownParty.stories.js
index 8439c1a1b5..9b5a4c3c3a 100644
--- a/storybook/stories/staking/CountdownParty.stories.js
+++ b/storybook/stories/staking/CountdownParty.stories.js
@@ -42,7 +42,6 @@ storiesOf('Decentralization | Countdown', module)
             syncPercentage={100}
             isProduction
             isMainnet
-            hasTadaIcon={isAlonzoActivated}
           />
           {isAlonzoActivated && (
             <TadaButton