diff --git a/source/java/org/alfresco/web/ui/common/PanelGenerator.java b/source/java/org/alfresco/web/ui/common/PanelGenerator.java
index 761596c1e0..e253842c78 100644
--- a/source/java/org/alfresco/web/ui/common/PanelGenerator.java
+++ b/source/java/org/alfresco/web/ui/common/PanelGenerator.java
@@ -184,5 +184,62 @@ public final class PanelGenerator
       out.write("' style='padding-top:6px;'>");
    }
    
+   public static void generateExpandedTitledPanelMiddle(Writer out, String contextPath, String titlePanel, 
+         String expandedTitlePanel, String contentPanel, String contentBgColor) throws IOException
+   {
+      // generate the expanded part, just under the title
+      out.write("</td><td background='");
+      out.write(contextPath);
+      out.write("/images/parts/");
+      out.write(titlePanel);
+      out.write("_06.gif'><img src='");
+      out.write(contextPath);
+      out.write("/images/parts/");
+      out.write(titlePanel);
+      out.write("_06.gif' width=7 height=7 alt=''></td></tr>");
+      
+      out.write("<tr><td width=7><img src='");
+      out.write(contextPath);
+      out.write("/images/parts/");
+      out.write(titlePanel);
+      out.write("_");
+      out.write(expandedTitlePanel);
+      out.write("_07.gif' width=7 height=7 alt=''></td>");
+      
+      out.write("<td background='");
+      out.write(contextPath);
+      out.write("/images/parts/");
+      out.write(titlePanel);
+      out.write("_");
+      out.write(expandedTitlePanel);
+      out.write("_08.gif'><img src='");
+      out.write(contextPath);
+      out.write("/images/parts/");
+      out.write(titlePanel);
+      out.write("_");
+      out.write(expandedTitlePanel);
+      out.write("_08.gif' height=7 alt=''></td>");
+      
+      out.write("<td width=7><img src='");
+      out.write(contextPath);
+      out.write("/images/parts/");
+      out.write(titlePanel);
+      out.write("_");
+      out.write(expandedTitlePanel);
+      out.write("_09.gif' width=7 height=7 alt=''></td></tr>");
+      
+      out.write("<tr><td background='");
+      out.write(contextPath);
+      out.write("/images/parts/");
+      out.write(contentPanel);
+      out.write("_04.gif'><img src='");
+      out.write(contextPath);
+      out.write("/images/parts/");
+      out.write(contentPanel);
+      out.write("_04.gif' width=7 height=7 alt=''></td><td bgcolor='");
+      out.write(contentBgColor);
+      out.write("' style='padding-top:6px;'>");
+   }
+   
    public final static String BGCOLOR_WHITE = "#FFFFFF";
 }
diff --git a/source/java/org/alfresco/web/ui/common/component/UIPanel.java b/source/java/org/alfresco/web/ui/common/component/UIPanel.java
index 7a5842fc68..31af10f067 100644
--- a/source/java/org/alfresco/web/ui/common/component/UIPanel.java
+++ b/source/java/org/alfresco/web/ui/common/component/UIPanel.java
@@ -119,8 +119,8 @@ public class UIPanel extends UICommand
       
       // determine if we have a bordered title area, note, we also need to have
       // the content area border defined as well
-      if ((getTitleBgcolor() != null) && (getTitleBorder() != null) && 
-          (getBorder() != null) && this.hasAdornments)
+      if (getTitleBgcolor() != null && getTitleBorder() != null &&
+          getBorder() != null && this.hasAdornments)
       {
          this.hasBorderedTitleArea = true;
       }
@@ -155,7 +155,7 @@ public class UIPanel extends UICommand
       {
          out.write("<a href='#' onclick=\"");
          String value = getClientId(context) + NamingContainer.SEPARATOR_CHAR + Boolean.toString(!isExpanded());
-         out.write(Utils.generateFormSubmit(context, this, getHiddenFieldName(), value));
+         out.write(Utils.generateFormSubmit(context, this, getHiddenFieldName(context), value));
          out.write("\">");
          
          if (isExpanded() == true)
@@ -204,12 +204,25 @@ public class UIPanel extends UICommand
       // if we have the titled border area, output the middle section
       if (this.hasBorderedTitleArea && isExpanded())
       {
-         PanelGenerator.generateTitledPanelMiddle(
-               out,
-               context.getExternalContext().getRequestContextPath(),
-               getTitleBorder(),
-               getBorder(),
-               getBgcolor());
+         if (getExpandedTitleBorder() != null)
+         {
+            PanelGenerator.generateExpandedTitledPanelMiddle(
+                  out,
+                  context.getExternalContext().getRequestContextPath(),
+                  getTitleBorder(),
+                  getExpandedTitleBorder(),
+                  getBorder(),
+                  getBgcolor());
+         }
+         else
+         {
+            PanelGenerator.generateTitledPanelMiddle(
+                  out,
+                  context.getExternalContext().getRequestContextPath(),
+                  getTitleBorder(),
+                  getBorder(),
+                  getBgcolor());
+         }
       }
    }
 
@@ -248,7 +261,7 @@ public class UIPanel extends UICommand
    public void decode(FacesContext context)
    {
       Map requestMap = context.getExternalContext().getRequestParameterMap();
-      String fieldId = getHiddenFieldName();
+      String fieldId = getHiddenFieldName(context);
       String value = (String)requestMap.get(fieldId);
       
       // we encoded the value to start with our Id
@@ -312,8 +325,9 @@ public class UIPanel extends UICommand
       this.label = (String)values[5];
       this.titleBgcolor = (String)values[6];
       this.titleBorder = (String)values[7];
-      this.expandedActionListener = (MethodBinding)values[8];
-      this.facetsId = (String)values[9];
+      this.expandedTitleBorder = (String)values[8];
+      this.expandedActionListener = (MethodBinding)values[9];
+      this.facetsId = (String)values[10];
    }
    
    /**
@@ -321,18 +335,18 @@ public class UIPanel extends UICommand
     */
    public Object saveState(FacesContext context)
    {
-      Object values[] = new Object[10];
-      // standard component attributes are saved by the super class
-      values[0] = super.saveState(context);
-      values[1] = (isExpanded() ? Boolean.TRUE : Boolean.FALSE);
-      values[2] = this.progressive;
-      values[3] = this.border;
-      values[4] = this.bgcolor;
-      values[5] = this.label;
-      values[6] = this.titleBgcolor;
-      values[7] = this.titleBorder;
-      values[8] = this.expandedActionListener;
-      values[9] = this.facetsId;
+      Object values[] = new Object[] {
+         super.saveState(context),
+         (isExpanded() ? Boolean.TRUE : Boolean.FALSE),
+         this.progressive,
+         this.border,
+         this.bgcolor,
+         this.label,
+         this.titleBgcolor,
+         this.titleBorder,
+         this.expandedTitleBorder,
+         this.expandedActionListener,
+         this.facetsId};
       return values;
    }
    
@@ -443,6 +457,28 @@ public class UIPanel extends UICommand
    {
       this.titleBorder = titleBorder;
    }
+   
+   /**
+    * @return Returns the border style of the expanded title area
+    */
+   public String getExpandedTitleBorder()
+   {
+      ValueBinding vb = getValueBinding("expandedTitleBorder");
+      if (vb != null)
+      {
+         this.expandedTitleBorder = (String)vb.getValue(getFacesContext());
+      }
+      
+      return this.expandedTitleBorder;
+   }
+
+   /**
+    * @param expandedTitleBorder Sets the border style of the expanded title area
+    */
+   public void setExpandedTitleBorder(String expandedTitleBorder)
+   {
+      this.expandedTitleBorder = expandedTitleBorder;
+   }
 
    /**
     * @return Returns the label.
@@ -565,10 +601,10 @@ public class UIPanel extends UICommand
     * 
     * @return hidden field name
     */
-   private String getHiddenFieldName()
+   private String getHiddenFieldName(FacesContext fc)
    {
-      UIForm form = Utils.getParentForm(getFacesContext(), this);
-      return form.getClientId(getFacesContext()) + NamingContainer.SEPARATOR_CHAR + "panel";
+      UIForm form = Utils.getParentForm(fc, this);
+      return form.getClientId(fc) + NamingContainer.SEPARATOR_CHAR + "panel";
    }
    
    
@@ -580,6 +616,7 @@ public class UIPanel extends UICommand
    private String bgcolor = null;
    private String titleBorder = null;
    private String titleBgcolor = null;
+   private String expandedTitleBorder = null;
    private Boolean progressive = null;
    private String label = null;
    private String facetsId = null;
diff --git a/source/java/org/alfresco/web/ui/common/tag/PanelTag.java b/source/java/org/alfresco/web/ui/common/tag/PanelTag.java
index a7504dd8a2..dc742447e8 100644
--- a/source/java/org/alfresco/web/ui/common/tag/PanelTag.java
+++ b/source/java/org/alfresco/web/ui/common/tag/PanelTag.java
@@ -59,6 +59,7 @@ public class PanelTag extends HtmlComponentTag
       setStringProperty(component, "bgcolor", this.bgcolor);
       setStringProperty(component, "titleBorder", this.titleBorder);
       setStringProperty(component, "titleBgcolor", this.titleBgcolor);
+      setStringProperty(component, "expandedTitleBorder", this.expandedTitleBorder);
       setBooleanProperty(component, "expanded", this.expanded);
       setStringProperty(component, "facetsId", this.facetsId);
       if (expandedActionListener != null)
@@ -85,6 +86,9 @@ public class PanelTag extends HtmlComponentTag
       this.border = null;
       this.progressive = null;
       this.bgcolor = null;
+      this.titleBorder = null;
+      this.titleBgcolor = null;
+      this.expandedTitleBorder = null;
       this.expanded = null;
       this.expandedActionListener = null;
       this.facetsId = null;
@@ -173,6 +177,14 @@ public class PanelTag extends HtmlComponentTag
    {
       this.titleBorder = titleBorder;
    }
+   
+   /**
+    * @param expandedTitleBorder     The expanded title area border style
+    */
+   public void setExpandedTitleBorder(String expandedTitleBorder)
+   {
+      this.expandedTitleBorder = expandedTitleBorder;
+   }
 
    /**
     * Set whether the panel is expanded, default is true.
@@ -229,6 +241,9 @@ public class PanelTag extends HtmlComponentTag
    /** the title border style */
    private String titleBorder;
    
+   /** the expanded title border style */
+   private String expandedTitleBorder;
+   
    /** the title bgcolor */
    private String titleBgcolor;
 }
diff --git a/source/java/org/alfresco/web/ui/repo/component/UINavigator.java b/source/java/org/alfresco/web/ui/repo/component/UINavigator.java
index afbb920ef1..2439c2ae67 100644
--- a/source/java/org/alfresco/web/ui/repo/component/UINavigator.java
+++ b/source/java/org/alfresco/web/ui/repo/component/UINavigator.java
@@ -222,11 +222,15 @@ public class UINavigator extends SelfRenderingComponent
          areaTitle = Application.getMessage(context, "my_alfresco");
       }
       
+      // main container div
+      out.write("<div id=\"navigator\" class=\"navigator\">");
+      
       // generate the active panel title
-      out.write("<div id=\"navigator\">");
-      out.write("<div class=\"navigatorPanelTitleSelected\">");
+      String cxPath = context.getExternalContext().getRequestContextPath();
+      out.write("<div class=\"sidebarButtonSelected\" style=\"background-image: url(" + cxPath + "/images/parts/navigator_blue_gradient_bg.gif)\">");
+      out.write("<span class=\"sidebarButtonLabelHighlight\">");
       out.write(areaTitle);
-      out.write("</div>");
+      out.write("</span></div>");
       
       // generate the javascript method to capture the tree node click events
       if (treePanel)
@@ -253,11 +257,13 @@ public class UINavigator extends SelfRenderingComponent
       }
       
       // generate the closed panel title areas
+      String sideBarStyle = "style=\"background-image: url(" + cxPath + "/images/parts/navigator_grey_gradient_bg.gif)\"";
       if (NavigationBean.LOCATION_COMPANY.equals(area) == false &&
           navBean.getCompanyHomeVisible())
       {
-         out.write("<div class=\"navigatorPanelTitle\">");
-         out.write("<a onclick=\"");
+         out.write("<div class=\"sidebarButton\" ");
+         out.write(sideBarStyle);
+         out.write("><a class='sidebarButtonLink' onclick=\"");
          out.write(Utils.generateFormSubmit(context, this, getClientId(context),
                PANEL_ACTION + NavigationBean.LOCATION_COMPANY));
          out.write("\" href=\"#\">");
@@ -267,8 +273,9 @@ public class UINavigator extends SelfRenderingComponent
       
       if (NavigationBean.LOCATION_HOME.equals(area) == false)
       {
-         out.write("<div class=\"navigatorPanelTitle\">");
-         out.write("<a onclick=\"");
+         out.write("<div class=\"sidebarButton\" ");
+         out.write(sideBarStyle);
+         out.write("><a class='sidebarButtonLink' onclick=\"");
          out.write(Utils.generateFormSubmit(context, this, getClientId(context),
                PANEL_ACTION + NavigationBean.LOCATION_HOME));
          out.write("\" href=\"#\">");
@@ -279,8 +286,9 @@ public class UINavigator extends SelfRenderingComponent
       if (NavigationBean.LOCATION_GUEST.equals(area) == false &&
           navBean.getIsGuest() == false && navBean.getGuestHomeVisible())
       {
-         out.write("<div class=\"navigatorPanelTitle\">");
-         out.write("<a onclick=\"");
+         out.write("<div class=\"sidebarButton\" ");
+         out.write(sideBarStyle);
+         out.write("><a class='sidebarButtonLink' onclick=\"");
          out.write(Utils.generateFormSubmit(context, this, getClientId(context),
                PANEL_ACTION + NavigationBean.LOCATION_GUEST));
          out.write("\" href=\"#\">");
@@ -290,8 +298,9 @@ public class UINavigator extends SelfRenderingComponent
       
       if (NavigationBean.LOCATION_MYALFRESCO.equals(area) == false)
       {
-         out.write("<div class=\"navigatorPanelTitle\">");
-         out.write("<a onclick=\"");
+         out.write("<div class=\"sidebarButton\" ");
+         out.write(sideBarStyle);
+         out.write("><a class='sidebarButtonLink' onclick=\"");
          out.write(Utils.generateFormSubmit(context, this, getClientId(context),
                PANEL_ACTION + NavigationBean.LOCATION_MYALFRESCO));
          out.write("\" href=\"#\">");
diff --git a/source/java/org/alfresco/web/ui/repo/component/UISidebar.java b/source/java/org/alfresco/web/ui/repo/component/UISidebar.java
index 6fceef94cc..161825223b 100644
--- a/source/java/org/alfresco/web/ui/repo/component/UISidebar.java
+++ b/source/java/org/alfresco/web/ui/repo/component/UISidebar.java
@@ -73,10 +73,18 @@ public class UISidebar extends SelfRenderingComponent
       out.write("<div id=\"sidebar\">");
       
       // render the start of the header panel
-      PanelGenerator.generatePanelStart(out, 
-            context.getExternalContext().getRequestContextPath(),
-            "blue", "#D3E6FE");
-         
+      String cxPath = context.getExternalContext().getRequestContextPath();
+      out.write("<table cellspacing=0 cellpadding=0 bgcolor='#ffffff'>" + 
+                "<tr><td style=\"background-image: url(");
+      out.write(cxPath);
+      out.write("/images/parts/sidebar_top_grey_begin.gif)\" valign=\"top\" width=5>" +
+                "<img src=\"");
+      out.write(cxPath);
+      out.write("/images/parts/sidebar_grey_01.gif\" width=5 height=5></td>" + 
+                "<td style=\"background-image: url(");
+      out.write(cxPath);
+      out.write("/images/parts/sidebar_top_grey_bg.gif)\" height=24 width=100%>");
+      
       // generate the required child components if not present
       if (this.getChildCount() == 1)
       {
@@ -138,7 +146,7 @@ public class UISidebar extends SelfRenderingComponent
       {
          ResponseWriter out = context.getResponseWriter();
 
-         out.write("<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr><td>");
+         out.write("<table border='0' cellpadding='6' cellspacing='0' width='100%'><tr><td>");
          
          // render the list
          UIModeList modeList = (UIModeList)getChildren().get(0);
@@ -153,13 +161,20 @@ public class UISidebar extends SelfRenderingComponent
          out.write("</td></tr></table>");
          
          // render the end of the header panel
-         PanelGenerator.generateTitledPanelMiddle(out,
-            context.getExternalContext().getRequestContextPath(),
-            "blue", "white", "white");
-      
+         String cxPath = context.getExternalContext().getRequestContextPath();
+         out.write("</td><td style=\"background-image: url(");
+         out.write(cxPath);
+         out.write("/images/parts/sidebar_top_grey_end.gif)\" width=5 align=right valign=top>" +
+                   "<img src=\"");
+         out.write(cxPath);
+         out.write("/images/parts/sidebar_grey_03.gif\" width=5 height=5></td></tr>" +
+                   "<tr><td colspan='3'>");
+         
          // render the plugin
+         out.write("<div id=\"pluginBox\" style=\"border: solid 1px #babfc5;\">");
          UIComponent plugin = (UIComponent)getChildren().get(2);
          Utils.encodeRecursive(context, plugin);
+         out.write("</div>");
       }
    }
 
@@ -170,10 +185,22 @@ public class UISidebar extends SelfRenderingComponent
       
       // render the end of the panel
       ResponseWriter out = context.getResponseWriter();
-      PanelGenerator.generatePanelEnd(out,
-            context.getExternalContext().getRequestContextPath(),
-            "white");
-      out.write("</div>");
+      String cxPath = context.getExternalContext().getRequestContextPath();
+      out.write("</td></tr>" + 
+                "<tr><td height=12 width=5><img src=\"");
+      out.write(cxPath);
+      out.write("/images/parts/sidebar_bottom_grey_begin.gif\" width=5 height=12></td>" + 
+                "<td width=100% style=\"background-image: url(");
+      out.write(cxPath);
+      out.write("/images/parts/sidebar_bottom_grey_bg.gif)\">" +
+                "<img src=\"");
+      out.write(cxPath);
+      out.write("/images/parts/sidebar_bottom_grey_bg.gif\" width=48 height=12></td>" +
+                "<td align=right width=5><img src=\"");
+      out.write(cxPath);
+      out.write("/images/parts/sidebar_bottom_grey_end.gif\" width=5 height=12></td></tr>" + 
+                "</table>" +
+                "</div>");
    }
 
    @Override