diff --git a/src/SW.scss b/src/SW.scss
index f82e898..c5035ba 100644
--- a/src/SW.scss
+++ b/src/SW.scss
@@ -6,6 +6,11 @@
   display: flex;
   backdrop-filter: var.$filter;
 
+  &-reverse {
+    margin-top: 0;
+    margin-bottom: var.$padding-md;
+  }
+
   &-text {
     flex: 1 1 auto;
     min-width: 0;
diff --git a/src/SW.tsx b/src/SW.tsx
index 34f911c..5011647 100644
--- a/src/SW.tsx
+++ b/src/SW.tsx
@@ -1,12 +1,14 @@
 import './SW.scss';
 import { useCallback } from 'react';
+import clsx from 'clsx';
 import { useRegisterSW } from 'virtual:pwa-register/react';
-import { useTranslation } from './hooks';
+import { useAppSelector, useTranslation } from './hooks';
 import { logError, logInfo } from './utils/loggers';
 import { IClose, IRefresh } from './assets/icons';
 
 function SW() {
   const t = useTranslation();
+  const layoutMode = useAppSelector((state) => state.settings.layoutMode);
 
   const {
     offlineReady: [offlineReady, setOfflineReady],
@@ -27,7 +29,12 @@ function SW() {
   }, [setNeedRefresh, setOfflineReady]);
 
   return offlineReady || needRefresh ? (
-    <div className='sw'>
+    <div
+      className={clsx({
+        sw: true,
+        'sw-reverse': layoutMode === 'reverse',
+      })}
+    >
       <div className='sw-text'>
         {offlineReady
           ? t('App Ready to Work Offline')