diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 0c99d27..f165dad 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -40,6 +40,10 @@ app-sidebar-mobile {
   filter: blur(5px);
 }
 
+.d-none {
+  display: none;
+}
+
 @media screen and (max-width: 910px) {
   .main-content {
     padding: 32px;
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index f5da097..5776752 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -14,6 +14,7 @@ export const routes: Routes = [
   { path: 'summary', component: SummaryComponent },
   { path: 'add-task', component: AddTaskComponent },
   { path: 'board', component: BoardComponent },
+  { path: 'task/:id', component: TaskOverlayComponent },
   { path: 'contacts', component: ContactsComponent },
   { path: 'contacts/:id', component: ContactsComponent },
   { path: 'help', component: HelpComponent },
diff --git a/src/app/components/add-task/add-task.component.ts b/src/app/components/add-task/add-task.component.ts
index 5eca37f..2f88202 100644
--- a/src/app/components/add-task/add-task.component.ts
+++ b/src/app/components/add-task/add-task.component.ts
@@ -172,7 +172,7 @@ export class AddTaskComponent {
   }
 
   closeOverlay() {
-    this.overlayService.setOverlayData('', '', false);
+    this.overlayService.setOverlayData('', '');
   }
 
   untouchedFormFields() {
diff --git a/src/app/components/board/task/task.component.ts b/src/app/components/board/task/task.component.ts
index 795c9b3..279eb53 100644
--- a/src/app/components/board/task/task.component.ts
+++ b/src/app/components/board/task/task.component.ts
@@ -30,9 +30,9 @@ export class TaskComponent {
 
   openTaskDetailsOverlay(taskId: string | undefined) {
     if (window.innerWidth >= 650) {
-      this.overlayService.setOverlayData('taskOverlay', taskId, false);
+      this.overlayService.setOverlayData('taskOverlay', taskId);
     } else {
-      this.overlayService.setOverlayData('taskOverlay', taskId, true);
+      this.router.navigate(['/task', taskId]);
     }
   }
 
diff --git a/src/app/services/overlay.service.ts b/src/app/services/overlay.service.ts
index bb71ddc..51918b6 100644
--- a/src/app/services/overlay.service.ts
+++ b/src/app/services/overlay.service.ts
@@ -10,7 +10,7 @@ export class OverlayService {
 
   constructor() {}
 
-  setOverlayData(overlay: string, data: any, mobile: boolean) {
-    this.overlayDataSubject.next({ overlay, data, mobile });
+  setOverlayData(overlay: string, data: any) {
+    this.overlayDataSubject.next({ overlay, data });
   }
 }
diff --git a/src/app/shared/components/buttons/btn-back/btn-back.component.html b/src/app/shared/components/buttons/btn-back/btn-back.component.html
index 64d9478..b5e6ae3 100644
--- a/src/app/shared/components/buttons/btn-back/btn-back.component.html
+++ b/src/app/shared/components/buttons/btn-back/btn-back.component.html
@@ -1 +1,3 @@
-<img (click)="backClicked()" src="./../../../../assets/img/arrow-left.svg" />
+<div class="btn" (click)="backClicked()">
+  <img src="./../../../../assets/img/arrow-left.svg" />
+</div>
diff --git a/src/app/shared/components/buttons/btn-back/btn-back.component.scss b/src/app/shared/components/buttons/btn-back/btn-back.component.scss
index 771d185..b382199 100644
--- a/src/app/shared/components/buttons/btn-back/btn-back.component.scss
+++ b/src/app/shared/components/buttons/btn-back/btn-back.component.scss
@@ -1,12 +1,24 @@
-img {
-  width: 32px;
-  height: 32px;
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 38px;
+  height: 38px;
   cursor: pointer;
-  margin-left: 48px;
+  img {
+    width: 22px;
+    height: 22px;
+    filter: brightness(0) saturate(100%) invert(56%) sepia(64%) saturate(570%)
+      hue-rotate(154deg) brightness(92%) contrast(92%);
+  }
   &:hover {
-    width: 36px;
-    height: 36px;
-    background-color: var(--light-gray);
-    border-radius: 18px;
+    background-color: var(--light-blue);
+    border-radius: 100%;
+    scale: 1.1;
+    img {
+      scale: 1.1;
+      filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
+        saturate(7485%) hue-rotate(325deg) brightness(100%) contrast(104%);
+    }
   }
 }
diff --git a/src/app/shared/components/buttons/btn-close/btn-close.component.html b/src/app/shared/components/buttons/btn-close/btn-close.component.html
index d9fb310..2b55494 100644
--- a/src/app/shared/components/buttons/btn-close/btn-close.component.html
+++ b/src/app/shared/components/buttons/btn-close/btn-close.component.html
@@ -1,3 +1,3 @@
-<div class="btn">
-  <img (click)="closeClicked()" src="./../../../../assets/img/close.svg" />
+<div class="btn" (click)="closeClicked()">
+  <img src="./../../../../assets/img/close.svg" />
 </div>
diff --git a/src/app/shared/components/buttons/btn-close/btn-close.component.scss b/src/app/shared/components/buttons/btn-close/btn-close.component.scss
index c79bfc8..b382199 100644
--- a/src/app/shared/components/buttons/btn-close/btn-close.component.scss
+++ b/src/app/shared/components/buttons/btn-close/btn-close.component.scss
@@ -2,21 +2,23 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 40px;
-  height: 40px;
+  width: 38px;
+  height: 38px;
   cursor: pointer;
   img {
-    width: 32px;
-    height: 32px;
+    width: 22px;
+    height: 22px;
     filter: brightness(0) saturate(100%) invert(56%) sepia(64%) saturate(570%)
       hue-rotate(154deg) brightness(92%) contrast(92%);
   }
   &:hover {
-    background-color: var(--light-gray);
+    background-color: var(--light-blue);
     border-radius: 100%;
     scale: 1.1;
     img {
       scale: 1.1;
+      filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
+        saturate(7485%) hue-rotate(325deg) brightness(100%) contrast(104%);
     }
   }
 }
diff --git a/src/app/shared/components/overlay/overlay.component.html b/src/app/shared/components/overlay/overlay.component.html
index afa1a56..8253fee 100644
--- a/src/app/shared/components/overlay/overlay.component.html
+++ b/src/app/shared/components/overlay/overlay.component.html
@@ -1,11 +1,8 @@
-<div
-  *ngIf="overlayData"
-  [ngClass]="{ overlay: isOverlay, 'overlay-mobile': isOverlayMobile }"
->
+@if (overlayData) {
+<div class="overlay">
   @if (overlayType === "taskOverlay") {
   <app-task-overlay
     [overlayData]="overlayData"
-    [overlayMobile]="overlayMobile"
     (closeDialogEmitter)="onCloseOverlay($event)"
   ></app-task-overlay>
   } @if (overlayType === "taskOverlayEdit") {
@@ -15,3 +12,4 @@
   ></app-task-edit-overlay>
   }
 </div>
+}
diff --git a/src/app/shared/components/overlay/overlay.component.ts b/src/app/shared/components/overlay/overlay.component.ts
index 34627b1..8ae68b7 100644
--- a/src/app/shared/components/overlay/overlay.component.ts
+++ b/src/app/shared/components/overlay/overlay.component.ts
@@ -22,15 +22,9 @@ import { ActivatedRoute } from '@angular/router';
   templateUrl: './overlay.component.html',
   styleUrl: './overlay.component.scss',
 })
-export class OverlayComponent implements OnInit, OnDestroy {
-  @HostBinding('class.overlay') isOverlay = window.innerWidth >= 650;
-  @HostBinding('class.overlay-mobile') isOverlayMobile =
-    window.innerWidth < 650;
-  private resizeListener!: () => void;
-
+export class OverlayComponent implements OnInit {
   overlayType: any;
   overlayData: any;
-  overlayMobile: boolean = false;
 
   constructor(
     private overlayService: OverlayService,
@@ -39,7 +33,6 @@ export class OverlayComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.checkOverlayData();
-    this.checkWindowWidth();
   }
 
   checkOverlayData() {
@@ -47,19 +40,10 @@ export class OverlayComponent implements OnInit, OnDestroy {
       if (data) {
         this.overlayType = data.overlay;
         this.overlayData = data.data;
-        this.overlayMobile = data.mobile;
       }
     });
   }
 
-  checkWindowWidth() {
-    this.resizeListener = () => {
-      this.isOverlay = window.innerWidth >= 650;
-      this.isOverlayMobile = window.innerWidth < 650;
-    };
-    window.addEventListener('resize', this.resizeListener);
-  }
-
   onCloseOverlay(emitter: string) {
     this.overlayData = emitter;
   }
@@ -74,8 +58,4 @@ export class OverlayComponent implements OnInit, OnDestroy {
       this.onCloseOverlay('');
     }
   }
-
-  ngOnDestroy(): void {
-    window.removeEventListener('resize', this.resizeListener);
-  }
 }
diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.html b/src/app/shared/components/overlay/task-overlay/task-overlay.component.html
index 194feb7..ff23268 100644
--- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.html
+++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.html
@@ -3,6 +3,7 @@
   overlay: !overlayMobile,
   'overlay-mobile': overlayMobile,
 }"
+  *ngIf="overlayData !== '' && getTaskData(overlayData).length > 0"
 >
   <div class="header">
     <div
@@ -13,7 +14,11 @@
     >
       {{ getTaskData(overlayData)[0].category }}
     </div>
+    @if (overlayMobile) {
+    <app-btn-back></app-btn-back>
+    } @else {
     <app-btn-close (click)="closeDialog()"></app-btn-close>
+    }
   </div>
   <div
     [ngClass]="{
diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss b/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
index d9ab431..b33412e 100644
--- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
+++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
@@ -7,9 +7,7 @@
 }
 
 .overlay-mobile {
-  background-color: var(--white);
-  width: calc(100vw - 24px);
-  height: calc(100vh - 24px);
+  height: calc(100% - 24px);
   padding: 12px;
 }
 
@@ -37,7 +35,7 @@
 }
 
 .content-mobile {
-  height: calc(100vh - 214px);
+  height: calc(100% - 104px);
   overflow-y: auto;
 }
 
@@ -216,7 +214,7 @@
   align-items: center;
   justify-content: right;
   width: 100%;
-  margin: 12px 0;
+  margin-top: 12px;
   img {
     width: 20px;
     height: 20px;
diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts b/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts
index 27608dd..1afb151 100644
--- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts
+++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts
@@ -1,24 +1,28 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FirebaseService } from '../../../../services/firebase.service';
 import { BtnCloseComponent } from '../../buttons/btn-close/btn-close.component';
 import { CommonModule } from '@angular/common';
 import { OverlayService } from '../../../../services/overlay.service';
+import { ActivatedRoute } from '@angular/router';
+import { BtnBackComponent } from '../../buttons/btn-back/btn-back.component';
 
 @Component({
   selector: 'app-task-overlay',
   standalone: true,
-  imports: [BtnCloseComponent, CommonModule],
+  imports: [BtnCloseComponent, CommonModule, BtnBackComponent],
   templateUrl: './task-overlay.component.html',
   styleUrl: './task-overlay.component.scss',
 })
-export class TaskOverlayComponent {
+export class TaskOverlayComponent implements OnInit {
   @Input() overlayData: string = '';
-  @Input() overlayMobile: boolean = false;
   @Output() closeDialogEmitter = new EventEmitter<string>();
 
+  overlayMobile: boolean = false;
+
   constructor(
     public firebaseService: FirebaseService,
-    private overlayService: OverlayService
+    private overlayService: OverlayService,
+    private route: ActivatedRoute
   ) {}
 
   categoryColors = new Map<string, string>([
@@ -30,8 +34,19 @@ export class TaskOverlayComponent {
     this.closeDialogEmitter.emit('');
   }
 
+  ngOnInit() {
+    if (this.overlayData == '') {
+      if (this.route.params.subscribe()) {
+        this.route.params.subscribe((params) => {
+          this.overlayData = params['id'];
+          this.overlayMobile = true;
+        });
+      }
+    }
+  }
+
   editTask(overlayData: string) {
-    this.overlayService.setOverlayData('taskOverlayEdit', overlayData, false);
+    this.overlayService.setOverlayData('taskOverlayEdit', overlayData);
   }
 
   deleteTask(overlayData: string) {
diff --git a/src/assets/img/arrow-left.svg b/src/assets/img/arrow-left.svg
index 4b70ce0..47eced3 100644
--- a/src/assets/img/arrow-left.svg
+++ b/src/assets/img/arrow-left.svg
@@ -1,5 +1,3 @@
-<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="arrow-left-line">
-<path id="Vector" d="M10.437 15.1667H25.333C26.0694 15.1667 26.6663 15.7637 26.6663 16.5001C26.6663 17.2364 26.0694 17.8334 25.333 17.8334H10.437L16.6463 24.0427C17.167 24.5634 17.167 25.4074 16.6463 25.9281C16.1257 26.4487 15.2816 26.4487 14.761 25.9281L6.74722 17.9143C5.96617 17.1332 5.96617 15.8669 6.74722 15.0858L14.761 7.07206C15.2816 6.55144 16.1257 6.55144 16.6463 7.07206C17.167 7.59268 17.167 8.43677 16.6463 8.95739L10.437 15.1667Z" fill="#29ABE2"/>
-</g>
+<svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.70752 8.63255H22.1981C22.9345 8.63255 23.5314 9.2295 23.5314 9.96588C23.5314 10.7023 22.9345 11.2992 22.1981 11.2992H4.70752L10.9169 17.5085C11.4375 18.0292 11.4375 18.8733 10.9168 19.3939C10.3962 19.9145 9.55214 19.9145 9.03152 19.3939L1.01773 11.3801C0.236679 10.599 0.236681 9.33272 1.01773 8.55167L9.03152 0.537881C9.55214 0.0172601 10.3962 0.0172609 10.9168 0.537881C11.4375 1.0585 11.4375 1.90259 10.9168 2.42322L4.70752 8.63255Z" fill="#29ABE2"/>
 </svg>
diff --git a/src/assets/img/close.svg b/src/assets/img/close.svg
index 6ec275c..0003ef5 100644
--- a/src/assets/img/close.svg
+++ b/src/assets/img/close.svg
@@ -1,3 +1,3 @@
-<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.24953 7.00008L11.4925 12.2431M1.00653 12.2431L6.24953 7.00008L1.00653 12.2431ZM11.4925 1.75708L6.24853 7.00008L11.4925 1.75708ZM6.24853 7.00008L1.00653 1.75708L6.24853 7.00008Z" stroke="#2A3647" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.9998 8.36587L2.0998 13.2659C1.91647 13.4492 1.68314 13.5409 1.3998 13.5409C1.11647 13.5409 0.883138 13.4492 0.699805 13.2659C0.516471 13.0825 0.424805 12.8492 0.424805 12.5659C0.424805 12.2825 0.516471 12.0492 0.699805 11.8659L5.5998 6.96587L0.699805 2.06587C0.516471 1.88254 0.424805 1.6492 0.424805 1.36587C0.424805 1.08254 0.516471 0.849202 0.699805 0.665869C0.883138 0.482536 1.11647 0.390869 1.3998 0.390869C1.68314 0.390869 1.91647 0.482536 2.0998 0.665869L6.9998 5.56587L11.8998 0.665869C12.0831 0.482536 12.3165 0.390869 12.5998 0.390869C12.8831 0.390869 13.1165 0.482536 13.2998 0.665869C13.4831 0.849202 13.5748 1.08254 13.5748 1.36587C13.5748 1.6492 13.4831 1.88254 13.2998 2.06587L8.3998 6.96587L13.2998 11.8659C13.4831 12.0492 13.5748 12.2825 13.5748 12.5659C13.5748 12.8492 13.4831 13.0825 13.2998 13.2659C13.1165 13.4492 12.8831 13.5409 12.5998 13.5409C12.3165 13.5409 12.0831 13.4492 11.8998 13.2659L6.9998 8.36587Z" fill="#2A3647"/>
 </svg>