diff --git a/src/app/groups/recent-group-list-card.tsx b/src/app/groups/recent-group-list-card.tsx
index 7809566..0218fb8 100644
--- a/src/app/groups/recent-group-list-card.tsx
+++ b/src/app/groups/recent-group-list-card.tsx
@@ -58,7 +58,11 @@ export function RecentGroupListCard({
 
   return (
     <li key={group.id}>
-      <Button variant="outline" className="h-fit w-full py-3" asChild>
+      <Button
+        variant="secondary"
+        className="h-fit w-full py-3 rounded-lg border bg-card shadow-sm"
+        asChild
+      >
         <div
           className="text-base"
           onClick={() => router.push(`/groups/${group.id}`)}
diff --git a/src/app/groups/recent-group-list.tsx b/src/app/groups/recent-group-list.tsx
index 9ad6f56..b646997 100644
--- a/src/app/groups/recent-group-list.tsx
+++ b/src/app/groups/recent-group-list.tsx
@@ -155,7 +155,7 @@ function GroupList({
   setState: (state: SetStateAction<RecentGroupsState>) => void
 }) {
   return (
-    <ul className="grid grid-cols-1 gap-2 sm:grid-cols-3">
+    <ul className="grid gap-2 sm:grid-cols-2">
       {groups.map((group) => (
         <RecentGroupListCard
           key={group.id}