diff --git a/scm-webapp/src/main/webapp/resources/js/group/sonia.group.grid.js b/scm-webapp/src/main/webapp/resources/js/group/sonia.group.grid.js
index 17e2f90d9a..c82388d8c6 100644
--- a/scm-webapp/src/main/webapp/resources/js/group/sonia.group.grid.js
+++ b/scm-webapp/src/main/webapp/resources/js/group/sonia.group.grid.js
@@ -151,6 +151,10 @@ Sonia.group.Grid = Ext.extend(Sonia.rest.Grid, {
           scope: this
         }
       }
+    },{
+      item: group,
+      xtype: 'permissionsPanel',
+      baseUrl: 'security/permission/group/' + group.name
     }]);
   }
 
diff --git a/scm-webapp/src/main/webapp/resources/js/security/sonia.security.permissionspanel.js b/scm-webapp/src/main/webapp/resources/js/security/sonia.security.permissionspanel.js
index 4d9940f3bb..1d4bbe9367 100644
--- a/scm-webapp/src/main/webapp/resources/js/security/sonia.security.permissionspanel.js
+++ b/scm-webapp/src/main/webapp/resources/js/security/sonia.security.permissionspanel.js
@@ -33,16 +33,194 @@ Sonia.security.PermissionsPanel = Ext.extend(Ext.Panel, {
 
   //TODO i18n
   titleText: 'Permissions',
+  
+  permissionStore: null,
+  baseUrl: null,
+  
+  addIcon: 'resources/images/add.png',
+  removeIcon: 'resources/images/delete.png',
+  helpIcon: 'resources/images/help.png',
 
   initComponent: function(){
 
+    this.permissionStore = new Sonia.rest.JsonStore({
+      proxy: new Ext.data.HttpProxy({
+        api: {
+          read: restUrl + this.baseUrl + '.json'
+        },
+        disableCaching: false
+      }),
+      idProperty: 'id',
+      fields: [ 'id', 'value'],
+      listeners: {
+        update: {
+          fn: this.modifyOrAddPermission,
+          scope: this
+        },
+        remove: {
+          fn: this.removePermission,
+          scope: this
+        }
+      }
+    });
+    
+    var availablePermissionStore = new Ext.data.JsonStore({
+      fields: ['display-name', 'description', 'value'],
+      sortInfo: {
+        field: 'display-name'
+      }
+    });
+    availablePermissionStore.loadData(state.availablePermissions);
+    
+    var permissionColModel = new Ext.grid.ColumnModel({
+      columns: [{
+        id: 'value', 
+        header: 'Permission', 
+        dataIndex: 'value',
+        renderer: this.renderPermission,
+        editor: new Ext.form.ComboBox({
+          store: availablePermissionStore,
+          displayField: 'display-name',
+          valueField: 'value',
+          typeAhead: false,
+          editable: false,
+          triggerAction: 'all',
+          mode: 'local',
+          width: 250
+        })
+      }]
+    });
+    
+    var selectionModel = new Ext.grid.RowSelectionModel({
+      singleSelect: true
+    });
+
     var config = {
       title: this.titleText,
-      bodyCssClass: 'x-panel-mc'
+      bodyCssClass: 'x-panel-mc',
+      items: [{
+        id: 'permissionGrid',
+        xtype: 'editorgrid',
+        clicksToEdit: 1,
+        frame: true,
+        width: '100%',
+        autoHeight: true,
+        autoScroll: false,
+        colModel: permissionColModel,
+        sm: selectionModel,
+        store: this.permissionStore,
+        viewConfig: {
+          forceFit: true,
+          markDirty: false
+        },
+        tbar: [{
+          text: this.addText,
+          scope: this,
+          icon: this.addIcon,
+          handler : function(){
+            var Permission = this.permissionStore.recordType;
+            var grid = Ext.getCmp('permissionGrid');
+            grid.stopEditing();
+            this.permissionStore.insert(0, new Permission());
+            grid.startEditing(0, 0);
+          }
+        },{
+          text: this.removeText,
+          scope: this,
+          icon: this.removeIcon,
+          handler: function(){
+            var grid = Ext.getCmp('permissionGrid');
+            var selected = grid.getSelectionModel().getSelected();
+            if ( selected ){
+              this.permissionStore.remove(selected);
+            }
+          }
+        },'->',{
+          id: 'permissionGridHelp',
+          xtype: 'box',
+          autoEl: {
+            tag: 'img',
+            src: this.helpIcon
+          }
+        }]
+      }]
     };
 
     Ext.apply(this, Ext.apply(this.initialConfig, config));
     Sonia.security.PermissionsPanel.superclass.initComponent.apply(this, arguments);
+  },
+  
+  getIdFromResponse: function(response){
+    var id = null;
+    var location = response.getResponseHeader('Location');
+    if (location){
+      var parts = location.split('/');
+      id = parts[parts.length - 1];
+    }
+    return id;
+  },
+          
+  modifyOrAddPermission: function(store, record){
+    console.log('------ modify --------');
+    var id = record.get('id');
+    if ( id ){
+      this.modifyPermission(id, record);
+    } else {
+      this.addPermission(record);
+    }
+  },
+  
+  addPermission: function(record){
+    Ext.Ajax.request({
+      url: restUrl + this.baseUrl + '.json',
+      method: 'POST',
+      jsonData: record.data,
+      scope: this,
+      success: function(response){
+        var id = this.getIdFromResponse(response);
+        record.data.id = id;
+      },
+      failure: function(result){
+      }
+    });
+  },
+  
+  modifyPermission: function(id, record){
+    Ext.Ajax.request({
+      url: restUrl + this.baseUrl + '/' + id + '.json',
+      method: 'PUT',
+      jsonData: record.data,
+      scope: this,
+      success: function(){
+      },
+      failure: function(result){
+      }
+    });
+  },
+
+  removePermission: function(store, record, index){
+    console.log('------ remove --------');
+    Ext.Ajax.request({
+      url: restUrl + this.baseUrl + '/' + record.get('id')  + '.json',
+      method: 'DELETE',
+      scope: this,
+      success: function(){
+
+      },
+      failure: function(result){
+      }
+    });
+  },
+  
+  renderPermission: function(value){
+    var ap = state.availablePermissions;
+    for (var i=0; i<ap.length; i++){
+      if ( value === ap[i].value ){
+        value = ap[i]['display-name'];
+        break;
+      }
+    }
+    return value;
   }
 
 });
diff --git a/scm-webapp/src/main/webapp/resources/js/sonia.scm.js b/scm-webapp/src/main/webapp/resources/js/sonia.scm.js
index 4771e61e0b..13b7493c0f 100644
--- a/scm-webapp/src/main/webapp/resources/js/sonia.scm.js
+++ b/scm-webapp/src/main/webapp/resources/js/sonia.scm.js
@@ -51,10 +51,6 @@ Sonia.scm.Main = Ext.extend(Ext.util.Observable, {
   navGroupsText: 'Groups',
   tabGroupsText: 'Groups',
   
-  // TODO i18n
-  navPermissionsText: 'Permissions',
-  tabPermissionsText: 'Permissions',
-
   sectionLoginText: 'Login',
   navLoginText: 'Login',
 
@@ -165,12 +161,6 @@ Sonia.scm.Main = Ext.extend(Ext.util.Observable, {
       this.addTabPanel('groups', 'groupPanel', this.tabGroupsText);
     }
   },
-          
-  addPermissionsTabPanel: function(){
-    if (admin){
-      this.addTabPanel('permissions', 'permissionsPanel', this.tabPermissionsText);
-    }
-  },
 
   createMainMenu: function(){
     if ( debug ){
@@ -250,10 +240,6 @@ Sonia.scm.Main = Ext.extend(Ext.util.Observable, {
         label: this.navGroupsText,
         fn: this.addGroupsTabPanel,
         scope: this
-      },{
-        label: this.navPermissionsText,
-        fn: this.addPermissionsTabPanel,
-        scope: this
       });
     }