diff --git a/package-lock.json b/package-lock.json
index ca07deb..f83fb7d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,10 +38,13 @@
         "expo-status-bar": "~1.6.0",
         "html-entities": "^2.4.0",
         "react": "18.2.0",
+        "react-apple-emojis": "^2.2.1",
         "react-native": "0.72.10",
         "react-native-dom-parser": "^1.5.3",
         "react-native-element-dropdown": "^2.10.0",
         "react-native-elements": "^3.4.3",
+        "react-native-emoji": "^1.8.0",
+        "react-native-emojicon": "^1.0.0",
         "react-native-gesture-handler": "~2.12.0",
         "react-native-htmlview": "^0.16.0",
         "react-native-ionicons": "^4.6.5",
@@ -14217,6 +14220,11 @@
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
       "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
     },
+    "node_modules/lodash.toarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
+      "integrity": "sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw=="
+    },
     "node_modules/log-symbols": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
@@ -15502,6 +15510,14 @@
         "node": ">=10.5.0"
       }
     },
+    "node_modules/node-emoji": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
+      "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
+      "dependencies": {
+        "lodash.toarray": "^4.4.0"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -16664,6 +16680,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-apple-emojis": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-apple-emojis/-/react-apple-emojis-2.2.1.tgz",
+      "integrity": "sha512-tgq/+GUR6WsBkkkl0EYgVbaU803IF8GoELcG83cfircrEiyiiIbHqpBXIHyD8YIOecAGgN2ucEG6U/REDR7jvQ==",
+      "peerDependencies": {
+        "prop-types": "*",
+        "react": ">=16.x",
+        "react-dom": ">=16.x"
+      }
+    },
     "node_modules/react-devtools-core": {
       "version": "4.28.0",
       "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.28.0.tgz",
@@ -16853,6 +16879,19 @@
         "react-native-vector-icons": ">7.0.0"
       }
     },
+    "node_modules/react-native-emoji": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-emoji/-/react-native-emoji-1.8.0.tgz",
+      "integrity": "sha512-VunKOtYes6eymyWwE7QS3mhmNXksTt2AN92PcGRtmDKLDPjuKrwd5tcJckFUekAK3H+6AMpwYy30CsiCJrDdFQ==",
+      "dependencies": {
+        "node-emoji": "1.10.0"
+      }
+    },
+    "node_modules/react-native-emojicon": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-emojicon/-/react-native-emojicon-1.0.0.tgz",
+      "integrity": "sha512-rK6/7EIf/yNgkB24ujpV8zmmZylbQV+oq4F7YopZ9aSfNKmVKKFmqGOPahPo6OW8b1Dg5dm8caybgfpM2GP4Nw=="
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.12.1",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz",
diff --git a/package.json b/package.json
index 7ba5f15..ed0b39d 100644
--- a/package.json
+++ b/package.json
@@ -42,10 +42,13 @@
     "expo-status-bar": "~1.6.0",
     "html-entities": "^2.4.0",
     "react": "18.2.0",
+    "react-apple-emojis": "^2.2.1",
     "react-native": "0.72.10",
     "react-native-dom-parser": "^1.5.3",
     "react-native-element-dropdown": "^2.10.0",
     "react-native-elements": "^3.4.3",
+    "react-native-emoji": "^1.8.0",
+    "react-native-emojicon": "^1.0.0",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-htmlview": "^0.16.0",
     "react-native-ionicons": "^4.6.5",
diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx
index 4301cb9..6232591 100644
--- a/src/components/ContentCard/ContentCard.tsx
+++ b/src/components/ContentCard/ContentCard.tsx
@@ -9,6 +9,7 @@ import {
 
 import styles from './styles';
 import globalStyles from '../../styles/globalStyles';
+import Emoji from 'react-native-emoji';
 
 type ContentCardProps = {
   title: string;
@@ -63,18 +64,22 @@ function ContentCard({
                 onPress={() => null}
                 style={{ flexDirection: 'row' }}
               >
-                <Image
-                  style={styles.reactions}
-                  source={require('./savedStoriesIcon.png')}
-                />
-                <Image
-                  style={styles.reactions}
-                  source={require('./savedStoriesIcon.png')}
-                />
-                <Image
-                  style={styles.reactions}
-                  source={require('./savedStoriesIcon.png')}
-                />
+                <View
+                  style={[styles.reactions, { backgroundColor: '#FFCCCB' }]}
+                >
+                  <Emoji name="heart" />
+                </View>
+                <View
+                  style={[styles.reactions, { backgroundColor: '#FFD580' }]}
+                >
+                  <Emoji name="clap" />
+                </View>
+                <View
+                  style={[styles.reactions, { backgroundColor: '#89CFF0' }]}
+                >
+                  <Emoji name="muscle" />
+                </View>
+                {/* heart, clap, muscle, cry, ??? */}
                 <View style={styles.reactionNumber}>
                   <Text style={[globalStyles.subtext, styles.reactionText]}>
                     14{/*change number to work*/}
@@ -84,7 +89,7 @@ function ContentCard({
             </View>
             <TouchableOpacity onPress={() => saveStory()}>
               <Image
-                style={{ width: 30, height: 30 }}
+                style={styles.saveStoryImage}
                 source={require('./savedStoriesIcon.png')}
               />
             </TouchableOpacity>
diff --git a/src/components/ContentCard/styles.ts b/src/components/ContentCard/styles.ts
index d445870..ad4a5aa 100644
--- a/src/components/ContentCard/styles.ts
+++ b/src/components/ContentCard/styles.ts
@@ -50,18 +50,26 @@ const styles = StyleSheet.create({
     color: colors.grey,
   },
   reactionNumber: {
-    marginLeft: 15,
-    marginTop: 10,
+    marginLeft: 10,
+    marginTop: 16,
   },
   reactions: {
-    width: 20,
-    height: 20,
-    borderRadius: 20 / 2,
+    width: 30,
+    height: 30,
+    borderRadius: 30 / 2,
     borderWidth: 1,
-    backgroundColor: '#89CFF0', //different per emoji reaction
+    backgroundColor: 'transparent', //different per emoji reaction
     borderColor: 'white',
     marginTop: 10,
-    marginRight: -10,
+    marginRight: -5, // -10
+    overflow: 'hidden',
+    justifyContent: 'center',
+    paddingLeft: 3,
+  },
+  saveStoryImage: {
+    width: 30,
+    height: 30,
+    marginTop: 10,
   },
   buttons: {
     flexDirection: 'row',
diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx
index 8272b57..6b1c927 100644
--- a/src/components/PreviewCard/PreviewCard.tsx
+++ b/src/components/PreviewCard/PreviewCard.tsx
@@ -4,8 +4,10 @@ import {
   Image,
   Pressable,
   Text,
+  TouchableOpacity,
   View,
 } from 'react-native';
+import Emoji from 'react-native-emoji';
 
 import styles from './styles';
 import globalStyles from '../../styles/globalStyles';
@@ -32,6 +34,10 @@ function PreviewCard({
   tags,
   pressFunction,
 }: PreviewCardProps) {
+  const saveStory = () => {
+    console.log("testing '+' icon does something for story " + title);
+  };
+
   return (
     <Pressable onPress={pressFunction}>
       <View style={styles.card}>
@@ -39,11 +45,17 @@ function PreviewCard({
           <Text numberOfLines={1} style={[globalStyles.h3, styles.title]}>
             {title}
           </Text>
+          <TouchableOpacity onPress={() => saveStory()}>
+            <Image
+              style={{ width: 30, height: 30 }}
+              source={require('./savedStoriesIcon.png')}
+            />
+          </TouchableOpacity>
         </View>
         <View style={styles.body}>
           <Image
             style={styles.image}
-            source={{ uri: image == '' ? placeholderImage : image }}
+            source={{ uri: image === '' ? placeholderImage : image }}
           />
           <View style={styles.cardTextContainer}>
             <View style={styles.authorContainer}>
@@ -64,6 +76,28 @@ function PreviewCard({
           </View>
         </View>
         <View style={styles.tagsContainer}>
+          <View>
+            <TouchableOpacity
+              onPress={() => null}
+              style={{ flexDirection: 'row' }}
+            >
+              <View style={[styles.reactions, { backgroundColor: '#FFCCCB' }]}>
+                <Emoji name="heart" />
+              </View>
+              <View style={[styles.reactions, { backgroundColor: '#FFD580' }]}>
+                <Emoji name="clap" />
+              </View>
+              <View style={[styles.reactions, { backgroundColor: '#89CFF0' }]}>
+                <Emoji name="muscle" />
+              </View>
+              {/* heart, clap, muscle, cry, ??? */}
+              <View style={styles.reactionNumber}>
+                <Text style={[globalStyles.subtext, styles.reactionText]}>
+                  14{/*change number to work*/}
+                </Text>
+              </View>
+            </TouchableOpacity>
+          </View>
           <View style={styles.tagsRow}>
             {(tags?.length ?? 0) > 0 && (
               <View style={styles.tag}>
@@ -72,12 +106,10 @@ function PreviewCard({
                 </Text>
               </View>
             )}
-          </View>
-          <View style={styles.moreTags}>
-            <Pressable>
+            <Pressable style={styles.moreTags}>
               <Text style={[globalStyles.subtext, styles.moreTagsText]}>
                 {' '}
-                + {(tags?.length ?? 1) - 1} more tags
+                + {(tags?.length ?? 1) - 1}
               </Text>
             </Pressable>
           </View>
diff --git a/src/components/PreviewCard/savedStoriesIcon.png b/src/components/PreviewCard/savedStoriesIcon.png
new file mode 100644
index 0000000..65b2ea6
Binary files /dev/null and b/src/components/PreviewCard/savedStoriesIcon.png differ
diff --git a/src/components/PreviewCard/styles.ts b/src/components/PreviewCard/styles.ts
index 493e306..0f4ffb2 100644
--- a/src/components/PreviewCard/styles.ts
+++ b/src/components/PreviewCard/styles.ts
@@ -49,8 +49,11 @@ const styles = StyleSheet.create({
   titleContainer: {
     paddingTop: 16,
     paddingLeft: 12,
+    paddingRight: 12,
     borderBottomColor: '#EBEBEB',
     borderBottomWidth: StyleSheet.hairlineWidth,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
   },
   tag: {
     paddingHorizontal: 8,
@@ -62,7 +65,6 @@ const styles = StyleSheet.create({
     marginBottom: 10,
   },
   tagsContainer: {
-    // backgroundColor: colors.darkGrey,
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -75,20 +77,40 @@ const styles = StyleSheet.create({
   },
   tagsRow: {
     flexDirection: 'row',
-    justifyContent: 'flex-start',
+    justifyContent: 'flex-end',
+    alignContent: 'flex-end',
     alignItems: 'center',
     flexWrap: 'wrap',
-    paddingTop: 4,
   },
   moreTags: {
     paddingVertical: 10,
     paddingRight: 12,
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'flex-end',
   },
   moreTagsText: {
     color: colors.darkGrey,
   },
+  reactions: {
+    width: 32,
+    height: 32,
+    borderRadius: 32 / 2,
+    borderWidth: 1,
+    backgroundColor: '#89CFF0', //different per emoji reaction
+    borderColor: 'white',
+    marginTop: 10,
+    marginRight: -5, // -10
+    overflow: 'hidden',
+    justifyContent: 'center',
+    paddingLeft: 4,
+  },
+  reactionText: {
+    color: colors.grey,
+  },
+  reactionNumber: {
+    marginLeft: 10,
+    marginTop: 16,
+  },
   storyDescription: {
     color: colors.darkGrey,
     paddingRight: 12,