diff --git a/package.json b/package.json
index 7c148ec..57d198f 100644
--- a/package.json
+++ b/package.json
@@ -84,6 +84,8 @@
     "react-live-clock": "^4.0.5",
     "react-modal": "^3.11.2",
     "react-redux": "^7.1.3",
+    "react-scripts": "3.4.1",
+    "react-stopwatch": "^2.0.4",
     "reactstrap": "^8.4.1",
     "redux": "^4.0.4",
     "redux-persist": "^6.0.0",
diff --git a/src/navbar/index.tsx b/src/navbar/index.tsx
index 0df75bc..2811212 100644
--- a/src/navbar/index.tsx
+++ b/src/navbar/index.tsx
@@ -1,12 +1,14 @@
 import React, { useRef, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import Clock from "react-live-clock";
+import Stopwatch from 'react-stopwatch';
 
 import {
   FaCircle,
   FaRegClock,
   FaRegUser,
   FaBroadcastTower,
+  FaSpinner
 } from "react-icons/fa";
 
 import { RootState } from "../rootReducer";
@@ -41,7 +43,7 @@ function nicifyConnectionState(state: ConnectionStateEnum): string {
   }
 }
 
-export function NavBar() {
+export function NavBarMain() {
   const dispatch = useDispatch();
   const sessionState = useSelector((state: RootState) => state.session);
   const broadcastState = useSelector((state: RootState) => state.broadcast);
@@ -77,88 +79,9 @@ export function NavBar() {
           <img className="logo-webstudio" src={appLogo} alt="Web Studio Logo" />
           <img className="logo-myradio" src={myradioLogo} alt="MyRadio Logo" />
         </a>
-        <div className="nav-item nav-link" id="timelord">
-          <a
-            href="http://ury.org.uk/timelord/"
-            target="_blank"
-            onClick={(e) => {
-              e.preventDefault();
-              let w = window.open(
-                "http://ury.org.uk/timelord/",
-                "URY - Timelord",
-                "resizable,status"
-              );
-            }}
-          >
-            <div className="time">
-              <Clock
-                format={"HH:mm:ss"}
-                ticking={true}
-                timezone={"europe/london"}
-              />
-            </div>
-          </a>
-        </div>
       </div>
 
       <ul className="nav navbar-nav navbar-right">
-        <li className="nav-item">
-          <VUMeter width={250} height={40} source="master" range={[-40, 3]} />
-        </li>
-
-        <li className="nav-item" style={{ color: "white" }}>
-          <div className="nav-link">
-            <b>{nicifyConnectionState(broadcastState.connectionState)}</b>
-          </div>
-        </li>
-        <li
-          className="btn btn-outline-light rounded-0 pt-2 pb-1 nav-item nav-link connect"
-          onClick={() => {
-            setConnectButtonAnimating(true);
-            switch (broadcastState.stage) {
-              case "NOT_REGISTERED":
-                dispatch(BroadcastState.goOnAir());
-                break;
-              case "REGISTERED":
-                dispatch(BroadcastState.cancelTimeslot());
-                break;
-            }
-          }}
-        >
-          {connectButtonAnimating ? (
-            <span className="dot-pulse mr-2" />
-          ) : (
-            <>
-              <FaBroadcastTower size={17} className="mr-2" />
-              {broadcastState.stage === "NOT_REGISTERED" && "Register for show"}
-              {broadcastState.stage === "REGISTERED" && "Cancel registration"}
-            </>
-          )}
-        </li>
-        {settings.enableRecording && (
-          <li
-            className={
-              "btn rounded-0 pt-2 pb-1 nav-item nav-link " +
-              (broadcastState.recordingState === "CONNECTED"
-                ? "btn-outline-danger active"
-                : "btn-outline-warning")
-            }
-            onClick={() =>
-              dispatch(
-                broadcastState.recordingState === "NOT_CONNECTED"
-                  ? BroadcastState.startRecording()
-                  : BroadcastState.stopRecording()
-              )
-            }
-          >
-            <FaCircle size={17} />
-            &nbsp; Rec:{" "}
-            {broadcastState.recordingState === "CONNECTED"
-              ? "Recording"
-              : "Not Recording"}
-          </li>
-        )}
-        <span className="navbar-brand divider ml-3 mr-2 mt-2 mb-0"></span>
         <li className="nav-item dropdown">
           <a
             className="nav-link dropdown-toggle"
@@ -201,7 +124,7 @@ export function NavBar() {
             </h6>
           </div>
         </li>
-        <li className="nav-item dropdown">
+        <li className="nav-item navbar-profile dropdown">
           <a
             className="nav-link dropdown-toggle"
             href={MYRADIO_NON_API_BASE + "/Profile/default/"}
@@ -236,6 +159,123 @@ export function NavBar() {
   );
 }
 
+export function NavBarWebStudio() {
+  const dispatch = useDispatch();
+  const sessionState = useSelector((state: RootState) => state.session);
+  const broadcastState = useSelector((state: RootState) => state.broadcast);
+  const settings = useSelector((state: RootState) => state.settings);
+  const redirect_url = encodeURIComponent(window.location.toString());
+
+  const [connectButtonAnimating, setConnectButtonAnimating] = useState(false);
+
+  const prevRegistrationStage = useRef(broadcastState.stage);
+  useEffect(() => {
+    if (broadcastState.stage !== prevRegistrationStage.current) {
+      setConnectButtonAnimating(false);
+    }
+    prevRegistrationStage.current = broadcastState.stage;
+  }, [broadcastState.stage]);
+
+  return (
+    <>
+      <ul className="nav navbar-nav navbar-left">
+        <li
+          className="btn rounded-0 pt-2 pb-1 nav-link nav-item"
+            id="timelord"
+            onClick={(e) => {
+              e.preventDefault();
+              window.open(
+                "http://ury.org.uk/timelord/",
+                "URY - Timelord",
+                "resizable,status"
+              );
+            }}
+          >
+              <Clock
+                format={"HH:mm:ss"}
+                ticking={true}
+                timezone={"europe/london"}
+              />
+          </li>
+      </ul>
+
+      <ul className="nav navbar-nav navbar-right mr-0 pr-0">
+
+        <li className="nav-item" style={{ color: "white" }}>
+          <div className="nav-link">
+            <b>{nicifyConnectionState(broadcastState.connectionState)}</b>
+          </div>
+        </li>
+        <li
+          className="btn btn-outline-light rounded-0 pt-2 pb-1 nav-item nav-link connect"
+          onClick={() => {
+            setConnectButtonAnimating(true);
+            switch (broadcastState.stage) {
+              case "NOT_REGISTERED":
+                dispatch(BroadcastState.goOnAir());
+                break;
+              case "REGISTERED":
+                dispatch(BroadcastState.cancelTimeslot());
+                break;
+            }
+          }}
+        >
+          {connectButtonAnimating ? (
+            <>
+              <FaBroadcastTower size={17} className="mr-2" />
+              <FaSpinner size={17} className="nav-spin mr-2" />
+            </>
+          ) : (
+            <>
+              <FaBroadcastTower size={17} className="mr-2" />
+              {broadcastState.stage === "NOT_REGISTERED" && "Register"}
+              {broadcastState.stage === "REGISTERED" && "Stop"}
+            </>
+          )}
+        </li>
+        {settings.enableRecording && (
+          <li
+            className={
+              "btn rounded-0 pt-2 pb-1 nav-item nav-link " +
+              (broadcastState.recordingState === "CONNECTED"
+                ? "btn-outline-danger active"
+                : "btn-outline-warning")
+            }
+            onClick={() =>
+              dispatch(
+                broadcastState.recordingState === "NOT_CONNECTED"
+                  ? BroadcastState.startRecording()
+                  : BroadcastState.stopRecording()
+              )
+            }
+          >
+            <FaCircle size={17}
+              className={
+              broadcastState.recordingState === "CONNECTED" ? "rec-blink" : "rec-stop"}
+            />
+            {" "}
+            {broadcastState.recordingState === "CONNECTED"
+              ? <Stopwatch
+               seconds={0}
+               minutes={0}
+               hours={0}
+               render={({ formatted }) => {
+                 return (
+                   <span>{formatted}</span>
+                 );
+               }}
+              />
+              : "Record"}
+          </li>
+        )}
+        <li className="nav-item px-2 nav-vu">
+          <VUMeter width={235} height={40} source="master" range={[-40, 3]} />
+        </li>
+      </ul>
+    </>
+  );
+}
+
 function AlertBar() {
   const state = useSelector((state: RootState) => state.navbar.currentAlert);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -271,12 +311,11 @@ function AlertBar() {
 }
 
 export function CombinedNavAlertBar() {
-  // TODO
   return (
     <>
       <AlertBar />
       <header className="navbar navbar-ury navbar-expand-md p-0 bd-navbar">
-        <nav className="container-fluid">
+        <nav className="container-fluid px-0">
           <button
             className="navbar-toggler"
             type="button"
@@ -288,7 +327,23 @@ export function CombinedNavAlertBar() {
           >
             <span className="navbar-toggler-icon"></span>
           </button>
-          <NavBar />
+          <NavBarMain />
+        </nav>
+      </header>
+      <header className="navbar navbar-webstudio navbar-expand-md p-0 bd-navbar">
+        <nav className="container-fluid px-0">
+          <button
+            className="navbar-toggler"
+            type="button"
+            data-toggle="collapse"
+            data-target="#collapsed"
+            aria-controls="collapsed"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+          >
+            <span className="navbar-toggler-icon"></span>
+          </button>
+          <NavBarWebStudio />
         </nav>
       </header>
     </>
diff --git a/src/navbar/navbar.scss b/src/navbar/navbar.scss
index fbf47fe..e043cb5 100644
--- a/src/navbar/navbar.scss
+++ b/src/navbar/navbar.scss
@@ -1,9 +1,6 @@
 /* Stuff to get the nav to collapse at 991px (when the menu collapses)
  * Taken from http://stackoverflow.com/a/36289507/995325 */
 
-$dot-color: #fff;
-@import "~three-dots/sass/three-dots";
-
 @media (max-width: 991px) {
   .navbar-header {
     float: none;
@@ -42,6 +39,37 @@ $dot-color: #fff;
   }
 }
 
+.navbar-nav {
+  margin: 0;
+}
+
+.navbar-webstudio {
+  background-color: #2d425f;
+  border-color: #2d425f;
+  border: none;
+  max-height: 7vh;
+  flex-shrink: 0;
+
+
+  .nav-vu {
+    background: black;
+  }
+
+  .nav-spin {
+    animation-name: spin;
+    animation-duration: 2000ms;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+  }
+  @keyframes spin {
+      from {
+          transform:rotate(0deg);
+      }
+      to {
+          transform:rotate(360deg);
+      }
+  }
+}
 /** MyRadio bootstrap navbar overides taken from http://work.smarchal.com/twbscolor/css/2D425F2D425Fffffffe1e1e11 **/
 
 .navbar-ury {
@@ -246,14 +274,7 @@ $dot-color: #fff;
 #timelord {
   background: black;
   border: red 1px solid;
-  padding: 0.2rem;
-  margin: auto 0;
   color: white;
-  width: 100%;
-  max-width: 40vw;
-  height: 100%;
-  max-height: 36.5px;
-  cursor: pointer;
 }
 
 #timelord a {
@@ -267,5 +288,5 @@ $dot-color: #fff;
 }
 
 .nav-link.connect {
-  min-width: 80px;
+  min-width: 90px;
 }
diff --git a/yarn.lock b/yarn.lock
index 312db1e..6c20ca0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7185,7 +7185,7 @@ ms@2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
   integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
 
-ms@^2.1.1:
+ms@2.1.2, ms@^2.1.1, ms@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
@@ -9111,6 +9111,73 @@ react-redux@^7.1.1, react-redux@^7.1.3:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
+react-scripts@3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.4.1.tgz#f551298b5c71985cc491b9acf3c8e8c0ae3ada0a"
+  integrity sha512-JpTdi/0Sfd31mZA6Ukx+lq5j1JoKItX7qqEK4OiACjVQletM1P38g49d9/D0yTxp9FrSF+xpJFStkGgKEIRjlQ==
+  dependencies:
+    "@babel/core" "7.9.0"
+    "@svgr/webpack" "4.3.3"
+    "@typescript-eslint/eslint-plugin" "^2.10.0"
+    "@typescript-eslint/parser" "^2.10.0"
+    babel-eslint "10.1.0"
+    babel-jest "^24.9.0"
+    babel-loader "8.1.0"
+    babel-plugin-named-asset-import "^0.3.6"
+    babel-preset-react-app "^9.1.2"
+    camelcase "^5.3.1"
+    case-sensitive-paths-webpack-plugin "2.3.0"
+    css-loader "3.4.2"
+    dotenv "8.2.0"
+    dotenv-expand "5.1.0"
+    eslint "^6.6.0"
+    eslint-config-react-app "^5.2.1"
+    eslint-loader "3.0.3"
+    eslint-plugin-flowtype "4.6.0"
+    eslint-plugin-import "2.20.1"
+    eslint-plugin-jsx-a11y "6.2.3"
+    eslint-plugin-react "7.19.0"
+    eslint-plugin-react-hooks "^1.6.1"
+    file-loader "4.3.0"
+    fs-extra "^8.1.0"
+    html-webpack-plugin "4.0.0-beta.11"
+    identity-obj-proxy "3.0.0"
+    jest "24.9.0"
+    jest-environment-jsdom-fourteen "1.0.1"
+    jest-resolve "24.9.0"
+    jest-watch-typeahead "0.4.2"
+    mini-css-extract-plugin "0.9.0"
+    optimize-css-assets-webpack-plugin "5.0.3"
+    pnp-webpack-plugin "1.6.4"
+    postcss-flexbugs-fixes "4.1.0"
+    postcss-loader "3.0.0"
+    postcss-normalize "8.0.1"
+    postcss-preset-env "6.7.0"
+    postcss-safe-parser "4.0.1"
+    react-app-polyfill "^1.0.6"
+    react-dev-utils "^10.2.1"
+    resolve "1.15.0"
+    resolve-url-loader "3.1.1"
+    sass-loader "8.0.2"
+    semver "6.3.0"
+    style-loader "0.23.1"
+    terser-webpack-plugin "2.3.5"
+    ts-pnp "1.1.6"
+    url-loader "2.3.0"
+    webpack "4.42.0"
+    webpack-dev-server "3.10.3"
+    webpack-manifest-plugin "2.2.0"
+    workbox-webpack-plugin "4.3.1"
+  optionalDependencies:
+    fsevents "2.1.2"
+
+react-stopwatch@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-stopwatch/-/react-stopwatch-2.0.4.tgz#b76e25bbcee0da62cfe58facd7b36c85404366bf"
+  integrity sha512-FBF5MS3ODWbGWi7f5wkspMuazZFBZTdUZ2Qgjct7k6tnicHTuUdY1v//MmB3PKmFDX5wrtU++DhTO3ARGVr2wQ==
+  dependencies:
+    ms "^2.1.2"
+
 react-transition-group@^2.3.1:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"