diff --git a/.cspell.json b/.cspell.json
index 7d564cd35..3157fbb5e 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -4,6 +4,7 @@
 	"caseSensitive": false,
 	"$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
 	"words": [
+		"Unplan",
 		"nivo",
 		"accepte",
 		"Accordian",
diff --git a/.github/workflows/desktop-server-api.apps.yml b/.github/workflows/desktop-server-api.apps.yml
index 58bfab1f8..afe85a1d9 100644
--- a/.github/workflows/desktop-server-api.apps.yml
+++ b/.github/workflows/desktop-server-api.apps.yml
@@ -27,7 +27,7 @@ jobs:
           ref: master
 
       - name: Install Node.js, NPM and Yarn
-        uses: buildjet/setup-node@v3
+        uses: buildjet/setup-node@v4
         with:
           node-version: '20.11.1'
           cache: 'yarn'
@@ -267,6 +267,10 @@ jobs:
           ChocolateyInstall: ''
           ChromeWebDriver: ''
           COBERTURA_HOME: ''
+          # COMPUTERNAME: ''
+          # COMSPEC: ''
+          # CONDA: ''
+          # DEPLOYMENT_BASEPATH: ''
           SBT_HOME: ''
           SELENIUM_JAR_PATH: ''
           STATS_BLT: ''
@@ -287,10 +291,49 @@ jobs:
           ANDROID_NDK_LATEST_HOME: ''
           ANDROID_NDK_ROOT: ''
           ANDROID_SDK_ROOT: ''
+          # GITHUB_ACTION: ''
+          # GITHUB_ACTIONS: ''
+          # GITHUB_ACTION_REF: ''
+          # GITHUB_ACTION_REPOSITORY: ''
+          # GITHUB_ACTOR: ''
+          # GITHUB_ACTOR_ID: ''
+          # GITHUB_API_URL: ''
+          # GITHUB_BASE_REF: ''
+          # GITHUB_ENV: ''
+          # GITHUB_EVENT_NAME: ''
+          # GITHUB_EVENT_PATH: ''
+          # GITHUB_GRAPHQL_URL: ''
+          # GITHUB_HEAD_REF: ''
+          # GITHUB_JOB: ''
+          # GITHUB_OUTPUT: ''
+          # GITHUB_PATH: ''
+          # GITHUB_REF: ''
+          # GITHUB_REF_NAME: ''
+          # GITHUB_REF_PROTECTED: ''
+          # GITHUB_REF_TYPE: ''
+          # GITHUB_REPOSITORY: ''
+          # GITHUB_REPOSITORY_ID: ''
+          # GITHUB_REPOSITORY_OWNER: ''
+          # GITHUB_REPOSITORY_OWNER_ID: ''
+          # GITHUB_RETENTION_DAYS: ''
+          # GITHUB_RUN_ATTEMPT: ''
+          # GITHUB_RUN_ID: ''
+          # GITHUB_RUN_NUMBER: ''
+          # GITHUB_SERVER_URL: ''
+          # GITHUB_SHA: ''
+          # GITHUB_STATE: ''
+          # GITHUB_STEP_SUMMARY: ''
+          # GITHUB_TRIGGERING_ACTOR: ''
+          # GITHUB_WORKFLOW: ''
+          # GITHUB_WORKFLOW_REF: ''
+          # GITHUB_WORKFLOW_SHA: ''
+          # GITHUB_WORKSPACE: ''
           GOROOT_1_20_X64: ''
           GOROOT_1_21_X64: ''
           GOROOT_1_22_X64: ''
           GRADLE_HOME: ''
+          # HOMEDRIVE: ''
+          # HOMEPATH: ''
           IEWebDriver: ''
           ImageOS: ''
           ImageVersion: ''
@@ -299,10 +342,17 @@ jobs:
           JAVA_HOME_17_X64: ''
           JAVA_HOME_21_X64: ''
           JAVA_HOME_8_X64: ''
+          # LOCALAPPDATA: ''
+          # LOGONSERVER: ''
           M2: ''
           M2_REPO: ''
           MAVEN_OPTS: ''
           MonAgentClientLocation: ''
+          # npm_config_prefix: ''
+          # NUMBER_OF_PROCESSORS: ''
+          # OS: ''
+          # PATHEXT: ''
+          # PERFLOG_LOCATION_SETTING: ''
           PGBIN: ''
           PGDATA: ''
           PGPASSWORD: ''
@@ -319,6 +369,7 @@ jobs:
           PROCESSOR_REVISION: ''
           PSModuleAnalysisCachePath: ''
           PSModulePath: ''
+          Path: 'C:\hostedtoolcache\windows\node\20.11.1\x64;C:\Program Files\Git\bin;C:\npm\prefix;C:\hostedtoolcache\windows\Python\3.9.13\x64\Scripts;C:\hostedtoolcache\windows\Python\3.9.13\x64;C:\Program Files\OpenSSL\bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\dotnet\;C:\Program Files\PowerShell\7\;C:\Program Files\CMake\bin;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Program Files\GitHub CLI\;c:\tools\php;C:\Program Files (x86)\sbt\bin;C:\Program Files\Amazon\AWSCLIV2\;C:\Users\runneradmin\.dotnet\tools;C:\Users\runneradmin\.cargo\bin;C:\Users\runneradmin\AppData\Local\Microsoft\WindowsApps'
           DOTNET_MULTILEVEL_LOOKUP: ''
           DOTNET_NOLOGO: ''
           DOTNET_SKIP_FIRST_TIME_EXPERIENCE: ''
@@ -328,6 +379,7 @@ jobs:
           GeckoWebDriver: ''
           GHCUP_INSTALL_BASE_PREFIX: ''
           GHCUP_MSYS2: ''
+          # RTOOLS44_HOME: ''
           RUNNER_ARCH: ''
           RUNNER_ENVIRONMENT: ''
           RUNNER_NAME: ''
@@ -337,8 +389,20 @@ jobs:
           RUNNER_TOOL_CACHE: ''
           RUNNER_TRACKING_ID: ''
           RUNNER_WORKSPACE: ''
+          # USERDOMAIN: ''
+          # USERDOMAIN_ROAMINGPROFILE: ''
+          # USERNAME: ''
+          # USERPROFILE: ''
+          # VCPKG_INSTALLATION_ROOT: ''
+          # WIX: ''
+          # TERM: ''
+          # HOME: ''
+          # WINDIR: ''
+          # ProgramData: ''
           # PROGRAMFILES: ''
           # ProgramW6432: ''
           # ALLUSERSPROFILE: ''
           # APPDATA: ''
           # COMMONPROGRAMFILES: ''
+          # CommonProgramFiles(x86)
+          # CommonProgramW6432
diff --git a/.github/workflows/desktop-server-web.apps.yml b/.github/workflows/desktop-server-web.apps.yml
index 2f921a7bc..2fcc04f92 100644
--- a/.github/workflows/desktop-server-web.apps.yml
+++ b/.github/workflows/desktop-server-web.apps.yml
@@ -258,6 +258,10 @@ jobs:
           ChocolateyInstall: ''
           ChromeWebDriver: ''
           COBERTURA_HOME: ''
+          # COMPUTERNAME: ''
+          # COMSPEC: ''
+          # CONDA: ''
+          # DEPLOYMENT_BASEPATH: ''
           SBT_HOME: ''
           SELENIUM_JAR_PATH: ''
           STATS_BLT: ''
@@ -278,10 +282,49 @@ jobs:
           ANDROID_NDK_LATEST_HOME: ''
           ANDROID_NDK_ROOT: ''
           ANDROID_SDK_ROOT: ''
+          # GITHUB_ACTION: ''
+          # GITHUB_ACTIONS: ''
+          # GITHUB_ACTION_REF: ''
+          # GITHUB_ACTION_REPOSITORY: ''
+          # GITHUB_ACTOR: ''
+          # GITHUB_ACTOR_ID: ''
+          # GITHUB_API_URL: ''
+          # GITHUB_BASE_REF: ''
+          # GITHUB_ENV: ''
+          # GITHUB_EVENT_NAME: ''
+          # GITHUB_EVENT_PATH: ''
+          # GITHUB_GRAPHQL_URL: ''
+          # GITHUB_HEAD_REF: ''
+          # GITHUB_JOB: ''
+          # GITHUB_OUTPUT: ''
+          # GITHUB_PATH: ''
+          # GITHUB_REF: ''
+          # GITHUB_REF_NAME: ''
+          # GITHUB_REF_PROTECTED: ''
+          # GITHUB_REF_TYPE: ''
+          # GITHUB_REPOSITORY: ''
+          # GITHUB_REPOSITORY_ID: ''
+          # GITHUB_REPOSITORY_OWNER: ''
+          # GITHUB_REPOSITORY_OWNER_ID: ''
+          # GITHUB_RETENTION_DAYS: ''
+          # GITHUB_RUN_ATTEMPT: ''
+          # GITHUB_RUN_ID: ''
+          # GITHUB_RUN_NUMBER: ''
+          # GITHUB_SERVER_URL: ''
+          # GITHUB_SHA: ''
+          # GITHUB_STATE: ''
+          # GITHUB_STEP_SUMMARY: ''
+          # GITHUB_TRIGGERING_ACTOR: ''
+          # GITHUB_WORKFLOW: ''
+          # GITHUB_WORKFLOW_REF: ''
+          # GITHUB_WORKFLOW_SHA: ''
+          # GITHUB_WORKSPACE: ''
           GOROOT_1_20_X64: ''
           GOROOT_1_21_X64: ''
           GOROOT_1_22_X64: ''
           GRADLE_HOME: ''
+          # HOMEDRIVE: ''
+          # HOMEPATH: ''
           IEWebDriver: ''
           ImageOS: ''
           ImageVersion: ''
@@ -290,10 +333,17 @@ jobs:
           JAVA_HOME_17_X64: ''
           JAVA_HOME_21_X64: ''
           JAVA_HOME_8_X64: ''
+          # LOCALAPPDATA: ''
+          # LOGONSERVER: ''
           M2: ''
           M2_REPO: ''
           MAVEN_OPTS: ''
           MonAgentClientLocation: ''
+          # npm_config_prefix: ''
+          # NUMBER_OF_PROCESSORS: ''
+          # OS: ''
+          # PATHEXT: ''
+          # PERFLOG_LOCATION_SETTING: ''
           PGBIN: ''
           PGDATA: ''
           PGPASSWORD: ''
@@ -310,6 +360,7 @@ jobs:
           PROCESSOR_REVISION: ''
           PSModuleAnalysisCachePath: ''
           PSModulePath: ''
+          Path: 'C:\hostedtoolcache\windows\node\20.11.1\x64;C:\Program Files\Git\bin;C:\npm\prefix;C:\hostedtoolcache\windows\Python\3.9.13\x64\Scripts;C:\hostedtoolcache\windows\Python\3.9.13\x64;C:\Program Files\OpenSSL\bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\dotnet\;C:\Program Files\PowerShell\7\;C:\Program Files\CMake\bin;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Program Files\GitHub CLI\;c:\tools\php;C:\Program Files (x86)\sbt\bin;C:\Program Files\Amazon\AWSCLIV2\;C:\Users\runneradmin\.dotnet\tools;C:\Users\runneradmin\.cargo\bin;C:\Users\runneradmin\AppData\Local\Microsoft\WindowsApps'
           DOTNET_MULTILEVEL_LOOKUP: ''
           DOTNET_NOLOGO: ''
           DOTNET_SKIP_FIRST_TIME_EXPERIENCE: ''
@@ -319,6 +370,7 @@ jobs:
           GeckoWebDriver: ''
           GHCUP_INSTALL_BASE_PREFIX: ''
           GHCUP_MSYS2: ''
+          # RTOOLS44_HOME: ''
           RUNNER_ARCH: ''
           RUNNER_ENVIRONMENT: ''
           RUNNER_NAME: ''
@@ -328,8 +380,20 @@ jobs:
           RUNNER_TOOL_CACHE: ''
           RUNNER_TRACKING_ID: ''
           RUNNER_WORKSPACE: ''
+          # USERDOMAIN: ''
+          # USERDOMAIN_ROAMINGPROFILE: ''
+          # USERNAME: ''
+          # USERPROFILE: ''
+          # VCPKG_INSTALLATION_ROOT: ''
+          # WIX: ''
+          # TERM: ''
+          # HOME: ''
+          # WINDIR: ''
+          # ProgramData: ''
           # PROGRAMFILES: ''
           # ProgramW6432: ''
           # ALLUSERSPROFILE: ''
           # APPDATA: ''
           # COMMONPROGRAMFILES: ''
+          # CommonProgramFiles(x86)
+          # CommonProgramW6432
diff --git a/.github/workflows/desktop.apps.yml b/.github/workflows/desktop.apps.yml
index 8a192a06e..618ef3814 100644
--- a/.github/workflows/desktop.apps.yml
+++ b/.github/workflows/desktop.apps.yml
@@ -27,7 +27,7 @@ jobs:
           ref: master
 
       - name: Install Node.js, NPM and Yarn
-        uses: buildjet/setup-node@v3
+        uses: buildjet/setup-node@v4
         with:
           node-version: '20.11.1'
           cache: 'yarn'
@@ -267,6 +267,10 @@ jobs:
           ChocolateyInstall: ''
           ChromeWebDriver: ''
           COBERTURA_HOME: ''
+          # COMPUTERNAME: ''
+          # COMSPEC: ''
+          # CONDA: ''
+          # DEPLOYMENT_BASEPATH: ''
           SBT_HOME: ''
           SELENIUM_JAR_PATH: ''
           STATS_BLT: ''
@@ -287,10 +291,49 @@ jobs:
           ANDROID_NDK_LATEST_HOME: ''
           ANDROID_NDK_ROOT: ''
           ANDROID_SDK_ROOT: ''
+          # GITHUB_ACTION: ''
+          # GITHUB_ACTIONS: ''
+          # GITHUB_ACTION_REF: ''
+          # GITHUB_ACTION_REPOSITORY: ''
+          # GITHUB_ACTOR: ''
+          # GITHUB_ACTOR_ID: ''
+          # GITHUB_API_URL: ''
+          # GITHUB_BASE_REF: ''
+          # GITHUB_ENV: ''
+          # GITHUB_EVENT_NAME: ''
+          # GITHUB_EVENT_PATH: ''
+          # GITHUB_GRAPHQL_URL: ''
+          # GITHUB_HEAD_REF: ''
+          # GITHUB_JOB: ''
+          # GITHUB_OUTPUT: ''
+          # GITHUB_PATH: ''
+          # GITHUB_REF: ''
+          # GITHUB_REF_NAME: ''
+          # GITHUB_REF_PROTECTED: ''
+          # GITHUB_REF_TYPE: ''
+          # GITHUB_REPOSITORY: ''
+          # GITHUB_REPOSITORY_ID: ''
+          # GITHUB_REPOSITORY_OWNER: ''
+          # GITHUB_REPOSITORY_OWNER_ID: ''
+          # GITHUB_RETENTION_DAYS: ''
+          # GITHUB_RUN_ATTEMPT: ''
+          # GITHUB_RUN_ID: ''
+          # GITHUB_RUN_NUMBER: ''
+          # GITHUB_SERVER_URL: ''
+          # GITHUB_SHA: ''
+          # GITHUB_STATE: ''
+          # GITHUB_STEP_SUMMARY: ''
+          # GITHUB_TRIGGERING_ACTOR: ''
+          # GITHUB_WORKFLOW: ''
+          # GITHUB_WORKFLOW_REF: ''
+          # GITHUB_WORKFLOW_SHA: ''
+          # GITHUB_WORKSPACE: ''
           GOROOT_1_20_X64: ''
           GOROOT_1_21_X64: ''
           GOROOT_1_22_X64: ''
           GRADLE_HOME: ''
+          # HOMEDRIVE: ''
+          # HOMEPATH: ''
           IEWebDriver: ''
           ImageOS: ''
           ImageVersion: ''
@@ -299,10 +342,17 @@ jobs:
           JAVA_HOME_17_X64: ''
           JAVA_HOME_21_X64: ''
           JAVA_HOME_8_X64: ''
+          # LOCALAPPDATA: ''
+          # LOGONSERVER: ''
           M2: ''
           M2_REPO: ''
           MAVEN_OPTS: ''
           MonAgentClientLocation: ''
+          # npm_config_prefix: ''
+          # NUMBER_OF_PROCESSORS: ''
+          # OS: ''
+          # PATHEXT: ''
+          # PERFLOG_LOCATION_SETTING: ''
           PGBIN: ''
           PGDATA: ''
           PGPASSWORD: ''
@@ -319,6 +369,7 @@ jobs:
           PROCESSOR_REVISION: ''
           PSModuleAnalysisCachePath: ''
           PSModulePath: ''
+          Path: 'C:\hostedtoolcache\windows\node\20.11.1\x64;C:\Program Files\Git\bin;C:\npm\prefix;C:\hostedtoolcache\windows\Python\3.9.13\x64\Scripts;C:\hostedtoolcache\windows\Python\3.9.13\x64;C:\Program Files\OpenSSL\bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\dotnet\;C:\Program Files\PowerShell\7\;C:\Program Files\CMake\bin;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Program Files\GitHub CLI\;c:\tools\php;C:\Program Files (x86)\sbt\bin;C:\Program Files\Amazon\AWSCLIV2\;C:\Users\runneradmin\.dotnet\tools;C:\Users\runneradmin\.cargo\bin;C:\Users\runneradmin\AppData\Local\Microsoft\WindowsApps'
           DOTNET_MULTILEVEL_LOOKUP: ''
           DOTNET_NOLOGO: ''
           DOTNET_SKIP_FIRST_TIME_EXPERIENCE: ''
@@ -328,6 +379,7 @@ jobs:
           GeckoWebDriver: ''
           GHCUP_INSTALL_BASE_PREFIX: ''
           GHCUP_MSYS2: ''
+          # RTOOLS44_HOME: ''
           RUNNER_ARCH: ''
           RUNNER_ENVIRONMENT: ''
           RUNNER_NAME: ''
@@ -337,8 +389,20 @@ jobs:
           RUNNER_TOOL_CACHE: ''
           RUNNER_TRACKING_ID: ''
           RUNNER_WORKSPACE: ''
+          # USERDOMAIN: ''
+          # USERDOMAIN_ROAMINGPROFILE: ''
+          # USERNAME: ''
+          # USERPROFILE: ''
+          # VCPKG_INSTALLATION_ROOT: ''
+          # WIX: ''
+          # TERM: ''
+          # HOME: ''
+          # WINDIR: ''
+          # ProgramData: ''
           # PROGRAMFILES: ''
           # ProgramW6432: ''
           # ALLUSERSPROFILE: ''
           # APPDATA: ''
           # COMMONPROGRAMFILES: ''
+          # CommonProgramFiles(x86)
+          # CommonProgramW6432
diff --git a/apps/extensions/yarn.lock b/apps/extensions/yarn.lock
index ac4ff1cdd..fd1d0ef18 100644
--- a/apps/extensions/yarn.lock
+++ b/apps/extensions/yarn.lock
@@ -2355,7 +2355,7 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@^3.0.2, braces@~3.0.2:
+braces@^3.0.3, braces@~3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
   integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
@@ -3930,11 +3930,11 @@ merge2@^1.3.0, merge2@^1.4.1:
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
 micromatch@^4.0.4, micromatch@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
-  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
   dependencies:
-    braces "^3.0.2"
+    braces "^3.0.3"
     picomatch "^2.3.1"
 
 mime@^1.4.1:
diff --git a/apps/mobile/yarn.lock b/apps/mobile/yarn.lock
index 3490bbf7a..fad785b47 100644
--- a/apps/mobile/yarn.lock
+++ b/apps/mobile/yarn.lock
@@ -4415,7 +4415,7 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^3.0.2, braces@~3.0.2:
+braces@^3.0.3, braces@~3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
   integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
@@ -10373,11 +10373,11 @@ metro@0.76.0:
     yargs "^17.5.1"
 
 micromatch@^4.0.2, micromatch@^4.0.4:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
-  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
   dependencies:
-    braces "^3.0.2"
+    braces "^3.0.3"
     picomatch "^2.3.1"
 
 mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
diff --git a/apps/web/app/[locale]/calendar/component.tsx b/apps/web/app/[locale]/calendar/component.tsx
index 4be0c2305..6656ec634 100644
--- a/apps/web/app/[locale]/calendar/component.tsx
+++ b/apps/web/app/[locale]/calendar/component.tsx
@@ -18,6 +18,7 @@ import React from "react";
 import { DateRange } from "react-day-picker";
 import { LuCalendarDays } from "react-icons/lu";
 import { Input } from "@components/ui/input";
+import { SettingFilterIcon } from "assets/svg";
 
 export function HeadCalendar({
     openModal,
@@ -60,14 +61,19 @@ export function HeadCalendar({
 }
 
 
-export function HeadTimeSheet({ timesheet }: { timesheet?: timesheetCalendar }) {
+export function HeadTimeSheet({ timesheet, isOpen, openModal, closeModal }: { timesheet?: timesheetCalendar, isOpen?: boolean, openModal?: () => void, closeModal?: () => void }) {
 
     const [date, setDate] = React.useState<DateRange | undefined>({
         from: new Date(2022, 0, 20),
         to: addDays(new Date(2022, 0, 20), 20)
-    });
+    })
     return (
+
         <div>
+            <TimeSheetFilter
+                closeModal={closeModal!}
+                isOpen={isOpen!}
+            />
             <div className='flex items-center justify-between w-full  dark:!bg-dark--theme h-28'>
                 {timesheet === 'TimeSheet' && (
                     <div className="flex justify-between items-center w-full p-2  gap-x-3">
@@ -123,7 +129,17 @@ export function HeadTimeSheet({ timesheet }: { timesheet?: timesheetCalendar })
                                 />
                             </div>
                             <div>
-                                <TimeSheetFilter />
+                                <Button
+                                    onClick={openModal}
+                                    className='flex items-center justify-center h-10 rounded-lg bg-white dark:bg-dark--theme-light gap-x-3 border dark:border-gray-700 hover:bg-white' >
+                                    <SettingFilterIcon className="text-gray-700 dark:text-white w-3.5" strokeWidth="1.8" />
+                                    <div className="gap-x-2 flex items-center w-full">
+                                        <span className="text-gray-700 dark:text-white">Filter</span>
+                                        <div className="bg-gray-700 dark:bg-white h-6 w-6 rounded-full flex items-center  justify-center text-whiten dark:text-gray-700">
+                                            <span>6</span>
+                                        </div>
+                                    </div>
+                                </Button>
                             </div>
                         </div>
                     </div>
diff --git a/apps/web/app/[locale]/calendar/page.tsx b/apps/web/app/[locale]/calendar/page.tsx
index dadeaf474..5bf66af03 100644
--- a/apps/web/app/[locale]/calendar/page.tsx
+++ b/apps/web/app/[locale]/calendar/page.tsx
@@ -61,6 +61,7 @@ const CalendarPage = () => {
                     closeModal={closeManualTimeModal}
                     isOpen={isManualTimeModalOpen}
                     params='AddManuelTime'
+                    timeSheetStatus='ManagerTimesheet'
                 />
                 <div
                     className='fixed top-20 flex flex-col border-b-[1px] dark:border-gray-800 z-10 mx-0 w-full bg-white dark:bg-dark-high shadow-lg shadow-gray-100 dark:shadow-gray-700 '
diff --git a/apps/web/app/[locale]/task/[id]/component.tsx b/apps/web/app/[locale]/task/[id]/component.tsx
new file mode 100644
index 000000000..4883d3600
--- /dev/null
+++ b/apps/web/app/[locale]/task/[id]/component.tsx
@@ -0,0 +1,51 @@
+import { ITeamTask } from '@app/interfaces';
+import { ChildIssueCard } from '@components/pages/task/ChildIssueCard';
+import RichTextEditor from '@components/pages/task/description-block/task-description-editor';
+import { RelatedIssueCard } from '@components/pages/task/IssueCard';
+import TaskDetailsAside from '@components/pages/task/task-details-aside';
+import TaskProperties from '@components/pages/task/TaskProperties';
+import TaskTitleBlock from '@components/pages/task/title-block/task-title-block';
+import { TaskActivity } from 'lib/features/task/task-activity';
+
+interface ITaskDetailsComponentProps {
+	task: ITeamTask;
+}
+
+/**
+ * Task details component
+ *
+ * @param {object} props - The props object
+ * @param {ITeamTask} props.task - The task to show details about
+ *
+ * @returns {JSX.Element} The Task details component
+ */
+export function TaskDetailsComponent(props: ITaskDetailsComponentProps) {
+	const { task } = props;
+	return (
+		<div className="flex flex-col w-full min-h-screen pt-5">
+			<section className="flex flex-col justify-between lg:flex-row lg:items-start 3xl:gap-8">
+				<section className="md:mr-5 max-w-[57rem] 3xl:max-w-none xl:w-full mb-4 md:mb-0">
+					<TaskTitleBlock />
+
+					<div className="bg-[#F9F9F9] dark:bg-dark--theme-light p-2 md:p-6 pt-0 flex flex-col gap-8 rounded-sm">
+						<RichTextEditor />
+						{/* <TaskDescriptionBlock /> */}
+						<ChildIssueCard />
+						<RelatedIssueCard />
+
+						{/* <IssueCard related={true} /> */}
+
+						{/* <CompletionBlock /> */}
+						{task && <TaskActivity task={task} />}
+					</div>
+				</section>
+				<div className="flex flex-col mt-4 lg:mt-0 3xl:min-w-[24rem] w-full lg:w-[30%]">
+					<div className="flex flex-col bg-white dark:bg-dark--theme-light rounded-xl">
+						<TaskDetailsAside />
+					</div>
+					<TaskProperties task={task} />
+				</div>
+			</section>
+		</div>
+	);
+}
diff --git a/apps/web/app/[locale]/task/[id]/page.tsx b/apps/web/app/[locale]/task/[id]/page.tsx
index 4c029a475..4b9422499 100644
--- a/apps/web/app/[locale]/task/[id]/page.tsx
+++ b/apps/web/app/[locale]/task/[id]/page.tsx
@@ -1,12 +1,6 @@
 'use client';
 
 import { useOrganizationTeams, useTeamTasks, useUserProfilePage } from '@app/hooks';
-import { ChildIssueCard } from '@components/pages/task/ChildIssueCard';
-import { RelatedIssueCard } from '@components/pages/task/IssueCard';
-import TaskProperties from '@components/pages/task/TaskProperties';
-import RichTextEditor from '@components/pages/task/description-block/task-description-editor';
-import TaskDetailsAside from '@components/pages/task/task-details-aside';
-import TaskTitleBlock from '@components/pages/task/title-block/task-title-block';
 import { withAuthentication } from 'lib/app/authenticator';
 import { Breadcrumb, Container } from 'lib/components';
 import { ArrowLeftIcon } from 'assets/svg';
@@ -17,7 +11,7 @@ import { useTranslations } from 'next-intl';
 
 import { fullWidthState } from '@app/stores/fullWidth';
 import { useRecoilValue } from 'recoil';
-import { TaskActivity } from 'lib/features/task/task-activity';
+import { TaskDetailsComponent } from './component';
 
 const TaskDetails = () => {
 	const profile = useUserProfilePage();
@@ -71,76 +65,11 @@ const TaskDetails = () => {
 			</div>
 
 			<Container fullWidth={fullWidth} className="mb-10">
-				<div className="flex flex-col w-full min-h-screen pt-5">
-					<section className="flex flex-col justify-between lg:flex-row lg:items-start 3xl:gap-8">
-						<section className="md:mr-5 max-w-[57rem] 3xl:max-w-none xl:w-full mb-4 md:mb-0">
-							<TaskTitleBlock />
-
-							<div className="bg-[#F9F9F9] dark:bg-dark--theme-light p-2 md:p-6 pt-0 flex flex-col gap-8 rounded-sm">
-								<RichTextEditor />
-								{/* <TaskDescriptionBlock /> */}
-								<ChildIssueCard />
-								<RelatedIssueCard />
-
-								{/* <IssueCard related={true} /> */}
-
-								{/* <CompletionBlock /> */}
-								{task && <TaskActivity task={task} />}
-							</div>
-						</section>
-						<div className="flex flex-col mt-4 lg:mt-0 3xl:min-w-[24rem] w-full lg:w-[30%]">
-							<div className="flex flex-col bg-white dark:bg-dark--theme-light rounded-xl">
-								<TaskDetailsAside />
-							</div>
-							<TaskProperties task={task} />
-						</div>
-					</section>
-				</div>
-
+				{task && <TaskDetailsComponent task={task} />}
 				{/* <IssueModal task={task} /> */}
 			</Container>
 		</MainLayout>
 	);
 };
 
-/**
-function IssueModal({ task }: { task: ITeamTask | null }) {
-	const { handleStatusUpdate } = useTeamTasks();
-	const { trans } = useTranslation();
-	const modal = useModal();
-
-	const { openModal } = modal;
-
-	const handleChange = useCallback(
-		(status: any) => {
-			handleStatusUpdate(status, 'issueType', task);
-		},
-		[task, handleStatusUpdate]
-	);
-
-	useEffect(() => {
-		if (
-			task?.createdAt &&
-			task?.updatedAt &&
-			task?.createdAt === task?.updatedAt
-		) {
-			openModal();
-		}
-	}, [task?.updatedAt, task?.createdAt, openModal]);
-
-	return (
-		<TaskStatusModal
-			key={task?.id}
-			modal={modal}
-			types="issueType"
-			title={trans.common.SELECT_ISSUE}
-			defaultValue={task?.issueType}
-			onValueChange={handleChange}
-		>
-			<></>
-		</TaskStatusModal>
-	);
-}
- */
-
 export default withAuthentication(TaskDetails, { displayName: 'TaskDetails' });
diff --git a/apps/web/app/constants.ts b/apps/web/app/constants.ts
index 5ecc3f76d..9efedc8d0 100644
--- a/apps/web/app/constants.ts
+++ b/apps/web/app/constants.ts
@@ -273,6 +273,7 @@ export const USER_SAW_OUTSTANDING_NOTIFICATION = 'user-saw-notif';
 export const DAILY_PLAN_SUGGESTION_MODAL_DATE = 'daily-plan-suggestion-modal-date';
 export const TASKS_ESTIMATE_HOURS_MODAL_DATE = 'tasks-estimate-hours-modal-date';
 export const DAILY_PLAN_ESTIMATE_HOURS_MODAL_DATE = 'daily-plan-estimate-hours-modal';
+export const DEFAULT_PLANNED_TASK_ID = 'default-planned-task-id';
 
 // OAuth providers keys
 
@@ -315,7 +316,7 @@ export const manualTimeReasons: ManualTimeReasons[] = [
 ];
 
 export const statusOptions = [
-	{ value: "Approved", label: "Approved" },
-	{ value: "Pending", label: "Pending" },
-	{ value: "Rejected", label: "Rejected" },
+	{ value: 'Approved', label: 'Approved' },
+	{ value: 'Pending', label: 'Pending' },
+	{ value: 'Rejected', label: 'Rejected' }
 ];
diff --git a/apps/web/app/hooks/features/useDailyPlan.ts b/apps/web/app/hooks/features/useDailyPlan.ts
index 6e849626f..c8a561547 100644
--- a/apps/web/app/hooks/features/useDailyPlan.ts
+++ b/apps/web/app/hooks/features/useDailyPlan.ts
@@ -1,9 +1,10 @@
 'use client';
 
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { useCallback, useEffect } from 'react';
 import { useQuery } from '../useQuery';
 import {
+	activeTeamState,
 	dailyPlanFetchingState,
 	dailyPlanListState,
 	employeePlansListState,
@@ -31,6 +32,7 @@ export type FilterTabs = 'Today Tasks' | 'Future Tasks' | 'Past Tasks' | 'All Ta
 
 export function useDailyPlan() {
 	const { user } = useAuthenticateUser();
+	const activeTeam = useRecoilValue(activeTeamState);
 
 	const { loading, queryCall } = useQuery(getDayPlansByEmployeeAPI);
 	const { loading: getAllDayPlansLoading, queryCall: getAllQueryCall } = useQuery(getAllDayPlansAPI);
@@ -101,7 +103,10 @@ export function useDailyPlan() {
 	const createDailyPlan = useCallback(
 		async (data: ICreateDailyPlan) => {
 			if (user?.tenantId) {
-				const res = await createQueryCall(data, user?.tenantId || '');
+				const res = await createQueryCall(
+					{ ...data, organizationTeamId: activeTeam?.id },
+					user?.tenantId || ''
+				);
 				//Check if there is an existing plan
 				const isPlanExist = profileDailyPlans.items.find((plan) =>
 					plan.date?.toString()?.startsWith(new Date(data.date)?.toISOString().split('T')[0])
@@ -132,6 +137,7 @@ export function useDailyPlan() {
 			}
 		},
 		[
+			activeTeam?.id,
 			createQueryCall,
 			employeePlans,
 			getMyDailyPlans,
@@ -149,9 +155,21 @@ export function useDailyPlan() {
 			const updatedEmployee = employeePlans.filter((plan) => plan.id != planId);
 			setProfileDailyPlans({ total: profileDailyPlans.total, items: [...updated, res.data] });
 			setEmployeePlans([...updatedEmployee, res.data]);
+			// Fetch updated plans
+			getMyDailyPlans();
+			getAllDayPlans();
 			return res;
 		},
-		[employeePlans, profileDailyPlans, setEmployeePlans, setProfileDailyPlans, updateQueryCall]
+		[
+			employeePlans,
+			getAllDayPlans,
+			getMyDailyPlans,
+			profileDailyPlans.items,
+			profileDailyPlans.total,
+			setEmployeePlans,
+			setProfileDailyPlans,
+			updateQueryCall
+		]
 	);
 
 	const addTaskToPlan = useCallback(
diff --git a/apps/web/app/hooks/features/useEmployee.ts b/apps/web/app/hooks/features/useEmployee.ts
index 916877137..4ca1d9037 100644
--- a/apps/web/app/hooks/features/useEmployee.ts
+++ b/apps/web/app/hooks/features/useEmployee.ts
@@ -6,11 +6,13 @@ import { useRecoilState } from 'recoil';
 import { useQuery } from '../useQuery';
 import { useAuthenticateUser } from './useAuthenticateUser';
 import { IUpdateEmployee } from '@app/interfaces';
+import { useFirstLoad } from '../useFirstLoad';
 
 export const useEmployee = () => {
 	const { user } = useAuthenticateUser();
 	const [workingEmployees, setWorkingEmployees] = useRecoilState(workingEmployeesState);
 	const [workingEmployeesEmail, setWorkingEmployeesEmail] = useRecoilState(workingEmployeesEmailState);
+	const { firstLoad, firstLoadData: firstLoadDataEmployee } = useFirstLoad();
 
 	const { queryCall: getWorkingEmployeeQueryCall, loading: getWorkingEmployeeLoading } =
 		useQuery(getWorkingEmployeesAPI);
@@ -30,10 +32,13 @@ export const useEmployee = () => {
 	}, [getWorkingEmployeeQueryCall, setWorkingEmployees, setWorkingEmployeesEmail, user]);
 
 	useEffect(() => {
-		getWorkingEmployee();
-	}, [getWorkingEmployee]);
+		if (firstLoad) {
+			getWorkingEmployee();
+		}
+	}, [getWorkingEmployee, firstLoad]);
 
 	return {
+		firstLoadDataEmployee,
 		getWorkingEmployeeQueryCall,
 		getWorkingEmployeeLoading,
 		workingEmployees,
@@ -41,12 +46,10 @@ export const useEmployee = () => {
 	};
 };
 
-
 export const useEmployeeUpdate = () => {
 	const { queryCall: employeeUpdateQuery, loading: isLoading } = useQuery(updateEmployeeAPI);
 
-	const updateEmployee = useCallback(({ id, data
-	}: { id: string, data: IUpdateEmployee }) => {
+	const updateEmployee = useCallback(({ id, data }: { id: string; data: IUpdateEmployee }) => {
 		employeeUpdateQuery({ id, data })
 			.then((res) => res.data)
 			.catch((error) => {
@@ -54,5 +57,5 @@ export const useEmployeeUpdate = () => {
 			});
 	}, []);
 
-	return { updateEmployee, isLoading }
-}
+	return { updateEmployee, isLoading };
+};
diff --git a/apps/web/app/hooks/features/useTeamInvitations.ts b/apps/web/app/hooks/features/useTeamInvitations.ts
index 47a3bda8c..5c7b16585 100644
--- a/apps/web/app/hooks/features/useTeamInvitations.ts
+++ b/apps/web/app/hooks/features/useTeamInvitations.ts
@@ -107,7 +107,7 @@ export function useTeamInvitations() {
 
 	const resendTeamInvitation = useCallback(
 		(invitationId: string) => {
-			resendInviteQueryCall(invitationId);
+			return resendInviteQueryCall(invitationId);
 		},
 		[resendInviteQueryCall]
 	);
diff --git a/apps/web/app/hooks/features/useTeamTasks.ts b/apps/web/app/hooks/features/useTeamTasks.ts
index d14d69393..a60f7d6c4 100644
--- a/apps/web/app/hooks/features/useTeamTasks.ts
+++ b/apps/web/app/hooks/features/useTeamTasks.ts
@@ -15,14 +15,18 @@ import {
 	updateTaskAPI,
 	deleteEmployeeFromTasksAPI,
 	getTasksByIdAPI,
-	getTasksByEmployeeIdAPI
+	getTasksByEmployeeIdAPI,
+	getAllDayPlansAPI,
+	getMyDailyPlansAPI
 } from '@app/services/client/api';
 import {
 	activeTeamState,
 	activeTeamTaskId,
+	dailyPlanListState,
 	detailedTaskState,
 	// employeeTasksState,
 	memberActiveTaskIdState,
+	myDailyPlanListState,
 	userState
 } from '@app/stores';
 import { activeTeamTaskState, tasksByTeamState, tasksFetchingState, teamTasksState } from '@app/stores';
@@ -59,6 +63,9 @@ export function useTeamTasks() {
 
 	const { firstLoad, firstLoadData: firstLoadTasksData } = useFirstLoad();
 
+	const setDailyPlan = useSetRecoilState(dailyPlanListState);
+	const setMyDailyPlans = useSetRecoilState(myDailyPlanListState);
+
 	// Queries hooks
 	const { queryCall, loading, loadingRef } = useQuery(getTeamTasksAPI);
 	const { queryCall: getTasksByIdQueryCall, loading: getTasksByIdLoading } = useQuery(getTasksByIdAPI);
@@ -71,9 +78,30 @@ export function useTeamTasks() {
 
 	const { queryCall: updateQueryCall, loading: updateLoading } = useQuery(updateTaskAPI);
 
+	const { queryCall: getAllQueryCall } = useQuery(getAllDayPlansAPI);
+	const { queryCall: getMyDailyPlansQueryCall } = useQuery(getMyDailyPlansAPI);
+
 	const { queryCall: deleteEmployeeFromTasksQueryCall, loading: deleteEmployeeFromTasksLoading } =
 		useQuery(deleteEmployeeFromTasksAPI);
 
+	const getAllDayPlans = useCallback(async () => {
+		const response = await getAllQueryCall();
+
+		if (response.data.items.length) {
+			const { items, total } = response.data;
+			setDailyPlan({ items, total });
+		}
+	}, [getAllQueryCall, setDailyPlan]);
+
+	const getMyDailyPlans = useCallback(async () => {
+		const response = await getMyDailyPlansQueryCall();
+
+		if (response.data.items.length) {
+			const { items, total } = response.data;
+			setMyDailyPlans({ items, total });
+		}
+	}, [getMyDailyPlansQueryCall, setMyDailyPlans]);
+
 	const getTaskById = useCallback(
 		(taskId: string) => {
 			tasksRef.current.forEach((task) => {
@@ -126,13 +154,16 @@ export function useTeamTasks() {
 				const activeTeamTasks = tasksRef.current.slice().sort((a, b) => a.title.localeCompare(b.title));
 
 				if (!isEqual(latestActiveTeamTasks, activeTeamTasks)) {
+					// Fetch plans with updated task(s)
+					getMyDailyPlans();
+					getAllDayPlans();
 					setAllTasks(responseTasks);
 				}
 			} else {
 				setAllTasks(responseTasks);
 			}
 		},
-		[activeTeamRef, setAllTasks, tasksRef]
+		[activeTeamRef, getAllDayPlans, getMyDailyPlans, setAllTasks, tasksRef]
 	);
 
 	const loadTeamTasksData = useCallback(
diff --git a/apps/web/app/hooks/features/useTimer.ts b/apps/web/app/hooks/features/useTimer.ts
index 0712b14e9..d94e77b27 100644
--- a/apps/web/app/hooks/features/useTimer.ts
+++ b/apps/web/app/hooks/features/useTimer.ts
@@ -301,6 +301,16 @@ export function useTimer() {
 			return;
 		});
 
+		promise.catch(() => {
+			if (taskId.current) {
+				updateLocalTimerStatus({
+					lastTaskId: taskId.current,
+					runnedDateTime: 0,
+					running: false
+				});
+			}
+		});
+
 		/**
 		 *  Updating the task status to "In Progress" when the timer is started.
 		 */
diff --git a/apps/web/app/interfaces/IBaseModel.ts b/apps/web/app/interfaces/IBaseModel.ts
index 5adf49218..debe7f323 100644
--- a/apps/web/app/interfaces/IBaseModel.ts
+++ b/apps/web/app/interfaces/IBaseModel.ts
@@ -5,6 +5,15 @@ export interface IBaseDelete {
 	deletedAt?: Date;
 }
 
+/**
+ * @description
+ * An entity ID. Represents a unique identifier as a string.
+ *
+ * @docsCategory Type Definitions
+ * @docsSubcategory Identifiers
+ */
+export type ID = string;
+
 export interface IBaseEntity extends IBaseDelete {
 	id?: string;
 	readonly createdAt?: Date;
diff --git a/apps/web/app/interfaces/IDailyPlan.ts b/apps/web/app/interfaces/IDailyPlan.ts
index 2af0ea650..8eba961df 100644
--- a/apps/web/app/interfaces/IDailyPlan.ts
+++ b/apps/web/app/interfaces/IDailyPlan.ts
@@ -1,6 +1,6 @@
-import { IBasePerTenantAndOrganizationEntity } from './IBaseModel';
-import { IEmployee, IRelationnalEmployee } from './IEmployee';
-import { IOrganization } from './IOrganization';
+import { IBasePerTenantAndOrganizationEntity, ID } from './IBaseModel';
+import { IRelationnalEmployee } from './IEmployee';
+import { IRelationalOrganizationTeam } from './IOrganizationTeam';
 import { ITeamTask } from './ITask';
 
 export interface IDailyPlanBase extends IBasePerTenantAndOrganizationEntity {
@@ -10,24 +10,27 @@ export interface IDailyPlanBase extends IBasePerTenantAndOrganizationEntity {
 }
 
 export interface IRemoveTaskFromManyPlans {
-	employeeId?: IEmployee['id'];
-	plansIds?: IDailyPlan['id'][];
-	organizationId?: IOrganization['id'];
+	employeeId?: ID;
+	plansIds?: ID[];
+	organizationId?: ID;
 }
 
-export interface IDailyPlan extends IDailyPlanBase, IRelationnalEmployee {
+export interface IDailyPlan extends IDailyPlanBase, IRelationnalEmployee, IRelationalOrganizationTeam {
 	tasks?: ITeamTask[];
 }
 
-export interface ICreateDailyPlan extends IDailyPlanBase, IRelationnalEmployee {
-	taskId?: ITeamTask['id'];
+export interface ICreateDailyPlan extends IDailyPlanBase, IRelationnalEmployee, IRelationalOrganizationTeam {
+	taskId?: ID;
 }
 
-export interface IUpdateDailyPlan extends Partial<IDailyPlanBase>, Pick<ICreateDailyPlan, 'employeeId'> { }
+export interface IUpdateDailyPlan
+	extends Partial<IDailyPlanBase>,
+		Pick<ICreateDailyPlan, 'employeeId'>,
+		Partial<Pick<IRelationalOrganizationTeam, 'organizationTeamId'>> {}
 
 export interface IDailyPlanTasksUpdate
 	extends Pick<ICreateDailyPlan, 'taskId' | 'employeeId'>,
-	IBasePerTenantAndOrganizationEntity { }
+		IBasePerTenantAndOrganizationEntity {}
 
 export enum DailyPlanStatusEnum {
 	OPEN = 'open',
diff --git a/apps/web/app/interfaces/IOrganizationTeam.ts b/apps/web/app/interfaces/IOrganizationTeam.ts
index fdb5e455a..42256c24f 100644
--- a/apps/web/app/interfaces/IOrganizationTeam.ts
+++ b/apps/web/app/interfaces/IOrganizationTeam.ts
@@ -74,6 +74,11 @@ export interface IOrganizationTeamList {
 	projects?: IProject[];
 }
 
+export interface IRelationalOrganizationTeam {
+	organizationTeam?: IOrganizationTeam;
+	organizationTeamId?: IOrganizationTeam['id'];
+}
+
 export type IOrganizationTeamWithMStatus = IOrganizationTeamList;
 
 export interface OT_Member {
diff --git a/apps/web/components/shared/invite/invite-modal.tsx b/apps/web/components/shared/invite/invite-modal.tsx
index 09b601351..21dc0c7b6 100644
--- a/apps/web/components/shared/invite/invite-modal.tsx
+++ b/apps/web/components/shared/invite/invite-modal.tsx
@@ -7,6 +7,7 @@ import React, { useState } from 'react';
 import { IInvite, IInviteProps } from '../../../app/interfaces/hooks';
 import { UserOutlineIcon } from 'assets/svg';
 import { useTranslations } from 'next-intl';
+import { useToast } from '@components/ui/use-toast';
 
 const initalValues: IInvite = {
 	email: '',
@@ -14,9 +15,15 @@ const initalValues: IInvite = {
 };
 const InviteModal = ({ isOpen, Fragment, closeModal }: IInviteProps) => {
 	const [formData, setFormData] = useState<IInvite>(initalValues);
-	const { inviteUser, inviteLoading } = useTeamInvitations();
+	const { inviteUser, inviteLoading, teamInvitations, resendTeamInvitation, resendInviteLoading } =
+		useTeamInvitations();
+
 	const [errors, setErrors] = useState({});
 	const t = useTranslations();
+	const { toast } = useToast();
+
+	const isLoading = inviteLoading || resendInviteLoading;
+
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const { name, value } = e.target;
 		setErrors((er) => {
@@ -30,14 +37,44 @@ const InviteModal = ({ isOpen, Fragment, closeModal }: IInviteProps) => {
 
 	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 		e.preventDefault();
+		const existingInvitation = teamInvitations.find((invitation) => invitation.email === formData.email);
+
+		if (existingInvitation) {
+			resendTeamInvitation(existingInvitation.id).then(() => {
+				closeModal();
+
+				toast({
+					variant: 'default',
+					title: t('common.INVITATION_SENT'),
+					description: t('common.INVITATION_SENT_TO_USER', { email: formData.email }),
+					duration: 5 * 1000
+				});
+			});
+			return;
+		}
+
 		inviteUser(formData.email, formData.name)
-			.then(() => {
+			.then((data) => {
 				setFormData(initalValues);
 				closeModal();
+				toast({
+					variant: 'default',
+					title: t('common.INVITATION_SENT'),
+					description: t('common.INVITATION_SENT_TO_USER', { email: formData.email }),
+					duration: 5 * 1000
+				});
 			})
 			.catch((err: AxiosError) => {
 				if (err.response?.status === 400) {
-					setErrors((err.response?.data as any)?.errors || {});
+					const data = err.response?.data as any;
+
+					if ('errors' in data) {
+						setErrors(data.errors || {});
+					}
+
+					if ('message' in data && Array.isArray(data.message)) {
+						setErrors({ email: data.message[0] });
+					}
 				}
 			});
 	};
@@ -109,10 +146,10 @@ const InviteModal = ({ isOpen, Fragment, closeModal }: IInviteProps) => {
 										<button
 											className="w-full flex justify-center items-center mt-10 px-4 font-bold h-[55px] py-2 rounded-[12px] tracking-wide text-white dark:text-primary transition-colors duration-200 transform bg-primary dark:bg-white hover:text-opacity-90 focus:outline-none text-[18px]"
 											type="submit"
-											disabled={inviteLoading}
+											disabled={isLoading}
 										>
 											<span>{t('pages.invite.INVITE_LABEL_SEND')}</span>{' '}
-											{inviteLoading && (
+											{isLoading && (
 												<span className="ml-2">
 													<Spinner />
 												</span>
diff --git a/apps/web/components/ui/calendar.tsx b/apps/web/components/ui/calendar.tsx
index ac069e2b3..c955522ff 100644
--- a/apps/web/components/ui/calendar.tsx
+++ b/apps/web/components/ui/calendar.tsx
@@ -6,6 +6,7 @@ import { cn } from 'lib/utils';
 import { buttonVariants } from 'components/ui/button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
 import { ScrollArea } from './scroll-bar';
+import { memo, useCallback, useMemo } from 'react';
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
@@ -44,17 +45,21 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
 				...classNames
 			}}
 			components={{
-				Dropdown: ({ value, onChange, children, ...props }: DropdownProps) => {
-					const options = React.Children.toArray(children) as React.ReactElement<
-						React.HTMLProps<HTMLOptionElement>
-					>[];
-					const selected = options.find((child) => child.props.value === value);
-					const handleChange = (value: string) => {
+				Dropdown: memo(function Dropdown({ value, onChange, children, ...props }: DropdownProps) {
+					const options = useMemo(
+						() =>
+							React.Children.toArray(children) as React.ReactElement<
+								React.HTMLProps<HTMLOptionElement>
+							>[],
+						[]
+					);
+					const selected = useMemo(() => options.find((child) => child.props.value === value), []);
+					const handleChange = useCallback((value: string) => {
 						const changeEvent = {
 							target: { value }
 						} as React.ChangeEvent<HTMLSelectElement>;
 						onChange?.(changeEvent);
-					};
+					}, []);
 					return (
 						<Select
 							value={value?.toString()}
@@ -79,7 +84,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
 							</SelectContent>
 						</Select>
 					);
-				},
+				}),
 				IconLeft,
 				IconRight
 			}}
diff --git a/apps/web/lib/app/init-state.tsx b/apps/web/lib/app/init-state.tsx
index 52492dd4b..da6b9bbd4 100644
--- a/apps/web/lib/app/init-state.tsx
+++ b/apps/web/lib/app/init-state.tsx
@@ -20,6 +20,7 @@ import {
 	useTeamTasks,
 	useTimer
 } from '@app/hooks';
+import { useEmployee } from '@app/hooks/features/useEmployee';
 import { useTimeLogs } from '@app/hooks/features/useTimeLogs';
 import { publicState, userState } from '@app/stores';
 // import { useSyncLanguage } from 'ni18n';
@@ -56,6 +57,8 @@ function InitState() {
 	const { firstLoadDailyPlanData } = useDailyPlan();
 	const { firstLoadTimeLogs } = useTimeLogs();
 
+	const { firstLoadDataEmployee } = useEmployee();
+
 	useOneTimeLoad(() => {
 		//To be called once, at the top level component (e.g main.tsx | _app.tsx);
 		firstLoadTeamsData();
@@ -75,6 +78,7 @@ function InitState() {
 		firstLoadTaskRelatedIssueTypeData();
 		firstLoadDailyPlanData();
 		firstLoadTimeLogs();
+		firstLoadDataEmployee();
 		// --------------
 
 		getTimerStatus();
diff --git a/apps/web/lib/components/combobox/index.tsx b/apps/web/lib/components/combobox/index.tsx
new file mode 100644
index 000000000..9ce3ed57e
--- /dev/null
+++ b/apps/web/lib/components/combobox/index.tsx
@@ -0,0 +1,121 @@
+import * as React from "react";
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
+import { cn } from "lib/utils";
+import { Button } from "@components/ui/button";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from "@components/ui/command";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@components/ui/popover";
+
+interface ComboboxProps<T> {
+    items: T[]
+    itemToString: (item: T) => string
+    itemToValue: (item: T) => string
+    placeholder?: string
+    buttonWidth?: string
+    popoverWidth?: string
+    commandInputHeight?: string
+    noResultsText?: string
+    onChangeValue?: (value: T | null) => void
+    className?: string
+    popoverClassName?: string
+    selectedItem?: T | null
+}
+
+export function CustomCombobox<T>({
+    items,
+    itemToString,
+    itemToValue,
+    placeholder = "Select item...",
+    buttonWidth = "w-[200px]",
+    commandInputHeight = "h-9",
+    noResultsText = "No item found.",
+    onChangeValue,
+    className,
+    popoverClassName,
+    selectedItem = null
+}: ComboboxProps<T>) {
+    const [open, setOpen] = React.useState(false)
+    const [value, setValue] = React.useState<T | null>(selectedItem)
+    const [popoverWidth, setPopoverWidth] = React.useState<number | null>(null);
+    const triggerRef = React.useRef<HTMLButtonElement>(null);
+
+    const handleSelect = (currentValue: string) => {
+        const selectedItem = items.find(item => itemToValue(item) === currentValue) || null
+        setValue(selectedItem)
+        setOpen(false)
+        if (onChangeValue) {
+            onChangeValue(selectedItem)
+        }
+    }
+
+    React.useEffect(() => {
+        if (triggerRef.current) {
+            setPopoverWidth(triggerRef.current.offsetWidth);
+        }
+    }, [triggerRef.current]);
+
+
+    React.useEffect(() => {
+        setValue(selectedItem);
+    }, [selectedItem]);
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    ref={triggerRef}
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={open}
+                    className={cn(
+                        'w-full justify-between text-left font-normal h-10 rounded-lg dark:bg-dark--theme-light',
+                        buttonWidth
+                    )}
+                >
+                    {value ? itemToString(value) : placeholder}
+                    <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className={cn(
+                'w-full max-w-full max-h-[80vh] border border-transparent dark:bg-dark--theme-light',
+                popoverClassName
+            )}
+                style={{ width: popoverWidth || 'auto', overflow: 'auto' }}>
+                <Command className="dark:bg-dark--theme-light">
+                    <CommandInput placeholder="Search item..." className={commandInputHeight} />
+                    <CommandList>
+                        <CommandEmpty>{noResultsText}</CommandEmpty>
+                        <CommandGroup>
+                            {items.map((item) => (
+                                <CommandItem
+                                    className="w-full dark:bg-dark--theme-light"
+                                    key={itemToValue(item)}
+                                    value={itemToValue(item)}
+                                    onSelect={() => handleSelect(itemToValue(item))}
+                                >
+                                    {itemToString(item)}
+                                    <CheckIcon
+                                        className={cn(
+                                            "ml-auto h-4 w-4",
+                                            value && itemToValue(value) === itemToValue(item) ? "opacity-100" : "opacity-0"
+                                        )}
+                                    />
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    )
+}
diff --git a/apps/web/lib/components/custom-select/index.tsx b/apps/web/lib/components/custom-select/index.tsx
index 0e56528b7..0a40d206e 100644
--- a/apps/web/lib/components/custom-select/index.tsx
+++ b/apps/web/lib/components/custom-select/index.tsx
@@ -1,96 +1,2 @@
-import { Button } from '@components/ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover';
-import { cn } from 'lib/utils';
-import { useEffect, useState } from 'react';
-import { MdOutlineKeyboardArrowDown } from 'react-icons/md';
-
-interface SelectItemsProps<T> {
-	items: T[];
-	onValueChange?: (value: T) => void;
-	itemToString: (item: T) => string;
-	itemId: (item: T) => string;
-	triggerClassName?: string;
-	popoverClassName?: string;
-	renderItem?: (item: T, onClick: () => void) => JSX.Element;
-	defaultValue?: T;
-}
-
-export function SelectItems<T>({
-	items,
-	onValueChange,
-	itemToString,
-	itemId,
-	triggerClassName = '',
-	popoverClassName = '',
-	renderItem,
-	defaultValue
-}: SelectItemsProps<T>) {
-	const [selectedItem, setSelectedItem] = useState<T | null>(null);
-	const [isPopoverOpen, setPopoverOpen] = useState(false);
-
-	const onClick = (item: T) => {
-		setSelectedItem(item);
-		setPopoverOpen(false);
-		if (onValueChange) {
-			onValueChange(item);
-		}
-	};
-
-	useEffect(() => {
-		if (defaultValue) {
-			setSelectedItem(defaultValue);
-			if (onValueChange) {
-				onValueChange(defaultValue);
-			}
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [defaultValue]);
-
-	return (
-		<Popover open={isPopoverOpen} onOpenChange={setPopoverOpen}>
-			<PopoverTrigger asChild>
-				<Button
-					onClick={() => setPopoverOpen(!isPopoverOpen)}
-					variant="outline"
-					className={cn(
-						'w-full justify-between text-left font-normal h-10 rounded-lg dark:bg-dark--theme-light',
-						// !selectedItem && 'text-muted-foreground',
-						triggerClassName
-					)}
-				>
-					{selectedItem ? (
-						<span className="truncate">{itemToString(selectedItem)}</span>
-					) : (
-						<span>Select an item</span>
-					)}
-					<MdOutlineKeyboardArrowDown
-						className={cn('h-4 w-4 transition-transform', isPopoverOpen && 'rotate-180')}
-					/>
-				</Button>
-			</PopoverTrigger>
-			<PopoverContent
-				className={cn(
-					'w-[430px] border border-transparent max-h-[80vh] dark:bg-dark--theme-light',
-					popoverClassName
-				)}
-			>
-				<div className="w-full max-h-[80vh] overflow-auto flex flex-col">
-					{items.map((item) =>
-						renderItem ? (
-							renderItem(item, () => onClick(item))
-						) : (
-							<span
-								onClick={() => onClick(item)}
-								key={itemId(item)}
-								className="truncate hover:cursor-pointer hover:bg-slate-50 w-full text-[13px] hover:rounded-lg p-1 hover:font-normal dark:text-white dark:hover:bg-primary"
-								style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}
-							>
-								{itemToString(item)}
-							</span>
-						)
-					)}
-				</div>
-			</PopoverContent>
-		</Popover>
-	);
-}
+export * from './multi-select';
+export * from './select-items'
diff --git a/apps/web/lib/components/custom-select/multi-select.tsx b/apps/web/lib/components/custom-select/multi-select.tsx
new file mode 100644
index 000000000..6b87b8084
--- /dev/null
+++ b/apps/web/lib/components/custom-select/multi-select.tsx
@@ -0,0 +1,153 @@
+import { Button } from '@components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover';
+import { cn } from 'lib/utils';
+import { useEffect, useState, useRef } from 'react';
+import { MdOutlineKeyboardArrowDown, MdClose } from 'react-icons/md';
+
+interface MultiSelectProps<T> {
+    items: T[];
+    onValueChange?: (value: T | T[] | null) => void;
+    itemToString: (item: T) => string;
+    itemId: (item: T) => string;
+    triggerClassName?: string;
+    popoverClassName?: string;
+    renderItem?: (item: T, onClick: () => void, isSelected: boolean) => JSX.Element;
+    defaultValue?: T | T[];
+    multiSelect?: boolean;
+}
+
+export function MultiSelect<T>({
+    items,
+    onValueChange,
+    itemToString,
+    itemId,
+    triggerClassName = '',
+    popoverClassName = '',
+    renderItem,
+    defaultValue,
+    multiSelect = false,
+}: MultiSelectProps<T>) {
+    const [selectedItems, setSelectedItems] = useState<T[]>(Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : []);
+    const [isPopoverOpen, setPopoverOpen] = useState(false);
+    const [popoverWidth, setPopoverWidth] = useState<number | null>(null);
+    const triggerRef = useRef<HTMLButtonElement>(null);
+
+    const onClick = (item: T) => {
+        let newSelectedItems: T[];
+        if (multiSelect) {
+            if (selectedItems.some((selectedItem) => itemId(selectedItem) === itemId(item))) {
+                newSelectedItems = selectedItems.filter((selectedItem) => itemId(selectedItem) !== itemId(item));
+            } else {
+                newSelectedItems = [...selectedItems, item];
+            }
+        } else {
+            newSelectedItems = [item];
+            setPopoverOpen(false);
+        }
+        setSelectedItems(newSelectedItems);
+        if (onValueChange) {
+            onValueChange(multiSelect ? newSelectedItems : newSelectedItems[0]);
+        }
+    };
+
+    const removeItem = (item: T) => {
+        const newSelectedItems = selectedItems.filter((selectedItem) => itemId(selectedItem) !== itemId(item));
+        setSelectedItems(newSelectedItems);
+        if (onValueChange) {
+            onValueChange(multiSelect ? newSelectedItems : newSelectedItems.length > 0 ? newSelectedItems[0] : null);
+        }
+    };
+
+    useEffect(() => {
+        const initialItems = Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : [];
+        setSelectedItems(initialItems);
+        if (onValueChange) {
+            onValueChange(multiSelect ? initialItems : initialItems[0] || null);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultValue]);
+
+    useEffect(() => {
+        if (triggerRef.current) {
+            setPopoverWidth(triggerRef.current.offsetWidth);
+        }
+    }, [triggerRef.current]);
+
+    return (
+        <div className="relative w-full overflow-hidden">
+            <Popover open={isPopoverOpen} onOpenChange={setPopoverOpen}>
+                <PopoverTrigger asChild>
+                    <Button
+                        ref={triggerRef}
+                        onClick={() => setPopoverOpen(!isPopoverOpen)}
+                        variant="outline"
+                        className={cn(
+                            'w-full justify-between text-left font-normal h-10 rounded-lg dark:bg-dark--theme-light',
+                            triggerClassName
+                        )}
+                    >
+                        {selectedItems.length > 0 ? (
+                            <span className="truncate">
+                                {multiSelect
+                                    ? `${selectedItems.length} item(s) selected`
+                                    : itemToString(selectedItems[0])}
+                            </span>
+                        ) : (
+                            <span>Select items</span>
+                        )}
+                        <MdOutlineKeyboardArrowDown
+                            className={cn('h-4 w-4 transition-transform', isPopoverOpen && 'rotate-180')}
+                        />
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent
+                    className={cn(
+                        'w-full max-w-full max-h-[80vh] border border-transparent dark:bg-dark--theme-light',
+                        popoverClassName
+                    )}
+                    style={{ width: popoverWidth || 'auto', overflow: 'auto' }}
+                >
+                    <div className="w-full max-h-[80vh] overflow-auto flex flex-col">
+                        {items.map((item) => {
+                            const isSelected = selectedItems.some((selectedItem) => itemId(selectedItem) === itemId(item));
+                            return renderItem ? (
+                                renderItem(item, () => onClick(item), isSelected)
+                            ) : (
+                                <span
+                                    onClick={() => onClick(item)}
+                                    key={itemId(item)}
+                                    className={cn(
+                                        'truncate hover:cursor-pointer hover:bg-slate-50 w-full text-[13px] hover:rounded-lg p-1 hover:font-normal dark:text-white dark:hover:bg-primary',
+                                        isSelected && 'font-semibold bg-slate-100 dark:bg-primary-light'
+                                    )}
+                                    style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}
+                                >
+                                    {itemToString(item)}
+                                </span>
+                            );
+                        })}
+                    </div>
+                </PopoverContent>
+            </Popover>
+            {selectedItems.length > 0 && (
+                <div className="mt-2 flex flex-wrap gap-2">
+                    {selectedItems.map((item) => (
+                        <div
+                            key={itemId(item)}
+                            className="flex items-center justify-between bg-gray-100 dark:bg-slate-700 px-2 py-[0.5px] rounded text-[12px] dark:text-white"
+                        >
+                            <span>{itemToString(item)}</span>
+                            <button
+                                onClick={() => removeItem(item)}
+                                className="ml-2 text-gray-600 dark:text-white hover:text-red-500 dark:hover:text-red-500"
+                                aria-label="Remove item"
+                            >
+                                <MdClose className="h-4 w-4" />
+                            </button>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/apps/web/lib/components/custom-select/select-items.tsx b/apps/web/lib/components/custom-select/select-items.tsx
new file mode 100644
index 000000000..0e56528b7
--- /dev/null
+++ b/apps/web/lib/components/custom-select/select-items.tsx
@@ -0,0 +1,96 @@
+import { Button } from '@components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover';
+import { cn } from 'lib/utils';
+import { useEffect, useState } from 'react';
+import { MdOutlineKeyboardArrowDown } from 'react-icons/md';
+
+interface SelectItemsProps<T> {
+	items: T[];
+	onValueChange?: (value: T) => void;
+	itemToString: (item: T) => string;
+	itemId: (item: T) => string;
+	triggerClassName?: string;
+	popoverClassName?: string;
+	renderItem?: (item: T, onClick: () => void) => JSX.Element;
+	defaultValue?: T;
+}
+
+export function SelectItems<T>({
+	items,
+	onValueChange,
+	itemToString,
+	itemId,
+	triggerClassName = '',
+	popoverClassName = '',
+	renderItem,
+	defaultValue
+}: SelectItemsProps<T>) {
+	const [selectedItem, setSelectedItem] = useState<T | null>(null);
+	const [isPopoverOpen, setPopoverOpen] = useState(false);
+
+	const onClick = (item: T) => {
+		setSelectedItem(item);
+		setPopoverOpen(false);
+		if (onValueChange) {
+			onValueChange(item);
+		}
+	};
+
+	useEffect(() => {
+		if (defaultValue) {
+			setSelectedItem(defaultValue);
+			if (onValueChange) {
+				onValueChange(defaultValue);
+			}
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [defaultValue]);
+
+	return (
+		<Popover open={isPopoverOpen} onOpenChange={setPopoverOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					onClick={() => setPopoverOpen(!isPopoverOpen)}
+					variant="outline"
+					className={cn(
+						'w-full justify-between text-left font-normal h-10 rounded-lg dark:bg-dark--theme-light',
+						// !selectedItem && 'text-muted-foreground',
+						triggerClassName
+					)}
+				>
+					{selectedItem ? (
+						<span className="truncate">{itemToString(selectedItem)}</span>
+					) : (
+						<span>Select an item</span>
+					)}
+					<MdOutlineKeyboardArrowDown
+						className={cn('h-4 w-4 transition-transform', isPopoverOpen && 'rotate-180')}
+					/>
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent
+				className={cn(
+					'w-[430px] border border-transparent max-h-[80vh] dark:bg-dark--theme-light',
+					popoverClassName
+				)}
+			>
+				<div className="w-full max-h-[80vh] overflow-auto flex flex-col">
+					{items.map((item) =>
+						renderItem ? (
+							renderItem(item, () => onClick(item))
+						) : (
+							<span
+								onClick={() => onClick(item)}
+								key={itemId(item)}
+								className="truncate hover:cursor-pointer hover:bg-slate-50 w-full text-[13px] hover:rounded-lg p-1 hover:font-normal dark:text-white dark:hover:bg-primary"
+								style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}
+							>
+								{itemToString(item)}
+							</span>
+						)
+					)}
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}
diff --git a/apps/web/lib/components/index.ts b/apps/web/lib/components/index.ts
index 7c3a6edda..c9f001e4a 100644
--- a/apps/web/lib/components/index.ts
+++ b/apps/web/lib/components/index.ts
@@ -22,7 +22,7 @@ export * from './color-picker';
 export * from './no-data';
 export * from './pagination';
 export * from './time-picker'
-export * from './custom-select'
+export * from './custom-select/select-items'
 
 export * from './inputs/input';
 export * from './inputs/auth-code-input';
diff --git a/apps/web/lib/components/typography.tsx b/apps/web/lib/components/typography.tsx
index 8b737cf94..1bf8fbd6a 100644
--- a/apps/web/lib/components/typography.tsx
+++ b/apps/web/lib/components/typography.tsx
@@ -7,12 +7,25 @@ import { IVariant } from './types';
 type Props = PropsWithChildren<IClassName>;
 
 /**
- * <p />
+ * <div />
  */
-export const Text = ({ children, ...props }: Props & React.ComponentPropsWithRef<'p'>) => {
-	return <p {...props}>{children}</p>;
+export const Text = ({ children, ...props }: Props & React.ComponentPropsWithRef<'div'>) => {
+	return <div {...props}>{children}</div>;
 };
 
+/**
+ * <P />
+ */
+Text.P = forwardRef<HTMLParagraphElement, Props & React.ComponentPropsWithRef<'p'>>(({ children, ...props }, ref) => {
+	return (
+		<p {...props} ref={ref}>
+			{children}
+		</p>
+	);
+});
+
+Text.P.displayName = 'TextParagraph';
+
 /**
  * <Link />
  */
diff --git a/apps/web/lib/features/daily-plan/active-task-handler-modal.tsx b/apps/web/lib/features/daily-plan/active-task-handler-modal.tsx
new file mode 100644
index 000000000..ce96c4ad9
--- /dev/null
+++ b/apps/web/lib/features/daily-plan/active-task-handler-modal.tsx
@@ -0,0 +1,162 @@
+import { ITeamTask } from '@app/interfaces';
+import { Modal, Card, Text } from 'lib/components';
+import { Button } from '@components/ui/button';
+import { clsxm } from '@app/utils';
+import { useTranslations } from 'next-intl';
+import { useCallback, useMemo, useState } from 'react';
+import { useDailyPlan, useTeamTasks, useTimerView } from '@app/hooks';
+import { RadioGroup } from '@headlessui/react';
+import { DEFAULT_PLANNED_TASK_ID } from '@app/constants';
+
+/**
+ * A Modal that suggests the user to change the active task to a task from the today's plan.
+ *
+ * @param {Object} props - The props Object
+ * @param {boolean} props.open - If true open the modal otherwise close the modal
+ * @param {() => void} props.closeModal - A function to close the modal
+ * @param {ITeamTask} props.defaultPlannedTask - The default task from the Today's plan
+ *
+ * @returns {JSX.Element} The modal element
+ */
+export function ActiveTaskHandlerModal({
+	open,
+	closeModal,
+	defaultPlannedTask
+}: {
+	open: boolean;
+	closeModal: () => void;
+	defaultPlannedTask: ITeamTask;
+}) {
+	const t = useTranslations();
+	const { startTimer, hasPlan: todayPlan } = useTimerView();
+	const { activeTeamTask, setActiveTask } = useTeamTasks();
+	const { addTaskToPlan } = useDailyPlan();
+
+	const [selectedOption, setSelectedOption] = useState<number>();
+
+	const handleCloseModal = useCallback(() => {
+		closeModal();
+		startTimer();
+	}, [closeModal, startTimer]);
+
+	const options = useMemo(
+		() => [
+			{
+				id: 0,
+				description: 'Change to planned default task',
+				action: async () => {
+					if (defaultPlannedTask) {
+						setActiveTask(defaultPlannedTask);
+					}
+				}
+			},
+			{
+				id: 1,
+				description: 'Add the task as default to the plan',
+				action: async () => {
+					try {
+						if (todayPlan && todayPlan.id && activeTeamTask) {
+							await addTaskToPlan({ taskId: activeTeamTask.id }, todayPlan.id);
+						}
+
+						activeTeamTask &&
+							window &&
+							window.localStorage.setItem(DEFAULT_PLANNED_TASK_ID, activeTeamTask.id);
+					} catch (error) {
+						console.log(error);
+					}
+				}
+			},
+			{
+				id: 2,
+				description: 'Add the task AND work on the default task',
+				action: async () => {
+					try {
+						if (todayPlan && todayPlan.id && activeTeamTask) {
+							await addTaskToPlan({ taskId: activeTeamTask.id }, todayPlan.id);
+						}
+						if (defaultPlannedTask) {
+							setActiveTask(defaultPlannedTask);
+						}
+					} catch (error) {
+						console.log(error);
+					}
+				}
+			}
+		],
+		[activeTeamTask, addTaskToPlan, defaultPlannedTask, setActiveTask, todayPlan]
+	);
+
+	const handleSubmit = useCallback(() => {
+		selectedOption !== undefined && options[selectedOption].action();
+		handleCloseModal();
+	}, [handleCloseModal, options, selectedOption]);
+
+	return (
+		<Modal isOpen={open} closeModal={handleCloseModal} className="w-[98%] md:w-[530px] relative">
+			<Card className="w-full" shadow="custom">
+				<div className="flex flex-col items-center justify-between">
+					<div className="mb-7">
+						<Text.Heading as="h3" className="mb-3 uppercase text-center">
+							{t('dailyPlan.chang_active_task_popup.TITLE')}
+						</Text.Heading>
+
+						<Text className="text-sm text-center text-gray-500">
+							{t('dailyPlan.chang_active_task_popup.MESSAGE', {
+								defaultPlannedTask: defaultPlannedTask.taskNumber,
+								activeTask: activeTeamTask?.taskNumber
+							})}
+						</Text>
+					</div>
+
+					<div className="mx-auto w-full max-w-md">
+						<RadioGroup value={selectedOption} onChange={setSelectedOption}>
+							{options.map((option) => {
+								return (
+									<RadioGroup.Option key={option.id} value={option.id}>
+										{({ checked }) => (
+											<div className={clsxm('flex items-center gap-2 cursor-pointer')}>
+												<span
+													className={clsxm(
+														'h-4 w-4 p-[1px] border border-primary rounded-full flex items-center justify-center'
+													)}
+												>
+													<span
+														className={clsxm(
+															'w-full h-full rounded-full',
+															checked && 'bg-primary'
+														)}
+													></span>
+												</span>
+												<span>{option.description}</span>
+											</div>
+										)}
+									</RadioGroup.Option>
+								);
+							})}
+						</RadioGroup>
+					</div>
+
+					<div className="mt-7 w-full flex justify-between items-center">
+						<Button
+							variant="outline"
+							type="submit"
+							className="py-3 px-5 rounded-md font-light text-md dark:text-white dark:bg-slate-700 dark:border-slate-600"
+							onClick={handleCloseModal}
+						>
+							{t('common.SKIP_ADD_LATER')}
+						</Button>
+						<Button
+							variant="default"
+							type="submit"
+							className={clsxm('py-3 px-5 rounded-md font-light text-md dark:text-white')}
+							onClick={handleSubmit}
+						>
+							{t('timer.todayPlanSettings.START_WORKING_BUTTON')}
+						</Button>
+					</div>
+				</div>
+			</Card>
+		</Modal>
+	);
+}
diff --git a/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx b/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx
index dfcff9138..60f7c6c99 100644
--- a/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx
+++ b/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx
@@ -1,46 +1,186 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { TASKS_ESTIMATE_HOURS_MODAL_DATE } from '@app/constants';
-import { useMemo, useCallback, useState, useEffect } from 'react';
+import { useMemo, useCallback, useState, useEffect, useRef, Dispatch, SetStateAction } from 'react';
 import { PiWarningCircleFill } from 'react-icons/pi';
-import { Card, InputField, Modal, Text, VerticalSeparator } from 'lib/components';
+import { Card, InputField, Modal, SpinnerLoader, Text, Tooltip, VerticalSeparator } from 'lib/components';
 import { Button } from '@components/ui/button';
 import { useTranslations } from 'next-intl';
-import { useDailyPlan, useTeamTasks, useTimerView } from '@app/hooks';
+import { useAuthenticateUser, useDailyPlan, useModal, useTaskStatus, useTeamTasks, useTimerView } from '@app/hooks';
 import { TaskNameInfoDisplay } from '../task/task-displays';
 import { TaskEstimate } from '../task/task-estimate';
 import { IDailyPlan, ITeamTask } from '@app/interfaces';
 import clsx from 'clsx';
 import { AddIcon, ThreeCircleOutlineVerticalIcon } from 'assets/svg';
+import { estimatedTotalTime } from '../task/daily-plan';
+import { clsxm } from '@app/utils';
+import { formatIntegerToHour } from '@app/helpers';
+import { DEFAULT_PLANNED_TASK_ID } from '@app/constants';
+import { ActiveTaskHandlerModal } from './active-task-handler-modal';
+import { TaskDetailsModal } from './task-details-modal';
+import { Popover, Transition } from '@headlessui/react';
+import { ScrollArea, ScrollBar } from '@components/ui/scroll-bar';
+import { Cross2Icon } from '@radix-ui/react-icons';
 
+/**
+ * A modal that allows user to add task estimation / planned work time, etc.
+ *
+ * @param {Object} props - The props Object
+ * @param {boolean} props.open - If true open the modal otherwise close the modal
+ * @param {() => void} props.closeModal - A function to close the modal
+ * @param {IDailyPlan} props.plan - The selected plan
+ * @param {ITeamTask[]} props.tasks - The list of planned tasks
+ * @param {boolean} props.isRenderedInSoftFlow - If true use the soft flow logic.
+ *
+ * @returns {JSX.Element} The modal element
+ */
 interface IAddTasksEstimationHoursModalProps {
 	closeModal: () => void;
 	isOpen: boolean;
 	plan: IDailyPlan;
 	tasks: ITeamTask[];
+	isRenderedInSoftFlow?: boolean;
 }
 
 export function AddTasksEstimationHoursModal(props: IAddTasksEstimationHoursModalProps) {
-	const { isOpen, closeModal, plan, tasks } = props;
+	const { isOpen, closeModal, plan, tasks, isRenderedInSoftFlow = true } = props;
+	const {
+		isOpen: isActiveTaskHandlerModalOpen,
+		closeModal: closeActiveTaskHandlerModal,
+		openModal: openActiveTaskHandlerModal
+	} = useModal();
 
 	const t = useTranslations();
-	const { updateDailyPlan } = useDailyPlan();
+	const { updateDailyPlan, myDailyPlans } = useDailyPlan();
 	const { startTimer } = useTimerView();
 	const { activeTeam, activeTeamTask, setActiveTask } = useTeamTasks();
-
-	const [workTimePlanned, setworkTimePlanned] = useState<number | undefined>(plan.workTimePlanned);
+	const [showSearchInput, setShowSearchInput] = useState(false);
+	const [workTimePlanned, setWorkTimePlanned] = useState<number | undefined>(plan.workTimePlanned);
 	const currentDate = useMemo(() => new Date().toISOString().split('T')[0], []);
 	const requirePlan = useMemo(() => activeTeam?.requirePlanToTrack, [activeTeam?.requirePlanToTrack]);
+	const tasksEstimationTimes = useMemo(() => estimatedTotalTime(plan.tasks).timesEstimated / 3600, [plan.tasks]);
+	const [warning, setWarning] = useState('');
+	const [loading, setLoading] = useState(false);
+	const [defaultTask, setDefaultTask] = useState<ITeamTask | null>(null);
+	const isActiveTaskPlanned = useMemo(
+		() => plan.tasks?.some((task) => task.id == activeTeamTask?.id),
+		[activeTeamTask?.id, plan.tasks]
+	);
+
+	const canStartWorking = useMemo(() => {
+		const isTodayPlan =
+			new Date(Date.now()).toLocaleDateString('en') == new Date(plan.date).toLocaleDateString('en');
+
+		return isTodayPlan;
+		// Can add others conditions
+	}, [plan.date]);
 
 	const handleCloseModal = useCallback(() => {
-		localStorage.setItem(TASKS_ESTIMATE_HOURS_MODAL_DATE, currentDate);
+		if (canStartWorking) {
+			localStorage.setItem(TASKS_ESTIMATE_HOURS_MODAL_DATE, currentDate);
+		}
 		closeModal();
-		startTimer();
-	}, [closeModal, currentDate, startTimer]);
-
-	const handleSubmit = useCallback(() => {
-		updateDailyPlan({ workTimePlanned }, plan.id ?? '');
+	}, [canStartWorking, closeModal, currentDate]);
 
+	/**
+	 * The function that close the Planned tasks modal when the user ignores the modal (Today's plan)
+	 */
+	const closeModalAndStartTimer = useCallback(() => {
 		handleCloseModal();
-	}, [handleCloseModal, plan.id, updateDailyPlan, workTimePlanned]);
+		if (canStartWorking) {
+			startTimer();
+		}
+	}, [canStartWorking, handleCloseModal, startTimer]);
+
+	/**
+	 * The function that opens the Change task modal if conditions are met (or start the timer)
+	 */
+	const handleChangeActiveTask = useCallback(() => {
+		if (isActiveTaskPlanned) {
+			if (defaultTask?.id !== activeTeamTask?.id) {
+				setActiveTask(defaultTask);
+			}
+
+			if (!isRenderedInSoftFlow) {
+				handleCloseModal();
+			}
+			startTimer();
+		} else {
+			openActiveTaskHandlerModal();
+		}
+	}, [
+		activeTeamTask?.id,
+		defaultTask,
+		handleCloseModal,
+		isActiveTaskPlanned,
+		openActiveTaskHandlerModal,
+		isRenderedInSoftFlow,
+		setActiveTask,
+		startTimer
+	]);
+
+	/**
+	 * The function which is called when the user clicks on the 'Start working' button
+	 */
+	const handleSubmit = useCallback(async () => {
+		try {
+			setLoading(true);
+
+			// Update the plan work time only if the user changed it
+			plan.workTimePlanned !== workTimePlanned && (await updateDailyPlan({ workTimePlanned }, plan.id ?? ''));
+
+			if (canStartWorking) {
+				handleChangeActiveTask();
+
+				if (isRenderedInSoftFlow) {
+					handleCloseModal();
+				}
+			}
+		} catch (error) {
+			console.log(error);
+		} finally {
+			setLoading(false);
+		}
+	}, [
+		canStartWorking,
+		handleChangeActiveTask,
+		handleCloseModal,
+		plan.id,
+		plan.workTimePlanned,
+		isRenderedInSoftFlow,
+		updateDailyPlan,
+		workTimePlanned
+	]);
+
+	/**
+	 * The function that handles warning messages for the
+	 * difference of time (planned work / total estimated)
+	 */
+	const checkPlannedAndEstimateTimeDiff = useCallback(() => {
+		if (workTimePlanned) {
+			if (workTimePlanned > tasksEstimationTimes) {
+				setWarning(t('dailyPlan.planned_tasks_popup.warning.PLAN_MORE_TASKS'));
+			} else {
+				setWarning(t('dailyPlan.planned_tasks_popup.warning.OPTIMIZE_PLAN'));
+			}
+		} else {
+			setWarning(t('dailyPlan.planned_tasks_popup.warning.PLANNED_TIME'));
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [tasksEstimationTimes, workTimePlanned]);
+
+	// Handle warning messages
+	useEffect(() => {
+		if (!workTimePlanned || workTimePlanned <= 0) {
+			setWarning(t('dailyPlan.planned_tasks_popup.warning.PLANNED_TIME'));
+		} else if (plan.tasks?.find((task) => !task.estimate)) {
+			setWarning(t('dailyPlan.planned_tasks_popup.warning.TASKS_ESTIMATION'));
+		} else if (Math.abs(workTimePlanned - tasksEstimationTimes) > 1) {
+			checkPlannedAndEstimateTimeDiff();
+		} else {
+			setWarning('');
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [workTimePlanned, tasksEstimationTimes, plan.tasks, myDailyPlans]);
 
 	// Put tasks without estimates at the top of the list
 	const sortedTasks = useMemo(
@@ -62,113 +202,653 @@ export function AddTasksEstimationHoursModal(props: IAddTasksEstimationHoursModa
 		if (!sortedTasks.find((task) => task.id == activeTeamTask?.id)) {
 			[...sortedTasks].forEach((task) => {
 				if (task.estimate !== null && task.estimate > 0) {
-					isOpen && setActiveTask(task);
+					if (isOpen) {
+						setDefaultTask(task);
+						window && window.localStorage.setItem(DEFAULT_PLANNED_TASK_ID, task.id);
+					}
 				}
 			});
+		} else {
+			if (isOpen && activeTeamTask) {
+				setDefaultTask(activeTeamTask);
+				window && window.localStorage.setItem(DEFAULT_PLANNED_TASK_ID, activeTeamTask.id);
+			}
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isOpen]);
+	}, [isOpen, tasks]);
 
-	return (
-		<Modal isOpen={isOpen} closeModal={handleCloseModal} showCloseIcon={requirePlan ? false : true}>
-			<Card className="w-full" shadow="custom">
-				<div className="flex flex-col justify-between">
-					<div className="mb-7">
-						<Text.Heading as="h3" className="mb-3 text-center">
-							{t('timer.todayPlanSettings.TITLE')}
-						</Text.Heading>
-						<div className="mb-7 w-full flex flex-col gap-4">
-							<span className="text-sm">
-								{t('timer.todayPlanSettings.WORK_TIME_PLANNED')} <span className="text-red-600">*</span>
-							</span>
-							<div className="w-full flex gap-3 h-[3rem]">
-								<InputField
-									type="number"
-									placeholder={t('timer.todayPlanSettings.WORK_TIME_PLANNED_PLACEHOLDER')}
-									className="h-full"
-									wrapperClassName=" h-full"
-									onChange={(e) => setworkTimePlanned(parseFloat(e.target.value))}
-									required
-									noWrapper
-									min={0}
-									value={workTimePlanned}
-									defaultValue={plan.workTimePlanned ?? 0}
-								/>
-								<div className="h-full shrink-0 rounded-lg border w-10 flex items-center justify-center">
-									<AddIcon className="w-4 h-4 text-dark dark:text-white" />
-								</div>
-							</div>
+	// Update the working planned time
+	useEffect(() => {
+		setWorkTimePlanned(plan.workTimePlanned);
+	}, [plan]);
+
+	const content = (
+		<div className="flex w-full flex-col justify-between">
+			<div className="w-full flex flex-col gap-4">
+				{isRenderedInSoftFlow && (
+					<Text.Heading as="h3" className="mb-3 text-center">
+						{t('timer.todayPlanSettings.TITLE')}
+					</Text.Heading>
+				)}
+
+				{showSearchInput ? (
+					<SearchTaskInput
+						defaultTask={defaultTask}
+						setDefaultTask={setDefaultTask}
+						setShowSearchInput={setShowSearchInput}
+						selectedPlan={plan}
+					/>
+				) : (
+					<div className=" w-full flex flex-col gap-2">
+						<span className="text-sm">
+							{t('timer.todayPlanSettings.WORK_TIME_PLANNED')} <span className="text-red-600">*</span>
+						</span>
+						<div className="w-full flex gap-3 h-[3rem]">
+							<InputField
+								type="number"
+								placeholder={t('timer.todayPlanSettings.WORK_TIME_PLANNED_PLACEHOLDER')}
+								className="h-full"
+								wrapperClassName=" h-full"
+								onChange={(e) => setWorkTimePlanned(parseFloat(e.target.value))}
+								required
+								noWrapper
+								min={0}
+								value={workTimePlanned}
+								defaultValue={plan.workTimePlanned ?? 0}
+							/>
+							<button
+								onClick={() => {
+									setShowSearchInput(true);
+								}}
+								className="h-full shrink-0 rounded-lg border w-10 flex items-center justify-center"
+							>
+								<AddIcon className="w-4 h-4 text-dark dark:text-white" />
+							</button>
 						</div>
-						<div className="text-sm flex flex-col gap-3">
-							<div className="text-sm flex flex-col gap-3">
-								<span>
-									{t('timer.todayPlanSettings.TASKS_WITH_NO_ESTIMATIONS')}{' '}
+					</div>
+				)}
+
+				<div className="text-sm flex flex-col gap-3">
+					<div className="text-sm flex flex-col gap-3">
+						<div className="text-sm flex flex-col gap-2">
+							<div className="w-full flex items-center justify-between gap-2">
+								<div className="flex items-center justify-center gap-1">
+									<span>{t('task.TITLE_PLURAL')}</span>
 									<span className="text-red-600">*</span>
-								</span>
-								<div className="flex flex-col gap-1">
-									{sortedTasks.map((task, index) => (
-										<TaskCard key={index} task={task} />
-									))}
+								</div>
+								<div className="flex items-center justify-center gap-1">
+									<span>{t('dailyPlan.TOTAL_ESTIMATED')} :</span>
+									<span className=" font-medium">{formatIntegerToHour(tasksEstimationTimes)}</span>
 								</div>
 							</div>
-							<div className="flex gap-2 items-center text-red-500">
-								<PiWarningCircleFill className="text-2xl" />
-								<p>{t('timer.todayPlanSettings.WARNING_PLAN_ESTIMATION')}</p>
+							<div className="h-80">
+								<ScrollArea className="w-full h-full">
+									<ul className=" flex flex-col gap-2">
+										{sortedTasks.map((task, index) => (
+											<TaskCard
+												plan={plan}
+												key={index}
+												task={task}
+												setDefaultTask={setDefaultTask}
+												isDefaultTask={task.id == defaultTask?.id}
+											/>
+										))}
+									</ul>
+									<ScrollBar className="-pr-20" />
+								</ScrollArea>
 							</div>
 						</div>
+						<div className="flex gap-2 items-center text-sm h-6 text-red-500">
+							{warning && (
+								<>
+									<PiWarningCircleFill />
+									<span className=" text-xs">{warning}</span>
+								</>
+							)}
+						</div>
 					</div>
-					<div className="mt-6 flex justify-between items-center">
-						<Button
-							variant="outline"
-							type="submit"
-							className="py-3 px-5 rounded-md font-light text-md dark:text-white dark:bg-slate-700 dark:border-slate-600"
-							onClick={handleCloseModal}
-						>
-							{t('common.SKIP_ADD_LATER')}
-						</Button>
+				</div>
+				<div className=" flex justify-between items-center">
+					<Button
+						disabled={loading}
+						variant="outline"
+						type="submit"
+						className="py-3 px-5 rounded-md font-light text-md dark:text-white dark:bg-slate-700 dark:border-slate-600"
+						onClick={isRenderedInSoftFlow ? closeModalAndStartTimer : handleCloseModal}
+					>
+						{isRenderedInSoftFlow ? t('common.SKIP_ADD_LATER') : t('common.CANCEL')}
+					</Button>
+					<Button
+						disabled={warning || loading ? true : false}
+						variant="default"
+						type="submit"
+						className={clsxm(
+							'py-3 px-5 w-40 rounded-md font-light flex items-center justify-center text-md dark:text-white',
+							warning && 'bg-gray-400'
+						)}
+						onClick={handleSubmit}
+					>
+						{loading ? (
+							<SpinnerLoader variant="light" size={20} />
+						) : canStartWorking ? (
+							t('timer.todayPlanSettings.START_WORKING_BUTTON')
+						) : (
+							'Edit plan'
+						)}
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+
+	return (
+		<>
+			{isRenderedInSoftFlow ? (
+				<Modal isOpen={isOpen} closeModal={closeModalAndStartTimer} showCloseIcon={requirePlan ? false : true}>
+					<Card className="w-[36rem]" shadow="custom">
+						{content}
+					</Card>
+				</Modal>
+			) : (
+				content
+			)}
+
+			{defaultTask && (
+				<ActiveTaskHandlerModal
+					defaultPlannedTask={defaultTask}
+					open={isActiveTaskHandlerModalOpen}
+					closeModal={() => {
+						if (!isRenderedInSoftFlow) {
+							handleCloseModal();
+						}
+						closeActiveTaskHandlerModal();
+					}}
+				/>
+			)}
+		</>
+	);
+}
+
+/**
+ * ----------------------------------------------------------------
+ * 		--------- Search / Add / Create task input -----------
+ * ----------------------------------------------------------------
+ */
+
+interface ISearchTaskInputProps {
+	selectedPlan: IDailyPlan;
+	setShowSearchInput: Dispatch<SetStateAction<boolean>>;
+	setDefaultTask: Dispatch<SetStateAction<ITeamTask | null>>;
+	defaultTask: ITeamTask | null;
+}
+
+/**
+ * Search task input
+ *
+ * @param {Object} props - The props object
+ * @param {string} props.selectedPlan - The selected plan
+ * @param {Dispatch<SetStateAction<boolean>>} props.setShowSearchInput - A setter for (showing / hiding) the input
+ * @param {Dispatch<SetStateAction<ITeamTask>>} props.setDefaultTask - A function that sets default planned task
+ * @param {ITeamTask} props.defaultTask - The default planned task
+ *
+ * @returns The Search input component
+ */
+function SearchTaskInput(props: ISearchTaskInputProps) {
+	const { selectedPlan, setShowSearchInput, defaultTask, setDefaultTask } = props;
+	const { tasks: teamTasks, createTask } = useTeamTasks();
+	const { taskStatus } = useTaskStatus();
+	const [taskName, setTaskName] = useState('');
+	const [tasks, setTasks] = useState<ITeamTask[]>([]);
+	const [createTaskLoading, setCreateTaskLoading] = useState(false);
+	const [isSearchInputFocused, setIsSearchInputFocused] = useState(false);
+	const t = useTranslations();
+
+	// The ref for the popover button (rendered as an input)
+	const searchInputRef = useRef<HTMLButtonElement>(null);
+
+	const isTaskPlanned = useCallback(
+		(taskId: string) => {
+			return selectedPlan?.tasks?.some((task) => task.id == taskId);
+		},
+		[selectedPlan.tasks]
+	);
+
+	useEffect(() => {
+		setTasks(
+			teamTasks
+				.filter((task) => task.title.toLowerCase().includes(taskName.toLowerCase()))
+				// Put the unplanned tasks at the top of the list.
+				.sort((task1, task2) => {
+					if (isTaskPlanned(task1.id) && !isTaskPlanned(task2.id)) {
+						return 1;
+					} else if (!isTaskPlanned(task1.id) && isTaskPlanned(task2.id)) {
+						return -1;
+					} else {
+						return 0;
+					}
+				})
+		);
+	}, [isTaskPlanned, selectedPlan.tasks, taskName, teamTasks]);
+
+	const handleCreateTask = useCallback(async () => {
+		try {
+			setCreateTaskLoading(true);
+			if (taskName.trim().length < 5) return;
+			await createTask({
+				taskName: taskName.trim(),
+				status: taskStatus[0].name,
+				taskStatusId: taskStatus[0].id,
+				issueType: 'Bug' // TODO: Let the user choose the issue type
+			});
+		} catch (error) {
+			console.log(error);
+		} finally {
+			setCreateTaskLoading(false);
+		}
+	}, [createTask, taskName, taskStatus]);
+
+	/**
+	 * Focus on the search input when the popover is mounted.
+	 */
+	useEffect(() => {
+		searchInputRef.current?.focus();
+	}, []);
+
+	return (
+		<Popover className={clsxm('relative z-20 w-full')}>
+			<div className="w-full flex flex-col gap-2 items-start">
+				<span className="text-sm">Select or create task for the plan</span>
+				<div className="w-full flex gap-3 h-[3rem]">
+					<Popover.Button
+						placeholder={'Select or create task for the plan'}
+						className={clsxm(
+							'bg-light--theme-light dark:bg-dark--theme-light dark:text-white',
+							'input-border',
+							'py-2 px-4 rounded-[10px]',
+							'text-sm outline-none ',
+							'h-[50px] w-full',
+							'font-light tracking-tight',
+							'h-full z-50 w-full px-3 focus:outline-none'
+						)}
+						required
+						as="input"
+						ref={searchInputRef}
+						onChange={(e) => setTaskName(e.target.value)}
+						onFocus={() => setIsSearchInputFocused(true)}
+						value={taskName}
+					/>
+					<button
+						onClick={() => {
+							setShowSearchInput(false);
+						}}
+						className="h-full shrink-0 rounded-lg border w-10 flex items-center justify-center"
+					>
+						<Tooltip label={t('common.CLOSE')}>
+							<Cross2Icon className="text-xl cursor-pointer" />
+						</Tooltip>
+					</button>
+				</div>
+			</div>
+
+			<Popover.Panel static={isSearchInputFocused} className={clsxm('absolute mt-1  w-full')}>
+				{tasks.length ? (
+					<Card shadow="custom" className="h-[25rem] border shadow-lg !p-3">
+						<ScrollArea className="w-full h-full">
+							<ul className="w-full h-full flex flex-col gap-2">
+								{tasks.map((task, index) => (
+									<li key={index}>
+										<TaskCard
+											viewListMode={isTaskPlanned(task.id) ? 'planned' : 'searched'}
+											task={task}
+											plan={selectedPlan}
+											setDefaultTask={setDefaultTask}
+											isDefaultTask={task.id == defaultTask?.id}
+										/>
+									</li>
+								))}
+							</ul>
+							<ScrollBar className="-pr-20" />
+						</ScrollArea>
+					</Card>
+				) : (
+					<Card shadow="custom" className="shadow-lg border z-40 !rounded !p-2">
 						<Button
-							variant="default"
-							type="submit"
-							className="py-3 px-5 rounded-md font-light text-md dark:text-white"
-							onClick={handleSubmit}
+							disabled={createTaskLoading || taskName.trim().length < 5}
+							onClick={handleCreateTask}
+							className="w-full h-full min-h-12"
 						>
-							{t('timer.todayPlanSettings.START_WORKING_BUTTON')}
+							{createTaskLoading ? <SpinnerLoader variant="light" size={20} /> : 'Create Task'}
 						</Button>
-					</div>
-				</div>
-			</Card>
-		</Modal>
+					</Card>
+				)}
+			</Popover.Panel>
+		</Popover>
 	);
 }
 
+/**
+ * ----------------------------------------------------------------
+ * 		-------------------- TASK CARD -----------------------
+ * ----------------------------------------------------------------
+ */
+
 interface ITaskCardProps {
 	task: ITeamTask;
+	setDefaultTask: Dispatch<SetStateAction<ITeamTask | null>>;
+	isDefaultTask: boolean;
+	plan: IDailyPlan;
+	viewListMode?: 'planned' | 'searched';
 }
 
-function TaskCard({ task }: ITaskCardProps) {
-	const { setActiveTask, activeTeamTask } = useTeamTasks();
+function TaskCard(props: ITaskCardProps) {
+	const { task, plan, viewListMode = 'planned', isDefaultTask, setDefaultTask } = props;
+	const { getTaskById } = useTeamTasks();
+	const { addTaskToPlan } = useDailyPlan();
+	const [addToPlanLoading, setAddToPlanLoading] = useState(false);
+	const isTaskRenderedInTodayPlan =
+		new Date(Date.now()).toLocaleDateString('en') == new Date(plan.date).toLocaleDateString('en');
+	const {
+		isOpen: isTaskDetailsModalOpen,
+		closeModal: closeTaskDetailsModal,
+		openModal: openTaskDetailsModal
+	} = useModal();
+
+	const handleOpenTaskDetailsModal = useCallback(() => {
+		// Update the detailed task state
+		getTaskById(task.id);
+		openTaskDetailsModal();
+	}, [getTaskById, openTaskDetailsModal, task.id]);
+
+	const t = useTranslations();
+
+	/**
+	 * The function that adds the task to the selected plan
+	 */
+	const handleAddTask = useCallback(async () => {
+		try {
+			setAddToPlanLoading(true);
+
+			if (plan.id) await addTaskToPlan({ taskId: task.id }, plan.id);
+		} catch (error) {
+			console.log(error);
+		} finally {
+			setAddToPlanLoading(false);
+		}
+	}, [addTaskToPlan, plan.id, task.id]);
 
 	return (
 		<Card
 			shadow="custom"
 			className={clsx(
-				'lg:flex  items-center justify-between py-3  md:px-4 hidden min-h-[4.5rem] w-[30rem] h-[4.5rem] dark:bg-[#1E2025] border-[0.05rem] dark:border-[#FFFFFF0D] relative !text-xs cursor-pointer',
-				task.id === activeTeamTask?.id && 'border-primary-light border-[0.15rem]'
+				'lg:flex  items-center justify-between py-3  md:px-4 hidden min-h-[4.5rem] w-full h-[4.5rem] dark:bg-[#1E2025] border-[0.05rem] dark:border-[#FFFFFF0D] relative !text-xs cursor-pointer',
+				isTaskRenderedInTodayPlan && isDefaultTask && 'border-primary-light border-[0.15rem]'
 			)}
-			onClick={() => setActiveTask(task)}
 		>
-			<div className="min-w-[48%] flex items-center h-full max-w-[50%]">
+			<div
+				onClick={() => {
+					if (isTaskRenderedInTodayPlan) {
+						setDefaultTask(task);
+						window && window.localStorage.setItem(DEFAULT_PLANNED_TASK_ID, task.id);
+					}
+				}}
+				className="min-w-[48%] flex items-center h-full max-w-[50%]"
+			>
 				<TaskNameInfoDisplay task={task} />
 			</div>
 			<VerticalSeparator />
 			<div className="h-full  grow flex items-center justify-end gap-2">
-				<div className="h-full flex items-center justify-center gap-1">
-					<span>Estimation :</span> <TaskEstimate _task={task} />
-				</div>
-				<span className="w-4 h-full flex items-center justify-center">
-					<ThreeCircleOutlineVerticalIcon className="  dark:text-[#B1AEBC]" />
-				</span>
+				{viewListMode === 'searched' ? (
+					<Button onClick={handleAddTask} variant="outline" className=" mon-h-12" type="button">
+						{addToPlanLoading ? <SpinnerLoader variant="dark" size={20} /> : 'Add'}
+					</Button>
+				) : (
+					<>
+						<div className="h-full flex items-center justify-center gap-1">
+							<span>{t('dailyPlan.ESTIMATED')} :</span> <TaskEstimate _task={task} />
+						</div>
+						<span className="w-4 h-full flex items-center justify-center">
+							<TaskCardActions
+								openTaskDetailsModal={handleOpenTaskDetailsModal}
+								selectedPlan={plan}
+								task={task}
+							/>
+						</span>
+					</>
+				)}
 			</div>
+			<TaskDetailsModal task={task} isOpen={isTaskDetailsModalOpen} closeModal={closeTaskDetailsModal} />
 		</Card>
 	);
 }
+
+interface ITaskCardActionsProps {
+	task: ITeamTask;
+	selectedPlan: IDailyPlan;
+	openTaskDetailsModal: () => void;
+}
+
+/**
+ * A Popover that contains task actions (view, edit, unplan)
+ *
+ * @param {object} props - The props object
+ * @param {ITeamTask} props.task - The task on which actions will be performed
+ * @param {IDailyPlan} props.selectedPlan - The currently selected plan
+ * @param {() => void} props.openTaskDetailsModal - A function that opens a task details modal
+ *
+ * @returns {JSX.Element} The Popover component.
+ */
+
+function TaskCardActions(props: ITaskCardActionsProps) {
+	const { task, selectedPlan, openTaskDetailsModal } = props;
+	const { user } = useAuthenticateUser();
+	const { futurePlans, todayPlan, removeTaskFromPlan, removeTaskFromPlanLoading } = useDailyPlan();
+
+	const otherPlanIds = useMemo(
+		() =>
+			[...futurePlans, ...todayPlan]
+				// Remove selected plan
+				.filter((plan) => plan.id! !== selectedPlan.id)
+				.filter((plan) => plan.tasks && plan.tasks.find((_task) => _task.id == task.id))
+				.map((plan) => plan.id!),
+		[futurePlans, selectedPlan.id, task.id, todayPlan]
+	);
+
+	/**
+	 * Unplan selected task
+	 */
+	const unplanSelectedDate = useCallback(
+		async (closePopover: () => void) => {
+			try {
+				selectedPlan?.id &&
+					(await removeTaskFromPlan({ taskId: task.id, employeeId: user?.employee.id }, selectedPlan?.id));
+
+				closePopover();
+			} catch (error) {
+				console.log(error);
+			}
+		},
+		[removeTaskFromPlan, selectedPlan.id, task.id, user?.employee.id]
+	);
+
+	return (
+		<Popover>
+			<Popover.Button className="w-4 h-full flex items-center justify-center border-none outline-none">
+				<ThreeCircleOutlineVerticalIcon className="  dark:text-[#B1AEBC]" />
+			</Popover.Button>
+
+			<Transition
+				enter="transition duration-100 ease-out"
+				enterFrom="transform scale-95 opacity-0"
+				enterTo="transform scale-100 opacity-100"
+				leave="transition duration-75 ease-out"
+				leaveFrom="transform scale-100 opacity-100"
+				leaveTo="transform scale-95 opacity-0"
+				className="absolute z-10 right-0 min-w-[110px]"
+			>
+				<Popover.Panel>
+					{({ close }) => {
+						return (
+							<Card shadow="custom" className=" shadow-xlcard  !p-3 !rounded-lg !border-2">
+								<ul className=" flex flex-col justify-end gap-3">
+									<li onClick={openTaskDetailsModal} className="">
+										View
+									</li>
+									<li className={clsxm('hover:font-semibold hover:transition-all')}>Edit</li>
+
+									{selectedPlan && selectedPlan.id && (
+										<li>
+											{otherPlanIds.length ? (
+												<UnplanTask
+													taskId={task.id}
+													selectedPlanId={selectedPlan.id}
+													planIds={[selectedPlan.id, ...otherPlanIds]}
+													closeActionPopover={close}
+												/>
+											) : (
+												<span
+													onClick={() => unplanSelectedDate(close)}
+													className={clsxm(
+														' text-red-600',
+														!removeTaskFromPlanLoading &&
+															' hover:font-semibold hover:transition-all'
+													)}
+												>
+													{removeTaskFromPlanLoading ? <SpinnerLoader size={10} /> : 'Unplan'}
+												</span>
+											)}
+										</li>
+									)}
+								</ul>
+							</Card>
+						);
+					}}
+				</Popover.Panel>
+			</Transition>
+		</Popover>
+	);
+}
+
+interface IUnplanTaskProps {
+	taskId: string;
+	selectedPlanId: string;
+	planIds: string[];
+	closeActionPopover: () => void;
+}
+
+/**
+ * A Popover that contains unplan options (unplan selected date, unplan all dates)
+ *
+ * @param {object} props - The props object
+ * @param {string} props.taskId - The task id
+ * @param {string} props.selectedPlanId - The currently selected plan id
+ * @param {string[]} [props.planIds] - Others plans's ids
+ * @param {() => void} props.closeActionPopover - The function to close the task card actions popover
+ *
+ * @returns {JSX.Element} The Popover component.
+ */
+
+function UnplanTask(props: IUnplanTaskProps) {
+	const { taskId, selectedPlanId, planIds, closeActionPopover } = props;
+	const { user } = useAuthenticateUser();
+	const { removeTaskFromPlan, removeTaskFromPlanLoading, removeManyTaskPlans, removeManyTaskFromPlanLoading } =
+		useDailyPlan();
+
+	/**
+	 * Unplan selected task
+	 */
+	const unplanSelectedDate = useCallback(
+		async (closePopover: () => void) => {
+			try {
+				await removeTaskFromPlan({ taskId: taskId, employeeId: user?.employee.id }, selectedPlanId);
+
+				closePopover();
+				// Close the task card actions popover as well
+				closeActionPopover();
+			} catch (error) {
+				console.log(error);
+			}
+		},
+		[closeActionPopover, removeTaskFromPlan, selectedPlanId, taskId, user?.employee.id]
+	);
+
+	/**
+	 * Unplan all tasks
+	 */
+	const unplanAll = useCallback(
+		async (closePopover: () => void) => {
+			try {
+				await removeManyTaskPlans({ plansIds: planIds, employeeId: user?.employee.id }, taskId);
+
+				closePopover();
+				// Close the task card actions popover as well
+				closeActionPopover();
+			} catch (error) {
+				console.log(error);
+			}
+		},
+		[closeActionPopover, planIds, removeManyTaskPlans, taskId, user?.employee.id]
+	);
+
+	return (
+		<Popover>
+			<Popover.Button>
+				<span className={clsxm(' text-red-600 hover:font-semibold hover:transition-all')}>Unplan</span>
+			</Popover.Button>
+
+			<Transition
+				enter="transition duration-100 ease-out"
+				enterFrom="transform scale-95 opacity-0"
+				enterTo="transform scale-100 opacity-100"
+				leave="transition duration-75 ease-out"
+				leaveFrom="transform scale-100 opacity-100"
+				leaveTo="transform scale-95 opacity-0"
+				className="absolute z-10 right-0 min-w-[110px]"
+			>
+				<Popover.Panel>
+					{({ close }) => {
+						return (
+							<Card
+								shadow="custom"
+								className=" shadow-xlcard  min-w-max w-[11rem] flex flex-col justify-end !p-0 !rounded-lg !border-2"
+							>
+								<ul className="p-3 w-full flex flex-col border justify-end gap-3">
+									<li
+										onClick={() => unplanSelectedDate(close)}
+										className={clsxm(
+											'shrink-0',
+											!removeTaskFromPlanLoading && 'hover:font-semibold hover:transition-all '
+										)}
+									>
+										{removeTaskFromPlanLoading ? (
+											<SpinnerLoader size={10} />
+										) : (
+											'Unplan selected date'
+										)}
+									</li>
+									<li
+										onClick={() => unplanAll(close)}
+										className={clsxm(
+											'shrink-0',
+											!removeManyTaskFromPlanLoading &&
+												'hover:font-semibold hover:transition-all '
+										)}
+									>
+										{removeManyTaskFromPlanLoading ? <SpinnerLoader size={10} /> : 'Unplan all'}
+									</li>
+								</ul>
+								<button
+									onClick={() => {
+										close();
+									}}
+									className={clsxm('w-full bg-primary/5 px-3 py-2')}
+								>
+									<span>Cancel</span>
+								</button>
+							</Card>
+						);
+					}}
+				</Popover.Panel>
+			</Transition>
+		</Popover>
+	);
+}
diff --git a/apps/web/lib/features/daily-plan/all-plans-modal.tsx b/apps/web/lib/features/daily-plan/all-plans-modal.tsx
new file mode 100644
index 000000000..55e648054
--- /dev/null
+++ b/apps/web/lib/features/daily-plan/all-plans-modal.tsx
@@ -0,0 +1,283 @@
+import { Card, Modal, NoData, Tooltip, VerticalSeparator } from 'lib/components';
+import { Dispatch, memo, SetStateAction, useCallback, useMemo, useState } from 'react';
+import { clsxm } from '@app/utils';
+import { Text } from 'lib/components';
+import { ChevronRightIcon } from 'assets/svg';
+import { AddTasksEstimationHoursModal } from './add-task-estimation-hours-modal';
+import { useDailyPlan } from '@app/hooks';
+import { Button } from '@components/ui/button';
+import { Calendar } from '@components/ui/calendar';
+import { IDailyPlan } from '@app/interfaces';
+import moment from 'moment';
+import { ValueNoneIcon } from '@radix-ui/react-icons';
+
+interface IAllPlansModal {
+	closeModal: () => void;
+	isOpen: boolean;
+}
+
+/**
+ * A modal that displays all the plans available to the user (Today, Tomorrow and Future).
+ *
+ *
+ * @param {Object} props - The props Object
+ * @param {boolean} props.open - If true open the modal otherwise close the modal
+ * @param {() => void} props.closeModal - A function to close the modal
+ *
+ * @returns {JSX.Element} The modal element
+ */
+export const AllPlansModal = memo(function AllPlansModal(props: IAllPlansModal) {
+	const { isOpen, closeModal } = props;
+	const [showCalendar, setShowCalendar] = useState(false);
+	const [showCustomPlan, setShowCustomPlan] = useState(false);
+	const [customDate, setCustomDate] = useState<Date>();
+	const { futurePlans, myDailyPlans } = useDailyPlan();
+
+	// Utility function for checking if two dates are the same
+	const isSameDate = useCallback(
+		(date1: Date, date2: Date) =>
+			new Date(date1).toLocaleDateString('en') === new Date(date2).toLocaleDateString('en'),
+		[]
+	);
+
+	// Memoize today, tomorrow, and future plans
+	const todayPlan = useMemo(
+		() => myDailyPlans.items.find((plan) => isSameDate(plan.date, moment().toDate())),
+		[isSameDate, myDailyPlans.items]
+	);
+
+	const tomorrowPlan = useMemo(
+		() => myDailyPlans.items.find((plan) => isSameDate(plan.date, moment().add(1, 'days').toDate())),
+		[isSameDate, myDailyPlans.items]
+	);
+
+	const selectedFuturePlan = useMemo(
+		() => customDate && myDailyPlans.items.find((plan) => isSameDate(plan.date, customDate)),
+		[isSameDate, myDailyPlans.items, customDate]
+	);
+
+	// Handle modal close
+	const handleCloseModal = useCallback(() => {
+		closeModal();
+	}, [closeModal]);
+
+	// Define tabs for plan selection
+	const tabs = useMemo(() => ['Today', 'Tomorrow', 'Future'], []);
+
+	// State to track the active tab
+	const [selectedTab, setSelectedTab] = useState(tabs[0]);
+
+	// Handle tab switching
+	const handleTabClick = (tab: string) => {
+		setSelectedTab(tab);
+		setShowCalendar(tab === 'Future');
+		setShowCustomPlan(false);
+	};
+
+	// Determine which plan to display based on the selected tab
+	const plan = useMemo(() => {
+		switch (selectedTab) {
+			case 'Today':
+				return todayPlan;
+			case 'Tomorrow':
+				return tomorrowPlan;
+			case 'Future':
+				return selectedFuturePlan;
+			default:
+				return undefined;
+		}
+	}, [selectedTab, todayPlan, tomorrowPlan, selectedFuturePlan]);
+	return (
+		<Modal isOpen={isOpen} closeModal={handleCloseModal} className={clsxm('w-[36rem]')}>
+			<Card className="w-full  h-full overflow-hidden" shadow="custom">
+				<div className="w-full flex flex-col gap-3 ">
+					<div className="relative w-full h-12  flex items-center justify-center">
+						{selectedTab === 'Future' && showCustomPlan && (
+							<Tooltip label="Go back to the calendar">
+								<button
+									onClick={() => {
+										setShowCustomPlan(false);
+										setShowCalendar(true);
+									}}
+									className=" absolute left-0 top-1/2 -translate-y-1/2 flex items-center gap-3"
+								>
+									<span className="rotate-180">
+										<ChevronRightIcon className="w-4  h-4 stroke-[#B1AEBC]" />
+									</span>
+									<span>Back</span>
+								</button>
+							</Tooltip>
+						)}
+
+						<Text.Heading as="h3" className="uppercase text-center">
+							{selectedTab == 'Future'
+								? showCustomPlan && selectedFuturePlan
+									? `PLAN FOR ${new Date(selectedFuturePlan.date).toLocaleDateString('en-GB')}`
+									: `${selectedTab} PLAN`
+								: `${selectedTab}'S PLAN`}
+						</Text.Heading>
+					</div>
+					<div className="w-full h-12 flex items-center">
+						<ul className="w-full flex items-center gap-3">
+							{tabs.map((tab, index) => (
+								<li
+									key={index}
+									className={`flex justify-center gap-4 items-center hover:text-primary cursor-pointer ${selectedTab === tab ? 'text-primary font-medium' : ''}`}
+									onClick={() => handleTabClick(tab)}
+								>
+									<span>{tab}</span>
+									{index + 1 < tabs.length && <VerticalSeparator className="w-full" />}
+								</li>
+							))}
+						</ul>
+					</div>
+
+					<div className="w-full flex   items-center justify-center h-[34rem]">
+						{selectedTab === 'Future' && showCalendar ? (
+							<div className="w-full h-full flex-col flex items-center justify-between">
+								<div className="w-full grow">
+									<div className="w-full h-full flex flex-col gap-4 items-center justify-center">
+										<p className=" text-sm font-medium">Select a date to be able to see a plan</p>
+										<div className="p-3 border flex  items-center  justify-center rounded-md">
+											<FuturePlansCalendar
+												futurePlans={futurePlans}
+												selectedFuturePlan={customDate}
+												setSelectedFuturePlan={setCustomDate}
+											/>
+										</div>
+									</div>
+								</div>
+
+								<div className="flex items-center justify-between h-14 w-full">
+									<Button
+										variant="outline"
+										type="submit"
+										className="py-3 px-5 rounded-md font-light text-md dark:text-white dark:bg-slate-700 dark:border-slate-600"
+										onClick={handleCloseModal}
+									>
+										Cancel
+									</Button>
+									<Button
+										disabled={!selectedFuturePlan}
+										variant="default"
+										type="submit"
+										className={clsxm('py-3 px-5 rounded-md font-light text-md dark:text-white')}
+										onClick={() => {
+											setShowCalendar(false);
+											setShowCustomPlan(true);
+										}}
+									>
+										Select
+									</Button>
+								</div>
+							</div>
+						) : (
+							<>
+								{plan ? (
+									<AddTasksEstimationHoursModal
+										plan={plan}
+										tasks={plan.tasks ?? []}
+										isRenderedInSoftFlow={false}
+										isOpen={isOpen}
+										closeModal={handleCloseModal}
+									/>
+								) : (
+									<NoData component={<ValueNoneIcon />} text="Plan not found " />
+								)}
+							</>
+						)}
+					</div>
+				</div>
+			</Card>
+		</Modal>
+	);
+});
+
+/**
+ * -------------------------------------------------------
+ * 		----------------- Calendar ------------------
+ * -------------------------------------------------------
+ */
+
+interface ICalendarProps {
+	setSelectedFuturePlan: Dispatch<SetStateAction<Date | undefined>>;
+	selectedFuturePlan: Date | undefined;
+	futurePlans: IDailyPlan[];
+}
+
+/**
+ * The component tha handles the selection of a future plan
+ *
+ * @param {Object} props - The props object
+ * @param {Dispatch<SetStateAction<IDailyPlan>>} props.setSelectedFuturePlan - A function that set the selected plan
+ * @param {IDailyPlan} props.selectedFuturePlan - The selected plan
+ */
+const FuturePlansCalendar = memo(function FuturePlansCalendar(props: ICalendarProps) {
+	const { futurePlans, selectedFuturePlan, setSelectedFuturePlan } = props;
+
+	const sortedFuturePlans = useMemo(
+		() =>
+			futurePlans
+				.filter(
+					(plan) =>
+						new Date(plan.date).toLocaleDateString('en') !==
+						new Date(moment().add(1, 'days').toDate()).toLocaleDateString('en')
+				)
+				.sort((plan1, plan2) => (new Date(plan1.date).getTime() < new Date(plan2.date).getTime() ? 1 : -1)),
+		[futurePlans]
+	);
+
+	/**
+	 * A helper function that checks if a given date has not a plan
+	 *
+	 * @param {Date} date - The date to check
+	 *
+	 * @returns {boolean} true if the date has a plan, false otherwise
+	 */
+	const isDateUnplanned = useCallback(
+		(dateToCheck: Date) => {
+			return !futurePlans
+				// Start from the day after tomorrow (Tomorrow has a tab)
+				.filter(
+					(plan) =>
+						new Date(plan.date).toLocaleDateString('en') !==
+						new Date(moment().add(1, 'days').toDate()).toLocaleDateString('en')
+				)
+				.map((plan) => new Date(plan.date))
+				.some(
+					(date) => new Date(date).toLocaleDateString('en') == new Date(dateToCheck).toLocaleDateString('en')
+				);
+		},
+		[futurePlans]
+	);
+
+	return (
+		<Calendar
+			mode="single"
+			captionLayout="dropdown"
+			selected={selectedFuturePlan ? new Date(selectedFuturePlan) : undefined}
+			onSelect={(date) => {
+				if (date) {
+					setSelectedFuturePlan(date);
+				}
+			}}
+			initialFocus
+			disabled={isDateUnplanned}
+			modifiers={{
+				booked: sortedFuturePlans?.map((plan) => new Date(plan.date))
+			}}
+			modifiersClassNames={{
+				booked: clsxm(
+					'relative after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-1.5 after:h-1.5 after:bg-primary after:rounded-full'
+				),
+				selected: clsxm('bg-primary text-white !rounded-full')
+			}}
+			fromMonth={new Date(sortedFuturePlans?.[0]?.date ?? Date.now())}
+			toMonth={new Date(sortedFuturePlans?.[sortedFuturePlans?.length - 1]?.date ?? Date.now())}
+			fromYear={new Date(sortedFuturePlans?.[0]?.date ?? Date.now())?.getFullYear()}
+			toYear={new Date(sortedFuturePlans?.[sortedFuturePlans?.length - 1]?.date ?? Date.now())?.getFullYear()}
+		/>
+	);
+});
+
+FuturePlansCalendar.displayName = 'FuturePlansCalendar';
diff --git a/apps/web/lib/features/daily-plan/task-details-modal.tsx b/apps/web/lib/features/daily-plan/task-details-modal.tsx
new file mode 100644
index 000000000..26bc2c00c
--- /dev/null
+++ b/apps/web/lib/features/daily-plan/task-details-modal.tsx
@@ -0,0 +1,41 @@
+import { Card, Modal } from 'lib/components';
+import { useCallback } from 'react';
+import { clsxm } from '@app/utils';
+import { ITeamTask } from '@app/interfaces';
+import { TaskDetailsComponent } from '@app/[locale]/task/[id]/component';
+import { ScrollArea, ScrollBar } from '@components/ui/scroll-bar';
+
+interface ITaskDetailsModalProps {
+	closeModal: () => void;
+	isOpen: boolean;
+	task: ITeamTask;
+}
+
+/**
+ * A Big Modal that shows task details
+ *
+ * @param {Object} props - The props Object
+ * @param {boolean} props.open - If true open the modal otherwise close the modal
+ * @param {() => void} props.closeModal - A function to close the modal
+ * @param {ITeamTask} props.task - The task to show details about
+ *
+ * @returns {JSX.Element} The modal element
+ */
+export function TaskDetailsModal(props: ITaskDetailsModalProps) {
+	const { isOpen, closeModal, task } = props;
+
+	const handleCloseModal = useCallback(() => {
+		closeModal();
+	}, [closeModal]);
+
+	return (
+		<Modal isOpen={isOpen} closeModal={handleCloseModal} className={clsxm('w-[90vw] h-[90vh]')}>
+			<Card className="w-full h-full pt-12 overflow-hidden" shadow="custom">
+				<ScrollArea className="w-full h-full">
+					<TaskDetailsComponent task={task} />
+					<ScrollBar className="-pr-20" />
+				</ScrollArea>
+			</Card>
+		</Modal>
+	);
+}
diff --git a/apps/web/lib/features/index.ts b/apps/web/lib/features/index.ts
index 81fec7bd4..4a5e8f9cb 100644
--- a/apps/web/lib/features/index.ts
+++ b/apps/web/lib/features/index.ts
@@ -39,3 +39,4 @@ export * from './position/position-item';
 
 
 export * from './integrations/calendar/setup-full-calendar'
+export * from './multiple-select'
diff --git a/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx
index 0d31fde8a..298209b20 100644
--- a/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx
@@ -6,6 +6,7 @@ import { HeadTimeSheet } from '@app/[locale]/calendar/component'
 import { statusOptions, timesheetCalendar } from './helper-calendar'
 import { StatusBadge } from './confirm-change-status'
 import { RiDeleteBinLine } from "react-icons/ri";
+import { useModal } from '@app/hooks'
 
 
 interface ISetupTimeSheetProps {
@@ -13,12 +14,19 @@ interface ISetupTimeSheetProps {
 }
 
 export function SetupTimeSheet({ timesheet }: ISetupTimeSheetProps) {
-
+    const {
+        isOpen,
+        openModal,
+        closeModal
+    } = useModal();
     return (
         <div className='flex flex-col overflow-hidden py-[32px]'>
             <div className='flex flex-col w-full'>
                 <div className='border border-gray-100 dark:border-gray-700 w-full'></div>
-                <HeadTimeSheet timesheet={timesheet} />
+                <HeadTimeSheet timesheet={timesheet}
+                    closeModal={closeModal}
+                    isOpen={isOpen}
+                    openModal={openModal} />
             </div>
             <div className='flex flex-col h-[780px] border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-dark--theme-light p-4 shadow-lg shadow-gray-100  dark:shadow-gray-700'>
                 <div className='w-full pb-3 flex items-center gap-x-4 justify-between'>
diff --git a/apps/web/lib/features/integrations/calendar/time-sheet-filter-popover.tsx b/apps/web/lib/features/integrations/calendar/time-sheet-filter-popover.tsx
index 5c6d8f5da..d441894e2 100644
--- a/apps/web/lib/features/integrations/calendar/time-sheet-filter-popover.tsx
+++ b/apps/web/lib/features/integrations/calendar/time-sheet-filter-popover.tsx
@@ -1,104 +1,136 @@
-import { useState } from "react";
 import { useOrganizationTeams, useTeamTasks } from "@app/hooks";
 import { Button } from "@components/ui/button"
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from "@components/ui/popover"
-import { SettingFilterIcon } from "assets/svg"
-import { SelectItems } from "lib/components";
+import { Modal } from "lib/components";
 import { statusOptions } from "@app/constants";
+import { MultiSelect } from "lib/components/custom-select/multi-select";
+import { Input } from "@components/ui/input";
+interface TimeSheetFilterProps {
+    isOpen: boolean,
+    closeModal: () => void
+}
 
-
-export function TimeSheetFilter() {
-
-    const { teams, activeTeam } = useOrganizationTeams();
-    const { activeTeamTask, tasks } = useTeamTasks();
-    const [status, setStatus] = useState('');
-    const [taskId, setTaskId] = useState<string>('');
-    const [teamId, setTeamId] = useState<string>('');
-    const [membersId, setMembersId] = useState('')
-
-
+export function TimeSheetFilter({ closeModal, isOpen }: TimeSheetFilterProps) {
+    const { activeTeam } = useOrganizationTeams();
+    const { tasks } = useTeamTasks();
+    // const [taskId, setTaskId] = useState<ITeamTask | ITeamTask[] | null>([]);
     return (
-        <Popover>
-            <PopoverTrigger asChild>
-                <Button
-                    className='flex items-center justify-center h-10 rounded-lg bg-white dark:bg-dark--theme-light gap-x-3 border dark:border-gray-700 hover:bg-white' >
-                    <SettingFilterIcon className="text-gray-700 dark:text-white w-3.5" strokeWidth="1.8" />
-                    <div className="gap-x-2 flex items-center w-full">
-                        <span className="text-gray-700 dark:text-white">Filter</span>
-                        <div className="bg-gray-700 dark:bg-white h-6 w-6 rounded-full flex items-center  justify-center text-whiten dark:text-gray-700">
-                            <span>6</span>
-                        </div>
-                    </div>
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-[430px] shadow">
-                <div className="w-full flex flex-col gap-4">
-                    <div className="flex items-center justify-center">
-                        <h4 className="font-bold leading-none text-[20px] ">Select Filter</h4>
-                    </div>
-                    <div className="grid gap-3">
+        <>
+            <Modal
+                isOpen={isOpen}
+                closeModal={closeModal}
+                title={"Filters"}
+                className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl !w-[350px]  md:w-40 md:min-w-[24rem] h-[auto] justify-start shadow-xl"
+                titleClass="font-bold"
+            >
+                <div className="w-full flex flex-col">
+                    <div className="grid gap-5">
 
                         <div className="">
-                            <label className="block text-gray-500 mb-1">
-                                Team<span className="text-[#de5505e1] ml-1">*</span>
+                            <label className="block text-gray-600 mb-1 text-sm">
+                                <span className="text-[12px]">Project</span><span className="text-[#de5505e1] ml-1 text-sm">*</span>
                             </label>
-                            <SelectItems
-                                defaultValue={activeTeam}
-                                items={teams}
-                                onValueChange={(team) => setTeamId(team ? team.id : '')}
-                                itemId={(team) => (team ? team.id : '')}
-                                itemToString={(team) => (team ? team.name : teamId)}
-                                triggerClassName="border-slate-100 dark:border-slate-600"
+                            <MultiSelect
+                                items={activeTeam?.members ?? []}
+                                itemToString={(members) => (members ? members.employee.fullName : '')}
+                                itemId={(item) => item.id}
+                                onValueChange={(selectedItems) => console.log(selectedItems)}
+                                multiSelect={true} // Enable multi-select
+                                triggerClassName="dark:border-gray-700"
+
                             />
                         </div>
                         <div className="">
-                            <label className="block text-gray-500 mb-1">
-                                Employee<span className="text-[#de5505e1] ml-1">*</span>
+                            <label className="block text-gray-600 mb-1 text-sm">
+                                <span className="text-[12px]">Employee</span><span className="text-[#de5505e1] ml-1 text-sm">*</span>
                             </label>
-                            <SelectItems
+                            <MultiSelect
                                 items={activeTeam?.members ?? []}
-                                onValueChange={(members) => setMembersId(members ? members.id : '')}
-                                itemId={(members) => (members ? members.id : membersId)}
                                 itemToString={(members) => (members ? members.employee.fullName : '')}
-                                triggerClassName="border-slate-100 dark:border-slate-600"
+                                itemId={(item) => item.id}
+                                onValueChange={(selectedItems) => console.log(selectedItems)}
+                                multiSelect={true} // Enable multi-select
+                                triggerClassName="dark:border-gray-700"
+
                             />
                         </div>
                         <div className="">
-                            <label className="block text-gray-500 mb-1">
-                                Status<span className="text-[#de5505e1] ml-1">*</span>
+                            <label className="block text-gray-600 mb-1 text-sm">
+                                <span className="text-[12px]">Status</span><span className="text-[#de5505e1] ml-1 text-sm">*</span>
                             </label>
-                            <SelectItems
+                            <MultiSelect
                                 items={statusOptions}
-                                onValueChange={(value) => setStatus(value.value ? value.value : status)}
-                                itemId={(value) => value.label}
-                                itemToString={(value) => (value.label)}
-                                triggerClassName="border-slate-100 dark:border-slate-600"
+                                itemToString={(status) => (status ? status.value : '')}
+                                itemId={(item) => item.value}
+                                onValueChange={(selectedItems) => console.log(selectedItems)}
+                                multiSelect={true} // Enable multi-select
+                                triggerClassName="dark:border-gray-700"
+
                             />
                         </div>
                         <div className="">
-                            <label className="block text-gray-500 mb-1">
-                                Task<span className="text-[#de5505e1] ml-1">*</span>
+                            <label className="block text-gray-600 mb-1 text-sm">
+                                <span className="text-[12px]">Task</span><span className="text-[#de5505e1] ml-1 text-sm">*</span>
                             </label>
-                            <SelectItems
-                                defaultValue={activeTeamTask}
+                            <MultiSelect
                                 items={tasks}
-                                onValueChange={(task) => setTaskId(task ? task.id : taskId)}
+                                onValueChange={(task) => task}
                                 itemId={(task) => (task ? task.id : '')}
                                 itemToString={(task) => (task ? task.title : '')}
-                                triggerClassName="border-slate-100 dark:border-slate-600"
+                                multiSelect={true} // Enable multi-select
+                                triggerClassName="dark:border-gray-700"
+
+                            />
+                        </div>
+                        <div className="">
+                            <label className="block text-gray-600 mb-1 text-sm">
+                                <span className="text-[12px]">Activity Level</span><span className="text-[#de5505e1] ml-1 text-sm">*</span>
+                            </label>
+                            <MultiSelect
+                                items={activeTeam?.members ?? []}
+                                itemToString={(members) => (members ? members.employee.fullName : '')}
+                                itemId={(item) => item.id}
+                                onValueChange={(selectedItems) => console.log(selectedItems)}
+                                multiSelect={true} // Enable multi-select
+                                triggerClassName="dark:border-gray-700"
                             />
                         </div>
-                        <Button
-                            className='flex items-center justify-center h-10 rounded-lg bg-primary dark:bg-primary-light dark:text-gray-300' >
-                            <span>Add Filter</span>
-                        </Button>
+                        <div className="">
+                            <label className="block text-gray-600 mb-1 text-sm">
+                                <span className="text-[12px]">Worked hours</span><span className="text-[#de5505e1] ml-1 text-sm">*</span>
+                            </label>
+                            <div className="flex items-center w-full justify-between gap-x-4">
+                                <Input
+                                    className="border w-full dark:border-gray-700"
+                                    placeholder="Time"
+                                    required
+                                    value=""
+                                    name="from"
+                                />
+                                <span>to</span>
+                                <Input
+                                    className="border w-full dark:border-gray-700"
+                                    placeholder="Time"
+                                    required
+                                    value=""
+                                    name="to"
+                                />
+                            </div>
+
+                        </div>
+                        <div className="flex items-center justify-between gap-x-4 w-full">
+                            <Button
+                                variant={'outline'}
+                                className='flex items-center text-sm justify-center h-10 w-full rounded-lg  dark:text-gray-300' >
+                                <span className="text-sm">Clear Filter</span>
+                            </Button>
+                            <Button
+                                className='flex items-center text-sm justify-center h-10 w-full rounded-lg bg-primary dark:bg-primary-light dark:text-gray-300' >
+                                <span className="text-sm">Apply Filter</span>
+                            </Button>
+                        </div>
                     </div>
                 </div>
-            </PopoverContent>
-        </Popover>
+            </Modal>
+        </>
     )
 }
diff --git a/apps/web/lib/features/manual-time/add-manual-time-modal.tsx b/apps/web/lib/features/manual-time/add-manual-time-modal.tsx
index c2b4ee861..faf7c9506 100644
--- a/apps/web/lib/features/manual-time/add-manual-time-modal.tsx
+++ b/apps/web/lib/features/manual-time/add-manual-time-modal.tsx
@@ -14,6 +14,7 @@ import { IAddManualTimeRequest } from '@app/interfaces/timer/ITimerLogs';
 import { cn } from 'lib/utils';
 import { CalendarDays } from 'lucide-react';
 import { IoTime } from 'react-icons/io5';
+import { Item, ManageOrMemberComponent, getNestedValue } from './manage-member-component';
 
 /**
  * Interface for the properties of the `AddManualTimeModal` component.
@@ -29,11 +30,12 @@ import { IoTime } from 'react-icons/io5';
 interface IAddManualTimeModalProps {
 	isOpen: boolean;
 	params: "AddManuelTime" | "AddTime";
+	timeSheetStatus?: "ManagerTimesheet" | "TeamMemberTimesheet",
 	closeModal: () => void;
 }
 
 export function AddManualTimeModal(props: IAddManualTimeModalProps) {
-	const { closeModal, isOpen, params } = props;
+	const { closeModal, isOpen, params, timeSheetStatus } = props;
 	const t = useTranslations();
 	const [isBillable, setIsBillable] = useState<boolean>(false);
 	const [description, setDescription] = useState<string>('');
@@ -45,7 +47,6 @@ export function AddManualTimeModal(props: IAddManualTimeModalProps) {
 	const [team, setTeam] = useState<IOrganizationTeamList>();
 	const [taskId, setTaskId] = useState<string>('');
 	const [timeDifference, setTimeDifference] = useState<string>('');
-	const [memberId, setMemberId] = useState<string>('')
 	const { activeTeamTask, tasks, activeTeam } = useTeamTasks();
 	const { teams } = useOrganizationTeams();
 
@@ -141,6 +142,56 @@ export function AddManualTimeModal(props: IAddManualTimeModalProps) {
 		}
 	}, [addManualTimeLoading, closeModal, timeLog]);
 
+
+	const memberItemsLists = {
+		'Project': activeTeam?.projects,
+		'Employee': activeTeam?.members,
+		'Task': tasks,
+	};
+	const selectedValues = {
+		'Teams': null,
+		'Members': null,
+		"Task": null
+	};
+	const fields = [
+		{
+			label: 'Project',
+			placeholder: 'Select a project',
+			isRequired: true,
+			valueKey: 'id',
+			displayKey: 'name',
+			element: 'Project'
+		},
+		...(timeSheetStatus === 'ManagerTimesheet' ?
+			[{
+				label: t('manualTime.EMPLOYEE'),
+				placeholder: 'Select an employee',
+				isRequired: true,
+				valueKey: 'id',
+				displayKey: 'employee.fullName',
+				element: 'Employee'
+			}] : []),
+		{
+			label: t('manualTime.TASK'),
+			placeholder: 'Select a Task',
+			isRequired: true,
+			valueKey: 'id',
+			displayKey: 'title',
+			element: 'Task'
+		}
+	];
+
+
+
+
+	const handleSelectedValuesChange = (values: { [key: string]: Item | null }) => {
+		console.log(values);
+	};
+
+	const handleChange = (field: string, selectedItem: Item | null) => {
+		console.log(`Field: ${field}, Selected Item:`, selectedItem);
+	};
+
 	return (
 		<Modal
 			isOpen={isOpen}
@@ -237,50 +288,19 @@ export function AddManualTimeModal(props: IAddManualTimeModalProps) {
 					</div>
 				</div>
 
-				<div className="">
-					<label className="block text-gray-500 mb-1">
-						{t('manualTime.TEAM')}<span className="text-[#de5505e1] ml-1">*</span>
-					</label>
-					<SelectItems
-						defaultValue={activeTeam!}
-						items={teams}
-						onValueChange={(team) => setTeam(team)}
-						itemId={(team) => (team ? team.id : '')}
-						itemToString={(team) => (team ? team.name : '')}
-						triggerClassName="border-gray-300 dark:border-slate-600"
-					/>
-				</div>
 
 				{
 					params === 'AddManuelTime' ? (
 						<>
-
-							<div className="">
-								<label className="block text-gray-500 mb-1">
-									{t('manualTime.EMPLOYEE')}<span className="text-[#de5505e1] ml-1">*</span>
-								</label>
-								<SelectItems
-									items={activeTeam?.members ?? []}
-									onValueChange={(member) => setMemberId(member ? member.id : memberId)}
-									itemId={(member) => (member ? member.id : memberId)}
-									itemToString={(member) => (member ? member.employee.fullName : '')}
-									triggerClassName="border-gray-300 dark:border-slate-600"
-								/>
-							</div>
-
-							<div className="">
-								<label className="block text-gray-500 mb-1">
-									{t('manualTime.TASK')}<span className="text-[#de5505e1] ml-1">*</span>
-								</label>
-								<SelectItems
-									items={manualTimeReasons.map((reason) => t(`manualTime.reasons.${reason}`))}
-									onValueChange={(reason) => setReason(reason)}
-									itemId={(reason) => reason}
-									defaultValue={t('manualTime.reasons.DEFAULT')}
-									itemToString={(reason) => reason}
-									triggerClassName="border-gray-300 dark:border-slate-600"
-								/>
-							</div>
+							<ManageOrMemberComponent
+								fields={fields}
+								itemsLists={memberItemsLists}
+								selectedValues={selectedValues}
+								onSelectedValuesChange={handleSelectedValuesChange}
+								handleChange={handleChange}
+								itemToString={(item, displayKey) => getNestedValue(item, displayKey) || ''}
+								itemToValue={(item, valueKey) => getNestedValue(item, valueKey) || ''}
+							/>
 							<div className="flex flex-col">
 								<label className="block text-gray-500 shrink-0">{t('manualTime.DESCRIPTION')} ({t('manualTime.OPTIONAL')})</label>
 								<textarea
@@ -290,10 +310,23 @@ export function AddManualTimeModal(props: IAddManualTimeModalProps) {
 									className="w-full resize-none p-2 grow border border-gray-300 dark:border-slate-600 dark:bg-dark--theme-light rounded-md h-32"
 								/>
 							</div>
+
 						</>
 					) : (
 						<>
-
+							<div className="">
+								<label className="block text-gray-500 mb-1">
+									{t('manualTime.TEAM')}<span className="text-[#de5505e1] ml-1">*</span>
+								</label>
+								<SelectItems
+									defaultValue={activeTeam!}
+									items={teams}
+									onValueChange={(team) => setTeam(team)}
+									itemId={(team) => (team ? team.id : '')}
+									itemToString={(team) => (team ? team.name : '')}
+									triggerClassName="border-gray-300 dark:border-slate-600"
+								/>
+							</div>
 							<div className="">
 								<label className="block text-gray-500 mb-1">
 									{t('manualTime.TASK')}<span className="text-[#de5505e1] ml-1">*</span>
diff --git a/apps/web/lib/features/manual-time/manage-member-component.tsx b/apps/web/lib/features/manual-time/manage-member-component.tsx
new file mode 100644
index 000000000..427b27623
--- /dev/null
+++ b/apps/web/lib/features/manual-time/manage-member-component.tsx
@@ -0,0 +1,139 @@
+import { CustomCombobox } from "lib/components/combobox";
+
+
+/**
+ * Represents an item with dynamic properties.
+ * @interface Item
+ */
+export interface Item {
+    [key: string]: any; // Allows for dynamic properties
+}
+
+/**
+ * Props interface for the ManageOrMemberComponent component.
+ * @template T - The type of items in the component.
+ */
+interface ManageOrMemberComponentProps<T extends Item> {
+    /**
+     * An array of field definitions for the component.
+     * Each field specifies the label, placeholder, whether it's required, and keys for value and display.
+     * @type {Object[]}
+     * @property {string} label - The label for the field.
+     * @property {string} placeholder - The placeholder text for the field.
+     * @property {boolean} isRequired - Indicates if the field is required.
+     * @property {string} valueKey - The key to extract the value of the item.
+     * @property {string} displayKey - The key to extract the display value of the item.
+     */
+    fields: {
+        label: string;
+        element: string,
+        placeholder: string;
+        isRequired: boolean;
+        valueKey: string; // Key for extracting the item's value
+        displayKey: string; // Key for extracting the item's display text
+    }[];
+
+    /**
+     * A dictionary of item lists for each field.
+     * The key corresponds to the field label, and the value is an array of items or undefined.
+     * @type {Object.<string, T[] | undefined>}
+     */
+    itemsLists: { [key: string]: T[] | undefined };
+
+    /**
+     * A dictionary of currently selected values for each field.
+     * The key corresponds to the field label, and the value is the selected item or null.
+     * @type {Object.<string, T | null>}
+     */
+    selectedValues: { [key: string]: T | null };
+
+    /**
+     * Callback function to handle changes in selected values.
+     * @param {Object.<string, T | null>} values - The updated selected values for each field.
+     */
+    onSelectedValuesChange: (values: { [key: string]: T | null }) => void;
+
+    /**
+     * Optional callback function to handle additional logic when a value changes.
+     * @param {string} field - The label of the field where the change occurred.
+     * @param {T | null} selectedItem - The newly selected item or null.
+     */
+    handleChange?: (field: string, selectedItem: T | null) => void;
+
+    /**
+     * Function to convert an item to a display string based on the displayKey.
+     * @param {T | null} item - The item to convert.
+     * @param {string} displayKey - The key to extract the display text.
+     * @returns {string} - The display string for the item.
+     */
+    itemToString: (item: T | null, displayKey: string) => string;
+
+    /**
+     * Function to convert an item to a value string based on the valueKey.
+     * @param {T | null} item - The item to convert.
+     * @param {string} valueKey - The key to extract the value.
+     * @returns {string} - The value string for the item.
+     */
+    itemToValue: (item: T | null, valueKey: string) => string;
+}
+
+/**
+ * A React component that renders a set of fields with dynamic item lists and handles user selections.
+ * @template T - The type of items in the component.
+ * @param {ManageOrMemberComponentProps<T>} props - The props for the component.
+ * @returns {JSX.Element} - The rendered component.
+ */
+export const ManageOrMemberComponent = <T extends Item>({
+    fields,
+    itemsLists,
+    selectedValues,
+    onSelectedValuesChange,
+    handleChange,
+    itemToString,
+    itemToValue,
+}: ManageOrMemberComponentProps<T>): JSX.Element => {
+
+    /**
+     * Internal handler for value changes.
+     * Calls the external handleChange function if provided, and updates the selected values.
+     * @param {string} field - The label of the field where the change occurred.
+     * @param {T | null} selectedItem - The newly selected item or null.
+     */
+    const handleInternalChange = (field: string, selectedItem: T | null) => {
+        if (handleChange) {
+            handleChange(field, selectedItem);
+        }
+        onSelectedValuesChange({
+            ...selectedValues,
+            [field]: selectedItem,
+        });
+    };
+
+    return (
+        <div>
+            {fields.map((field, index) => (
+                <div key={index} className="mb-4">
+                    <label className="block text-gray-600 mb-1 text-sm">
+                        <span className="text-[14px]">{field.label}</span>
+                        {field.isRequired && <span className="text-[#de5505e1] ml-1 text-sm">*</span>}
+                    </label>
+                    <CustomCombobox
+                        popoverWidth='w-full'
+                        buttonWidth='w-full'
+                        itemToString={(item) => itemToString(item, field.displayKey)}
+                        itemToValue={(item) => itemToValue(item, field.valueKey)}
+                        items={itemsLists[field.element] || []}
+                        onChangeValue={(selectedItem) => handleInternalChange(field.element, selectedItem)}
+                        placeholder={field.placeholder}
+                        selectedItem={selectedValues[field.element] || null}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+
+export const getNestedValue = (obj: any, key: string) => {
+    return key.split('.').reduce((o, i) => o && o[i], obj);
+};
diff --git a/apps/web/lib/features/multiple-select/index.tsx b/apps/web/lib/features/multiple-select/index.tsx
new file mode 100644
index 000000000..4e5b9f587
--- /dev/null
+++ b/apps/web/lib/features/multiple-select/index.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import {
+    Select,
+    SelectTrigger,
+    SelectValue,
+    SelectContent,
+    SelectItem,
+    SelectGroup,
+    SelectLabel,
+} from '@components/ui/select';
+import { Check } from 'lucide-react';
+
+type Option = {
+    label: string;
+    value: string;
+};
+
+interface MultipleSelectProps {
+    options: Option[];
+    selectedValues: string[];
+    onChange: (values: string[]) => void;
+    placeholder?: string;
+    label?: string;
+    setOpen: (_: any) => void;
+    open: boolean;
+}
+
+export function MultipleSelect({
+    options,
+    selectedValues,
+    onChange,
+    placeholder = 'Select options',
+    label,
+    open = false,
+    setOpen
+}: MultipleSelectProps) {
+
+    const handleSelect = (value: string) => {
+        const newSelectedValues = selectedValues.includes(value)
+            ? selectedValues.filter((v) => v !== value)
+            : [...selectedValues, value];
+
+        onChange(newSelectedValues);
+    };
+
+    return (
+        <div>
+            <Select open={open} onOpenChange={setOpen}>
+                <SelectTrigger
+                    className="w-64"
+                    onClick={() => setOpen(true)}
+                >
+                    <SelectValue>
+                        {selectedValues.length > 0
+                            ? selectedValues.join(', ')
+                            : placeholder}
+                    </SelectValue>
+                </SelectTrigger>
+                <SelectContent
+                    className="max-h-60 z-50"
+                    onClick={() => setOpen(true)}
+                >
+                    <SelectGroup>
+                        {label && <SelectLabel>{label}</SelectLabel>}
+                        {options.map((option) => (
+                            <SelectItem
+                                key={option.value}
+                                value={option.value}
+                                onClick={() => handleSelect(option.value)}
+                            >
+                                <div className="flex items-center">
+                                    <span>{option.label}</span>
+                                    {selectedValues.includes(option.value) && (
+                                        <Check className="ml-auto h-4 w-4 text-primary" />
+                                    )}
+                                </div>
+                            </SelectItem>
+                        ))}
+                    </SelectGroup>
+                </SelectContent>
+            </Select>
+        </div>
+    );
+}
diff --git a/apps/web/lib/features/task/task-estimate.tsx b/apps/web/lib/features/task/task-estimate.tsx
index 1251dc4d1..893a22348 100644
--- a/apps/web/lib/features/task/task-estimate.tsx
+++ b/apps/web/lib/features/task/task-estimate.tsx
@@ -134,7 +134,8 @@ export function TaskEstimate({
 					{!updateLoading ? (
 						editableMode ? (
 							<button
-								onClick={() => {
+								onClick={(e) => {
+									e.stopPropagation();
 									handleSubmit();
 									setEditableMode(false);
 								}}
diff --git a/apps/web/lib/features/team/invite/invite-form-modal.tsx b/apps/web/lib/features/team/invite/invite-form-modal.tsx
index 55fcdc111..634a9763d 100644
--- a/apps/web/lib/features/team/invite/invite-form-modal.tsx
+++ b/apps/web/lib/features/team/invite/invite-form-modal.tsx
@@ -9,20 +9,26 @@ import { BackButton, Button, Card, InputField, Modal, Text } from 'lib/component
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { InviteEmailDropdown } from './invite-email-dropdown';
+import { useToast } from '@components/ui/use-toast';
 
 export function InviteFormModal({ open, closeModal }: { open: boolean; closeModal: () => void }) {
 	const t = useTranslations();
-	const { inviteUser, inviteLoading } = useTeamInvitations();
+	const { inviteUser, inviteLoading, teamInvitations, resendTeamInvitation, resendInviteLoading } =
+		useTeamInvitations();
+
 	const [errors, setErrors] = useState<{
 		email?: string;
 		name?: string;
 	}>({});
+
 	const [selectedEmail, setSelectedEmail] = useState<IInviteEmail>();
 	const { workingEmployees } = useEmployee();
 	const [currentOrgEmails, setCurrentOrgEmails] = useState<IInviteEmail[]>([]);
 	const { activeTeam } = useOrganizationTeams();
 	const nameInputRef = useRef<HTMLInputElement>(null);
+	const { toast } = useToast();
 
+	const isLoading = inviteLoading || resendInviteLoading;
 
 	useEffect(() => {
 		if (activeTeam?.members) {
@@ -40,7 +46,6 @@ export function InviteFormModal({ open, closeModal }: { open: boolean; closeModa
 	}, [workingEmployees, workingEmployees.length, activeTeam]);
 
 	const handleAddNew = (email: string) => {
-
 		if (!email.includes('@')) {
 			email = `${email}@gmail.com`;
 		}
@@ -70,15 +75,45 @@ export function InviteFormModal({ open, closeModal }: { open: boolean; closeModa
 				return;
 			}
 
-			inviteUser(selectedEmail.title, form.get('name')?.toString() || selectedEmail.name || '')
-				.then(() => {
+			const existingInvitation = teamInvitations.find((invitation) => invitation.email === selectedEmail.title);
+
+			if (existingInvitation) {
+				resendTeamInvitation(existingInvitation.id).then(() => {
 					closeModal();
 
+					toast({
+						variant: 'default',
+						title: t('common.INVITATION_SENT'),
+						description: t('common.INVITATION_SENT_TO_USER', { email: selectedEmail.title }),
+						duration: 5 * 1000
+					});
+				});
+				return;
+			}
+
+			inviteUser(selectedEmail.title, form.get('name')?.toString() || selectedEmail.name || '')
+				.then(({ data }) => {
+					closeModal();
 					e.currentTarget.reset();
+
+					toast({
+						variant: 'default',
+						title: t('common.INVITATION_SENT'),
+						description: t('common.INVITATION_SENT_TO_USER', { email: selectedEmail.title }),
+						duration: 5 * 1000
+					});
 				})
 				.catch((err: AxiosError) => {
 					if (err.response?.status === 400) {
-						setErrors((err.response?.data as any)?.errors || {});
+						const data = err.response?.data as any;
+
+						if ('errors' in data) {
+							setErrors(data.errors || {});
+						}
+
+						if ('message' in data && Array.isArray(data.message)) {
+							setErrors({ email: data.message[0] });
+						}
 					}
 				});
 		},
@@ -127,7 +162,7 @@ export function InviteFormModal({ open, closeModal }: { open: boolean; closeModa
 						<div className="flex items-center justify-between w-full mt-3">
 							<BackButton onClick={closeModal} />
 
-							<Button type="submit" disabled={inviteLoading} loading={inviteLoading}>
+							<Button type="submit" disabled={isLoading} loading={isLoading}>
 								{t('pages.invite.SEND_INVITE')}
 							</Button>
 						</div>
diff --git a/apps/web/lib/features/team/user-team-block/index.tsx b/apps/web/lib/features/team/user-team-block/index.tsx
index 565173a7b..d3547b229 100644
--- a/apps/web/lib/features/team/user-team-block/index.tsx
+++ b/apps/web/lib/features/team/user-team-block/index.tsx
@@ -10,7 +10,7 @@ import { useTranslations } from 'next-intl';
 import { useRecoilValue } from 'recoil';
 import { TaskBlockInfo } from './task-info';
 import { UserBoxInfo } from './user-info';
-import { UserTeamCardMenu } from './user-team-card-menu';
+import { UserTeamCardMenu } from '../user-team-card/user-team-card-menu';
 import { TaskEstimateInfo } from '../user-team-card/task-estimate';
 
 type IUserTeamBlock = {
diff --git a/apps/web/lib/features/team/user-team-block/user-team-card-menu.tsx b/apps/web/lib/features/team/user-team-block/user-team-card-menu.tsx
deleted file mode 100644
index fc7e9cb62..000000000
--- a/apps/web/lib/features/team/user-team-block/user-team-card-menu.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-import { mergeRefs } from '@app/helpers';
-import { I_TeamMemberCardHook, I_TMCardTaskEditHook } from '@app/hooks';
-import { IClassName, ITeamTask } from '@app/interfaces';
-import { clsxm } from '@app/utils';
-import { Popover, Transition } from '@headlessui/react';
-import { Card, ConfirmDropdown, SpinnerLoader, Text } from 'lib/components';
-import { TaskUnOrAssignPopover } from 'lib/features/task/task-assign-popover';
-import { useCallback } from 'react';
-import { useTranslations } from 'next-intl';
-import { ThreeCircleOutlineVerticalIcon } from 'assets/svg';
-
-type Props = IClassName & {
-	memberInfo: I_TeamMemberCardHook;
-	edition: I_TMCardTaskEditHook;
-};
-
-export function UserTeamCardMenu(props: Props) {
-	return <DropdownMenu {...props} />;
-}
-
-function DropdownMenu({ edition, memberInfo }: Props) {
-	const { onAssignTask, onUnAssignTask, onRemoveMember } = useDropdownAction({
-		edition,
-		memberInfo
-	});
-
-	const t = useTranslations();
-	const loading = edition.loading || memberInfo.updateOTeamLoading;
-
-	const menu = [
-		{
-			name: t('common.EDIT_TASK'),
-			closable: true,
-			onClick: () => {
-				edition.task && edition.setEditMode(true);
-			},
-			active: (memberInfo.isAuthTeamManager || memberInfo.isAuthUser) && edition.task
-		},
-		{
-			name: t('common.ESTIMATE'),
-			closable: true,
-			onClick: () => {
-				edition.task && edition.setEstimateEditMode(true);
-			},
-			active: (memberInfo.isAuthTeamManager || memberInfo.isAuthUser) && edition.task
-		},
-		{
-			name: t('common.ASSIGN_TASK'),
-			action: 'assign',
-			onClick: onAssignTask,
-
-			active: (memberInfo.isAuthTeamManager || memberInfo.isAuthUser) && memberInfo.memberUnassignTasks.length > 0
-		},
-		{
-			name: t('common.UNASSIGN_TASK'),
-			action: 'unassign',
-			closable: true,
-			onClick: onUnAssignTask,
-
-			active: (memberInfo.isAuthTeamManager || memberInfo.isAuthUser) && !!memberInfo.memberTask
-		},
-		{
-			name: memberInfo.isTeamManager ? t('common.UNMAKE_A_MANAGER') : t('common.MAKE_A_MANAGER'),
-			// MAke or unmake member a manager
-			onClick: memberInfo.isTeamManager ? memberInfo.unMakeMemberManager : memberInfo.makeMemberManager,
-			active: memberInfo.isAuthTeamManager && !memberInfo.isAuthUser && !memberInfo.isTeamCreator,
-			closable: true
-		},
-		{
-			name: t('common.REMOVE'),
-			type: 'danger',
-			action: 'remove',
-			active: memberInfo.isAuthTeamManager && !memberInfo.isAuthUser && !memberInfo.isTeamOwner,
-			onClick: onRemoveMember
-		}
-	].filter((item) => item.active || item.active === undefined);
-
-	return (
-		<Popover
-			className="relative"
-			ref={mergeRefs([
-				edition.estimateEditIgnoreElement.ignoreElementRef,
-				edition.taskEditIgnoreElement.ignoreElementRef
-			])}
-		>
-			{!loading && (
-				<Popover.Button
-					disabled={menu.length === 0}
-					className={clsxm(
-						'flex items-center outline-none border-none',
-						menu.length === 0 && ['opacity-50 hidden']
-					)}
-				>
-					<ThreeCircleOutlineVerticalIcon className="w-6 dark:text-[#B1AEBC]" strokeWidth="1.4" />
-				</Popover.Button>
-			)}
-			{loading && <SpinnerLoader size={20} />}
-
-			<Transition
-				enter="transition duration-100 ease-out"
-				enterFrom="transform scale-95 opacity-0"
-				enterTo="transform scale-100 opacity-100"
-				leave="transition duration-75 ease-out"
-				leaveFrom="transform scale-100 opacity-100"
-				leaveTo="transform scale-95 opacity-0"
-				className="absolute z-30 -right-5 min-w-[13.125rem]"
-			>
-				<Popover.Panel>
-					{({ close }) => {
-						return (
-							<Card
-								shadow="custom"
-								className="shadow-xlcard !py-3 !px-4 dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] w-[10.75rem]"
-							>
-								<ul>
-									{menu.map((item, i) => {
-										const text = (
-											<Text
-												className={clsxm(
-													'font-normal whitespace-nowrap text-sm hover:font-semibold hover:transition-all',
-													item.type === 'danger' && ['text-red-500']
-												)}
-											>
-												{item.name}
-											</Text>
-										);
-
-										// When true show combobox component (AssignActionMenu)
-										const assignAction = item.action === 'assign';
-
-										const removeAction = item.action === 'remove';
-
-										return (
-											<li key={i}>
-												{assignAction && (
-													// Show only for item with combobox menu
-													<TaskUnOrAssignPopover
-														tasks={memberInfo.memberUnassignTasks}
-														onTaskClick={(task, closeCmbx) => {
-															// Can close all open combobox
-															item.onClick &&
-																item.onClick({
-																	task,
-																	closeCombobox1: closeCmbx,
-																	closeCombobox2: close
-																});
-														}}
-														userProfile={memberInfo.member}
-														usersTaskCreatedAssignTo={
-															memberInfo.member?.employeeId
-																? [{ id: memberInfo.member?.employeeId }]
-																: undefined
-														}
-													>
-														{text}
-													</TaskUnOrAssignPopover>
-												)}
-
-												{removeAction && (
-													<ConfirmDropdown
-														className="right-[110%] top-0"
-														onConfirm={() => {
-															item.onClick && item.onClick({ close });
-														}}
-													>
-														{text}
-													</ConfirmDropdown>
-												)}
-
-												{/* WHen hasn't an action */}
-												{!assignAction && !removeAction && (
-													<button
-														className="mb-2"
-														onClick={() => {
-															item.onClick && item.onClick({});
-															item.closable && close();
-														}}
-													>
-														{text}
-													</button>
-												)}
-											</li>
-										);
-									})}
-								</ul>
-							</Card>
-						);
-					}}
-				</Popover.Panel>
-			</Transition>
-		</Popover>
-	);
-}
-
-type IAssignCall = (params: { task?: ITeamTask; closeCombobox1?: () => void; closeCombobox2?: () => void }) => void;
-
-export function useDropdownAction({ edition, memberInfo }: Pick<Props, 'edition' | 'memberInfo'>) {
-	const onAssignTask: IAssignCall = useCallback(
-		({ task, closeCombobox1, closeCombobox2 }) => {
-			if (!task) return;
-
-			edition.setLoading(true);
-			memberInfo.assignTask(task).finally(() => edition.setLoading(false));
-
-			closeCombobox1 && closeCombobox1();
-			closeCombobox2 && closeCombobox2();
-		},
-		[edition, memberInfo]
-	);
-
-	const onUnAssignTask: IAssignCall = useCallback(() => {
-		if (!memberInfo.memberTask) return;
-		edition.setLoading(true);
-
-		memberInfo.unassignTask(memberInfo.memberTask).finally(() => edition.setLoading(false));
-	}, [memberInfo, edition]);
-
-	const onRemoveMember = useCallback(
-		({ close }: { close?: () => void }) => {
-			memberInfo.removeMemberFromTeam();
-			close && close();
-		},
-		[memberInfo]
-	);
-
-	return {
-		onAssignTask,
-		onUnAssignTask,
-		onRemoveMember
-	};
-}
diff --git a/apps/web/lib/features/team/user-team-card/user-team-card-menu.tsx b/apps/web/lib/features/team/user-team-card/user-team-card-menu.tsx
index a6dc4c52d..0e331efcd 100644
--- a/apps/web/lib/features/team/user-team-card/user-team-card-menu.tsx
+++ b/apps/web/lib/features/team/user-team-card/user-team-card-menu.tsx
@@ -1,13 +1,14 @@
 import { mergeRefs } from '@app/helpers';
-import { I_TeamMemberCardHook, I_TMCardTaskEditHook } from '@app/hooks';
+import { I_TeamMemberCardHook, I_TMCardTaskEditHook, useModal } from '@app/hooks';
 import { IClassName, ITeamTask } from '@app/interfaces';
 import { clsxm } from '@app/utils';
 import { Popover, Transition } from '@headlessui/react';
-import { Card, ConfirmDropdown, SpinnerLoader, Text } from 'lib/components';
+import { Card, ConfirmDropdown, HorizontalSeparator, SpinnerLoader, Text } from 'lib/components';
 import { TaskUnOrAssignPopover } from 'lib/features/task/task-assign-popover';
 import { useCallback } from 'react';
 import { useTranslations } from 'next-intl';
 import { ThreeCircleOutlineVerticalIcon } from 'assets/svg';
+import { AllPlansModal } from 'lib/features/daily-plan/all-plans-modal';
 
 type Props = IClassName & {
 	memberInfo: I_TeamMemberCardHook;
@@ -27,6 +28,8 @@ function DropdownMenu({ edition, memberInfo }: Props) {
 	const t = useTranslations();
 	const loading = edition.loading || memberInfo.updateOTeamLoading;
 
+	const { isOpen: isAllPlansModalOpen, closeModal: closeAllPlansModal, openModal: openAllPlansModal } = useModal();
+
 	const menu = [
 		{
 			name: t('common.EDIT_TASK'),
@@ -76,119 +79,133 @@ function DropdownMenu({ edition, memberInfo }: Props) {
 	].filter((item) => item.active || item.active === undefined);
 
 	return (
-		<Popover
-			className="relative w-full flex flex-col items-center justify-center"
-			ref={mergeRefs([
-				edition.estimateEditIgnoreElement.ignoreElementRef,
-				edition.taskEditIgnoreElement.ignoreElementRef
-			])}
-		>
-			{!loading && (
-				<Popover.Button
-					disabled={menu.length === 0}
-					className={clsxm(
-						'flex items-center outline-none border-none',
-						menu.length === 0 && ['opacity-50 hidden']
-					)}
-				>
-					<ThreeCircleOutlineVerticalIcon className="w-6 dark:text-[#B1AEBC]" strokeWidth="1.4" />
-				</Popover.Button>
-			)}
-			{loading && <SpinnerLoader size={20} />}
-
-			<Transition
-				enter="transition duration-100 ease-out"
-				enterFrom="transform scale-95 opacity-0"
-				enterTo="transform scale-100 opacity-100"
-				leave="transition duration-75 ease-out"
-				leaveFrom="transform scale-100 opacity-100"
-				leaveTo="transform scale-95 opacity-0"
-				className="absolute z-30 -right-5 min-w-[13.125rem]"
+		<>
+			<Popover
+				className="relative w-full flex flex-col items-center justify-center"
+				ref={mergeRefs([
+					edition.estimateEditIgnoreElement.ignoreElementRef,
+					edition.taskEditIgnoreElement.ignoreElementRef
+				])}
 			>
-				<Popover.Panel>
-					{({ close }) => {
-						return (
-							<Card
-								shadow="custom"
-								className="shadow-xlcard !py-3 !px-4 dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] w-[10.75rem]"
-							>
-								<ul>
-									{menu.map((item, i) => {
-										const text = (
-											<Text
+				{!loading && (
+					<Popover.Button
+						disabled={menu.length === 0}
+						className={clsxm(
+							'flex items-center outline-none border-none',
+							menu.length === 0 && ['opacity-50 hidden']
+						)}
+					>
+						<ThreeCircleOutlineVerticalIcon className="w-6 dark:text-[#B1AEBC]" strokeWidth="1.4" />
+					</Popover.Button>
+				)}
+				{loading && <SpinnerLoader size={20} />}
+
+				<Transition
+					enter="transition duration-100 ease-out"
+					enterFrom="transform scale-95 opacity-0"
+					enterTo="transform scale-100 opacity-100"
+					leave="transition duration-75 ease-out"
+					leaveFrom="transform scale-100 opacity-100"
+					leaveTo="transform scale-95 opacity-0"
+					className="absolute z-30 -right-5 min-w-[13.125rem]"
+				>
+					<Popover.Panel>
+						{({ close }) => {
+							return (
+								<Card
+									shadow="custom"
+									className="shadow-xlcard !py-3 !px-4 dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] w-[10.75rem]"
+								>
+									<ul className="flex flex-col items-start">
+										{menu.map((item, i) => {
+											const text = (
+												<Text
+													className={clsxm(
+														'font-normal whitespace-nowrap text-sm hover:font-semibold hover:transition-all',
+														item.type === 'danger' && ['text-red-500']
+													)}
+												>
+													{item.name}
+												</Text>
+											);
+
+											// When true show combobox component (AssignActionMenu)
+											const assignAction = item.action === 'assign';
+
+											const removeAction = item.action === 'remove';
+
+											return (
+												<li key={i}>
+													{assignAction && (
+														// Show only for item with combobox menu
+														<TaskUnOrAssignPopover
+															tasks={memberInfo.memberUnassignTasks}
+															onTaskClick={(task, closeCmbx) => {
+																// Can close all open combobox
+																item.onClick &&
+																	item.onClick({
+																		task,
+																		closeCombobox1: closeCmbx,
+																		closeCombobox2: close
+																	});
+															}}
+															userProfile={memberInfo.member}
+															usersTaskCreatedAssignTo={
+																memberInfo.member?.employeeId
+																	? [{ id: memberInfo.member?.employeeId }]
+																	: undefined
+															}
+														>
+															{text}
+														</TaskUnOrAssignPopover>
+													)}
+
+													{removeAction && (
+														<ConfirmDropdown
+															className="right-[110%] top-0"
+															onConfirm={() => {
+																item.onClick && item.onClick({ close });
+															}}
+														>
+															{text}
+														</ConfirmDropdown>
+													)}
+
+													{/* WHen hasn't an action */}
+													{!assignAction && !removeAction && (
+														<button
+															className="mb-2"
+															onClick={() => {
+																item.onClick && item.onClick({});
+																item.closable && close();
+															}}
+														>
+															{text}
+														</button>
+													)}
+												</li>
+											);
+										})}
+										<HorizontalSeparator className="-mx-2" />
+										<ul className="w-full py-1 flex flex-col items-start">
+											<button
+												onClick={openAllPlansModal}
 												className={clsxm(
-													'font-normal whitespace-nowrap text-sm hover:font-semibold hover:transition-all',
-													item.type === 'danger' && ['text-red-500']
+													'font-normal whitespace-nowrap text-sm hover:font-semibold hover:transition-all'
 												)}
 											>
-												{item.name}
-											</Text>
-										);
-
-										// When true show combobox component (AssignActionMenu)
-										const assignAction = item.action === 'assign';
-
-										const removeAction = item.action === 'remove';
-
-										return (
-											<li key={i}>
-												{assignAction && (
-													// Show only for item with combobox menu
-													<TaskUnOrAssignPopover
-														tasks={memberInfo.memberUnassignTasks}
-														onTaskClick={(task, closeCmbx) => {
-															// Can close all open combobox
-															item.onClick &&
-																item.onClick({
-																	task,
-																	closeCombobox1: closeCmbx,
-																	closeCombobox2: close
-																});
-														}}
-														userProfile={memberInfo.member}
-														usersTaskCreatedAssignTo={
-															memberInfo.member?.employeeId
-																? [{ id: memberInfo.member?.employeeId }]
-																: undefined
-														}
-													>
-														{text}
-													</TaskUnOrAssignPopover>
-												)}
-
-												{removeAction && (
-													<ConfirmDropdown
-														className="right-[110%] top-0"
-														onConfirm={() => {
-															item.onClick && item.onClick({ close });
-														}}
-													>
-														{text}
-													</ConfirmDropdown>
-												)}
-
-												{/* WHen hasn't an action */}
-												{!assignAction && !removeAction && (
-													<button
-														className="mb-2"
-														onClick={() => {
-															item.onClick && item.onClick({});
-															item.closable && close();
-														}}
-													>
-														{text}
-													</button>
-												)}
-											</li>
-										);
-									})}
-								</ul>
-							</Card>
-						);
-					}}
-				</Popover.Panel>
-			</Transition>
-		</Popover>
+												See Plan
+											</button>
+										</ul>
+									</ul>
+								</Card>
+							);
+						}}
+					</Popover.Panel>
+				</Transition>
+			</Popover>
+			<AllPlansModal isOpen={isAllPlansModalOpen} closeModal={closeAllPlansModal} />
+		</>
 	);
 }
 
diff --git a/apps/web/locales/ar.json b/apps/web/locales/ar.json
index 72d30d501..cd91c9370 100644
--- a/apps/web/locales/ar.json
+++ b/apps/web/locales/ar.json
@@ -200,7 +200,9 @@
 		"PAUSED": "متوقف",
 		"ONLINE": "متصل",
 		"SKIP_ADD_LATER": "أضف لاحقًا",
-		"DAILYPLAN": "مخطط"
+		"DAILYPLAN": "مخطط",
+		"INVITATION_SENT": "تم إرسال دعوة بنجاح",
+		"INVITATION_SENT_TO_USER": "تم إرسال دعوة فريق إلى {email}."
 	},
 	"hotkeys": {
 		"HELP": "مساعدة",
@@ -539,6 +541,7 @@
 	},
 	"task": {
 		"TITLE": "المهمة",
+		"TITLE_PLURAL": "مهام",
 		"ASSIGN_NEW_TASK": "تعيين مهمة جديدة",
 		"ASSIGNED_BY": "تم التعيين بواسطة",
 		"NO_ONE_FOR_TASK": "لم يتم تعيين أحد لهذه المهمة",
@@ -602,9 +605,22 @@
 		"COMPLETION": "إتمام",
 		"PLANNED_TASKS": "المهمة المخططة",
 		"ESTIMATED": "تقديري",
+		"TOTAL_ESTIMATED": "الإجمالي المقدر",
 		"TOTAL_TASK": "إجمالي المهام",
 		"DAILY_PLAN_DESCRIPTION": "'الخطة اليومية' تساعد في تنظيم عملية العمل لتحقيق أفضل النتائج",
-		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "لم تكن هذه المهمة مخططة لخطة اليوم. هل ترغب في إضافة شيء إلى الخطة؟"
+		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "لم تكن هذه المهمة مخططة لخطة اليوم. هل ترغب في إضافة شيء إلى الخطة؟",
+		"planned_tasks_popup": {
+			"warning": {
+				"PLANNED_TIME": "يرجى إضافة الوقت المخطط",
+				"TASKS_ESTIMATION": "يرجى تقدير جميع المهام",
+				"OPTIMIZE_PLAN": "الوقت المقدر الإجمالي يتجاوز الوقت المخطط له، يرجى تحسين خطتك",
+				"PLAN_MORE_TASKS": "يرجى إضافة المزيد من المهام إلى الخطة"
+			}
+		},
+		"chang_active_task_popup": {
+			"TITLE": "تغيير المهمة النشطة",
+			"MESSAGE": "أنت على وشك البدء في العمل على خطة اليوم {defaultPlannedTask}، لكن لا تزال لديك مهمة نشطة {activeTask}"
+		}
 	},
 	"form": {
 		"NAME_PLACEHOLDER": "أدخل اسمك",
diff --git a/apps/web/locales/bg.json b/apps/web/locales/bg.json
index bcf297253..c2b557261 100644
--- a/apps/web/locales/bg.json
+++ b/apps/web/locales/bg.json
@@ -200,7 +200,9 @@
 		"PAUSED": "Пауза",
 		"ONLINE": "Онлайн",
 		"SKIP_ADD_LATER": "Добави по-късно",
-		"DAILYPLAN": "Планирано"
+		"DAILYPLAN": "Планирано",
+		"INVITATION_SENT": "Покана е изпратена успешно",
+		"INVITATION_SENT_TO_USER": "Покана е изпратена на {email}."
 	},
 	"hotkeys": {
 		"HELP": "Помощ",
@@ -539,6 +541,7 @@
 	},
 	"task": {
 		"TITLE": "Задача",
+		"TITLE_PLURAL": "Задачи",
 		"ASSIGN_NEW_TASK": "Възлагане на нова задача",
 		"ASSIGNED_BY": "Възложено от",
 		"NO_ONE_FOR_TASK": "Няма отговорник за тази задача",
@@ -602,9 +605,22 @@
 		"COMPLETION": "Завършване",
 		"PLANNED_TASKS": "Планирана задача",
 		"ESTIMATED": "Оценено",
+		"TOTAL_ESTIMATED": "Общо предвидено",
 		"TOTAL_TASK": "Общо задачи",
 		"DAILY_PLAN_DESCRIPTION": "'Дневният план' помага да се организира работният процес за постигане на най-добри резултати",
-		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Тази задача не беше планирана за днешния план. Искате ли да добавите към плана?"
+		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Тази задача не беше планирана за днешния план. Искате ли да добавите към плана?",
+		"planned_tasks_popup": {
+			"warning": {
+				"PLANNED_TIME": "Моля, добавете планираното време",
+				"TASKS_ESTIMATION": "Моля, оценете всички задачи",
+				"OPTIMIZE_PLAN": "Общото прогнозирано време надвишава планираното време, моля оптимизирайте плана си",
+				"PLAN_MORE_TASKS": "Моля, добавете още задачи към плана"
+			}
+		},
+		"chang_active_task_popup": {
+			"TITLE": "Промяна на активната задача",
+			"MESSAGE": "Вие сте на път да започнете работа по днешния план {defaultPlannedTask}, но все още имате активна задача {activeTask}"
+		}
 	},
 	"form": {
 		"NAME_PLACEHOLDER": "Въведете името си",
diff --git a/apps/web/locales/de.json b/apps/web/locales/de.json
index 4cd09c041..d4f4703d2 100644
--- a/apps/web/locales/de.json
+++ b/apps/web/locales/de.json
@@ -200,7 +200,9 @@
 		"PAUSED": "Pausiert",
 		"ONLINE": "Online",
 		"SKIP_ADD_LATER": "Später hinzufügen",
-		"DAILYPLAN": "Plan dzienny"
+		"DAILYPLAN": "Plan dzienny",
+		"INVITATION_SENT": "Einladung erfolgreich gesendet",
+		"INVITATION_SENT_TO_USER": "Eine Teameinladung wurde an {email} gesendet."
 	},
 	"hotkeys": {
 		"HELP": "Hilfe",
@@ -539,6 +541,7 @@
 	},
 	"task": {
 		"TITLE": "Aufgabe",
+		"TITLE_PLURAL": "Aufgaben",
 		"ASSIGN_NEW_TASK": "Neue Aufgabe zuweisen",
 		"ASSIGNED_BY": "Zugewiesen von",
 		"NO_ONE_FOR_TASK": "Niemand dieser Aufgabe zugewiesen",
@@ -602,9 +605,22 @@
 		"COMPLETION": "Abschluss",
 		"PLANNED_TASKS": "Geplante Aufgabe",
 		"ESTIMATED": "Geschätzt",
+		"TOTAL_ESTIMATED": "Gesamtschätzung",
 		"TOTAL_TASK": "Gesamte Aufgaben",
 		"DAILY_PLAN_DESCRIPTION": "'Tagesplan' hilft, den Arbeitsprozess zu organisieren, um die besten Ergebnisse zu erzielen",
-		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Deze taak was niet gepland voor het plan van vandaag. Wilt u iets toevoegen aan het plan?"
+		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Deze taak was niet gepland voor het plan van vandaag. Wilt u iets toevoegen aan het plan?",
+		"planned_tasks_popup": {
+			"warning": {
+				"PLANNED_TIME": "Bitte fügen Sie die geplante Zeit hinzu",
+				"TASKS_ESTIMATION": "Bitte schätzen Sie alle Aufgaben",
+				"OPTIMIZE_PLAN": "Die geschätzte Gesamtzeit übersteigt Ihre geplante Zeit, bitte optimieren Sie Ihren Plan",
+				"PLAN_MORE_TASKS": "Bitte fügen Sie dem Plan mehr Aufgaben hinzu"
+			}
+		},
+		"chang_active_task_popup": {
+			"TITLE": "Aktive Aufgabe ändern",
+			"MESSAGE": "Sie sind dabei, mit dem heutigen Plan {defaultPlannedTask} zu beginnen, haben aber noch eine aktive Aufgabe {activeTask}"
+		}
 	},
 	"form": {
 		"NAME_PLACEHOLDER": "Ihren Namen eingeben",
diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
index 7790130f5..2404933a2 100644
--- a/apps/web/locales/en.json
+++ b/apps/web/locales/en.json
@@ -200,7 +200,9 @@
 		"PAUSED": "Paused",
 		"ONLINE": "Online",
 		"SKIP_ADD_LATER": "Add later",
-		"DAILYPLAN": "Planned"
+		"DAILYPLAN": "Planned",
+		"INVITATION_SENT": "Invitation Sent Successfully",
+		"INVITATION_SENT_TO_USER": "A team invitation has been sent to {email}."
 	},
 	"hotkeys": {
 		"HELP": "Help",
@@ -539,6 +541,7 @@
 	},
 	"task": {
 		"TITLE": "Task",
+		"TITLE_PLURAL": "Tasks",
 		"ASSIGN_NEW_TASK": "Assign new task",
 		"ASSIGNED_BY": "Assigned By",
 		"NO_ONE_FOR_TASK": "No One Assigned to this Task",
@@ -602,9 +605,22 @@
 		"COMPLETION": "Completion",
 		"PLANNED_TASKS": "Planned task",
 		"ESTIMATED": "Estimated",
+		"TOTAL_ESTIMATED": "Total Estimated",
 		"TOTAL_TASK": "Total tasks",
 		"DAILY_PLAN_DESCRIPTION": "'Daily Plan' helps organize the work process to achieve the best results",
-		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "This task was not planned for Today's plan. Would you like to add to the plan?"
+		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "This task was not planned for Today's plan. Would you like to add to the plan?",
+		"planned_tasks_popup": {
+			"warning": {
+				"PLANNED_TIME": "Please, add planned time",
+				"TASKS_ESTIMATION": "Please, estimate all tasks",
+				"OPTIMIZE_PLAN": "Total estimated time exceeds your Planned time, please optimize your plan",
+				"PLAN_MORE_TASKS": "Please add more tasks to the plan"
+			}
+		},
+		"chang_active_task_popup": {
+			"TITLE": "Change Active Task",
+			"MESSAGE": "You are about to start working on Today's plan {defaultPlannedTask}, but still have active {activeTask}"
+		}
 	},
 	"form": {
 		"NAME_PLACEHOLDER": "Enter your name",
diff --git a/apps/web/locales/es.json b/apps/web/locales/es.json
index 35d4845da..8a1aaa7bc 100644
--- a/apps/web/locales/es.json
+++ b/apps/web/locales/es.json
@@ -200,7 +200,9 @@
 		"PAUSED": "Pausado",
 		"ONLINE": "En línea",
 		"SKIP_ADD_LATER": "Agregar más tarde",
-		"DAILYPLAN": "Planificado"
+		"DAILYPLAN": "Planificado",
+		"INVITATION_SENT": "Invitación enviada con éxito",
+		"INVITATION_SENT_TO_USER": "Se ha enviado una invitación de equipo a {email}."
 	},
 	"hotkeys": {
 		"HELP": "Ayuda",
@@ -539,6 +541,7 @@
 	},
 	"task": {
 		"TITLE": "Tarea",
+		"TITLE_PLURAL": "Tareas",
 		"ASSIGN_NEW_TASK": "Asignar nueva tarea",
 		"ASSIGNED_BY": "Asignado por",
 		"NO_ONE_FOR_TASK": "Nadie asignado a esta tarea",
@@ -602,9 +605,22 @@
 		"COMPLETION": "Finalización",
 		"PLANNED_TASKS": "Tarea planificada",
 		"ESTIMATED": "Estimado",
+		"TOTAL_ESTIMATED": "Estimado total",
 		"TOTAL_TASK": "Tareas totales",
 		"DAILY_PLAN_DESCRIPTION": "'Plan diario' ayuda a organizar el proceso de trabajo para lograr los mejores resultados",
-		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Esta tarea no estaba prevista en el plan de hoy. ¿Te gustaría añadir algo al plan?"
+		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Esta tarea no estaba prevista en el plan de hoy. ¿Te gustaría añadir algo al plan?",
+		"planned_tasks_popup": {
+			"warning": {
+				"PLANNED_TIME": "Por favor, añade tiempo planificado",
+				"TASKS_ESTIMATION": "Por favor, estima todas las tareas",
+				"OPTIMIZE_PLAN": "El tiempo total estimado excede tu tiempo planificado, por favor optimiza tu plan",
+				"PLAN_MORE_TASKS": "Por favor, añade más tareas al plan"
+			}
+		},
+		"chang_active_task_popup": {
+			"TITLE": "Cambiar tarea activa",
+			"MESSAGE": "Estás a punto de comenzar a trabajar en el plan de hoy {defaultPlannedTask}, pero aún tienes la tarea activa {activeTask}"
+		}
 	},
 	"form": {
 		"NAME_PLACEHOLDER": "Ingresa tu nombre",
diff --git a/apps/web/locales/fr.json b/apps/web/locales/fr.json
index 36440d204..355ccf4da 100644
--- a/apps/web/locales/fr.json
+++ b/apps/web/locales/fr.json
@@ -200,7 +200,9 @@
 		"PAUSED": "En pause",
 		"ONLINE": "En ligne",
 		"SKIP_ADD_LATER": "Ajouter plus tard",
-		"DAILYPLAN": "Planifié"
+		"DAILYPLAN": "Planifié",
+		"INVITATION_SENT": "Invitation envoyée avec succès",
+		"INVITATION_SENT_TO_USER": "Une invitation a été envoyée à {email}."
 	},
 	"hotkeys": {
 		"HELP": "Aide",
@@ -539,6 +541,7 @@
 	},
 	"task": {
 		"TITLE": "Tâche",
+		"TITLE_PLURAL": "Tâches",
 		"ASSIGN_NEW_TASK": "Assigner une nouvelle tâche",
 		"ASSIGNED_BY": "Assigné par",
 		"NO_ONE_FOR_TASK": "Personne n'est assigné à cette tâche",
@@ -602,9 +605,22 @@
 		"COMPLETION": "Achèvement",
 		"PLANNED_TASKS": "Tâche planifiées",
 		"ESTIMATED": "Estimé",
+		"TOTAL_ESTIMATED": "Total estimé",
 		"TOTAL_TASK": "Tâches totales",
 		"DAILY_PLAN_DESCRIPTION": "'Plan quotidien' aide à organiser le processus de travail pour obtenir les meilleurs résultats",
-		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Cette tâche n'était pas prévue dans le planning d'aujourd'hui. Souhaitez-vous l'ajouter au planning ?"
+		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Cette tâche n'était pas prévue dans le planning d'aujourd'hui. Souhaitez-vous l'ajouter au planning ?",
+		"planned_tasks_popup": {
+			"warning": {
+				"PLANNED_TIME": "Veuillez ajouter le temps planifié",
+				"TASKS_ESTIMATION": "Veuillez estimer toutes les tâches",
+				"OPTIMIZE_PLAN": "Le temps total estimé dépasse votre temps planifié, veuillez optimiser votre plan",
+				"PLAN_MORE_TASKS": "Veuillez ajouter plus de tâches au plan"
+			}
+		},
+		"chang_active_task_popup": {
+			"TITLE": "Changer de tâche active",
+			"MESSAGE": "Vous êtes sur le point de commencer à travailler sur le plan d'aujourd'hui {defaultPlannedTask}, mais vous avez encore une tâche active {activeTask}"
+		}
 	},
 	"form": {
 		"NAME_PLACEHOLDER": "Entrez votre nom",
diff --git a/apps/web/locales/he.json b/apps/web/locales/he.json
index 80cd25ecb..67d706cd6 100644
--- a/apps/web/locales/he.json
+++ b/apps/web/locales/he.json
@@ -200,7 +200,9 @@
 		"PAUSED": "מושהה",
 		"ONLINE": "מחובר",
 		"SKIP_ADD_LATER": "הוסף מאוחר יותר",
-		"DAILYPLAN": "מְתוּכנָן"
+		"DAILYPLAN": "מְתוּכנָן",
+		"INVITATION_SENT": "ההזמנה נשלחה בהצלחה",
+		"INVITATION_SENT_TO_USER": "ההזמנה נשלחה ל{email}."
 	},
 	"hotkeys": {
 		"HELP": "עזרה",
@@ -539,6 +541,7 @@
 	},
 	"task": {
 		"TITLE": "משימה",
+		"TITLE_PLURAL": "משימות",
 		"ASSIGN_NEW_TASK": "הקצה משימה חדשה",
 		"ASSIGNED_BY": "הוקצה על ידי",
 		"NO_ONE_FOR_TASK": "אף אחד לא הוקצה למשימה זו",
@@ -602,9 +605,22 @@
 		"COMPLETION": "השלמה",
 		"PLANNED_TASKS": "משימה מתוכננת",
 		"ESTIMATED": "משוער",
+		"TOTAL_ESTIMATED": "הערכה כוללת",
 		"TOTAL_TASK": "סך כל המשימות",
 		"DAILY_PLAN_DESCRIPTION": "'תוכנית יומית' עוזרת לארגן את תהליך העבודה להשגת התוצאות הטובות ביותר",
-		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "משימה זו לא תוכננה עבור התוכנית של היום. האם תרצה להוסיף לתוכנית?"
+		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "משימה זו לא תוכננה עבור התוכנית של היום. האם תרצה להוסיף לתוכנית?",
+		"planned_tasks_popup": {
+			"warning": {
+				"PLANNED_TIME": "אנא הוסף זמן מתוכנן",
+				"TASKS_ESTIMATION": "אנא הערך את כל המשימות",
+				"OPTIMIZE_PLAN": "הזמן הכולל המשוער חורג מהזמן המתוכנן, אנא מיטב את התוכנית שלך",
+				"PLAN_MORE_TASKS": "אנא הוסף עוד משימות לתוכנית"
+			}
+		},
+		"chang_active_task_popup": {
+			"TITLE": "שנה משימה פעילה",
+			"MESSAGE": "אתה עומד להתחיל לעבוד על התוכנית של היום {defaultPlannedTask}, אבל עדיין יש לך משימה פעילה {activeTask}"
+		}
 	},
 	"form": {
 		"NAME_PLACEHOLDER": "הכנס את השם שלך",
diff --git a/apps/web/locales/it.json b/apps/web/locales/it.json
index bc7c6b3bc..6e51df61f 100644
--- a/apps/web/locales/it.json
+++ b/apps/web/locales/it.json
@@ -200,7 +200,9 @@
 		"PAUSED": "In Pausa",
 		"ONLINE": "Online",
 		"SKIP_ADD_LATER": "Aggiungi dopo",
-		"DAILYPLAN": "Pianificato"
+		"DAILYPLAN": "Pianificato",
+		"INVITATION_SENT": "Invito inviato con successo",
+		"INVITATION_SENT_TO_USER": "Un invito alla squadra è stato inviato a {email}."
 	},
 	"hotkeys": {
 		"HELP": "Aiuto",
@@ -539,6 +541,7 @@
 	},
 	"task": {
 		"TITLE": "Compito",
+		"TITLE_PLURAL": "Attività",
 		"ASSIGN_NEW_TASK": "Assegna nuovo compito",
 		"ASSIGNED_BY": "Assegnato da",
 		"NO_ONE_FOR_TASK": "Nessuno assegnato a questo compito",
@@ -602,9 +605,22 @@
 		"COMPLETION": "Completamento",
 		"PLANNED_TASKS": "Compito pianificato",
 		"ESTIMATED": "Stimato",
+		"TOTAL_ESTIMATED": "Totale Stimato",
 		"TOTAL_TASK": "Compiti totali",
 		"DAILY_PLAN_DESCRIPTION": "'Piano giornaliero' aiuta a organizzare il processo di lavoro per ottenere i migliori risultati",
-		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Questa attività non era pianificata per il piano di oggi. Vuoi aggiungerla al piano?"
+		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Questa attività non era pianificata per il piano di oggi. Vuoi aggiungerla al piano?",
+		"planned_tasks_popup": {
+			"warning": {
+				"PLANNED_TIME": "Per favore, aggiungi il tempo pianificato",
+				"TASKS_ESTIMATION": "Per favore, stima tutte le attività",
+				"OPTIMIZE_PLAN": "Il tempo totale stimato supera il tempo pianificato, per favore ottimizza il tuo piano",
+				"PLAN_MORE_TASKS": "Per favore, aggiungi più attività al piano"
+			}
+		},
+		"chang_active_task_popup": {
+			"TITLE": "Cambia Attività Attiva",
+			"MESSAGE": "Stai per iniziare a lavorare sul piano di oggi {defaultPlannedTask}, ma hai ancora un'attività attiva {activeTask}"
+		}
 	},
 	"form": {
 		"NAME_PLACEHOLDER": "Inserisci il tuo nome",
diff --git a/apps/web/locales/nl.json b/apps/web/locales/nl.json
index bce640e44..906620c98 100644
--- a/apps/web/locales/nl.json
+++ b/apps/web/locales/nl.json
@@ -200,7 +200,9 @@
 		"PAUSED": "Gepauzeerd",
 		"ONLINE": "Online",
 		"SKIP_ADD_LATER": "Later toevoegen",
-		"DAILYPLAN": "Gepland"
+		"DAILYPLAN": "Gepland",
+		"INVITATION_SENT": "Uitnodiging verzonden",
+		"INVITATION_SENT_TO_USER": "Een teamuitnodiging is verzonden naar {email}."
 	},
 	"hotkeys": {
 		"HELP": "Help",
@@ -539,6 +541,7 @@
 	},
 	"task": {
 		"TITLE": "Taak",
+		"TITLE_PLURAL": "Taken",
 		"ASSIGN_NEW_TASK": "Nieuwe taak toewijzen",
 		"ASSIGNED_BY": "Toegewezen door",
 		"NO_ONE_FOR_TASK": "Niemand toegewezen aan deze taak",
@@ -602,9 +605,22 @@
 		"COMPLETION": "Voltooiing",
 		"PLANNED_TASKS": "Geplande taak",
 		"ESTIMATED": "Geschat",
+		"TOTAL_ESTIMATED": "Totaal Geschat",
 		"TOTAL_TASK": "Totale taken",
 		"DAILY_PLAN_DESCRIPTION": "'Dagelijkse planning' helpt om het werkproces te organiseren om de beste resultaten te behalen",
-		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Diese Aufgabe war für den heutigen Plan nicht vorgesehen. Möchten Sie den Plan ergänzen?"
+		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Diese Aufgabe war für den heutigen Plan nicht vorgesehen. Möchten Sie den Plan ergänzen?",
+		"planned_tasks_popup": {
+			"warning": {
+				"PLANNED_TIME": "Voeg alstublieft de geplande tijd toe",
+				"TASKS_ESTIMATION": "Schat alstublieft alle taken in",
+				"OPTIMIZE_PLAN": "De totale geschatte tijd overschrijdt uw geplande tijd, optimaliseer uw plan alstublieft",
+				"PLAN_MORE_TASKS": "Voeg alstublieft meer taken aan het plan toe"
+			}
+		},
+		"chang_active_task_popup": {
+			"TITLE": "Actieve Taak Wijzigen",
+			"MESSAGE": "Je staat op het punt om te beginnen met het plan van vandaag {defaultPlannedTask}, maar hebt nog een actieve taak {activeTask}"
+		}
 	},
 	"form": {
 		"NAME_PLACEHOLDER": "Voer uw naam in",
diff --git a/apps/web/locales/pl.json b/apps/web/locales/pl.json
index fb7e6eb2c..e53b3b7c0 100644
--- a/apps/web/locales/pl.json
+++ b/apps/web/locales/pl.json
@@ -200,7 +200,9 @@
 		"PAUSED": "Wstrzymany",
 		"ONLINE": "Online",
 		"SKIP_ADD_LATER": "Dodaj później",
-		"DAILYPLAN": "Planowane"
+		"DAILYPLAN": "Planowane",
+		"INVITATION_SENT": "Zaproszenie wysłane",
+		"INVITATION_SENT_TO_USER": "Zaproszenie zespołu zostało wysłane do {email}."
 	},
 	"hotkeys": {
 		"HELP": "Pomoc",
@@ -539,6 +541,7 @@
 	},
 	"task": {
 		"TITLE": "Zadanie",
+		"TITLE_PLURAL": "Zadania",
 		"ASSIGN_NEW_TASK": "Przypisz nowe zadanie",
 		"ASSIGNED_BY": "Przypisane przez",
 		"NO_ONE_FOR_TASK": "Nikt nie jest przypisany do tego zadania",
@@ -602,9 +605,22 @@
 		"COMPLETION": "Ukończenie",
 		"PLANNED_TASKS": "Planowane zadanie",
 		"ESTIMATED": "Szacowany",
+		"TOTAL_ESTIMATED": "Całkowicie szacowane",
 		"TOTAL_TASK": "Łączna liczba zadań",
 		"DAILY_PLAN_DESCRIPTION": "'Plan dnia' pomaga zorganizować proces pracy, aby osiągnąć najlepsze wyniki",
-		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "To zadanie nie było zaplanowane na dzisiejszy plan. Czy chcesz dodać do planu?"
+		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "To zadanie nie było zaplanowane na dzisiejszy plan. Czy chcesz dodać do planu?",
+		"planned_tasks_popup": {
+			"warning": {
+				"PLANNED_TIME": "Proszę dodać planowany czas",
+				"TASKS_ESTIMATION": "Proszę oszacować wszystkie zadania",
+				"OPTIMIZE_PLAN": "Całkowity szacowany czas przekracza planowany czas, proszę zoptymalizować swój plan",
+				"PLAN_MORE_TASKS": "Proszę dodać więcej zadań do planu"
+			}
+		},
+		"chang_active_task_popup": {
+			"TITLE": "Zmień aktywne zadanie",
+			"MESSAGE": "Zaraz zaczniesz pracować nad planem na dziś {defaultPlannedTask}, ale wciąż masz aktywne zadanie {activeTask}"
+		}
 	},
 	"form": {
 		"NAME_PLACEHOLDER": "Wprowadź swoje imię",
diff --git a/apps/web/locales/pt.json b/apps/web/locales/pt.json
index da74d6566..f8f97c59e 100644
--- a/apps/web/locales/pt.json
+++ b/apps/web/locales/pt.json
@@ -200,7 +200,9 @@
 		"PAUSED": "Pausado",
 		"ONLINE": "Online",
 		"SKIP_ADD_LATER": "Adicionar depois",
-		"DAILYPLAN": "Planeado"
+		"DAILYPLAN": "Planeado",
+		"INVITATION_SENT": "Convite enviado com sucesso",
+		"INVITATION_SENT_TO_USER": "Um convite de equipe foi enviado para {email}."
 	},
 	"hotkeys": {
 		"HELP": "Ajuda",
@@ -539,6 +541,7 @@
 	},
 	"task": {
 		"TITLE": "Tarefa",
+		"TITLE_PLURAL": "Tarefas",
 		"ASSIGN_NEW_TASK": "Atribuir nova tarefa",
 		"ASSIGNED_BY": "Atribuído por",
 		"NO_ONE_FOR_TASK": "Ninguém atribuído a esta tarefa",
@@ -602,9 +605,22 @@
 		"COMPLETION": "Conclusão",
 		"PLANNED_TASKS": "Tarefa planejada",
 		"ESTIMATED": "Estimado",
+		"TOTAL_ESTIMATED": "Total Estimado",
 		"TOTAL_TASK": "Tarefas totais",
 		"DAILY_PLAN_DESCRIPTION": "'Plano diário' ajuda a organizar o processo de trabalho para obter os melhores resultados",
-		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Esta tarefa não foi planeada no plano de hoje. Gostaria de acrescentar ao plano?"
+		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Esta tarefa não foi planeada no plano de hoje. Gostaria de acrescentar ao plano?",
+		"planned_tasks_popup": {
+			"warning": {
+				"PLANNED_TIME": "Por favor, adicione o tempo planejado",
+				"TASKS_ESTIMATION": "Por favor, estime todas as tarefas",
+				"OPTIMIZE_PLAN": "O tempo total estimado excede o seu tempo planejado, por favor otimize seu plano",
+				"PLAN_MORE_TASKS": "Por favor, adicione mais tarefas ao plano"
+			}
+		},
+		"chang_active_task_popup": {
+			"TITLE": "Alterar Tarefa Ativa",
+			"MESSAGE": "Está prestes a começar a trabalhar no plano de hoje {defaultPlannedTask}, mas ainda tem a tarefa ativa {activeTask}"
+		}
 	},
 	"form": {
 		"NAME_PLACEHOLDER": "Digite seu nome",
diff --git a/apps/web/locales/ru.json b/apps/web/locales/ru.json
index 378875f87..23351cc4c 100644
--- a/apps/web/locales/ru.json
+++ b/apps/web/locales/ru.json
@@ -200,7 +200,9 @@
 		"PAUSED": "Приостановлено",
 		"ONLINE": "Онлайн",
 		"SKIP_ADD_LATER": "Добавить позже",
-		"DAILYPLAN": "Планируется"
+		"DAILYPLAN": "Планируется",
+		"INVITATION_SENT": "Приглашение отправлено успешно",
+		"INVITATION_SENT_TO_USER": "Приглашение к команде было отправлено на {email}."
 	},
 	"hotkeys": {
 		"HELP": "Помощь",
@@ -539,6 +541,7 @@
 	},
 	"task": {
 		"TITLE": "Задача",
+		"TITLE_PLURAL": "Задачи",
 		"ASSIGN_NEW_TASK": "Назначить новую задачу",
 		"ASSIGNED_BY": "Назначено",
 		"NO_ONE_FOR_TASK": "Никто не назначен на эту задачу",
@@ -602,9 +605,22 @@
 		"COMPLETION": "Завершение",
 		"PLANNED_TASKS": "Запланированная задача",
 		"ESTIMATED": "Оценочный",
+		"TOTAL_ESTIMATED": "Общая оценка",
 		"TOTAL_TASK": "Всего задач",
 		"DAILY_PLAN_DESCRIPTION": "'Ежедневный план' помогает организовать рабочий процесс для достижения наилучших результатов",
-		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Эта задача не была запланирована в плане на сегодня. Хотите добавить в план?"
+		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "Эта задача не была запланирована в плане на сегодня. Хотите добавить в план?",
+		"planned_tasks_popup": {
+			"warning": {
+				"PLANNED_TIME": "Пожалуйста, добавьте запланированное время",
+				"TASKS_ESTIMATION": "Пожалуйста, оцените все задачи",
+				"OPTIMIZE_PLAN": "Общее время оценки превышает запланированное время, пожалуйста, оптимизируйте ваш план",
+				"PLAN_MORE_TASKS": "Пожалуйста, добавьте больше задач в план"
+			}
+		},
+		"chang_active_task_popup": {
+			"TITLE": "Изменить активное задание",
+			"MESSAGE": "Вы собираетесь начать работу над сегодняшним планом {defaultPlannedTask}, но у вас еще есть активное задание {activeTask}"
+		}
 	},
 	"form": {
 		"NAME_PLACEHOLDER": "Введите ваше имя",
diff --git a/apps/web/locales/zh.json b/apps/web/locales/zh.json
index 67285f6ca..41eaf0ad4 100644
--- a/apps/web/locales/zh.json
+++ b/apps/web/locales/zh.json
@@ -200,7 +200,9 @@
 		"PAUSED": "暂停",
 		"ONLINE": "在线",
 		"SKIP_ADD_LATER": "稍后添加",
-		"DAILYPLAN": "計劃中"
+		"DAILYPLAN": "計劃中",
+		"INVITATION_SENT": "邀请已发送",
+		"INVITATION_SENT_TO_USER": "团队邀请已发送给 {email}。"
 	},
 	"hotkeys": {
 		"HELP": "帮助",
@@ -539,6 +541,7 @@
 	},
 	"task": {
 		"TITLE": "任务",
+		"TITLE_PLURAL": "任务",
 		"ASSIGN_NEW_TASK": "分配新任务",
 		"ASSIGNED_BY": "分配者",
 		"NO_ONE_FOR_TASK": "此任务未分配",
@@ -602,9 +605,22 @@
 		"COMPLETION": "完成度",
 		"PLANNED_TASKS": "计划任务",
 		"ESTIMATED": "预计",
+		"TOTAL_ESTIMATED": "总预计",
 		"TOTAL_TASK": "总任务",
 		"DAILY_PLAN_DESCRIPTION": "'每日计划' 有助于组织工作流程以实现最佳结果",
-		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "此任务未列入今日计划。要添加到计划中吗？"
+		"SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN": "此任务未列入今日计划。要添加到计划中吗？",
+		"planned_tasks_popup": {
+			"warning": {
+				"PLANNED_TIME": "请添加计划时间",
+				"TASKS_ESTIMATION": "请估算所有任务",
+				"OPTIMIZE_PLAN": "总预计时间超过您的计划时间，请优化您的计划",
+				"PLAN_MORE_TASKS": "请在计划中添加更多任务"
+			}
+		},
+		"chang_active_task_popup": {
+			"TITLE": "更改活动任务",
+			"MESSAGE": "您即将开始今天的计划 {defaultPlannedTask}，但仍有未完成的活动任务 {activeTask}"
+		}
 	},
 	"form": {
 		"NAME_PLACEHOLDER": "输入您的姓名",