diff --git a/yaki_admin/package-lock.json b/yaki_admin/package-lock.json
index 16e3803e0..07c16c249 100644
--- a/yaki_admin/package-lock.json
+++ b/yaki_admin/package-lock.json
@@ -1469,7 +1469,7 @@
     "node_modules/@yaki_ui/yaki_ui_web_components": {
       "version": "1.0.0",
       "resolved": "https://gitpkg.now.sh/XPEHO/yaki_ui/web?feat/web_admin_ui",
-      "integrity": "sha512-i0Poo/DF3Xhvh/OFohdP48DCtDrrjDEBL5yjgwtWdgPQC6Bq8R5dpgk0CNrAofUp2oG0S3Ltwi+SjM3xOI91GQ==",
+      "integrity": "sha512-XNIjy5AgdzvdXcZXQlYeYfoxWxgFU1bAs9uQmYhcY3HlNMRh5igJsy7fewP7XOxu+/z3DQ/uxcmof48sFHr+bA==",
       "license": "ISC"
     },
     "node_modules/abbrev": {
diff --git a/yaki_admin/src/assets/images/avatar_2.png b/yaki_admin/src/assets/images/avatar_2.png
new file mode 100644
index 000000000..cd11c1d5f
Binary files /dev/null and b/yaki_admin/src/assets/images/avatar_2.png differ
diff --git a/yaki_admin/src/assets/images/briefcase-regular-24.png b/yaki_admin/src/assets/images/briefcase-regular-24.png
new file mode 100644
index 000000000..144179f43
Binary files /dev/null and b/yaki_admin/src/assets/images/briefcase-regular-24.png differ
diff --git a/yaki_admin/src/assets/images/chevron-down-regular-24.png b/yaki_admin/src/assets/images/chevron-down-regular-24.png
new file mode 100644
index 000000000..84677e686
Binary files /dev/null and b/yaki_admin/src/assets/images/chevron-down-regular-24.png differ
diff --git a/yaki_admin/src/assets/images/chevron-up-regular-24.png b/yaki_admin/src/assets/images/chevron-up-regular-24.png
new file mode 100644
index 000000000..437bbab39
Binary files /dev/null and b/yaki_admin/src/assets/images/chevron-up-regular-24.png differ
diff --git a/yaki_admin/src/assets/images/dots-vertical-rounded-regular-24.png b/yaki_admin/src/assets/images/dots-vertical-rounded-regular-24.png
new file mode 100644
index 000000000..de71a9b6f
Binary files /dev/null and b/yaki_admin/src/assets/images/dots-vertical-rounded-regular-24.png differ
diff --git a/yaki_admin/src/assets/images/group-regular-24.png b/yaki_admin/src/assets/images/group-regular-24.png
new file mode 100644
index 000000000..2b17fcf2a
Binary files /dev/null and b/yaki_admin/src/assets/images/group-regular-24.png differ
diff --git a/yaki_admin/src/assets/images/hard-hat-regular-24.png b/yaki_admin/src/assets/images/hard-hat-regular-24.png
new file mode 100644
index 000000000..d98676e49
Binary files /dev/null and b/yaki_admin/src/assets/images/hard-hat-regular-24.png differ
diff --git a/yaki_admin/src/assets/images/pencil-regular-24.png b/yaki_admin/src/assets/images/pencil-regular-24.png
new file mode 100644
index 000000000..d73089cf9
Binary files /dev/null and b/yaki_admin/src/assets/images/pencil-regular-24.png differ
diff --git a/yaki_admin/src/assets/images/plus_icon.png b/yaki_admin/src/assets/images/plus_icon.png
new file mode 100644
index 000000000..8806a6856
Binary files /dev/null and b/yaki_admin/src/assets/images/plus_icon.png differ
diff --git a/yaki_admin/src/assets/images/stats.png b/yaki_admin/src/assets/images/stats.png
new file mode 100644
index 000000000..830aa59bb
Binary files /dev/null and b/yaki_admin/src/assets/images/stats.png differ
diff --git a/yaki_admin/src/assets/images/x_close.png b/yaki_admin/src/assets/images/x_close.png
new file mode 100644
index 000000000..1f7001373
Binary files /dev/null and b/yaki_admin/src/assets/images/x_close.png differ
diff --git a/yaki_admin/src/components/ButtonIcon.vue b/yaki_admin/src/components/ButtonIcon.vue
new file mode 100644
index 000000000..03aebcfa5
--- /dev/null
+++ b/yaki_admin/src/components/ButtonIcon.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+});
+
+const classList = ["button--general", "button--color-secondary", "button--height-secondary", "button--icon-text-style"];
+</script>
+
+<template>
+  <button :class="classList">
+    <figure>
+      <img
+        :src="icon"
+        alt="arrow-left" />
+    </figure>
+  </button>
+</template>
diff --git a/yaki_admin/src/components/buttonPrimary.vue b/yaki_admin/src/components/ButtonPrimary.vue
similarity index 89%
rename from yaki_admin/src/components/buttonPrimary.vue
rename to yaki_admin/src/components/ButtonPrimary.vue
index 18f99c9c0..4a5ca22ad 100644
--- a/yaki_admin/src/components/buttonPrimary.vue
+++ b/yaki_admin/src/components/ButtonPrimary.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const props = defineProps({
-  buttonText: {
+  text: {
     type: String,
     required: true,
   },
@@ -19,6 +19,6 @@ const classList = [
 
 <template>
   <button :class="classList">
-    {{ props.buttonText }}
+    {{ props.text }}
   </button>
 </template>
diff --git a/yaki_admin/src/components/buttonSecondary.vue b/yaki_admin/src/components/ButtonSecondary.vue
similarity index 89%
rename from yaki_admin/src/components/buttonSecondary.vue
rename to yaki_admin/src/components/ButtonSecondary.vue
index bf3aeb376..c017eea14 100644
--- a/yaki_admin/src/components/buttonSecondary.vue
+++ b/yaki_admin/src/components/ButtonSecondary.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const props = defineProps({
-  buttonText: {
+  text: {
     type: String,
     required: true,
   },
@@ -19,6 +19,6 @@ const classList = [
 
 <template>
   <button :class="classList">
-    {{ props.buttonText }}
+    {{ props.text }}
   </button>
 </template>
diff --git a/yaki_admin/src/components/ButtonTextIcon.vue b/yaki_admin/src/components/ButtonTextIcon.vue
new file mode 100644
index 000000000..8e5e718ff
--- /dev/null
+++ b/yaki_admin/src/components/ButtonTextIcon.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  icon: {
+    type: String,
+    required: true,
+  },
+});
+
+const classList = [
+  "button--general",
+  "button--color-delete",
+  "button--sized-content",
+  "button--height-secondary",
+  "button--icon-text-style",
+];
+</script>
+
+<template>
+  <button :class="classList">
+    <figure>
+      <img
+        :src="icon"
+        alt="arrow-left" />
+    </figure>
+    <p class="button--text text-uppercase unselectabla-text">{{ text }}</p>
+  </button>
+</template>
diff --git a/yaki_admin/src/components/inputPassword.vue b/yaki_admin/src/components/InputPassword.vue
similarity index 100%
rename from yaki_admin/src/components/inputPassword.vue
rename to yaki_admin/src/components/InputPassword.vue
diff --git a/yaki_admin/src/components/inputText.vue b/yaki_admin/src/components/InputText.vue
similarity index 100%
rename from yaki_admin/src/components/inputText.vue
rename to yaki_admin/src/components/InputText.vue
diff --git a/yaki_admin/src/components/LoggedUserCard.vue b/yaki_admin/src/components/LoggedUserCard.vue
new file mode 100644
index 000000000..6714f8e97
--- /dev/null
+++ b/yaki_admin/src/components/LoggedUserCard.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import avatarIcon from "@/assets/images/avatar_2.png";
+</script>
+
+<template>
+  <article class="user-card__container logged_user_card">
+    <figure class="user-card__avatar">
+      <img
+        :src="avatarIcon"
+        alt="user-card" />
+    </figure>
+    <div class="user-card__wrapper-user-infos">
+      <p class="user-card__name-text">Admin</p>
+      <p>Administrator</p>
+    </div>
+  </article>
+</template>
diff --git a/yaki_admin/src/components/SideBarMenuDropDown.vue b/yaki_admin/src/components/SideBarMenuDropDown.vue
new file mode 100644
index 000000000..aeab169c8
--- /dev/null
+++ b/yaki_admin/src/components/SideBarMenuDropDown.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import sideBarMenuDropDownElement from "./SideBarMenuDropDownElement.vue";
+import groupIcon from "@/assets/images/group-regular-24.png";
+import arrowIcon from "@/assets/images/chevron-down-regular-24.png";
+
+import {useTeamStore} from "@/stores/teamStore";
+import {useRoleStore} from "@/stores/roleStore";
+import {onBeforeMount} from "vue";
+import {selectTeamAndFetchTeammates} from "@/features/captain/services/teamList.service";
+import router from "@/router/router";
+
+const teamStore = useTeamStore();
+const roleStore = useRoleStore();
+
+//before mount, fetch teams, select first team from the saved list, get team name, fetch teammates.
+onBeforeMount(async () => {
+  await teamStore.setTeamListOfACaptain(roleStore.getCaptainsId);
+  // automaticaly select first team right after team fetch, and save name
+
+  if (teamStore.getTeamList.length > 0) {
+    selectTeamAndFetchTeammates(teamStore.getTeamList[0].id);
+  }
+});
+
+const onClickSelectTeam = (id: number) => {
+  selectTeamAndFetchTeammates(id);
+  router.push({path: "/captain/manage-team"});
+};
+
+const props = defineProps({
+  innerText: {
+    type: String,
+    required: true,
+  },
+  iconPath: {
+    type: String,
+    required: true,
+  },
+  isSelected: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <section class="drop-down__container">
+    <div class="text-icon__container text-icon__container-height--padding text_icon--icon drop-down--sidebar-color">
+      <figure>
+        <img
+          :src="groupIcon"
+          alt="group icon" />
+      </figure>
+      <p class="text-icon--text">{{ props.innerText }}</p>
+    </div>
+    <input
+      class="drop-down__checkbox"
+      type="checkbox"
+      id="sidebar-dropdown" />
+    <figure class="drop-down__icon">
+      <img
+        :src="arrowIcon"
+        alt="drop down menu arrow" />
+    </figure>
+    <section
+      v-if="teamStore.getTeamList && teamStore.getTeamList.length > 0"
+      class="drop-down__menu">
+      <side-bar-menu-drop-down-element
+        v-for="(team, index) in teamStore.getTeamList"
+        :key="index"
+        v-bind:id="team.id"
+        v-bind:teamName="team.teamName"
+        @click.prevent="() => onClickSelectTeam(team.id)" />
+    </section>
+    <section
+      v-else
+      class="drop-down__menu">
+      <p class="no-teams">There is no team yet</p>
+    </section>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.no-teams {
+  padding-inline-start: 16px;
+  padding-block: 8px;
+  color: rgb(238, 237, 237);
+}
+</style>
diff --git a/yaki_admin/src/components/SideBarMenuDropDownElement.vue b/yaki_admin/src/components/SideBarMenuDropDownElement.vue
new file mode 100644
index 000000000..14f91cd48
--- /dev/null
+++ b/yaki_admin/src/components/SideBarMenuDropDownElement.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import {useTeamStore} from "@/stores/teamStore";
+
+const teamStore = useTeamStore();
+
+const props = defineProps({
+  teamName: {
+    type: String,
+    required: true,
+  },
+  id: {
+    type: Number,
+    required: true,
+  },
+});
+
+const classList = ["text-icon__container", "drop-down__menu_item--height-padding-color"];
+</script>
+
+<template>
+  <p
+    :class="[
+      classList,
+      {
+        'team-selected': teamStore.isSameTeamId(props.id),
+      },
+    ]">
+    {{ props.teamName }}
+  </p>
+</template>
+
+<style scoped lang="scss">
+.team-selected {
+  padding-inline-start: 16px;
+  background-color: #ffffff;
+
+  &:hover {
+    background-color: #f0eeee;
+  }
+}
+</style>
diff --git a/yaki_admin/src/components/SideBarMenuLink.vue b/yaki_admin/src/components/SideBarMenuLink.vue
new file mode 100644
index 000000000..94e1a5c83
--- /dev/null
+++ b/yaki_admin/src/components/SideBarMenuLink.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+  text: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="text-icon__container text-icon__container-height--padding text_icon--icon text-icon--sidebar-color">
+    <figure>
+      <img
+        :src="icon"
+        alt="close" />
+    </figure>
+    <p class="text-icon--text">{{ props.text }}</p>
+  </div>
+</template>
diff --git a/yaki_admin/src/features/captain/CaptainPage.vue b/yaki_admin/src/features/captain/CaptainPage.vue
index 307fe7f05..439105f36 100644
--- a/yaki_admin/src/features/captain/CaptainPage.vue
+++ b/yaki_admin/src/features/captain/CaptainPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import PageLayout from "@/global-layouts/PageLayout.vue";
-import SideBarCaptainContent from "@/features/captain/components/SideBarCaptainContent.vue";
+import SideBarContent from "@/features/shared/components/SideBarContent.vue";
 
 import {RouterView} from "vue-router";
 </script>
@@ -8,7 +8,7 @@ import {RouterView} from "vue-router";
 <template>
   <page-layout>
     <template v-slot:sidebarContent>
-      <side-bar-captain-content />
+      <side-bar-content />
     </template>
 
     <template v-slot:pageContent>
diff --git a/yaki_admin/src/features/captain/components/SideBarCaptainContent.vue b/yaki_admin/src/features/captain/components/SideBarCaptainContent.vue
deleted file mode 100644
index fb842ef46..000000000
--- a/yaki_admin/src/features/captain/components/SideBarCaptainContent.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import {onBeforeMount} from "vue";
-import SideBarTeamsListElement from "@/features/shared/components/SideBarTeamsListElement.vue";
-import SideBarElement from "@/features/shared/components/SideBarCategoryElement.vue";
-import SideBarButton from "@/features/shared/components/SideBarButton.vue";
-import modalState from "@/features/shared/modal/services/modalState";
-import router from "@/router/router";
-import {MODALMODE} from "@/features/shared/modal/services/modalMode";
-
-import {useTeamStore} from "@/stores/teamStore.js";
-import {useRoleStore} from "@/stores/roleStore";
-import {selectTeamAndFetchTeammates} from "@/features/captain/services/teamList.service";
-
-import vector from "@/assets/images/Vector.png";
-import plusIcon from "@/assets/images/plus.png";
-
-const teamStore = useTeamStore();
-const roleStore = useRoleStore();
-
-//before mount, fetch teams, select first team from the saved list, get team name, fetch teammates.
-onBeforeMount(async () => {
-  await teamStore.setTeamListOfACaptain(roleStore.getCaptainsId);
-  // automaticaly select first team right after team fetch, and save name
-
-  if (teamStore.getTeamList.length > 0) {
-    selectTeamAndFetchTeammates(teamStore.getTeamList[0].id);
-  }
-});
-
-const onClickSelectTeam = (id: number) => {
-  selectTeamAndFetchTeammates(id);
-  router.push({path: ('/captain/manage-team')});
-};
-
-// add team button press to open modal
-const onClickAddTeam = () => {
-  modalState.switchModalVisibility(true, MODALMODE.teamCreate);
-};
-</script>
-
-<template>
-  <side-bar-element
-    v-bind:innerText="'My teams'"
-    v-bind:iconPath="vector"
-    v-bind:isSelected="true" />
-
-  <side-bar-button
-    v-bind:inner-text="'Add team'"
-    v-bind:icon-path="plusIcon"
-    @click="onClickAddTeam" />
-
-  <section class="team-list">
-    <side-bar-teams-list-element
-      v-for="(team, index) in teamStore.getTeamList"
-      :key="index"
-      v-bind:id="team.id"
-      v-bind:teamName="team.teamName"
-      @click.prevent="() => onClickSelectTeam(team.id)" />
-  </section>
-</template>
-@/features/captain/services/teamList.service
diff --git a/yaki_admin/src/features/captain/layouts/PageContentheader.vue b/yaki_admin/src/features/captain/layouts/PageContentheader.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/yaki_admin/src/features/customer/components/SideBarCustomer.vue b/yaki_admin/src/features/customer/components/SideBarCustomer.vue
index c6a41c99c..25ad5489f 100644
--- a/yaki_admin/src/features/customer/components/SideBarCustomer.vue
+++ b/yaki_admin/src/features/customer/components/SideBarCustomer.vue
@@ -12,20 +12,22 @@ const navigateTo = (route: string) => {
 </script>
 
 <template>
-  <side-bar-element
-    v-bind:innerText="'Manage Captains'"
-    v-bind:iconPath="security"
-    v-bind:isSelected="true"
-    @click="navigateTo('/customer/manage-captain')" />
+  <div>
+    <side-bar-element
+      v-bind:innerText="'Manage Captains'"
+      v-bind:iconPath="security"
+      v-bind:isSelected="true"
+      @click="navigateTo('/customer/manage-captain')" />
 
-  <side-bar-element
-    v-bind:innerText="'Manage Teams'"
-    v-bind:iconPath="vector"
-    v-bind:isSelected="true"
-    @click="navigateTo('/customer/manage-team')" />
+    <side-bar-element
+      v-bind:innerText="'Manage Teams'"
+      v-bind:iconPath="vector"
+      v-bind:isSelected="true"
+      @click="navigateTo('/customer/manage-team')" />
 
-  <side-bar-element
-    v-bind:inner-text="'Grant admin rights'"
-    v-bind:icon-path="plusIcon"
-    @click="navigateTo('/customer/admin-invitation')" />
+    <side-bar-element
+      v-bind:inner-text="'Grant admin rights'"
+      v-bind:icon-path="plusIcon"
+      @click="navigateTo('/customer/admin-invitation')" />
+  </div>
 </template>
diff --git a/yaki_admin/src/features/login/components/LoginForm.vue b/yaki_admin/src/features/login/components/LoginForm.vue
index 78aaaebef..8ca334cd9 100644
--- a/yaki_admin/src/features/login/components/LoginForm.vue
+++ b/yaki_admin/src/features/login/components/LoginForm.vue
@@ -1,8 +1,8 @@
 <script>
-import buttonPrimary from "@/components/buttonPrimary.vue";
-import buttonSecondary from "@/components/buttonSecondary.vue";
-import inputText from "@/components/inputText.vue";
-import inputPassword from "@/components/inputPassword.vue";
+import buttonPrimary from "@/components/ButtonPrimary.vue";
+import buttonSecondary from "@/components/ButtonSecondary.vue";
+import inputText from "@/components/InputText.vue";
+import inputPassword from "@/components/InputPassword.vue";
 import {useAuthStore} from "@/stores/authStore";
 
 export default {
@@ -60,10 +60,10 @@ export default {
           @inputValue="onInputPassword" />
 
         <button-primary
-          button-text="SIGN IN"
+          text="SIGN IN"
           @click.prevent="login" />
         <buttonSecondary
-          button-text="FORGOTTEN PASSWORD?"
+          text="FORGOTTEN PASSWORD?"
           @click.prevent="forgottenPassword" />
       </form>
     </div>
diff --git a/yaki_admin/src/features/shared/components/HeaderMain.vue b/yaki_admin/src/features/shared/components/HeaderMain.vue
deleted file mode 100644
index 234ca55b1..000000000
--- a/yaki_admin/src/features/shared/components/HeaderMain.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import Logo from "@/assets/images/LOGO.png";
-</script>
-
-<template>
-  <header class="header-yaki">
-    <figure>
-      <img v-bind:src="Logo" />
-    </figure>
-  </header>
-</template>
-
-<style scoped lang="scss">
-.header-yaki {
-  background-color: #32353c;
-  display: flex;
-  align-items: center;
-
-  padding: 0.5rem;
-
-  figure {
-    width: 3rem;
-    img {
-      width: 100%;
-      aspect-ratio: 1/1;
-    }
-  }
-}
-</style>
diff --git a/yaki_admin/src/features/shared/components/SideBarContent.vue b/yaki_admin/src/features/shared/components/SideBarContent.vue
new file mode 100644
index 000000000..7d1e81e19
--- /dev/null
+++ b/yaki_admin/src/features/shared/components/SideBarContent.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import SideBarMenuLink from "@/components/SideBarMenuLink.vue";
+import sideBarMenuDropDown from "@/components/SideBarMenuDropDown.vue";
+import LoggedUserCard from "@/components/LoggedUserCard.vue";
+
+import Banner from "@/assets/images/splashscreen.svg";
+import caseIcon from "@/assets/images/briefcase-regular-24.png";
+import hatIcon from "@/assets/images/hard-hat-regular-24.png";
+import statIcon from "@/assets/images/stats.png";
+</script>
+
+<template>
+  <nav class="sidebar__container">
+    <div>
+      <figure>
+        <img
+          :src="Banner"
+          alt="" />
+      </figure>
+
+      <side-bar-menu-link
+        :icon="caseIcon"
+        text="Clients" />
+      <side-bar-menu-link
+        :icon="hatIcon"
+        text="Captains" />
+      <side-bar-menu-drop-down
+        inner-text="My teams"
+        icon-path="groupIcon"
+        :is-selected="true" />
+      <side-bar-menu-link
+        :icon="statIcon"
+        text="Statistics" />
+    </div>
+
+    <div>
+      <logged-user-card />
+    </div>
+  </nav>
+</template>
+
+<style scoped lang="scss">
+.sidebar__container {
+  box-sizing: border-box;
+  padding: 16px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 8px;
+
+  background-color: $background-color-theme-secondary;
+
+  figure {
+    width: 65px;
+    padding-inline-start: 16px;
+    padding-block: 32px;
+    img {
+      width: 100%;
+      object-fit: contain;
+    }
+  }
+}
+</style>
diff --git a/yaki_admin/src/features/shared/components/SideBarTeamsListElement.vue b/yaki_admin/src/features/shared/components/SideBarTeamsListElement.vue
deleted file mode 100644
index d814752b7..000000000
--- a/yaki_admin/src/features/shared/components/SideBarTeamsListElement.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script setup lang="ts">
-import editIcon from "@/assets/images/Edit.png";
-import deleteIcon from "@/assets/images/Delete.png";
-import modalState from "@/features/shared/modal/services/modalState";
-import {useTeamStore} from "@/stores/teamStore";
-import {MODALMODE} from "@/features/shared/modal/services/modalMode";
-
-const teamStore = useTeamStore();
-
-const props = defineProps({
-  teamName: {
-    type: String,
-    required: true,
-  },
-  id: {
-    type: Number,
-    required: true,
-  },
-});
-
-const onClickEditTeam = () => {
-  // change input value on edit to have the current team name to edit
-  modalState.switchModalVisibility(true, MODALMODE.teamEdit, props.teamName);
-};
-
-const onClickDeleteTeam = () => {
-  modalState.setTeamName(props.teamName);
-  modalState.switchModalVisibility(true, MODALMODE.teamDelete);
-};
-</script>
-
-<template>
-  <article
-    :class="[
-      'team-list-unit',
-      {
-        'team-list-unit-selected': teamStore.isSameTeamId(props.id),
-      },
-    ]">
-    <p>{{ props.teamName }}</p>
-    <section class="delete-edit-icon">
-      <button @click="onClickEditTeam">
-        <figure>
-          <img
-            class="team-mate-icon"
-            v-bind:src="editIcon"
-            alt="" />
-        </figure>
-      </button>
-      <button @click="onClickDeleteTeam">
-        <figure>
-          <img
-            class="team-mate-icon"
-            v-bind:src="deleteIcon"
-            alt="" />
-        </figure>
-      </button>
-    </section>
-  </article>
-</template>
-
-<style scoped lang="scss">
-.team-list-unit {
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-
-  width: 100%;
-  padding-block: 0.5rem;
-
-  p {
-    width: 40%;
-    font-size: $font-size-sidebar-teamlist-element;
-    user-select: none;
-  }
-
-  .delete-edit-icon {
-    display: flex;
-    gap: 1.2rem;
-    button {
-      border: none;
-      background-color: transparent;
-
-      &:active {
-        transform: scale(0.95);
-      }
-
-      figure {
-        width: 1.3rem;
-        .team-mate-icon {
-          width: 100%;
-          object-fit: contain;
-        }
-      }
-    }
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-.team-list-unit-selected {
-  background-color: #f5cd3d;
-}
-</style>
diff --git a/yaki_admin/src/global-layouts/PageLayout.vue b/yaki_admin/src/global-layouts/PageLayout.vue
index 66a487d22..b5c6c6631 100644
--- a/yaki_admin/src/global-layouts/PageLayout.vue
+++ b/yaki_admin/src/global-layouts/PageLayout.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import HeaderYaki from "@/features/shared/components/HeaderMain.vue";
 import SideBar from "@/global-layouts/SideBar.vue";
 import modalFrame from "@/features/shared/modal/ModalFrame.vue";
 import modalState from "@/features/shared/modal/services/modalState";
@@ -20,11 +19,9 @@ import modalState from "@/features/shared/modal/services/modalState";
 <style scoped lang="scss">
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap");
 .sidebar-content-container-grid {
-  // flex 1 to have this container take the rest of the screen space
-  // See assets/style.scss @app {}
-  flex: 1;
   display: grid;
-  grid-template-columns: minmax(10rem, 18rem) minmax(80%, 1fr);
+  grid-template-columns: minmax(18rem, 20rem) minmax(80%, 1fr);
+  height: 100%;
 }
 .page-content {
   padding: 30px;
diff --git a/yaki_admin/src/global-layouts/SideBar.vue b/yaki_admin/src/global-layouts/SideBar.vue
index 113e23fed..3cfceecfe 100644
--- a/yaki_admin/src/global-layouts/SideBar.vue
+++ b/yaki_admin/src/global-layouts/SideBar.vue
@@ -1,15 +1,3 @@
 <template>
-  <nav class="sidebar">
-    <slot> </slot>
-  </nav>
+  <slot> </slot>
 </template>
-
-<style scoped lang="scss">
-.sidebar {
-  background-color: $color-side-bar-background;
-  padding-block-start: 2.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
-</style>