diff --git a/dictation_client/src/App.tsx b/dictation_client/src/App.tsx
index cfd0d78..10c1610 100644
--- a/dictation_client/src/App.tsx
+++ b/dictation_client/src/App.tsx
@@ -26,7 +26,7 @@ const App = (): JSX.Element => {
         if (e?.response?.status === 401) {
           dispatch(clearToken());
           instance.logout({
-            postLogoutRedirectUri: "/",
+            postLogoutRedirectUri: "/?logout=true",
           });
         }
         return Promise.reject(e);
diff --git a/dictation_client/src/components/auth/routeAuthGuard.tsx b/dictation_client/src/components/auth/routeAuthGuard.tsx
index 78813d5..7b4d9d0 100644
--- a/dictation_client/src/components/auth/routeAuthGuard.tsx
+++ b/dictation_client/src/components/auth/routeAuthGuard.tsx
@@ -1,5 +1,4 @@
-import React, { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useEffect } from "react";
 import {
   isAuthenticatedSelector,
   isTokenExpired,
@@ -17,25 +16,18 @@ export const RouteAuthGuard = (props: RouteAuthGuardProps) => {
   const isAuth = useSelector(isAuthenticatedSelector);
   const isExpired = useSelector(isTokenExpired);
   const dispatch: AppDispatch = useDispatch();
-  const navigate = useNavigate();
   const { instance } = useMsal();
   const { component } = props;
-  // トークンの有効期限が切れていたらTopへリダイレクト
+  // トークンがないor有効期限が切れていたらログアウトしてTopへリダイレクト
   useEffect(() => {
-    if (!isAuth) {
-      navigate("/");
-    } else if (isExpired) {
+    if (!isAuth || isExpired) {
       dispatch(clearToken());
       // B2Cからもログアウトする
       instance.logout({
-        postLogoutRedirectUri: "/",
+        postLogoutRedirectUri: "/?logout=true",
       });
     }
-  }, [isAuth, isExpired, dispatch, navigate, instance]);
-
-  if (!isAuth || isExpired) {
-    return <div />;
-  }
+  }, [isAuth, isExpired, dispatch, instance]);
 
   return component;
 };
diff --git a/dictation_client/src/pages/TopPage/index.tsx b/dictation_client/src/pages/TopPage/index.tsx
index 0ac6497..2a119a7 100644
--- a/dictation_client/src/pages/TopPage/index.tsx
+++ b/dictation_client/src/pages/TopPage/index.tsx
@@ -1,10 +1,14 @@
 import { useMsal } from "@azure/msal-react";
 import { loginRequest } from "common/msalConfig";
-import React from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { getTranslationID } from "translation";
 import Header from "components/header";
 import Footer from "components/footer";
+import { AppDispatch } from "app/store";
+import { useDispatch } from "react-redux";
+import { closeSnackbar, openSnackbar } from "features/ui";
+import { useLocation, useNavigate } from "react-router-dom";
 import { LANGUAGE_LIST } from "../../features/top/constants";
 import arrow_forward from "../../assets/images/arrow_forward.svg";
 import arrow_forward_bule from "../../assets/images/arrow_forward_blue.svg";
@@ -14,6 +18,24 @@ const TopPage: React.FC = (): JSX.Element => {
   const { instance } = useMsal();
   // eslint-disable-next-line
   const [t, i18n] = useTranslation();
+  const dispatch: AppDispatch = useDispatch();
+  const { search } = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const query = new URLSearchParams(search);
+    const logout = query.get("logout");
+    if (logout) {
+      dispatch(closeSnackbar());
+      dispatch(
+        openSnackbar({
+          level: "error",
+          message: getTranslationID("topPage.message.logout"),
+        })
+      );
+      navigate("/", { replace: true });
+    }
+  }, [dispatch, search, navigate]);
 
   return (
     <div className={`${styles.wrap} ${styles.home}`}>