diff --git a/fivestar.module b/fivestar.module
index adc11e9..d1930a0 100644
--- a/fivestar.module
+++ b/fivestar.module
@@ -5,7 +5,9 @@
  * A simple n-star voting widget, usable in other forms.
  */
 
+use Drupal\Core\Form\FormState;
 use Drupal\Core\Routing\RouteMatchInterface;
+use Drupal\Core\Template\Attribute;
 
 /**
  * Implements hook_help().
@@ -53,16 +55,16 @@ function fivestar_microdata_suggestions() {
  */
 function fivestar_theme() {
   return [
-    'fivestar' => [
-      'function' => 'theme_fivestar',
-      'render element' => 'element',
-      'file' => 'includes/fivestar.theme.inc',
-    ],
-    'fivestar_select' => [
-      'function' => 'theme_fivestar_select',
-      'render element' => 'element',
-      'file' => 'includes/fivestar.theme.inc',
-    ],
+//    'fivestar' => [
+//      'function' => 'theme_fivestar',
+//      'render element' => 'element',
+//      'file' => 'includes/fivestar.theme.inc',
+//    ],
+//    'fivestar_select' => [
+//      'function' => 'theme_fivestar_select',
+//      'render element' => 'element',
+//      'file' => 'includes/fivestar.theme.inc',
+//    ],
     'fivestar_static' => [
       'variables' => [
         'rating' => NULL,
@@ -72,16 +74,13 @@ function fivestar_theme() {
       ],
     ],
     'fivestar_static_element' => [
-      'function' => 'theme_fivestar_static_element',
       'variables' => [
         'star_display' => NULL,
         'title' => NULL,
         'description' => NULL,
       ],
-      'file' => 'includes/fivestar.theme.inc',
     ],
     'fivestar_summary' => [
-      'function' => 'theme_fivestar_summary',
       'variables' => [
         'user_rating' => NULL,
         'average_rating' => NULL,
@@ -89,35 +88,32 @@ function fivestar_theme() {
         'stars' => 5,
         'microdata' => [],
       ],
-      'file' => 'includes/fivestar.theme.inc',
-    ],
-    'fivestar_preview' => [
-      'function' => 'theme_fivestar_preview',
-      'variables' => [
-        'style' => NULL,
-        'text' => NULL,
-        'stars' => NULL,
-        'unvote' => NULL,
-        'title' => NULL,
-      ],
-      'file' => 'includes/fivestar.theme.inc',
     ],
+//    'fivestar_preview' => [
+//      'function' => 'theme_fivestar_preview',
+//      'variables' => [
+//        'style' => NULL,
+//        'text' => NULL,
+//        'stars' => NULL,
+//        'unvote' => NULL,
+//        'title' => NULL,
+//      ],
+//      'file' => 'includes/fivestar.theme.inc',
+//    ],
     'fivestar_preview_widget' => [
-      'function' => 'theme_fivestar_preview_widget',
       'variables' => ['css' => NULL, 'name' => NULL],
-      'file' => 'includes/fivestar.theme.inc',
-    ],
-    'fivestar_preview_wrapper' => [
-      'function' => 'theme_fivestar_preview_wrapper',
-      'variables' => ['content' => NULL, 'type' => 'direct'],
-      'file' => 'includes/fivestar.theme.inc',
     ],
+//    'fivestar_preview_wrapper' => [
+//      'function' => 'theme_fivestar_preview_wrapper',
+//      'variables' => ['content' => NULL, 'type' => 'direct'],
+//      'file' => 'includes/fivestar.theme.inc',
+//    ],
     // Field formatters.
-    'fivestar_formatter_default' => [
-      'function' => 'theme_fivestar_formatter_default',
-      'render element' => 'element',
-      'file' => 'includes/fivestar.theme.inc',
-    ],
+//    'fivestar_formatter_default' => [
+//      'function' => 'theme_fivestar_formatter_default',
+//      'render element' => 'element',
+//      'file' => 'includes/fivestar.theme.inc',
+//    ],
     'fivestar_formatter_rating' => [
       'render element' => 'element',
     ],
@@ -313,3 +309,106 @@ function template_preprocess_fivestar_static(array &$variables) {
 
   $variables['stars_data'] = $stars_data;
 }
+
+/**
+ * Implements hook_preprocess_HOOK() for the Fivestar summary output.
+ *
+ * @param array $variables
+ */
+function template_preprocess_fivestar_summary(array &$variables) {
+  $microdata = $variables['microdata'];
+  extract($variables, EXTR_SKIP);
+  $div_class = '';
+  $variables['average_rating_microdata'] = '';
+  $variables['rating_count_microdata'] = '';
+
+  if (isset($user_rating)) {
+    $div_class = isset($votes) ? 'user-count' : 'user';
+    $variables['user_stars'] = round(($user_rating * $stars) / 100, 1);
+  }
+
+  if (isset($average_rating)) {
+    if (isset($user_rating)) {
+      $div_class = 'combo';
+    }
+    else {
+      $div_class = isset($votes) ? 'average-count' : 'average';
+    }
+
+    $variables['average_stars'] = round(($average_rating * $stars) / 100, 1);
+    if (!empty($microdata['average_rating']['#attributes'])) {
+      $variables['average_rating_microdata'] = ($microdata['average_rating']['#attributes']);
+    }
+  }
+
+  if (isset($votes)) {
+    if (!isset($user_rating) && !isset($average_rating)) {
+      $div_class = 'count';
+    }
+    if ($votes !== 0) {
+      if (!empty($microdata['rating_count']['#attributes'])) {
+        $variables['rating_count_microdata'] = new Attribute($microdata['rating_count']['#attributes']);
+      }
+      $variables['votes_counter'] = intval($votes);
+    }
+  }
+  $variables['div_class'] = $div_class;
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for the Fivestar static element.
+ * Displays a static fivestar value as stars with a title and description.
+ *
+ * @param array $variables
+ */
+function template_preprocess_fivestar_static_element(array &$variables) {
+  $variables['div_class'] = "fivestar-static-form-item";
+  if (isset($variables['is_form']) && !$variables['is_form']) {
+    $variables['div_class'] = "fivestar-static-item";
+  }
+
+  $element_data = [
+    '#type' => 'item',
+    '#title' => $variables['title'],
+    '#description' => $variables['description'],
+    '#description_display' => 'after',
+    '#children' => $variables['star_display'],
+  ];
+  $variables['content'] = $element_data;
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for the Fivestar preview widget.
+ *
+ * @param array $variables
+ */
+function template_preprocess_fivestar_preview_widget(array &$variables) {
+  $form = [
+    '#post' => [],
+    '#programmed' => FALSE,
+    '#tree' => FALSE,
+    '#parents' => [],
+    '#array_parents' => [],
+    '#required' => FALSE,
+    '#attributes' => [],
+    '#title_display' => 'before',
+  ];
+  $complete_form = [];
+  $form_state = new FormState();
+  $form_state->setValues([]);
+  $form_state->setProcessInput(FALSE);
+  $form_state->setCompleteForm($complete_form);
+  $form['vote'] = [
+    '#type' => 'fivestar',
+    '#stars' => 5,
+    '#allow_clear' => TRUE,
+    '#allow_revote' => TRUE,
+    '#allow_ownvote' => TRUE,
+    '#default_value' => NULL,
+    '#widget' => [
+      'name' => isset($variables['name']) ? $variables['name'] : 'default',
+      'css' => isset($variables['css']) && $variables['css'] != 'default' ? $variables['css'] : FALSE,
+    ],
+  ];
+  $variables['content'] = \Drupal::formBuilder()->doBuildForm('\Drupal\fivestar\Form\FivestarForm', $form, $form_state);
+}
diff --git a/templates/fivestar-preview-widget.html.twig b/templates/fivestar-preview-widget.html.twig
new file mode 100644
index 0000000..4329eb0
--- /dev/null
+++ b/templates/fivestar-preview-widget.html.twig
@@ -0,0 +1,3 @@
+<div class="fivestar-star-preview fivestar-{{ name }}">
+  {{ content }}
+</div>
diff --git a/templates/fivestar-static-element.html.twig b/templates/fivestar-static-element.html.twig
new file mode 100644
index 0000000..1229dd3
--- /dev/null
+++ b/templates/fivestar-static-element.html.twig
@@ -0,0 +1,14 @@
+{#
+/**
+ * @file
+ * Default theme implementation for the Fivestar static element output.
+ *
+ * @see template_preprocess_fivestar_static_element()
+ *
+ * @ingroup themeable
+ */
+#}
+
+<div class="{{ div_class }}">
+  {{ content }}
+</div>
diff --git a/templates/fivestar-summary.html.twig b/templates/fivestar-summary.html.twig
new file mode 100644
index 0000000..6aa7d50
--- /dev/null
+++ b/templates/fivestar-summary.html.twig
@@ -0,0 +1,49 @@
+{#
+/**
+ * @file
+ * Default theme implementation for the Fivestar summary output.
+ *
+ * Available variables
+ * - average_rating: The desired average rating to display out of 100 (i.e. 80 is 4 out of 5 stars).
+ * - votes: The total number of votes.
+ * - stars: The number of stars being displayed.
+ * - microdata:
+ * - user_rating:
+ * - average_rating_microdata:
+ * - average_stars: rounded rating to display (example: 4.0)
+ * - votes_counter: Number of votes
+ * - div_class: css class for current block.
+ *
+ * @see template_preprocess_fivestar_summary()
+ *
+ * @ingroup themeable
+ */
+#}
+
+<div class="fivestar-summary fivestar-summary-{{ div_class }}">
+  {% if user_rating %}
+    {% set _stars = user_rating ? user_stars : 'None'|t %}
+    <span class="user-rating">
+      {{ "Your rating:"|t }} <span>{{ _stars }}</span>
+    </span>
+  {% endif %}
+
+  {% if average_rating %}
+    <span class="average-rating">
+      {{ "Average:"|t }} <span{{ average_rating_microdata }}>{{ average_stars }}</span>
+       </span>
+  {% endif %}
+
+  {% if votes is not empty %}
+    {% if votes == 0 %}
+      <span class="empty">{{ 'No votes yet'|t }}</span>
+    {% else %}
+      {% set _vote = votes_counter > 1 ? 'votes'|t : 'vote'|t %}
+      {% if user_rating or average_rating %}
+        <span class="total-votes">( <span {{ rating_count_microdata }}> {{ votes_counter }} {{ _vote }} </span> )</span>
+      {% else %}
+        <span class="total-votes"><span {{ rating_count_microdata }}> {{ votes_counter }} {{ _vote }} </span></span>
+      {% endif %}
+    {% endif %}
+  {% endif %}
+</div>