Pattern background not working as expected | Next.js | Page 1

So i am trying to have a pattern background however it is not filling the entire page, any help is appreciated

import React from 'react';

type Props = {};

const Home = (props: Props) => {
  return (
    <div className="relative flex flex-col items-center justify-center h-screen lg:w-1/3 xl:w-1/3 md:w-1/3 sm:w-full w-full">
      {/* Background pattern */}
      <div className="absolute inset-0 z-0 bg-gradient-to-b from-gray-100 to-gray-200">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 100 100"
          preserveAspectRatio="xMinYMin meet"
          className="h-full w-full"
        >
          <defs>
            <pattern
              id="pattern"
              patternUnits="userSpaceOnUse"
              width="25"
              height="25"
            >
              <image
                href="/assets/images/backgroundPattern.svg"
                x="0"
                y="0"
                width="25"
                height="25"
                preserveAspectRatio="xMidYMid slice"
              />
            </pattern>
          </defs>
          <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)" />
        </svg>
      </div>
      {/* Content */}
      <div className="relative z-10 bg-white rounded-lg shadow-lg p-8 h-full m-20 mx-6">
        <h1 className="text-3xl font-bold text-black">Welcome to the Home Page</h1>
        <p className="text-lg text-black">This is a simple home page</p>
      </div>
    </div>
  );
};

export default Home;

#Pattern background not working as expected