diff --git a/src/pages/FlowbiteSidebar.page.vue b/src/pages/FlowbiteSidebar.page.vue
index 7b55103..47a6bef 100644
--- a/src/pages/FlowbiteSidebar.page.vue
+++ b/src/pages/FlowbiteSidebar.page.vue
@@ -2,7 +2,9 @@
 
 <template>
   <!-- https://flowbite.com/docs/components/sidebar/#sidebar-with-navbar -->
-  <nav class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+  <nav
+    class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]"
+  >
     <div class="px-3 py-3 lg:px-5 lg:pl-3">
       <div class="flex items-center justify-between">
         <div class="flex items-center justify-start rtl:justify-end">
@@ -105,13 +107,13 @@
 
   <aside
     id="logo-sidebar"
-    class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
+    class="fixed top-0 left-[env(safe-area-inset-left)] z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
     aria-label="Sidebar"
   >
     <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800" b="1px dashed red">Sidebar</div>
   </aside>
 
-  <div class="p-4 sm:ml-64">
+  <div class="p-4 sm:ml-[calc(16rem+env(safe-area-inset-left))] pr-[env(safe-area-inset-right)]">
     <div class="p-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700 mt-14">CONTENT</div>
   </div>
 </template>