diff --git a/src/SUMMARY.md b/src/SUMMARY.md
index 1737200..f01f768 100644
--- a/src/SUMMARY.md
+++ b/src/SUMMARY.md
@@ -14,4 +14,8 @@
- [Video Component](./chapter1/web-components/video.md)
- [References Component](./chapter1/web-components/references.md)
- [Pushing the changes you made to Github](./chapter1/push-to-github.md)
-- [Optional enhancement]()
+- [Chapter 2: Optional enhancement](./chapter2/index.md)
+ - [Make your report into multiple pages](./chapter2/pages.md)
+ - [Working with Chart.js](./chapter2/chart.md)
+ - [Working with Mermaid.js](./chapter2/diagram.md)
+ - [Working with 3D Render](./chapter2/3d-render.md)
diff --git a/src/chapter2/3d-render.md b/src/chapter2/3d-render.md
new file mode 100644
index 0000000..45b3a96
--- /dev/null
+++ b/src/chapter2/3d-render.md
@@ -0,0 +1,76 @@
+# Working with 3D Render
+
+To render 3D object such as your CAD in the format of `.stl` file, we will use the [Three.js](https://threejs.org/) library. It is a very cool library that allows you to do mind-blowing graphic stuff in the browser. However, it is very out-of-scope for our purpose, so we have helped written a component script so you can just simply use it with minimal configuration to display your `.stl` file.
+
+To use the 3D render component, we need to import the following into our `index.html` file.
+
+```html
+
+ ...
+
+
+
+
+ ...
+
+
+
+```
+
+It is a bit more complicated than other module because of the `three.js` library. It is important that you make sure the import is in the order above for `three.js` to work properly. Don't forget the `type="module"` when importing the `render.js` file as it is necessary for the script to work properly.
+
+To use the component, you just simply have to create a `
` with the `id` value that you want:
+
+```html
+
+```
+
+Then, in the `render.js` file call the `createRender` function accordingly as shown.
+
+```js
+createRender(
+ "render1",
+ 400,
+ [0, -1, 0],
+ [0.05, 0.05, 0.05],
+ [-Math.PI / 2, 0, 0],
+ false,
+ "../assets/benchy.stl",
+);
+```
+
+It will render your `.stl` file in the specified `
`.
+
+Now, let take a loot at what each of the arguments means, and how you can use them:
+
+```js
+function createRender(
+ id,
+ height,
+ position,
+ scale,
+ rotation,
+ enableAxes,
+ stlFilePath,
+) {
+```
+
+- `id`: is the id you gave to the `div` element that you want to render your `.stl` to.
+- `height`: is the height in pixel of the view box of your object. You can adjust the width by modifying the `div` width directly
+- `position`: the position of your object in 3D space, in the following order [x , y , z]
+- `scale`: same as position but for scaling, you will have to experiment to see what scale would work for you as some stl can be very big, and some can be very small.
+- `rotation`: same as position and scale, but for the rotation angle of your object. It uses Euler angle. As a rule of thumb you should use `Math.PI / 2` as trial value because it equals to a rotation of 90 degree.
+- `enableAxes`: whether you want to enable the X Y Z axis for debugging purposes or not.
+- `stlFilePath`: this is the path to your `.stl` file. Do note that Github has file size limitations to what you can upload there, so if your CAD is just too big in memory size, maybe it would be better if you upload it to some other storage method such as Google Drive or Dropbox and then provide the url to that `stl` file here. Otherwise, just put your `stl` file into the `assets` folder, and write the correct path to that `stl` file here.
+
+Rendering 3D can be quite intensive on some more underpowered devices, so try to only use this component to show things that would highlight your effort instead of dumping every single CAD that you have here. Because remember, the user would need to download all of you CAD before they can view them, so it doesn't make sense to make user download 1GB worth of CAD to view it for only 5 seconds.
+
+In another word, use this component prudently and responsibly.
diff --git a/src/chapter2/chart.md b/src/chapter2/chart.md
new file mode 100644
index 0000000..9823c36
--- /dev/null
+++ b/src/chapter2/chart.md
@@ -0,0 +1,254 @@
+# Working with Chart.js
+
+To make the process of creating chart simple and streamline, we will utilize [Chart.js](https://www.chartjs.org/docs/latest/) library. If you open up the `index.html` in the `chart` folder. You should see the following:
+
+```html
+
+
+
+
+ .....
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Back
+
+
1. Pie and Doughnut Chart
+
+
+
+
+
+
+
+
+
+
+
2. Bar Chart
+
+
+
+
+
+
3. Line Chart
+
+
+
+
+
+
4. Scatter Chart
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+We import the `Chart.js` library by simply adding the following line:
+
+```html
+
+```
+
+Now, we will create elements where we will draw the chart using Javascript later. To do that we use the following syntax:
+
+```html
+
+
+```
+
+This is because Javascript cannot grab an element if it has not been initialized yet. As we will see in the subsequent code in `chart.js`, it needs to know that `pie-chart` exist, before it can grab that elements, so we cannot declare the import before the declaration of the elements. In general, people tend to import Javascript code at the bottom of the body for this reason, but for organisation purpose, we would like to put thing related together closer to each other unless we have no other choice.
+
+Now open up the `chart.js` file. Take this sample code:
+
+```js
+const PieCtx = document.getElementById("pie-chart");
+const DoughnutCtx = document.getElementById("doughnut-chart");
+
+const PieData = {
+ labels: ["Red", "Blue", "Yellow"],
+ datasets: [
+ {
+ label: "My First Dataset",
+ data: [300, 50, 100],
+ backgroundColor: [
+ "rgb(255, 99, 132)",
+ "rgb(54, 162, 235)",
+ "rgb(255, 205, 86)",
+ ],
+ hoverOffset: 4,
+ },
+ ],
+};
+
+new Chart(PieCtx, {
+ type: "pie",
+ data: PieData,
+});
+
+new Chart(DoughnutCtx, {
+ type: "doughnut",
+ data: PieData,
+});
+```
+
+The `PieCtx` constant holds the container which is the `