diff --git a/src/js/components/SearchResults/HighlightedResult.tsx b/src/js/components/SearchResults/HighlightedResult.tsx
index 592d82316..d8c73b5c8 100644
--- a/src/js/components/SearchResults/HighlightedResult.tsx
+++ b/src/js/components/SearchResults/HighlightedResult.tsx
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { getMahankoshTooltipAttributes } from '../MahankoshTooltip/util';
 import { getVisraamClass } from '../../util';
 
-interface IHighlightedSearchResultProps {
+interface Props {
   children: React.ReactChildren;
   darkMode: boolean;
   highlightIndex: string[];
@@ -14,16 +14,16 @@ interface IHighlightedSearchResultProps {
   mahankoshIndex?: number;
   onMouseOver?: (word: string, index: number) => void;
   isShowMahankoshTooltip: boolean;
-};
+}
 
-const HighlightedSearchResult: React.FC<IHighlightedSearchResultProps> = ({
+const HighlightedSearchResult = ({
   children,
   highlightIndex,
   visraams,
   mahankoshIndex = -1,
   onMouseOver,
   isShowMahankoshTooltip,
-}) => {
+}: Props) => {
   const darkMode = useSelector(state => state.darkMode);
   const mahankoshTooltipAttributes = useMemo(() => {
     if (isShowMahankoshTooltip) {
diff --git a/src/js/components/SearchResults/SearchResults.js b/src/js/components/SearchResults/SearchResults.js
deleted file mode 100644
index 911aa25f0..000000000
--- a/src/js/components/SearchResults/SearchResults.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import SearchResult from './Result';
-import { SEARCH_TYPES } from '@/constants';
-import { getVerseId } from '@/util/api/shabad';
-
-export default class SearchResults extends React.PureComponent {
-  static propTypes = {
-    shabads: PropTypes.array.isRequired,
-    q: PropTypes.string.isRequired,
-    type: PropTypes.number.isRequired,
-    source: PropTypes.string.isRequired,
-    translationLanguages: PropTypes.array.isRequired,
-    transliterationLanguages: PropTypes.array.isRequired,
-    larivaarAssist: PropTypes.bool.isRequired,
-    larivaar: PropTypes.bool.isRequired,
-    unicode: PropTypes.bool.isRequired,
-    fontSize: PropTypes.number.isRequired,
-    fontFamily: PropTypes.string.isRequired,
-  };
-
-  render() {
-    const { shabads, type, ...props } = this.props;
-
-    const searchResultsClassName = cx({
-      'search-results-display': true,
-      'english-translation-search': type === SEARCH_TYPES.ENGLISH_WORD,
-      'main-letter-search': type === SEARCH_TYPES.MAIN_LETTERS
-    });
-
-    return (
-      <ul className={searchResultsClassName}>
-        {
-          shabads.map(shabad => {
-            return (
-              <SearchResult
-                key={getVerseId(shabad)}
-                type={type}
-                shabad={shabad}
-                {...props} />
-            );  
-          })
-        }
-      </ul>
-    );
-  }
-}
diff --git a/src/js/components/SearchResults/SearchResults.tsx b/src/js/components/SearchResults/SearchResults.tsx
new file mode 100644
index 000000000..0c8842926
--- /dev/null
+++ b/src/js/components/SearchResults/SearchResults.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import cx from 'classnames';
+
+import SearchResult from './Result';
+import { SEARCH_TYPES, SOURCES } from '@/constants';
+import { getVerseId } from '@/util/api/shabad';
+import { IShabad } from '@/types';
+
+type Source = keyof typeof SOURCES;
+
+interface Props {
+  shabads: IShabad[],
+  q: string,
+  type: number,
+  source: Source,
+  translationLanguages: string[],
+  transliterationLanguages: string[],
+  larivaarAssist: boolean,
+  larivaar: boolean,
+  unicode: boolean,
+  fontSize: number,
+  fontFamily: string,
+}
+
+export const SearchResults = (props: Props) => {
+  
+    const { shabads, type, ...rest } = props;
+
+    const searchResultsClassName = cx({
+      'search-results-display': true,
+      'english-translation-search': type === SEARCH_TYPES.ENGLISH_WORD,
+      'main-letter-search': type === SEARCH_TYPES.MAIN_LETTERS
+    });
+
+    return (
+      <ul className={searchResultsClassName}>
+        {
+          shabads.map(shabad => {
+            return (
+              <SearchResult
+                key={getVerseId(shabad)}
+                type={type}
+                shabad={shabad}
+                {...rest} />
+            );  
+          })
+        }
+      </ul>
+    );
+  }
+
diff --git a/src/js/pages/Search/Layout.js b/src/js/pages/Search/Layout.js
index 225c40f19..27f59c7f9 100644
--- a/src/js/pages/Search/Layout.js
+++ b/src/js/pages/Search/Layout.js
@@ -1,6 +1,7 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link, Redirect, withRouter } from 'react-router-dom';
+import {  Redirect, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 import Pagination from '../../components/Pagination';
@@ -25,7 +26,6 @@ class Layout extends React.PureComponent {
   static propTypes = {
     pages: PropTypes.array,
     offset: PropTypes.number,
-    ...SearchResults.propTypes,
   };
 
   render() {