diff --git a/package.json b/package.json
index 4acb414..344ca09 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "node-fetch": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-emoji-render": "^1.2.4",
     "react-tabs": "^3.2.2"
   }
 }
diff --git a/src/view/Components/Taskview/Dailiesview/DailyItem.tsx b/src/view/Components/Taskview/Dailiesview/DailyItem.tsx
index 40650af..d2d308e 100644
--- a/src/view/Components/Taskview/Dailiesview/DailyItem.tsx
+++ b/src/view/Components/Taskview/Dailiesview/DailyItem.tsx
@@ -1,10 +1,11 @@
- import * as React from "react";
+import Emoji from "react-emoji-render";
+import * as React from "react";
 
 function DailyItem(props: any) {
     return (
         <div className="todo-item" id={props.id}>
             <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
-            <p>{props.daily_text}</p>
+            <p><Emoji text={props.daily_text}></Emoji></p>
         </div>
     )
 }
diff --git a/src/view/Components/Taskview/Habitsview/HabitItem.tsx b/src/view/Components/Taskview/Habitsview/HabitItem.tsx
index faff665..fa397cc 100644
--- a/src/view/Components/Taskview/Habitsview/HabitItem.tsx
+++ b/src/view/Components/Taskview/Habitsview/HabitItem.tsx
@@ -1,4 +1,5 @@
- import * as React from "react";
+import Emoji from "react-emoji-render";
+import * as React from "react";
 
 function HabitItem(props: any) {
     return (
@@ -6,7 +7,7 @@ function HabitItem(props: any) {
             <button className="habit-plus" id={"plus"+props.id} onClick={props.onChange}>
                 +{props.upCount}
             </button>
-            <p className="habit-text">{props.habit_text}</p>
+            <p className="habit-text"><Emoji text = {props.habit_text}></Emoji></p>
             <button className="habit-minus" id={"mins"+props.id} onClick={props.onChange}>
                 -{props.downCount}
             </button>
diff --git a/src/view/Components/Taskview/TodoItem.tsx b/src/view/Components/Taskview/TodoItem.tsx
index 4adc70f..c02e230 100644
--- a/src/view/Components/Taskview/TodoItem.tsx
+++ b/src/view/Components/Taskview/TodoItem.tsx
@@ -1,10 +1,11 @@
- import * as React from "react";
+import { Emoji } from 'react-emoji-render';
+import * as React from "react";
 
 function TodoItem(props: any) {
     return (
         <div className="todo-item" id={props.id}>
             <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
-            <p>{props.todo_text}</p>
+            <Emoji text = {props.todo_text}></Emoji>
         </div>
     )
 }
diff --git a/src/view/Components/Taskview/Todoview/TodoItem.tsx b/src/view/Components/Taskview/Todoview/TodoItem.tsx
index 4adc70f..2766dbe 100644
--- a/src/view/Components/Taskview/Todoview/TodoItem.tsx
+++ b/src/view/Components/Taskview/Todoview/TodoItem.tsx
@@ -1,10 +1,11 @@
- import * as React from "react";
+import Emoji from "react-emoji-render";
+import * as React from "react";
 
 function TodoItem(props: any) {
     return (
         <div className="todo-item" id={props.id}>
             <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
-            <p>{props.todo_text}</p>
+            <p><Emoji text ={props.todo_text}></Emoji></p>
         </div>
     )
 }
diff --git a/styles.css b/styles.css
index bdb8bd1..423fe18 100644
--- a/styles.css
+++ b/styles.css
@@ -23,7 +23,7 @@
 .habit-text {
   text-align: center !important;
   padding: 0px;
-  width: 80px;
+  width: 50%;
   margin-right: 20px;
 }