diff --git a/src/components/practicePage/PageMenu/SocialLinks.js b/src/components/practicePage/PageMenu/SocialLinks.js
index c3b6974..5584484 100644
--- a/src/components/practicePage/PageMenu/SocialLinks.js
+++ b/src/components/practicePage/PageMenu/SocialLinks.js
@@ -1,10 +1,23 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import { EmailShareButton, TwitterShareButton, LinkedinShareButton, PinterestShareButton, RedditShareButton, FacebookShareButton } from "react-share";
-import { FacebookIcon, RedditIcon, PinterestIcon, TwitterIcon, MoreItemsIcon, NounLoveIcon, LinkedInIcon, EmailIcon } from "../../../assets/icons";
-import { useMutation } from "@apollo/react-hooks";
-import { LIKE_PRACTICE } from "../../../graphql/";
-import { Typography, Grid, IconButton, Popover } from '@material-ui/core';
+import {
+  EmailShareButton,
+  TwitterShareButton,
+  LinkedinShareButton,
+  PinterestShareButton,
+  RedditShareButton,
+  FacebookShareButton,
+} from "react-share";
+import {
+  FacebookIcon,
+  RedditIcon,
+  PinterestIcon,
+  TwitterIcon,
+  MoreItemsIcon,
+  LinkedInIcon,
+  EmailIcon,
+} from "../../../assets/icons";
+import { Typography, Grid, IconButton, Popover } from "@material-ui/core";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -21,35 +34,27 @@ const useStyles = makeStyles((theme) => ({
     borderColor: theme.palette.primary.main,
     borderStyle: "solid",
     textAlign: "center",
-    padding: theme.spacing(2,4),
+    padding: theme.spacing(2, 4),
   },
 }));
 
-const StyledPopover = ((props) =>(
+const StyledPopover = (props) => (
   <Popover
     anchorOrigin={{
-      vertical: 'bottom',
-      horizontal: 'right',
+      vertical: "bottom",
+      horizontal: "right",
     }}
     transformOrigin={{
-      vertical: 'top',
-      horizontal: 'right',
-    }}{...props} 
+      vertical: "top",
+      horizontal: "right",
+    }}
+    {...props}
   />
-));
+);
 
 export default function SocialLinks(props) {
   const classes = useStyles();
 
-  const [likePractice] = useMutation(LIKE_PRACTICE);
-  const handleLike = () => {
-    const originalLikes = props.upvotes;
-    const newUpvotes = originalLikes + 1;
-    likePractice({
-      variables: {practiceId: props.practiceId, upvotes: newUpvotes},
-    });
-  };
-
   const [anchorEl, setAnchorEl] = React.useState(null);
 
   const handleClick = (event) => {
@@ -61,32 +66,13 @@ export default function SocialLinks(props) {
   };
 
   const open = Boolean(anchorEl);
-  const id = open ? 'simple-popover' : undefined;
+  const id = open ? "simple-popover" : undefined;
 
   return (
     <>
-      <Grid
-        container
-        direction="row"
-        className={classes.root}
-        spacing={1}
-      >
-        <Grid item xs={3}>
-          <Typography
-            className={classes.url}
-            variant="overline"
-          >
-            Like
-          </Typography>
-          <IconButton onClick={handleLike} data-testid={"heartIcon"}>
-            <NounLoveIcon/>
-          </IconButton>
-        </Grid>
+      <Grid container direction="row" className={classes.root} spacing={1}>
         <Grid item>
-          <Typography
-            className={classes.url}
-            variant="overline"
-          >
+          <Typography className={classes.url} variant="overline">
             Share{" "}
           </Typography>
         </Grid>
@@ -102,12 +88,12 @@ export default function SocialLinks(props) {
         </Grid>
         <Grid item>
           <LinkedinShareButton url={window.location.href}>
-            <LinkedInIcon/>
+            <LinkedInIcon />
           </LinkedinShareButton>
         </Grid>
         <Grid item>
           <IconButton aria-describedby={id} onClick={handleClick}>
-            <MoreItemsIcon/>
+            <MoreItemsIcon />
           </IconButton>
           <StyledPopover
             id={id}
@@ -125,18 +111,21 @@ export default function SocialLinks(props) {
               spacing={2}
             >
               <Grid item>
-                <PinterestShareButton url={window.location.href} media={props.coverImage}>
-                  <PinterestIcon/>
+                <PinterestShareButton
+                  url={window.location.href}
+                  media={props.coverImage}
+                >
+                  <PinterestIcon />
                 </PinterestShareButton>
               </Grid>
               <Grid item>
                 <RedditShareButton url={window.location.href}>
-                  <RedditIcon/>
+                  <RedditIcon />
                 </RedditShareButton>
               </Grid>
               <Grid item>
                 <FacebookShareButton url={window.location.href}>
-                  <FacebookIcon/>
+                  <FacebookIcon />
                 </FacebookShareButton>
               </Grid>
             </Grid>
@@ -145,4 +134,4 @@ export default function SocialLinks(props) {
       </Grid>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/practicePage/PageMenu/__tests__/SocialLinks.js b/src/components/practicePage/PageMenu/__tests__/SocialLinks.js
deleted file mode 100644
index 48632ab..0000000
--- a/src/components/practicePage/PageMenu/__tests__/SocialLinks.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-import {cleanup, fireEvent, render, waitFor} from "@testing-library/react";
-import "@testing-library/jest-dom/extend-expect";
-import {MockedProvider} from "@apollo/react-testing";
-import SocialLinks from "../SocialLinks";
-import {LIKE_PRACTICE} from "../../../../graphql";
-
-afterEach(cleanup);
-
-const mockProps = {
-  practiceId: "aFak3ID4y0U",
-  upvotes: 42,
-}
-
-it("modifies upvotes when mutation is run", async () => {
-  let practiceLiked = false;
-  const likedPractice = {
-    data: {
-      updatePractice: {
-        __typename: "updatePracticePayload",
-        practice: {
-          __typename: "Practice",
-          id: "aFak3ID4y0U",
-          upvotes: 43,
-        },
-      },
-    },
-  };
-
-  const apolloMocks = [
-    {
-      request: {
-        query: LIKE_PRACTICE,
-        variables: {
-          practiceId: "aFak3ID4y0U",
-          upvotes: 43,
-        },
-      },
-      result: () => {
-        practiceLiked = true;
-        return likedPractice;
-      },
-    },
-  ];
-
-  const {getByTestId} = render(
-      <MockedProvider mocks={apolloMocks}>
-        <SocialLinks {...mockProps} />
-      </MockedProvider>
-  );
-
-  expect(getByTestId("heartIcon"));
-  fireEvent.click(getByTestId("heartIcon"));
-  await waitFor(() => expect(practiceLiked).toBe(true));
-});
diff --git a/src/components/shared/Collection/index.js b/src/components/shared/Collection/index.js
index f34ddf0..243c3bd 100644
--- a/src/components/shared/Collection/index.js
+++ b/src/components/shared/Collection/index.js
@@ -3,18 +3,21 @@ import { AmaIcon, CameraIcon, FilledHeartIcon } from "../../../assets/icons";
 import { useMutation } from "@apollo/react-hooks";
 import { LIKE_PRACTICE } from "../../../graphql/";
 
-import { Box } from '@material-ui/core';
+import { Box } from "@material-ui/core";
 import OplTypography from "../components/OplTypography";
 
 const Collection = (props) => {
   const [likePractice] = useMutation(LIKE_PRACTICE);
 
+  const [upvoteNotClicked, setUpvoteNotClicked] = React.useState(true);
+
   const handleLike = () => {
     const originalLikes = props.upvotes;
     const newUpvotes = originalLikes + 1;
     likePractice({
       variables: { practiceId: props.practiceId, upvotes: newUpvotes },
     });
+    setUpvoteNotClicked(false);
   };
 
   return (
@@ -25,14 +28,25 @@ const Collection = (props) => {
       py={props.alignment}
     >
       {props.children}
-      <OplTypography
-        fontWeight="bold"
-        variant="subtitle1"
-        data-testid="heartIcon"
-        onClick={handleLike}
-      >
-        <FilledHeartIcon fill={props.fill} /> {props.upvotes}{" "}
-      </OplTypography>
+      {upvoteNotClicked ? (
+        <OplTypography
+          fontWeight="bold"
+          variant="subtitle1"
+          data-testid="heartIcon"
+          onClick={handleLike}
+        >
+          <FilledHeartIcon fill={props.fill} /> {props.upvotes}{" "}
+        </OplTypography>
+      ) : (
+        <OplTypography
+          fontWeight="bold"
+          variant="subtitle1"
+          data-testid="heartIcon"
+        >
+          <FilledHeartIcon fill="#DDDDDD"/> {props.upvotes}{" "}
+        </OplTypography>
+      )}
+
       <OplTypography
         fontWeight="bold"
         variant="subtitle1"
@@ -50,6 +64,6 @@ const Collection = (props) => {
       </OplTypography>
     </Box>
   );
-}
+};
 
 export default Collection;