diff --git a/docs/images/tutorial2/browser.png b/docs/images/tutorial2/browser.png
new file mode 100644
index 0000000..b35afaa
Binary files /dev/null and b/docs/images/tutorial2/browser.png differ
diff --git a/docs/images/tutorial2/browser_image2.png b/docs/images/tutorial2/browser_image2.png
new file mode 100644
index 0000000..82ab42e
Binary files /dev/null and b/docs/images/tutorial2/browser_image2.png differ
diff --git a/docs/images/tutorial2/browser_image_3.png b/docs/images/tutorial2/browser_image_3.png
new file mode 100644
index 0000000..6e94a6c
Binary files /dev/null and b/docs/images/tutorial2/browser_image_3.png differ
diff --git a/docs/images/tutorial2/enhancement.png b/docs/images/tutorial2/enhancement.png
new file mode 100644
index 0000000..ea830bd
Binary files /dev/null and b/docs/images/tutorial2/enhancement.png differ
diff --git a/docs/images/tutorial2/open_browser.png b/docs/images/tutorial2/open_browser.png
new file mode 100644
index 0000000..a8ba3ba
Binary files /dev/null and b/docs/images/tutorial2/open_browser.png differ
diff --git a/docs/tutorial2.md b/docs/tutorial2.md
index a795931..59264ca 100644
--- a/docs/tutorial2.md
+++ b/docs/tutorial2.md
@@ -263,3 +263,150 @@ You should see this output on the console.
Get content_id from data
c6eac34b-9bdc-4ba1-81af-29470fdead79
```
+
+## HTML File
+
+Now that we have the `contentId` and the viewer `token`, we
+can now create the HTML file that will hold the browser.
+
+In a new index.html file, put the following code:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Connect `server.py` and `index.html`
+
+We just need to connect the backend `server.py` file
+with the frontend `index.html` file. To connect
+the files, we will use Flask.
+
+`pip install Flask`
+
+In the `server.py` file, import the Flask packages.
+
+`from flask import Flask, render_template`
+
+Specify how to start Flask and let the application know
+that the `index.html` file is in the same folder as the `server.py`
+file.
+
+Below the section where you specified `CLIENT_SECRET`.
+
+```python
+app = Flask(__name__)
+app.template_folder = "."
+```
+
+### route to `index.html`
+
+At the bottom of your file, add the route to `index.html`
+
+```python
+@app.route("/")
+def index():
+ print(f"contentId: {content_id}")
+ return render_template("index.html", token=token, contentId=content_id)
+```
+
+### start flask server
+
+At the bottom of `server.py`, add this:
+
+```python
+app.run(port=3000, debug=True)
+print("Open browser at http://localhost:3000 or http://127.0.0.1:3000")
+```
+
+## run application
+
+`python server.py`
+
+
+
+
+
+Congratulations! You have now configured the RICOH360 Viewer.
+
+Please see the other tutorials for customization of the browser
+and connection with the powerful RICOH360 Cloud APIs.
+
+## bonus challenges
+
+### change image
+
+First, load multiple images into your RICOH360 Cloud account.
+
+In `server.py` file, change the number of images you get from the
+RICOH360 Cloud server from 1 to 5.
+
+```python
+content_response = requests.get(
+ "https://api.ricoh360.com/contents?limit=5", headers=content_headers
+)
+```
+
+When you get the `content_id`, change the index of the content from 0 to 1.
+
+```python
+content_id = content_data[1]["content_id"]
+```
+
+reload browser.
+
+You should see the next image.
+
+
+
+Change the index to 2.
+
+```python
+content_id = content_data[2]["content_id"]
+```
+
+Reload the browser to see the next image.
+
+
+
+### enhance image
+
+In `index.html`, apply `transform: 'enhancement'` below
+the contentId.
+
+```javascript
+viewer.start({
+ contentId: "{{contentId}}",
+ transform: 'enhancement'
+});
+```
+
+The image is now enhanced.
+
+