diff --git a/WEB/frontend/src/components/Dashboard/ArticleVolumeLine.js b/WEB/frontend/src/components/Dashboard/ArticleVolumeLine.js
index fad842f4..5d916265 100644
--- a/WEB/frontend/src/components/Dashboard/ArticleVolumeLine.js
+++ b/WEB/frontend/src/components/Dashboard/ArticleVolumeLine.js
@@ -13,6 +13,9 @@ import useFetch from '../../hooks/useFetch';
 
 const ArticleVolumeLine = ({ theme, colors }) => {
   const { data, isPending, error } = useFetch(`/data/articleVolume.json`);
+  // const { data, error, isPending } = useFetch(`/api/nlp/article/volume/`, {
+  //   method: 'GET',
+  // });
 
   return (
     <Card style={{ height: '400px' }}>
diff --git a/WEB/frontend/src/components/Dashboard/SentimentBar.js b/WEB/frontend/src/components/Dashboard/SentimentBar.js
index 1074ae6c..97ba02f6 100644
--- a/WEB/frontend/src/components/Dashboard/SentimentBar.js
+++ b/WEB/frontend/src/components/Dashboard/SentimentBar.js
@@ -9,11 +9,11 @@ import {
 } from '@mui/material';
 import useFetch from '../../hooks/useFetch';
 
-
 const SentimentBar = ({ theme, colors }) => {
-  const { data, error, isPending } = useFetch(`/api/nlp/sentiment/bar/`, {
-    method: 'POST',
-  });
+  const { data, error, isPending } = useFetch(`/data/sentimentBar.json`);
+  // const { data, error, isPending } = useFetch(`/api/nlp/sentiment/bar/`, {
+  //   method: 'GET',
+  // });
 
   return (
     <Card style={{ height: '400px' }}>
diff --git a/WEB/frontend/src/components/Dashboard/SentimentPie.js b/WEB/frontend/src/components/Dashboard/SentimentPie.js
index aa008416..0f019695 100644
--- a/WEB/frontend/src/components/Dashboard/SentimentPie.js
+++ b/WEB/frontend/src/components/Dashboard/SentimentPie.js
@@ -10,9 +10,10 @@ import {
 import useFetch from '../../hooks/useFetch';
 
 export const SentimentPie = ({ theme, colors }) => {
-  const { data, error, isPending } = useFetch(`/api/nlp/sentiment/pie/`, {
-    method: 'POST',
-  });
+  const { data, error, isPending } = useFetch(`/data/sentimentPie.json`);
+  // const { data, error, isPending } = useFetch(`/api/nlp/sentiment/pie/`, {
+  //   method: 'GET',
+  // });
 
   return (
     <Card style={{ height: '400px' }}>
diff --git a/WEB/frontend/src/components/Dashboard/TrendsCard.js b/WEB/frontend/src/components/Dashboard/TrendsCard.js
index c95ca22a..3136be99 100644
--- a/WEB/frontend/src/components/Dashboard/TrendsCard.js
+++ b/WEB/frontend/src/components/Dashboard/TrendsCard.js
@@ -78,6 +78,9 @@ function CustomPagination() {
 
 export default function TrendsCard() {
   const { data, error, isPending } = useFetch(`/data/trends.json`);
+  // const { data, error, isPending } = useFetch(`/api/nlp/trends`, {
+  //   method: 'GET',
+  // });
 
   return (
     <Card style={{ width: '100%', height: '400px' }}>
diff --git a/WEB/frontend/src/components/Dashboard/WordCloud.js b/WEB/frontend/src/components/Dashboard/WordCloud.js
index 1ad39972..5260199f 100644
--- a/WEB/frontend/src/components/Dashboard/WordCloud.js
+++ b/WEB/frontend/src/components/Dashboard/WordCloud.js
@@ -15,6 +15,9 @@ import { useEffect } from 'react';
 
 const WordCloud = ({ options }) => {
   const { data, isPending, error } = useFetch(`/data/wordCloud.json`);
+  // const { data, error, isPending } = useFetch(`/api/nlp/wordcloud/`, {
+  //   method: 'GET',
+  // });
 
   return (
     <Card
diff --git a/WEB/frontend/src/pages/DetectionStatus.js b/WEB/frontend/src/pages/DetectionStatus.js
index 85524dad..9c06e4e2 100644
--- a/WEB/frontend/src/pages/DetectionStatus.js
+++ b/WEB/frontend/src/pages/DetectionStatus.js
@@ -10,11 +10,11 @@ import { useSessionStorage } from '../js/util';
 
 import { useRecoilValue } from 'recoil';
 import { searchState } from '../atoms/searchState';
-import useSeacrhEffect from '../hooks/useSearchInitEffect';
+import useSearchEffect from '../hooks/useSearchInitEffect';
 import { appliedFilterListState } from '../atoms/appliedFilterMapState';
 
 export default function DetectionStatus() {
-  useSeacrhEffect(); // init
+  useSearchEffect(); // init
 
   const search = useRecoilValue(searchState);
   const appliedFilterList = useRecoilValue(appliedFilterListState);
@@ -36,7 +36,7 @@ export default function DetectionStatus() {
     const data = search.contents.filter((x) => x._id == _id).pop(0); // popping doesn't affect original array
     console.log(
       data,
-      search.contents.filter((x) => x.id == _id),
+      search.contents.filter((x) => x._id == _id),
       search
     );
     setDetailModalData(data);
@@ -45,13 +45,13 @@ export default function DetectionStatus() {
 
   const [getCart, addCart] = useSessionStorage('riskoutShoppingCart');
   const { enqueueSnackbar } = useSnackbar();
-  const scrapArticle = (id) => {
-    addCart(id);
-    // const article = search.contents.filter((x) => x.id == id).pop();
-    // enqueueSnackbar('Scrapped article | ' + article.title, {
-    //   variant: 'success',
-    //   autoHideDuration: 10000,
-    // });
+  const scrapArticle = (_id) => {
+    addCart(_id);
+    const article = search.contents.filter((x) => x._id == _id).pop(0);
+    enqueueSnackbar('Scrapped article | ' + article.title, {
+      variant: 'success',
+      autoHideDuration: 10000,
+    });
   };
 
   const analyzePage = (id) => {