diff --git a/webserver/main.py b/webserver/main.py
index a0d25d3..3f78f4a 100644
--- a/webserver/main.py
+++ b/webserver/main.py
@@ -95,6 +95,11 @@ def cpdashy_logout_main():
 
 
 # Main Dashboard start
+def extract_time(json):
+    try:
+        return int(int(json['timestamp'].split("m")[0])*60 + int(json['timestamp'].split("m")[1].replace("m","").replace("s","").replace(" ","").replace("&nbp;","")))
+    except KeyError:
+        return 0
 
 def cpdash_get_sidebar():
     with open('templates/sidebar.html','r') as f:
@@ -120,7 +125,21 @@ def cpdashy_1_main():
             with open("database/temp/sim_start.txt","r") as f:
                 sim_start_timestamp_stamp = int(f.read().split(".")[0])
             
-            sim_start_timestamp = str(round((time.time() - sim_start_timestamp_stamp) / 60,3))
+            min, sec = divmod(time.time() - int(sim_start_timestamp_stamp),60)
+            sim_start_timestamp = str(int(min)) + "m " + str(int(round(sec,0))) + "s"
+
+
+        if not os.path.exists("database/temp/attack_start.txt"):
+            attack_start_timestamp = "0"
+        else:
+            with open("database/temp/attack_start.txt","r") as f:
+                attack_start_timestamp = int(f.read().split(".")[0])
+            
+            min, sec = divmod(time.time() - int(attack_start_timestamp),60)
+            attack_start_timestamp = str(int(min)) + "m " + str(int(round(sec,0))) + "s"
+
+
+
 
         with open("database/logs/blue.json","r") as f:
             blue_logs_list_ori = json.load(f)
@@ -128,6 +147,9 @@ def cpdashy_1_main():
         for blue_log_now in blue_logs_list_ori:
             min, sec = divmod(time.time() - int(blue_log_now["timestamp"]),60)
             blue_log_now["timestamp"] = str(int(min)) + "m " + str(int(round(sec,0))) + "s"
+            blue_log_now["origin"] = "blue"
+            blue_log_now["timeline_class"] = "container_time_right"
+            blue_log_now["timeline_side"] = "right"
             blue_logs_list.append(blue_log_now)
 
         with open("database/logs/red.json","r") as f:
@@ -136,14 +158,21 @@ def cpdashy_1_main():
         for red_log_now in red_logs_list_ori:
             min, sec = divmod(time.time() - int(red_log_now["timestamp"]),60)
             red_log_now["timestamp"] = str(int(min)) + "m " + str(int(round(sec,0))) + "s"
+            red_log_now["origin"] = "red"
+            red_log_now["timeline_class"] = "container_time"
+            red_log_now["timeline_side"] = "left"
             red_logs_list.append(red_log_now)
 
+        total_logs_list = []
+        total_logs_list.extend(blue_logs_list)
+        total_logs_list.extend(red_logs_list)
+        total_logs_list.sort(key=extract_time, reverse=True)
 
         blue_logs_list.reverse()
         red_logs_list.reverse()
+        total_logs_list.reverse()
 
-        return render_template("main/dashboard_main1.html",blue_logs_list=blue_logs_list,red_logs_list=red_logs_list,sim_running=sim_running,sim_start_timestamp=sim_start_timestamp,sidebar_html_insert=cpdash_get_sidebar().replace("active_state_class1","is-active"), profile_picture=user_data["picture"],profile_username=user_data["username"],profile_userid=user_data["userid"],profile_email=user_data["email"])
-
+        return render_template("main/dashboard_main1.html",total_logs_list=total_logs_list,attack_start_timestamp=attack_start_timestamp,blue_logs_list=blue_logs_list,red_logs_list=red_logs_list,sim_running=sim_running,sim_start_timestamp=sim_start_timestamp,sidebar_html_insert=cpdash_get_sidebar().replace("active_state_class1","is-active"), profile_picture=user_data["picture"],profile_username=user_data["username"],profile_userid=user_data["userid"],profile_email=user_data["email"])
     else:
         return redirect('/login')
     
@@ -192,7 +221,7 @@ def api_red_logs():
     print("red log received")
     print(temp_json_n)
 
-    if temp_json_n["data"] == "Start of attack":
+    if temp_json_n["data"].lower() == "start of attack":
         with open("database/temp/attack_start.txt",'w') as f:
             f.write(str(temp_json_n["timestamp"]))
 
diff --git a/webserver/templates/main/dashboard_main1.html b/webserver/templates/main/dashboard_main1.html
index abf5657..973ac38 100644
--- a/webserver/templates/main/dashboard_main1.html
+++ b/webserver/templates/main/dashboard_main1.html
@@ -8,7 +8,7 @@
     <meta name="title" content="CyberRange">
     <meta name="description" content="Teach and Test you employee about cyber attacks">
 
-    <!-- <meta http-equiv="refresh" content="3"> -->
+    <meta http-equiv="refresh" content="3">
 
     <style>
         @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");
@@ -1302,13 +1302,17 @@
                     <div class="video anim" style="--delay: .4s">
                         <a href="#" style="text-decoration: none;color: #ff66d9;">
                             <div class="video-by" title="Time elapsed since the Attack started">Time since Attack start</div>
-                            <div class="video-name padding_stat_n">xxx</div>
+                            {% autoescape false %}
+                                <div class="video-name padding_stat_n">{{ attack_start_timestamp }}</div>
+                            {% endautoescape %}
                         </a>
                     </div>
                     <div class="video anim" style="--delay: .45s">
                         <a href="#" style="text-decoration: none;color: #ff66d9;">
                             <div class="video-by" title="Time since the sim started">Time since Sim start</div>
-                            <div class="video-name padding_stat_n" id="time_since_sim_start_min"></div>
+                            {% autoescape false %}
+                                <div class="video-name padding_stat_n">{{ sim_start_timestamp }}</div>
+                            {% endautoescape %}
                         </a>
                     </div>
                     <div class="video anim" style="--delay: .5s">
@@ -1329,6 +1333,25 @@
 
                 <div class="main-header anim" style="--delay: 0.6s">Logs</div>
                 <div class="videos">
+                    <div class="video anim" style="width: 203%;">
+                        <div style="text-decoration: none;color: #ff6666;">
+                            <div class="video-by">Attacker</div>
+                            <div class="video-name padding_stat_n">
+                                <table>
+                                    {% for red_log_now in red_logs_list %}
+                                        <tr>
+                                            {% autoescape false %}
+                                                <td>{{ red_log_now["timestamp"] }}</td>
+                                            {% endautoescape %}
+                                            <td style="color:white;font-size: 20px;">|</td>
+                                            <td style="color: white;font-weight: 700;">{{ red_log_now["data"] }}</td>
+                                        </tr>
+                                    {% endfor %}
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="video anim" style="width: 0;"></div>
                     <div class="video anim" style="width: 203%;">
                         <div style="text-decoration: none;color: #666eff;">
                             <div class="video-by">Defender</div>
@@ -1348,26 +1371,185 @@
                             </div>
                         </div>
                     </div>
-                    <div class="video anim" style="width: 0;"></div>
-                    <div class="video anim" style="width: 203%;">
-                        <div style="text-decoration: none;color: #ff6666;">
-                            <div class="video-by">Attacker</div>
-                            <div class="video-name padding_stat_n">
-                                <table>
-                                    {% for red_log_now in red_logs_list %}
-                                        <tr>
-                                            <td>{{ red_log_now["timestamp"] }}</td>
-                                            <td style="color:white;font-size: 20px;">|</td>
-                                            
-                                                <td style="color: white;font-weight: 700;">{{ red_log_now["data"] }}</td>
-                                            
-                                        </tr>
-                                    {% endfor %}
-                                </table>
-                            </div>
-                        </div>
-                    </div>
                 </div><br>
+
+                <!-- timeline css -->
+                <style>
+                    /* The actual timeline (the vertical ruler) */
+                    .timeline {
+                    position: relative;
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    }
+
+                    /* The actual timeline (the vertical ruler) */
+                    .timeline::after {
+                    content: '';
+                    position: absolute;
+                    width: 6px;
+                    background-color: #252936;
+                    top: 0;
+                    bottom: 0;
+                    left: 50%;
+                    margin-left: -3px;
+                    }
+
+                    /* Container around content */
+                    .container_time {
+                    padding: 10px 40px;
+                    position: relative;
+                    background-color: inherit;
+                    width: 50%;
+                    }
+
+                    /* The circles on the timeline */
+                    .container_time::after {
+                    content: '';
+                    position: absolute;
+                    width: 25px;
+                    height: 25px;
+                    right: -17px;
+                    background-color: #252936;
+                    border: 4px solid #fd3737;
+                    top: 15px;
+                    border-radius: 50%;
+                    z-index: 1;
+                    }
+
+                    .container_time_right {
+                    padding: 10px 40px;
+                    position: relative;
+                    background-color: inherit;
+                    width: 50%;
+                    }
+
+                    /* The circles on the timeline */
+                    .container_time_right::after {
+                    content: '';
+                    position: absolute;
+                    width: 25px;
+                    height: 25px;
+                    right: -17px;
+                    background-color: #252936;
+                    border: 4px solid #5590ff;
+                    top: 15px;
+                    border-radius: 50%;
+                    z-index: 1;
+                    }
+
+                    /* Place the container to the left */
+                    .left {
+                    left: 0;
+                    }
+
+                    /* Place the container to the right */
+                    .right {
+                    left: 50%;
+                    }
+
+                    /* Add arrows to the left container (pointing right) */
+                    .left::before {
+                    content: " ";
+                    height: 0;
+                    position: absolute;
+                    top: 22px;
+                    width: 0;
+                    z-index: 1;
+                    right: 30px;
+                    border: medium solid #252936;
+                    border-width: 10px 0 10px 10px;
+                    border-color: transparent transparent transparent #252936;
+                    }
+
+                    /* Add arrows to the right container (pointing left) */
+                    .right::before {
+                    content: " ";
+                    height: 0;
+                    position: absolute;
+                    top: 22px;
+                    width: 0;
+                    z-index: 1;
+                    left: 30px;
+                    border: medium solid #252936;
+                    border-width: 10px 10px 10px 0;
+                    border-color: transparent #252936 transparent transparent;
+                    }
+
+                    /* Fix the circle for containers on the right side */
+                    .right::after {
+                    left: -16px;
+                    }
+
+                    /* The actual content */
+                    .content_time {
+                    padding: 20px 30px;
+                    background-color: #252936;
+                    position: relative;
+                    border-radius: 6px;
+                    }
+
+                    /* Media queries - Responsive timeline on screens less than 600px wide */
+                    @media screen and (max-width: 600px) {
+                    /* Place the timelime to the left */
+                    .timeline::after {
+                        left: 31px;
+                    }
+
+                    /* Full-width containers */
+                    .container_time {
+                        width: 100%;
+                        padding-left: 70px;
+                        padding-right: 25px;
+                    }
+
+                    /* Make sure that all arrows are pointing leftwards */
+                    .container_time::before {
+                        left: 60px;
+                        border: medium solid #252936;
+                        border-width: 10px 10px 10px 0;
+                        border-color: transparent #252936 transparent transparent;
+                    }
+
+                    .container_time_right {
+                        width: 100%;
+                        padding-left: 70px;
+                        padding-right: 25px;
+                    }
+
+                    /* Make sure that all arrows are pointing leftwards */
+                    .container_time_right::before {
+                        left: 60px;
+                        border: medium solid #252936;
+                        border-width: 10px 10px 10px 0;
+                        border-color: transparent #252936 transparent transparent;
+                    }
+
+                    /* Make sure all circles are at the same spot */
+                    .left::after, .right::after {
+                        left: 15px;
+                    }
+
+                    /* Make all right containers behave like the left ones */
+                    .right {
+                        left: 0%;
+                    }
+                    }
+                </style>
+                <div>
+                    <div class="timeline">
+                        {% for blue_log_now in total_logs_list %}
+                            <div class='{{ blue_log_now["timeline_class"] }} {{ blue_log_now["timeline_side"] }}' style="box-sizing: border-box;">
+                                <div class="content_time" style="box-sizing: border-box;">
+                                    {% autoescape false %}
+                                        <h2>{{ blue_log_now["timestamp"] }}</h2>
+                                        <p>{{ blue_log_now["data"] }}</p>
+                                    {% endautoescape %}
+                                </div>
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+                
             </div>
             <script>
                 if("{{ sim_running }}" == "True"){
@@ -1377,7 +1559,6 @@
                     console.log("2")
                     document.getElementById("start_stop_sim_btn").innerHTML = "Start Simulation"
                 }
-                document.getElementById("time_since_sim_start_min").innerHTML = {{sim_start_timestamp}} + " min"
             </script>
         </div>
     </div>