diff --git a/package-lock.json b/package-lock.json
index 240aecf..94349f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6611,6 +6611,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-3.0.1.tgz",
       "integrity": "sha512-sxpmMKxqLvcscu6mFn9ITHeZNkGzIvD0BSNFE/LJESPbCA8s1jM6bCDPjWbV31xHq7JXaxgpHxLB54RCbBZSlg==",
+      "license": "BSD-3-Clause",
       "dependencies": {
         "@babel/runtime": "^7.0.0",
         "prop-types": "^15.6.0"
diff --git a/src/api/types.ts b/src/api/types.ts
index f75edad..6193f2a 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -27,6 +27,7 @@ export interface Goal {
   accountId: string
   transactionIds: string[]
   tagIds: string[]
+  icon?: string
 }
 
 export interface Tag {
diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx
index 0779dda..60d8ca4 100644
--- a/src/ui/features/goalmanager/GoalManager.tsx
+++ b/src/ui/features/goalmanager/GoalManager.tsx
@@ -11,6 +11,7 @@ import { selectGoalsMap, updateGoal as updateGoalRedux } from '../../../store/go
 import { useAppDispatch, useAppSelector } from '../../../store/hooks'
 import DatePicker from '../../components/DatePicker'
 import { Theme } from '../../components/Theme'
+import { Picker } from 'emoji-mart'
 
 type Props = { goal: Goal }
 export function GoalManager(props: Props) {
@@ -21,6 +22,7 @@ export function GoalManager(props: Props) {
   const [name, setName] = useState<string | null>(null)
   const [targetDate, setTargetDate] = useState<Date | null>(null)
   const [targetAmount, setTargetAmount] = useState<number | null>(null)
+  const [emoji, setEmoji] = useState<string>("🎯")
 
   useEffect(() => {
     setName(props.goal.name)
@@ -43,6 +45,7 @@ export function GoalManager(props: Props) {
     const updatedGoal: Goal = {
       ...props.goal,
       name: nextName,
+      icon: emoji,
     }
     dispatch(updateGoalRedux(updatedGoal))
     updateGoalApi(props.goal.id, updatedGoal)
@@ -56,6 +59,7 @@ export function GoalManager(props: Props) {
       name: name ?? props.goal.name,
       targetDate: targetDate ?? props.goal.targetDate,
       targetAmount: nextTargetAmount,
+      icon: emoji,
     }
     dispatch(updateGoalRedux(updatedGoal))
     updateGoalApi(props.goal.id, updatedGoal)
@@ -69,11 +73,28 @@ export function GoalManager(props: Props) {
         name: name ?? props.goal.name,
         targetDate: date ?? props.goal.targetDate,
         targetAmount: targetAmount ?? props.goal.targetAmount,
+        icon: emoji,
       }
       dispatch(updateGoalRedux(updatedGoal))
       updateGoalApi(props.goal.id, updatedGoal)
     }
   }
+  const pickEmojiOnClick = async (e: any) => {
+  const selectedEmoji = e.native
+
+  setEmoji(selectedEmoji)
+
+  const updatedGoal: Goal = {
+    ...props.goal,
+    icon: selectedEmoji,
+    name: name ?? props.goal.name,
+    targetDate: targetDate ?? props.goal.targetDate,
+    targetAmount: targetAmount ?? props.goal.targetAmount,
+  }
+
+  dispatch(updateGoalRedux(updatedGoal))
+  await updateGoalApi(props.goal.id, updatedGoal)
+}
 
   return (
     <GoalManagerContainer>
@@ -106,6 +127,13 @@ export function GoalManager(props: Props) {
           <StringValue>{new Date(props.goal.created).toLocaleDateString()}</StringValue>
         </Value>
       </Group>
+
+      <Group>
+        <Field name="Emoji" icon={faCalendarAlt} />
+        <Value>
+          <Picker onSelect={pickEmojiOnClick} />
+        </Value>
+      </Group>
     </GoalManagerContainer>
   )
 }
diff --git a/src/ui/pages/Main/goals/GoalCard.tsx b/src/ui/pages/Main/goals/GoalCard.tsx
index e8f6d0a..01fc0ed 100644
--- a/src/ui/pages/Main/goals/GoalCard.tsx
+++ b/src/ui/pages/Main/goals/GoalCard.tsx
@@ -15,6 +15,7 @@ export default function GoalCard(props: Props) {
   const dispatch = useAppDispatch()
 
   const goal = useAppSelector(selectGoalsMap)[props.id]
+  console.log(goal)
 
   const onClick = (event: React.MouseEvent) => {
     event.stopPropagation()
@@ -27,6 +28,9 @@ export default function GoalCard(props: Props) {
 
   return (
     <Container key={goal.id} onClick={onClick}>
+      <span style={{ fontSize: "2rem"}}>
+      {goal?.icon ?? "🎯"}
+      </span>
       <TargetAmount>${goal.targetAmount}</TargetAmount>
       <TargetDate>{asLocaleDateString(goal.targetDate)}</TargetDate>
     </Container>
diff --git a/src/ui/pages/Main/goals/GoalControllerTests.cs b/src/ui/pages/Main/goals/GoalControllerTests.cs
new file mode 100644
index 0000000..e7a5d89
--- /dev/null
+++ b/src/ui/pages/Main/goals/GoalControllerTests.cs
@@ -0,0 +1,38 @@
+using Xunit;
+
+public class GoalControllerTests
+{
+    private readonly FakeCollections collections;
+
+    public GoalControllerTests()
+    {
+        collections = new();
+    }
+
+    [Fact]
+    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
diff --git a/tsconfig.json b/tsconfig.json
index a273b0c..331fee0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2017",
     "lib": [
       "dom",
       "dom.iterable",