diff --git a/index.html b/index.html
index 3a5b0de1..ec775e6f 100644
--- a/index.html
+++ b/index.html
@@ -23,30 +23,30 @@ <h1>All files</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">41.49% </span>
+                <span class="strong">41.24% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>278/670</span>
+                <span class='fraction'>292/708</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">33.19% </span>
+                <span class="strong">29.12% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>78/235</span>
+                <span class='fraction'>83/285</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">34.01% </span>
+                <span class="strong">33.16% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>67/197</span>
+                <span class='fraction'>67/202</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">41.93% </span>
+                <span class="strong">41.57% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>265/632</span>
+                <span class='fraction'>279/671</span>
             </div>
         
             
@@ -80,17 +80,17 @@ <h1>All files</h1>
 </thead>
 <tbody><tr>
 	<td class="file medium" data-value="src"><a href="src/index.html">src</a></td>
-	<td data-value="67.14" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 67%"></div><div class="cover-empty" style="width: 33%"></div></div>
+	<td data-value="59.14" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 59%"></div><div class="cover-empty" style="width: 41%"></div></div>
 	</td>
-	<td data-value="67.14" class="pct medium">67.14%</td>
-	<td data-value="140" class="abs medium">94/140</td>
-	<td data-value="69.69" class="pct medium">69.69%</td>
-	<td data-value="33" class="abs medium">23/33</td>
-	<td data-value="52.38" class="pct medium">52.38%</td>
-	<td data-value="42" class="abs medium">22/42</td>
-	<td data-value="70.49" class="pct medium">70.49%</td>
-	<td data-value="122" class="abs medium">86/122</td>
+	<td data-value="59.14" class="pct medium">59.14%</td>
+	<td data-value="164" class="abs medium">97/164</td>
+	<td data-value="40.35" class="pct low">40.35%</td>
+	<td data-value="57" class="abs low">23/57</td>
+	<td data-value="50" class="pct medium">50%</td>
+	<td data-value="44" class="abs medium">22/44</td>
+	<td data-value="60.54" class="pct medium">60.54%</td>
+	<td data-value="147" class="abs medium">89/147</td>
 	</tr>
 
 <tr>
@@ -185,17 +185,17 @@ <h1>All files</h1>
 
 <tr>
 	<td class="file low" data-value="src/component/taskButton"><a href="src/component/taskButton/index.html">src/component/taskButton</a></td>
-	<td data-value="43.18" class="pic low">
-	<div class="chart"><div class="cover-fill" style="width: 43%"></div><div class="cover-empty" style="width: 57%"></div></div>
+	<td data-value="49.09" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 49%"></div><div class="cover-empty" style="width: 51%"></div></div>
 	</td>
-	<td data-value="43.18" class="pct low">43.18%</td>
-	<td data-value="44" class="abs low">19/44</td>
-	<td data-value="44.44" class="pct low">44.44%</td>
-	<td data-value="9" class="abs low">4/9</td>
-	<td data-value="41.66" class="pct low">41.66%</td>
-	<td data-value="12" class="abs low">5/12</td>
-	<td data-value="43.18" class="pct low">43.18%</td>
-	<td data-value="44" class="abs low">19/44</td>
+	<td data-value="49.09" class="pct low">49.09%</td>
+	<td data-value="55" class="abs low">27/55</td>
+	<td data-value="25.71" class="pct low">25.71%</td>
+	<td data-value="35" class="abs low">9/35</td>
+	<td data-value="33.33" class="pct low">33.33%</td>
+	<td data-value="15" class="abs low">5/15</td>
+	<td data-value="49.09" class="pct low">49.09%</td>
+	<td data-value="55" class="abs low">27/55</td>
 	</tr>
 
 <tr>
@@ -258,6 +258,21 @@ <h1>All files</h1>
 	<td data-value="20" class="abs low">1/20</td>
 	</tr>
 
+<tr>
+	<td class="file high" data-value="src/utils"><a href="src/utils/index.html">src/utils</a></td>
+	<td data-value="100" class="pic high">
+	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
+	</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="3" class="abs high">3/3</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="3" class="abs high">3/3</td>
+	</tr>
+
 </tbody>
 </table>
 </div>
@@ -266,7 +281,7 @@ <h1>All files</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="prettify.js"></script>
         <script>
diff --git a/src/App.js.html b/src/App.js.html
index 3b22bbe2..0f9974ff 100644
--- a/src/App.js.html
+++ b/src/App.js.html
@@ -23,30 +23,30 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> App.js<
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">72.86% </span>
+                <span class="strong">63.39% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>94/129</span>
+                <span class='fraction'>97/153</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">79.31% </span>
+                <span class="strong">43.39% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>23/29</span>
+                <span class='fraction'>23/53</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">55% </span>
+                <span class="strong">52.38% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>22/40</span>
+                <span class='fraction'>22/42</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">77.47% </span>
+                <span class="strong">65.44% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>86/111</span>
+                <span class='fraction'>89/136</span>
             </div>
         
             
@@ -379,7 +379,66 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> App.js<
 <a name='L314'></a><a href='#L314'>314</a>
 <a name='L315'></a><a href='#L315'>315</a>
 <a name='L316'></a><a href='#L316'>316</a>
-<a name='L317'></a><a href='#L317'>317</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L317'></a><a href='#L317'>317</a>
+<a name='L318'></a><a href='#L318'>318</a>
+<a name='L319'></a><a href='#L319'>319</a>
+<a name='L320'></a><a href='#L320'>320</a>
+<a name='L321'></a><a href='#L321'>321</a>
+<a name='L322'></a><a href='#L322'>322</a>
+<a name='L323'></a><a href='#L323'>323</a>
+<a name='L324'></a><a href='#L324'>324</a>
+<a name='L325'></a><a href='#L325'>325</a>
+<a name='L326'></a><a href='#L326'>326</a>
+<a name='L327'></a><a href='#L327'>327</a>
+<a name='L328'></a><a href='#L328'>328</a>
+<a name='L329'></a><a href='#L329'>329</a>
+<a name='L330'></a><a href='#L330'>330</a>
+<a name='L331'></a><a href='#L331'>331</a>
+<a name='L332'></a><a href='#L332'>332</a>
+<a name='L333'></a><a href='#L333'>333</a>
+<a name='L334'></a><a href='#L334'>334</a>
+<a name='L335'></a><a href='#L335'>335</a>
+<a name='L336'></a><a href='#L336'>336</a>
+<a name='L337'></a><a href='#L337'>337</a>
+<a name='L338'></a><a href='#L338'>338</a>
+<a name='L339'></a><a href='#L339'>339</a>
+<a name='L340'></a><a href='#L340'>340</a>
+<a name='L341'></a><a href='#L341'>341</a>
+<a name='L342'></a><a href='#L342'>342</a>
+<a name='L343'></a><a href='#L343'>343</a>
+<a name='L344'></a><a href='#L344'>344</a>
+<a name='L345'></a><a href='#L345'>345</a>
+<a name='L346'></a><a href='#L346'>346</a>
+<a name='L347'></a><a href='#L347'>347</a>
+<a name='L348'></a><a href='#L348'>348</a>
+<a name='L349'></a><a href='#L349'>349</a>
+<a name='L350'></a><a href='#L350'>350</a>
+<a name='L351'></a><a href='#L351'>351</a>
+<a name='L352'></a><a href='#L352'>352</a>
+<a name='L353'></a><a href='#L353'>353</a>
+<a name='L354'></a><a href='#L354'>354</a>
+<a name='L355'></a><a href='#L355'>355</a>
+<a name='L356'></a><a href='#L356'>356</a>
+<a name='L357'></a><a href='#L357'>357</a>
+<a name='L358'></a><a href='#L358'>358</a>
+<a name='L359'></a><a href='#L359'>359</a>
+<a name='L360'></a><a href='#L360'>360</a>
+<a name='L361'></a><a href='#L361'>361</a>
+<a name='L362'></a><a href='#L362'>362</a>
+<a name='L363'></a><a href='#L363'>363</a>
+<a name='L364'></a><a href='#L364'>364</a>
+<a name='L365'></a><a href='#L365'>365</a>
+<a name='L366'></a><a href='#L366'>366</a>
+<a name='L367'></a><a href='#L367'>367</a>
+<a name='L368'></a><a href='#L368'>368</a>
+<a name='L369'></a><a href='#L369'>369</a>
+<a name='L370'></a><a href='#L370'>370</a>
+<a name='L371'></a><a href='#L371'>371</a>
+<a name='L372'></a><a href='#L372'>372</a>
+<a name='L373'></a><a href='#L373'>373</a>
+<a name='L374'></a><a href='#L374'>374</a>
+<a name='L375'></a><a href='#L375'>375</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -508,7 +567,64 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> App.js<
 <span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-yes">18x</span>
@@ -695,7 +811,8 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> App.js<
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useState, useEffect } from 'react';
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import axios from 'axios';
+import React, { useState, useEffect } from 'react';
 import {
   createBrowserRouter,
   RouterProvider,
@@ -712,7 +829,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> App.js<
 import ChallengeArea from './component/challengeArea/ChallengeArea';
 import Popup from './component/popup/Popup';
 &nbsp;
-&nbsp;
+import {BASE_URL, STATUS_CODE, SERVER_API} from './utils/constants'
 // function to create default items for TaskArea
 const createDefaultItem = (content, options = <span class="branch-0 cbranch-no" title="branch not covered" >{})</span> =&gt; ({
   id: Date.now(),
@@ -824,7 +941,64 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> App.js<
   const [todos, setTodos] = useState(() =&gt; JSON.parse(localStorage.getItem('todos')) || [defaultTodo]);
   const [rewards, setRewards] = useState(() =&gt; JSON.parse(localStorage.getItem('rewards')) || [defaultReward]); 
   
-  const addHabit = <span class="fstat-no" title="function not covered" >(h</span>abit) =&gt; {<span class="cstat-no" title="statement not covered" >setHabits(<span class="fstat-no" title="function not covered" >pr</span>ev =&gt; <span class="cstat-no" title="statement not covered" >[...prev, habit])</span>}</span>;
+  // TODO: 账号信息如何管理？全局变量？Context？props传 随用随取？
+  // TODO: task数据从server获取后 增删改的回调函数逻辑是否可以挪回组件内部
+  let validToken;
+&nbsp;
+  const login = <span class="fstat-no" title="function not covered" >as</span>ync(username, password) =&gt; {
+<span class="cstat-no" title="statement not covered" >    try {</span>
+      const response = <span class="cstat-no" title="statement not covered" >await axios.post(BASE_URL + SERVER_API.LOGIN, {</span>
+        // TODO: delete the stub username/psw when login is integrated with backend
+        'username': username ?? 'Yue',
+        'password': password ?? 'yue@memominder'
+      });
+<span class="cstat-no" title="statement not covered" >      console.debug('login success:', response.status);</span>
+<span class="cstat-no" title="statement not covered" >      return response?.data?.token;</span>
+    } catch (error) {
+<span class="cstat-no" title="statement not covered" >      return Promise.reject(error)</span>
+    }
+  };
+&nbsp;
+  let retryCount = 0;
+&nbsp;
+  const addHabitToServer = <span class="fstat-no" title="function not covered" >as</span>ync (habit) =&gt; {
+<span class="cstat-no" title="statement not covered" >    try {</span>
+<span class="cstat-no" title="statement not covered" >      console.debug('addHabitToServer:', habit);</span>
+<span class="cstat-no" title="statement not covered" >      if (!habit?.content || !habit?.notes) {</span>
+<span class="cstat-no" title="statement not covered" >        console.warn('invalid habit, no need to post');</span>
+<span class="cstat-no" title="statement not covered" >        return;</span>
+      }
+<span class="cstat-no" title="statement not covered" >      if (!validToken) {</span>
+<span class="cstat-no" title="statement not covered" >        validToken = await login();   </span>
+      }
+      const response = <span class="cstat-no" title="statement not covered" >await axios.post(BASE_URL + SERVER_API.ADD_HABIT, {</span>
+        'title': habit.content,
+        'type': habit.positive &amp;&amp; habit.negative ? 'both' : !habit.positive &amp;&amp; !habit.negative ? 'neutral' : habit.positive ? 'positive' : 'negative',
+        'note': habit.notes
+      }, {
+        headers: {
+          'Authorization': validToken,
+          'Content-Type': 'application/json'
+        }
+      });
+<span class="cstat-no" title="statement not covered" >      console.debug('post new habit success:', response.status);</span>
+    } catch (error) {
+<span class="cstat-no" title="statement not covered" >      if (error.response.status === STATUS_CODE.UNAUTHORIZED &amp;&amp; retryCount &lt; 1) {</span>
+<span class="cstat-no" title="statement not covered" >        validToken = null;</span>
+<span class="cstat-no" title="statement not covered" >        retryCount++;</span>
+<span class="cstat-no" title="statement not covered" >        addHabitToServer(habit);</span>
+      } else {
+<span class="cstat-no" title="statement not covered" >        retryCount = 0;</span>
+      }
+<span class="cstat-no" title="statement not covered" >      console.warn('post new habit error:', error);</span>
+    }
+  };
+&nbsp;
+  const addHabit = <span class="fstat-no" title="function not covered" >(h</span>abit) =&gt; {
+<span class="cstat-no" title="statement not covered" >    setHabits(<span class="fstat-no" title="function not covered" >pr</span>ev =&gt; <span class="cstat-no" title="statement not covered" >[...prev, habit])</span></span>
+<span class="cstat-no" title="statement not covered" >    addHabitToServer(habit);</span>
+  };
+&nbsp;
   const addDaily = <span class="fstat-no" title="function not covered" >(d</span>aily) =&gt; {<span class="cstat-no" title="statement not covered" >setDailies(<span class="fstat-no" title="function not covered" >pr</span>ev =&gt; <span class="cstat-no" title="statement not covered" >[...prev, daily])</span>}</span>;
   const addTodo = <span class="fstat-no" title="function not covered" >(t</span>odo) =&gt; {<span class="cstat-no" title="statement not covered" >setTodos(<span class="fstat-no" title="function not covered" >pr</span>ev =&gt; <span class="cstat-no" title="statement not covered" >[...prev, todo])</span>;}</span>;
   const addReward = <span class="fstat-no" title="function not covered" >(r</span>eward) =&gt; {<span class="cstat-no" title="statement not covered" >setRewards(<span class="fstat-no" title="function not covered" >pr</span>ev =&gt; <span class="cstat-no" title="statement not covered" >[...prev, reward])</span>;}</span>;
@@ -1018,7 +1192,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> App.js<
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/src/component/challengeArea/ChallengeArea.jsx.html b/src/component/challengeArea/ChallengeArea.jsx.html
index cd9afd62..0b8e1b9f 100644
--- a/src/component/challengeArea/ChallengeArea.jsx.html
+++ b/src/component/challengeArea/ChallengeArea.jsx.html
@@ -1141,7 +1141,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/component/challengeArea/index.html b/src/component/challengeArea/index.html
index 2882bc8f..86fbc743 100644
--- a/src/component/challengeArea/index.html
+++ b/src/component/challengeArea/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../../index.html">All files</a> src/component/challengeArea</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/component/header/Header.jsx.html b/src/component/header/Header.jsx.html
index 51735f5e..3842a88e 100644
--- a/src/component/header/Header.jsx.html
+++ b/src/component/header/Header.jsx.html
@@ -370,7 +370,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/component/header/index.html b/src/component/header/index.html
index e724e8d8..424a7bc6 100644
--- a/src/component/header/index.html
+++ b/src/component/header/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../../index.html">All files</a> src/component/header</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/component/navBar/NavBar.js.html b/src/component/navBar/NavBar.js.html
index d9488f51..afa88247 100644
--- a/src/component/navBar/NavBar.js.html
+++ b/src/component/navBar/NavBar.js.html
@@ -325,7 +325,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/component/navBar/index.html b/src/component/navBar/index.html
index 2b3be57e..8f4092fb 100644
--- a/src/component/navBar/index.html
+++ b/src/component/navBar/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../../index.html">All files</a> src/component/navBar</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/component/popup/Popup.jsx.html b/src/component/popup/Popup.jsx.html
index cebe4a68..ae183d80 100644
--- a/src/component/popup/Popup.jsx.html
+++ b/src/component/popup/Popup.jsx.html
@@ -157,7 +157,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/component/popup/index.html b/src/component/popup/index.html
index bdbdc031..8909beba 100644
--- a/src/component/popup/index.html
+++ b/src/component/popup/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../../index.html">All files</a> src/component/popup</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/component/shopArea/ShopArea.jsx.html b/src/component/shopArea/ShopArea.jsx.html
index dd5c85c5..5bb4d7b2 100644
--- a/src/component/shopArea/ShopArea.jsx.html
+++ b/src/component/shopArea/ShopArea.jsx.html
@@ -298,7 +298,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/component/shopArea/index.html b/src/component/shopArea/index.html
index 9c5627b7..d1e4b302 100644
--- a/src/component/shopArea/index.html
+++ b/src/component/shopArea/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../../index.html">All files</a> src/component/shopArea</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/component/taskArea/TaskArea.jsx.html b/src/component/taskArea/TaskArea.jsx.html
index 2c9cd1fb..190ad5e7 100644
--- a/src/component/taskArea/TaskArea.jsx.html
+++ b/src/component/taskArea/TaskArea.jsx.html
@@ -1291,7 +1291,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/component/taskArea/TaskAreaDialog.jsx.html b/src/component/taskArea/TaskAreaDialog.jsx.html
index 122528ae..c4dcc7ce 100644
--- a/src/component/taskArea/TaskAreaDialog.jsx.html
+++ b/src/component/taskArea/TaskAreaDialog.jsx.html
@@ -382,7 +382,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/component/taskArea/index.html b/src/component/taskArea/index.html
index e1cf4b58..732ed37b 100644
--- a/src/component/taskArea/index.html
+++ b/src/component/taskArea/index.html
@@ -116,7 +116,7 @@ <h1><a href="../../../index.html">All files</a> src/component/taskArea</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/component/taskButton/TaskButton.jsx.html b/src/component/taskButton/TaskButton.jsx.html
index 3f301645..86fce828 100644
--- a/src/component/taskButton/TaskButton.jsx.html
+++ b/src/component/taskButton/TaskButton.jsx.html
@@ -23,30 +23,30 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">40.47% </span>
+                <span class="strong">47.16% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>17/42</span>
+                <span class='fraction'>25/53</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">44.44% </span>
+                <span class="strong">25.71% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>4/9</span>
+                <span class='fraction'>9/35</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">36.36% </span>
+                <span class="strong">28.57% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>4/11</span>
+                <span class='fraction'>4/14</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">40.47% </span>
+                <span class="strong">47.16% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>17/42</span>
+                <span class='fraction'>25/53</span>
             </div>
         
             
@@ -206,7 +206,29 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 <a name='L141'></a><a href='#L141'>141</a>
 <a name='L142'></a><a href='#L142'>142</a>
 <a name='L143'></a><a href='#L143'>143</a>
-<a name='L144'></a><a href='#L144'>144</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L144'></a><a href='#L144'>144</a>
+<a name='L145'></a><a href='#L145'>145</a>
+<a name='L146'></a><a href='#L146'>146</a>
+<a name='L147'></a><a href='#L147'>147</a>
+<a name='L148'></a><a href='#L148'>148</a>
+<a name='L149'></a><a href='#L149'>149</a>
+<a name='L150'></a><a href='#L150'>150</a>
+<a name='L151'></a><a href='#L151'>151</a>
+<a name='L152'></a><a href='#L152'>152</a>
+<a name='L153'></a><a href='#L153'>153</a>
+<a name='L154'></a><a href='#L154'>154</a>
+<a name='L155'></a><a href='#L155'>155</a>
+<a name='L156'></a><a href='#L156'>156</a>
+<a name='L157'></a><a href='#L157'>157</a>
+<a name='L158'></a><a href='#L158'>158</a>
+<a name='L159'></a><a href='#L159'>159</a>
+<a name='L160'></a><a href='#L160'>160</a>
+<a name='L161'></a><a href='#L161'>161</a>
+<a name='L162'></a><a href='#L162'>162</a>
+<a name='L163'></a><a href='#L163'>163</a>
+<a name='L164'></a><a href='#L164'>164</a>
+<a name='L165'></a><a href='#L165'>165</a>
+<a name='L166'></a><a href='#L166'>166</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -216,6 +238,12 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 <span class="cline-any cline-yes">37x</span>
 <span class="cline-any cline-yes">37x</span>
 <span class="cline-any cline-yes">37x</span>
+<span class="cline-any cline-yes">37x</span>
+<span class="cline-any cline-yes">37x</span>
+<span class="cline-any cline-yes">37x</span>
+<span class="cline-any cline-yes">37x</span>
+<span class="cline-any cline-yes">37x</span>
+<span class="cline-any cline-yes">37x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">37x</span>
 <span class="cline-any cline-yes">3x</span>
@@ -286,6 +314,13 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">37x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">37x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">37x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -335,6 +370,15 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -353,12 +397,18 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 import './TaskButton.css';
 import TaskDialog from './TaskDialog';
 &nbsp;
-const TaskButton = ({ onAddHabit, onAddDaily, onAddTodo, onAddReward}) =&gt; {
+const TaskButton = ({ onAddHabit, onAddDaily, onAddTodo, onAddReward }) =&gt; {
     const [showMenu, setShowMenu] = useState(false);
     const [showDialog, setShowDialog] = useState(false);
     const [dialogTitle, setDialogTitle] = useState('');
-    const [habitTitle, setHabitTitle] = useState('Add a title');
-    const [habitNotes, setHabitNotes] = useState('Add notes');
+    const [habitTitle, setHabitTitle] = useState('');
+    const defaultTitle = 'Add a title';
+    const [habitNotes, setHabitNotes] = useState('');
+    const defaultNotes = 'Add notes';
+    const [rewardPrice, setRewardPrice] = useState();
+    const defaultPrice = 10;
+    const [positive, setPositive] = useState(true);
+    const [negative, setNegative] = useState(true);
 &nbsp;
     const handleButtonClick = () =&gt; {
         setShowMenu(!showMenu);
@@ -382,27 +432,27 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 <span class="cstat-no" title="statement not covered" >                createFunction = onAddHabit;</span>
 <span class="cstat-no" title="statement not covered" >                newItem = {</span>
                     id: Date.now(),
-                    content: habitTitle,
-                    notes: habitNotes,
-                    positive: true,  
-                    negative: true   
+                    content: habitTitle || defaultTitle,
+                    notes: habitNotes || defaultNotes,
+                    positive: positive,
+                    negative: negative
                 };
 <span class="cstat-no" title="statement not covered" >                break;</span>
             case 'Create Daily':
 <span class="cstat-no" title="statement not covered" >                createFunction = onAddDaily;</span>
 <span class="cstat-no" title="statement not covered" >                newItem = {</span>
                     id: Date.now(),
-                    content: habitTitle,
-                    notes: habitNotes,
-                    completed: false  
+                    content: habitTitle || defaultTitle,
+                    notes: habitNotes || defaultNotes,
+                    completed: false
                 };
 <span class="cstat-no" title="statement not covered" >                break;</span>
             case 'Create To Do':
 <span class="cstat-no" title="statement not covered" >                createFunction = onAddTodo;</span>
 <span class="cstat-no" title="statement not covered" >                newItem = {</span>
                     id: Date.now(),
-                    content: habitTitle,
-                    notes: habitNotes,
+                    content: habitTitle || defaultTitle,
+                    notes: habitNotes || defaultNotes,
                     completed: false
                 };
 <span class="cstat-no" title="statement not covered" >                break;</span>
@@ -410,9 +460,9 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 <span class="cstat-no" title="statement not covered" >                createFunction = onAddReward;</span>
 <span class="cstat-no" title="statement not covered" >                newItem = {</span>
                     id: Date.now(),
-                    content: habitTitle,
-                    notes: habitNotes,
-                    price: 10
+                    content: habitTitle || defaultTitle,
+                    notes: habitNotes || defaultNotes,
+                    price: rewardPrice || defaultPrice
                 };
 <span class="cstat-no" title="statement not covered" >                break;</span>
             default:
@@ -427,7 +477,14 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
     const handleCancel = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
 <span class="cstat-no" title="statement not covered" >        console.log('Canceling...');</span>
 <span class="cstat-no" title="statement not covered" >        setShowDialog(false);</span>
+    }
+&nbsp;
+    const handlePositive = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >        setPositive(!positive);</span>
+    };
 &nbsp;
+    const handleNegative = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >        setNegative(!negative);</span>
     };
 &nbsp;
     return (
@@ -456,7 +513,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
                         &lt;img src="/reward.png" alt="Reward" className="menu-icon" /&gt;
                         Reward
                     &lt;/button&gt;
-                    
+&nbsp;
                 &lt;/div&gt;
             )}
 &nbsp;
@@ -467,23 +524,32 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
                         &lt;div className="input-container"&gt;
                             &lt;label&gt;Title*:&lt;/label&gt;
                             &lt;br /&gt;
-                            &lt;input type="text" className="habit-input" value={habitTitle} onChange={<span class="fstat-no" title="function not covered" >(e</span>) =&gt; <span class="cstat-no" title="statement not covered" >setHabitTitle(e.target.value)}</span> /&gt;
+                            &lt;input type="text" className="habit-input" value={habitTitle} placeholder={defaultTitle} onChange={<span class="fstat-no" title="function not covered" >(e</span>) =&gt; <span class="cstat-no" title="statement not covered" >setHabitTitle(e.target.value)}</span> /&gt;
                         &lt;/div&gt;
                         &lt;div className="input-container"&gt;
                             &lt;label&gt;Notes:&lt;/label&gt;
                             &lt;br /&gt;
-                            &lt;textarea className="habit-input" value={habitNotes} onChange={<span class="fstat-no" title="function not covered" >(e</span>) =&gt; <span class="cstat-no" title="statement not covered" >setHabitNotes(e.target.value)}</span> /&gt;
+                            &lt;textarea className="habit-input" value={habitNotes} placeholder={defaultNotes} onChange={<span class="fstat-no" title="function not covered" >(e</span>) =&gt; <span class="cstat-no" title="statement not covered" >setHabitNotes(e.target.value)}</span> /&gt;
                         &lt;/div&gt;
+                        {dialogTitle === 'Create Reward' &amp;&amp; (
+<span class="branch-1 cbranch-no" title="branch not covered" >                            &lt;div className="input-container"&gt;</span>
+                                &lt;label&gt;Price:&lt;/label&gt;
+                                &lt;br /&gt;
+                                &lt;input type="number" className="habit-input" value={rewardPrice} placeholder={defaultPrice} onChange={<span class="fstat-no" title="function not covered" >(e</span>) =&gt; <span class="cstat-no" title="statement not covered" >setRewardPrice(e.target.value)}</span> /&gt;
+                            &lt;/div&gt;)}
 &nbsp;
-                        {/* TODO: move it to children */}
-                        {/* &lt;div className="dialog-buttons-circle"&gt;
-                            &lt;button className="round-button"&gt;+&lt;/button&gt;
-                            &lt;button className="round-button"&gt;-&lt;/button&gt;
-                        &lt;/div&gt;
-                        &lt;div className="dialog-description"&gt;
-                            &lt;span&gt;Positive&lt;/span&gt;
-                            &lt;span&gt;Negative&lt;/span&gt;
-                        &lt;/div&gt; */}
+                        {dialogTitle === 'Create Habit' &amp;&amp; (
+                            &lt;div&gt;
+                                &lt;div className="dialog-buttons-circle"&gt;
+                                    &lt;button className={`round-button ${positive ? 'selected' : <span class="branch-1 cbranch-no" title="branch not covered" >'unselected'}</span>`} onClick={handlePositive}&gt;+&lt;/button&gt;
+                                    &lt;button className={`round-button ${negative ? 'selected' : <span class="branch-1 cbranch-no" title="branch not covered" >'unselected'}</span>`} onClick={handleNegative}&gt;-&lt;/button&gt;
+                                &lt;/div&gt;
+                                &lt;div className="dialog-description"&gt;
+                                    &lt;span&gt;Positive&lt;/span&gt;
+                                    &lt;span&gt;Negative&lt;/span&gt;
+                                &lt;/div&gt;
+                            &lt;/div&gt;
+                        )}
                     &lt;/TaskDialog&gt;
                 &lt;/div&gt;
             )}
@@ -499,7 +565,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/component/taskButton/TaskDialog.jsx.html b/src/component/taskButton/TaskDialog.jsx.html
index 2b47999d..8af57442 100644
--- a/src/component/taskButton/TaskDialog.jsx.html
+++ b/src/component/taskButton/TaskDialog.jsx.html
@@ -130,7 +130,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/component/taskButton/index.html b/src/component/taskButton/index.html
index 9d440af0..5b36dd91 100644
--- a/src/component/taskButton/index.html
+++ b/src/component/taskButton/index.html
@@ -23,30 +23,30 @@ <h1><a href="../../../index.html">All files</a> src/component/taskButton</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">43.18% </span>
+                <span class="strong">49.09% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>19/44</span>
+                <span class='fraction'>27/55</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">44.44% </span>
+                <span class="strong">25.71% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>4/9</span>
+                <span class='fraction'>9/35</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">41.66% </span>
+                <span class="strong">33.33% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>5/12</span>
+                <span class='fraction'>5/15</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">43.18% </span>
+                <span class="strong">49.09% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>19/44</span>
+                <span class='fraction'>27/55</span>
             </div>
         
             
@@ -80,17 +80,17 @@ <h1><a href="../../../index.html">All files</a> src/component/taskButton</h1>
 </thead>
 <tbody><tr>
 	<td class="file low" data-value="TaskButton.jsx"><a href="TaskButton.jsx.html">TaskButton.jsx</a></td>
-	<td data-value="40.47" class="pic low">
-	<div class="chart"><div class="cover-fill" style="width: 40%"></div><div class="cover-empty" style="width: 60%"></div></div>
+	<td data-value="47.16" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 47%"></div><div class="cover-empty" style="width: 53%"></div></div>
 	</td>
-	<td data-value="40.47" class="pct low">40.47%</td>
-	<td data-value="42" class="abs low">17/42</td>
-	<td data-value="44.44" class="pct low">44.44%</td>
-	<td data-value="9" class="abs low">4/9</td>
-	<td data-value="36.36" class="pct low">36.36%</td>
-	<td data-value="11" class="abs low">4/11</td>
-	<td data-value="40.47" class="pct low">40.47%</td>
-	<td data-value="42" class="abs low">17/42</td>
+	<td data-value="47.16" class="pct low">47.16%</td>
+	<td data-value="53" class="abs low">25/53</td>
+	<td data-value="25.71" class="pct low">25.71%</td>
+	<td data-value="35" class="abs low">9/35</td>
+	<td data-value="28.57" class="pct low">28.57%</td>
+	<td data-value="14" class="abs low">4/14</td>
+	<td data-value="47.16" class="pct low">47.16%</td>
+	<td data-value="53" class="abs low">25/53</td>
 	</tr>
 
 <tr>
@@ -116,7 +116,7 @@ <h1><a href="../../../index.html">All files</a> src/component/taskButton</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/index.html b/src/index.html
index 9023a745..9a9b575a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,30 +23,30 @@ <h1><a href="../index.html">All files</a> src</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">67.14% </span>
+                <span class="strong">59.14% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>94/140</span>
+                <span class='fraction'>97/164</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">69.69% </span>
+                <span class="strong">40.35% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>23/33</span>
+                <span class='fraction'>23/57</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">52.38% </span>
+                <span class="strong">50% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>22/42</span>
+                <span class='fraction'>22/44</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">70.49% </span>
+                <span class="strong">60.54% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>86/122</span>
+                <span class='fraction'>89/147</span>
             </div>
         
             
@@ -80,17 +80,17 @@ <h1><a href="../index.html">All files</a> src</h1>
 </thead>
 <tbody><tr>
 	<td class="file medium" data-value="App.js"><a href="App.js.html">App.js</a></td>
-	<td data-value="72.86" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 72%"></div><div class="cover-empty" style="width: 28%"></div></div>
+	<td data-value="63.39" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 63%"></div><div class="cover-empty" style="width: 37%"></div></div>
 	</td>
-	<td data-value="72.86" class="pct medium">72.86%</td>
-	<td data-value="129" class="abs medium">94/129</td>
-	<td data-value="79.31" class="pct medium">79.31%</td>
-	<td data-value="29" class="abs medium">23/29</td>
-	<td data-value="55" class="pct medium">55%</td>
-	<td data-value="40" class="abs medium">22/40</td>
-	<td data-value="77.47" class="pct medium">77.47%</td>
-	<td data-value="111" class="abs medium">86/111</td>
+	<td data-value="63.39" class="pct medium">63.39%</td>
+	<td data-value="153" class="abs medium">97/153</td>
+	<td data-value="43.39" class="pct low">43.39%</td>
+	<td data-value="53" class="abs low">23/53</td>
+	<td data-value="52.38" class="pct medium">52.38%</td>
+	<td data-value="42" class="abs medium">22/42</td>
+	<td data-value="65.44" class="pct medium">65.44%</td>
+	<td data-value="136" class="abs medium">89/136</td>
 	</tr>
 
 <tr>
@@ -131,7 +131,7 @@ <h1><a href="../index.html">All files</a> src</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/src/index.js.html b/src/index.js.html
index 0a2ed859..d15df0c8 100644
--- a/src/index.js.html
+++ b/src/index.js.html
@@ -121,7 +121,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> index.j
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/src/pages/Home/Home.jsx.html b/src/pages/Home/Home.jsx.html
index a64fb076..7f591599 100644
--- a/src/pages/Home/Home.jsx.html
+++ b/src/pages/Home/Home.jsx.html
@@ -94,7 +94,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/pages
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/pages/Home/index.html b/src/pages/Home/index.html
index dcda82e5..79395474 100644
--- a/src/pages/Home/index.html
+++ b/src/pages/Home/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../../index.html">All files</a> src/pages/Home</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/pages/login/Login.jsx.html b/src/pages/login/Login.jsx.html
index 3488a88b..4b1ed457 100644
--- a/src/pages/login/Login.jsx.html
+++ b/src/pages/login/Login.jsx.html
@@ -169,7 +169,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/pages
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/pages/login/index.html b/src/pages/login/index.html
index 35187e76..52a7c53a 100644
--- a/src/pages/login/index.html
+++ b/src/pages/login/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../../index.html">All files</a> src/pages/login</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/pages/profile/Profile.jsx.html b/src/pages/profile/Profile.jsx.html
index 916394bb..d1d56d04 100644
--- a/src/pages/profile/Profile.jsx.html
+++ b/src/pages/profile/Profile.jsx.html
@@ -94,7 +94,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/pages
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/pages/profile/index.html b/src/pages/profile/index.html
index 96ec3e38..fe681710 100644
--- a/src/pages/profile/index.html
+++ b/src/pages/profile/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../../index.html">All files</a> src/pages/profile</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/pages/register/Register.jsx.html b/src/pages/register/Register.jsx.html
index ee0502bc..8315e9c9 100644
--- a/src/pages/register/Register.jsx.html
+++ b/src/pages/register/Register.jsx.html
@@ -223,7 +223,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/pages
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/pages/register/index.html b/src/pages/register/index.html
index ae992c3e..f7948268 100644
--- a/src/pages/register/index.html
+++ b/src/pages/register/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../../index.html">All files</a> src/pages/register</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>
diff --git a/src/reportWebVitals.js.html b/src/reportWebVitals.js.html
index a1c79668..93ad318b 100644
--- a/src/reportWebVitals.js.html
+++ b/src/reportWebVitals.js.html
@@ -109,7 +109,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> reportW
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-03-07T23:42:27.301Z
+                at 2024-03-09T03:39:52.424Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/src/utils/constants.js.html b/src/utils/constants.js.html
new file mode 100644
index 00000000..cc50d61c
--- /dev/null
+++ b/src/utils/constants.js.html
@@ -0,0 +1,118 @@
+
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Code coverage report for src/utils/constants.js</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../../prettify.css" />
+    <link rel="stylesheet" href="../../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+    
+<body>
+<div class='wrapper'>
+    <div class='pad1'>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/utils</a> constants.js</h1>
+        <div class='clearfix'>
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Statements</span>
+                <span class='fraction'>3/3</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Branches</span>
+                <span class='fraction'>0/0</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Functions</span>
+                <span class='fraction'>0/0</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Lines</span>
+                <span class='fraction'>3/3</span>
+            </div>
+        
+            
+        </div>
+        <p class="quiet">
+            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
+        </p>
+        <template id="filterTemplate">
+            <div class="quiet">
+                Filter:
+                <input type="search" id="fileSearch">
+            </div>
+        </template>
+    </div>
+    <div class='status-line high'></div>
+    <pre><table class="coverage">
+<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
+<a name='L2'></a><a href='#L2'>2</a>
+<a name='L3'></a><a href='#L3'>3</a>
+<a name='L4'></a><a href='#L4'>4</a>
+<a name='L5'></a><a href='#L5'>5</a>
+<a name='L6'></a><a href='#L6'>6</a>
+<a name='L7'></a><a href='#L7'>7</a>
+<a name='L8'></a><a href='#L8'>8</a>
+<a name='L9'></a><a href='#L9'>9</a>
+<a name='L10'></a><a href='#L10'>10</a>
+<a name='L11'></a><a href='#L11'>11</a>
+<a name='L12'></a><a href='#L12'>12</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">export const BASE_URL = 'https://memo-minder.onrender.com';
+&nbsp;
+export const STATUS_CODE = {
+    SUCCESS: 200,
+    ADD_HABIT_SUCCESS: 201,
+    UNAUTHORIZED: 401,
+};
+&nbsp;
+export const SERVER_API = {
+    LOGIN: '/api/login',
+    ADD_HABIT: '/api/habits'
+}</pre></td></tr></table></pre>
+
+                <div class='push'></div><!-- for sticky footer -->
+            </div><!-- /wrapper -->
+            <div class='footer quiet pad2 space-top1 center small'>
+                Code coverage generated by
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at 2024-03-09T03:39:52.424Z
+            </div>
+        <script src="../../prettify.js"></script>
+        <script>
+            window.onload = function () {
+                prettyPrint();
+            };
+        </script>
+        <script src="../../sorter.js"></script>
+        <script src="../../block-navigation.js"></script>
+    </body>
+</html>
+    
\ No newline at end of file
diff --git a/src/utils/index.html b/src/utils/index.html
new file mode 100644
index 00000000..3cd9d0e3
--- /dev/null
+++ b/src/utils/index.html
@@ -0,0 +1,116 @@
+
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Code coverage report for src/utils</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../../prettify.css" />
+    <link rel="stylesheet" href="../../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+    
+<body>
+<div class='wrapper'>
+    <div class='pad1'>
+        <h1><a href="../../index.html">All files</a> src/utils</h1>
+        <div class='clearfix'>
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Statements</span>
+                <span class='fraction'>3/3</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Branches</span>
+                <span class='fraction'>0/0</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Functions</span>
+                <span class='fraction'>0/0</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Lines</span>
+                <span class='fraction'>3/3</span>
+            </div>
+        
+            
+        </div>
+        <p class="quiet">
+            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
+        </p>
+        <template id="filterTemplate">
+            <div class="quiet">
+                Filter:
+                <input type="search" id="fileSearch">
+            </div>
+        </template>
+    </div>
+    <div class='status-line high'></div>
+    <div class="pad1">
+<table class="coverage-summary">
+<thead>
+<tr>
+   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
+   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
+   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
+   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
+   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
+   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
+   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
+</tr>
+</thead>
+<tbody><tr>
+	<td class="file high" data-value="constants.js"><a href="constants.js.html">constants.js</a></td>
+	<td data-value="100" class="pic high">
+	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
+	</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="3" class="abs high">3/3</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="3" class="abs high">3/3</td>
+	</tr>
+
+</tbody>
+</table>
+</div>
+                <div class='push'></div><!-- for sticky footer -->
+            </div><!-- /wrapper -->
+            <div class='footer quiet pad2 space-top1 center small'>
+                Code coverage generated by
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at 2024-03-09T03:39:52.424Z
+            </div>
+        <script src="../../prettify.js"></script>
+        <script>
+            window.onload = function () {
+                prettyPrint();
+            };
+        </script>
+        <script src="../../sorter.js"></script>
+        <script src="../../block-navigation.js"></script>
+    </body>
+</html>
+    
\ No newline at end of file