diff --git a/CHANGELOG.md b/CHANGELOG.md
index c7f085a4..068c7bc3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## 2026-09-27
 
+### Added
+- Collapse function to left panel. [PR 90](https://github.com/thermcampos/tasknote/pull/90)
+
 ### Fixed
 - Logout cache cleaning. [PR 89](https://github.com/thermcampos/tasknote/pull/89)
 
diff --git a/client/src/__test__/App.test.tsx b/client/src/__test__/App.test.tsx
index c903d34c..307ec3ce 100644
--- a/client/src/__test__/App.test.tsx
+++ b/client/src/__test__/App.test.tsx
@@ -15,7 +15,9 @@ vi.mock('../api-service/api');
 
 const sidebarContextMock = {
   currentPage: '/home',
-  setNewPage: vi.fn()
+  setNewPage: vi.fn(),
+  isCollapsed: false,
+  toggleCollapsed: vi.fn()
 };
 
 const filterContextMock = {
diff --git a/client/src/__test__/components/Sidebar.test.tsx b/client/src/__test__/components/Sidebar.test.tsx
index 9a43c732..424dfd1b 100644
--- a/client/src/__test__/components/Sidebar.test.tsx
+++ b/client/src/__test__/components/Sidebar.test.tsx
@@ -28,16 +28,18 @@ const authContextMock = {
 
 const sidebarContextMock = {
   currentPage: '/home',
-  setNewPage: vi.fn()
+  setNewPage: vi.fn(),
+  isCollapsed: false,
+  toggleCollapsed: vi.fn()
 };
 
 describe('Sidebar Component', () => {
-  const renderSidebar = () => {
+  const renderSidebar = (sidebarValue = sidebarContextMock) => {
     return render(
       <MemoryRouter>
         <AuthContext.Provider value={authContextMock}>
           <I18nextProvider i18n={i18n}>
-            <SidebarContext.Provider value={sidebarContextMock}>
+            <SidebarContext.Provider value={sidebarValue}>
               <Sidebar isMobileOpen={false} setIsMobileOpen={vi.fn()} />
             </SidebarContext.Provider>
           </I18nextProvider>
@@ -64,6 +66,52 @@ describe('Sidebar Component', () => {
     expect(dashboardElement).not.toBeNull();
     expect(dashboardElement!.classList.contains('selected')).toBe(true);
   });
+
+  it('should call toggleCollapsed when the collapse button is clicked', () => {
+    const toggleCollapsed = vi.fn();
+    const { getByLabelText } = renderSidebar({ ...sidebarContextMock, toggleCollapsed });
+    fireEvent.click(getByLabelText('Collapse sidebar'));
+    expect(toggleCollapsed).toHaveBeenCalled();
+  });
+});
+
+describe('Sidebar collapsed rail', () => {
+  const collapsedContextMock = {
+    ...sidebarContextMock,
+    isCollapsed: true
+  };
+
+  const renderCollapsedSidebar = () => {
+    return render(
+      <MemoryRouter>
+        <AuthContext.Provider value={authContextMock}>
+          <I18nextProvider i18n={i18n}>
+            <SidebarContext.Provider value={collapsedContextMock}>
+              <Sidebar isMobileOpen={false} setIsMobileOpen={vi.fn()} />
+            </SidebarContext.Provider>
+          </I18nextProvider>
+        </AuthContext.Provider>
+      </MemoryRouter>
+    );
+  };
+
+  it('should render the rail without labels when collapsed', () => {
+    const { container, queryByText } = renderCollapsedSidebar();
+    expect(container.querySelector('.sidebar-collapsed')).not.toBeNull();
+    expect(queryByText('Ricardo')).toBeNull();
+    expect(queryByText('Logout')).toBeNull();
+  });
+
+  it('should expose native title tooltips on nav items when collapsed', () => {
+    const { getByTitle } = renderCollapsedSidebar();
+    expect(getByTitle('Home')).toBeDefined();
+    expect(getByTitle('Logout')).toBeDefined();
+  });
+
+  it('should label the toggle as expand when collapsed', () => {
+    const { getByLabelText } = renderCollapsedSidebar();
+    expect(getByLabelText('Expand sidebar').getAttribute('aria-expanded')).toBe('false');
+  });
 });
 
 describe('Build link visibility', () => {
diff --git a/client/src/__test__/context/SidebarProvider.test.tsx b/client/src/__test__/context/SidebarProvider.test.tsx
index e548d0e1..b1f4a9bd 100644
--- a/client/src/__test__/context/SidebarProvider.test.tsx
+++ b/client/src/__test__/context/SidebarProvider.test.tsx
@@ -10,12 +10,15 @@ import SidebarContext, { SidebarContextData } from '../../context/SidebarContext
 const ConsumerComponent: React.FC = () => {
   const {
     currentPage,
-    setNewPage
+    setNewPage,
+    isCollapsed,
+    toggleCollapsed
   } = useContext<SidebarContextData>(SidebarContext);
 
   return (
     <div>
       <div data-testid="page">{currentPage}</div>
+      <div data-testid="collapsed">{String(isCollapsed)}</div>
       <button
         data-testid="setPage"
         onClick={() => {
@@ -24,6 +27,14 @@ const ConsumerComponent: React.FC = () => {
       >
         Change page
       </button>
+      <button
+        data-testid="toggleCollapsed"
+        onClick={() => {
+          toggleCollapsed();
+        }}
+      >
+        Toggle collapsed
+      </button>
     </div>
   );
 };
@@ -32,6 +43,7 @@ describe('SidebarProvider', () => {
   // Reset DOM and mocks for each test.
   beforeEach(() => {
     vi.clearAllMocks();
+    localStorage.clear();
   });
 
   afterEach(() => {
@@ -63,4 +75,51 @@ describe('SidebarProvider', () => {
       expect(getByTestId('page').textContent).toBe('/home')
     );
   });
+
+  it('should default to expanded when nothing is persisted', () => {
+    const { getByTestId } = render(
+      <SidebarProvider>
+        <ConsumerComponent />
+      </SidebarProvider>
+    );
+
+    expect(getByTestId('collapsed').textContent).toBe('false');
+  });
+
+  it('should initialize collapsed state from localStorage', () => {
+    localStorage.setItem('SIDEBAR_COLLAPSED', 'true');
+    const { getByTestId } = render(
+      <SidebarProvider>
+        <ConsumerComponent />
+      </SidebarProvider>
+    );
+
+    expect(getByTestId('collapsed').textContent).toBe('true');
+  });
+
+  it('should toggle collapsed state and persist it to localStorage', async () => {
+    const { getByTestId } = render(
+      <SidebarProvider>
+        <ConsumerComponent />
+      </SidebarProvider>
+    );
+
+    await act(async () => {
+      userEvent.click(getByTestId('toggleCollapsed'));
+    });
+
+    await waitFor(() => {
+      expect(getByTestId('collapsed').textContent).toBe('true');
+      expect(localStorage.getItem('SIDEBAR_COLLAPSED')).toBe('true');
+    });
+
+    await act(async () => {
+      userEvent.click(getByTestId('toggleCollapsed'));
+    });
+
+    await waitFor(() => {
+      expect(getByTestId('collapsed').textContent).toBe('false');
+      expect(localStorage.getItem('SIDEBAR_COLLAPSED')).toBe('false');
+    });
+  });
 });
diff --git a/client/src/__test__/views/HomeNavigation.test.tsx b/client/src/__test__/views/HomeNavigation.test.tsx
index 109a5fe7..8ce18099 100644
--- a/client/src/__test__/views/HomeNavigation.test.tsx
+++ b/client/src/__test__/views/HomeNavigation.test.tsx
@@ -90,7 +90,7 @@ function TestApp() {
   return (
     <AuthContext.Provider value={authValue}>
       <FilterProvider>
-        <SidebarContext.Provider value={{ currentPage: '/home', setNewPage: vi.fn() }}>
+        <SidebarContext.Provider value={{ currentPage: '/home', setNewPage: vi.fn(), isCollapsed: false, toggleCollapsed: vi.fn() }}>
           <MemoryRouter initialEntries={['/home']}>
             <NavigateToForm />
             <Routes>
diff --git a/client/src/__test__/views/NoteAdd.test.tsx b/client/src/__test__/views/NoteAdd.test.tsx
index 3eaba508..8885b06a 100644
--- a/client/src/__test__/views/NoteAdd.test.tsx
+++ b/client/src/__test__/views/NoteAdd.test.tsx
@@ -88,7 +88,9 @@ const authContextMock = {
 
 const sidebarContextMock = {
   currentPage: '/home',
-  setNewPage: vi.fn()
+  setNewPage: vi.fn(),
+  isCollapsed: false,
+  toggleCollapsed: vi.fn()
 };
 
 // Mock the lang handler
diff --git a/client/src/__test__/views/TaskAdd.test.tsx b/client/src/__test__/views/TaskAdd.test.tsx
index ad671e1d..acd65a35 100644
--- a/client/src/__test__/views/TaskAdd.test.tsx
+++ b/client/src/__test__/views/TaskAdd.test.tsx
@@ -59,7 +59,9 @@ const authContextMock = {
 
 const sidebarContextMock = {
   currentPage: '/home',
-  setNewPage: vi.fn()
+  setNewPage: vi.fn(),
+  isCollapsed: false,
+  toggleCollapsed: vi.fn()
 };
 
 describe('TaskAdd Component', () => {
diff --git a/client/src/components/NavButton/index.tsx b/client/src/components/NavButton/index.tsx
index 77120179..72e9496f 100644
--- a/client/src/components/NavButton/index.tsx
+++ b/client/src/components/NavButton/index.tsx
@@ -8,6 +8,7 @@ interface Props {
   children: React.ReactElement;
   className: string;
   onClick: () => void;
+  title?: string;
 }
 
 /**
@@ -26,6 +27,7 @@ function NavButton(props: React.PropsWithChildren<Props>): React.ReactElement {
     <a
       href="#"
       className={props.className}
+      title={props.title}
       onClick={(e) => {
         e.preventDefault();
         props.onClick();
diff --git a/client/src/components/Sidebar/index.tsx b/client/src/components/Sidebar/index.tsx
index 7fca01a3..5103fae1 100644
--- a/client/src/components/Sidebar/index.tsx
+++ b/client/src/components/Sidebar/index.tsx
@@ -7,7 +7,7 @@ import SidebarContext from '../../context/SidebarContext';
 import NavButton from '../NavButton';
 import { env } from '../../env';
 import './style.scss';
-import { BoxArrowRight, InfoCircleFill, PersonFill, StarFill } from 'react-bootstrap-icons';
+import { BoxArrowRight, ChevronDoubleLeft, ChevronDoubleRight, InfoCircleFill, Link45deg, PersonFill, StarFill } from 'react-bootstrap-icons';
 
 interface Props {
   isMobileOpen: boolean;
@@ -21,7 +21,7 @@ interface Props {
  */
 function Sidebar(props: React.PropsWithChildren<Props>): React.ReactNode {
   const { signOut, user } = useContext(AuthContext);
-  const { currentPage, setNewPage } = useContext(SidebarContext);
+  const { currentPage, setNewPage, isCollapsed, toggleCollapsed } = useContext(SidebarContext);
   const [lastSeen, setLastSeen] = useState('');
   const { t } = useTranslation();
   const build = `Build: ${env.VITE_BUILD}`;
@@ -78,44 +78,53 @@ function Sidebar(props: React.PropsWithChildren<Props>): React.ReactNode {
         <i className="bi bi-list"></i>
       </button>
 
-      <div className={`d-flex flex-column vh-100 sidebar ${props.isMobileOpen ? 'sidebar-mobile-open' : ''}`}>
+      <div className={`d-flex flex-column vh-100 sidebar ${props.isMobileOpen ? 'sidebar-mobile-open' : ''} ${isCollapsed ? 'sidebar-collapsed' : ''}`}>
+        <button
+          className="d-none d-lg-flex btn sidebar-collapse-toggle"
+          onClick={toggleCollapsed}
+          aria-expanded={!isCollapsed}
+          aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        >
+          {isCollapsed ? <ChevronDoubleRight /> : <ChevronDoubleLeft />}
+        </button>
+
         <div className="sidebar-header plus-jakarta-sans-bold">
           <img src={`https://gravatar.com/avatar/${user?.gravatarImageUrl}.jpg`} alt="User icon" />
-          <span className="header-username">{user?.name ? user?.name : 'User'}</span>
+          {!isCollapsed && <span className="header-username">{user?.name ? user?.name : 'User'}</span>}
         </div>
 
         <div className="header-spacer"></div>
 
-        <Nav className="flex-column p-3 plus-jakarta-sans-thin">
-          <NavLink to="/home" className="mb-2" onClick={() => setNewPage('/home')}>
+        <Nav className={`flex-column plus-jakarta-sans-thin ${isCollapsed ? 'p-0' : 'p-3'}`}>
+          <NavLink to="/home" className="mb-2" title={isCollapsed ? 'Home' : undefined} onClick={() => setNewPage('/home')}>
             <div className={`sidebar-nav ${isHomeSelected()}`}>
               <StarFill />
-              Home
+              {!isCollapsed && 'Home'}
             </div>
           </NavLink>
-          <NavLink to="/account" className="mb-2" onClick={() => setNewPage('/account')}>
+          <NavLink to="/account" className="mb-2" title={isCollapsed ? t('footer_my_account') : undefined} onClick={() => setNewPage('/account')}>
             <div className={`sidebar-nav ${currentPage === '/account' ? 'selected' : ''}`}>
               <PersonFill />
-              {t('footer_my_account')}
+              {!isCollapsed && t('footer_my_account')}
             </div>
           </NavLink>
-          <NavLink to="/about" className="mb-2" onClick={() => setNewPage('/about')}>
+          <NavLink to="/about" className="mb-2" title={isCollapsed ? t('home_nav_about') : undefined} onClick={() => setNewPage('/about')}>
             <div className={`sidebar-nav ${currentPage === '/about' ? 'selected' : ''}`}>
               <InfoCircleFill />
-              {t('home_nav_about')}
+              {!isCollapsed && t('home_nav_about')}
             </div>
           </NavLink>
-          <NavButton className="mb-2" onClick={() => logout()}>
+          <NavButton className="mb-2" title={isCollapsed ? t('logout') : undefined} onClick={() => logout()}>
             <div className="sidebar-nav">
               <BoxArrowRight />
-              {t('logout')}
+              {!isCollapsed && t('logout')}
             </div>
           </NavButton>
         </Nav>
 
         {/* Footer at the bottom */}
         <div className="mt-auto text-center text-muted py-3">
-          {lastSeen && (
+          {!isCollapsed && lastSeen && (
             <div>
               <small>{t('sidebar_last_seen', { time: lastSeen })}</small>
             </div>
@@ -126,8 +135,9 @@ function Sidebar(props: React.PropsWithChildren<Props>): React.ReactNode {
             target="_blank"
             rel="noopener noreferrer"
             className="footer-link"
+            title={isCollapsed ? build : undefined}
           >
-            <small>{build}</small>
+            {isCollapsed ? <Link45deg /> : <small>{build}</small>}
           </a>
         </div>
       </div>
diff --git a/client/src/components/Sidebar/style.scss b/client/src/components/Sidebar/style.scss
index 03b11c41..d3f428fe 100644
--- a/client/src/components/Sidebar/style.scss
+++ b/client/src/components/Sidebar/style.scss
@@ -10,7 +10,66 @@
   height: 100vh;
   overflow-y: auto;
   z-index: 2;
-  transition: transform 0.3s ease;
+  transition: transform 0.3s ease, width 0.3s ease;
+}
+
+/* Desktop collapse toggle */
+.sidebar-collapse-toggle {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 3;
+  padding: 0.25rem 0.5rem;
+  color: var(--bs-body-color);
+  border: none;
+  background: transparent;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Desktop collapsed rail */
+@media (min-width: 992px) {
+  .sidebar-collapsed {
+    width: 64px;
+    overflow-x: hidden;
+
+    .sidebar-collapse-toggle {
+      right: auto;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .sidebar-header {
+      margin-left: 0;
+      margin-top: 60px;
+      margin-bottom: 16px;
+      text-align: center;
+    }
+
+    .sidebar-header img {
+      width: 32px;
+      height: 32px;
+      margin-right: 0;
+    }
+
+    .header-spacer {
+      display: none;
+    }
+
+    .sidebar-nav {
+      display: flex;
+      justify-content: center;
+    }
+
+    .sidebar-nav svg {
+      margin-right: 0;
+    }
+  }
+
+  .sidebar.sidebar-collapsed a {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
 /* Mobile sidebar positioning - hidden by default */
diff --git a/client/src/context/SidebarContext.ts b/client/src/context/SidebarContext.ts
index 03d074a8..0b07c42c 100644
--- a/client/src/context/SidebarContext.ts
+++ b/client/src/context/SidebarContext.ts
@@ -3,6 +3,8 @@ import { createContext } from 'react';
 export interface SidebarContextData {
   currentPage: string;
   setNewPage: (page: string) => void;
+  isCollapsed: boolean;
+  toggleCollapsed: () => void;
 }
 
 const SidebarContext = createContext<SidebarContextData>({} as SidebarContextData);
diff --git a/client/src/context/SidebarProvider.tsx b/client/src/context/SidebarProvider.tsx
index 0e5f9ac9..cb9bc551 100644
--- a/client/src/context/SidebarProvider.tsx
+++ b/client/src/context/SidebarProvider.tsx
@@ -1,21 +1,36 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import SidebarContext, { SidebarContextData } from './SidebarContext';
 
+const SIDEBAR_COLLAPSED_KEY = 'SIDEBAR_COLLAPSED';
+
 interface Props {
   children: React.ReactNode;
 }
 
 const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({ children }: Props) => {
   const [currentPage, setCurrentPage] = useState<string>('/home');
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(
+    () => localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === 'true'
+  );
+
+  useEffect(() => {
+    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(isCollapsed));
+  }, [isCollapsed]);
 
   const setNewPage = (page: string): void => {
     setCurrentPage(page);
   };
 
+  const toggleCollapsed = (): void => {
+    setIsCollapsed(prev => !prev);
+  };
+
   const contextValue: SidebarContextData = useMemo(() => ({
     currentPage,
-    setNewPage
-  }), [currentPage, setNewPage]);
+    setNewPage,
+    isCollapsed,
+    toggleCollapsed
+  }), [currentPage, setNewPage, isCollapsed, toggleCollapsed]);
 
   return (
     <SidebarContext.Provider value={contextValue}>
diff --git a/client/src/layout/PrivateLayout/index.tsx b/client/src/layout/PrivateLayout/index.tsx
index ceb265db..a6cf057f 100644
--- a/client/src/layout/PrivateLayout/index.tsx
+++ b/client/src/layout/PrivateLayout/index.tsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Outlet } from 'react-router';
 import Sidebar from '../../components/Sidebar';
+import SidebarContext from '../../context/SidebarContext';
 import './style.css';
 
 /**
@@ -14,11 +15,12 @@ import './style.css';
  */
 function PrivateLayout(): React.ReactNode {
   const [isMobileOpen, setIsMobileOpen] = useState<boolean>(false);
+  const { isCollapsed } = useContext(SidebarContext);
 
   return (
     <div className="page-container">
       <Sidebar isMobileOpen={isMobileOpen} setIsMobileOpen={setIsMobileOpen} />
-      <main className={`main-content ${isMobileOpen ? 'content-with-sidebar-mobile' : ''}`}>
+      <main className={`main-content ${isMobileOpen ? 'content-with-sidebar-mobile' : ''} ${isCollapsed ? 'content-sidebar-collapsed' : ''}`}>
         <Outlet />
       </main>
     </div>
diff --git a/client/src/layout/PrivateLayout/style.css b/client/src/layout/PrivateLayout/style.css
index 7117ab8f..ec7c0ce4 100644
--- a/client/src/layout/PrivateLayout/style.css
+++ b/client/src/layout/PrivateLayout/style.css
@@ -15,6 +15,10 @@
     margin-left: 276px; /* Same as sidebar width */
     padding: 30px;
   }
+
+  .main-content.content-sidebar-collapsed {
+    margin-left: 64px; /* Same as collapsed sidebar rail width */
+  }
 }
 
 /* On small screens, content takes full width by default */