diff --git a/public/buttons/009button.gif b/public/buttons/009button.gif
new file mode 100644
index 0000000..164709e
Binary files /dev/null and b/public/buttons/009button.gif differ
diff --git a/public/buttons/mac.gif b/public/buttons/mac.gif
new file mode 100644
index 0000000..155e81b
Binary files /dev/null and b/public/buttons/mac.gif differ
diff --git a/public/buttons/parental.png b/public/buttons/parental.png
new file mode 100644
index 0000000..ba89dab
Binary files /dev/null and b/public/buttons/parental.png differ
diff --git a/public/buttons/right2repair.png b/public/buttons/right2repair.png
new file mode 100644
index 0000000..21fffb5
Binary files /dev/null and b/public/buttons/right2repair.png differ
diff --git a/public/buttons/vscbutton.gif b/public/buttons/vscbutton.gif
new file mode 100644
index 0000000..8a4cad2
Binary files /dev/null and b/public/buttons/vscbutton.gif differ
diff --git a/public/buttons/www.gif b/public/buttons/www.gif
new file mode 100644
index 0000000..48fbd13
Binary files /dev/null and b/public/buttons/www.gif differ
diff --git a/src/App.tsx b/src/App.tsx
index 0c4b0d1..742f13b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import { RecoilRoot } from 'recoil'
 
 import Mutuals from "./components/Mutuals"
 import Card from "./components/Card"
+import Misc from "./components/Misc"
 import VerticalMenu from "./components/VerticalMenu"
 import HorizontalMenu from "./components/HorizontalMenu"
 import LanguageMenu from "./components/LanguageMenu"
@@ -41,7 +42,7 @@ export default function App() {
 
   useEffect(() => {
     handleScroll();
-    window.scrollTo(0, 60)
+    window.scrollTo(0, 10)
 
     window.addEventListener('scroll', handleScroll);
     return () => {
@@ -55,16 +56,17 @@ export default function App() {
         <>
           <Mutuals />
           <div>
-            <div className={`sticky h-screen`} style={{ opacity: cardOpacity, marginTop: `60px` }}>
+            <div className={`sticky h-screen`} style={{ opacity: cardOpacity, marginTop: `-200px` }}>
               <div id="card" className="fixed py-5 -mt-20" style={{ top: `${cardY}px` }}>
                 <Card />
+                <Misc />
               </div>
             </div>
 
             <div className="grid justify-items-center">
               <div id="content" className="absolute dark:text-white sm:min-w-[565px]" style={{ top: `${contentY}px` }}>
                 <div className="grid grid-container md:grid-cols-5 gap-2 min-h-[70vh] w-3xl">
-                  <div className="sticky top-5 hidden md:block md:col-span-1">
+                  <div className="hidden md:block md:col-span-1">
                     <VerticalMenu />
                   </div>
                   <div className="sticky top-14 md:hidden">
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 35b2d9e..3c5ac0d 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -6,6 +6,7 @@ import { faXTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-ic
 import { useState, useEffect } from 'react';
 
 import Logo from "./Logo"
+import Misc from "./Misc"
 
 interface NowPlaying {
     album?: string
@@ -23,79 +24,80 @@ export default function Card() {
         fetch(
             "https://vercel-spotify-api.vercel.app/api/Spotify"
         )
-        .then(res => res.json())
-        .then(data => {
-            if (data) {
-                setNp(data)
-            }
-        })
+            .then(res => res.json())
+            .then(data => {
+                if (data) {
+                    setNp(data)
+                }
+            })
     }, [])
 
     return (
-        <div className="container">
-            <div
-                className="absolute opacity-20 w-screen -z-10 blur-sm"
-                style={np && np.isPlaying ? {
-                    height: `93%`,
-                    backgroundImage: `url(${np.album_art})`,
-                    backgroundColor: `rgba(255, 255, 255, 0.2)`,
-                    backgroundBlendMode: `lighten`
-                } : {}}
-            ></div>
-            <div className="flex justify-center w-screen items-center">
-                <div className="mx-2 inline-block">
-                    <img
-                        draggable="false"
-                        className="rounded-full hover:cursor-grab"
-                        width={100}
-                        height={100}
-                        src="./avatar.webp"
-                    />
-                </div>
-                <div className="mx-2 text-left h-full inline-block">
-                    <Logo />
-                    <p className="dark:text-white mt-2 -mb-1">
-                        {np && np.isPlaying && 
-                            <div className="flex flex-row">
-                                <div className="w-5 text-gray-900 dark:text-gray-300">
-                                    <FontAwesomeIcon icon={faMusic} />
+        <>
+            <div className="container">
+                <div
+                    className="absolute opacity-20 w-screen -z-10 blur-sm"
+                    style={np && np.isPlaying ? {
+                        height: `93%`,
+                        backgroundImage: `url(${np.album_art})`,
+                        backgroundColor: `rgba(255, 255, 255, 0.2)`,
+                        backgroundBlendMode: `lighten`
+                    } : {}}
+                ></div>
+                <div className="flex justify-center w-screen items-center">
+                    <div className="mx-2 inline-block">
+                        <img
+                            draggable="false"
+                            className="rounded-full hover:cursor-grab"
+                            width={100}
+                            height={100}
+                            src="./avatar.webp"
+                        />
+                    </div>
+                    <div className="mx-2 text-left h-full inline-block">
+                        <Logo />
+                        <p className="dark:text-white mt-2 -mb-1">
+                            {np && np.isPlaying &&
+                                <div className="flex flex-row">
+                                    <div className="w-5 text-gray-900 dark:text-gray-300">
+                                        <FontAwesomeIcon icon={faMusic} />
+                                    </div>
+                                    <div className="text-left max-w-xs">
+                                        <span className="text-gray-900 dark:text-gray-300">{np.artist}</span>
+                                        <p className="text-lg">{np.title}</p>
+                                    </div>
                                 </div>
-                                <div className="text-left max-w-xs">
-                                    <span className="text-gray-900 dark:text-gray-300">{np.artist}</span>
-                                    <p className="text-lg">{np.title}</p>
-                                </div>
-                            </div>
-                        }
-                    </p>
-                    <div className="dark:text-white mt-2">
-                        <p className="font-mono left-0.5 relative">
-                            <FontAwesomeIcon icon={faEnvelope} className="dark:text-gray-300" />{" "}
-                            i@yude.jp
-                        </p>
-                        <p className="font-mono left-0.5 relative">
-                            <FontAwesomeIcon icon={faPhone} className="dark:text-gray-300" />{" "}
-                            +81 70-8909-1949
-                        </p>
-                        <p className="font-mono left-0.5 relative">
-                            <a href="https://x.com/yude_jp">
-                                <FontAwesomeIcon icon={faXTwitter} className="dark:text-gray-300" />{" "}
-                                @yude_jp
-                            </a>
-                        </p>
-                        <p className="font-mono left-0.5 relative">
-                            <FontAwesomeIcon icon={faDiscord} className="dark:text-gray-300" />{" "}
-                            <span className="-ml-1">yude</span>
-                        </p>
-                        <p className="font-mono left-0.5 relative">
-                            <a href="https://github.com/yude">
-                                <FontAwesomeIcon icon={faGithub} className="dark:text-gray-300" />{" "}
-                                yude
-                            </a>
+                            }
                         </p>
+                        <div className="dark:text-white mt-2">
+                            <p className="font-mono left-0.5 relative">
+                                <FontAwesomeIcon icon={faEnvelope} className="dark:text-gray-300" />{" "}
+                                i@yude.jp
+                            </p>
+                            <p className="font-mono left-0.5 relative">
+                                <FontAwesomeIcon icon={faPhone} className="dark:text-gray-300" />{" "}
+                                +81 70-8909-1949
+                            </p>
+                            <p className="font-mono left-0.5 relative">
+                                <a href="https://x.com/yude_jp">
+                                    <FontAwesomeIcon icon={faXTwitter} className="dark:text-gray-300" />{" "}
+                                    @yude_jp
+                                </a>
+                            </p>
+                            <p className="font-mono left-0.5 relative">
+                                <FontAwesomeIcon icon={faDiscord} className="dark:text-gray-300" />{" "}
+                                <span className="-ml-1">yude</span>
+                            </p>
+                            <p className="font-mono left-0.5 relative">
+                                <a href="https://github.com/yude">
+                                    <FontAwesomeIcon icon={faGithub} className="dark:text-gray-300" />{" "}
+                                    yude
+                                </a>
+                            </p>
+                        </div>
                     </div>
                 </div>
-                </div>
             </div>
+        </>
     )
-  }
-  
\ No newline at end of file
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index d53d552..4a65ad7 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,14 +1,9 @@
-import Weather from "./Weather"
-
 export default function Footer() {
     return (
         <div className="text-center text-gray-500 mb-5">
             <img alt="yude.jp banner" src="./banner_new.png" className="h-12 inline" />
             <img alt="happybusy" src="./busy_banner.webp" className="h-12 inline" />
             <img alt="Page view counter" src="https://moe-counter-cf.yude.workers.dev/yude.jp:home" className="h-20 mx-auto" />
-            <div>
-                <Weather />
-            </div>
             <p className="mt-5">
                 <a href="https://github.com/yudejp/yude.jp">
                     &copy; 2024 yude
diff --git a/src/components/HorizontalMenu.tsx b/src/components/HorizontalMenu.tsx
index 1068d5b..8b3d45a 100644
--- a/src/components/HorizontalMenu.tsx
+++ b/src/components/HorizontalMenu.tsx
@@ -3,12 +3,9 @@ import { faUser, faStar, faComments } from '@fortawesome/free-regular-svg-icons'
 import { faPassport } from "@fortawesome/free-solid-svg-icons"
 import { Pages } from "./VerticalMenu"
 
-import { RecoilRoot, atom, useRecoilState } from 'recoil'
+import { RecoilRoot, useRecoilState } from 'recoil'
 
-export const currentPage = atom({
-    key: 'page',
-    default: Pages.Profile,
-})
+import { currentPage } from "./VerticalMenu"
 
 export default function HorizontalMenu() {
     const [page, setPage] = useRecoilState(currentPage);
diff --git a/src/components/Misc.tsx b/src/components/Misc.tsx
new file mode 100644
index 0000000..bfacfdb
--- /dev/null
+++ b/src/components/Misc.tsx
@@ -0,0 +1,24 @@
+export default function Weather() {
+    return (
+        <div className="flex justify-center items-start w-screen">
+            <div>
+                <div className="inline-block">
+                    <iframe
+                        src="https://www.tenki-yoho.com/blogparts/img.php?all,acrweb"
+                        width={166}
+                        height={196}
+                    />
+                </div>
+                <div className="inline-block ml-3">
+                    <img width={94} src="buttons/009button.gif" />
+                    <img width={94} src="buttons/mac.gif" />
+                    <img width={94} src="buttons/right2repair.png" />
+                    <img width={94} src="buttons/vscbutton.gif" />
+                    <img width={94} src="buttons/parental.png" />
+                    <img width={94} src="buttons/www.gif" />
+
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/VerticalMenu.tsx b/src/components/VerticalMenu.tsx
index 0da8f82..0594dc0 100644
--- a/src/components/VerticalMenu.tsx
+++ b/src/components/VerticalMenu.tsx
@@ -27,36 +27,38 @@ export default function VerticalMenu() {
 
     return (
         <RecoilRoot>
-            <ul className="text-lg font-medium text-center hover:cursor-pointer">
-                <li
-                    className={`w-full px-4 py-2 rounded-lg${page === Pages.Profile ? activeColor : ""}`}
-                    onClick={() => { setPage(Pages.Profile) }}
-                >
-                    <FontAwesomeIcon icon={faUser} className="w-10 h-10" />{" "}
-                    <p>{t("profile")}</p>
-                </li>
-                <li
-                    className={`w-full px-4 py-2 rounded-lg${page === Pages.Identifier ? activeColor : ""}`}
-                    onClick={() => { setPage(Pages.Identifier) }}
-                >
-                    <FontAwesomeIcon icon={faPassport} className="w-10 h-10" />{" "}
-                    <p>{t("identifier")}</p>
-                </li>
-                <li
-                    className={`w-full px-4 py-2 rounded-lg${page === Pages.Services ? activeColor : ""}`}
-                    onClick={() => { setPage(Pages.Services) }}
-                >
-                    <FontAwesomeIcon icon={faStar} className="w-10 h-10" />{" "}
-                    <p>{t("services")}</p>
-                </li>
-                <li
-                    className={`w-full px-4 py-2 rounded-lg${page === Pages.Chat ? activeColor : ""}`}
-                    onClick={() => { setPage(Pages.Chat) }}
-                >
-                    <FontAwesomeIcon icon={faComments} className="w-10 h-10" />{" "}
-                    <p>{t("chat")}</p>
-                </li>
-            </ul>
+            <div className="sticky top-5">
+                <ul className="text-lg font-medium text-center hover:cursor-pointer">
+                    <li
+                        className={`w-full px-4 py-2 rounded-lg${page === Pages.Profile ? activeColor : ""}`}
+                        onClick={() => { setPage(Pages.Profile) }}
+                    >
+                        <FontAwesomeIcon icon={faUser} className="w-10 h-10" />{" "}
+                        <p>{t("profile")}</p>
+                    </li>
+                    <li
+                        className={`w-full px-4 py-2 rounded-lg${page === Pages.Identifier ? activeColor : ""}`}
+                        onClick={() => { setPage(Pages.Identifier) }}
+                    >
+                        <FontAwesomeIcon icon={faPassport} className="w-10 h-10" />{" "}
+                        <p>{t("identifier")}</p>
+                    </li>
+                    <li
+                        className={`w-full px-4 py-2 rounded-lg${page === Pages.Services ? activeColor : ""}`}
+                        onClick={() => { setPage(Pages.Services) }}
+                    >
+                        <FontAwesomeIcon icon={faStar} className="w-10 h-10" />{" "}
+                        <p>{t("services")}</p>
+                    </li>
+                    <li
+                        className={`w-full px-4 py-2 rounded-lg${page === Pages.Chat ? activeColor : ""}`}
+                        onClick={() => { setPage(Pages.Chat) }}
+                    >
+                        <FontAwesomeIcon icon={faComments} className="w-10 h-10" />{" "}
+                        <p>{t("chat")}</p>
+                    </li>
+                </ul>
+            </div>
         </RecoilRoot>
     )
 }
diff --git a/src/components/Weather.tsx b/src/components/Weather.tsx
deleted file mode 100644
index 5ab7b90..0000000
--- a/src/components/Weather.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function Weather() {
-    return (
-        <>
-            <div className="inline-block"><iframe src="https://www.tenki-yoho.com/blogparts/img.php?all,acrweb" width={200} height={200}><a href="https://www.tenki-yoho.com/">天気予報</a></iframe></div>
-        </>
-    )
-}