diff --git a/.github/workflows/sld-dashboard-docker-image.yml b/.github/workflows/sld-dashboard-docker-image.yml
index d16b9ee6..aad97345 100644
--- a/.github/workflows/sld-dashboard-docker-image.yml
+++ b/.github/workflows/sld-dashboard-docker-image.yml
@@ -24,11 +24,11 @@ jobs:
 
     - name: Build the Docker image with tags
       working-directory: ./sld-dashboard
-      run: docker build . --file Dockerfile --tag ${{ secrets.DOCKER_USERNAME }}/sld-dashboard:2.16.0
+      run: docker build . --file Dockerfile --tag ${{ secrets.DOCKER_USERNAME }}/sld-dashboard:2.17.0
       
     - name: Docker Push with tags
       #if: github.event.pull_request.merged == true
-      run: docker push ${{ secrets.DOCKER_USERNAME }}/sld-dashboard:2.16.0
+      run: docker push ${{ secrets.DOCKER_USERNAME }}/sld-dashboard:2.17.0
 
     - name: Build the Docker image
       working-directory: ./sld-dashboard
diff --git a/sld-dashboard/app/base/static/assets/css/volt.css b/sld-dashboard/app/base/static/assets/css/volt.css
index 3ec33371..36468552 100644
--- a/sld-dashboard/app/base/static/assets/css/volt.css
+++ b/sld-dashboard/app/base/static/assets/css/volt.css
@@ -41746,6 +41746,71 @@ pre {
     position: relative;
     flex: 1 1 auto;
     padding: 1rem;
-    background-color: #040720;
+    background-color: #333;
     color: #fff;
-}
\ No newline at end of file
+}
+
+.tag-style {
+    background-color: #262B40;
+; /* Un gris oscuro */
+    color: white; /* Texto en color blanco para contraste */
+    padding: 5px 10px; /* Espaciado interno para dar forma al tag */
+    border-radius: 5px; /* Bordes redondeados para la apariencia de un tag */
+    font-weight: normal; /* Peso de la fuente, ajusta según necesidad */
+    display: inline-block; /* Para asegurar que el estilo se aplique correctamente */
+    margin: 2px; /* Un pequeño margen alrededor del tag */
+    width: 100px; /* Ancho fijo para el tag */
+    text-align: center; /* Centrar el texto dentro del tag */
+}
+
+
+.tag-style-success {
+    background-color: var(--bs-soft-green); /* Un gris oscuro */
+    color: white; /* Texto en color blanco para contraste */
+    padding: 5px 10px; /* Espaciado interno para dar forma al tag */
+    border-radius: 5px; /* Bordes redondeados para la apariencia de un tag */
+    font-weight: normal; /* Peso de la fuente, ajusta según necesidad */
+    display: inline-block; /* Para asegurar que el estilo se aplique correctamente */
+    margin: 2px; /* Un pequeño margen alrededor del tag */
+    width: 100px; /* Ancho fijo para el tag */
+    text-align: center; /* Centrar el texto dentro del tag */
+}
+
+.tag-style-failure {
+    background-color: var(--bs-reddit); /* Un gris oscuro */
+    color: white; /* Texto en color blanco para contraste */
+    padding: 5px 10px; /* Espaciado interno para dar forma al tag */
+    border-radius: 5px; /* Bordes redondeados para la apariencia de un tag */
+    font-weight: normal; /* Peso de la fuente, ajusta según necesidad */
+    display: inline-block; /* Para asegurar que el estilo se aplique correctamente */
+    margin: 2px; /* Un pequeño margen alrededor del tag */
+    width: 100px; /* Ancho fijo para el tag */
+    text-align: center; /* Centrar el texto dentro del tag */    
+}
+
+.tag-style-status {
+    background-color: var(--bs-purple); /* Un gris oscuro */
+    color: white; /* Texto en color blanco para contraste */
+    padding: 5px 10px; /* Espaciado interno para dar forma al tag */
+    border-radius: 5px; /* Bordes redondeados para la apariencia de un tag */
+    font-weight: normal; /* Peso de la fuente, ajusta según necesidad */
+    display: inline-block; /* Para asegurar que el estilo se aplique correctamente */
+    margin: 2px; /* Un pequeño margen alrededor del tag */
+    width: 100px; /* Ancho fijo para el tag */
+    text-align: center; /* Centrar el texto dentro del tag */    
+}
+
+.tag-style-retry {
+    background-color: var(--bs-warning); /* Un gris oscuro */
+    color: white; /* Texto en color blanco para contraste */
+    padding: 5px 10px; /* Espaciado interno para dar forma al tag */
+    border-radius: 5px; /* Bordes redondeados para la apariencia de un tag */
+    font-weight: normal; /* Peso de la fuente, ajusta según necesidad */
+    display: inline-block; /* Para asegurar que el estilo se aplique correctamente */
+    margin: 2px; /* Un pequeño margen alrededor del tag */
+    width: 100px; /* Ancho fijo para el tag */
+    text-align: center; /* Centrar el texto dentro del tag */    
+}
+
+
+
diff --git a/sld-dashboard/app/base/static/assets/js/pagination.js b/sld-dashboard/app/base/static/assets/js/pagination.js
index 3e2b19ff..e81c2bc7 100644
--- a/sld-dashboard/app/base/static/assets/js/pagination.js
+++ b/sld-dashboard/app/base/static/assets/js/pagination.js
@@ -1,5 +1,5 @@
 $(document).ready(function(){
-  var rowsPerPage = 10; // Valor inicial
+  var rowsPerPage = 20; // Valor inicial
   var rows = $('#myTable tr');
   var filteredRows = rows; // Inicialmente, todas las filas son el conjunto filtrado
   var pagesCount;
diff --git a/sld-dashboard/app/base/static/assets/js/pyodide.js b/sld-dashboard/app/base/static/assets/js/pyodide.js
new file mode 100644
index 00000000..15d21e73
--- /dev/null
+++ b/sld-dashboard/app/base/static/assets/js/pyodide.js
@@ -0,0 +1,17 @@
+window.languagePluginUrl = 'https://cdn.jsdelivr.net/pyodide/v0.18.1/full/';
+importScripts('https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js');
+
+async function main() {
+    await loadPyodide();
+}
+main();
+
+async function runPython() {
+    let output = await pyodide.runPythonAsync(`
+        import numpy as np
+        x = np.array([1, 2, 3, 4, 5])
+        y = np.sum(x)
+        y
+    `);
+    document.getElementById("pythonOutput").innerText = "Suma de array: " + output;
+}
\ No newline at end of file
diff --git a/sld-dashboard/app/home/routes.py b/sld-dashboard/app/home/routes.py
index 34ee5a93..37653ad8 100644
--- a/sld-dashboard/app/home/routes.py
+++ b/sld-dashboard/app/home/routes.py
@@ -3,6 +3,8 @@
 import ast
 import json
 import time
+from flask import jsonify, render_template, request, url_for, redirect, flash
+
 
 import redis
 from app import login_manager
@@ -40,6 +42,52 @@ def index():
         "index.html", segment="index", external_api_dns=external_api_dns
     )
 
+@blueprint.route('/status/<task_id>')
+def status(task_id):
+    try:
+        token = decrypt(r.get(current_user.id))
+        # Check if token no expired
+        check_unauthorized_token(token)
+        response = request_url(
+            verb="GET",
+            uri=f"tasks/id/{task_id}",
+            headers={"Authorization": f"Bearer {token}"}
+        )
+        if response.get("status_code") == 200:
+            data = response.get("json").get("result")
+            return jsonify(data) 
+        else:
+            return jsonify({"status": "Error"}), response.status_code
+    except TemplateNotFound:
+        return render_template("page-404.html"), 404
+    except TypeError:
+        return redirect(url_for("base_blueprint.logout"))
+    except Exception:
+        return render_template("page-500.html"), 500
+
+
+@blueprint.route('/output/<task_id>')
+@login_required
+def output(task_id):
+    try:
+        token = decrypt(r.get(current_user.id))
+        # Check if token no expired
+        check_unauthorized_token(token)
+        response = request_url(
+            verb="GET",
+            uri=f"tasks/id/{task_id}",
+            headers={"Authorization": f"Bearer {token}"}
+        )
+        if response.get("status_code") == 200:
+            data = response.get("json").get("result").get("module").get("stdout")
+            return data
+    except TemplateNotFound:
+        return render_template("page-404.html"), 404
+    except TypeError:
+        return redirect(url_for("base_blueprint.logout"))
+    except Exception:
+        return render_template("page-500.html"), 500
+
 
 # Start Deploy
 @blueprint.route("/deploys-list", defaults={"limit": 0})
diff --git a/sld-dashboard/app/home/templates/activity-logs.html b/sld-dashboard/app/home/templates/activity-logs.html
index dd159fea..94d23100 100644
--- a/sld-dashboard/app/home/templates/activity-logs.html
+++ b/sld-dashboard/app/home/templates/activity-logs.html
@@ -102,7 +102,7 @@ <h2 class="h4">All Activity</h2>
                     <td><span class="icon icon-sm"><span class="fas fa-box-open"></span></span></td>
                     {% endif %}
                     <td><span class="font-weight-normal">{{ logs.id }}</span></td>
-                    <td><span class="font-weight-normal">{{ logs.username }}</span></td>
+                    <td><span class="tag-style">{{ logs.username }}</span></td>
                     <td><span class="font-weight-normal">{{ logs.action }}</span></td>
                     <td><span class="font-weight-normal">{{ logs.squad}}</span></td>
                     <td><span class="font-weight-bold">{{ logs.created_at }}</span></td>
diff --git a/sld-dashboard/app/home/templates/deploy-plan.html b/sld-dashboard/app/home/templates/deploy-plan.html
index 915cefd3..5062a961 100644
--- a/sld-dashboard/app/home/templates/deploy-plan.html
+++ b/sld-dashboard/app/home/templates/deploy-plan.html
@@ -58,7 +58,7 @@ <h6><strong>{{key}}</strong></h6>
                                     {% endfor %}
                                     <button type="submit" class="btn btn-primary" name="button"
                                         action="{{url_for('.plan')}}">
-                                        Deploydddd
+                                        Deploy
                                     </button>
 
                                 </form>
diff --git a/sld-dashboard/app/home/templates/deploys-list.html b/sld-dashboard/app/home/templates/deploys-list.html
index ead9d178..a621f5d0 100644
--- a/sld-dashboard/app/home/templates/deploys-list.html
+++ b/sld-dashboard/app/home/templates/deploys-list.html
@@ -5,6 +5,7 @@
 <!-- Specific Page CSS goes HERE  -->
 {% block stylesheets %}{% endblock stylesheets %}
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
 {% block content %}
 <main class="content">
 
@@ -95,8 +96,7 @@ <h2 class="h4">All Deploys</h2>
             <thead class="thead-dark">
                 <tr>
                     <th>Id</th>
-                    <th>Deploy Name</th>
-                    <th>Stack</th>
+                    <th>Deploy Name| Stack | Branch</th>
                     <th>Squad</th>
                     <th>Environment</th>
                     <th>Username</th>
@@ -112,43 +112,36 @@ <h2 class="h4">All Deploys</h2>
                 {% for deploy in deploys %}
                 <tr>
                     <td>
-                    <span class="copy-icon"
-                    onclick="copyToClipboard('id={{ deploy.id }} deploy_name={{ deploy.name }} environment={{ deploy.environment }} stack/branch={{deploy.stack_name}}/{{deploy.stack_branch}} task_id={{deploy.task_id}}')" title="Copy to clipboard">
-                <i class="far fa-copy"></i>
-                </span>
-               <span class="download-icon" data-variables="{{ deploy.variables }}" onclick="downloadTFVars(this)" title="Download tfvars">
-                <i class="far fa-file"></i>
-                </span>
+
                         <a href="" class="font-weight-bold">
-                            {{ deploy.id }}
+                            <div>{{ deploy.id }}</div>
                         </a>
 
                     </td>
                     <td>
-                        <span class="font-weight-normal">{{ deploy.name }}</span>
+                        <span class="font-weight-normal">
+                            <div style="font-size: 17px; font-weight: bold;">{{ deploy.name }}</div>
+                            <div><span style="font-size: 12px; font-weight: bold;">stack</span>: {{ deploy.stack_name }}</div>
+                            <div><span style="font-size: 12px; font-weight: bold;">branch</span>: {{deploy.stack_branch }}</div>
+                            <div>
+                <span class="copy-icon"
+                    onclick="copyToClipboard('id={{ deploy.id }} deploy_name={{ deploy.name }} environment={{ deploy.environment }} stack/branch={{deploy.stack_name}}/{{deploy.stack_branch}} task_id={{deploy.task_id}}')" title="Copy to clipboard">
+                <span style="font-size: 12px; font-weight: bold;">copy:</span> <i class="far fa-copy"></i>
+                </span>
+               <span class="download-icon" data-variables="{{ deploy.variables }}" onclick="downloadTFVars(this)" title="Download tfvars">
+                | <span style="font-size: 12px; font-weight: bold;">tfvars:</span> <i class="far fa-file"></i>
+                </span>
+                            </div>
+                        </span>
                     </td>
-                    <td><span class="font-weight-normal">
-                            <a href="#" aria-disabled="true"
-                               title="branch {{deploy.get('stack_branch')}}">
-                               {{ deploy.stack_name }}
-                            </a></span></td>
-                    <!--<td><span class="font-weight-normal">{{ deploy.stack_name}}</span></td>-->
-                    <td><span class="font-weight-normal">{{ deploy.squad}}</span></td>
-                    <td><span class="font-weight-normal">{{ deploy.environment}}</span></td>
+                    <td><span class="tag-style">{{ deploy.squad}}</span></td>
+                    <td><span class="tag-style">{{ deploy.environment}}</span></td>
                     <td><span class="font-weight-normal">{{ deploy.username}}</span></td>
                     <td><span class="font-weight-bold">{{ deploy.start_time }}</span></td>
                     <td><span class="font-weight-bold">{{ deploy.destroy_time }}</span></td>
-                    <td><span class="font-weight-normal">{{ deploy.action}}</span></td>
-                    {% set status = task_status(deploy.task_id, token).result %}
-                    {% if status == "SUCCESS" %}
-                    <td><span class="font-weight-bold text-success">{{ status }}</span></td>
-                    {% elif status == "ERROR" or (status == "FAILURE") %}
-                    <td><span class="font-weight-bold text-danger">{{ status }}</span></td>
-                    {% elif status == "RETRY" %}
-                    <td><span class="font-weight-bold text-warning">{{ status }}</span></td>
-                    {% else %}
-                    <td><span class="font-weight-bold text-info ">{{ status }}</span></td>
-                    {% endif %}
+                    <td><span class="tag-style">{{ deploy.action}}</span></td>
+                    <td id="status-{{ deploy.task_id }}">
+
                     <td>
                         <!-- button group-->
                         <div class="btn-group">
@@ -165,6 +158,8 @@ <h2 class="h4">All Deploys</h2>
                                     <span class="fas fa-edit mr-2"></span>Edit</a>
                                 <a class="dropdown-item" href="{{ url_for('.relaunch_deploy',deploy_id=deploy.id)}}">
                                     <span class="fas fa-sync mr-2"></span>Approve</a>
+                                <a class="dropdown-item" href="{{url_for('.list_deploys')}}">
+                                    <span class="fas fa-sync mr-2"></span>Plan</a>
                                 <a class="dropdown-item text-danger" data-toggle="modal"
                                                                      data-target="#DeleteModalCenter-{{deploy.id}}">
                                     <span class="fas fa-skull-crossbones mr-2"></span> delete </a>
@@ -191,11 +186,12 @@ <h2 class="h4">All Deploys</h2>
                             </div>
                             {% endif %}
                             <!-- Output-->
-                            <span class="icon icon-sm">
-                                <a title="Output Deploy" class="nav-link icon-notifications text-dark" data-toggle="modal"
-                                                                                 data-target="#OutputModalCenter-{{deploy.id}}">
-                                    <span class="fab fa-searchengin mr-0"></span></a>
-                            </span>
+                            <!-- Botón para abrir el modal -->
+<span class="icon icon-sm">
+    <a title="Output Deploy" class="nav-link icon-notifications text-dark output-button" data-task-id="{{deploy.task_id}}" data-deploy-id="{{deploy.id}}">
+        <span class="fab fa-searchengin mr-0"></span>
+    </a>
+</span>
                             <!-- Schedule -->
                             <span class="icon icon-sm">
                                 <a title="Edit Schedule" class="dropdown-item" href="{{ url_for('.edit_schedule',deploy_id=deploy.id)}}">
@@ -242,42 +238,22 @@ <h5 class="modal-title" id="UnlockModalLongTitle-{{deploy.id}}">Unlock Deploy
                     </div>
                 </div>
                 <!-- Modal Output-->
-                <div class="modal fade" id="OutputModalCenter-{{deploy.id}}">
-                    <div class="modal-dialog modal-xl" role="document">
-                        <div class="modal-content">
-                            <div class="modal-header">
-                                <h5 class="modal-title" id="OutputModalLongTitle-{{deploy.id}}">Output Deploy
-                                    {{deploy.name}}</h5>
-                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                    <span aria-hidden="true">&times;</span>
-                                </button>
-                            </div>
-                            <div class="modal-output">
-                                {% set stdout = task_log(deploy.task_id, token).result %}
-                                {% if stdout is iterable and (stdout is not string and stdout is not mapping) %}
-                                {%for i in stdout %}
-                                    {% set stripped_line = i.strip() %}
-                                    {% if stripped_line.startswith('+') %}
-                                        <p><span class="plus"><strong>{{ i }}</strong></span></p>
-                                    {% elif stripped_line.startswith('-') %}
-                                        <p><span class="minus"><strong>{{ i }}</strong></span></p>
-                                    {% elif stripped_line.startswith('~') %}
-                                        <p><span class="tilde"><strong>{{ i }}</strong></span></p>
-                                    {% else %}
-                                        <p><span class="others"><strong>{{i}}</strong></span></p>
-                                    {% endif %}
-                                {% endfor %}
-                                {% else %}
-                                <p><strong>{{stdout}}</strong></p>
-                                {% endif %}
-                            </div>
-                            <div class="modal-footer">
-                                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
-                                </form>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+<!-- Modal para mostrar los outputs -->
+<div class="modal fade" id="OutputModalCenter-{{deploy.id}}" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-xl" >
+        <div class="modal-content">
+            <div class="modal-header">
+                ...
+            </div>
+            <div class="modal-output" id="modal-output-{{deploy.id}}">
+                <!-- Los outputs se renderizarán aquí -->
+            </div>
+            <div class="modal-footer">
+                ...
+            </div>
+        </div>
+    </div>
+</div>
                 <!-- Modal Destroy-->
                 <div class="modal fade" id="DestroyModalCenter-{{deploy.id}}">
                     <div class="modal-dialog modal-dialog-centered" role="document">
@@ -352,8 +328,6 @@ <h5 class="modal-title" id="DeleteModalLongTitle-{{deploy.id}}">Delete Deploy
         </div>
     </div>
 
-
-
     {% include 'includes/footer.html' %}
 
 </main>
@@ -365,4 +339,101 @@ <h5 class="modal-title" id="DeleteModalLongTitle-{{deploy.id}}">Delete Deploy
 <script src="/static/assets/js/pagination_edit.js"></script>
 <script src="/static/assets/js/copy_clipboard.js"></script>
 <script src="/static/assets/js/download_tfvars.js"></script>
+<script>
+    // Función para actualizar el estado de un deploy específico
+    function updateStatus(taskId) {
+        fetch('/status/' + taskId)
+            .then(response => response.json())
+            .then(data => {
+                var statusElement = document.getElementById('status-' + taskId);
+                if (statusElement) {
+                    statusElement.innerHTML = renderStatus(data.status);
+                }
+            })
+            .catch(error => console.error('Error:', error));
+    }
+
+    // Función para renderizar el estado en formato HTML
+    function renderStatus(status) {
+        switch(status) {
+            case "SUCCESS":
+                return '<span class="tag-style-success">' + status + '</span>';
+            case "FAILURE":
+                return '<span class="tag-style-failure">' + status + '</span>';
+            case "RETRY":
+                return '<span class="tag-style-retry">' + status + '</span>';
+            default:
+                return '<span class="tag-style-status">' + status + '</span>';
+        }
+    }
+
+    // Iniciar la actualización del estado para cada deploy
+    {% for deploy in deploys %}
+        updateStatus('{{ deploy.task_id }}')
+        setInterval(() => updateStatus('{{ deploy.task_id }}'), 5000);
+    {% endfor %}
+</script>
+<script>
+    // Función para abrir un modal y mostrar los outputs del deploy
+    function showModal(taskId, deployId) {
+        fetch('/output/' + taskId)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Respuesta del servidor no es OK. Estado: ' + response.status);
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log('Respuesta exitosa:', data); // Log exitoso
+                var modalBody = document.getElementById('modal-output-' + deployId);
+                if (modalBody) {
+                    modalBody.innerHTML = renderOutput(data);
+                }
+
+                // Inicializar y mostrar el modal
+                var modalElement = document.getElementById('OutputModalCenter-' + deployId);
+                if (modalElement) {
+                    var myModal = new bootstrap.Modal(modalElement, {
+                        keyboard: true
+                    });
+                    myModal.show();
+                }
+            })
+            .catch(error => {
+                console.error('Error al obtener datos:', error);
+                console.log('Error al obtener datos del endpoint para el taskId:', taskId);
+            });
+    }
+
+    // Función para renderizar los outputs en formato HTML
+    function renderOutput(data) {
+        if (Array.isArray(data)) {
+            return data.map(line => `<p><span class="${getClassForLine(line)}"><strong>${line}</strong></span></p>`).join('');
+        } else {
+            return `<p><strong>${data}</strong></p>`;
+        }
+    }
+
+    // Función auxiliar para determinar la clase CSS según el contenido de la línea
+    function getClassForLine(line) {
+        if (line.startsWith('+')) return 'plus';
+        if (line.startsWith('-')) return 'minus';
+        if (line.startsWith('~')) return 'tilde';
+        return 'others';
+    }
+
+    // Asignar el evento click a los botones para abrir el modal
+    document.querySelectorAll('.output-button').forEach(button => {
+        button.addEventListener('click', () => {
+            const taskId = button.getAttribute('data-task-id');
+            const deployId = button.getAttribute('data-deploy-id');
+            showModal(taskId, deployId);
+        });
+    });
+</script>
+
+
+
+
+
 {% endblock javascripts %}
diff --git a/sld-dashboard/app/home/templates/stacks-list.html b/sld-dashboard/app/home/templates/stacks-list.html
index 3376feee..c7241fad 100644
--- a/sld-dashboard/app/home/templates/stacks-list.html
+++ b/sld-dashboard/app/home/templates/stacks-list.html
@@ -71,11 +71,11 @@ <h2 class="h4">All Stacks</h2>
                     <td><span class="icon icon-sm"><span class="fab fas fa-layer-group"></span></span></td>
                     {% endif %}
                     <td><span class="font-weight-normal">{{ stack.id }}</span></td>
-                    <td><span class="font-weight-normal">{{ stack.stack_name }}</span></td>
+                    <td><span class="tag-style">{{ stack.stack_name }}</span></td>
                     {% if "yoda" in  current_user.role or "darth_vader" in current_user.role %}
                     <td><span class="font-weight-normal">{{ stack.git_repo }}</span></td>
                     <td><span class="font-weight-normal">{{ stack.branch }}</span></td>
-                    <td><span class="font-weight-normal">{{ stack.tf_version }}</span></td>
+                    <td><span class="tag-style">{{ stack.tf_version }}</span></td>
                     <td><span class="font-weight-normal">{{ stack.squad_access }}</span></td>
                     {% endif %}
                     <td><span class="font-weight-normal">{{ stack.description}}</span></td>
diff --git a/sld-dashboard/app/home/templates/tasks-logs.html b/sld-dashboard/app/home/templates/tasks-logs.html
index 68e18839..3d62617d 100644
--- a/sld-dashboard/app/home/templates/tasks-logs.html
+++ b/sld-dashboard/app/home/templates/tasks-logs.html
@@ -93,12 +93,20 @@ <h2 class="h4">All Tasks</h2>
                     {% else %}
                     <td><span class="icon icon-sm"><span class="fas fa-box-open"></span></span></td>
                     {% endif %}
-                    <td><span class="font-weight-normal">{{ task.task_id }}</span></td>
+                    <td>
+                        <div>
+                        <span class="font-weight-normal">{{ task.task_id }}</span>
+                         <span class="copy-icon"
+                            onclick="copyToClipboard('{{ task.task_id }}')" title="Copy to clipboard">
+                            <i class="far fa-copy"></i>
+                        </div>
+                        </span> 
+                    </td>
                     <td><span class="font-weight-normal">{{ task.deploy_id }}</span></td>
-                    <td><span class="font-weight-normal">{{ task.action }}</span></td>
-                    <td><span class="font-weight-normal">{{ task.username }}</span></td>
+                    <td><span class="tag-style">{{ task.action }}</span></td>
+                    <td><span class="tag-style">{{ task.username }}</span></td>
                     <td><span class="font-weight-normal">{{ task.task_name }}</span></td>
-                    <td><span class="font-weight-normal">{{ task.squad}}</span></td>
+                    <td><span class="tag-style">{{ task.squad}}</span></td>
                     <td><span class="font-weight-bold">{{ task.created_at }}</span></td>
                     <td>
     </div>
@@ -145,4 +153,5 @@ <h2 class="h4">All Tasks</h2>
 <!-- Specific Page JS goes HERE  -->
 {% block javascripts %}
 <script src="/static/assets/js/pagination.js"></script>
+<script src="/static/assets/js/copy_clipboard.js"></script>
 {% endblock javascripts %}
diff --git a/sld-dashboard/app/home/templates/users-list.html b/sld-dashboard/app/home/templates/users-list.html
index b5d7d270..616f052c 100644
--- a/sld-dashboard/app/home/templates/users-list.html
+++ b/sld-dashboard/app/home/templates/users-list.html
@@ -92,12 +92,20 @@ <h2 class="h4">All users</h2>
                     <td><span class="icon icon-sm w-30" ><img src="/static/assets/img/team/user.png"</span></td>
                     {% endif %}
                     <td><span class="font-weight-normal">{{ user.id }}</span></td>
-                    <td><span class="font-weight-normal">{{ user.username }}</span></td>
+                    <td>
+                        <div>
+                         <span class="tag-style">{{ user.username }}</span>
+                         <span class="copy-icon"
+                            onclick="copyToClipboard('{{ user.username }}')" title="Copy to clipboard">
+                            <i class="far fa-copy"></i>
+                        </div>
+                        </span> 
+                    </td>
                     <td><span class="font-weight-normal">{{ user.fullname }}</span></td>
                     <td><span class="font-weight-normal">{{ user.email }}</span></td>
                     <td><span class="font-weight-normal">{{ user.squad }}</span></td>
                     <td><span class="font-weight-normal">{{ user.role }}</span></td>
-                    <td><span class="font-weight-normal">{{ user.is_active }}</span></td>
+                    <td><span class="tag-style">{{ user.is_active }}</span></td>
                     {% if current_user.master %}
                     <td><span class="font-weight-normal">{{ user.master }}</span></td>
                     {% endif %}
@@ -140,4 +148,5 @@ <h2 class="h4">All users</h2>
 <!-- Specific Page JS goes HERE  -->
 {% block javascripts %}
 <script src="/static/assets/js/pagination_edit.js"></script>
+<script src="/static/assets/js/copy_clipboard.js"></script>
 {% endblock javascripts %}