diff --git a/scm-webapp/src/main/webapp/resources/css/style.css b/scm-webapp/src/main/webapp/resources/css/style.css
index 1ce93ceb6d..e0f5b4fd63 100644
--- a/scm-webapp/src/main/webapp/resources/css/style.css
+++ b/scm-webapp/src/main/webapp/resources/css/style.css
@@ -146,3 +146,41 @@ a.scm-link:hover {
 .cs-tag a {
   margin-left: 16px;
 }
+
+.scm-commit {
+  margin-bottom: 50px;
+}
+
+.scm-commit h1 {
+  margin-bottom: 5px;
+}
+
+ul.scm-modifications {
+  border-top: 1px solid darkgray;
+  border-bottom: 1px solid darkgray;
+  clear: both;
+  vertical-align: middle;
+}
+
+ul.scm-modifications li {
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: 0 0.2em;
+  padding: 3px 3px 3px 20px;
+  display: block;
+  height: 20px;
+}
+
+li.scm-added {
+  background-image: url(../images/add.png);
+}
+
+li.scm-modified {
+  /* TODO create png image */
+  background-image: url(../images/modify.gif);
+}
+
+li.scm-removed {
+  background-image: url(../images/delete.png);
+}
+
diff --git a/scm-webapp/src/main/webapp/resources/js/repository/sonia.repository.commitpanel.js b/scm-webapp/src/main/webapp/resources/js/repository/sonia.repository.commitpanel.js
index c66a4b0467..6ea9949329 100644
--- a/scm-webapp/src/main/webapp/resources/js/repository/sonia.repository.commitpanel.js
+++ b/scm-webapp/src/main/webapp/resources/js/repository/sonia.repository.commitpanel.js
@@ -35,15 +35,72 @@ Sonia.repository.CommitPanel = Ext.extend(Ext.Panel, {
   repository: null,
   revision: null,
   
+  // changeset
+  changeset: null,
+  
+  // templates
+  template: null,
+  templateCommit: '<div class="scm-commit">\n\
+                     <h1>Commit {id}</h1>\n\
+                     <div class="left-side">\n\
+                       <p>{description}</p>\n\
+                       <p><tpl for="author">{name}<tpl if="mail"> &lt;<a href="mailto:{mail}">{mail}</a>&gt;</tpl></tpl></p>\n\
+                     </div>\n\
+                     <div class="right-side">\n\
+                       Tags\n\
+                     </div>\n\
+                   </div>',
+  
+  templateModifications: '<ul class="scm-modifications">\n\
+               <tpl if="modifications.added"><tpl for="modifications.added"><li class="scm-added">{.}</li></tpl></tpl>\n\
+               <tpl if="modifications.modified"><tpl for="modifications.modified"><li class="scm-modified">{.}</li></tpl></tpl>\n\
+               <tpl if="modifications.removed"><tpl for="modifications.removed"><li class="scm-removed">{.}</li></tpl></tpl>\n\
+             </ul>',
+  
   initComponent: function(){
+    var template = this.templateCommit + this.templateModifications;
+    this.template = new Ext.XTemplate(template);
+    
     var config = {
-      items: [
-        
-      ]
+      bodyCssClass: 'x-panel-mc',
+      padding: 10,
+      layout: 'fit'
     }
     
     Ext.apply(this, Ext.apply(this.initialConfig, config));
     Sonia.repository.CommitPanel.superclass.initComponent.apply(this, arguments);
+    
+    // loadChangeset
+    this.loadChangeset();
+  },
+  
+  update: function(changeset) {
+    this.changeset = changeset;
+    console.debug(changeset);
+    this.template.overwrite(this.body, this.changeset);
+  },
+  
+  loadChangeset: function(){
+    if (debug){
+      console.debug('read changeset ' + this.revision);
+    }
+    
+    Ext.Ajax.request({
+      url: restUrl + 'repositories/' + this.repository.id + '/changeset/' + this.revision + '.json',
+      method: 'GET',
+      scope: this,
+      success: function(response){
+        var changeset = Ext.decode(response.responseText);
+        this.update(changeset)
+      },
+      failure: function(result){
+        main.handleFailure(
+          result.status, 
+          this.errorTitleText, 
+          this.errorMsgText
+        );
+      }
+    });
   }
   
 });