diff --git a/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx b/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
index fededa3cd64..7d717067421 100644
--- a/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import {
   Button,
+  Card,
   Dialog,
   DialogContent,
   DialogFooter,
@@ -8,6 +9,12 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
 } from 'ui'
 
 import { TIER_QUERY_LIMITS } from './Logs.constants'
@@ -47,30 +54,34 @@ const UpgradePrompt: React.FC<Props> = ({
         <DialogSection>
           <div className="space-y-4">
             <p className="text-sm">{description}</p>
-            <div className="border-control bg-surface-300 rounded-sm border">
-              <div className="flex items-center px-4 pt-2 pb-1">
-                <p className="text-foreground-light w-[40%] text-sm">Plan</p>
-                <p className="text-foreground-light w-[60%] text-sm">Retention duration</p>
-              </div>
-              <div className="py-1">
-                <div className="flex items-center px-4 py-1">
-                  <p className="w-[40%] text-sm">Free</p>
-                  <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.FREE.text}</p>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <p className="w-[40%] text-sm">Pro</p>
-                  <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.PRO.text}</p>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <p className="w-[40%] text-sm">Team</p>
-                  <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.TEAM.text}</p>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <p className="w-[40%] text-sm">Enterprise</p>
-                  <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.ENTERPRISE.text}</p>
-                </div>
-              </div>
-            </div>
+            <Card>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Plan</TableHead>
+                    <TableHead>Retention duration</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow>
+                    <TableCell>Free</TableCell>
+                    <TableCell>{TIER_QUERY_LIMITS.FREE.text}</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>Pro</TableCell>
+                    <TableCell>{TIER_QUERY_LIMITS.PRO.text}</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>Team</TableCell>
+                    <TableCell>{TIER_QUERY_LIMITS.TEAM.text}</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>Enterprise</TableCell>
+                    <TableCell>{TIER_QUERY_LIMITS.ENTERPRISE.text}</TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </Card>
           </div>
         </DialogSection>
         <DialogFooter className="flex justify-end gap-3">