diff --git a/.gitignore b/.gitignore
index f36d0a2..de7c3d1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,9 @@
 node_modules
 package-lock.json
 
+# yarn
+yarn.lock
+
 
 *.js.map
 
diff --git a/.hotreload b/.hotreload
new file mode 100644
index 0000000..e69de29
diff --git a/src/view/Components/Taskview/Rewardview/RewardItem.tsx b/src/view/Components/Taskview/Rewardview/RewardItem.tsx
new file mode 100644
index 0000000..0a23b2d
--- /dev/null
+++ b/src/view/Components/Taskview/Rewardview/RewardItem.tsx
@@ -0,0 +1,13 @@
+import Emoji from "react-emoji-render";
+import * as React from "react";
+
+function RewardItem(props: any) {
+    return (
+        <div className="reward-item" id={props.id}>
+            <button className="reward-click" id={props.id} onClick={props.onChange}>-{props.reward_value}</button>
+            <p className="reward-text"><Emoji text={props.reward_text}></Emoji></p>
+        </div>
+    )
+}
+
+export default RewardItem
\ No newline at end of file
diff --git a/src/view/Components/Taskview/Rewardview/index.tsx b/src/view/Components/Taskview/Rewardview/index.tsx
new file mode 100644
index 0000000..6ef7a61
--- /dev/null
+++ b/src/view/Components/Taskview/Rewardview/index.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import RewardItem from "./RewardItem"
+
+export default function Index(props: any){
+    if(props.rewards == undefined) {
+        return (<div id="classDisplay">
+                    No Rewards present.
+                </div>)
+    }
+    else {
+        const allRewards = props.rewards.map((reward: any) => {
+            return <RewardItem key={reward.id} id={reward.id} reward_text={reward.text} reward_value={reward.value} onChange={props.onChange}/>
+        })
+        const display = <div id="classDisplay">
+                            <ul>{allRewards}</ul>
+                        </div>
+
+        return(display);
+    }
+}
+