diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/repositories.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/repositories.js
index df80e90f6..332c36255 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/repositories.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/repositories.js
@@ -20,6 +20,8 @@ $(function() {
 
   ManagedRepository=function(id,name,layout,indexDirectory,location,snapshots,releases,blockRedeployments,cronExpression,
                              scanned,daysOlder,retentionCount,deleteReleasedSnapshots,stageRepoNeeded){
+
+
     //private String id;
     id=ko.observable(id);
 
@@ -65,7 +67,10 @@ $(function() {
     stageRepoNeeded=ko.observable(stageRepoNeeded);
   }
 
-  RepositoriesViewModel=function(){
+  ManagedRepositoriesViewModel=function(){
+    this.managedRepositories=ko.observableArray(new Array());
+
+    this.gridViewModel = null;
 
   }
 
@@ -74,16 +79,52 @@ $(function() {
     clearUserMessages();
     $("#main-content").html(mediumSpinnerImg());
     $("#main-content").html($("#repositoriesMain").tmpl());
-    $("#repositoriesAccordion").accordion();
+    $("#repositories-tabs").tabs();
+
+    $("#main-content #managed-repositories-content").append(mediumSpinnerImg());
+    $("#main-content #remote-repositories-content").append(mediumSpinnerImg());
+
+    var viewModel = new ManagedRepositoriesViewModel();
+
+    $.ajax("restServices/archivaServices/managedRepositoriesService/getManagedRepositories", {
+        type: "GET",
+        dataType: 'json',
+        success: function(data) {
+          var mappedManagedRepositories = mapManagedRepositories(data);
+          viewModel.managedRepositories=ko.observableArray(mappedManagedRepositories);
+          viewModel.gridViewModel = new ko.simpleGrid.viewModel({
+            data: viewModel.managedRepositories,
+            columns: [
+              {
+                headerText: $.i18n.prop('identifier'),
+                rowText: "id"
+              },
+              {
+                headerText: $.i18n.prop('name'),
+                rowText: "name"
+              }
+            ],
+            pageSize: 10
+          });
+          ko.applyBindings(viewModel,$("#main-content #managed-repositories-view").get(0));
+          $("#main-content #managed-repositories-pills").pills();
+          $("#managed-repositories-view").addClass("active");
+          removeMediumSpinnerImg("#main-content #managed-repositories-content");
+          $.log("ok display managedRepositories");
+        }
+      }
+    );
+
   }
 
   mapManagedRepositories=function(data){
-    return data ? $.isArray(data) ? $.map(data.managedRepository, function(item) {
+    return $.map(data.managedRepository, function(item) {
       return mapManagedRepository(item);
-    }):new Array(mapManagedRepository(data.managedRepository)):null;
+    });
 
   }
   mapManagedRepository=function(data){
+
     return new ManagedRepository(data.id,data.name,data.layout,data.indexDirectory,data.location,data.snapshots,data.releases,
                                  data.blockRedeployments,data.cronExpression,
                                  data.scanned,data.daysOlder,data.retentionCount,data.deleteReleasedSnapshots,data.stageRepoNeeded);
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/templates/repositories.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/templates/repositories.html
index ab070de7b..66f391d46 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/templates/repositories.html
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/templates/repositories.html
@@ -1,12 +1,63 @@
 <script id="repositoriesMain" type="text/x-jquery-tmpl">
-    <div id="repositoriesAccordion">
-    	<h3><a href="#">${$.i18n.prop('managedrepositories.grid.head')}</a></h3>
-    	<div id="remote-repositories-content">
-    		grid to view/edit managed repositories
+    <div class="page-header">
+      <h2>${$.i18n.prop('administration.repositories')}</h2>
+    </div>
+
+      <ul id="repositories-tabs" class="tabs">
+        <li class="active">
+          <a href="#managed-repositories-content">${$.i18n.prop('managedrepositories.grid.head')}</a>
+        </li>  
+        <li>
+          <a href="#remote-repositories-content">${$.i18n.prop('remoterepositories.grid.head')}</a>
+        </li>
+      </ul>  
+      <div class="tab-content">
+    	<div id="managed-repositories-content" class="active">
+            <ul id="managed-repositories-pills" class="pills">
+              <li class="active" id="managed-repositories-view-li">
+                <a href="#managed-repositories-view">${$.i18n.prop('managedrepositories.grid.tab.title')}</a>
+              </li>
+              <li id="managed-repository-edit-li">
+                <a href="#managed-repository-edit">${$.i18n.prop('add')}</a>
+              </li>
+            </ul>
+            <div id="managed-repositories-tabs-content" class="pill-content">
+              <div id="managed-repositories-view" class="active">
+                  <table class="bordered-table zebra-striped" id="managed-repositories-table"
+                         data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_managed-repositoriesGrid',pageLinksId:'managed-repositoriesPagination'">
+                  </table>
+                  <div id="managed-repositoriesPagination"></div>
+              </div>
+              <div id="managed-repository-edit">edit</div>
+            </div>
     	</div>
-    	<h3><a href="#">${$.i18n.prop('remoterepositories.grid.head')}</a></h3>
-    	<div id="managed-repositories-content">
+
+
+    	<div id="remote-repositories-content">
     		grid to view edit remote repositories
     	</div>
-    </div>
+      </div>
+</script>
+
+<script id='ko_managed-repositoriesGrid' type='text/x-jquery-tmpl'>
+  <thead>
+      <tr>
+        {{each(i, columnDefinition) columns}}
+          <th>${ columnDefinition.headerText }</th>
+        {{/each}}
+        <th>${$.i18n.prop('edit')}</th>
+
+      </tr>
+  </thead>
+  <tbody>
+      {{each(i, row) itemsOnCurrentPage()}}
+          <tr>
+              {{each(j, columnDefinition) columns}}
+              <td>${ typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText] }</td>
+              {{/each}}
+              <td><a href="#" data-bind="click: function(){ alert(row.name) }">Edit</a></td>
+          </tr>
+      {{/each}}
+  </tbody>
+
 </script>
\ No newline at end of file
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/utils.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/utils.js
index a3c2aad23..99160213c 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/utils.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/utils.js
@@ -159,7 +159,11 @@ mediumSpinnerImg=function(){
 };
 
 removeMediumSpinnerImg=function(){
-  $("#small-spinner").remove();
+  $("#medium-spinner").remove();
+}
+
+removeMediumSpinnerImg=function(selector){
+  $(selector+" #medium-spinner").remove();
 }
 
 closeDialogConfirm=function(){