diff --git a/web/app/(home)/_comps/hero.tsx b/web/app/(home)/_comps/hero.tsx
index 28e93a3..458b6fd 100644
--- a/web/app/(home)/_comps/hero.tsx
+++ b/web/app/(home)/_comps/hero.tsx
@@ -16,10 +16,10 @@ export function HeroSection(props: { title: string; subtitle: string; img: strin
     >
       <div
         className={`
-        w-full 
+        w-[75%] md:w-full 
         grid grid-cols-1
         md:grid-cols-2
-        md:px-[5%] 
+        md:px-[5%] items-center self-center 
     `}
       >
         {props.imgFirst ? (
@@ -44,9 +44,9 @@ export function HeroSection(props: { title: string; subtitle: string; img: strin
 function TextBlock(props: { title: string; subtitle: string; img: string; imgFirst?: boolean }) {
   return (
     <div className="h-full flex flex-col items-start justify-center md:px-4 py-8 md:py-4">
-      <TextH className="text-[80px] font-extrabold">{props.title}</TextH>
+      <TextH className="text-[40px] md:text-[80px] font-extrabold md:text-center text-left">{props.title}</TextH>
       <div className="mb-10" />
-      <p className={'text-xl font-extralight'}>{props.subtitle}</p>
+      <p className={'text-xl font-extralight md:text-center '}>{props.subtitle}</p>
     </div>
   );
 }
diff --git a/web/app/(home)/page.tsx b/web/app/(home)/page.tsx
index 74b937a..9241d91 100644
--- a/web/app/(home)/page.tsx
+++ b/web/app/(home)/page.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import React from 'react';
-import { TextH, TextP } from '@/comps';
-import { cn, useAppRouter } from '@/lib';
-import { HeroCenter, HeroSection, JumbutronSection } from './_comps';
+import { TextH } from '@/comps';
+import { useAppRouter } from '@/lib';
+import { HeroSection, JumbutronSection } from './_comps';
 import { ContentBlock } from './_comps/content';
 
 export default function Home() {