diff --git a/app/src/components/GoalDetails.js b/app/src/components/GoalDetails.js
index bd831d3..0c756d3 100644
--- a/app/src/components/GoalDetails.js
+++ b/app/src/components/GoalDetails.js
@@ -93,6 +93,18 @@ function GoalDetails() {
     );
   }
 
+  const getProgressValue = () => {
+    if (!goalDetails.goal_practice_times) {
+      return 0;
+    }
+
+    if (goalDetails.goal_practice_times >= goalDetails.goal_times) {
+      return 100;
+    }
+
+    return (goalDetails.goal_practice_times * 100) / goalDetails.goal_times;
+  };
+
   return (
     <>
       <Header logoutUser={logoutUser} />
@@ -119,7 +131,7 @@ function GoalDetails() {
               <Typography variant="body1"><b>Progress:</b></Typography>
             </Box>
             <CircularProgressWithLabel
-              value={goalDetails.goal_practice_times ? (goalDetails.goal_practice_times * 100) / goalDetails.goal_times : 0}
+              value={getProgressValue()}
             />
             <Box pt={2}>
               {goalDetails.goal_practice_times < goalDetails.goal_times && (
@@ -134,7 +146,7 @@ function GoalDetails() {
                 </Button>
               )}
               {goalDetails.goal_practice_times >= goalDetails.goal_times && (
-                <Typography variant="h6">Congrats! You've completed this goal already.</Typography>
+                <Typography variant="body1">Congrats! You've completed this goal :)</Typography>
               )}
             </Box>
           </Box>
diff --git a/app/src/components/Homepage.js b/app/src/components/Homepage.js
index a0d1f2c..6d62b9f 100644
--- a/app/src/components/Homepage.js
+++ b/app/src/components/Homepage.js
@@ -101,6 +101,18 @@ function Homepage() {
     setIsAuthed(isAuthenticated());
   };
 
+  const getProgressValue = (goalDetails) => {
+    if (!goalDetails.goal_practice_times) {
+      return 0;
+    }
+
+    if (goalDetails.goal_practice_times >= goalDetails.goal_times) {
+      return 100;
+    }
+
+    return (goalDetails.goal_practice_times * 100) / goalDetails.goal_times;
+  };
+
   const getExistingGoalsTable = () => {
     if (!existingGoals.length) {
       return (
@@ -152,7 +164,7 @@ function Homepage() {
                 <TableCell>{moment(row.goal_end_date).format('MMM D, YYYY')}</TableCell>
                 <TableCell>
                   <CircularProgressWithLabel
-                    value={row.goal_practice_times ? (row.goal_practice_times * 100) / row.goal_times : 0}
+                    value={getProgressValue()}
                   />
                 </TableCell>
                 <TableCell align="right">