diff --git a/frontend/src/components/Article.js b/frontend/src/components/Article.js
index 65e5874b45fd3cce639e71a7f597dc5001eebed5..60fc19ccdf37f140f5e6c1a4a5600c52fe67ee5d 100644
--- a/frontend/src/components/Article.js
+++ b/frontend/src/components/Article.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import "../css/Article.css"
+import '../css/Article.css';
 
 import { Routes, Route, Link, useNavigate, Navigate } from 'react-router-dom';
 import { useParams } from 'react-router-dom';
diff --git a/frontend/src/components/SearchMapByKeyword.js b/frontend/src/components/SearchMapByKeyword.js
index f7e4abaa39accf590b94ca8b8855a5a79465d46c..cc9bee21a00607a90f203030aa9434b57007fddf 100644
--- a/frontend/src/components/SearchMapByKeyword.js
+++ b/frontend/src/components/SearchMapByKeyword.js
@@ -1,5 +1,6 @@
 import { Map, MapMarker } from "react-kakao-maps-sdk";
 import React, { useRef, useState, useEffect, useContext } from 'react';
+import '../css/SearchMapByKeyword.css'
 
 const { kakao } = window;
 
@@ -59,13 +60,13 @@ function SearchMapByKeyword({ loc, setLoc }) {
     <div className="UserInput">
       <input onChange={handleInput} />
       <button onClick={() => handleSearch()} style={{ width: '50px', height: '30px' }}>寃���</button><br></br>
-      <div style={{ display: 'flex' }}>
-        <Map // 吏��꾨� �쒖떆�� Container
+      <div className="mapScreen" style={{ display: 'flex' }}>
+        <Map className="mapSearch"// 吏��꾨� �쒖떆�� Container
           center={info && info.position || defaultCenter}
           style={{
             // 吏��꾩쓽 �ш린
-            width: "450px",
-            height: "450px"
+            width: "350px",
+            height: "550px"
           }}
           onCreate={setMap}
           isPanto={true}
@@ -95,7 +96,7 @@ function SearchMapByKeyword({ loc, setLoc }) {
             </MapMarker>
           ))}
         </Map>
-        <div>
+        <div id="searchResult">
           <ul>
             {markers.map((marker, index) => (
               <li key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}
diff --git a/frontend/src/css/App.css b/frontend/src/css/App.css
index fbe6b88a7d60c37ffbd50cccfe34588267288d0f..fa2d566df55f7073fbfdd83a8a4b9e32ed00a1b7 100644
--- a/frontend/src/css/App.css
+++ b/frontend/src/css/App.css
@@ -33,6 +33,14 @@ button:active {
   flex-direction: column;
 }
 
+.App .search{
+ margin-right: auto;
+}
+
+.App .search .article{
+  width: 30vw;
+}
+
 .App :not(style) {
   margin: 10px;
 }
\ No newline at end of file
diff --git a/frontend/src/css/Article.css b/frontend/src/css/Article.css
index 37ead0ad8d204844c6c8b82cfc5758880e4fbeab..1c764cb7104f36ee48d3cb10e611395b24229371 100644
--- a/frontend/src/css/Article.css
+++ b/frontend/src/css/Article.css
@@ -16,7 +16,7 @@
   background-color: #ffffff;
   border: 1px solid gray;
   border-radius: 10px;
-  width: 100vh;
+  width: 55vw;
 }
 
 .article h1 {
@@ -41,4 +41,8 @@
 
 .article:hover {
   background-color: #dddddd;
+}
+
+.test{
+  background-color: red;
 }
\ No newline at end of file
diff --git a/frontend/src/css/Search.css b/frontend/src/css/Search.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..e96be410374e09a45110326277180d42ccb766a2 100644
--- a/frontend/src/css/Search.css
+++ b/frontend/src/css/Search.css
@@ -0,0 +1,27 @@
+@font-face {
+    font-family: 'Pretendard-Regular';
+    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+.search {
+    /* position: absolute; */
+    display: flex;
+    /* background-color: red; */
+    /* float: left; */
+    /* margin-right: 100vh; */
+}
+
+.mapSearch{
+    align-items: left;
+}
+
+#searchResult li{
+    /* 寃��� 李쎌뿉�� 寃��됯껐怨� 紐⑸줉(li) */
+    font-family: 'Pretendard-Regular';
+    /* position: absolute; */
+    /* font-size: 20px; */
+    min-width: 200px;
+    font-weight: 700;   
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Search.js b/frontend/src/pages/Search.js
index ccab414f35f6a7e6baa9a5d6f48b6f33ecfaf61c..50c10714ca9a5f9eb088c822d4a1cc968e750450 100644
--- a/frontend/src/pages/Search.js
+++ b/frontend/src/pages/Search.js
@@ -5,6 +5,7 @@ import SearchMap from '../components/SearchMapByKeyword.js'
 import { UserContext } from '../Context.js';
 import Article from '../components/Article.js';
 import axios from 'axios';
+import '../css/Search.css';
 axios.defaults.withCredentials = true;
 const { kakao } = window;
 function Search(props) {
@@ -49,7 +50,7 @@ function Search(props) {
   let listItem = [];
   listItem = articleList.map((article) => {
     return (
-      <Article
+      <Article className="test"
         key={article._id}
         data={article}
       ></Article>
@@ -70,8 +71,8 @@ function Search(props) {
   };
 
   return (
-    <div style={{ display: 'flex' }}>
-      <div className="search">
+    <div className="search" style={{ display: 'flex' }}>
+      <div>
         <h1 style={{ textAlign: 'center' }}>寃���</h1>
         <SearchMap loc={location} setLoc={setLocation}></SearchMap>
       </div>