diff --git a/apps/pyconkr/src/components/layout/Header/Mobile/HamburgerButton.tsx b/apps/pyconkr/src/components/layout/Header/Mobile/HamburgerButton.tsx
new file mode 100644
index 0000000..c859d12
--- /dev/null
+++ b/apps/pyconkr/src/components/layout/Header/Mobile/HamburgerButton.tsx
@@ -0,0 +1,46 @@
+import { IconButton, styled } from "@mui/material";
+import * as React from "react";
+
+interface HamburgerButtonProps {
+  isOpen: boolean;
+  onClick: () => void;
+  isMainPath?: boolean;
+}
+
+export const HamburgerButton: React.FC<HamburgerButtonProps> = ({ isOpen, onClick, isMainPath = true }) => {
+  return (
+    <StyledIconButton onClick={onClick} isMainPath={isMainPath}>
+      <HamburgerIcon isOpen={isOpen} isMainPath={isMainPath}>
+        <span />
+        <span />
+        <span />
+      </HamburgerIcon>
+    </StyledIconButton>
+  );
+};
+
+const StyledIconButton = styled(IconButton)<{ isMainPath: boolean }>(({ theme, isMainPath }) => ({
+  padding: 0,
+  width: 26,
+  height: 18,
+  color: isMainPath ? theme.palette.mobileHeader.main.text : theme.palette.mobileHeader.sub.text,
+}));
+
+const HamburgerIcon = styled("div")<{ isOpen: boolean; isMainPath: boolean }>(({ isOpen, theme, isMainPath }) => ({
+  width: 26,
+  height: 18,
+  position: "relative",
+  cursor: "pointer",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-between",
+
+  "& span": {
+    display: "block",
+    height: isOpen ? 3 : 2,
+    width: "100%",
+    backgroundColor: isMainPath ? theme.palette.mobileHeader.main.text : theme.palette.mobileHeader.sub.text,
+    borderRadius: 1,
+    transition: "height 0.3s ease",
+  },
+}));
diff --git a/apps/pyconkr/src/components/layout/Header/Mobile/MobileHeader.tsx b/apps/pyconkr/src/components/layout/Header/Mobile/MobileHeader.tsx
new file mode 100644
index 0000000..03b2f92
--- /dev/null
+++ b/apps/pyconkr/src/components/layout/Header/Mobile/MobileHeader.tsx
@@ -0,0 +1,90 @@
+import * as Common from "@frontend/common";
+import { Box, Stack, styled, Typography } from "@mui/material";
+import * as React from "react";
+import { Link, useLocation } from "react-router-dom";
+
+import { HamburgerButton } from "./HamburgerButton";
+import { MobileLanguageToggle } from "./MobileLanguageToggle";
+import { MobileNavigation } from "./MobileNavigation";
+import { useAppContext } from "../../../../contexts/app_context";
+
+interface MobileHeaderProps {
+  isNavigationOpen?: boolean;
+  onToggleNavigation?: () => void;
+}
+
+export const MobileHeader: React.FC<MobileHeaderProps> = ({ isNavigationOpen = false, onToggleNavigation }) => {
+  const { siteMapNode } = useAppContext();
+  const location = useLocation();
+  const [internalNavigationOpen, setInternalNavigationOpen] = React.useState(false);
+
+  const navigationOpen = onToggleNavigation ? isNavigationOpen : internalNavigationOpen;
+  const toggleNavigation = onToggleNavigation || (() => setInternalNavigationOpen(!internalNavigationOpen));
+
+  const isMainPath = location.pathname === "/";
+
+  return (
+    <>
+      <MobileHeaderContainer isOpen={navigationOpen} isMainPath={isMainPath}>
+        <LeftContent>
+          <HamburgerButton isOpen={navigationOpen} onClick={toggleNavigation} isMainPath={isMainPath} />
+          <LogoAndTextContainer>
+            <Link to="/" style={{ textDecoration: "none" }}>
+              <Stack direction="row" alignItems="center" spacing={0.375}>
+                <Common.Components.PythonKorea style={{ width: 29, height: 29 }} />
+                <Typography
+                  variant="h6"
+                  sx={{
+                    color: isMainPath ? "white" : "rgba(18, 109, 127, 0.6)",
+                    fontSize: 18,
+                    fontWeight: 600,
+                  }}
+                >
+                  파이콘 한국 2025
+                </Typography>
+              </Stack>
+            </Link>
+          </LogoAndTextContainer>
+        </LeftContent>
+
+        <MobileLanguageToggle isMainPath={isMainPath} />
+      </MobileHeaderContainer>
+
+      <MobileNavigation isOpen={navigationOpen} onClose={() => toggleNavigation()} siteMapNode={siteMapNode} />
+    </>
+  );
+};
+
+const MobileHeaderContainer = styled("header")<{ isOpen: boolean; isMainPath: boolean }>(({ theme, isOpen, isMainPath }) => ({
+  position: isMainPath ? "fixed" : "sticky",
+  top: 0,
+  left: 0,
+  right: 0,
+
+  display: isOpen ? "none" : "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+
+  width: "100%",
+  height: 60,
+
+  padding: "15px 23px",
+
+  backgroundColor: isMainPath ? "rgba(182, 216, 215, 0.1)" : "#B6D8D7",
+  backdropFilter: isMainPath ? "blur(8px)" : "none",
+  WebkitBackdropFilter: isMainPath ? "blur(8px)" : "none",
+  color: isMainPath ? "white" : "rgba(18, 109, 127, 0.6)",
+
+  zIndex: isMainPath ? theme.zIndex.appBar + 100000 : theme.zIndex.appBar,
+}));
+
+const LeftContent = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  gap: 17,
+});
+
+const LogoAndTextContainer = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+});
diff --git a/apps/pyconkr/src/components/layout/Header/Mobile/MobileLanguageToggle.tsx b/apps/pyconkr/src/components/layout/Header/Mobile/MobileLanguageToggle.tsx
new file mode 100644
index 0000000..f38217f
--- /dev/null
+++ b/apps/pyconkr/src/components/layout/Header/Mobile/MobileLanguageToggle.tsx
@@ -0,0 +1,76 @@
+import { ButtonBase, styled } from "@mui/material";
+import * as React from "react";
+
+import { LOCAL_STORAGE_LANGUAGE_KEY } from "../../../../consts/local_stroage";
+import { useAppContext } from "../../../../contexts/app_context";
+
+interface MobileLanguageToggleProps {
+  isMainPath?: boolean;
+}
+
+export const MobileLanguageToggle: React.FC<MobileLanguageToggleProps> = ({ isMainPath = true }) => {
+  const { language, setAppContext } = useAppContext();
+
+  const handleLanguageChange = (newLanguage: "ko" | "en") => {
+    localStorage.setItem(LOCAL_STORAGE_LANGUAGE_KEY, newLanguage);
+    setAppContext((ps) => ({ ...ps, language: newLanguage }));
+  };
+  return (
+    <ToggleContainer isMainPath={isMainPath}>
+      <LanguageButton isActive={language === "ko"} isMainPath={isMainPath} onClick={() => handleLanguageChange("ko")}>
+        KO
+      </LanguageButton>
+      <LanguageButton isActive={language === "en"} isMainPath={isMainPath} onClick={() => handleLanguageChange("en")}>
+        EN
+      </LanguageButton>
+    </ToggleContainer>
+  );
+};
+
+const ToggleContainer = styled("div")<{ isMainPath: boolean }>(({ theme, isMainPath }) => ({
+  display: "flex",
+  width: 94,
+  height: 29,
+  border: "1px solid white",
+  borderRadius: 15,
+  padding: 2,
+  gap: 2,
+  backgroundColor: isMainPath
+    ? theme.palette.mobileNavigation.main.languageToggle.background
+    : theme.palette.mobileNavigation.sub.languageToggle.background,
+}));
+
+const LanguageButton = styled(ButtonBase)<{ isActive: boolean; isMainPath: boolean }>(({ theme, isActive, isMainPath }) => ({
+  flex: 1,
+  height: "100%",
+  borderRadius: 13,
+  fontSize: 12,
+  fontWeight: 400,
+  transition: "all 0.2s ease",
+
+  color: isMainPath ? theme.palette.mobileHeader.main.text : theme.palette.mobileHeader.sub.text,
+  backgroundColor: "transparent",
+
+  ...(isActive && {
+    backgroundColor: isMainPath
+      ? theme.palette.mobileNavigation.main.languageToggle.active.background
+      : theme.palette.mobileNavigation.sub.languageToggle.active.background,
+    color: isMainPath ? theme.palette.mobileHeader.main.activeLanguage : theme.palette.mobileHeader.sub.activeLanguage,
+    fontWeight: 600,
+  }),
+
+  "&:hover": {
+    backgroundColor: isActive
+      ? isMainPath
+        ? theme.palette.mobileNavigation.main.languageToggle.active.hover
+        : theme.palette.mobileNavigation.sub.languageToggle.active.hover
+      : isMainPath
+        ? theme.palette.mobileNavigation.main.languageToggle.inactive.hover
+        : theme.palette.mobileNavigation.sub.languageToggle.inactive.hover,
+  },
+
+  WebkitFontSmoothing: "antialiased",
+  MozOsxFontSmoothing: "grayscale",
+  textRendering: "optimizeLegibility",
+  WebkitTextStroke: "0.5px transparent",
+}));
diff --git a/apps/pyconkr/src/components/layout/Header/Mobile/MobileNavigation.tsx b/apps/pyconkr/src/components/layout/Header/Mobile/MobileNavigation.tsx
new file mode 100644
index 0000000..860f474
--- /dev/null
+++ b/apps/pyconkr/src/components/layout/Header/Mobile/MobileNavigation.tsx
@@ -0,0 +1,344 @@
+import * as Common from "@frontend/common";
+import BackendAPISchemas from "@frontend/common/src/schemas/backendAPI";
+import { ArrowBack, ArrowForward } from "@mui/icons-material";
+import { Box, Button, Chip, Drawer, IconButton, Stack, styled, Typography } from "@mui/material";
+import * as React from "react";
+import { Link, useLocation } from "react-router-dom";
+import * as R from "remeda";
+
+import { HamburgerButton } from "./HamburgerButton";
+import { MobileLanguageToggle } from "./MobileLanguageToggle";
+import { SignInButton } from "../../SignInButton";
+
+type MenuType = BackendAPISchemas.NestedSiteMapSchema;
+
+interface MobileNavigationProps {
+  isOpen: boolean;
+  onClose: () => void;
+  siteMapNode?: MenuType;
+}
+
+type NavigationLevel = "depth1" | "depth2" | "depth3";
+
+interface NavigationState {
+  level: NavigationLevel;
+  depth1?: MenuType;
+  depth2?: MenuType;
+  breadcrumbs: { name: string; level: NavigationLevel }[];
+}
+
+export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onClose, siteMapNode }) => {
+  const location = useLocation();
+  const [navState, setNavState] = React.useState<NavigationState>({
+    level: "depth1",
+    breadcrumbs: [],
+  });
+
+  const isMainPath = location.pathname === "/";
+
+  const resetNavigation = () => {
+    setNavState({
+      level: "depth1",
+      breadcrumbs: [],
+    });
+  };
+
+  const navigateToDepth2 = (depth1: MenuType) => {
+    setNavState({
+      level: "depth2",
+      depth1,
+      breadcrumbs: [{ name: depth1.name, level: "depth1" }],
+    });
+  };
+
+  const navigateToDepth3 = (depth2: MenuType) => {
+    setNavState((prev) => ({
+      ...prev,
+      level: "depth3",
+      depth2,
+      breadcrumbs: [...prev.breadcrumbs, { name: depth2.name, level: "depth2" }],
+    }));
+  };
+
+  const goBack = () => {
+    if (navState.level === "depth3") {
+      setNavState((prev) => ({
+        ...prev,
+        level: "depth2",
+        depth2: undefined,
+        breadcrumbs: prev.breadcrumbs.slice(0, -1),
+      }));
+    } else if (navState.level === "depth2") {
+      resetNavigation();
+    }
+  };
+
+  const handleClose = () => {
+    onClose();
+    resetNavigation();
+  };
+
+  const renderDepth1Menu = () => {
+    if (!siteMapNode) return null;
+
+    return (
+      <MenuContainer>
+        {Object.values(siteMapNode.children)
+          .filter((s) => !s.hide)
+          .map((menu) => (
+            <MenuItem isMainPath={isMainPath} key={menu.id}>
+              <MenuLink isMainPath={isMainPath} to={menu.route_code} onClick={handleClose}>
+                {menu.name}
+              </MenuLink>
+              {!R.isEmpty(menu.children) && (
+                <MenuArrowButton isMainPath={isMainPath} onClick={() => navigateToDepth2(menu)}>
+                  <ArrowForward fontSize="small" />
+                </MenuArrowButton>
+              )}
+            </MenuItem>
+          ))}
+      </MenuContainer>
+    );
+  };
+
+  const renderDepth2Menu = () => {
+    if (!navState.depth1) return null;
+
+    return (
+      <NavigationMenuSection>
+        <Depth2Header isMainPath={isMainPath}>
+          <BackButton isMainPath={isMainPath} onClick={goBack}>
+            <ArrowBack fontSize="small" />
+          </BackButton>
+          <Depth2Title isMainPath={isMainPath}>{navState.depth1.name}</Depth2Title>
+        </Depth2Header>
+
+        <Depth2Divider isMainPath={isMainPath} />
+
+        <Depth2MenuList>
+          {Object.values(navState.depth1.children)
+            .filter((s) => !s.hide)
+            .map((menu) => (
+              <Depth2MenuItem key={menu.id}>
+                <Link to={`${navState.depth1!.route_code}/${menu.route_code}`} onClick={handleClose} style={{ textDecoration: "none" }}>
+                  <MenuChip isMainPath={isMainPath} label={menu.name} clickable />
+                </Link>
+                {!R.isEmpty(menu.children) && (
+                  <MenuArrowButton isMainPath={isMainPath} onClick={() => navigateToDepth3(menu)}>
+                    <ArrowForward fontSize="small" />
+                  </MenuArrowButton>
+                )}
+              </Depth2MenuItem>
+            ))}
+        </Depth2MenuList>
+      </NavigationMenuSection>
+    );
+  };
+
+  const renderDepth3Menu = () => {
+    if (!navState.depth2) return null;
+
+    return (
+      <NavigationMenuSection>
+        <Depth2Header isMainPath={isMainPath}>
+          <BackButton isMainPath={isMainPath} onClick={goBack}>
+            <ArrowBack fontSize="small" />
+          </BackButton>
+          <Depth2Title isMainPath={isMainPath}>{navState.depth2.name}</Depth2Title>
+        </Depth2Header>
+
+        <Depth2Divider isMainPath={isMainPath} />
+
+        <Depth3MenuGrid>
+          {Object.values(navState.depth2.children)
+            .filter((s) => !s.hide)
+            .map((menu) => (
+              <Link
+                key={menu.id}
+                to={`${navState.depth1!.route_code}/${navState.depth2!.route_code}/${menu.route_code}`}
+                onClick={handleClose}
+                style={{ textDecoration: "none" }}
+              >
+                <MenuChip isMainPath={isMainPath} label={menu.name} clickable />
+              </Link>
+            ))}
+        </Depth3MenuGrid>
+      </NavigationMenuSection>
+    );
+  };
+
+  return (
+    <StyledDrawer isMainPath={isMainPath} anchor="left" open={isOpen} onClose={handleClose}>
+      <DrawerContent>
+        <NavigationHeader isMainPath={isMainPath}>
+          <HamburgerButton isOpen={true} onClick={handleClose} isMainPath={isMainPath} />
+
+          <LogoAndTextContainer>
+            <Link to="/" onClick={handleClose} style={{ textDecoration: "none" }}>
+              <Stack direction="row" alignItems="center" spacing={0.375}>
+                <Common.Components.PythonKorea style={{ width: 29, height: 29 }} />
+                <HeaderTitle isMainPath={isMainPath}>파이콘 한국 2025</HeaderTitle>
+              </Stack>
+            </Link>
+          </LogoAndTextContainer>
+        </NavigationHeader>
+
+        <NavigationContent>
+          {navState.level === "depth1" && renderDepth1Menu()}
+          {navState.level === "depth2" && renderDepth2Menu()}
+          {navState.level === "depth3" && renderDepth3Menu()}
+        </NavigationContent>
+
+        <BottomActions isMainPath={isMainPath}>
+          <Stack direction="row" alignItems="center" spacing={6.25}>
+            <MobileLanguageToggle isMainPath={isMainPath} />
+            <SignInButton isMobile={true} isMainPath={isMainPath} onClose={handleClose} />
+          </Stack>
+        </BottomActions>
+      </DrawerContent>
+    </StyledDrawer>
+  );
+};
+
+const StyledDrawer = styled(Drawer)<{ isMainPath?: boolean }>(({ theme, isMainPath = true }) => ({
+  "& .MuiDrawer-paper": {
+    width: "70vw",
+    background: isMainPath ? theme.palette.mobileNavigation.main.background : theme.palette.mobileNavigation.sub.background,
+    backdropFilter: isMainPath ? "blur(10px)" : "none",
+    WebkitBackdropFilter: isMainPath ? "blur(10px)" : "none",
+    color: isMainPath ? theme.palette.mobileNavigation.main.text : theme.palette.mobileNavigation.sub.text,
+    borderTopRightRadius: 15,
+    borderBottomRightRadius: 15,
+  },
+}));
+
+const DrawerContent = styled(Box)({
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+});
+
+const NavigationHeader = styled(Box)<{ isMainPath: boolean }>({
+  display: "flex",
+  alignItems: "center",
+  padding: "23px 23px 10px 23px",
+  position: "relative",
+  gap: 17,
+});
+
+const NavigationContent = styled(Box)({
+  flex: 1,
+  overflow: "auto",
+});
+
+const MenuContainer = styled(Stack)({
+  padding: "20px 0",
+  gap: "25px",
+});
+
+const MenuItem = styled(Box)<{ isMainPath?: boolean }>({
+  display: "flex",
+  alignItems: "center",
+  padding: "0 23px",
+  gap: 23,
+});
+
+const MenuLink = styled(Link)<{ isMainPath?: boolean }>(({ theme, isMainPath = true }) => ({
+  color: isMainPath ? theme.palette.mobileNavigation.main.text : theme.palette.mobileNavigation.sub.text,
+  textDecoration: "none",
+  fontSize: "20px",
+  fontWeight: 600,
+}));
+
+const MenuArrowButton = styled(IconButton)<{ isMainPath?: boolean }>(({ theme, isMainPath = true }) => ({
+  color: isMainPath ? theme.palette.mobileNavigation.main.text : theme.palette.mobileNavigation.sub.text,
+  padding: 8,
+}));
+
+const BackButton = styled(Button)<{ isMainPath?: boolean }>(({ theme, isMainPath = true }) => ({
+  display: "flex",
+  alignItems: "center",
+  color: isMainPath ? theme.palette.mobileNavigation.main.text : theme.palette.mobileNavigation.sub.text,
+  textTransform: "none",
+  padding: "0 15px 0 0",
+  minWidth: "auto",
+  minHeight: "auto",
+}));
+
+const MenuChip = styled(Chip)<{ isMainPath?: boolean }>(({ theme, isMainPath = true }) => ({
+  backgroundColor: isMainPath ? theme.palette.mobileNavigation.main.chip.background : theme.palette.mobileNavigation.sub.chip.background,
+  color: isMainPath ? theme.palette.mobileNavigation.main.text : theme.palette.mobileNavigation.sub.text,
+  height: 40,
+  borderRadius: 15,
+  padding: "10px 13px",
+  fontSize: "16px",
+  fontWeight: 600,
+
+  "& .MuiChip-label": {
+    padding: 0,
+  },
+
+  "&:hover": {
+    backgroundColor: isMainPath ? theme.palette.mobileNavigation.main.chip.hover : theme.palette.mobileNavigation.sub.chip.hover,
+  },
+}));
+
+const BottomActions = styled(Stack)<{ isMainPath: boolean }>({
+  padding: "20px 23px",
+  gap: 50,
+  alignItems: "center",
+});
+
+const HeaderTitle = styled(Typography)<{ isMainPath: boolean }>(({ theme, isMainPath }) => ({
+  color: isMainPath ? theme.palette.mobileHeader.main.text : theme.palette.mobileHeader.sub.text,
+  fontSize: 18,
+  fontWeight: 600,
+}));
+
+const LogoAndTextContainer = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+});
+
+const NavigationMenuSection = styled(Box)({
+  padding: "20px 23px",
+});
+
+const Depth2Header = styled(Box)<{ isMainPath: boolean }>({
+  display: "flex",
+  alignItems: "center",
+  height: "auto",
+  marginBottom: 10,
+});
+
+const Depth2Title = styled(Typography)<{ isMainPath: boolean }>(({ theme, isMainPath }) => ({
+  color: isMainPath ? theme.palette.mobileNavigation.main.text : theme.palette.mobileNavigation.sub.text,
+  fontSize: 20,
+  fontWeight: 800,
+}));
+
+const Depth2Divider = styled(Box)<{ isMainPath: boolean }>(({ theme, isMainPath }) => ({
+  height: 1,
+  backgroundColor: isMainPath ? theme.palette.mobileNavigation.main.divider : theme.palette.mobileNavigation.sub.divider,
+  marginBottom: 21,
+}));
+
+const Depth2MenuList = styled(Stack)({
+  gap: 15,
+});
+
+const Depth2MenuItem = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+});
+
+const Depth3MenuGrid = styled(Box)({
+  height: 260,
+  display: "flex",
+  flexDirection: "column",
+  flexWrap: "wrap",
+  alignContent: "flex-start",
+  gap: 15,
+  overflow: "hidden",
+});
diff --git a/apps/pyconkr/src/components/layout/Header/index.tsx b/apps/pyconkr/src/components/layout/Header/index.tsx
index 6219cf2..87dcfc1 100644
--- a/apps/pyconkr/src/components/layout/Header/index.tsx
+++ b/apps/pyconkr/src/components/layout/Header/index.tsx
@@ -1,6 +1,6 @@
 import * as Common from "@frontend/common";
 import { ArrowForwardIos } from "@mui/icons-material";
-import { Box, Button, CircularProgress, Divider, Stack, styled, SxProps, Theme, Typography } from "@mui/material";
+import { Box, Button, CircularProgress, Divider, Stack, styled, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { MUIStyledCommonProps } from "@mui/system";
 import * as React from "react";
 import { Link } from "react-router-dom";
@@ -11,6 +11,7 @@ import { useAppContext } from "../../../contexts/app_context";
 import { CartBadgeButton } from "../CartBadgeButton";
 import LanguageSelector from "../LanguageSelector";
 import { SignInButton } from "../SignInButton";
+import { MobileHeader } from "./Mobile/MobileHeader";
 
 type MenuType = BackendAPISchemas.NestedSiteMapSchema;
 type MenuOrUndefinedType = MenuType | undefined;
@@ -26,6 +27,8 @@ const BreadCrumbHeight: React.CSSProperties["height"] = "4.5rem";
 
 const Header: React.FC = () => {
   const { title, language, siteMapNode, currentSiteMapDepth, shouldShowTitleBanner } = useAppContext();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
   const [navState, setNavState] = React.useState<NavigationStateType>({});
 
   const resetDepths = () => setNavState({});
@@ -38,6 +41,10 @@ const Header: React.FC = () => {
 
   React.useEffect(resetDepths, [language]);
 
+  if (isMobile) {
+    return <MobileHeader />;
+  }
+
   let breadCrumbRoute = "";
   let breadCrumbArray = currentSiteMapDepth.slice(1, -1);
   if (R.isEmpty(breadCrumbArray)) breadCrumbArray = currentSiteMapDepth.slice(0, -1);
diff --git a/apps/pyconkr/src/components/layout/SignInButton/index.tsx b/apps/pyconkr/src/components/layout/SignInButton/index.tsx
index 112a0a3..490bc1f 100644
--- a/apps/pyconkr/src/components/layout/SignInButton/index.tsx
+++ b/apps/pyconkr/src/components/layout/SignInButton/index.tsx
@@ -1,5 +1,6 @@
 import * as Shop from "@frontend/shop";
-import { Button } from "@mui/material";
+import { Login, Logout } from "@mui/icons-material";
+import { Button, Stack } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { useNavigate } from "react-router-dom";
 
@@ -9,15 +10,62 @@ type InnerSignInButtonImplPropType = {
   loading?: boolean;
   signedIn?: boolean;
   onSignOut?: () => void;
+  isMobile?: boolean;
+  isMainPath?: boolean;
+  onClose?: () => void;
 };
 
-const InnerSignInButtonImpl: React.FC<InnerSignInButtonImplPropType> = ({ loading, signedIn, onSignOut }) => {
+const InnerSignInButtonImpl: React.FC<InnerSignInButtonImplPropType> = ({
+  loading,
+  signedIn,
+  onSignOut,
+  isMobile = false,
+  isMainPath = true,
+  onClose,
+}) => {
   const navigate = useNavigate();
   const { language } = useAppContext();
 
   const signInBtnStr = language === "ko" ? "로그인" : "Sign In";
   const signOutBtnStr = language === "ko" ? "로그아웃" : "Sign Out";
 
+  const handleClick = () => {
+    if (signedIn) {
+      onSignOut?.();
+    } else {
+      onClose?.();
+      navigate("/account/sign-in");
+    }
+  };
+
+  if (isMobile) {
+    return (
+      <Button
+        variant="text"
+        sx={{
+          color: isMainPath ? "white" : "rgba(18, 109, 127, 0.9)",
+          height: 29,
+          fontSize: 13,
+          fontWeight: 500,
+          textTransform: "none",
+          minWidth: "auto",
+          padding: "0 13px",
+
+          "&:hover": {
+            backgroundColor: isMainPath ? "rgba(255, 255, 255, 0.1)" : "rgba(18, 109, 127, 0.1)",
+          },
+        }}
+        loading={loading}
+        onClick={handleClick}
+      >
+        <Stack direction="row" alignItems="center" sx={{ gap: "3px" }}>
+          {signedIn ? <Logout fontSize="small" /> : <Login fontSize="small" />}
+          {signedIn ? signOutBtnStr : signInBtnStr}
+        </Stack>
+      </Button>
+    );
+  }
+
   return (
     <Button
       variant="text"
@@ -29,13 +77,29 @@ const InnerSignInButtonImpl: React.FC<InnerSignInButtonImplPropType> = ({ loadin
   );
 };
 
-export const SignInButton: React.FC = ErrorBoundary.with(
-  { fallback: <InnerSignInButtonImpl /> },
-  Suspense.with({ fallback: <InnerSignInButtonImpl loading /> }, () => {
-    const shopAPIClient = Shop.Hooks.useShopClient();
-    const signOutMutation = Shop.Hooks.useSignOutMutation(shopAPIClient);
-    const { data } = Shop.Hooks.useUserStatus(shopAPIClient);
+export const SignInButton: React.FC<{ isMobile?: boolean; isMainPath?: boolean; onClose?: () => void }> = ({
+  isMobile = false,
+  isMainPath = true,
+  onClose,
+}) => {
+  const SignInWithErrorBoundary = ErrorBoundary.with(
+    { fallback: <InnerSignInButtonImpl isMobile={isMobile} isMainPath={isMainPath} onClose={onClose} /> },
+    Suspense.with({ fallback: <InnerSignInButtonImpl loading isMobile={isMobile} isMainPath={isMainPath} onClose={onClose} /> }, () => {
+      const shopAPIClient = Shop.Hooks.useShopClient();
+      const signOutMutation = Shop.Hooks.useSignOutMutation(shopAPIClient);
+      const { data } = Shop.Hooks.useUserStatus(shopAPIClient);
 
-    return <InnerSignInButtonImpl signedIn={data !== null} onSignOut={signOutMutation.mutate} />;
-  })
-);
+      return (
+        <InnerSignInButtonImpl
+          signedIn={data !== null}
+          onSignOut={signOutMutation.mutate}
+          isMobile={isMobile}
+          isMainPath={isMainPath}
+          onClose={onClose}
+        />
+      );
+    })
+  );
+
+  return <SignInWithErrorBoundary />;
+};
diff --git a/apps/pyconkr/src/styles/globalStyles.ts b/apps/pyconkr/src/styles/globalStyles.ts
index f90c19e..d08c4f0 100644
--- a/apps/pyconkr/src/styles/globalStyles.ts
+++ b/apps/pyconkr/src/styles/globalStyles.ts
@@ -24,6 +24,59 @@ export const muiTheme = createTheme({
       dark: "#C66900",
       contrastText: "#FFFFFF",
     },
+    mobileHeader: {
+      main: {
+        background: "rgba(182, 216, 215, 0.1)",
+        text: "#FFFFFF",
+        activeLanguage: "#888888",
+      },
+      sub: {
+        background: "#B6D8D7",
+        text: "rgba(18, 109, 127, 0.6)",
+        activeLanguage: "#126D7F",
+      },
+    },
+    mobileNavigation: {
+      main: {
+        background:
+          "linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15))",
+        text: "#FFFFFF",
+        chip: {
+          background: "rgba(212, 212, 212, 0.5)",
+          hover: "rgba(212, 212, 212, 0.7)",
+        },
+        divider: "rgba(255, 255, 255, 0.3)",
+        languageToggle: {
+          background: "transparent",
+          active: {
+            background: "rgba(255, 255, 255, 0.7)",
+            hover: "rgba(255, 255, 255, 0.8)",
+          },
+          inactive: {
+            hover: "rgba(255, 255, 255, 0.1)",
+          },
+        },
+      },
+      sub: {
+        background: "#B6D8D7",
+        text: "rgba(18, 109, 127, 0.9)",
+        chip: {
+          background: "rgba(18, 109, 127, 0.2)",
+          hover: "rgba(18, 109, 127, 0.3)",
+        },
+        divider: "rgba(18, 109, 127, 0.3)",
+        languageToggle: {
+          background: "rgba(255, 255, 255, 0.1)",
+          active: {
+            background: "rgba(255, 255, 255, 0.9)",
+            hover: "rgba(255, 255, 255, 1)",
+          },
+          inactive: {
+            hover: "rgba(255, 255, 255, 0.3)",
+          },
+        },
+      },
+    },
     text: {
       primary: "#000000",
       secondary: "#666666",
diff --git a/types/emotion.d.ts b/types/emotion.d.ts
index e85c467..f1196ea 100644
--- a/types/emotion.d.ts
+++ b/types/emotion.d.ts
@@ -4,10 +4,114 @@ import { type Theme as MuiTheme } from "@mui/material/styles";
 declare module "@mui/material/styles" {
   interface Palette {
     highlight: PaletteColor;
+    mobileHeader: {
+      main: {
+        background: string;
+        text: string;
+        activeLanguage: string;
+      };
+      sub: {
+        background: string;
+        text: string;
+        activeLanguage: string;
+      };
+    };
+    mobileNavigation: {
+      main: {
+        background: string;
+        text: string;
+        chip: {
+          background: string;
+          hover: string;
+        };
+        divider: string;
+        languageToggle: {
+          background: string;
+          active: {
+            background: string;
+            hover: string;
+          };
+          inactive: {
+            hover: string;
+          };
+        };
+      };
+      sub: {
+        background: string;
+        text: string;
+        chip: {
+          background: string;
+          hover: string;
+        };
+        divider: string;
+        languageToggle: {
+          background: string;
+          active: {
+            background: string;
+            hover: string;
+          };
+          inactive: {
+            hover: string;
+          };
+        };
+      };
+    };
   }
 
   interface PaletteOptions {
     highlight: PaletteColor;
+    mobileHeader?: {
+      main: {
+        background: string;
+        text: string;
+        activeLanguage: string;
+      };
+      sub: {
+        background: string;
+        text: string;
+        activeLanguage: string;
+      };
+    };
+    mobileNavigation?: {
+      main: {
+        background: string;
+        text: string;
+        chip: {
+          background: string;
+          hover: string;
+        };
+        divider: string;
+        languageToggle: {
+          background: string;
+          active: {
+            background: string;
+            hover: string;
+          };
+          inactive: {
+            hover: string;
+          };
+        };
+      };
+      sub: {
+        background: string;
+        text: string;
+        chip: {
+          background: string;
+          hover: string;
+        };
+        divider: string;
+        languageToggle: {
+          background: string;
+          active: {
+            background: string;
+            hover: string;
+          };
+          inactive: {
+            hover: string;
+          };
+        };
+      };
+    };
   }
 
   interface PaletteColor {