diff --git a/labapp/app/app.py b/labapp/app/app.py
index d62c698..234736c 100644
--- a/labapp/app/app.py
+++ b/labapp/app/app.py
@@ -3,12 +3,16 @@
 """
 import os
 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
-import requests
 import markdown
 from ce import get_ce_info, get_ce_state
 from fetch import get_runner_session, cloudapp_fetch, cloudapp_req_headers, cloudapp_res_headers
+from score import score_get_results, score_build_table
 
 app = Flask(__name__)
 app.config['ce_info'] = None
@@ -16,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"})
@@ -42,20 +49,75 @@ def validate_eph_ns(input_name):
     pattern = r'^[a-zA-Z]+-[a-zA-Z]+$'
     return bool(re.match(pattern, input_name))
 
-def eph_ns() -> str:
+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):
@@ -63,29 +125,36 @@ 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', '/_ce_status']) 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'])
 def setup():
     """setup page"""
-    ns = eph_ns()
+    ns = get_eph_ns()
     if request.method == 'POST':
         action = request.form['action']
         if action == 'save':
@@ -94,117 +163,114 @@ 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('/lb')
+@app.route('/loadbalancing')
 def lb():
     """lb page"""
-    ns = eph_ns()
-    html = render_md("markdown/lb.md")
-    return render_template('exercise_standard.html',
+    ns = get_eph_ns()
+    site = get_site()
+    return render_template('loadbalancing.html',
         title="MCN Practical: LB",
-        content=html,
+        site=site,
         ns=ns
     )
 
 @app.route('/route')
 def path():
     """routing page"""
-    ns = eph_ns()
-    html = render_md("markdown/route.md")
-    return render_template('exercise_standard.html',
+    ns = get_eph_ns()
+    return render_template('route.html',
         title="MCN Practical: HTTP Routing",
-        content=html,
-        ns=ns,
-
+        ns=ns
     )
 
 @app.route('/manipulation')
 def header():
     """manipulation page"""
-    ns = eph_ns()
-    html = render_md("markdown/manipulation.md")
-    return render_template('exercise_standard.html',
+    ns = get_eph_ns()
+    site = get_site()
+    return render_template('manipulation.html',
         title="MCN Practical: Manipulation",
-        content=html, 
-        ns=ns
+        ns=ns, 
+        site=site
     )
 
 @app.route('/portability')
 def port():
     """portability page"""
-    ns = eph_ns()
-    html = render_md("markdown/portability.md")
-    return render_template('exercise_standard.html',
+    ns = get_eph_ns()
+    return render_template('portability.html',
         title="MCN Practical: Portability",
-        content=html, 
-        ns=ns
-    )
-
-@app.route('/vnet')
-def vnet():
-    """vnet page"""
-    ns = 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 = eph_ns()
-    html = render_md("markdown/reference.md")
-    return render_template('coming-soon.html',
-        title="MCN Practical: Reference",
-        content=html, 
-        ns=ns
-    )
-
-@app.route('/ref')
+@app.route('/reference')
 def ref():
     """reference page"""
-    ns = eph_ns()
-    html = render_md("markdown/reference.md")
+    ns = get_eph_ns()
     return render_template('coming-soon.html',
-        title="MCN Practical: Reference",
-        content=html, 
-        ns=ns
+        title="MCN Practical: Reference"
     )
 
 @app.route('/score')
 def score():
     """scoreboard page"""
-    ns = eph_ns()
-    html = render_md("markdown/score.md")
-    return render_template('coming-soon.html',
-        title="MCN Practical: Scoreboard",
-        content=html, 
+    try:
+        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)
+        over_table = score_build_table(p_score, 'overview', 'Overview')
+        lb_table = score_build_table(p_score, 'lb', 'Load Balancing')
+        route_table = score_build_table(p_score, 'route', 'Routing')
+        manip_table = score_build_table(p_score, 'manip', 'Manipulation')
+        port_table = score_build_table(p_score, 'port', 'Portability')
+    except LabException as e:
+        print(f"Couldn't build score table: {e}")
+    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,
+        )
+
+@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():
     """Example test"""
@@ -234,7 +300,7 @@ def ex_test2():
 def lb_aws():
     """AWS LB test"""
     try:
-        ns = eph_ns()
+        ns = get_eph_ns()
         if not ns:
             raise LabException("Ephemeral NS not set")
         url = f"https://{ns}.{app.config['base_url']}"
@@ -249,7 +315,7 @@ def lb_aws():
 def lb_azure():
     """Azure LB test"""
     try:
-        ns = eph_ns()
+        ns = get_eph_ns()
         if not ns:
             raise LabException("Ephemeral NS not set")
         url = f"https://{ns}.{app.config['base_url']}"
@@ -269,7 +335,7 @@ def lb_azure():
 def route1():
     """First Route Test"""
     try:
-        ns = eph_ns()
+        ns = get_eph_ns()
         if not ns:
             raise LabException("Ephemeral NS not set")
         base_url = app.config['base_url']
@@ -291,7 +357,7 @@ def route1():
 def route2():
     """First Route Test"""
     try:
-        ns = eph_ns()
+        ns = get_eph_ns()
         if not ns:
             raise LabException("Ephemeral NS not set")
         base_url = app.config['base_url']
@@ -315,7 +381,7 @@ def route2():
 def manip1():
     """First Manip Test"""
     try:
-        ns = eph_ns()
+        ns = get_eph_ns()
         if not ns:
             raise LabException("Ephemeral NS not set")
         base_url = app.config['base_url']
@@ -331,12 +397,13 @@ def manip1():
 def manip2():
     """Second Manip Test"""
     try:
-        ns = eph_ns()
+        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:
@@ -348,7 +415,7 @@ def manip2():
 def manip3():
     """Third Manip Test"""
     try:
-        ns = eph_ns()
+        ns = get_eph_ns()
         if not ns:
             raise LabException("Ephemeral NS not set")
         base_url = app.config['base_url']
@@ -372,7 +439,7 @@ def manip3():
 def port1():
     """Friend test"""
     try:
-        ns = eph_ns()
+        ns = get_eph_ns()
         if not ns:
             raise LabException("Ephemeral NS not set")
         url = f"https://{ns}.{app.config['base_url']}/"
@@ -388,7 +455,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/markdown/lb.md b/labapp/app/markdown/lb.md
deleted file mode 100644
index 96c0d4e..0000000
--- a/labapp/app/markdown/lb.md
+++ /dev/null
@@ -1,168 +0,0 @@
-<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
-    <img src="/static/load-balancing.png" width="300px" height="auto" alt="intro">
-</div>
-
-# **Load Balancing**
-
-<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
-
-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, etc.) are built on these primitives.
-
-<div style="height:25px"></div>
-
-### **Exercise 1: AWS Cloud App**
-
-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.
-
-<ul class="list-group">
-  <li class="list-group-item">
-  <img src="/static/origin-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-    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" width="auto" height="50px"> &nbsp; &nbsp;
-  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" width="auto" height="50px"> &nbsp; &nbsp;
-    The cloud app is TLS only. 
-  </li>
-  <li class="list-group-item">
-  <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-    The load balancer domain is <strong><i>your-ephemeral-namespace</i>.mcn-lab.f5demos.com</strong>. 
-  </li>
-  <li class="list-group-item">
-  <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-    Use the wildcard cert provided in the shared NS, <strong>mcn-lab-wildcard</strong>, to enable TLS on the LB. 
-  </li>
-</ul>
-
-<div style="height:25px"></div>
-
-#### **Test Criteria**
-
-```http
-GET https://eph-ns.mcn-lab.f5demos.com/ HTTP/1.1
-Host: eph-ns.mcn-lab.f5demos.com
-
-{
-  "env": "AWS",
-  ...
-}
-```
-
-<div class="left-aligned-button-container">
-    <button id="requestBtn1" class="btn btn-primary">Test Load Balancer</button>
-</div>
-<div id="result1" class="mt-3"></div>
-<script>
-document.getElementById('requestBtn1').addEventListener('click', () => {
-    makeHttpRequest('requestBtn1', '/_lb1', 'result1');
-});
-</script>
-
-<div style="height:25px"></div>
-
-Since this is the first exercise, here are some hints (if you need them).
-
-<div id="hints">
-<p>
-  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Load Balancer Hint</a>
-  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Origin Pool Hint</button>
-  <button class="btn btn-primary" 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">
-      <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>
-
-### **Exercise 2: Azure Cloud App**
-
-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. 
-
-
-<ul class="list-group">
-  <li class="list-group-item">
-  <img src="/static/origin-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-      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" width="auto" height="50px"> &nbsp; &nbsp;
-    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" width="auto" height="50px"> &nbsp; &nbsp;
-    The cloud app is TLS only. 
-  </li>
-  <li class="list-group-item">
-  <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-    Keep the AWS Origin Pool in place. 
-  </li>
-</ul>
-
-<div style="height:25px"></div>
-
-#### **Test Criteria**
-
-```http
-GET https://eph-ns.mcn-lab.f5demos.com/ HTTP/1.1
-Host: eph-ns.mcn-lab.f5demos.com
-
-{
-  "env": "Azure",
-  ...
-}
-```
-
-<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">Test Load Balancer</button>
-</div>
-<div id="result2" class="mt-3"></div>
-<script>
-document.getElementById('requestBtn2').addEventListener('click', () => {
-    makeHttpRequest('requestBtn2', '/_lb2', 'result2');
-});
-</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>
-
diff --git a/labapp/app/markdown/manipulation.md b/labapp/app/markdown/manipulation.md
deleted file mode 100644
index 3c3d09e..0000000
--- a/labapp/app/markdown/manipulation.md
+++ /dev/null
@@ -1,183 +0,0 @@
-<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
-    <img src="/static/manip.png" width="300px" height="auto" alt="intro">
-</div>
-
-# **Manipulation**
-
-<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
-
-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 core functionality (<a href="https://en.wikipedia.org/wiki/JSON_Web_Token">JWT</a>).
-"Proxy Pass" functionality 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 enables this functionality granularly on routes or broadly on the load balancer.
-
-<div style="height:25px"></div>
-
-### **Exercise 1: Path Rewrite**
-
-Configure a path <strong>prefix rewrite</strong> to remove part of the request path when routing to an origin.
-
-<ul class="list-group">
-  <li class="list-group-item">
-  <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-  Keep your configuration from the previous exercise in place. 
-  </li>
-  <li class="list-group-item">
-  <img src="/static/route-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-  Requests to <strong>https://<i>eph-ns</i>.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 style="height:25px"></div>
-
-#### **Test Criteria**
-
-```http
-GET https://eph-ns.mcn-lab.f5demos.com/aws/raw HTTP/1.1
-Host: eph-ns.mcn-lab.f5demos.com
-
-{
-  "info": {
-    "path": "/raw"
-  }
-  ...
-}
-```
-
-<div class="left-aligned-button-container">
-    <button id="requestBtn1" class="btn btn-primary">Test Load Balancer</button>
-</div>
-<div id="result1" class="mt-3"></div>
-<script>
-document.getElementById('requestBtn1').addEventListener('click', () => {
-    makeHttpRequest('requestBtn1', '/_manip1', 'result1');
-});
-</script>
-
-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. 
-
-<div id="hints">
-<p>
-  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Route Hint</a>
-  <button class="btn btn-primary" 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">
-    <div class="">
-      <img src="/static/rewrite2.png" width="500px" height="auto" alt="temp">
-    </div>
-  </div>
-</div>
-</div>
-
-<div style="height:25px"></div>
-
-### **Exercise 2: Request Header Shenanigans**
-
-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. 
-
-<div style="height:25px"></div>
-
-<ul class="list-group">
-  <li class="list-group-item">
-  <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-  Insert a request header named <strong>X-MCN-src-site</strong> to identify the UDF CE to the origin. <u>Do not use a static value</u>. 
-  </li>
-  <li class="list-group-item">
-  <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-  Insert a request header named <strong>X-MCN-namespace</strong> to identify the ephemeral namespace to the origin. <u>Do not use a static value</u>. 
-  </li>
-</ul>
-
-<div style="height:25px"></div>
-
-#### **Test Criteria**
-
-```http
-GET https://eph-ns.mcn-lab.f5demos.com/ HTTP/1.1
-Host: eph-ns.mcn-lab.f5demos.com
-
-{
-  ...
-  "request_headers": {
-    "x-mcn-namespace": "wiggly-yellowtail",
-    "x-mcn-src-site": "cluster-xxxxxxxx",
-  },
-  ...
-}
-```
-
-<div class="left-aligned-button-container">
-    <button id="requestBtn2" class="btn btn-primary">Test Load Balancer</button>
-</div>
-<div id="result2" class="mt-3"></div>
-<script>
-document.getElementById('requestBtn2').addEventListener('click', () => {
-    makeHttpRequest('requestBtn2', '/_manip2', 'result2');
-});
-</script>
-
-<div style="height:25px"></div>
-
-### **Exercise 3: Response Header Shenanigans**
-
-<div style="height:25px"></div>
-
-<ul class="list-group">
-  <li class="list-group-item">
-  <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-  Insert a response header named <strong>X-MCN-dest-site</strong> to determine which cloud CE processed the request. 
-  </li>
-</ul>
-
-<div style="height:25px"></div>
-
-#### **Test Criteria**
-
-```http
-GET https://eph-ns.mcn-lab.f5demos.com/aws HTTP/1.1
-Host: eph-ns.mcn-lab.f5demos.com
-
-{
-  "x-mcn-dest-site": "student-awsnet"
-}
-```
-
-```http
-GET https://eph-ns.mcn-lab.f5demos.com/azure HTTP/1.1
-Host: eph-ns.mcn-lab.f5demos.com
-
-{
-  "x-mcn-dest-site": "student-azurenet"
-}
-```
-
-<div class="alert alert-secondary" role="alert">
-  <strong>This test evaluates response headers.</strong>
-</div>
-
-<div class="left-aligned-button-container">
-    <button id="requestBtn3" class="btn btn-primary">Test Load Balancer</button>
-</div>
-<div id="result3" class="mt-3"></div>
-<script>
-document.getElementById('requestBtn3').addEventListener('click', () => {
-    makeHttpRequest('requestBtn3', '/_manip3', 'result3');
-});
-</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>
-
diff --git a/labapp/app/markdown/overview.md b/labapp/app/markdown/overview.md
deleted file mode 100644
index 48a3bd6..0000000
--- a/labapp/app/markdown/overview.md
+++ /dev/null
@@ -1,172 +0,0 @@
-<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
-    <img src="/static/arch.png" width="300px" height="auto" alt="arch">
-</div>
-
-# **Overview**
-
-<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
-
-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.
-
-<div style="height:25px"></div>
-
-## **Architecture**
-
-The lab environment contains three distributed sites meshed using the F5 Distributed Cloud Global Network.
-
-<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>
-
-<img src="/static/mcn-prac-arch-base.png" width="auto" height="600px" alt="Arch diagram">
-
-## **Cloud App**
-
-An instance of the <strong><a href="https://github.com/f5devcentral/f5xc-lab-mcn-practical/tree/main/cloudapp" target="_blank">cloud app</a></strong> is hosted in each remote cloud environment.
-The cloud app is a simple application that echoes back an HTTP request.
-While working through the lab, unless otherwise noted, test results display headers and info **from the request received by the app**.
-
-For testing, you can access an endpoint of each cloud app from your browser.
-
-<p float="left">
-<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>
-<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></p>
-
-<div style="height:25px"></div>
-
-## **Lab Exercises**
-
-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 requirements are listed in a table along with an object type indicator. 
-
-<ul class="list-group">
-  <li class="list-group-item">
-  <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-    <strong>Load Balancer</strong>
-  </li>
-  <li class="list-group-item">
-  <img src="/static/origin-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-    <strong>Origin Pool</strong>
-  </li>
-  <li class="list-group-item">
-  <img src="/static/route-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-    <strong>Route</strong> 
-  </li>
-</ul>
-
-<div style="height:25px"></div>
-
-#### **Test Criteria**
-
-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="/lb">first exercise</a></strong>.
-All tests will be run from this lab app.
-
-Each test will specify success criteria immediately before the <button id="null" class="btn btn-primary disabled">Test Load Balancer</button> button.
-
-Here are some examples to try. 
-
-```http
-GET https://foo.mcn-lab.f5demos.com/ HTTP/1.1
-
-{
-  "info": {
-    "foo": True
-  }
-}
-```
-
-<div class="left-aligned-button-container">
-    <button id="requestBtn1" class="btn btn-primary">👍 Test</button>
-</div>
-<div id="result1" class="mt-3"></div>
-<script>
-document.getElementById('requestBtn1').addEventListener('click', () => {
-    makeHttpRequest('requestBtn1', '/_test1', 'result1');
-});
-</script>
-
-The test made a request to <strong>https://foo.f5demos.com</strong>.
-The test succeeded because the response contained the ``JSON`` string ``{ "info": { "foo": True }}``.
-
-<div style="height:25px"></div>
-
-```http
-GET https://bar.mcn-lab.f5demos.com/ HTTP/1.1
-
-{
-  "info": {
-    "bar": True
-  }
-}
-```
-
-<div class="left-aligned-button-container">
-    <button id="requestBtn2" class="btn btn-primary">👎 Test</button>
-</div>
-<div id="result2" class="mt-3"></div>
-<script>
-document.getElementById('requestBtn2').addEventListener('click', () => {
-    makeHttpRequest('requestBtn2', '/_test2', 'result2');
-});
-</script>
-
-The test made a request to <strong>https://bar.f5demos.com</strong>.
-The test failed because the response did not contain the ``JSON`` string ``{ "info": { "bar": True}}``.
-
-
-<div style="height:25px"></div>
-
-#### **Other Tools**
-
-``curl`` and ``jq`` are provided on the UDF <strong>Runner</strong> instance.
-
-```shell
-ubuntu@ubuntu:~$ curl -s https://foo.mcn-lab.f5demos.com/ | jq
-{
-  "info": "bar"
-}
-```
-<div class="alert alert-secondary" role="alert">
-  Responses displayed in exercise tests are truncated for readibility.
-</div>
-
-<div style="height:25px"></div>
-
-## **Issues**
-
-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.
-
-<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>
-
-
-
-
-
-
diff --git a/labapp/app/markdown/portability.md b/labapp/app/markdown/portability.md
deleted file mode 100644
index 5bf0541..0000000
--- a/labapp/app/markdown/portability.md
+++ /dev/null
@@ -1,123 +0,0 @@
-<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
-    <img src="/static/portable.png" width="300px" height="auto" alt="intro">
-</div>
-
-# **Portability**
-
-<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
-
-
-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.
-
-What seperates XC from traditional ADCs is flexibility in defining <strong>where a load balancer is advertised</strong>.
-
-<div style="height:25px"></div>
-
-### **Exercise 1: Advertise Policy**
-
-<ul class="list-group">
-  <li class="list-group-item">
-  <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-  Configure the load balancer to be advertised on the virtual site <strong>shared/mcn-practical-udf-sites</strong>. 
-  </li>
-</ul>
-
-<div style="height:25px"></div>
-
-#### **Test Criteria**
-
-```http
-GET https://eph-ns.mcn-lab.f5demos.com/ HTTP/1.1
-Host: eph-ns.mcn-lab.f5demos.com
-
-{
-  "info": {
-    "path": "/"
-  }
-  ...
-}
-```
-
-<div class="left-aligned-button-container">
-    <button id="requestBtn1" class="btn btn-primary">Test Load Balancer</button>
-</div>
-<div id="result1" class="mt-3"></div>
-<script>
-document.getElementById('requestBtn1').addEventListener('click', () => {
-    makeHttpRequest('requestBtn1', '/_port1', 'result1');
-});
-</script>
-
-
-<div id="hints">
-<p>
-  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Why did that 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">
-      <img src="/static/vsite.png" width="900px" height="auto" alt="temp">
-    </div>
-</div>
-</div>
-
-<div style="height:25px"></div>
-
-### **Exercise 2: Find a Friend**
-
-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).
-
-<ul class="list-group">
-  <li class="list-group-item">
-  <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-  Test if your friend's load balancer is being advertised to the UDF site.
-  </li>
-</ul>
-
-<div style="height:25px"></div>
-
-#### **Test Criteria**
-
-```http
-GET https://friend-eph-ns.mcn-lab.f5demos.com/ HTTP/1.1
-Host: friend-eph-ns.mcn-lab.f5demos.com
-
-{
-  "info": {
-    "path": "/"
-  }
-  ...
-}
-```
-
-<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" type="button">Test Load Balancer</button>
-            </div>
-        </div>
-    </div>
-    <div id="result2" class="mt-3"></div>
-</div>
-<script>
-document.getElementById('requestBtn2').addEventListener('click', () => {
-    makePostRequest('requestBtn2', '/_port2', 'result2', 'inputText2');
-});
-</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>
\ No newline at end of file
diff --git a/labapp/app/markdown/reference.md b/labapp/app/markdown/reference.md
deleted file mode 100644
index e69de29..0000000
diff --git a/labapp/app/markdown/route.md b/labapp/app/markdown/route.md
deleted file mode 100644
index 65545c9..0000000
--- a/labapp/app/markdown/route.md
+++ /dev/null
@@ -1,132 +0,0 @@
-<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
-    <img src="/static/path.png" width="300px" height="auto" alt="intro">
-</div>
-
-# **HTTP Routing**
-
-<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
-
-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.
-
-<div style="height:25px"></div>
-
-### **Exercise 1: Path Routing**
-
-Build routing rules and configure your load balancer to route traffic between the two cloud apps based on the request url.
-
-<ul class="list-group">
-  <li class="list-group-item">
-  <img src="/static/origin-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-  Reuse the origin pools from the previous exercise.
-  </li>
-  <li class="list-group-item">
-  <img src="/static/route-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-  Route requests to <strong>https://<i>eph-ns</i>.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" width="auto" height="50px"> &nbsp; &nbsp;
-  Route requests to <strong>https://<i>eph-ns</i>.mcn-lab.f5demos.com/<u>azure*</u></strong> to the Azure cloud app. 
-  </li>
-</ul>
-
-<div style="height:25px"></div>
-
-#### **Test Criteria**
-
-```http
-GET https://eph-ns.mcn-lab.f5demos.com/aws/raw HTTP/1.1
-Host: eph-ns.mcn-lab.f5demos.com
-
-{
-  "env": "aws",
-  ...
-}
-```
-
-```http
-GET https://eph-ns.mcn-lab.f5demos.com/azure/raw HTTP/1.1
-Host: eph-ns.mcn-lab.f5demos.com
-
-{
-  "env": "azure",
-  ...
-}
-```
-
-<div style="height:25px"></div>
-
-<div class="left-aligned-button-container">
-    <button id="requestBtn1" class="btn btn-primary">Test Load Balancer</button>
-</div>
-<div id="result1" class="mt-3"></div>
-<script>
-document.getElementById('requestBtn1').addEventListener('click', () => {
-    makeHttpRequest('requestBtn1', '/_route1', 'result1');
-});
-</script>
-
-<div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
-
-### **Exercise 2: Header Routing**
-
-Build rules to route traffic between the two cloud apps based on an arbitrary HTTP request header.
-
-
-<ul class="list-group">
-  <li class="list-group-item">
-  <img src="/static/route-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-  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" width="auto" height="50px"> &nbsp; &nbsp;
-  Route requests with an <strong>X-MCN-Lab: azure</strong> header to the Azure cloud app.
-  </li>
-</ul>
-
-<div style="height:25px"></div>
-
-#### **Test Criteria**
-
-```http
-GET https://eph-ns.mcn-lab.f5demos.com/raw HTTP/1.1
-Host: eph-ns.mcn-lab.f5demos.com
-X-MCN-lab: aws
-
-{
-  "env": "aws",
-  ...
-}
-```
-
-```http
-GET https://eph-ns.mcn-lab.f5demos.com/raw HTTP/1.1
-Host: eph-ns.mcn-lab.f5demos.com
-X-MCN-lab: azure
-
-{
-  "env": "azure",
-  ...
-}
-```
-
-<div class="left-aligned-button-container">
-    <button id="requestBtn2" class="btn btn-primary">Test Load Balancer</button>
-</div>
-<div id="result2" class="mt-3"></div>
-<script>
-document.getElementById('requestBtn2').addEventListener('click', () => {
-    makeHttpRequest('requestBtn2', '/_route2', 'result2');
-});
-</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>
\ No newline at end of file
diff --git a/labapp/app/markdown/score.md b/labapp/app/markdown/score.md
deleted file mode 100644
index e69de29..0000000
diff --git a/labapp/app/markdown/setup.md b/labapp/app/markdown/setup.md
deleted file mode 100644
index 58a0aaa..0000000
--- a/labapp/app/markdown/setup.md
+++ /dev/null
@@ -1,40 +0,0 @@
-<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
-    <img src="/static/setup.png" width="300px" height="auto" alt="setup">
-</div>
-
-# **Setup**
-
-<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
-
-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.
-
-<img src="/static/eph-ns.png" width="500px" height="auto" class="rounded" alt="eph-ns"/>
-
-
-The ephemeral namespace will be used to derive a unique URL for the load balancer used in the lab exercises.
-
-<strong><i class="bi bi-cookie"></i> Cookies must be allowed for this site.</strong>
-
-<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>
-<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>
-
-
diff --git a/labapp/app/markdown/welcome.md b/labapp/app/markdown/welcome.md
deleted file mode 100644
index aa8ef9e..0000000
--- a/labapp/app/markdown/welcome.md
+++ /dev/null
@@ -1,81 +0,0 @@
-<div style="height:25px"></div>
-<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
-    <img src="/static/practical.png" width="700px" height="auto" alt="intro">
-</div>
-
-# **Welcome**
-
-<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
-
-This lab is a <strong>practical</strong> training activity.
-Each exercise will ask you to <strong>configure</strong> F5 Distributed Cloud ("XC") objects to reinforce core XC Multi-Cloud Networking ("MCN") App Connect concepts. 
-Once configured, you will <strong>test</strong> the configuration using this web application.
-
-<div style="height:25px"></div>
-
-## **Getting Started**
-
-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>.
-
-<div style="height:25px"></div>
-
-### **Customer Edge**
-
-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.
-
-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.
-
-<div style="height:25px"></div>
-
-### **Account Provisioning**
-
-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 float="left">
-<a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">
-<img src="/static/email.png" height="300px" width="auth"/>
-<img src="/static/password.png" height="300px" width="auth"/>
-</a>
-</p>
-
-<div style="height:25px"></div>
-
-### **While You Wait**
-
-Here's a few things you can do while waiting for the CE to be registered and provisioned:
-
-<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  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>
-
-
-
diff --git a/labapp/app/reference.html b/labapp/app/reference.html
new file mode 100644
index 0000000..30de113
--- /dev/null
+++ b/labapp/app/reference.html
@@ -0,0 +1,27 @@
+{% extends "base.html" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+<div class="main-body">
+
+    <div class="text-center">
+        <img src="/static/images/banners/reference-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>
+        F5 Distributed Cloud documentation blurb
+    </p>
+
+    <h2>Load Balancing</h2>
+
+    <h2>Routing</h2>
+
+    <h2>Content Manipulation</h2>
+
+    <h2>Portability</h2>
+
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/labapp/app/score.py b/labapp/app/score.py
new file mode 100644
index 0000000..085f189
--- /dev/null
+++ b/labapp/app/score.py
@@ -0,0 +1,124 @@
+"""
+Build Scoreboards
+"""
+import copy
+
+score_schema = {
+      "/_test1": {
+        "name": "Foo Test Example",
+        "key": "overview",
+        "href": "/overview",
+        "result": "none",
+    },
+    "/_test2": {
+        "name": "Bar Test Example",
+        "key": "overview",
+        "href": "/overview",
+        "result": "none"
+    },
+    "/_lb1": {
+        "name": "AWS Cloud App",
+        "key": "lb",
+        "href": "/loadbalancing",
+        "result": "none"
+    },
+    "/_lb2": {
+        "name": "Azure Cloud App",
+        "key": "lb",
+        "href": "/loadbalancing",
+        "result": "none"
+    },
+    "/_route1": {
+        "name": "Path Routing",
+        "key": "route",
+        "href": "/route",
+        "result": "none"
+    },
+    "/_route2": {
+        "name": "Header Routing",
+        "key": "route",
+        "href": "/route",
+        "result": "none"
+    },
+    "/_manip1": {
+        "name": "Path Rewrite",
+        "key": "manip",
+        "href": "/manipulation",
+        "result": "none"
+    },
+    "/_manip2": {
+        "name": "Request Headers",
+        "key": "manip",
+        "href": "/manipulation",
+        "result": "none"
+    },
+    "/_manip3": {
+        "name": "Response Headers",
+        "key": "manip",
+        "href": "/manipulation",
+        "result": "none"
+    },
+    "/_port1": {
+        "name": "Advertise Policy",
+        "key": "port",
+        "href": "/portability",
+        "result": "none"
+    },
+    "/_port2": {
+        "name": "Find a Friend",
+        "key": "port",
+        "href": "/portability",
+        "result": "none"
+    }
+}
+
+result_map = {
+    "fail": '<i class="bi bi-x-circle-fill score-fail"></i>',
+    "pass": '<i class="bi bi-check-circle-fill score-pass"></i>',
+    "none": '<i class="bi bi-circle-fill score-unknown"></i>'
+}
+
+def score_get_results(cookie_results):
+    """
+    build score result from cookie
+    """
+    this_score = copy.deepcopy(score_schema)
+    for test_path, result in cookie_results.items():
+        if test_path in score_schema:
+            this_score[test_path]['result'] = result
+    return this_score
+
+def score_sort(scores, key):
+    """sort score by key"""
+    scores = {k: v for k, v in scores.items() if v['key'] == key}
+    return scores
+
+def score_build_table(scores, section, name):
+    """build table section"""
+    section_scores = score_sort(scores, section)
+    rows_html = ""
+    for key, score in section_scores.items():
+        r_icon = result_map[score['result']]
+        section_html = f"""
+        <tr>
+        <td>{score['name']}</td>
+        <td>{r_icon}</td>
+        </tr>
+        """
+        rows_html += section_html
+    html = f"""
+    <table class="score-table"">
+        <thead>
+          <tr>
+            <th>{name}</th>
+          </tr>
+        </thead>
+        <tbody>
+            {rows_html}
+        </tbody>
+      </table>
+    """
+    return html
+
+
+
diff --git a/labapp/app/static/404.png b/labapp/app/static/404.png
deleted file mode 100644
index d88f9a7..0000000
Binary files a/labapp/app/static/404.png and /dev/null differ
diff --git a/labapp/app/static/500.png b/labapp/app/static/500.png
deleted file mode 100644
index 50460bf..0000000
Binary files a/labapp/app/static/500.png and /dev/null differ
diff --git a/labapp/app/static/arch-base.png b/labapp/app/static/arch-base.png
deleted file mode 100644
index 1ea20c0..0000000
Binary files a/labapp/app/static/arch-base.png and /dev/null differ
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/ce.png b/labapp/app/static/ce.png
deleted file mode 100644
index 867fd73..0000000
Binary files a/labapp/app/static/ce.png and /dev/null differ
diff --git a/labapp/app/static/coming-soon.png b/labapp/app/static/coming-soon.png
deleted file mode 100644
index 7bd491a..0000000
Binary files a/labapp/app/static/coming-soon.png and /dev/null differ
diff --git a/labapp/app/static/custom.css b/labapp/app/static/custom.css
index 6d11d83..ed25e3a 100644
--- a/labapp/app/static/custom.css
+++ b/labapp/app/static/custom.css
@@ -18,6 +18,62 @@ main {
   overflow-y: auto;
 }
 
+.full-height-container {
+  min-height: 100vh; /* Set the minimum height to 100% of the viewport height */
+}
+
+.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%;
 }
@@ -43,18 +99,22 @@ main {
   padding: 50px;
 }
 
-.err {
+.main-body {
+  padding: 50px;
+}
+
+.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.js b/labapp/app/static/helpers.js
index e39aac5..3c0cc14 100644
--- a/labapp/app/static/helpers.js
+++ b/labapp/app/static/helpers.js
@@ -1,64 +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 makeHttpRequest(buttonId, requestUrl, resultDivId) {
-  const button = document.getElementById(buttonId);
-  const resultDiv = document.getElementById(resultDivId);
-  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">${prettyJson}</code></pre></div>`;
-      } 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">${errJson}</code></pre></div>`;
-      }
-  } catch (error) {
-      resultDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
-  } finally {
-      button.disabled = false;
-      resultDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-  }
+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>`;
+            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 class="hljs rounded"><code>${errJson}</code></pre></div>`;
+            updateScore(requestUrl, 'fail');
+        }
+    } catch (error) {
+        resultDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
+        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 makePostRequest(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">${prettyJson}</code></pre></div>`;
+            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">${errJson}</code></pre></div>`;
+            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>`;
+        updateScore(requestUrl, 'fail');
     } finally {
+        // Restore original button text
+        button.innerHTML = buttonTxt;
         button.disabled = false;
         resultDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }
-}
+}
\ No newline at end of file
diff --git a/labapp/app/static/images/banners/404-err.png b/labapp/app/static/images/banners/404-err.png
new file mode 100644
index 0000000..4b3e875
Binary files /dev/null and b/labapp/app/static/images/banners/404-err.png differ
diff --git a/labapp/app/static/images/banners/500-err.png b/labapp/app/static/images/banners/500-err.png
new file mode 100644
index 0000000..9ec8cc9
Binary files /dev/null and b/labapp/app/static/images/banners/500-err.png differ
diff --git a/labapp/app/static/images/banners/coming-soon.png b/labapp/app/static/images/banners/coming-soon.png
new file mode 100644
index 0000000..07f24bf
Binary files /dev/null and b/labapp/app/static/images/banners/coming-soon.png differ
diff --git a/labapp/app/static/images/banners/cookie-err.png b/labapp/app/static/images/banners/cookie-err.png
new file mode 100644
index 0000000..ad188e7
Binary files /dev/null and b/labapp/app/static/images/banners/cookie-err.png differ
diff --git a/labapp/app/static/images/banners/lb-banner.png b/labapp/app/static/images/banners/lb-banner.png
new file mode 100644
index 0000000..8ef6194
Binary files /dev/null and b/labapp/app/static/images/banners/lb-banner.png differ
diff --git a/labapp/app/static/images/banners/manip-banner.png b/labapp/app/static/images/banners/manip-banner.png
new file mode 100644
index 0000000..8d4143e
Binary files /dev/null and b/labapp/app/static/images/banners/manip-banner.png differ
diff --git a/labapp/app/static/images/banners/overview-banner.png b/labapp/app/static/images/banners/overview-banner.png
new file mode 100644
index 0000000..eb2f68b
Binary files /dev/null and b/labapp/app/static/images/banners/overview-banner.png differ
diff --git a/labapp/app/static/images/banners/port-banner.png b/labapp/app/static/images/banners/port-banner.png
new file mode 100644
index 0000000..c14fefc
Binary files /dev/null and b/labapp/app/static/images/banners/port-banner.png differ
diff --git a/labapp/app/static/practical.png b/labapp/app/static/images/banners/practical.png
similarity index 100%
rename from labapp/app/static/practical.png
rename to labapp/app/static/images/banners/practical.png
diff --git a/labapp/app/static/images/banners/reference-banner.png b/labapp/app/static/images/banners/reference-banner.png
new file mode 100644
index 0000000..5a7ab25
Binary files /dev/null and b/labapp/app/static/images/banners/reference-banner.png differ
diff --git a/labapp/app/static/images/banners/routing-banner.png b/labapp/app/static/images/banners/routing-banner.png
new file mode 100644
index 0000000..0ee6cfa
Binary files /dev/null and b/labapp/app/static/images/banners/routing-banner.png differ
diff --git a/labapp/app/static/images/banners/score-banner.png b/labapp/app/static/images/banners/score-banner.png
new file mode 100644
index 0000000..8daf037
Binary files /dev/null and b/labapp/app/static/images/banners/score-banner.png differ
diff --git a/labapp/app/static/images/banners/setup-banner.png b/labapp/app/static/images/banners/setup-banner.png
new file mode 100644
index 0000000..7642d7c
Binary files /dev/null and b/labapp/app/static/images/banners/setup-banner.png differ
diff --git a/labapp/app/static/bad.png b/labapp/app/static/images/common/bad.png
similarity index 100%
rename from labapp/app/static/bad.png
rename to labapp/app/static/images/common/bad.png
diff --git a/labapp/app/static/good.png b/labapp/app/static/images/common/good.png
similarity index 100%
rename from labapp/app/static/good.png
rename to labapp/app/static/images/common/good.png
diff --git a/labapp/app/static/lb-icon.png b/labapp/app/static/images/common/lb-icon.png
similarity index 100%
rename from labapp/app/static/lb-icon.png
rename to labapp/app/static/images/common/lb-icon.png
diff --git a/labapp/app/static/multi-cloud-app-connect.svg b/labapp/app/static/images/common/multi-cloud-app-connect.svg
similarity index 100%
rename from labapp/app/static/multi-cloud-app-connect.svg
rename to labapp/app/static/images/common/multi-cloud-app-connect.svg
diff --git a/labapp/app/static/origin-icon.png b/labapp/app/static/images/common/origin-icon.png
similarity index 100%
rename from labapp/app/static/origin-icon.png
rename to labapp/app/static/images/common/origin-icon.png
diff --git a/labapp/app/static/route-icon.png b/labapp/app/static/images/common/route-icon.png
similarity index 100%
rename from labapp/app/static/route-icon.png
rename to labapp/app/static/images/common/route-icon.png
diff --git a/labapp/app/static/unknown.png b/labapp/app/static/images/common/unknown.png
similarity index 100%
rename from labapp/app/static/unknown.png
rename to labapp/app/static/images/common/unknown.png
diff --git a/labapp/app/static/load-balancer1.png b/labapp/app/static/images/lb/load-balancer1.png
similarity index 100%
rename from labapp/app/static/load-balancer1.png
rename to labapp/app/static/images/lb/load-balancer1.png
diff --git a/labapp/app/static/load-balancer2.png b/labapp/app/static/images/lb/load-balancer2.png
similarity index 100%
rename from labapp/app/static/load-balancer2.png
rename to labapp/app/static/images/lb/load-balancer2.png
diff --git a/labapp/app/static/origin-pool.png b/labapp/app/static/images/lb/origin-pool.png
similarity index 100%
rename from labapp/app/static/origin-pool.png
rename to labapp/app/static/images/lb/origin-pool.png
diff --git a/labapp/app/static/origin-server.png b/labapp/app/static/images/lb/origin-server.png
similarity index 100%
rename from labapp/app/static/origin-server.png
rename to labapp/app/static/images/lb/origin-server.png
diff --git a/labapp/app/static/rewrite1.png b/labapp/app/static/images/manip/rewrite1.png
similarity index 100%
rename from labapp/app/static/rewrite1.png
rename to labapp/app/static/images/manip/rewrite1.png
diff --git a/labapp/app/static/rewrite2.png b/labapp/app/static/images/manip/rewrite2.png
similarity index 100%
rename from labapp/app/static/rewrite2.png
rename to labapp/app/static/images/manip/rewrite2.png
diff --git a/labapp/app/static/aws.png b/labapp/app/static/images/overview/aws.png
similarity index 100%
rename from labapp/app/static/aws.png
rename to labapp/app/static/images/overview/aws.png
diff --git a/labapp/app/static/azure.png b/labapp/app/static/images/overview/azure.png
similarity index 100%
rename from labapp/app/static/azure.png
rename to labapp/app/static/images/overview/azure.png
diff --git a/labapp/app/static/mcn-prac-arch-base.png b/labapp/app/static/images/overview/mcn-prac-arch-base.png
similarity index 100%
rename from labapp/app/static/mcn-prac-arch-base.png
rename to labapp/app/static/images/overview/mcn-prac-arch-base.png
diff --git a/labapp/app/static/mcnp-aws.png b/labapp/app/static/images/overview/mcnp-aws.png
similarity index 100%
rename from labapp/app/static/mcnp-aws.png
rename to labapp/app/static/images/overview/mcnp-aws.png
diff --git a/labapp/app/static/mcnp-azure.png b/labapp/app/static/images/overview/mcnp-azure.png
similarity index 100%
rename from labapp/app/static/mcnp-azure.png
rename to labapp/app/static/images/overview/mcnp-azure.png
diff --git a/labapp/app/static/mcnp-udf.png b/labapp/app/static/images/overview/mcnp-udf.png
similarity index 100%
rename from labapp/app/static/mcnp-udf.png
rename to labapp/app/static/images/overview/mcnp-udf.png
diff --git a/labapp/app/static/vsite.png b/labapp/app/static/images/port/vsite.png
similarity index 100%
rename from labapp/app/static/vsite.png
rename to labapp/app/static/images/port/vsite.png
diff --git a/labapp/app/static/vsite2.png b/labapp/app/static/images/port/vsite2.png
similarity index 100%
rename from labapp/app/static/vsite2.png
rename to labapp/app/static/images/port/vsite2.png
diff --git a/labapp/app/static/images/score/ms-forms.png b/labapp/app/static/images/score/ms-forms.png
new file mode 100644
index 0000000..1164aec
Binary files /dev/null and b/labapp/app/static/images/score/ms-forms.png differ
diff --git a/labapp/app/static/eph-ns.png b/labapp/app/static/images/setup/eph-ns.png
similarity index 100%
rename from labapp/app/static/eph-ns.png
rename to labapp/app/static/images/setup/eph-ns.png
diff --git a/labapp/app/static/check.png b/labapp/app/static/images/welcome/check.png
similarity index 100%
rename from labapp/app/static/check.png
rename to labapp/app/static/images/welcome/check.png
diff --git a/labapp/app/static/email.png b/labapp/app/static/images/welcome/email.png
similarity index 100%
rename from labapp/app/static/email.png
rename to labapp/app/static/images/welcome/email.png
diff --git a/labapp/app/static/password.png b/labapp/app/static/images/welcome/password.png
similarity index 100%
rename from labapp/app/static/password.png
rename to labapp/app/static/images/welcome/password.png
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/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
new file mode 100644
index 0000000..a5983ec
--- /dev/null
+++ b/labapp/app/static/table.css
@@ -0,0 +1,60 @@
+/* General table styling */
+.score-table {
+    background: #34495E; /* Dark blue background for contrast */
+    color: rgb(85, 155, 221); /* Light blue text for readability */
+    border-radius: .9em; /* Rounded corners for aesthetics */
+    overflow: hidden; /* Keeps the inner elements contained within the border radius */
+    margin: 1em 0; /* Spacing above and below each table */
+}
+
+/* Ensures table cells have appropriate padding and text alignment */
+.score-table th, .score-table td {
+    text-align: left; /* Align text to the left */
+    display: block; /* Stack cells vertically on small screens */
+    padding: .4em .7em; /* Padding for spacing within cells */
+}
+
+.score-table th {
+    background: #34495E; /* Dark blue background for contrast */
+    color: white;
+}
+
+.score-table td {
+    background: rgb(215, 223, 223);
+    color: black;
+}
+
+/* Specific styles for pass/fail scenarios */
+.score-pass {
+    color: rgb(25, 135, 84); /* Green for pass */
+}
+
+.score-fail {
+    color: rgb(203, 68, 74); /* Red for fail */
+}
+
+/* Responsive settings and adjustments for table display */
+@media (min-width: 768px) { /* Adjusting for medium-sized devices and up */
+    .score-table {
+        min-width: 300px; /* Minimum width for tables on larger screens */
+        width: 100%; /* Full width to utilize available space */
+    }
+    .score-table th, .score-table td {
+        display: table-cell; /* Normal table cell display on larger screens */
+    }
+}
+
+/* Responsive container to allow horizontal scrolling on small devices */
+.table-responsive {
+    width: 100%; /* Full width */
+    overflow-x: auto; /* Enable horizontal scrolling when necessary */
+}
+
+/* Adjust first and last cell padding for aesthetics */
+.score-table th:first-child, .score-table td:first-child {
+    padding-left: .75em; /* Remove left padding for clean alignment */
+}
+
+.score-table th:last-child, .score-table td:last-child {
+    padding-right: 0; /* Remove right padding for clean alignment */
+}
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 3cf5c68..0e7df0f 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>
@@ -21,112 +21,98 @@
 </head>
 <body>
 <div class="container-fluid">
-    <div class="row">
+    <div class="row full-height-container">
+
+
+
+
         <!-- 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 logo-box">
-                    <img src="/static/multi-cloud-app-connect.svg" width="200" height="auto" alt="Logo">
+                    <img src="/static/images/common/multi-cloud-app-connect.svg" width="200" height="auto" alt="Logo">
                     <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="/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="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="/reference" class="link-dark rounded sidebar-link">Reference</a></li>
+                        </ul>
+                    </li>
+                </ul>
 
+                <!-- 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/images/common/good.png" : "/static/images/common/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/images/common/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/images/common/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/images/common/good.png" : "/static/images/common/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/images/common/unknown.png" alt="Status" style="width:50px; height:auto;">
+                        </div>
+                {% endif %}
 
-                    {% endif %}
+            </div>  
+        </div>
+        
+        
 
 
-                </ul>
-        </div>  
-      </div>
-        
         <!-- Main Content -->
         <main class="col">
             {% block content %}
diff --git a/labapp/app/templates/coming-soon.html b/labapp/app/templates/coming-soon.html
index a9b1fa1..b0c8fbe 100644
--- a/labapp/app/templates/coming-soon.html
+++ b/labapp/app/templates/coming-soon.html
@@ -3,9 +3,9 @@
 {% block title %}{{ title }}{% endblock %}
 
 {% block content %}
-    <div class="err">
-        <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
-            <img src="/static/coming-soon.png" class="border" alt="Coming Soon">
-        </a>
+<div class="col text-center">
+    <div class="content-container">
+        <img src="/static/images/banners/coming-soon.png" alt="Banner" class="img-fluid lab-header-clear">
     </div>
+</div>
 {% endblock %}
\ No newline at end of file
diff --git a/labapp/app/templates/cookie.html b/labapp/app/templates/cookie.html
new file mode 100644
index 0000000..3901cab
--- /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/banners/cookie-err.png" alt="Banner" class="img-fluid lab-header-clear">
+            <div class="alert alert-danger 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..9d75335 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/banners/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/banners/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/exercise_standard.html b/labapp/app/templates/exercise_standard.html
index b2b0b0e..b18fbdc 100644
--- a/labapp/app/templates/exercise_standard.html
+++ b/labapp/app/templates/exercise_standard.html
@@ -12,7 +12,7 @@
     {% endif %}
 </div>
 
-<div class="markdown-body">
+<div class="main-body">
     {{ content|safe }}
 </div>
 {% 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..997850b
--- /dev/null
+++ b/labapp/app/templates/loadbalancing.html
@@ -0,0 +1,217 @@
+{% extends "base.html" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+<div class="main-body">
+
+<div class="text-center">
+    <img src="/static/images/banners/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>
+
+<div class="container mt-3">
+    {% if not ns %}
+        <div class="alert alert-danger text-center" role="alert">
+            <strong>Configure your ephemeral NS from the <a href="/setup" class="alert-link">setup page</a> before continuing.</strong>
+        </div>
+    {% endif %}
+</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/images/common/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/images/common/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/images/common/origin-icon.png" class="lab-icon">
+            The cloud app is <strong>TLS</strong> only. 
+        </li>
+        <li class="list-group-item">
+        <img src="/static/images/common/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/images/common/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/images/common/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/images/lb/load-balancer1.png" width="800px" height="auto" alt="temp">
+                <div style="height:25px"></div>
+                <img src="/static/images/lb/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/images/lb/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/images/lb/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/images/common/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/images/common/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/images/common/origin-icon.png" class="lab-icon">
+            The cloud app is TLS only. 
+        </li>
+        <li class="list-group-item">
+        <img src="/static/images/common/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..2738bb9
--- /dev/null
+++ b/labapp/app/templates/manipulation.html
@@ -0,0 +1,235 @@
+{% extends "base.html" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+<div class="main-body">
+
+<div class="text-center">
+    <img src="/static/images/banners/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>
+
+<div class="container mt-3">
+    {% if not ns %}
+        <div class="alert alert-danger text-center" role="alert">
+            <strong>Configure your ephemeral NS from the <a href="/setup" class="alert-link">setup page</a> before continuing.</strong>
+        </div>
+    {% endif %}
+</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/images/common/lb-icon.png" class="lab-icon">
+      Keep your configuration from the previous exercise in place. 
+      </li>
+      <li class="list-group-item">
+      <img src="/static/images/common/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/images/manip/rewrite1.png" width="900px" height="auto" alt="temp">
+        </div>
+        <div class="collapse multi-collapse" id="multiCollapseExample2" data-bs-parent="#hints">
+          <img src="/static/images/manip/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/images/common/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/images/common/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": "{{ site or 'cluster-xxxxxxxxx' }}",
+    },
+    ...
+}
+            
+</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/images/common/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..0230290
--- /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/banners/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/images/overview/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/images/overview/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/images/overview/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/images/overview/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/images/common/lb-icon.png" class="lab-icon">
+    <strong>Load Balancer</strong>
+  </li>
+  <li class="list-group-item">
+  <img src="/static/images/common/origin-icon.png" class="lab-icon">
+    <strong>Origin Pool</strong>
+  </li>
+  <li class="list-group-item">
+  <img src="/static/images/common/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/images/overview/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/images/overview/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..6aff2d2
--- /dev/null
+++ b/labapp/app/templates/portability.html
@@ -0,0 +1,163 @@
+{% extends "base.html" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+<div class="main-body">
+
+<div class="text-center">
+    <img src="/static/images/banners/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>
+
+<div class="container mt-3">
+    {% if not ns %}
+        <div class="alert alert-danger text-center" role="alert">
+            <strong>Configure your ephemeral NS from the <a href="/setup" class="alert-link">setup page</a> before continuing.</strong>
+        </div>
+    {% endif %}
+</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/images/common/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/images/port/vsite2.png" width="600px" height="auto" alt="temp">
+          <div style="height:25px"></div>
+          <img src="/static/image/port/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 their <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/images/common/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 the example 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..1203667
--- /dev/null
+++ b/labapp/app/templates/route.html
@@ -0,0 +1,189 @@
+{% extends "base.html" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+<div class="main-body">
+
+<div class="text-center">
+    <img src="/static/images/banners/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>
+
+<div class="container mt-3">
+    {% if not ns %}
+        <div class="alert alert-danger text-center" role="alert">
+            <strong>Configure your ephemeral NS from the <a href="/setup" class="alert-link">setup page</a> before continuing.</strong>
+        </div>
+    {% endif %}
+</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/images/common/origin-icon.png" class="lab-icon">
+    Reuse the origin pools from the previous exercise.
+    </li>
+    <li class="list-group-item">
+    <img src="/static/images/common/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/images/common/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/images/common/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/images/common/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
new file mode 100644
index 0000000..5314b15
--- /dev/null
+++ b/labapp/app/templates/score.html
@@ -0,0 +1,85 @@
+<!-- score.html -->
+{% extends "base.html" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% 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">
+
+    
+<div class="text-center">
+    <img src="/static/images/banners/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">
+    <div class="row align-items-center">
+        <div class="col-lg-6 col-md-12">
+            <div class="table-responsive">
+                {{ lb_table|safe }}
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-12">
+            <div class="table-responsive">
+                {{ route_table|safe }}
+            </div>
+        </div>
+    </div>
+    <div class="row align-items-center">
+        <div class="col-lg-6 col-md-12">
+            <div class="table-responsive">
+                {{ manip_table|safe }}
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-12">
+            <div class="table-responsive">
+                {{ port_table|safe }}
+            </div>
+        </div>
+    </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 style="height:25px"></div>
+
+<div class="mt-6">
+    <h4><strong>Feedback</strong></h4>
+    <p>
+        <img src="/static/images/score/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>
+{% endblock %}
+
diff --git a/labapp/app/templates/setup.html b/labapp/app/templates/setup.html
index b97651d..2a992ef 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/banners/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/images/setup/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/standard.html b/labapp/app/templates/standard.html
index 1b2d796..72b588a 100644
--- a/labapp/app/templates/standard.html
+++ b/labapp/app/templates/standard.html
@@ -3,7 +3,7 @@
 {% block title %}{{ title }}{% endblock %}
 
 {% block content %}
-<div class="markdown-body">
+<div class="main-body">
     {{ content|safe }}
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/labapp/app/templates/welcome.html b/labapp/app/templates/welcome.html
new file mode 100644
index 0000000..4d72a61
--- /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/banners/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/images/welcome/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/images/welcome/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/images/welcome/password.png" height="300px" width="auto" class="rounded"/>
+            </a>
+            </div>
+        </div> 
+    </div>  
+    
+    <div style="height:25px"></div>
+    
+    <h1><strong>While You Wait</strong></h1>
+    
+    <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