diff --git a/openslides/core/static/js/core.js b/openslides/core/static/js/core.js
index 5e141407d..7740c95f7 100644
--- a/openslides/core/static/js/core.js
+++ b/openslides/core/static/js/core.js
@@ -239,10 +239,21 @@ angular.module('OpenSlidesApp.core.site', ['OpenSlidesApp.core'])
             abstract: true,
             template: "<ui-view/>",
         })
+        // version
         .state('version', {
             url: '/version',
             controller: 'VersionCtrl',
         })
+        //config
+        .state('config', {
+            url: '/config',
+            controller: 'ConfigCtrl',
+            resolve: {
+                configOption: function($http) {
+                    return $http({ 'method': 'OPTIONS', 'url': '/rest/config/config/' });
+                }
+            }
+        })
         // customslide
         .state('core.customslide', {
             url: '/customslide',
@@ -331,6 +342,35 @@ angular.module('OpenSlidesApp.core.site', ['OpenSlidesApp.core'])
     editableOptions.theme = 'bs3';
 })
 
+
+// html-tag os-form-field to generate generic from fields
+// TODO: make it possible to use other fields then config fields
+.directive('osFormField', function($parse, Config) {
+    function getHtmlType(type) {
+        return {
+            string: 'text',
+            integer: 'number',
+            boolean: 'checkbox',
+            choice: 'radio',
+        }[type];
+    }
+
+    return {
+        restrict: 'E',
+        scope: true,
+        templateUrl: '/static/templates/config-form-field.html',
+        link: function ($scope, iElement, iAttrs, controller, transcludeFn) {
+            var field = $parse(iAttrs.field)($scope);
+            var config = Config.get(field.key);
+            $scope.type = getHtmlType(field.input_type);
+            $scope.label = field.label;
+            $scope.id = 'field-' + field.id;
+            $scope.value = config.value;
+            $scope.help_text = field.help_text;
+        }
+    }
+})
+
 .controller("LanguageCtrl", function ($scope, gettextCatalog) {
     // controller to switch app language
     // TODO: detect browser language for default language
@@ -387,6 +427,23 @@ angular.module('OpenSlidesApp.core.site', ['OpenSlidesApp.core'])
     });
 })
 
+// Config Controller
+.controller('ConfigCtrl', function($scope, Config, configOption) {
+    Config.bindAll({}, $scope, 'configs');
+    $scope.configGroups = configOption.data.config_groups;
+
+    // save changed config value
+    $scope.save = function(key, value, type) {
+        // TODO: find a better way to check the type without using of
+        // the extra parameter 'type' from template
+        if (type == 'number') {
+            value = parseInt(value);
+        }
+        Config.get(key).value = value;
+        Config.save(key);
+    }
+})
+
 // Customslide Controller
 .controller('CustomslideListCtrl', function($scope, Customslide) {
     Customslide.bindAll({}, $scope, 'customslides');
diff --git a/openslides/core/static/templates/config-form-field.html b/openslides/core/static/templates/config-form-field.html
new file mode 100644
index 000000000..c5348732b
--- /dev/null
+++ b/openslides/core/static/templates/config-form-field.html
@@ -0,0 +1,15 @@
+<div class="form-group">
+  <label>{{ label }}</label>
+
+  <div class="input-group">
+    <input ng-model="value" ng-change="save(configOption.key, value, type)" id="{{ id }}" type="{{ type }}"
+        class="form-control">
+    <span class="input-group-btn">
+      <button ng-click="value=configOption.default_value; save(configOption.key, configOption.default_value, type)" class="btn btn-default" translate>
+        <i class="fa fa-undo"></i>
+        <translate>Reset</translate>
+      </button>
+    </span>
+  </div>
+  <p ng-if="help_text" class="help-block">{{ help_text }}</p>
+</div>
diff --git a/openslides/core/static/templates/config.html b/openslides/core/static/templates/config.html
new file mode 100644
index 000000000..8548f6057
--- /dev/null
+++ b/openslides/core/static/templates/config.html
@@ -0,0 +1,27 @@
+<h1 translate>Settings</h1>
+
+<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+  <!-- generate config groups -->
+  <div ng-repeat="group in configGroups">
+    <div class="panel panel-default">
+      <div class="panel-heading" role="tab" id="heading-{{ group.name }}">
+        <h4 class="panel-title">
+          <a data-toggle="collapse" data-parent="#accordion" href="#{{ group.name }}"
+              aria-expanded="false" aria-controls="{{ group.name }}" translate>
+            {{ group.name }}
+          </a>
+        </h4>
+      </div>
+      <div id="{{ group.name }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{{ group.name }}">
+        <div class="panel-body">
+          <div ng-repeat="subgroup in group.subgroups">
+            <h3>{{ subgroup.name }}</h3>
+            <div ng-repeat="configOption in subgroup.items">
+              <os-form-field field="configOption"></os-form-field>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
diff --git a/openslides/core/static/templates/index.html b/openslides/core/static/templates/index.html
index 384fe4f5b..742a32719 100644
--- a/openslides/core/static/templates/index.html
+++ b/openslides/core/static/templates/index.html
@@ -163,7 +163,7 @@
             <span class="text" translate>Files</span>
           </a>
         <li>
-          <a href="#TODO">
+          <a ui-sref="config">
             <span class="ico"><i class="fa fa-cog fa-lg"></i></span>
             <span class="text" translate>Settings</span>
           </a>
@@ -191,6 +191,7 @@
 
 <script src="static/js/app.js"></script>
 <script src="static/js/core.js"></script>
+<script src="static/js/config/config.js"></script>
 <script src="static/js/agenda/agenda.js"></script>
 <script src="static/js/motions/motions.js"></script>
 <script src="static/js/assignments/assignments.js"></script>