diff --git a/src/pages/IndexPage/Index.sass b/src/pages/IndexPage/Index.sass
index e3046ea..ab1ef30 100644
--- a/src/pages/IndexPage/Index.sass
+++ b/src/pages/IndexPage/Index.sass
@@ -19,14 +19,37 @@ h1
   align-content: flex-start
   gap: 0.5rem
 
+  @media only screen and (max-width: views.$tablet)
+    display: flex
+    flex-direction: row
+    flex-wrap: wrap
+    justify-content: center
+    align-items: center
+    align-content: flex-start
+    text-align: center
+    gap: 0.5rem
+
   &__main
     font-size: 3.25rem
     margin: 0 1rem 0 0
 
+    @media only screen and (max-width: views.$tablet)
+      padding: 2rem 0 0 0
+      font-size: 2.25rem
+      margin: 0 1rem 0 0
+
   &__sub
     font-weight: 700
     font-size: 2.75rem
 
+    @media only screen and (max-width: views.$tablet)
+      font-weight: 700
+      font-size: 1.75rem
+
   &__paragraph
     padding: 4rem 0 0 0
     font-size: 1.25rem
+
+    @media only screen and (max-width: views.$tablet)
+      padding: 3.25rem 0 0 0
+      font-size: 1rem
diff --git a/src/pages/IndexPage/Index.tsx b/src/pages/IndexPage/Index.tsx
index d59f6e9..8e48009 100644
--- a/src/pages/IndexPage/Index.tsx
+++ b/src/pages/IndexPage/Index.tsx
@@ -75,25 +75,61 @@ export default () => {
               </Column>
             </Row>
           </Display>
+
+          <Display mobile>
+            <Row>
+              <Logo size={200} />
+              <h1>OCBO e-Sign</h1>
+
+              <section class="title">
+                <h1 class="title__main">Secure e-Signature</h1>
+                <span class="title__sub">for Office of the City Building Official</span>
+                <p class="title__paragraph">A paperless and effortless solution on signing permits</p>
+              </section>
+
+              <Column gap={0.5}>
+                <Button wide label="Login" edges="curved" design="bo-primary" to="/login" />
+                <Button wide label="Register" edges="curved" design="bo-primary" to="/register" />
+              </Column>
+            </Row>
+          </Display>
         </Padding>
 
-        <Footer>
-          <Row content="split">
-            <Row gap={0.5}>
-              <Image avif={ocboAvif} webp={ocboWebp} size={30}></Image>
+        <Display desktop tablet>
+          <Footer>
+            <Row content="split">
+              <Row gap={0.5}>
+                <Image avif={ocboAvif} webp={ocboWebp} size={30}></Image>
+                <Row gap={0.25}>
+                  <Copyright year="2025" name="Office of the City Building Official" />
+                  <span>Davao City, Philippines</span>
+                </Row>
+              </Row>
+
               <Row gap={0.25}>
-                <Copyright year="2025" name="Office of the City Building Official" />
-                <span>Davao City, Philippines</span>
+                <span>Developed by:</span>
+                <Image avif={patAvif} webp={patWebp} size={90}></Image>
+                <span>Pat Alcala</span>
               </Row>
             </Row>
+          </Footer>
+        </Display>
 
-            <Row gap={0.25}>
-              <span>Developed by:</span>
-              <Image avif={patAvif} webp={patWebp} size={90}></Image>
-              <span>Pat Alcala</span>
-            </Row>
-          </Row>
-        </Footer>
+        <Display mobile>
+          <Footer>
+            <Column>
+              <Column gap={0.25}>
+                <Copyright year="2025" name="Office of the City Building Official" />
+                <span>Davao City, Philippines</span>
+
+                <Row gap={0.25}>
+                  <span>Developed by:</span> <Image avif={patAvif} webp={patWebp} size={60}></Image>
+                  <span>Pat Alcala</span>
+                </Row>
+              </Column>
+            </Column>
+          </Footer>
+        </Display>
       </Page>
     </>
   )