diff --git a/docFromBrainBox/index.html b/docFromBrainBox/index.html
index 84310f9..77210e8 100644
--- a/docFromBrainBox/index.html
+++ b/docFromBrainBox/index.html
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
-
+<html lang="en">
 <head>
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500" media="all">
+    <meta charset="UTF-8">
+    <title>BrainBox Tutorials</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" media="all">
     <style>
     body {
         margin: 0 auto;
@@ -13,31 +15,26 @@
         padding: 4em 1em;
     }
     #wrapperToc {
-    	position: fixed;
-    	height: 100%;
-    	top: 0px;
-    	left: 3px;
-    	width: 305px;
-    	overflow-y: auto;
+        position: fixed;
+        height: 100%;
+        top: 0px;
+        left: 3px;
+        width: 305px;
+        overflow-y: auto;
     }
     
     #toc {
-    	height: 100%;
-    	padding-top: 40px;
-    	overflow-y: scroll;
-    }
-    
-    .a {
-    	color: #000000;
-    	text-decoration: none;
+        height: 100%;
+        padding-top: 40px;
+        overflow-y: scroll;
     }
     
-    .link {
-    	color: #000000;
-    	text-decoration: none;
+    .a, .link {
+        color: #000000;
+        text-decoration: none;
     }
 
-    h1,h2,strong {
+    h1, h2, strong {
         color: #333;
     }
 
@@ -45,38 +42,42 @@
         margin-top: 1em;
         padding-top: 1em;
     }
-    code,
-    pre {
-      background: #eee;
+
+    code, pre {
+        background: #eee;
     }
 
     code {
-      padding: 2px 4px;
-      vertical-align: text-bottom;
+        padding: 2px 4px;
+        vertical-align: text-bottom;
     }
 
     pre {
-      padding: 1em;
+        padding: 1em;
     }
     </style>
 </head>
 
 <body>
-    <script src="https://cdn.rawgit.com/showdownjs/showdown/1.4.3/dist/showdown.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js"></script>
     <script>
     var req = new XMLHttpRequest();
     req.open('GET', 'brainbox.md');
     req.onreadystatechange = function() {
-        var converter = new showdown.Converter();
-        var text      = this.responseText;
-    
-        showdown.setOption('tables', true);
-        var html      = converter.makeHtml(text);
-        document.body.innerHTML=html;
-    }
+        if (this.readyState === 4) {
+            if (this.status === 200) {
+                var converter = new showdown.Converter();
+                showdown.setOption('tables', true);
+                var html = converter.makeHtml(this.responseText);
+                document.body.innerHTML = html;
+            } else {
+                document.body.innerHTML = "<h2>Error:</h2><p>Unable to load brainbox.md. Please make sure the file exists.</p>";
+                console.error("Failed to load brainbox.md. Status:", this.status);
+            }
+        }
+    };
     req.overrideMimeType("text/plain; charset=UTF-8");
     req.send();
     </script>
 </body>
-
-</html>
\ No newline at end of file
+</html>
