diff --git a/ui/src/components/login-layout/index.vue b/ui/src/components/login-layout/index.vue
index efd88c993..9d9b87dca 100644
--- a/ui/src/components/login-layout/index.vue
+++ b/ui/src/components/login-layout/index.vue
@@ -3,7 +3,7 @@
     <div class="login-container w-full h-full">
       <el-row class="container w-full h-full">
         <el-col :xs="0" :sm="0" :md="10" :lg="10" :xl="10" class="left-container">
-          <div class="login-image" :style="loginImageStyle"></div>
+          <div class="login-image" :style="{ backgroundImage: `url(${loginImage})` }"></div>
         </el-col>
         <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="right-container flex-center">
           <slot></slot>
@@ -16,6 +16,7 @@
 import { computed } from 'vue'
 import { getThemeImg } from '@/utils/theme'
 import useStore from '@/stores'
+import { request } from '@/request'
 defineOptions({ name: 'LoginLayout' })
 const { user } = useStore()
 
@@ -31,15 +32,12 @@ const fileURL = computed(() => {
   }
 })
 
-const loginImageStyle = computed(() => {
+const loginImage = computed(() => {
   if (user.themeInfo?.loginImage) {
-    return {
-      backgroundImage: `url(${fileURL.value})`
-    }
+    return `${fileURL.value}`
   } else {
-    return {
-      backgroundImage: `url(src/assets/theme/${getThemeImg(user.themeInfo?.theme)}.jpg)`
-    }
+    return new URL(`../../assets/theme/${getThemeImg(user.themeInfo?.theme)}.jpg`, import.meta.url)
+      .href
   }
 })
 </script>
diff --git a/ui/src/layout/components/top-bar/avatar/AboutDialog.vue b/ui/src/layout/components/top-bar/avatar/AboutDialog.vue
index c5bef4e56..fc8bd380a 100644
--- a/ui/src/layout/components/top-bar/avatar/AboutDialog.vue
+++ b/ui/src/layout/components/top-bar/avatar/AboutDialog.vue
@@ -2,7 +2,7 @@
   <el-dialog
     v-model="aboutDialogVisible"
     class="about-dialog border-r-4"
-    :class="!isDefaultTheme ? 'custom-header' : ''"
+    :class="!isDefaultTheme ? 'dialog-custom-header' : ''"
   >
     <template #header="{ titleId, titleClass }">
       <div class="logo flex-center" :id="titleId" :class="titleClass">
@@ -100,7 +100,7 @@ defineExpose({ open })
 <style lang="scss" scope>
 .about-dialog {
   padding: 0 0 24px 0;
-  width: 600px;
+  width: 620px;
   font-weight: 400;
   .el-dialog__header {
     background: var(--app-header-bg-color);
@@ -108,18 +108,21 @@ defineExpose({ open })
     height: 140px;
     box-sizing: border-box;
     border-radius: 4px 4px 0 0;
+    &.show-close {
+      padding-right: 0;
+    }
   }
   .el-dialog__title {
     height: 140px;
     box-sizing: border-box;
   }
   .about-ui {
-    width: 450px;
     margin: 0 auto;
     font-weight: 400;
     font-size: 14px;
     margin-top: 24px;
     line-height: 36px;
+    padding: 0 40px;
 
     .label {
       width: 150px;
@@ -127,7 +130,7 @@ defineExpose({ open })
       color: var(--app-text-color-secondary);
     }
   }
-  &.custom-header {
+  &.dialog-custom-header {
     .el-dialog__header {
       background: var(--el-color-primary-light-9) !important;
     }