diff --git a/ui/src/components/Sessions/SessionClose.vue b/ui/src/components/Sessions/SessionClose.vue
index 75f373ac4af..a2ae55fda7c 100644
--- a/ui/src/components/Sessions/SessionClose.vue
+++ b/ui/src/components/Sessions/SessionClose.vue
@@ -47,8 +47,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, ref } from "vue";
+<script setup lang="ts">
+import { PropType, ref } from "vue";
 import {
   INotificationsError,
   INotificationsSuccess,
@@ -57,55 +57,46 @@ import { IDevice } from "../../interfaces/IDevice";
 import { useStore } from "../../store";
 import handleError from "../../utils/handleError";
 
-export default defineComponent({
-  props: {
-    uid: {
-      type: String,
-      required: true,
-    },
-    device: {
-      type: Object as PropType<IDevice>,
-      required: true,
-    },
-    notHasAuthorization: {
-      type: Boolean,
-      default: false,
-    },
-    style: {
-      type: [String, Object],
-      default: undefined,
-    },
+const props = defineProps({
+  uid: {
+    type: String,
+    required: true,
   },
-  emits: ["update"],
-  setup(props, ctx) {
-    const showDialog = ref(false);
-    const store = useStore();
-
-    const closeSession = async () => {
-      try {
-        await store.dispatch("sessions/close", {
-          uid: props.uid,
-          device_uid: props.device.uid,
-        });
-        showDialog.value = false;
-        store.dispatch(
-          "snackbar/showSnackbarSuccessAction",
-          INotificationsSuccess.sessionClose,
-        );
-        ctx.emit("update");
-      } catch (error: unknown) {
-        store.dispatch(
-          "snackbar/showSnackbarErrorAction",
-          INotificationsError.sessionClose,
-        );
-        handleError(error);
-      }
-    };
-
-    return {
-      showDialog,
-      closeSession,
-    };
+  device: {
+    type: Object as PropType<IDevice>,
+    required: true,
+  },
+  notHasAuthorization: {
+    type: Boolean,
+    required: true,
+  },
+  style: {
+    type: [String, Object],
+    default: undefined,
   },
 });
+const emit = defineEmits(["update"]);
+const showDialog = ref(false);
+const store = useStore();
+
+const closeSession = async () => {
+  try {
+    await store.dispatch("sessions/close", {
+      uid: props.uid,
+      device_uid: props.device.uid,
+    });
+    showDialog.value = false;
+    store.dispatch(
+      "snackbar/showSnackbarSuccessAction",
+      INotificationsSuccess.sessionClose,
+    );
+    emit("update");
+  } catch (error: unknown) {
+    store.dispatch(
+      "snackbar/showSnackbarErrorAction",
+      INotificationsError.sessionClose,
+    );
+    handleError(error);
+  }
+};
 </script>
diff --git a/ui/src/components/Sessions/SessionDelete.vue b/ui/src/components/Sessions/SessionDelete.vue
index 865dc8e09ed..6476866c3fb 100644
--- a/ui/src/components/Sessions/SessionDelete.vue
+++ b/ui/src/components/Sessions/SessionDelete.vue
@@ -2,7 +2,7 @@
   <div>
     <v-list-item
       @click="showDialog = true"
-      :disabled="notHasAuthorization"
+      :disabled="props.notHasAuthorization"
     >
       <div class="d-flex align-center">
         <div class="mr-2">
@@ -46,8 +46,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from "vue";
+<script setup lang="ts">
+import { PropType, ref } from "vue";
 import {
   INotificationsError,
   INotificationsSuccess,
@@ -55,48 +55,40 @@ import {
 import { useStore } from "../../store";
 import handleError from "../../utils/handleError";
 
-export default defineComponent({
-  props: {
-    uid: {
-      type: String,
-      required: true,
-    },
-    notHasAuthorization: {
-      type: Boolean,
-      default: false,
-    },
-    style: {
-      type: [String, Object],
-      default: undefined,
-    },
+const props = defineProps({
+  uid: {
+    type: String,
+    required: true,
   },
-  emits: ["update"],
-  setup(props, ctx) {
-    const showDialog = ref(false);
-    const store = useStore();
-
-    const deleteRecord = async () => {
-      try {
-        await store.dispatch("sessions/deleteSessionLogs", props.uid);
-        showDialog.value = false;
-        store.dispatch(
-          "snackbar/showSnackbarSuccessAction",
-          INotificationsSuccess.sessionRemoveRecord,
-        );
-        ctx.emit("update");
-      } catch (error: unknown) {
-        store.dispatch(
-          "snackbar/showSnackbarErrorAction",
-          INotificationsError.sessionRemoveRecord,
-        );
-        handleError(error);
-      }
-    };
-
-    return {
-      showDialog,
-      deleteRecord,
-    };
+  notHasAuthorization: {
+    type: Boolean,
+    required: true,
+  },
+  style: {
+    type: [String, Object] as PropType<string | object>,
+    default: undefined,
   },
 });
+
+const emit = defineEmits(["update"]);
+const showDialog = ref(false);
+const store = useStore();
+
+const deleteRecord = async () => {
+  try {
+    await store.dispatch("sessions/deleteSessionLogs", props.uid);
+    showDialog.value = false;
+    store.dispatch(
+      "snackbar/showSnackbarSuccessAction",
+      INotificationsSuccess.sessionRemoveRecord,
+    );
+    emit("update");
+  } catch (error: unknown) {
+    store.dispatch(
+      "snackbar/showSnackbarErrorAction",
+      INotificationsError.sessionRemoveRecord,
+    );
+    handleError(error);
+  }
+};
 </script>
diff --git a/ui/src/components/Sessions/SessionList.vue b/ui/src/components/Sessions/SessionList.vue
index f8b64e6ff67..950b23d2bf5 100644
--- a/ui/src/components/Sessions/SessionList.vue
+++ b/ui/src/components/Sessions/SessionList.vue
@@ -105,6 +105,7 @@
                     <div v-bind="props">
                       <SessionPlay
                         v-if="session.authenticated && session.recorded"
+                        :is-active="session.active"
                         :uid="session.uid"
                         :device="session.device"
                         :notHasAuthorization="!hasAuthorizationPlay()"
@@ -128,7 +129,7 @@
                         v-if="session.active"
                         :uid="session.uid"
                         :device="session.device"
-                        :notHasAuthorization="!hasAuthorizationRemoveRecord()"
+                        :notHasAuthorization="!hasAuthorizationRemoveRecord"
                         @update="refreshSessions"
                         data-test="sessionDeleteRecord-component"
                       />
@@ -145,181 +146,155 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, onMounted, watch, computed } from "vue";
+<script setup lang="ts">
+import { ref, onMounted, watch, computed } from "vue";
 import axios, { AxiosError } from "axios";
 import { useRouter } from "vue-router";
 import hasPermission from "../../utils/permission";
 import { actions, authorizer } from "../../authorizer";
 import { useStore } from "../../store";
 import { formatDateCompact, lastSeen } from "../../utils/formateDate";
-import { displayOnlyTenCharacters } from "../../utils/string";
-import showTag from "../../utils/tag";
 import DataTable from "../DataTable.vue";
 import SessionClose from "./SessionClose.vue";
 import SessionPlay from "./SessionPlay.vue";
 import { INotificationsError } from "../../interfaces/INotifications";
 import handleError from "@/utils/handleError";
 
-export default defineComponent({
-  setup() {
-    const store = useStore();
-    const router = useRouter();
-    const loading = ref(false);
-    const itemsPerPage = ref(10);
-    const page = ref(1);
+const store = useStore();
+const router = useRouter();
+const loading = ref(false);
+const itemsPerPage = ref(10);
+const page = ref(1);
 
-    const sessions = computed(() => store.getters["sessions/list"]);
-    const numberSessions = computed(
-      () => store.getters["sessions/getNumberSessions"],
-    );
+const headers = [
+  {
+    text: "Active",
+    value: "active",
+  },
+  {
+    text: "Device",
+    value: "device",
+  },
+  {
+    text: "Username",
+    value: "username",
+  },
+  {
+    text: "Authenticated",
+    value: "authenticated",
+  },
+  {
+    text: "IP Address",
+    value: "ip_address",
+  },
+  {
+    text: "Started",
+    value: "started",
+  },
+  {
+    text: "Last Seen",
+    value: "last_seen",
+  },
+  {
+    text: "Actions",
+    value: "actions",
+  },
+];
 
-    const getSessions = async (perPagaeValue: number, pageValue: number) => {
-      if (!store.getters["box/getStatus"]) {
-        try {
-          loading.value = true;
-          const hasSessions = await store.dispatch("sessions/fetch", {
-            page: pageValue,
-            perPage: perPagaeValue,
-          });
+const sessions = computed(() => store.getters["sessions/list"]);
+const numberSessions = computed(
+  () => store.getters["sessions/getNumberSessions"],
+);
 
-          if (!hasSessions) {
-            page.value--;
-          }
-        } catch (error: unknown) {
-          if (axios.isAxiosError(error)) {
-            const axiosError = error as AxiosError;
-            if (axiosError.response?.status === 403) {
-              store.dispatch("snackbar/showSnackbarErrorAssociation");
-            }
-          } else {
-            store.dispatch(
-              "snackbar/showSnackbarErrorLoading",
-              INotificationsError.sessionList,
-            );
-            handleError(error);
-          }
-        } finally {
-          loading.value = false;
+const getSessions = async (perPagaeValue: number, pageValue: number) => {
+  if (!store.getters["box/getStatus"]) {
+    try {
+      loading.value = true;
+      const hasSessions = await store.dispatch("sessions/fetch", {
+        page: pageValue,
+        perPage: perPagaeValue,
+      });
+
+      if (!hasSessions) {
+        page.value--;
+      }
+    } catch (error: unknown) {
+      if (axios.isAxiosError(error)) {
+        const axiosError = error as AxiosError;
+        if (axiosError.response?.status === 403) {
+          store.dispatch("snackbar/showSnackbarErrorAssociation");
         }
       } else {
-        store.dispatch("box/setStatus", false);
+        store.dispatch(
+          "snackbar/showSnackbarErrorLoading",
+          INotificationsError.sessionList,
+        );
+        handleError(error);
       }
-    };
+    } finally {
+      loading.value = false;
+    }
+  } else {
+    store.dispatch("box/setStatus", false);
+  }
+};
 
-    onMounted(async () => {
-      await getSessions(itemsPerPage.value, page.value);
-    });
+onMounted(async () => {
+  await getSessions(itemsPerPage.value, page.value);
+});
 
-    const next = async () => {
-      await getSessions(itemsPerPage.value, ++page.value);
-    };
+const next = async () => {
+  await getSessions(itemsPerPage.value, ++page.value);
+};
 
-    const prev = async () => {
-      try {
-        if (page.value > 1) await getSessions(itemsPerPage.value, --page.value);
-      } catch (error) {
-        store.dispatch("snackbar/setSnackbarErrorDefault");
-      }
-    };
+const prev = async () => {
+  try {
+    if (page.value > 1) await getSessions(itemsPerPage.value, --page.value);
+  } catch (error) {
+    store.dispatch("snackbar/setSnackbarErrorDefault");
+  }
+};
 
-    const changeItemsPerPage = async (newItemsPerPage: number) => {
-      itemsPerPage.value = newItemsPerPage;
-    };
+const changeItemsPerPage = async (newItemsPerPage: number) => {
+  itemsPerPage.value = newItemsPerPage;
+};
 
-    watch(itemsPerPage, async () => {
-      await getSessions(itemsPerPage.value, page.value);
-    });
+watch(itemsPerPage, async () => {
+  await getSessions(itemsPerPage.value, page.value);
+});
 
-    const redirectToSession = (sessionUid: string) => {
-      router.push({ name: "detailsSession", params: { id: sessionUid } });
-    };
+const redirectToSession = (sessionUid: string) => {
+  router.push({ name: "detailsSession", params: { id: sessionUid } });
+};
 
-    const redirectDevice = (deviceUid: string) => {
-      router.push({ name: "detailsDevice", params: { id: deviceUid } });
-    };
+const redirectDevice = (deviceUid: string) => {
+  router.push({ name: "detailsDevice", params: { id: deviceUid } });
+};
 
-    const refreshSessions = async () => {
-      await getSessions(itemsPerPage.value, page.value);
-    };
+const refreshSessions = async () => {
+  await getSessions(itemsPerPage.value, page.value);
+};
 
-    const hasAuthorizationRemoveRecord = () => {
-      const role = store.getters["auth/role"];
-      if (role !== "") {
-        return hasPermission(
-          authorizer.role[role],
-          actions.session.removeRecord,
-        );
-      }
-
-      return false;
-    };
+const hasAuthorizationRemoveRecord = () => {
+  const role = store.getters["auth/role"];
+  if (role !== "") {
+    return hasPermission(
+      authorizer.role[role],
+      actions.session.removeRecord,
+    );
+  }
 
-    const hasAuthorizationPlay = () => {
-      const role = store.getters["auth/role"];
-      if (role !== "") {
-        return hasPermission(authorizer.role[role], actions.session.play);
-      }
+  return false;
+};
 
-      return false;
-    };
+const hasAuthorizationPlay = () => {
+  const role = store.getters["auth/role"];
+  if (role !== "") {
+    return hasPermission(authorizer.role[role], actions.session.play);
+  }
 
-    return {
-      headers: [
-        {
-          text: "Active",
-          value: "active",
-        },
-        {
-          text: "Device",
-          value: "device",
-        },
-        {
-          text: "Username",
-          value: "username",
-        },
-        {
-          text: "Authenticated",
-          value: "authenticated",
-        },
-        {
-          text: "IP Address",
-          value: "ip_address",
-        },
-        {
-          text: "Started",
-          value: "started",
-        },
-        {
-          text: "Last Seen",
-          value: "last_seen",
-        },
-        {
-          text: "Actions",
-          value: "actions",
-        },
-      ],
-      itemsPerPage,
-      page,
-      loading,
-      sessions,
-      numberSessions,
-      next,
-      prev,
-      showTag,
-      displayOnlyTenCharacters,
-      formatDateCompact,
-      lastSeen,
-      changeItemsPerPage,
-      redirectToSession,
-      redirectDevice,
-      refreshSessions,
-      hasAuthorizationRemoveRecord,
-      hasAuthorizationPlay,
-    };
-  },
-  components: { DataTable, SessionClose, SessionPlay },
-});
+  return false;
+};
 </script>
 
 <style scoped>
diff --git a/ui/src/components/Sessions/SessionPlay.vue b/ui/src/components/Sessions/SessionPlay.vue
index 771f2f77286..a0ef10f3944 100644
--- a/ui/src/components/Sessions/SessionPlay.vue
+++ b/ui/src/components/Sessions/SessionPlay.vue
@@ -78,7 +78,7 @@
                     class="ml-0"
                     min="0"
                     :max="totalLength"
-                    :label="`${nowTimerDisplay} - ${endTimerDisplay}`"
+                    :label="`${endTimerDisplay} - ${nowTimerDisplay} `"
                     hide-details
                     color="primary"
                     data-test="time-slider"
@@ -90,7 +90,7 @@
                 </div>
               </v-col>
 
-              <v-col cols="6" md="2">
+              <v-col cols="6" md="2" v-if="!props.isActive">
                 <div :elevation="0">
                   <v-select
                     :items="speedList"
@@ -104,6 +104,36 @@
                   />
                 </div>
               </v-col>
+              <v-col cols="6" md="2" v-else-if="!liveEnded">
+                <h3 class="mt-4 red-live text-red">
+                  <v-icon
+                    size="24"
+                    color="red"
+                    icon="mdi-broadcast"
+                    data-test="live-icon"
+                  />
+                  Live Viewing
+                </h3>
+              </v-col>
+              <v-col cols="6" md="2" v-else @click="updatePlay()">
+                <v-tooltip
+                  location="bottom"
+                  class="text-center"
+                >
+                  <template v-slot:activator="{ props }">
+                    <h3 v-bind="props" class="mt-4 text-grey">
+                      <v-icon
+                        size="24"
+                        icon="mdi-broadcast"
+                        data-test="live-stoped-icon"
+                      />
+                      Live Stopped
+                    </h3>
+                  </template>
+                  <span>The live viewing stops because the terminal isn't capturing anything new,
+                    please click the play button or the Live Stopped button to refresh the Session.</span>
+                </v-tooltip>
+              </v-col>
             </v-row>
           </v-container>
         </v-card-actions>
@@ -112,10 +142,9 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
   computed,
-  defineComponent,
   nextTick,
   onUpdated,
   ref,
@@ -125,6 +154,7 @@ import { Terminal } from "xterm";
 import "xterm/css/xterm.css";
 import { FitAddon } from "xterm-addon-fit";
 import moment from "moment";
+import axios from "axios";
 import { useStore } from "../../store";
 import { INotificationsError } from "../../interfaces/INotifications";
 import handleError from "../../utils/handleError";
@@ -132,303 +162,328 @@ import { ITerminalFrames, ITerminalLog } from "../../interfaces/ITerminal";
 
 type Timer = ReturnType<typeof setTimeout>;
 
-export default defineComponent({
-  props: {
-    uid: {
-      type: String,
-      required: true,
-    },
-    recorded: {
-      type: Boolean,
-      required: true,
-    },
-    notHasAuthorization: {
-      type: Boolean,
-      default: false,
-    },
+const props = defineProps({
+  uid: {
+    type: String,
+    required: true,
   },
-  emits: ["update"],
-  setup(props, ctx) {
-    const showDialog = ref(false);
-    const terminal = ref<HTMLElement>({} as HTMLElement);
-    const currentTime = ref(0);
-    const totalLength = ref(0);
-    const endTimerDisplay = ref<string | number>(0);
-    const getTimerNow = ref<string | number>(0);
-    const paused = ref(false);
-    const previousPause = ref(false);
-    const sliderChange = ref(false);
-    const speedList = ref([0.5, 1, 1.5, 2, 4]);
-    const logs = ref<Array<ITerminalLog>>([]);
-    const frames = ref<Array<ITerminalFrames>>([]);
-    const defaultSpeed = ref(1);
-    const transition = ref(false);
-    const xterm = ref<Terminal>({} as Terminal);
-    const fitAddon = ref<FitAddon>({} as FitAddon);
-    const iterativeTimer = ref<Timer>();
-    const iterativePrinting = ref<Timer>();
-
-    const store = useStore();
-    const length = computed(() => logs.value.length);
-    const nowTimerDisplay = computed(() => getTimerNow.value);
-
-    const getSliderIntervalLength = (timeMs: number | null) => {
-      let interval: number;
-      if (!timeMs && logs.value.length > 0) {
-        // not params, will return metrics to max timelength
-        const max = new Date(logs.value[length.value - 1].time);
-        const min = new Date(logs.value[0].time);
-        interval = +max - +min;
-      } else {
-        // it will format to the time argument passed
-        interval = timeMs || 0;
-      }
+  recorded: {
+    type: Boolean,
+    required: true,
+  },
+  notHasAuthorization: {
+    type: Boolean,
+    default: false,
+  },
+  isActive: {
+    type: Boolean,
+    required: true,
+  },
+});
+const emit = defineEmits(["update"]);
+const showDialog = ref(false);
+const terminal = ref<HTMLElement>({} as HTMLElement);
+const currentTime = ref(0);
+const totalLength = ref(0);
+const endTimerDisplay = ref<string | number>(0);
+const getTimerNow = ref<string | number>(0);
+const paused = ref(false);
+const previousPause = ref(false);
+const sliderChange = ref(false);
+const speedList = ref([0.5, 1, 1.5, 2, 4]);
+const logs = ref<Array<ITerminalLog>>([]);
+const frames = ref<Array<ITerminalFrames>>([]);
+const defaultSpeed = ref(1);
+const transition = ref(false);
+const xterm = ref<Terminal>({} as Terminal);
+const fitAddon = ref<FitAddon>({} as FitAddon);
+const iterativeTimer = ref<Timer>();
+const iterativePrinting = ref<Timer>();
+const liveEnded = ref(false);
+const store = useStore();
+const length = computed(() => logs.value.length);
+const nowTimerDisplay = computed(() => getTimerNow.value);
+
+const getSliderIntervalLength = (timeMs: number | null) => {
+  let interval: number;
+  if (!timeMs && logs.value.length > 0) {
+    // not params, will return metrics to max timelength
+    const max = new Date(logs.value[length.value - 1].time);
+    const min = new Date(logs.value[0].time);
+    interval = +max - +min;
+  } else {
+    // it will format to the time argument passed
+    interval = timeMs || 0;
+  }
+
+  return interval;
+};
+
+const setSliderDiplayTime = async (timeMs: number | null) => {
+  const interval = getSliderIntervalLength(timeMs);
+  const duration = moment.duration(interval, "milliseconds");
+
+  // format according to how long
+  let hoursFormat;
+  if (duration.asHours() > 1) hoursFormat = "h";
+  else hoursFormat = "";
+
+  const displayTime = moment
+    .utc(duration.asMilliseconds())
+    .format(`${hoursFormat ? `${hoursFormat}:` : ""}mm:ss`);
+  if (timeMs) {
+    endTimerDisplay.value = displayTime;
+  } else {
+    getTimerNow.value = displayTime;
+  }
+};
+
+const createFrames = () => {
+  // create cumulative frames for the exibition in slider
+  let time = 0;
+  let message = "";
+  const arrFrames = [
+    {
+      incMessage: (message += logs.value[0].message),
+      incTime: time,
+    },
+  ];
+
+  for (let i = 1; i < logs.value.length; i += 1) {
+    const future = new Date(logs.value[i].time);
+    const now = new Date(logs.value[i - 1].time);
+    const interval = moment
+      .duration(+future - +now, "milliseconds")
+      .asMilliseconds();
+    time += interval;
+    message += logs.value[i].message;
+    arrFrames.push({
+      incMessage: message,
+      incTime: time,
+    });
+  }
+  return arrFrames;
+};
+
+const timer = () => {
+  // Increments the slider
+  if (!paused.value) {
+    if (currentTime.value >= totalLength.value) {
+      paused.value = true;
+      return;
+    }
+    currentTime.value += 100;
+    setSliderDiplayTime(currentTime.value);
+  }
+  iterativeTimer.value = setTimeout(
+    timer.bind(null),
+    100 * (1 / defaultSpeed.value),
+  );
+};
+
+const searchClosestFrame = (givenTime: number, frames: Array<ITerminalFrames>) => {
+  // applies a binary search to find nearest frame
+  let between: number;
+  let lowerBound = 0;
+  let higherBound = frames.length - 1;
+  let nextTimeSetPrint;
+
+  for (; higherBound - lowerBound > 1;) {
+    // progressive increment search
+    between = Math.floor((lowerBound + higherBound) / 2);
+    if (frames[between].incTime < givenTime) {
+      lowerBound = between;
+      nextTimeSetPrint = givenTime - frames[between].incTime;
+    } else {
+      higherBound = between;
+      nextTimeSetPrint = frames[between].incTime - givenTime;
+    }
+  }
+  return {
+    message: frames[lowerBound].incMessage,
+    index: lowerBound,
+    waitForPrint: nextTimeSetPrint,
+  };
+};
+
+const print = (i: number, logsArray: Array<ITerminalLog>) => {
+  // Writes iteratevely on xterm as time progresses
+  sliderChange.value = false;
+  if (!paused.value) {
+    xterm.value.write(`${logsArray[i].message}`);
+    if (i === logsArray.length - 1) return;
+    const nowTimerDisplay = new Date(logsArray[i].time);
+    const future = new Date(logsArray[i + 1].time);
+    const interval = +future - +nowTimerDisplay;
+    iterativePrinting.value = setTimeout(
+      print.bind(null, i + 1, logsArray),
+      interval * (1 / defaultSpeed.value),
+    );
+  }
+};
+
+const clear = () => {
+  // Ensure to clear functions for syncronism
+  clearInterval(iterativePrinting.value);
+  clearInterval(iterativeTimer.value);
+};
+
+const xtermSyncFrame = (givenTime: number) => {
+  if (xterm.value) {
+    xterm.value.write("\u001Bc"); // clean screen
+    const frame = searchClosestFrame(givenTime, frames.value);
+    clear();
+    xterm.value.write(frame.message); // write frame on xterm
+    iterativeTimer.value = setTimeout(timer.bind(null), 1);
+    iterativePrinting.value = setTimeout(
+      print.bind(null, frame.index + 1, logs.value),
+      frame.waitForPrint * (1 / defaultSpeed.value),
+    );
+  }
+};
+
+const speedChange = (speed: number) => {
+  defaultSpeed.value = speed;
+  xtermSyncFrame(currentTime.value);
+};
+
+const changeSliderTime = () => {
+  sliderChange.value = true;
+  xtermSyncFrame(currentTime.value);
+};
+
+onUpdated(() => {
+  if (showDialog.value) {
+    setSliderDiplayTime(currentTime.value);
+  }
+});
 
-      return interval;
-    };
-
-    const setSliderDiplayTime = async (timeMs: number | null) => {
-      const interval = getSliderIntervalLength(timeMs);
-      const duration = moment.duration(interval, "milliseconds");
-
-      // format according to how long
-      let hoursFormat;
-      if (duration.asHours() > 1) hoursFormat = "h";
-      else hoursFormat = "";
-
-      const displayTime = moment
-        .utc(duration.asMilliseconds())
-        .format(`${hoursFormat ? `${hoursFormat}:` : ""}mm:ss`);
-      if (timeMs) {
-        endTimerDisplay.value = displayTime;
-      } else {
-        getTimerNow.value = displayTime;
-      }
-    };
-
-    const createFrames = () => {
-      // create cumulative frames for the exibition in slider
-      let time = 0;
-      let message = "";
-      const arrFrames = [
-        {
-          incMessage: (message += logs.value[0].message),
-          incTime: time,
-        },
-      ];
-
-      for (let i = 1; i < logs.value.length; i += 1) {
-        const future = new Date(logs.value[i].time);
-        const now = new Date(logs.value[i - 1].time);
-        const interval = moment
-          .duration(+future - +now, "milliseconds")
-          .asMilliseconds();
-        time += interval;
-        message += logs.value[i].message;
-        arrFrames.push({
-          incMessage: message,
-          incTime: time,
-        });
-      }
-      return arrFrames;
-    };
-
-    const timer = () => {
-      // Increments the slider
-      if (!paused.value) {
-        if (currentTime.value >= totalLength.value) {
-          paused.value = true;
-          return;
-        }
-        currentTime.value += 100;
-        setSliderDiplayTime(currentTime.value);
-      }
-      iterativeTimer.value = setTimeout(
-        timer.bind(null),
-        100 * (1 / defaultSpeed.value),
-      );
-    };
-
-    const searchClosestFrame = (givenTime: number, frames: Array<ITerminalFrames>) => {
-      // applies a binary search to find nearest frame
-      let between: number;
-      let lowerBound = 0;
-      let higherBound = frames.length - 1;
-      let nextTimeSetPrint;
-
-      for (; higherBound - lowerBound > 1;) {
-        // progressive increment search
-        between = Math.floor((lowerBound + higherBound) / 2);
-        if (frames[between].incTime < givenTime) {
-          lowerBound = between;
-          nextTimeSetPrint = givenTime - frames[between].incTime;
-        } else {
-          higherBound = between;
-          nextTimeSetPrint = frames[between].incTime - givenTime;
-        }
-      }
-      return {
-        message: frames[lowerBound].incMessage,
-        index: lowerBound,
-        waitForPrint: nextTimeSetPrint,
-      };
-    };
-
-    const print = (i: number, logsArray: Array<ITerminalLog>) => {
-      // Writes iteratevely on xterm as time progresses
-      sliderChange.value = false;
-      if (!paused.value) {
-        xterm.value.write(`${logsArray[i].message}`);
-        if (i === logsArray.length - 1) return;
-        const nowTimerDisplay = new Date(logsArray[i].time);
-        const future = new Date(logsArray[i + 1].time);
-        const interval = +future - +nowTimerDisplay;
-        iterativePrinting.value = setTimeout(
-          print.bind(null, i + 1, logsArray),
-          interval * (1 / defaultSpeed.value),
-        );
-      }
-    };
-
-    const clear = () => {
-      // Ensure to clear functions for syncronism
-      clearInterval(iterativePrinting.value);
-      clearInterval(iterativeTimer.value);
-    };
-
-    const xtermSyncFrame = (givenTime: number) => {
-      if (xterm.value) {
-        xterm.value.write("\u001Bc"); // clean screen
-        const frame = searchClosestFrame(givenTime, frames.value);
-        clear();
-        xterm.value.write(frame.message); // write frame on xterm
-        iterativeTimer.value = setTimeout(timer.bind(null), 1);
-        iterativePrinting.value = setTimeout(
-          print.bind(null, frame.index + 1, logs.value),
-          frame.waitForPrint * (1 / defaultSpeed.value),
-        );
-      }
-    };
+const openPlay = async () => {
+  if (props.recorded) {
+    await store.dispatch("sessions/getLogSession", props.uid);
+    logs.value = store.getters["sessions/get"];
+    totalLength.value = getSliderIntervalLength(null);
+    setSliderDiplayTime(null);
+    setSliderDiplayTime(currentTime.value);
+
+    frames.value = createFrames();
+
+    xterm.value = new Terminal({
+      cursorBlink: true,
+      fontFamily: "monospace",
+      theme: {
+        background: "#0f1526",
+      },
+    });
 
-    const speedChange = (speed: number) => {
-      defaultSpeed.value = speed;
-      xtermSyncFrame(currentTime.value);
-    };
+    fitAddon.value = new FitAddon();
+    xterm.value.loadAddon(fitAddon.value);
 
-    const changeSliderTime = () => {
-      sliderChange.value = true;
-      xtermSyncFrame(currentTime.value);
-    };
+    if (xterm.value.element) {
+      xterm.value.reset();
+    }
+  }
+};
 
-    const pauseHandler = () => {
-      paused.value = !paused.value;
-      xtermSyncFrame(currentTime.value);
-    };
+const updatePlay = async () => {
+  emit("update");
+  if (props.isActive && props.recorded) {
+    try {
+      await store.dispatch("sessions/updateLogSession", props.uid);
+      logs.value = store.getters["sessions/get"];
+      totalLength.value = getSliderIntervalLength(null);
+      setSliderDiplayTime(null);
+      setSliderDiplayTime(currentTime.value);
 
-    onUpdated(() => {
-      if (showDialog.value) {
-        setSliderDiplayTime(currentTime.value);
-      }
-    });
+      frames.value = createFrames();
 
-    const openPlay = async () => {
-      if (props.recorded) {
-        await store.dispatch("sessions/getLogSession", props.uid);
-        logs.value = store.getters["sessions/get"];
-        totalLength.value = getSliderIntervalLength(null);
-        setSliderDiplayTime(null);
-        setSliderDiplayTime(currentTime.value);
-
-        frames.value = createFrames();
-
-        xterm.value = new Terminal({
-          cursorBlink: true,
-          fontFamily: "monospace",
-          theme: {
-            background: "#0f1526",
-          },
-        });
-
-        fitAddon.value = new FitAddon();
-        xterm.value.loadAddon(fitAddon.value); // adjust screen in container
-
-        if (xterm.value.element) {
-          xterm.value.reset();
-        }
-      }
-    };
-
-    const connect = async () => {
-      if (!xterm.value.element) {
-        xterm.value.open(terminal.value);
-        fitAddon.value.fit();
-        xterm.value.focus();
-        print(0, logs.value);
-        timer();
-      }
-    };
-
-    const displayDialog = async () => {
-      // await to change dialog for the connection
-      try {
-        await openPlay();
-
-        await nextTick().then(() => {
-          connect();
-        });
-      } catch (error: unknown) {
-        store.dispatch(
-          "snackbar/showSnackbarErrorLoading",
-          INotificationsError.sessionPlay,
-        );
-        handleError(error);
-      }
-    };
+      xterm.value.loadAddon(fitAddon.value);
+      xtermSyncFrame(currentTime.value);
+
+      liveEnded.value = false;
 
-    const close = async () => {
-      transition.value = true;
-      if (xterm.value) {
+      if (xterm.value.element) {
         xterm.value.reset();
-        xterm.value.element?.remove();
       }
-      clear();
-      currentTime.value = 0;
-      paused.value = false;
-      defaultSpeed.value = 1;
-
-      ctx.emit("update");
-    };
-
-    watch(showDialog, (value) => {
-      if (!value) {
-        close();
-        showDialog.value = false;
-      } else {
-        displayDialog();
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        return;
       }
-    });
-
-    return {
-      showDialog,
-      terminal,
-      currentTime,
-      totalLength,
-      endTimerDisplay,
-      getTimerNow,
-      paused,
-      previousPause,
-      sliderChange,
-      speedList,
-      logs,
-      frames,
-      defaultSpeed,
-      transition,
-      pauseHandler,
-      nowTimerDisplay,
-      changeSliderTime,
-      speedChange,
-      setSliderDiplayTime,
-    };
+      liveEnded.value = true;
+    }
+  }
+};
+
+const pauseHandler = () => {
+  paused.value = !paused.value;
+
+  if (props.isActive) {
+    setTimeout(() => {
+      updatePlay();
+    }, 3000);
+  }
+};
+
+watch(
+  () => currentTime.value >= (totalLength.value - 5),
+  (newValue) => {
+    if (newValue) {
+      updatePlay();
+    }
   },
+);
+
+const connect = async () => {
+  if (!xterm.value.element) {
+    xterm.value.open(terminal.value);
+    fitAddon.value.fit();
+    xterm.value.focus();
+    print(0, logs.value);
+    timer();
+  }
+};
+
+const displayDialog = async () => {
+  try {
+    await openPlay();
+
+    await nextTick().then(() => {
+      connect();
+    });
+  } catch (error: unknown) {
+    store.dispatch(
+      "snackbar/showSnackbarErrorLoading",
+      INotificationsError.sessionPlay,
+    );
+    handleError(error);
+  }
+};
+
+const close = async () => {
+  transition.value = true;
+  if (xterm.value) {
+    xterm.value.reset();
+    xterm.value.element?.remove();
+  }
+  clear();
+  currentTime.value = 0;
+  paused.value = false;
+  defaultSpeed.value = 1;
+  liveEnded.value = false;
+  emit("update");
+};
+
+watch(showDialog, (value) => {
+  if (!value) {
+    close();
+    showDialog.value = false;
+  } else {
+    displayDialog();
+  }
 });
 </script>
+
+<style scoped>
+.red-live {
+  filter: drop-shadow(0px 0px 10px rgba(255, 0, 0, 0.444))
+}</style>
diff --git a/ui/src/store/modules/sessions.ts b/ui/src/store/modules/sessions.ts
index fa58fa21308..2e131564171 100755
--- a/ui/src/store/modules/sessions.ts
+++ b/ui/src/store/modules/sessions.ts
@@ -2,10 +2,11 @@ import { Module } from "vuex";
 import * as apiSession from "../api/sessions";
 import { ISessions } from "@/interfaces/ISessions";
 import { State } from "..";
+import { ITerminalLog } from "@/interfaces/ITerminal";
 
 export interface SessionsState {
   sessions: Array<ISessions>;
-  session: ISessions;
+  session: Array<ITerminalLog>;
   numberSessions: number;
   page: number;
   perPage: number;
@@ -15,7 +16,7 @@ export const sessions: Module<SessionsState, State> = {
   namespaced: true,
   state: {
     sessions: [],
-    session: {} as ISessions,
+    session: {} as ITerminalLog[],
     numberSessions: 0,
     page: 1,
     perPage: 10,
@@ -39,6 +40,18 @@ export const sessions: Module<SessionsState, State> = {
       state.session = res.data;
     },
 
+    updateSession: (state, res) => {
+      const newSession = res.data;
+
+      Object.keys(newSession).forEach((key) => {
+        if (Object.prototype.hasOwnProperty.call(state.session, key)) {
+          state.session[key] = newSession[key];
+        } else {
+          state.session = { ...state.session, [key]: newSession[key] };
+        }
+      });
+    },
+
     setPagePerpage: (state, data) => {
       state.page = data.page;
       state.perPage = data.perPage;
@@ -55,13 +68,12 @@ export const sessions: Module<SessionsState, State> = {
     },
 
     clearObjectSession: (state) => {
-      state.session = {} as ISessions;
+      state.session = [];
     },
 
     removeRecordedSession: (state) => {
       state.session = {
         ...state.session,
-        recorded: false,
       };
     },
   },
@@ -115,6 +127,21 @@ export const sessions: Module<SessionsState, State> = {
       }
     },
 
+    updateLogSession: async (context, uid) => {
+      try {
+        const res = await apiSession.getLog(uid);
+
+        if (context.state.session.length === res.data.length) {
+          throw new Error();
+        }
+
+        context.commit("setSession", res);
+      } catch (error) {
+        context.commit("clearObjectSession");
+        throw error;
+      }
+    },
+
     resetPagePerpage: async (context) => {
       context.commit("resetPagePerpage");
     },
diff --git a/ui/src/views/DetailsSessions.vue b/ui/src/views/DetailsSessions.vue
index 884a6d1e489..e8defcab139 100644
--- a/ui/src/views/DetailsSessions.vue
+++ b/ui/src/views/DetailsSessions.vue
@@ -39,6 +39,7 @@
                     :device="session.device"
                     :notHasAuthorization="!hasAuthorizationPlay()"
                     :recorded="session.authenticated && session.recorded"
+                    :is-active="session.active"
                     @update="refreshSessions"
                     data-test="sessionPlay-component"
                   />