diff --git a/src/app/(with-header)/loading.tsx b/src/app/(with-header)/loading.tsx
new file mode 100644
index 0000000..931f3ec
--- /dev/null
+++ b/src/app/(with-header)/loading.tsx
@@ -0,0 +1,7 @@
+import { Skeleton, Spinner } from '@nextui-org/react';
+
+export default function Loading() {
+	return (<div className="w-full h-full flex flex-grow items-center justify-center">
+		<Spinner size="lg" />
+	</div>);
+}
diff --git a/src/app/globals.scss b/src/app/globals.scss
index 5f23abb..89239f9 100644
--- a/src/app/globals.scss
+++ b/src/app/globals.scss
@@ -42,10 +42,15 @@ html {
 	font-family: Rodin, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
+// offsets for header size of 5.5rem
 .h-fixed {
 	height: calc(100% - 5.5rem);
 }
 
+.pt-fixed {
+	padding-top: 5.5rem;
+}
+
 .\@container-size {
 	container-type: size;
 }
diff --git a/src/components/client-providers.tsx b/src/components/client-providers.tsx
index 811a927..36c40c7 100644
--- a/src/components/client-providers.tsx
+++ b/src/components/client-providers.tsx
@@ -5,7 +5,7 @@ import { NextUIProvider } from '@nextui-org/react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
 
 export function ClientProviders({ children }: { children: ReactNode }) {
-	return (<NextUIProvider className="h-full">
+	return (<NextUIProvider className="h-full flex">
 		<NextThemesProvider attribute="class" defaultTheme="dark" enableSystem>
 			{children}
 		</NextThemesProvider>
diff --git a/src/components/header-sidebar.tsx b/src/components/header-sidebar.tsx
index 4aa31ed..8efbc2e 100644
--- a/src/components/header-sidebar.tsx
+++ b/src/components/header-sidebar.tsx
@@ -81,8 +81,8 @@ export const HeaderSidebar = ({ children }: HeaderSidebarProps) => {
 				</Button>
 			</div>
 		</div>
-		<div className="flex flex-col">
-			<div className="flex p-6 items-center flex-shrink-0 sticky top-0 bg-background/80 z-[9998] backdrop-blur-2xl">
+		<div className="flex flex-col flex-grow">
+			<div className="flex p-6 items-center flex-shrink-0 fixed top-0 left-0 w-full bg-background/80 z-[9998] backdrop-blur-2xl">
 				<Button className="text-2xl font-bold cursor-pointer flex items-center m-0 ps-1.5 pe-2 mr-6" variant="light"
 					onClick={() => setMenuOpen(true)}>
 					<Bars3Icon className="h-6 mt-0.5" />
@@ -114,7 +114,7 @@ export const HeaderSidebar = ({ children }: HeaderSidebarProps) => {
 					</Button>
 				</div>
 			</div>
-			<div className="sm:px-5 flex-grow">
+			<div className="sm:px-5 flex-grow pt-fixed">
 				{children}
 			</div>
 		</div>