diff --git a/ui/lib/core/addon/components/ttl-picker2.js b/ui/lib/core/addon/components/ttl-picker2.js
index 808183d77b..622b255d81 100644
--- a/ui/lib/core/addon/components/ttl-picker2.js
+++ b/ui/lib/core/addon/components/ttl-picker2.js
@@ -18,6 +18,7 @@
  * @param recalculationTimeout=5000 {Number} - This is the time, in milliseconds, that `recalculateSeconds` will be be true after time is updated
  * @param initialValue=null {String} - This is the value set initially (particularly from a string like '30h')
  * @param initialEnabled=null {Boolean} - Set this value if you want the toggle on when component is mounted
+ * @param changeOnInit=false {Boolean} - set this value if you'd like the passed onChange function to be called on component initialization
  */
 
 import Ember from 'ember';
@@ -34,6 +35,7 @@ const secondsMap = {
   h: 3600,
   d: 86400,
 };
+const validUnits = ['s', 'm', 'h', 'd'];
 const convertToSeconds = (time, unit) => {
   return time * secondsMap[unit];
 };
@@ -52,37 +54,54 @@ export default Component.extend({
   unit: 's',
   recalculationTimeout: 5000,
   initialValue: null,
+  changeOnInit: false,
 
   init() {
     this._super(...arguments);
     const value = this.initialValue;
     const enable = this.initialEnabled;
+    const changeOnInit = this.changeOnInit;
     // if initial value is unset use params passed in as defaults
     if (!value && value !== 0) {
       return;
     }
 
-    let seconds = 30;
+    let time = 30;
+    let unit = 's';
     let setEnable = this.enableTTL;
     if (!!enable || typeOf(enable) === 'boolean') {
       // This allows non-boolean values passed in to be evaluated for truthiness
       setEnable = !!enable;
     }
+
     if (typeOf(value) === 'number') {
-      seconds = value;
+      // if the passed value is a number, assume unit is seconds
+      time = value;
     } else {
       try {
-        seconds = Duration.parse(value).seconds();
+        const seconds = Duration.parse(value).seconds();
+        const lastDigit = value.toString().substring(value.length - 1);
+        if (validUnits.indexOf(lastDigit) >= 0 && lastDigit !== 's') {
+          time = convertFromSeconds(seconds, lastDigit);
+          unit = lastDigit;
+        } else {
+          time = seconds;
+        }
       } catch (e) {
         console.error(e);
-        // if parsing fails leave as default 30
+        // if parsing fails leave as default 30s
       }
     }
+
     this.setProperties({
-      time: seconds,
-      unit: 's',
+      time,
+      unit,
       enableTTL: setEnable,
     });
+
+    if (changeOnInit) {
+      this.handleChange();
+    }
   },
 
   unitOptions: computed(function() {
diff --git a/ui/lib/core/stories/ttl-picker2.md b/ui/lib/core/stories/ttl-picker2.md
index eb12ce2650..a827de7c51 100644
--- a/ui/lib/core/stories/ttl-picker2.md
+++ b/ui/lib/core/stories/ttl-picker2.md
@@ -21,6 +21,7 @@ TtlPicker2 components are used to enable and select time to live values. Use thi
 | recalculationTimeout | <code>Number</code>   | <code>5000</code>                                             | This is the time, in milliseconds, that `recalculateSeconds` will be be true after time is updated                               |
 | initialValue         | <code>String</code>   | <code></code>                                                 | This is the value set initially (particularly from a string like '30h')                                                          |
 | initialEnabled       | <code>Boolean</code>  | <code></code>                                                 | Set this value if you want the toggle on when component is mounted                                                               |
+| changeOnInit         | <code>Boolean</code>  | <code>false</code>                                            | set this value if you'd like the passed onChange function to be called on component initialization                               |
 
 **Example**
 
diff --git a/ui/lib/replication/addon/controllers/mode/secondaries/add.js b/ui/lib/replication/addon/controllers/mode/secondaries/add.js
index 6a80887200..09d290a793 100644
--- a/ui/lib/replication/addon/controllers/mode/secondaries/add.js
+++ b/ui/lib/replication/addon/controllers/mode/secondaries/add.js
@@ -1,3 +1,9 @@
 import ReplicationController from 'replication/controllers/application';
 
-export default ReplicationController.extend();
+export default ReplicationController.extend({
+  actions: {
+    updateTtl: function(ttl) {
+      this.set('ttl', `${ttl.seconds}s`);
+    },
+  },
+});
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/add.hbs b/ui/lib/replication/addon/templates/mode/secondaries/add.hbs
index c984ba44ee..2a46cc1bae 100644
--- a/ui/lib/replication/addon/templates/mode/secondaries/add.hbs
+++ b/ui/lib/replication/addon/templates/mode/secondaries/add.hbs
@@ -18,11 +18,14 @@
     </p>
   </div>
   <div class="field">
-    {{!-- TODO fix so it defaults to 30s like in other places or replace with new TTL picker --}}
-    {{ttl-picker onChange=(action (mut ttl)) initialValue="30m" class="is-marginless"}}
-    <p class="help has-text-grey">
-      This is the Time To Live for the generated secondary token. After this period, the generated token will no longer be valid.
-    </p>
+    <TtlPicker2
+      @initialValue="30m"
+      @label="Time to Live (TTL) for generated secondary token"
+      @helperTextDisabled="If not set, the default value (30 minutes) will be used"
+      @helperTextEnabled="After this period, the generated token will no longer be valid."
+      @onChange={{action "updateTtl"}}
+      @changeOnInit={{true}}
+    />
   </div>
   {{#if (eq replicationMode "performance")}}
     <PathFilterConfigList
@@ -40,7 +43,7 @@
         >
         Generate token
       </button>
-    </div>
+      </div>
     <div class="control">
       {{#link-to "mode.secondaries" replicationMode class="button"}}
         Cancel
diff --git a/ui/tests/integration/components/ttl-picker2-test.js b/ui/tests/integration/components/ttl-picker2-test.js
index c9b43955bc..e1455b5002 100644
--- a/ui/tests/integration/components/ttl-picker2-test.js
+++ b/ui/tests/integration/components/ttl-picker2-test.js
@@ -116,7 +116,7 @@ module('Integration | Component | ttl-picker2', function(hooks) {
     );
   });
 
-  test('it sets default value to seconds of parsed value when set', async function(assert) {
+  test('it sets default value to time and unit passed', async function(assert) {
     let changeSpy = sinon.spy();
     this.set('onChange', changeSpy);
     await render(hbs`
@@ -128,8 +128,27 @@ module('Integration | Component | ttl-picker2', function(hooks) {
         @unit="d"
       />
     `);
-    assert.dom('[data-test-ttl-value]').hasValue('7200', 'time value is initialValue as seconds');
-    assert.dom('[data-test-select="ttl-unit"]').hasValue('s', 'unit is seconds');
+    assert.dom('[data-test-ttl-value]').hasValue('2', 'time value is 2');
+    assert.dom('[data-test-select="ttl-unit"]').hasValue('h', 'unit is hours');
+    assert.ok(changeSpy.notCalled, 'it does not call onChange after render when changeOnInit is not set');
+  });
+
+  test('it is disabled on init if initialEnabled is false', async function(assert) {
+    let changeSpy = sinon.spy();
+    this.set('onChange', changeSpy);
+    await render(hbs`
+      <TtlPicker2
+        @label="inittest"
+        @onChange={{onChange}}
+        @initialValue="100m"
+        @initialEnabled={{false}}
+      />
+    `);
+    assert.dom('[data-test-ttl-value]').doesNotExist('Value is not shown on mount');
+    assert.dom('[data-test-ttl-unit]').doesNotExist('Unit is not shown on mount');
+    await click('[data-test-toggle-input="inittest"]');
+    assert.dom('[data-test-ttl-value]').hasValue('100', 'time after toggle is 100');
+    assert.dom('[data-test-select="ttl-unit"]').hasValue('m', 'Unit is minutes after toggle');
   });
 
   test('it is enabled on init if initialEnabled is true', async function(assert) {
@@ -143,8 +162,8 @@ module('Integration | Component | ttl-picker2', function(hooks) {
         @initialEnabled={{true}}
       />
     `);
-    assert.dom('[data-test-ttl-value]').hasValue('6000', 'time value is initialValue as seconds');
-    assert.dom('[data-test-ttl-unit]').exists('Unit is shown on mount');
+    assert.dom('[data-test-ttl-value]').hasValue('100', 'time is shown on mount');
+    assert.dom('[data-test-select="ttl-unit"]').hasValue('m', 'Unit is shown on mount');
     await click('[data-test-toggle-input="inittest"]');
     assert.dom('[data-test-ttl-value]').doesNotExist('Value no longer shows after toggle');
     assert.dom('[data-test-ttl-unit]').doesNotExist('Unit no longer shows after toggle');
@@ -161,7 +180,31 @@ module('Integration | Component | ttl-picker2', function(hooks) {
         @initialEnabled="true"
       />
     `);
-    assert.dom('[data-test-ttl-value]').hasValue('6000', 'time value is initialValue as seconds');
+    assert.dom('[data-test-ttl-value]').hasValue('100', 'time value is shown on mount');
     assert.dom('[data-test-ttl-unit]').exists('Unit is shown on mount');
+    assert.dom('[data-test-select="ttl-unit"]').hasValue('m', 'Unit matches what is passed in');
+  });
+
+  test('it calls onChange on init when rendered if changeOnInit is true', async function(assert) {
+    let changeSpy = sinon.spy();
+    this.set('onChange', changeSpy);
+    await render(hbs`
+      <TtlPicker2
+        @label="changeOnInitTest"
+        @onChange={{onChange}}
+        @initialValue="100m"
+        @initialEnabled="true"
+        @changeOnInit={{true}}
+      />
+    `);
+    assert.ok(
+      changeSpy.calledWith({
+        enabled: true,
+        seconds: 6000,
+        timeString: '100m',
+      }),
+      'Seconds value is recalculated based on time and unit'
+    );
+    assert.ok(changeSpy.calledOnce, 'it calls the passed onChange after render');
   });
 });