diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index 9b4fea673e248e6f997981aeec51f9612fc9cca7..a35eb1cd9ccfe7afe7b691c2d6d0c2c53a2c4191 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -53,7 +53,6 @@ button[type=submit]{
   border-radius: 3px;
   line-height: 1.5;
   font-size: 1rem;
-  margin: 30px 0 0 0;
   padding: .5rem 1rem;
   text-align: center;
   text-transform: uppercase;
@@ -83,8 +82,6 @@ button[type=submit]{
   box-shadow: 0 0 10px rgba(0,0,0,.5);
   border-radius: 2px;
   margin-bottom: 40px;
-  align-items: center;
-  justify-content: center;
 }
 
 .list-item {
@@ -125,7 +122,6 @@ button[type=submit]{
   text-decoration: none;
   float: left;
   color: rgba(255,255,255,.75) !important;
-  font-size: 24px;
   line-height: 60px;
   background: -webkit-linear-gradient(top left, #FA772E, #FC4326);
   -webkit-background-clip: text;
diff --git a/templates/capsule/editors/list_editors.html.twig b/templates/capsule/editors/list_editors.html.twig
index d92f65372c09d4177aab76715f005e9af8f21a57..0dab1a470b5fda6b480a2f57c553a4689874eb65 100644
--- a/templates/capsule/editors/list_editors.html.twig
+++ b/templates/capsule/editors/list_editors.html.twig
@@ -29,7 +29,14 @@
             </div>
         {% endfor %}
 
-        <div class="d-flex flex-row flex-md-row justify-content-start">
+        <div class="d-flex flex-md-row flex-column justify-content-start">
+            <div class="d-flex flex-column justify-content-center ms-md-5 ms-0 order-md-2 mb-4 col-sm-8 col-md-6 col-lg-5 col-xl-4">
+                {{ form_start(userPermissionsCapsuleForm, {'attr': {novalidate: 'novalidate'}}) }}
+                {{ form_row(userPermissionsCapsuleForm.email, {'row_attr': {'class' : 'm-auto mb-4'}})  }}
+                {{ form_row(userPermissionsCapsuleForm.validate) }}
+                {{ form_end(userPermissionsCapsuleForm) }}
+            </div>
+
             <div class="d-flex flex-row pe-md-5 pb-3 fw-normal me-0 me-md-5">
                 <div class="pe-3 pe-md-4 text-nowrap">
                     <h5>
@@ -54,14 +61,7 @@
                     </ul>
                 </div>
             </div>
-
-            <div class="d-flex flex-column justify-content-center ms-5">
-                {{ form_start(userPermissionsCapsuleForm, {'attr': {novalidate: 'novalidate'}}) }}
-                {{ form_row(userPermissionsCapsuleForm.email, {'row_attr': {'class' : 'm-auto mb-4 col-12'}})  }}
-                {{ form_row(userPermissionsCapsuleForm.validate, {'row_attr': {'class' : 'm-auto mb-5 col-2'}})  }}
-                {{ form_end(userPermissionsCapsuleForm) }}
-            </div>
-
+            
         </div>
     </div>
 
diff --git a/templates/capsule/index.html.twig b/templates/capsule/index.html.twig
index fe8a685f763d9bba259d71a460a00d485ae59f41..64c31b6c823d34e31fbe30f5e34c7f138cd64267 100644
--- a/templates/capsule/index.html.twig
+++ b/templates/capsule/index.html.twig
@@ -8,20 +8,23 @@
 
 {% block body %}
     <div class="row gx-0">
-        <div class="row-title-box">
-            <h3 class="row-title">
+        <div class="row-title-box d-flex justify-content-between align-items-center">
+            <h2 class="row-title">
                 {{ 'capsule.title'|trans }}
-            </h3>
+            </h2>
+            <form class="d-none d-md-flex">
+                <button id="btn-orange" formaction="/create">
+                    + {{ 'capsule.create_capsule'|trans }}
+                </button>
+            </form>
         </div>
     </div>
-<div class="mt-4">
-    <div class="d-flex justify-content-center align-items-center">
-        <form>
-            <button id="btn-orange" formaction="/create">
-               + {{ 'capsule.create_capsule'|trans }}
-            </button>
-        </form>
-    </div>
+
+    <form class="d-md-none d-flex justify-content-center align-items-center">
+        <button id="btn-orange" formaction="/create">
+           + {{ 'capsule.create_capsule'|trans }}
+        </button>
+    </form>
 
     {% for flashWarning in app.flashes('warning') %}
         <div class="text-center alert alert-warning col-5 mx-auto my-5" role="alert">
@@ -37,9 +40,9 @@
 
 </div>
 
-    <div class="capsules-list d-flex flex-column m-6">
+    <div class="d-flex flex-column align-items-center mt-4 mb-4">
         {% for capsule in capsules %}
-        <div class="capsule-item pb-4 m-5">
+        <div class="capsule-item pb-4 col-12 col-lg-10 col-xl-8">
             <div class="d-flex flex-column flex-md-row justify-content-center align-items-center mt-sm-4">
                 <div class="list-item">
                     <a href="/capsule/preview/{{ capsule.getLinkPath() }}" class="capsule-title">
diff --git a/templates/layout.html.twig b/templates/layout.html.twig
index bec0bce48dfa091ed8c509a023908b09a45e174a..deb0ae75ea6f813f39bca214619befa203c58f9c 100644
--- a/templates/layout.html.twig
+++ b/templates/layout.html.twig
@@ -18,7 +18,7 @@
 
 </head>
 
-<body class="container col-10 col-md-8 col-lg-6 m-auto">
+<body class="container col-10 col-md-8 m-auto">
 <div class="position-relative d-flex flex-row align-items-center justify-content-center mb-5">
   <a href="/my_capsules" class="align-self-center">
     <img id="header-memorekall-logo" class="memorekall-logo" src="{{ asset('build/images/MemoRekall.png') }}">