diff --git a/browser/base_macros.pt b/browser/base_macros.pt
index 6e6c540..6b6d45b 100644
--- a/browser/base_macros.pt
+++ b/browser/base_macros.pt
@@ -28,3 +28,21 @@
     <script tal:content="macro/jsCall"></script>
 </metal:js>
 
+
+<metal:portlet define-macro="portlet_left">
+    <div metal:use-macro="macro/template/macros/portlet" />
+</metal:portlet>
+
+<metal:portlet define-macro="portlet_right">
+    <div metal:use-macro="macro/template/macros/portlet" />
+</metal:portlet>
+
+<metal:portlet define-macro="portlet">
+    <div class="box">
+      <h4 tal:content="macro/title"
+          i18n:translate="">Navigation</h4>
+      <div class="body">
+           <div metal:use-macro="macro/subMacro" />
+      </div>
+    </div>
+</metal:portlet>
diff --git a/browser/liquid/base.css b/browser/liquid/base.css
index 35359b7..96a8d62 100644
--- a/browser/liquid/base.css
+++ b/browser/liquid/base.css
@@ -25,9 +25,9 @@ body {
 
 #global,#footer {width:100%}
 #menu,#content,#sub-section {float:left}
-#menu {width:20%}
+#menu {width:18%}
 #content {width:67%}
-#sub-section {width:12.9%}
+#sub-section {width:15%}
 #footer {clear:left}
 
 /* more general stuff */
diff --git a/browser/liquid/body.pt b/browser/liquid/body.pt
index 4966fb2..f8a64a7 100644
--- a/browser/liquid/body.pt
+++ b/browser/liquid/body.pt
@@ -12,18 +12,9 @@
     </div>
 
     <div id="menu">
-      <metal:menu define-macro="navigators">
-          <div class="box">
-            <h4>Navigation</h4>
-            <tal:menu define="item nocall:view/menu;
-                              level level|python: 1"
-                      condition="nocall:item">
-              <div class="body">
-                <metal:menu use-macro="views/node_macros/menu" />
-              </div>
-            </tal:menu>
-          </div>
-      </metal:menu>
+      <tal:portlet repeat="macro controller/macros/portlet_left">
+        <metal:portlet use-macro="macro" />
+      </tal:portlet>
     </div>
 
     <div id="content" define-macro="content">
@@ -40,8 +31,9 @@
     </div>
 
     <div id="sub-section" define-macro="sub-section">
-      <metal:sub define-slot="sub-section">
-      </metal:sub>
+      <tal:portlet repeat="macro controller/macros/portlet_right">
+        <metal:portlet use-macro="macro" />
+      </tal:portlet>
     </div>
 
     <div id="footer" class="footer" define-macro="footer">
diff --git a/browser/liquid/print.css b/browser/liquid/print.css
index 5760288..239a028 100644
--- a/browser/liquid/print.css
+++ b/browser/liquid/print.css
@@ -3,7 +3,7 @@
 
 */
 
-.top, #header, #menu, #subsection, #footer {
+.top, #header, #menu, #sub-section, #footer {
     display: none;
 }