diff --git a/resources/twig/categories/noCategory.twig b/resources/twig/categories/noCategory.twig
new file mode 100644
index 0000000000..5755d824d2
--- /dev/null
+++ b/resources/twig/categories/noCategory.twig
@@ -0,0 +1,18 @@
+{% extends "./layout/default.twig" %}
+{% block content %}
+    {{ Breadcrumbs.renderIfExists(Route.getCurrentRoute.getName) }}
+<div class="row">
+    <div class="col-lg-12 col-md-12 col-sm-12">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                {{ subTitle }}
+            </div>
+            <div class="panel-body">
+                {% include 'list/journals.twig' with {'journals': list} %}
+            </div>
+        </div>
+    </div>
+</div>
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/resources/twig/categories/show.twig b/resources/twig/categories/show.twig
new file mode 100644
index 0000000000..b830ccacf0
--- /dev/null
+++ b/resources/twig/categories/show.twig
@@ -0,0 +1,54 @@
+{% extends "./layout/default.twig" %}
+{% block content %}
+    {{ Breadcrumbs.renderIfExists(Route.getCurrentRoute.getName, category) }}
+<div class="row">
+    <div class="col-lg-6 col-md-6 col-sm-12">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <i class="fa fa-calendar fa-fw"></i>
+                Overview
+            </div>
+            <div class="panel-body">
+                <div id="periodOverview"></div>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-6 col-md-6 col-sm-12">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <i class="fa fa-calendar-o fa-fw"></i>
+                Overview
+            </div>
+            <div class="panel-body">
+                <div id="componentOverview"></div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-lg-12 col-md-12">
+
+         <div class="panel panel-default">
+            <div class="panel-heading">
+                <i class="fa fa-repeat fa-fw"></i>
+                Transactions
+            </div>
+            <div class="panel-body">
+                {% include 'list/journals' %}
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}
+{% block scripts %}
+<script type="text/javascript">
+    var categoryID = {{ category.id }};
+</script>
+<!-- load the libraries and scripts necessary for Google Charts: -->
+<script type="text/javascript" src="https://www.google.com/jsapi"></script>
+<script type="text/javascript" src="js/gcharts.options.js"></script>
+<script type="text/javascript" src="js/gcharts.js"></script>
+<script type="text/javascript" src="js/categories.js"></script>
+
+{% endblock %}
\ No newline at end of file