diff --git a/package-lock.json b/package-lock.json
index 29103250..9b8667b7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24950,6 +24950,14 @@
         "tree-changes": "^0.5.1"
       }
     },
+    "react-kawaii": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/react-kawaii/-/react-kawaii-0.16.0.tgz",
+      "integrity": "sha512-ZD8QkK8pQbLdV391aJ4CAwuFq2rxVeRhYIsyj9d9q68aobFjcs3UwmGOFgSLWoI642ecXJD/4wBscYXMCcCWJw==",
+      "requires": {
+        "prop-types": "^15.6.2"
+      }
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
diff --git a/package.json b/package.json
index d0dee47b..190a2d5b 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "react-i18next": "^11.7.3",
     "react-if": "^4.0.1",
     "react-joyride": "^2.1.1",
+    "react-kawaii": "^0.16.0",
     "react-mailto.js": "^2.1.0",
     "react-redux": "^7.2.2",
     "react-redux-firebase": "^3.0.5",
diff --git a/src/@types/libraries.d.ts b/src/@types/libraries.d.ts
index 2043c094..18e9d0b8 100644
--- a/src/@types/libraries.d.ts
+++ b/src/@types/libraries.d.ts
@@ -1,2 +1,3 @@
 declare module 'react-use-toggle';
+declare module 'react-kawaii';
 declare module 'react-firebaseui-localized';
diff --git a/src/RouterAndDataLoader.tsx b/src/RouterAndDataLoader.tsx
index 568cf940..7087bed2 100644
--- a/src/RouterAndDataLoader.tsx
+++ b/src/RouterAndDataLoader.tsx
@@ -44,7 +44,6 @@ export default memo((props: { children?: JSX.Element }) => {
   const [today, setToday] = useState(Date.now());
   const yesterday = subHours(today, getHours(today)).getTime();
 
-  // Refetch data every hour.
   useInterval(() => {
     console.log('Refetching data every hour...');
     setToday(Date.now());
diff --git a/src/components/ui/EmotionIconButton/EmotionIconButton.tsx b/src/components/ui/EmotionIconButton/EmotionIconButton.tsx
index 4a04a56b..e00c5ec4 100644
--- a/src/components/ui/EmotionIconButton/EmotionIconButton.tsx
+++ b/src/components/ui/EmotionIconButton/EmotionIconButton.tsx
@@ -1,24 +1,47 @@
-import { Fab } from '@material-ui/core';
+import { IconButton, useTheme } from '@material-ui/core';
 import React, { memo } from 'react';
-import { Icon } from '../../ui/Icon';
+import { Planet } from 'react-kawaii';
+
+type EmotionTypes = 'happy_face' | 'sad_face';
 
 export interface EmotionIconButtonProps {
-  type: 'happy_face' | 'sad_face';
-  color?: 'primary' | 'secondary';
+  type: EmotionTypes;
   onClick?: (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
   ) => void;
 }
-
 const EmotionIconButton = memo(function EmotionIconButton({
   type,
-  color = 'secondary',
   onClick,
 }: EmotionIconButtonProps) {
+  const theme = useTheme();
+
+  function geticon() {
+    const kawaiiIconSize = 75;
+    switch (type) {
+      case 'happy_face':
+        return (
+          <Planet
+            mood="happy"
+            size={kawaiiIconSize}
+            color={theme.palette.primary.main}
+          />
+        );
+      case 'sad_face':
+        return (
+          <Planet
+            mood="sad"
+            size={kawaiiIconSize}
+            color={theme.palette.secondary.main}
+          />
+        );
+    }
+  }
+
   return (
-    <Fab color={color} onClick={onClick}>
-      <Icon code={type} size="large" />
-    </Fab>
+    <IconButton style={{ padding: 0 }} onClick={onClick}>
+      {geticon()}
+    </IconButton>
   );
 });
 
diff --git a/src/components/unsorted/Autocomplete/Autocomplete.tsx b/src/components/unsorted/Autocomplete/Autocomplete.tsx
index 7a95ffac..df1820b9 100644
--- a/src/components/unsorted/Autocomplete/Autocomplete.tsx
+++ b/src/components/unsorted/Autocomplete/Autocomplete.tsx
@@ -35,7 +35,7 @@ const Autocomplete = memo(function Autocomplete(
         filterOptions={(options, params) => {
           const filtered = filter(options, params);
 
-          // Suggest the creation of a new value
+          // Suggest the creation of a new value.
           if (params.inputValue !== '') {
             filtered.push({
               // TODO this.
diff --git a/src/components/unsorted/WhatDoYouFeelAboutTheTask.tsx b/src/components/unsorted/WhatDoYouFeelAboutTheTask.tsx
index 47ab893c..88d69580 100644
--- a/src/components/unsorted/WhatDoYouFeelAboutTheTask.tsx
+++ b/src/components/unsorted/WhatDoYouFeelAboutTheTask.tsx
@@ -33,7 +33,7 @@ const WhatDoYouFeelAboutTheTask = memo((props: Props) => {
             </Grid>
             <Grid item xs>
               <Link to={`${url}/isTroublesome`}>
-                <EmotionIconButton type="sad_face" color="primary" />
+                <EmotionIconButton type="sad_face" />
               </Link>
             </Grid>
           </Grid>
diff --git a/src/components/unsorted/WhatDoYouFeelSlider.tsx b/src/components/unsorted/WhatDoYouFeelSlider.tsx
index 1f016f78..b2a82890 100644
--- a/src/components/unsorted/WhatDoYouFeelSlider.tsx
+++ b/src/components/unsorted/WhatDoYouFeelSlider.tsx
@@ -14,7 +14,7 @@ const WhatDoYouFeelSlider = memo(function WhatDoYouFeelSlider(
       <Grid item container justify="space-between">
         <Grid item xs={2}>
           <Box textAlign="center">
-            <EmotionIconButton color="primary" type="sad_face" />
+            <EmotionIconButton type="sad_face" />
           </Box>
         </Grid>
         <Grid item xs>