diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
new file mode 100644
index 0000000..f34c099
--- /dev/null
+++ b/src/app/(main)/layout.tsx
@@ -0,0 +1,14 @@
+import Header from "./components/header";
+
+export default function MainLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="h-full flex flex-col">
+      <Header />
+      <div className="flex-1">{children}</div>
+    </div>
+  );
+}
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
new file mode 100644
index 0000000..b45a092
--- /dev/null
+++ b/src/app/(main)/page.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import * as monaco from "monaco-editor";
+import Editor from "@monaco-editor/react";
+import { loader } from "@monaco-editor/react";
+import ThemeSelector from "./components/theme-selector";
+import FontSizeSlider from "./components/font-size-slider";
+import LanguageSelector from "./components/language-selector";
+import { useCodeEditorStore } from "@/store/useCodeEditorStore";
+import { highlightMonacoEditor } from "@/constants/editor/themes";
+
+loader.config({ monaco });
+
+export default function MainPage() {
+  const { language, theme, fontSize, setEditor } = useCodeEditorStore();
+
+  return (
+    <div className="h-full flex flex-col gap-2">
+      <div className="flex items-center px-4 gap-2">
+        <LanguageSelector />
+        <ThemeSelector />
+        <FontSizeSlider />
+      </div>
+      <Editor
+        language={language}
+        theme={theme}
+        beforeMount={highlightMonacoEditor}
+        onMount={setEditor}
+        options={{ fontSize, automaticLayout: true }}
+      />
+    </div>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
deleted file mode 100644
index 2fb9a12..0000000
--- a/src/app/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function HomePage() {
-  return null;
-}