diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0765cdcdb..0944833f1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ Ce projet adhère au principe du [Semantic Versioning](https://semver.org/spec/v
 - Corrige l'hôte de développement et permet sa customisation via une variable d'environnement. 
 - Améliorations internes de la validation des données.
 - Ajoute une page de vue du matériel en détail.
+- Utilise des onglets dans la page de vue du matériel.
 
 ## 0.10.2 (2020-11-16)
 
diff --git a/client/.env b/client/.env.development
similarity index 100%
rename from client/.env
rename to client/.env.development
diff --git a/client/src/locale/en/common.js b/client/src/locale/en/common.js
index 2eaf9ab06..963d9428d 100644
--- a/client/src/locale/en/common.js
+++ b/client/src/locale/en/common.js
@@ -155,6 +155,7 @@ export default {
     "{count} items",
   ],
   'stock-items-count': "{count} in stock",
+  'out-of-order-items-count': "{count} out of order",
   'sub-total': "Sub-total",
   'total-amount': "Total amount",
   'total-amount-with-discount': "Total with discount",
diff --git a/client/src/locale/fr/common.js b/client/src/locale/fr/common.js
index c3dc6f3a5..40e18c70d 100644
--- a/client/src/locale/fr/common.js
+++ b/client/src/locale/fr/common.js
@@ -155,6 +155,7 @@ export default {
     "{count} articles",
   ],
   'stock-items-count': "{count} en stock",
+  'out-of-order-items-count': "{count} en panne",
   'sub-total': "Sous-total",
   'total-amount': "Montant total",
   'total-amount-with-discount': "Total après remise",
diff --git a/client/src/pages/MaterialView/Infos/Attributes/Attributes.scss b/client/src/pages/MaterialView/Infos/Attributes/Attributes.scss
new file mode 100644
index 000000000..c1686ec51
--- /dev/null
+++ b/client/src/pages/MaterialView/Infos/Attributes/Attributes.scss
@@ -0,0 +1,11 @@
+.MaterialViewInfosAttributes {
+  &__list {
+    &__item {
+      margin-bottom: .3rem;
+
+      &__value {
+        font-weight: 700;
+      }
+    }
+  }
+}
diff --git a/client/src/pages/MaterialView/Infos/Attributes/Attributes.vue b/client/src/pages/MaterialView/Infos/Attributes/Attributes.vue
new file mode 100644
index 000000000..9014ec04b
--- /dev/null
+++ b/client/src/pages/MaterialView/Infos/Attributes/Attributes.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="MaterialViewInfosAttributes">
+    <h3>{{ $t('special-attributes') }}</h3>
+    <ul
+      class="MaterialViewInfosAttributes__list"
+      v-if="attributes.length > 0"
+    >
+      <li
+        class="MaterialViewInfosAttributes__list__item"
+        v-for="attribute in attributes"
+        :key="attribute.id"
+      >
+        {{ attribute.name }}:
+        <span
+          v-if="attribute.type !== 'boolean'"
+          class="MaterialViewInfosAttributes__list__item__value"
+        >
+          {{ attribute.value }}
+          {{ attribute.unit }}
+        </span>
+        <span
+          v-if="attribute.type === 'boolean'"
+          class="MaterialViewInfosAttributes__list__item__value"
+        >
+          {{ attribute.value ? $t('yes') : $t('no') }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss">
+  @import '../../../../themes/default/index';
+  @import './Attributes';
+</style>
+
+<script>
+export default {
+  name: 'MaterialViewInfosAttributes',
+  props: {
+    attributes: { required: true, type: Array },
+  },
+};
+</script>
diff --git a/client/src/pages/MaterialView/Infos/Infos.scss b/client/src/pages/MaterialView/Infos/Infos.scss
new file mode 100644
index 000000000..9a04df2b4
--- /dev/null
+++ b/client/src/pages/MaterialView/Infos/Infos.scss
@@ -0,0 +1,35 @@
+.MaterialViewInfos {
+  display: flex;
+  flex-wrap: wrap;
+
+  &__main {
+    flex: 2;
+    min-width: 250px;
+    margin-right: 3rem;
+  }
+
+  &__extras {
+    flex: 1;
+    min-width: 250px;
+    padding: 1rem 0 0;
+  }
+
+  &__rental-price,
+  &__stock-quantity {
+    font-weight: 700;
+    margin-bottom: .3rem;
+  }
+
+  &__out-of-order {
+    color: $text-danger-color;
+  }
+
+  &__categories {
+    margin: 1.5rem 0;
+  }
+
+  &__dates {
+    color: $text-light-color;
+    margin-top: 1.5rem;
+  }
+}
diff --git a/client/src/pages/MaterialView/Infos/Infos.vue b/client/src/pages/MaterialView/Infos/Infos.vue
new file mode 100644
index 000000000..f5d8b5661
--- /dev/null
+++ b/client/src/pages/MaterialView/Infos/Infos.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="MaterialViewInfos">
+    <section class="MaterialViewInfos__main">
+      <h2>
+        {{ material.reference }}
+      </h2>
+      <h3>
+        <router-link :to="`/materials?${queryStringCategory}`">
+          {{ categoryName }}
+        </router-link>
+        <span v-if="subCategoryName">/</span>
+        <router-link
+          :to="`/materials?${queryStringSubCategory}`"
+          v-if="subCategoryName"
+        >
+          {{ subCategoryName }}
+        </router-link>
+        /
+        {{ material.name }}
+      </h3>
+      <p>{{ material.description }}</p>
+      <h3>{{ $t('quantities') }}</h3>
+      <ul>
+        <li class="MaterialViewInfos__stock-quantity">
+          {{ $t('stock-items-count', { count: material.stock_quantity || 0 }) }}
+        </li>
+        <li
+          v-if="material.out_of_order_quantity > 0"
+          class="MaterialViewInfos__out-of-order"
+        >
+          {{ $t('out-of-order-items-count', { count: material.out_of_order_quantity || 0 }) }}
+        </li>
+      </ul>
+      <div class="MaterialViewInfos__billing" v-if="showBilling">
+        <h3>{{ $t('prices') }}</h3>
+        <ul>
+          <li class="MaterialViewInfos__rental-price">
+            {{ $t('value-per-day', { value: rentalPrice }) }}
+          </li>
+          <li v-if="replacementPrice">
+            {{ $t('replacement-price') }} {{ replacementPrice }}
+          </li>
+        </ul>
+        <h3>{{ $t('billing') }}</h3>
+        <p v-if="material.is_hidden_on_bill">
+          {{ $t('material-not-displayed-on-bill') }}
+        </p>
+        <p v-if="material.is_discountable">
+          {{ $t('material-is-discountable') }}
+        </p>
+      </div>
+      <Attributes
+        v-if="material.attributes.length > 0"
+        :attributes="material.attributes"
+      />
+      <div class="MaterialViewInfos__notes" v-if="material.note">
+        <h3>{{ $t('notes') }}</h3>
+        <p>{{ material.note }}</p>
+      </div>
+    </section>
+    <section class="MaterialViewInfos__extras">
+      <div class="MaterialViewInfos__actions">
+        <router-link
+          v-tooltip="$t('action-edit')"
+          :to="`/materials/${material.id}`"
+          tag="button"
+          class="info"
+        >
+          <i class="fas fa-edit" />
+          {{ $t('action-edit') }}
+        </router-link>
+      </div>
+      <div class="MaterialViewInfos__categories">
+        <p>{{ $t('category') }}: <strong>{{ categoryName }}</strong></p>
+        <p v-if="subCategoryName">
+          {{ $t('sub-category') }}: <strong>{{ subCategoryName }}</strong>
+        </p>
+      </div>
+      <MaterialTags :tags="material.tags" />
+      <div class="MaterialViewInfos__dates">
+        <p>{{ $t('created-at') }} {{ createDate }}</p>
+        <p>{{ $t('updated-at') }} {{ updateDate }}</p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style lang="scss">
+  @import '../../../themes/default/index';
+  @import './Infos';
+</style>
+
+<script src="./index.js"></script>
diff --git a/client/src/pages/MaterialView/Infos/index.js b/client/src/pages/MaterialView/Infos/index.js
new file mode 100644
index 000000000..442e8cd60
--- /dev/null
+++ b/client/src/pages/MaterialView/Infos/index.js
@@ -0,0 +1,56 @@
+import moment from 'moment';
+import Config from '@/config/globalConfig';
+import formatAmount from '@/utils/formatAmount';
+import store from '@/store';
+import MaterialTags from '@/components/MaterialTags/MaterialTags.vue';
+import Attributes from './Attributes/Attributes.vue';
+
+export default {
+  name: 'MaterialViewInfos',
+  components: {
+    Attributes,
+    MaterialTags,
+  },
+  props: {
+    material: { required: true, type: Object },
+  },
+  data() {
+    return {
+      showBilling: Config.billingMode !== 'none',
+    };
+  },
+  computed: {
+    createDate() {
+      const { created_at: createdAt } = this.material;
+      return createdAt ? moment(createdAt).format('L') : null;
+    },
+    updateDate() {
+      const { updated_at: updatedAt } = this.material;
+      return updatedAt ? moment(updatedAt).format('L') : null;
+    },
+    categoryName() {
+      const { category_id: categoryId } = this.material;
+      const categoryNameGetter = store.getters['categories/categoryName'];
+      return categoryNameGetter(categoryId);
+    },
+    subCategoryName() {
+      const { sub_category_id: subCategoryId } = this.material;
+      const subCategoryNameGetter = store.getters['categories/subCategoryName'];
+      return subCategoryNameGetter(subCategoryId);
+    },
+    rentalPrice() {
+      const { rental_price: rentalPrice } = this.material;
+      return rentalPrice ? formatAmount(rentalPrice) : null;
+    },
+    replacementPrice() {
+      const { replacement_price: replacementPrice } = this.material;
+      return replacementPrice ? formatAmount(replacementPrice) : null;
+    },
+    queryStringCategory() {
+      return `category=${this.material.category_id}`;
+    },
+    queryStringSubCategory() {
+      return `category=${this.material.category_id}&subCategory=${this.material.sub_category_id}`;
+    },
+  },
+};
diff --git a/client/src/pages/MaterialView/MaterialView.scss b/client/src/pages/MaterialView/MaterialView.scss
index 497c51cb6..5008bdf89 100644
--- a/client/src/pages/MaterialView/MaterialView.scss
+++ b/client/src/pages/MaterialView/MaterialView.scss
@@ -1,32 +1,8 @@
 .MaterialView {
-  display: flex;
-  flex-wrap: wrap;
   color: $text-base-color;
   padding-bottom: 6rem;
 
-  &__infos {
-    flex: 2;
-    min-width: 250px;
-    margin-right: 3rem;
-  }
-
-  &__no-attribute-help {
-    color: $text-light-color;
-    font-style: italic;
-  }
-
-  &__extras {
-    flex: 1;
-    min-width: 250px;
-    padding: 1rem 0 0;
-  }
-
-  &__categories {
-    margin: 1.5rem 0;
-  }
-
-  &__dates {
-    color: $text-light-color;
-    margin-top: 1.5rem;
+  .vue-tablist {
+    margin-bottom: 1rem;
   }
 }
diff --git a/client/src/pages/MaterialView/MaterialView.vue b/client/src/pages/MaterialView/MaterialView.vue
index b0ecd5a4e..c9d1064b4 100644
--- a/client/src/pages/MaterialView/MaterialView.vue
+++ b/client/src/pages/MaterialView/MaterialView.vue
@@ -7,106 +7,14 @@
         :isLoading="isLoading"
       />
       <div class="MaterialView" v-if="!isLoading">
-        <section class="MaterialView__infos">
-          <h2>
-            {{ material.reference }}
-          </h2>
-          <h3>
-            <router-link :to="`/materials?${queryStringCategory}`">
-              {{ categoryName }}
-            </router-link>
-            <span v-if="subCategoryName">/</span>
-            <router-link
-              :to="`/materials?${queryStringSubCategory}`"
-              v-if="subCategoryName"
-            >
-              {{ subCategoryName }}
-            </router-link>
-            /
-            {{ material.name }}
-          </h3>
-          <p>{{ material.description }}</p>
-          <h3>{{ $t('quantities') }}</h3>
-          <ul>
-            <li>
-              <strong>{{ material.stock_quantity }} en stock</strong>
-            </li>
-            <li v-if="material.out_of_order_quantity > 0">
-              {{ material.out_of_order_quantity || 0 }} en panne
-            </li>
-          </ul>
-          <div class="MaterialView__billing" v-if="showBilling">
-            <h3>{{ $t('prices') }}</h3>
-            <ul>
-              <li>
-                <strong>{{ $t('value-per-day', { value: rentalPrice }) }}</strong>
-              </li>
-              <li v-if="replacementPrice">
-                {{ $t('replacement-price') }} {{ replacementPrice }}
-              </li>
-            </ul>
-            <h3>{{ $t('billing') }}</h3>
-            <p v-if="material.is_hidden_on_bill">
-              {{ $t('material-not-displayed-on-bill') }}
-            </p>
-            <p v-if="material.is_discountable">
-              {{ $t('material-is-discountable') }}
-            </p>
-          </div>
-          <div
-            class="MaterialView__attributes"
-            v-if="material.attributes.length > 0"
-          >
-            <h3>{{ $t('special-attributes') }}</h3>
-            <ul
-              class="MaterialView__attributes__list"
-              v-if="material.attributes.length > 0"
-            >
-              <li
-                class="MaterialView__attributes__list__item"
-                v-for="attribute in material.attributes"
-                :key="attribute.id"
-              >
-                {{ attribute.name }}:
-                <span v-if="attribute.type !== 'boolean'">
-                  {{ attribute.value }}
-                  {{ attribute.unit }}
-                </span>
-                <span v-if="attribute.type === 'boolean'">
-                  {{ attribute.value ? $t('yes') : $t('no') }}
-                </span>
-              </li>
-            </ul>
-          </div>
-          <div class="MaterialView__notes" v-if="material.note">
-            <h3>{{ $t('notes') }}</h3>
-            <p>{{ material.note }}</p>
-          </div>
-        </section>
-        <section class="MaterialView__extras">
-          <div class="MaterialView__actions">
-            <router-link
-              v-tooltip="$t('action-edit')"
-              :to="`/materials/${material.id}`"
-              tag="button"
-              class="info"
-            >
-              <i class="fas fa-edit" />
-              {{ $t('action-edit') }}
-            </router-link>
-          </div>
-          <div class="MaterialView__categories">
-            <p>{{ $t('category') }}: <strong>{{ categoryName }}</strong></p>
-            <p v-if="subCategoryName">
-              {{ $t('sub-category') }}: <strong>{{ subCategoryName }}</strong>
-            </p>
-          </div>
-          <MaterialTags :tags="material.tags" />
-          <div class="MaterialView__dates">
-            <p>{{ $t('created-at') }} {{ createDate }}</p>
-            <p>{{ $t('updated-at') }} {{ updateDate }}</p>
-          </div>
-        </section>
+        <tabs>
+          <template slot="infos">
+            <i class="fas fa-info-circle" /> {{ $t('informations') }}
+          </template>
+          <tab title-slot="infos">
+            <Infos :material="material" />
+          </tab>
+        </tabs>
       </div>
     </div>
   </div>
diff --git a/client/src/pages/MaterialView/index.js b/client/src/pages/MaterialView/index.js
index 9e98c48f0..38ed5fe99 100644
--- a/client/src/pages/MaterialView/index.js
+++ b/client/src/pages/MaterialView/index.js
@@ -1,60 +1,27 @@
-import moment from 'moment';
-import Config from '@/config/globalConfig';
-import formatAmount from '@/utils/formatAmount';
+import { Tabs, Tab } from 'vue-slim-tabs';
 import store from '@/store';
 import Help from '@/components/Help/Help.vue';
-import MaterialTags from '@/components/MaterialTags/MaterialTags.vue';
+import Infos from './Infos/Infos.vue';
 
 export default {
   name: 'MaterialView',
-  components: { Help, MaterialTags },
+  components: {
+    Tabs,
+    Tab,
+    Help,
+    Infos,
+  },
   data() {
     return {
       help: '',
       error: null,
       isLoading: false,
-      extraAttributes: [],
-      showBilling: Config.billingMode !== 'none',
       material: {
         id: this.$route.params.id,
         attributes: [],
       },
     };
   },
-  computed: {
-    createDate() {
-      const { created_at: createdAt } = this.material;
-      return createdAt ? moment(createdAt).format('L') : null;
-    },
-    updateDate() {
-      const { updated_at: updatedAt } = this.material;
-      return updatedAt ? moment(updatedAt).format('L') : null;
-    },
-    categoryName() {
-      const { category_id: categoryId } = this.material;
-      const categoryNameGetter = store.getters['categories/categoryName'];
-      return categoryNameGetter(categoryId);
-    },
-    subCategoryName() {
-      const { sub_category_id: subCategoryId } = this.material;
-      const subCategoryNameGetter = store.getters['categories/subCategoryName'];
-      return subCategoryNameGetter(subCategoryId);
-    },
-    rentalPrice() {
-      const { rental_price: rentalPrice } = this.material;
-      return rentalPrice ? formatAmount(rentalPrice) : null;
-    },
-    replacementPrice() {
-      const { replacement_price: replacementPrice } = this.material;
-      return replacementPrice ? formatAmount(replacementPrice) : null;
-    },
-    queryStringCategory() {
-      return `category=${this.material.category_id}`;
-    },
-    queryStringSubCategory() {
-      return `category=${this.material.category_id}&subCategory=${this.material.sub_category_id}`;
-    },
-  },
   mounted() {
     store.dispatch('categories/fetch');
 
diff --git a/client/src/style/vendors/_vue-slim-tabs.scss b/client/src/style/vendors/_vue-slim-tabs.scss
index 523cccfe6..bd4bac197 100644
--- a/client/src/style/vendors/_vue-slim-tabs.scss
+++ b/client/src/style/vendors/_vue-slim-tabs.scss
@@ -11,7 +11,7 @@
   position: relative;
   bottom: -1px;
   margin-right: 1px;
-  padding: .8rem 1rem;
+  padding: 10px 16px;
   border-bottom: 2px solid $tabs-bottom-border-color;
   border-radius: $input-border-radius $input-border-radius 0 0;
   background-color: $bg-color-side-nav;