diff --git a/components/pages/Goals/MainPage/store.ts b/components/pages/Goals/MainPage/store.ts
index 7e1f00f3..396a1fd9 100644
--- a/components/pages/Goals/MainPage/store.ts
+++ b/components/pages/Goals/MainPage/store.ts
@@ -5,6 +5,7 @@ import { BaseGoalsStore, GoalsModalsTypes } from "../stores/BaseGoalsStore";
 import { GoalDataExtended } from "../types";
 import { CreateGoalParams } from "../../../../stores/RootStore/Resources/GoalsStore";
 import { KeyboardEvent } from 'react';
+import { AnimationsStore } from '../../../../stores/AnimationsStore';
 
 export class GoalsStore extends BaseGoalsStore {
   keymap = {
@@ -73,6 +74,8 @@ export class GoalsStore extends BaseGoalsStore {
           await this.root.resources.goals.add({ goal, ...otherParams });
           await this.loadTaskList();
           this.modals.close();
+
+          AnimationsStore.displayFireworks();
         },
         onClose: this.modals.close,
       },
diff --git a/components/pages/Goals/components/GoalList/GoalItem/view.tsx b/components/pages/Goals/components/GoalList/GoalItem/view.tsx
index 1a50bbda..24a37184 100644
--- a/components/pages/Goals/components/GoalList/GoalItem/view.tsx
+++ b/components/pages/Goals/components/GoalList/GoalItem/view.tsx
@@ -68,6 +68,7 @@ export const GoalItemView = observer(function GoalItemView() {
           statusIconBottom={-0.5}
           statusIconRight={0.5}
           tabIndex={-1}
+          preventOnFocus
           onToggleOpen={store.handleEmojiPickerToggle}
           onNavigate={store.handleIconNavigate}
           onFocus={store.updateEditedGoal}
diff --git a/components/pages/Goals/components/GoalList/SpaceItem/index.tsx b/components/pages/Goals/components/GoalList/SpaceItem/index.tsx
index faa7f5d7..55cb9fed 100644
--- a/components/pages/Goals/components/GoalList/SpaceItem/index.tsx
+++ b/components/pages/Goals/components/GoalList/SpaceItem/index.tsx
@@ -45,7 +45,7 @@ export const SpaceItem = observer(function SpaceItem({ spaceId, goals }: Props)
         <chakra.div ml='2' w='calc(100% - var(--chakra-space-10))'>
           <EditableTitle
             widthByTitle
-            sharedProps={{ color: 'gray.700', fontWeight: 400, tabIndex: 0 }}
+            sharedProps={{ color: 'gray.700', fontWeight: 400, tabIndex: 0, maxW: 200 }}
             value={space.name}
             onSave={handleSpaceNameChange}
           />
diff --git a/components/pages/Goals/components/GoalList/store.ts b/components/pages/Goals/components/GoalList/store.ts
index ee2e19e0..177ab538 100644
--- a/components/pages/Goals/components/GoalList/store.ts
+++ b/components/pages/Goals/components/GoalList/store.ts
@@ -36,12 +36,12 @@ export class GoalListStore {
   };
 
   hotkeyHandlers = {
-    ON_RESET_FOCUSED_GOAL: (event) => {
-      event.preventDefault();
+    ON_RESET_FOCUSED_GOAL: () => {
       this.setFocusedGoalId(null);
     },
     ON_NAVIGATE: (event: KeyboardEvent) => {
       event.preventDefault();
+
       if (!this.focusedGoalId) {
         this.setFirstGoalAsFocused();
       } else if (!this.isFocusedGoalEditing && !this.isMenuOpenedForFocusedGoal) {
@@ -89,65 +89,73 @@ export class GoalListStore {
         }
       }
     },
-    START_GOAL_EDITING: (event) => {
+    START_GOAL_EDITING: (event: KeyboardEvent) => {
       if (!this.focusedGoalId) {
         return;
       }
 
       event.preventDefault();
+
       this.isFocusedGoalEditing = true;
       this.getGoalTitleElement(this.focusedGoalId).click();
     },
     ON_OPEN: (event: KeyboardEvent) => {
-      event.preventDefault();
       if (this.isGoalFocusedAndNotEditing && (event.key !== 'Enter' || !this.isMenuOpenedForFocusedGoal)) {
+        event.preventDefault();
+
         this.isCommandWithAltPressed = true;
         this.callbacks?.onOpenGoal(this.focusedGoalId, this.listBySpaces);
       }
     },
-    ON_DONE: (event) => {
-      event.preventDefault();
+    ON_DONE: (event: KeyboardEvent) => {
       if (this.isGoalFocusedAndNotEditing) {
+        event.preventDefault();
+
         this.isMenuOpenedForFocusedGoal = false;
         this.isCommandWithAltPressed = true;
         this.doneGoal(this.focusedGoal);
       }
     },
-    ON_WONT_DO: (event) => {
-      event.preventDefault();
+    ON_WONT_DO: (event: KeyboardEvent) => {
       if (this.isGoalFocusedAndNotEditing) {
+        event.preventDefault();
+
         this.isMenuOpenedForFocusedGoal = false;
         this.isCommandWithAltPressed = true;
         this.callbacks?.onWontDo(this.focusedGoal);
       }
     },
-    ON_CLONE: (event) => {
-      event.preventDefault();
+    ON_CLONE: (event: KeyboardEvent) => {
       if (this.isGoalFocusedAndNotEditing) {
+        event.preventDefault();
+
         this.isMenuOpenedForFocusedGoal = false;
         this.isCommandWithAltPressed = true;
         this.cloneGoal(this.focusedGoal);
       }
     },
-    ON_ARCHIVE: (event) => {
-      event.preventDefault();
+    ON_ARCHIVE: (event: KeyboardEvent) => {
       if (this.isGoalFocusedAndNotEditing) {
+        event.preventDefault();
+
         this.isMenuOpenedForFocusedGoal = false;
         this.isCommandWithAltPressed = true;
         this.archiveGoal(this.focusedGoal);
       }
     },
-    ON_DELETE: (event) => {
-      event.preventDefault();
+    ON_DELETE: (event: KeyboardEvent) => {
       if (this.isGoalFocusedAndNotEditing) {
+        event.preventDefault();
+
         this.isMenuOpenedForFocusedGoal = false;
         this.isCommandWithAltPressed = true;
         this.handleDeleteGoal(this.focusedGoalId);
       }
     },
-    QUICK_DELETE: async (event) => {
-      event.preventDefault();
+    QUICK_DELETE: async (event: KeyboardEvent) => {
       if (this.isGoalFocusedAndNotEditing) {
+        event.preventDefault();
+
         this.isMenuOpenedForFocusedGoal = false;
         await this.deleteGoal(this.focusedGoalId);
       }
diff --git a/components/pages/Goals/modals/GoalCreationModal/components/GoalCreationInformation.tsx b/components/pages/Goals/modals/GoalCreationModal/components/GoalCreationInformation.tsx
index dd07b715..66461db5 100644
--- a/components/pages/Goals/modals/GoalCreationModal/components/GoalCreationInformation.tsx
+++ b/components/pages/Goals/modals/GoalCreationModal/components/GoalCreationInformation.tsx
@@ -74,7 +74,15 @@ export const GoalCreationInformation = observer(
             </Table>
           </chakra.div>
         </Box>
-        <Box p={1} pt={4} w='100%' overflow='hidden' flex='1 0 0'>
+        <Box
+          p={1}
+          pt={4}
+          w='100%'
+          overflow='hidden'
+          flex='1 0 0'
+          onFocus={store.enableHotkeysForTasks}
+          onBlur={store.disableHotkeysForTasks}
+        >
           <Text fontWeight='semibold' mb={2} pl={5}>Task list</Text>
           <DraggableListContext
             onDragStart={store.listWithCreator.list.draggableList.startDragging}
@@ -94,6 +102,8 @@ export const GoalCreationInformation = observer(
               defaultGoalId={store.goal.id}
               disableReferenceChange
               displayCreatorHelpAsTooltip
+              unfocusWhenClickOutside
+              isHotkeysEnabled={store.isHotkeysForTasksAvailable}
               taskListWrapperProps={{
                 maxH: 'calc(100% - var(--chakra-space-20))',
                 overflowY: 'auto',
diff --git a/components/pages/Goals/modals/GoalCreationModal/store.ts b/components/pages/Goals/modals/GoalCreationModal/store.ts
index 324dac49..d7d4b85b 100644
--- a/components/pages/Goals/modals/GoalCreationModal/store.ts
+++ b/components/pages/Goals/modals/GoalCreationModal/store.ts
@@ -8,7 +8,6 @@ import { v4 as uuidv4 } from 'uuid';
 import { DescriptionData } from '../../../../../types/description';
 import { ResizableGroupConfig } from '../../../../shared/ResizableGroup/store';
 import { TasksListWithCreatorStore } from '../../../../shared/TasksListWithCreator/store';
-import { TaskData } from '../../../../shared/TasksList/types';
 import { NavigationDirections } from '../../../../../types/navigation';
 import { EmojiStore } from '../../../../../stores/EmojiStore';
 import { ModalsController } from '../../../../../helpers/ModalsController';
@@ -63,9 +62,7 @@ export class GoalCreationModalStore {
       }
     },
     CANCEL: () => {
-      if (!this.listWithCreator.list.openedTask) {
-        this.handleSimpleClose();
-      }
+      this.handleCloseModal();
     },
     CHANGE_STATUS: () => {
       if (this.isUpdating && !this.selectStatus.isMenuOpen) {
@@ -91,12 +88,24 @@ export class GoalCreationModalStore {
       this.handlePrevGoal();
     },
     CHANGE_STATUS_TO_TODO: () => {
+      if (this.isHotkeysForTasksAvailable) {
+        return;
+      }
+
       this.handleUpdateStatus(GoalStatus.TODO);
     },
     CHANGE_STATUS_TO_DONE: () => {
+      if (this.isHotkeysForTasksAvailable) {
+        return;
+      }
+
       this.handleUpdateStatus(GoalStatus.DONE);
     },
     CHANGE_STATUS_TO_WONT_DO: () => {
+      if (this.isHotkeysForTasksAvailable) {
+        return;
+      }
+
       this.handleUpdateStatus(GoalStatus.WONT_DO);
     },
   };
@@ -133,13 +142,13 @@ export class GoalCreationModalStore {
   isTaskExpanded = false;
   isDescriptionLoading: boolean = true;
   isGoalCreatingOrUpdating: boolean = false;
-  draggingTask: TaskData | null = null;
   goals: GoalData[] = [];
   currentGoalIndex: number = 0;
   error: string = '';
   isCommentPopoverOpened: boolean = false;
   isInfoPopoverOpened: boolean = false;
   isSpaceCreateModalOpened: boolean = false;
+  isHotkeysForTasksAvailable: boolean = false;
 
   goal: GoalData = {
     id: uuidv4(),
@@ -221,6 +230,17 @@ export class GoalCreationModalStore {
     return this.goal.status !== GoalStatus.TODO || this.goal.isArchived;
   }
 
+  handleCloseModal = () => {
+    if (this.listWithCreator.list.openedTask) {
+      this.listWithCreator.list.closeTask();
+    } else if (this.isHotkeysForTasksAvailable) {
+      this.isHotkeysForTasksAvailable = false;
+      this.listWithCreator.list.removeFocus();
+    } else {
+      this.handleSimpleClose();
+    }
+  };
+
   handleCloseTask = () => {
     this.resizableConfig[0].size = 3;
     this.resizableConfig[2].size = 0;
@@ -236,6 +256,14 @@ export class GoalCreationModalStore {
     onCloseTask: this.handleCloseTask,
   };
 
+  enableHotkeysForTasks = () => {
+    this.isHotkeysForTasksAvailable = true;
+  };
+
+  disableHotkeysForTasks = () => {
+    this.isHotkeysForTasksAvailable = false;
+  };
+
   handleExpandTask = () => {
     this.isTaskExpanded = true;
     this.resizableConfig[0].size = 0;
@@ -323,8 +351,12 @@ export class GoalCreationModalStore {
           onSubmit: () => {
             this.isOpen = false;
             submitCb?.();
+            this.resetActiveElementFocus();
+          },
+          onClose: () => {
+            this.modals.close();
+            this.resetActiveElementFocus();
           },
-          onClose: this.modals.close,
         },
       });
     } else {
diff --git a/components/pages/Goals/modals/GoalCreationModal/view.tsx b/components/pages/Goals/modals/GoalCreationModal/view.tsx
index 94093d91..6b25cd12 100644
--- a/components/pages/Goals/modals/GoalCreationModal/view.tsx
+++ b/components/pages/Goals/modals/GoalCreationModal/view.tsx
@@ -28,7 +28,7 @@ export const GoalCreationModalView = observer(function GoalCreationModal() {
       onClose={store.handleClose}
       onCloseComplete={store.handleCloseComplete}
       closeOnEsc={false}
-      onEsc={store.handleClose}
+      onEsc={store.handleCloseModal}
       blockScrollOnMount={false}
       size='full'
       isCentered
diff --git a/components/pages/Goals/modals/GoalWontDoSubmitModal/store.ts b/components/pages/Goals/modals/GoalWontDoSubmitModal/store.ts
index 76880b9b..4e3fa1d7 100644
--- a/components/pages/Goals/modals/GoalWontDoSubmitModal/store.ts
+++ b/components/pages/Goals/modals/GoalWontDoSubmitModal/store.ts
@@ -18,7 +18,7 @@ export class GoalWontDoSubmitModalStore {
   otherReason: string = '';
   textareaRef: HTMLTextAreaElement = null;
 
-  navigation = new ListNavigation();
+  navigation = new ListNavigation(undefined, true);
   validator = new Validator({
     fieldsErrorsToCheck: () => ({
       reason: [ErrorTypes.REQUIRED],
diff --git a/components/pages/Goals/modals/GoalWontDoSubmitModal/view.tsx b/components/pages/Goals/modals/GoalWontDoSubmitModal/view.tsx
index 5d570c1b..9022218c 100644
--- a/components/pages/Goals/modals/GoalWontDoSubmitModal/view.tsx
+++ b/components/pages/Goals/modals/GoalWontDoSubmitModal/view.tsx
@@ -41,7 +41,6 @@ export const GoalWontDoSubmitModalView = observer(function GoalWontDoSubmitModal
             <Textarea
               ref={store.setTextareaRef}
               onChange={store.handleOtherReasonChange}
-              onKeyDown={(e) => e.stopPropagation()}
               onNavigate={store.handleTextareaNavigate}
               value={store.otherReason}
               maxLength={OTHER_REASON_MAX_LENGTH}
diff --git a/components/shared/DatePicker/store.ts b/components/shared/DatePicker/store.ts
index d74010ba..1d9edc02 100644
--- a/components/shared/DatePicker/store.ts
+++ b/components/shared/DatePicker/store.ts
@@ -18,6 +18,7 @@ export class DatePickerStore {
   datePickerRef: ReactDatePicker;
   inputRef: HTMLInputElement;
   isFocused = false;
+  isCalendarFocused = false;
   isClickedOutside = false;
 
   constructor(public root: RootStore) {
@@ -42,6 +43,7 @@ export class DatePickerStore {
   handleBlur = (toggleFocus: boolean = true) => {
     if (this.isFocused) {
       this.isFocused = false;
+      this.isCalendarFocused = false;
 
       if (toggleFocus) {
         this.callbacks?.onFocusToggle?.(false);
@@ -51,6 +53,7 @@ export class DatePickerStore {
 
   handleInputClick = () => {
     this.datePickerRef.setFocus();
+    this.isCalendarFocused = false;
   };
 
   handleChange = (date: Date) => {
@@ -59,6 +62,7 @@ export class DatePickerStore {
 
   handleSave = (value: string = this.value, toggleFocus: boolean = true) => {
     this.value = value;
+    this.isCalendarFocused = false;
     this.callbacks?.onChanged(value);
 
     if (toggleFocus) {
@@ -79,6 +83,7 @@ export class DatePickerStore {
     this.handleAreaEvent(e);
 
     if (e.key === 'Tab') {
+      this.isCalendarFocused = false;
       this.datePickerRef?.setOpen(false);
     }
 
@@ -108,6 +113,8 @@ export class DatePickerStore {
     ) {
       this.handleSave(this.initialValue, false);
       this.callbacks.onNavigate(direction, e);
+    } else if ([NavigationDirections.DOWN, NavigationDirections.UP].includes(direction)) {
+      this.isCalendarFocused = true;
     }
   };
 
@@ -115,6 +122,7 @@ export class DatePickerStore {
     if (this.isFocused || this.isClickedOutside) {
       this.datePickerRef?.setBlur();
       this.isClickedOutside = false;
+      this.isCalendarFocused = false;
     } else {
       this.datePickerRef?.setFocus();
     }
diff --git a/components/shared/DatePicker/view.tsx b/components/shared/DatePicker/view.tsx
index 0cff51d4..a0242836 100644
--- a/components/shared/DatePicker/view.tsx
+++ b/components/shared/DatePicker/view.tsx
@@ -66,10 +66,17 @@ export const DatePickerView = observer(forwardRef<ReactDatePicker, DatePickerVie
         )}
         <ReactDatePicker
           customInput={<DatePickerInput />}
+          calendarContainer={(props) => (
+            <div className={props.className}>
+              <div className='container-overlay' />
+              {props.children}
+            </div>
+          )}
           wrapperClassName={cn({ 'only-icon': showIconOnlyIfEmpty, 'disabled': showIconOnlyIfEmpty && mustShowIcon })}
           renderCustomHeader={DatePickerHeader}
           formatWeekDay={store.getWeekDayFormatByDate}
           dateFormat={DATE_PICKER_DATE_FORMAT}
+          calendarClassName={store.isCalendarFocused && 'focused'}
           selected={store.currentValue}
           onChange={store.handleChange}
           portalId="date-picker-portal"
diff --git a/components/shared/EditableTitle/index.tsx b/components/shared/EditableTitle/index.tsx
index b918bc94..b3c6e765 100644
--- a/components/shared/EditableTitle/index.tsx
+++ b/components/shared/EditableTitle/index.tsx
@@ -161,13 +161,13 @@ export function EditableTitle({
         onBlur={handleInputBlur}
         onClick={(e) => e.stopPropagation()}
         ref={ref}
-        {...inputProps}
-        {...sharedProps}
         ml={margin}
         pl={1}
         width={widthByTitle ? `${value.length * 10}px` : '100%'}
         maxWidth='100%'
         minWidth='80px'
+        {...inputProps}
+        {...sharedProps}
       />
     ) : (
       <Text
diff --git a/components/shared/EmojiSelect/index.tsx b/components/shared/EmojiSelect/index.tsx
index 7044cd20..7d0f91c7 100644
--- a/components/shared/EmojiSelect/index.tsx
+++ b/components/shared/EmojiSelect/index.tsx
@@ -5,22 +5,20 @@ import { EmojiSelectProps } from './types';
 import React, { forwardRef } from 'react';
 
 export const EmojiSelect = observer(forwardRef<HTMLButtonElement, EmojiSelectProps>(
-    function EmojiSelect(
-        props,
-        ref
-    ) {
-      return (
-        <EmojiSelectStoreProvider {...props}>
-          <EmojiSelectView
-            size={props.size}
-            iconFontSize={props.iconFontSize}
-            borderRadius={props.borderRadius}
-            canRemoveEmoji={props.canRemoveEmoji}
-            cursor={props.cursor}
-            tabIndex={props.tabIndex}
-            ref={ref}
-          />
-        </EmojiSelectStoreProvider>
-      );
-    }
+  function EmojiSelect(props, ref) {
+    return (
+      <EmojiSelectStoreProvider {...props}>
+        <EmojiSelectView
+          size={props.size}
+          iconFontSize={props.iconFontSize}
+          borderRadius={props.borderRadius}
+          canRemoveEmoji={props.canRemoveEmoji}
+          cursor={props.cursor}
+          tabIndex={props.tabIndex}
+          preventOnFocus={props.preventOnFocus}
+          ref={ref}
+        />
+      </EmojiSelectStoreProvider>
+    );
+  }
 ));
diff --git a/components/shared/EmojiSelect/types.ts b/components/shared/EmojiSelect/types.ts
index f5c17f98..e4e9f7a5 100644
--- a/components/shared/EmojiSelect/types.ts
+++ b/components/shared/EmojiSelect/types.ts
@@ -9,6 +9,7 @@ export type EmojiSelectViewProps = {
   canRemoveEmoji?: boolean;
   cursor?: Property.Cursor;
   tabIndex?: number;
+  preventOnFocus?: boolean;
 };
 
 export type EmojiSelectCallbacks = {
diff --git a/components/shared/EmojiSelect/view.tsx b/components/shared/EmojiSelect/view.tsx
index 6e4a09cc..8e18b598 100644
--- a/components/shared/EmojiSelect/view.tsx
+++ b/components/shared/EmojiSelect/view.tsx
@@ -8,15 +8,15 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
-  Text,
   Portal,
   useDisclosure,
+  useOutsideClick,
 } from '@chakra-ui/react';
 import { useEmojiSelectStore } from './store';
 import { EmojiStore } from '../../../stores/EmojiStore';
 import { EmojiSelectViewProps } from './types';
 import { EMOJI_SELECT_COLORS } from './constants';
-import React, { forwardRef } from "react";
+import React, { forwardRef, useRef } from 'react';
 import { useRefWithCallback } from '../../../helpers/useRefWithCallback';
 
 export const EmojiSelectView = observer(
@@ -29,12 +29,23 @@ export const EmojiSelectView = observer(
             canRemoveEmoji,
             cursor,
             tabIndex,
+            preventOnFocus = false,
           },
           triggerRef
         ) {
           const store = useEmojiSelectStore();
 
-          const ref = useRefWithCallback<HTMLButtonElement>(triggerRef, store.setRef)
+          const ref = useRefWithCallback<HTMLButtonElement>(triggerRef, store.setRef);
+          const contentRef = useRef<HTMLDivElement>();
+
+          useOutsideClick({
+            ref: contentRef,
+            handler: (e) => {
+              if ((e.target as HTMLElement) !== store.triggerRef) {
+                store.closeEmojiPicker();
+              }
+            },
+          });
 
           const { isOpen, onClose, onOpen } = useDisclosure({
             isOpen: store.isEmojiPickerOpen,
@@ -49,7 +60,7 @@ export const EmojiSelectView = observer(
           })`;
 
           return (
-            <div onFocus={store.preventPropagation} onKeyDown={store.handleContainerKeyDown}>
+            <div onFocus={preventOnFocus ? store.preventPropagation : undefined} onKeyDown={store.handleContainerKeyDown}>
               <Popover
                   isOpen={isOpen}
                   onOpen={onOpen}
@@ -86,6 +97,7 @@ export const EmojiSelectView = observer(
                       justifyContent='center'
                       alignItems='center'
                       tabIndex={tabIndex}
+                      fontSize={iconFontSize}
                       cursor={cursor ?? (store.disabled ? 'default' : 'pointer')}
                       _focus={{ boxShadow: !store.disabled && focusedTriggerBoxShadow }}
                       onFocus={store.callbacks?.onFocus}
@@ -93,11 +105,11 @@ export const EmojiSelectView = observer(
                       onKeyDown={store.handleKeyDown}
                       onClick={(e) => !store.disabled && store.preventPropagation(e)}
                   >
-                    <Text fontSize={iconFontSize}>{store.triggerContent}</Text>
+                    {store.triggerContent}
                   </Button>
                 </PopoverTrigger>
                 <Portal>
-                  <PopoverContent w='auto' onClick={store.preventPropagation}>
+                  <PopoverContent ref={contentRef} w='auto' onClick={store.preventPropagation}>
                     <PopoverBody p={0}>
                       <Box display='flex' justifyContent='center'>
                         <HStack p={2}>
diff --git a/components/shared/SpaceSelect/view.tsx b/components/shared/SpaceSelect/view.tsx
index 07549de5..5ed5f04e 100644
--- a/components/shared/SpaceSelect/view.tsx
+++ b/components/shared/SpaceSelect/view.tsx
@@ -53,7 +53,7 @@ export const SpaceSelectView = observer(function SpaceSelectView() {
               >
                 <chakra.div display='flex' w='100%' h='100%' alignItems='center'>
                   <SpacesSmallIcon space={store.selectedSpace} size={6} borderRadius={4} bgOpacity='100' />
-                  <chakra.span ml={1} mr={1.5} fontWeight='normal' fontSize='sm' overflow='hidden' textOverflow='ellipsis'>
+                  <chakra.span ml={1} mr={1.5} maxW='100' fontWeight='normal' fontSize='sm' overflow='hidden' textOverflow='ellipsis'>
                     {store.selectedSpace.name}
                   </chakra.span>
                 </chakra.div>
diff --git a/components/shared/TaskQuickEditor/store.ts b/components/shared/TaskQuickEditor/store.ts
index 4ad490be..68ed560c 100644
--- a/components/shared/TaskQuickEditor/store.ts
+++ b/components/shared/TaskQuickEditor/store.ts
@@ -434,7 +434,6 @@ export class TaskQuickEditorStore {
         index
       );
       this.suggestionsMenu.closeForMode();
-      this.saveTask();
       this.setFocus(true);
     }
   };
@@ -784,6 +783,7 @@ export class TaskQuickEditorStore {
         }
       }
     } else if (e.key === 'Tab' && e.shiftKey) {
+      this.callbacks.onNavigate(NavigationDirections.BACK);
       this.leave();
     } else if (e.key === 'ArrowRight') {
       e.stopPropagation();
diff --git a/components/shared/TasksList/components/TaskItemMenu/index.tsx b/components/shared/TasksList/components/TaskItemMenu/index.tsx
index 6b9280bc..38876056 100644
--- a/components/shared/TasksList/components/TaskItemMenu/index.tsx
+++ b/components/shared/TasksList/components/TaskItemMenu/index.tsx
@@ -193,6 +193,7 @@ export const TaskItemMenu = observer(function TaskItemMenu() {
       onToggleMenu={store.toggleMenu}
       triggerButtonProps={() => ({
         color: 'gray.500',
+        h: 'auto',
 
         _groupHover: {
           visibility: !isMouseSelection && 'visible',
diff --git a/components/shared/TasksList/modals/store.ts b/components/shared/TasksList/modals/store.ts
index c4c84d5e..8f2f5da5 100644
--- a/components/shared/TasksList/modals/store.ts
+++ b/components/shared/TasksList/modals/store.ts
@@ -47,8 +47,18 @@ export class TasksModals {
           this.parent.deleteTasks(ids);
           this.controller.close();
           done?.();
+
+          setTimeout(() => {
+            (document.activeElement as HTMLElement).blur();
+          }, 0);
+        },
+        onClose: () => {
+          this.controller.close();
+
+          setTimeout(() => {
+            (document.activeElement as HTMLElement).blur();
+          }, 0);
         },
-        onClose: this.controller.close,
       },
     });
   };
diff --git a/components/shared/TasksList/store.ts b/components/shared/TasksList/store.ts
index 7eec7f62..3145bad8 100644
--- a/components/shared/TasksList/store.ts
+++ b/components/shared/TasksList/store.ts
@@ -25,6 +25,7 @@ export type TasksListProps = {
   disableSpaceChange?: boolean;
   disableGoalChange?: boolean;
   forcedLoadTasks?: boolean;
+  unfocusWhenClickOutside?: boolean;
   wrapperProps?: BoxProps;
   callbacks?: {
     onFocusLeave?: (direction: NavigationDirections) => boolean;
diff --git a/components/shared/TasksList/view.tsx b/components/shared/TasksList/view.tsx
index b526f034..2939e227 100644
--- a/components/shared/TasksList/view.tsx
+++ b/components/shared/TasksList/view.tsx
@@ -1,21 +1,29 @@
 import { observer } from 'mobx-react-lite';
 import { TasksListProps, useTasksListStore } from './store';
 
-import React from 'react';
+import React, { useRef } from 'react';
 import { TaskListItem } from './components/TaskListItem';
 import { ModalsSwitcher } from '../../../helpers/ModalsController';
 import { DraggableList } from '../DraggableList';
 import { useHotkeysHandler } from '../../../helpers/useHotkeysHandler';
 import { Center, Spinner } from '@chakra-ui/react';
+import { useOnClickOutside } from 'next/dist/client/components/react-dev-overlay/internal/hooks/use-on-click-outside';
 
 export const TasksListView = observer(function TasksListView(
-  { dnd = true, wrapperProps }: TasksListProps
+  { dnd = true, wrapperProps, unfocusWhenClickOutside }: TasksListProps
 ) {
   const store = useTasksListStore();
 
+  const ref = useRef<HTMLDivElement>();
+
   useHotkeysHandler(store.keyMap, store.hotkeyHandlers, {
     enabled: store.isHotkeysEnabled,
   });
+  useOnClickOutside(ref.current, () => {
+    if (unfocusWhenClickOutside) {
+      store.removeFocus();
+    }
+  });
 
   return (
     <>
@@ -24,24 +32,26 @@ export const TasksListView = observer(function TasksListView(
           <Spinner />
         </Center>
       ) : (
-        <DraggableList
-          id={store.listId}
-          isHotkeysEnabled={store.isHotkeysEnabled}
-          dndActive={dnd}
-          wrapperProps={
-            dnd
-              ? {
-                pl: 5,
-                ...wrapperProps,
-              }
-              : wrapperProps
-          }
-          items={store.order}
-          checkItemActivity={store.checkTask}
-          content={TaskListItem}
-          callbacks={store.draggableHandlers}
-          instance={store.draggableList}
-        />
+        <div ref={ref}>
+          <DraggableList
+            id={store.listId}
+            isHotkeysEnabled={store.isHotkeysEnabled}
+            dndActive={dnd}
+            wrapperProps={
+              dnd
+                ? {
+                  pl: 5,
+                  ...wrapperProps,
+                }
+                : wrapperProps
+            }
+            items={store.order}
+            checkItemActivity={store.checkTask}
+            content={TaskListItem}
+            callbacks={store.draggableHandlers}
+            instance={store.draggableList}
+          />
+        </div>
       )}
       <ModalsSwitcher controller={store.modals.controller} />
     </>
diff --git a/helpers/ListNavigation.ts b/helpers/ListNavigation.ts
index 15fb461e..16c9ef67 100644
--- a/helpers/ListNavigation.ts
+++ b/helpers/ListNavigation.ts
@@ -32,7 +32,10 @@ export const useListNavigation = (listNavigation: ListNavigation,
 };
 
 export class ListNavigation {
-  constructor(public callbacks: NavigationCallbacks = defaultCallbacks) {
+  constructor(
+    public callbacks: NavigationCallbacks = defaultCallbacks,
+    public withTabs: boolean = false
+  ) {
     makeAutoObservable(this);
   }
 
@@ -41,6 +44,8 @@ export class ListNavigation {
   focusedIndex: number | null = 0;
 
   keyMap = {
+    TAB: ['tab'],
+    SHIFT_TAB: ['shift+tab'],
     UP: ['up', 'j'],
     DOWN: ['down', 'k'],
     ENTER: ['enter'],
@@ -51,6 +56,16 @@ export class ListNavigation {
   };
 
   hotkeyHandlers = {
+    TAB: (e) => {
+      if (this.withTabs) {
+        this.hotkeyHandlers.DOWN(e);
+      }
+    },
+    SHIFT_TAB: (e) => {
+      if (this.withTabs) {
+        this.hotkeyHandlers.UP(e);
+      }
+    },
     UP: (e) => {
       e.preventDefault();
 
diff --git a/package-lock.json b/package-lock.json
index 08a420f6..a86339ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "@tiptap/starter-kit": "^2.0.3",
         "@tiptap/suggestion": "^2.0.3",
         "allotment": "^1.19.0",
+        "canvas-confetti": "^1.6.0",
         "classnames": "^2.3.2",
         "copy-to-clipboard": "^3.3.3",
         "csstype": "^3.1.2",
@@ -3774,6 +3775,15 @@
         }
       ]
     },
+    "node_modules/canvas-confetti": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.6.0.tgz",
+      "integrity": "sha512-ej+w/m8Jzpv9Z7W7uJZer14Ke8P2ogsjg4ZMGIuq4iqUOqY2Jq8BNW42iGmNfRwREaaEfFIczLuZZiEVSYNHAA==",
+      "funding": {
+        "type": "donate",
+        "url": "https://www.paypal.me/kirilvatev"
+      }
+    },
     "node_modules/case-anything": {
       "version": "2.1.10",
       "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.10.tgz",
@@ -11029,6 +11039,11 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz",
       "integrity": "sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ=="
     },
+    "canvas-confetti": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.6.0.tgz",
+      "integrity": "sha512-ej+w/m8Jzpv9Z7W7uJZer14Ke8P2ogsjg4ZMGIuq4iqUOqY2Jq8BNW42iGmNfRwREaaEfFIczLuZZiEVSYNHAA=="
+    },
     "case-anything": {
       "version": "2.1.10",
       "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.10.tgz",
diff --git a/package.json b/package.json
index db424136..973deee7 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "@tiptap/starter-kit": "^2.0.3",
     "@tiptap/suggestion": "^2.0.3",
     "allotment": "^1.19.0",
+    "canvas-confetti": "^1.6.0",
     "classnames": "^2.3.2",
     "copy-to-clipboard": "^3.3.3",
     "csstype": "^3.1.2",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 28d5b103..7d467c4a 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -232,6 +232,22 @@ const theme = extendTheme({
           borderRadius: 16,
           borderColor: 'gray.200',
 
+          _hover: {
+            '.container-overlay': {
+              zIndex: -1,
+            }
+          },
+
+          '.container-overlay': {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: 'white',
+            zIndex: 99,
+            opacity: 0.3,
+          },
           '.react-datepicker__triangle': {
             display: 'none',
           },
@@ -496,6 +512,12 @@ const theme = extendTheme({
                 borderRadius: '50%',
               }
             },
+          },
+
+          '&.focused': {
+            '.container-overlay': {
+              zIndex: -1,
+            }
           }
         },
         '.react-datepicker-popper': {
diff --git a/stores/AnimationsStore/index.tsx b/stores/AnimationsStore/index.tsx
new file mode 100644
index 00000000..00e8314f
--- /dev/null
+++ b/stores/AnimationsStore/index.tsx
@@ -0,0 +1,51 @@
+import { makeObservable, observable, action } from 'mobx';
+import confetti from 'canvas-confetti';
+
+class AnimationsStoreClass {
+  confettiDefaults = {
+    startVelocity: 30,
+    spread: 360,
+    ticks: 60,
+    zIndex: 0
+  };
+
+  constructor() {
+    makeObservable(this, {
+      confettiDefaults: observable,
+      randomInRange: action.bound,
+      displayFireworks: action.bound,
+    });
+  }
+
+  randomInRange(min: number, max: number) {
+    return Math.random() * (max - min) + min;
+  };
+
+  displayFireworks = (durationMs: number = 4000) => {
+    const animationEnd = Date.now() + durationMs;
+
+    const interval = setInterval(() => {
+      const timeLeft = animationEnd - Date.now();
+
+      if (timeLeft <= 0) {
+        return clearInterval(interval);
+      }
+
+      const particleCount = 50 * (timeLeft / durationMs);
+
+      confetti({
+        ...this.confettiDefaults,
+        particleCount,
+        origin: { x: this.randomInRange(0.1, 0.3), y: Math.random() - 0.2 }
+      });
+
+      confetti({
+        ...this.confettiDefaults,
+        particleCount,
+        origin: { x: this.randomInRange(0.7, 0.9), y: Math.random() - 0.2 }
+      });
+    }, 250);
+  };
+}
+
+export const AnimationsStore = new AnimationsStoreClass();