diff --git a/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx b/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx
index beaa3fcd4fb..199950bf951 100644
--- a/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx
@@ -3,7 +3,7 @@ import { ExternalLink, RefreshCw } from 'lucide-react'
 import Link from 'next/link'
 import { useQueryState } from 'nuqs'
 import { useEffect } from 'react'
-import { Button, cn, CriticalIcon, Separator } from 'ui'
+import { Button, cn, Separator } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import { TimestampInfo } from 'ui-patterns/TimestampInfo'
@@ -11,7 +11,10 @@ import { TimestampInfo } from 'ui-patterns/TimestampInfo'
 import { UserHeader } from './UserHeader'
 import { PANEL_PADDING } from './Users.constants'
 import { LOGS_TABLES } from '@/components/interfaces/Settings/Logs/Logs.constants'
+import { getLevelRowClassName } from '@/components/interfaces/UnifiedLogs/UnifiedLogs.utils'
 import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
+import { DataTableColumnLevelIndicator } from '@/components/ui/DataTable/DataTableColumn/DataTableColumnLevelIndicator'
+import { DataTableColumnStatusCode } from '@/components/ui/DataTable/DataTableColumn/DataTableColumnStatusCode'
 import { User } from '@/data/auth/users-infinite-query'
 import useLogsPreview from '@/hooks/analytics/useLogsPreview'
 import { useLogsUrlState } from '@/hooks/analytics/useLogsUrlState'
@@ -131,50 +134,46 @@ export const UserLogs = ({ user }: UserLogsProps) => {
           <div>
             <div className="border border-b-0 rounded-t-md divide-y overflow-hidden">
               {authLogs.map((log) => {
-                const status = ((log.status ?? '-') as any).toString()
-                const is400 = status.startsWith('4')
-                const is500 = status.startsWith('5')
+                const status =
+                  log.status !== undefined && log.status !== null ? String(log.status) : undefined
+                const level = status?.startsWith('5')
+                  ? 'error'
+                  : status?.startsWith('4')
+                    ? 'warning'
+                    : 'success'
 
                 return (
                   <div
                     key={log.id}
-                    className="flex items-center transition font-mono px-2 py-1.5 bg-surface-100 divide-x"
+                    className={cn(
+                      'group relative flex items-center gap-x-2 h-[30px] px-2 text-xs hover:bg-surface-200',
+                      getLevelRowClassName(level)
+                    )}
                   >
-                    <p className="text-xs text-foreground-light min-w-[125px] w-[125px] px-1">
+                    <DataTableColumnLevelIndicator value={level} className="w-2 shrink-0" />
+                    <div className="font-mono tracking-tight text-foreground-light w-[120px] shrink-0">
                       <TimestampInfo utcTimestamp={log.timestamp / 1000} />
-                    </p>
-                    <div className="flex items-center text-xs text-foreground-light h-[22px] min-w-[70px] w-[70px] px-2">
-                      <div
-                        className={cn(
-                          'flex items-center justify-center gap-x-1',
-                          !!log.status && 'border px-1 py-0.5 rounded-sm',
-                          is400
-                            ? 'text-warning border-warning bg-warning-300'
-                            : is500
-                              ? 'text-destructive border-destructive bg-destructive-300'
-                              : ''
-                        )}
-                      >
-                        {(is400 || is500) && (
-                          <CriticalIcon hideBackground className={cn(is400 && 'text-warning')} />
-                        )}
-                        {status}
-                      </div>
                     </div>
-                    <p className="group relative flex items-center py-1.5 text-xs text-foreground-light px-2 truncate w-full">
-                      {`${log.path} | ${log.msg}`}
+                    <div className="flex items-center justify-start w-[40px] shrink-0">
+                      <DataTableColumnStatusCode value={status} level={level} />
+                    </div>
+                    <span className="font-mono tracking-tight text-foreground truncate shrink-0 max-w-[45%]">
+                      {String(log.path ?? '')}
+                    </span>
+                    <span className="font-mono tracking-tight text-muted-foreground truncate flex-1">
+                      {String(log.msg ?? '')}
+                    </span>
 
-                      <ButtonTooltip
-                        variant="outline"
-                        asChild
-                        tooltip={{ content: { text: 'Open in logs' } }}
-                        className="px-1.5 absolute right-0 top-0 opacity-0 group-hover:opacity-100 transition bg-background focus-visible:opacity-100"
-                      >
-                        <Link href={`/project/${ref}/logs/auth-logs?log=${log.id}`}>
-                          <ExternalLink size="12" className="text-foreground-light" />
-                        </Link>
-                      </ButtonTooltip>
-                    </p>
+                    <ButtonTooltip
+                      variant="outline"
+                      asChild
+                      tooltip={{ content: { text: 'Open in logs' } }}
+                      className="px-1.5 absolute right-1 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition bg-background focus-visible:opacity-100"
+                    >
+                      <Link href={`/project/${ref}/logs/auth-logs?log=${log.id}`}>
+                        <ExternalLink size="12" className="text-foreground-light" />
+                      </Link>
+                    </ButtonTooltip>
                   </div>
                 )
               })}