diff --git a/navalplanner-webapp/src/main/webapp/common/css/navalplan_zk.css b/navalplanner-webapp/src/main/webapp/common/css/navalplan_zk.css
index dd094fe90..47e499e52 100644
--- a/navalplanner-webapp/src/main/webapp/common/css/navalplan_zk.css
+++ b/navalplanner-webapp/src/main/webapp/common/css/navalplan_zk.css
@@ -1697,3 +1697,11 @@ input.z-datebox-text-disd {
 .day-details img {
     display: none;
 }
+
+.materials-accordion .z-tab-accordion-header {
+    display: none;
+}
+
+.materials-accordion.z-tabbox-accordion .z-tabpanel-accordion {
+    border: 0;
+}
diff --git a/navalplanner-webapp/src/main/webapp/orders/_assignmentsBox.zul b/navalplanner-webapp/src/main/webapp/orders/_assignmentsBox.zul
index 4a79e1a7a..d1c86fdce 100644
--- a/navalplanner-webapp/src/main/webapp/orders/_assignmentsBox.zul
+++ b/navalplanner-webapp/src/main/webapp/orders/_assignmentsBox.zul
@@ -19,11 +19,9 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<panel title="${i18n:_('Materials')}" border="normal" width="600px">
-    <panelchildren>
         <newdatasortablegrid id="gridMaterials"
             fixedLayout="false"
-            model="@{assignedMaterialsController.assignedMaterials}">
+            model="@{assignedMaterialsController.assignedMaterials}" >
             <columns>
                 <newdatasortablecolumn label="${i18n:_('Code')}" />
                 <newdatasortablecolumn label="${i18n:_('Receipt date')}" />
@@ -33,7 +31,7 @@
                 <newdatasortablecolumn label="${i18n:_('Total price')}" />
                 <newdatasortablecolumn label="${i18n:_('Category')}" />
                 <newdatasortablecolumn label="${i18n:_('Status')}" />
-                <newdatasortablecolumn label="" />
+                <newdatasortablecolumn label="${i18n:_('Op.')}" />
             </columns>
             <rows>
                 <row self="@{each='assignedMaterial'}" value="@{assignedMaterial}">
@@ -69,5 +67,3 @@
                 </row>
             </rows>
         </newdatasortablegrid>
-    </panelchildren>
-</panel>
diff --git a/navalplanner-webapp/src/main/webapp/orders/components/_listOrderElementMaterials.zul b/navalplanner-webapp/src/main/webapp/orders/components/_listOrderElementMaterials.zul
index e03da955d..d21c9e657 100644
--- a/navalplanner-webapp/src/main/webapp/orders/components/_listOrderElementMaterials.zul
+++ b/navalplanner-webapp/src/main/webapp/orders/components/_listOrderElementMaterials.zul
@@ -19,119 +19,131 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <zk>
-<zscript><![CDATA[
+  <zscript><![CDATA[
     Object[] materialStatus = org.navalplanner.business.materials.entities.MaterialStatusEnum
                             .values();
     materialAssignmentComponent = self;
     assignedMaterialsController = materialAssignmentComponent.controller;
 ]]>
-</zscript>
-<vbox apply="${assignedMaterialsController}">
+  </zscript>
+  <vbox apply="${assignedMaterialsController}" sclass="orderelement-materials">
 
 
-    <tabbox mold="accordion">
-        <tabs>
-            <tab id="tbAssignedMaterials" label="${i18n:_('Materials')}" image="common/img/collapse.gif"/>
-            <tab label="${i18n:_('Material search')}" image="common/img/collapse.gif"/>
-        </tabs>
-        <tabpanels>
-            <tabpanel>
+    <tabbox mold="accordion" id="materialsAccordion" sclass="materials-accordion">
+      <tabs>
+        <tab id="tbAssignedMaterials" />
+        <tab id="tbSearchMaterials" />
+      </tabs>
+      <tabpanels>
+        <tabpanel>
+          <vbox width="100%">
+            <!-- Categories -->
+            <vbox style="display:none;">
+              <panel title="${i18n:_('Categories')}" border="normal">
+                <panelchildren>
+                  <button label="${i18n:_('Unselect')}"
+                    onClick="assignedMaterialsController.clearSelectionCategoriesTree()" />
+                  <separator spacing="5px" orient="horizontal" />
+                  <tree id="categoriesTree" fixedLayout="false"
+                    width="280px" rows="10" vflex="true" multiple="false"
+                    onSelect="assignedMaterialsController.refreshMaterialAssigments()">
+                    <treecols>
+                      <treecol label="Name" />
+                      <treecol label="Units" width="50px" />
+                      <treecol label="Price" width="50px" />
+                    </treecols>
+                  </tree>
+                </panelchildren>
+              </panel>
+            </vbox>
+
+            <groupbox style="margin-top: 5px" closable="false">
+              <caption label="${i18n:_('Required materials')}" />
+
+
+              <button label="${i18n:_('Add materials')}" style="margin-bottom: 5px"
+                onClick="materialsAccordion.setSelectedIndex(1);" />
+
+
+              <!-- Materials -->
+              <vbox id="assignmentsBox" width="100%">
+              </vbox>
+            </groupbox>
+
+          </vbox>
+        </tabpanel>
+
+        <tabpanel>
+          <!-- Material search -->
+          <hbox width="100%">
+            <!-- Categories -->
+
+            <groupbox style="margin-top: 5px" closable="false"
+              width="300px">
+              <caption label="${i18n:_('Categories')}" />
+              <vbox>
+                <button label="${i18n:_('Unselect')}" style="margin-bottom: 5px"
+                  onClick="assignedMaterialsController.clearSelectionAllCategoriesTree()" />
+                <tree id="allCategoriesTree" width="280px" rows="10"
+                  vflex="true" multiple="false">
+                  <treecols>
+                    <treecol label="Name" />
+                  </treecols>
+                </tree>
+              </vbox>
+            </groupbox>
+
+            <!-- Found materials -->
+            <groupbox style="margin-top: 5px" closable="false">
+              <caption label="${i18n:_('Materials')}" />
+              <vbox width="100%">
+                <!-- Search textbox -->
                 <hbox>
-                    <!-- Categories  -->
-                    <vbox>
-                        <panel title="${i18n:_('Categories')}" border="normal">
-                            <panelchildren>
-                                <button label="${i18n:_('Unselect')}"
-                                        onClick="assignedMaterialsController.clearSelectionCategoriesTree()" />
-                                <separator spacing="5px" orient="horizontal" />
-                                <tree id="categoriesTree"
-                                        fixedLayout="false"
-                                        width="280px" rows="10" vflex="true" multiple="false"
-                                        onSelect="assignedMaterialsController.refreshMaterialAssigments()">
-                                    <treecols>
-                                        <treecol label="Name" />
-                                        <treecol label="Units" width="50px" />
-                                        <treecol label="Price" width="50px" />
-                                    </treecols>
-                                </tree>
-                            </panelchildren>
-                        </panel>
-                    </vbox>
-
-                    <!-- Materials -->
-                    <vbox id="assignmentsBox">
-                    </vbox>
-                </hbox>
-            </tabpanel>
-
-            <tabpanel>
-                <!-- Material search -->
-                <hbox>
-                    <!-- Categories  -->
-                    <vbox>
-                        <panel title="${i18n:_('Categories')}" border="normal">
-                            <panelchildren>
-                                <toolbarbutton style="text-decoration: none" label="${i18n:_('Unselect')}"
-                                    onClick="assignedMaterialsController.clearSelectionAllCategoriesTree()" />
-                                <tree id="allCategoriesTree"
-                                        width="280px" rows="10" vflex="true" multiple="false">
-                                    <treecols>
-                                        <treecol label="Name" />
-                                    </treecols>
-                                </tree>
-                            </panelchildren>
-                        </panel>
-                    </vbox>
-
-                    <vbox>
-
-                        <!-- Found materials -->
-                        <panel title="${i18n:_('Materials')}" border="normal">
-                            <panelchildren>
-
-                                <!-- Search textbox -->
-                                <hbox>
-                                    <textbox id="txtSearchMaterial" width="250px" style="margin-top: 2px" />
-                                    <button label="${i18n:_('Search')}"
-                                        onClick="assignedMaterialsController.searchMaterials()"/>
-                                    <button label="${i18n:_('Assign')}"
-                                        onClick="assignedMaterialsController.assignSelectedMaterials()" />
-                                </hbox>
-
-                                <separator spacing="10px" orient="horizontal" />
-
-                                <listbox id="lbFoundMaterials"
-                                    multiple="true"
-                                    fixedLayout="true"
-                                    model="@{assignedMaterialsController.matchingMaterials}">
-                                    <listhead sizable="true">
-                                        <listheader label="${i18n:_('Code')}" />
-                                        <listheader label="${i18n:_('Name')}" />
-                                        <listheader label="${i18n:_('Unit type')}" />
-                                        <listheader label="${i18n:_('Unit price')}" />
-                                        <listheader label="${i18n:_('Category')}" />
-                                    </listhead>
-                                    <listitem self="@{each='material'}" value="@{material}">
-                                        <listcell label="@{material.code}" />
-                                        <listcell label="@{material.description}" />
-                                        <listcell>
-                                            <listbox mold="select"  model="@{assignedMaterialsController.unitTypes}"
-                                                    onSelect = "assignedMaterialsController.selectUnitType(self)"
-                                                    itemRenderer="@{assignedMaterialsController.renderer}"
-                                                    disabled="true"/>
-                                        </listcell>
-                                        <listcell label="@{material.defaultUnitPrice}" />
-                                        <listcell label="@{material.category.name}" />
-                                    </listitem>
-                                </listbox>
-                            </panelchildren>
-                        </panel>
-                    </vbox>
+                  <textbox id="txtSearchMaterial" style="margin-top: 2px" />
+                  <button label="${i18n:_('Search')}"
+                    onClick="assignedMaterialsController.searchMaterials()" />
 
                 </hbox>
-            </tabpanel>
-        </tabpanels>
+
+                <separator spacing="10px" orient="horizontal" />
+
+                <listbox id="lbFoundMaterials" multiple="true"
+
+                  model="@{assignedMaterialsController.matchingMaterials}">
+                  <listhead sizable="true">
+                    <listheader label="${i18n:_('Code')}" />
+                    <listheader label="${i18n:_('Name')}" />
+                    <listheader label="${i18n:_('Unit type')}" />
+                    <listheader label="${i18n:_('Unit price')}" />
+                    <listheader label="${i18n:_('Category')}" />
+                  </listhead>
+                  <listitem self="@{each='material'}" value="@{material}">
+                    <listcell label="@{material.code}" />
+                    <listcell label="@{material.description}" />
+                    <listcell>
+                      <listbox mold="select"
+                        model="@{assignedMaterialsController.unitTypes}"
+                        onSelect="assignedMaterialsController.selectUnitType(self)"
+                        itemRenderer="@{assignedMaterialsController.renderer}"
+                        disabled="true" />
+                    </listcell>
+                    <listcell label="@{material.defaultUnitPrice}" />
+                    <listcell label="@{material.category.name}" />
+                  </listitem>
+                </listbox>
+              </vbox>
+            </groupbox>
+
+          </hbox>
+
+          <button label="${i18n:_('Assign materials')}" sclass="global-action"
+            onClick="assignedMaterialsController.assignSelectedMaterials()" />
+          <button label="${i18n:_('Cancel')}" sclass="global-action"
+            onClick="materialsAccordion.setSelectedIndex(0);" />
+
+        </tabpanel>
+      </tabpanels>
     </tabbox>
 
-</vbox>
+  </vbox>
 </zk>
\ No newline at end of file