diff --git a/package-lock.json b/package-lock.json
index 96da592..1fd3c45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "axios": "^1.4.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.8.0",
         "react-router-dom": "^6.11.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
@@ -14430,6 +14431,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+      "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index dcbbe9b..99aa2cd 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
     "react-router-dom": "^6.11.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..faee602
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,77 @@
+body {
+  background-color: #cae9ff;
+}
+.App {
+  display: flex;
+  flex-direction: column;
+  margin: 20px auto;
+  max-width: 600px;
+  padding: 10px;
+}
+.container {
+  display: flex;
+  flex-direction: row;
+  background-color: #fff;
+  border-radius: 30px;
+}
+h2 {
+  font-size: 30px;
+  text-align: center;
+  width: 430px;
+  margin: 0 auto;
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+input {
+  width: 100%;
+  font-weight: 400;
+  padding-left: 30px;
+  outline: none;
+  border: none;
+  padding: 20px 20px 20px 0px;
+}
+ul {
+  background-color: #fff;
+  list-style: none;
+  border-radius: 20px;
+  padding: 20px;
+  margin-top: 10px;
+  max-height: 300px;
+}
+li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 20px;
+  padding: 5px;
+  margin: 10px 0;
+}
+.suggestion__title {
+  color: grey;
+  font-size: 12px;
+}
+.search-icon {
+  margin-right: 10px;
+}
+.search-icon__input {
+  width: 50px;
+  padding: 22px 0px 0px 15px;
+}
+button {
+  background-color: #007be9;
+  color: #ffffff;
+  cursor: pointer;
+  border: none;
+  border-radius: 0 30px 30px 0;
+  padding: 20px;
+  width: 90px;
+}
+.empty-list {
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  border-radius: 20px;
+  padding: 20px;
+  height: 20px;
+  margin-top: 10px;
+}
diff --git a/src/App.js b/src/App.js
index 24214bd..9167f45 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import SearchBar from './pages/SearchBar';
+import './App.css';
 
 function App() {
   return (
diff --git a/src/apis/apiClient.js b/src/apis/apiClient.js
index fafbd8b..656bcac 100644
--- a/src/apis/apiClient.js
+++ b/src/apis/apiClient.js
@@ -76,7 +76,7 @@ class ApiClient {
     const cachedData = this.#cache.get(cacheOptions.key);
 
     if (cachedData && !cachedData.isExpired) {
-      return cachedData.data.data;
+      return cachedData.data;
     } else {
       const data = await this.#request('GET', path);
       this.#cache.set(cacheOptions.key, data, cacheOptions.expireTimeInSec);
@@ -93,5 +93,5 @@ class ApiClient {
 }
 
 export const apiClient = new ApiClient({
-  HOST: '/api/v1/search-conditions/',
+  HOST: 'https://api.clinicaltrialskorea.com/api/v1/search-conditions/',
 });
diff --git a/src/components/SearchBarInput.js b/src/components/SearchBarInput.js
index 9871998..6244403 100644
--- a/src/components/SearchBarInput.js
+++ b/src/components/SearchBarInput.js
@@ -3,11 +3,11 @@ import React from 'react';
 const SearchBarInput = ({ keyword, handleInputChange, handleKeyDown }) => {
   return (
     <input
-      type="text"
+      type="search"
       value={keyword}
       onChange={handleInputChange}
       onKeyDown={handleKeyDown}
-      placeholder="search"
+      placeholder="질환명을 입력해주세요"
     />
   );
 };
diff --git a/src/components/SuggestionList.js b/src/components/SuggestionList.js
index c170f5a..b52207a 100644
--- a/src/components/SuggestionList.js
+++ b/src/components/SuggestionList.js
@@ -1,19 +1,31 @@
 import React, { useRef } from 'react';
+import { FaSearch } from 'react-icons/fa';
 
-const SuggestionList = ({ suggestions, focusedIndex, setFocusedIndex }) => {
+const SuggestionList = ({
+  suggestions,
+  focusedIndex,
+  setFocusedIndex,
+  keyword,
+}) => {
   const suggestionListRef = useRef(null);
 
   return (
     <ul ref={suggestionListRef}>
-      {suggestions.map((suggestion, index) => (
-        <li
-          key={index}
-          style={index === focusedIndex ? { backgroundColor: '#ccc' } : {}}
-          onClick={() => setFocusedIndex(index)}
-        >
-          {suggestion.name}
-        </li>
-      ))}
+      <div className="suggestion__title">추천검색어</div>
+      {keyword && suggestions.length > 0 ? (
+        suggestions.slice(0, 7).map((suggestion, index) => (
+          <li
+            key={index}
+            style={index === focusedIndex ? { backgroundColor: '#ccc' } : {}}
+            onClick={() => setFocusedIndex(index)}
+          >
+            <FaSearch className="search-icon" />
+            {suggestion.name}
+          </li>
+        ))
+      ) : (
+        <div className="empty-list">검색어 없음</div>
+      )}
     </ul>
   );
 };
diff --git a/src/hooks/useKeyboard.js b/src/hooks/useKeyboard.js
index 5cdf343..c29c7d8 100644
--- a/src/hooks/useKeyboard.js
+++ b/src/hooks/useKeyboard.js
@@ -11,6 +11,9 @@ const useKeyboard = (
       setFocusedIndex((prevIndex) =>
         prevIndex < suggestions.length - 1 ? prevIndex + 1 : 0
       );
+      if (focusedIndex === 6) {
+        setFocusedIndex(0);
+      }
     }
 
     if (e.key === 'ArrowUp') {
@@ -19,6 +22,9 @@ const useKeyboard = (
       setFocusedIndex((prevIndex) =>
         prevIndex > 0 ? prevIndex - 1 : prevIndex
       );
+      if (focusedIndex === 0) {
+        setFocusedIndex(6);
+      }
     }
 
     if (e.key === 'Enter' && focusedIndex !== undefined && focusedIndex >= 0) {
diff --git a/src/pages/SearchBar.js b/src/pages/SearchBar.js
index f234a67..5cbf82c 100644
--- a/src/pages/SearchBar.js
+++ b/src/pages/SearchBar.js
@@ -4,12 +4,15 @@ import useInputChange from '../hooks/useInputChange';
 import useKeyboard from '../hooks/useKeyboard';
 import SearchBarInput from '../components/SearchBarInput';
 import SuggestionList from '../components/SuggestionList';
+import { FaSearch } from 'react-icons/fa';
 
 const SearchBar = () => {
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const [keyword, handleInputChange, setKeyword] = useInputChange();
   const [suggestions] = useKeywordSuggestion(keyword);
 
+  const MAIN_TITLE = '국내 모든 임상시험 검색하고 온라인으로 참여하기';
+
   const handleKeyDown = useKeyboard(
     suggestions,
     focusedIndex,
@@ -19,21 +22,25 @@ const SearchBar = () => {
 
   return (
     <>
-      <SearchBarInput
-        keyword={keyword}
-        handleInputChange={handleInputChange}
-        handleKeyDown={handleKeyDown}
-      />
+      <h2>{MAIN_TITLE}</h2>
+      <div className="container">
+        <FaSearch className="search-icon__input" />
+        <SearchBarInput
+          keyword={keyword}
+          handleInputChange={handleInputChange}
+          handleKeyDown={handleKeyDown}
+        />
+        <button>검색</button>
+      </div>
 
-      {keyword && suggestions.length > 0 ? (
+      {keyword ? (
         <SuggestionList
           suggestions={suggestions}
           focusedIndex={focusedIndex}
           setFocusedIndex={setFocusedIndex}
+          keyword={keyword}
         />
-      ) : (
-        <div>검색어 없음</div>
-      )}
+      ) : null}
     </>
   );
 };