diff --git a/ui/packages/consul-acls/app/components/consul/acl/selector/README.mdx b/ui/packages/consul-acls/app/components/consul/acl/selector/README.mdx
new file mode 100644
index 000000000..bacbafacf
--- /dev/null
+++ b/ui/packages/consul-acls/app/components/consul/acl/selector/README.mdx
@@ -0,0 +1,35 @@
+# Consul::Acl::Selector
+
+A component to allow the user to 'select' the ACL area they wish to view.
+Whilst the 'Selector' naming here is a bit of a reach, it fits well with other
+similar 'Selector' components that we use within the main navigation area.
+
+The component itself is a simple wrapper around a bunch of `li a`'s.
+
+Please note: 
+
+- Currently at least, you must add this inside of a `<ul>` element.
+
+```hbs preview-template
+<ul>
+  <Consul::Acl::Selector
+    @dc={{hash
+      Name='dc-1'
+    }}
+  />
+</ul>
+```
+
+
+## Arguments
+
+| Argument/Attribute | Type | Default | Description |
+| --- | --- | --- | --- |
+| `dc` | `object` |  | The current datacenter |
+
+## See
+
+- [Template Source Code](./index.hbs)
+- [Component Source Code](./index.js)
+
+---
diff --git a/ui/packages/consul-acls/app/components/consul/token/selector/README.mdx b/ui/packages/consul-acls/app/components/consul/token/selector/README.mdx
new file mode 100644
index 000000000..ecb6933c3
--- /dev/null
+++ b/ui/packages/consul-acls/app/components/consul/token/selector/README.mdx
@@ -0,0 +1,49 @@
+# Consul::Token::Selector
+
+A self-contained component to allow the user to 'select' their token a.k.a.
+log in. The component is mostly a wrapper around a composition of `<AuthDialog
+/>`, `<AuthForm />`, `<AuthProfile />` and `<ModalDialog />`. The majority of
+the functionality is contained in those other components. This composition
+mostly orchestrates the interactions between them i.e. wires them together.
+
+As it uses `<AuthDialog />` (a componentized state machine), retrieving and saving
+the token is all managed via that component (via `<DataSource />` and
+`<DataSink />`, but this component provides the Consul specific DataSource
+uri's to tell `AuthDialog` to save user tokens to a Consul namespaced user
+settings area (Consul uses localStorage for saving user settings)
+
+Please note: 
+
+- Currently at least, you must add this inside of a `<ul>` element.
+- For the moment, make sure you have enabled ACLs using developer debug
+  cookies.
+
+```hbs preview-template
+<ul>
+  <Consul::Token::Selector
+    @dc={{hash
+      Name='dc-1'
+    }}
+    @nspace='default'
+    @partition='default'
+    @onchange={{noop}}
+  />
+</ul>
+```
+
+
+## Arguments
+
+| Argument/Attribute | Type | Default | Description |
+| --- | --- | --- | --- |
+| `dc` | `object` |  | The current datacenter |
+| `nspace` | `string` |  | The name of the current namespace |
+| `partition` | `string` |  | The name of the current partition |
+| `onchange` | `function` |  | An event handler, for when the user token change, either via logging in, logging out or re-logging in.
+
+## See
+
+- [Template Source Code](./index.hbs)
+- [Component Source Code](./index.js)
+
+---
diff --git a/ui/packages/consul-acls/app/components/consul/token/selector/index.hbs b/ui/packages/consul-acls/app/components/consul/token/selector/index.hbs
index 924536628..b60b2526d 100644
--- a/ui/packages/consul-acls/app/components/consul/token/selector/index.hbs
+++ b/ui/packages/consul-acls/app/components/consul/token/selector/index.hbs
@@ -126,10 +126,10 @@
           <BlockSlot @name="menu">
             {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
 {{!TODO: It might be nice to use one of our recursive components here}}
-{{#if @token.AccessorID}}
+{{#if authDialog.token.AccessorID}}
                 <li role="none">
                   <AuthProfile
-                    @item={{@token}}
+                    @item={{authDialog.token}}
                   />
                 </li>
                 <MenuSeparator />
@@ -151,7 +151,8 @@
   </li>
 {{yield
   (hash
-    modal=this.modal
+    open=this.modal.open
+    close=this.model.close
   )
 }}
 {{/if}}
diff --git a/ui/packages/consul-ui/.docfy-config.js b/ui/packages/consul-ui/.docfy-config.js
index 5a8995323..9c5f039f7 100644
--- a/ui/packages/consul-ui/.docfy-config.js
+++ b/ui/packages/consul-ui/.docfy-config.js
@@ -86,6 +86,12 @@ module.exports = {
       urlSchema: 'auto',
       urlPrefix: 'docs/consul',
     },
+    {
+      root: `${path.dirname(require.resolve('consul-acls/package.json'))}/app/components`,
+      pattern: '**/README.mdx',
+      urlSchema: 'auto',
+      urlPrefix: 'docs/consul-acls',
+    },
     {
       root: `${path.dirname(require.resolve('consul-partitions/package.json'))}/app/components`,
       pattern: '**/README.mdx',
diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
index 2e610a8a9..108370296 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
+++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
@@ -236,20 +236,23 @@
             </a>
         </li>
         <Consul::Token::Selector
-          @token={{@user.token}}
           @dc={{@dc}}
           @partition={{@partition}}
           @nspace={{@nspace}}
           @onchange={{@onchange}}
-        as |modal|>
-          {{did-insert (set this 'modal')}}
+        as |selector|>
+          <Ref
+            @target={{this}}
+            @name="tokenSelector"
+            @value={{selector}}
+          />
         </Consul::Token::Selector>
     </ul>
   </:complementary-nav>
 
   <:main>
     {{yield (hash
-      login=(if this.modal this.modal (hash open=undefined))
+      login=(if this.tokenSelector this.tokenSelector (hash open=undefined close=undefined))
     )}}
   </:main>
 
diff --git a/ui/packages/consul-ui/tests/acceptance/navigation-links.feature b/ui/packages/consul-ui/tests/acceptance/navigation-links.feature
index 31564f470..03cc3b57b 100644
--- a/ui/packages/consul-ui/tests/acceptance/navigation-links.feature
+++ b/ui/packages/consul-ui/tests/acceptance/navigation-links.feature
@@ -31,3 +31,12 @@ Feature: navigation-links: Main Navigation link visibility
     Then I see services on the navigation
     Then I don't see roles on the navigation
 
+  Scenario: Empty state login button is shown
+    Given 1 datacenter model with the value "dc-1"
+    And 0 service models
+    When I visit the services page for yaml
+    ---
+    dc: dc-1
+    ---
+    Then the url should be /dc-1/services
+    And I see login on the emptystate