diff --git a/pkg/server/ui/about.templ b/pkg/server/ui/about.templ
index 54ac7fa..37106e0 100644
--- a/pkg/server/ui/about.templ
+++ b/pkg/server/ui/about.templ
@@ -32,7 +32,7 @@ templ About() {
 
 
       <div>
-      <img src="../static/images/converge.svg"/>
+      <img src="../static/images/converge.svg" style="max-width: 800px"/>
       </div>
 
       The connection between
diff --git a/pkg/server/ui/basepage.templ b/pkg/server/ui/basepage.templ
index 4489abe..e588457 100644
--- a/pkg/server/ui/basepage.templ
+++ b/pkg/server/ui/basepage.templ
@@ -29,16 +29,18 @@ templ BasePage(tab int) {
         <title>Converge</title>
     </head>
     <body hx-boost="true" hx-ext="ws" ws-connect="../ws/sessions">
-    <div id="banner">
-        <img src="../static/images/wamblee_logo_go.25.png" />
-        <span class="title fs-4">
-            converge
-         <br/>
-         <span class="fs-5">a rendez-vous server for debugging continuous integration jobs
-         </span>
-         <br/>
-        </span>
-    </div>
+    <header id="banner" class="d-flex align-items-center">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-auto">
+                    <img src="../static/images/wamblee_logo_go.25.png" alt="Logo">
+                </div>
+                <div class="title-wrapper col d-flex align-items-center">
+                    <h1 class="title">a rendez-vous server for debugging continuous integration jobs</h1>
+                </div>
+            </div>
+        </div>
+    </header>
 
     <!-- script>
     htmx.logAll();
diff --git a/static/css/converge.css b/static/css/converge.css
index d6d9916..623f110 100644
--- a/static/css/converge.css
+++ b/static/css/converge.css
@@ -1,28 +1,37 @@
 /* banner */
 
 #banner {
-    background: url(../images/banner.png);
     height: 150px;
-    width: 100%;
+    background-image: url(../images/banner.png);
+    background-repeat: repeat-x;
 }
 
 #banner img {
-    float: left;
-    margin: 0;
-    border: medium none;
+    max-width: 200px;
+    max-height: 150px;
+    width: auto;
+    height: auto;
 }
-
-#banner .title {
-    display: block;
-    font-size: 16px;
-    position: absolute;
-    text-align: center;
-
-    top: 10px;
-    left: 200px;
-    width: 600px;
+.title-wrapper {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    overflow: hidden;
+}
+.title {
+    font-size: clamp(1rem, 4vw, 1.7rem);
+    line-height: 1.2;
+    margin: 0;
+    padding: 0.5rem;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
 }
 
 #banner .verysmall {
     font-size: 0.4em;
 }
+
+img {
+    width: 100%;
+    object-fit: contain;
+}
