diff --git a/src/components/AppIcon.vue b/src/components/AppIcon.vue
index ed4b4db..ac5dcce 100644
--- a/src/components/AppIcon.vue
+++ b/src/components/AppIcon.vue
@@ -1,7 +1,26 @@
 <template>
-  <img :src="url + '/api/public/icon.png'" alt="LOGO" class="h-full w-auto" />
+  <img ref="icon" :src="url + '/api/public/icon.png'" alt="LOGO" class="h-full w-auto" />
 </template>
 
 <script setup lang="ts">
 import { url } from "@/serverCom";
+import { useSettingStore } from "@/stores/admin/management/setting";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  watch: {
+    icon() {
+      (this.$refs.icon as HTMLImageElement).src = url + "/api/public/icon.png?" + new Date().getTime();
+    },
+  },
+  computed: {
+    ...mapState(useSettingStore, ["readSetting"]),
+    icon() {
+      return this.readSetting("club.icon");
+    },
+  },
+});
 </script>
diff --git a/src/components/AppLogo.vue b/src/components/AppLogo.vue
index f29cffc..1e4ffb8 100644
--- a/src/components/AppLogo.vue
+++ b/src/components/AppLogo.vue
@@ -1,7 +1,26 @@
 <template>
-  <img :src="url + '/api/public/applogo.png'" alt="LOGO" class="h-full w-auto" />
+  <img ref="logo" :src="url + '/api/public/applogo.png'" alt="LOGO" class="h-full w-auto" />
 </template>
 
 <script setup lang="ts">
 import { url } from "@/serverCom";
+import { useSettingStore } from "@/stores/admin/management/setting";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  watch: {
+    logo() {
+      (this.$refs.logo as HTMLImageElement).src = url + "/api/public/applogo.png?t=" + new Date().getTime();
+    },
+  },
+  computed: {
+    ...mapState(useSettingStore, ["readSetting"]),
+    logo() {
+      return this.readSetting("club.logo");
+    },
+  },
+});
 </script>