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 4433ea5538..0f5078c3c0 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
+++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
@@ -90,7 +90,7 @@
                             {{#each (sort-by 'Name' dcs) as |item|}}
                               <MenuItem
                                 data-test-datacenter-picker
-                                class={{if (eq dc.Name item.Name) 'is-active'}}
+                                class={{concat (if (eq dc.Name item.Name) 'is-active') (if item.Local ' is-local') }}
                                 @href={{href-mut (hash dc=item.Name)}}
                               >
                                 <BlockSlot @name="label">
diff --git a/ui/packages/consul-ui/app/models/dc.js b/ui/packages/consul-ui/app/models/dc.js
index 65cdd2066c..1d8f321d05 100644
--- a/ui/packages/consul-ui/app/models/dc.js
+++ b/ui/packages/consul-ui/app/models/dc.js
@@ -7,6 +7,7 @@ export const SLUG_KEY = 'Name';
 export default class Datacenter extends Model {
   @attr('string') uid;
   @attr('string') Name;
+  @attr('boolean') Local;
 
   @attr('boolean', { defaultValue: () => true }) MeshEnabled;
 }
diff --git a/ui/packages/consul-ui/app/serializers/dc.js b/ui/packages/consul-ui/app/serializers/dc.js
index 8fdd3ee6a8..23780b5ad2 100644
--- a/ui/packages/consul-ui/app/serializers/dc.js
+++ b/ui/packages/consul-ui/app/serializers/dc.js
@@ -1,6 +1,9 @@
+import { inject as service } from '@ember/service';
 import Serializer from './application';
 
 export default class DcSerializer extends Serializer {
+  @service('env') env;
+
   primaryKey = 'Name';
 
   respondForQuery(respond, query) {
@@ -14,6 +17,7 @@ export default class DcSerializer extends Serializer {
       case 'query':
         return payload.map(item => {
           return {
+            Local: this.env.var('CONSUL_DATACENTER_LOCAL') === item,
             [this.primaryKey]: item,
           };
         });
diff --git a/ui/packages/consul-ui/app/services/repository/dc.js b/ui/packages/consul-ui/app/services/repository/dc.js
index 8fdc17879c..552a7939c0 100644
--- a/ui/packages/consul-ui/app/services/repository/dc.js
+++ b/ui/packages/consul-ui/app/services/repository/dc.js
@@ -5,8 +5,8 @@ import Error from '@ember/error';
 
 const modelName = 'dc';
 export default class DcService extends RepositoryService {
-  @service('settings')
-  settings;
+  @service('settings') settings;
+  @service('env') env;
 
   getModelName() {
     return modelName;
@@ -35,8 +35,10 @@ export default class DcService extends RepositoryService {
     const settings = this.settings;
     return Promise.all([name || settings.findBySlug('dc'), items || this.findAll()]).then(
       ([name, items]) => {
-        return this.findBySlug(name, items).catch(function() {
-          const item = get(items, 'firstObject');
+        return this.findBySlug(name, items).catch(e => {
+          const item =
+            items.findBy('Name', this.env.var('CONSUL_DATACENTER_LOCAL')) ||
+            get(items, 'firstObject');
           settings.persist({ dc: get(item, 'Name') });
           return item;
         });
diff --git a/ui/packages/consul-ui/tests/integration/services/repository/dc-test.js b/ui/packages/consul-ui/tests/integration/services/repository/dc-test.js
index 6a71f98ff6..c6c33c7d1e 100644
--- a/ui/packages/consul-ui/tests/integration/services/repository/dc-test.js
+++ b/ui/packages/consul-ui/tests/integration/services/repository/dc-test.js
@@ -24,7 +24,7 @@ test('findAll returns the correct data for list endpoint', function(assert) {
       assert.deepEqual(
         actual,
         expected(function(payload) {
-          return payload.map(item => ({ Name: item }));
+          return payload.map((item, i) => ({ Name: item, Local: i === 0 ? true : false }));
         })
       );
     }