code and layout refactoring

frontend/src/views/Archive.tsx

@@ -182,7 +182,7 @@ export default function Downloaded() {
 
   return (
     <Container
-      maxWidth="lg"
+      maxWidth="xl"
       sx={{ mt: 4, mb: 4, height: '100%' }}
       onClick={() => setShowMenu(false)}
     >

frontend/src/views/Home.tsx

@@ -8,7 +8,7 @@ import Splash from '../components/Splash'
 
 export default function Home() {
   return (
-    <Container maxWidth="lg" sx={{ mt: 2, mb: 8 }}>
+    <Container maxWidth="xl" sx={{ mt: 2, mb: 8 }}>
       <LoadingBackdrop />
       <Splash />
       <Downloads />

frontend/src/views/Settings.tsx

@@ -134,12 +134,12 @@ export default function Settings() {
   }
 
   return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 8 }}>
+    <Container maxWidth="xl" sx={{ mt: 4, mb: 8 }}>
       <Grid container spacing={3}>
         <Grid item xs={12} md={12} lg={12}>
           <Paper
             sx={{
-              p: 2,
+              p: 2.5,
               display: 'flex',
               flexDirection: 'column',
               minHeight: 240,

frontend/src/views/Terminal.tsx

@@ -1,8 +1,25 @@
+import { Container, Paper, Typography } from '@mui/material'
 import LogTerminal from '../components/LogTerminal'
+import { useI18n } from '../hooks/useI18n'
 
 const Terminal: React.FC = () => {
+  const { i18n } = useI18n()
+
   return (
-    <LogTerminal />
+    <Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
+      <Paper
+        sx={{
+          p: 2.5,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Typography pb={2} variant="h5" color="primary">
+          {i18n.t('logsTitle')}
+        </Typography>
+        <LogTerminal />
+      </Paper>
+    </Container >
   )
 }