diff --git a/src/assets/images/brands/discord.svg b/src/assets/icons/Discord.svg
similarity index 100%
rename from src/assets/images/brands/discord.svg
rename to src/assets/icons/Discord.svg
diff --git a/src/assets/images/brands/github.svg b/src/assets/icons/GitHub.svg
similarity index 100%
rename from src/assets/images/brands/github.svg
rename to src/assets/icons/GitHub.svg
diff --git a/src/assets/images/brands/line.svg b/src/assets/icons/LINE.svg
similarity index 100%
rename from src/assets/images/brands/line.svg
rename to src/assets/icons/LINE.svg
diff --git a/src/assets/images/icons/clipboard.svg b/src/assets/images/icons/clipboard.svg
deleted file mode 100644
index f30c325..0000000
--- a/src/assets/images/icons/clipboard.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
-</svg>
diff --git a/src/assets/images/icons/lightning-bolt.svg b/src/assets/images/icons/lightning-bolt.svg
deleted file mode 100644
index 96e5fd2..0000000
--- a/src/assets/images/icons/lightning-bolt.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
-</svg>
\ No newline at end of file
diff --git a/src/assets/images/icons/login.svg b/src/assets/images/icons/login.svg
deleted file mode 100644
index 84c2c6c..0000000
--- a/src/assets/images/icons/login.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
-</svg>
\ No newline at end of file
diff --git a/src/assets/images/icons/star.svg b/src/assets/images/icons/star.svg
deleted file mode 100644
index dabca79..0000000
--- a/src/assets/images/icons/star.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-</svg>
\ No newline at end of file
diff --git a/src/assets/images/icons/user.svg b/src/assets/images/icons/user.svg
deleted file mode 100644
index c7148f6..0000000
--- a/src/assets/images/icons/user.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-</svg>
\ No newline at end of file
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index c47c7d4..b974cd9 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -75,13 +75,13 @@
               <li>
                 <a
                   class="hover:text-gray-900"
-                  href="/mejob/#/hiring"
+                  href="/mejob/#/resumes"
                 >徵才平台</a>
               </li>
               <li>
                 <a
                   class="hover:text-gray-900"
-                  href="/mejob/#/jobs"
+                  href="/mejob/#/careers"
                 >求職平台</a>
               </li>
               <li>
diff --git a/src/components/AppHeaderMenuData.js b/src/components/AppHeaderMenuData.js
index 1bcaa67..1277747 100644
--- a/src/components/AppHeaderMenuData.js
+++ b/src/components/AppHeaderMenuData.js
@@ -19,13 +19,13 @@ export const menuItems = [
       {
         name: "LINE OpenChat",
         description: "提供了能在各領域彼此互相切磋、協助的社群空間",
-        icon: "ChatBubbleLeftRightIcon",
+        icon: "LINE",
         onClick: () => window.open("/openchat")
       },
       {
         name: "Discord",
         description: "這是我們的 Discord 伺服器，自由多元的交流空間",
-        icon: "ChatBubbleLeftRightIcon",
+        icon: "Discord",
         onClick: () => window.open("https://discord.gg/nM7ub6Dz5J")
       }
     ]
@@ -52,7 +52,7 @@ export const menuItems = [
   {
     name: "GitHub",
     type: "function",
-    icon: "ServerStackIcon",
+    icon: "GitHub",
     onClick: () => window.open("https://github.com/web-tech-tw")
   }
 ];
diff --git a/src/components/AppHeaderMobileMenuDropdownItem.vue b/src/components/AppHeaderMobileMenuDropdownItem.vue
index f7ffc31..a5fe878 100644
--- a/src/components/AppHeaderMobileMenuDropdownItem.vue
+++ b/src/components/AppHeaderMobileMenuDropdownItem.vue
@@ -3,11 +3,18 @@
     class="-m-3 p-3 flex w-full items-center rounded-md text-gray-900 hover:text-gray-700"
     type="button"
   >
-    <dynamic-hero-icon
-      v-if="props.icon"
-      :name="props.icon"
-      class="rounded-full w-6 h-6 mr-4"
-    />
+    <div v-if="props.icon">
+      <dynamic-hero-icon
+        v-if="isHeroIcon"
+        :name="props.icon"
+        class="rounded-full w-6 h-6 mr-4"
+      />
+      <dynamic-image-icon
+        v-else
+        :name="props.icon"
+        class="rounded-full w-6 h-6 mr-4"
+      />
+    </div>
     <slot name="prepend" />
     <div class="text-left">
       <div class="text-base font-medium">
@@ -21,7 +28,10 @@
 </template>
 
 <script setup>
-import DynamicHeroIcon from "./DynamicHeroIcon.vue"
+import { computed } from "vue";
+
+import DynamicHeroIcon from "./DynamicHeroIcon.vue";
+import DynamicImageIcon from "./DynamicImageIcon.vue";
 
 const props = defineProps({
   name: {
@@ -38,4 +48,8 @@ const props = defineProps({
     default: () => "",
   },
 });
+
+const isHeroIcon = computed(() => {
+  return props.icon.endsWith("Icon");
+});
 </script>
diff --git a/src/components/AppHeaderMobileMenuItem.vue b/src/components/AppHeaderMobileMenuItem.vue
index 3134507..0e85f04 100644
--- a/src/components/AppHeaderMobileMenuItem.vue
+++ b/src/components/AppHeaderMobileMenuItem.vue
@@ -3,11 +3,18 @@
     class="-m-3 p-3 flex w-full items-center rounded-md text-gray-900 hover:text-gray-700"
     type="button"
   >
-    <dynamic-hero-icon
-      v-if="props.icon"
-      :name="props.icon"
-      class="rounded-full w-6 h-6 mr-4"
-    />
+    <div v-if="props.icon">
+      <dynamic-hero-icon
+        v-if="isHeroIcon"
+        :name="props.icon"
+        class="rounded-full w-6 h-6 mr-4"
+      />
+      <dynamic-image-icon
+        v-else
+        :name="props.icon"
+        class="rounded-full w-6 h-6 mr-4"
+      />
+    </div>
     <slot name="prepend" />
     <div class="text-left">
       <div class="text-base font-medium">
@@ -18,7 +25,10 @@
 </template>
 
 <script setup>
-import DynamicHeroIcon from "./DynamicHeroIcon.vue"
+import { computed } from "vue";
+
+import DynamicHeroIcon from "./DynamicHeroIcon.vue";
+import DynamicImageIcon from "./DynamicImageIcon.vue";
 
 const props = defineProps({
   name: {
@@ -31,4 +41,8 @@ const props = defineProps({
     default: () => "",
   },
 });
+
+const isHeroIcon = computed(() => {
+  return props.icon.endsWith("Icon");
+});
 </script>
diff --git a/src/components/AppHeaderNormalMenuDropdownItem.vue b/src/components/AppHeaderNormalMenuDropdownItem.vue
index f7ffc31..a5fe878 100644
--- a/src/components/AppHeaderNormalMenuDropdownItem.vue
+++ b/src/components/AppHeaderNormalMenuDropdownItem.vue
@@ -3,11 +3,18 @@
     class="-m-3 p-3 flex w-full items-center rounded-md text-gray-900 hover:text-gray-700"
     type="button"
   >
-    <dynamic-hero-icon
-      v-if="props.icon"
-      :name="props.icon"
-      class="rounded-full w-6 h-6 mr-4"
-    />
+    <div v-if="props.icon">
+      <dynamic-hero-icon
+        v-if="isHeroIcon"
+        :name="props.icon"
+        class="rounded-full w-6 h-6 mr-4"
+      />
+      <dynamic-image-icon
+        v-else
+        :name="props.icon"
+        class="rounded-full w-6 h-6 mr-4"
+      />
+    </div>
     <slot name="prepend" />
     <div class="text-left">
       <div class="text-base font-medium">
@@ -21,7 +28,10 @@
 </template>
 
 <script setup>
-import DynamicHeroIcon from "./DynamicHeroIcon.vue"
+import { computed } from "vue";
+
+import DynamicHeroIcon from "./DynamicHeroIcon.vue";
+import DynamicImageIcon from "./DynamicImageIcon.vue";
 
 const props = defineProps({
   name: {
@@ -38,4 +48,8 @@ const props = defineProps({
     default: () => "",
   },
 });
+
+const isHeroIcon = computed(() => {
+  return props.icon.endsWith("Icon");
+});
 </script>
diff --git a/src/components/DynamicImageIcon.vue b/src/components/DynamicImageIcon.vue
new file mode 100644
index 0000000..c4a1fe5
--- /dev/null
+++ b/src/components/DynamicImageIcon.vue
@@ -0,0 +1,27 @@
+<template>
+  <img
+    :alt="props.name"
+    :src="resource"
+    v-bind="props"
+  >
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  class: {
+    type: String,
+    required: false,
+    default: () => ""
+  },
+});
+
+const resource = computed(() => {
+    return `/src/assets/icons/${props.name}.svg`;
+});
+</script>
\ No newline at end of file