diff --git a/Frontend/main.py b/Frontend/main.py
index 4e6d910036fa298c47a6766aacc4ee8141279ce0..3534a44e9599f2e48ab920272c4d675670b17889 100644
--- a/Frontend/main.py
+++ b/Frontend/main.py
@@ -1,9 +1,16 @@
+"""
+The main app. This handles both the backend and the frontend side.
+render_template just renders the html from the "template" folder.
+redirect_url redirects towards a certain url, but does NOT render a template if the pointed url also does not.
+
+"""
 from flask import Flask, render_template, url_for, request, redirect, flash
 from datetime import datetime
 from werkzeug.utils import secure_filename
 import os, time, sys
 """
-The following are the import for the backend. Just write the name of the script without .py
+The following are the import for the backend. Just write the name of the script without .py.
+Then you can immediately use the function from the script directly in the app.
 """
 sys.path.append(os.path.join(os.path.dirname(sys.path[0]),'backend'))
 import input
@@ -11,7 +18,7 @@ import input
 #define the app
 app = Flask(__name__)
 
-#the secret key :)
+#the super secret key that allows browser based flashes :)
 app.secret_key = '54321'
 
 #specifies where the upload directory is and the file type available for uploads
@@ -24,13 +31,17 @@ app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
 def index():
     return render_template('index.html')
 
-#the upload functionality. It then redirects to the case labeling page
+"""
+The following is the upload functionality. It uploads directly into the "upload" directory.
+It redirects towards the case ID input page.
+"""
 @app.route('/', methods=['POST'])
 def upload_file():
     uploaded_file = request.files['file']
     if uploaded_file.filename != '':
         uploaded_file.save(os.path.join(app.config['UPLOAD_FOLDER'],uploaded_file.filename))
     elif uploaded_file.filename == '':
+        #if no file has been selected, flashes a warning
         flash('No files selected! Please select a file!')
         return redirect(url_for('index'))
     return redirect(url_for('case'))     
@@ -50,22 +61,35 @@ def signup():
 def case():
     return render_template('case.html')
 
-#eventually to input the case ID, case ID is then sent to backend
+"""
+Route for inputting case ID. For now it redirects towards "recommendation" alongside "id".
+"""
 @app.route('/case.html', methods=['POST'])
 def get_caseid():
     caseid = request.form['caseId']
-    if caseid != '':
-        return redirect(url_for('recommendation',id=caseid))
-    else:
+    if caseid == '':
+        #if no caseID has been inputted, flashes a warning.
         flash('Please input a case ID!')
         return redirect(url_for('case'))
+    elif not caseid.isdigit():
+        #if the input is not an integer, flashes a warning.
+        flash('Please input an integer!')
+        return redirect(url_for('case'))
+    else:
+        #else it will redirect to ../recommendation/id
+        return redirect(url_for('recommendation',id=caseid))
+        
 
 #placeholder result page route. Will eventually be removed and is now defunct.
 @app.route('/result.html')
 def result():
     return render_template('result.html')
 
-#the actual result page route, accepts result from backend but for now it's specifically from input.py
+"""
+The result page. 
+It processes "id" (for now it uses the "foo" function from input.py) using backend functions
+and prints out the result immediately in the page.
+"""
 @app.route('/result.html/<id>', methods=['GET'])
 def recommendation(id):
     res = input.foo(id)
diff --git a/Frontend/templates/base.html b/Frontend/templates/base.html
index 89224a8f9f2f0e4537d7a7df52158828fc97f209..4a3c2bf7e9000a8e3be4a99e2ef9b69c3851b372 100644
--- a/Frontend/templates/base.html
+++ b/Frontend/templates/base.html
@@ -1,3 +1,6 @@
+<!--
+  The base of the website. Includes: Navigation bar, warning flash, and also the head of the site.
+-->
 <!DOCTYPE html>
 <html lang="en">
 <head>
diff --git a/Frontend/templates/case.html b/Frontend/templates/case.html
index 98c2cf3c978b6ee82dcfb5bb3121faecb5203a6a..0ce4ce0403826f87af3f8f0cc0e381482ef33797 100644
--- a/Frontend/templates/case.html
+++ b/Frontend/templates/case.html
@@ -1,3 +1,6 @@
+<!--
+  Here is the case ID input page. Really straightforward as it is just one form and one input.
+-->
 {% extends 'base.html' %}
 
 {%block head%}
@@ -9,7 +12,7 @@
     <h1>Choose the case you want to optimize</h1>
     <form method="post" id="caseid" action="{{ url_for('case')}}">
         <label for="caseId"> Please enter the case ID:</label><br>
-        <input type="text" id="caseId" name="caseId"><br>
+        <input type="text" id="caseId" name="caseId" type="number"><br>
       </form> 
       <button onclick="window.location.href='result.html'" type="submit" class="button" form="caseid" value="casevalue"> Optimize now!</button>
 </div>
diff --git a/Frontend/templates/result.html b/Frontend/templates/result.html
index 1569cc454c71ca91654b53d7552876e0f91e7fa1..a163a4cdc2901e28ef2040abf50208a68975a2d4 100644
--- a/Frontend/templates/result.html
+++ b/Frontend/templates/result.html
@@ -1,3 +1,7 @@
+<!--
+    The result. For now it outputs a placeholder image moyai.jpg.
+    "res" is the result specified by the Flask app. Use that to print out the result in the bracket.
+-->
 {% extends 'base.html' %}
 
 {%block head%}
@@ -8,6 +12,7 @@
 <div style="text-align: center;">
     <h1>Here are the results of the optimization!</h1>
     <h2>We recommend you to do the following activity for this specific case:</h2>
+    <!--res is the result-->
     <h3>Placeholder result: {{ res }}</h3>
     <img src="{{url_for('static',filename='moyai.jpg')}}" alt="Placeholder"> <br>
     <button onclick="window.location.href='/'" class="button"> Optimize your next case NOW!</button>