diff --git a/TC1/http_server/web/assets/css_pack.css b/TC1/http_server/web/assets/css_pack.css
index 1f4de7b..8795c4d 100644
--- a/TC1/http_server/web/assets/css_pack.css
+++ b/TC1/http_server/web/assets/css_pack.css
@@ -708,7 +708,7 @@ _:-ms-input-placeholder, :root .demo-graph {
   margin-left: 20px;
 }
 table {
-  width: 100%;
+  width: 101%;
 }
 .mdl-data-table th {
   font-weight: bold;
diff --git a/TC1/http_server/web/demo.html b/TC1/http_server/web/demo.html
index 80f97ad..871b602 100644
--- a/TC1/http_server/web/demo.html
+++ b/TC1/http_server/web/demo.html
@@ -223,7 +223,7 @@
             </div>
           </div>
 
-          <div class="page page3 mdl-cell mdl-cell--12-col demo-card-event mdl-card mdl-shadow--2dp">
+          <div class="page page3 mdl-cell mdl-cell--5-col demo-card-event mdl-card mdl-shadow--2dp">
             <table id="timed_task_tb" class="mdl-data-table mdl-js-data-table">
               <tr>
                 <th>Time</th>
@@ -243,14 +243,49 @@
                 <td>0</td>
                 <td><a>Delete</a></td>
               </tr>
-              <!--
-              <tr>
-                <td colspan="5">No Timed Task</td>
-              </tr>
-              -->
             </table>
           </div>
 
+          <div class="page page3 mdl-cell mdl-cell--5-col demo-card-square mdl-card mdl-shadow--2dp" style="z-index: unset;">
+            <div class="mdl-card__title mdl-card--expand">
+              <h2 class="mdl-card__title-text">Add Task</h2>
+            </div>
+            <div class="mdl-card__supporting-text">
+              <form action="#">
+                <!-- Simple Select with arrow -->
+                <div class="mdl-textfield mdl-js-textfield getmdl-select">
+                  <input type="text" value="" class="mdl-textfield__input" id="sample2" readonly>
+                  <input type="hidden" value="" name="sample2">
+                  <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
+                  <label for="sample2" class="mdl-textfield__label">Socket</label>
+                  <ul for="sample2" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
+                      <li class="mdl-menu__item" data-val="1">Socket-1</li>
+                      <li class="mdl-menu__item" data-val="2">Socket-2</li>
+                      <li class="mdl-menu__item" data-val="3">Socket-3</li>
+                      <li class="mdl-menu__item" data-val="4">Socket-4</li>
+                      <li class="mdl-menu__item" data-val="5">Socket-5</li>
+                      <li class="mdl-menu__item" data-val="6">Socket-6</li>
+                  </ul>
+                </div>
+                <div class="mdl-textfield mdl-js-textfield">
+                  <input class="mdl-textfield__input" type="datetime-local" id="sample1">
+                  <label class="mdl-textfield__label" for="sample1"></label>
+                </div>
+                <span class="mdl-list__item-secondary-action">
+                  <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="task-on">
+                    <input type="checkbox" id="task-on" class="mdl-switch__input" checked />
+                  </label>
+                </span>
+              </form>
+            </div>
+            <div class="mdl-card__actions mdl-card--border">
+              <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+                Submit
+              </a>
+            </div>
+          </div>
+
+
           <div class="page page4 mdl-cell mdl-cell--12-col demo-card-event mdl-card mdl-shadow--2dp">
             <table class="mdl-data-table mdl-js-data-table">
               <tr>
diff --git a/TC1/http_server/web/styles.css b/TC1/http_server/web/styles.css
index dea0965..69d4dd6 100644
--- a/TC1/http_server/web/styles.css
+++ b/TC1/http_server/web/styles.css
@@ -225,7 +225,7 @@ _:-ms-input-placeholder, :root .demo-graph {
   margin-left: 20px;
 }
 table {
-  width: 100%;
+  width: 101%;
 }
 .mdl-data-table th {
   font-weight: bold;