diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
index a7021bf2465..f2fc5705110 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
@@ -4,6 +4,7 @@
     <KGrid
       gutter="0"
       class="grid"
+      style="margin-bottom: -25px"
     >
       <KGridItem
         :layout12="{ span: 6 }"
@@ -13,12 +14,7 @@
         <h1 :style="{ marginLeft: '-8px' }">
           {{ injectedtr('otherLibraries') }}
         </h1>
-      </KGridItem>
-      <KGridItem
-        :layout12="{ span: 6 }"
-        :layout8="{ span: 4 }"
-        :layout4="{ span: 4 }"
-      >
+
         <div class="sync-status">
           <span
             v-show="searchingOtherLibraries"
@@ -55,16 +51,25 @@
               />
             </span>
           </span>
-          <span
+          <div
             v-show="!searchingOtherLibraries && !devicesWithChannelsExist"
-            data-test="no-other"
+            class="a"
           >
-            <span>
-              <KIcon icon="disconnected" />
+            <span data-test="no-other">
+              <div>
+                <span>
+                  <KIcon
+                    class="disco"
+                    icon="disconnected"
+                  />
+                </span>
+              </div>
+              &nbsp;&nbsp;
+              <div class="b">
+                <span data-test="no-other-label">{{ injectedtr('noOtherLibraries') }}</span>
+              </div>
             </span>
-            &nbsp;&nbsp;
-            <span data-test="no-other-label">{{ injectedtr('noOtherLibraries') }}</span>
-          </span>
+          </div>
         </div>
       </KGridItem>
     </KGrid>
@@ -236,10 +241,34 @@
   .sync-status {
     display: flex;
     justify-content: flex-end;
-    margin: 30px 0 10px;
+    min-width: 400px;
+    padding-left: 10px;
+    margin-top: -20px;
+    margin-bottom: 25px;
+    margin-left: 0;
+
+    .a {
+      display: flex;
+      align-items: center;
+      margin-top: -5px;
+      margin-left: 100px;
+    }
+
+    .b {
+      min-width: 200px;
+      padding-left: 00;
+      margin-left: 500px;
+    }
+
+    .disco {
+      margin-left: 1000px;
+    }
 
     span {
       display: inline-flex;
+      margin-top: 10px;
+      margin-bottom: 10px;
+      margin-left: -8px;
       vertical-align: bottom;
     }
   }
@@ -257,4 +286,67 @@
     margin-left: 0.75em;
   }
 
+  @media screen and (max-width: 600px) {
+    .sync-status {
+      max-width: 400px;
+
+      .a {
+        margin-right: 13px;
+      }
+
+      .disco {
+        margin-right: -640px;
+      }
+
+      span {
+        margin-left: -191px;
+        word-wrap: break-word;
+      }
+    }
+
+    .wifi-svg {
+      margin-left: -213px;
+    }
+  }
+  @media screen and (min-width: 600px) and (max-width: 1100px) {
+    .sync-status {
+      .a {
+        margin-right: 13px;
+      }
+
+      .disco {
+        margin-right: -640px;
+      }
+
+      span {
+        margin-left: -190px;
+      }
+    }
+
+    .wifi-svg {
+      margin-left: -160px;
+    }
+  }
+
+  @media screen and (min-width: 1100px) {
+    .sync-status {
+      span {
+        padding-left: -50px;
+        margin-left: -220px;
+      }
+
+      .a {
+        margin-right: 50px;
+      }
+
+      .disco {
+        margin-right: -610px;
+      }
+    }
+
+    .wifi-svg {
+      margin-left: -140px;
+    }
+  }
+
 </style>