diff --git a/frontend/src/app/ui/homePage/HomePage.tsx b/frontend/src/app/ui/homePage/HomePage.tsx
index 35ac9de..9c54073 100644
--- a/frontend/src/app/ui/homePage/HomePage.tsx
+++ b/frontend/src/app/ui/homePage/HomePage.tsx
@@ -24,7 +24,8 @@ import { H2, H3, P } from "app/ui/ux/text";
 import { IconInfo, IconCheck } from "app/ui/ux/icons";
 import { Stack, HR } from "app/ui/ux/containers";
 import { WorkmodeButtons } from "app/ui/homePage/WorkmodeButtons";
-import { Card } from "app/ui/ux/Card"
+import { Card } from "app/ui/ux/Card";
+import { NAVIGATION_BAR_HEIGHT_PX } from "app/ui/siteLayout/NavigationBar";
 
 
 const InlineIconButton = styled(IconButton)({
@@ -102,6 +103,7 @@ export const HomePage: React.FC = () => {
       mx="auto"
       p={["0.5rem", "1rem", "2.5rem"]}
       spacing={["0.5rem", "1rem", "2.5rem"]}
+      marginTop={`${NAVIGATION_BAR_HEIGHT_PX}px`}
     >
       <RenderQuery
         query={combineQueries({
diff --git a/frontend/src/app/ui/planningPage/PlanningPage.tsx b/frontend/src/app/ui/planningPage/PlanningPage.tsx
index 87d3ff3..7805d5b 100644
--- a/frontend/src/app/ui/planningPage/PlanningPage.tsx
+++ b/frontend/src/app/ui/planningPage/PlanningPage.tsx
@@ -40,7 +40,7 @@ export const PlanningPage: React.FC = () => {
   const [month, setMonth] = useState<string>(dayjs().format("MMMM YYYY"));
 
   return (
-    <Page className="PlanningPage">
+    <Page className="PlanningPage" marginTop={`${NAVIGATION_BAR_HEIGHT_PX}px`}>
       {/* Heading element */}
       <HeaderWrapper>
         <Header>
diff --git a/frontend/src/app/ui/siteLayout/NavigationBar.tsx b/frontend/src/app/ui/siteLayout/NavigationBar.tsx
index 3d731d2..f82fa22 100644
--- a/frontend/src/app/ui/siteLayout/NavigationBar.tsx
+++ b/frontend/src/app/ui/siteLayout/NavigationBar.tsx
@@ -99,7 +99,7 @@ const AvatarContainer = styled("div")({
 });
 
 export const NavigationBar: React.FC<INavigationBar> = ({ user }) => (
-  <StyledAppBar position="static" className="NavigationBar">
+  <StyledAppBar position="fixed" className="NavigationBar">
     <StyledToolbar>
       <AppTitleLink to={RoutePaths.Home} aria-label="Home">
         <IconLogoLight height="32" width="28" /> <AppTitle>futuLog</AppTitle>
diff --git a/frontend/src/app/ui/userPage/UserPage.tsx b/frontend/src/app/ui/userPage/UserPage.tsx
index 582dd61..573f5f7 100644
--- a/frontend/src/app/ui/userPage/UserPage.tsx
+++ b/frontend/src/app/ui/userPage/UserPage.tsx
@@ -9,6 +9,7 @@ import { userQueryKey, setDefaultOfficeQueryKey } from "app/utils/reactQueryUtil
 import { useMutation } from "react-query";
 import { SiteSelector } from "../siteSelector/SiteSector";
 import { Button } from "../ux/buttons";
+import { NAVIGATION_BAR_HEIGHT_PX } from "app/ui/siteLayout/NavigationBar";
 
 export const UserPage: React.FC = () => {
     const { apiClient, queryCache } = useServices();
@@ -34,7 +35,7 @@ export const UserPage: React.FC = () => {
     };
 
     return (
-        <PageMargins className="UserPage">
+        <PageMargins className="UserPage" marginTop={`${NAVIGATION_BAR_HEIGHT_PX}px`}>
             <Stack spacing="2.5rem" maxWidth="25rem" mx="auto" textAlign="center">
                 <H2>Personal page</H2>
                 <Flex justifyContent="center">