diff --git a/docs/consolelogo.js b/docs/consolelogo.js
new file mode 100644
index 0000000..095b34b
--- /dev/null
+++ b/docs/consolelogo.js
@@ -0,0 +1,7 @@
+function logLogo(size) {
+    const style =
+        `font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
+    console.log('%c■     ', style);
+    console.log('👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design');
+}
+logLogo(100);
diff --git a/docs/contributors.js b/docs/contributors.js
new file mode 100644
index 0000000..4e6134c
--- /dev/null
+++ b/docs/contributors.js
@@ -0,0 +1,10 @@
+fetch('https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors')
+    .then(response => {
+        if (response.status !== 200) {
+            console.log('Looks like there was a problem. Status Code: ' + response.status);
+            return;
+        }
+        return response.json();
+    })
+    .then(data => document.getElementById('contributors').innerText = data.length)
+    .catch(err => console.log('Fetch Error :-S', err));
diff --git a/docs/index.html b/docs/index.html
index 98c1741..b20a2e3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -14,6 +14,7 @@
   <meta property="og:type" content="website">
   <meta name="keywords" content="microsoft, code, designers">
   <meta property="og:image" content="images/microsoft-og-image.png">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; child-src 'none'; object-src 'none';script-src 'self' 'nonce-dd996fa5cfd98373c5bf';img-src https://c.s-microsoft.com/;connect-src https://api.github.com">
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="theme/theme.css">
   <link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
@@ -84,39 +85,16 @@ <h1>
         <a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
       </span>
     </p>
-    <script>
-      fetch('https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors')
-        .then(response => {
-          if (response.status !== 200) {
-            console.log('Looks like there was a problem. Status Code: ' + response.status);
-            return;
-          }
-          return response.json();
-        })
-        .then(data => document.getElementById('contributors').innerText = data.length)
-        .catch(err => console.log('Fetch Error :-S', err));
-
-    </script>
+  <script src="contributors.js" type="text/javascript"></script>
   </footer>
   <script async src="theme/theme.js"></script>
-  <script>
-    function logLogo(size) {
-      const style =
-        `font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
-      console.log('%c■     ', style);
-      console.log('👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design');
-    }
-
-    logLogo(100);
-
-  </script>
-  <script>
+  <script src="consolelogo.js" type="text/javascript"></script>
+  <script nonce="dd996fa5cfd98373c5bf">
     function markDocumentAsLoaded() {
       setTimeout(function () {
         document.documentElement.dataset.loaded = true
-      }, 1000)
+      }, 1000);
     }
-
     addEventListener('load', markDocumentAsLoaded);
 
   </script>