diff --git a/app/javascript/components/index.js b/app/javascript/components/index.js
index f6fc06c1ee..7eb8971242 100644
--- a/app/javascript/components/index.js
+++ b/app/javascript/components/index.js
@@ -89,7 +89,10 @@ export const coreComponents = [
     name: 'PlanWizardAdvancedOptionsStepContainer',
     type: PlanWizardAdvancedOptionsStepContainer,
     data: {
-      url: '/api/something'
+      fetchPlaybooksUrl:
+        '/api/service_templates/?' +
+        "filter[]=type='ServiceTemplateAnsiblePlaybook'" +
+        '&expand=resources'
     },
     store: true
   },
diff --git a/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardAdvancedOptionsStep/PlanWizardAdvancedOptionsStep.js b/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardAdvancedOptionsStep/PlanWizardAdvancedOptionsStep.js
index 4b40dfec11..ff1d2f2873 100644
--- a/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardAdvancedOptionsStep/PlanWizardAdvancedOptionsStep.js
+++ b/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardAdvancedOptionsStep/PlanWizardAdvancedOptionsStep.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
-import { Form } from 'patternfly-react';
+import { Form, Spinner } from 'patternfly-react';
 
 import PlanWizardAdvancedOptionsStepTable from './components/PlanWizardAdvancedOptionsStepTable/PlanWizardAdvancedOptionsStepTable';
 import { BootstrapSelect } from '../../../../../common/forms/BootstrapSelect';
@@ -16,8 +16,8 @@ class PlanWizardAdvancedOptionsStep extends Component {
   }
 
   componentDidMount() {
-    const { getPlaybooksActionCreator } = this.props;
-    getPlaybooksActionCreator();
+    const { fetchPlaybooksAction, fetchPlaybooksUrl } = this.props;
+    fetchPlaybooksAction(fetchPlaybooksUrl);
   }
 
   onSelectChange = (event, scheduleType) => {
@@ -38,35 +38,33 @@ class PlanWizardAdvancedOptionsStep extends Component {
     } = this.props;
 
     return (
-      <React.Fragment>
-        {!isFetchingPlaybooks && (
-          <Form className="playbook-selects">
-            <Field
-              name="preMigrationPlaybook"
-              component={BootstrapSelect}
-              options={playbooks}
-              option_key="id"
-              option_value="name"
-              label={__('Select pre-migration playbook service (optional)')}
-              stacked_label
-              controlWidth={12}
-              allowClear
-              onChange={event => this.onSelectChange(event, 'preMigration')}
-            />
-            <Field
-              name="postMigrationPlaybook"
-              component={BootstrapSelect}
-              options={playbooks}
-              option_key="id"
-              option_value="name"
-              label={__('Select post-migration playbook service (optional)')}
-              stacked_label
-              controlWidth={12}
-              allowClear
-              onChange={event => this.onSelectChange(event, 'postMigration')}
-            />
-          </Form>
-        )}
+      <Spinner loading={isFetchingPlaybooks}>
+        <Form className="playbook-selects">
+          <Field
+            name="preMigrationPlaybook"
+            component={BootstrapSelect}
+            options={playbooks}
+            option_key="id"
+            option_value="name"
+            label={__('Select pre-migration playbook service (optional)')}
+            stacked_label
+            controlWidth={12}
+            allowClear
+            onChange={event => this.onSelectChange(event, 'preMigration')}
+          />
+          <Field
+            name="postMigrationPlaybook"
+            component={BootstrapSelect}
+            options={playbooks}
+            option_key="id"
+            option_value="name"
+            label={__('Select post-migration playbook service (optional)')}
+            stacked_label
+            controlWidth={12}
+            allowClear
+            onChange={event => this.onSelectChange(event, 'postMigration')}
+          />
+        </Form>
         <Field
           name="playbookVms"
           component={PlanWizardAdvancedOptionsStepTable}
@@ -89,7 +87,7 @@ class PlanWizardAdvancedOptionsStep extends Component {
             advancedOptionsStepForm.values.playbookVms.postMigration
           }
         />
-      </React.Fragment>
+      </Spinner>
     );
   }
 }
diff --git a/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardAdvancedOptionsStep/PlanWizardAdvancedOptionsStepActions.js b/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardAdvancedOptionsStep/PlanWizardAdvancedOptionsStepActions.js
index f5dfc6016f..28cadfeb1b 100644
--- a/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardAdvancedOptionsStep/PlanWizardAdvancedOptionsStepActions.js
+++ b/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardAdvancedOptionsStep/PlanWizardAdvancedOptionsStepActions.js
@@ -1,3 +1,6 @@
+import URI from 'urijs';
+import API from '../../../../../../../../common/API';
+
 import {
   FETCH_V2V_PLAYBOOKS,
   SET_V2V_ADVANCED_OPTIONS_STEP_VMS,
@@ -6,12 +9,17 @@ import {
 
 import { playbooks } from './PlanWizardAdvancedOptionsStep.fixtures';
 
-export const getPlaybooksActionCreator = () => dispatch =>
+export const _getPlaybooksActionCreator = url => dispatch =>
   dispatch({
     type: FETCH_V2V_PLAYBOOKS,
-    payload: Promise.resolve({ data: playbooks })
+    payload: API.get(url)
   });
 
+export const fetchPlaybooksAction = url => {
+  const uri = new URI(url);
+  return _getPlaybooksActionCreator(uri.toString());
+};
+
 export const setVmsAction = vms => ({
   type: SET_V2V_ADVANCED_OPTIONS_STEP_VMS,
   payload: vms
diff --git a/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardAdvancedOptionsStep/PlanWizardAdvancedOptionsStepReducer.js b/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardAdvancedOptionsStep/PlanWizardAdvancedOptionsStepReducer.js
index e16203d8be..013b4466b4 100644
--- a/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardAdvancedOptionsStep/PlanWizardAdvancedOptionsStepReducer.js
+++ b/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardAdvancedOptionsStep/PlanWizardAdvancedOptionsStepReducer.js
@@ -22,7 +22,7 @@ export default (state = initialState, action) => {
         .set('isRejectedPlaybooks', false);
     case `${FETCH_V2V_PLAYBOOKS}_FULFILLED`:
       return state
-        .set('playbooks', action.payload.data)
+        .set('playbooks', action.payload.data.resources)
         .set('isFetchingPlaybooks', false)
         .set('isRejectedPlaybooks', false)
         .set('errorPlaybooks', null);