diff --git a/src/layouts/Document.astro b/src/layouts/Document.astro
index bf313be..12f3f3d 100755
--- a/src/layouts/Document.astro
+++ b/src/layouts/Document.astro
@@ -21,7 +21,7 @@ import "@styles/prism.css"
 <Head/>
 <Header/>
 <div class="page">
-    <div class="content">
+    <article>
         <Sidebar/>
         <div class="document">
             <h1>{frontmatter.Title}</h1>
@@ -44,7 +44,7 @@ import "@styles/prism.css"
                     null
            } -->
         </div>
-    </div>
+    </article>
     <div class="footer">
         <div class="footer-start">
             <p>© {SiteSettings.OrgName}. All right reserved.</p>
diff --git a/src/layouts/Splash.astro b/src/layouts/Splash.astro
index fed8b9c..3931229 100755
--- a/src/layouts/Splash.astro
+++ b/src/layouts/Splash.astro
@@ -20,8 +20,8 @@ import "@styles/feelback.css";
 <Head/>
 <Header/>
 <div class="page">
-    <div class="content">
-        <div class="splash">
+    <div class="content" data-pagefind-body>
+        <article class="splash">
             <div class="splash-content">
                 <h1>{frontmatter.Title}</h1>
                 <p>{frontmatter.Description}</p>
@@ -31,7 +31,7 @@ import "@styles/feelback.css";
                 </div>
             </div>
             <img src={frontmatter.Banner}/>
-        </div>
+        </article>
         <div class="document">
             <slot/>
         </div>
@@ -53,4 +53,5 @@ import "@styles/feelback.css";
             }
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+</html>
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 07e4213..2595f62 100755
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,6 +1,7 @@
 body {
     max-width: 1200px;
     margin: auto;
+    padding: 0px 24px;
     font-family: Arial, Helvetica, sans-serif;
     background: #0a0a0a;
     color: white;
@@ -44,7 +45,8 @@ blockquote {
 
 header {
     background: #161616;
-    width: 100%;
+    width: calc(100% - 48px);
+    padding: 0px 24px;
     position: absolute;
     top: 0px;
     left: 0px;
@@ -55,7 +57,12 @@ header {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        .end {
+        .header-start {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .header-end {
             display: flex;
             gap: 12px;
             a {
@@ -71,7 +78,7 @@ header {
 .page {
     position: relative;
     min-height: 100vh;
-    .content {
+    article {
         padding-top: 90px;
         display: flex;
         flex-direction: row;
@@ -124,3 +131,25 @@ header {
         }
     }
 }
+
+@media screen and (max-width: 775px){
+    .content {
+        flex-direction: column !important;
+    }
+}
+@media screen and (max-width: 650px){
+    .header-content {
+        flex-direction: column;
+        padding-bottom: 24px;
+    }
+    .page .content {
+        padding-top: 114px !important;
+    }
+    .footer {
+        flex-direction: column !important;
+        align-items: center;
+        * {
+            margin: 0px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/splash.scss b/src/styles/splash.scss
index 5f9bfb1..c433f22 100755
--- a/src/styles/splash.scss
+++ b/src/styles/splash.scss
@@ -4,6 +4,9 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    img {
+        width: 100%;
+    }
     .splash-action {
         display: flex;
         gap: 6px;
@@ -21,4 +24,12 @@
             }
         }
     }
+}
+@media screen and (max-width: 775px){
+    .splash {
+        padding: 64px 0px;
+        img {
+            display: none !important;
+        }
+    }
 }
\ No newline at end of file