diff --git a/src/app.tsx b/src/app.tsx
index 83c6cb6..2503fd2 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -20,14 +20,14 @@ export function App() {
           <div className="h-full text-white flex items-center justify-center backdrop-blur-[3px] backdrop-grayscale-50">
             <div className="flex flex-col gap-16 items-center text-center">
               <div className="flex flex-col gap-4 items-center">
-                <h2 className="text-4xl font-bold">
+                <h2 className="text-4xl font-bold sm:text-6xl">
                   <AuroraText>Orchestral</AuroraText> Event Management
                 </h2>
                 <TextAnimate
                   animation="blurInUp"
                   by="character"
                   as="h3"
-                  className="text-xl"
+                  className="text-xl sm:text-3xl"
                 >
                   Without The Hassle
                 </TextAnimate>
@@ -36,12 +36,12 @@ export function App() {
             </div>
           </div>
         </div>
-        <div className="relative overflow-hidden py-5 flex flex-col gap-5">
+        <div className="relative overflow-hidden py-5 flex flex-col gap-5 sm:py-10">
           <TextAnimate
             animation="blurInUp"
             by="character"
             as="h3"
-            className="text-xl font-bold text-center"
+            className="text-xl font-bold text-center sm:text-3xl"
           >
             Our Partners
           </TextAnimate>
@@ -50,37 +50,37 @@ export function App() {
           <DotPattern className="-z-10" />
         </div>
         <div className="bg-[url(https://cdn.toontrack.com/app/uploads/product/upright-ebx/jpg/upright-ebx-top-mobile.jpg)] bg-cover bg-center text-white">
-          <div className="flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] 2xl:px-[500px] backdrop-blur-[5px] backdrop-grayscale-25">
+          <div className="flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] backdrop-blur-[5px] backdrop-grayscale-25  sm:py-10">
             <TextAnimate
               animation="blurInUp"
               by="character"
               as="h3"
-              className="text-xl font-bold text-center"
+              className="text-xl font-bold text-center sm:text-3xl"
             >
               About Us
             </TextAnimate>
-            <p>
+            <p className="sm:text-lg">
               We are dedicated to simplifying orchestral event management
               through innovative solutions tailored to the unique needs of
               orchestras and their audiences.
             </p>
-            <p>
+            <p className="sm:text-lg">
               Our platform streamlines the planning, coordination, and execution
               of orchestral events, allowing musicians and organizers to focus
               on what they do best: creating unforgettable musical experiences.
             </p>
           </div>
         </div>
-        <div className="relative flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] 2xl:px-[500px] backdrop-blur-[6px]">
+        <div className="relative flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] backdrop-blur-[6px] sm:py-10">
           <TextAnimate
             animation="blurInUp"
             by="character"
             as="h3"
-            className="text-xl font-bold text-center"
+            className="text-xl font-bold text-center sm:text-3xl"
           >
             Events
           </TextAnimate>
-          <p>
+          <p className="sm:text-lg">
             Are you an event organizer looking to host an orchestral
             performance? Our platform connects you with talented orchestras and
             provides the tools you need to plan and execute a successful event.
@@ -93,16 +93,16 @@ export function App() {
           <GridPattern strokeDasharray="4 2" className="-z-10" />
         </div>
         <div className="bg-[url(https://images.stockcake.com/public/1/3/a/13a0d24a-a714-43b5-b462-636017c01d60_large/grand-piano-interior-stockcake.jpg)] bg-cover bg-center text-white">
-          <div className="flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] 2xl:px-[500px] backdrop-blur-[3px] backdrop-grayscale-50">
+          <div className="flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] backdrop-blur-[3px] backdrop-grayscale-50 sm:py-10">
             <TextAnimate
               animation="blurInUp"
               by="character"
               as="h3"
-              className="text-xl font-bold text-center"
+              className="text-xl font-bold text-center sm:text-3xl"
             >
               Employee Management
             </TextAnimate>
-            <p>
+            <p className="sm:text-lg">
               Are you an orchestra looking to manage your musicians and staff
               more effectively? Our platform offers comprehensive employee
               management solutions designed specifically for orchestras.
@@ -114,37 +114,39 @@ export function App() {
             </div>
           </div>
         </div>
-        <div className="relative flex flex-col gap-4 p-6 sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] 2xl:px-[500px]">
-          <h3 className="font-alex-brush text-2xl">Great Music LLM</h3>
+        <div className="relative flex flex-col gap-4 p-6 sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] sm:py-10 sm:flex-row sm:justify-around">
+          <h3 className="font-alex-brush text-2xl sm:text-3xl">
+            Great Music LLM
+          </h3>
           <div className="flex flex-col gap-2">
-            <h4 className="font-bold">Services</h4>
+            <h4 className="font-bold text-lg sm:text-xl">Services</h4>
             <div className="flex flex-col gap-1">
               <a
                 href="#"
-                className="text-gray-500 hover:text-gray-600 hover:underline"
+                className="text-gray-500 hover:text-gray-600 hover:underline sm:text-lg"
               >
                 Events
               </a>
               <a
                 href="#"
-                className="text-gray-500 hover:text-gray-600 hover:underline"
+                className="text-gray-500 hover:text-gray-600 hover:underline sm:text-lg"
               >
                 Employee Management
               </a>
             </div>
           </div>
           <div className="flex flex-col gap-2">
-            <h4 className="font-bold">Company</h4>
+            <h4 className="font-bold text-lg sm:text-xl">Company</h4>
             <div className="flex flex-col gap-1">
               <a
                 href="#"
-                className="text-gray-500 hover:text-gray-600 hover:underline"
+                className="text-gray-500 hover:text-gray-600 hover:underline sm:text-lg"
               >
                 Terms &amp; Conditions
               </a>
               <a
                 href="#"
-                className="text-gray-500 hover:text-gray-600 hover:underline"
+                className="text-gray-500 hover:text-gray-600 hover:underline sm:text-lg"
               >
                 Privacy Policy
               </a>