diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 4d7ca38..63cee96 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -1,41 +1,46 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <application
-        android:allowBackup="true"
-        android:icon="@mipmap/ic_launcher"
-        android:label="@string/app_name"
-        android:roundIcon="@mipmap/ic_launcher_round"
-        android:supportsRtl="true"
-        android:theme="@style/AppTheme">
+  <application
+    android:allowBackup="true"
+    android:icon="@mipmap/ic_launcher"
+    android:label="@string/app_name"
+    android:roundIcon="@mipmap/ic_launcher_round"
+    android:supportsRtl="true"
+    android:theme="@style/AppTheme">
 
-        <activity
-            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
-            android:name=".MainActivity"
-            android:label="@string/title_activity_main"
-            android:theme="@style/AppTheme.NoActionBarLaunch"
-            android:launchMode="singleTask"
-            android:exported="true">
+    <activity
+      android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
+      android:name=".MainActivity"
+      android:label="@string/title_activity_main"
+      android:theme="@style/AppTheme.NoActionBarLaunch"
+      android:launchMode="singleTask"
+      android:exported="true">
 
-            <intent-filter>
-                <action android:name="android.intent.action.MAIN" />
-                <category android:name="android.intent.category.LAUNCHER" />
-            </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN" />
+        <category android:name="android.intent.category.LAUNCHER" />
+      </intent-filter>
 
-        </activity>
+    </activity>
 
-        <provider
-            android:name="androidx.core.content.FileProvider"
-            android:authorities="${applicationId}.fileprovider"
-            android:exported="false"
-            android:grantUriPermissions="true">
-            <meta-data
-                android:name="android.support.FILE_PROVIDER_PATHS"
-                android:resource="@xml/file_paths"></meta-data>
-        </provider>
-    </application>
+    <provider
+      android:name="androidx.core.content.FileProvider"
+      android:authorities="${applicationId}.fileprovider"
+      android:exported="false"
+      android:grantUriPermissions="true">
+      <meta-data
+        android:name="android.support.FILE_PROVIDER_PATHS"
+        android:resource="@xml/file_paths"></meta-data>
+    </provider>
+  </application>
 
-    <!-- Permissions -->
+  <!-- Permissions -->
 
-    <uses-permission android:name="android.permission.INTERNET" />
+  <uses-permission android:name="android.permission.INTERNET" />
+  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
+  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
+    android:maxSdkVersion="32" />
+  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
+    android:maxSdkVersion="29" />
 </manifest>
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
index c023e50..f45523e 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
index b441f37..dffe4dc 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png differ
diff --git a/android/app/src/main/res/mipmap-ldpi/ic_launcher.png b/android/app/src/main/res/mipmap-ldpi/ic_launcher.png
new file mode 100644
index 0000000..a73c484
Binary files /dev/null and b/android/app/src/main/res/mipmap-ldpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-ldpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-ldpi/ic_launcher_round.png
new file mode 100644
index 0000000..600bfef
Binary files /dev/null and b/android/app/src/main/res/mipmap-ldpi/ic_launcher_round.png differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
index 72905b8..9864d3e 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
index 9502e47..1a45b62 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
index 4d1e077..92663d4 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
index 853db04..2f6cde5 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
index 6cdf97c..033f99f 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
index 8e3093a..c99fb81 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
index 46de6e2..b7f2785 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
index a40d73e..d301c11 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png differ
diff --git a/android/build.gradle b/android/build.gradle
index 9cc72cb..b6a99a2 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -7,7 +7,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:8.0.0'
+        classpath 'com.android.tools.build:gradle:8.3.1'
         classpath 'com.google.gms:google-services:4.3.15'
 
         // NOTE: Do not place your application dependencies here; they belong
diff --git a/android/gradle/wrapper/gradle-wrapper.properties b/android/gradle/wrapper/gradle-wrapper.properties
index 761b8f0..309b4e1 100644
--- a/android/gradle/wrapper/gradle-wrapper.properties
+++ b/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-all.zip
 networkTimeout=10000
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
diff --git a/capacitor.config.ts b/capacitor.config.ts
index 0758e54..6f3966c 100644
--- a/capacitor.config.ts
+++ b/capacitor.config.ts
@@ -6,8 +6,6 @@ const config: CapacitorConfig = {
   webDir: "dist",
   server: {
     androidScheme: "https",
-    url: "http://localhost:5173",
-    cleartext: true
   }
 }
 
diff --git a/ios/App/App.xcodeproj/project.pbxproj b/ios/App/App.xcodeproj/project.pbxproj
index 9369fc2..88bed10 100644
--- a/ios/App/App.xcodeproj/project.pbxproj
+++ b/ios/App/App.xcodeproj/project.pbxproj
@@ -122,8 +122,8 @@
 		504EC2FC1FED79650016851F /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastSwiftUpdateCheck = 0920;
-				LastUpgradeCheck = 0920;
+				LastSwiftUpdateCheck = 920;
+				LastUpgradeCheck = 920;
 				TargetAttributes = {
 					504EC3031FED79650016851F = {
 						CreatedOnToolsVersion = 9.2;
@@ -347,6 +347,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = W7HPZ53V6B;
 				INFOPLIST_FILE = App/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = Solian;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
@@ -368,6 +369,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = W7HPZ53V6B;
 				INFOPLIST_FILE = App/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = Solian;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
diff --git a/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png b/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png
index adf6ba0..9163177 100644
Binary files a/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png and b/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png differ
diff --git a/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json b/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json
index 9b7d382..b1a8483 100644
--- a/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json
+++ b/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json
@@ -1,14 +1,14 @@
 {
-  "images" : [
+  "images": [
     {
-      "filename" : "AppIcon-512@2x.png",
-      "idiom" : "universal",
-      "platform" : "ios",
-      "size" : "1024x1024"
+      "idiom": "universal",
+      "size": "1024x1024",
+      "filename": "AppIcon-512@2x.png",
+      "platform": "ios"
     }
   ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
+  "info": {
+    "author": "xcode",
+    "version": 1
   }
-}
+}
\ No newline at end of file
diff --git a/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json b/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json
index d7d96a6..84a416d 100644
--- a/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json
+++ b/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json
@@ -1,23 +1,56 @@
 {
-  "images" : [
+  "images": [
     {
-      "idiom" : "universal",
-      "filename" : "splash-2732x2732-2.png",
-      "scale" : "1x"
+      "idiom": "universal",
+      "filename": "Default@1x~universal~anyany.png",
+      "scale": "1x"
     },
     {
-      "idiom" : "universal",
-      "filename" : "splash-2732x2732-1.png",
-      "scale" : "2x"
+      "idiom": "universal",
+      "filename": "Default@2x~universal~anyany.png",
+      "scale": "2x"
     },
     {
-      "idiom" : "universal",
-      "filename" : "splash-2732x2732.png",
-      "scale" : "3x"
+      "idiom": "universal",
+      "filename": "Default@3x~universal~anyany.png",
+      "scale": "3x"
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "scale": "1x",
+      "filename": "Default@1x~universal~anyany-dark.png"
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "scale": "2x",
+      "filename": "Default@2x~universal~anyany-dark.png"
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "scale": "3x",
+      "filename": "Default@3x~universal~anyany-dark.png"
     }
   ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
+  "info": {
+    "version": 1,
+    "author": "xcode"
   }
 }
\ No newline at end of file
diff --git a/ios/App/App/Assets.xcassets/Splash.imageset/Default@1x~universal~anyany-dark.png b/ios/App/App/Assets.xcassets/Splash.imageset/Default@1x~universal~anyany-dark.png
new file mode 100644
index 0000000..0ef793b
Binary files /dev/null and b/ios/App/App/Assets.xcassets/Splash.imageset/Default@1x~universal~anyany-dark.png differ
diff --git a/ios/App/App/Assets.xcassets/Splash.imageset/Default@1x~universal~anyany.png b/ios/App/App/Assets.xcassets/Splash.imageset/Default@1x~universal~anyany.png
new file mode 100644
index 0000000..f1a5e93
Binary files /dev/null and b/ios/App/App/Assets.xcassets/Splash.imageset/Default@1x~universal~anyany.png differ
diff --git a/ios/App/App/Assets.xcassets/Splash.imageset/Default@2x~universal~anyany-dark.png b/ios/App/App/Assets.xcassets/Splash.imageset/Default@2x~universal~anyany-dark.png
new file mode 100644
index 0000000..0ef793b
Binary files /dev/null and b/ios/App/App/Assets.xcassets/Splash.imageset/Default@2x~universal~anyany-dark.png differ
diff --git a/ios/App/App/Assets.xcassets/Splash.imageset/Default@2x~universal~anyany.png b/ios/App/App/Assets.xcassets/Splash.imageset/Default@2x~universal~anyany.png
new file mode 100644
index 0000000..f1a5e93
Binary files /dev/null and b/ios/App/App/Assets.xcassets/Splash.imageset/Default@2x~universal~anyany.png differ
diff --git a/ios/App/App/Assets.xcassets/Splash.imageset/Default@3x~universal~anyany-dark.png b/ios/App/App/Assets.xcassets/Splash.imageset/Default@3x~universal~anyany-dark.png
new file mode 100644
index 0000000..0ef793b
Binary files /dev/null and b/ios/App/App/Assets.xcassets/Splash.imageset/Default@3x~universal~anyany-dark.png differ
diff --git a/ios/App/App/Assets.xcassets/Splash.imageset/Default@3x~universal~anyany.png b/ios/App/App/Assets.xcassets/Splash.imageset/Default@3x~universal~anyany.png
new file mode 100644
index 0000000..f1a5e93
Binary files /dev/null and b/ios/App/App/Assets.xcassets/Splash.imageset/Default@3x~universal~anyany.png differ
diff --git a/ios/App/App/Info.plist b/ios/App/App/Info.plist
index 3c7a5b1..6c505fb 100644
--- a/ios/App/App/Info.plist
+++ b/ios/App/App/Info.plist
@@ -43,7 +43,15 @@
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
+	<key>LSApplicationCategoryType</key>
+	<string></string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>NSPhotoLibraryAddUsageDescription</key>
+	<string>Allow Solian full access your photo library so that you can share photos more easily.</string>
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>Allow Solian access your photo library so that you can share photos.</string>
+	<key>NSCameraUsageDescription</key>
+	<string>Allow Solian use your camera so that you can take photo for your post.</string>
 </dict>
 </plist>
diff --git a/package.json b/package.json
index b51ed40..b148700 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "vuetify": "^3.5.12"
   },
   "devDependencies": {
+    "@capacitor/assets": "^3.0.4",
     "@capacitor/cli": "^5.7.4",
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node20": "^20.1.2",
diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
new file mode 100644
index 0000000..7a487b4
--- /dev/null
+++ b/public/manifest.webmanifest
@@ -0,0 +1,46 @@
+{
+  "icons": [
+    {
+      "src": "../icons/icon-48.webp",
+      "type": "image/png",
+      "sizes": "48x48",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-72.webp",
+      "type": "image/png",
+      "sizes": "72x72",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-96.webp",
+      "type": "image/png",
+      "sizes": "96x96",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-128.webp",
+      "type": "image/png",
+      "sizes": "128x128",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-192.webp",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-256.webp",
+      "type": "image/png",
+      "sizes": "256x256",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-512.webp",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any maskable"
+    }
+  ]
+}
diff --git a/resources/icon-background.png b/resources/icon-background.png
new file mode 100644
index 0000000..544ff04
Binary files /dev/null and b/resources/icon-background.png differ
diff --git a/resources/icon-foreground.png b/resources/icon-foreground.png
new file mode 100755
index 0000000..e414a9d
Binary files /dev/null and b/resources/icon-foreground.png differ
diff --git a/resources/icon-only.png b/resources/icon-only.png
new file mode 100755
index 0000000..e414a9d
Binary files /dev/null and b/resources/icon-only.png differ
diff --git a/resources/splash-dark.png b/resources/splash-dark.png
new file mode 100644
index 0000000..de68fe2
Binary files /dev/null and b/resources/splash-dark.png differ
diff --git a/resources/splash.png b/resources/splash.png
new file mode 100644
index 0000000..d38c2ba
Binary files /dev/null and b/resources/splash.png differ
diff --git a/src/index.vue b/src/index.vue
index d4637e1..f777d97 100644
--- a/src/index.vue
+++ b/src/index.vue
@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <v-system-bar v-if="safeAreaHeight > 0" color="primary" :order="1" :height="safeAreaHeight" />
+    <v-system-bar v-show="ui.safeArea.top > 0" color="primary" :order="1" :height="ui.safeArea.top" />
 
     <router-view />
   </v-app>
@@ -8,13 +8,22 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from "vue"
+import { Capacitor } from "@capacitor/core"
+import { useUI } from "@/stores/ui"
 
-const safeAreaHeight = ref(0)
+const ui = useUI()
 
 function updateSafeArea() {
-  const property = getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")
-  safeAreaHeight.value = parseInt(property.replace("px", ""))
+  const topProperty = getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")
+  ui.safeArea.top = parseInt(topProperty.replace("px", ""))
+  const bottomProperty = getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")
+  ui.safeArea.bottom = parseInt(bottomProperty.replace("px", ""))
 }
 
-onMounted(() => updateSafeArea())
+onMounted(() => {
+  updateSafeArea()
+  for (let idx = 1; idx <= 10; idx++) {
+    setTimeout(() => updateSafeArea(), 250 * idx)
+  }
+})
 </script>
diff --git a/src/layouts/master.vue b/src/layouts/master.vue
index 4e5ce65..1637493 100644
--- a/src/layouts/master.vue
+++ b/src/layouts/master.vue
@@ -1,11 +1,8 @@
 <template>
   <v-navigation-drawer v-model="drawerOpen" color="grey-lighten-5" width="320" :order="0" floating>
     <div class="flex flex-col h-full">
-      <div
-        class="flex items-center px-3 pb-2.5 border-opacity-15"
-        style="border-bottom-width: thin"
-        :style="`padding-top: max(${safeAreaTop}, 16px)`"
-      >
+      <div class="flex items-center px-3 pb-2.5 border-opacity-15" style="border-bottom-width: thin"
+        :style="`padding-top: max(${safeAreaTop}, 16px)`">
         <img src="/favicon.png" width="36" height="36" class="block" />
         <div class="ms-6 font-medium">Solar Network</div>
       </div>
@@ -15,14 +12,11 @@
       </div>
 
       <!-- User info -->
-      <v-list
-        class="border-opacity-15 h-[64px]"
-        style="border-top-width: thin"
-        :style="`margin-bottom: ${safeAreaBottom}`"
-      >
+      <v-list class="border-opacity-15 h-[64px]" style="border-top-width: thin"
+        :style="`margin-bottom: ${safeAreaBottom}`">
         <v-list-item :subtitle="username" :title="nickname">
           <template #prepend>
-            <v-avatar icon="mdi-account-circle" :image="id.userinfo.data?.avatar" />
+            <v-avatar icon="mdi-account-circle" :image="id.userinfo.data?.picture" />
           </template>
           <template #append>
             <v-menu v-if="id.userinfo.isLoggedIn">
@@ -31,12 +25,8 @@
               </template>
 
               <v-list density="compact">
-                <v-list-item
-                  title="Solarpass"
-                  prepend-icon="mdi-passport-biometric"
-                  target="_blank"
-                  :href="passportUrl"
-                />
+                <v-list-item title="Solarpass" prepend-icon="mdi-passport-biometric" target="_blank"
+                  :href="passportUrl" />
               </v-list>
             </v-menu>
 
@@ -58,7 +48,7 @@
       <v-spacer />
 
       <div v-if="id.userinfo.isLoggedIn">
-          <notification-list />
+        <notification-list />
       </div>
     </div>
   </v-app-bar>
@@ -67,24 +57,11 @@
     <router-view />
   </v-main>
 
-  <v-menu
-    open-on-hover
-    open-on-click
-    :open-delay="0"
-    :close-delay="0"
-    location="top"
-    transition="scroll-y-reverse-transition"
-  >
+  <v-menu open-on-hover open-on-click :open-delay="0" :close-delay="0" location="top"
+    transition="scroll-y-reverse-transition">
     <template v-slot:activator="{ props }">
-      <v-fab
-        v-bind="props"
-        appear
-        class="editor-fab"
-        icon="mdi-pencil"
-        color="primary"
-        size="64"
-        :active="id.userinfo.isLoggedIn"
-      />
+      <v-fab v-bind="props" appear class="editor-fab" icon="mdi-pencil" color="primary" size="64"
+        :active="id.userinfo.isLoggedIn" />
     </template>
 
     <div class="flex flex-col items-center gap-4 mb-4">
@@ -102,17 +79,20 @@ import { computed, ref } from "vue"
 import { useEditor } from "@/stores/editor"
 import { useUserinfo } from "@/stores/userinfo"
 import { useWellKnown } from "@/stores/wellKnown"
+import { useUI } from "@/stores/ui"
 import PostTools from "@/components/publish/PostTools.vue"
 import RealmTools from "@/components/realms/RealmTools.vue"
 import RealmList from "@/components/realms/RealmList.vue"
 import NotificationList from "@/components/NotificationList.vue"
 
+const ui = useUI()
+
 const safeAreaTop = computed(() => {
-  return getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")
+  return `${ui.safeArea.top}px`
 })
 
 const safeAreaBottom = computed(() => {
-  return getComputedStyle(document.documentElement).getPropertyValue("--safe-area-bottom")
+  return `${ui.safeArea.bottom}px`
 })
 
 const id = useUserinfo()
diff --git a/src/stores/ui.ts b/src/stores/ui.ts
new file mode 100644
index 0000000..b1e0a81
--- /dev/null
+++ b/src/stores/ui.ts
@@ -0,0 +1,11 @@
+import { defineStore } from "pinia"
+import { reactive } from "vue"
+
+export const useUI = defineStore("ui", () => {
+  const safeArea = reactive({
+    top: 0,
+    bottom: 0,
+  })
+
+  return { safeArea }
+})