diff --git a/.pnp.cjs b/.pnp.cjs
index 81c52445..c802238a 100755
--- a/.pnp.cjs
+++ b/.pnp.cjs
@@ -6418,11 +6418,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["debug", "virtual:5daecec5378cca9d2b655781dda98457b520644332776e02f43c02749432d960b0fe724013f680814901d9397550da22c63b2a93b9f47877762783265d253473#npm:4.3.4"],\
             ["@types/supports-color", null],\
             ["ms", "npm:2.1.2"],\
-            ["supports-color", null]\
+            ["supports-color", "npm:9.4.0"]\
           ],\
           "packagePeers": [\
-            "@types/supports-color",\
-            "supports-color"\
+            "@types/supports-color"\
           ],\
           "linkType": "HARD"\
         }]\
@@ -6749,11 +6748,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "packageDependencies": [\
             ["follow-redirects", "virtual:35a845e191d5a8a7376e256c81e9e855732385142c5dc9e26f0b8393c2fb4673b81fed201d5f2c5ab96fb727142683ac03329eab760f2c4870779d4bda6abe8f#npm:1.15.2"],\
             ["@types/debug", null],\
-            ["debug", null]\
+            ["debug", "virtual:5daecec5378cca9d2b655781dda98457b520644332776e02f43c02749432d960b0fe724013f680814901d9397550da22c63b2a93b9f47877762783265d253473#npm:4.3.4"]\
           ],\
           "packagePeers": [\
-            "@types/debug",\
-            "debug"\
+            "@types/debug"\
           ],\
           "linkType": "HARD"\
         }]\
@@ -9002,6 +9000,13 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["has-flag", "npm:4.0.0"]\
           ],\
           "linkType": "HARD"\
+        }],\
+        ["npm:9.4.0", {\
+          "packageLocation": "./.yarn/cache/supports-color-npm-9.4.0-a415f39758-cb8ff8daea.zip/node_modules/supports-color/",\
+          "packageDependencies": [\
+            ["supports-color", "npm:9.4.0"]\
+          ],\
+          "linkType": "HARD"\
         }]\
       ]],\
       ["supports-preserve-symlinks-flag", [\
diff --git a/.yarnrc.yml b/.yarnrc.yml
index c09535e6..8146152d 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -3,6 +3,12 @@ plugins:
     spec: "@yarnpkg/plugin-typescript"
 
 packageExtensions:
+  follow-redirects@*:
+    dependencies:
+      debug: "*"
+  debug@*:
+    dependencies:
+      supports-color: "*"
   swiper@*:
     dependencies:
       "@types/react": "^17"
diff --git a/apps/jurumarble/src/app/search/components/DrinkItem.tsx b/apps/jurumarble/src/app/search/components/DrinkItem.tsx
index 90c78051..c3c85d2d 100644
--- a/apps/jurumarble/src/app/search/components/DrinkItem.tsx
+++ b/apps/jurumarble/src/app/search/components/DrinkItem.tsx
@@ -6,6 +6,7 @@ import useDrinkStampService from "services/useDrinkStampService";
 import SvgStamp from "src/assets/icons/components/IcStamp";
 import { DrinkInfo } from "src/types/drink";
 import styled, { css, useTheme } from "styled-components";
+import { RatioFrame } from "@monorepo/ui";
 
 interface Props {
   drinkInfo: DrinkInfo;
@@ -26,7 +27,16 @@ function DrinkItem({ drinkInfo, onClickDrinkItem, selectedDrinkList }: Props) {
   return (
     <Container onClick={onClickDrinkItem} name={name} selected={selectedDrinkList?.includes(name)}>
       <ImageWrapper>
-        <Image alt={name} src={image} fill style={{ borderRadius: "10px" }} />
+        <RatioFrame ratio="square">
+          <img
+            loading="lazy"
+            alt={name}
+            src={image}
+            width={1181}
+            height={1181}
+            style={{ borderRadius: "10px" }}
+          />
+        </RatioFrame>
       </ImageWrapper>
       <InfoContainer>
         <NameStampContainer>
diff --git a/packages/ui/components/index.ts b/packages/ui/components/index.ts
index f6ee5998..f07b7ce6 100644
--- a/packages/ui/components/index.ts
+++ b/packages/ui/components/index.ts
@@ -8,3 +8,4 @@ export { default as FloatComponentTemplate } from "./modal/FloatComponentTemplat
 export { default as DivideLine } from "./divide/DivideLine";
 export * from "./selectBox";
 export * from "./swiper";
+export * from "./ratioframe";
diff --git a/packages/ui/components/ratioframe/RatioFrame.tsx b/packages/ui/components/ratioframe/RatioFrame.tsx
new file mode 100644
index 00000000..9d22706f
--- /dev/null
+++ b/packages/ui/components/ratioframe/RatioFrame.tsx
@@ -0,0 +1,59 @@
+import styled, { css, type DefaultTheme } from "styled-components";
+
+const baseAspectRatioCss = `
+  position: relative;
+  &:before {
+    content: '';
+    display: block;
+  }
+  > :first-child {
+    position: absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+const aspectRatios = {
+  auto: `
+    ${baseAspectRatioCss}
+  `,
+  square: `
+    ${baseAspectRatioCss}
+    :before {
+      padding-bottom: calc((100 / 100) * 100%);
+    } ;
+  `,
+} as const;
+
+export interface RatioFrameProps {
+  ratio: keyof typeof aspectRatios;
+  imgAuto?: boolean;
+  imgCover?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const RatioFrame = ({ children, ratio, className, ...rest }: RatioFrameProps) => (
+  <Container ratio={ratio} className={className} {...rest}>
+    {children}
+  </Container>
+);
+
+type RatioFrameStyleProps = Pick<RatioFrameProps, "ratio" | "imgAuto" | "imgCover">;
+
+const Container = styled.div<RatioFrameStyleProps>`
+  ${({ ratio, imgAuto, imgCover }) => css`
+    ${ratio && aspectRatios[ratio]}
+    img {
+      height: 100%;
+      ${{
+        ...(imgAuto ? { height: "auto" } : {}),
+        ...(imgCover ? { objectFit: "cover" } : {}),
+      }}
+    }
+  `}
+`;
diff --git a/packages/ui/components/ratioframe/index.ts b/packages/ui/components/ratioframe/index.ts
new file mode 100644
index 00000000..f10d148d
--- /dev/null
+++ b/packages/ui/components/ratioframe/index.ts
@@ -0,0 +1 @@
+export * from "./RatioFrame";
diff --git a/yarn.lock b/yarn.lock
index a7f4b3a6..67042186 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3104,7 +3104,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.3":
+"debug@npm:*, debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.3":
   version: 4.3.4
   resolution: "debug@npm:4.3.4"
   dependencies:
@@ -5157,6 +5157,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"supports-color@npm:*":
+  version: 9.4.0
+  resolution: "supports-color@npm:9.4.0"
+  checksum: cb8ff8daeaf1db642156f69a9aa545b6c01dd9c4def4f90a49f46cbf24be0c245d392fcf37acd119cd1819b99dad2cc9b7e3260813f64bcfd7f5b18b5a1eefb8
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"