diff --git a/portfolio/public/images/diapos/MLD.png b/portfolio/public/images/diapos/MLD.png
index f694d9a..6bc6157 100644
Binary files a/portfolio/public/images/diapos/MLD.png and b/portfolio/public/images/diapos/MLD.png differ
diff --git a/portfolio/public/images/diapos/usecase1.png b/portfolio/public/images/diapos/usecase1.png
index cc7e1fa..9cf1953 100644
Binary files a/portfolio/public/images/diapos/usecase1.png and b/portfolio/public/images/diapos/usecase1.png differ
diff --git a/portfolio/src/components/CubicMenu/CubicMenu.jsx b/portfolio/src/components/CubicMenu/CubicMenu.jsx
index 30a8ed5..e020645 100644
--- a/portfolio/src/components/CubicMenu/CubicMenu.jsx
+++ b/portfolio/src/components/CubicMenu/CubicMenu.jsx
@@ -54,7 +54,7 @@ const CubicMenu = () => {
 
                 <div className="scene">
                     <div
-                        className={`cube--small cube--green nav__cube 
+                        className={`cube--xs cube--green nav__cube 
                          ${isMenuOpen ? "cube--menu" : ""}`}
                         onClick={() => setMenuOpen(!isMenuOpen)}
                     >
diff --git a/portfolio/src/components/CubicMenu/CubicMenu.scss b/portfolio/src/components/CubicMenu/CubicMenu.scss
index d898c9e..774dd25 100644
--- a/portfolio/src/components/CubicMenu/CubicMenu.scss
+++ b/portfolio/src/components/CubicMenu/CubicMenu.scss
@@ -4,7 +4,7 @@
 
 .nav {
     position: absolute;
-    width: 100vw;
+    width: 97vw ;
     height: 0;
     padding: 10px;
     padding-top: 30px;
diff --git a/portfolio/src/components/Project/Cube/Cube.jsx b/portfolio/src/components/Project/Cube/Cube.jsx
index a9186c8..ef59de9 100644
--- a/portfolio/src/components/Project/Cube/Cube.jsx
+++ b/portfolio/src/components/Project/Cube/Cube.jsx
@@ -224,7 +224,7 @@ export default function Cube(props) {
                     }`}
                     id={`scene${id}`}
                 >
-                    <div className="cube cube--flexible cube--green">
+                    <div className="cube cube--responsive cube--green">
                         <div className="cube__front">
                             <img
                                 className="cube__image"
diff --git a/portfolio/src/components/Project/Cube/Cube.scss b/portfolio/src/components/Project/Cube/Cube.scss
index 3d53f43..b699c4d 100644
--- a/portfolio/src/components/Project/Cube/Cube.scss
+++ b/portfolio/src/components/Project/Cube/Cube.scss
@@ -9,13 +9,6 @@
     perspective: 500vw;
     perspective-origin: -50% 0%;
     pointer-events: none;
-    @include breakpoint_height(sm) {
-        @include breakpoint(md) {
-            pointer-events: auto;
-            width: 50vw;
-            height: calc(100vh - 200px);
-        }
-}
     &--grab {
         &:hover {
             cursor: url(../../../../public/images/cursors-grab.png), grab;
@@ -44,13 +37,6 @@
     height: 60px;
     display: none;
     gap: 3px;
-
-    @include breakpoint_height(sm) {
-        @include breakpoint(md) {
-            display: flex;
-        }
-    }
-
     button {
         width: 50%;
         height: 100%;
@@ -68,4 +54,21 @@
             background-color: fade-out($color: $primary-color, $amount: 0.2);
         }
     }
+}
+
+
+@media screen and ( min-width: $md ){
+    .layout {
+        pointer-events: auto;
+        width: 50vw;
+        height: calc(100vh - 200px);
+    }
+    .buttons {
+        display: flex;
+    }
+}
+
+// when viewport width < $md and height < $sm ( mobile landscape mode )
+@media screen and ( max-width: $md ) and ( max-height: $sm ) {
+
 }
\ No newline at end of file
diff --git a/portfolio/src/components/Project/Info/Info.scss b/portfolio/src/components/Project/Info/Info.scss
index 73d1571..b030e63 100644
--- a/portfolio/src/components/Project/Info/Info.scss
+++ b/portfolio/src/components/Project/Info/Info.scss
@@ -8,29 +8,11 @@
     line-height: 0.9em;
     display: grid;
     grid-template-rows: 1fr 100px 60px;
-
-    @include breakpoint_height(sm) {
-        @include breakpoint(md) {
-            font-size: 1.2em;
-            line-height: 1.2em;
-            border-right: thick double $primary-color;
-        }
-    }
-
     &__description {
         padding: 0 20px;
         display: flex;
         align-items: center;
         justify-content: center;
-
-        @include breakpoint_height(sm) {
-            @include breakpoint(md) {
-                align-items: flex-start;
-                line-height: 1.5em;
-                font-size: 1.4em;
-                padding-top: 40%;
-            }
-        }
     }
 
     &__table {
@@ -78,4 +60,67 @@
             }
         }
     }
+}
+
+// When viewport width > md
+@media screen and ( min-width: $md ) {
+    // Increase font size and middle line.
+    .info{
+        font-size: 1em;
+        line-height: 1em;
+        border-right: thick double $primary-color;
+
+        // Replace description table and increse font size.
+        &__description {
+                line-height: 1.5em;
+                font-size: 1.4em;
+        }
+    }
+    
+}
+
+// When viewport width > lg
+@media screen and ( min-width: $xl ) {
+    // Increase font size and middle line.
+    .info{
+        font-size: 1.2em;
+        line-height: 1.2em;
+        border-right: thick double $primary-color;
+
+        // Replace description table and increse font size.
+        &__description {
+                align-items: flex-start;
+                line-height: 1.5em;
+                font-size: 1.4em;
+                padding-top: 40%;
+        }
+    }
+    
+}
+
+// when viewport width < $md and height < $sm ( mobile landscape mode )
+@media screen and ( max-width: $md ) and ( max-height: $sm ) and (orientation: landscape) {
+    .info{
+        width : 100vw;
+        border-right: thick double $primary-color;
+        grid-template-columns: 50% 50%;
+        grid-template-rows: auto 60px;
+        column-gap: 2px;
+
+        &__description {
+            padding: auto auto;
+            overflow: hidden;
+            grid-column-start: 1;
+            grid-column-end: 2;
+        }
+        &__table{
+            grid-column-start: 1;
+            grid-column-end: 2;
+        }
+
+        &__links{
+            grid-column-start: 2;
+            grid-column-end: 3;
+        }
+    }
 }
\ No newline at end of file
diff --git a/portfolio/src/components/Project/Project.jsx b/portfolio/src/components/Project/Project.jsx
index e22df99..b58e2ca 100644
--- a/portfolio/src/components/Project/Project.jsx
+++ b/portfolio/src/components/Project/Project.jsx
@@ -17,7 +17,7 @@ export default function Project(props) {
                     <h2>{projectItems.details.name}</h2>
                 </header>
                 <section className="project__cube">
-                    <Cube images={projectItems.images} id={projectItems.key} />
+                    <Cube images={projectItems.images} id={index} />
                 </section>
 
                 <section className="project__info">
diff --git a/portfolio/src/components/Project/Project.scss b/portfolio/src/components/Project/Project.scss
index d2e24f7..c753fd7 100644
--- a/portfolio/src/components/Project/Project.scss
+++ b/portfolio/src/components/Project/Project.scss
@@ -9,21 +9,6 @@
     grid-template-columns: 100%;
     overflow: hidden;
     border: thick double $primary-color;
-    @include breakpoint_height( sm, max ){
-        grid-template-rows: 90px 1fr;
-        grid-template-columns: 50% 50%;
-    }
-    @include breakpoint_height( sm ){
-        @include breakpoint(sm){
-            width: 85vw;
-            height: 80%;
-            margin: 70px 7.5vw;
-        }
-        @include breakpoint(md) {
-            grid-template-rows: 70px 1fr;
-            grid-template-columns: min(400px, 50%) auto;
-        }
-    }
     &__title {
         height: 100%;
         background-color: fade-out($color: $primary-color, $amount: 0.5);
@@ -32,41 +17,12 @@
         justify-content: center;
         align-items: center;
         z-index: 100;
-        @include breakpoint_height( sm, max ){
-            grid-column-start: 1;
-            grid-column-end: 3;
-            justify-content: start;
-            align-items: start;
-            padding:10px 10px;
-        }
-        @include breakpoint_height( sm ){
-            @include breakpoint(md) {
-                grid-column-start: 1;
-                grid-column-end: 3;
-            }
-    }
         h2 {
             color: black;
         }
     }
     &__cube {
         height: 100%;
-        @include breakpoint_height( sm, max ){
-            grid-column-start: 2;
-            grid-column-end: 3;
-            grid-row-start: 2;
-            grid-row-end: 3;
-            height: 100%;
-        }
-        @include breakpoint_height( sm ){
-            @include breakpoint(md) {
-                grid-column-start: 2;
-                grid-column-end: 3;
-                grid-row-start: 2;
-                grid-row-end: 3;
-                height: 100%;
-            }
-    }
         .layout {
             width: 100%;
             height: calc(100% - 60px);
@@ -74,12 +30,6 @@
             .scene {
                 position: relative;
                 top: 20%;
-                @include breakpoint_height( sm ){
-                    @include breakpoint(md) {
-                        top: -10%;
-                        left: 5%;
-                    }
-            }
                 .cube {
                     user-select: none;
                     pointer-events: none;
@@ -89,16 +39,6 @@
     }
     &__info {
         height: 100%;
-        @include breakpoint_height( sm ){
-            @include breakpoint(md) {
-                grid-column-start: 1;
-                grid-column-end: 2;
-                grid-row-start: 2;
-                grid-row-end: 3;
-                height: 100%;
-                overflow-y: hidden;
-        }
-    }
         &::-webkit-scrollbar {
             width: 11px;
         }
@@ -114,3 +54,106 @@
         }
     }
 }
+
+// When viewport width > sm
+@media screen and (min-width: $sm) {
+    .project{
+        // shorten the size of the project card to include sidebars.
+        width: calc(100% - 140px);
+        height: calc(100% - 90px);        
+    }
+    
+}
+
+// When viewport width > md
+@media screen and (min-width: $md) {
+    .project{
+        // Switch to 2 columns with shoter header.
+        grid-template-rows: 70px 1fr;
+        grid-template-columns: min(400px, 50%) auto;
+        
+        // the header spread to 2 columns.
+        &__title{
+            grid-column-start: 1;
+            grid-column-end: 3;
+        }
+
+        // The cube goes on the right side column
+        &__cube {
+            grid-column-start: 2;
+            grid-column-end: 3;
+            grid-row-start: 2;
+            grid-row-end: 3;
+            height: 100%;
+            // adjust cube position
+            .layout{
+                .scene{
+                    top: -10%;
+                    left: 5%;
+                }
+            }
+        }
+
+        // The info goes on the left side column
+        &__info {
+                grid-column-start: 1;
+                grid-column-end: 2;
+                grid-row-start: 2;
+                grid-row-end: 3;
+                height: 100%;
+                overflow-y: hidden;
+        } 
+    }
+}
+
+// When viewport width > sm
+@media screen and (min-width: $xl) {
+    .project{
+        // shorten the size of the project card to include sidebars.
+        width: calc(100% - 140px);
+        height: 90%;
+        margin: 0 0;
+        
+    }
+    
+}
+
+// when viewport width < $md and height < $sm ( mobile landscape mode )
+@media screen and ( max-width: $md ) and ( max-height: $sm ) and (orientation: landscape) {
+    .project{
+            // Switch to 2 columns.
+            grid-template-rows: 70px 1fr;
+            grid-template-columns: 50% 50%;
+            justify-content: start;
+            align-items: start;
+            width: 100vw;
+            height: 100%;
+            margin: 0 0;
+            
+        // the header spread to 2 columns.
+        &__title{
+            grid-column-start: 1;
+            grid-column-end: 3;
+            align-items: end;
+            padding-bottom: 5px;
+        }
+
+        // The cube goes on the right side column
+        &__cube {
+            grid-column-start: 2;
+            grid-column-end: 3;
+            grid-row-start: 2;
+            grid-row-end: 3;
+            height: 100%;
+            // adjust cube position
+            .layout{
+                .scene{
+                    top: -10%;
+                    left: 5%;
+                }
+            }
+        }
+    }
+}
+
+
diff --git a/portfolio/src/components/Sidebar/Sidebar.scss b/portfolio/src/components/Sidebar/Sidebar.scss
index 1065936..c92ca12 100644
--- a/portfolio/src/components/Sidebar/Sidebar.scss
+++ b/portfolio/src/components/Sidebar/Sidebar.scss
@@ -4,9 +4,7 @@
 .Sidebar {
     position: absolute;
     height: 100%;
-    width: 7.5%;
-    min-width: 30px;
-    max-width: 70px;
+    width: 70px;
     background-color: fade-out($primary-color, 0.85);
     transition: opacity 1.4s ease, background-color 2s ease;
     display: none;
@@ -15,14 +13,6 @@
     z-index: 900;
     user-select: none;
     cursor: url(../../../public/images/cursors-pointer.png), pointer;
-    @include breakpoint_height( sm ){
-        @include breakpoint(sm){
-            display : flex;
-        }
-    }
-    @include breakpoint( lg ){
-        display: flex;
-    }
     &__text {
         color: lighten($primary-color, 40%);
         writing-mode: vertical-rl;
@@ -62,3 +52,16 @@
         }
     }
 }
+
+@media screen and ( min-width: $sm ){
+    .Sidebar{
+        display : flex;
+    }
+}
+
+// when viewport width < $md and height < $sm ( mobile landscape mode )
+@media screen and ( max-width: $md ) and ( max-height: $sm ) {
+    .Sidebar{
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/portfolio/src/components/Slide/VSlide.scss b/portfolio/src/components/Slide/VSlide.scss
index d719b56..acc469a 100644
--- a/portfolio/src/components/Slide/VSlide.scss
+++ b/portfolio/src/components/Slide/VSlide.scss
@@ -3,9 +3,11 @@
 
 .Vslide {
     display: flex;
-    flex-direction: column;
+
+    justify-content: center;
     flex-wrap: wrap;
     height: 100%;
+    width: 100%;
     position: absolute;
     overflow: hidden;
     transform: translateY(0);
diff --git a/portfolio/src/data/works.js b/portfolio/src/data/works.js
index 3574b3f..bc7ca43 100644
--- a/portfolio/src/data/works.js
+++ b/portfolio/src/data/works.js
@@ -49,14 +49,9 @@ const projects = {
         },
         {
             type: "diapo",
-            title: "Use case 1",
+            title: "Use case",
             image: "/images/diapos/usecase1.png"
         },
-        {
-            type: "diapo",
-            title: "Use case 2",
-            image: "/images/diapos/usecase2.png"
-        },
         {
             type: "diapo",
             title: "MLD",
diff --git a/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx b/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx
index 97cda70..fcc3ce7 100644
--- a/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx
+++ b/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx
@@ -68,13 +68,13 @@ export default function ProjectsPage() {
 
             <nav className="projects__navigation">
                 {projects.getProjects().map((projectsItems, index) => (
-                    <div className="scene" key={projectsItems.key}>
+                    <div className="scene" key={index}>
                         <div
-                            className={`cube  
+                            className={`cube   
                             ${
                                 currentSlide.v === index
-                                    ? "cube--active cube--small"
-                                    : "cube--inactive cube--very-small"
+                                    ? "cube--active cube--xs"
+                                    : "cube--inactive cube--xxs cube--responsive-xxxs"
                             }`}
                             onClick={() => {
                                 cubeClick(index + 1);
diff --git a/portfolio/src/pages/ProjectsPage/ProjectsPage.scss b/portfolio/src/pages/ProjectsPage/ProjectsPage.scss
index 950173b..e0878ed 100644
--- a/portfolio/src/pages/ProjectsPage/ProjectsPage.scss
+++ b/portfolio/src/pages/ProjectsPage/ProjectsPage.scss
@@ -20,15 +20,6 @@
         z-index: 1000;
         perspective: 170vw;
         perspective-origin: 170% -60%;
-        @include breakpoint_height( sm, max ){
-            top : 20px;
-        }
-        @include breakpoint_height( sm ){
-            @include breakpoint(sm){
-                top : auto;            
-                bottom: 0px;
-            }
-        }
         .scene {
             position: relative;
             transform-style: preserve-3d;
@@ -48,3 +39,26 @@
         }
     }
 }
+
+// when viewport width > $sm
+@media screen and ( min-width: $sm ) {
+    .projects{
+        // place the navigation cubes at the bottom of the page
+        &__navigation{
+            top : auto;            
+            bottom: 0px;
+        }
+    }
+}
+
+// when viewport width < $md and height < $sm ( mobile landscape mode )
+@media screen and ( max-width: $md ) and ( max-height: $sm ) {
+    .projects{
+        &__navigation{
+            top : -20px; 
+            justify-content: flex-start;
+            gap:50px;
+            margin-left: 20px ;           
+        }
+    }
+}
\ No newline at end of file
diff --git a/portfolio/src/styles/_cubes.scss b/portfolio/src/styles/_cubes.scss
index e10e0d9..f6e4d68 100644
--- a/portfolio/src/styles/_cubes.scss
+++ b/portfolio/src/styles/_cubes.scss
@@ -1,15 +1,47 @@
 .cube {
-    &--flexible {
-        @include cube-setup($medium-cube-size);
+    &--responsive {
+        @include cube-setup($sm-cube-size);
+        @include breakpoint(sm){
+            @include cube-setup($md-cube-size);
+            @include breakpoint_height( $sm, max ){
+                @include cube-setup($sm-cube-size);
+            }
+        }
+        @include breakpoint(md){
+            @include cube-setup($lg-cube-size);
+            @include breakpoint_height( $sm, max ){
+                @include cube-setup($sm-cube-size);
+            }
+        }
         @include breakpoint(lg) {
-            @include cube-setup($big-cube-size);
+            @include cube-setup($xl-cube-size);
+            @include breakpoint_height( $sm, max ){
+                @include cube-setup($sm-cube-size);
+            }
+        }
+        @include breakpoint(xl){
+            @include cube-setup($xl-cube-size);
+            @include breakpoint_height( $sm, max ){
+                @include cube-setup($sm-cube-size);
+            }
         }
     }
-    &--small {
-        @include cube-setup($small-cube-size);
+    &--sm {
+        @include cube-setup($sm-cube-size);
     }
-    &--very-small {
-        @include cube-setup($very-small-cube-size);
+    &--xs {
+        @include cube-setup($xs-cube-size);
+    }
+    &--xxs {
+        @include cube-setup($xxs-cube-size);
+    }
+    &--responsive-xxxs {
+        @include breakpoint_height( $sm, max ){
+            @include cube-setup($xxxs-cube-size);
+            @include breakpoint( $md ){
+                @include cube-setup($xxs-cube-size);
+            }
+        }
     }
     &__image {
         width: 100%;
diff --git a/portfolio/src/styles/_mixins.scss b/portfolio/src/styles/_mixins.scss
index 8bfb62d..ac965e1 100644
--- a/portfolio/src/styles/_mixins.scss
+++ b/portfolio/src/styles/_mixins.scss
@@ -113,10 +113,11 @@
     }
 }
 
+
 @mixin breakpoint_height($breakpoint, $direction: min) {
     //check if the supplied breakpoint exists in our breakpoits map
-    @if map-has-key($breakpoints_height, $breakpoint) {
-        $breakpoint-values: map-get($breakpoints_height, $breakpoint);
+    @if map-has-key($breakpoints, $breakpoint) {
+        $breakpoint-values: map-get($breakpoints, $breakpoint);
         $breakpoint-min: map-get($breakpoint-values, min);
         $breakpoint-max: map-get($breakpoint-values, max);
 
diff --git a/portfolio/src/styles/_variables.scss b/portfolio/src/styles/_variables.scss
index 14a567c..099c9c4 100644
--- a/portfolio/src/styles/_variables.scss
+++ b/portfolio/src/styles/_variables.scss
@@ -19,14 +19,26 @@ $menu-bg-color: rgba(0, 0, 0, 0.945);
 
 /* Cube */
 $cube_face-color: rgba(0, 0, 0, 0.836);
-$big-cube-size: 11vw;
-$medium-cube-size: min(17vw, 10vh);
-$small-cube-size: 14px;
-$very-small-cube-size: 12px;
+$xxl-cube-size: 200px;
+$xl-cube-size: 150px;
+$lg-cube-size: 100px;
+$md-cube-size: 70px;
+$sm-cube-size: 50px;
+$xs-cube-size: 16px;
+$xxs-cube-size: 12px;
+$xxxs-cube-size:6px;
 
 /* button */
 $button-size: 100px;
 
+
+/* Breakpoints */
+$sm : 576px;
+$md : 768px;
+$lg : 992px;
+$xl : 1200px;
+$xxl: 1400px;
+
 $breakpoints: (
     sm: (
         min: 576px,