diff --git a/tools/jsdoc/hifi-jsdoc-template/static/styles/responsive.css b/tools/jsdoc/hifi-jsdoc-template/static/styles/responsive.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/tools/jsdoc/hifi-jsdoc-template/tmpl/layout.tmpl b/tools/jsdoc/hifi-jsdoc-template/tmpl/layout.tmpl
index 7093109ae1..0a06d07459 100644
--- a/tools/jsdoc/hifi-jsdoc-template/tmpl/layout.tmpl
+++ b/tools/jsdoc/hifi-jsdoc-template/tmpl/layout.tmpl
@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <title><?js= title ?></title>
 	
-	<script src="scripts/vue.min.js"></script>
+	<script src="scripts/vue_dev.js"></script>
 	<script src="scripts/vuetify.js"></script>
     
     <script src="scripts/prettify/prettify.js"></script>
@@ -16,6 +16,7 @@
     <link type="text/css" rel="stylesheet" href="styles/prettify.css">
     <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
 	<link type="text/css" rel="stylesheet" href="styles/night.css">
+	<link type="text/css" rel="stylesheet" href="styles/responsive.css">
 	<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
 	<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
 	<link href="styles/materialdesignicons.min.css" rel="stylesheet">
@@ -39,27 +40,39 @@
 			var nightSheet = document.querySelector('[href="styles/night.css"]');
 			nightSheet.disabled = darkDisabled;
 		}
+		
+		var responsiveDisabled = JSON.parse(localStorage.getItem('responsiveDisabled'));
+		if (responsiveDisabled == null) {
+			localStorage.setItem('responsiveDisabled', JSON.stringify(false));
+		} else {
+			var responsiveSheet = document.querySelector('[href="styles/responsive.css"]');
+			responsiveSheet.disabled = responsiveDisabled;
+		}
 	</script>
 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
     <link href="images/fav-icon.ico" rel="shortcut icon">
 </head>
 <body>
-
-<div class="nav-header">
-    <p><a href="https://projectathena.io"><img src="images/project-athena-logo.png" width="214px" /></a></p>
-    <?js if (env.conf.docdash.search) { ?>
-    <input type="text" class="search-input" id="nav-search" placeholder="Search API Docs ..." />
-    <?js } ?>
-    <p><a href="https://docs.projectathena.dev">Looking for <strong>Project Athena</strong><br /> Documentation?</a></p>
-	<div id="app">
-		<v-app dark>
+<v-app dark>
+<div id="app">
+	<div class="nav-header">
+	    <p><a href="https://projectathena.io"><img src="images/project-athena-logo.png" width="214px" /></a></p>
+	    <?js if (env.conf.docdash.search) { ?>
+	    <input type="text" class="search-input" id="nav-search" placeholder="Search API Docs ..." />
+	    <?js } ?>
+	    <p><a href="https://docs.projectathena.dev">Looking for <strong>Project Athena</strong><br /> Documentation?</a></p>
 			<v-btn @click="toggleNightMode" text dark>
 				Toggle
 				<v-icon class="ml-2">mdi-theme-light-dark</v-icon>
 			</v-btn>
-		</v-app>
 	</div>
+
+	<v-btn @click="toggleResponsive" text dark>
+		Toggle
+		<v-icon class="ml-4">mdi-monitor-cellphone</v-icon>
+	</v-btn>
 </div>
+</v-app>
 
 <nav>
     <?js= this.nav ?>
@@ -130,6 +143,14 @@
 								
 				var nightSheet = document.querySelector('[href="styles/night.css"]');
 				nightSheet.disabled = darkDisabled;
+			},
+			toggleResponsive: function() {
+				var responsiveDisabled = JSON.parse(localStorage.getItem('responsiveDisabled'));
+				localStorage.setItem('responsiveDisabled', JSON.stringify(!responsiveDisabled));
+				responsiveDisabled = !responsiveDisabled;
+								
+				var responsiveSheet = document.querySelector('[href="styles/responsive.css"]');
+				responsiveSheet.disabled = responsiveDisabled;
 			}
 		},
 	})
