diff --git a/src/renderer/src/pages/home/Messages/NarrowLayout.tsx b/src/renderer/src/pages/home/Messages/NarrowLayout.tsx
index 6431bb151c..7a7c641670 100644
--- a/src/renderer/src/pages/home/Messages/NarrowLayout.tsx
+++ b/src/renderer/src/pages/home/Messages/NarrowLayout.tsx
@@ -9,22 +9,23 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
 const NarrowLayout: FC<Props> = ({ children, ...props }) => {
   const { narrowMode } = useSettings()
 
-  if (narrowMode) {
-    return (
-      <Container className="narrow-mode" {...props}>
-        {children}
-      </Container>
-    )
-  }
-
-  return children
+  return (
+    <Container className={`narrow-mode ${narrowMode ? 'active' : ''}`} {...props}>
+      {children}
+    </Container>
+  )
 }
 
 const Container = styled.div`
-  max-width: 800px;
+  max-width: 100%;
   width: 100%;
   margin: 0 auto;
   position: relative;
+  transition: max-width 0.3s ease-in-out;
+
+  &.active {
+    max-width: 800px;
+  }
 `
 
 export default NarrowLayout