diff --git a/src/constants/index.ts b/src/constants/index.ts
index 4a494e5..231d26b 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -128,7 +128,7 @@ export enum CONNECTIONS_TABLE_ACCESSOR_KEY {
   Destination = 'destination',
 }
 
-export const CONNECTIONS_TABLE_MAX_CLOSED_ROWS = 1000
+export const CONNECTIONS_TABLE_MAX_CLOSED_ROWS = 500
 
 export const CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER = Object.values(
   CONNECTIONS_TABLE_ACCESSOR_KEY,
@@ -140,6 +140,8 @@ export const CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY = {
   [CONNECTIONS_TABLE_ACCESSOR_KEY.ID]: false,
 }
 
+export const LOGS_TABLE_MAX_ROWS = 1000
+
 export enum TAILWINDCSS_SIZE {
   XS = 'xs',
   SM = 'sm',
diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
index e21171e..c9ee74c 100644
--- a/src/pages/Connections.tsx
+++ b/src/pages/Connections.tsx
@@ -432,72 +432,66 @@ export default () => {
           </thead>
 
           <tbody>
-            <Index each={table.getRowModel().rows}>
-              {(keyedRow) => {
-                const row = keyedRow()
+            <For each={table.getRowModel().rows}>
+              {(row) => (
+                <tr class="h-8 hover:!bg-primary hover:text-primary-content">
+                  <For each={row.getVisibleCells()}>
+                    {(cell) => {
+                      return (
+                        <td
+                          onContextMenu={(e) => {
+                            e.preventDefault()
 
-                return (
-                  <tr class="h-8 hover:!bg-primary hover:text-primary-content">
-                    <Index each={row.getVisibleCells()}>
-                      {(keyedCell) => {
-                        const cell = keyedCell()
-
-                        return (
-                          <td
-                            onContextMenu={(e) => {
-                              e.preventDefault()
-
-                              const value = cell.renderValue() as null | string
-                              value && writeClipboard(value).catch(() => {})
-                            }}
-                          >
-                            {cell.getIsGrouped() ? (
-                              <button
-                                class={twMerge(
-                                  row.getCanExpand()
-                                    ? 'cursor-pointer'
-                                    : 'cursor-normal',
-                                  'flex items-center gap-2',
+                            const value = cell.renderValue() as null | string
+                            value && writeClipboard(value).catch(() => {})
+                          }}
+                        >
+                          {cell.getIsGrouped() ? (
+                            <button
+                              class={twMerge(
+                                row.getCanExpand()
+                                  ? 'cursor-pointer'
+                                  : 'cursor-normal',
+                                'flex items-center gap-2',
+                              )}
+                              onClick={row.getToggleExpandedHandler()}
+                            >
+                              <div>
+                                {row.getIsExpanded() ? (
+                                  <IconZoomOutFilled size={18} />
+                                ) : (
+                                  <IconZoomInFilled size={18} />
                                 )}
-                                onClick={row.getToggleExpandedHandler()}
-                              >
-                                <div>
-                                  {row.getIsExpanded() ? (
-                                    <IconZoomOutFilled size={18} />
-                                  ) : (
-                                    <IconZoomInFilled size={18} />
-                                  )}
-                                </div>
+                              </div>
 
-                                <div>
-                                  {flexRender(
-                                    cell.column.columnDef.cell,
-                                    cell.getContext(),
-                                  )}
-                                </div>
-
-                                <div>({row.subRows.length})</div>
-                              </button>
-                            ) : cell.getIsAggregated() ? (
-                              flexRender(
-                                cell.column.columnDef.aggregatedCell ??
+                              <div>
+                                {flexRender(
                                   cell.column.columnDef.cell,
-                                cell.getContext(),
-                              )
-                            ) : cell.getIsPlaceholder() ? null : (
-                              flexRender(
+                                  cell.getContext(),
+                                )}
+                              </div>
+
+                              <div>({row.subRows.length})</div>
+                            </button>
+                          ) : cell.getIsAggregated() ? (
+                            flexRender(
+                              cell.column.columnDef.aggregatedCell ??
                                 cell.column.columnDef.cell,
-                                cell.getContext(),
-                              )
-                            )}
-                          </td>
-                        )
-                      }}
-                    </Index>
-                  </tr>
-                )
-              }}
-            </Index>
+                              cell.getContext(),
+                            )
+                          ) : cell.getIsPlaceholder() ? null : (
+                            flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
+                            )
+                          )}
+                        </td>
+                      )
+                    }}
+                  </For>
+                </tr>
+              )}
+            </For>
           </tbody>
         </table>
       </div>
diff --git a/src/pages/Logs.tsx b/src/pages/Logs.tsx
index 44f66a9..50a2c8e 100644
--- a/src/pages/Logs.tsx
+++ b/src/pages/Logs.tsx
@@ -5,8 +5,9 @@ import {
   flexRender,
   getCoreRowModel,
 } from '@tanstack/solid-table'
-import { For, createEffect, createSignal } from 'solid-js'
+import { For, Index, createEffect, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
+import { LOGS_TABLE_MAX_ROWS } from '~/constants'
 import { tableSize, tableSizeClassName, useWsRequest } from '~/signals'
 import { Log } from '~/types'
 
@@ -14,7 +15,7 @@ type LogWithSeq = Log & { seq: number }
 
 export default () => {
   const [t] = useI18n()
-  let seq = 0
+  let seq = 1
   const [search, setSearch] = createSignal('')
   const [logs, setLogs] = createSignal<LogWithSeq[]>([])
 
@@ -27,7 +28,7 @@ export default () => {
       return
     }
 
-    setLogs((logs) => [{ ...data, seq }, ...logs].slice(0, 100))
+    setLogs((logs) => [{ ...data, seq }, ...logs].slice(0, LOGS_TABLE_MAX_ROWS))
 
     seq++
   })
@@ -94,26 +95,34 @@ export default () => {
           )}
         >
           <thead class="sticky top-0 z-10">
-            <For each={table.getHeaderGroups()}>
-              {(headerGroup) => (
-                <tr>
-                  <For each={headerGroup.headers}>
-                    {(header) => (
-                      <th class="bg-base-300">
-                        <div>
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext(),
-                              )}
-                        </div>
-                      </th>
-                    )}
-                  </For>
-                </tr>
-              )}
-            </For>
+            <Index each={table.getHeaderGroups()}>
+              {(keyedHeaderGroup) => {
+                const headerGroup = keyedHeaderGroup()
+
+                return (
+                  <tr>
+                    <Index each={headerGroup.headers}>
+                      {(keyedHeader) => {
+                        const header = keyedHeader()
+
+                        return (
+                          <th class="bg-base-300">
+                            <div>
+                              {header.isPlaceholder
+                                ? null
+                                : flexRender(
+                                    header.column.columnDef.header,
+                                    header.getContext(),
+                                  )}
+                            </div>
+                          </th>
+                        )
+                      }}
+                    </Index>
+                  </tr>
+                )
+              }}
+            </Index>
           </thead>
 
           <tbody>