diff --git a/packages/common/components/src/ui/footer/index.tsx b/packages/common/components/src/ui/footer/index.tsx
index 747cb26c3..029b25910 100644
--- a/packages/common/components/src/ui/footer/index.tsx
+++ b/packages/common/components/src/ui/footer/index.tsx
@@ -77,31 +77,32 @@ export function Footer() {
   const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));
 
   return (
-         <footer className="flex w-full shrink-0 items-start border-t border-solid border-border bg-background px-6 pt-4 pb-1 text-foreground">
-      <div className="w-[55%]">
-        <h6 className="mb-4 text-2xl font-bold">{siteInfo?.siteNm ?? ""}</h6>
-        <p className="my-1 text-xl opacity-60">{siteInfo?.siteAddr ?? ""}</p>
-        <p className="my-1 text-xl opacity-60">
+    <footer className="flex flex-col sm:flex-row w-full shrink-0 items-start border-t border-solid border-border bg-background px-3 sm:px-6 pt-4 pb-1 text-foreground">
+      <div className="w-full sm:w-[55%] mb-4 sm:mb-0">
+        <h6 className="mb-2 sm:mb-4 text-lg sm:text-xl md:text-2xl font-bold">{siteInfo?.siteNm ?? ""}</h6>
+        <p className="my-1 text-sm sm:text-base md:text-xl opacity-60">{siteInfo?.siteAddr ?? ""}</p>
+        <p className="my-1 text-sm sm:text-base md:text-xl opacity-60">
           전화: {siteInfo?.telNo ?? ""} / 팩스: {siteInfo?.faxNumber ?? ""}
         </p>
-        <p className="my-1 text-xl opacity-60">{siteInfo?.lwndCn ?? ""}</p>
+        <p className="my-1 text-sm sm:text-base md:text-xl opacity-60">{siteInfo?.lwndCn ?? ""}</p>
       </div>
-      <div className="flex w-[45%] flex-col">
-        <div className="flex justify-end gap-4">
-          <span className="text-xl">개인정보처리방침</span>
-          <span className="text-xl">이용약관</span>
-          <span className="text-xl">사이트맵</span>
-          <span className="text-xl">고객센터</span>
+      <div className="flex w-full sm:w-[45%] flex-col">
+        <div className="flex flex-wrap justify-start sm:justify-end gap-2 sm:gap-4 mb-4 sm:mb-0">
+          <span className="text-sm sm:text-base md:text-xl">개인정보처리방침</span>
+          <span className="text-sm sm:text-base md:text-xl">이용약관</span>
+          <span className="text-sm sm:text-base md:text-xl">사이트맵</span>
+          <span className="text-sm sm:text-base md:text-xl">고객센터</span>
         </div>
+        <div className="hidden sm:block">
           <Carousel
-           plugins={[plugin.current]}
-           opts={{ loop: true }}
-           className="relative my-8 h-24"
-         >
-           <CarouselContent>
-               {mainBanners && mainBanners.length > 0 ? (
+            plugins={[plugin.current]}
+            opts={{ loop: true }}
+            className="relative my-4 sm:my-8 h-20 sm:h-24"
+          >
+            <CarouselContent>
+              {mainBanners && mainBanners.length > 0 ? (
                 mainBanners.map((banner) => (
-                  <CarouselItem key={`banner-${banner.bnrSn}`} className="basis-1/3">
+                  <CarouselItem key={`banner-${banner.bnrSn}`} className="basis-1/2 sm:basis-1/3">
                     <BannerImage 
                       atflCd={banner.atflCd} 
                       bnrSn={banner.bnrSn} 
@@ -110,16 +111,17 @@ export function Footer() {
                   </CarouselItem>
                 ))
               ) : (
-               <CarouselItem className="basis-1/3">
-                 <div className="relative flex h-24 w-full items-center justify-center bg-accent">
-                   <div className="text-sm text-muted-foreground">배너가 없습니다</div>
-                 </div>
-               </CarouselItem>
-             )}
-           </CarouselContent>
-           <CarouselPrevious className="absolute left-2 top-1/2 !bg-[rgba(255,255,255,0.8)] text-accent-foreground z-10" />
-           <CarouselNext className="absolute right-2 top-1/2 !bg-[rgba(255,255,255,0.8)] text-accent-foreground z-10" />
-         </Carousel>
+                <CarouselItem className="basis-1/2 sm:basis-1/3">
+                  <div className="relative flex h-20 sm:h-24 w-full items-center justify-center bg-accent">
+                    <div className="text-sm text-muted-foreground">배너가 없습니다</div>
+                  </div>
+                </CarouselItem>
+              )}
+            </CarouselContent>
+            <CarouselPrevious className="absolute left-2 top-1/2 !bg-[rgba(255,255,255,0.8)] text-accent-foreground z-10" />
+            <CarouselNext className="absolute right-2 top-1/2 !bg-[rgba(255,255,255,0.8)] text-accent-foreground z-10" />
+          </Carousel>
+        </div>
       </div>
     </footer>
   );
diff --git a/packages/common/components/src/ui/header/index.tsx b/packages/common/components/src/ui/header/index.tsx
index 5408cbc4e..97ed4c151 100644
--- a/packages/common/components/src/ui/header/index.tsx
+++ b/packages/common/components/src/ui/header/index.tsx
@@ -147,16 +147,16 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
   }, []);
 
   return (
-    <header className="sticky top-0 z-30 box-border flex flex-col sm:flex-row h-auto sm:h-[6rem] w-full items-center justify-between border-b border-solid border-border bg-background">
+    <header className="sticky top-0 z-30 box-border flex flex-col sm:flex-row h-[6rem] w-full items-center justify-between border-b border-solid border-border bg-background">
       <div className="flex items-center px-2 sm:px-4 md:px-6 w-full sm:w-auto justify-between sm:justify-start">
         <div className="flex items-center gap-2 sm:gap-4">
-          <SidebarTrigger className="size-8 sm:size-10 md:size-12 !bg-transparent p-2 hover:!bg-accent [&>svg]:!size-full [&>svg]:text-foreground" />
-          <h1 className="flex flex-col items-center gap-1 sm:gap-2">
+          <SidebarTrigger className="size-12 !bg-transparent p-2 hover:!bg-accent [&>svg]:!size-full [&>svg]:text-foreground" />
+          <h1 className="flex flex-col items-center gap-2">
             {mounted ? (
               <img 
                 ref={logoRef}
                 src={getLogoImage()} 
-                className="h-[2rem] sm:h-[2.5rem] md:h-[3rem]" 
+                className="h-[3rem]" 
                 alt="logo"
                 onLoad={() => {
                   if (logoRef.current) {
@@ -165,10 +165,10 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
                 }}
               />
             ) : (
-              <Skeleton className="h-[2rem] sm:h-[2.5rem] md:h-[3rem] w-[10rem] sm:w-[12rem] md:w-[15rem]" />
+              <Skeleton className="h-[3rem] w-[15rem]" />
             )}
             <span 
-              className="text-xs sm:text-sm md:text-[1.2rem] font-semibold text-foreground"
+              className="text-[1.2rem] font-semibold text-foreground"
               style={{
                 letterSpacing: logoWidth > 0 ? `${(logoWidth - 120) / (siteInfo?.siteNm?.length || 1)}px` : '0.05em'
               }}
@@ -183,16 +183,16 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
           {mounted && (
             <Button
               onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-              className="m-0 flex h-[2.5rem] items-center !bg-background px-2 py-0 text-label"
+              className="m-0 flex h-[3rem] items-center !bg-background px-3 py-0 text-label"
             >
-              <i className={`diveicon ${isMobileMenuOpen ? 'di-close' : 'di-menu'} static text-xl`} />
+              <i className={`diveicon ${isMobileMenuOpen ? 'di-menu-close-fill' : 'di-menu-open-fill'} static text-4xl`} />
             </Button>
           )}
           {mounted && isLoggedIn && (
             <Popover>
               <PopoverTrigger asChild>
-                <Button className="group m-0 flex h-[2.5rem] items-center !bg-background px-2 py-0 text-label">
-                  <i className="diveicon di-account-circle static translate-y-0.5 pr-1 text-xl" />
+                <Button className="group m-0 flex h-[3rem] items-center !bg-background px-2 py-0 text-label">
+                  <i className="diveicon di-account-circle static translate-y-0.5 pr-2 text-3xl" />
                   <span className="text-xs hidden xs:inline">{userInfo?.userName}</span>
                   <i className="diveicon di-chevron-down static p-0 transition-transform group-data-[state=open]:rotate-180" />
                 </Button>
@@ -223,7 +223,7 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
                 <a
                   key={site.siteId}
                   href={site.dmnAddr}
-                  className="text-base font-medium text-foreground hover:text-primary transition-colors w-full text-center py-2"
+                  className="text-xl font-medium text-foreground hover:text-primary transition-colors w-full text-center py-2"
                   target="_blank"
                   rel="noopener noreferrer"
                   onClick={() => setIsMobileMenuOpen(false)}