diff --git a/example/index.html b/example/index.html
index ea65a73..730b5c1 100644
--- a/example/index.html
+++ b/example/index.html
@@ -5,8 +5,8 @@
     <title>OAuth Login</title>
   </head>
   <body>
-    <a id="sign-in-link" href="#" style="visibility: hidden;">Sign in</a>
-    <a id="sign-out-link" href="#" style="visibility: hidden;">Sign out</a>
+    <a id="sign-in-link" href="#">Sign in</a>
+    <a id="sign-out-link" href="#">Sign out</a>
     <p>
       Logged In:
       <span id="logged-in"></span>
diff --git a/example/index.js b/example/index.js
index 83cb17b..92e4d83 100644
--- a/example/index.js
+++ b/example/index.js
@@ -6,11 +6,15 @@ const oauthClient = new OauthClient(
 );
 
 function updateDom() {
-  document.querySelector('#logged-in').innerHTML = JSON.stringify(oauthClient.isLoggedIn);
-  document.querySelector('#auth-headers').innerHTML = JSON.stringify(oauthClient.authHeaders);
+  document.querySelector('#sign-in-link').style.visibility =
+    oauthClient.isLoggedIn ? 'hidden' : 'visible';
+  document.querySelector('#sign-out-link').style.visibility =
+    oauthClient.isLoggedIn ? 'visible' : 'hidden';
 
-  const visibleButtonSelector = oauthClient.isLoggedIn ? '#sign-out-link' : '#sign-in-link';
-  document.querySelector(visibleButtonSelector).style.visibility = 'visible';
+  document.querySelector('#logged-in').innerHTML =
+    JSON.stringify(oauthClient.isLoggedIn);
+  document.querySelector('#auth-headers').innerHTML =
+    JSON.stringify(oauthClient.authHeaders);
 }
 
 document.querySelector('#sign-in-link')
@@ -25,5 +29,7 @@ document.querySelector('#sign-out-link')
       .then(updateDom);
   });
 
+updateDom();
+
 oauthClient.maybeRestoreLogin()
   .then(updateDom);
