diff --git a/styles/TopAppBar.tsx b/styles/TopAppBar.tsx
index 4a364b5..20bd9f2 100644
--- a/styles/TopAppBar.tsx
+++ b/styles/TopAppBar.tsx
@@ -6,33 +6,42 @@ import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
 import routes from "../routes";
 
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? "";
+
 const TopAppBar = () => {
   const router = useRouter();
-  const pathname = (
-    routes.find(({ pathname }) => pathname === router.pathname) || {
-      pathname: "/",
-    }
-  ).pathname;
+  const currentPathname = React.useMemo(
+    () =>
+      router.pathname.startsWith(basePath)
+        ? router.pathname.slice(basePath.length)
+        : router.pathname,
+    [router.pathname]
+  );
+  const tabPathname = React.useMemo(
+    () =>
+      routes.reduce(
+        (prev, { pathname }) =>
+          pathname === currentPathname ? pathname : prev,
+        "/"
+      ),
+    [currentPathname]
+  );
   return (
     <AppBar color="default">
       <Tabs
-        value={pathname}
+        value={tabPathname}
         variant="fullWidth"
         indicatorColor="primary"
         textColor="primary"
       >
-        {routes.map(({ pathname, icon }) => (
+        {routes.map(({ pathname, icon }, index) => (
           <Tab
-            key={pathname}
+            key={index}
             value={pathname}
             icon={icon}
             component={React.forwardRef<HTMLAnchorElement, {}>((props, ref) => (
               <Link href={pathname}>
-                <a
-                  ref={ref}
-                  href={[process.env.NEXT_PUBLIC_BASE_PATH, pathname].join("")}
-                  {...props}
-                />
+                <a ref={ref} href={[basePath, pathname].join("")} {...props} />
               </Link>
             ))}
           />