diff --git a/src/app/languages/arabic/todo-list/todo-header/todo-header.component.scss b/src/app/languages/arabic/todo-list/todo-header/todo-header.component.scss
index a8d60c6..313840b 100644
--- a/src/app/languages/arabic/todo-list/todo-header/todo-header.component.scss
+++ b/src/app/languages/arabic/todo-list/todo-header/todo-header.component.scss
@@ -37,9 +37,6 @@
   padding: 8px 33px 12px 40px;
   transition: width 0.4s ease-in-out;
 }
-.toggle {
-  display: none;
-}
 .nav-item {
   text-decoration: none;
   margin: 1.3rem 0 0 0;
diff --git a/src/app/languages/arabic/todo-list/todo-main/todo-main.component.html b/src/app/languages/arabic/todo-list/todo-main/todo-main.component.html
index 77fbb58..0987424 100644
--- a/src/app/languages/arabic/todo-list/todo-main/todo-main.component.html
+++ b/src/app/languages/arabic/todo-list/todo-main/todo-main.component.html
@@ -156,8 +156,6 @@
                 <img src="/assets/images/delete-icon.svg"  alt="حذف المهمة"
                 title="حذف المهمة">
             </div>
-
-
         </div>
 
     </div>
diff --git a/src/app/languages/arabic/todo-list/todo-main/todo-main.component.scss b/src/app/languages/arabic/todo-list/todo-main/todo-main.component.scss
index 18687d6..54c831d 100644
--- a/src/app/languages/arabic/todo-list/todo-main/todo-main.component.scss
+++ b/src/app/languages/arabic/todo-list/todo-main/todo-main.component.scss
@@ -19,7 +19,7 @@
   color: rgba(var(--green));
 }
 .taskTop img {
-  margin: 1rem 0 0 1.2rem;
+  margin-top: 1rem;
   height: 22px;
 }
 .task-container {
@@ -123,15 +123,6 @@ form label {
   padding: 1em;
   cursor: pointer;
 }
-.my-date:hover,
-.mycourses:hover,
-.calendar:hover,
-.People:hover,
-.tasks:hover,
-.todo:hover{
-  background-color: #DDFDD8;
-  border: 1px solid #DDFDD8;
-}
 .my-date img,
 .mycourses img,
 .calendar img,
@@ -166,10 +157,16 @@ form label {
 .add-file:hover,
 .mydate:hover,
 .due-date:hover,
-.repeat:hover{
+.repeat:hover,.my-date:hover,
+.mycourses:hover,
+.calendar:hover,
+.People:hover,
+.tasks:hover,
+.todo:hover{
   background-color: #DDFDD8;
   border: 1px solid #DDFDD8;
 }
+
 .date label,
 .add-file label,
 .mydate label,
@@ -208,24 +205,10 @@ form label {
     position: inherit;
     transition: none;
   }
-  .my-date,.mycourses,.calendar,.People,.tasks,.todo {
-    display: flex;
-    padding: 1em;
-    cursor: pointer;
-  }
-  .my-date img,
-  .mycourses img,
-  .calendar img,
-  .People img,
-  .tasks img,
-  .todo img {
-    height: 22px;
-    margin-right: .6rem;
-  }
   .sidebar-footer{
     margin-top: 19.6rem;
   }
   .right-footer{
-    margin-top: 5.6rem;
+    margin-top: 6.5rem;
   }
 }
\ No newline at end of file
diff --git a/src/app/languages/english/todo-list/todo-header/todo-header.component.html b/src/app/languages/english/todo-list/todo-header/todo-header.component.html
index 0a9d6ef..15b8875 100644
--- a/src/app/languages/english/todo-list/todo-header/todo-header.component.html
+++ b/src/app/languages/english/todo-list/todo-header/todo-header.component.html
@@ -1,17 +1,20 @@
 <div class="header-container">
   <div class="todo">
     <img routerLink="/en" src="/assets/logoFinal.svg" alt="logo" title="Learning Lantern logo">
-      <p>To Do</p>
+    <p>To Do</p>
   </div>
   <div class="search">
     <form>
-        <input type="text" name="Search" placeholder="Search" title="Search">
-      </form>
+      <input type="text" name="Search" placeholder="Search" title="Search" class="pointer">
+    </form>
   </div>
   <div class="icons">
-    <img src="../../../../../assets/images/setting-icon.svg" alt="setting-icon" title="Settings">
-    <img src="../../../../../assets/images/question-icon.svg" alt="question-icon" title="help">
-    <img src="../../../../../assets/images/user-icon.svg" alt="user-icon" title="user account">
-
+    <img src="/assets/images/setting-icon.svg" alt="setting-icon" title="Settings"  class="pointer">
+    <img src="/assets/images/user-icon.svg" alt="user-icon" title="user account"  class="pointer">
+    <a (click)="dropToggle()" class="nav-item pointer">EN</a>
+    <div class="dropdown-content" [ngStyle]="{ display: drop ? 'flex' : 'none' }">
+      <a class="pointer" (click)="switchLang('ar', 'en')">EN</a>
+      <a class="pointer" (click)="switchLang('en', 'ar')">AR</a>
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/languages/english/todo-list/todo-header/todo-header.component.scss b/src/app/languages/english/todo-list/todo-header/todo-header.component.scss
index a9c4a23..b6f8f05 100644
--- a/src/app/languages/english/todo-list/todo-header/todo-header.component.scss
+++ b/src/app/languages/english/todo-list/todo-header/todo-header.component.scss
@@ -8,18 +8,16 @@
   border-bottom: 0.5px solid var(--green);
   z-index: 999;
 }
-
 .todo {
   font-size: 1.3rem;
   font-weight: 500;
   margin-left: 1rem;
   display: flex;
+  width: 42%;
 }
-
 .todo p {
-  margin-top: 1.7rem;
+  margin:1.7rem 0 0 .3rem;
 }
-
 .todo img {
   width: 45px;
   cursor: pointer;
@@ -28,65 +26,74 @@
 .search{
   margin-right: -4rem;
 }
-
 .search form input[type=text] {
-  width:65% ;
+  width: 55%;
   box-sizing: border-box;
   border: 2px solid #ccc;
   border-radius: 13px;
   font-size: 16px;
-  margin-top: 1rem;
-  background-color: white;
-  background-image: url('/assets/images/search-icon.svg');
-  background-position: 10px 10px;
-  background-repeat: no-repeat;
+  margin: 1rem 1rem 0 0;
+  background: url("/assets/images/search-icon.svg") no-repeat 10px 10px white;
   padding: 12px 20px 12px 40px;
-  -webkit-transition: width 0.4s ease-in-out;
   transition: width 0.4s ease-in-out;
 }
-
-.search form input[type=text]:hover {
-  cursor: pointer;
-}
-
 .icons {
   display: flex;
 }
-
 .icons img {
   width: 22px;
-  margin-right: .5rem;
+  margin-right: .7rem;
 }
-
-.todo p,
-.icons img:hover {
-  cursor: pointer;
+.nav-item {
+  text-decoration: none;
+  margin: 1.3rem 0 0 0;
+  transition: 0.3s ease all;
+  padding: 0.7em 0.5em;
+  font-weight: 500;
+}
+.nav-item:hover {
+  color: rgba(var(--brown));
+}
+.dropdown-content {
+  padding: 1em;
+  width: 150px;
+  background: rgba(var(--very-light-green));
+  align-items: center;
+  flex-direction: column;
+  position: absolute;
+  top: 80px;
+  z-index: 1001;
+}
+.dropdown-content a {
+  text-decoration: none;
+}
+.dropdown-content a:hover {
+  color: rgba(var(--brown));
 }
-
 @media all and (min-width: 900px) {
   .todo {
     margin-left: 2rem;
   }
-
   .todo img {
     width: 55px;
     margin-right: 1.2rem;
   }
-
+  .search{
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    width: 100%;
+    margin-right: 8rem;
+  }
   .search form input[type=text] {
     width: 300px;
-    
   }
-
-  .search form input[type=text]:focus {
-    width: 105%;
-    margin:1rem 8rem 0 0 ;
-    outline: none;
+  .icons{
+    margin-right: 1.5rem;
   }
   .icons  img{
     width: 26px;
      justify-content: space-between;
      margin-right: 2rem; 
   }
-  
 }
diff --git a/src/app/languages/english/todo-list/todo-header/todo-header.component.ts b/src/app/languages/english/todo-list/todo-header/todo-header.component.ts
index 504979b..62665a1 100644
--- a/src/app/languages/english/todo-list/todo-header/todo-header.component.ts
+++ b/src/app/languages/english/todo-list/todo-header/todo-header.component.ts
@@ -1,14 +1,22 @@
 import { Component, OnInit } from '@angular/core';
-
+import { Router } from '@angular/router';
 @Component({
   selector: 'app-todo-header',
   templateUrl: './todo-header.component.html',
   styleUrls: ['./todo-header.component.scss']
 })
 export class TodoHeaderComponent implements OnInit {
+  drop = false;
+  constructor(private router: Router) { }
+  dropToggle() {
+    this.drop = !this.drop;
+  }
 
-  constructor() { }
-
+  switchLang(oldLang: string, newLang: string) {
+    const url = this.router.url;
+    const url2 = url.replace(`/${oldLang}`, `/${newLang}`);
+    this.router.navigate([url2]);
+  }
   ngOnInit(): void {
   }
 
diff --git a/src/app/languages/english/todo-list/todo-main/todo-main.component.html b/src/app/languages/english/todo-list/todo-main/todo-main.component.html
index 38efc2f..2e9a115 100644
--- a/src/app/languages/english/todo-list/todo-main/todo-main.component.html
+++ b/src/app/languages/english/todo-list/todo-main/todo-main.component.html
@@ -1,5 +1,5 @@
 <div class="taskTop">
-  <img src="/assets/images/bar-icon.svg" (click)="showSidebar()" alt="bar-icon">
+  <img src="/assets/images/bar-icon.svg" (click)="showSidebar()" alt="bar-icon"  class="pointer">
   <p>Tasks</p>
 </div>
 <!-- Main Container-->
@@ -7,7 +7,7 @@
   <!-- Left Column -->
   <div class="side-bar" [class.hidden]="isHidden">
     <div class="my-date">
-        <img src="../../../../../assets/images/mydate-icon.svg" alt="my date" />
+      <img src="/assets/images/myday.svg" alt="my day" />
       <span>Add to My Day</span>
     </div>
     <div class="mycourses">
@@ -15,16 +15,16 @@
       <span>My Courses</span>
     </div>
     <div class="calendar">
-      <img src="/assets/images/task-calendar.svg" alt="planned Tasks" title="Calendar">
+      <img src="/assets/images/task-calendar1.svg" alt="planned Tasks" title="Planned Tasks">
       <span>Planned Tasks</span>
     </div>
 
     <div class="People">
-      <img src="/assets/images/assigned-icon.svg" alt="Assigned to me" title="People">
+      <img src="/assets/images/assigned-icon.svg" alt="Assigned to me" title="Assigned to me">
       <span>Assigned to me</span>
     </div>
 
-    <div class="tasks">
+    <div class="tasks" (click)="showSidebar()">
       <img src="/assets/images/tasks-icon.svg" alt="tasks">
       <span>Tasks</span>
     </div>
@@ -85,7 +85,7 @@
         <li *ngFor="let item of taskList; let i=index" (click)="showbar()">
           <input class="checkbox" type="checkbox" name="done" id="done" />
           {{ item.task }}
-          <img src="/assets/images/delete-icon.svg" (click)="removeTask(i)" alt="delete Task" title="Delete Task">
+          <img src="/assets/images/delete-icon.svg" (click)="removeTask(i)" alt="delete Task" title="Delete Task"  class="pointer">
         </li>
       </ul>
 
@@ -95,18 +95,21 @@
   <!-- Right Column -->
   <div class="details" [class.hidden]="Hidden">
     <div class="task-name">
-      <input type="checkbox" name="done" id="done" style="margin:0.8rem 0 0 0.7rem;" /> task name
-      <div class="sub-container" style="margin-top: 1rem;">
+      <div class="task">
+        <input type="checkbox" name="done" id="done" style="margin:0rem 1rem 1rem 1rem;" />
+        <span>Task name</span>
+      </div>
+
+      <div class="task-steps">
         <label for="addTask" class="form-label">
           <img src="/assets/images/add-icon.svg" alt="add task" />
         </label>
-        <input type="text" id="addTask" class="form-input" name="addTask" placeholder="Add step" />
+        <input type="text" id="addTask" class="steps-input" name="addTask" placeholder="Add step" />
       </div>
     </div>
-
     <div class="mydate">
       <label for="my-day">
-        <img src="/assets/images/mydate-icon.svg" alt="my date" />
+        <img src="/assets/images/myday.svg" alt="my date" />
       </label>
       <span id="my-day">Add to My Day</span>
     </div>
@@ -115,15 +118,14 @@
     <div class="date">
       <div class="due-date">
         <label for="dueDate">
-          <img src="/assets/images/task-calendar.svg" alt="" srcset="" />
+          <img src="/assets/images/task-calendar1.svg" alt="" srcset="" />
         </label>
-        <!-- <input type="date" style="padding: 0px; border: none; outline: none" name="dueDate"/> -->
         <span>Add due date</span>
 
       </div>
       <div class="repeat">
         <label for="repeat">
-          <img src="../../../../../assets/images/repeat(black).svg" alt="repeat" />
+          <img src="/assets/images/repeat(black).svg" alt="repeat" />
         </label>
         <span>Repeat</span>
       </div>
@@ -131,15 +133,23 @@
 
     <div class="add-file">
       <label>
-        <img src="../../../../../assets/images/addfile-icon.svg" alt="">
+        <img src="/assets/images/addfile-icon.svg" alt="">
       </label>
       <div class="file-attach">
         <input id="file" type="file" value="Add file">
-        <label for="file">Add file</label>
+        <label for="file" class="pointer">Add file</label>
       </div>
     </div>
     <div class="add-note">
-      <textarea name="add note" cols="30" rows="8" placeholder="Add note"></textarea>
+      <textarea name="add note" cols="30" rows="5" placeholder="Add note"></textarea>
+    </div>
+    <div class="right-footer">
+      <div class="backtotask">
+        <img (click)="showbar()" class=" pointer" src="/assets/images/goback-icon.svg" alt="الرجوع الي المهمة">
+      </div>
+      <div class="delete">
+        <img src="/assets/images/delete-icon.svg" alt="حذف المهمة" title="حذف المهمة" class="pointer">
+      </div>
     </div>
 
   </div>
diff --git a/src/app/languages/english/todo-list/todo-main/todo-main.component.scss b/src/app/languages/english/todo-list/todo-main/todo-main.component.scss
index 3fb2b19..4bf7a47 100644
--- a/src/app/languages/english/todo-list/todo-main/todo-main.component.scss
+++ b/src/app/languages/english/todo-list/todo-main/todo-main.component.scss
@@ -5,7 +5,6 @@
   overflow: hidden;
   z-index: 999;
 }
-
 .taskTop {
   width: 100%;
   display: flex;
@@ -13,25 +12,16 @@
   border-bottom: 1px solid #e9d4d4;
   background: #f5f5f5;
 }
-
 .taskTop p {
   font-weight: 600;
   margin: 1rem 0 0 0.7rem;
   font-size: 1.2rem;
   color: rgba(var(--green));
 }
-
 .taskTop img {
   margin: 1rem 0 0 1.2rem;
   height: 22px;
 }
-
-.taskTop img,
-.sort:hover {
-  cursor: pointer;
-  border-radius: 5px;
-}
-
 .task-container {
   width: 100%;
   min-height: 100vh;
@@ -39,13 +29,11 @@
   flex-direction: column;
   padding: 0.5em;
 }
-
 .add-task-container {
   border: 2px solid rgba(var(--light-green), 0.5);
   background: rgba(var(--light-silver));
   border-radius: 0.5rem;
 }
-
 .myform {
   display: flex;
   width: 100%;
@@ -53,11 +41,9 @@
   flex-direction: column;
   align-items: center;
 }
-
 form label {
   margin-bottom: 0;
 }
-
 .form-label {
   background: white;
   width: 50px;
@@ -66,8 +52,7 @@ form label {
   align-items: center;
   justify-content: center;
 }
-
-.form-input {
+.form-input,.steps-input {
   width: 100%;
   border: none;
   background-color: white;
@@ -77,23 +62,19 @@ form label {
   transition: 0.3 all ease;
   margin: 0px;
 }
-
 .form-input:focus {
   border-bottom: 2px solid rgba(var(--light-green));
 }
-
 .sub-container {
   display: flex;
   width: 90%;
 }
-
 .icon-container {
   display: flex;
   justify-content: flex-start;
   width: 90%;
   align-items: center;
 }
-
 .repeat-list {
   border: none;
   border-radius: 0px;
@@ -101,16 +82,13 @@ form label {
   margin-left: -0.4rem;
   background: #ccc;
 }
-
 .repeat {
   display: flex;
   align-items: center;
 }
-
 .drop-down {
   margin-left: 1rem;
 }
-
 .task-list li {
   min-height: 66px;
   background: #f0ecec;
@@ -119,16 +97,12 @@ form label {
   border-bottom: 2px solid #989494;
   border-radius: 3px;
 }
-
 .task-list ul {
   margin-top: .4rem;
 }
-
 .task-list img {
   float: right;
-  cursor: pointer;
 }
-
 .side-bar,
 .details {
   border-right: 1px solid #e9d4d4;
@@ -138,21 +112,14 @@ form label {
   height: 100vh;
   transition: 0.3s all ease;
 }
-
 .details {
   right: 0;
+  border-left: 1px solid #e9d4d4;
 }
-
-.my-date,
-.mycourses,
-.calendar,
-.People,
-.tasks,
-.todo {
+.my-date,.mycourses,.calendar,.People,.tasks,.todo {
   padding: 1em;
   cursor: pointer;
 }
-
 .my-date img,
 .mycourses img,
 .calendar img,
@@ -162,53 +129,40 @@ form label {
   height: 22px;
   margin-right: .6rem;
 }
-
+.task:hover,
+.add-file:hover,
+.mydate:hover,
+.due-date:hover,
+.repeat:hover,.my-date:hover,
+.mycourses:hover,
+.calendar:hover,
+.People:hover,
+.tasks:hover,
+.todo:hover{
+  background-color: #DDFDD8;
+  border: 1px solid #DDFDD8;
+}
 .sidebar-footer {
   display: flex;
   flex-direction: row;
   border-top: 1px solid #989494;
   justify-content: center;
-  margin-top: 1rem;
-  box-shadow: 5px 5px 10px darkgray;
-}
-
-.hidden {
-  clip-path: ellipse(0px 0px at 0% 0%);
-}
-
-.rightcolomm {
-  z-index: 0;
-  pointer-events: all;
-  transition: opacity 180ms ease;
-  opacity: 0.4;
-  // position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  background: #333;
-}
-
-.task-name,
-.date,
-.add-file,
-.mydate,
-.add-note {
+  margin-top: 14.5rem;
+  box-shadow: -2px -4px 10px darkgray;
+}
+.task-name,.date,.add-file,.mydate,.add-note {
+  cursor: pointer;
+  border: 1px solid #D1D9CF;
   background-color: white;
   margin: 1rem 1rem 0.5rem 1rem;
   height: 110px;
-  cursor: pointer;
+  border-radius: 8px;
 }
-
-.add-file,
-.mydate,
-.due-date,
-.repeat {
+.task,.task-steps,.add-file,.mydate,.due-date,.repeat {
   height: 50px;
   display: flex;
   padding-top: 1em;
 }
-
 .date label,
 .add-file label,
 .mydate label,
@@ -216,37 +170,31 @@ form label {
 .repeat label {
   padding: 0 1em 0 1em;
 }
-
 .mydate span,
 .date span {
   color: gray;
 }
-
 .file-attach input {
-  width: 1px;
-  height: 1px;
-  opacity: 0;
-  overflow: hidden;
   position: absolute;
   z-index: -1;
 }
-
 .file-attach label {
-  width: 100%;
-  height: 100%;
-  display: block;
-  cursor: pointer;
   color: #767678;
 }
-
 .add-note textarea {
   width: 100%;
   padding: 1em;
   font-size: 16px;
 }
-
+.right-footer {
+  display: flex;
+  border-top: 1px solid #989494;
+  justify-content: space-between;
+  margin-top: 2rem;
+  box-shadow: 3px -2px 10px darkgray;
+  padding: 0.5em 0.5em 0 0.5em;
+}
 @media all and (min-width: 900px) {
-
   .side-bar,
   .details {
     width: 400px;
@@ -254,26 +202,10 @@ form label {
     position: inherit;
     transition: none;
   }
-
-  .my-date,
-  .mycourses,
-  .calendar,
-  .People,
-  .tasks,
-  .todo {
-    display: flex;
-    padding: 1em;
-    cursor: pointer;
+  .sidebar-footer{
+    margin-top: 19.6rem;
   }
-
-  .my-date img,
-  .mycourses img,
-  .calendar img,
-  .People img,
-  .tasks img,
-  .todo img {
-    height: 22px;
-    margin-right: .6rem;
+  .right-footer{
+    margin-top: 6.4rem;
   }
-
 }