diff --git a/src/components/common/Sidebar/cmp.tsx b/src/components/common/Sidebar/cmp.tsx
index 72537e4..2b01ea1 100644
--- a/src/components/common/Sidebar/cmp.tsx
+++ b/src/components/common/Sidebar/cmp.tsx
@@ -1,6 +1,16 @@
 import { IconName } from '@fortawesome/fontawesome-svg-core'
-import { Icon, Logo } from '@aleph-front/aleph-core'
-import { StyledLink, StyledNav1, StyledNav2, StyledSidebar } from './styles'
+import { Icon } from '@aleph-front/aleph-core'
+import {
+  StyledLinkContent,
+  StyledLogo,
+  StyledNav1,
+  StyledNav1Link,
+  StyledNav2,
+  StyledNav2Link,
+  StyledNav2LinkContainer,
+  StyledNav2Title,
+  StyledSidebar,
+} from './styles'
 import {
   AnchorHTMLAttributes,
   ReactNode,
@@ -59,19 +69,30 @@ export type SidebarLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
   href: string
   icon?: IconName
   children?: ReactNode
-  isActive?: boolean
+  open: boolean
 }
 
 export const SidebarLink = memo(
-  ({ href, icon, isActive, children }: SidebarLinkProps) => {
+  ({ href, icon, children, open }: SidebarLinkProps) => {
     const router = useRouter()
-    isActive = isActive || router.pathname.indexOf(href) >= 0
+    const isActive = router.pathname.indexOf(href) >= 0
+
+    const props = { href, $isActive: isActive, $open: open }
+    const iconProps = { name: icon as IconName, size: 'lg', tw: 'p-1' }
 
-    return (
-      <StyledLink href={href} $isActive={isActive} $hasText={!!children}>
-        {icon && <Icon name={icon} size="lg" tw="p-1" />}
-        {children}
-      </StyledLink>
+    return !children ? (
+      <StyledNav1Link {...props}>
+        <StyledLinkContent {...props}>
+          <span>{icon && <Icon {...iconProps} />}</span>
+        </StyledLinkContent>
+      </StyledNav1Link>
+    ) : (
+      <StyledNav2Link {...props}>
+        <StyledLinkContent {...props}>
+          {icon && <Icon {...iconProps} />}
+          <span>{children}</span>
+        </StyledLinkContent>
+      </StyledNav2Link>
     )
   },
 )
@@ -92,38 +113,54 @@ export const Sidebar = memo(() => {
   )
 
   return (
-    <StyledSidebar>
-      <StyledNav1>
-        <Logo text="" size="1.5rem" tw="h-8 mt-8 mb-12" />
+    <StyledSidebar $open={open}>
+      <StyledNav1 $open={open}>
+        <StyledLogo />
 
         {routes.map((child) => (
           <SidebarLink
             key={child.path}
             href={child.path}
             icon={child.icon}
-          ></SidebarLink>
+            open={open}
+          />
         ))}
 
-        <SidebarLink href="/earn/bookmark" icon="bookmark"></SidebarLink>
-        <SidebarLink href="/earn/dropbox" icon="dropbox"></SidebarLink>
+        <SidebarLink
+          href="/earn/bookmark"
+          icon="bookmark"
+          open={open}
+        ></SidebarLink>
+        <SidebarLink
+          href="/earn/dropbox"
+          icon="dropbox"
+          open={open}
+        ></SidebarLink>
       </StyledNav1>
       <StyledNav2 $open={open}>
-        {currentRoute?.children && (
-          <>
-            <div className="tp-nav" tw="py-2 px-6 w-full">
-              {currentRoute?.name}
-            </div>
-            {currentRoute?.children.map((child) => (
-              <SidebarLink
-                key={child.path}
-                href={child.path}
-                icon={child?.icon || currentRoute?.icon}
-              >
-                {child.name}
-              </SidebarLink>
-            ))}
-          </>
-        )}
+        <StyledNav2LinkContainer>
+          {currentRoute?.children && (
+            <>
+              {currentRoute?.name && (
+                <StyledNav2Title>
+                  <span>{currentRoute?.name}</span>
+                </StyledNav2Title>
+              )}
+              {currentRoute?.children.map((child) => (
+                <SidebarLink
+                  key={child.path}
+                  href={child.path}
+                  icon={child?.icon || currentRoute?.icon}
+                  open={open}
+                >
+                  {child.name}
+                </SidebarLink>
+              ))}
+            </>
+          )}
+        </StyledNav2LinkContainer>
+        <div tw="flex-1" onClick={handleToggle} />
+        <div></div>
       </StyledNav2>
     </StyledSidebar>
   )
diff --git a/src/components/common/Sidebar/styles.tsx b/src/components/common/Sidebar/styles.tsx
index c20884c..2dd1f55 100644
--- a/src/components/common/Sidebar/styles.tsx
+++ b/src/components/common/Sidebar/styles.tsx
@@ -1,41 +1,141 @@
-import { addClasses } from '@aleph-front/aleph-core'
+import { Logo, addClasses } from '@aleph-front/aleph-core'
 import Link from 'next/link'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import tw from 'twin.macro'
 
-export const StyledSidebar = styled.aside`
-  display: flex;
-  align-items: stretch;
+export const StyledSidebar = styled.aside<{ $open?: boolean }>`
+  ${tw`flex items-stretch justify-start`}
+  transition: all linear 0.25s 0s;
+
+  ${({ $open }) =>
+    $open
+      ? css`
+          width: 23.25rem;
+        `
+      : css`
+          width: 4.875rem;
+        `};
+`
+
+// -------------- NAV 1 -----------------
+
+export const StyledLogo = styled(Logo).attrs((props) => {
+  return {
+    ...props,
+    size: '1.5rem',
+    text: '',
+  }
+})`
+  ${tw`relative h-8 mt-8 mb-12`}
 `
 
-export const StyledNav1 = styled.nav`
+export const fadeInOutContentCss = css<{ $open?: boolean }>`
+  ${({ $open }) => css`
+    opacity: ${$open ? '1' : '0'};
+    visibility: ${$open ? 'visible' : 'hidden'};
+    transition: all linear 0.25s 0s;
+  `}
+`
+export const StyledNav1 = styled.nav<{ $open?: boolean }>`
+  ${tw`relative h-full flex flex-col items-center overflow-hidden`}
+
   background-color: #0000004c;
+  transition: all linear 0.25s 0s;
 
-  height: 100%;
-  width: 4.5rem;
+  ${({ $open }) =>
+    $open
+      ? css`
+          width: 4.5rem;
+        `
+      : css`
+          width: 0.375rem;
+        `};
 
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  & ${StyledLogo} {
+    ${fadeInOutContentCss}
+  }
 `
 
+export const StyledNav1Link = styled(Link).attrs(addClasses('tp-nav'))<{
+  $isActive?: boolean
+  $open?: boolean
+}>`
+  ${({ theme, $isActive, $open }) => css`
+    ${tw`relative w-full`}
+
+    color: ${theme.color.main0};
+    opacity: ${!$isActive ? '0.4' : '1'};
+    background-color: ${$isActive && !$open
+      ? theme.color.main0
+      : 'transparent'};
+    transition: all linear 0.25s 0s;
+  `}
+`
+
+// -------------- NAV 2 -----------------
+
 export const StyledNav2 = styled.nav<{ $open?: boolean }>`
+  ${tw`flex flex-col h-full overflow-hidden`}
+
   background-color: #00000020;
-  height: 100%;
-  width: ${({ $open }) => ($open ? '18rem' : '0')};
-  transition: all ease-in-out 0.5s 0s;
   padding-top: 7rem;
-  overflow: hidden;
+  background-color: #00000020;
+  transition: all linear 0.25s 0s;
+
+  ${({ $open }) =>
+    $open
+      ? css`
+          width: 18.75rem;
+          /* backdrop-filter: blur(0px); */
+
+          ${StyledNav2Title} {
+            font-size: 1.125rem;
+          }
+        `
+      : css`
+          width: 4.5rem;
+          /* backdrop-filter: blur(999px); */
+          background-color: #100f20;
+
+          ${StyledNav2Title} {
+            ${tw`px-0 w-full`}
+            font-size: 0.75rem;
+          }
+        `};
+`
+
+export const StyledNav2Title = styled.div.attrs(addClasses('tp-nav'))`
+  ${tw`relative py-2 px-6 w-0 text-center`}
+  transition: all linear 0.25s 0s;
 `
 
-export const StyledLink = styled(Link).attrs(addClasses('tp-nav'))<{
+export const StyledNav2LinkContainer = styled.div<{ $open?: boolean }>`
+  ${tw`relative flex flex-col items-start`}
+  transition: all linear 0.25s 0s;
+`
+
+export const StyledNav2Link = styled(Link).attrs(addClasses('tp-nav'))<{
   $isActive?: boolean
-  $hasText?: boolean
+  $open?: boolean
 }>`
-  ${tw`flex items-center gap-1.5 py-2 px-6 w-full whitespace-nowrap`}
-  color: ${({ theme, $isActive, $hasText }) =>
-    $isActive || !$hasText ? theme.color.main0 : theme.color.base0};
-  opacity: ${({ $hasText, $isActive }) =>
-    !$isActive && !$hasText ? '0.4' : '1'};
-  justify-content: ${({ $hasText }) => (!$hasText ? 'center' : 'flex-start')};
+  ${({ theme, $isActive }) => css`
+    ${tw`relative w-full`}
+    color: ${$isActive ? theme.color.main0 : theme.color.base0};
+  `}
+`
+
+export const StyledLinkContent = styled.div<{ $open?: boolean }>`
+  ${({ $open }) => css`
+    ${tw`relative flex items-center justify-start gap-2.5 py-2 px-6 whitespace-nowrap w-full`}
+    transition: all linear 0.25s 0s;
+
+    ${!$open &&
+    css`
+      padding-left: 1.75rem;
+    `}
+
+    & > span {
+      ${fadeInOutContentCss}
+    }
+  `}
 `