diff --git a/app/globals.css b/app/globals.css
index 5c2db89..fc6f5de 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,57 +1,67 @@
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+    --background: #ffffff;
+    --foreground: #171717;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+    :root {
+        --background: #0a0a0a;
+        --foreground: #ededed;
+    }
 }
 
 html,
 body {
-  max-width: 100vw;
-  overflow-x: hidden;
+    max-width: 100vw;
+    overflow-x: hidden;
 }
 
 body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    color: var(--foreground);
+    background: var(--background);
+    font-family: Arial, Helvetica, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 * {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
 }
 
 a {
-  color: inherit;
-  text-decoration: none;
+    color: inherit;
+    text-decoration: none;
 }
 
 @media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
+    html {
+        color-scheme: dark;
+    }
 }
 
 div.api-spec p {
-  margin-top: 1rem;
-  line-height: 2rem;
+    margin-top: 1rem;
+    line-height: 2rem;
 }
 
 div.api-spec code {
-  display: block;
-  padding: 1rem;
-  border-radius: 5px;
-  font-size: 0.9em;
-  color: #555;
-  margin-bottom: 10px;
-  word-break: break-all;
+    display: block;
+    padding: 1rem;
+    border-radius: 5px;
+    font-size: 0.9em;
+    color: #555;
+    margin-bottom: 10px;
+    word-break: break-all;
 }
+
+.content-wrapper {
+    max-width: 50vw;
+}
+
+@media (max-width: 600px) {
+    .content-wrapper {
+        max-width: 100vw;
+    }
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 9927b4a..25f6271 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -60,7 +60,7 @@ export default function Home() {
                 opacity: mounted ? 1 : 0,
                 transition: 'opacity 0.5s ease-in',
             }}>
-                Welcome to Tamil Thirukkural App
+                Thirukkural API
             </h1>
             <style jsx>{`
                 @keyframes gradientShift {
@@ -72,11 +72,10 @@ export default function Home() {
                     }
                 }
             `}</style>
-            <p style={{
+            <p className={'content-wrapper'} style={{
                 fontSize: '0.9rem',
                 color: `${primaryColor}`,
                 fontWeight: 'bold',
-                maxWidth: '600px',
                 textAlign: 'center',
                 lineHeight: '1.6',
                 marginBottom: '30px',
@@ -88,12 +87,11 @@ export default function Home() {
                 Explore the ancient wisdom of Thirukkural, a classic Tamil text consisting of 1,330 couplets or Kurals,
                 dealing with various aspects of life and morality.
             </p>
-            <div style={{
+            <div className={'content-wrapper'} style={{
                 backgroundColor: 'white',
                 padding: '20px',
                 borderRadius: '15px',
                 boxShadow: `0 6px 12px ${primaryLight}`,
-                maxWidth: '50%',
                 width: '100%',
                 border: `2px solid ${primaryColor}`,
             }}>
@@ -160,11 +158,10 @@ export default function Home() {
 
             <hr/>
 
-            <section style={{
+            <section className={'content-wrapper'} style={{
                 padding: '2rem',
                 marginTop: '1rem',
                 marginBottom: '2rem',
-                maxWidth: '50%',
                 overflowX: 'auto',
                 backgroundColor: 'white',
                 borderRadius: '15px',