diff --git a/src/cmps/AppHeader.jsx b/src/cmps/AppHeader.jsx
index c547912..ff4b354 100644
--- a/src/cmps/AppHeader.jsx
+++ b/src/cmps/AppHeader.jsx
@@ -9,7 +9,7 @@ import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
 import { logout } from "../store/actions/user.actions";
 
 export function AppHeader({ userData = null }) {
-  const iconStyle = {width: 16, height: 18};
+  const iconStyle = {width: 22, height: 22};
   const navigate = useNavigate();
 
   function onLogOut() {
@@ -23,13 +23,13 @@ export function AppHeader({ userData = null }) {
         <svg
           viewBox="0 0 33 33"
           fill="currentColor"
-          width="20"
-          height="20"
+          width="25"
+          height="25"
           aria-hidden="true"
-          className="icon_da9e87501e"
+          class="icon_da9e87501e"
           data-testid="topbar-icon"
         >
-          <g clipPath="url(#clip0_1150_158978)">
+          <g clip-path="url(#clip0_1150_158978)">
             <path
               d="M20.3812 4.62863C20.3812 2.47439 18.6357 0.728027 16.4826 0.728027C14.3294 0.728027 12.584 2.47439 12.584 4.62863V8.91568C12.584 11.0699 14.3294 12.8163 16.4826 12.8163C18.6357 12.8163 20.3812 11.0699 20.3812 8.91568V4.62863Z"
               fill="url(#paint0_linear_1150_158978)"
@@ -68,8 +68,8 @@ export function AppHeader({ userData = null }) {
               y2="13.595"
               gradientUnits="userSpaceOnUse"
             >
-              <stop offset=".411" stopColor="#6C6CFF" stopOpacity=".9"></stop>
-              <stop offset="1" stopColor="#6C6CFF" stopOpacity=".2"></stop>
+              <stop offset=".411" stop-color="#6C6CFF" stop-opacity=".9"></stop>
+              <stop offset="1" stop-color="#6C6CFF" stop-opacity=".2"></stop>
             </linearGradient>
             <linearGradient
               id="paint1_linear_1150_158978"
@@ -79,8 +79,8 @@ export function AppHeader({ userData = null }) {
               y2="16.521"
               gradientUnits="userSpaceOnUse"
             >
-              <stop offset=".411" stopColor="#6C6CFF" stopOpacity=".9"></stop>
-              <stop offset="1" stopColor="#6C6CFF" stopOpacity=".2"></stop>
+              <stop offset=".411" stop-color="#6C6CFF" stop-opacity=".9"></stop>
+              <stop offset="1" stop-color="#6C6CFF" stop-opacity=".2"></stop>
             </linearGradient>
             <linearGradient
               id="paint2_linear_1150_158978"
@@ -90,8 +90,8 @@ export function AppHeader({ userData = null }) {
               y2="21.306"
               gradientUnits="userSpaceOnUse"
             >
-              <stop offset=".411" stopColor="#6C6CFF" stopOpacity=".9"></stop>
-              <stop offset="1" stopColor="#6C6CFF" stopOpacity=".2"></stop>
+              <stop offset=".411" stop-color="#6C6CFF" stop-opacity=".9"></stop>
+              <stop offset="1" stop-color="#6C6CFF" stop-opacity=".2"></stop>
             </linearGradient>
             <linearGradient
               id="paint3_linear_1150_158978"
@@ -101,8 +101,8 @@ export function AppHeader({ userData = null }) {
               y2="21.333"
               gradientUnits="userSpaceOnUse"
             >
-              <stop offset=".411" stopColor="#6C6CFF" stopOpacity=".9"></stop>
-              <stop offset="1" stopColor="#6C6CFF" stopOpacity=".2"></stop>
+              <stop offset=".411" stop-color="#6C6CFF" stop-opacity=".9"></stop>
+              <stop offset="1" stop-color="#6C6CFF" stop-opacity=".2"></stop>
             </linearGradient>
             <linearGradient
               id="paint4_linear_1150_158978"
@@ -112,8 +112,8 @@ export function AppHeader({ userData = null }) {
               y2="16.52"
               gradientUnits="userSpaceOnUse"
             >
-              <stop offset=".411" stopColor="#6C6CFF" stopOpacity=".9"></stop>
-              <stop offset="1" stopColor="#6C6CFF" stopOpacity=".2"></stop>
+              <stop offset=".411" stop-color="#6C6CFF" stop-opacity=".9"></stop>
+              <stop offset="1" stop-color="#6C6CFF" stop-opacity=".2"></stop>
             </linearGradient>
             <clipPath id="clip0_1150_158978">
               <path fill="#fff" d="M0 0H33V33H0z"></path>
diff --git a/src/cmps/BoardDetailsHeader.jsx b/src/cmps/BoardDetailsHeader.jsx
index 9ec4266..e4fcd63 100644
--- a/src/cmps/BoardDetailsHeader.jsx
+++ b/src/cmps/BoardDetailsHeader.jsx
@@ -1,9 +1,9 @@
 import ArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import HomeIcon from "@mui/icons-material/HomeOutlined";
 import HorizDotsIcon from "@mui/icons-material/MoreHorizOutlined";
-import SearchIcon from '@mui/icons-material/SearchOutlined';
+import SearchIcon from "@mui/icons-material/SearchOutlined";
 export function BoardDetailsHeader({ boardTitle }) {
-  const iconStyle = { width: 18, height: 16 };
+  const iconStyle = { width: 20, height: 18 };
   return (
     <header className="board-details-header">
       <br />
@@ -13,8 +13,10 @@ export function BoardDetailsHeader({ boardTitle }) {
       </div>
       <section className="board-nav">
         <div>
-          <HomeIcon style={iconStyle} />
-          <h6>Main Table</h6>
+          <div>
+            <HomeIcon style={iconStyle} />
+            <h5>Main Table</h5>
+          </div>
           <HorizDotsIcon style={iconStyle} />
           <hr className="highlight" />
         </div>
@@ -24,12 +26,12 @@ export function BoardDetailsHeader({ boardTitle }) {
         <div className="newTask-button">
           <div className="new-task-button">New Item</div>
           <div className="arrow-down">
-            <ArrowDownIcon style={iconStyle} />
+            <ArrowDownIcon style={{...iconStyle, height:20}} />
           </div>
         </div>
         <div className="choice-div">
-            <SearchIcon style={iconStyle} />
-            <small>Search</small>
+          <SearchIcon style={iconStyle} />
+          <small>Search</small>
         </div>
       </section>
     </header>
diff --git a/src/cmps/MainInnerIndex.jsx b/src/cmps/MainInnerIndex.jsx
index 2b31ac4..4e6ed0a 100644
--- a/src/cmps/MainInnerIndex.jsx
+++ b/src/cmps/MainInnerIndex.jsx
@@ -5,6 +5,8 @@ import { loadBoards } from "../store/actions/boards.actions.js";
 import { addBoard, updateBoardName } from "../store/actions/boards.actions.js";
 import { loadUsers, logout } from "../store/actions/user.actions.js";
 import { BoardCard } from "./BoardCard.jsx";
+import ArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+
 
 export function MainInnerIndex({ user, isBoard, boards }) {
   const navigate = useNavigate();
@@ -12,6 +14,8 @@ export function MainInnerIndex({ user, isBoard, boards }) {
     loadBoardsAndUsers()
   }, []);
 
+  const iconStyle = { width: 22, height: 22 };
+
 
   function loadBoardsAndUsers() {
     loadBoards()
@@ -26,12 +30,16 @@ export function MainInnerIndex({ user, isBoard, boards }) {
   return !isBoard ? (
     <div className="main-inner-index">
       <section className="welcome-section">
-        <h3>Hello {user.fullName}!</h3>
-        <h3>Quickly access your recent boards, Inbox and workspaces</h3>
+        <small>Hello {user.fullName}!</small>
+        <small id="bold">Quickly access your recent boards, Inbox and workspaces</small>
       </section>
-      <section className="recently-viewed-section">
-        <h3>Recently viewed</h3>
-
+      <hr />
+      <br />
+      <section className="recently-visited-section">
+        <div className="recently-visited-header">
+          <ArrowDownIcon style={iconStyle} />
+          <h4>Recently visited</h4>
+        </div>
         <div className="boards-container">
           {boards.map((board) => (
             <BoardCard key={board.id} board={board} onUpdateBoardName={onUpdateBoardName} />
diff --git a/src/cmps/SideBar.jsx b/src/cmps/SideBar.jsx
index ca6aa8a..99567f2 100644
--- a/src/cmps/SideBar.jsx
+++ b/src/cmps/SideBar.jsx
@@ -22,7 +22,7 @@ export function SideBar({ boards, user, onRemoveBoard }) {
     addBoard();
   }
 
-  const iconStyle = { width: 18, height: 16 };
+  const iconStyle = { width: 22, height: 22 };
 
   return (
     <nav className="side-bar">
@@ -35,12 +35,12 @@ export function SideBar({ boards, user, onRemoveBoard }) {
         }
       >
         <HomeIcon className="side-bar-icon home" style={iconStyle} />
-        <h4>Home</h4>
+        <p>Home</p>
       </section>
       {/* My Work Section */}
       <section>
         <MyWorkIcon className="side-bar-icon myWork" style={iconStyle} />
-        <h4>My Work</h4>
+        <p>My Work</p>
       </section>
 
       <hr />
@@ -48,26 +48,27 @@ export function SideBar({ boards, user, onRemoveBoard }) {
       {/* Favorites Section */}
       <section>
         <FavoritesIcon className="side-bar-icon favorites" style={iconStyle} />
-        <h4>Favorites</h4>
+        <p>Favorites</p>
       </section>
 
       <hr />
 
       {/* Workspaces Section */}
-      <section>
+      <div className="workspaces">
+        <section>
         <WorkspacesIcon className="side-bar-icon work" style={iconStyle} />
-        <h4>Workspaces</h4>
-      </section>
-
-      <div className="add-board">
+        <p>Workspaces</p>          
+        </section>
+        <div className="add-board">
         <div>
           <h3>Main Workspace</h3>
           <ArrowDownIcon style={iconStyle} />
         </div>
         <button className="add-board-button" onClick={handleAddBoard}>
-          <PlusIcon style={{ height: 20, width: 22 }} />
+          <PlusIcon style={{width: 28, height: 26}} />
         </button>
       </div>
+      </div>
 
       {/* Board List */}
       <ul className="sidebar-boardlist">
@@ -83,7 +84,7 @@ export function SideBar({ boards, user, onRemoveBoard }) {
                 )
               }
             >
-              <BoardIcon style={{ width: 16, height: 16 }} />
+              <BoardIcon style={iconStyle} />
               {/* Board Title Navigation */}
               <h3>{board.title}</h3>
 
diff --git a/src/styles/_Board-details-header.scss b/src/styles/_Board-details-header.scss
index 85f7354..862cb22 100644
--- a/src/styles/_Board-details-header.scss
+++ b/src/styles/_Board-details-header.scss
@@ -3,7 +3,7 @@
 }
 
 .boardTitle {
-  font-size: 0.8rem;
+  font-size: 1.1rem;
   display: inline-flex;
   align-items: center;
   gap: 1rem;
@@ -21,11 +21,12 @@
   align-items: center;
   gap: 1rem;
   margin-top: 0.5rem;
-  & > div {
+  & div {
     display: flex;
     align-items: center;
     gap: 0.2rem;
-    & h6 {
+    & h5 {
+        font-size: 14px;
       font-weight: 500;
     }
     margin-bottom: 0.1rem;
@@ -76,20 +77,19 @@ header.board-details-header {
         border: none;
         color: #3f3f3f;
         background-color: #fff;
-        font-size: 1rem;
         cursor: pointer;
         border-top-left-radius: 5px;
         border-bottom-left-radius: 5px;
         color: white;
         .new-task-button{
-            font-size: 11px;
+            font-size: 14px;
             font-weight: 500;
             padding: 6px;
             padding-bottom: 6.5px;
             padding-left: 8px;
             padding-right: 8px;
-            border-top-left-radius: 3px;
-            border-bottom-left-radius: 3px;
+            border-top-left-radius: 5px;
+            border-bottom-left-radius: 5px;
             background-color: #0073ea;
         }
         & .arrow-down{
@@ -111,6 +111,10 @@ header.board-details-header {
         padding: 4px;
         border-radius: 2.5px;
         cursor: pointer;
+        & small{
+            font-size: 15px;
+            font-weight: 500;
+        }
         &:hover{
             background-color: rgba(103, 104, 121, 0.1);
         }
diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index 89d43ba..8a2ecfa 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -2,9 +2,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding:3px;
+  padding:8px;
   padding-left: 20px;
-  padding-right: 12px;
+  padding-right: 22px;
 
   top: 0;
   div {
@@ -36,7 +36,7 @@
 .icons-section {
   display: flex;
   align-items: center;
-  gap: 0.8rem;
+  gap: 1.2rem;
 }
 
 .vertical-line {
@@ -50,6 +50,7 @@
   display: flex;
   align-items: center;
   gap: 6px;
+  font-size: 22px;
   &  .lighter{
     font-weight: 450;
   }
diff --git a/src/styles/_mainInnerIndex.scss b/src/styles/_mainInnerIndex.scss
index fb1691f..da63ac3 100644
--- a/src/styles/_mainInnerIndex.scss
+++ b/src/styles/_mainInnerIndex.scss
@@ -1,29 +1,44 @@
 .main-inner-index {
-  padding: 2rem;
-  font-family: 'Roboto', sans-serif;
+  display: grid;
+  grid-template-rows: 48px 1px 35px 1fr;
+  padding-top: 0.8rem;
+  font-family: "Roboto", sans-serif;
   box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.6);
   border-top-left-radius: 5px;
   background-color: #fff;
   border-top-left-radius: 12px;
 
-
   .welcome-section {
-    margin-bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    padding-left: 1.5rem;
+    padding-top: 0.22rem;
 
-    h3 {
-      font-size: 1.5rem;
-      font-weight: 500;
+    small {
       color: #333;
-      margin: 0.5rem 0;
+      font-size: 15px;
+    }
+    #bold {
+      font-weight: 550;
     }
   }
 
-  .recently-viewed-section {
-    h3 {
-      font-size: 1.25rem;
-      font-weight: 500;
-      color: #333;
+  hr{
+    margin-top: 0.4rem ;
+  }
+
+  .recently-visited-section {
+    padding-left: 2.5rem;
+    & > .recently-visited-header {
+      display: flex;
+      align-items: center;
       margin-bottom: 1rem;
+      h4 {
+        font-size: 1.1rem;
+        font-weight: 800;
+        color: #333;
+      }
     }
 
     .boards-container {
@@ -62,4 +77,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/styles/_mondayIndex.scss b/src/styles/_mondayIndex.scss
index 1de177b..8f0b441 100644
--- a/src/styles/_mondayIndex.scss
+++ b/src/styles/_mondayIndex.scss
@@ -6,15 +6,11 @@
 
 .content {
   display: grid;
-  grid-template-columns: 200px 1fr;
+  grid-template-columns: 255px 1fr;
   gap: 10px;
   height: 100%;
 }
 
-header {
-  grid-column: 1 / -1;
-}
-
 .side-bar {
   grid-column: 1 / 2;
   height: 100%;
@@ -22,9 +18,6 @@ header {
 }
 
 .main-inner-index {
-  grid-column: 2 / 3;
   height: 100%;
   overflow-y: auto;
-  display: grid;
-  grid-template-rows: 100px 1fr;
 }
\ No newline at end of file
diff --git a/src/styles/_sideBar.scss b/src/styles/_sideBar.scss
index e36125c..8adb995 100644
--- a/src/styles/_sideBar.scss
+++ b/src/styles/_sideBar.scss
@@ -2,32 +2,41 @@
 
 .side-bar {
   color: #333;
-  width: 200px;
+  // width: 200px;
   background: linear-gradient(135deg, #ffffff 5%, #eceff8 100%);
   // background: linear-gradient(135deg, #0073ea 5%, #00c6ff 100%);
   display: flex;
   flex-direction: column;
-  padding-left: 0.4rem;
+  padding-left: 0.8rem;
+  padding-top: 0.375rem;
   font-family: "Roboto", sans-serif;
   border-top-right-radius: 12px;
   // border-bottom-right-radius: 12px;
   font-size: 10px;
   overflow-x: hidden;
 
+  & .workspaces{
+    display: flex;
+    flex-direction: column;
+  }
+
   section {
-    font-size: 12px;
+    font-size: 14px;
     display: flex;
     align-items: center;
-    margin: 0.3rem;
-    margin-left: 0.4rem;
+    margin-top: 0.075rem;
+    margin-bottom: 0.075rem ;
     cursor: pointer;
     transition: background-color 0.3s;
+    padding: 0.3rem;
+    width: 95%;
+    border-radius: 4px;
 
     &:hover {
-      background-color: #f5f0f0;
+      background-color: rgba(103, 104, 121, 0.1);
     }
 
-    h4 {
+    p {
       margin-left: 0.5rem;
       font-weight: 500;
       color: #333;
@@ -66,6 +75,7 @@
       padding:5px;
       border-radius: 4px;
       & h3 {
+        font-size: 14px;
         font-weight: 500;
       }
       display: flex;
@@ -90,7 +100,6 @@
   gap: 4px;
   background-color: #fff;
   padding: 0.5em;
-  margin-top: 1rem;
   color: #323338;
   & > div {
     display: flex;
@@ -99,6 +108,7 @@
     cursor: pointer;
     padding: 3px;
     border: 1px solid #c3c6d4;
+    font-size: 12px;
     border-radius: 3px;
     &:hover {
       background-color: rgba(103, 104, 121, 0.1);