diff --git a/core/modules/image/image.admin.inc b/core/modules/image/image.admin.inc
index b8f9c96..c269d84 100644
--- a/core/modules/image/image.admin.inc
+++ b/core/modules/image/image.admin.inc
@@ -16,50 +16,38 @@
  */
 function theme_image_style_effects($variables) {
   $form = $variables['form'];
-  $rows = array();
 
-  foreach (element_children($form) as $key) {
-    $row = array();
-    $form[$key]['weight']['#attributes']['class'] = array('image-effect-order-weight');
-    if ($key != 'new') {
-      $summary = drupal_render($form[$key]['summary']);
-      $row[] = drupal_render($form[$key]['label']) . (empty($summary) ? '' : ' ' . $summary);
-      $row[] = drupal_render($form[$key]['weight']);
-      $row[] = array('data' => $form[$key]['operations']);
-    }
-    else {
-      // Add the row for adding a new image effect.
-      $row[] = '<div class="image-style-new">' . drupal_render($form['new']['new']) . drupal_render($form['new']['add']) . '</div>';
-      $row[] = drupal_render($form['new']['weight']);
-      $row[] = '';
-    }
+  $table = array(
+    '#type' => 'table',
+    '#header' => array(
+      t('Effect'),
+      t('Weight'),
+      t('Operations'),
+    ),
+    '#tabledrag' => array(
+      array('image-style-effects', 'order', 'sibling', 'image-effect-order-weight'),
+    ),
+    '#empty' => t('There are currently no effects in this style. Add one by selecting an option below.'),
+  );
 
-    $rows[] = array(
-      'data' => $row,
+  $row_defaults = array(
+    '#attributes' => array(
       'class' => array('draggable'),
-    );
-  }
-
-  $header = array(
-    t('Effect'),
-    t('Weight'),
-    t('Operations'),
+    )
   );
 
-  if (count($rows) == 1 && (!isset($form['new']['#access']) || $form['new']['#access'])) {
-    array_unshift($rows, array(array(
-      'data' => t('There are currently no effects in this style. Add one by selecting an option below.'),
-      'colspan' => 4,
-    )));
+  foreach (element_children($form) as $key) {
+      $summary = drupal_render($form[$key]['summary']);
+
+      $table[$key] = $row_defaults + array(
+        'label_summary' => array(
+          '#markup' => drupal_render($form[$key]['label']) . (empty($summary) ? '' : ' ' . $summary),
+        ),
+        'weight' => $form[$key]['weight'],
+        'operations' => $form[$key]['operations'],
+      );
   }
 
-  $table = array(
-    '#theme' => 'table',
-    '#header' => $header,
-    '#rows' => $rows,
-    '#attributes' => array('id' => 'image-style-effects'),
-  );
-  drupal_add_tabledrag('image-style-effects', 'order', 'sibling', 'image-effect-order-weight');
   return drupal_render($table);
 }
 
diff --git a/core/modules/image/image.module b/core/modules/image/image.module
index 10b65dd..2e7ad2e 100644
--- a/core/modules/image/image.module
+++ b/core/modules/image/image.module
@@ -109,6 +109,11 @@ function image_menu() {
     'title' => 'Edit',
     'type' => MENU_DEFAULT_LOCAL_TASK,
   );
+  $items['admin/config/media/image-styles/manage/%image_style/effect/add'] = array(
+    'title' => 'Add image effect',
+    'route_name' => 'image.effect_choose_form',
+    'type' => MENU_LOCAL_ACTION,
+  );
   $items['admin/config/media/image-styles/manage/%/effects/%'] = array(
     'title' => 'Edit image effect',
     'description' => 'Edit an existing effect within a style.',
diff --git a/core/modules/image/image.routing.yml b/core/modules/image/image.routing.yml
index 4a6d515..f89cd0b 100644
--- a/core/modules/image/image.routing.yml
+++ b/core/modules/image/image.routing.yml
@@ -41,6 +41,13 @@ image.style_private:
   requirements:
     _access: 'TRUE'
 
+image.effect_choose_form:
+  path: '/admin/config/media/image-styles/manage/{image_style}/effect/add'
+  defaults:
+    _form: '\Drupal\image\Form\ImageEffectChooseForm'
+  requirements:
+    _permission: 'administer image styles'
+
 image.effect_add_form:
   path: '/admin/config/media/image-styles/manage/{image_style}/add/{image_effect}'
   defaults:
diff --git a/core/modules/image/lib/Drupal/image/Form/ImageEffectChooseForm.php b/core/modules/image/lib/Drupal/image/Form/ImageEffectChooseForm.php
new file mode 100644
index 0000000..c898023
--- /dev/null
+++ b/core/modules/image/lib/Drupal/image/Form/ImageEffectChooseForm.php
@@ -0,0 +1,145 @@
+<?php
+
+/**
+ * @file
+ * Contains \Drupal\image\Form\ImageEffectChooseForm.
+ */
+
+namespace Drupal\image\Form;
+
+use Drupal\Core\DependencyInjection\ContainerInjectionInterface;
+use Drupal\Core\Entity\EntityStorageControllerInterface;
+use Drupal\image\Entity\ImageStyle;
+use Drupal\image\ImageEffectManager;
+use Drupal\image\ImageStyleInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+/**
+ * Controller for image effect choose form.
+ */
+class ImageEffectChooseForm extends ImageEffectFormBase implements ContainerInjectionInterface {
+
+  /**
+   * The image effect manager service.
+   *
+   * @var ImageEffectManager
+   */
+  protected $imageEffectManager;
+
+  /**
+   * The image style entity
+   *
+   * @var ImageStyle
+   */
+  protected $imageStyle;
+
+  public function getFormId() {
+    return 'image_effect_choose_form';
+  }
+
+  /**
+   * Constructs an ImageEffectChooseForm object
+   *
+   * @param ImageEffectManager $image_effect_manager
+   *   The image effect manager service.
+   */
+  public function __construct(ImageEffectManager $image_effect_manager) {
+    $this->imageEffectManager = $image_effect_manager;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container) {
+    return new static(
+        $container->get('plugin.manager.image.effect')
+    );
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildform(array $form, array &$form_state, ImageStyleInterface $image_style = NULL) {
+
+    $this->imageStyle = $image_style;
+
+    // @todo Remove drupal_set_title() in http://drupal.org/node/1981644
+    $title = $this->t('Add new image effect for style %name', array('%name' => $image_style->label()));
+    drupal_set_title($title, PASS_THROUGH);
+
+    $form['#tree'] = TRUE;
+    $form['#attached']['css'][drupal_get_path('module', 'image') . '/css/image.admin.css'] = array();
+
+    // Build the new image effect addition form and add it to the effect list.
+    $new_effect_options = array();
+    $effects = $this->imageEffectManager->getDefinitions();
+    uasort($effects, function ($a, $b) {
+          return strcasecmp($a['id'], $b['id']);
+        });
+    foreach ($effects as $effect => $definition) {
+      $new_effect_options[$effect] = $definition['label'];
+    }
+
+    $form['new'] = array(
+      '#type' => 'select',
+      '#title' => $this->t('Effect'),
+      '#options' => $new_effect_options,
+      '#empty_option' => $this->t('Select a new effect'),
+    );
+    $form['weight'] = array(
+      '#type' => 'weight',
+      '#title' => $this->t('Weight'),
+    );
+    $form['add'] = array(
+      '#type' => 'submit',
+      '#value' => $this->t('Add'),
+      '#validate' => array(array($this, 'effectValidate')),
+      '#submit' => array(array($this, 'effectSave')),
+    );
+
+    return $form;
+  }
+
+  /**
+   * Validate handler for image effect.
+   */
+  public function effectValidate(array &$form, array &$form_state) {
+    if (!$form_state['values']['new']) {
+      form_error($form['new'], $this->t('Select an effect to add.'));
+    }
+  }
+
+  /**
+   * Submit handler for image effect.
+   */
+  public function effectSave(array &$form, array &$form_state) {
+
+    // Check if this field has any configuration options.
+    $effect = $this->imageEffectManager->getDefinition($form_state['values']['new']);
+    // Load the configuration form for this option.
+    if (is_subclass_of($effect['class'], '\Drupal\image\ConfigurableImageEffectInterface')) {
+      $path = 'admin/config/media/image-styles/manage/' . $this->imageStyle->id() . '/add/' . $form_state['values']['new'];
+      $form_state['redirect'] = array($path, array('query' => array('weight' => $form_state['values']['weight'])));
+    }
+    // If there's no form, immediately add the image effect.
+    else {
+      $effect = array(
+        'id' => $effect['id'],
+        'data' => array(),
+        'weight' => $form_state['values']['weight'],
+      );
+      $this->imageStyle->saveImageEffect($effect);
+
+      drupal_set_message($this->t('The image effect was successfully applied.'));
+      $form_state['redirect'] = 'admin/config/media/image-styles/manage/' . $this->imageStyle->id();
+    }
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function prepareImageEffect($image_effect) {
+    return $this->imageStyle->getEffect($image_effect);
+  }
+
+}
\ No newline at end of file
diff --git a/core/modules/image/lib/Drupal/image/Form/ImageStyleEditForm.php b/core/modules/image/lib/Drupal/image/Form/ImageStyleEditForm.php
index 8381a8a..164b4d0 100644
--- a/core/modules/image/lib/Drupal/image/Form/ImageStyleEditForm.php
+++ b/core/modules/image/lib/Drupal/image/Form/ImageStyleEditForm.php
@@ -119,39 +119,6 @@ public function form(array $form, array &$form_state) {
       );
     }
 
-    // Build the new image effect addition form and add it to the effect list.
-    $new_effect_options = array();
-    $effects = $this->imageEffectManager->getDefinitions();
-    uasort($effects, function ($a, $b) {
-      return strcasecmp($a['id'], $b['id']);
-    });
-    foreach ($effects as $effect => $definition) {
-      $new_effect_options[$effect] = $definition['label'];
-    }
-    $form['effects']['new'] = array(
-      '#tree' => FALSE,
-      '#weight' => isset($form_state['input']['weight']) ? $form_state['input']['weight'] : NULL,
-    );
-    $form['effects']['new']['new'] = array(
-      '#type' => 'select',
-      '#title' => $this->t('Effect'),
-      '#title_display' => 'invisible',
-      '#options' => $new_effect_options,
-      '#empty_option' => $this->t('Select a new effect'),
-    );
-    $form['effects']['new']['weight'] = array(
-      '#type' => 'weight',
-      '#title' => $this->t('Weight for new effect'),
-      '#title_display' => 'invisible',
-      '#default_value' => count($form['effects']) - 1,
-    );
-    $form['effects']['new']['add'] = array(
-      '#type' => 'submit',
-      '#value' => $this->t('Add'),
-      '#validate' => array(array($this, 'effectValidate')),
-      '#submit' => array(array($this, 'effectSave')),
-    );
-
     return parent::form($form, $form_state);
   }
 
@@ -182,27 +149,6 @@ public function effectSave($form, &$form_state) {
     if ($status == SAVED_UPDATED) {
       drupal_set_message($this->t('Changes to the style have been saved.'));
     }
-
-    // Check if this field has any configuration options.
-    $effect = $this->imageEffectManager->getDefinition($form_state['values']['new']);
-
-    // Load the configuration form for this option.
-    if (is_subclass_of($effect['class'], '\Drupal\image\ConfigurableImageEffectInterface')) {
-      $path = 'admin/config/media/image-styles/manage/' . $this->entity->id() . '/add/' . $form_state['values']['new'];
-      $form_state['redirect'] = array($path, array('query' => array('weight' => $form_state['values']['weight'])));
-    }
-    // If there's no form, immediately add the image effect.
-    else {
-      $effect = array(
-        'id' => $effect['id'],
-        'data' => array(),
-        'weight' => $form_state['values']['weight'],
-      );
-      $effect_id = $this->entity->saveImageEffect($effect);
-      if (!empty($effect_id)) {
-        drupal_set_message($this->t('The image effect was successfully applied.'));
-      }
-    }
   }
 
   /**