diff --git a/src/assets/hero-mobile.webp b/src/assets/hero-mobile.webp
new file mode 100644
index 0000000..d8b5091
Binary files /dev/null and b/src/assets/hero-mobile.webp differ
diff --git a/src/components/HeroButtons.tsx b/src/components/HeroButtons.tsx
index 9ab09f9..88baae3 100644
--- a/src/components/HeroButtons.tsx
+++ b/src/components/HeroButtons.tsx
@@ -16,17 +16,22 @@ const HeroButtons: FC<TProps> = (props) => {
       className={cn('flex items-center justify-center gap-4 w-full', className)}
     >
       <a
-        href="https://portal.trial.low-ops.com/"
+        href="https://hub.cinaq.com/low-ops-trial"
         target="_blank"
         rel="noopener noreferrer"
       >
-        <Button variant="secondary" size="lg" onClick={onClick}>
+        <Button
+          variant="secondary"
+          size="lg"
+          onClick={onClick}
+          aria-label="Show demo"
+        >
           <LinkExternal02 width={18} height={18} className="mr-2" />
           Demo
         </Button>
       </a>
       <a href="#contact-us">
-        <Button size="lg" onClick={onClick}>
+        <Button size="lg" onClick={onClick} aria-label="Contact us">
           Contact us
         </Button>
       </a>
diff --git a/src/components/SectionTitle.tsx b/src/components/SectionTitle.tsx
index eee1644..14717fc 100644
--- a/src/components/SectionTitle.tsx
+++ b/src/components/SectionTitle.tsx
@@ -10,7 +10,7 @@ const SectionTitle: FC<TProps> = (props) => {
 
   return (
     <div className="prose md:prose-md">
-      {!!title && <h2 className="text-center text-blue-500">{title}</h2>}
+      {!!title && <h2 className="text-center text-blue-700">{title}</h2>}
       <p className="text-center text-3xl md:text-4xl font-semibold leading-[32px] md:leading-[44px]">
         {description}
       </p>
diff --git a/src/components/header/AppLogo.tsx b/src/components/header/AppLogo.tsx
index 4809299..d64754d 100644
--- a/src/components/header/AppLogo.tsx
+++ b/src/components/header/AppLogo.tsx
@@ -4,7 +4,7 @@ import Image from 'next/image';
 const AppLogo = () => {
   return (
     <a href="#hero">
-      <Image src={logo} alt="lowops-logo" width={110} height={32} />
+      <Image src={logo} alt="lowops-logo" width={110} />
     </a>
   );
 };
diff --git a/src/components/header/MobileHeaderNav.tsx b/src/components/header/MobileHeaderNav.tsx
index 0f26928..0af8e24 100644
--- a/src/components/header/MobileHeaderNav.tsx
+++ b/src/components/header/MobileHeaderNav.tsx
@@ -42,6 +42,7 @@ const MobileHeaderNav = () => {
         variant="ghost"
         size="icon"
         className="flex md:hidden"
+        aria-label="Open menu"
       >
         <Menu01 width={28} height={28} />
       </Button>
@@ -54,7 +55,12 @@ const MobileHeaderNav = () => {
         <div>
           <div className="flex items-center justify-between p-4">
             <AppLogo />
-            <Button variant="ghost" size="icon" onClick={handleToggle}>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleToggle}
+              aria-label="Close menu"
+            >
               <XClose />
             </Button>
           </div>
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
index abde1e9..d692cc9 100644
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -208,8 +208,7 @@ const CarouselDots = React.forwardRef<
     >
       {items.map((_, i) => (
         <Button
-          title="Carousel dots"
-          aria-label="Carousel dots"
+          aria-label="Testimonials switch"
           key={i}
           className={cn(
             'w-[10px] h-[10px] rounded-full block shadow-none p-0',
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
new file mode 100644
index 0000000..5dda5d2
--- /dev/null
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+
+  return matches;
+}
diff --git a/src/sections/faq/FaqSection.tsx b/src/sections/faq/FaqSection.tsx
index 0512704..44f1539 100644
--- a/src/sections/faq/FaqSection.tsx
+++ b/src/sections/faq/FaqSection.tsx
@@ -39,7 +39,7 @@ const FaqSection: React.FC = () => {
             Can’t find the answer you’re looking for?
           </p>
           <a href="#contact-us">
-            <Button className="w-fit" size="default">
+            <Button className="w-fit" size="default" aria-label="Contact us">
               Contact us
             </Button>
           </a>
diff --git a/src/sections/form/FormSection.tsx b/src/sections/form/FormSection.tsx
index d491f9f..e0f8f4c 100644
--- a/src/sections/form/FormSection.tsx
+++ b/src/sections/form/FormSection.tsx
@@ -68,7 +68,9 @@ const FormSection: React.FC = () => {
             />
           </div>
 
-          <Button type="submit">Send message</Button>
+          <Button type="submit" aria-label="Send message">
+            Send message
+          </Button>
         </form>
       </div>
     </section>
diff --git a/src/sections/hero/HeroImage.tsx b/src/sections/hero/HeroImage.tsx
new file mode 100644
index 0000000..70c3fda
--- /dev/null
+++ b/src/sections/hero/HeroImage.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import heroMobileImage from '@/assets/hero-mobile.webp';
+import heroImage from '@/assets/hero.webp';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+import Image from 'next/image';
+
+const HeroImage = () => {
+  const isDesktop = useMediaQuery('(min-width: 768px)');
+
+  return isDesktop ? (
+    <Image
+      src={heroImage}
+      alt="lowops-portal-screen"
+      quality={80}
+      width={1400}
+      height={788}
+      priority
+      className="w-full mx-auto hidden md:block"
+    />
+  ) : (
+    <Image
+      src={heroMobileImage}
+      alt="lowops-portal-screen"
+      quality={80}
+      width={800}
+      height={450}
+      priority
+      className="w-full mx-auto block md:hidden"
+    />
+  );
+};
+
+export default HeroImage;
diff --git a/src/sections/hero/HeroSection.tsx b/src/sections/hero/HeroSection.tsx
index 217d52c..fd8729d 100644
--- a/src/sections/hero/HeroSection.tsx
+++ b/src/sections/hero/HeroSection.tsx
@@ -1,8 +1,7 @@
-import heroImage from '@/assets/hero.webp';
 import HeroButtons from '@/components/HeroButtons';
 import { cn } from '@/lib/utils';
-import Image from 'next/image';
 import { FC } from 'react';
+import HeroImage from './HeroImage';
 
 const HeroSection: FC = () => {
   return (
@@ -27,14 +26,8 @@ const HeroSection: FC = () => {
 
         <HeroButtons className="mb-10 md:mb-20" />
       </div>
-      <Image
-        src={heroImage}
-        alt="lowops-portal-screen"
-        quality={100}
-        objectFit="cover"
-        priority
-        className="max-w-[1400px] w-full mx-auto"
-      />
+
+      <HeroImage />
     </section>
   );
 };
diff --git a/src/sections/testimonials/TestimonialsCarousel.tsx b/src/sections/testimonials/TestimonialsCarousel.tsx
index ed1e3a7..524278b 100644
--- a/src/sections/testimonials/TestimonialsCarousel.tsx
+++ b/src/sections/testimonials/TestimonialsCarousel.tsx
@@ -31,8 +31,8 @@ const TestimonialsCarousel = () => {
                 <User01 width={28} height={28} className="text-gray-500" />
               </AvatarFallback>
             </Avatar>
-            <h4>{testimonial.author}</h4>
-            <h5 className="text-sm font-light">{testimonial.company}</h5>
+            <p className="font-semibold m-0 text-base">{testimonial.author}</p>
+            <p className="text-sm font-light m-0">{testimonial.company}</p>
           </div>
         </div>
       </CarouselItem>