diff --git a/src/@layouts/styles/_default-layout.scss b/src/@layouts/styles/_default-layout.scss
index 745a6a93..6c53a850 100644
--- a/src/@layouts/styles/_default-layout.scss
+++ b/src/@layouts/styles/_default-layout.scss
@@ -6,11 +6,15 @@
 
 html {
   min-height: calc(100% + env(safe-area-inset-top));
-  //background: rgb(var(--v-theme-background));
+}
+
+@media screen and (max-width: 900px) {
+  html, body {
+    background: rgb(var(--v-theme-background));
+  }
 }
 
 body {
-  //background: rgb(var(--v-theme-background));
   overscroll-behavior-y: contain;
   --webkit-overflow-scrolling: touch;
 }
@@ -34,10 +38,21 @@ body,
   @include mixins.boxed-content(true);
 
   flex-grow: 1;
-  overflow:hidden;
+  overflow: hidden;
   // TODO: Use grid gutter variable here
   padding-block: 0.5rem;
   padding-top: calc(env(safe-area-inset-top) + 70px);
+  display: flex;
+
+  .page-content-container {
+    flex: 1;
+    display: flex;
+
+    & > div:first-child {
+      flex: auto;
+      position: relative;
+    }
+  }
 }
 
 .layout-footer {
diff --git a/src/components/NoDataFound.vue b/src/components/NoDataFound.vue
index 09bd7d67..015d471d 100644
--- a/src/components/NoDataFound.vue
+++ b/src/components/NoDataFound.vue
@@ -54,17 +54,21 @@ interface Props {
 <style lang="scss">
 @use '@core/scss/pages/misc.scss';
 
-.misc-wrapper .misc-footer-tree {
-  position: absolute;
-  z-index: 1;
-  inline-size: 15.625rem;
-  inset-block-end: 3.5rem;
-  inset-inline-start: 0.375rem;
-}
+.misc-wrapper {
+  position: relative;
 
-.misc-wrapper .misc-footer-img {
-  position: absolute;
-  inline-size: 100%;
-  inset-block-end: 0;
+  .misc-footer-tree {
+    position: absolute;
+    z-index: 1;
+    inline-size: 15.625rem;
+    inset-block-end: 3.5rem;
+    inset-inline-start: 0.375rem;
+  }
+
+  .misc-footer-img {
+    position: absolute;
+    inline-size: 100%;
+    inset-block-end: 0;
+  }
 }
 </style>
diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 19ab2f8a..bd244290 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -16,7 +16,7 @@ const props = defineProps({
 })
 
 // 提示框
-const $toast = useToast()
+const $toast = useToast({ position: 'top' })
 
 // 图片加载状态
 const isImageLoaded = ref(false)
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 4bd3b41f..2cd3e8ff 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -4,11 +4,16 @@ import DefaultLayoutWithVerticalNav from './components/DefaultLayoutWithVertical
 
 <template>
   <DefaultLayoutWithVerticalNav>
-    <RouterView />
+    <router-view v-slot="{ Component }">
+      <keep-alive>
+        <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.name" />
+      </keep-alive>
+      <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.name" />
+    </router-view>
   </DefaultLayoutWithVerticalNav>
 </template>
 
 <style lang="scss">
 // As we are using `layouts` plugin we need its styles to be imported
-@use "@layouts/styles/default-layout";
+@use '@layouts/styles/default-layout';
 </style>
diff --git a/src/pages/ranking.vue b/src/pages/ranking.vue
index cfa6f400..dd5e1964 100644
--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -166,7 +166,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
   </div>
 </template>
 
-<style type="text/css">
+<style lang="css">
 .slider-header {
   position: relative;
   display: flex;
diff --git a/src/router/index.ts b/src/router/index.ts
index b018671c..3e283326 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -23,6 +23,7 @@ const router = createRouter({
           path: 'ranking',
           component: () => import('../pages/ranking.vue'),
           meta: {
+            keepAlive: true,
             requiresAuth: true,
           },
         },
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index d932478e..12947dc5 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -53,21 +53,6 @@
 
 
 
-/* router view transition fade-slide */
-.fade-slide-leave-active,
-.fade-slide-enter-active {
-  transition: all 0.3s;
-}
-
-.fade-slide-enter-from {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.fade-slide-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
 
 /* router view transition fade-slide */
 .fade-slide-leave-active,
@@ -77,10 +62,10 @@
 
 .fade-slide-enter-from {
   opacity: 0;
-  transform: translateX(-45px);
+  transform: translateY(-45px);
 }
 
 .fade-slide-leave-to {
   opacity: 0;
-  transform: translateX(45px);
+  transform: translateY(45px);
 }
diff --git a/src/views/plugin/PluginCardListView.vue b/src/views/plugin/PluginCardListView.vue
index 778de470..4c52bc70 100644
--- a/src/views/plugin/PluginCardListView.vue
+++ b/src/views/plugin/PluginCardListView.vue
@@ -87,7 +87,7 @@ onBeforeMount(fetchData)
         icon="mdi-plus"
         v-bind="props"
         size="x-large"
-        class="fixed right-5 bottom-5"
+        class="fixed right-5"
       />
     </template>