diff --git a/demo/anonymous.html b/demo/anonymous.html
index 3c702cced..ee1d5a894 100644
--- a/demo/anonymous.html
+++ b/demo/anonymous.html
@@ -9,47 +9,65 @@
     <meta name="author" content="JC Brand" />
     <meta name="keywords" content="xmpp chat webchat converse.js" />
     <link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="/css/bootstrap.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="/css/theme.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/font-awesome.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/website.min.css" />
     <script type="text/javascript" src="../analytics.js"></script>
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
-    <![if gte IE 11]>
-        <link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" />
-        <script src="/dist/converse.min.js"></script>
+    <![if gt IE 11]>
+        <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/converse.min.css" />
+        <script src="https://cdn.conversejs.org/4.2.0/dist/converse.min.js"></script>
     <![endif]>
 </head>
 
-<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
-    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
-        <div class="container">
-            <div class="navbar-header page-scroll">
-                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
-                    <i class="fa fa-bars"></i>
-                </button>
-            </div>
-            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
-                <ul class="nav navbar-nav"><li> <a href="/docs/html/index.html">Documentation</a> </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
+<body>
+<section class="section-wrapper">
+	<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
+		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+			<span class="page-scroll">
+				<a class="navbar-brand" href="/"><span class="converse-brand-heading">Home</span></a>
+				<a class="navbar-brand" href="/demo"><span class="converse-brand-heading">Demos</span></a>
+			</span>
+		</div>
+	</nav>
 
-    <section class="intro">
-        <div class="intro-body">
-            <div class="container">
-                <div class="row">
-                    <div class="col-md-8 col-md-offset-2">
-                        <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse</h1>
-                        <p class="intro-text">Anonymous login demo</p>
-                    </div>
-                </div>
+    <section id="intro" class="intro" class="container">
+        <div class="row">
+            <div class="col-md-12 col-md-offset-2">
+                <h1 class="brand-heading fade-in">
+                    <svg class="converse-svg-logo"
+                        xmlns:svg="http://www.w3.org/2000/svg"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        viewBox="0 0 364 364">
+                    <title>Home</title>
+                    <g class="cls-1" id="g904">
+                        <g data-name="Layer 2">
+                            <g data-name="Layer 7">
+                                <path
+                                    class="cls-3"
+                                    d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />
+                                <path
+                                    class="cls-4"
+                                    d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />
+                            </g>
+                        </g>
+                    </g>
+                </svg>
+                <span class="brand-heading__text">
+                    <span>converse<span class="subdued">.js</span></span>
+                    <p class="byline">messaging freedom</p>
+                </span>
+                </h1>
+
+                <p class="intro-text">Anonymous login demo</p>
             </div>
         </div>
     </section>
+</section>
 </body>
 
 <script>
-    /* 
+    /*
     @licstart
     This is free and unencumbered software released into the public domain.
 
diff --git a/demo/embedded.html b/demo/embedded.html
index 99095527a..93271ef81 100644
--- a/demo/embedded.html
+++ b/demo/embedded.html
@@ -11,14 +11,12 @@
     <link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/>
     <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/font-awesome.min.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/website.min.css" />
-    <script type="text/javascript" src="/src/website.js"></script>
     <script type="text/javascript" src="/analytics.js"></script>
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
     <![if gte IE 11]>
         <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/converse.min.css" />
         <script src="https://cdn.conversejs.org/4.2.0/dist/converse.min.js"></script>
     <![endif]>
-
     <style>
         .converse-container {
             height: 55vh;
@@ -27,50 +25,47 @@
 </head>
 
 <body id="page-top" data-spy="scroll">
-	<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
-		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
-			<span class="navbar-toggler-icon"></span>
-		</button>
-		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
-            <a class="navbar-brand" href="/"><span class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</span></a>
-			<ul class="navbar-nav mt-2 mt-lg-0">
-				<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
-				<li class="hidden">
-					<a class="nav-link" href="#page-top"></a>
-				</li>
-				<li class="nav-item page-scroll">
-					<a class="nav-link" href="#about">About</a>
-				</li>
-				<li class="nav-item page-scroll">
-					<a class="nav-link" href="#features">Features</a>
-				</li>
-				<li class="nav-item page-scroll">
-					<a class="nav-link" href="#contact">Contact</a>
-				</li>
-				<li class="nav-item page-scroll">
-					<a class="nav-link" href="#sponsors">Sponsor</a>
-				</li>
-				<li class="nav-item page-scroll">
-					<a class="nav-link" href="#hosting">Hosting</a>
-				</li>
-				<li class="nav-item">
-					<a class="nav-link" href="/docs/html/index.html">Documentation&nbsp;<i class="fa fa-external-link-alt"></i></a>
-				</li>
-				<li class="nav-item">
-					<a class="nav-link" href="https://github.com/conversejs/converse.js/releases" class="button" target="_blank" rel="noopener">Download&nbsp;<i class="fa fa-external-link-alt"></i></a>
-				</li>
-			</ul>
-		</div>
-	</nav>
-
+<section class="section-wrapper">
+    <nav class="navbar sticky-top navbar-expand-lg" role="navigation">
+        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+            <span class="page-scroll">
+                <a class="navbar-brand" href="/"><span class="converse-brand-heading">Home</span></a>
+		<a class="navbar-brand" href="/demo"><span class="converse-brand-heading">Demos</span></a>
+            </span>
+        </div>
+    </nav>
     <section class="intro">
         <div class="intro-body">
             <div class="container">
                 <div class="row">
-                    <div class="col-md-8 col-md-offset-2">
-                        <h1 class="brand-heading brand-heading-embedded"><a style="color: white;" href="/"><i class="icon-conversejs"></i>Converse</a></h1>
-                        <p class="intro-text">Embedded MUC chat demo</p>
+                    <div class="col-md-12">
+			<h1 class="brand-heading fade-in">
+			    <svg class="converse-svg-logo"
+				xmlns:svg="http://www.w3.org/2000/svg"
+				xmlns="http://www.w3.org/2000/svg"
+				xmlns:xlink="http://www.w3.org/1999/xlink"
+				viewBox="0 0 364 364">
 
+				<title>Home</title>
+				<g class="cls-1" id="g904">
+				    <g data-name="Layer 2">
+					<g data-name="Layer 7">
+					    <path
+						class="cls-3"
+						d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />
+					    <path
+						class="cls-4"
+						d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />
+					</g>
+				    </g>
+				</g>
+			    </svg>
+			    <span class="brand-heading__text">
+				<span>converse<span class="subdued">.js</span></span>
+				<p class="byline">messaging freedom</p>
+			    </span>
+			</h1>
+                        <p class="intro-text">Embedded MUC chat demo</p>
                         <div class="converse-container">
                             <div id="conversejs"></div>
                         </div>
@@ -79,6 +74,7 @@
             </div>
         </div>
     </section>
+</section>
 </body>
 
 <script>
diff --git a/demo/index.html b/demo/index.html
index 0e32448bc..0c44fa6f1 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -10,71 +10,67 @@
     <meta name="keywords" content="xmpp chat webchat converse.js" />
 
     <link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="/css/font-awesome.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="/css/website.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" />
-    <script src="/src/website.js"></script>
+    <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/font-awesome.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/website.min.css" />
     <script type="text/javascript" src="/analytics.js"></script>
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
     <![if gte IE 9]>
-        <script src="/dist/converse.min.js"></script>
+        <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/converse.min.css" />
+        <script src="https://cdn.conversejs.org/4.2.0/dist/converse.min.js"></script>
     <![endif]>
 </head>
 
 <body id="page-top" data-spy="scroll">
 <section class="section-wrapper">
-	<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
-		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
-			<span class="navbar-toggler-icon"></span>
-		</button>
-		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
-            <a class="navbar-brand" href="/"><span class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</span></a>
-			<ul class="navbar-nav mt-2 mt-lg-0">
-				<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
-				<li class="hidden">
-					<a class="nav-link" href="#page-top"></a>
-				</li>
-				<li class="nav-item page-scroll">
-					<a class="nav-link" href="#about">About</a>
-				</li>
-				<li class="nav-item page-scroll">
-					<a class="nav-link" href="#features">Features</a>
-				</li>
-				<li class="nav-item page-scroll">
-					<a class="nav-link" href="#contact">Contact</a>
-				</li>
-				<li class="nav-item page-scroll">
-					<a class="nav-link" href="#sponsors">Sponsor</a>
-				</li>
-				<li class="nav-item page-scroll">
-					<a class="nav-link" href="#hosting">Hosting</a>
-				</li>
-				<li class="nav-item">
-					<a class="nav-link" href="/docs/html/index.html">Documentation&nbsp;<i class="fa fa-external-link-alt"></i></a>
-				</li>
-				<li class="nav-item">
-					<a class="nav-link" href="https://github.com/conversejs/converse.js/releases" class="button" target="_blank" rel="noopener">Download&nbsp;<i class="fa fa-external-link-alt"></i></a>
-				</li>
-			</ul>
-		</div>
-	</nav>
+    <nav class="navbar sticky-top navbar-expand-lg" role="navigation">
+        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+            <span class="page-scroll">
+                <a class="navbar-brand" href="/"><span class="converse-brand-heading">Home</span></a>
+            </span>
+        </div>
+    </nav>
 
-    <section class="intro" class="container">
+    <section id="intro" class="intro" class="container">
         <div class="row">
             <div class="col-md-12 col-md-offset-2">
-                <h1 class="brand-heading"><i class="icon-conversejs"></i> Converse</h1>
+                <h1 class="brand-heading fade-in">
+                    <svg class="converse-svg-logo"
+                        xmlns:svg="http://www.w3.org/2000/svg"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        viewBox="0 0 364 364">
+                    <title>Home</title>
+                    <g class="cls-1" id="g904">
+                        <g data-name="Layer 2">
+                            <g data-name="Layer 7">
+                                <path
+                                    class="cls-3"
+                                    d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />
+                                <path
+                                    class="cls-4"
+                                    d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />
+                            </g>
+                        </g>
+                    </g>
+                </svg>
+                <span class="brand-heading__text">
+                    <span>converse<span class="subdued">.js</span></span>
+                    <p class="byline">messaging freedom</p>
+                </span>
+                </h1>
+
                 <p class="intro-text">Demos:</p>
                 <p class="intro-text">
                     <ul style="list-style: none; font-size: 22px;">
                         <li><a href="/fullscreen.html">As a fullscreen application</a></li>
                         <li><a href="/demo/anonymous.html">Anonymous login</a></li>
                         <li><a href="/demo/embedded.html">Single MUC chatroom embedded into the page</a></li>
-                        <li><a href="/demo/without_bundled_dependencies.html">Dependencies loaded externally as &lt;script&gt; tags</a></li>
                     </ul>
                 </p>
             </div>
         </div>
     </section>
+    </section>
 </section>
 </body>
 
diff --git a/demo/without_bundled_dependencies.html b/demo/without_bundled_dependencies.html
deleted file mode 100644
index be080b984..000000000
--- a/demo/without_bundled_dependencies.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Converse.js (Non-AMD Example)</title>
-    <meta charset='utf-8' />
-    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Converse.js: A free chat client for your website" />
-    <meta name="author" content="JC Brand" />
-    <link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="/css/bootstrap.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="/css/theme.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" />
-
-    <!-- BEGIN OTR: Off-the-record encryption stuff. Can be omitted if OTR is not used. -->
-    <script type="text/javascript" src="../node_modules/otr/build/dep/crypto.js"></script>
-    <script type="text/javascript" src="../node_modules/otr/build/dep/salsa20.js"></script>
-    <script type="text/javascript" src="../node_modules/otr/build/dep/bigint.js"></script>
-    <script type="text/javascript" src="../node_modules/otr/build/dep/eventemitter.js"></script>
-    <script type="text/javascript" src="../node_modules/otr/build/otr.js"></script>
-    <!-- END OTR -->
-
-    <!-- BEGIN STROPHE -->
-    <script type="text/javascript" src="../node_modules/strophe.js/strophe.js"></script>
-    <script type="text/javascript" src="../node_modules/strophejs-plugin-vcard/strophe.vcard.js"></script>
-    <script type="text/javascript" src="../node_modules/strophejs-plugin-disco/strophe.disco.js"></script>
-    <script type="text/javascript" src="../node_modules/strophejs-plugin-rsm/strophe.rsm.js"></script>
-    <script type="text/javascript" src="../node_modules/strophejs-plugin-ping/strophe.ping.js"></script>
-    <!-- END STROPHE -->
-
-    <script type="text/javascript" src="../node_modules/snabbdom/dist/snabbdom.js"></script>
-    <script type="text/javascript" src="../node_modules/snabbdom/dist/snabbdom-attributes.js"></script>
-    <script type="text/javascript" src="../node_modules/snabbdom/dist/snabbdom-class.js"></script>
-    <script type="text/javascript" src="../node_modules/snabbdom/dist/snabbdom-dataset.js"></script>
-    <script type="text/javascript" src="../node_modules/snabbdom/dist/snabbdom-eventlisteners.js"></script>
-    <script type="text/javascript" src="../node_modules/snabbdom/dist/snabbdom-props.js"></script>
-    <script type="text/javascript" src="../node_modules/snabbdom/dist/snabbdom-style.js"></script>
-
-    <!-- BEGIN BACKBONE -->
-    <script type="text/javascript" src="../node_modules/lodash/lodash.js"></script>
-    <script type="text/javascript" src="../node_modules/backbone/backbone.js"></script>
-    <script type="text/javascript" src="../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
-    <script type="text/javascript" src="../node_modules/backbone.browserStorage/backbone.browserStorage.js"></script>
-    <script type="text/javascript" src="../node_modules/backbone.overview/dist/backbone.overview.js"></script>
-    <script type="text/javascript" src="../node_modules/backbone.overview/dist/backbone.orderedlistview.js"></script>
-    <script type="text/javascript" src="../node_modules/backbone.vdomview/dist/backbone.vdomview.js"></script>
-    <!-- END BACKBONE -->
-
-    <script type="text/javascript" src="../node_modules/awesomplete-avoid-xss/awesomplete.js"></script>
-    <script type="text/javascript" src="../node_modules/moment/min/moment-with-locales.js"></script>
-
-    <script type="text/javascript" src="../3rdparty/lodash.fp.js"></script>
-    <script src="../dist/converse-no-dependencies.js"></script>
-</head>
-<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
-    <section class="intro">
-        <div class="intro-body">
-            <div class="container">
-                <div class="row">
-                    <div class="col-md-8 col-md-offset-2">
-                        <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse</h1>
-                        <p class="intro-text">An example page where external dependencies are loaded seperately and not within the converse.js bundle.</p>
-                        <p class="intro-text">Look at the page source for details.</p>
-                        <p class="intro-text">For this page to work, you'll need to
-                            <a href="https://conversejs.org/docs/html/developer_guidelines.html#installing-the-development-and-front-end-dependencies">
-                            install the 3rd party dependencies</a> of converse.js.
-                        </p>
-                        <div class="page-scroll">
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-</body>
-
-<script>
-    converse.initialize({
-        bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
-        prebind: false,
-        show_controlbox_by_default: true,
-        debug: true,
-        roster_groups: true,
-        keepalive: true
-    });
-</script>
-</html>
