diff --git a/src/components/SearchResult/SearchNotFound/SearchNotFound.module.scss b/src/components/SearchResult/SearchNotFound/SearchNotFound.module.scss
new file mode 100644
index 0000000..432f296
--- /dev/null
+++ b/src/components/SearchResult/SearchNotFound/SearchNotFound.module.scss
@@ -0,0 +1,33 @@
+@import '../../../scss/mixin';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  justify-content: space-between;
+}
+
+
+.not-found {
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-inline: 24px;
+  overflow: hidden;
+
+  .title {
+    display: block;
+    width: 100%;
+    font-size: 24px;
+    font-weight: 700;
+    text-align: center;
+    @include text-line-clamp(4);
+
+  }
+
+  .msg {
+    font-size: 14px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/SearchResult/SearchNotFound/SearchNotFound.tsx b/src/components/SearchResult/SearchNotFound/SearchNotFound.tsx
new file mode 100644
index 0000000..f8d903d
--- /dev/null
+++ b/src/components/SearchResult/SearchNotFound/SearchNotFound.tsx
@@ -0,0 +1,29 @@
+import {FC} from 'react'
+import styles from './SearchNotFound.module.scss'
+import classNames from 'classnames/bind'
+import { Footer } from '@/components'
+
+const cx = classNames.bind(styles)
+
+interface SearchNotFoundProps {
+  query?: string
+}
+
+const SearchNotFound: FC<SearchNotFoundProps> = ({query}) => {
+  return (
+    <div
+      className={cx('wrapper')}
+    >
+      <div className={cx('not-found')}>
+        <p className={cx('title')}>{`No results found for "${query}"`}</p>
+        <span className={cx('msg')}>
+          Please make sure your words are spelled correctly, or use fewer or different
+          keywords.
+        </span>
+      </div>
+      <Footer />
+    </div>
+  )
+}
+
+export default SearchNotFound
diff --git a/src/components/SearchResult/SearchResult.module.scss b/src/components/SearchResult/SearchResult.module.scss
index c1cb4b9..8fbf292 100644
--- a/src/components/SearchResult/SearchResult.module.scss
+++ b/src/components/SearchResult/SearchResult.module.scss
@@ -40,29 +40,6 @@
   }
 }
 
-.not-found {
-  min-height: 400px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding-inline: 24px;
-  overflow: hidden;
-
-  .title {
-    display: block;
-    width: 100%;
-    font-size: 24px;
-    font-weight: 700;
-    text-align: center;
-    @include text-line-clamp(4);
-
-  }
-
-  .msg {
-    font-size: 14px;
-  }
-}
 
 .grid-md {
   grid-template-columns: 16px minmax(300px, 4fr) 2fr 50px !important;
diff --git a/src/components/SearchResult/SearchResult.tsx b/src/components/SearchResult/SearchResult.tsx
index ae169b2..5fa82a9 100644
--- a/src/components/SearchResult/SearchResult.tsx
+++ b/src/components/SearchResult/SearchResult.tsx
@@ -5,6 +5,7 @@ import TopResult from './TopResult/TopResult'
 import { Footer, Section } from '..'
 import { getAccessToken, searchData } from '@/utils/fetchData'
 import SongList from '../SongList/SongList'
+import SearchNotFound from './SearchNotFound/SearchNotFound'
 
 const cx = classNames.bind(styles)
 
@@ -88,39 +89,23 @@ const SearchResult: FC<SearchResultProps> = ({ query }) => {
     data?.shows.items.filter((item: any) => item).length === 0 &&
     data?.tracks.items.filter((item: any) => item).length === 0
   ) {
-    return (
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          minHeight: '100vh',
-          justifyContent: 'space-between',
-        }}
-      >
-        <div className={cx('not-found')}>
-          <p className={cx('title')}>{`No results found for "${query}"`}</p>
-          <span className={cx('msg')}>
-            Please make sure your words are spelled correctly, or use fewer or different
-            keywords.
-          </span>
-        </div>
-        <Footer />
-      </div>
-    )
+    return <SearchNotFound query={query} />
   }
 
   return (
     <div className={cx('wrapper')}>
       <div className={cx('search__kind')}>
-        {searchSelections.filter(item => item.isExist).map((item) => (
-          <button
-            key={item.key}
-            className={cx({ btn: true, active: item.active })}
-            onClick={() => setCategory(item.key)}
-          >
-            {item.display}
-          </button>
-        ))}
+        {searchSelections
+          .filter((item) => item.isExist)
+          .map((item) => (
+            <button
+              key={item.key}
+              className={cx({ btn: true, active: item.active })}
+              onClick={() => setCategory(item.key)}
+            >
+              {item.display}
+            </button>
+          ))}
       </div>
       <div>
         {category !== 'all' ? (