diff --git a/frontend/src/agents/index.tsx b/frontend/src/agents/index.tsx
index d0052111..4634dc76 100644
--- a/frontend/src/agents/index.tsx
+++ b/frontend/src/agents/index.tsx
@@ -127,7 +127,7 @@ function AgentsList() {
             New Agent
           </button>
         </div>
-        <div className="flex w-full flex-wrap gap-4">
+        <div className="grid w-full grid-cols-2 gap-2 md:flex md:flex-wrap md:gap-4">
           {loading ? (
             <div className="flex h-72 w-full items-center justify-center">
               <Spinner />
@@ -231,7 +231,7 @@ function AgentCard({
   };
   return (
     <div
-      className={`relative flex h-44 w-48 flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] dark:bg-[#383838] hover:dark:bg-[#383838]/80 ${agent.status === 'published' && 'cursor-pointer'}`}
+      className={`relative flex h-44 w-full flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] dark:bg-[#383838] hover:dark:bg-[#383838]/80 md:w-48 ${agent.status === 'published' && 'cursor-pointer'}`}
       onClick={(e) => {
         e.stopPropagation();
         handleClick();