diff --git a/labapp/app/templates/base.html b/labapp/app/templates/base.html
index e0b9a83..59c56dc 100644
--- a/labapp/app/templates/base.html
+++ b/labapp/app/templates/base.html
@@ -27,7 +27,7 @@
             <div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
                 <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
                     <img src="/static/logo.png" width="100" height="auto" alt="Logo">
-                  <span class="fs-5 fw-semibold">MCN Practical</span>
+                  <span class="fs-6 fw-semibold">App Connect</span>
                 </a>
                 <ul class="list-unstyled ps-0">
                   <li class="mb-1">
@@ -44,7 +44,7 @@
                   </li>
                   <li class="mb-1">
                     <button class="btn btn-toggle align-items-center rounded collapsed disabled" data-bs-toggle="collapse-null" data-bs-target="#appconnect-collapse" aria-expanded="false">
-                      App Connect
+                      Exercises
                     </button>
                     <div class="collapse show" id="appconnect-collapse">
                       <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
@@ -55,17 +55,6 @@
                       </ul>
                     </div>
                   </li>
-                  <li class="mb-1">
-                    <button class="btn btn-toggle align-items-center rounded collapsed disabled" data-bs-toggle="collapse-null" data-bs-target="#netconnect-collapse" aria-expanded="false">
-                      Network Connect
-                    </button>
-                    <div class="collapse show" id="netconnect-collapse">
-                      <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-                        <li><a href="/vnet" class="link-dark rounded">Virtual Networks</a></li>
-                        <li><a href="/netpolicy" class="link-dark rounded">Network Policy</a></li>
-                      </ul>
-                    </div>
-                  </li>
                   <li class="border-top my-3"></li>
                   <li class="mb-1">
                     <button class="btn btn-toggle align-items-center rounded collapsed disabled" data-bs-toggle="collapse-null" data-bs-target="#status-collapse" aria-expanded="false">
@@ -73,8 +62,8 @@
                     </button>
                     <div class="collapse show" id="status-collapse">
                       <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-                        <li><a href="/ref" class="link-dark rounded">Reference</a></li>
                         <li><a href="/score" class="link-dark rounded">Scoreboard</a></li>
+                        <li><a href="/ref" class="link-dark rounded">Reference</a></li>
                       </ul>
                     </div>
                   </li>
diff --git a/labapp/app/templates/future_base.html b/labapp/app/templates/future_base.html
new file mode 100644
index 0000000..e0b9a83
--- /dev/null
+++ b/labapp/app/templates/future_base.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}{{ title }}{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+
+    <link rel="stylesheet" href="/static/dracula.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/http.min.js"></script>
+    <script>hljs.highlightAll();</script>
+  
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <link href="/static/custom.css" rel="stylesheet">
+    <script src="/static/helpers.js"></script>
+</head>
+<body>
+<div class="container-fluid">
+    <div class="row">
+        <!-- Sidebar -->
+        <div class="col-auto bg-light sidebar" id="sidebar">
+            <div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
+                <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
+                    <img src="/static/logo.png" width="100" height="auto" alt="Logo">
+                  <span class="fs-5 fw-semibold">MCN Practical</span>
+                </a>
+                <ul class="list-unstyled ps-0">
+                  <li class="mb-1">
+                    <button class="btn btn-toggle align-items-center rounded collapsed disabled" data-bs-toggle="collapse-null" data-bs-target="#home-collapse" aria-expanded="false">
+                      Home
+                    </button>
+                    <div class="collapse show" id="home-collapse">
+                      <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+                        <li><a href="/" class="link-dark rounded">Welcome</a></li>
+                        <li><a href="/overview" class="link-dark rounded">Overview</a></li>
+                        <li><a href="/setup" class="link-dark rounded">Setup</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                  <li class="mb-1">
+                    <button class="btn btn-toggle align-items-center rounded collapsed disabled" data-bs-toggle="collapse-null" data-bs-target="#appconnect-collapse" aria-expanded="false">
+                      App Connect
+                    </button>
+                    <div class="collapse show" id="appconnect-collapse">
+                      <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+                        <li><a href="/lb" class="link-dark rounded">Load Balancing</a></li>
+                        <li><a href="/route" class="link-dark rounded">Routing</a></li>
+                        <li><a href="/manipulation" class="link-dark rounded">Manipulation</a></li>
+                        <li><a href="/portability" class="link-dark rounded">Portability</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                  <li class="mb-1">
+                    <button class="btn btn-toggle align-items-center rounded collapsed disabled" data-bs-toggle="collapse-null" data-bs-target="#netconnect-collapse" aria-expanded="false">
+                      Network Connect
+                    </button>
+                    <div class="collapse show" id="netconnect-collapse">
+                      <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+                        <li><a href="/vnet" class="link-dark rounded">Virtual Networks</a></li>
+                        <li><a href="/netpolicy" class="link-dark rounded">Network Policy</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                  <li class="border-top my-3"></li>
+                  <li class="mb-1">
+                    <button class="btn btn-toggle align-items-center rounded collapsed disabled" data-bs-toggle="collapse-null" data-bs-target="#status-collapse" aria-expanded="false">
+                      Miscellaneous
+                    </button>
+                    <div class="collapse show" id="status-collapse">
+                      <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+                        <li><a href="/ref" class="link-dark rounded">Reference</a></li>
+                        <li><a href="/score" class="link-dark rounded">Scoreboard</a></li>
+                      </ul>
+                    </div>
+                  </li>
+
+                  {% if config['UDF'] %}
+                  <script>
+                      function fetchAndUpdateStatus() {
+                        fetch('/_ce_status')
+                            .then(response => {
+                                if (!response.ok) {
+                                    throw new Error('Network response was not ok');
+                                }
+                                return response.json();
+                            })
+                            .then(data => {
+                                if (!data.err) {
+                                    document.getElementById('siteName').textContent = data.site_name;
+                                    document.getElementById('statusImage').src = data.state === "PROVISIONED" ? "/static/good.png" : "/static/bad.png";
+                  
+                                    // Update cookies
+                                    setCookie('siteNameCache', data.site_name, 1);
+                                    setCookie('stateCache', data.state, 1);
+                                } else {
+                                    document.getElementById('siteName').textContent = 'CE info unavailable';
+                                    document.getElementById('statusImage').src = "/static/bad.png";
+                                }
+                            })
+                            .catch(error => {
+                                console.error('There was a problem with the fetch operation:', error);
+                                document.getElementById('siteName').textContent = 'Error';
+                                document.getElementById('statusImage').src = "/static/bad.png";
+                            });
+                      }
+                      document.addEventListener('DOMContentLoaded', function() {
+                        let cachedSiteName = getCookie('siteNameCache');
+                        let cachedState = getCookie('stateCache');
+                  
+                        if (cachedSiteName && cachedState) {
+                            document.getElementById('siteName').textContent = cachedSiteName;
+                            document.getElementById('statusImage').src = cachedState === "PROVISIONED" ? "/static/good.png" : "/static/bad.png";
+                        } else {
+                            fetchAndUpdateStatus();
+                        }
+                  
+                        setInterval(fetchAndUpdateStatus, 20000);
+                    });
+                    </script>
+                    <li class="border-top my-3"></li>
+                    <li class="mb-1">
+                      <div class="status-box align-items-center bg-light p-2 text-center">
+                          <p><strong id="siteName">{{ config["ce_info"]["site_name"] }}</strong></p>
+                          <img id="statusImage" src="/static/unknown.png" alt="Status" style="width:50px; height:auto;">
+                      </div>
+                    </li>
+
+
+                    {% endif %}
+
+
+                </ul>
+        </div>  
+      </div>
+        
+        <!-- Main Content -->
+        <main class="col">
+            {% block content %}
+            {% endblock %}
+        </main>
+    </div>
+</div>
+
+</body>
+</html>
+
