diff --git a/cypress/integration/layout.spec.js b/cypress/integration/layout.spec.js
--- a/cypress/integration/layout.spec.js
+++ b/cypress/integration/layout.spec.js
@@ -8,8 +8,11 @@
 const url = '/';
 
 describe('Test top-bar', function() {
-  it('should should contain all navigation links', function() {
+  beforeEach(function() {
+    cy.clearLocalStorage();
     cy.visit(url);
+  });
+  it('should should contain all navigation links', function() {
     cy.get('.swh-top-bar a')
       .should('have.length.of.at.least', 4)
       .and('be.visible')
@@ -17,17 +20,68 @@
   });
 
   it('should show donate button on lg screen', function() {
-    cy.visit(url);
     cy.get('.swh-donate-link')
       .should('be.visible');
   });
 
   it('should hide donate button on sm screen', function() {
     cy.viewport(600, 800);
-    cy.visit(url);
     cy.get('.swh-donate-link')
       .should('not.be.visible');
   });
+  it('should change container width when toggling Full width switch', function() {
+    cy.get('#swh-web-content')
+      .should('have.class', 'container')
+      .should('not.have.class', 'container-fluid');
+
+    cy.should(() => {
+      expect(JSON.parse(localStorage.getItem('swh-web-full-width'))).to.be.null;
+    });
+
+    cy.get('#swh-full-width-switch')
+      .click({force: true});
+
+    cy.get('#swh-web-content')
+      .should('not.have.class', 'container')
+      .should('have.class', 'container-fluid');
+
+    cy.should(() => {
+      expect(JSON.parse(localStorage.getItem('swh-web-full-width'))).to.be.true;
+    });
+
+    cy.get('#swh-full-width-switch')
+      .click({force: true});
+
+    cy.get('#swh-web-content')
+      .should('have.class', 'container')
+      .should('not.have.class', 'container-fluid');
+
+    cy.should(() => {
+      expect(JSON.parse(localStorage.getItem('swh-web-full-width'))).to.be.false;
+    });
+  });
+  it('should restore container width when loading page again', function() {
+    cy.visit(url)
+      .get('#swh-web-content')
+      .should('have.class', 'container')
+      .should('not.have.class', 'container-fluid');
+
+    cy.get('#swh-full-width-switch')
+      .click({force: true});
+
+    cy.visit(url)
+      .get('#swh-web-content')
+      .should('not.have.class', 'container')
+      .should('have.class', 'container-fluid');
+
+    cy.get('#swh-full-width-switch')
+      .click({force: true});
+
+    cy.visit(url)
+      .get('#swh-web-content')
+      .should('have.class', 'container')
+      .should('not.have.class', 'container-fluid');
+  });
 });
 
 describe('Test footer', function() {
diff --git a/swh/web/assets/src/bundles/webapp/webapp-utils.js b/swh/web/assets/src/bundles/webapp/webapp-utils.js
--- a/swh/web/assets/src/bundles/webapp/webapp-utils.js
+++ b/swh/web/assets/src/bundles/webapp/webapp-utils.js
@@ -313,3 +313,26 @@
 export function getSwhIdsContext() {
   return swhidsContext_;
 }
+
+function setFullWidth(fullWidth) {
+  if (fullWidth) {
+    $('#swh-web-content').removeClass('container');
+    $('#swh-web-content').addClass('container-fluid');
+  } else {
+    $('#swh-web-content').removeClass('container-fluid');
+    $('#swh-web-content').addClass('container');
+  }
+  localStorage.setItem('swh-web-full-width', JSON.stringify(fullWidth));
+  $('#swh-full-width-switch').prop('checked', fullWidth);
+}
+
+export function fullWidthToggled(event) {
+  setFullWidth($(event.target).prop('checked'));
+}
+
+export function setContainerFullWidth() {
+  let previousFullWidthState = JSON.parse(localStorage.getItem('swh-web-full-width'));
+  if (previousFullWidthState !== null) {
+    setFullWidth(previousFullWidthState);
+  }
+}
diff --git a/swh/web/templates/layout.html b/swh/web/templates/layout.html
--- a/swh/web/templates/layout.html
+++ b/swh/web/templates/layout.html
@@ -71,11 +71,12 @@
     <div class="wrapper">
       <div class="swh-top-bar">
         <ul>
-          {% if oidc_enabled %}
-            <li class="swh-position-left">
-              <a class="swh-donate-link" href="https://www.softwareheritage.org/donate">Donate</a>
-            </li>
-          {% endif %}
+          <li class="swh-position-left">
+            <div class="custom-control custom-switch">
+              <input type="checkbox" class="custom-control-input" id="swh-full-width-switch" onclick="swh.webapp.fullWidthToggled(event)">
+              <label class="custom-control-label font-weight-normal" for="swh-full-width-switch">Full width</label>
+            </div>
+          </li>
           <li>
             <a href="https://www.softwareheritage.org">Home</a>
           </li>
@@ -83,7 +84,10 @@
             <a href="https://forge.softwareheritage.org/">Development</a>
           </li>
           <li>
-              <a href="https://docs.softwareheritage.org/devel/">Documentation</a>
+            <a href="https://docs.softwareheritage.org/devel/">Documentation</a>
+          </li>
+          <li>
+            <a class="swh-donate-link" href="https://www.softwareheritage.org/donate">Donate</a>
           </li>
           <li class="swh-position-right">
             {% url 'logout' as logout_url %}
@@ -100,8 +104,6 @@
               {% else %}
                 <a href="{% url 'oidc-login' %}">login</a>
               {% endif %}
-            {% else %}
-              <a class="swh-donate-link" href="https://www.softwareheritage.org/donate">Donate</a>
             {% endif %}
           </li>
         </ul>
@@ -186,7 +188,7 @@
 
     <div class="content-wrapper">
       <section class="content">
-        <div class="container">
+        <div class="container" id="swh-web-content">
           {% block content %}{% endblock %}
         </div>
       </section>
@@ -215,6 +217,9 @@
     <div id="back-to-top">
       <a href="#top"><img alt="back to top" src="{% static 'img/arrow-up-small.png' %}" /></a>
     </div>
+    <script>
+      swh.webapp.setContainerFullWidth();
+    </script>
   </body>
 
 </html>