diff --git a/src/app/[documentName]/page.tsx b/src/app/[documentName]/page.tsx
index 460b84e..61eadef 100644
--- a/src/app/[documentName]/page.tsx
+++ b/src/app/[documentName]/page.tsx
@@ -1,4 +1,4 @@
-import { EditorScreen } from '@/screen/EditorScreen';
+import EditorScreen from '@/screen/EditorScreen';
 
 type PageProps = {
 	params: {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5c1db9b..286a352 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-import { EditorScreen } from '@/screen/EditorScreen';
+import EditorScreen from '@/screen/EditorScreen';
 
 export default function () {
 	return <EditorScreen />;
diff --git a/src/component/editor/EditorComponent.tsx b/src/component/editor/EditorComponent.tsx
index 631167e..e154ca2 100644
--- a/src/component/editor/EditorComponent.tsx
+++ b/src/component/editor/EditorComponent.tsx
@@ -11,7 +11,7 @@ type EditorProps = {
 	enableEdit: boolean;
 };
 
-export const EditorComponent = (props: EditorProps) => {
+export default function (props: EditorProps) {
 	const editorRef = useRef<ReactCodeMirrorRef>(null);
 
 	const updateCursorInformation = useCallback(() => {
@@ -55,4 +55,4 @@ export const EditorComponent = (props: EditorProps) => {
 			}}
 		/>
 	);
-};
+}
diff --git a/src/component/editor/FooterButtonComponent.tsx b/src/component/editor/FooterButtonComponent.tsx
index 3dc5add..bc2e3c2 100644
--- a/src/component/editor/FooterButtonComponent.tsx
+++ b/src/component/editor/FooterButtonComponent.tsx
@@ -1,4 +1,4 @@
-import useThemeValues from '@/hook/useThemeValue';
+import { useThemeValues } from '@/hook/useThemeValue';
 import { ThemePalette } from '@/utils/themes';
 import { IconButton, Tooltip } from '@chakra-ui/react';
 import type { ReactElement } from 'react';
@@ -12,7 +12,7 @@ type ActionButtonProps = {
 };
 
 // TODO: Dirty port from stable
-export const FooterButtonComponent = (props: ActionButtonProps) => {
+export default function (props: ActionButtonProps) {
 	const { getThemeValue } = useThemeValues();
 
 	return (
@@ -35,4 +35,4 @@ export const FooterButtonComponent = (props: ActionButtonProps) => {
 			/>
 		</Tooltip>
 	);
-};
+}
diff --git a/src/component/editor/FooterComponent.tsx b/src/component/editor/FooterComponent.tsx
index 6b7bbfe..4c30122 100644
--- a/src/component/editor/FooterComponent.tsx
+++ b/src/component/editor/FooterComponent.tsx
@@ -1,5 +1,5 @@
-import { FooterButtonComponent } from '@/component/editor/FooterButtonComponent';
-import useThemeValues from '@/hook/useThemeValue';
+import FooterButtonComponent from '@/component/editor/FooterButtonComponent';
+import { useThemeValues } from '@/hook/useThemeValue';
 import { ThemePalette } from '@/utils/themes';
 import { Flex, useToast } from '@chakra-ui/react';
 import { type Dispatch, type SetStateAction, useState } from 'react';
@@ -14,7 +14,7 @@ type ControlsProps = {
 };
 
 // TODO: Dirty port from stable
-export const FooterComponent = (props: ControlsProps) => {
+export default function (props: ControlsProps) {
 	const { getThemeValue } = useThemeValues();
 	const [isSaveLoading, setIsSaveLoading] = useState(false);
 	const toast = useToast();
@@ -68,4 +68,4 @@ export const FooterComponent = (props: ControlsProps) => {
 			/>
 		</Flex>
 	);
-};
+}
diff --git a/src/component/editor/HeaderComponent.tsx b/src/component/editor/HeaderComponent.tsx
index 2db83e5..535d370 100644
--- a/src/component/editor/HeaderComponent.tsx
+++ b/src/component/editor/HeaderComponent.tsx
@@ -1,5 +1,5 @@
-import { HeaderLabelComponent } from '@/component/editor/HeaderLabelComponent';
-import useThemeValues from '@/hook/useThemeValue';
+import HeaderLabelComponent from '@/component/editor/HeaderLabelComponent';
+import { useThemeValues } from '@/hook/useThemeValue';
 import { ThemePalette } from '@/utils/themes';
 import { Flex, Show } from '@chakra-ui/react';
 import { MdClass } from 'react-icons/md';
@@ -10,7 +10,7 @@ export type HeaderProps = {
 	columnNumber: number;
 };
 
-export const HeaderComponent = (props: HeaderProps) => {
+export default function (props: HeaderProps) {
 	const { getThemeValue } = useThemeValues();
 
 	return (
@@ -36,4 +36,4 @@ export const HeaderComponent = (props: HeaderProps) => {
 			</Show>
 		</Flex>
 	);
-};
+}
diff --git a/src/component/editor/HeaderLabelComponent.tsx b/src/component/editor/HeaderLabelComponent.tsx
index e5094f1..bad899a 100644
--- a/src/component/editor/HeaderLabelComponent.tsx
+++ b/src/component/editor/HeaderLabelComponent.tsx
@@ -1,4 +1,4 @@
-import useThemeValues from '@/hook/useThemeValue';
+import { useThemeValues } from '@/hook/useThemeValue';
 import { ThemePalette } from '@/utils/themes';
 import { Flex, Text } from '@chakra-ui/react';
 import type { ReactElement } from 'react';
@@ -9,7 +9,7 @@ type HeaderLabelProps = {
 	onClick?: () => WindowProxy | null;
 };
 
-export const HeaderLabelComponent = (props: HeaderLabelProps) => {
+export default function (props: HeaderLabelProps) {
 	const { getThemeValue } = useThemeValues();
 
 	return (
@@ -28,4 +28,4 @@ export const HeaderLabelComponent = (props: HeaderLabelProps) => {
 			<Text color={getThemeValue(ThemePalette.TextMuted)}>{props.label}</Text>
 		</Flex>
 	);
-};
+}
diff --git a/src/hook/useTheme.ts b/src/hook/useTheme.ts
index 0aa9e63..f56f7ef 100644
--- a/src/hook/useTheme.ts
+++ b/src/hook/useTheme.ts
@@ -2,7 +2,7 @@ import { themeStore } from '@/utils/store';
 import { themes } from '@/utils/themes';
 import { useColorMode } from '@chakra-ui/react';
 
-export default function useTheme() {
+export function useTheme() {
 	const { themeId, setThemeId } = themeStore();
 	const { colorMode, toggleColorMode } = useColorMode();
 
diff --git a/src/hook/useThemeValue.ts b/src/hook/useThemeValue.ts
index bdd36e8..099829f 100644
--- a/src/hook/useThemeValue.ts
+++ b/src/hook/useThemeValue.ts
@@ -1,7 +1,7 @@
 import { themeStore } from '@/utils/store';
 import { type ThemePaletteKey, themes } from '@/utils/themes';
 
-export default function useThemeValues() {
+export function useThemeValues() {
 	const { themeId } = themeStore();
 
 	const theme = themes.find((theme) => theme.id === themeId) ?? themes[0];
diff --git a/src/screen/EditorScreen.tsx b/src/screen/EditorScreen.tsx
index f07f664..c729351 100644
--- a/src/screen/EditorScreen.tsx
+++ b/src/screen/EditorScreen.tsx
@@ -1,16 +1,18 @@
 'use client';
 
-import { EditorComponent } from '@/component/editor/EditorComponent';
-import { FooterComponent } from '@/component/editor/FooterComponent';
-import { HeaderComponent, type HeaderProps } from '@/component/editor/HeaderComponent';
+import FooterComponent from '@/component/editor/FooterComponent';
+import HeaderComponent, { type HeaderProps } from '@/component/editor/HeaderComponent';
+import dynamic from 'next/dynamic';
 import { useState } from 'react';
 
+const EditorComponent = dynamic(() => import('@/component/editor/EditorComponent'));
+
 type EditorScreenProps = {
 	documentName?: string;
 	enableEdit?: boolean;
 };
 
-export const EditorScreen = ({ documentName, enableEdit = false }: EditorScreenProps) => {
+export default function ({ documentName, enableEdit = false }: EditorScreenProps) {
 	const [position, setPosition] = useState<HeaderProps>({
 		lineNumber: 1,
 		columnNumber: 1
@@ -40,4 +42,4 @@ export const EditorScreen = ({ documentName, enableEdit = false }: EditorScreenP
 			/>
 		</div>
 	);
-};
+}