diff --git a/src/assets/icons/BackIcon.js b/src/assets/icons/BackIcon.js
new file mode 100644
index 0000000..4eda730
--- /dev/null
+++ b/src/assets/icons/BackIcon.js
@@ -0,0 +1,26 @@
+const BackIcon = ({ color = "black" }) => {
+    return (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M12 4L4 12L12 20"
+                stroke={color}
+                stroke-width="1.4"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M4 12H21"
+                stroke={color}
+                stroke-width="1.4"
+                stroke-linejoin="round"
+            />
+        </svg>
+    );
+};
+
+export default BackIcon;
diff --git a/src/assets/icons/CartIcon.js b/src/assets/icons/CartIcon.js
new file mode 100644
index 0000000..67dcccc
--- /dev/null
+++ b/src/assets/icons/CartIcon.js
@@ -0,0 +1,27 @@
+const CartIcon = ({ color = "black" }) => {
+    return (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M9 12V6C9 4.34315 10.3431 3 12 3V3C13.6569 3 15 4.34315 15 6V12"
+                stroke={color}
+                stroke-width="1.4"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M4.80224 20.3L6.38857 8.7H17.6114L19.1978 20.3H4.80224Z"
+                stroke={color}
+                stroke-width="1.4"
+            />
+            <rect x="8" y="11" width="2" height="2" fill={color} />
+            <rect x="14" y="11" width="2" height="2" fill={color} />
+        </svg>
+    );
+};
+
+export default CartIcon;
diff --git a/src/assets/icons/HomeIcon.js b/src/assets/icons/HomeIcon.js
new file mode 100644
index 0000000..cd42954
--- /dev/null
+++ b/src/assets/icons/HomeIcon.js
@@ -0,0 +1,27 @@
+const HomeIcon = ({ color = "black" }) => {
+    return (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M2 12L12 3L22 12"
+                stroke={color}
+                stroke-width="1.4"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M5 9V20H19V9"
+                stroke={color}
+                stroke-width="1.4"
+                stroke-linejoin="round"
+            />
+        </svg>
+    );
+};
+
+export default HomeIcon;
diff --git a/src/components/Store/StoreInfo.js b/src/components/Store/StoreInfo.js
index fe14377..5666c51 100644
--- a/src/components/Store/StoreInfo.js
+++ b/src/components/Store/StoreInfo.js
@@ -3,250 +3,282 @@ import styled from "styled-components";
 import { ReactComponent as CallIcon } from "assets/images/call.svg";
 import { ReactComponent as AddressIcon } from "assets/images/address.svg";
 import { ReactComponent as TimeIcon } from "assets/images/time.svg";
-import { ReactComponent as BackIcon } from "assets/images/back.svg";
-import { ReactComponent as CartIcon } from "assets/images/marketbag.svg";
-import { ReactComponent as HomeIcon } from "assets/images/newhome.svg";
+import HomeIcon from "assets/icons/HomeIcon";
+import BackIcon from "assets/icons/BackIcon";
+import CartIcon from "assets/icons/CartIcon";
 import { useNavigate } from "react-router-dom";
 import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 
 const StoreInfo = ({
-  name,
-  category,
-  call,
-  address,
-  openHours,
-  closeHours,
-  ratingAvg,
-  storeImage,
+    name,
+    category,
+    call,
+    address,
+    openHours,
+    closeHours,
+    ratingAvg,
+    storeImage,
 }) => {
-  const navigate = useNavigate();
-  const images = [storeImage];
-  const [currentSlide, setCurrentSlide] = useState(0);
-
-  const settings = {
-    dots: false,
-    infinite: images.length > 1,
-    speed: 500,
-    slidesToShow: 1,
-    slidesToScroll: 1,
-    afterChange: (index) => setCurrentSlide(index),
-  };
-
-  // 별과 빈 별의 갯수 계산
-  const ratingToPercent = (ratingAvg) => {
-    const score = ratingAvg * 20;
-    return score + 1.5;
-  };
-
-  return (
-    <Container>
-      <ImageContainer>
-        <Slider {...settings}>
-          {images.map((image, index) => (
-            <HeaderImage key={index} src={image} alt={`Store-${index}`} />
-          ))}
-        </Slider>
-        <BackButton onClick={() => navigate(-1)}>
-          <BackIcon />
-        </BackButton>
-        <HomeButton onClick={() => navigate("/")}>
-          <HomeIcon />
-        </HomeButton>
-        <CartButton onClick={() => navigate("/cart")}>
-          <CartIcon />
-        </CartButton>
-        {images.length > 1 && (
-          <ImageCounter>
-            {currentSlide + 1} / {images.length}
-          </ImageCounter>
-        )}
-      </ImageContainer>
-      <InfoContainer>
-        <SubTitle>{category}</SubTitle>
-        <Title>{name}</Title>
-        <Rating>
-          <StarRatings>
-            <StarRatingsFill
-              style={{ width: `${ratingToPercent(ratingAvg)}%` }}
-            >
-              <span>★</span>
-              <span>★</span>
-              <span>★</span>
-              <span>★</span>
-              <span>★</span>
-            </StarRatingsFill>
-            <StarRatingsBase>
-              <span>★</span>
-              <span>★</span>
-              <span>★</span>
-              <span>★</span>
-              <span>★</span>
-            </StarRatingsBase>
-          </StarRatings>
-          <RatingValue>{ratingAvg.toFixed(1)}</RatingValue>
-        </Rating>
-        <Info>
-          <CallIcon />
-          <InfoTitle>전화번호</InfoTitle>
-          <InfoDetail>{call}</InfoDetail>
-        </Info>
-        <Info>
-          <AddressIcon />
-          <InfoTitle>주소</InfoTitle>
-          <InfoDetail>{address}</InfoDetail>
-        </Info>
-        <Info>
-          <TimeIcon />
-          <InfoTitle>영업시간</InfoTitle>
-          <InfoDetail>{`${openHours} ~ ${closeHours}`}</InfoDetail>
-        </Info>
-      </InfoContainer>
-    </Container>
-  );
+    const navigate = useNavigate();
+    const images = [storeImage];
+    const [currentSlide, setCurrentSlide] = useState(0);
+
+    const settings = {
+        dots: false,
+        infinite: images.length > 1,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        afterChange: (index) => setCurrentSlide(index),
+    };
+
+    // 별과 빈 별의 갯수 계산
+    const ratingToPercent = (ratingAvg) => {
+        const score = ratingAvg * 20;
+        return score + 1.5;
+    };
+
+    return (
+        <Container>
+            <ImageContainer>
+                <Slider {...settings}>
+                    {images.map((image, index) => (
+                        <HeaderImage
+                            key={index}
+                            src={image}
+                            alt={`Store-${index}`}
+                        />
+                    ))}
+                </Slider>
+                <div>
+                    <HeaderBack3 />
+                    <BackButton onClick={() => navigate(-1)}>
+                        <BackIcon color="white" />
+                    </BackButton>
+                    <HeaderBack1 />
+                    <HomeButton onClick={() => navigate("/")}>
+                        <HomeIcon color="white" />
+                    </HomeButton>
+                    <HeaderBack2 />
+                    <CartButton onClick={() => navigate("/cart")}>
+                        <CartIcon color="white" />
+                    </CartButton>
+                </div>
+                {images.length > 1 && (
+                    <ImageCounter>
+                        {currentSlide + 1} / {images.length}
+                    </ImageCounter>
+                )}
+            </ImageContainer>
+            <InfoContainer>
+                <SubTitle>{category}</SubTitle>
+                <Title>{name}</Title>
+                <Rating>
+                    <StarRatings>
+                        <StarRatingsFill
+                            style={{ width: `${ratingToPercent(ratingAvg)}%` }}
+                        >
+                            <span>★</span>
+                            <span>★</span>
+                            <span>★</span>
+                            <span>★</span>
+                            <span>★</span>
+                        </StarRatingsFill>
+                        <StarRatingsBase>
+                            <span>★</span>
+                            <span>★</span>
+                            <span>★</span>
+                            <span>★</span>
+                            <span>★</span>
+                        </StarRatingsBase>
+                    </StarRatings>
+                    <RatingValue>{ratingAvg.toFixed(1)}</RatingValue>
+                </Rating>
+                <Info>
+                    <CallIcon />
+                    <InfoTitle>전화번호</InfoTitle>
+                    <InfoDetail>{call}</InfoDetail>
+                </Info>
+                <Info>
+                    <AddressIcon />
+                    <InfoTitle>주소</InfoTitle>
+                    <InfoDetail>{address}</InfoDetail>
+                </Info>
+                <Info>
+                    <TimeIcon />
+                    <InfoTitle>영업시간</InfoTitle>
+                    <InfoDetail>{`${openHours} ~ ${closeHours}`}</InfoDetail>
+                </Info>
+            </InfoContainer>
+        </Container>
+    );
 };
 
+const HeaderBack = styled.div`
+    position: absolute;
+    opacity: 0.3;
+    background-color: black;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+`;
+
+const HeaderBack3 = styled(HeaderBack)`
+    top: 16px;
+    left: 16px;
+`;
+
+const HeaderBack1 = styled(HeaderBack)`
+    top: 16px;
+    right: 64px;
+`;
+const HeaderBack2 = styled(HeaderBack)`
+    top: 16px;
+    right: 20px;
+`;
+
 const Container = styled.div`
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  box-shadow: none;
-  margin-bottom: 20px;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    background-color: white;
+    box-shadow: none;
+    margin-bottom: 20px;
 `;
 
 const ImageContainer = styled.div`
-  position: relative;
-  width: 100%;
-  padding: 0;
-  margin: 0;
+    position: relative;
+    width: 100%;
+    padding: 0;
+    margin: 0;
 `;
 
 const HeaderImage = styled.img`
-  width: 100%;
-  height: auto;
-  display: block;
-  margin: 0;
-  height: 272px;
+    width: 100%;
+    height: auto;
+    display: block;
+    margin: 0;
+    height: 272px;
 `;
 
 const BackButton = styled.div`
-  position: absolute;
-  top: 16px;
-  left: 16px;
-  cursor: pointer;
-  padding: 8px;
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    cursor: pointer;
+    padding: 8px;
 `;
 
 const HomeButton = styled.div`
-  position: absolute;
-  top: 16px;
-  right: calc(20px + 32px + 12px);
-  cursor: pointer;
-  padding: 8px;
+    position: absolute;
+    top: 16px;
+    right: calc(20px + 32px + 12px);
+    cursor: pointer;
+    padding: 8px;
 `;
 
 const CartButton = styled.div`
-  position: absolute;
-  top: 16px;
-  right: 20px;
-  cursor: pointer;
-  padding: 8px;
+    position: absolute;
+    top: 16px;
+    right: 20px;
+    cursor: pointer;
+    padding: 8px;
 `;
 
 const ImageCounter = styled.div`
-  position: absolute;
-  bottom: 16px;
-  right: 24px;
-  background: rgba(0, 0, 0, 0.5);
-  color: white;
-  padding: 4px 8px;
-  border-radius: 31px;
-  font-size: 12px;
-  width: 52px;
-  height: 26px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: ${({ theme }) => theme.fontWeight.regular};
+    position: absolute;
+    bottom: 16px;
+    right: 24px;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    padding: 4px 8px;
+    border-radius: 31px;
+    font-size: 12px;
+    width: 52px;
+    height: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: ${({ theme }) => theme.fontWeight.regular};
 `;
 
 const InfoContainer = styled.div`
-  margin: 20px 20px 0 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+    margin: 20px 20px 0 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
 `;
 
 const Info = styled.div`
-  display: flex;
-  gap: 4px; /* 4px 간격 */
-  align-items: center;
+    display: flex;
+    gap: 4px; /* 4px 간격 */
+    align-items: center;
 `;
 
 const InfoTitle = styled.div`
-  font-size: 14px;
-  font-weight: ${({ theme }) => theme.fontWeight.medium};
-  color: ${({ theme }) => theme.color.gray800};
+    font-size: 14px;
+    font-weight: ${({ theme }) => theme.fontWeight.medium};
+    color: ${({ theme }) => theme.color.gray800};
 `;
 
 const InfoDetail = styled.div`
-  font-size: 14px;
-  font-weight: ${({ theme }) => theme.fontWeight.regular};
-  color: ${({ theme }) => theme.color.gray500};
+    font-size: 14px;
+    font-weight: ${({ theme }) => theme.fontWeight.regular};
+    color: ${({ theme }) => theme.color.gray500};
 `;
 
 const SubTitle = styled.h2`
-  font-size: 14px;
-  color: ${({ theme }) => theme.color.gray600};
-  font-weight: ${({ theme }) => theme.fontWeight.medium};
+    font-size: 14px;
+    color: ${({ theme }) => theme.color.gray600};
+    font-weight: ${({ theme }) => theme.fontWeight.medium};
 `;
 
 const Title = styled.h1`
-  font-size: 20px;
-  margin-top: 8px;
-  margin-bottom: 12px;
-  font-weight: ${({ theme }) => theme.fontWeight.bold};
-  color: ${({ theme }) => theme.color.gray900};
+    font-size: 20px;
+    margin-top: 8px;
+    margin-bottom: 12px;
+    font-weight: ${({ theme }) => theme.fontWeight.bold};
+    color: ${({ theme }) => theme.color.gray900};
 `;
 
 const Rating = styled.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
 `;
 
 const StarRatings = styled.div`
-  position: relative;
-  unicode-bidi: bidi-override;
-  width: max-content;
-  color: gold; /* 별의 색상 지정 */
-  font-size: 14px; /* 별의 크기 조정 */
+    position: relative;
+    unicode-bidi: bidi-override;
+    width: max-content;
+    color: gold; /* 별의 색상 지정 */
+    font-size: 14px; /* 별의 크기 조정 */
 `;
 
 const StarRatingsFill = styled.div`
-  color: #fff58c;
-  position: absolute;
-  z-index: 1;
-  display: flex;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-  -webkit-text-fill-color: gold;
+    color: #fff58c;
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    -webkit-text-fill-color: gold;
 `;
 
 const StarRatingsBase = styled.div`
-  color: #cccccc;
-  z-index: 0;
-  display: flex;
+    color: #cccccc;
+    z-index: 0;
+    display: flex;
 `;
 
 const RatingValue = styled.span`
-  color: ${({ theme }) => theme.color.gray900};
-  font-weight: ${({ theme }) => theme.fontWeight.semiBold};
-  font-size: 14px;
-  margin-left: 4px;
+    color: ${({ theme }) => theme.color.gray900};
+    font-weight: ${({ theme }) => theme.fontWeight.semiBold};
+    font-size: 14px;
+    margin-left: 4px;
 `;
 
 export default StoreInfo;
diff --git a/src/pages/QrPage.js b/src/pages/QrPage.js
index cd0606a..450b59e 100644
--- a/src/pages/QrPage.js
+++ b/src/pages/QrPage.js
@@ -132,9 +132,13 @@ const Container = styled.div`
 `;
 
 const Camera = styled.video`
+    width: 480px;
+    height: 100dvh;
     object-fit: cover;
-    width: 100%;
-    height: 100%;
+    position: absolute;
+    @media (max-width: 480px) {
+        width: 100vw;
+    }
 `;
 
 const Hole = styled.div`