diff --git a/dashboard/src/features/nodes/dialogs/settings/index.tsx b/dashboard/src/features/nodes/dialogs/settings/index.tsx
index 74da188..db94495 100644
--- a/dashboard/src/features/nodes/dialogs/settings/index.tsx
+++ b/dashboard/src/features/nodes/dialogs/settings/index.tsx
@@ -10,42 +10,50 @@ import {
     TabsContent,
     TabsList,
     TabsTrigger,
-} from "@marzneshin/components"
-import { FC } from "react"
-import { useTranslation } from "react-i18next"
-import { NodeType } from "../.."
+} from "@marzneshin/components";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import type { NodeType } from "../..";
 import { LogContainer } from "../../log";
 import { NodesDetailTable } from "../../tables/detail-table";
 import { NodeConfigEditor } from "./node-config-editor";
 
 interface NodesSettingsDialogProps {
-    onOpenChange: (state: boolean) => void
-    open: boolean
-    entity: NodeType
+    onOpenChange: (state: boolean) => void;
+    open: boolean;
+    entity: NodeType;
 }
 
-export const NodesSettingsDialog: FC<NodesSettingsDialogProps> = ({ onOpenChange, open, entity }) => {
+export const NodesSettingsDialog: FC<NodesSettingsDialogProps> = ({
+    onOpenChange,
+    open,
+    entity,
+}) => {
     const { t } = useTranslation();
 
     return (
         <Sheet open={open} onOpenChange={onOpenChange}>
-            <SheetContent className="sm:min-w-full md:min-w-[600px] " >
-                <ScrollArea className="h-full">
+            <SheetContent className="sm:min-w-full md:min-w-[600px] ">
+                <ScrollArea className="h-full w-full">
                     <SheetHeader>
-                        <SheetTitle>
-                            {t('page.nodes.settings.title')}
-                        </SheetTitle>
+                        <SheetTitle>{t("page.nodes.settings.title")}</SheetTitle>
                     </SheetHeader>
                     <div className="my-4">
-                        <h1 className="font-medium font-header">{t('page.nodes.settings.detail')}</h1>
+                        <h1 className="font-medium font-header">
+                            {t("page.nodes.settings.detail")}
+                        </h1>
                         <NodesDetailTable node={entity} />
                     </div>
-                    <Tabs className="my-3 w-full h-full" defaultValue="logs">
+                    <Tabs className="my-3 max-w-full h-full" defaultValue="logs">
                         <TabsList className="w-full">
-                            <TabsTrigger className="w-full" value="logs">{t('logs')}</TabsTrigger>
-                            <TabsTrigger className="w-full" value="config">{t('config')}</TabsTrigger>
+                            <TabsTrigger className="w-full" value="logs">
+                                {t("logs")}
+                            </TabsTrigger>
+                            <TabsTrigger className="w-full" value="config">
+                                {t("config")}
+                            </TabsTrigger>
                         </TabsList>
-                        <TabsContent value="logs" className="h-full">
+                        <TabsContent value="logs" className="h-full w-full">
                             <LogContainer node={entity} />
                         </TabsContent>
                         <TabsContent value="config" className="h-full z-51">
@@ -59,5 +67,5 @@ export const NodesSettingsDialog: FC<NodesSettingsDialogProps> = ({ onOpenChange
                 </ScrollArea>
             </SheetContent>
         </Sheet>
-    )
-}
+    );
+};
diff --git a/dashboard/src/features/nodes/log/container.tsx b/dashboard/src/features/nodes/log/container.tsx
index 3ec08b9..34194c2 100644
--- a/dashboard/src/features/nodes/log/container.tsx
+++ b/dashboard/src/features/nodes/log/container.tsx
@@ -1,32 +1,56 @@
-import { Badge, Card, CardContent, CardHeader, ScrollArea } from "@marzneshin/components"
-import { NodeType, useNodesLog } from ".."
-import { FC } from "react"
-import { useTranslation } from "react-i18next"
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardHeader,
+  ScrollArea,
+  Separator,
+} from "@marzneshin/components";
+import type { NodeType } from "..";
+import { useNodesLog } from "..";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
 
 interface LogContainerProps {
-    node: NodeType
+  node: NodeType;
 }
 
 export const LogContainer: FC<LogContainerProps> = ({ node }) => {
-    const { logs, status, logsDiv } = useNodesLog(node)
-    const { t } = useTranslation()
-    return (
-        <Card className="h-1/2">
-            <CardContent className="flex flex-col p-1 h-full" >
-                <CardHeader className="flex flex-row justify-between items-center p-2">
-                    <p className="capitalize font-header">{t('page.nodes.settings.log-container.title')}</p>
-                    <div className="flex flex-row gap-2 justify-center items-center">
-                        <Badge variant={status === "closed" ? "destructive" : "default"} className="flex justify-center items-center w-full h-6 capitalize">
-                            {status}
-                        </Badge>
-                    </div>
-                </CardHeader>
-                <ScrollArea className="flex p-2 m-1 h-full rounded-b-md divide-dashed divide-accent bg-secondary text-primary" ref={logsDiv}>
-                    {logs.map((log: string, i) => {
-                        return <p key={i} className="font-mono text-[0.7rem] text-primary">{log}</p>
-                    })}
-                </ScrollArea>
-            </CardContent>
-        </Card>
-    )
-}
+  const { logs, status, logsDiv } = useNodesLog(node);
+  const { t } = useTranslation();
+
+  return (
+    <Card className="h-full w-full">
+      <CardContent className="flex flex-col p-2 h-full w-full">
+        <CardHeader className="flex flex-row justify-between items-center p-2">
+          <p className="capitalize font-header">
+            {t("page.nodes.settings.log-container.title")}
+          </p>
+          <div className="flex flex-row gap-2 justify-center items-center">
+            <Badge
+              variant={status === "closed" ? "destructive" : "default"}
+              className="flex justify-center items-center w-full h-6 capitalize"
+            >
+              {status}
+            </Badge>
+          </div>
+        </CardHeader>
+        <ScrollArea
+          className="flex p-2 h-full max-h-[calc(100vh-20rem)] rounded-md bg-secondary text-primary w-full overflow-auto"
+          ref={logsDiv}
+        >
+          {logs.map((log: string, index: number) => (
+            <div key={log} className="w-full">
+              <p className="font-mono text-[0.7rem] text-primary my-1 break-all rounded-sm p-[1px] hover:bg-gray-300 dark:hover:bg-gray-900">
+                {log}
+              </p>
+              {index !== logs.length - 1 && (
+                <Separator className="bg-gray-600" />
+              )}
+            </div>
+          ))}
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+};