diff --git a/src/app/members/projects/overview/overview.component.html b/src/app/members/projects/overview/overview.component.html
index 88b4c72987c6294a2d4a30cb11fb704a70a50878..dbc6a42c131af4b11d0018ab78aa767063856826 100644
--- a/src/app/members/projects/overview/overview.component.html
+++ b/src/app/members/projects/overview/overview.component.html
@@ -1,4 +1,8 @@
 <app-two-panes>
-  <app-open-registrations pane="left" [editions]="editions"></app-open-registrations>
-  <app-my-participations-overview pane="right" [participations]="participations"></app-my-participations-overview>
+  <app-pane id="open-registrations">
+    <app-open-registrations [editions]="editions"></app-open-registrations>
+  </app-pane>
+  <app-pane id="my-participations">
+    <app-my-participations-overview [participations]="participations"></app-my-participations-overview>
+  </app-pane>
 </app-two-panes>
diff --git a/src/app/members/projects/overview/overview.component.scss b/src/app/members/projects/overview/overview.component.scss
index 76c22b78e1d66d0ad6a03da33d10e17f5d1b4b11..9736f128f8f141aef87d7a8049a6aa506769618f 100644
--- a/src/app/members/projects/overview/overview.component.scss
+++ b/src/app/members/projects/overview/overview.component.scss
@@ -1,31 +1,9 @@
-@import '~sass/mixins';
 @import '~sass/variables';
-@import '~sass/media-queries';
 
-.panes {
-  display: grid;
-  grid-template-columns: 1fr;
-  @include media-xs {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.pane-content {
-  padding: 3em;
-  width: fit-content;
-}
-
-.pane-left {
+#open-registrations {
   background: $color-light-blue;
-  @include drop-shadow($shadow-sm,$inset: true);
-  @include media-xs {
-    .pane-content {
-      margin-left: auto;
-    }
-  }
 }
 
-.pane-right {
+#my-participations {
   background: lighten($color-purple-light, 15);
-  @include drop-shadow($shadow-sm, $inset: true);
 }
diff --git a/src/app/members/student-home/student-home.component.html b/src/app/members/student-home/student-home.component.html
index acbf72e1c1f157b105fd8a771158061658604570..9693f0e68f2da1c7552e9e9500e6b51f8179563f 100644
--- a/src/app/members/student-home/student-home.component.html
+++ b/src/app/members/student-home/student-home.component.html
@@ -1,8 +1,14 @@
-<h1 class="text-center">Mon espace</h1>
+<h1 class="text-center">
+  Mon espace
+</h1>
 
 <app-two-panes>
-  <visits-overview pane="left"></visits-overview>
-  <projects-overview pane="right"></projects-overview>
+  <app-pane id="visits">
+    <visits-overview class="pane-content"></visits-overview>
+  </app-pane>
+  <app-pane id="projects">
+    <projects-overview class="pane-content"></projects-overview>
+  </app-pane>
 </app-two-panes>
 
 <div class="container">
diff --git a/src/app/members/student-home/student-home.component.scss b/src/app/members/student-home/student-home.component.scss
index 078c18c4246ae56d629af8c0b8822a3a4436d530..4b741780e8ca7375acc23a77fbd2a59265b3b0ba 100644
--- a/src/app/members/student-home/student-home.component.scss
+++ b/src/app/members/student-home/student-home.component.scss
@@ -1,36 +1,16 @@
 @import '~sass/mixins';
 @import '~sass/variables';
-@import '~sass/media-queries';
 
-.panes {
-  display: grid;
-  grid-template-columns: 1fr;
-  @include media-xs {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.pane-content {
-  padding: 3em;
-  width: fit-content;
+.container {
+  @include margin-page;
 }
 
-.pane-left {
+#visits {
+  // TODO use a background image
   background: $color-light-blue;
-  @include drop-shadow($shadow-sm,$inset: true);
-  @include media-xs {
-    .pane-content {
-      margin-left: auto;
-    }
-  }
 }
 
-.pane-right {
-  background: lighten($color-purple-light, 15);
-  @include drop-shadow($shadow-sm, $inset: true);
+#projects {
+  // TODO use a background image
+  background: $color-purple-light;
 }
-
-
-.container {
-  @include margin-page;
-}
\ No newline at end of file
diff --git a/src/app/panes/pane/pane.component.html b/src/app/panes/pane/pane.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..f9dfff2777e58c37e0a741d9a04c7087780671a6
--- /dev/null
+++ b/src/app/panes/pane/pane.component.html
@@ -0,0 +1,5 @@
+<div class="pane">
+  <div class="pane-content">
+    <ng-content></ng-content>
+  </div>
+</div>
diff --git a/src/app/panes/pane/pane.component.scss b/src/app/panes/pane/pane.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a0ca093984bbaf4b4c4d6b9bd7c3168c4e1c3644
--- /dev/null
+++ b/src/app/panes/pane/pane.component.scss
@@ -0,0 +1,12 @@
+@import '~sass/mixins';
+@import '~sass/variables';
+
+.pane {
+  height: 100%;
+  @include drop-shadow($shadow-sm, $inset: true);
+}
+
+.pane-content {
+  padding: 3em;
+  width: fit-content;
+}
diff --git a/src/app/panes/pane/pane.component.ts b/src/app/panes/pane/pane.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3d98c3dc72004bab5f6746ffb0d45be3f976e3e4
--- /dev/null
+++ b/src/app/panes/pane/pane.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-pane',
+  templateUrl: './pane.component.html',
+  styleUrls: ['./pane.component.scss']
+})
+export class PaneComponent {}
diff --git a/src/app/panes/panes.module.ts b/src/app/panes/panes.module.ts
index 04acaae9e289f1e066937a2bd9ed79b950311f76..4318091c03ab19c926544f5c7fbdaf9512609b6b 100644
--- a/src/app/panes/panes.module.ts
+++ b/src/app/panes/panes.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { TwoPanesComponent } from './two-panes/two-panes.component';
+import { PaneComponent } from './pane/pane.component';
 
 @NgModule({
   imports: [
@@ -9,9 +10,11 @@ import { TwoPanesComponent } from './two-panes/two-panes.component';
   ],
   declarations: [
     TwoPanesComponent,
+    PaneComponent,
   ],
   exports: [
     TwoPanesComponent,
+    PaneComponent,
   ]
 })
 export class PanesModule { }
diff --git a/src/app/panes/two-panes/two-panes.component.html b/src/app/panes/two-panes/two-panes.component.html
index efd2a9741ab5c8f651c715a24d38677dd03f2777..6dbc74306383aaa6efc4216ee6c449c3b38ceaa9 100644
--- a/src/app/panes/two-panes/two-panes.component.html
+++ b/src/app/panes/two-panes/two-panes.component.html
@@ -1,12 +1 @@
-<div class="panes">
-  <div class="pane-left">
-    <div class="pane-content">
-      <ng-content select="[pane=left]"></ng-content>
-    </div>
-  </div>
-  <div class="pane-right">
-    <div class="pane-content">
-      <ng-content select="[pane=right]"></ng-content>
-    </div>
-  </div>
-</div>
+<ng-content></ng-content>
diff --git a/src/app/panes/two-panes/two-panes.component.scss b/src/app/panes/two-panes/two-panes.component.scss
index 76c22b78e1d66d0ad6a03da33d10e17f5d1b4b11..d0f69030f9e766280e287190b6fc70efc6009392 100644
--- a/src/app/panes/two-panes/two-panes.component.scss
+++ b/src/app/panes/two-panes/two-panes.component.scss
@@ -1,31 +1,9 @@
-@import '~sass/mixins';
-@import '~sass/variables';
 @import '~sass/media-queries';
 
-.panes {
+:host {
   display: grid;
   grid-template-columns: 1fr;
   @include media-xs {
     grid-template-columns: 1fr 1fr;
   }
 }
-
-.pane-content {
-  padding: 3em;
-  width: fit-content;
-}
-
-.pane-left {
-  background: $color-light-blue;
-  @include drop-shadow($shadow-sm,$inset: true);
-  @include media-xs {
-    .pane-content {
-      margin-left: auto;
-    }
-  }
-}
-
-.pane-right {
-  background: lighten($color-purple-light, 15);
-  @include drop-shadow($shadow-sm, $inset: true);
-}