diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
new file mode 100644
index 0000000..1894622
--- /dev/null
+++ b/src/app/(app)/layout.tsx
@@ -0,0 +1,16 @@
+import { Banner } from "@/components/banner";
+
+interface AppLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function AppLayout({ children }: AppLayoutProps) {
+  return (
+    <div className="flex flex-1 flex-col">
+      <Banner />
+      <main className="flex flex-1 flex-col">
+        {children}
+      </main>
+    </div>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/(app)/page.tsx
similarity index 90%
rename from src/app/page.tsx
rename to src/app/(app)/page.tsx
index 4838bc6..5328ccb 100644
--- a/src/app/page.tsx
+++ b/src/app/(app)/page.tsx
@@ -2,7 +2,7 @@ import CodeEditor from "@/components/code-editor";
 import { DEFAULT_PROBLEM } from "@/config/problem";
 import MdxPreview from "@/components/problem-description";
 
-export default function Home() {
+export default function HomePage() {
   return (
     <div className="h-full flex items-center">
       <div className="h-full w-1/2">
@@ -12,5 +12,5 @@ export default function Home() {
         <CodeEditor />
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ef63a75..0679ea5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,31 +1,29 @@
 import "./globals.css";
 import type { Metadata } from "next";
-import { Banner } from "@/components/banner";
 import { ThemeProvider } from "@/components/theme-provider";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "monaco-editor-lsp-next",
+  description: "A Next.js integration of Monaco Editor with LSP support, free from SSR issues",
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
+interface RootLayoutProps {
   children: React.ReactNode;
-}>) {
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className="h-screen flex flex-col antialiased">
+      <body className="min-h-svh antialiased">
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
           enableSystem
           disableTransitionOnChange
         >
-          <Banner className="h-12 flex items-center justify-center bg-muted text-foreground" />
-          <main className="flex-1">
+          <div className="relative flex min-h-svh flex-col">
             {children}
-          </main>
+          </div>
         </ThemeProvider>
       </body>
     </html>
diff --git a/src/components/banner.tsx b/src/components/banner.tsx
index 2d09b96..b23953d 100644
--- a/src/components/banner.tsx
+++ b/src/components/banner.tsx
@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 import { siteConfig } from "@/config/site";
 import { ArrowRightIcon } from "lucide-react";
 
@@ -14,18 +15,19 @@ export function Banner({
   ...props
 }: BannerProps) {
   return (
-    <div className={className} {...props}>
-      <p className="flex justify-center text-sm">
-        <a href={link} className="group">
-          <span className="me-1 text-base leading-none">✨</span>
-          {text}
-          <ArrowRightIcon
-            className="ms-2 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5"
-            size={16}
-            aria-hidden="true"
-          />
-        </a>
-      </p>
-    </div>
+    <header
+      {...props}
+      className={cn("h-12 flex items-center justify-center bg-muted text-foreground", className)}
+    >
+      <a href={link} className="group flex justify-center text-sm">
+        <span className="me-1 text-base leading-none">✨</span>
+        {text}
+        <ArrowRightIcon
+          className="ms-2 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5"
+          size={16}
+          aria-hidden="true"
+        />
+      </a>
+    </header>
   );
 }
