diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2f30bc1c..3c8cb80b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -21,8 +21,8 @@
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^5.2.1",
+        "react-spinners": "^0.14.1",
         "react-toastify": "^10.0.5",
-        "spinners-react": "^1.0.7",
         "zod": "^3.23.8",
         "zustand": "^4.5.2"
       },
@@ -2266,6 +2266,7 @@
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/qs": {
@@ -2284,6 +2285,7 @@
       "version": "18.3.3",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
       "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -2294,6 +2296,7 @@
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/react": "*"
@@ -3345,6 +3348,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -6822,6 +6826,15 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-spinners": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.14.1.tgz",
+      "integrity": "sha512-2Izq+qgQ08HTofCVEdcAQCXFEYfqTDdfeDQJeo/HHQiQJD4imOicNLhkfN2eh1NYEWVOX4D9ok2lhuDB0z3Aag==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-toastify": {
       "version": "10.0.5",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
@@ -7286,18 +7299,6 @@
         "source-map": "^0.6.0"
       }
     },
-    "node_modules/spinners-react": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/spinners-react/-/spinners-react-1.0.7.tgz",
-      "integrity": "sha512-Xcgpc7Ybm6HOrpCVJjbH1G/NV852HaV4Zc9T1sJ2+S2hn05lGiBZS1dBOKGLc1kp8wv2sd3wtt94I/NNqDjs3Q==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^16.x || ^17.x || ^18.x",
-        "@types/react-dom": "^16.x || ^17.x || ^18.x",
-        "react": "^16.x || ^17.x || ^18.x",
-        "react-dom": "^16.x || ^17.x || ^18.x"
-      }
-    },
     "node_modules/stacktrace-parser": {
       "version": "0.1.10",
       "resolved": "https://registry.npmjs.org/stacktrace-parser/-/stacktrace-parser-0.1.10.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f77b7060..4b47a29a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,8 +23,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.2.1",
+    "react-spinners": "^0.14.1",
     "react-toastify": "^10.0.5",
-    "spinners-react": "^1.0.7",
     "zod": "^3.23.8",
     "zustand": "^4.5.2"
   },
diff --git a/frontend/src/app/search/page.tsx b/frontend/src/app/search/page.tsx
index 6af1e854..b3a46cd0 100644
--- a/frontend/src/app/search/page.tsx
+++ b/frontend/src/app/search/page.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import LoadingSearchResult from '@/components/search/loading-search-result'
 import NewSearch from '@/components/search/new-search'
 import NewSearchResponse from '@/components/search/new-search-response'
 import Thread from '@/components/search/thread'
@@ -101,7 +102,13 @@ export default function Search() {
           handleSetSearchQuery={handleSetSearchQuery}
         />
       ) : isLoading ? (
-        <>{isStreaming ? <NewSearchResponse response={newSearchResult} /> : <SearchResultPageSkeleton />}</>
+        <>
+          {isStreaming ? (
+            <NewSearchResponse response={newSearchResult} />
+          ) : (
+            <LoadingSearchResult className="mt-4" searchQuery={searchQuery} />
+          )}
+        </>
       ) : (
         <NewSearch
           handleSearch={() => {
diff --git a/frontend/src/components/search/loading-search-result.tsx b/frontend/src/components/search/loading-search-result.tsx
new file mode 100644
index 00000000..e911b665
--- /dev/null
+++ b/frontend/src/components/search/loading-search-result.tsx
@@ -0,0 +1,27 @@
+import React, { HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
+import SearchTitle from './search-title'
+import { Span } from '../lib/typography'
+import PropagateLoader from 'react-spinners/PropagateLoader'
+
+type LoadingSearchResultProps = HTMLAttributes<HTMLDivElement> & {
+  searchQuery: string
+}
+
+export default function LoadingSearchResult(props: LoadingSearchResultProps) {
+  return (
+    <div className={twMerge('w-full flex', props.className)}>
+      <div className={twMerge('w-full max-w-[900px] mx-auto px-10 flex flex-col justify-between', props.className)}>
+        <SearchTitle title={props.searchQuery} />
+        <div className="flex flex-col">
+          <div className="flex items-center gap-x-3 my-6">
+            <img src="images/answer-logo.svg" className="h-4 w-auto" alt="answer-logo" />
+            <Span className="font-light text-white/80 text-lg">Answer</Span>
+          </div>
+        </div>
+        <PropagateLoader className="mx-auto" color="white" aria-label="Loading Spinner" size={10} loading={true} />
+      </div>
+      <div className="w-72 flex-none"></div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/search/new-search-response.tsx b/frontend/src/components/search/new-search-response.tsx
index 82164ac6..07cc93c4 100644
--- a/frontend/src/components/search/new-search-response.tsx
+++ b/frontend/src/components/search/new-search-response.tsx
@@ -20,8 +20,8 @@ export default function NewSearchResponse(props: NewSearchResponseProps) {
           <SearchTitle className="mx-10 mt-10" title={props.response[0]?.search.query} />
           <div className="flex flex-col px-10">
             <div className="flex items-center gap-x-3 my-6">
-              <img src="images/answer-logo.svg" className="w-10 h-10" alt="answer-logo" />
-              <Span className="font-light text-white/80 text-xl">Answer</Span>
+              <img src="images/answer-logo.svg" className="h-4 w-auto" alt="answer-logo" />
+              <Span className="font-light text-white/80 text-lg">Answer</Span>
             </div>
             <SearchResponse
               className="w-full"
diff --git a/frontend/src/components/search/new-thread-search.tsx b/frontend/src/components/search/new-thread-search.tsx
index 5c693470..2731c276 100644
--- a/frontend/src/components/search/new-thread-search.tsx
+++ b/frontend/src/components/search/new-thread-search.tsx
@@ -3,12 +3,13 @@ import _ from 'lodash'
 import { HTMLAttributes } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { Span } from '../lib/typography'
-import SearchResultSkeleton from '../skeletons/search-result-skeleton'
+import LoadingSearchResult from './loading-search-result'
 import SearchResponse from './search-response'
-import SourcesMenu from './sources-menu'
 import SearchTitle from './search-title'
+import SourcesMenu from './sources-menu'
 
 type NewThreadSearchProps = HTMLAttributes<HTMLDivElement> & {
+  searchQuery: string
   response: SearchByIdResponse[]
   isStreaming: boolean
 }
@@ -42,7 +43,7 @@ export default function NewThreadSearch(props: NewThreadSearchProps) {
           </div>
         </div>
       ) : (
-        <SearchResultSkeleton className="mx-10" />
+        <LoadingSearchResult searchQuery={props.searchQuery} />
       )}
     </>
   )
diff --git a/frontend/src/components/search/thread.tsx b/frontend/src/components/search/thread.tsx
index a1c0b726..604412d1 100644
--- a/frontend/src/components/search/thread.tsx
+++ b/frontend/src/components/search/thread.tsx
@@ -40,8 +40,10 @@ export default function Thread(props: ThreadProps) {
   }
 
   useEffect(() => {
-    scrollToBottom()
-  }, [isLoading, newSearchResult])
+    if (isCompleted || isLoading) {
+      scrollToBottom()
+    }
+  }, [isCompleted, isLoading])
 
   useEffect(() => {
     props.handleSetSearchQuery('')
@@ -91,7 +93,11 @@ export default function Thread(props: ThreadProps) {
               {props.data.searches.length !== 1 && <div className="h-0.5 bg-white/20 ml-10 mr-6"></div>}
             </Fragment>
           ))}
-          {isLoading ? <NewThreadSearch response={newSearchResult} isStreaming={isStreaming} /> : <></>}
+          {isLoading ? (
+            <NewThreadSearch searchQuery={props.searchQuery} response={newSearchResult} isStreaming={isStreaming} />
+          ) : (
+            <></>
+          )}
           <div className="h-4"></div>
         </div>
       </div>
diff --git a/frontend/src/components/util/spinner-loading.tsx b/frontend/src/components/util/spinner-loading.tsx
index e41e5a2f..1c871909 100644
--- a/frontend/src/components/util/spinner-loading.tsx
+++ b/frontend/src/components/util/spinner-loading.tsx
@@ -1,7 +1,6 @@
 import { colors } from '@/styles/colors'
 import { HTMLAttributes } from 'react'
-import { SpinnerCircular } from 'spinners-react'
-import { gray } from 'tailwindcss/colors'
+import PuffLoader from 'react-spinners/PuffLoader'
 import { P } from '../lib/typography'
 
 type SpinnerLoadingProps = HTMLAttributes<HTMLDivElement> & {
@@ -13,7 +12,7 @@ export default function SpinnerLoading(props: SpinnerLoadingProps) {
 
   return (
     <div className="flex flex-col justify-center items-center w-full h-[80vh]">
-      <SpinnerCircular color={primary} secondaryColor={gray[200]} />
+      <PuffLoader color={primary} aria-label="Loading Spinner" size={150} loading={true} />
       {props.message && <P className="text-center text-lg font-semibold m-1">{props.message}</P>}
     </div>
   )