diff --git a/components/common/Header.tsx b/components/common/Header.tsx
index 7d75e4c8d..6ab69a3cf 100644
--- a/components/common/Header.tsx
+++ b/components/common/Header.tsx
@@ -5,6 +5,7 @@ import { useRouter } from "next/router";
 import { Profile } from "@/styles/commonStyle";
 import LinkButton from "./atoms/LinkButton";
 import Link from "next/link";
+import Image from "next/image";
 
 const logo = '/assets/logo/logo.svg';
 
diff --git a/components/common/atoms/Input.tsx b/components/common/atoms/Input.tsx
index 5325a76f4..a804da278 100644
--- a/components/common/atoms/Input.tsx
+++ b/components/common/atoms/Input.tsx
@@ -64,7 +64,7 @@ function Input({
           </Button>
         )}
       </Relative>
-    {value && <SearchResults><span>{value}</span>으로 검색한 결과입니다.</SearchResults>}
+    {value && <SearchResults><span>{value} </span>으로 검색한 결과입니다.</SearchResults>}
    </>
   );
 }
diff --git a/components/folder/PostCard.tsx b/components/folder/PostCard.tsx
index 87254c94b..932179ef4 100644
--- a/components/folder/PostCard.tsx
+++ b/components/folder/PostCard.tsx
@@ -2,10 +2,11 @@ import { useMemo, useState } from "react";
 import Link from "next/link";
 import { IFolderContent} from "@/pages/folder/interface";
 import { IModal } from "../modal/interface";
-import { BookMarkBtn, CardMenu, CardWrap } from "./PostCardStyle";
 import { calculateTimeAgo } from "@/src/utils/calcTilmAgo";
 import Modal from "../modal/Modal";
+import { BookMarkBtn, CardMenu, CardWrap } from "./PostCardStyle";
 import { DFlaxAlignCenterBtw, EllipsisLine } from "@/styles/commonStyle";
+import Image from "next/image";
 
 const emptyImg = '/assets/logo/logo.svg';
 
@@ -46,7 +47,7 @@ export default function PostCard({ image_source, description, created_at}: IFold
           <figure>
             <div className="card__image">
               {image_source ? (
-                <img src={image_source} alt={image_source} />
+                <Image fill src={image_source} alt={image_source} />
               ) : (
                 <img className="empty" src={emptyImg} alt="" />
               )}
diff --git a/components/folder/PostCardStyle.ts b/components/folder/PostCardStyle.ts
index 7fb7393e2..de14b5b8d 100644
--- a/components/folder/PostCardStyle.ts
+++ b/components/folder/PostCardStyle.ts
@@ -14,7 +14,7 @@ export const CardWrap = styled.div`
       border: 1px solid ${theme.color.primary};
       .card__image {
         img {
-          transform: scale(1.3) translate(-40%,-40%);
+          transform: scale(1.3)
         }
       }
     }
@@ -22,22 +22,18 @@ export const CardWrap = styled.div`
   .card {
     &__image {
       position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
       height: 12.5rem;
       overflow: hidden;
       background-color: #DDDFFF;
       img {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 100%;
-        transform: translate(-50%,-50%);
+        object-fit: cover;
         transition: transform 0.3s;
         &.empty {
-          left: 50%;
-          width: 133px;
-          opacity:.18;
-          transform: translateX(-50%);
+          opacity: 0.5;
         }
       }
     }
diff --git a/next.config.js b/next.config.js
index a843cbee0..e47df995b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,16 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
 }
 
 module.exports = nextConfig