diff --git a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
index cc207d33..b79cc3c3 100644
--- a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
+++ b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
@@ -211,7 +211,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
       </Box>
 
       <Button
-        onClick={addItem}
+      onClick={addItem}
         variant="contained"
         disabled={!isFormValid}
         sx={{
diff --git a/src/ui_kit/MenuItem.tsx b/src/ui_kit/MenuItem.tsx
index 70254b7e..d2bd1ed5 100755
--- a/src/ui_kit/MenuItem.tsx
+++ b/src/ui_kit/MenuItem.tsx
@@ -31,6 +31,7 @@ export default function MenuItem({
         px: 0,
         pt: "5px",
         pb: "3px",
+        whiteSpace: "break-spaces"
       }}
     >
       <ListItemButton
diff --git a/src/ui_kit/Sidebar/Sidebar.tsx b/src/ui_kit/Sidebar/Sidebar.tsx
index b18e668b..188087cc 100755
--- a/src/ui_kit/Sidebar/Sidebar.tsx
+++ b/src/ui_kit/Sidebar/Sidebar.tsx
@@ -4,7 +4,7 @@ import PencilCircleIcon from "@icons/PencilCircleIcon";
 import PuzzlePieceIcon from "@icons/PuzzlePieceIcon";
 import TagIcon from "@icons/TagIcon";
 import { quizSetupSteps } from "@model/quizSettings";
-import { Box, IconButton, List, Typography, useTheme } from "@mui/material";
+import { Box, IconButton, List, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { useQuizStore } from "@root/quizes/store";
 import { useState } from "react";
 import MenuItem from "../MenuItem";
@@ -32,6 +32,7 @@ export default function Sidebar({ changePage, disableCollapse }: SidebarProps) {
   const currentStep = useQuizStore((state) => state.currentStep);
   const quiz = useCurrentQuiz();
   const { pathname } = useLocation();
+  const isMobile = useMediaQuery(theme.breakpoints.down(650));
   const navigate = useNavigate();
 
   const changeMenuItem = (index: number) => {
@@ -48,17 +49,18 @@ export default function Sidebar({ changePage, disableCollapse }: SidebarProps) {
 
   return (
     <Box
+    id="Sidebar"
       sx={{
         backgroundColor: theme.palette.lightPurple.main,
         minWidth: isMenuCollapsed ? "80px" : "230px",
         width: isMenuCollapsed ? "80px" : "230px",
-        height: "calc(100vh - 80px)",
+        height: isMobile ? "100%" : "calc(100vh - 80px)",
         display: "flex",
         flexDirection: "column",
         py: "19px",
         transitionProperty: "width, min-width",
         transitionDuration: "200ms",
-        overflow: "hidden",
+        overflow: "auto",
         whiteSpace: "nowrap",
         boxSizing: "border-box",
         zIndex: 1,
@@ -72,6 +74,7 @@ export default function Sidebar({ changePage, disableCollapse }: SidebarProps) {
           mb: isMenuCollapsed ? "5px" : undefined,
           alignItems: "center",
           justifyContent: isMenuCollapsed ? "center" : undefined,
+          
         }}
       >
         {!isMenuCollapsed && (
@@ -100,7 +103,7 @@ export default function Sidebar({ changePage, disableCollapse }: SidebarProps) {
           </IconButton>
         )}
       </Box>
-      <List disablePadding>
+      <List disablePadding id="momobibilele">
         {quizSetupSteps.map((menuItem, index) => {
           const Icon = menuItem.sidebarIcon;
 
diff --git a/src/ui_kit/Sidebar/SidebarModal/index.tsx b/src/ui_kit/Sidebar/SidebarModal/index.tsx
index 9286f305..0c639355 100644
--- a/src/ui_kit/Sidebar/SidebarModal/index.tsx
+++ b/src/ui_kit/Sidebar/SidebarModal/index.tsx
@@ -22,7 +22,7 @@ export const SidebarModal = ({
         onClick={handleClick}
         sx={{
           outline: "none",
-          overflow: "hidden",
+          overflow: "auto",
           maxWidth: "230px",
           maxHeight: "400px",
           width: "100%",