diff --git a/autogpt_platform/frontend/src/app/layout.tsx b/autogpt_platform/frontend/src/app/layout.tsx
index 7dafb49e0..9f0595837 100644
--- a/autogpt_platform/frontend/src/app/layout.tsx
+++ b/autogpt_platform/frontend/src/app/layout.tsx
@@ -44,7 +44,7 @@ export default async function RootLayout({
           // enableSystem
           disableTransitionOnChange
         >
-          <div className="flex min-h-screen flex-col items-center justify-center">
+          <div className="flex min-h-screen flex-col items-stretch justify-items-stretch">
             <Navbar
               links={[
                 {
@@ -102,7 +102,7 @@ export default async function RootLayout({
                 },
               ]}
             />
-            <main className="flex-1">{children}</main>
+            <main className="w-full flex-grow">{children}</main>
             <TallyPopupSimple />
           </div>
           <Toaster />
diff --git a/autogpt_platform/frontend/src/app/login/page.tsx b/autogpt_platform/frontend/src/app/login/page.tsx
index 6edaf9900..bb7cf78fe 100644
--- a/autogpt_platform/frontend/src/app/login/page.tsx
+++ b/autogpt_platform/frontend/src/app/login/page.tsx
@@ -93,7 +93,7 @@ export default function LoginPage() {
   }
 
   return (
-    <AuthCard>
+    <AuthCard className="mx-auto">
       <AuthHeader>Login to your account</AuthHeader>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onLogin)}>
diff --git a/autogpt_platform/frontend/src/app/monitoring/page.tsx b/autogpt_platform/frontend/src/app/monitoring/page.tsx
index 66a37c96c..0be12aaee 100644
--- a/autogpt_platform/frontend/src/app/monitoring/page.tsx
+++ b/autogpt_platform/frontend/src/app/monitoring/page.tsx
@@ -73,7 +73,7 @@ const Monitor = () => {
 
   return (
     <div
-      className="grid grid-cols-1 gap-4 md:grid-cols-5 lg:grid-cols-4 xl:grid-cols-10"
+      className="grid grid-cols-1 gap-4 p-4 md:grid-cols-5 lg:grid-cols-4 xl:grid-cols-10"
       data-testid="monitor-page"
     >
       <AgentFlowList
diff --git a/autogpt_platform/frontend/src/app/signup/page.tsx b/autogpt_platform/frontend/src/app/signup/page.tsx
index a0bbdeb66..e6b3fa82d 100644
--- a/autogpt_platform/frontend/src/app/signup/page.tsx
+++ b/autogpt_platform/frontend/src/app/signup/page.tsx
@@ -84,7 +84,7 @@ export default function SignupPage() {
   }
 
   return (
-    <AuthCard>
+    <AuthCard className="mx-auto">
       <AuthHeader>Create a new account</AuthHeader>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSignup)}>
diff --git a/autogpt_platform/frontend/src/components/agptui/Navbar.tsx b/autogpt_platform/frontend/src/components/agptui/Navbar.tsx
index 33d3fbf42..9c3c260b9 100644
--- a/autogpt_platform/frontend/src/components/agptui/Navbar.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/Navbar.tsx
@@ -57,7 +57,7 @@ export const Navbar = async ({ links, menuItemGroups }: NavbarProps) => {
 
   return (
     <>
-      <nav className="sticky top-0 z-50 mx-[16px] hidden h-16 w-full max-w-[1600px] items-center justify-between rounded-bl-2xl rounded-br-2xl border border-white/50 bg-white/5 py-3 pl-6 pr-3 backdrop-blur-[26px] dark:border-gray-700 dark:bg-gray-900 md:inline-flex">
+      <nav className="sticky top-0 z-50 mx-[16px] hidden h-16 max-w-[1600px] items-center justify-between rounded-bl-2xl rounded-br-2xl border border-white/50 bg-white/5 py-3 pl-6 pr-3 backdrop-blur-[26px] dark:border-gray-700 dark:bg-gray-900 md:inline-flex">
         <div className="flex items-center gap-11">
           <div className="relative h-10 w-[88.87px]">
             <IconAutoGPTLogo className="h-full w-full" />
diff --git a/autogpt_platform/frontend/src/components/auth/AuthCard.tsx b/autogpt_platform/frontend/src/components/auth/AuthCard.tsx
index f8b4c643d..c23ed0511 100644
--- a/autogpt_platform/frontend/src/components/auth/AuthCard.tsx
+++ b/autogpt_platform/frontend/src/components/auth/AuthCard.tsx
@@ -1,12 +1,19 @@
 import { ReactNode } from "react";
+import { cn } from "@/lib/utils";
 
 interface Props {
   children: ReactNode;
+  className?: string;
 }
 
-export default function AuthCard({ children }: Props) {
+export default function AuthCard({ children, className }: Props) {
   return (
-    <div className="flex h-[80vh] w-[32rem] items-center justify-center">
+    <div
+      className={cn(
+        "flex h-[80vh] w-[32rem] items-center justify-center",
+        className,
+      )}
+    >
       <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-md">
         {children}
       </div>