diff --git a/.env b/.env
new file mode 100644
index 0000000..ddc59f9
--- /dev/null
+++ b/.env
@@ -0,0 +1,2 @@
+IP=0.0.0.0
+PORT=99
diff --git a/index.py b/index.py
index 16eaa4e..ec4f6d4 100644
--- a/index.py
+++ b/index.py
@@ -1,13 +1,46 @@
+from dotenv import load_dotenv
 from flask import Flask, render_template
 from flask_apscheduler import APScheduler
+from flask_login import LoginManager
 import docker
-from pprint import pprint
 import time
+import os
+
+#DEBUG
+from pprint import pprint
+
+def calculate_cpu_percent(stats, status):
+    if (status != "running"):
+        return 0
+    
+    cpu_count = len(stats["cpu_stats"]["cpu_usage"]["percpu_usage"])
+    cpu_percent = 0.0
+    cpu_delta = float(stats["cpu_stats"]["cpu_usage"]["total_usage"]) - \
+                float(stats["precpu_stats"]["cpu_usage"]["total_usage"])
+    system_delta = float(stats["cpu_stats"]["system_cpu_usage"]) - \
+                   float(stats["precpu_stats"]["system_cpu_usage"])
+    
+    if system_delta > 0.0:
+        cpu_percent = cpu_delta / system_delta * 100.0 * cpu_count
+
+    return round(cpu_percent, 2)
+
+def calculate_ram_percent(stats, status):
+    if (status != "running"):
+        return 0
+
+    mem_used = stats["memory_stats"]["usage"] - stats["memory_stats"]["stats"]["cache"] + stats["memory_stats"]["stats"]["active_file"]
+    limit = stats['memory_stats']['limit']
+
+    return  round(mem_used / limit * 100, 2)
 
 client = docker.from_env()
+#login_manager = LoginManager()
 app = Flask(__name__)
 scheduler = APScheduler()
-
+load_dotenv()
+#login_manager.init_app(app)
+#https://flask-login.readthedocs.io/en/latest/
 
 @app.route("/", methods=['GET'])
 def index():
@@ -17,12 +50,13 @@ def index():
 @app.route("/parts/modal/container/<container_id>", methods=['GET'])
 def parts_container_modal(container_id):
     container = client.containers.get(container_id)
-    
+    stats = container.stats(stream=False)
+    #com.docker.extension.detailed-description
     project = ''
     if('com.docker.compose.project' in container.attrs['Config']['Labels']):
         project = container.attrs['Config']['Labels']['com.docker.compose.project']
 
-    return render_template("container_modal.html", name=container.name, project=project, ports=container.attrs['NetworkSettings']['Ports'], status=container.status)
+    return render_template("container_modal.html", name=container.name, project=project, ports=container.attrs['NetworkSettings']['Ports'], status=container.status, CPU=calculate_cpu_percent(stats, container.status) ,RAM =calculate_ram_percent(stats, container.status) )
 
 @app.route("/api/<container_id>/<action>", methods=['DELETE', 'POST'])
 def api_stop_container(container_id, action):
@@ -50,4 +84,4 @@ def scheduleTasks():
 if __name__ == '__main__':
     #scheduler.add_job(id = 'scheduled_tasks', func=scheduleTasks, trigger="interval", seconds=3)
     #scheduler.start()
-    app.run(host="0.0.0.0", port=99, debug=True)
+    app.run(host=os.getenv('IP'), port=os.getenv('port'), debug=True)
diff --git a/templates/base.html b/templates/base.html
deleted file mode 100644
index e69de29..0000000
diff --git a/templates/container_modal.html b/templates/container_modal.html
index e4f154c..d857b8f 100644
--- a/templates/container_modal.html
+++ b/templates/container_modal.html
@@ -1,7 +1,21 @@
-{{name}}</br>
-{{project}}</br>
-{{status}}</br>
-{% for port in ports %}
-<a href="//127.0.0.1:{{ port.split(" /")[0] }}">{{ port.split("/")[0] }}</a>
-{%endfor%}
-
+<div class="modal-header m-1">
+    <div class="modal-title">
+        <h5 class="mb-0">{{name}}</h5>
+        <small>{{project}}</small>
+    </div>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+</div>
+<div class="modal-body">
+    <div>
+        <h5>Stats</h5>
+        {{status}}
+        <span class="badge rounded-pill text-bg-primary">{{CPU}}%</span>
+        <span class="badge rounded-pill text-bg-primary">{{RAM}}%</span>
+    </div><br>
+    <div>
+        <h5>Networking</h5>
+        {% for port in ports %}
+        <a href="//127.0.0.1:{{ port.split(" /")[0] }}" target="_blank">{{ port.split("/")[0] }}</a>
+        {%endfor%}
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 168febc..091e70b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -11,13 +11,13 @@
   </style>
 </head>
 
-<body>
-  <h1>{{title}}</h1>
+<body data-bs-theme="dark">
   <div class="container-fluid">
-    <div class="row row-cols-auto bg-dark">
+    <h1>Containers</h1>
+    <div class="row row-cols-auto g-2">
       {% for container in containers %}
-      <div class="col-6 col-sm-4 col-md-4 col-lg-3 col-xxl-2 bg-light">
-        <div class="square-item">
+      <div class="col-6 col-sm-4 col-md-4 col-lg-3 col-xxl-2">
+        <div class="border h-100  p-3">
           <div class="square-content" onclick="openModalForContainer('{{container.id}}')">
             <!-- Content for the square item -->
             <div class="d-flex justify-content-between">
@@ -28,14 +28,16 @@
                 <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse"
                   onclick="toggleContainer('{{container.id}}', '{{container.status}}', this, event);" {% if
                   container.status=="running" %} checked {% endif %}>
-                <label class="form-check-label" for="flexSwitchCheckReverse">isRunning</label>
+                <label class="form-check-label d-none d-md-block " for="flexSwitchCheckReverse">isRunning</label>
               </div>
             </div>
-            <h4 class="text-nowrap">{{container.attrs['Config']['Labels']['com.docker.compose.project']}}</h4>
+            <h4 class="text-truncate">{{container.attrs['Config']['Labels']['com.docker.compose.project']}}</h4>
             <h5 class="text-truncate">{{container.name}}</h5>
+            {% if container.status=="running" %}
             {% for port in container.attrs['NetworkSettings']['Ports'] %}
-            <a href="//127.0.0.1:{{ port.split(" /")[0] }}">{{ port.split("/")[0] }}</a>
+            <a href="//127.0.0.1:{{ port.split(" /")[0] }}" target="_blank">{{ port.split("/")[0] }}</a>
             {%endfor%}
+            {%endif%}
           </div>
         </div>
       </div>
@@ -45,10 +47,12 @@
 
   <!-- Modal -->
   <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-    <div class="modal-dialog">
+    <div class="modal-dialog modal-fullscreen-sm-down">
       <div class="modal-content">
-        <div class="spinner-border" role="status">
-          <span class="visually-hidden">Loading...</span>
+        <div class="modal-body">
+          <div class="spinner-border" role="status">
+            <span class="visually-hidden">Loading...</span>
+          </div>
         </div>
       </div>
     </div>
@@ -82,11 +86,13 @@
       xhttp.open(method, '/api/' + container_id + '/' + route, true);
       xhttp.send();
 
-      await new Promise(r => setTimeout(() => r(), 1000));
+      await new Promise(r => setTimeout(() => r(), 1500));
       window.location.reload();
     }
 
     function openModalForContainer(container_id) {
+      document.getElementById('exampleModal').getElementsByClassName('modal-content')[0].innerHTML = "<div class=\"modal-body\"><div class=\"spinner-border\" role=\"status\"><span class=\"visually-hidden\">Loading...</span></div></div>"
+
       const myModal = new bootstrap.Modal('#exampleModal')
       myModal.show()