diff --git a/graphql_compose.libraries.yml b/graphql_compose.libraries.yml
new file mode 100644
index 0000000000000000000000000000000000000000..f0b5e6fb563bdb3752a77aa46508b42c890a91da
--- /dev/null
+++ b/graphql_compose.libraries.yml
@@ -0,0 +1,9 @@
+graphql_compose_admin:
+  js:
+    js/graphql.admin.js: {}
+  dependencies:
+    - core/jquery
+    - core/once
+    - core/drupal
+    - core/drupal.debounce
+    - core/drupalSettings
diff --git a/graphql_compose.module b/graphql_compose.module
index e0a988121a09b476f05105c4c90ac095154d4094..be71fdb87121f16963c9db56098103c5686ce74f 100644
--- a/graphql_compose.module
+++ b/graphql_compose.module
@@ -32,6 +32,10 @@ function graphql_compose_theme($existing, $type, $theme, $path)
 function template_preprocess_graphql_compose_settings_table(&$variables) {
   $element = $variables['element'];
   $header = [
+    [
+      'data' => '',
+      'class' => ['control'],
+    ],
     [
       'data' => t('Exposed'),
       'class' => ['exposed'],
@@ -44,11 +48,20 @@ function template_preprocess_graphql_compose_settings_table(&$variables) {
       'data' => t('Configuration'),
       'class' => ['configuration'],
     ],
+    [
+      'data' => '',
+    ],
   ];
   $rows = [];
   foreach (Element::children($element['bundles']) as $bundle) {
     $rows[$bundle] = [
       'data' => [
+        [
+          'data' => [
+            '#markup' => '<a data-control-graphql="' . $bundle . '">+</a>',
+          ],
+          'class' => ['control'],
+        ],
         [
           'data' => $element['bundles'][$bundle]['exposed'],
           'class' => ['exposed'],
@@ -65,13 +78,20 @@ function template_preprocess_graphql_compose_settings_table(&$variables) {
           'data' => $element['bundles'][$bundle]['prefix'],
           'class' => ['prefix'],
         ],
+        [
+          'data' => '',
+        ],
       ],
-      'class' => ['bundle-settings'],
+      'class' => ['entity-' . $bundle . '-settings'],
     ];
     foreach (Element::children($element['bundles'][$bundle]['fields']) as $field) {
       $fieldElement = $element['bundles'][$bundle]['fields'][$field];
       $rows[$bundle . $field] = [
         'data' => [
+          [
+            'data' => '',
+            'class' => ['control'],
+          ],
           [
             'data' => $fieldElement['exposed'],
             'class' => ['operations'],
@@ -85,13 +105,15 @@ function template_preprocess_graphql_compose_settings_table(&$variables) {
             'class' => ['bundle'],
           ],
           [
-            'data' => [
-              'formatter' => $fieldElement['formatter'],
-              'prefix' => $fieldElement['name']
-            ],
+            'data' => [$fieldElement['formatter']],
+            'class' => ['formatter'],
+          ],
+          [
+            'data' => [$fieldElement['name']],
             'class' => ['name'],
           ]
-        ]
+        ],
+        'class' => ['entity-' . $bundle, 'hidden'],
       ];
     }
   }
diff --git a/js/graphql.admin.js b/js/graphql.admin.js
new file mode 100644
index 0000000000000000000000000000000000000000..efe8f1d48833e5e04a00c6f13c28934137a4090e
--- /dev/null
+++ b/js/graphql.admin.js
@@ -0,0 +1,29 @@
+/**
+ * @file
+ * GraphQL compose behaviors.
+ */
+
+(function ($, Drupal, debounce, once) {
+
+  'use strict';
+
+  /**
+   * Toggle fields configuration in GrapqhQL config page
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the behavior for the toggle functionality.
+   */
+  Drupal.behaviors.graphQlToggleFields = {
+    attach: function (context, settings) {
+      $('.control a', context).each(function (el, val) {
+        var $el = $(val);
+        $el.click(function (e) {
+          e.preventDefault();
+          $(`tr.entity-${$el.data('control-graphql')}`).toggle('hidden');
+        });
+      });
+    }
+  };
+}(jQuery, Drupal, Drupal.debounce, once));
diff --git a/src/Form/GraphQlComposeSettingsForm.php b/src/Form/GraphQlComposeSettingsForm.php
index 26569ed9b554b3e26804ca79107131f006273fe4..4e21867c737f43e323554bd3ce89fc3631312472 100644
--- a/src/Form/GraphQlComposeSettingsForm.php
+++ b/src/Form/GraphQlComposeSettingsForm.php
@@ -9,8 +9,8 @@ use Drupal\Core\Entity\EntityFieldManagerInterface;
 use Drupal\Core\Form\ConfigFormBase;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Routing\RouteMatchInterface;
-use Symfony\Component\DependencyInjection\ContainerInterface;
 use Drupal\graphql_compose\GraphQlFormatterPluginManager;
+use Symfony\Component\DependencyInjection\ContainerInterface;
 
 /**
  * Configure the GraphQL formatters
@@ -158,6 +158,11 @@ class GraphQlComposeSettingsForm extends ConfigFormBase {
     asort($labels);
     $form = [
       '#labels' => $labels,
+      '#attached' => [
+        'library' => [
+          'graphql_compose/graphql_compose_admin'
+        ],
+      ],
       '#attributes' => [
         'class' => 'graphql-compose-settings-form',
       ],
@@ -199,10 +204,17 @@ class GraphQlComposeSettingsForm extends ConfigFormBase {
         ];
         $form['settings'][$entity_type_id]['bundles'][$bundle]['prefix'] = [
           '#type' => 'textfield',
+          '#title' => $this->t('GraphQL object name'),
+          '#description' => $this->t('The GraphQL object name applied to the entity'),
           '#maxlength' => 10,
           '#size' => 30,
           '#default_value' => isset($config[$entity_type_id]['bundles'][$bundle]['prefix']) ?
-            $config[$entity_type_id]['bundles'][$bundle]['prefix'] : 0,
+            $config[$entity_type_id]['bundles'][$bundle]['prefix'] : $this->nameToCamelCase($entity_type_id . '_' . $bundle, TRUE),
+          '#states' => [
+            'visible' => [
+              ':input[name="settings[' . $entity_type_id . '][bundles][' . $bundle . '][exposed]"]' => ['checked' => TRUE],
+            ],
+          ],
         ];
         $form['settings'][$entity_type_id]['bundles'][$bundle]['fields'] = [
           '#type' => 'container'
@@ -219,6 +231,8 @@ class GraphQlComposeSettingsForm extends ConfigFormBase {
                 $config[$entity_type_id]['bundles'][$bundle]['fields'][$field_name]['exposed'] : 0,
             ];
             $form['settings'][$entity_type_id]['bundles'][$bundle]['fields'][$field_name]['formatter'] = [
+              '#title' => $this->t('Formatter'),
+              '#description' => $this->t('The GraphQL formatter applied to the field'),
               '#type' => 'select',
               '#options' => $this->getGrahQLFormattersOptions($definition->getType()),
               '#default_value' =>  isset($config[$entity_type_id]['bundles'][$bundle]['fields'][$field_name]['formatter']) ?
@@ -230,9 +244,11 @@ class GraphQlComposeSettingsForm extends ConfigFormBase {
               ],
             ];
             $form['settings'][$entity_type_id]['bundles'][$bundle]['fields'][$field_name]['name'] = [
+              '#title' => $this->t('Name'),
+              '#description' => $this->t('The GraphQL field name'),
               '#type' => 'textfield',
               '#default_value' => isset($config[$entity_type_id]['bundles'][$bundle]['fields'][$field_name]['name']) ?
-              $config[$entity_type_id]['bundles'][$bundle]['fields'][$field_name]['name'] : 0,
+              $config[$entity_type_id]['bundles'][$bundle]['fields'][$field_name]['name'] : $this->nameToCamelCase($field_name),
               '#states' => [
                 'visible' => [
                   ':input[name="settings[' . $entity_type_id . '][bundles][' . $bundle . '][fields][' . $field_name . '][exposed]"]' => ['checked' => TRUE],
@@ -290,4 +306,14 @@ class GraphQlComposeSettingsForm extends ConfigFormBase {
     return $this->defaultFormatters[$type];
   }
 
+  /**
+   * {@inheritdoc}
+   */
+  public function nameToCamelCase($string, $capitalizeFirstCharacter = false) {
+    $str = str_replace('_', '', ucwords($string, '_'));
+    if (!$capitalizeFirstCharacter) {
+      $str = lcfirst($str);
+    }
+    return $str;
+  }
 }