diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SidebarLink.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SidebarLink.tsx
index df715e313540..43c72b0b639d 100644
--- a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SidebarLink.tsx
+++ b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SidebarLink.tsx
@@ -5,10 +5,7 @@ import SidebarLinkTag from './SidebarLinkTag';
 import { Node } from './navigation-tree/node';
 import StaticLink from '@/container/nav-reshuffle/sidebar/StaticLink';
 import { OsdsIcon } from '@ovhcloud/ods-components/react';
-import {
-  ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-} from '@ovhcloud/ods-components';
+import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
 import { SvgIconWrapper } from '@ovh-ux/ovh-product-icons/utils/SvgIconWrapper';
 
 export type SidebarLinkProps = {
@@ -25,8 +22,8 @@ const SidebarLink: React.FC<ComponentProps<SidebarLinkProps>> = ({
   count = 0,
   node = {},
   linkParams = {},
-  handleOnClick = () => { },
-  handleOnEnter = () => { },
+  handleOnClick = () => {},
+  handleOnEnter = () => {},
   id = '',
   isShortText = false,
 }: SidebarLinkProps): JSX.Element => {
@@ -44,7 +41,9 @@ const SidebarLink: React.FC<ComponentProps<SidebarLinkProps>> = ({
     />
   ) : (
     <button
-      className={`${style['button-as-div']} relative`}
+      className={`${style.button_as_div} ${
+        isShortText ? style.button_as_div_short : ''
+      } relative`}
       title={t(node.translation)}
       onKeyUp={(e) => {
         if (e.key === 'Enter') {
@@ -56,9 +55,16 @@ const SidebarLink: React.FC<ComponentProps<SidebarLinkProps>> = ({
       data-testid={id}
       role="button"
     >
-      <span className='flex gap-2 align-items-center'>
-        <SvgIconWrapper name={node.svgIcon} height={32} width={32} className='p-1 fill-white block' />
-        {!isShortText && <span>{t(node.translation)}</span>}
+      <span className="flex gap-2 align-items-center justify-start">
+        <span className={style.button_as_div_icon}>
+          <SvgIconWrapper
+            name={node.svgIcon}
+            height={32}
+            width={32}
+            className="p-1 fill-white block"
+          />
+        </span>
+        <span className={style.button_as_div_text}>{t(node.translation)}</span>
       </span>
       <span className="flex justify-end align-items-center">
         {(count as number) > 0 && (
@@ -76,8 +82,8 @@ const SidebarLink: React.FC<ComponentProps<SidebarLinkProps>> = ({
         ) : null}
         {!isShortText && <SidebarLinkTag node={node} />}
       </span>
-    </button >
+    </button>
   );
 };
 
-export default SidebarLink;
\ No newline at end of file
+export default SidebarLink;
diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/PublicCloudPanel.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/PublicCloudPanel.tsx
index 97c2862ff884..84ef883f5b6e 100644
--- a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/PublicCloudPanel.tsx
+++ b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/PublicCloudPanel.tsx
@@ -171,7 +171,7 @@ export const PublicCloudPanel: React.FC<ComponentProps<
         )}
         {selectedPciProject && (
           <button
-            className={`d-flex ${style['button-as-div']} ${style.sidebar_clipboard}`}
+            className={`d-flex ${style.button_as_div} ${style.sidebar_clipboard}`}
             title={t('sidebar_clipboard_copy')}
             onClick={() =>
               navigator.clipboard.writeText(selectedPciProject.project_id)
diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/index.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/index.tsx
index 215b11328e75..ab7859eb3ffa 100644
--- a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/index.tsx
+++ b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/index.tsx
@@ -1,5 +1,5 @@
 import style from './style.module.scss';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Node } from '@/container/nav-reshuffle/sidebar/navigation-tree/node';
 import {
@@ -19,6 +19,7 @@ interface SubTreeProps {
   handleCloseSideBar(): void;
   handleOnSubMenuClick(node: Node): void;
   selectedNode: Node;
+  open: boolean;
 }
 
 const SubTree = ({
@@ -27,16 +28,24 @@ const SubTree = ({
   handleOnSubMenuClick,
   selectedNode,
   handleCloseSideBar,
+  open
 }: SubTreeProps): JSX.Element => {
   const { t } = useTranslation('sidebar');
   const { isMobile } = useProductNavReshuffle();
+  const [isOpen, setIsOpen] = useState(false);
 
   const [focusOnLast, setFocusOnLast] = useState<boolean>(false);
   const lastElement = getLastElement(rootNode);
 
+  useEffect(() => {
+    setTimeout(() => {
+      setIsOpen(open);
+    }, 10);
+  }, [open])
+
   return (
     <div
-      className={style.subtree_content}
+      className={`${style.subtree_content} ${isOpen ? style.subtree_content_open : ''}`}
       onBlur={(e: any) => {
         const id = e.relatedTarget?.id.replace('-link', '');
         if (id === lastElement.id) {
diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/style.module.scss b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/style.module.scss
index 4cb95f2911f1..cd3eea62f13d 100644
--- a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/style.module.scss
+++ b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/style.module.scss
@@ -3,14 +3,6 @@
 @import '@ovh-ux/ui-kit/dist/scss/tokens/_globals';
 
 .subtree {
-  width: 100%;
-  height: 100%;
-  background-color: rgba($p-500, 0.50);
-  position: fixed;
-  top: 0;
-  left: 20rem;
-  z-index: 901;
-  overflow-y: auto;
   &_content {
     display: flex;
     flex-flow: column;
@@ -18,8 +10,20 @@
     background: $p-800;
     height: auto;
     min-height: 100%;
-    width: 20rem;
+    width: 0rem;
     overflow-y: auto;
+
+    transition: transform 0.3s ease-in, opacity 0.3s ease-in, width 0s ease-out 0.3s;
+    transform: scaleX(0);
+    transform-origin: 0% 50%;
+    opacity: 0;
+
+    &_open {
+      transform: scaleX(1);
+      opacity: 1;
+      width: 20rem;
+      transition: transform 0.3s ease-in 0s, opacity 0.3s ease-in 0s, width 0s ease-out 0s;
+    }
   }
   &_list {
     min-height: 28.125rem;
@@ -32,7 +36,7 @@
       width: 100%;
     }
   }
-  &_back_btn{
+  &_back_btn {
     display: none;
     height: 2.5rem;
     background-color: $p-500;
@@ -44,12 +48,12 @@
     padding: 0 0.625em;
     width: 100%;
   }
-  &_section_title{
+  &_section_title {
     color: $p-200 !important;
     text-transform: uppercase;
     font-size: 1rem !important;
   }
-  &_section{
+  &_section {
     &:after {
       content: '';
       margin: 0 1rem;
@@ -72,21 +76,27 @@
     border: none;
   }
 
-  &_submenu_items, &_submenu_items_selected {
-    a, button {
+  &_submenu_items,
+  &_submenu_items_selected {
+    a,
+    button {
       padding: 0 1rem;
     }
   }
 
   &_submenu_items {
-    a:hover, a:focus, button:hover, button:focus  {
+    a:hover,
+    a:focus,
+    button:hover,
+    button:focus {
       background-color: darken($p-800, 5);
       text-decoration: none;
     }
   }
 
   &_submenu_items_selected {
-    a, button  {
+    a,
+    button {
       background-color: darken($p-800, 5);
       text-decoration: none !important;
     }
@@ -108,4 +118,4 @@
       display: flex;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx
index 5e61bb41b2e2..71364e66c743 100644
--- a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx
+++ b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx
@@ -21,6 +21,7 @@ import {
   findNodeByRouting,
   splitPathIntoSegmentsWithoutRouteParams,
   IServicesCount,
+  debounce
 } from './utils';
 import { Node } from './navigation-tree/node';
 import useProductNavReshuffle from '@/core/product-nav-reshuffle';
@@ -237,7 +238,12 @@ const Sidebar = (): JSX.Element => {
 
   const closeSubMenu = () => {
     setShowSubTree(false);
-    setIsManuallyClosed(true);
+
+    setTimeout(() => {
+      setSelectedNode(null);
+      setSelectedSubMenu(null);
+      setIsManuallyClosed(true);
+    }, 400);
   };
 
   const menuClickHandler = (node: Node) => {
@@ -393,6 +399,7 @@ const Sidebar = (): JSX.Element => {
           handleCloseSideBar={closeSubMenu}
           handleOnSubMenuClick={selectSubMenu}
           rootNode={selectedNode}
+          open={showSubTree}
         ></SubTree>
       )}
     </div>
diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/style.module.scss b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/style.module.scss
index 23b87b8fb85d..0954585e3cb5 100644
--- a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/style.module.scss
+++ b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/style.module.scss
@@ -11,7 +11,6 @@ $sidebar-font-size: 0.875rem;
   flex-direction: row;
   width: fit-content;
   height: 100vh;
-  background-color: $p-700;
   position: relative;
   color: white;
   gap: 0.125rem;
@@ -24,6 +23,11 @@ $sidebar-font-size: 0.875rem;
     justify-content: flex-end;
     overflow-y: auto;
     scrollbar-width: none;
+    background-color: $p-700;
+
+    transition: width 0.3s ease-in, min-width 0.3s ease-in;
+    transform-origin: left;
+
     &::-webkit-scrollbar {
       display: none;
     }
@@ -37,7 +41,7 @@ $sidebar-font-size: 0.875rem;
 
   &_logo {
     display: flex;
-    
+
     img {
       height: 1.85rem;
     }
@@ -45,8 +49,8 @@ $sidebar-font-size: 0.875rem;
 
   &_short {
     width: 4.5rem;
-    min-width: unset;
-    & .sidebar_menu_items > button{
+    min-width: 0rem;
+    & .sidebar_menu_items > button {
       justify-content: center;
     }
     & .sidebar_menu ul {
@@ -78,7 +82,8 @@ $sidebar-font-size: 0.875rem;
     padding: 0.5rem;
     transition: all 0.3s ease-in-out;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background: $p-800;
     }
   }
@@ -97,31 +102,40 @@ $sidebar-font-size: 0.875rem;
     list-style-type: none;
   }
 
-  &_menu_items button, &_menu_items a {
+  &_menu_items button,
+  &_menu_items a {
     padding-left: 1rem;
     padding-right: 1rem;
   }
 
   &_menu_items {
-    a:hover, a:focus, button:hover, button:focus {
+    a:hover,
+    a:focus,
+    button:hover,
+    button:focus {
       background-color: $p-800;
     }
   }
   &_menu_items_selected {
-    a, button {
+    a,
+    button {
       background-color: $p-800;
     }
   }
 
   &_submenu_items {
-    a:hover, a:focus, button:hover, button:focus {
+    a:hover,
+    a:focus,
+    button:hover,
+    button:focus {
       background-color: darken($p-800, 5);
       text-decoration: none;
     }
   }
 
   &_submenu_items_selected {
-    a, button {
+    a,
+    button {
       background-color: darken($p-800, 5);
       text-decoration: none !important;
     }
@@ -156,7 +170,7 @@ $sidebar-font-size: 0.875rem;
   &_action {
     a {
       background-color: white;
-      display: inline-block;
+      display: flex;
       width: 100%;
       color: $p-500;
       font-weight: 600;
@@ -164,19 +178,42 @@ $sidebar-font-size: 0.875rem;
       line-height: 2.5rem;
       border-radius: 0.5rem;
       outline: none;
+      justify-content: center;
+      white-space: nowrap;
+    }
+
+    &_icon {
+      font-size: 1.5rem;
+      vertical-align: bottom !important;
+      padding-left: 1rem;
+    }
+
+    &_text {
+      display: flex;
+      width: 0;
+      height: 0;
+      opacity: 0;
+      transition: width 0.1s ease-in 0s, height 0.1s ease-in 0s, opacity 0s ease-in 0s;
+    }
+
+    &_open &_text {
+      width: fit-content;
+      opacity: 1;
+      height: auto;
+      transition: width 0.1s ease-in 0.2s, height 0.1s ease-in 0.2s, opacity 0.1s ease-in 0.2s;
     }
 
-    a:hover, a:focus {
+    &_open &_icon {
+      padding-left: 0;
+    }
+
+    a:hover,
+    a:focus {
       text-decoration: none;
       background-color: $p-100;
     }
   }
 
-  &_action_icon {
-    font-size: 1.5rem;
-    vertical-align: bottom !important;
-  }
-
   &_chip {
     float: right;
     margin-top: 0.75rem !important;
@@ -267,14 +304,14 @@ $sidebar-font-size: 0.875rem;
     .sidebar::-webkit-scrollbar {
       display: none;
     }
-    
+
     &_logo {
       display: none;
     }
     &_toggle_btn {
       display: none;
     }
-    
+
     &_wrapper {
       width: 100%;
     }
@@ -288,7 +325,7 @@ $sidebar-font-size: 0.875rem;
   }
 }
 
-.button-as-div {
+.button_as_div {
   background: none;
   border: none;
   padding: 0;
@@ -298,16 +335,35 @@ $sidebar-font-size: 0.875rem;
   color: inherit;
   font-weight: 600;
   font-size: $sidebar-font-size;
+
+  &_text {
+    white-space: nowrap;
+  }
+
+  &_icon {
+    height: 0;
+  }
+
+  &_text, &_short &_icon {
+    transition: opacity 0.1s ease-in 0.2s;
+    opacity: 1;
+    width: auto;
+    height: auto;
+  }
+
+  &_short &_text, &_icon {
+    opacity: 0;
+    transition: all 0s ease-in;
+    width: 0;
+  }
 }
 
 .sidebarLinkTag {
   width: 0.8rem;
-  margin-right: .25rem;
+  margin-right: 0.25rem;
   background-color: var(--ods-color-primary-300);
 }
 
 .hidden {
   visibility: hidden;
 }
-
-