diff --git a/apps/meteor/app/ui/client/components/header/header.html b/apps/meteor/app/ui/client/components/header/header.html
deleted file mode 100644
index 14fb89cd3939..000000000000
--- a/apps/meteor/app/ui/client/components/header/header.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<template name="header">
-	<header class="rc-header">
-		<div class="rc-header__wrap">
-			<div class="rc-header__block rc-header--burger">
-				{{> burger}}
-			</div>
-
-			{{#if rawSectionName}}
-				<span class="rc-header__block">{{rawSectionName}}</span>
-			{{else}}
-				<span class="rc-header__block">{{_ sectionName}}</span>
-			{{/if}}
-
-			{{#if Template.contentBlock}}
-				{{> Template.contentBlock}}
-			{{/if}}
-
-			{{# unless hideHelp}}
-				<div class="rc-header__section-help"></div>
-			{{/unless}}
-
-			{{#with toolbarButtons}}
-				<div class="iframe-toolbar">
-					{{#each buttons}}
-					<button class="{{id}}">
-						{{#if icon}}<i class="{{icon}}"></i>{{/if}}
-						{{label}}
-					</button>
-					{{/each}}
-				</div>
-			{{/with}}
-		</div>
-	</header>
-</template>
diff --git a/apps/meteor/app/ui/client/components/header/header.js b/apps/meteor/app/ui/client/components/header/header.js
deleted file mode 100644
index 98f427ac2f39..000000000000
--- a/apps/meteor/app/ui/client/components/header/header.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Template } from 'meteor/templating';
-
-import { fireGlobalEvent } from '../../../../../client/lib/utils/fireGlobalEvent';
-
-import './header.html';
-
-Template.header.helpers({
-	back() {
-		return Template.instance().data.back;
-	},
-	buttons() {
-		console.log('asdasd');
-	},
-});
-
-Template.header.events({
-	'click .iframe-toolbar .js-iframe-action'(e) {
-		fireGlobalEvent('click-toolbar-button', { id: this.id });
-		e.currentTarget.querySelector('button').blur();
-		return false;
-	},
-});
diff --git a/apps/meteor/app/ui/client/index.ts b/apps/meteor/app/ui/client/index.ts
index 5ff12f1ec9f4..97bdff262b46 100644
--- a/apps/meteor/app/ui/client/index.ts
+++ b/apps/meteor/app/ui/client/index.ts
@@ -5,10 +5,8 @@ import './lib/menu';
 import './lib/parentTemplate';
 import './lib/codeMirror';
 import './lib/textarea-cursor';
-import './views/app/burger.html';
 import './views/app/roomSearch.html';
 import './views/app/userSearch.html';
-import './views/app/burger';
 import './views/app/roomSearch';
 import './views/app/photoswipeContent.ts'; // without the *.ts extension, *.html gets loaded first
 import './components/icon';
@@ -19,7 +17,6 @@ import './components/popupList.html';
 import './components/popupList';
 import './components/selectDropdown.html';
 
-import './components/header/header';
 import './components/tooltip';
 
 export { ChatMessages } from './lib/chatMessages';
diff --git a/apps/meteor/app/ui/client/views/app/burger.html b/apps/meteor/app/ui/client/views/app/burger.html
deleted file mode 100644
index 825dcd4f18c2..000000000000
--- a/apps/meteor/app/ui/client/views/app/burger.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<template name="burger">
-	<div class="rc-old burger {{isMenuOpen}}">
-		<i></i>
-		<i></i>
-		<i></i>
-		{{#unless embeddedVersion}}
-			{{#if unread}}
-				<div class="unread-burger-alert color-error-contrast background-error-color">
-					{{unread}}
-				</div>
-			{{/if}}
-		{{/unless}}
-	</div>
-</template>
diff --git a/apps/meteor/app/ui/client/views/app/burger.js b/apps/meteor/app/ui/client/views/app/burger.js
deleted file mode 100644
index f0b9620daa94..000000000000
--- a/apps/meteor/app/ui/client/views/app/burger.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { Session } from 'meteor/session';
-import { Template } from 'meteor/templating';
-
-import { ChatSubscription } from '../../../../models/client';
-import { menu } from '../../../../ui-utils/client';
-import { isLayoutEmbedded } from '../../../../../client/lib/utils/isLayoutEmbedded';
-import { getUserPreference } from '../../../../utils';
-
-Template.burger.helpers({
-	unread() {
-		const userUnreadAlert = getUserPreference(Meteor.userId(), 'unreadAlert');
-		const [unreadCount, unreadAlert] = ChatSubscription.find(
-			{
-				open: true,
-				hideUnreadStatus: { $ne: true },
-				rid: { $ne: Session.get('openedRoom') },
-				archived: { $ne: true },
-			},
-			{
-				fields: {
-					unread: 1,
-					alert: 1,
-					unreadAlert: 1,
-				},
-			},
-		)
-			.fetch()
-			.reduce(
-				([unreadCount, unreadAlert], { alert, unread, unreadAlert: alertType }) => {
-					if (alert || unread > 0) {
-						unreadCount += unread;
-						if (alert === true && alertType !== 'nothing') {
-							if (alertType === 'all' || userUnreadAlert !== false) {
-								unreadAlert = '•';
-							}
-						}
-					}
-
-					return [unreadCount, unreadAlert];
-				},
-				[0, false],
-			);
-
-		if (unreadCount > 0) {
-			return unreadCount > 99 ? '99+' : unreadCount;
-		}
-
-		return unreadAlert || '';
-	},
-
-	isMenuOpen() {
-		if (Session.equals('isMenuOpen', true)) {
-			return 'menu-opened';
-		}
-	},
-
-	embeddedVersion() {
-		return isLayoutEmbedded();
-	},
-});
-
-Template.burger.events({
-	'click div.burger'() {
-		return menu.toggle();
-	},
-});
diff --git a/apps/meteor/client/views/home/HomePage.tsx b/apps/meteor/client/views/home/HomePage.tsx
index 689d7b5e2f5c..1c7e19f97673 100644
--- a/apps/meteor/client/views/home/HomePage.tsx
+++ b/apps/meteor/client/views/home/HomePage.tsx
@@ -1,16 +1,46 @@
+import { Box, Button, Icon } from '@rocket.chat/fuselage';
+import { useSetting, useLayout, useTranslation, useAllPermissions } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
+import BurgerMenu from '../../components/BurgerMenu';
+import TemplateHeader from '../../components/Header';
+import Page from '../../components/Page/Page';
 import CustomHomePage from './CustomHomePage';
 
-// TODO: use a setting to determine if the user has a custom home page
-const custom = true;
+const editLayoutPermissions = ['view-privileged-setting', 'edit-privileged-setting', 'manage-selected-settings'];
 
 const HomePage = (): ReactElement => {
+	const t = useTranslation();
+	const title = useSetting('Layout_Home_Title') as string;
+	const custom = useSetting('Layout_Custom_Body');
+	const { isMobile } = useLayout();
+	const canEditLayout = useAllPermissions(editLayoutPermissions);
+
 	if (custom) {
 		return <CustomHomePage />;
 	}
 
-	return <></>; // TODO: render a default home page
+	return (
+		<Page data-qa='page-home'>
+			<Box marginBlock='x16' marginInline='x24' display='flex' flexDirection='row' justifyContent='space-between'>
+				{isMobile && (
+					<TemplateHeader.ToolBox>
+						<BurgerMenu />
+					</TemplateHeader.ToolBox>
+				)}
+				<Box as='h2' fontScale='h2' flexGrow={1}>
+					{title}
+				</Box>
+				{canEditLayout && (
+					<Button is='a' href='/admin/settings/Layout'>
+						<>
+							<Icon name='pencil' size='x16' /> {t('Customize')}
+						</>
+					</Button>
+				)}
+			</Box>
+		</Page>
+	);
 };
 
 export default HomePage;