diff --git a/CHANGELOG.md b/CHANGELOG.md
index b39942b1c906e4fda7f5f80a2007a19ec75adee3..3e86e56fc28aae977290ca703fe2822595aa5a5e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.0] - 18-07-2019
+- Added Card Grid display format
+- Added Event Grid display format
+- Added support for using grouping field in Accordion and Teaser List DF
+- Added settings menu in /admin/config/display-formats/settings
+- Fixed color consistency for all display formats
 
 ## [1.3.0] - 24-04-2019
 - Added Vertical Boxes display format
diff --git a/assets/css/event-grid.css b/assets/css/event-grid.css
new file mode 100644
index 0000000000000000000000000000000000000000..517c94959ffb8241cedb3f36459304edb3ec4b54
--- /dev/null
+++ b/assets/css/event-grid.css
@@ -0,0 +1,6 @@
+.event-grid .views-row {
+  height: 297px; }
+  .event-grid .views-row .agenda-box-pattern {
+    height: 100%; }
+
+/*# sourceMappingURL=event-grid.css.map */
diff --git a/assets/js/accordion.js b/assets/js/accordion.js
new file mode 100644
index 0000000000000000000000000000000000000000..a15ccd4df222a4bbea10287fd078d162db139038
--- /dev/null
+++ b/assets/js/accordion.js
@@ -0,0 +1,8 @@
+(function ($, Drupal, drupalSettings) {
+    Drupal.behaviors.AccordionBehavior = {
+        attach: function (context, settings) {
+            // can access setting from 'drupalSettings';
+            $('.accordion-cern .panel-heading a', context).once().css('cssText','color: '+ drupalSettings.displayFormats.accordion.titleColor+ ';');
+        }
+    };
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/assets/js/countdown.js b/assets/js/countdown.js
new file mode 100644
index 0000000000000000000000000000000000000000..3788b05c0f7cf55f6005fd6e9d304313ad8bdc1f
--- /dev/null
+++ b/assets/js/countdown.js
@@ -0,0 +1,12 @@
+(function ($, Drupal, drupalSettings) {
+    Drupal.behaviors.CountdownBehavior = {
+        attach: function (context, settings) {
+            // can access setting from 'drupalSettings';
+            $('.events-countdown h1.mb-3', context).once().css('cssText','color: '+ drupalSettings.displayFormats.countdown.titleColor+ ';');
+            $('.agenda-coming-soon-date h2', context).once().css('cssText','color: '+ drupalSettings.displayFormats.countdown.dateColor+ ';');
+            $('.agenda-coming-soon-link a', context).once().css('cssText','color: '+ drupalSettings.displayFormats.countdown.linkColor+ ';');
+            $('.agenda-coming-soon-place', context).once().css('cssText','color: '+ drupalSettings.displayFormats.countdown.placeColor+ ';');
+            $('.agenda-coming-soon-countdown h1, .agenda-coming-soon-countdown h4', context).once().css('cssText','color: '+ drupalSettings.displayFormats.countdown.dateColor+ ';');
+        }
+    };
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/assets/js/featured-banner.js b/assets/js/featured-banner.js
new file mode 100644
index 0000000000000000000000000000000000000000..12054af1965e9fe390cadff1eb298dddb784ef79
--- /dev/null
+++ b/assets/js/featured-banner.js
@@ -0,0 +1,10 @@
+(function ($, Drupal, drupalSettings) {
+    Drupal.behaviors.FeaturedBannerBehavior = {
+        attach: function (context, settings) {
+            // can access setting from 'drupalSettings';
+            $('.featured-banner .featured-title a', context).once().css('cssText','color: '+ drupalSettings.displayFormats.featured_banner.linkColor+ ';');
+            $('.featured-banner .preview-cards__subtext *', context).once().css('cssText','color: '+ drupalSettings.displayFormats.featured_banner.subtextColor+ ';');
+            $('.featured-banner .component-preview-cards', context).once().css('cssText','background-color: '+ drupalSettings.displayFormats.featured_banner.backgroundColor+ ';');
+        }
+    };
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/assets/scss/event-grid.scss b/assets/scss/event-grid.scss
new file mode 100644
index 0000000000000000000000000000000000000000..50471a520e34b428192cf9e231178330982cf069
--- /dev/null
+++ b/assets/scss/event-grid.scss
@@ -0,0 +1,9 @@
+.event-grid{
+  .views-row{
+    height: 297px;
+
+    .agenda-box-pattern{
+      height: 100%;
+    }
+  }
+}
\ No newline at end of file
diff --git a/cern_display_formats.info.yml b/cern_display_formats.info.yml
index 2f8327d087e8bafc643a7bb21ab40f63abc1d8de..ca88bb808cb7f3ea9fb4332a3afb619519c75faa 100755
--- a/cern_display_formats.info.yml
+++ b/cern_display_formats.info.yml
@@ -2,8 +2,8 @@ name: CERN Display Formats
 type: module
 description: 'Provides a set of display formats designed for the needs of the CERN users.'
 package: Web Team Drupal Library
-version: 1.3.0
+version: 1.4.0
 core: '8.x'
 dependencies:
   - drupal:views
-  - cern_components (>=8.x-2.4.0)
\ No newline at end of file
+  - cern_components (>=8.x-2.6.0)
\ No newline at end of file
diff --git a/cern_display_formats.libraries.yml b/cern_display_formats.libraries.yml
index bf19ffe6381519196701513b9de0dbd79e7ffb1e..48d664599a42171fc364bbcc6debd84db0edf149 100644
--- a/cern_display_formats.libraries.yml
+++ b/cern_display_formats.libraries.yml
@@ -1,11 +1,47 @@
+accordion-stylesheets:
+  version: 1.x
+  js:
+    assets/js/accordion.js: {}
+  dependencies:
+    - core/jquery
+    - core/jquery.once
+    - core/drupalSettings
+
 teaser-list-stylesheets:
   version: 1.x
   css:
     layout:
       assets/css/teaser-list.css: {}
+  dependencies:
+    - core/jquery
+    - core/jquery.once
+    - core/drupalSettings
 
 featured-banner-stylesheets:
   version: 1.x
   css:
     layout:
-      assets/css/featured-banner.css: {}
\ No newline at end of file
+      assets/css/featured-banner.css: {}
+  js:
+    assets/js/featured-banner.js: {}
+
+event-grid-stylesheets:
+  version: 1.x
+  css:
+    layout:
+      assets/css/event-grid.css: {}
+  js:
+    assets/js/event-grid.js: {}
+  dependencies:
+    - core/jquery
+    - core/jquery.once
+    - core/drupalSettings
+
+countdown-stylesheets:
+  version: 1.x
+  js:
+    assets/js/countdown.js: {}
+  dependencies:
+    - core/jquery
+    - core/jquery.once
+    - core/drupalSettings
\ No newline at end of file
diff --git a/cern_display_formats.links.menu.yml b/cern_display_formats.links.menu.yml
new file mode 100644
index 0000000000000000000000000000000000000000..fa92fdbc62ea1ec55a26147436f72e7555dc654d
--- /dev/null
+++ b/cern_display_formats.links.menu.yml
@@ -0,0 +1,13 @@
+cern_display_formats.cern_exclusive:
+  title: 'CERN Exclusive'
+  parent: system.admin_config
+  description: 'Settings of modules exclusively built for CERN infrastructure'
+  route_name: cern_display_formats.admin_settings_form
+  weight: -30
+
+cern_display_formats.admin_settings_form:
+  title: 'Display Formats'
+  route_name: cern_display_formats.admin_settings_form
+  description: 'Administrative settings for CERN Display Formats'
+  parent: cern_display_formats.cern_exclusive
+  weight: 0
\ No newline at end of file
diff --git a/cern_display_formats.module b/cern_display_formats.module
index 06102e960ee65aaef93891881c51412c9c2cc001..4f5cd6c6b0dc00d54b1cb690fad259f62e5d374b 100755
--- a/cern_display_formats.module
+++ b/cern_display_formats.module
@@ -32,26 +32,52 @@ function cern_display_formats_theme($existing, $type, $theme, $path) {
     );
 }
 
-
 /**
- * Implements hook_views_post_render().
+ * Sets css classes and theming libraries before rendering the view
+ *
+ * @param ViewExecutable $view
  */
-function cern_display_formats_views_post_render(ViewExecutable $view, &$output, CachePluginBase $cache) {
-	//sets css classes to the view based on selected format
+function cern_display_formats_views_pre_render(ViewExecutable $view){
+
+	$admin_form = \Drupal::config('cern_display_formats.adminsettings');	// gets the admin form
+
 	if ($view->display_handler->view->style_plugin->getPluginId() == "horizontal_boxes") {
 		$view->display_handler->setOption('css_class', 'horizontal-boxes');
 	} elseif ($view->display_handler->view->style_plugin->getPluginId() == "collision") {
 		$view->display_handler->setOption('css_class', 'events-collision');
 	} elseif ($view->display_handler->view->style_plugin->getPluginId() == "countdown") {
+		$date_color =	$admin_form->get('countdown_date_color');
+		$link_color = $admin_form->get('countdown_link_color');
+		$place_color = $admin_form->get('countdown_place_color');
+		$title_color = $admin_form->get('countdown_title_color');
+		$view->element['#attached']['drupalSettings']['displayFormats']['countdown']['titleColor'] = $title_color;
+		$view->element['#attached']['drupalSettings']['displayFormats']['countdown']['dateColor'] = $date_color;
+		$view->element['#attached']['drupalSettings']['displayFormats']['countdown']['linkColor'] = $link_color;
+		$view->element['#attached']['drupalSettings']['displayFormats']['countdown']['placeColor'] = $place_color;
+		$view->element['#attached']['library'][] = 'cern_display_formats/countdown-stylesheets';
 		$view->display_handler->setOption('css_class', 'events-countdown');
 	} elseif ($view->display_handler->view->style_plugin->getPluginId() == "teaser_list") {
 		$view->display_handler->setOption('css_class', 'teaser-list');
 	} elseif ($view->display_handler->view->style_plugin->getPluginId() == "featured_banner") {
+		$link_color = $admin_form->get('featured_banner_link_color');
+		$subtext_color = $admin_form->get('featured_banner_subtext_color');
+		$background_color = $admin_form->get('featured_banner_background_color');
+		$view->element['#attached']['drupalSettings']['displayFormats']['featured_banner']['linkColor'] = $link_color;
+		$view->element['#attached']['drupalSettings']['displayFormats']['featured_banner']['subtextColor'] = $subtext_color;
+		$view->element['#attached']['drupalSettings']['displayFormats']['featured_banner']['backgroundColor'] = $background_color;
 		$view->display_handler->setOption('css_class', 'featured-banner');
-		$output['#attached']['library'][] = "cern_display_formats/featured-banner-stylesheets";	//attaches the stylesheet
+		$view->element['#attached']['library'][] = "cern_display_formats/featured-banner-stylesheets";	//attaches the stylesheet
 	} elseif ($view->display_handler->view->style_plugin->getPluginId() == "vertical_boxes") {
 		$view->display_handler->setOption('css_class', 'vertical-boxes');
 	} elseif ($view->display_handler->view->style_plugin->getPluginId() == "accordion") {
 		$view->display_handler->setOption('css_class', 'accordion-cern');
+		$view->element['#attached']['library'][] = 'cern_display_formats/accordion-stylesheets'; //attaches the stylesheet
+		$title_color = $admin_form->get('accordion_title_color');
+		$view->element['#attached']['drupalSettings']['displayFormats']['accordion']['titleColor'] = $title_color;
+	} elseif ($view->display_handler->view->style_plugin->getPluginId() == "card_grid") {
+		$view->display_handler->setOption('css_class', 'card-grid');
+	} elseif ($view->display_handler->view->style_plugin->getPluginId() == "event_grid") {
+		$view->display_handler->setOption('css_class', 'event-grid');
+		$view->element['#attached']['library'][] = "cern_display_formats/event-grid-stylesheets";	//attaches the stylesheet
 	}
-}
\ No newline at end of file
+}
diff --git a/cern_display_formats.routing.yml b/cern_display_formats.routing.yml
new file mode 100644
index 0000000000000000000000000000000000000000..a787b6014cbb2968be3de36968fe8b6317022cce
--- /dev/null
+++ b/cern_display_formats.routing.yml
@@ -0,0 +1,9 @@
+cern_display_formats.admin_settings_form:
+  path: '/admin/config/display-formats/settings'
+  defaults:
+    _form: '\Drupal\cern_display_formats\Form\DisplayFormatsSettingsForm'
+    _title: 'Display Formats'
+  requirements:
+    _permission: 'administer site configuration'
+  options:
+    _admin_route: TRUE
\ No newline at end of file
diff --git a/src/Form/DisplayFormatsSettingsForm.php b/src/Form/DisplayFormatsSettingsForm.php
new file mode 100644
index 0000000000000000000000000000000000000000..b00e79d0c2cd80e5ff220afa4de7a8c7dc0a0735
--- /dev/null
+++ b/src/Form/DisplayFormatsSettingsForm.php
@@ -0,0 +1,145 @@
+<?php
+
+
+namespace Drupal\cern_display_formats\Form;
+
+use Drupal\Core\Form\ConfigFormBase;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Sets administrative form for CERN Display Formats
+ *
+ * Class DisplayFormatsSettingsForm
+ * @package Drupal\cern_display_formats\Form
+ */
+class DisplayFormatsSettingsForm extends ConfigFormBase {
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function getEditableConfigNames() {
+		return [
+				'cern_display_formats.adminsettings',
+		];
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	public function getFormId() {
+		return 'cern_display_formats_settings';
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	public function buildForm(array $form, FormStateInterface $form_state) {
+		$config = $this->config('cern_display_formats.adminsettings');
+
+		//	Accordion form settings
+		$form['accordion'] = array(
+			'#type' => 'details',
+			'#title' => $this->t('Accordion Format'),
+			'#open' => TRUE,
+		);
+
+		$form['accordion']['accordion_title_color'] = array(
+				'#type' => 'color',
+				'#title' => t('Title Color'),
+				'#description' => t('Choose the color that you want the Accordion title to have. Defaults to #000000. '),
+				'#default_value' => (!empty($config->get('accordion_title_color'))) ? $config->get('accordion_title_color') : '#000000',
+		);
+
+		//	Countdown form settings
+		$form['countdown'] = array(
+				'#type' => 'details',
+				'#title' => $this->t('Countdown Display Format'),
+				'#open' => TRUE,
+		);
+
+		$form['countdown']['countdown_title_color'] = array(
+				'#type' => 'color',
+				'#title' => t('Countdown View Title Color'),
+				'#description' => t('Choose the color that you want the Countdown view title to have. Defaults to white.'),
+				'#default_value' => (!empty($config->get('countdown_title_color'))) ? $config->get('countdown_title_color') : '#FFFFFF',
+		);
+
+		$form['countdown']['countdown_date_color'] = array(
+				'#type' => 'color',
+				'#title' => t('Countdown Date Color'),
+				'#description' => t('Choose the color that you want the Countdown date to be. Defaults to white.'),
+				'#default_value' => (!empty($config->get('countdown_date_color'))) ? $config->get('countdown_date_color') : '#FFFFFF',
+		);
+
+		$form['countdown']['countdown_link_color'] = array(
+				'#type' => 'color',
+				'#title' => t('Countdown Link Color'),
+				'#description' => t('Choose the color that you want the Countdown link to be. Defaults to white.'),
+				'#default_value' => (!empty($config->get('countdown_link_color'))) ? $config->get('countdown_link_color') : '#FFFFFF',
+		);
+
+		$form['countdown']['countdown_place_color'] = array(
+				'#type' => 'color',
+				'#title' => t('Countdown Place Color'),
+				'#description' => t('Choose the color that you want the Countdown place to be. Defaults to white.'),
+				'#default_value' => (!empty($config->get('countdown_place_color'))) ? $config->get('countdown_place_color') : '#FFFFFF',
+		);
+
+		//	Featured Banner form settings
+		$form['featured_banner'] = array(
+				'#type' => 'details',
+				'#title' => $this->t('Featured Banner Display Format'),
+				'#open' => TRUE,
+		);
+
+		$form['featured_banner']['featured_banner_link_color'] = array(
+				'#type' => 'color',
+				'#title' => t('Featured Banner link title'),
+				'#description' => t('Choose the color that you want the Featured Banner link titles to have. Defaults to blue.'),
+				'#default_value' => (!empty($config->get('featured_banner_link_color'))) ? $config->get('featured_banner_link_color') : '#2574b9',
+		);
+
+		$form['featured_banner']['featured_banner_subtext_color'] = array(
+				'#type' => 'color',
+				'#title' => t('Featured Banner Subtext Color'),
+				'#description' => t('Choose the color that you want the Featured Banner subtext to have. Defaults to black.'),
+				'#default_value' => (!empty($config->get('featured_banner_subtext_color'))) ? $config->get('featured_banner_subtext_color') : '#000000',
+		);
+
+		$form['featured_banner']['featured_banner_background_color'] = array(
+				'#type' => 'color',
+				'#title' => t('Featured Banner Background Color'),
+				'#description' => t('Choose the color that you want the Featured Banner background color to be. Defaults to white.'),
+				'#default_value' => (!empty($config->get('featured_banner_background_color'))) ? $config->get('featured_banner_background_color') : '#FFFFFF',
+		);
+
+
+
+
+		return parent::buildForm($form, $form_state);
+	}
+
+
+	/**
+	 * {@inheritdoc}
+	 */
+	public function submitForm(array &$form, FormStateInterface $form_state) {
+		parent::submitForm($form, $form_state);
+
+		$this->config('cern_display_formats.adminsettings')
+				->set('accordion_title_color', $form_state->getValue('accordion_title_color'))
+				->set('teaser_list_title_color', $form_state->getValue('teaser_list_title_color'))
+				->set('teaser_list_title_color_card', $form_state->getValue('teaser_list_title_color_card'))
+				->set('countdown_date_color', $form_state->getValue('countdown_date_color'))
+				->set('countdown_link_color', $form_state->getValue('countdown_link_color'))
+				->set('countdown_place_color', $form_state->getValue('countdown_place_color'))
+				->set('countdown_title_color', $form_state->getValue('countdown_title_color'))
+				->set('featured_banner_link_color', $form_state->getValue('featured_banner_link_color'))
+				->set('featured_banner_subtext_color', $form_state->getValue('featured_banner_subtext_color'))
+				->set('featured_banner_background_color', $form_state->getValue('featured_banner_background_color'))
+				->save();
+		\Drupal::service('cache.render')->invalidateAll();	// clears the caches
+	}
+
+
+}
\ No newline at end of file
diff --git a/src/Plugin/views/style/Accordion.php b/src/Plugin/views/style/Accordion.php
index a2ae76c9f486f72f27dada24d74a3090425e7a45..a45ac82cd7bd34c9ba27749184a5e4e7b26951e6 100644
--- a/src/Plugin/views/style/Accordion.php
+++ b/src/Plugin/views/style/Accordion.php
@@ -30,8 +30,20 @@ class Accordion extends DefaultStyle {
 
 	protected $usesoptions = true;
 
+	/**
+	 * Whether the format will allow rendering fields
+	 *
+	 * @var bool
+	 */
 	protected $renderFields = true;
 
+	/**
+	 * Whether the format allows grouping
+	 *
+	 * @var bool
+	 */
+	protected $usesgrouping = true;
+
 	/**
 	 * Defines the initial options of the Horizontal Boxes.
 	 *
@@ -56,8 +68,10 @@ class Accordion extends DefaultStyle {
 				'#type' => 'textfield',
 				'#title' => t('Row Class'),
 				'#description' => t('For Accordion, make sure you have set carousel-cern-item as one of the row classes'),
-				'#default_value' => (!empty($this->options['row_class'])) ? $this->options['row_class'] : 'carousel-cern-item',
+				'#default_value' => 'carousel-cern-item',
+				'#disabled' => true,
 		);
+
 	}
 
 }
\ No newline at end of file
diff --git a/src/Plugin/views/style/CardGrid.php b/src/Plugin/views/style/CardGrid.php
new file mode 100644
index 0000000000000000000000000000000000000000..5614e9c6408d23c00f2e195b90b0580aaf2cfd55
--- /dev/null
+++ b/src/Plugin/views/style/CardGrid.php
@@ -0,0 +1,75 @@
+<?php
+
+
+namespace Drupal\cern_display_formats\Plugin\views\style;
+
+use Drupal\core\form\FormStateInterface;
+use Drupal\views\Plugin\views\style\DefaultStyle;
+
+/**
+ * Style plugin rendering as Card Grid
+ *
+ * @ingroup views_style_plugins
+ *
+ * @ViewsStyle(
+ *   id = "card_grid",
+ *   title = @Translation("Card Grid"),
+ *   help = @Translation("Displays content as a Card Grid"),
+ *   theme = "views_view_unformatted",
+ *   display_types = {"normal"}
+ * )
+ */
+class CardGrid extends DefaultStyle {
+
+	protected $usesRowPlugin = true;
+
+	/**
+	 * Does the style plugin support custom css class for the rows.
+	 *
+	 * @var bool
+	 */
+	protected $usesRowClass = true;
+
+	/**
+	 * Whether the format uses options
+	 *
+	 * @var bool
+	 */
+	protected $usesoptions = true;
+
+	/**
+	 * Whether the format will allow rendering fields
+	 *
+	 * @var bool
+	 */
+	protected $renderFields = true;
+
+	/**
+	 * Whether the format allows grouping
+	 *
+	 * @var bool
+	 */
+	protected $usesgrouping = true;
+
+		/**
+		 * Overrides the options form of Card Grid
+		 *
+		 * @param $form
+		 * @param FormStateInterface $form_state
+		 */
+	public function buildOptionsForm(&$form, FormStateInterface $form_state) {
+		parent::buildOptionsForm($form, $form_state);
+
+		$form['row_class'] = array(
+				'#type' => 'textfield',
+				'#title' => t('Row Class'),
+				'#description' => t(''),
+				'#default_value' =>  '',
+				'#disabled' => true,
+		);
+
+	}
+
+
+
+	}
\ No newline at end of file
diff --git a/src/Plugin/views/style/Collision.php b/src/Plugin/views/style/Collision.php
index 80444420c8af8529a5ad440a257fc8168d95a865..a9f6a7a00493066c43d0fbc83bd2dc2bbcec286e 100644
--- a/src/Plugin/views/style/Collision.php
+++ b/src/Plugin/views/style/Collision.php
@@ -33,23 +33,24 @@ class Collision extends DefaultStyle {
 	 */
 	protected function defineOptions(){
 		$options = parent::defineOptions();
-		$options['row_class'] = array('default'=> 'events-collision-row') ;
+		$options['row_class'] = array('default'=> 'events-collision-row');
 		return $options;
 	}
 
 	/**
-	 * Overrides the options form of HB
+	 * Overrides the options form of Collision display format
 	 *
 	 * @param $form
 	 * @param FormStateInterface $form_state
 	 */
-	public function buildOptionsForm(&$form, FormStateInterface $form_state) {
+	public function buildOptionsForm(&$form, FormStateInterface $form_state){
 		parent::buildOptionsForm($form, $form_state);
 
 		$form['row_class'] = array(
 				'#type' => 'textfield',
 				'#title' => t('Row Class'),
-				'#default_value' => (!empty($this->options['row_class'])) ? $this->options['row_class'] : 'events-collision-row',
+				'#default_value' => 'events-collision-row',
+				'#disabled' => true,
 		);
 	}
 
diff --git a/src/Plugin/views/style/Countdown.php b/src/Plugin/views/style/Countdown.php
index 5159e6d0fd9f54d96e451d7b48df02d8e91cf05c..307f363b3bb01f535e0f0d4ee5ff605cceb641a3 100644
--- a/src/Plugin/views/style/Countdown.php
+++ b/src/Plugin/views/style/Countdown.php
@@ -3,7 +3,7 @@
 
 namespace Drupal\cern_display_formats\Plugin\views\style;
 
-
+use Drupal\core\form\FormStateInterface;
 use Drupal\views\Plugin\views\style\DefaultStyle;
 
 /**
@@ -24,6 +24,11 @@ class Countdown extends DefaultStyle {
 
 	protected $usesoptions = true;
 
+	protected $usesRowPlugin = true;
+
+	//the format should not use row classes
+	protected $usesRowClass = true;
+
 
 	/**
 	 * Defines the initial options for Countdown format
@@ -32,8 +37,18 @@ class Countdown extends DefaultStyle {
 	 */
 	protected function defineOptions(){
 		$options = parent::defineOptions();
+		$options['row_class'] = array('default'=> '');
 		return $options;
 	}
 
+	public function buildOptionsForm(&$form, FormStateInterface $form_state){
+		parent::buildOptionsForm($form, $form_state);
 
+		$form['row_class'] = array(
+				'#type' => 'textfield',
+				'#title' => t('Row Class'),
+				'#default_value' => '',
+				'#disabled' => true,
+		);
+	}
 }
\ No newline at end of file
diff --git a/src/Plugin/views/style/EventGrid.php b/src/Plugin/views/style/EventGrid.php
new file mode 100644
index 0000000000000000000000000000000000000000..e6a98344da7b3215d814241ade63c3d626acfbd1
--- /dev/null
+++ b/src/Plugin/views/style/EventGrid.php
@@ -0,0 +1,54 @@
+<?php
+
+
+namespace Drupal\cern_display_formats\Plugin\views\style;
+
+use Drupal\core\form\FormStateInterface;
+use Drupal\views\Plugin\views\style\DefaultStyle;
+
+/**
+ * Style plugin rendering as Event Grid
+ *
+ * @ingroup views_style_plugins
+ *
+ * @ViewsStyle(
+ *   id = "event_grid",
+ *   title = @Translation("Event Grid"),
+ *   help = @Translation("Displays content as an Event Grid"),
+ *   theme = "views_view_unformatted",
+ *   display_types = {"normal"}
+ * )
+ */
+class EventGrid extends DefaultStyle {
+
+	protected $usesRowPlugin = true;
+
+	/**
+	 * Does the style plugin support custom css class for the rows.
+	 *
+	 * @var bool
+	 */
+	protected $usesRowClass = true;
+
+	protected $usesoptions = true;
+
+	protected $renderFields = true;
+
+	/**
+	 * Overrides the options form of Event Grid
+	 *
+	 * @param $form
+	 * @param FormStateInterface $form_state
+	 */
+	public function buildOptionsForm(&$form, FormStateInterface $form_state) {
+		parent::buildOptionsForm($form, $form_state);
+
+		$form['row_class'] = array(
+				'#type' => 'textfield',
+				'#title' => t('Row Class'),
+				'#description' => t(''),
+				'#default_value' => '',
+				'#disabled' => true,
+		);
+	}
+}
\ No newline at end of file
diff --git a/src/Plugin/views/style/FeaturedBanner.php b/src/Plugin/views/style/FeaturedBanner.php
index 32f830325c1f0f532b54bb8149e28fdf6c79b047..ebf804bde7ce34a91bed69ff2fe0954527adfe2d 100644
--- a/src/Plugin/views/style/FeaturedBanner.php
+++ b/src/Plugin/views/style/FeaturedBanner.php
@@ -5,6 +5,7 @@ namespace Drupal\cern_display_formats\Plugin\views\style;
 
 
 use Drupal\views\Plugin\views\style\DefaultStyle;
+use Drupal\core\form\FormStateInterface;
 
 /**
  * Implements the Featured Banner display format
@@ -22,8 +23,12 @@ use Drupal\views\Plugin\views\style\DefaultStyle;
  */
 class FeaturedBanner extends DefaultStyle {
 
+
 	protected $usesoptions = true;
 
+	protected $usesRowPlugin = true;
+
+	protected $usesRowClass = true;
 
 	/**
 	 * Defines the initial options for the Featured Banner format
@@ -35,5 +40,23 @@ class FeaturedBanner extends DefaultStyle {
 		return $options;
 	}
 
+	/**
+	 * Overrides the options form of Featured Banner
+	 *
+	 * @param $form
+	 * @param FormStateInterface $form_state
+	 */
+	public function buildOptionsForm(&$form, FormStateInterface $form_state) {
+		parent::buildOptionsForm($form, $form_state);
+
+		$form['row_class'] = array(
+				'#type' => 'textfield',
+				'#title' => t('Row Class'),
+				'#description' => t(''),
+				'#default_value' => '',
+				'#disabled' => true,
+		);
+	}
+
 
 }
\ No newline at end of file
diff --git a/src/Plugin/views/style/HorizontalBoxes.php b/src/Plugin/views/style/HorizontalBoxes.php
index afb842e603f768514a9f5b4f2a683a18a11bdb03..ab74973a6e3046df3e0e698247d08f70aefc29d9 100755
--- a/src/Plugin/views/style/HorizontalBoxes.php
+++ b/src/Plugin/views/style/HorizontalBoxes.php
@@ -59,7 +59,8 @@ class HorizontalBoxes extends DefaultStyle
 				'#type' => 'textfield',
 				'#title' => t('Row Class'),
 				'#description' => t('For Horizontal Boxes, make sure you have set horizontal-boxes-row as one of the row classes'),
-				'#default_value' => (!empty($this->options['row_class'])) ? $this->options['row_class'] : 'horizontal-boxes-row',
+				'#default_value' => 'horizontal-boxes-row',
+				'#disabled' => true,
 		);
 	}
 
diff --git a/src/Plugin/views/style/TeaserList.php b/src/Plugin/views/style/TeaserList.php
index df1b604a6ddcbd7f14f1d0dfdf1a3799cbc722f3..d2625295d6bc0aa5cbdf45a9294f98d5b65365c1 100644
--- a/src/Plugin/views/style/TeaserList.php
+++ b/src/Plugin/views/style/TeaserList.php
@@ -30,9 +30,34 @@ class TeaserList extends DefaultStyle
 
     protected $usesoptions = true;
 
-    protected function defineOptions(){
-        $options = parent::defineOptions();
-        return $options;
-    }
+	/**
+	 * Defines the initial options of the Teaser List.
+	 *
+	 * @return mixed
+	 */
+	protected function defineOptions(){
+		$options = parent::defineOptions();
+		$options['row_class'] = array('default' => '');
+		return $options;
+	}
+
+	/**
+	 * Overrides the options form of Teaser List
+	 *
+	 * @param $form
+	 * @param FormStateInterface $form_state
+	 */
+	public function buildOptionsForm(&$form, FormStateInterface $form_state) {
+		parent::buildOptionsForm($form, $form_state);
+
+		$form['row_class'] = array(
+				'#type' => 'textfield',
+				'#title' => t('Row Class'),
+				'#description' => t(''),
+				'#default_value' => '',
+				'#disabled' => true,
+		);
+
+	}
 
 }
diff --git a/src/Plugin/views/style/VerticalBoxes.php b/src/Plugin/views/style/VerticalBoxes.php
index 2ca695fb37eaa9ac71e2aed8400a4a82393bf171..be729558d2c0ab03b80b2723f1fb52bebf222936 100644
--- a/src/Plugin/views/style/VerticalBoxes.php
+++ b/src/Plugin/views/style/VerticalBoxes.php
@@ -4,6 +4,7 @@
 namespace Drupal\cern_display_formats\Plugin\views\style;
 
 
+use Drupal\core\form\FormStateInterface;
 use Drupal\views\Plugin\views\style\DefaultStyle;
 
 /**
@@ -22,11 +23,20 @@ use Drupal\views\Plugin\views\style\DefaultStyle;
  */
 class VerticalBoxes extends DefaultStyle {
 
+	/**
+	 * {@inheritdoc}
+	 */
+	protected $usesRowPlugin = true;
+
+	protected $usesRowClass = false;
+
 	protected $usesoptions = true;
 
+	protected $renderFields = true;
+
 
 	/**
-	 * Defines the initial options for Countdown format
+	 * Defines the initial options for Vertical Boxes format
 	 *
 	 * @return mixed
 	 */
@@ -35,5 +45,23 @@ class VerticalBoxes extends DefaultStyle {
 		return $options;
 	}
 
+	/**
+	 * Overrides the options form of Vertical Boxes
+	 *
+	 * @param $form
+	 * @param FormStateInterface $form_state
+	 */
+	public function buildOptionsForm(&$form, FormStateInterface $form_state) {
+		parent::buildOptionsForm($form, $form_state);
+
+		$form['row_class'] = array(
+				'#type' => 'textfield',
+				'#title' => t('Row Class'),
+				'#description' => t(''),
+				'#default_value' => '',
+				'#disabled' => true,
+		);
+	}
+
 
 }
\ No newline at end of file