diff --git a/web-server/src/content/Service/SystemLogs.tsx b/web-server/src/content/Service/SystemLogs.tsx
index ccbe4d385..c098b7ebb 100644
--- a/web-server/src/content/Service/SystemLogs.tsx
+++ b/web-server/src/content/Service/SystemLogs.tsx
@@ -17,12 +17,12 @@ export const SystemLogs = ({ serviceName }: { serviceName: ServiceNames }) => {
 
   useEffect(() => {
     if (containerRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+      containerRef.current.scrollIntoView({ behavior: 'smooth' });
     }
   }, [logs]);
 
   return (
-    <FlexBox ref={containerRef} col>
+    <FlexBox col>
       {loading ? (
         <FlexBox alignCenter gap2>
           <CircularProgress size="20px" />
@@ -41,6 +41,7 @@ export const SystemLogs = ({ serviceName }: { serviceName: ServiceNames }) => {
           </Line>
         ))
       )}
+      <FlexBox ref={containerRef} />
     </FlexBox>
   );
 };