diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx
index 38b8b88..7767637 100644
--- a/src/app/(tabs)/author/index.tsx
+++ b/src/app/(tabs)/author/index.tsx
@@ -122,6 +122,7 @@ function AuthorScreen() {
           {authorStoryPreview?.map(story => (
             <PreviewCard
               key={story.title}
+              storyId={story.id}
               title={story.title}
               image={story.featured_media}
               author={story.author_name}
diff --git a/src/app/(tabs)/genre/index.tsx b/src/app/(tabs)/genre/index.tsx
index 025680e..87712eb 100644
--- a/src/app/(tabs)/genre/index.tsx
+++ b/src/app/(tabs)/genre/index.tsx
@@ -272,6 +272,7 @@ function GenreScreen() {
         renderItem={({ item }) => (
           <PreviewCard
             key={item.id}
+            storyId={item.id}
             tags={item.genre_medium.concat(item.tone).concat(item.topic)}
             author={item.author_name}
             image={item.featured_media}
diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx
index f45cf3d..b5c7b34 100644
--- a/src/app/(tabs)/home/index.tsx
+++ b/src/app/(tabs)/home/index.tsx
@@ -96,6 +96,7 @@ function HomeScreen() {
               {featuredStories.map(story => (
                 <PreviewCard
                   key={story.id}
+                  storyId={story.id}
                   title={story.title}
                   image={story.featured_media}
                   author={story.author_name}
diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx
index a511472..fdc5612 100644
--- a/src/app/(tabs)/search/index.tsx
+++ b/src/app/(tabs)/search/index.tsx
@@ -306,6 +306,7 @@ function SearchScreen() {
                 {recentlyViewed.map(item => (
                   <PreviewCard
                     key={item.title}
+                    storyId={item.id}
                     title={item.title}
                     image={item.featured_media}
                     author={item.author_name}
@@ -395,7 +396,8 @@ function SearchScreen() {
             contentContainerStyle={styles.contentCotainerStories}
             renderItem={({ item }) => (
               <PreviewCard
-                key={item.title}
+                key={item.id}
+                storyId={item.id}
                 title={item.title}
                 image={item.featured_media}
                 author={item.author_name}
diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx
index b164b8c..a6e32b6 100644
--- a/src/components/ContentCard/ContentCard.tsx
+++ b/src/components/ContentCard/ContentCard.tsx
@@ -8,10 +8,12 @@ import {
 } from 'react-native';
 
 import styles from './styles';
-import { addUserStoryToReadingList } from '../../queries/savedStories';
+import { addUserStoryToReadingList, deleteUserStoryToReadingList, isStoryInReadingList } from '../../queries/savedStories';
 import globalStyles from '../../styles/globalStyles';
 import { useSession } from '../../utils/AuthContext';
 import Emoji from 'react-native-emoji';
+import { useEffect, useMemo, useState } from 'react';
+
 
 type ContentCardProps = {
   title: string;
@@ -22,6 +24,9 @@ type ContentCardProps = {
   pressFunction: (event: GestureResponderEvent) => void;
 };
 
+const saveStoryImage = require('../../../assets/save_story.png');
+const savedStoryImage = require('../../../assets/saved_story.png');
+
 function ContentCard({
   title,
   author,
@@ -31,9 +36,20 @@ function ContentCard({
   pressFunction,
 }: ContentCardProps) {
   const { user } = useSession();
+  const [storyIsSaved, setStoryIsSaved] = useState(false);
+
+  useEffect(() => {
+    isStoryInReadingList(storyId, user?.id).then(storyInReadingList => setStoryIsSaved(storyInReadingList))
+  }, [storyId])
+
 
   const saveStory = () => {
-    addUserStoryToReadingList(user?.id, storyId);
+    if (storyIsSaved) {
+      deleteUserStoryToReadingList(user?.id, storyId);
+    } else {
+      addUserStoryToReadingList(user?.id, storyId);
+    }
+    setStoryIsSaved(!storyIsSaved);
   };
 
   return (
@@ -85,7 +101,7 @@ function ContentCard({
             <TouchableOpacity onPress={() => saveStory()}>
               <Image
                 style={styles.saveStoryImage}
-                source={require('../../../assets/save_story.png')}
+                source={storyIsSaved ? savedStoryImage : saveStoryImage}
               />
             </TouchableOpacity>
           </View>
diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx
index 45a31a7..db5b283 100644
--- a/src/components/PreviewCard/PreviewCard.tsx
+++ b/src/components/PreviewCard/PreviewCard.tsx
@@ -11,13 +11,20 @@ import Emoji from 'react-native-emoji';
 
 import styles from './styles';
 import globalStyles from '../../styles/globalStyles';
+import { useEffect, useState } from 'react';
+import { addUserStoryToReadingList, deleteUserStoryToReadingList, isStoryInReadingList } from '../../queries/savedStories';
+import { useSession } from '../../utils/AuthContext';
+import { useIsFocused } from '@react-navigation/native';
 
 const placeholderImage =
   'https://gwn-uploads.s3.amazonaws.com/wp-content/uploads/2021/10/10120952/Girls-Write-Now-logo-avatar.png';
+const saveStoryImage = require('../../../assets/save_story.png');
+const savedStoryImage = require('../../../assets/saved_story.png');
 
 type PreviewCardProps = {
   title: string;
   image: string;
+  storyId: number;
   author: string;
   authorImage: string;
   excerpt: { html: string };
@@ -28,14 +35,29 @@ type PreviewCardProps = {
 function PreviewCard({
   title,
   image,
+  storyId,
   author,
   authorImage,
   excerpt,
   tags,
   pressFunction,
 }: PreviewCardProps) {
+  const { user } = useSession();
+  const isFocused = useIsFocused();
+  const [storyIsSaved, setStoryIsSaved] = useState(false);
+
+  useEffect(() => {
+    isStoryInReadingList(storyId, user?.id).then(storyInReadingList => setStoryIsSaved(storyInReadingList))
+  }, [storyId, isFocused])
+
+
   const saveStory = () => {
-    console.log("testing '+' icon does something for story " + title);
+    if (storyIsSaved) {
+      deleteUserStoryToReadingList(user?.id, storyId);
+    } else {
+      addUserStoryToReadingList(user?.id, storyId);
+    }
+    setStoryIsSaved(!storyIsSaved);
   };
 
   return (
@@ -48,7 +70,7 @@ function PreviewCard({
           <TouchableOpacity onPress={() => saveStory()}>
             <Image
               style={{ width: 30, height: 30 }}
-              source={require('../../../assets/save_story.png')}
+              source={storyIsSaved ? savedStoryImage : saveStoryImage}
             />
           </TouchableOpacity>
         </View>
diff --git a/src/queries/reactions.tsx b/src/queries/reactions.tsx
index 8a9da88..ffe68c4 100644
--- a/src/queries/reactions.tsx
+++ b/src/queries/reactions.tsx
@@ -53,7 +53,7 @@ export async function fetchAllReactionsToStory(
       `An error occured when trying to fetch reactions to a story', ${error}`,
     );
   } else {
-    return data;
+    return data as Reactions[];
   }
 }
 
diff --git a/src/queries/savedStories.tsx b/src/queries/savedStories.tsx
index 59f6eca..8b88460 100644
--- a/src/queries/savedStories.tsx
+++ b/src/queries/savedStories.tsx
@@ -1,7 +1,10 @@
 import supabase from '../utils/supabase';
 
-const favorites = 'favorites';
-const readingList = 'reading list';
+enum SavedList {
+  FAVORITES = 'favorites',
+  READING_LIST = 'reading list'
+}
+
 
 async function fetchUserStories(
   user_id: string | undefined,
@@ -48,11 +51,11 @@ async function fetchUserStories(
 }
 
 export async function fetchUserStoriesFavorites(user_id: string | undefined) {
-  return await fetchUserStories(user_id, favorites);
+  return await fetchUserStories(user_id, SavedList.FAVORITES);
 }
 
 export async function fetchUserStoriesReadingList(user_id: string | undefined) {
-  return await fetchUserStories(user_id, readingList);
+  return await fetchUserStories(user_id, SavedList.READING_LIST);
 }
 
 async function addUserStory(
@@ -78,17 +81,32 @@ export async function addUserStoryToFavorites(
   user_id: string | undefined,
   story_id: number,
 ) {
-  addUserStory(user_id, story_id, favorites);
+  addUserStory(user_id, story_id, SavedList.FAVORITES);
 }
 
 export async function addUserStoryToReadingList(
   user_id: string | undefined,
   story_id: number,
 ) {
-  addUserStory(user_id, story_id, readingList);
+  addUserStory(user_id, story_id, SavedList.READING_LIST);
+}
+
+export async function deleteUserStoryToFavorites(
+  user_id: string | undefined,
+  story_id: number,
+) {
+  deleteUserStory(user_id, story_id, SavedList.FAVORITES);
 }
 
-export async function deleteUserStories(
+export async function deleteUserStoryToReadingList(
+  user_id: string | undefined,
+  story_id: number,
+) {
+  deleteUserStory(user_id, story_id, SavedList.READING_LIST);
+}
+
+
+export async function deleteUserStory(
   user_id: string | undefined,
   story_id: number,
   name: string,
@@ -108,3 +126,19 @@ export async function deleteUserStories(
     }
   }
 }
+
+export async function isStoryInReadingList(storyId: number, userId: string | undefined): Promise<boolean> {
+  let { data, error } = await supabase
+    .rpc('is_story_saved_for_user', {
+      list_name: "reading list",
+      story_db_id: storyId,
+      user_uuid: userId,
+    })
+
+  if (error) {
+    console.error(error)
+    return false;
+  }
+
+  return data;
+}