diff --git a/src/app/groups/[groupId]/group-tabs.tsx b/src/app/groups/[groupId]/group-tabs.tsx
index 28b4889..bd603cc 100644
--- a/src/app/groups/[groupId]/group-tabs.tsx
+++ b/src/app/groups/[groupId]/group-tabs.tsx
@@ -15,7 +15,7 @@ export function GroupTabs({ groupId }: Props) {
   return (
     <Tabs
       value={value}
-      className="mb-4 [&>*]:border"
+      className="[&>*]:border"
       onValueChange={(value) => {
         router.push(`/groups/${groupId}/${value}`)
       }}
diff --git a/src/app/groups/[groupId]/layout.tsx b/src/app/groups/[groupId]/layout.tsx
index 07cf17f..3e649e7 100644
--- a/src/app/groups/[groupId]/layout.tsx
+++ b/src/app/groups/[groupId]/layout.tsx
@@ -35,8 +35,8 @@ export default async function GroupLayout({
 
   return (
     <>
-      <div className="flex flex-col sm:flex-row justify-between">
-        <h1 className="font-bold text-2xl mb-4">
+      <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-3">
+        <h1 className="font-bold text-2xl">
           <Link href={`/groups/${groupId}`}>{group.name}</Link>
         </h1>
 
diff --git a/src/app/groups/layout.tsx b/src/app/groups/layout.tsx
index 65aec0e..8c221e1 100644
--- a/src/app/groups/layout.tsx
+++ b/src/app/groups/layout.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react'
 
 export default function GroupsLayout({ children }: PropsWithChildren<{}>) {
   return (
-    <main className="flex-1 max-w-screen-md w-full mx-auto p-4 flex flex-col gap-2">
+    <main className="flex-1 max-w-screen-md w-full mx-auto px-4 py-6 flex flex-col gap-6">
       {children}
     </main>
   )
diff --git a/src/app/groups/page.tsx b/src/app/groups/page.tsx
index 4a0d286..8aeeb59 100644
--- a/src/app/groups/page.tsx
+++ b/src/app/groups/page.tsx
@@ -11,8 +11,8 @@ export const metadata: Metadata = {
 export default async function GroupsPage() {
   return (
     <>
-      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-baseline mb-2">
-        <h1 className="font-bold text-2xl mb-4">
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 items-start">
+        <h1 className="font-bold text-2xl">
           <Link href="/groups">Recently visited groups</Link>
         </h1>
         <Button asChild>
diff --git a/src/app/groups/recent-group-list.tsx b/src/app/groups/recent-group-list.tsx
index 77feaf4..b8f8ff6 100644
--- a/src/app/groups/recent-group-list.tsx
+++ b/src/app/groups/recent-group-list.tsx
@@ -65,7 +65,7 @@ export function RecentGroupList() {
   }
 
   return (
-    <ul className="grid grid-cols-1 gap-2 mt-2 sm:grid-cols-3">
+    <ul className="grid grid-cols-1 gap-2 sm:grid-cols-3">
       {state.groups.map((group) => {
         const details =
           state.status === 'complete'