diff --git a/CommBank-Server/Models/Goal.cs b/CommBank-Server/Models/Goal.cs
index 77ff1ad5..c56e3784 100644
--- a/CommBank-Server/Models/Goal.cs
+++ b/CommBank-Server/Models/Goal.cs
@@ -1,30 +1,61 @@
-using MongoDB.Bson;
-using MongoDB.Bson.Serialization.Attributes;
-
-namespace CommBank.Models;
-
-public class Goal
-{
-    [BsonId]
-    [BsonRepresentation(BsonType.ObjectId)]
-    public string? Id { get; set; }
-
-    public string? Name { get; set; }
-
-    public UInt64 TargetAmount { get; set; } = 0;
-
-    public DateTime TargetDate { get; set; }
-
-    public double Balance { get; set; } = 0.00;
-
-    public DateTime Created { get; set; } = DateTime.Now;
-
-    [BsonRepresentation(BsonType.ObjectId)]
-    public List<string>? TransactionIds { get; set; }
-
-    [BsonRepresentation(BsonType.ObjectId)]
-    public List<string>? TagIds { get; set; }
-
-    [BsonRepresentation(BsonType.ObjectId)]
-    public string? UserId { get; set; }
-}
\ No newline at end of file
+import React from 'react'
+import styled from 'styled-components'
+import { selectGoalsMap } from '../../../../store/goalsSlice'
+import { useAppDispatch, useAppSelector } from '../../../../store/hooks'
+import {
+  setContent as setContentRedux,
+  setIsOpen as setIsOpenRedux,
+  setType as setTypeRedux
+} from '../../../../store/modalSlice'
+import { Card } from '../../../components/Card'
+
+type Props = { id: string }
+
+export default function GoalCard(props: Props) {
+  const dispatch = useAppDispatch()
+
+  const goal = useAppSelector(selectGoalsMap)[props.id]
+
+  const onClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    dispatch(setContentRedux(goal))
+    dispatch(setTypeRedux('Goal'))
+    dispatch(setIsOpenRedux(true))
+  }
+
+  const asLocaleDateString = (date: Date) => new Date(date).toLocaleDateString()
+
+  return (
+    <Container key={goal.id} onClick={onClick}>
+      <TargetAmount>${goal.targetAmount}</TargetAmount>
+      <TargetDate>{asLocaleDateString(goal.targetDate)}</TargetDate>
+      <Icon>{goal.icon}</Icon>
+    </Container>
+  )
+}
+
+const Container = styled(Card)`
+  display: flex;
+  flex-direction: column;
+  min-height: 140px;
+  min-width: 140px;
+  width: 33%;
+  cursor: pointer;
+  margin-left: 2rem;
+  margin-right: 2rem;
+  border-radius: 2rem;
+
+  align-items: center;
+`
+const TargetAmount = styled.h2`
+  font-size: 2rem;
+`
+
+const TargetDate = styled.h4`
+  color: rgba(174, 174, 174, 1);
+  font-size: 1rem;
+`
+
+const Icon = styled.h1`
+  font-size: 5.5rem;
+`
diff --git a/CommBank.Tests/GoalControllerTests.cs b/CommBank.Tests/GoalControllerTests.cs
index 8380181f..8ceabe9b 100644
--- a/CommBank.Tests/GoalControllerTests.cs
+++ b/CommBank.Tests/GoalControllerTests.cs
@@ -1,4 +1,4 @@
-using CommBank.Controllers;
+using CommBank.Controllers;
 using CommBank.Services;
 using CommBank.Models;
 using CommBank.Tests.Fake;
@@ -66,9 +66,26 @@ public async void Get()
     public async void GetForUser()
     {
         // Arrange
-        
+        var goals = collections.GetGoals();
+        var users = collections.GetUsers();
+        IGoalsService goalsService = new FakeGoalsService(goals, goals[0]);
+        IUsersService usersService = new FakeUsersService(users, users[0]);
+        GoalController controller = new(goalsService, usersService);
+
         // Act
-        
+        var httpContext = new Microsoft.AspNetCore.Http.DefaultHttpContext();
+        controller.ControllerContext.HttpContext = httpContext;
+        var result = await controller.GetForUser(goals[0].UserId!);
+
         // Assert
+        Assert.NotNull(result);
+
+        var index = 0;
+        foreach (Goal goal in result!)
+        {
+            Assert.IsAssignableFrom<Goal>(goal);
+            Assert.Equal(goals[0].UserId, goal.UserId);
+            index++;
+        }
     }
-}
\ No newline at end of file
+}