diff --git a/src/modules/home/home.tsx b/src/modules/home/home.tsx
index e5a009c..f20bee3 100644
--- a/src/modules/home/home.tsx
+++ b/src/modules/home/home.tsx
@@ -24,7 +24,7 @@ const HomeModule: React.FC = () => {
   return (
     <div className="max-w-screen m-10 flex min-h-screen flex-col items-center">
       <h1 className="text-2xl font-bold">Baca Al-Quran Online</h1>
-      <div className="mt-5 grid grid-cols-4 gap-3">
+      <div className="mt-5 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
         {surahs.map((surah, _index) => (
           <Link
             href={`/${surah.nomor}`}