diff --git a/src/app.py b/src/app.py
new file mode 100644
index 00000000..45bcd240
--- /dev/null
+++ b/src/app.py
@@ -0,0 +1,338 @@
+
+import subprocess
+from flask import Flask, render_template, request, redirect, url_for, session, send_from_directory
+import os
+import sys
+import uuid
+from flask_session import Session
+from visualize_h5 import h5_visualization_route
+from visualize_h5 import get_h5_plot  # Import the function
+import shutil
+import os
+
+
+
+# Flask App Setup
+app = Flask(__name__)
+
+
+
+
+SESSION_DIR = './flask_session' 
+if os.path.exists(SESSION_DIR):
+    shutil.rmtree(SESSION_DIR)
+    os.makedirs(SESSION_DIR)
+
+app.config['SECRET_KEY'] = os.environ.get('FLASK_SECRET_KEY', 'dev_secret_key')  
+app.config['SESSION_TYPE'] = 'filesystem' 
+Session(app)
+
+app.register_blueprint(h5_visualization_route)
+
+UPLOAD_FOLDER = os.path.join('../regr_smlp/code/uploads')
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+
+
+
+def call_smlp_api( argument_list):
+    """
+    mode: 'train', 'predict', 'verify', 'optimize', etc.
+    argument_list: e.g. ["-data", "my_dataset", "-resp", "y1,y2", ...]
+    """
+
+    cmd_string = " ".join(argument_list) 
+
+
+    cwd_dir = os.path.abspath("../regr_smlp/code/")
+    try:
+        result = subprocess.run(
+            argument_list,
+            capture_output=True,
+            text=True,
+            cwd=cwd_dir
+        )
+        full_output = f"STDOUT:\n{result.stdout}\nSTDERR:\n{result.stderr}"
+        print("DEBUG: Command output ->", full_output)
+        return result.stdout.strip() if result.returncode == 0 else full_output
+
+    except Exception as e:
+        return f"Error calling SMLP: {str(e)}"
+
+
+#  HOME
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+# TRAIN
+@app.route('/train', methods=['GET', 'POST'])
+def train():
+    if request.method == 'POST':
+        data_file = request.files.get('data_file')
+        dataset_path = None
+        
+        if data_file and data_file.filename:
+            dataset_path = os.path.join(UPLOAD_FOLDER, f"{uuid.uuid4()}_{data_file.filename}")
+            data_file.save(dataset_path)
+        
+        def add_arg(flag, value):
+            if value is not None and value != "":
+                arguments.extend([flag, str(value)])
+        
+        arguments = ['python3', os.path.abspath("../src/run_smlp.py")]
+        
+        if not dataset_path :
+            return "Error: Missing required dataset or spec file", 400
+
+        # Required arguments
+      
+        add_arg("-data", os.path.abspath(dataset_path))
+        add_arg("-out_dir", request.form.get('out_dir_val', './'))
+        add_arg("-pref", request.form.get('pref_val', 'TestTrain'))
+        add_arg("-mode", "train")
+        add_arg("-model", request.form.get('model'))
+        add_arg("-dt_sklearn_max_depth", request.form.get('dt_sklearn_max_depth'))
+        add_arg("-mrmr_pred", request.form.get('mrmr_pred'))
+        add_arg("-resp", request.form.get('resp'))
+        add_arg("-feat", request.form.get('feat'))
+        add_arg("-save_model", request.form.get('save_model'))
+        add_arg("-model_name", request.form.get('model_name'))
+        add_arg("-scale_feat", request.form.get('scale_feat'))
+        add_arg("-scale_resp", request.form.get('scale_resp'))
+        add_arg("-dt_sklearn_max_depth", request.form.get('dt_sklearn_max_depth'))
+        add_arg("-train_split", request.form.get('train_split'))
+        add_arg("-seed", request.form.get('seed_val'))
+        add_arg("-plots", request.form.get('plots'))
+        
+        additional_command = request.form.get('additional_command')
+        if additional_command:
+            arguments.extend(additional_command.split())
+        
+        # Debugging
+        print("DEBUG: Final SMLP Command ->", " ".join(arguments))
+        
+        output = call_smlp_api(arguments)
+        session['output'] = output
+        return redirect(url_for('results'))
+    
+    return render_template('train.html')
+
+
+
+#  PREDICT
+
+@app.route('/predict', methods=['GET', 'POST'])
+def predict():
+    if request.method == 'POST':
+        model_file = request.files.get('model_file')
+        new_data_file = request.files.get('new_data_file')
+
+        model_path = None
+        newdata_path = None
+
+        if model_file and model_file.filename:
+            model_path = os.path.join(UPLOAD_FOLDER, f"{uuid.uuid4()}_{model_file.filename}")
+            model_file.save(model_path)
+
+        if new_data_file and new_data_file.filename:
+            newdata_path = os.path.join(UPLOAD_FOLDER, f"{uuid.uuid4()}_{new_data_file.filename}")
+            new_data_file.save(newdata_path)
+
+        def add_arg(flag, value):
+            if value is not None and value != "":
+                arguments.extend([flag, str(value)])
+
+        arguments = ['python3', os.path.abspath("../src/run_smlp.py")]
+
+        if not model_path or not newdata_path:
+            return "Error: Both model file and new data file are required", 400
+
+        # Required
+        add_arg("-mode", "predict")
+
+        # Process paths (remove file extension)
+        add_arg("-model_name", os.path.abspath(model_path))
+        add_arg("-new_data", os.path.abspath(newdata_path))
+
+        # Optional user inputs
+        add_arg("-out_dir", request.form.get('out_dir_val', './'))
+        add_arg("-pref", request.form.get('pref_val', 'PredictRun'))
+        add_arg("-log_time", request.form.get('log_time', 'f'))
+        add_arg("-plots", request.form.get('plots'))
+        add_arg("-save_model", request.form.get('save_model'))
+        add_arg("-model_name", request.form.get('model_name'))
+        add_arg("-seed", request.form.get('seed_val'))
+
+
+        additional_command = request.form.get('additional_command')
+        if additional_command:
+            arguments.extend(additional_command.split())
+
+        # Debug output
+        print("DEBUG: Final Predict SMLP Command ->", " ".join(arguments))
+
+        output = call_smlp_api(arguments)
+        session['output'] = output
+        return redirect(url_for('results'))
+
+    return render_template('predict.html')
+
+
+
+def clear_old_plots():
+    """Remove all previous plots before running a new exploration."""
+    if os.path.exists(PLOT_SAVE_DIR):
+        for filename in os.listdir(PLOT_SAVE_DIR):
+            file_path = os.path.join(PLOT_SAVE_DIR, filename)
+            if os.path.isfile(file_path):
+                os.remove(file_path)
+
+
+#  EXPLORATION 
+@app.route('/explore', methods=['GET', 'POST'])
+def explore():
+    modes_list = ['certify', 'query', 'verify', 'synthesize', 'optimize', 'optsyn']
+
+    if request.method == 'POST':
+        clear_old_plots() 
+        chosen_mode = request.form.get('explore_mode', '')
+
+        if chosen_mode not in modes_list:
+            return "Error: Invalid mode selected", 400
+
+        data_file = request.files.get('data_file')
+        spec_file = request.files.get('spec_file')
+
+        dataset_path = None
+        spec_path = None
+
+        if data_file and data_file.filename:
+            dataset_path = os.path.join(UPLOAD_FOLDER, f"{uuid.uuid4()}_{data_file.filename}")
+            data_file.save(dataset_path)
+
+        if spec_file and spec_file.filename:
+            spec_path = os.path.join(UPLOAD_FOLDER, f"{uuid.uuid4()}_{spec_file.filename}")
+            spec_file.save(spec_path)
+
+        if not dataset_path or not spec_path:
+            return "Error: Missing required dataset or spec file", 400
+
+        arguments = ['python3', os.path.abspath("../src/run_smlp.py")]
+
+        def add_arg(flag, value):
+            """Helper function to add arguments only if they are not empty."""
+            if value is not None and value != "":
+                arguments.extend([flag, str(value)])
+
+        # Required arguments
+        add_arg("-data", os.path.abspath(dataset_path))
+        add_arg("-out_dir", request.form.get('out_dir_val', './'))
+        add_arg("-pref", request.form.get('pref_val', 'Test113'))
+        add_arg("-mode", chosen_mode)
+        add_arg("-spec", os.path.abspath(spec_path))
+        add_arg("-pareto", request.form.get('pareto'))
+        add_arg("-resp", request.form.get('resp_expr'))
+        add_arg("-feat", request.form.get('feat_expr'))
+        add_arg("-model", request.form.get('model_expr'))
+        add_arg("-dt_sklearn_max_depth", request.form.get('dt_sklearn_max_depth'))
+        add_arg("-mrmr_pred", request.form.get('mrmr_pred'))
+        add_arg("-epsilon", request.form.get('epsilon'))
+        add_arg("-delta_rel", request.form.get('delta_rel'))
+        add_arg("-save_model_config", request.form.get('save_model_config'))
+        add_arg("-plots", request.form.get('plots'))
+        add_arg("-log_time", request.form.get('log_time')) 
+        add_arg("-seed", request.form.get('seed_val'))
+        add_arg("-objv_names", request.form.get('objv_names'))
+        add_arg("-objv_exprs", request.form.get('objv_exprs'))
+
+
+        additional_command = request.form.get('additional_command')
+        if additional_command:
+            arguments.extend(additional_command.split())
+        
+        # checks if there should be a 3d plot
+        session['use_h5'] = any('nn_keras' in arg for arg in arguments)
+        session.modified = True
+        # Debugging
+        print("DEBUG: Final SMLP Command ->", " ".join(arguments))
+
+        output = call_smlp_api(arguments)
+        session['output'] = output
+        return redirect(url_for('results'))
+
+    return render_template('exploration.html', modes=modes_list)
+
+
+#  DOE
+
+@app.route('/doe', methods=['GET', 'POST'])
+def doe():
+    if request.method == 'POST':
+        doe_spec_file = request.files.get('doe_spec_file')
+        spec_path = None
+
+        if doe_spec_file and doe_spec_file.filename:
+            spec_path = os.path.join(UPLOAD_FOLDER, f"{uuid.uuid4()}_{doe_spec_file.filename}")
+            doe_spec_file.save(spec_path)
+
+        def add_arg(flag, value):
+            if value is not None and value != "":
+                arguments.extend([flag, str(value)])
+
+        arguments = ['python3', os.path.abspath("../src/run_smlp.py")]
+
+        if not spec_path:
+            return "Error: Missing DOE spec file", 400
+
+        # Required DOE mode
+        add_arg("-doe_spec", os.path.abspath(spec_path))
+        add_arg("-out_dir", request.form.get('out_dir_val', './'))
+        add_arg("-pref", request.form.get('pref_val', 'TestDOE'))
+        add_arg("-mode", "doe")
+        add_arg("-doe_algo", request.form.get('doe_algo'))
+        add_arg("-log_time", request.form.get('log_time', 'f'))
+
+        additional_command = request.form.get('additional_command')
+        if additional_command:
+            arguments.extend(additional_command.split())
+
+        # Debugging
+        print("DEBUG: Final DOE SMLP Command ->", " ".join(arguments))
+
+        output = call_smlp_api(arguments)
+        session['output'] = output
+        return redirect(url_for('results'))
+
+    return render_template('doe.html')
+
+
+
+# results
+PLOT_SAVE_DIR = os.path.abspath("../regr_smlp/code/images/results")
+os.makedirs(PLOT_SAVE_DIR, exist_ok=True)  # Ensure the directory is created
+
+@app.route('/results')
+def results():
+    output = session.get('output', 'No output available yet.')
+    print("\n--- RESULTS ---")
+    print(output)
+
+    # Get list of available plot files
+    plots = []
+    if os.path.exists(PLOT_SAVE_DIR):
+        plots = [f for f in os.listdir(PLOT_SAVE_DIR) if f.endswith(".png")]
+
+    use_h5 = session.get('use_h5', False)
+    h5_plot_html = get_h5_plot() if use_h5 else None
+
+    return render_template('results.html', output=output, plots=plots, h5_plot_html=h5_plot_html, use_h5=use_h5)
+
+# Route to serve images from the custom directory
+@app.route('/plots/<filename>')
+def serve_plot(filename):
+    return send_from_directory(PLOT_SAVE_DIR, filename)
+
+# MAIN
+if __name__ == '__main__':
+    app.run(debug=False, use_reloader=False)
diff --git a/src/readme_app.md b/src/readme_app.md
new file mode 100644
index 00000000..11ca9cff
--- /dev/null
+++ b/src/readme_app.md
@@ -0,0 +1,28 @@
+# About Flask
+
+This Flask app provides a front-end interface for the SMLP system. It allows you to:
+
+Train models on your own datasets.
+
+Predict using trained models on new data.
+
+Explore or validate model properties 
+
+Perform DOE (Design of Experiments) to sample data in systematic ways.
+
+
+
+
+## Requirements  
+
+	pip install flask flask_session
+
+
+
+## How to run 
+    cd smlp/src/python3 app.py
+
+
+
+By default, Flask runs on http://127.0.0.1:5000
+
diff --git a/src/smlp_py/smlp_plots.py b/src/smlp_py/smlp_plots.py
index 4b356a80..34e0ab3e 100644
--- a/src/smlp_py/smlp_plots.py
+++ b/src/smlp_py/smlp_plots.py
@@ -56,16 +56,35 @@ def response_distribution_plot(out_dir, y, resp_names, interactive):
     sys.exit(1)
 
 
+# STATIC_IMAGES_DIR = os.path.abspath(os.path.join(os.getcwd(), "static/images"))
+
+# os.makedirs(STATIC_IMAGES_DIR, exist_ok=True)
+
+
+# def plot(name, interactive, out_prefix=None, **show_kws):
+#     #print('saved figure filename: ', 'out_prefix', out_prefix, 'name', name)
+#     #print('interactive', interactive); print('show_kws', show_kws)
+#     if out_prefix is not None:
+#         #print('Saving plot ' + out_prefix + '_' + name + '.png')
+#         plot_path = os.path.join(STATIC_IMAGES_DIR, f"{out_prefix}_{name}.png")
+#         plt.savefig(plot_path)
+#     # if interactive:
+#     #     #print('HERE2', show_kws)
+#     #     plt.show(**show_kws)
+#     # plt.clf()
+PLOT_SAVE_DIR  = os.path.abspath("../../regr_smlp/code/images")
+# Ensure the directory exists
+# os.makedirs(PLOT_SAVE_DIR , exist_ok=True)
+
 def plot(name, interactive, out_prefix=None, **show_kws):
-    #print('saved figure filename: ', 'out_prefix', out_prefix, 'name', name)
-    #print('interactive', interactive); print('show_kws', show_kws)
     if out_prefix is not None:
-        #print('Saving plot ' + out_prefix + '_' + name + '.png')
-        plt.savefig(out_prefix + '_' + name + '.png')
-    if interactive:
-        #print('HERE2', show_kws)
-        plt.show(**show_kws)
-    plt.clf()
+        plot_path = os.path.join(PLOT_SAVE_DIR , f"{out_prefix}_{name}.png")
+        plt.savefig(plot_path)  # Save in the correct location
+    
+    # if interactive:
+    #     plt.show(**show_kws)
+    
+    # plt.clf()
 
 
 def plot_data_columns(data):
diff --git a/src/static/css/style.css b/src/static/css/style.css
new file mode 100644
index 00000000..1d3d824f
--- /dev/null
+++ b/src/static/css/style.css
@@ -0,0 +1,41 @@
+body {
+  background-color: var(--bs-body-bg);
+  color: var(--bs-body-color);
+  margin-bottom: 50px;
+  min-height: 100vh;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+h2 {
+  margin-top: 1rem;
+  color: var(--bs-heading-color);
+}
+
+pre {
+  white-space: pre-wrap;
+  background-color: var(--bs-secondary-bg);
+  color: var(--bs-body-color);
+  padding: 1rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--bs-border-color);
+}
+
+.navbar-brand {
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.navbar[data-bs-theme="dark"] {
+  --bs-navbar-color: rgba(255, 255, 255, 0.75);
+  --bs-navbar-hover-color: rgba(255, 255, 255, 0.9);
+  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
+  --bs-navbar-active-color: #fff;
+  --bs-navbar-brand-color: #fff;
+  --bs-navbar-brand-hover-color: #fff;
+  background-color: var(--bs-dark);
+}
+
+[data-bs-theme="dark"] .form-check-input {
+  background-color: var(--bs-secondary-bg);
+  border-color: var(--bs-border-color);
+}
\ No newline at end of file
diff --git a/src/templates/base.html b/src/templates/base.html
new file mode 100644
index 00000000..5e3ab30a
--- /dev/null
+++ b/src/templates/base.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="light">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>SMLP Dashboard</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"/>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+</head>
+<body class="bg-body-tertiary"> 
+<nav class="navbar navbar-expand-lg navbar-dark" data-bs-theme="dark"> 
+  <div class="container-fluid">
+    <a class="navbar-brand fw-bold" href="{{ url_for('home') }}">SMLP</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSmlp">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSmlp">
+      <ul class="navbar-nav ms-auto">
+        <li class="nav-item"><a class="nav-link" href="{{ url_for('train') }}">Train</a></li>
+        <li class="nav-item"><a class="nav-link" href="{{ url_for('predict') }}">Predict</a></li>
+        <li class="nav-item"><a class="nav-link" href="{{ url_for('explore') }}">Explore</a></li>
+        <li class="nav-item"><a class="nav-link" href="{{ url_for('doe') }}">DOE</a></li>
+        <li class="nav-item">
+          <div class="form-check form-switch my-1 ms-lg-3">
+            <input type="checkbox" class="form-check-input" id="darkModeToggle">
+            <label class="form-check-label text-light" for="darkModeToggle">
+              <i class="bi bi-moon-stars"></i>
+            </label>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+<div class="container-fluid py-4">
+  <div class="card shadow-sm border-0 p-4 bg-body rounded-4">
+    {% block content %}{% endblock %}
+  </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
+<script>
+  const darkModeToggle = document.getElementById('darkModeToggle');
+  const htmlElement = document.documentElement;
+
+  const getSavedTheme = () => {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    htmlElement.setAttribute('data-bs-theme', savedTheme);
+    darkModeToggle.checked = savedTheme === 'dark';
+    const toggleLabel = darkModeToggle.nextElementSibling;
+    toggleLabel.innerHTML = savedTheme === 'dark' 
+      ? '<i class="bi bi-sun"></i>' 
+      : '<i class="bi bi-moon-stars"></i>';
+  };
+
+  getSavedTheme();
+
+  darkModeToggle.addEventListener('change', () => {
+    const newTheme = darkModeToggle.checked ? 'dark' : 'light';
+    htmlElement.setAttribute('data-bs-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+    
+    const toggleLabel = darkModeToggle.nextElementSibling;
+    toggleLabel.innerHTML = newTheme === 'dark' 
+      ? '<i class="bi bi-sun"></i>' 
+      : '<i class="bi bi-moon-stars"></i>';
+  });
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/templates/doe.html b/src/templates/doe.html
new file mode 100644
index 00000000..a95b9f89
--- /dev/null
+++ b/src/templates/doe.html
@@ -0,0 +1,49 @@
+{% extends "base.html" %}
+{% block content %}
+<h2>Design of Experiments (DOE)</h2>
+
+<form method="POST" enctype="multipart/form-data" class="row g-3">
+
+  <div class="col-md-6">
+    <label for="doe_spec_file" class="form-label">DOE Spec File (.csv)</label>
+    <input type="file" name="doe_spec_file" class="form-control" required />
+  </div>
+
+  <div class="col-md-6">
+    <label for="doe_algo" class="form-label">DOE Algorithm (-doe_algo)</label>
+    <input type="text" name="doe_algo" class="form-control" placeholder="e.g. full_factorial, latin_hypercube" />
+  </div>
+
+  <div class="col-md-6">
+    <label for="doe_num_samples" class="form-label">Number of Samples (-doe_num_samples)</label>
+    <input type="text" name="doe_num_samples" class="form-control" placeholder="Optional (e.g. 20)" />
+  </div>
+
+  <div class="col-md-6">
+    <label for="out_dir_val" class="form-label">Output Directory (-out_dir)</label>
+    <input type="text" name="out_dir_val" class="form-control" placeholder="Default: ./ (optional)" />
+  </div>
+
+  <div class="col-md-6">
+    <label for="pref_val" class="form-label">Run Prefix (-pref)</label>
+    <input type="text" name="pref_val" class="form-control" placeholder="e.g. TestDOE" />
+  </div>
+
+  <div class="col-md-6">
+    <label for="log_time" class="form-label">Log Time (-log_time)</label>
+    <select name="log_time" class="form-select">
+      <option value="f" selected>No</option>
+      <option value="t">Yes</option>
+    </select>
+  </div>
+
+  <div class="col-md-12">
+    <label for="additional_command" class="form-label">Additional Command</label>
+    <input type="text" name="additional_command" class="form-control" />
+  </div>
+
+  <div class="col-12">
+    <button type="submit" class="btn btn-primary">Generate DOE</button>
+  </div>
+</form>
+{% endblock %}
diff --git a/src/templates/exploration.html b/src/templates/exploration.html
new file mode 100644
index 00000000..988b350d
--- /dev/null
+++ b/src/templates/exploration.html
@@ -0,0 +1,138 @@
+{% extends "base.html" %}
+{% block content %}
+<h2 class="mb-4">Explore SMLP</h2>
+<form method="POST" enctype="multipart/form-data" class="row g-3">
+
+  <div class="col-md-6">
+    <label class="form-label">Select Mode</label>
+    <select name="explore_mode" class="form-select">
+      {% for mode in modes %}
+      <option value="{{ mode }}" {% if mode == "optimize" %}selected{% endif %}>{{ mode }}</option>
+      {% endfor %}
+    </select>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Data File</label>
+    <input type="file" name="data_file" id="data_file" class="form-control"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Spec File</label>
+    <input type="file" name="spec_file" id="spec_file" class="form-control"/>
+  </div>
+
+  <hr class="my-4"/>
+
+  <div class="col-md-4">
+    <label class="form-label">Output Directory</label>
+    <input type="text" name="out_dir_val" class="form-control" value="./results"/>
+  </div>
+
+  <div class="col-md-4">
+    <label class="form-label">Prefix</label>
+    <input type="text" name="pref_val" class="form-control" value="Test113"/>
+  </div>
+
+  <div class="col-md-4">
+    <label class="form-label">Pareto?</label>
+    <div class="btn-group w-100" role="group">
+      <input type="radio" class="btn-check" name="pareto" id="pareto_yes" value="1" checked>
+      <label class="btn btn-outline-primary" for="pareto_yes">Yes</label>
+
+      <input type="radio" class="btn-check" name="pareto" id="pareto_no" value="0">
+      <label class="btn btn-outline-secondary" for="pareto_no">No</label>
+    </div>
+  </div>
+
+  <hr class="my-4"/>
+
+  <div class="col-md-6">
+    <label class="form-label">Resp</label>
+    <input type="text" name="resp_expr" class="form-control" value="y1,y2"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Feat</label>
+    <input type="text" name="feat_expr" class="form-control" value="x1,x2,p1,p2"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Model</label>
+    <input type="text" name="model_expr" class="form-control" value="dt_sklearn"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">DT Max Depth</label>
+    <input type="number" name="dt_sklearn_max_depth" class="form-control" value="15"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Data Scaler</label>
+    <input type="text" name="data_scaler" class="form-control" value="min_max"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Beta</label>
+    <input type="text" name="beta_expr" class="form-control" value="y1>7 and y2>6"/>
+  </div>
+
+  <div class="col-md-4">
+    <label class="form-label">Objv Names</label>
+    <input type="text" name="objv_names" class="form-control" value="obj1,obj2"/>
+  </div>
+
+  <div class="col-md-8">
+    <label class="form-label">Objv Exprs</label>
+    <input type="text" name="objv_exprs" class="form-control" value="(y1+y2)/2;y1/2-y2;y2"/>
+  </div>
+
+  <div class="col-md-4">
+    <label class="form-label">Epsilon</label>
+    <input type="number" name="epsilon" class="form-control" value="0.05" step="0.01"/>
+  </div>
+
+  <div class="col-md-4">
+    <label class="form-label">Delta Rel</label>
+    <input type="number" name="delta_rel" class="form-control" value="0.01" step="0.01"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">mrmr_pred</label>
+    <input type="number" name="mrmr_pred" class="form-control" value="0"/>
+  </div>
+
+
+  <div class="col-md-6">
+    <label class="form-label">Additional Command Input</label>
+    <textarea name="additional_command" class="form-control" rows="1" placeholder="Enter additional parameters here..."></textarea>
+  </div>
+
+  <div class="col-md-4">
+    <label class="form-label">Save Model Config?</label>
+    <div class="btn-group w-100" role="group">
+      <input type="radio" class="btn-check" name="save_model_config" id="save_config_yes" value="1" checked>
+      <label class="btn btn-outline-primary" for="save_config_yes">Yes</label>
+
+      <input type="radio" class="btn-check" name="save_model_config" id="save_config_no" value="0">
+      <label class="btn btn-outline-secondary" for="save_config_no">No</label>
+    </div>
+  </div>
+
+  <div class="col-md-4">
+    <label class="form-label">Enable Plots?</label>
+    <div class="btn-group w-100" role="group">
+      <input type="radio" class="btn-check" name="plots" id="plots_yes" value="1" checked>
+      <label class="btn btn-outline-primary" for="plots_yes">Yes</label>
+
+      <input type="radio" class="btn-check" name="plots" id="plots_no" value="0">
+      <label class="btn btn-outline-secondary" for="plots_no">No</label>
+    </div>
+
+
+
+  <div class="col-12 mt-4">
+    <button type="submit" class="btn btn-primary w-100">Run Exploration</button>
+  </div>
+</form>
+{% endblock %}
diff --git a/src/templates/index.html b/src/templates/index.html
new file mode 100644
index 00000000..1958bcc0
--- /dev/null
+++ b/src/templates/index.html
@@ -0,0 +1,14 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="text-center py-5">
+  <h1 class="display-3 fw-bold">Welcome to SMLP Dashboard</h1>
+  <p class="lead text-muted">A powerful web interface for training, predicting, exploring, and DOE with SMLP.</p>
+
+  <div class="mt-5 d-flex justify-content-center gap-3 flex-wrap">
+    <a class="btn btn-lg btn-primary px-4 py-2 shadow-sm" href="{{ url_for('train') }}">Train</a>
+    <a class="btn btn-lg btn-success px-4 py-2 shadow-sm" href="{{ url_for('predict') }}">Predict</a>
+    <a class="btn btn-lg btn-warning px-4 py-2 shadow-sm text-dark" href="{{ url_for('explore') }}">Explore</a>
+    <a class="btn btn-lg btn-info px-4 py-2 shadow-sm text-dark" href="{{ url_for('doe') }}">DOE</a>
+  </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/src/templates/index.html:Zone.Identifier b/src/templates/index.html:Zone.Identifier
new file mode 100644
index 00000000..e69de29b
diff --git a/src/templates/predict.html b/src/templates/predict.html
new file mode 100644
index 00000000..2a88e017
--- /dev/null
+++ b/src/templates/predict.html
@@ -0,0 +1,71 @@
+{% extends "base.html" %}
+{% block content %}
+<h2>Predict with a Trained Model</h2>
+
+<form method="POST" enctype="multipart/form-data" class="row g-3">
+
+  <div class="col-md-6">
+    <label class="form-label">Saved Model File (.pkl, no suffix needed)</label>
+    <input type="file" name="model_file" class="form-control" required />
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">New Data File (.csv, omit suffix in final path)</label>
+    <input type="file" name="new_data_file" class="form-control" required />
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Save Model?</label>
+    <select name="save_model" class="form-select">
+      <option value="f" selected>No</option>
+      <option value="t">Yes</option>
+    </select>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Model Name (-model_name)</label>
+    <input type="text" name="model_name" class="form-control" value="my_model" />
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Output Directory (-out_dir)</label>
+    <input type="text" name="out_dir_val" class="form-control" placeholder="./" />
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Run Prefix (-pref)</label>
+    <input type="text" name="pref_val" class="form-control" placeholder="PredictRun" />
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Log Time (-log_time)</label>
+    <select name="log_time" class="form-select">
+      <option value="f" selected>No</option>
+      <option value="t">Yes</option>
+    </select>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Generate Plots (-plots)</label>
+    <select name="plots" class="form-select">
+      <option value="f" selected>No</option>
+      <option value="t">Yes</option>
+    </select>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Seed (-seed)</label>
+    <input type="text" name="seed_val" class="form-control" placeholder="e.g. 10" />
+  </div>
+
+  <div class="col-md-12">
+    <label class="form-label">Additional Command</label>
+    <input type="text" name="additional_command" class="form-control" placeholder="e.g. -something value" />
+  </div>
+
+  <div class="col-12">
+    <button type="submit" class="btn btn-primary">Predict</button>
+  </div>
+
+</form>
+{% endblock %}
diff --git a/src/templates/results.html b/src/templates/results.html
new file mode 100644
index 00000000..88001476
--- /dev/null
+++ b/src/templates/results.html
@@ -0,0 +1,74 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="container-fluid mt-5">
+  <div class="row g-3 align-items-stretch">
+
+    <div class="col-md-6 col-lg-6 d-flex">
+      <div class="card flex-fill d-flex flex-column shadow-sm bg-body-tertiary" style="height: 700px;">
+        <div class="card-header bg-primary text-bg-primary d-flex justify-content-between align-items-center">
+          <h2 class="card-title mb-0">Results</h2>
+        </div>
+        <div class="collapse show d-flex flex-column flex-grow-1" id="resultsCollapse">
+          <div class="card-body flex-grow-1" style="overflow-y: auto; max-height: 600px;">
+            <pre class="p-3 rounded bg-body-secondary" 
+                 style="font-size: 14px; white-space: pre-wrap;">{{ output }}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-md-6 col-lg-6 d-flex">
+      <div class="card flex-fill d-flex flex-column shadow-sm bg-body-tertiary" style="height: 700px;">
+        <div class="card-header bg-primary text-bg-primary">
+          <h2 class="card-title mb-0">Generated Plots</h2>
+        </div>
+        <div class="card-body flex-grow-1 d-flex justify-content-center align-items-center" 
+             style="overflow-y: auto; max-height: 600px;">
+          {% if plots %}
+            <div class="container">
+              <div class="row row-cols-2 g-2">
+                {% for plot in plots %}
+                  <div class="col text-center">
+                    <a href="{{ url_for('serve_plot', filename=plot) }}" target="_blank">
+                      <img src="{{ url_for('serve_plot', filename=plot) }}" alt="Generated Plot"
+                           class="img-fluid rounded shadow-sm"
+                           style="width: 100%; max-height: 250px; object-fit: contain;">
+                    </a>
+                  </div>
+                {% endfor %}
+              </div>
+            </div>
+          {% else %}
+            <p class="text-center">No plots available.</p>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  {% if use_h5 %}
+  <div class="row mt-4">
+    <div class="col-lg-12">
+      <div class="card shadow-sm bg-body-tertiary">
+        <div class="card-header bg-primary text-bg-primary">
+          <h2 class="card-title mb-0">Model Visualization</h2>
+        </div>
+        <div class="card-body">
+          <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+          <div class="container">
+            {{ h5_plot_html | safe }} 
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endif %}
+
+  <div class="row mt-4">
+    <div class="col-12 text-center">
+      <a href="{{ url_for('home') }}" class="btn btn-secondary btn-lg">Return Home</a>
+    </div>
+  </div>
+
+</div>
+{% endblock %}
diff --git a/src/templates/results.html:Zone.Identifier b/src/templates/results.html:Zone.Identifier
new file mode 100644
index 00000000..e69de29b
diff --git a/src/templates/train.html b/src/templates/train.html
new file mode 100644
index 00000000..c37fe72f
--- /dev/null
+++ b/src/templates/train.html
@@ -0,0 +1,103 @@
+{% extends "base.html" %}
+{% block content %}
+<h2 class="mb-4">Train a Model</h2>
+<form method="POST" enctype="multipart/form-data" class="row g-3">
+
+  <div class="col-md-6">
+    <label for="data_file" class="form-label">Data File (CSV)</label>
+    <input type="file" name="data_file" id="data_file" class="form-control"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Model (-model)</label>
+    <input type="text" name="model" class="form-control" placeholder="e.g. dt_sklearn" />
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Responses (-resp)</label>
+    <input type="text" name="resp" class="form-control" placeholder="e.g. y1,y2"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Features (-feat)</label>
+    <input type="text" name="feat" class="form-control" placeholder="e.g. x1,x2,p1,p2"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Output Directory (-out_dir)</label>
+    <input type="text" name="out_dir_val" class="form-control" value="./results"/>
+  </div>
+
+  <div class="col-md-4">
+    <label class="form-label">Save Model?</label>
+    <div class="btn-group w-100" role="group">
+      <input type="radio" class="btn-check" name="save_model" id="save_model_yes" value="t">
+      <label class="btn btn-outline-primary" for="save_model_yes">Yes</label>
+
+      <input type="radio" class="btn-check" name="save_model" id="save_model_no" value="f" checked>
+      <label class="btn btn-outline-secondary" for="save_model_no">No</label>
+    </div>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Prefix (-pref)</label>
+    <input type="text" name="pref_val" class="form-control" value="TestTrain"/>
+  </div>
+
+
+  <div class="col-md-6">
+    <label class="form-label">mrmr_pred</label>
+    <input type="number" name="mrmr_pred" class="form-control" value="0"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Model Name (-model_name)</label>
+    <input type="text" name="model_name" class="form-control" value="my_model"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Feature Scaling (-scale_feat)</label>
+    <input type="text" name="scale_feat" class="form-control" placeholder="e.g. min_max"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Response Scaling (-scale_resp)</label>
+    <input type="text" name="scale_resp" class="form-control" placeholder="e.g. standard"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">DT Max Depth</label>
+    <input type="number" name="dt_sklearn_max_depth" class="form-control" value="15"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Training Split (-train_split)</label>
+    <input type="text" name="train_split" class="form-control" placeholder="e.g. 0.8"/>
+  </div>
+
+  <div class="col-md-6">
+    <label class="form-label">Random Seed (-seed)</label>
+    <input type="text" name="seed_val" class="form-control" placeholder="e.g. 42"/>
+  </div>
+
+  <div class="col-md-4">
+    <label class="form-label">Enable Plots?</label>
+    <div class="btn-group w-100" role="group">
+      <input type="radio" class="btn-check" name="plots" id="plots_yes" value="1" checked>
+      <label class="btn btn-outline-primary" for="plots_yes">Yes</label>
+
+      <input type="radio" class="btn-check" name="plots" id="plots_no" value="0">
+      <label class="btn btn-outline-secondary" for="plots_no">No</label>
+    </div>
+  </div>
+
+  <div class="col-md-12">
+    <label class="form-label">Additional Command Input</label>
+    <textarea name="additional_command" class="form-control" rows="1" placeholder="Enter additional parameters here..."></textarea>
+  </div>
+
+  <div class="col-12">
+    <button type="submit" class="btn btn-primary w-100">Train</button>
+  </div>
+</form>
+{% endblock %}
diff --git a/src/test_app.py b/src/test_app.py
new file mode 100644
index 00000000..b449ec78
--- /dev/null
+++ b/src/test_app.py
@@ -0,0 +1,226 @@
+import os
+import unittest
+import tempfile
+import subprocess
+from unittest.mock import patch
+from app import app, call_smlp_api
+
+class AppTestCase(unittest.TestCase):
+    def setUp(self):
+        app.config['TESTING'] = True
+        self.client = app.test_client()
+        self.upload_folder = tempfile.mkdtemp()
+        app.config['UPLOAD_FOLDER'] = self.upload_folder
+
+    def tearDown(self):
+        for file in os.listdir(self.upload_folder):
+            os.remove(os.path.join(self.upload_folder, file))
+        os.rmdir(self.upload_folder)
+
+    def test_home(self):
+        response = self.client.get('/')
+        self.assertEqual(response.status_code, 200)
+
+    def test_explore_get(self):
+        response = self.client.get('/explore')
+        self.assertEqual(response.status_code, 200)
+
+    def test_explore_invalid_mode(self):
+        response = self.client.post('/explore', data={'explore_mode': 'invalid_mode'})
+        self.assertEqual(response.status_code, 400)
+        self.assertIn(b"Error: Invalid mode selected", response.data)
+
+    def test_explore_missing_files(self):
+        response = self.client.post('/explore', data={'explore_mode': 'certify'})
+        self.assertEqual(response.status_code, 400)
+        self.assertIn(b"Error: Missing required dataset or spec file", response.data)
+
+    def test_explore_full_form_submission(self):
+        data_file_path = os.path.join(self.upload_folder, "data.csv")
+        spec_file_path = os.path.join(self.upload_folder, "spec.txt")
+
+        with open(data_file_path, 'w') as f:
+            f.write("sample,data,content")
+        with open(spec_file_path, 'w') as f:
+            f.write('''{
+        "version": "1.2",
+        "spec": {
+            "targets": ["y1"],
+            "constraints": []
+        }
+    }''')
+        with self.client.session_transaction() as session:
+            output = session.get('output', '')
+            self.assertNotIn('Exception', output)
+            self.assertNotIn('Traceback', output)
+
+        with open(data_file_path, 'rb') as data_file, open(spec_file_path, 'rb') as spec_file:
+            response = self.client.post('/explore', data={
+                'explore_mode': 'optimize',
+                'data_file': (data_file, 'data.csv'),
+                'spec_file': (spec_file, 'spec.txt'),
+                'out_dir_val': './results',
+                'pref_val': 'Test113',
+                'pareto': 't',
+                'resp': 'y',
+                'feat': 'x1,x2',
+                'model_expr': 'dt',
+                'dt_sklearn_max_depth': '5',
+                'mrmr_pred': '5',
+                'epsilon': '0.01',
+                'delta_rel': '0.05',
+                'save_model_config': 'yes',
+                'plots': 'yes',
+                'log_time': 'yes',
+                'seed_val': '42',
+                'objv_names': 'objv1,objv2',
+                'objv_exprs': 'y1>7 and y2<3',
+                'additional_command': '-seed 10'
+            }, content_type='multipart/form-data')
+
+        self.assertEqual(response.status_code, 302)
+        self.assertTrue(response.headers['Location'].endswith('/results'))
+
+    def test_train_missing_file(self):
+        response = self.client.post('/train', data={})
+        self.assertEqual(response.status_code, 400)
+        self.assertIn(b"Error: Missing required dataset or spec file", response.data)
+
+    def test_train_valid_submission(self):
+        data_file_path = os.path.join(self.upload_folder, "data.csv")
+        with open(data_file_path, 'w') as f:
+            f.write("sample,data,content")
+
+        with open(data_file_path, 'rb') as data_file:
+            response = self.client.post('/train', data={
+                'data_file': (data_file, 'data.csv'),
+                'out_dir_val': './results'
+            }, content_type='multipart/form-data')
+
+        self.assertEqual(response.status_code, 302)
+        self.assertTrue(response.headers['Location'].endswith('/results'))
+
+    def test_call_smlp_api(self):
+        result = call_smlp_api(['echo', 'hello'])
+        self.assertEqual(result.strip(), 'hello')
+
+    def test_results_route(self):
+        plot_dir = os.path.abspath("../regr_smlp/code/images/results")
+        os.makedirs(plot_dir, exist_ok=True)
+        plot_path = os.path.join(plot_dir, "dummy_plot.png")
+        with open(plot_path, 'wb') as f:
+            f.write(b'\x89PNG\r\n\x1a\n')
+
+        with self.client.session_transaction() as sess:
+            sess['output'] = 'Test output message'
+            sess['use_h5'] = False
+
+        response = self.client.get('/results')
+        self.assertEqual(response.status_code, 200)
+        self.assertIn(b'Test output message', response.data)
+        self.assertIn(b'dummy_plot.png', response.data)
+
+        os.remove(plot_path)
+
+    def test_serve_plot_route(self):
+        plot_dir = os.path.abspath("../regr_smlp/code/images/results")
+        os.makedirs(plot_dir, exist_ok=True)
+        filename = "test_image.png"
+        filepath = os.path.join(plot_dir, filename)
+
+        with open(filepath, 'wb') as f:
+            f.write(b'\x89PNG\r\n\x1a\n')
+
+        with open(filepath, 'rb') as f:
+            response = self.client.get(f'/plots/{filename}')
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.content_type, 'image/png')
+
+        os.remove(filepath)
+
+    @patch('app.get_h5_plot')
+    def test_results_route_with_h5(self, mock_get_h5_plot):
+        mock_get_h5_plot.return_value = "<div>Mock H5 Plot</div>"
+
+        with self.client.session_transaction() as sess:
+            sess['output'] = 'Output with H5'
+            sess['use_h5'] = True
+
+        response = self.client.get('/results')
+        self.assertEqual(response.status_code, 200)
+        self.assertIn(b'Output with H5', response.data)
+        self.assertIn(b'Mock H5 Plot', response.data)
+
+    def test_clear_old_plots(self):
+        from app import clear_old_plots, PLOT_SAVE_DIR
+        os.makedirs(PLOT_SAVE_DIR, exist_ok=True)
+        dummy_plot = os.path.join(PLOT_SAVE_DIR, 'dummy.png')
+        with open(dummy_plot, 'wb') as f:
+            f.write(b'\x89PNG\r\n\x1a\n')
+
+        self.assertTrue(os.path.exists(dummy_plot))
+        clear_old_plots()
+        self.assertFalse(os.path.exists(dummy_plot))
+
+    def test_doe_missing_file(self):
+        response = self.client.post('/doe', data={})
+        self.assertEqual(response.status_code, 400)
+        self.assertIn(b"Error: Missing DOE spec file", response.data)
+
+    def test_doe_valid_submission(self):
+        doe_file_path = os.path.join(self.upload_folder, "doe_spec.json")
+        with open(doe_file_path, 'w') as f:
+            f.write('''{
+                "version": "1.2",
+                "spec": {
+                    "design": "lhs",
+                    "samples": 10
+                }
+            }''')
+
+        with open(doe_file_path, 'rb') as doe_file:
+            response = self.client.post('/doe', data={
+                'doe_spec_file': (doe_file, 'doe_spec.json'),
+                'out_dir_val': './results',
+                'pref_val': 'TestDOE',
+                'doe_algo': 'lhs',
+                'log_time': 'yes',
+                'additional_command': '-seed 999'
+            }, content_type='multipart/form-data')
+
+        self.assertEqual(response.status_code, 302)
+        self.assertTrue(response.headers['Location'].endswith('/results'))
+
+    def test_predict_missing_files(self):
+        response = self.client.post('/predict', data={})
+        self.assertEqual(response.status_code, 400)
+        self.assertIn(b"Error: Both model file and new data file are required", response.data)
+
+    def test_predict_valid_submission(self):
+        model_file_path = os.path.join(self.upload_folder, "model.h5")
+        new_data_file_path = os.path.join(self.upload_folder, "new_data.csv")
+
+        with open(model_file_path, 'w') as f:
+            f.write("mock model content")
+        with open(new_data_file_path, 'w') as f:
+            f.write("mock,new,data")
+
+        with open(model_file_path, 'rb') as model_file, open(new_data_file_path, 'rb') as new_data_file:
+            response = self.client.post('/predict', data={
+                'model_file': (model_file, 'model.h5'),
+                'new_data_file': (new_data_file, 'new_data.csv'),
+                'out_dir_val': './results',
+                'pref_val': 'PredictRun',
+                'log_time': 'yes',
+                'plots': 'yes',
+                'save_model': 't',
+                'model_name': 'my_model',
+                'seed_val': '123',
+                'additional_command': '-seed 999'
+            }, content_type='multipart/form-data')
+
+        self.assertEqual(response.status_code, 302)
+        self.assertTrue(response.headers['Location'].endswith('/results'))
+
+if __name__ == '__main__':
+    unittest.main()
diff --git a/src/test_visual.py b/src/test_visual.py
new file mode 100644
index 00000000..d1327085
--- /dev/null
+++ b/src/test_visual.py
@@ -0,0 +1,102 @@
+import os
+import unittest
+import tempfile
+import numpy as np
+import pandas as pd
+from unittest.mock import patch, MagicMock
+
+from visualize_h5 import (
+    get_latest_file,
+    get_latest_h5_file,
+    get_latest_training_csv,
+    get_feature_estimates,
+    load_model_and_generate_predictions,
+    get_h5_plot,
+    H5_DIRECTORY,
+    CSV_DIRECTORY
+)
+
+class TestVisualizeH5(unittest.TestCase):
+    def setUp(self):
+        self.test_dir = tempfile.mkdtemp()
+
+    def tearDown(self):
+        for f in os.listdir(self.test_dir):
+            os.remove(os.path.join(self.test_dir, f))
+        os.rmdir(self.test_dir)
+
+    def test_get_latest_file_returns_none_if_no_files(self):
+        result = get_latest_file(self.test_dir, '*.csv')
+        self.assertIsNone(result)
+
+    def test_get_latest_file_returns_latest(self):
+        file1 = os.path.join(self.test_dir, 'file1.csv')
+        file2 = os.path.join(self.test_dir, 'file2.csv')
+        with open(file1, 'w') as f:
+            f.write('test1')
+        with open(file2, 'w') as f:
+            f.write('test2')
+        os.utime(file1, (1, 1))
+        os.utime(file2, (2, 2))
+
+        result = get_latest_file(self.test_dir, '*.csv')
+        self.assertEqual(result, file2)
+
+    @patch('visualize_h5.get_latest_file')
+    def test_get_latest_h5_file(self, mock_get):
+        mock_get.return_value = '/path/to/latest.h5'
+        self.assertEqual(get_latest_h5_file(), '/path/to/latest.h5')
+
+    @patch('visualize_h5.get_latest_file')
+    def test_get_latest_training_csv(self, mock_get):
+        mock_get.return_value = '/path/to/latest.csv'
+        self.assertEqual(get_latest_training_csv(), '/path/to/latest.csv')
+
+    @patch('visualize_h5.get_latest_training_csv')
+    def test_get_feature_estimates_returns_means(self, mock_csv):
+        df = pd.DataFrame({"y1": [1, 2, 3], "y2": [4, 5, 6]})
+        temp_csv = os.path.join(self.test_dir, 'test.csv')
+        df.to_csv(temp_csv, index=False)
+        mock_csv.return_value = temp_csv
+
+        y1, y2 = get_feature_estimates()
+        self.assertEqual(y1, 2.0)
+        self.assertEqual(y2, 5.0)
+
+    @patch('visualize_h5.tf.keras.models.load_model')
+    @patch('visualize_h5.get_latest_h5_file')
+    @patch('visualize_h5.get_feature_estimates')
+    def test_load_model_and_generate_predictions(self, mock_est, mock_h5, mock_load):
+        mock_h5.return_value = '/mock/model.h5'
+        mock_est.return_value = (5.0, 5.0)
+
+        dummy_model = MagicMock()
+        dummy_model.predict.return_value = np.random.rand(900, 1)
+        mock_load.return_value = dummy_model
+
+        y1, y2, z = load_model_and_generate_predictions()
+        self.assertIsNotNone(y1)
+        self.assertIsNotNone(y2)
+        self.assertIsNotNone(z)
+        self.assertEqual(y1.shape, y2.shape)
+        self.assertEqual(y1.shape, z.shape)
+
+    @patch('visualize_h5.load_model_and_generate_predictions')
+    def test_get_h5_plot_returns_html(self, mock_load):
+        y1 = y2 = np.linspace(0, 1, 10)
+        Y1, Y2 = np.meshgrid(y1, y2)
+        Z = np.random.rand(10, 10)
+        mock_load.return_value = (Y1, Y2, Z)
+
+        html = get_h5_plot()
+        self.assertIn('<div', html)
+        self.assertIn('Model Prediction', html)
+
+    @patch('visualize_h5.load_model_and_generate_predictions')
+    def test_get_h5_plot_handles_failure(self, mock_load):
+        mock_load.return_value = (None, None, None)
+        result = get_h5_plot()
+        self.assertIn('Error', result)
+
+if __name__ == '__main__':
+    unittest.main()
\ No newline at end of file
diff --git a/src/visualize_h5.py b/src/visualize_h5.py
new file mode 100644
index 00000000..12805cc7
--- /dev/null
+++ b/src/visualize_h5.py
@@ -0,0 +1,110 @@
+import os
+import glob
+import numpy as np
+import pandas as pd
+import plotly.graph_objs as go
+import plotly.io as pio
+import tensorflow as tf  
+from flask import Blueprint
+
+h5_visualization_route = Blueprint('h5_visualization', __name__)
+
+H5_DIRECTORY = os.path.abspath("../regr_smlp/code/results/")  
+CSV_DIRECTORY = os.path.abspath("../regr_smlp/code/results/")  
+
+def get_latest_file(directory, file_pattern):
+    """Find the most recently created file in a directory that matches a pattern."""
+    files = glob.glob(os.path.join(directory, file_pattern))  
+
+    if not files:
+        print(f"⚠ No {file_pattern} files found in:", directory)
+        return None  
+
+    latest_file = max(files, key=os.path.getctime)  
+    print(f"✅ Latest {file_pattern} file:", latest_file)  
+    return latest_file
+
+def get_latest_h5_file():
+    """Get the latest H5 model file."""
+    return get_latest_file(H5_DIRECTORY, "*e.h5")
+
+def get_latest_training_csv():
+    """Get the latest training CSV file."""
+    return get_latest_file(CSV_DIRECTORY, "*_training_predictions_summary.csv")
+
+def get_feature_estimates():
+    """Compute mean values for y1 and y2 from the latest training CSV."""
+    csv_file = get_latest_training_csv()
+    if not csv_file:
+        return 0, 0 
+
+    try:
+        df = pd.read_csv(csv_file)
+        y1_mean = df['y1'].mean()
+        y2_mean = df['y2'].mean()
+        print(f"📌 Estimated Feature 1 (y1) = {y1_mean}")
+        print(f"📌 Estimated Feature 2 (y2) = {y2_mean}")
+        return y1_mean, y2_mean
+    except Exception as e:
+        print(f"⚠ Error reading CSV file: {str(e)}")
+        return 0, 0 
+    
+
+def load_model_and_generate_predictions():
+    """Load the Keras model and generate predictions using y1, y2 as inputs."""
+    h5_file = get_latest_h5_file()
+    
+    if not h5_file:
+        return None, None, None  
+
+    try:
+        model = tf.keras.models.load_model(h5_file)
+        print("✅ Model loaded successfully.")
+        print(model.summary()) 
+
+        y1_range = np.linspace(0, 12, 30) 
+        y2_range = np.linspace(0, 10, 30)  
+        Y1, Y2 = np.meshgrid(y1_range, y2_range)  
+
+        f3, f4 = get_feature_estimates()
+
+        feature3 = np.full_like(Y1.ravel(), f3)
+        feature4 = np.full_like(Y2.ravel(), f4)
+        inputs = np.c_[Y1.ravel(), Y2.ravel(), feature3, feature4]  
+
+        predictions = model.predict(inputs)
+
+        print(f"📌 Model Prediction Shape: {predictions.shape}")
+
+        if predictions.shape[1] > 1:
+            predictions = predictions[:, 0]  
+
+
+        Z = predictions.reshape(Y1.shape)  
+        return Y1, Y2, Z
+    except Exception as e:
+        print(f"❌ Error loading model or generating predictions: {str(e)}")
+        return None, None, None 
+
+def get_h5_plot():
+    """Generate an interactive 3D surface plot from the model predictions."""
+    y1, y2, z = load_model_and_generate_predictions()
+
+    if y1 is None or y2 is None or z is None:
+        return "<p style='color:red;'>⚠ Error: No valid model output found.</p>"
+
+    pio.renderers.default = 'browser' 
+
+    fig = go.Figure()
+
+    fig.add_trace(go.Surface(
+        x=y1, y=y2, z=z
+    ))
+
+    fig.update_layout(
+        title="Interactive 3D Model Output",
+        scene=dict(xaxis_title="y1", yaxis_title="y2", zaxis_title="Model Prediction (Z)"),
+        margin=dict(l=0, r=0, b=0, t=40)
+    )
+
+    return pio.to_html(fig, full_html=False)