diff --git a/web/css/styles.css b/web/css/styles.css
index 6380eb0..1af524c 100644
--- a/web/css/styles.css
+++ b/web/css/styles.css
@@ -70,17 +70,19 @@ td {
   width: 100%;
 }
 
-#task {
+.task {
   margin: 3rem auto;
-  max-width: 80%;
+  max-width: 1000px;
   padding: 1rem;
   -webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3);
   -moz-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3);
   box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3);
   border-radius: 5px;
-
+  position: relative;
 }
 
+
+
 .highlight {
   background-color: #000;
   padding: 0px 1rem;
@@ -89,3 +91,53 @@ td {
   font-size: 1rem;
   vertical-align: middle;
 }
+
+.hidden {
+  display: none;
+}
+
+.task.show .task-overlay {
+  display: none;
+}
+
+.exp-icon {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  width: 20px;
+  min-height: 27px;
+  height: 27px;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+   animation-iteration-count: 3;
+   animation-delay: 3s;
+}
+
+.task .exp-icon {
+  background-image: url('../img/expand.png');
+}
+
+.task.active .exp-icon {
+  background-image: url('../img/collapse.png');
+}
+
+@keyframes shake {
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%, 80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%, 50%, 70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%, 60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
diff --git a/web/index.php b/web/index.php
index db0faa6..b067337 100644
--- a/web/index.php
+++ b/web/index.php
@@ -1,7 +1,15 @@
 <?php require_once __DIR__.'/DB.php'; ?>
-
-<html>
+<!DOCTYPE html>
+<html lang="en">
 	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+		<title>MonitoLite - Network monitoring tool</title>
+		<script
+			  src="https://code.jquery.com/jquery-3.5.1.min.js"
+			  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
+			  crossorigin="anonymous">
+		</script>
 		<script type="text/javascript" src="js/scripts.js"></script>
 		<link type="text/css" rel="stylesheet" href="css/styles.css" />
 	</head>
@@ -12,8 +20,9 @@
 		<?php if ($tasks = $db->get_all_tasks()): ?>
 		
 			<?php foreach ($tasks as $task): ?>
-
-				<div id="task">
+				<div class="task">
+					<p class="exp-icon" title="Click here to expand/collapse the task">&nbsp;</p>
+					<!--<p class="task-overlay"><img src="img/expand.png" width="32"></p>-->
 					<h2>Task <small>#</small><?php echo $task['id']; ?> » <span class="highlight"><?php echo $task['type']; ?></span> for host <span class="highlight"><?php echo $task['host']; ?></span></h2>
 
 					<table id="tasks_tbl">
@@ -52,80 +61,81 @@
 						</tbody>
 					</table>
 				
-				
-					<div id="history">
-						<h3>Task history</h3>
-						<?php if ($histories = $db->get_all_history($task['id'], 5)): ?>
-							<table id="history_tbl">
-								<thead>
-									<tr>
-										<th>Datetime</th>
-										<th>Status</th>
-									</tr>
-								</thead>
-								<tbody>
-								<?php foreach ($histories as $history): ?>
-									<?php
-										$color = ($history['status'] == 1) ? '#c9ecc9' : '#ffc5c5'; 
-									?>
-									<tr>
-										<td width="20%" align="center"><?php echo $history['datetime']; ?></td>
+					<div class="hidden">
+						<div id="history">
+							<h3>Task history</h3>
+							<?php if ($histories = $db->get_all_history($task['id'], 5)): ?>
+								<table id="history_tbl">
+									<thead>
+										<tr>
+											<th>Datetime</th>
+											<th>Status</th>
+										</tr>
+									</thead>
+									<tbody>
+									<?php foreach ($histories as $history): ?>
+										<?php
+											$color = ($history['status'] == 1) ? '#c9ecc9' : '#ffc5c5';
+										?>
+										<tr>
+											<td width="20%" align="center"><?php echo $history['datetime']; ?></td>
 
-										<?php if ($history['status'] == 1): ?>
-											<td width="20%" align="center" style="background-color:#c9ecc9;">
-												<img src="img/success.png" width="16" alt="Success">&nbsp;SUCCESS
-											</td>
-										<?php else: ?>
-											<td width="20%" align="center" style="background-color:#ffc5c5;">
-												<img src="img/error.png" width="16" alt="Success">&nbsp;ERROR
-											</td>
-										<?php endif; ?>
-									</tr>
-								<?php endforeach; ?>
-								</tbody>
-							</table>
-							<p><small>Only the 5 latest entries are displayed</small></p>
-						<?php else: ?>
-							<p class="no_result">No history found here</p>
-						<?php endif; ?>	
-					</div>		
-					
-					<div id="contacts">
-						<h3>Task contacts</h3>
+											<?php if ($history['status'] == 1): ?>
+												<td width="20%" align="center" style="background-color:#c9ecc9;">
+													<img src="img/success.png" width="16" alt="Success">&nbsp;SUCCESS
+												</td>
+											<?php else: ?>
+												<td width="20%" align="center" style="background-color:#ffc5c5;">
+													<img src="img/error.png" width="16" alt="Success">&nbsp;ERROR
+												</td>
+											<?php endif; ?>
+										</tr>
+									<?php endforeach; ?>
+									</tbody>
+								</table>
+								<p><small>Only the 5 latest entries are displayed</small></p>
+							<?php else: ?>
+								<p class="no_result">No history found here</p>
+							<?php endif; ?>
+						</div>
 						
-						<?php if ($contacts = $db->get_all_contacts($task['id'])): ?>
-							<table id="contacts_tbl">
-								<thead>
-									<tr>
-										<th>Surname</th>
-										<th>Firstname</th>
-										<th>Email</th>
-										<th>Phone</th>
-										<th>Creation date</th>
-										<th>Active</th>
-									</tr>
-								</thead>
-								<tbody>
-								<?php foreach ($contacts as $contact): ?>
-									<tr>
-										<td width="15%"><?php echo $contact['surname']; ?></td>
-										<td width="15%"><?php echo $contact['firstname']; ?></td>
-										<td width="20%"><?php echo $contact['email']; ?></td>
-										<td width="15%"><?php echo $contact['phone']; ?></td>
-										<td width="15%"><?php echo $contact['creation_date']; ?></td>
-										<td width="15%"><?php echo ($contact['active'] == 1) ? 'Yes' : 'No'; ?></td>
-									</tr>
-								<?php endforeach; ?>
-								</tbody>
-							</table>
-						<?php else: ?>
-							<p class="no_result">
-								<img src="img/warning.png" width="16" alt="Warning"/>
-								No contact found here. That means that nobody will get any notification in case of an error.
-							</p>
-						<?php endif; ?>
+						<div id="contacts">
+							<h3>Task contacts</h3>
+
+							<?php if ($contacts = $db->get_all_contacts($task['id'])): ?>
+								<table id="contacts_tbl">
+									<thead>
+										<tr>
+											<th>Surname</th>
+											<th>Firstname</th>
+											<th>Email</th>
+											<th>Phone</th>
+											<th>Creation date</th>
+											<th>Active</th>
+										</tr>
+									</thead>
+									<tbody>
+									<?php foreach ($contacts as $contact): ?>
+										<tr>
+											<td width="15%"><?php echo $contact['surname']; ?></td>
+											<td width="15%"><?php echo $contact['firstname']; ?></td>
+											<td width="20%"><?php echo $contact['email']; ?></td>
+											<td width="15%"><?php echo $contact['phone']; ?></td>
+											<td width="15%"><?php echo $contact['creation_date']; ?></td>
+											<td width="15%"><?php echo ($contact['active'] == 1) ? 'Yes' : 'No'; ?></td>
+										</tr>
+									<?php endforeach; ?>
+									</tbody>
+								</table>
+							<?php else: ?>
+								<p class="no_result">
+									<img src="img/warning.png" width="16" alt="Warning"/>
+									No contact found here. That means that nobody will get any notification in case of an error.
+								</p>
+							<?php endif; ?>
+						</div>
 					</div>	
-				</div>						
+				</div>
 			
 			<?php endforeach; ?>
 		
diff --git a/web/js/scripts.js b/web/js/scripts.js
index e69de29..f06dc8c 100644
--- a/web/js/scripts.js
+++ b/web/js/scripts.js
@@ -0,0 +1,25 @@
+$(document).ready(function() {
+  $('.task .exp-icon').on('click', function() {
+    var el = $(this).parent('.task');
+
+    if (el.hasClass('active')) {
+      el.removeClass('active');
+      el.children('.hidden').slideUp();
+    }
+    else {
+      $('.task').removeClass('active');
+      $('.task').children('.hidden').slideUp();
+      el.addClass('active');
+      el.children('.hidden').slideDown();
+    }
+  });
+
+  $('.task').not('.active').on('mouseover', function() {
+    $(this).children('.task-overlay').show();
+  });
+
+  $('.task').not('.active').on('mouseout', function() {
+    $(this).children('.task-overlay').hide();
+  });
+
+})
