diff --git a/.changelog/16204.txt b/.changelog/16204.txt
new file mode 100644
index 0000000000..89ae9815ed
--- /dev/null
+++ b/.changelog/16204.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Update sidebar width to 280px
+```
diff --git a/ui/packages/consul-ui/app/components/app/index.scss b/ui/packages/consul-ui/app/components/app/index.scss
index 42e91b5cb4..386687a81c 100644
--- a/ui/packages/consul-ui/app/components/app/index.scss
+++ b/ui/packages/consul-ui/app/components/app/index.scss
@@ -123,11 +123,11 @@ main {
   }
   %main-nav-horizontal-toggle:checked ~ footer,
   %main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
-    left: calc(var(--chrome-width, 300px) * -1);
+    left: calc(var(--chrome-width, 280px) * -1);
   }
   %main-nav-horizontal-toggle ~ main .notifications,
   %main-nav-horizontal-toggle ~ main {
-    margin-left: var(--chrome-width, 300px);
+    margin-left: var(--chrome-width, 280px);
   }
   %main-nav-horizontal-toggle:checked ~ main .notifications,
   %main-nav-horizontal-toggle:checked ~ main {
@@ -144,7 +144,7 @@ main {
   }
   %main-nav-horizontal-toggle ~ footer,
   %main-nav-horizontal-toggle + header > div > nav:first-of-type {
-    left: calc(var(--chrome-width, 300px) * -1);
+    left: calc(var(--chrome-width, 280px) * -1);
   }
   %main-nav-horizontal-toggle ~ main .notifications,
   %main-nav-horizontal-toggle ~ main {
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss
index d4ee17fbfe..5b490bb5e7 100644
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss
@@ -2,7 +2,7 @@
   position: absolute;
   left: 0;
   top: var(--chrome-height, 47px);
-  width: var(--chrome-width, 300px);
+  width: var(--chrome-width, 280px);
   height: calc(100vh - var(--chrome-height, 47px) - 35px);
   padding-top: 35px;
   overflow: auto;
diff --git a/ui/packages/consul-ui/app/styles/variables/layout.scss b/ui/packages/consul-ui/app/styles/variables/layout.scss
index 7733342c35..7bae140828 100644
--- a/ui/packages/consul-ui/app/styles/variables/layout.scss
+++ b/ui/packages/consul-ui/app/styles/variables/layout.scss
@@ -1,4 +1,4 @@
 :root {
-  --chrome-width: 300px;
+  --chrome-width: 280px;
   --chrome-height: 64px;
 }
diff --git a/ui/packages/consul-ui/app/templates/application.hbs b/ui/packages/consul-ui/app/templates/application.hbs
index 5db69c1d2d..9eb1536ad8 100644
--- a/ui/packages/consul-ui/app/templates/application.hbs
+++ b/ui/packages/consul-ui/app/templates/application.hbs
@@ -1,133 +1,138 @@
 <Route @name={{routeName}} as |route|>
 
   {{! Add the a11y route announcer }}
-  <route.Announcer @title="Consul" />
+  <route.Announcer @title='Consul' />
   {{! Tell CSS what we have enabled }}
-  {{#if (can "use acls")}}
-  {{document-attrs class="has-acls"}}
+  {{#if (can 'use acls')}}
+    {{document-attrs class='has-acls'}}
   {{/if}}
-  {{#if (can "use nspaces")}}
-  {{document-attrs class="has-nspaces"}}
+  {{#if (can 'use nspaces')}}
+    {{document-attrs class='has-nspaces'}}
   {{/if}}
-  {{#if (can "use partitions")}}
-  {{document-attrs class="has-partitions"}}
+  {{#if (can 'use partitions')}}
+    {{document-attrs class='has-partitions'}}
   {{/if}}
 
   {{! Listen out for blocking query/client setting changes }}
-  <DataSource @src={{uri 'settings://consul:client' }} @onchange={{route-action "onClientChanged" }} />
+  <DataSource
+    @src={{uri 'settings://consul:client'}}
+    @onchange={{route-action 'onClientChanged'}}
+  />
 
   {{! Tell CSS about our theme }}
-  <DataSource @src={{uri 'settings://consul:theme' }} as |source|>
+  <DataSource @src={{uri 'settings://consul:theme'}} as |source|>
     {{#each-in source.data as |key value|}}
-    {{#if (and value (includes key (array "color-scheme" "contrast")))}}
-    {{document-attrs class=(concat 'prefers-' key '-' value)}}
-    {{/if}}
+      {{#if (and value (includes key (array 'color-scheme' 'contrast')))}}
+        {{document-attrs class=(concat 'prefers-' key '-' value)}}
+      {{/if}}
     {{/each-in}}
   </DataSource>
 
   {{! If ACLs are enabled try get a token }}
-  {{#if (can "use acls")}}
-  <DataSource @src={{uri 'settings://consul:token' }} @onchange={{action (mut token) value="data" }} />
+  {{#if (can 'use acls')}}
+    <DataSource
+      @src={{uri 'settings://consul:token'}}
+      @onchange={{action (mut token) value='data'}}
+    />
   {{/if}}
 
-
   {{#if (not-eq route.currentName 'oauth-provider-debug')}}
 
-  {{! redirect if we aren't on a URL with dc information }}
-  {{#if (eq route.currentName 'index')}}
-  {{! until we get to the dc route we don't know any permissions }}
-  {{! as we don't know the dc, any inital permission based }}
-  {{! redirects are in the dc.show route}}
+    {{! redirect if we aren't on a URL with dc information }}
+    {{#if (eq route.currentName 'index')}}
+      {{! until we get to the dc route we don't know any permissions }}
+      {{! as we don't know the dc, any inital permission based }}
+      {{! redirects are in the dc.show route}}
 
-  {{! 2022-04-15: Temporarily reverting the services page to the default }}
-  {{did-insert (route-action 'replaceWith' 'dc.services.index'
-  (hash
-  dc=(env 'CONSUL_DATACENTER_LOCAL')
-  )
-  )}}
-  {{else}}
-  {{! If we are notfound, guess the params we need }}
-  {{#if (eq route.currentName 'notfound')}}
-  <DataSource @src={{uri '/*/*/*/notfound/${path}' (hash path=route.params.notfound ) }} @onchange={{action (mut
-    notfound) value="data" }} />
-  {{/if}}
-
-  {{! Make sure we guess and default to the right params when not found }}
-  {{#let
-  (if (can "use partitions") (or route.params.partition notfound.partition token.Partition '') '')
-  (if (can "use nspaces") (or route.params.nspace notfound.nspace token.Namespace '') '')
-  as |partition nspace|}}
-
-  {{! Make sure we have enough to show the app chrome}}
-  {{! Don't show anything until we have a list of DCs }}
-  <DataSource @src={{uri '/*/*/*/datacenters' }} as |dcs|>
-    {{! Once we have a list of DCs make sure the DC we are asking for exists }}
-    {{! If not use the DC that the UI is running in }}
-    {{#let
-
-    (or
-
-    (if nofound.dc
-    (object-at 0 (cached-model
-    'dc'
-    (hash
-    Name=notfound.dc
-    )
-    )
-    )
-    )
-
-    (object-at 0 (cached-model
-    'dc'
-    (hash
-    Name=route.params.dc
-    )
-    )
-    )
-
-    (hash
-    Name=(env "CONSUL_DATACENTER_LOCAL")
-    )
-
-    )
-
-    dcs.data
-
-    as |dc dcs|}}
-    {{#if (and (gt dc.Name.length 0) dcs)}}
-
-    {{! figure out our current DC and convert it to a model }}
-    <DataSource @src={{uri '/${partition}/*/${dc}/datacenter-cache/${name}' (hash dc=dc.Name partition=partition
-      name=dc.Name ) }} as |dc|>
-      {{#if dc.data}}
-      <HashicorpConsul id="wrapper" @dcs={{dcs}} @dc={{dc.data}} @partition={{partition}} @nspace={{nspace}}
-        @user={{hash token=token }} @onchange={{action "reauthorize" }} as |consul|>
-
-        {{#if error}}
-        {{! If we got an error from anything, show an error page }}
-        <AppError @error={{error}} @login={{consul.login.open}} />
-        {{else}}
-        {{! Otherwise show the rest of the app}}
-        <Outlet @name="application" @model={{hash app=consul user=(hash token=token ) dc=dc.data dcs=dcs }} as |o|>
-          {{outlet}}
-        </Outlet>
-
-        {{! loading component for when we need it}}
-        <Consul::Loader class="view-loader" />
-        {{/if}}
-
-      </HashicorpConsul>
+      {{! 2022-04-15: Temporarily reverting the services page to the default }}
+      {{did-insert
+        (route-action 'replaceWith' 'dc.services.index' (hash dc=(env 'CONSUL_DATACENTER_LOCAL')))
+      }}
+    {{else}}
+      {{! If we are notfound, guess the params we need }}
+      {{#if (eq route.currentName 'notfound')}}
+        <DataSource
+          @src={{uri '/*/*/*/notfound/${path}' (hash path=route.params.notfound)}}
+          @onchange={{action (mut notfound) value='data'}}
+        />
       {{/if}}
-    </DataSource>
+
+      {{! Make sure we guess and default to the right params when not found }}
+      {{#let
+        (if
+          (can 'use partitions')
+          (or route.params.partition notfound.partition token.Partition '')
+          ''
+        )
+        (if (can 'use nspaces') (or route.params.nspace notfound.nspace token.Namespace '') '')
+        as |partition nspace|
+      }}
+
+        {{! Make sure we have enough to show the app chrome}}
+        {{! Don't show anything until we have a list of DCs }}
+        <DataSource @src={{uri '/*/*/*/datacenters'}} as |dcs|>
+          {{! Once we have a list of DCs make sure the DC we are asking for exists }}
+          {{! If not use the DC that the UI is running in }}
+          {{#let
+            (or
+              (if nofound.dc (object-at 0 (cached-model 'dc' (hash Name=notfound.dc))))
+              (object-at 0 (cached-model 'dc' (hash Name=route.params.dc)))
+              (hash Name=(env 'CONSUL_DATACENTER_LOCAL'))
+            )
+            dcs.data
+            as |dc dcs|
+          }}
+            {{#if (and (gt dc.Name.length 0) dcs)}}
+
+              {{! figure out our current DC and convert it to a model }}
+              <DataSource
+                @src={{uri
+                  '/${partition}/*/${dc}/datacenter-cache/${name}'
+                  (hash dc=dc.Name partition=partition name=dc.Name)
+                }}
+                as |dc|
+              >
+                {{#if dc.data}}
+                  <HashicorpConsul
+                    id='wrapper'
+                    @dcs={{dcs}}
+                    @dc={{dc.data}}
+                    @partition={{partition}}
+                    @nspace={{nspace}}
+                    @user={{hash token=token}}
+                    @onchange={{action 'reauthorize'}}
+                    as |consul|
+                  >
+
+                    {{#if error}}
+                      {{! If we got an error from anything, show an error page }}
+                      <AppError @error={{error}} @login={{consul.login.open}} />
+                    {{else}}
+                      {{! Otherwise show the rest of the app}}
+                      <Outlet
+                        @name='application'
+                        @model={{hash app=consul user=(hash token=token) dc=dc.data dcs=dcs}}
+                        as |o|
+                      >
+                        {{outlet}}
+                      </Outlet>
+
+                      {{! loading component for when we need it}}
+                      <Consul::Loader class='view-loader' />
+                    {{/if}}
+
+                  </HashicorpConsul>
+                {{/if}}
+              </DataSource>
+            {{/if}}
+          {{/let}}
+        </DataSource>
+      {{/let}}
     {{/if}}
-    {{/let}}
-  </DataSource>
-  {{/let}}
-  {{/if}}
   {{else}}
-  {{! Routes with no main navigation }}
-  <Outlet @name="application" @model={{hash user=(hash token=token ) }} as |o|>
-    {{outlet}}
-  </Outlet>
+    {{! Routes with no main navigation }}
+    <Outlet @name='application' @model={{hash user=(hash token=token)}} as |o|>
+      {{outlet}}
+    </Outlet>
   {{/if}}
 </Route>