diff --git a/frontend/src/layout/navigation-3000/Navigation.tsx b/frontend/src/layout/navigation-3000/Navigation.tsx
index 16b4e9fade6483..bbbb4b32ff740d 100644
--- a/frontend/src/layout/navigation-3000/Navigation.tsx
+++ b/frontend/src/layout/navigation-3000/Navigation.tsx
@@ -14,7 +14,6 @@ import { ProjectNotice } from '../navigation/ProjectNotice'
 import { MinimalNavigation } from './components/MinimalNavigation'
 import { Navbar } from './components/Navbar'
 import { Sidebar } from './components/Sidebar'
-import { TopBar } from './components/TopBar'
 import { navigation3000Logic } from './navigationLogic'
 import { SidePanel } from './sidepanel/SidePanel'
 import { themeLogic } from './themeLogic'
@@ -51,8 +50,6 @@ export function Navigation({
                 {activeNavbarItem && <Sidebar key={activeNavbarItem.identifier} navbarItem={activeNavbarItem} />}
             </FlaggedFeature>
             <main>
-                <TopBar />
-
                 <div
                     className={clsx(
                         'Navigation3000__scene',
diff --git a/frontend/src/layout/navigation-3000/components/TopBar.scss b/frontend/src/layout/navigation-3000/components/TopBar.scss
index eb8d8a855fa459..3d6aca2b4aa077 100644
--- a/frontend/src/layout/navigation-3000/components/TopBar.scss
+++ b/frontend/src/layout/navigation-3000/components/TopBar.scss
@@ -1,5 +1,4 @@
 // TODO: Remove legacy scss files
-@import '../../navigation/TopBar/TopBar';
 @import '../../navigation/SideBar/SideBar';
 
 .TopBar3000 {
diff --git a/frontend/src/layout/navigation/TopBar/Announcement.scss b/frontend/src/layout/navigation/TopBar/Announcement.scss
new file mode 100644
index 00000000000000..31e722dd2682bb
--- /dev/null
+++ b/frontend/src/layout/navigation/TopBar/Announcement.scss
@@ -0,0 +1,51 @@
+@import '../../../styles/mixins';
+
+.Announcement {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    height: 3rem;
+    padding: 0 1rem 0 0.5rem; // padding is larger on the right to accommodate the close button
+    font-size: 1rem;
+    font-weight: 500;
+    color: white;
+    text-align: center;
+    background: #000;
+    transition: margin 200ms ease;
+
+    &.Announcement--hidden {
+        margin-top: -3rem;
+    }
+
+    p {
+        margin: 0;
+    }
+
+    b,
+    strong {
+        font-weight: 700;
+    }
+
+    a {
+        color: var(--brand-red);
+        text-decoration: underline;
+    }
+
+    @include screen($sm) {
+        padding: 0 1rem;
+    }
+}
+
+.Announcement__close {
+    position: absolute;
+    right: 0.5rem;
+    display: flex;
+    padding: 0.125rem;
+    font-size: 1.25rem;
+    cursor: pointer;
+
+    @include screen($sm) {
+        right: 1rem;
+    }
+}
diff --git a/frontend/src/layout/navigation/TopBar/Announcement.tsx b/frontend/src/layout/navigation/TopBar/Announcement.tsx
index 252ae99ecf6105..294c1cfeb9f4f6 100644
--- a/frontend/src/layout/navigation/TopBar/Announcement.tsx
+++ b/frontend/src/layout/navigation/TopBar/Announcement.tsx
@@ -1,3 +1,5 @@
+import './Announcement.scss'
+
 import { LemonButton, Link } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
diff --git a/frontend/src/layout/navigation/TopBar/SitePopover.scss b/frontend/src/layout/navigation/TopBar/SitePopover.scss
new file mode 100644
index 00000000000000..079c647e359f60
--- /dev/null
+++ b/frontend/src/layout/navigation/TopBar/SitePopover.scss
@@ -0,0 +1,46 @@
+@import '../../../styles/mixins';
+
+.SitePopover {
+    min-width: 16rem;
+    max-width: 22rem;
+}
+
+.SitePopover__side-link {
+    margin-left: 0.5rem;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--primary-3000);
+    text-align: right;
+}
+
+.SitePopover__section {
+    width: 100%;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--border);
+
+    &:first-child {
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+        border-bottom: none;
+    }
+}
+
+.AccountInfo {
+    display: flex;
+    align-items: center;
+}
+
+.AccountInfo__identification {
+    width: 100%;
+    margin-left: 0.5rem;
+    overflow: hidden;
+}
+
+.AccessLevelIndicator {
+    margin-left: 0.5rem;
+    font-size: 0.625rem;
+    text-transform: uppercase;
+}
diff --git a/frontend/src/layout/navigation/TopBar/SitePopover.tsx b/frontend/src/layout/navigation/TopBar/SitePopover.tsx
index ebc2af55ed78d4..8b6badc11ff046 100644
--- a/frontend/src/layout/navigation/TopBar/SitePopover.tsx
+++ b/frontend/src/layout/navigation/TopBar/SitePopover.tsx
@@ -1,3 +1,5 @@
+import './SitePopover.scss'
+
 import { IconFeatures, IconLive } from '@posthog/icons'
 import { LemonButtonPropsBase } from '@posthog/lemon-ui'
 import clsx from 'clsx'
diff --git a/frontend/src/layout/navigation/TopBar/TopBar.scss b/frontend/src/layout/navigation/TopBar/TopBar.scss
deleted file mode 100644
index d494fa97d1543f..00000000000000
--- a/frontend/src/layout/navigation/TopBar/TopBar.scss
+++ /dev/null
@@ -1,150 +0,0 @@
-@import '../../../styles/mixins';
-
-.Announcement {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    height: 3rem;
-    padding: 0 1rem 0 0.5rem; // padding is larger on the right to accommodate the close button
-    font-size: 1rem;
-    font-weight: 500;
-    color: white;
-    text-align: center;
-    background: #000;
-    transition: margin 200ms ease;
-
-    &.Announcement--hidden {
-        margin-top: -3rem;
-    }
-
-    p {
-        margin: 0;
-    }
-
-    b,
-    strong {
-        font-weight: 700;
-    }
-
-    a {
-        color: var(--brand-red);
-        text-decoration: underline;
-    }
-
-    @include screen($sm) {
-        padding: 0 1rem;
-    }
-}
-
-.Announcement__close {
-    position: absolute;
-    right: 0.5rem;
-    display: flex;
-    padding: 0.125rem;
-    font-size: 1.25rem;
-    cursor: pointer;
-
-    @include screen($sm) {
-        right: 1rem;
-    }
-}
-
-.SitePopover {
-    min-width: 16rem;
-    max-width: 22rem;
-}
-
-.SitePopover__side-link {
-    margin-left: 0.5rem;
-    font-size: 0.8125rem;
-    font-weight: 600;
-    color: var(--primary-3000);
-    text-align: right;
-}
-
-.SitePopover__section {
-    width: 100%;
-    padding: 0.5rem 0;
-    border-bottom: 1px solid var(--border);
-
-    &:first-child {
-        padding-top: 0;
-    }
-
-    &:last-child {
-        padding-bottom: 0;
-        border-bottom: none;
-    }
-}
-
-.AccountInfo {
-    display: flex;
-    align-items: center;
-}
-
-.AccountInfo__identification {
-    width: 100%;
-    margin-left: 0.5rem;
-    overflow: hidden;
-}
-
-.AccessLevelIndicator {
-    margin-left: 0.5rem;
-    font-size: 0.625rem;
-    text-transform: uppercase;
-}
-
-.CheekyHog {
-    position: absolute;
-    top: -0.2rem;
-    animation-timing-function: ease-out;
-    animation-delay: 0s;
-    animation-fill-mode: both;
-}
-
-.CheekyHog--peek {
-    animation-name: CheekyHog__Peek;
-    animation-duration: 1s;
-    animation-iteration-count: 1;
-}
-
-.CheekyHog--hide {
-    animation-name: CheekyHog__Hide;
-    animation-duration: 1s;
-    animation-iteration-count: 1;
-}
-
-@keyframes CheekyHog__Peek {
-    0% {
-        left: 0;
-        transform: rotate(0);
-    }
-
-    50% {
-        left: -0.5rem;
-        transform: rotate(-20deg);
-    }
-
-    100% {
-        left: -1.45rem;
-        transform: rotate(-45deg);
-    }
-}
-
-@keyframes CheekyHog__Hide {
-    0% {
-        left: -1.45rem;
-        transform: rotate(-45deg);
-    }
-
-    50% {
-        left: -0.5rem;
-        transform: rotate(-20deg);
-    }
-
-    100% {
-        left: 0;
-        transform: rotate(0);
-    }
-}
diff --git a/frontend/src/layout/navigation/TopBar/TopBar.tsx b/frontend/src/layout/navigation/TopBar/TopBar.tsx
deleted file mode 100644
index dbad8820a1a0cd..00000000000000
--- a/frontend/src/layout/navigation/TopBar/TopBar.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import './TopBar.scss'
-
-export function TopBar(): JSX.Element {
-    return <></>
-}
diff --git a/frontend/src/layout/navigation/TopBar/YearInHogButton.scss b/frontend/src/layout/navigation/TopBar/YearInHogButton.scss
index 1c5feb51eeeccf..f61f0ed645ac42 100644
--- a/frontend/src/layout/navigation/TopBar/YearInHogButton.scss
+++ b/frontend/src/layout/navigation/TopBar/YearInHogButton.scss
@@ -2,3 +2,57 @@
     background-color: var(--bg-3000);
     border-radius: var(--radius);
 }
+
+.CheekyHog {
+    position: absolute;
+    top: -0.2rem;
+    animation-timing-function: ease-out;
+    animation-delay: 0s;
+    animation-fill-mode: both;
+}
+
+.CheekyHog--peek {
+    animation-name: CheekyHog__Peek;
+    animation-duration: 1s;
+    animation-iteration-count: 1;
+}
+
+.CheekyHog--hide {
+    animation-name: CheekyHog__Hide;
+    animation-duration: 1s;
+    animation-iteration-count: 1;
+}
+
+@keyframes CheekyHog__Peek {
+    0% {
+        left: 0;
+        transform: rotate(0);
+    }
+
+    50% {
+        left: -0.5rem;
+        transform: rotate(-20deg);
+    }
+
+    100% {
+        left: -1.45rem;
+        transform: rotate(-45deg);
+    }
+}
+
+@keyframes CheekyHog__Hide {
+    0% {
+        left: -1.45rem;
+        transform: rotate(-45deg);
+    }
+
+    50% {
+        left: -0.5rem;
+        transform: rotate(-20deg);
+    }
+
+    100% {
+        left: 0;
+        transform: rotate(0);
+    }
+}