diff --git a/src/components/layouts/footer/styles.css.ts b/src/components/layouts/footer/styles.css.ts
index 6b55f85..c6f9152 100644
--- a/src/components/layouts/footer/styles.css.ts
+++ b/src/components/layouts/footer/styles.css.ts
@@ -4,7 +4,7 @@ import { theme } from "../../../theme/theme.css";
 export const container = styled.css`
   position: relative;
   width: 100%;
-  max-width: ${theme.fontSize.calc(45)};
+  max-width: ${theme.fontSize.calc(50)};
   margin: 0 auto;
   padding: ${theme.spacing.calc(5)} ${theme.spacing.calc(8)};
   display: flex;
diff --git a/src/components/layouts/grid/styles.css.ts b/src/components/layouts/grid/styles.css.ts
index 94fb19c..49097d0 100644
--- a/src/components/layouts/grid/styles.css.ts
+++ b/src/components/layouts/grid/styles.css.ts
@@ -15,11 +15,11 @@ export const container = styled.css`
   > * {
     width: calc((100% - ${theme.spacing.calc(4)}) / 3);
 
-    @media screen and (max-width: ${theme.fontSize.calc(75)}) {
+    @media screen and (max-width: ${theme.fontSize.calc(80)}) {
       width: calc((100% - ${theme.spacing.calc(2)}) / 2);
     }
 
-    @media screen and (max-width: ${theme.fontSize.calc(45)}) {
+    @media screen and (max-width: ${theme.fontSize.calc(50)}) {
       width: 100%;
     }
   }
diff --git a/src/components/layouts/main/index.tsx b/src/components/layouts/main/index.tsx
index 2ce86d9..c25adad 100644
--- a/src/components/layouts/main/index.tsx
+++ b/src/components/layouts/main/index.tsx
@@ -1,8 +1,11 @@
 import React, { PropsWithChildren } from "react";
+import { cx } from "@syfxlin/reve";
 import * as styles from "./styles.css";
 
-export type MainProps = PropsWithChildren<object>;
+export type MainProps = PropsWithChildren<{
+  className?: string;
+}>;
 
-export const Main: React.FC<MainProps> = ({ children }) => {
-  return <main className={styles.container}>{children}</main>;
+export const Main: React.FC<MainProps> = ({ children, className }) => {
+  return <main className={cx(styles.container, className)}>{children}</main>;
 };
diff --git a/src/components/layouts/main/styles.css.ts b/src/components/layouts/main/styles.css.ts
index d949eca..f6051b7 100644
--- a/src/components/layouts/main/styles.css.ts
+++ b/src/components/layouts/main/styles.css.ts
@@ -6,7 +6,7 @@ export const container = styled.css`
   position: relative;
   margin: 0 auto;
   width: 100%;
-  max-width: ${theme.fontSize.calc(45)};
+  max-width: ${theme.fontSize.calc(50)};
   padding: 0 ${theme.spacing.calc(8)};
   animation: fade-in 0.5s ease;
 `;
diff --git a/src/components/templates/articles/index.tsx b/src/components/templates/articles/index.tsx
index 11a79f1..4c22e8f 100644
--- a/src/components/templates/articles/index.tsx
+++ b/src/components/templates/articles/index.tsx
@@ -59,27 +59,29 @@ export const TemplateArticles: React.FC<TemplateArticlesProps> = (props) => {
   return (
     <>
       <Header />
-      <Main>
-        <Hero />
-        {props.display === "document" && (
+      {props.display === "document" && (
+        <Main className={styles.document}>
           <section>
-            <Renderer document={props.document?.document} position="top">
-              <Heading>{t("articles.heading")}</Heading>
-              {props.articles.map(item => <ArticleInfo key={`article-${item.link}`} data={item} />)}
-            </Renderer>
+            <Hero />
+            <Renderer document={props.document?.document} position="top" />
           </section>
-        )}
-        {props.display === "articles" && (
-          <>
-            <section>
-              {props.articles.items.map(item => (
-                <ArticleInfo key={`article-${item.link}`} data={item} />
-              ))}
-            </section>
-            <Pagination links="/" index={props.articles.index} pages={props.articles.pages} />
-          </>
-        )}
-      </Main>
+          <section>
+            <Heading>{t("articles.heading")}</Heading>
+            {props.articles.map(item => <ArticleInfo key={`article-${item.link}`} data={item} />)}
+          </section>
+        </Main>
+      )}
+      {props.display === "articles" && (
+        <Main>
+          <Hero />
+          <section>
+            {props.articles.items.map(item => (
+              <ArticleInfo key={`article-${item.link}`} data={item} />
+            ))}
+          </section>
+          <Pagination links="/" index={props.articles.index} pages={props.articles.pages} />
+        </Main>
+      )}
       <Footer />
     </>
   );
diff --git a/src/components/templates/articles/styles.css.ts b/src/components/templates/articles/styles.css.ts
index cedc16f..d8150cf 100644
--- a/src/components/templates/articles/styles.css.ts
+++ b/src/components/templates/articles/styles.css.ts
@@ -26,3 +26,25 @@ export const heading = styled.css`
     z-index: 1;
   }
 `;
+
+export const document = styled.css`
+  display: flex;
+  gap: ${theme.spacing.calc(8)};
+  max-width: ${theme.fontSize.calc(80)} !important;
+
+  > section {
+    flex: 1;
+
+    &:first-child {
+      flex-basis: 170%;
+    }
+    
+    &:last-child {
+      flex-basis: 100%;
+    }
+  }
+
+  @media screen and (max-width: ${theme.fontSize.calc(80)}) {
+    display: block;
+  }
+`;
diff --git a/src/components/widgets/toc/styles.css.ts b/src/components/widgets/toc/styles.css.ts
index ad9781f..a811695 100644
--- a/src/components/widgets/toc/styles.css.ts
+++ b/src/components/widgets/toc/styles.css.ts
@@ -11,7 +11,7 @@ export const container = styled.css`
   height: 100%;
   transform: translateX(100%);
 
-  @media screen and (max-width: ${theme.fontSize.calc(36 + 45)}) {
+  @media screen and (max-width: ${theme.fontSize.calc(36 + 50)}) {
     display: none;
   }