diff --git a/src/components/home/WeeklyPopularItem.tsx b/src/components/home/WeeklyPopularItem.tsx
index 3cfe090..3933cc3 100644
--- a/src/components/home/WeeklyPopularItem.tsx
+++ b/src/components/home/WeeklyPopularItem.tsx
@@ -7,22 +7,24 @@ const WeeklyPopularItem = ({
   data,
   idx
 }: {
-  data: WeeklyPopularTypes;
+  data: WeeklyPopularTypes | null;
   idx: number;
 }) => {
-  const icon = data && `/png/${data?.brand}.png`;
+  const icon = `/png/${data?.brand}.png`;
 
   return (
-    <Container className={Align}>
-      <span>{idx + 1}</span>
-      <BrandInfo className={Align}>
-        <BrandIcon
-          src={icon}
-          alt={data?.brand}
-        />
-        <span>{convertBrandName(data?.brand)}</span>
-      </BrandInfo>
-    </Container>
+    data && (
+      <Container className={Align}>
+        <span>{idx + 1}</span>
+        <BrandInfo className={Align}>
+          <BrandIcon
+            src={data && icon}
+            alt={data?.brand}
+          />
+          <span>{convertBrandName(data?.brand)}</span>
+        </BrandInfo>
+      </Container>
+    )
   );
 };
 
@@ -32,14 +34,15 @@ const Container = styled.div`
   padding: 8px 20px;
   background: #fff;
 `;
+
 const BrandInfo = styled.div`
   margin-left: 20px;
 `;
+
 const BrandIcon = styled.img`
   width: 38px;
   height: 38px;
   border-radius: 50%;
-  background-color: darkkhaki;
   margin-right: 12px;
 `;