diff --git a/src/components/SubscriptionInfo.tsx b/src/components/SubscriptionInfo.tsx
index 89a9735..5adb83f 100644
--- a/src/components/SubscriptionInfo.tsx
+++ b/src/components/SubscriptionInfo.tsx
@@ -1,5 +1,6 @@
 import byteSize from 'byte-size'
 import dayjs from 'dayjs'
+import { toFinite } from 'lodash'
 import type { SubscriptionInfo as ISubscriptionInfo } from '~/types'
 
 const getSubscriptionsInfo = (subscriptionInfo: ISubscriptionInfo) => {
@@ -9,10 +10,10 @@ const getSubscriptionsInfo = (subscriptionInfo: ISubscriptionInfo) => {
   const used = byteSize(Download + Upload, {
     units: 'iec',
   })
-  const percentage = (((Download + Upload) / Total) * 100).toFixed(2)
+  const percentage = toFinite((((Download + Upload) / Total) * 100).toFixed(2))
 
   const expireStr = () => {
-    if (subscriptionInfo.Expire === 0) {
+    if (Expire === 0) {
       return 'Null'
     }
 
diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
index b2415b5..9103456 100644
--- a/src/pages/Connections.tsx
+++ b/src/pages/Connections.tsx
@@ -422,6 +422,7 @@ export default () => {
                     {(cell) => {
                       return (
                         <td
+                          class="py-2"
                           onContextMenu={(e) => {
                             e.preventDefault()
 
diff --git a/src/pages/Logs.tsx b/src/pages/Logs.tsx
index 9b480ef..bfcc28e 100644
--- a/src/pages/Logs.tsx
+++ b/src/pages/Logs.tsx
@@ -204,10 +204,10 @@ export default () => {
           <tbody>
             <For each={table.getRowModel().rows}>
               {(row) => (
-                <tr class="hover">
+                <tr class="hover:!bg-primary hover:text-primary-content">
                   <For each={row.getVisibleCells()}>
                     {(cell) => (
-                      <td>
+                      <td class="py-2">
                         {flexRender(
                           cell.column.columnDef.cell,
                           cell.getContext(),