diff --git a/labapp/app/app.py b/labapp/app/app.py
index 752b22b..1b8f18a 100644
--- a/labapp/app/app.py
+++ b/labapp/app/app.py
@@ -5,6 +5,7 @@
 import re
 import json
 import requests
+import base64
 import urllib
 from flask import Flask, render_template, jsonify, request, redirect, make_response, flash, url_for
 from flask_caching import Cache
@@ -19,10 +20,13 @@
 if os.getenv('UDF', None):
     app.config['ce_info'] = get_ce_info()
     app.config['UDF'] = True
+    app.config['SESSION_COOKIE_SECURE'] = True
 app.config['base_url'] = "mcn-lab.f5demos.com"
 app.config['CACHE_TYPE'] = 'SimpleCache'
 cache = Cache(app)
 app.secret_key = "blahblahblah"
+data_cookie = "mcnp-ac-data"
+cookie_age = 86400
 
 session = get_runner_session()
 session.headers.update({"User-Agent": "MCN-Lab-Runner/1.0"})
@@ -47,18 +51,73 @@ def validate_eph_ns(input_name):
 
 def get_eph_ns() -> str:
     """check if ephemeral namespace is set"""
-    this_eph_ns = request.cookies.get('eph_ns', None)
-    return this_eph_ns
+    try:
+        cookie_b64 = request.cookies.get(data_cookie, None)
+        if cookie_b64:
+            return get_cookie_prop(cookie_b64, 'eph_ns')
+    except Exception:
+        print("Error getting ephemeral NS")
+    return None
+
+def get_site() -> str:
+    """check if ephemeral namespace is set"""
+    if app.config['ce_info']:
+        return app.config['ce_info'].get("site_name", None)
+    return None
+    
+def update_cookie_prop(cookie_b64, prop, value):
+    """Update a property in a base64 encoded JSON cookie."""
+    try:
+        json_bytes = base64.b64decode(cookie_b64)
+        json_str = json_bytes.decode('utf-8')
+        cookie_data = json.loads(json_str)
+        if not isinstance(cookie_data, dict):
+            raise ValueError("Cookie data is not a dictionary.")
+        cookie_data[prop] = value
+        updated = json.dumps(cookie_data)
+        base64_bytes = base64.b64encode(updated.encode('utf-8'))
+        return base64_bytes.decode('utf-8')
+    except json.JSONDecodeError:
+        print("Error decoding JSON from cookie.")
+        """TBD: this is not what we want."""
+        return encode_data({})
+    except Exception as e:
+        print(f"An error occurred: {e}")
+        return encode_data({})
+    
+def get_cookie_prop(cookie_b64, prop):
+    """get a cookie prop"""
+    try:
+        json_bytes = base64.b64decode(cookie_b64)
+        json_str = json_bytes.decode('utf-8')
+        c_dict = json.loads(json_str)
+        return c_dict[prop]
+    except json.JSONDecodeError:
+        print("Error decoding cookie data")
+        return None
+    
+def encode_data(data):
+    """Encode dictionary to Base64-encoded JSON."""
+    json_str = json.dumps(data)
+    base64_bytes = base64.b64encode(json_str.encode('utf-8'))
+    return base64_bytes.decode('utf-8')
 
+def decode_data(encoded_data):
+    """Decode Base64-encoded JSON to dictionary."""
+    json_bytes = base64.b64decode(encoded_data)
+    json_str = json_bytes.decode('utf-8')
+    return json.loads(json_str)
+    
 @app.errorhandler(404)
 @app.errorhandler(500)
 def return_err(err):
     """common error handler"""
-    img = {
-        404: "/static/404.png",
-        500: "/static/500.png"
-    }
-    return render_template("error.html", err_img=img[err.code])
+    return render_template("error.html", code=err.code)
+
+@app.route('/cookie')
+def cookie_err():
+    """cookie error"""
+    return render_template("cookie.html")
 
 @app.after_request
 def cache_control(response):
@@ -66,23 +125,30 @@ def cache_control(response):
     if request.path.startswith("/static/") and request.path.endswith(".png"):
         response.headers['Cache-Control'] = 'public, max-age=3600'
     return response
+    
+@app.before_request
+def ensure_cookie():
+    """Ensure that the cookie is present, otherwise redirect to the cookie page."""
+    if not request.path.startswith('/static'):
+        if (request.path not in ['/', '/cookie']) and (data_cookie not in request.cookies):
+            return redirect('/cookie')
 
 @app.route('/')
 def index():
     """index page"""
-    html = render_md("markdown/welcome.md")
-    return render_template('standard.html',
-        title="MCN Practical: Overview",
-        content=html
+    html = render_template('welcome.html',
+        title="MCN Practical: Welcome"
     )
+    response = make_response(html)
+    if data_cookie not in request.cookies:
+        response.set_cookie(data_cookie, encode_data({}), max_age=cookie_age)
+    return response
 
 @app.route('/overview')
-def arch():
-    """arch page"""
-    html = render_md("markdown/overview.md")
-    return render_template('standard.html',
-        title="MCN Practical: Architecture",
-        content=html
+def overview():
+    """overview page"""
+    return render_template('overview.html',
+        title="MCN Practical: Overview"
     )
 
 @app.route('/setup', methods=['GET', 'POST'])
@@ -97,36 +163,31 @@ def setup():
                 flash("Invalid ephemeral namespace.", "danger")
                 return redirect(url_for('setup'))
             response = make_response(redirect('/setup'))
-            response.set_cookie('eph_ns', this_eph_ns, max_age=60*60*24)
+            cookie_b64 = request.cookies.get('mcnp-ac-data', encode_data({}))
+            cookie_data = update_cookie_prop(cookie_b64, 'eph_ns', this_eph_ns)
+            response.set_cookie(data_cookie, cookie_data)
             flash('Ephemeral namespace successfully set.', "success")
             return response
         if action == 'clear':
             response = make_response(redirect('/setup'))
-            response.set_cookie('eph_ns', '', expires=0)
+            cookie_b64 = request.cookies.get('mcnp-ac-data', encode_data({}))
+            cookie_data = update_cookie_prop(cookie_b64, 'eph_ns', None)
+            response.set_cookie(data_cookie, cookie_data)
             flash("Ephemeral namespace cleared.", "info")
             return response
-    html = render_md("markdown/setup.md")
     return render_template('setup.html',
         title="MCN Practical: Setup",
-        content=html,
         ns=ns
     )
 
-@app.route('/_ce_status')
-@cache.cached(timeout=30)
-def ce_state():
-    """get ce state (internal route)"""
-    data = get_ce_state(app.config['ce_info'])
-    return data
-
 @app.route('/loadbalancing')
 def lb():
     """lb page"""
     ns = get_eph_ns()
-    html = render_md("markdown/lb.md")
-    return render_template('exercise_standard.html',
+    site = get_site()
+    return render_template('loadbalancing.html',
         title="MCN Practical: LB",
-        content=html,
+        site=site,
         ns=ns
     )
 
@@ -134,22 +195,17 @@ def lb():
 def path():
     """routing page"""
     ns = get_eph_ns()
-    html = render_md("markdown/route.md")
-    return render_template('exercise_standard.html',
+    return render_template('route.html',
         title="MCN Practical: HTTP Routing",
-        content=html,
-        ns=ns,
-
+        ns=ns
     )
 
 @app.route('/manipulation')
 def header():
     """manipulation page"""
     ns = get_eph_ns()
-    html = render_md("markdown/manipulation.md")
-    return render_template('exercise_standard.html',
+    return render_template('manipulation.html',
         title="MCN Practical: Manipulation",
-        content=html, 
         ns=ns
     )
 
@@ -157,32 +213,8 @@ def header():
 def port():
     """portability page"""
     ns = get_eph_ns()
-    html = render_md("markdown/portability.md")
-    return render_template('exercise_standard.html',
+    return render_template('portability.html',
         title="MCN Practical: Portability",
-        content=html, 
-        ns=ns
-    )
-
-@app.route('/vnet')
-def vnet():
-    """vnet page"""
-    ns = get_eph_ns()
-    html = render_md("markdown/reference.md")
-    return render_template('coming-soon.html',
-        title="MCN Practical: Reference",
-        content=html, 
-        ns=ns
-    )
-
-@app.route('/netpolicy')
-def netp():
-    """netpolicy page"""
-    ns = get_eph_ns()
-    html = render_md("markdown/reference.md")
-    return render_template('coming-soon.html',
-        title="MCN Practical: Reference",
-        content=html, 
         ns=ns
     )
 
@@ -200,14 +232,12 @@ def ref():
 @app.route('/score')
 def score():
     """scoreboard page"""
-    ns = get_eph_ns()
-    score_cookie = request.cookies.get('score', '%7B%7D') 
-    print(score_cookie)
     try:
-        decoded_cookie = urllib.parse.unquote(score_cookie)
-        enc_score = json.loads(decoded_cookie)
-        this_score = {urllib.parse.unquote(k): v for k, v in enc_score.items()}
-    except json.JSONDecodeError:
+        cookie_b64 = request.cookies.get(data_cookie)
+        this_score = get_cookie_prop(cookie_b64, 'score')
+        """raise a LabException"""
+    except Exception:
+        print("Error getting score")
         this_score = {}
     try:
         p_score = score_get_results(this_score)
@@ -218,19 +248,29 @@ def score():
         port_table = score_build_table(p_score, 'port', 'Portability')
     except LabException as e:
         print(f"Couldn't build score table: {e}")
-    response = make_response(render_template('score.html',
+    return render_template('score.html',
             title="MCN Practical: Scoreboard",
             over_table=over_table,
             lb_table=lb_table,
             route_table=route_table,
             manip_table=manip_table,
             port_table=port_table,
-            ns=ns
-        ))
-    response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate' 
-    response.headers['Pragma'] = 'no-cache'
-    response.headers['Expires'] = '0'
-    return response
+        )
+
+@app.route('/test')
+def test():
+    """test page"""
+    ns = get_eph_ns()
+    return render_template('test.html',
+        title="MCN Practical: Test",
+        ns=ns
+    )
+
+@app.route('/_ce_status')
+def ce_state():
+    """get ce state (internal route)"""
+    data = get_ce_state(app.config['ce_info'])
+    return data
 
 @app.route('/_test1')
 def ex_test():
@@ -359,11 +399,12 @@ def manip2():
     """Second Manip Test"""
     try:
         ns = get_eph_ns()
+        site = get_site()
         if not ns:
             raise LabException("Ephemeral NS not set")
         base_url = app.config['base_url']
         url = f"https://{ns}.{base_url}/"
-        t_headers = { "x-mcn-namespace": ns, "x-mcn-src-site": app.config["ce_info"]["site_name"]}
+        t_headers = { "x-mcn-namespace": ns, "x-mcn-src-site": site}
         r_data = cloudapp_req_headers(session, url, 7, t_headers)
         return jsonify(status='success', data=r_data)
     except (LabException, ValueError) as e:
@@ -415,7 +456,6 @@ def port2():
     """Friend test"""
     try:
         data = request.get_json()
-        print(data)
         eph_ns = data['userInput']
         url = f"https://{eph_ns}.{app.config['base_url']}/"
         data = cloudapp_fetch(session, url, 7, 'info', {"method": "GET", "path": "/"})
diff --git a/labapp/app/score.py b/labapp/app/score.py
index 1be4b08..085f189 100644
--- a/labapp/app/score.py
+++ b/labapp/app/score.py
@@ -40,7 +40,7 @@
         "href": "/route",
         "result": "none"
     },
-    "/_manip1:": {
+    "/_manip1": {
         "name": "Path Rewrite",
         "key": "manip",
         "href": "/manipulation",
@@ -86,8 +86,6 @@ def score_get_results(cookie_results):
     for test_path, result in cookie_results.items():
         if test_path in score_schema:
             this_score[test_path]['result'] = result
-    print(this_score)
-    print(score_schema)
     return this_score
 
 def score_sort(scores, key):
@@ -100,7 +98,6 @@ def score_build_table(scores, section, name):
     section_scores = score_sort(scores, section)
     rows_html = ""
     for key, score in section_scores.items():
-        print(score['result'])
         r_icon = result_map[score['result']]
         section_html = f"""
         <tr>
diff --git a/labapp/app/static/arch.png b/labapp/app/static/arch.png
deleted file mode 100644
index 8c8e283..0000000
Binary files a/labapp/app/static/arch.png and /dev/null differ
diff --git a/labapp/app/static/custom.css b/labapp/app/static/custom.css
index f92034d..61c29cf 100644
--- a/labapp/app/static/custom.css
+++ b/labapp/app/static/custom.css
@@ -18,6 +18,58 @@ main {
   overflow-y: auto;
 }
 
+.lab-icon {
+  height: 30px;
+  width: auto;
+  padding-right: 25px;
+}
+
+.lab-test-button {
+  width: 175px;
+}
+
+.lab-post-button {
+  width: 200px;
+}
+
+.lab-ex-test {
+  width: 125px;
+}
+
+.lab-image-container {
+  height: 200px; /* Fixed height */
+  overflow: hidden; /* Ensures nothing extends outside the container */
+  display: flex; /* Flexbox to help with centering/positioning the image */
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically, if needed */
+}
+
+.lab-header {
+  border-radius: .8em;
+  filter: brightness(110%) contrast(80%);
+  filter: blur(.1px);
+}
+
+.lab-header-clear {
+  border-radius: .8em;
+}
+/* Testing */
+
+.sidebar-link {
+  display: block;
+  padding: 8px 16px;
+  color: #333; /* Adjust the color to fit your theme */
+  text-decoration: none; /* Remove underline from links */
+  border-radius: 4px; /* Rounded corners for links */
+}
+
+.sidebar-link:hover {
+  background-color: #f8f9fa; /* Light grey background on hover */
+  color: #0056b3; /* Change color on hover for better visibility */
+}
+
+/* Testing */
+
 .row {
   height: 100%;
 }
@@ -47,18 +99,18 @@ main {
   padding: 50px;
 }
 
-.err {
+.err-container {
   display: flex;
-  justify-content: center; /* Centers horizontally */
-  align-items: center; /* Centers vertically */
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
   height: 100vh; /* Full viewport height */
+  margin-bottom: 0
 }
-
-.err img {
-  display: block;
-  width: 100%; /* This will make the image responsive */
-  max-width: 600px; /* Maximum width of the image */
-  margin: 0 auto; /* Center the image */
+.err-container img {
+  width: 80%;
+  max-width: 100%;
+  height: auto; /* Maintain aspect ratio */
+  border-radius: .8em;
 }
 
 .err p {
diff --git a/labapp/app/static/dracula.css b/labapp/app/static/dracula.css
deleted file mode 100644
index 087149f..0000000
--- a/labapp/app/static/dracula.css
+++ /dev/null
@@ -1,81 +0,0 @@
-/* Dracula Theme v1.2.5
- *
- * https://github.com/dracula/highlightjs
- *
- * Copyright 2016-present, All rights reserved
- *
- * Code licensed under the MIT license
- *
- * @author Denis Ciccale <dciccale@gmail.com>
- * @author Zeno Rocha <hi@zenorocha.com>
- */
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  background: #282a36;
-}
-
-.hljs-built_in,
-.hljs-selector-tag,
-.hljs-section,
-.hljs-link {
-  color: #8be9fd;
-}
-
-.hljs-keyword {
-  color: #ff79c6;
-}
-
-.hljs,
-.hljs-subst {
-  color: #f8f8f2;
-}
-
-.hljs-title,
-.hljs-attr,
-.hljs-meta-keyword {
-  font-style: italic;
-  color: #50fa7b;
-}
-
-.hljs-string,
-.hljs-meta,
-.hljs-name,
-.hljs-type,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-addition,
-.hljs-variable,
-.hljs-template-tag,
-.hljs-template-variable {
-  color: #f1fa8c;
-}
-
-.hljs-comment,
-.hljs-quote,
-.hljs-deletion {
-  color: #6272a4;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-literal,
-.hljs-title,
-.hljs-section,
-.hljs-doctag,
-.hljs-type,
-.hljs-name,
-.hljs-strong {
-  font-weight: bold;
-}
-
-.hljs-literal,
-.hljs-number {
-  color: #bd93f9;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
diff --git a/labapp/app/static/helpers-old.js b/labapp/app/static/helpers-old.js
new file mode 100644
index 0000000..8bcf234
--- /dev/null
+++ b/labapp/app/static/helpers-old.js
@@ -0,0 +1,127 @@
+function setCookie(name, value, days) {
+    var expires = "";
+    if (days) {
+        var date = new Date();
+        date.setTime(date.getTime() + (days*24*60*60*1000));
+        expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + (value || "") + expires + "; path=/";
+}
+
+function getCookie(name) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for(var i=0; i < ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0)==' ') c = c.substring(1,c.length);
+        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+    }
+    return null;
+}
+
+async function testHttpRequest(buttonId, requestUrl, resultDivId, buttonTxt) {
+    const button = document.getElementById(buttonId);
+    const resultDiv = document.getElementById(resultDivId);
+
+    // Add spinner to button and disable it
+    button.innerHTML = `Testing...<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>`;
+    button.disabled = true;
+    
+    try {
+        const response = await axios.get(requestUrl);
+        if (response.data.status === 'success') {
+            const prettyJson = JSON.stringify(response.data.data, null, 4);
+            resultDiv.innerHTML = `<div class="alert alert-success"><b>Request Succeeded:</b><br><pre class="hljs language-json rounded"><code>${prettyJson}</code></pre></div>`;
+            updateScoreCookie(requestUrl, 'pass');
+        } else {
+            const errJson = JSON.stringify(response.data.error, null, 4);
+            resultDiv.innerHTML = `<div class="alert alert-danger"><b>Request Failed:</b><br><pre class="hljs rounded"><code>${errJson}</code></pre></div>`;
+            updateScoreCookie(requestUrl, 'fail');
+        }
+    } catch (error) {
+        resultDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
+        updateScoreCookie(requestUrl, 'fail');
+    } finally {
+        // Restore original button text and remove spinner
+        button.innerHTML = buttonTxt;
+        button.disabled = false;
+        resultDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+}
+
+async function testPostRequest(buttonId, requestUrl, resultDivId, inputDataId, buttonTxt) {
+    const button = document.getElementById(buttonId);
+    const resultDiv = document.getElementById(resultDivId);
+    const inputData = document.getElementById(inputDataId).value;
+
+
+    // Add spinner and change button text
+    button.innerHTML = `Testing...<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>`;
+    button.disabled = true;
+
+    try {
+        const response = await axios.post(requestUrl, { userInput: inputData });
+        if (response.data.status === 'success') {
+            const prettyJson = JSON.stringify(response.data.data, null, 4);
+            resultDiv.innerHTML = `<div class="alert alert-success"><b>Request Succeeded:</b><br><pre class="hljs language-json rounded"><code>${prettyJson}</code></pre></div>`;
+            updateScoreCookie(requestUrl, 'pass');
+        } else {
+            const errJson = JSON.stringify(response.data.error, null, 4);
+            resultDiv.innerHTML = `<div class="alert alert-danger"><b>Request Failed:</b><br><pre class="hljs rounded"><code>${errJson}</code></pre></div>`;
+            updateScoreCookie(requestUrl, 'fail');
+        }
+    } catch (error) {
+        resultDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
+        updateScoreCookie(requestUrl, 'fail');
+    } finally {
+        // Restore original button text
+        button.innerHTML = buttonTxt;
+        button.disabled = false;
+        resultDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+}
+  
+  function updateScoreCookie_old(requestUrl, status) {
+    // Get the current cookie, decode it, and parse it as JSON
+    const currentCookie = decodeURIComponent(getScoreCookie('mcnp_scoreboard') || '%7B%7D'); // Ensure the default value is an encoded empty JSON object
+    let progress = JSON.parse(currentCookie);
+    progress[encodeURIComponent(requestUrl)] = status;
+    document.cookie = `mcnp_scoreboard=${encodeURIComponent(JSON.stringify(progress))}; path=/; expires=${new Date(new Date().getTime() + 86400e3).toUTCString()};`;
+  }
+  
+  function getScoreCookie(name) {
+    let cookieArray = document.cookie.split(';');
+    for(let i = 0; i < cookieArray.length; i++) {
+      let cookiePair = cookieArray[i].split('=');
+      if(name == cookiePair[0].trim()) {
+        return cookiePair[1];
+      }
+    }
+    return null;
+  }
+
+  function updateScoreCookie(requestUrl, status) {
+    // Retrieve the existing score cookie or initialize it to an empty JSON object.
+    // The cookie value retrieved is assumed to be URI-encoded since it was set as such.
+    let currentCookie = getCookie('mcnp_scoreboard') || '{}';
+
+    // Decode the retrieved cookie string to handle any URI-encoded characters.
+    let decodedCookie = decodeURIComponent(currentCookie);
+
+    // Parse the decoded cookie string into an object.
+    let progress = JSON.parse(decodedCookie);
+
+    // Update the progress object with the new status for the requestUrl.
+    // Using encodeURIComponent to ensure the URL is safely encoded.
+    progress[encodeURIComponent(requestUrl)] = status;
+
+    // Serialize the progress object back into a JSON string.
+    let jsonString = JSON.stringify(progress);
+
+    // Encode the entire JSON string to ensure all special characters are URI-safe.
+    let encodedJsonString = encodeURIComponent(jsonString);
+
+    // Use the setCookie function to update the cookie with the URI-encoded JSON string.
+    setCookie('mcnp_scoreboard', encodedJsonString, 1); // Set for 1 day expiration
+}
+
diff --git a/labapp/app/static/helpers.js b/labapp/app/static/helpers.js
index 18e50b4..3c0cc14 100644
--- a/labapp/app/static/helpers.js
+++ b/labapp/app/static/helpers.js
@@ -1,88 +1,119 @@
+// Utility function to get a cookie by name
+function getCookie(name) {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+    return null;
+}
+
+// Utility function to set a cookie
 function setCookie(name, value, days) {
-    var expires = "";
+    let expires = '';
     if (days) {
-        var date = new Date();
-        date.setTime(date.getTime() + (days*24*60*60*1000));
-        expires = "; expires=" + date.toUTCString();
+        const date = new Date();
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+        expires = `; expires=${date.toUTCString()}`;
     }
-    document.cookie = name + "=" + (value || "") + expires + "; path=/";
+    document.cookie = `${name}=${value}${expires}; path=/`;
 }
 
-function getCookie(name) {
-    var nameEQ = name + "=";
-    var ca = document.cookie.split(';');
-    for(var i=0; i < ca.length; i++) {
-        var c = ca[i];
-        while (c.charAt(0)==' ') c = c.substring(1,c.length);
-        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+function updateScore(requestUrl, status) {
+    // Retrieve the current cookie, assume it's base64 encoded, or default to an encoded empty object
+    const base64EncodedData = getCookie('mcnp-ac-data') || btoa('{}');
+    const cookieStr = atob(base64EncodedData);
+    let cookieData = JSON.parse(cookieStr);
+
+    // Check if the 'score' object exists, if not initialize it
+    if (!cookieData.score) {
+        cookieData.score = {};
     }
-    return null;
+
+    // Update the score object with the result of the current request
+    cookieData.score[requestUrl] = status;
+
+    // Convert the updated cookie object back to string, then encode to base64
+    const updatedStr = JSON.stringify(cookieData);
+    const updatedBase64Data = btoa(updatedStr);
+
+    // Update the cookie with the new base64 encoded data
+    setCookie('mcnp-ac-data', updatedBase64Data, 1);
+}
+
+function clearScore(requestUrl, status) {
+    // Retrieve the current cookie, assume it's base64 encoded, or default to an encoded empty object
+    const base64EncodedData = getCookie('mcnp-ac-data') || btoa('{}');
+    const cookieStr = atob(base64EncodedData);
+    let cookieData = JSON.parse(cookieStr);
+
+    // Clear the score
+    cookieData.score = {};
+
+    // Convert the updated cookie object back to string, then encode to base64
+    const updatedStr = JSON.stringify(cookieData);
+    const updatedBase64Data = btoa(updatedStr);
+
+    // Update the cookie with the new base64 encoded data
+    setCookie('mcnp-ac-data', updatedBase64Data, 1); 
 }
 
-async function testHttpRequest(buttonId, requestUrl, resultDivId) {
+async function testHttpRequest(buttonId, requestUrl, resultDivId, buttonTxt) {
     const button = document.getElementById(buttonId);
     const resultDiv = document.getElementById(resultDivId);
+
+    // Add spinner to button and disable it
+    button.innerHTML = `Testing...<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>`;
     button.disabled = true;
+    
     try {
         const response = await axios.get(requestUrl);
         if (response.data.status === 'success') {
             const prettyJson = JSON.stringify(response.data.data, null, 4);
-            resultDiv.innerHTML = `<div class="alert alert-success"><b>Request Succeeded:</b><br><pre><code class="hljs rounded">${prettyJson}</code></pre></div>`;
-            updateScoreCookie(requestUrl, 'pass');
+            resultDiv.innerHTML = `<div class="alert alert-success"><b>Request Succeeded:</b><br><pre class="hljs language-json rounded"><code>${prettyJson}</code></pre></div>`;
+            updateScore(requestUrl, 'pass');
         } else {
             const errJson = JSON.stringify(response.data.error, null, 4);
-            resultDiv.innerHTML = `<div class="alert alert-danger"><b>Request Failed:</b><br><pre><code class="hljs rounded">${errJson}</code></pre></div>`;
-            updateScoreCookie(requestUrl, 'fail');
+            resultDiv.innerHTML = `<div class="alert alert-danger"><b>Request Failed:</b><br><pre class="hljs rounded"><code>${errJson}</code></pre></div>`;
+            updateScore(requestUrl, 'fail');
         }
     } catch (error) {
         resultDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
-        updateScoreCookie(requestUrl, 'fail');
+        updateScore(requestUrl, 'fail');
     } finally {
+        // Restore original button text and remove spinner
+        button.innerHTML = buttonTxt;
         button.disabled = false;
         resultDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }
-  }
+}
 
-  async function testPostRequest(buttonId, requestUrl, resultDivId, inputDataId) {
+async function testPostRequest(buttonId, requestUrl, resultDivId, inputDataId, buttonTxt) {
     const button = document.getElementById(buttonId);
     const resultDiv = document.getElementById(resultDivId);
     const inputData = document.getElementById(inputDataId).value;
+
+
+    // Add spinner and change button text
+    button.innerHTML = `Testing...<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>`;
     button.disabled = true;
+
     try {
         const response = await axios.post(requestUrl, { userInput: inputData });
         if (response.data.status === 'success') {
             const prettyJson = JSON.stringify(response.data.data, null, 4);
-            resultDiv.innerHTML = `<div class="alert alert-success"><b>Request Succeeded:</b><br><pre><code class="hljs rounded">${prettyJson}</code></pre></div>`;
-            updateScoreCookie(requestUrl, 'pass');
+            resultDiv.innerHTML = `<div class="alert alert-success"><b>Request Succeeded:</b><br><pre class="hljs language-json rounded"><code>${prettyJson}</code></pre></div>`;
+            updateScore(requestUrl, 'pass');
         } else {
             const errJson = JSON.stringify(response.data.error, null, 4);
-            resultDiv.innerHTML = `<div class="alert alert-danger"><b>Request Failed:</b><br><pre><code class="hljs rounded">${errJson}</code></pre></div>`;
-            updateScoreCookie(requestUrl, 'fail');
+            resultDiv.innerHTML = `<div class="alert alert-danger"><b>Request Failed:</b><br><pre class="hljs rounded"><code>${errJson}</code></pre></div>`;
+            updateScore(requestUrl, 'fail');
         }
     } catch (error) {
         resultDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
-        updateScoreCookie(requestUrl, 'fail');
+        updateScore(requestUrl, 'fail');
     } finally {
+        // Restore original button text
+        button.innerHTML = buttonTxt;
         button.disabled = false;
         resultDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }
-  }
-  
-  function updateScoreCookie(requestUrl, status) {
-    // Get the current cookie, decode it, and parse it as JSON
-    const currentCookie = decodeURIComponent(getScoreCookie('score') || '%7B%7D'); // Ensure the default value is an encoded empty JSON object
-    let progress = JSON.parse(currentCookie);
-    progress[encodeURIComponent(requestUrl)] = status;
-    document.cookie = `score=${encodeURIComponent(JSON.stringify(progress))}; path=/; expires=${new Date(new Date().getTime() + 86400e3).toUTCString()};`;
-  }
-  
-  function getScoreCookie(name) {
-    let cookieArray = document.cookie.split(';');
-    for(let i = 0; i < cookieArray.length; i++) {
-      let cookiePair = cookieArray[i].split('=');
-      if(name == cookiePair[0].trim()) {
-        return cookiePair[1];
-      }
-    }
-    return null;
-  }
+}
\ No newline at end of file
diff --git a/labapp/app/static/images/404-err.png b/labapp/app/static/images/404-err.png
new file mode 100644
index 0000000..4b3e875
Binary files /dev/null and b/labapp/app/static/images/404-err.png differ
diff --git a/labapp/app/static/images/500-err.png b/labapp/app/static/images/500-err.png
new file mode 100644
index 0000000..9ec8cc9
Binary files /dev/null and b/labapp/app/static/images/500-err.png differ
diff --git a/labapp/app/static/images/cookie-err.png b/labapp/app/static/images/cookie-err.png
new file mode 100644
index 0000000..ad188e7
Binary files /dev/null and b/labapp/app/static/images/cookie-err.png differ
diff --git a/labapp/app/static/images/lb-banner.png b/labapp/app/static/images/lb-banner.png
new file mode 100644
index 0000000..8ef6194
Binary files /dev/null and b/labapp/app/static/images/lb-banner.png differ
diff --git a/labapp/app/static/images/manip-banner.png b/labapp/app/static/images/manip-banner.png
new file mode 100644
index 0000000..8d4143e
Binary files /dev/null and b/labapp/app/static/images/manip-banner.png differ
diff --git a/labapp/app/static/images/overview-banner.png b/labapp/app/static/images/overview-banner.png
new file mode 100644
index 0000000..eb2f68b
Binary files /dev/null and b/labapp/app/static/images/overview-banner.png differ
diff --git a/labapp/app/static/images/port-banner.png b/labapp/app/static/images/port-banner.png
new file mode 100644
index 0000000..c14fefc
Binary files /dev/null and b/labapp/app/static/images/port-banner.png differ
diff --git a/labapp/app/static/practical.png b/labapp/app/static/images/practical.png
similarity index 100%
rename from labapp/app/static/practical.png
rename to labapp/app/static/images/practical.png
diff --git a/labapp/app/static/images/routing-banner.png b/labapp/app/static/images/routing-banner.png
new file mode 100644
index 0000000..0ee6cfa
Binary files /dev/null and b/labapp/app/static/images/routing-banner.png differ
diff --git a/labapp/app/static/images/score-banner.png b/labapp/app/static/images/score-banner.png
new file mode 100644
index 0000000..8daf037
Binary files /dev/null and b/labapp/app/static/images/score-banner.png differ
diff --git a/labapp/app/static/images/setup-banner.png b/labapp/app/static/images/setup-banner.png
new file mode 100644
index 0000000..7642d7c
Binary files /dev/null and b/labapp/app/static/images/setup-banner.png differ
diff --git a/labapp/app/static/load-balancing.png b/labapp/app/static/load-balancing.png
deleted file mode 100644
index 1fd7284..0000000
Binary files a/labapp/app/static/load-balancing.png and /dev/null differ
diff --git a/labapp/app/static/logo.png b/labapp/app/static/logo.png
deleted file mode 100644
index e9a66db..0000000
Binary files a/labapp/app/static/logo.png and /dev/null differ
diff --git a/labapp/app/static/manip.png b/labapp/app/static/manip.png
deleted file mode 100644
index 772b24a..0000000
Binary files a/labapp/app/static/manip.png and /dev/null differ
diff --git a/labapp/app/static/ms-forms.png b/labapp/app/static/ms-forms.png
new file mode 100644
index 0000000..1164aec
Binary files /dev/null and b/labapp/app/static/ms-forms.png differ
diff --git a/labapp/app/static/network-policy.png b/labapp/app/static/network-policy.png
deleted file mode 100644
index d1d0ddc..0000000
Binary files a/labapp/app/static/network-policy.png and /dev/null differ
diff --git a/labapp/app/static/new_improved_logo.png b/labapp/app/static/new_improved_logo.png
deleted file mode 100644
index a3c00cd..0000000
Binary files a/labapp/app/static/new_improved_logo.png and /dev/null differ
diff --git a/labapp/app/static/nord.css b/labapp/app/static/nord.css
new file mode 100644
index 0000000..88b406a
--- /dev/null
+++ b/labapp/app/static/nord.css
@@ -0,0 +1,315 @@
+/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+title      Nord highlight.js                                   +
+project    nord-highlightjs                                    +
+version    0.1.0                                               +
+repository https://github.com/arcticicestudio/nord-highlightjs +
+author     Arctic Ice Studio                                   +
+email      development@arcticicestudio.com                     +
+copyright  Copyright (C) 2017                                  +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+
+[References]
+Nord
+  https://github.com/arcticicestudio/nord
+highlight.js
+  http://highlightjs.readthedocs.io/en/latest/style-guide.html
+  http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html
+*/
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #2E3440;
+}
+
+.hljs,
+.hljs-subst {
+  color: #D8DEE9;
+}
+
+.hljs-selector-tag {
+  color: #81A1C1;
+}
+
+.hljs-selector-id {
+  color: #8FBCBB;
+  font-weight: bold;
+}
+
+.hljs-selector-class {
+  color: #8FBCBB;
+}
+
+.hljs-selector-attr {
+  color: #8FBCBB;
+}
+
+.hljs-selector-pseudo {
+  color: #88C0D0;
+}
+
+.hljs-addition {
+  background-color: rgba(163, 190, 140, 0.5);
+}
+
+.hljs-deletion {
+  background-color: rgba(191, 97, 106, 0.5);
+}
+
+.hljs-built_in,
+.hljs-type {
+  color: #8FBCBB;
+}
+
+.hljs-class {
+  color: #8FBCBB;
+}
+
+.hljs-function {
+  color: #88C0D0;
+}
+
+.hljs-function > .hljs-title {
+  color: #88C0D0;
+}
+
+.hljs-keyword,
+.hljs-literal,
+.hljs-symbol {
+  color: #81A1C1;
+}
+
+.hljs-number {
+  color: #B48EAD;
+}
+
+.hljs-regexp {
+  color: #EBCB8B;
+}
+
+.hljs-string {
+  color: #A3BE8C;
+}
+
+.hljs-title {
+  color: #8FBCBB;
+}
+
+.hljs-params {
+  color: #D8DEE9;
+}
+
+.hljs-bullet {
+  color: #81A1C1;
+}
+
+.hljs-code {
+  color: #8FBCBB;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-formula {
+  color: #8FBCBB;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link:hover {
+  text-decoration: underline;
+}
+
+.hljs-quote {
+  color: #4C566A;
+}
+
+.hljs-comment {
+  color: #4C566A;
+}
+
+.hljs-doctag {
+  color: #8FBCBB;
+}
+
+.hljs-meta,
+.hljs-meta-keyword {
+  color: #5E81AC;
+}
+
+.hljs-meta-string {
+  color: #A3BE8C;
+}
+
+.hljs-attr {
+  color: #8FBCBB;
+}
+
+.hljs-attribute {
+  color: #D8DEE9;
+}
+
+.hljs-builtin-name {
+  color: #81A1C1;
+}
+
+.hljs-name {
+  color: #81A1C1;
+}
+
+.hljs-section {
+  color: #88C0D0;
+}
+
+.hljs-tag {
+  color: #81A1C1;
+}
+
+.hljs-variable {
+  color: #D8DEE9;
+}
+
+.hljs-template-variable {
+  color: #D8DEE9;
+}
+
+.hljs-template-tag {
+  color: #5E81AC;
+}
+
+.abnf .hljs-attribute {
+  color: #88C0D0;
+}
+
+.abnf .hljs-symbol {
+  color: #EBCB8B;
+}
+
+.apache .hljs-attribute {
+  color: #88C0D0;
+}
+
+.apache .hljs-section {
+  color: #81A1C1;
+}
+
+.arduino .hljs-built_in {
+  color: #88C0D0;
+}
+
+.aspectj .hljs-meta {
+  color: #D08770;
+}
+
+.aspectj > .hljs-title {
+  color: #88C0D0;
+}
+
+.bnf .hljs-attribute {
+  color: #8FBCBB;
+}
+
+.clojure .hljs-name {
+  color: #88C0D0;
+}
+
+.clojure .hljs-symbol {
+  color: #EBCB8B;
+}
+
+.coq .hljs-built_in {
+  color: #88C0D0;
+}
+
+.cpp .hljs-meta-string {
+  color: #8FBCBB;
+}
+
+.css .hljs-built_in {
+  color: #88C0D0;
+}
+
+.css .hljs-keyword {
+  color: #D08770;
+}
+
+.diff .hljs-meta {
+  color: #8FBCBB;
+}
+
+.ebnf .hljs-attribute {
+  color: #8FBCBB;
+}
+
+.glsl .hljs-built_in {
+  color: #88C0D0;
+}
+
+.groovy .hljs-meta:not(:first-child) {
+  color: #D08770;
+}
+
+.haxe .hljs-meta {
+  color: #D08770;
+}
+
+.java .hljs-meta {
+  color: #D08770;
+}
+
+.ldif .hljs-attribute {
+  color: #8FBCBB;
+}
+
+.lisp .hljs-name {
+  color: #88C0D0;
+}
+
+.lua .hljs-built_in {
+  color: #88C0D0;
+}
+
+.moonscript .hljs-built_in {
+  color: #88C0D0;
+}
+
+.nginx .hljs-attribute {
+  color: #88C0D0;
+}
+
+.nginx .hljs-section {
+  color: #5E81AC;
+}
+
+.pf .hljs-built_in {
+  color: #88C0D0;
+}
+
+.processing .hljs-built_in {
+  color: #88C0D0;
+}
+
+.scss .hljs-keyword {
+  color: #81A1C1;
+}
+
+.stylus .hljs-keyword {
+  color: #81A1C1;
+}
+
+.swift .hljs-meta {
+  color: #D08770;
+}
+
+.vim .hljs-built_in {
+  color: #88C0D0;
+  font-style: italic;
+}
+
+.yaml .hljs-meta {
+  color: #D08770;
+}
\ No newline at end of file
diff --git a/labapp/app/static/path.png b/labapp/app/static/path.png
deleted file mode 100644
index b26d612..0000000
Binary files a/labapp/app/static/path.png and /dev/null differ
diff --git a/labapp/app/static/portable.png b/labapp/app/static/portable.png
deleted file mode 100644
index a8af9ca..0000000
Binary files a/labapp/app/static/portable.png and /dev/null differ
diff --git a/labapp/app/static/setup.png b/labapp/app/static/setup.png
deleted file mode 100644
index 87576c5..0000000
Binary files a/labapp/app/static/setup.png and /dev/null differ
diff --git a/labapp/app/static/table.css b/labapp/app/static/table.css
index c05fec5..a5983ec 100644
--- a/labapp/app/static/table.css
+++ b/labapp/app/static/table.css
@@ -20,7 +20,7 @@
 }
 
 .score-table td {
-    background: rgb(230, 234, 253);
+    background: rgb(215, 223, 223);
     color: black;
 }
 
diff --git a/labapp/app/static/tls-icon.png b/labapp/app/static/tls-icon.png
deleted file mode 100644
index 51e2b30..0000000
Binary files a/labapp/app/static/tls-icon.png and /dev/null differ
diff --git a/labapp/app/static/virtual-networks.png b/labapp/app/static/virtual-networks.png
deleted file mode 100644
index 2d60427..0000000
Binary files a/labapp/app/static/virtual-networks.png and /dev/null differ
diff --git a/labapp/app/templates/base.html b/labapp/app/templates/base.html
index 9446736..e478ad4 100644
--- a/labapp/app/templates/base.html
+++ b/labapp/app/templates/base.html
@@ -10,7 +10,7 @@
     <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">
+    <link rel="stylesheet" href="/static/nord.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>
@@ -22,6 +22,10 @@
 <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;">
@@ -30,99 +34,85 @@
                     <span class="fs-5"><strong>Multi-Cloud App Connect</strong></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">
-                      Exercises
-                    </button>
-                    <div class="collapse show" id="appconnect-collapse">
-                      <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-                        <li><a href="/loadbalancing" 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="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="/score" class="link-dark rounded">Scoreboard</a></li>
-                        <li><a href="/ref" class="link-dark rounded">Reference</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>
+                        <h6 class="mb-1 p-2 bg-light rounded"><i class="bi bi-house-door-fill"></i>&nbsp;&nbsp;Home</h6>
+                        <ul class="list-unstyled fw-normal pb-1 small">
+                            <li><a href="/" class="link-dark rounded sidebar-link">Welcome</a></li>
+                            <li><a href="/overview" class="link-dark rounded sidebar-link">Overview</a></li>
+                            <li><a href="/setup" class="link-dark rounded sidebar-link">Setup</a></li>
+                        </ul>
+                    </li>
+                    <li class="mb-1">
+                        <h6 class="mb-1 p-2 bg-light rounded"><i class="bi bi-list-task"></i>&nbsp;&nbsp;Exercises</h6>
+                        <ul class="list-unstyled fw-normal pb-1 small">
+                            <li><a href="/loadbalancing" class="link-dark rounded sidebar-link">Load Balancing</a></li>
+                            <li><a href="/route" class="link-dark rounded sidebar-link">Routing</a></li>
+                            <li><a href="/manipulation" class="link-dark rounded sidebar-link">Manipulation</a></li>
+                            <li><a href="/portability" class="link-dark rounded sidebar-link">Portability</a></li>
+                        </ul>
+                    </li>
+                    <li class="mb-1">
+                        <h6 class="mb-1 p-2 bg-light rounded"><i class="bi bi-speedometer2"></i>&nbsp;&nbsp;Miscellaneous</h6>
+                        <ul class="list-unstyled fw-normal pb-1 small">
+                            <li><a href="/score" class="link-dark rounded sidebar-link">Scoreboard</a></li>
+                            <li><a href="/ref" class="link-dark rounded sidebar-link">Reference</a></li>
+                        </ul>
                     </li>
-                    {% endif %}
                 </ul>
-        </div>  
-      </div>
+
+                <!-- Dynamic Status Box from Config -->
+                {% 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";
+                                  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>
+                        <div class="status-box align-items-center bg-light p-2 text-center rounded border">
+                            <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>
+                {% endif %}
+
+            </div>  
+        </div>
+        
         
+
+
         <!-- Main Content -->
         <main class="col">
             {% block content %}
diff --git a/labapp/app/templates/cookie.html b/labapp/app/templates/cookie.html
new file mode 100644
index 0000000..36a7c5c
--- /dev/null
+++ b/labapp/app/templates/cookie.html
@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+<div class="main-body">
+
+    <div class="col text-center">
+        <div class="content-container">
+            <img src="/static/images/cookie-err.png" alt="Banner" class="img-fluid lab-header-clear">
+            <div class="alert alert-secondary mt-3" role="alert">
+                <strong><i class="bi bi-cookie"></i>&nbsp;&nbsp;Verify cookies are enabled&nbsp;&nbsp;<i class="bi bi-cookie"></i></strong>
+             </div>
+            <a href="/" class="btn btn-primary"><i class="bi bi-house-door-fill"></i>&nbsp;&nbsp;Home</a>
+        </div>
+    </div>
+
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/labapp/app/templates/error.html b/labapp/app/templates/error.html
index 284215c..472f608 100644
--- a/labapp/app/templates/error.html
+++ b/labapp/app/templates/error.html
@@ -3,9 +3,29 @@
 {% block title %}MCN Practical Error{% endblock %}
 
 {% block content %}
-    <div class="err">
-        <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
-            <img src="{{ err_img }}" alt="Descriptive Text">
-        </a>
+    {% if code == 404 %}
+    <div class="col text-center">
+        <div class="content-container">
+            <img src="/static/images/404-err.png" alt="Banner" class="img-fluid lab-header-clear">
+        </div>
     </div>
+    {% endif %}
+
+    {% if code == 500 %}
+
+    <script>
+        function clearCookie(name) {
+            document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+            window.location.href = "/";
+        }
+    </script>
+
+    <div class="col text-center">
+        <div class="content-container">
+            <img src="/static/images/500-err.png" alt="Banner" class="img-fluid lab-header-clear">
+            <button class="btn btn-danger mt-2" onclick="clearCookie('mcnp-ac-data')">Clear Lab State</button>
+        </div>
+    </div>
+    {% endif %}
+
 {% endblock %}
\ No newline at end of file
diff --git a/labapp/app/templates/future_base.html b/labapp/app/templates/future_base.html
deleted file mode 100644
index e0b9a83..0000000
--- a/labapp/app/templates/future_base.html
+++ /dev/null
@@ -1,151 +0,0 @@
-<!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>
-
diff --git a/labapp/app/templates/loadbalancing.html b/labapp/app/templates/loadbalancing.html
new file mode 100644
index 0000000..35c23a7
--- /dev/null
+++ b/labapp/app/templates/loadbalancing.html
@@ -0,0 +1,209 @@
+{% extends "base.html" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+<div class="main-body">
+
+<div class="text-center">
+    <img src="/static/images/lb-banner.png" alt="Banner" class="img-fluid lab-header">
+</div>
+                
+<div class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+    
+<p>
+    Load balancing is the cornerstone of XC's App Connect functionality.
+    L7 MCN requires discovering services at one site and making those services available to another.
+    XC implements this functionality with <strong>origin pools</strong> and <strong>load balancers</strong>. 
+    More complicated configurations (underlay networking, security services, observability) are built on these primitives.
+</p>
+
+<div style="height:25px"></div>
+        
+<h2><strong>Exercise 1: AWS Cloud App</strong></h2>
+<p>
+    For the initial exercise, make the cloud application running in AWS available to the UDF environment. 
+    Build an origin pool and load balancer based on the exercise requirements.
+</p>
+   
+<div>    
+    <ul class="list-group">
+        <li class="list-group-item">
+        <img src="/static/origin-icon.png" class="lab-icon">
+            The URL for the cloud app hosted in AWS is <strong>https://aws-cloud-app.mcn-lab.f5demos.com</strong>
+        </li>
+        <li class="list-group-item">
+        <img src="/static/origin-icon.png" class="lab-icon">
+            The cloud app is only reachable from the <strong>student-awsnet</strong> site.
+        </li>
+        <li class="list-group-item">
+        <img src="/static/origin-icon.png" class="lab-icon">
+            The cloud app is <strong>TLS</strong> only. 
+        </li>
+        <li class="list-group-item">
+        <img src="/static/lb-icon.png" class="lab-icon">
+            The load balancer domain is <strong>{{ ns or 'eph-ns' }}.mcn-lab.f5demos.com</strong>. 
+        </li>
+        <li class="list-group-item">
+        <img src="/static/lb-icon.png" class="lab-icon">
+            Use the <strong>mcn-lab-wildcard</strong> wildcard cert in the shared NS to enable TLS on the LB. 
+        </li>
+        <li class="list-group-item">
+            <img src="/static/lb-icon.png" class="lab-icon">
+            <strong>Do not advertise your load balancer to the internet.</strong>
+            {% if site %} Your site name is {{ site }}{% endif %}
+        </li>
+    </ul>
+</div>
+    
+<div style="height:25px"></div>
+    
+<h3><strong>Test Criteria</strong></h3>
+
+<pre class="hljs language-http rounded"><code>
+GET https://{{ ns or 'eph-ns' }}.mcn-lab.f5demos.com/ HTTP/1.1
+Host: {{ ns or 'eph-ns' }}.mcn-lab.f5demos.com
+      
+</code></pre>
+
+<pre class="hljs language-json rounded"><code>
+{
+    "env": "AWS",
+    ...
+}
+    
+</code></pre>
+
+    
+<div class="left-aligned-button-container">
+    <button id="requestBtn1" class="btn btn-primary lab-test-button">Test Load Balancer</button>
+</div>
+<div id="result1" class="mt-3"></div>
+<script>
+document.getElementById('requestBtn1').addEventListener('click', () => {
+    testHttpRequest('requestBtn1', '/_lb1', 'result1', 'Test Load Balancer');
+});
+</script>
+    
+<div style="height:25px"></div>
+
+<p>
+    Since this is the first exercise, here are some hints.
+</p>
+
+    
+<div id="hints">
+    <p>
+        <a class="btn btn-secondary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Load Balancer Hint</a>
+        <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Origin Pool Hint</button>
+        <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample3" aria-expanded="false" aria-controls="multiCollapseExample3">Origin Server Hint</button>
+    </p>
+    <div class="row">
+
+        <div class="collapse multi-collapse" id="multiCollapseExample1" data-bs-parent="#hints">
+            <div class="">
+                <img src="/static/load-balancer1.png" width="800px" height="auto" alt="temp">
+                <div style="height:25px"></div>
+                <img src="/static/load-balancer2.png" width="800px" height="auto" alt="temp">
+            </div>
+        </div>
+            
+            
+        <div class="collapse multi-collapse" id="multiCollapseExample2" data-bs-parent="#hints">
+            <div class="">
+                <img src="/static/origin-pool.png" width="800px" height="auto" alt="temp">
+            </div>
+        </div>
+            
+            
+        <div class="collapse multi-collapse" id="multiCollapseExample3" data-bs-parent="#hints">
+            <div class="">
+                <img src="/static/origin-server.png" width="800px" height="auto" alt="temp">
+            </div>
+        </div>
+        
+    </div>
+</div>
+    
+<div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+    
+
+<h2><strong>Exercise 2: Azure Cloud App</strong></h2>
+
+<p>
+    For the second exercise, make the cloud application running in Azure available to the UDF environment.
+    Create a new origin pool for the Azure cloud app. Reuse your load balancer. 
+</p>
+
+    
+<div>
+    <ul class="list-group">
+        <li class="list-group-item">
+        <img src="/static/origin-icon.png" class="lab-icon">
+            The URL for the cloud app hosted in Azure is <strong>https://azure-cloud-app.mcn-lab.f5demos.com</strong>
+        </li>
+        <li class="list-group-item">
+        <img src="/static/origin-icon.png" class="lab-icon">
+            The cloud app is only reachable from the <strong>student-azurenet</strong> site.
+        </li>
+        <li class="list-group-item">
+        <img src="/static/origin-icon.png" class="lab-icon">
+            The cloud app is TLS only. 
+        </li>
+        <li class="list-group-item">
+        <img src="/static/lb-icon.png" class="lab-icon">
+            Keep the AWS Origin Pool in place. 
+        </li>
+    </ul>
+</div>
+
+    
+<div style="height:25px"></div>
+    
+    
+<h3><strong>Test Criteria</strong></h3> 
+
+<pre class="hljs language-http rounded"><code>
+GET https://{{ ns }}.mcn-lab.f5demos.com/ HTTP/1.1
+Host: {{ ns }}.mcn-lab.f5demos.com
+      
+</code></pre>
+
+<pre class="hljs language-json rounded"><code>
+{
+    "env": "Azure",
+    ...
+}
+        
+</code></pre>
+
+    
+<div class="alert alert-secondary" role="alert">
+    <strong>This test will make up to 5 requests.</strong>
+</div>
+
+<div class="left-aligned-button-container">
+    <button id="requestBtn2" class="btn btn-primary lab-test-button">Test Load Balancer</button>
+</div>
+<div id="result2" class="mt-3"></div>
+<script>
+document.getElementById('requestBtn2').addEventListener('click', () => {
+    testHttpRequest('requestBtn2', '/_lb2', 'result2', 'Test Load Balancer');
+});
+</script>
+    
+<div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+<nav aria-label="labapp nav">
+    <ul class="pagination justify-content-end">
+        <li class="page-item">
+        <a class="page-link" href="/route">Routing <i class="bi bi-arrow-right-circle-fill"></i></a>
+        </li>
+    </ul>
+</nav>
+    
+    
+
+
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/labapp/app/templates/manipulation.html b/labapp/app/templates/manipulation.html
new file mode 100644
index 0000000..f92c827
--- /dev/null
+++ b/labapp/app/templates/manipulation.html
@@ -0,0 +1,227 @@
+{% extends "base.html" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+<div class="main-body">
+
+<div class="text-center">
+    <img src="/static/images/manip-banner.png" alt="Banner" class="img-fluid lab-header">
+</div>
+                
+<div class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+    
+<p></p>
+    Since web traffic has been traversing proxies, engineers have needed to alter HTTP content for increased observability (<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-For">XFF</a>), performance (<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control">Cache-Control</a>), or other core functionality (<a href="https://en.wikipedia.org/wiki/JSON_Web_Token">JWT</a>).
+    "Proxy Pass" has been part of web servers since the early Apache days.
+    Adding, removing, and altering headers are tablestakes for ADCs, CDNs, and software-based load balancers.
+    F5 XC App Connect implements these features granularly on routes or more broadly on the load balancer.
+</p> 
+
+<div style="height:25px"></div>
+    
+<h2><strong>Exercise 1: Path Rewrite</strong></h2>
+
+<p>
+Configure a path <strong>prefix rewrite</strong> to remove part of the request path when routing to an origin.
+</p>
+
+<div>
+    <ul class="list-group">
+      <li class="list-group-item">
+      <img src="/static/lb-icon.png" class="lab-icon">
+      Keep your configuration from the previous exercise in place. 
+      </li>
+      <li class="list-group-item">
+      <img src="/static/route-icon.png" class="lab-icon">
+      Requests to <strong>https://{{ ns or 'eph-ns' }}.mcn-lab.f5demos.com/<u>aws/raw/</u></strong> need to arrive at the origin with a path of <strong>/raw</strong></u>.
+      </li>
+    </ul>
+</div>
+    
+<div style="height:25px"></div>
+    
+<h3><strong>Test Criteria</strong></h3>
+
+<pre class="hljs language-http rounded"><code>
+GET https://{{ ns or 'eph-ns' }}.mcn-lab.f5demos.com/aws/raw HTTP/1.1
+Host: eph-ns.mcn-lab.f5demos.com
+                
+</code></pre>
+                
+<pre class="hljs language-json rounded"><code>
+{
+    "info": {
+        "path": "/raw"
+    }
+    ...
+}   
+
+</code></pre>
+    
+    
+<div class="left-aligned-button-container">
+    <button id="requestBtn1" class="btn btn-primary lab-test-button">Test Load Balancer</button>
+</div>
+<div id="result1" class="mt-3"></div>
+<script>
+document.getElementById('requestBtn1').addEventListener('click', () => {
+    testHttpRequest('requestBtn1', '/_manip1', 'result1', 'Test Load Balancer');
+});
+</script>
+    
+<p></p>
+    Questions on this functionality are often asked on <strong><a href="https://community.f5.com/" target="_blank">F5 DevCentral</a></strong>. Here's a hint. 
+</p>
+
+<div id="hints">
+    <p>
+      <a class="btn btn-secondary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Route Hint</a>
+      <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Rewrite Hint</button>
+    </p>
+    <div class="row">
+        <div class="collapse multi-collapse" id="multiCollapseExample1" data-bs-parent="#hints">
+          <img src="/static/rewrite1.png" width="900px" height="auto" alt="temp">
+        </div>
+        <div class="collapse multi-collapse" id="multiCollapseExample2" data-bs-parent="#hints">
+          <img src="/static/rewrite2.png" width="500px" height="auto" alt="temp">
+        </div>
+    </div>
+</div>
+    
+<div style="height:25px"></div>
+    
+<h2><strong>Exercise 2: Request Header Shenanigans</strong></h2>
+
+<p>
+    While blind header insertion or deletion is useful in some use cases, this exercise focuses on context aware header manipulation. 
+    Use the <strong><a href="https://docs.cloud.f5.com/docs/how-to/advanced-security/configure-http-header-processing" target="_blank">XC Header Processing</a></strong> docs for reference. 
+</p>
+
+<div style="height:25px"></div>
+    
+<div>
+    <ul class="list-group">
+      <li class="list-group-item">
+        <img src="/static/lb-icon.png" class="lab-icon">
+        Insert a request header named <strong>X-MCN-src-site</strong> to identify the UDF CE to the origin. <strong>Do not use a static value</strong>. 
+      </li>
+      <li class="list-group-item">
+        <img src="/static/lb-icon.png" class="lab-icon">
+        Insert a request header named <strong>X-MCN-namespace</strong> to identify the ephemeral NS to the origin. <strong>Do not use a static value</strong>. 
+      </li>
+    </ul>
+</div>
+    
+<div style="height:25px"></div>
+    
+<h3><strong>Test Criteria</strong></h3>
+
+<pre class="hljs language-http rounded"><code>
+GET https://{{ ns or 'eph-ns '}}.mcn-lab.f5demos.com/ HTTP/1.1
+Host: {{ ns or 'eph-ns '}}.mcn-lab.f5demos.com
+                
+</code></pre>
+                
+<pre class="hljs language-json rounded"><code>
+{
+    ...
+    "request_headers": {
+        "x-mcn-namespace": "wiggly-yellowtail",
+        "x-mcn-src-site": "cluster-xxxxxxxx",
+    },
+    ...
+}
+            
+</code></pre>
+    
+
+<div class="left-aligned-button-container">
+    <button id="requestBtn2" class="btn btn-primary lab-test-button">Test Load Balancer</button>
+</div>
+<div id="result2" class="mt-3"></div>
+<script>
+document.getElementById('requestBtn2').addEventListener('click', () => {
+    testHttpRequest('requestBtn2', '/_manip2', 'result2', 'Test Load Balancer');
+});
+</script>
+    
+<div style="height:25px"></div>
+    
+<h2><strong>Exercise 3: Response Header Shenanigans</strong></h2>
+    
+<div style="height:25px"></div>
+    
+<div>
+    <ul class="list-group">
+      <li class="list-group-item">
+        <img src="/static/lb-icon.png" class="lab-icon">
+        Insert a response header named <strong>X-MCN-dest-site</strong> to determine which cloud CE processed the request. 
+      </li>
+    </ul>
+</div>
+    
+<div style="height:25px"></div>
+    
+<h3><strong>Test Criteria</strong></h3>
+
+<div class="alert alert-secondary" role="alert">
+    <strong>This test validates multiple HTTP requests.</strong>
+</div>
+
+<div class="alert alert-secondary" role="alert">
+    <strong>This test evaluates response headers.</strong>
+</div>
+
+<strong>Request 1</strong>
+<pre class="hljs language-http rounded"><code>
+GET https://{{ ns or 'eph-ns' }}.mcn-lab.f5demos.com/aws HTTP/1.1
+Host: {{ ns or 'eph-ns' }}.mcn-lab.f5demos.com
+                
+</code></pre>
+                
+<pre class="hljs language-json rounded"><code>
+{
+    "x-mcn-dest-site": "student-awsnet"
+}
+            
+</code></pre>
+    
+<strong>Request 2</strong>
+<pre class="hljs language-http rounded"><code>
+GET https://{{ ns or 'eph-ns' }}.mcn-lab.f5demos.com/azure HTTP/1.1
+Host: {{ ns or 'eph-ns' }}.mcn-lab.f5demos.com
+                    
+</code></pre>
+                    
+<pre class="hljs language-json rounded"><code>
+{
+    "x-mcn-dest-site": "student-azurenet"
+}
+                
+</code></pre>
+
+<div class="left-aligned-button-container">
+    <button id="requestBtn3" class="btn btn-primary lab-test-button">Test Load Balancer</button>
+</div>
+<div id="result3" class="mt-3"></div>
+<script>
+document.getElementById('requestBtn3').addEventListener('click', () => {
+    testHttpRequest('requestBtn3', '/_manip3', 'result3', 'Test Load Balancer');
+});
+</script>
+    
+    
+<div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+    
+<nav aria-label="labapp nav">
+    <ul class="pagination justify-content-end">
+        <li class="page-item">
+        <a class="page-link" href="/portability">Portability <i class="bi bi-arrow-right-circle-fill"></i></a>
+        </li>
+    </ul>
+</nav>
+    
+    
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/labapp/app/templates/overview.html b/labapp/app/templates/overview.html
new file mode 100644
index 0000000..4e77839
--- /dev/null
+++ b/labapp/app/templates/overview.html
@@ -0,0 +1,228 @@
+{% extends "base.html" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+<div class="main-body">
+
+<div class="text-center">
+    <img src="/static/images/overview-banner.png" alt="Banner" class="img-fluid lab-header">
+</div>
+                
+<div class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+<p>
+The lab environment, the service endpoints, and how you interact with the load balancer have been simplified in an effort to focus on concepts.
+Understanding the environment, it's topology, and the rudimentary functionality of the <strong><a href="https://github.com/f5devcentral/f5xc-lab-mcn-practical/tree/main/cloudapp" target="_blank">cloud app</a></strong> will help in completing the exercises.
+</p>
+<div style="height:25px"></div>
+
+<h2><strong>Architecture</strong></h2>
+
+<p>
+The lab environment contains three distributed sites meshed using the F5 Distributed Cloud Global Network.
+</p>
+
+<ul class="list-group">
+  <li class="list-group-item">
+  <img src="/static/aws.png" width="40px" height="auto" class="rounded"> &nbsp;&nbsp;&nbsp;
+    <strong>student-awsnet</strong> in Amazon Web Services
+  </li>
+  <li class="list-group-item">
+  <img src="/static/azure.png" width="40px" height="auto" class="rounded"> &nbsp;&nbsp;&nbsp;
+  <strong>student-azurenet</strong> in Microsoft Azure
+  </li>
+  <li class="list-group-item">
+  <img src="/static/mcnp-udf.png" width="40px" height="auto"> &nbsp;&nbsp;&nbsp;
+  <strong>Lab CE</strong> in UDF 
+  </li>
+</ul>
+
+<div style="height:25px"></div>
+
+<div style="width: 60%;" class="d-flex justify-content-center align-items-center">
+  <img src="/static/mcn-prac-arch-base.png" alt="Arch" class="img-fluid">
+</div>
+
+<h2><strong>Lab Exercises</strong></h2>
+
+<p>
+Lab exercises will ask you to create configuration in the <strong><a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">lab tenant</a></strong>.
+Exercise reqirements are listed in a table along with an object type indicator. 
+</p>
+
+<ul class="list-group">
+  <li class="list-group-item">
+  <img src="/static/lb-icon.png" class="lab-icon">
+    <strong>Load Balancer</strong>
+  </li>
+  <li class="list-group-item">
+  <img src="/static/origin-icon.png" class="lab-icon">
+    <strong>Origin Pool</strong>
+  </li>
+  <li class="list-group-item">
+  <img src="/static/route-icon.png" class="lab-icon">
+    <strong>Route</strong> 
+  </li>
+</ul>
+
+<div style="height:25px"></div>
+
+<h4><strong>Test Criteria</strong></h4>
+
+<p>
+To complete lab exercises, you will run tests against the load balancer advertised from the Customer Edge in your UDF site.
+You will build this load balancer in the <strong><a href="/loadbalancing">first exercise</a></strong>.
+All tests will be run from this web apllication.
+</p>
+<p>
+Each test will specify success criteria followed by a <button id="null" class="btn btn-primary disabled">Test Load Balancer</button> button.
+</p>
+<p>
+Here are some illustrative examples. 
+</p>
+
+<p>
+The first section of the test criteria shows the request being made.
+</p>
+
+<pre class="hljs language-http rounded"><code>
+GET https://foo.mcn-lab.f5demos.com/ HTTP/1.1
+Host: foo.mcn-lab.f5demos.com
+
+</code></pre>
+
+<p>
+The second section shows a value the test expects in the response.
+</p>
+
+<pre class="hljs language-json rounded"><code>
+{
+  "info": {
+    "foo": True
+  }
+}
+
+</code></pre>
+
+<div class="left-aligned-button-container">
+    <button id="requestBtn1" class="btn btn-primary lab-ex-test">👍 Test</button>
+</div>
+<div id="result1" class="mt-3"></div>
+<script>
+document.getElementById('requestBtn1').addEventListener('click', () => {
+    testHttpRequest('requestBtn1', '/_test1', 'result1', '👍 Test');
+});
+</script>
+
+<p>
+  The test made a request to <strong>https://foo.mcn-lab.f5demos.com</strong>.
+  The test succeeded because the response contained the <code>JSON</code> string <code> {"info": { "foo": True }}</code>.
+</p>
+
+<div style="height:25px"></div>
+
+<pre class="hljs language-http rounded"><code>
+GET https://foo.mcn-lab.f5demos.com/ HTTP/1.1
+Host: foo.mcn-lab.f5demos.com
+
+</code></pre>
+
+<pre class="hljs language-json rounded"><code>
+{
+  "info": {
+    "bar": True
+  }
+}
+
+</code></pre>
+
+<div class="left-aligned-button-container">
+    <button id="requestBtn2" class="btn btn-primary lab-ex-test">👎 Test</button>
+</div>
+<div id="result2" class="mt-3"></div>
+<script>
+document.getElementById('requestBtn2').addEventListener('click', () => {
+    testHttpRequest('requestBtn2', '/_test2', 'result2', '👎 Test');
+});
+</script>
+
+<p>
+The test made a request to <strong>https://foo.mcn-lab.f5demos.com</strong>.
+The test failed because the response did not contain the <code>JSON</code>  string <code>{ "info": { "bar": True}}</code>.
+</p>
+
+<div style="height:25px"></div>
+
+<h4><strong>Other Tools</strong></h4>
+
+<p><code>curl</code> and <code>jq</code> are provided on the UDF <strong>Runner</strong> instance.</p>
+
+<pre class="hljs language-json rounded"><code>
+  ubuntu@ubuntu:~$ curl -s https://foo.mcn-lab.f5demos.com/ | jq
+  {
+    "info": {
+      "foo": true
+    }
+  }
+  </code></pre>
+
+<div class="alert alert-secondary" role="alert">
+  <strong>Responses displayed in exercise tests are truncated for readibility.</strong>
+</div>
+
+<div style="height:25px"></div>
+
+<h2><strong>Cloud App</strong></h2>
+
+<p>
+Exercises are run against instances of the <strong><a href="https://github.com/f5devcentral/f5xc-lab-mcn-practical/tree/main/cloudapp" target="_blank">cloud app</a></strong> hosted in each remote cloud environment.
+The cloud app simply echoes back HTTP request info.
+Unless otherwise noted, test results display headers and info <strong>from the request received by the app</strong>.
+In other words, test critera are evaluating being sent (as echoed back from the cloud app).
+
+To demonstrate, you can access an endpoint of each cloud app from your browser.
+</p>
+
+<div class="container">
+  <div class="row align-items-center">
+    <div class="col-lg-6 col-md-12">
+       <a href="https://aws-cloud-app.mcn-lab.f5demos.com/pretty" target="_blank">
+         <img src="/static/aws.png" height="100px" width="auto" class="rounded"/>
+        </a>
+    </div>
+    <div class="col-lg-6 col-md-12 h-100">
+      <a href="https://azure-cloud-app.mcn-lab.f5demos.com/pretty" target="_blank">
+        <img src="/static/azure.png" height="100px" width="auto"  class="rounded"/>
+      </a>
+    </div>
+  </div>
+</div>  
+
+<div style="height:25px"></div>
+
+<h2><strong>Issues</strong></h2>
+
+<p>
+Use the lab repository <i class="bi bi-github"> </i><strong><a href="https://github.com/f5devcentral/f5xc-lab-mcn-practical/" target="_blank">issue tracker</a></strong> to report bugs, typos, or lab enhancements.
+</p>
+<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+<nav aria-label="labapp nav">
+  <ul class="pagination justify-content-end">
+    <li class="page-item">
+      <a class="page-link" href="/setup">Setup <i class="bi bi-arrow-right-circle-fill"></i></a>
+    </li>
+  </ul>
+</nav>
+</div>
+{% endblock %}
+
+
+
+
+
+
+
+
+
diff --git a/labapp/app/templates/portability.html b/labapp/app/templates/portability.html
new file mode 100644
index 0000000..af22568
--- /dev/null
+++ b/labapp/app/templates/portability.html
@@ -0,0 +1,155 @@
+{% extends "base.html" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+<div class="main-body">
+
+<div class="text-center">
+    <img src="/static/images/port-banner.png" alt="Banner" class="img-fluid lab-header">
+</div>
+                
+<div class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+    
+<p>
+    The configuration built so far handles load balancing, routing, and content manipulation.
+    XC refers to this object as a "load balancer" but it's really the holistic representation of an application whose service endpoints live across the distributed network.
+    The object is simple - it doesn't yet include configuration for WAAP, API protection, or a service policy.
+</p>
+<p>   
+    A key advantage of XC over traditional ADCs is its flexibility in specifying <strong>where</strong> a load balancer is advertised.
+</p>
+
+<div style="height:25px"></div>
+    
+<h2><strong>Exercise 1: Advertise Policy</strong></h2>
+    
+<div>
+    <ul class="list-group">
+      <li class="list-group-item">
+        <img src="/static/lb-icon.png" class="lab-icon">
+        Configure the load balancer to be advertised from the virtual site <strong>shared/mcn-practical-udf-sites</strong>. 
+      </li>
+    </ul>
+</div>
+    
+<div style="height:25px"></div>
+    
+<h3><strong>Test Criteria</strong></h3>
+
+<pre class="hljs language-http rounded"><code>
+GET https://{{ ns or 'eph-ns '}}.mcn-lab.f5demos.com/ HTTP/1.1
+Host: {{ ns or 'eph-ns '}}.mcn-lab.f5demos.com
+                    
+</code></pre>
+                    
+<pre class="hljs language-json rounded"><code>
+{
+    "info": {
+        "path": "/"
+    }
+    ...
+}
+                
+</code></pre>
+     
+<div class="left-aligned-button-container">
+    <button id="requestBtn1" class="btn btn-primary lab-test-button">Test Load Balancer</button>
+</div>
+<div id="result1" class="mt-3"></div>
+<script>
+document.getElementById('requestBtn1').addEventListener('click', () => {
+    testHttpRequest('requestBtn1', '/_port1', 'result1', 'Test Load Balancer');
+});
+</script>
+        
+<div id="hints">
+    <p>
+      <a class="btn btn-secondary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Why did this work?</a>
+    </p>
+    <div class="row">
+        <div class="collapse multi-collapse" id="multiCollapseExample1" data-bs-parent="#hints">
+          <img src="/static/vsite2.png" width="600px" height="auto" alt="temp">
+          <div style="height:25px"></div>
+          <img src="/static/vsite.png" width="900px" height="auto" alt="temp">
+        </div>
+    </div>
+</div>
+    
+<div style="height:25px"></div>
+    
+<h2><strong>Exercise 2: Find a Friend</strong></h2>
+    
+<p>
+    Do you have a friend working on the lab?
+    Have they updated their advertise policy to use the virtual site?
+    Find thier <strong>ephemeral namespace</strong> (or use the one provided in the form).
+</p>
+
+<div>
+    <ul class="list-group">
+      <li class="list-group-item">
+        <img src="/static/lb-icon.png" class="lab-icon">
+        Test if your friend's load balancer is being advertised to the UDF site.
+      </li>
+    </ul>
+</div>    
+    
+<div style="height:25px"></div>
+    
+<h3><strong>Test Criteria</strong></h3>
+  
+<div class="alert alert-secondary" role="alert">
+    <strong>Use this ephemeral NS if a friend is unavailable.</strong>
+</div>
+
+<pre class="hljs language-http rounded"><code>
+GET https://wiggly-yellowtail.mcn-lab.f5demos.com/ HTTP/1.1
+Host: wiggly-yellowtail.mcn-lab.f5demos.com
+                        
+</code></pre>
+                        
+<pre class="hljs language-json rounded"><code>
+{
+    "info": {
+        "path": "/"
+    }
+    ...
+}
+                    
+</code></pre>
+
+<div class="container mt-4">
+    <div class="row">
+        <div class="col-md-6">
+            <div class="input-group mb-3">
+                <input type="text" id="inputText2" class="form-control"
+                    placeholder="Enter your string here" aria-label="User input" value="wiggly-yellowtail">
+                <button id="requestBtn2" class="btn btn-primary lab-post-button" type="button">Test Load Balancer</button>
+            </div>
+        </div>
+    </div>
+</div>
+<div id="result2" class="mt-3"></div>
+<script>
+    document.getElementById('requestBtn2').addEventListener('click', () => {
+        testPostRequest('requestBtn2', '/_port2', 'result2', 'inputText2', 'Test Load Balancer');
+    });
+</script>
+    
+<div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+    
+<nav aria-label="labapp nav">
+    <ul class="pagination justify-content-end">
+        <li class="page-item">
+        <a class="page-link" href="/score">Scoreboard <i class="bi bi-arrow-right-circle-fill"></i></a>
+        </li>
+    </ul>
+    </nav>
+
+
+
+
+
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/labapp/app/templates/route.html b/labapp/app/templates/route.html
new file mode 100644
index 0000000..07cc901
--- /dev/null
+++ b/labapp/app/templates/route.html
@@ -0,0 +1,181 @@
+{% extends "base.html" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+<div class="main-body">
+
+<div class="text-center">
+    <img src="/static/images/routing-banner.png" alt="Banner" class="img-fluid lab-header">
+</div>
+                
+<div class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+<p>
+Modern applications, and some classic ones, are often comprised of disparate services spread across sites. 
+MCN solutions must be able to make routing decisions based on characterstics of an HTTP request.
+F5 XC App Connect is a distributed L7 proxy that provides intelligent routing, visibility, and strategic points of control.
+</p>
+
+<div style="height:25px"></div>
+
+<h2><strong>Exercise 1: Path Routing</strong></h2>
+
+<p>
+Build routing rules and configure your load balancer to route traffic between the two cloud apps based on the request url.
+</p>
+
+<div>
+  <ul class="list-group">
+    <li class="list-group-item">
+    <img src="/static/origin-icon.png" class="lab-icon">
+    Reuse the origin pools from the previous exercise.
+    </li>
+    <li class="list-group-item">
+    <img src="/static/route-icon.png" class="lab-icon">
+    Route requests to <strong>https://{{ ns or 'eph-ns' }}.mcn-lab.f5demos.com/<u>aws</u></strong> to the AWS cloud app. 
+    </li>
+    <li class="list-group-item">
+    <img src="/static/route-icon.png" class="lab-icon">
+    Route requests to <strong>https://{{ ns or 'eph-ns' }}.mcn-lab.f5demos.com/<u>azure</u></strong> to the Azure cloud app. 
+    </li>
+  </ul>
+</div>
+
+
+<div style="height:25px"></div>
+
+<h3><strong>Test Criteria</strong></h3>
+
+<div class="alert alert-secondary" role="alert">
+    <strong>This test validates multiple HTTP requests.</strong>
+</div>
+
+<strong>Request 1</strong>
+<pre class="hljs language-http rounded"><code>
+GET https://{{ ns or 'eph-ns' }}.mcn-lab.f5demos.com/aws/raw HTTP/1.1
+Host: {{ ns or 'eph-ns' }}.mcn-lab.f5demos.com
+    
+</code></pre>
+    
+<pre class="hljs language-json rounded"><code>
+{
+    "env": "aws",
+    ...
+}
+
+</code></pre>
+
+<strong>Request 2</strong>
+<pre class="hljs language-http rounded"><code>
+GET https://{{ ns or 'eph-ns' }}.mcn-lab.f5demos.com/azure/raw HTTP/1.1
+Host: {{ ns or 'eph-ns' }}.mcn-lab.f5demos.com
+        
+</code></pre>
+        
+<pre class="hljs language-json rounded"><code>
+{
+    "env": "azure",
+    ...
+}
+        
+</code></pre>
+
+<div style="height:25px"></div>
+
+<div class="left-aligned-button-container">
+    <button id="requestBtn1" class="btn btn-primary lab-test-button">Test Load Balancer</button>
+</div>
+<div id="result1" class="mt-3"></div>
+<script>
+document.getElementById('requestBtn1').addEventListener('click', () => {
+    testHttpRequest('requestBtn1', '/_route1', 'result1', 'Test Load Balancer');
+});
+</script>
+
+<div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+<h2><strong>Exercise 2: Header Routing</strong></h2>
+
+<p>
+Build rules to route traffic between the two cloud apps based on an arbitrary HTTP request header.
+</p>
+
+<div>
+    <ul class="list-group">
+        <li class="list-group-item">
+            <img src="/static/route-icon.png" class="lab-icon">
+            Route requests with an <strong>X-MCN-Lab: aws</strong> header to the AWS cloud app.
+        </li>
+        <li class="list-group-item">
+            <img src="/static/route-icon.png" class="lab-icon">
+            Route requests with an <strong>X-MCN-Lab: azure</strong> header to the Azure cloud app.
+        </li>
+    </ul>
+</div>
+
+<div style="height:25px"></div>
+
+<h3><strong>Test Criteria</strong></h3>
+
+<div class="alert alert-secondary" role="alert">
+    <strong>This test validates multiple HTTP requests.</strong>
+</div>
+
+<strong>Request 1</strong>
+<pre class="hljs language-http rounded"><code>
+GET https://{{ ns or 'eph-ns '}}.mcn-lab.f5demos.com/raw HTTP/1.1
+Host: {{ ns or 'eph-ns '}}.mcn-lab.f5demos.com
+X-MCN-lab: aws
+            
+</code></pre>
+            
+<pre class="hljs language-json rounded"><code>
+{
+    "env": "aws",
+    ...
+}
+        
+</code></pre>
+
+<strong>Request 2</strong>
+<pre class="hljs language-http rounded"><code>
+GET https://{{ ns or 'eph-ns '}}.mcn-lab.f5demos.com/raw HTTP/1.1
+Host: {{ ns or 'eph-ns '}}.mcn-lab.f5demos.com
+X-MCN-lab: azure
+                
+</code></pre>
+                
+<pre class="hljs language-json rounded"><code>
+{
+    "env": "azure",
+    ...
+}
+            
+</code></pre>
+
+<div class="left-aligned-button-container">
+    <button id="requestBtn2" class="btn btn-primary lab-test-button">Test Load Balancer</button>
+</div>
+<div id="result2" class="mt-3"></div>
+<script>
+document.getElementById('requestBtn2').addEventListener('click', () => {
+    testHttpRequest('requestBtn2', '/_route2', 'result2', 'Test Load Balancer');
+});
+</script>
+
+<div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+<nav aria-label="labapp nav">
+    <ul class="pagination justify-content-end">
+      <li class="page-item">
+        <a class="page-link" href="/manipulation">Manipulation <i class="bi bi-arrow-right-circle-fill"></i></a>
+      </li>
+    </ul>
+  </nav>
+
+
+
+
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/labapp/app/templates/score.html b/labapp/app/templates/score.html
index 387cd53..a14e9f8 100644
--- a/labapp/app/templates/score.html
+++ b/labapp/app/templates/score.html
@@ -5,8 +5,33 @@
 
 {% block content %}
 <link rel="stylesheet" href="/static/table.css">
+<script>
+    function clearScore(requestUrl, status) {
+    // Retrieve the current cookie, assume it's base64 encoded, or default to an encoded empty object
+    const base64EncodedData = getCookie('mcnp-ac-data') || btoa('{}');
+    const cookieStr = atob(base64EncodedData);
+    let cookieData = JSON.parse(cookieStr);
+
+    // Clear the score
+    cookieData.score = {};
+
+    // Convert the updated cookie object back to string, then encode to base64
+    const updatedStr = JSON.stringify(cookieData);
+    const updatedBase64Data = btoa(updatedStr);
+
+    // Update the cookie with the new base64 encoded data
+    setCookie('mcnp-ac-data', updatedBase64Data, 1); 
+    location.reload();
+}
+</script>
 <div class="main-body">
-<h1>Scoreboard</h1>
+
+    
+<div class="text-center">
+    <img src="/static/images/score-banner.png" alt="Banner" class="img-fluid lab-header">
+</div>
+                
+<div class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
 
 
 <div class="container">
@@ -36,15 +61,25 @@ <h1>Scoreboard</h1>
     </div>
 </div>
 
+<div class="container mt-1">
+    <button class="btn btn-danger" onclick="clearScore()">Clear Scores</button>
+</div>
+
+<div class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
 
-<div class="container mt-5">
-    <button class="btn btn-danger" onclick="clearCookie('score')">Clear Scores</button>
+<div style="height:25px"></div>
+
+<div class="mt-6">
+    <h4><strong>Feedback</strong></h4>
+    <p>
+        <img src="/static/ms-forms.png" height="50px" width="auto" class="rounded"/>
+        Please tell us your thoughts about the lab using <strong><a href="https://forms.office.com/Pages/ResponsePage.aspx?id=L_093Ttq0UCb4L-DJ9gcULXGWCx14gdAhrSFCCStGodUQTlQNVpKSlNZWlpDSENIVFlPVU84Q1VJMC4u" target="_blank">this form</a></strong>.
+    </p>
+    <div style="height:25px"></div>
+    <h4><strong>Issues</strong></h4>
+    <p>
+        Use the lab repository <i class="bi bi-github"> </i><strong><a href="https://github.com/f5devcentral/f5xc-lab-mcn-practical/" target="_blank">issue tracker</a></strong> to report bugs, typos, or lab enhancements.
+    </p>
 </div>
-<script>
-    function clearCookie(name) {
-        document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-        location.reload();
-    }
-</script>
 {% endblock %}
 
diff --git a/labapp/app/templates/setup.html b/labapp/app/templates/setup.html
index b97651d..b339c97 100644
--- a/labapp/app/templates/setup.html
+++ b/labapp/app/templates/setup.html
@@ -3,10 +3,50 @@
 {% block title %}{{ title }}{% endblock %}
 
 {% block content %}
-    <div class="markdown-body">
-        {{ content|safe }}
+<script>
+    function clearCookie() {
+        var form = document.getElementById('setupForm');
+        var input = document.getElementById('ENInput');
+        input.value = ''; 
+        var hiddenInput = document.createElement('input');
+        hiddenInput.type = 'hidden';
+        hiddenInput.name = 'action';
+        hiddenInput.value = 'clear';
+        form.appendChild(hiddenInput);
+        form.submit();
+    }
+</script>
 
-        <div>
+    <div class="main-body">
+
+        <div class="text-center">
+            <img src="/static/images/setup-banner.png" alt="Banner" class="img-fluid lab-header">
+        </div>
+                        
+        <div class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+        
+        <p>
+        Log in to the <strong><a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">lab tenant</a></strong> and open any namespaced tile - <strong>Multi-Cloud App Connect</strong>, <strong>Distributed Apps</strong>, etc.
+        The ephemeral namespace is a randomly generated concatenation of <strong><i>adjective-animal</i></strong> in the navigation bar towards the top.
+        <p/>
+        
+        <img src="/static/eph-ns.png" width="500px" height="auto" class="rounded" alt="eph-ns"/>
+        
+        <p>
+            The ephemeral namespace will be used to derive a unique URL for the load balancer used in the lab exercises.
+        </p>
+                
+        <form id="setupForm" action="/setup" method="post">
+            <div class="mb-3">
+                <label for="ENInput" class="form-label"></label>
+                <input type="text" class="form-control" id="ENInput" name="eph_ns" placeholder="Enter ephemeral NS">
+            </div>
+            <button type="submit" name="action" value="save" class="btn btn-primary">&nbsp;&nbsp;Set&nbsp;&nbsp;</button>
+            <button type="button" onclick="clearCookie()" class="btn btn-danger">Clear</button>
+        </form>
+ 
+
+    <div>
             {% with messages = get_flashed_messages(with_categories=true) %}
                 {% if messages %}
                     <div class="mt-3">
@@ -23,7 +63,7 @@
     <nav aria-label="labapp nav">
         <ul class="pagination justify-content-end">
           <li class="page-item">
-            <a class="page-link" href="/lb">Load Balancing <i class="bi bi-arrow-right-circle-fill"></i></a>
+            <a class="page-link" href="/loadbalancing">Load Balancing <i class="bi bi-arrow-right-circle-fill"></i></a>
           </li>
         </ul>
     </nav>
diff --git a/labapp/app/templates/welcome.html b/labapp/app/templates/welcome.html
new file mode 100644
index 0000000..dc6d119
--- /dev/null
+++ b/labapp/app/templates/welcome.html
@@ -0,0 +1,103 @@
+{% extends "base.html" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+<div class="main-body">
+
+    <div class="text-center">
+      <img src="/static/images/practical.png" alt="Banner" class="img-fluid lab-header-clear">
+    </div>
+        
+    <div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+    
+    <div class="alert alert-secondary text-center" role="alert">
+      <strong><i class="bi bi-cookie"></i>&nbsp;&nbsp;This lab requires cookies to be enabled&nbsp;&nbsp;<i class="bi bi-cookie"></i></strong>
+   </div>
+
+    <div style="height:25px"></div>
+    
+    <h1><strong>Getting Started</strong></h1>
+    
+    <p>
+    When your UDF deployment launched, two automated processes started - Customer Edge ("CE") registration and account provisioning in the <strong><a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">lab tenant</a></strong>.
+    </p>
+
+    <div style="height:25px"></div>
+    
+    <h2><strong>Customer Edge</strong></h2>
+    
+    <p>
+    The CE in the UDF deployment will register with the <strong><a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">lab tenant</a></strong>.
+    CEs on first launch update software and, often, their OS. This can take ~20 min from when the CE is booted.
+    </p>    
+
+    <p>
+    When the CE is ready, the status indicator in the navigation pane (👀 look to the left) will show <img src="/static/check.png" height="20px" width="auto"></img>.
+    Use the indicator to find the CE <strong>site name</strong> needed for configuring the load balancer's advertise policy.
+    </p>
+    <div style="height:25px"></div>
+    
+    <h2><strong>Account Provisioning</strong></h2>
+    
+    <p>
+    Check the email used to launch your UDF deployment for a <strong>welcome</strong> or password reset email from the <strong><a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">lab tenant</a></strong>.
+    Update your password to log into the tenant.
+    </p>
+
+    <div class="container">
+        <div class="row align-items-center">
+            <div class="col-lg-6 col-md-12">
+            <a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">
+                <img src="/static/email.png" height="300px" width="auto" class="rounded"/>
+            </a>
+            </div>
+            <div class="col-lg-6 col-md-12">
+            <a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">
+                <img src="/static/password.png" height="300px" width="auto" class="rounded"/>
+            </a>
+            </div>
+        </div> 
+    </div>  
+    
+    <div style="height:25px"></div>
+    
+    <h2><strong>While You Wait</strong></h2>
+    
+    <div>
+    Here's a few things you can do while waiting for the CE to be registered and provisioned:
+    <div style="height:25px"></div>
+    <ul class="list-group">
+      <li class="list-group-item">
+        <i class="bi bi-book"></i>&nbsp; &nbsp;
+        Read the lab <strong><a href="/overview">overview</a></strong>.
+      </li>
+      <li class="list-group-item">
+        <i class="bi bi-envelope-exclamation"></i>&nbsp; &nbsp;
+        Check for the tenant <strong>welcome</strong> email.
+      </li>
+      <li class="list-group-item">
+        <i class="bi bi-gear"></i>&nbsp; &nbsp;
+        Configure lab <strong><a href="/setup">setup</a></strong> after logging into the tenant.
+      </li>
+      <li class="list-group-item">
+        <i class="bi bi-cup-hot"></i></i>&nbsp; &nbsp;
+        Get a cup of coffee.
+      </li>
+      </li>
+    </ul>
+    </div>
+    
+    <div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+    
+    <nav aria-label="labapp nav">
+      <ul class="pagination justify-content-end">
+        <li class="page-item">
+          <a class="page-link" href="/overview">Overview <i class="bi bi-arrow-right-circle-fill"></i></a>
+        </li>
+      </ul>
+    </nav>
+    
+
+</div>
+{% endblock %}
\ No newline at end of file