diff --git a/frontend/src/components/connections/AlbyConnectionCard.tsx b/frontend/src/components/connections/AlbyConnectionCard.tsx
index 48fb79637..cc7823f27 100644
--- a/frontend/src/components/connections/AlbyConnectionCard.tsx
+++ b/frontend/src/components/connections/AlbyConnectionCard.tsx
@@ -84,7 +84,7 @@ function AlbyConnectionCard() {
       </CardHeader>
       <Separator />
       <CardContent className="group">
-        <div className="grid grid-cols-1 xl:grid-cols-2 gap-3 items-center relative">
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 items-center relative">
           <div className="flex flex-col gap-4">
             <div className="flex flex-row gap-4">
               <UserAvatar className="h-14 w-14" />
diff --git a/frontend/src/components/connections/AppDetailConnectedApps.tsx b/frontend/src/components/connections/AppDetailConnectedApps.tsx
index 27a2f1abf..03b5881f0 100644
--- a/frontend/src/components/connections/AppDetailConnectedApps.tsx
+++ b/frontend/src/components/connections/AppDetailConnectedApps.tsx
@@ -20,7 +20,7 @@ export function AppDetailConnectedApps({
       {showTitle && (
         <h2 className="font-medium text-lg mt-6">Your Connections</h2>
       )}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         {connectedApps.map((app) => (
           <AppCard key={app.id} app={app} />
         ))}
diff --git a/frontend/src/components/connections/AppStore.tsx b/frontend/src/components/connections/AppStore.tsx
index 59e632063..93e67a616 100644
--- a/frontend/src/components/connections/AppStore.tsx
+++ b/frontend/src/components/connections/AppStore.tsx
@@ -4,7 +4,7 @@ import SuggestedApps from "src/components/connections/SuggestedApps";
 
 function AppStore() {
   return (
-    <>
+    <div className="flex flex-col gap-4">
       <div className="flex flex-col flex-1">
         <div className="flex justify-between items-center">
           <div className="flex-1">
@@ -21,7 +21,7 @@ function AppStore() {
         </div>
       </div>
       <SuggestedApps />
-    </>
+    </div>
   );
 }
 
diff --git a/frontend/src/components/connections/AppUsage.tsx b/frontend/src/components/connections/AppUsage.tsx
index 0cd745d57..a4154cfe6 100644
--- a/frontend/src/components/connections/AppUsage.tsx
+++ b/frontend/src/components/connections/AppUsage.tsx
@@ -77,7 +77,7 @@ export function AppUsage({ app }: { app: App }) {
       {app.isolated && (
         <div
           className={cn(
-            "grid grid-cols-1 gap-3",
+            "grid grid-cols-1 gap-4",
             app.metadata?.app_store_app_id === SUBWALLET_APPSTORE_APP_ID &&
               "lg:grid-cols-2"
           )}
@@ -201,7 +201,7 @@ export function AppUsage({ app }: { app: App }) {
         </div>
       )}
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <Card>
           <CardHeader>
             <CardTitle>Total Spent</CardTitle>
diff --git a/frontend/src/components/connections/ConnectedApps.tsx b/frontend/src/components/connections/ConnectedApps.tsx
index 8e2f0e55a..73f57e27e 100644
--- a/frontend/src/components/connections/ConnectedApps.tsx
+++ b/frontend/src/components/connections/ConnectedApps.tsx
@@ -52,7 +52,7 @@ function ConnectedApps() {
     );
 
   return (
-    <>
+    <div className="flex flex-col gap-4">
       <div className="flex flex-col flex-1">
         <div className="flex justify-between items-center">
           <div className="flex-1">
@@ -76,13 +76,11 @@ function ConnectedApps() {
       </div>
 
       {info.albyAccountConnected && (
-        <div className="mt-6">
+        <div>
           <AlbyConnectionCard />
         </div>
       )}
 
-      <div className="mt-6" />
-
       {!otherApps.length && (
         <EmptyState
           icon={CableIcon}
@@ -97,7 +95,7 @@ function ConnectedApps() {
       {otherApps.length > 0 && (
         <div
           ref={appsListRef}
-          className="grid grid-cols-1 lg:grid-cols-2 gap-3 items-stretch"
+          className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch"
         >
           {otherApps.map((app, index) => (
             <AppCard key={index} app={app} />
@@ -111,7 +109,7 @@ function ConnectedApps() {
         page={page}
         handlePageChange={handlePageChange}
       />
-    </>
+    </div>
   );
 }
 
diff --git a/frontend/src/components/connections/SuggestedApps.tsx b/frontend/src/components/connections/SuggestedApps.tsx
index a097c0814..01832ff26 100644
--- a/frontend/src/components/connections/SuggestedApps.tsx
+++ b/frontend/src/components/connections/SuggestedApps.tsx
@@ -17,8 +17,8 @@ import {
 
 function AppCard(app: AppStoreApp) {
   return (
-    <Link to={getAppStoreUrl(app)}>
-      <Card className="h-full">
+    <Link to={getAppStoreUrl(app)} className="min-w-0">
+      <Card className="h-full min-w-0">
         <CardContent>
           <div className="flex gap-3 items-center">
             <img
@@ -26,7 +26,7 @@ function AppCard(app: AppStoreApp) {
               alt={`${app.title} logo`}
               className="inline rounded-lg size-12"
             />
-            <div className="grow">
+            <div className="grow min-w-0">
               <CardTitle>{app.title}</CardTitle>
               <CardDescription>
                 {app.description}
@@ -53,7 +53,7 @@ export default function SuggestedApps() {
 
   return (
     <>
-      <div className="flex gap-2 flex-wrap mt-6 mb-2">
+      <div className="flex gap-2 flex-wrap">
         {sortedAppStoreCategories.map(([categoryId, category]) => (
           <Badge
             key={categoryId}
@@ -77,7 +77,7 @@ export default function SuggestedApps() {
           </Badge>
         ))}
       </div>
-      <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
         {sortedAppStoreCategories
           .filter(
             ([categoryId]) =>
@@ -86,9 +86,9 @@ export default function SuggestedApps() {
           )
           .map(([categoryId, category]) => {
             return (
-              <div key={categoryId} className="pt-4">
+              <div key={categoryId}>
                 <h3 className="font-semibold text-xl">{category.title}</h3>
-                <div className="grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3 mt-4">
+                <div className="grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 mt-4">
                   {appStoreApps
                     .filter((app) =>
                       (app.categories as string[]).includes(categoryId)
diff --git a/frontend/src/components/layouts/SettingsLayout.tsx b/frontend/src/components/layouts/SettingsLayout.tsx
index 6129402ca..7a8685a7c 100644
--- a/frontend/src/components/layouts/SettingsLayout.tsx
+++ b/frontend/src/components/layouts/SettingsLayout.tsx
@@ -110,7 +110,7 @@ export default function SettingsLayout() {
         }
       />
 
-      <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-4 lg:space-y-0 h-full">
+      <div className="flex flex-col gap-4 lg:flex-row h-full">
         <aside className="flex flex-col justify-between lg:w-1/5">
           <nav className="flex overflow-x-auto pb-2 gap-1 lg:flex-col lg:overflow-x-visible lg:pb-0 lg:gap-0 lg:space-y-0.5">
             <MenuItem to="/settings" icon={SlidersHorizontalIcon}>
@@ -182,7 +182,7 @@ export default function SettingsLayout() {
         </aside>
         <Separator orientation="vertical" className="hidden lg:block" />
         <div className="flex-1 lg:max-w-2xl">
-          <div className="grid gap-6">
+          <div className="grid gap-4">
             <Outlet />
           </div>
         </div>
diff --git a/frontend/src/screens/ConnectAlbyAccount.tsx b/frontend/src/screens/ConnectAlbyAccount.tsx
index b4b1a3354..2e63e2f2c 100644
--- a/frontend/src/screens/ConnectAlbyAccount.tsx
+++ b/frontend/src/screens/ConnectAlbyAccount.tsx
@@ -32,7 +32,7 @@ export function ConnectAlbyAccount({ connectUrl }: ConnectAlbyAccountProps) {
           pageTitle="Connect Your Alby Account"
           description="Your Alby Account brings several benefits to your Alby Hub"
         />
-        <div className="grid grid-cols-1 md:grid-cols-2 w-full gap-3 mt-5">
+        <div className="grid grid-cols-1 md:grid-cols-2 w-full gap-4 mt-5">
           <Card className="w-full relative py-2">
             <CardHeader className="flex flex-col justify-center items-center text-center p-4">
               <ZapIcon className="size-6" />
diff --git a/frontend/src/screens/Home.tsx b/frontend/src/screens/Home.tsx
index 6bed1fdf1..65428fa99 100644
--- a/frontend/src/screens/Home.tsx
+++ b/frontend/src/screens/Home.tsx
@@ -40,7 +40,7 @@ function Home() {
         title="Home"
         contentRight={<SearchInput placeholder="Search" />}
       />
-      <div className="columns-1 lg:columns-2 gap-3 *:mb-3 *:break-inside-avoid">
+      <div className="columns-1 lg:columns-2 gap-4 *:mb-4 *:break-inside-avoid">
         <OnboardingChecklist />
         <StoriesWidget />
         <WhatsNewWidget />
@@ -60,7 +60,7 @@ function Home() {
           </CardHeader>
           {isNerd && (
             <CardContent>
-              <div className="grid gap-3">
+              <div className="grid gap-4">
                 <NodeStatusWidget />
                 <BlockHeightWidget />
                 <OnchainFeesWidget />
diff --git a/frontend/src/screens/ai/AI.tsx b/frontend/src/screens/ai/AI.tsx
index 65ccc6d0e..97846dcc2 100644
--- a/frontend/src/screens/ai/AI.tsx
+++ b/frontend/src/screens/ai/AI.tsx
@@ -419,7 +419,7 @@ export function AI() {
         {/* Featured services — branded full cards */}
         <div>
           <h2 className="text-2xl font-bold mb-4">Featured Services</h2>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
             <ExternalLink to="https://www.bitrefill.com/agents">
               <Card className="group relative h-full hover:border-primary/30 transition-colors p-0">
                 <CardContent className="p-4 flex flex-col h-full">
diff --git a/frontend/src/screens/alby/SupportAlby.tsx b/frontend/src/screens/alby/SupportAlby.tsx
index 54fc64c13..d2854dd7d 100644
--- a/frontend/src/screens/alby/SupportAlby.tsx
+++ b/frontend/src/screens/alby/SupportAlby.tsx
@@ -163,7 +163,7 @@ function SupportAlby() {
         description="We are committed to elevating the Bitcoin ecosystem by offering reliable, efficient, and user-friendly software solutions for seamless transactions. With your help, we can keep pushing boundaries and evolving Alby Hub into something extraordinary."
       />
       <h2 className="text-2xl font-semibold">Become a Supporter</h2>
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <Card className="flex flex-col">
           <CardHeader className="grow">
             <CardTitle>Upgrade to Pro</CardTitle>
diff --git a/frontend/src/screens/apps/AppDetails.tsx b/frontend/src/screens/apps/AppDetails.tsx
index 22ebad81b..30b603692 100644
--- a/frontend/src/screens/apps/AppDetails.tsx
+++ b/frontend/src/screens/apps/AppDetails.tsx
@@ -393,7 +393,7 @@ function AppInternal({ app, refetchApp, capabilities }: AppInternalProps) {
           {!isEditingPermissions && (
             <>
               {appStoreApp && (
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <AboutAppCard appStoreApp={appStoreApp} />
                   <AppLinksCard appStoreApp={appStoreApp} />
                 </div>
diff --git a/frontend/src/screens/apps/AppsCleanup.tsx b/frontend/src/screens/apps/AppsCleanup.tsx
index e4bf40df3..73e09ca89 100644
--- a/frontend/src/screens/apps/AppsCleanup.tsx
+++ b/frontend/src/screens/apps/AppsCleanup.tsx
@@ -68,8 +68,8 @@ export function AppsCleanup() {
           </AlertDescription>
         </Alert>
       )}
-      <div className="grid grid-cols-1 lg:grid-cols-5 gap-3">
-        <div className="lg:col-span-3 flex flex-col gap-3">
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
+        <div className="lg:col-span-3 flex flex-col gap-4">
           {currentApp && (
             <>
               <div className="w-full h-full">
diff --git a/frontend/src/screens/apps/Connections.tsx b/frontend/src/screens/apps/Connections.tsx
index 66476159d..9f55a19be 100644
--- a/frontend/src/screens/apps/Connections.tsx
+++ b/frontend/src/screens/apps/Connections.tsx
@@ -41,8 +41,8 @@ export function Connections() {
           />
         }
       />
-      <Tabs value={tab} onValueChange={setTab} className="px-2 lg:px-0">
-        <TabsList className="mb-2 lg:mb-6">
+      <Tabs value={tab} onValueChange={setTab} className="gap-4">
+        <TabsList>
           <TabsTrigger value="app-store" className="flex gap-2 items-center">
             <LayoutGridIcon className="w-5 h-5" /> App Store
           </TabsTrigger>
diff --git a/frontend/src/screens/appstore/AppStoreDetail.tsx b/frontend/src/screens/appstore/AppStoreDetail.tsx
index 257d0a34b..ee1522cc1 100644
--- a/frontend/src/screens/appstore/AppStoreDetail.tsx
+++ b/frontend/src/screens/appstore/AppStoreDetail.tsx
@@ -46,9 +46,9 @@ function AppStoreDetailInternal({ appStoreApp }: { appStoreApp: AppStoreApp }) {
   }
 
   return (
-    <div className="grid gap-3">
+    <div className="grid gap-4">
       <AppStoreDetailHeader appStoreApp={appStoreApp} />
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <AboutAppCard appStoreApp={appStoreApp} />
         <AppLinksCard appStoreApp={appStoreApp} />
         {/* <Card>
diff --git a/frontend/src/screens/channels/Channels.tsx b/frontend/src/screens/channels/Channels.tsx
index 7c21150fb..e94a164ce 100644
--- a/frontend/src/screens/channels/Channels.tsx
+++ b/frontend/src/screens/channels/Channels.tsx
@@ -339,7 +339,7 @@ export default function Channels() {
 
           <div
             className={cn(
-              "flex flex-col sm:flex-row flex-wrap gap-3 slashed-zero"
+              "flex flex-col sm:flex-row flex-wrap gap-4 slashed-zero"
             )}
           >
             <Card className="flex flex-1 sm:flex-2 flex-col">
diff --git a/frontend/src/screens/internal-apps/Tictactoe.tsx b/frontend/src/screens/internal-apps/Tictactoe.tsx
index bc155cc32..5ce4c7ebd 100644
--- a/frontend/src/screens/internal-apps/Tictactoe.tsx
+++ b/frontend/src/screens/internal-apps/Tictactoe.tsx
@@ -146,7 +146,7 @@ export function Tictactoe() {
       {!!tictactoeApps?.length && (
         <>
           <h2 className="font-semibold text-xl">Tic Tac Toe connections</h2>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 items-stretch">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch">
             {tictactoeApps.map((app, index) => (
               <AppCard key={index} app={app} />
             ))}
diff --git a/frontend/src/screens/internal-apps/ZapPlanner.tsx b/frontend/src/screens/internal-apps/ZapPlanner.tsx
index 91e933236..ba7be8f7e 100644
--- a/frontend/src/screens/internal-apps/ZapPlanner.tsx
+++ b/frontend/src/screens/internal-apps/ZapPlanner.tsx
@@ -515,7 +515,7 @@ export function ZapPlanner() {
         scheduled payment. This allows you to securely setup recurring payments
         and be in full control.
       </p>
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
         {recipients.map((recipient) => (
           <Card key={recipient.lightningAddress}>
             <CardHeader>
@@ -544,7 +544,7 @@ export function ZapPlanner() {
       {!!zapplannerApps?.length && (
         <>
           <h2 className="font-semibold text-xl">Recurring Payments</h2>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 items-stretch">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch">
             {zapplannerApps.map((app, index) => (
               <AppCard
                 key={index}
diff --git a/frontend/src/screens/subwallets/SubwalletList.tsx b/frontend/src/screens/subwallets/SubwalletList.tsx
index 93ba8eade..76a1e412f 100644
--- a/frontend/src/screens/subwallets/SubwalletList.tsx
+++ b/frontend/src/screens/subwallets/SubwalletList.tsx
@@ -81,7 +81,7 @@ export function SubwalletList() {
     subwalletTotalAmountMsat <= balances.lightning.totalSpendableMsat;
 
   return (
-    <div className="grid gap-3">
+    <div className="grid gap-4">
       <AppHeader
         title="Sub-wallets"
         pageTitle="Sub-wallets"
@@ -148,7 +148,7 @@ export function SubwalletList() {
         </Alert>
       )}
 
-      <div className="flex flex-col sm:flex-row flex-wrap gap-3 slashed-zero">
+      <div className="flex flex-col sm:flex-row flex-wrap gap-4 slashed-zero">
         <Card className="flex flex-1 flex-col">
           <CardHeader className="pb-2">
             <CardTitle className="text-lg">
@@ -191,11 +191,11 @@ export function SubwalletList() {
           </CardContent>
         </Card>
       </div>
-      <div className="mt-8">
+      <div>
         <h3 className="font-semibold text-2xl mb-4">Managed Sub-wallets</h3>
         <div
           ref={appsListRef}
-          className="grid grid-cols-1 lg:grid-cols-2 gap-3 items-stretch"
+          className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch"
         >
           {subwalletApps.map((app, index) => (
             <AppCard key={index} app={app} />