diff --git a/.gitignore b/.gitignore
index 8bc348e68bc9a9ad44b0cbe1f39f04660966b818..6f6b0c69f7a7b59bfb163805c2d9dab451c28817 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 venv/
-__pycache__
\ No newline at end of file
+__pycache__
+.vscode/
\ No newline at end of file
diff --git a/front_end/dpath.py b/front_end/dpath.py
index 3c55fb95822a326c4363d1aade0b6d7b70d99301..f546048b2975c80ab19cc5cb2443fab1f79d1982 100644
--- a/front_end/dpath.py
+++ b/front_end/dpath.py
@@ -1,6 +1,4 @@
-from flask import Flask, render_template, url_for, flash, redirect
-from flask import jsonify
-from flask import request
+from flask import Flask, render_template, url_for, flash, redirect, request
 import requests
 import urllib.request
 import os
@@ -10,20 +8,37 @@ from werkzeug.utils import secure_filename
 app = Flask(__name__)
 
 UPLOAD_FOLDER = 'static/uploads/'
- 
+REPORTS_SERVICE_URL = 'http://127.0.0.1:5000'
+
 app.secret_key = "secret key"
 app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
-app.config['MAX_CONTENT_LENGTH'] = 1024 * 1024 * 1000 * 20 # 20 GB
+app.config['MAX_CONTENT_LENGTH'] = 1024 * 1024 * 1000 * 20  # 20 GB
 
 ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif', 'tif'])
- 
+BASE_URL = 'dpath'
+
+
 def allowed_file(filename):
     return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
 
-@app.route('/')
+
+@app.route(f'/{BASE_URL}/')
 def home():
     return render_template('home.html')
 
+
+@app.route(f'/{BASE_URL}/term2')
+def term2():
+    reports = requests.get(f'{REPORTS_SERVICE_URL}/dpath/report').json()
+    return render_template('2ndTerm.html', reports=reports)
+
+
+@app.route(f'/{BASE_URL}/reports')
+def reports():
+    reports = requests.get(f'{REPORTS_SERVICE_URL}/dpath/report').json()
+    return render_template('reports.html', reports=reports)
+
+
 @app.route('/', methods=['GET', "POST"])
 def upload_image():
     if 'file' not in request.files:
@@ -36,14 +51,19 @@ def upload_image():
     if file and allowed_file(file.filename):
         filename = secure_filename(file.filename)
         file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
-        #print('upload_image filename: ' + filename)
+        # print('upload_image filename: ' + filename)
         flash('Image successfully uploaded.')
         return render_template('home.html', filename=filename)
     else:
         flash('Allowed image types are - png, jpg, jpeg, gif, tif')
         return redirect(request.url)
 
+
 @app.route('/display/<filename>')
 def display_image(filename):
-    #print('display_image filename: ' + filename)
-    return redirect(url_for('static', filename='uploads/' + filename), code=301)
\ No newline at end of file
+    # print('display_image filename: ' + filename)
+    return redirect(url_for('static', filename='uploads/' + filename), code=301)
+
+
+if __name__ == "__main__":
+    app.run(debug=True)
\ No newline at end of file
diff --git a/front_end/static/styles/style.css b/front_end/static/styles/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..5bc2f3b2c2a8ea0a247f0e569b0dc31717e6c002
--- /dev/null
+++ b/front_end/static/styles/style.css
@@ -0,0 +1,35 @@
+body {
+    width: 100%;
+}
+
+.container {
+    width: 100%;
+    text-align: center;
+}
+
+.report-table {
+    width: 90%;
+    padding: 20px;
+}
+
+th {
+    padding: 5px;
+    background-color: lightskyblue;
+}
+
+tr:hover {
+    background-color: lightgray;
+}
+
+td {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.left {
+    text-align: left;
+}
+
+.right {
+    text-align: right;
+}
\ No newline at end of file
diff --git a/front_end/static/uploads/reportImage1244.png b/front_end/static/uploads/reportImage1244.png
new file mode 100644
index 0000000000000000000000000000000000000000..767b3c6c258dc7dfbe74cef128a5cd22174e88a9
Binary files /dev/null and b/front_end/static/uploads/reportImage1244.png differ
diff --git a/front_end/templates/2ndTerm.html b/front_end/templates/2ndTerm.html
index a84c5e75919a9ee933021ffb113234eda6e8f67d..5c963d75c2d8b7d31289d3a7b9827e8d2c49b6f3 100644
--- a/front_end/templates/2ndTerm.html
+++ b/front_end/templates/2ndTerm.html
@@ -1,27 +1,38 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Slide Analyzer</title>
+    {% include 'includes/stylesload.html' %}
+</head>
+
+{% include 'includes/navbar.html' %}
 
 <div class="progress w-50">
-    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
+  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
+    aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
   </div>
+</div>
 
-  {% if filename %}
-      <div>
-          <img src="{{ url_for('display_image', filename=filename) }}">
-      </div>
-  {% endif %}
+{% if filename %}
+<div>
+  <img src="{{ url_for('display_image', filename=filename) }}">
+</div>
+{% endif %}
 
 
 
-  <h2>
-    Sample id: c1471950-71a5-11ed-9ddb-1267f16e00ed
-  </h2>
-  <h2>
-    Time of completion: 01/12/2022 18:27:04
-  </h2>
-  <h2>
-    Diagnosis: Severe
-  </h2>
-  <h2>
-        Chip Predictions:
-        Mild: 806
-        Severe: 846
-  </h2>
\ No newline at end of file
+<h2>
+  Sample id: c1471950-71a5-11ed-9ddb-1267f16e00ed
+</h2>
+<h2>
+  Time of completion: 01/12/2022 18:27:04
+</h2>
+<h2>
+  Diagnosis: Severe
+</h2>
+<h2>
+  Chip Predictions:
+  Mild: 806
+  Severe: 846
+</h2>
\ No newline at end of file
diff --git a/front_end/templates/includes/navbar.html b/front_end/templates/includes/navbar.html
new file mode 100644
index 0000000000000000000000000000000000000000..26c03b78ba13c25805be6dea9da533bc998799fe
--- /dev/null
+++ b/front_end/templates/includes/navbar.html
@@ -0,0 +1,11 @@
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <a class="navbar-brand" href="#">Digital Pathology</a>
+    <ul class="navbar-nav mr-auto">
+        <li class="nav-item">
+            <a class="nav-link" href="./reports">Reports</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">New Report</a>
+        </li>
+    </ul>
+</nav>
\ No newline at end of file
diff --git a/front_end/templates/includes/reports.html b/front_end/templates/includes/reports.html
new file mode 100644
index 0000000000000000000000000000000000000000..00d5fbd3bdd0d3245cbd49effe568d927b1bc371
--- /dev/null
+++ b/front_end/templates/includes/reports.html
@@ -0,0 +1,16 @@
+{% block content %}
+<h1>{% block title %} Reports {% endblock %}</h1>
+  <table class="report-table">
+    <th class="left">Id</th>
+    <th class="left">Status</th>
+    <th class="right">Run Date</th>
+    {% for report in reports %}
+    <tr>
+      <td class="left">{{ report.id }}</td>
+      <td class="left">Completed</td>
+      <td class="right">{{ report.report.runDate }}</td>
+    </tr>
+    {% endfor %}
+  </table>
+
+  {% endblock %}
\ No newline at end of file
diff --git a/front_end/templates/includes/stylesload.html b/front_end/templates/includes/stylesload.html
new file mode 100644
index 0000000000000000000000000000000000000000..4356bf723dbd9827bdc0c89e0474a881a961c708
--- /dev/null
+++ b/front_end/templates/includes/stylesload.html
@@ -0,0 +1,5 @@
+{% block content %}
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+<link href="{{ url_for('static', filename='styles/style.css') }}" rel="stylesheet">
+{% endblock %}
\ No newline at end of file
diff --git a/front_end/templates/reports.html b/front_end/templates/reports.html
new file mode 100644
index 0000000000000000000000000000000000000000..b579b6b5d15bc5ede0e53864f887b7130ea004b1
--- /dev/null
+++ b/front_end/templates/reports.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Reports</title>
+    {% include 'includes/stylesload.html' %}
+</head>
+
+<body>
+    {% include 'includes/navbar.html' %}
+    <div class="container">
+        {% include 'includes/reports.html' %}
+    </div>
+</body>
\ No newline at end of file
diff --git a/upload_service/app.py b/upload_service/app.py
index 7f6de1099c918d8e37f4f82cd11f0b9ef9aaaa71..f8db6706b00e3e09d43f0c81e54317373d556a16 100644
--- a/upload_service/app.py
+++ b/upload_service/app.py
@@ -1,8 +1,8 @@
 from flask import Flask
 from flask import jsonify
 from flask import request
-from flask import render_template
-from s3_provider import Provider as provider
+# from s3_provider import Provider
+from test_report_provider import Provider
 from fake_model import LearningModel as Model
 import uuid
 
@@ -18,13 +18,17 @@ VALID_EXTENSIONS = [
 
 PREFIX = 'dpath'
 
-@app.route(f'/{PREFIX}/')
-def home():
-    return render_template('home.html')
-
-@app.route(f'/{PREFIX}/report/<int:report_id>')
+@app.route(f'/{PREFIX}/report/<int:report_id>', methods=['GET'])
 def get_report(report_id) :
-    return jsonify(provider.get_report(report_id))
+	provider = Provider()
+	return jsonify(provider.get_report(report_id))
+
+@app.route(f'/{PREFIX}/report', methods=['GET'])
+def get_reports() :
+	provider = Provider()
+	response = jsonify(provider.get_reports())
+	response.status_code = 200
+	return response
 
 @app.route(f'/{PREFIX}/report/image', methods=['POST'])
 def upload_image():
@@ -32,7 +36,7 @@ def upload_image():
 	if response.status_code == 400:
 		return response
 
-	provider = provider()
+	provider = Provider()
 	id = uuid.uuid1()
 	provider.save_binary(request.files['file'], id)
 	response = jsonify(Model(id).start())
diff --git a/upload_service/test_report_provider.py b/upload_service/test_report_provider.py
index 803a1e35fc47f07ccd77557629592cb3190272e2..a586cf23c9e89370f889d417088226266b66261f 100644
--- a/upload_service/test_report_provider.py
+++ b/upload_service/test_report_provider.py
@@ -1,12 +1,27 @@
 from faker import Faker
+import uuid
+from fake_model import LearningModel
 
 fake = Faker()
 
-def create_report(s3_path):
-    report = {
-        "id": id,
-        "matchRate" : 75.89,
-        "status": "Running",
-        "runDate": fake.date_between(start_date='-30d', end_date='today')
-    }
-    return report   
\ No newline at end of file
+class Provider:
+    def get_reports(self) :
+        i = 0
+        reports = []
+        while(i < 10):
+            reports.append(self.create_report(""))
+            i += 1
+        return reports
+
+    def create_report(self, s3_path):
+        id = uuid.uuid1()
+        report = LearningModel(id).start()
+        return {
+            "id": id,
+            "report": report
+        }
+
+    def get_report(self, id):
+        report = self.create_report("")
+        report.id = id
+        return report
\ No newline at end of file