diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4513c858..fc92fdeb 100755
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -55,7 +55,10 @@ export default function RootLayout({
         />
       </head>
 
-      <body suppressHydrationWarning={true}>
+      <body
+        suppressHydrationWarning={true}
+        className="flex flex-col min-h-screen items-center [&>*]:w-full [&>footer]:mt-auto"
+      >
         <TwSizeIndicator />
         <Providers>
           <Header />
diff --git a/src/layouts/helpers/TwSizeIndicator.tsx b/src/layouts/helpers/TwSizeIndicator.tsx
index 839be75b..075e7dfa 100755
--- a/src/layouts/helpers/TwSizeIndicator.tsx
+++ b/src/layouts/helpers/TwSizeIndicator.tsx
@@ -1,7 +1,7 @@
 const TwSizeIndicator = () => {
   if (process.env.NODE_ENV === "development") {
     return (
-      <div className="fixed left-0 top-0 z-50 flex w-[30px] items-center justify-center bg-gray-200 py-[2.5px] text-[12px] uppercase text-black sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 xl:bg-blue-200 2xl:bg-pink-200">
+      <div className="fixed left-0 top-0 z-50 flex !w-[30px] items-center justify-center bg-gray-200 py-[2.5px] text-[12px] uppercase text-black sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 xl:bg-blue-200 2xl:bg-pink-200">
         <span className="block sm:hidden">all</span>
         <span className="hidden sm:block md:hidden">sm</span>
         <span className="hidden md:block lg:hidden">md</span>
