diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 5125f74..5c9b1c3 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,4 +1,5 @@
 ---
+import { Image } from "astro:assets";
 import ZDK_logo from "../assets/zdk_logo_full.svg";
 import ZDK_logo_dark from "../assets/zdk_logo_full_for_darkmode.svg";
 ---
@@ -18,11 +19,13 @@ import ZDK_logo_dark from "../assets/zdk_logo_full_for_darkmode.svg";
       <picture>
         <source
           srcset={ZDK_logo_dark.src}
+          width={ZDK_logo_dark.width}
+          height={ZDK_logo_dark.height}
           media="(prefers-color-scheme: dark)"
         />
-        <img
+        <Image
           class="footer__logo"
-          src={ZDK_logo.src}
+          src={ZDK_logo}
           alt="全学学類・専門学群・総合学域群代表者会議"
         />
       </picture>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 12254bc..0893026 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -11,6 +11,8 @@ import headerSVGDark from "../assets/header_for_darkmode.svg";
       <picture>
         <source
           srcset={headerSVGDark.src}
+          width={headerSVGDark.width}
+          height={headerSVGDark.height}
           media="(prefers-color-scheme: dark)"
         />
         <Image
@@ -21,42 +23,42 @@ import headerSVGDark from "../assets/header_for_darkmode.svg";
       </picture>
       <Image class="icon" loading="eager" src={Icon} alt="" />
     </div>
-
-    <style>
-      .top-link {
-        display: inline-block;
-        margin-block-start: 2rem;
-        text-decoration: none;
-        color: inherit;
-      }
-      .title-container {
-        display: flex;
-        align-items: center;
-      }
-      .title {
-        height: 5rem;
-        width: fit-content;
-      }
-      .icon {
-        height: 5rem;
-        width: 5rem;
-      }
-      @media screen and (max-width: 768px) {
-        .header {
-          text-align: center;
-        }
-        .title {
-          height: 14vw;
-          max-height: 5rem;
-          width: fit-content;
-        }
-        .icon {
-          height: 14vw;
-          width: 14vw;
-          max-height: 5rem;
-          max-width: 5rem;
-        }
-      }
-    </style>
   </a>
 </header>
+
+<style>
+  .top-link {
+    display: inline-block;
+    margin-block-start: 2rem;
+    text-decoration: none;
+    color: inherit;
+  }
+  .title-container {
+    display: flex;
+    align-items: center;
+  }
+  .title {
+    height: 5rem;
+    width: fit-content;
+  }
+  .icon {
+    height: 5rem;
+    width: 5rem;
+  }
+  @media screen and (max-width: 768px) {
+    .header {
+      text-align: center;
+    }
+    .title {
+      height: 14vw;
+      max-height: 5rem;
+      width: fit-content;
+    }
+    .icon {
+      height: 14vw;
+      width: 14vw;
+      max-height: 5rem;
+      max-width: 5rem;
+    }
+  }
+</style>