diff --git a/frontend_new/src/App.tsx b/frontend_new/src/App.tsx
index 1ebf501..6d1bf4f 100644
--- a/frontend_new/src/App.tsx
+++ b/frontend_new/src/App.tsx
@@ -10,7 +10,6 @@ import getDefaultTheme from "./components/ThemeSetting";
 //using colors from theme - bit hacky but works
 function App() {
   let themeColor = localStorage.getItem("themeChoice") || getDefaultTheme();
-  console.log("themeColor: ", themeColor);
 
   const [themeChoice, setThemeChoice] = React.useState(
     themeColor === "dark" ? dark : light
@@ -26,27 +25,6 @@ function App() {
     localStorage.setItem("themeChoice", themeColourSwitch.palette.type);
   };
 
-  const [bookmarks, setBookmarks] = React.useState<{ [key: number]: any }>({});
-  function handlebookmark(
-    web_link: string,
-    primary: string,
-    secondary: string,
-    id: number
-  ) {
-    if (id in bookmarks) {
-      let temp_bookmarks = bookmarks;
-      delete temp_bookmarks[id];
-      setBookmarks(temp_bookmarks);
-    } else {
-      let temp_bookmarks = bookmarks;
-      temp_bookmarks[id] = {
-        web_link: web_link,
-        primary: primary,
-        secondary: secondary,
-        id: id,
-      };
-    }
-  }
   return (
     <ThemeProvider theme={{ ...themeChoice }}>
       <Grid container>
@@ -54,8 +32,6 @@ function App() {
           <Grow in={true} timeout={600}>
             <BookmarkDrawer
               whichTheme={themeChoice}
-              bookmarks={bookmarks}
-              handlebookmark={handlebookmark}
               themeChange={themeChange}
             />
           </Grow>
diff --git a/frontend_new/src/components/BookmarkAction.tsx b/frontend_new/src/components/BookmarkAction.tsx
new file mode 100644
index 0000000..a86c44f
--- /dev/null
+++ b/frontend_new/src/components/BookmarkAction.tsx
@@ -0,0 +1,58 @@
+export const enum BookmarksAction {
+  ADD = "ADD",
+  DELETE = "DELETE",
+  INVALID = "INVALID",
+}
+
+type props = {
+  web_link: string;
+  primary: string;
+  secondary: string;
+  id: number;
+  isVisible: boolean;
+};
+
+export default function bookmarkAction(action: BookmarksAction, props: props) {
+  switch (action) {
+    case BookmarksAction.ADD:
+      addArticle(props);
+      break;
+    case BookmarksAction.DELETE:
+      removeArticle(props);
+      break;
+  }
+}
+
+function addArticle(props: props) {
+  let articleSavedObject = JSON.parse(
+    localStorage.getItem("articles") || "null"
+  );
+
+  // Add article
+  let articleDetails = {
+    id: props.id,
+    web_link: props.web_link,
+    primary: props.primary,
+    secondary: props.secondary,
+  };
+  // Check if the Object is null and decalre {}
+  if (
+    articleSavedObject === null ||
+    Object.keys(articleSavedObject).length === 0
+  ) {
+    let articleInitialObject: any = {};
+    articleSavedObject = articleInitialObject;
+  }
+  articleSavedObject[props.id.toString()] = articleDetails;
+  localStorage.setItem("articles", JSON.stringify(articleSavedObject));
+}
+
+function removeArticle(props: props) {
+  let articleSavedObject = JSON.parse(
+    localStorage.getItem("articles") || "null"
+  );
+
+  // Remove the saved article
+  delete articleSavedObject[props.id];
+  localStorage.setItem("articles", JSON.stringify(articleSavedObject));
+}
diff --git a/frontend_new/src/components/BookmarkDrawer.tsx b/frontend_new/src/components/BookmarkDrawer.tsx
index 0499498..01383af 100644
--- a/frontend_new/src/components/BookmarkDrawer.tsx
+++ b/frontend_new/src/components/BookmarkDrawer.tsx
@@ -86,13 +86,6 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 type props = {
-  bookmarks: object;
-  handlebookmark: (
-    web_link: string,
-    primary: string,
-    secondary: string,
-    id: number
-  ) => void;
   whichTheme: Theme;
   themeChange: () => void;
 };
@@ -188,8 +181,6 @@ export default function PersistentDrawerLeft(props: props) {
                             primary={primary}
                             id={id}
                             secondary={secondary}
-                            bookmarks={props.bookmarks}
-                            handlebookmark={props.handlebookmark}
                             isVisible={!open}
                           />
                         </Grid>
@@ -209,11 +200,7 @@ export default function PersistentDrawerLeft(props: props) {
         <div className={classes.drawerHeader} />
         <Grid container>
           <Grid item xs={12}>
-            <Search
-              bookmarks={props.bookmarks}
-              handlebookmark={props.handlebookmark}
-              isVisible={open}
-            />
+            <Search isVisible={open} />
           </Grid>
         </Grid>
       </main>
diff --git a/frontend_new/src/components/Cards.tsx b/frontend_new/src/components/Cards.tsx
index a80802c..f8ec4b7 100644
--- a/frontend_new/src/components/Cards.tsx
+++ b/frontend_new/src/components/Cards.tsx
@@ -13,19 +13,14 @@ import Grid from "@material-ui/core/Grid";
 import { useTheme } from "@material-ui/core/styles";
 import { makeStyles } from "@material-ui/core/styles";
 import { customColours } from "../themes/customTheme";
+import bookmarkAction from "./BookmarkAction";
+import { BookmarksAction } from "./BookmarkAction";
 
 type props = {
   web_link: string;
   primary: string;
   secondary: string;
   id: number;
-  handlebookmark: (
-    web_link: string,
-    primary: string,
-    secondary: string,
-    id: number
-  ) => void;
-  bookmarks: object;
   isVisible: boolean;
 };
 
@@ -48,27 +43,11 @@ export default function SimpleCard(props: props) {
     if (articleSavedObject && articleSavedObject.hasOwnProperty(props.id)) {
       // Remove the saved article
       setBookmarked(false);
-      delete articleSavedObject[props.id];
-      localStorage.setItem("articles", JSON.stringify(articleSavedObject));
+      bookmarkAction(BookmarksAction.DELETE, props);
     } else {
       // Add article
       setBookmarked(true);
-      let articleDetails = {
-        id: props.id,
-        web_link: props.web_link,
-        primary: props.primary,
-        secondary: props.secondary,
-      };
-      // Check if the Object is null and decalre {}
-      if (
-        articleSavedObject === null ||
-        Object.keys(articleSavedObject).length === 0
-      ) {
-        let articleInitialObject: any = {};
-        articleSavedObject = articleInitialObject;
-      }
-      articleSavedObject[props.id.toString()] = articleDetails;
-      localStorage.setItem("articles", JSON.stringify(articleSavedObject));
+      bookmarkAction(BookmarksAction.ADD, props);
     }
   }
 
diff --git a/frontend_new/src/components/Res.js b/frontend_new/src/components/Res.js
index c5fca68..a635fe9 100644
--- a/frontend_new/src/components/Res.js
+++ b/frontend_new/src/components/Res.js
@@ -49,8 +49,6 @@ function Res(props) {
                       primary={_source.title}
                       id={_id}
                       secondary={_source.summary}
-                      bookmarks={props.bookmarks}
-                      handlebookmark={props.handlebookmark}
                       isVisible={props.isVisible}
                     />
                   </Grid>
diff --git a/frontend_new/src/components/Search.tsx b/frontend_new/src/components/Search.tsx
index 2a16e42..b425ad3 100644
--- a/frontend_new/src/components/Search.tsx
+++ b/frontend_new/src/components/Search.tsx
@@ -43,13 +43,6 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 type props = {
-  bookmarks: object;
-  handlebookmark: (
-    web_link: string,
-    primary: string,
-    secondary: string,
-    id: number
-  ) => void;
   isVisible: boolean;
 };
 
@@ -181,13 +174,7 @@ function SearchInfo(props: props) {
       <Grid item xs={12} style={{ display: String(props.isVisible) }}>
         {query !== "" && query && (
           <Route path="/search">
-            <Res
-              search={searchType}
-              query={query}
-              handlebookmark={props.handlebookmark}
-              bookmarks={props.bookmarks}
-              isVisible={props.isVisible}
-            />
+            <Res search={searchType} query={query} />
           </Route>
         )}
       </Grid>
@@ -198,11 +185,7 @@ function SearchInfo(props: props) {
 export default function Search(props: props) {
   return (
     <Router>
-      <SearchInfo
-        bookmarks={props.bookmarks}
-        handlebookmark={props.handlebookmark}
-        isVisible={props.isVisible}
-      />
+      <SearchInfo isVisible={props.isVisible} />
     </Router>
   );
 }