diff --git a/{{cookiecutter.project_shortname}}/setup.py b/{{cookiecutter.project_shortname}}/setup.py
index 94642ae..655d181 100644
--- a/{{cookiecutter.project_shortname}}/setup.py
+++ b/{{cookiecutter.project_shortname}}/setup.py
@@ -46,6 +46,7 @@
         ],
         'invenio_assets.webpack': [
             '{{ cookiecutter.package_name }}_theme = {{ cookiecutter.package_name }}.theme.webpack:theme',
+            '{{ cookiecutter.package_name }}_search_app = {{ cookiecutter.package_name }}.records.webpack:search_app',
         ],
         'invenio_config.module': [
             '{{ cookiecutter.package_name }} = {{ cookiecutter.package_name }}.config',
diff --git a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/config.py b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/config.py
index 1f606f0..d405b9e 100644
--- a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/config.py
+++ b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/config.py
@@ -51,7 +51,9 @@ def _(x):
 
 # Theme configuration
 # ===================
-#: Site name
+#: The Invenio theme.
+APP_THEME = ['semantic-ui']
+#: Site name.
 THEME_SITENAME = _('{{cookiecutter.project_name}}')
 #: Use default frontpage.
 THEME_FRONTPAGE = True
diff --git a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/assets/semantic-ui/{{cookiecutter.package_name}}/search_app_customizations.js b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/assets/semantic-ui/{{cookiecutter.package_name}}/search_app_customizations.js
new file mode 100644
index 0000000..464a7f1
--- /dev/null
+++ b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/assets/semantic-ui/{{cookiecutter.package_name}}/search_app_customizations.js
@@ -0,0 +1,47 @@
+import React from "react";
+import { overrideStore } from "react-overridable";
+import { Card, Item, List } from "semantic-ui-react";
+
+const {{datamodel_extension_class}}ResultsListItem = ({ result, index }) => {
+  const contributors = result.metadata.contributors || [];
+  return (
+    <Item key={index} href={`/records/{{ result.id }}`}>
+      <Item.Content>
+        <Item.Header>{result.metadata.title}</Item.Header>
+        <Item.Description>
+          {contributorsList && (
+            <List horizontal relaxed>
+              {contributors.map((contributor) => (
+                <List.Item>{contributor.name}</List.Item>
+              ))}
+            </List>
+          )}
+        </Item.Description>
+      </Item.Content>
+    </Item>
+  );
+};
+
+overrideStore.add("ResultsList.item", {{datamodel_extension_class}}ResultsListItem);
+
+const {{datamodel_extension_class}}ResultsGridItem = ({ result, index }) => {
+  const contributors = result.metadata.contributors || [];
+  return (
+    <Card fluid key={index} href={`/records/{{ result.id }}`}>
+      <Card.Content>
+        <Card.Header>{result.metadata.title}</Card.Header>
+        <Card.Description>
+          {contributorsList && (
+            <List horizontal relaxed>
+              {contributors.map((contributor) => (
+                <List.Item>{contributor.name}</List.Item>
+              ))}
+            </List>
+          )}
+        </Card.Description>
+      </Card.Content>
+    </Card>
+  );
+};
+
+overrideStore.add("ResultsGrid.item", {{datamodel_extension_class}}ResultsGridItem);
diff --git a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/config.py b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/config.py
index 0aa8c55..669f5c5 100644
--- a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/config.py
+++ b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/config.py
@@ -78,8 +78,7 @@ def _(x):
 )
 """Records UI for {{cookiecutter.project_shortname}}."""
 
-SEARCH_UI_JSTEMPLATE_RESULTS = 'templates/records/results.html'
-"""Result list template."""
+SEARCH_UI_SEARCH_TEMPLATE = '{{cookiecutter.package_name}}/records/search.html'
 
 PIDSTORE_RECID_FIELD = '{{ cookiecutter.datamodel_pid_name }}'
 
diff --git a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/static/templates/records/results.html b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/static/templates/records/results.html
deleted file mode 100644
index 7fcfc9c..0000000
--- a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/static/templates/records/results.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% include 'misc/header.html' -%}{% raw %}
-<div ng-repeat="record in vm.invenioSearchResults.hits.hits track by $index">
-  <h4><a target="_self" ng-href="/records/{{ record.id }}">{{ record.metadata.title }}</a></h4>
-  <ul class="list-inline">
-      <li ng-repeat='contributor in record.metadata.contributors'>
-        {{ contributor.name }};
-      </li>
-  </ul>
-  <hr />
-</div>
-{% endraw %}
diff --git a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/templates/records/record.html b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/templates/semantic-ui/records/record.html
similarity index 96%
rename from {{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/templates/records/record.html
rename to {{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/templates/semantic-ui/records/record.html
index 181dc81..41041ed 100644
--- a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/templates/records/record.html
+++ b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/templates/semantic-ui/records/record.html
@@ -1,7 +1,7 @@
 {% include 'misc/header.tpl' -%}{% raw %}
 {%- extends config.RECORDS_UI_BASE_TEMPLATE %}
 
-{% from 'invenio_previewer/macros.html' import file_list, preview_file %}
+{% from 'semantic-ui/invenio_previewer/macros.html' import file_list, preview_file %}
 
 {%- macro record_content(data) %}
   {% set ignore_list = ['_bucket', '$schema'] %}
diff --git a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/templates/semantic-ui/records/search.html b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/templates/semantic-ui/records/search.html
new file mode 100644
index 0000000..fd4ffcb
--- /dev/null
+++ b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/templates/semantic-ui/records/search.html
@@ -0,0 +1,5 @@
+{% extends "semantic-ui/invenio_search_ui/search.html" %}
+
+{%- block javascript_override_searchapp %}
+  {{ webpack['{%- endraw %}{{cookiecutter.project_shortname}}{%- raw %}-search-app.js'] }}
+{%- endblock javascript_override_searchapp %}
diff --git a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/webpack.py b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/webpack.py
new file mode 100644
index 0000000..737bd05
--- /dev/null
+++ b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/records/webpack.py
@@ -0,0 +1,18 @@
+{% include 'misc/header.py' %}
+"""JS/CSS Webpack bundle to override search results template."""
+
+from invenio_assets.webpack import WebpackThemeBundle
+
+search_app = WebpackThemeBundle(
+    __name__,
+    'assets',
+    default='semantic-ui',
+    themes={
+        'semantic-ui': dict(
+            entry={
+                '{{ cookiecutter.project_shortname }}-search-app': './js/{{ cookiecutter.package_name }}/records/search_app_customizations.js',
+            },
+            dependencies={}
+        )
+    }
+)
diff --git a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/assets/scss/{{cookiecutter.package_name}}/theme.scss b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/assets/scss/{{cookiecutter.package_name}}/theme.scss
deleted file mode 100644
index 75c773a..0000000
--- a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/assets/scss/{{cookiecutter.package_name}}/theme.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-{% include 'misc/header.js' %}
-
-// Check out https://github.com/inveniosoftware/invenio-theme/blob/master/invenio_theme/assets/scss/invenio_theme
-@import "variables";
-@import "../invenio_theme/styles";
-
-
-.hide-on-collapsed {
-	display: block;
-}
-.show-on-collapsed {
-	display: none;
-}
-.panel-toggle.collapsed {
-	.hide-on-collapsed {
-		display: none;
-	}
-	.show-on-collapsed {
-		display: block;
-	}
-}
diff --git a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/assets/scss/{{cookiecutter.package_name}}/variables.scss b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/assets/scss/{{cookiecutter.package_name}}/variables.scss
deleted file mode 100644
index 9c27a19..0000000
--- a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/assets/scss/{{cookiecutter.package_name}}/variables.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-{% include 'misc/header.js' %}
-
-@import "../invenio_theme/variables";
-
-// If you want to change the primary color you can do something like:
-// $color1: rgba(100, 42, 156, 0.8);
-// $color1-gradient: lighten($color1, 15%);
-// $navbar-default-bg: $color1;
diff --git a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/assets/js/{{cookiecutter.package_name}}/previewer.js b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/assets/semantic-ui/{{cookiecutter.package_name}}/previewer.js
similarity index 100%
rename from {{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/assets/js/{{cookiecutter.package_name}}/previewer.js
rename to {{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/assets/semantic-ui/{{cookiecutter.package_name}}/previewer.js
diff --git a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/templates/{{cookiecutter.package_name}}/frontpage.html b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/templates/semantic-ui/{{cookiecutter.package_name}}/frontpage.html
similarity index 83%
rename from {{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/templates/{{cookiecutter.package_name}}/frontpage.html
rename to {{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/templates/semantic-ui/{{cookiecutter.package_name}}/frontpage.html
index a5a3715..db8452f 100644
--- a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/templates/{{cookiecutter.package_name}}/frontpage.html
+++ b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/templates/semantic-ui/{{cookiecutter.package_name}}/frontpage.html
@@ -1,6 +1,6 @@
 {% include 'misc/header.jinja2' %}
 {%- raw %}
-{%- extends "invenio_theme/frontpage.html" %}
+{%- extends "semantic-ui/invenio_theme/frontpage.html" %}
 
 {%- block page_body %}
 <div class="container marketing">
diff --git a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/templates/{{cookiecutter.package_name}}/page.html b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/templates/semantic-ui/{{cookiecutter.package_name}}/page.html
similarity index 87%
rename from {{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/templates/{{cookiecutter.package_name}}/page.html
rename to {{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/templates/semantic-ui/{{cookiecutter.package_name}}/page.html
index c6e1978..99fea51 100644
--- a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/templates/{{cookiecutter.package_name}}/page.html
+++ b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/templates/semantic-ui/{{cookiecutter.package_name}}/page.html
@@ -1,8 +1,9 @@
 {% include 'misc/header.jinja2' %}
 {%- raw %}
-{%- extends "invenio_theme/page.html" %}
+{%- extends "semantic-ui/invenio_theme/page.html" %}
 
 {%- block css %}
+{{ super() }}
 {{ webpack['{%- endraw %}{{cookiecutter.project_shortname}}{%- raw %}-theme.css'] }}
 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>
diff --git a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/webpack.py b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/webpack.py
index c4151a8..b984735 100644
--- a/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/webpack.py
+++ b/{{cookiecutter.project_shortname}}/{{cookiecutter.package_name}}/theme/webpack.py
@@ -1,18 +1,21 @@
 {% include 'misc/header.py' %}
 """JS/CSS Webpack bundles for theme."""
 
-from __future__ import absolute_import, print_function
+from invenio_assets.webpack import WebpackThemeBundle
 
-from flask_webpackext import WebpackBundle
-
-theme = WebpackBundle(
+theme = WebpackThemeBundle(
     __name__,
     'assets',
-    entry={
-        '{{ cookiecutter.project_shortname }}-theme': './scss/{{ cookiecutter.package_name }}/theme.scss',
-        '{{ cookiecutter.project_shortname }}-preview': './js/{{ cookiecutter.package_name }}/previewer.js',
-    },
-    dependencies={
-        # add any additional npm dependencies here...
+    default='semantic-ui',
+    themes={
+        'semantic-ui': dict(
+            entry={
+                # CHANGE ME TO LESS '{{ cookiecutter.project_shortname }}-theme': './less/{{ cookiecutter.package_name }}/theme.less',
+                '{{ cookiecutter.project_shortname }}-preview': './js/{{ cookiecutter.package_name }}/previewer.js',
+            },
+            dependencies={
+                # add any additional npm dependencies here...
+            }
+        )
     }
 )