diff --git a/src/components/Card/Card.styled.tsx b/src/components/Card/Card.styled.tsx
index 876574a..73963cf 100644
--- a/src/components/Card/Card.styled.tsx
+++ b/src/components/Card/Card.styled.tsx
@@ -29,7 +29,7 @@ const typeCss = {
       height: 50vw;
     }
     ${media.desktop} {
-      height: rem(200px);
+      height: ${pxToRem(200)};
       @media (max-width: 1547px) {
         height: 20vw;
       }
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 1c366fe..2eee2f5 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -29,12 +29,7 @@ export const Card = ({
         <CardContainer $type={type} $background={background}>
           <figure>
             <CardFigureImgContainer $type={type}>
-              <Image
-                src={'https://spoonacular.com/recipeImages/Chopped-Kale-Salad-with-Pomegranate---Avocado-584495.jpg'}
-                title={title}
-                layout="fill"
-                priority
-              />
+              <Image src={imgSrc} title={title} layout="fill" priority />
             </CardFigureImgContainer>
             <CardFigcaption $headingPosition={headingPosition}>{title}</CardFigcaption>
           </figure>
diff --git a/src/components/HotRecipes/HotRecipes.styled.tsx b/src/components/HotRecipes/HotRecipes.styled.tsx
index 27f9b14..2d6292a 100644
--- a/src/components/HotRecipes/HotRecipes.styled.tsx
+++ b/src/components/HotRecipes/HotRecipes.styled.tsx
@@ -43,13 +43,13 @@ export const HotRecipesCardItem = styled.li`
   text-align: center;
   width: ${pxToRem(290)};
 
-  @media (max-width: 1547px) {
-    width: 50%;
+  @media (max-width: 1100px) {
+    width: 100%;
     text-align: center;
   }
 
-  @media (max-width: 1100px) {
-    width: 100%;
+  @media (max-width: 2500px) {
+    width: 50%;
     text-align: center;
   }
 `;
diff --git a/src/components/HotRecipes/HotRecipes.tsx b/src/components/HotRecipes/HotRecipes.tsx
index e95e0a7..6d18c08 100644
--- a/src/components/HotRecipes/HotRecipes.tsx
+++ b/src/components/HotRecipes/HotRecipes.tsx
@@ -10,6 +10,7 @@ export const HotRecipes = () => {
     if (loading) {
       return <SkeletonCard type="square" background="none" hasSummary={false} headingPosition="bottomCenter" />;
     }
+
     return (
       <Card
         id={recipeId}
@@ -27,8 +28,8 @@ export const HotRecipes = () => {
     <HotRecipesSection>
       <HotRecipesHeader as="h2">Hot Recipes</HotRecipesHeader>
       <HotRecipesCardList>
-        {hotRecipes.map((recipe, idx) => {
-          return <HotRecipesCardItem key={idx}>{renderCards(recipe)}</HotRecipesCardItem>;
+        {hotRecipes.map((recipe) => {
+          return <HotRecipesCardItem key={recipe.title}>{renderCards(recipe)}</HotRecipesCardItem>;
         })}
       </HotRecipesCardList>
     </HotRecipesSection>
diff --git a/src/hooks/useHotRecipes.ts b/src/hooks/useHotRecipes.ts
index 7e1d9c8..cce91b6 100644
--- a/src/hooks/useHotRecipes.ts
+++ b/src/hooks/useHotRecipes.ts
@@ -1,18 +1,18 @@
+import { getHotRecipes } from 'api/customApi';
 import { useEffect, useState } from 'react';
 
 export const useHotRecipes = () => {
   const [hotRecipes, setHotRecipes] = useState([]);
   const [loading, setLoading] = useState(true);
 
-  // 이 부분 custom API 완료후 적용!
-  //   useEffect(() => {
-  //     (async () => {
-  //       setHotRecipes(await getHotRecipes());
-  //     })();
-  //     setTimeout(() => {
-  //       setLoading(false);
-  //     }, 1200);
-  //   }, []);
+  useEffect(() => {
+    (async () => {
+      setHotRecipes(await getHotRecipes());
+    })();
+    setTimeout(() => {
+      setLoading(false);
+    }, 1200);
+  }, []);
 
   return { hotRecipes, loading };
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 0ba09c7..3539493 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,7 +1,28 @@
 import type { NextPage } from 'next';
+import Head from 'next/head';
+import { HotRecipes, RandomRecipe } from 'components';
+import { media } from 'utils';
+import { css } from '@emotion/react';
 
 const Home: NextPage = () => {
-  return <div>Home</div>;
+  return (
+    <>
+      <Head>
+        <title>Home - HanSpoon</title>
+      </Head>
+      <div
+        css={css`
+          ${media.desktop} {
+            display: flex;
+            flex-direction: row;
+          }
+        `}
+      >
+        <RandomRecipe />
+        <HotRecipes />
+      </div>
+    </>
+  );
 };
 
 export default Home;