diff --git a/gallery/easel/route/view/common/templates/base.html b/gallery/easel/route/view/common/templates/base.html
index e658372..6a8d04b 100644
--- a/gallery/easel/route/view/common/templates/base.html
+++ b/gallery/easel/route/view/common/templates/base.html
@@ -21,10 +21,12 @@
 
 <body>
   <div class="app col-lg-8 mx-auto p-3 py-md-5">
-    <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
-      <app-link href="/"
-                icon="gear">API Gallery</app-link>
-      {% block header %}{% endblock %}
+    <header class="app-header pb-3 mb-5 border-bottom">
+      <div class="link-list">
+        <app-link href="/"
+                  icon="gear">API Gallery</app-link>
+        {% block header %}{% endblock %}
+      </div>
       <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
         <li class="nav-item dropdown">
           <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
diff --git a/gallery/easel/route/view/schedule/templates/channel.html b/gallery/easel/route/view/schedule/templates/channel.html
index b8a457c..f6785ad 100644
--- a/gallery/easel/route/view/schedule/templates/channel.html
+++ b/gallery/easel/route/view/schedule/templates/channel.html
@@ -4,7 +4,6 @@
 {% endblock %}
 
 {% block header %}
-<span class="fs-4 text-body ms-2 me-2">/</span>
 <app-link href="/schedule"
           icon="tv">{{_("TV program")}}</app-link>
 {% endblock %}
diff --git a/gallery/easel/route/view/schedule/templates/schedule.html b/gallery/easel/route/view/schedule/templates/schedule.html
index 00b6cd7..6af0811 100644
--- a/gallery/easel/route/view/schedule/templates/schedule.html
+++ b/gallery/easel/route/view/schedule/templates/schedule.html
@@ -4,7 +4,6 @@
 {% endblock %}
 
 {% block header %}
-<span class="fs-4 text-body ms-2 me-2">/</span>
 <app-link href="/schedule"
           icon="tv">{{_("TV program")}}</app-link>
 {% endblock %}
diff --git a/gallery/easel/route/view/weather/templates/weather.html b/gallery/easel/route/view/weather/templates/weather.html
index 6698c8a..c2a515e 100644
--- a/gallery/easel/route/view/weather/templates/weather.html
+++ b/gallery/easel/route/view/weather/templates/weather.html
@@ -2,8 +2,8 @@
 {% block title %}{{_("Weather")}} | {{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}{% endblock %}
 
 {% block header %}
-<span class="fs-4 text-body ms-2 me-2">/</span>
-<app-link href="/weather" icon="brightness-high">{{_("Weather")}}</app-link>
+<app-link href="/weather"
+          icon="brightness-high">{{_("Weather")}}</app-link>
 {% endblock %}
 
 {% block content %}
diff --git a/static/src/main.scss b/static/src/main.scss
index 98b8d93..2fb98e3 100644
--- a/static/src/main.scss
+++ b/static/src/main.scss
@@ -1,6 +1,12 @@
 @use "flag-icons/sass/flag-icons" with (
   $flag-icons-path: "flag-icons/flags",
-  $flag-icons-included-countries: ("gb", "ru", "by", "ua", "kz")
+  $flag-icons-included-countries: (
+    "gb",
+    "ru",
+    "by",
+    "ua",
+    "kz",
+  )
 );
 
 @import "./lib/bootstrap";
@@ -21,3 +27,26 @@
   height: 2rem;
   background-size: contain;
 }
+
+.app-header {
+  display: flex;
+  flex-direction: row;
+
+  > .link-list {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+
+    app-link {
+      display: flex;
+      align-items: center;
+
+      &:not(:last-child)::after {
+        margin-left: 1rem;
+        content: "|";
+      }
+    }
+  }
+}
+
+@import "./mobile";
diff --git a/static/src/mobile.scss b/static/src/mobile.scss
new file mode 100644
index 0000000..2b09885
--- /dev/null
+++ b/static/src/mobile.scss
@@ -0,0 +1,44 @@
+$mobile-spacer: 0.5rem;
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+);
+
+@media (max-width: map-get($grid-breakpoints, "md")) {
+  .app-header {
+    flex-direction: column;
+
+    > .link-list {
+      flex-direction: column;
+      gap: 0;
+
+      app-link {
+        display: flex;
+        align-items: center;
+
+        &:not(:last-child)::after {
+          content: "";
+        }
+      }
+
+      &::after {
+        content: " ";
+        padding-top: 0.5rem;
+      }
+    }
+  }
+
+  .navbar-nav {
+    flex-direction: column !important;
+
+    > .nav-item {
+      .btn {
+        padding: 0.125rem !important;
+      }
+    }
+  }
+}
