diff --git a/src/assets/icons/menuButtonClose.svg b/src/assets/icons/menuButtonClose.svg
new file mode 100644
index 0000000..8a42ca9
--- /dev/null
+++ b/src/assets/icons/menuButtonClose.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="13" viewBox="0 0 22 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Polygon 1" d="M20.5857 9.58566L12.4141 1.41409C11.633 0.633044 10.3667 0.633045 9.58566 1.41409L1.41409 9.58566C0.154162 10.8456 1.0465 12.9999 2.82831 12.9999L19.1715 12.9999C20.9533 12.9999 21.8456 10.8456 20.5857 9.58566Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/menuButtonOpen.svg b/src/assets/icons/menuButtonOpen.svg
new file mode 100644
index 0000000..72dd863
--- /dev/null
+++ b/src/assets/icons/menuButtonOpen.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="13" viewBox="0 0 22 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Polygon 1" d="M1.41421 3.41421L9.58579 11.5858C10.3668 12.3668 11.6332 12.3668 12.4142 11.5858L20.5858 3.41421C21.8457 2.15429 20.9534 1.641e-06 19.1716 1.48523e-06L2.82843 5.64709e-08C1.04662 -9.93e-08 0.154284 2.15428 1.41421 3.41421Z" fill="#009FDE"/>
+</svg>
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index 86599d3..4f63564 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -2,7 +2,7 @@ import LineDefinition from "./toolbar/LineDefinition";
 
 const Toolbar = () => {
   return (
-    <div className="flex justify-between bg-sky-100 absolute w-full top-0 left-0 ">
+    <div className="flex justify-between bg-sky-100 absolute w-full top-0 left-0 h-[9%] ">
       <div className="flex-none">{/* TODO: add butotns */}</div>
       <div className="flex ">{/* TODO: add butotns */}</div>
       <div className="flex-none">
diff --git a/src/components/ruler/Numbers.tsx b/src/components/ruler/Numbers.tsx
index 2f98085..3f67f74 100644
--- a/src/components/ruler/Numbers.tsx
+++ b/src/components/ruler/Numbers.tsx
@@ -19,9 +19,9 @@ const Numbers = ({ labels, startIndex, setStartIndex }: IProps) => {
       {labels.slice(startIndex, startIndex + 21).map((label) => (
         <div
           key={label}
-          className={`text-xl text-color flex flex-col items-center ${flag && label % 50 == 0 ? "font-bold" : !flag && label % 5 === 0 && "font-bold"}`}
+          className={` text-2xl text-color flex flex-col items-center ${flag && label % 50 == 0 ? "font-bold" : !flag && label % 5 === 0 && "font-bold"}`}
         >
-          <div className="h-3 border-l-2 border-gray-900 w-1366 flex-shrink-0" />
+          <div className="h-3 border-l-4 border-gray-900 w-1366 flex-shrink-0" />
           {label}
         </div>
       ))}
diff --git a/src/components/ruler/XAxis.tsx b/src/components/ruler/XAxis.tsx
index 43ebf23..e585df7 100644
--- a/src/components/ruler/XAxis.tsx
+++ b/src/components/ruler/XAxis.tsx
@@ -13,12 +13,12 @@ const XAxis = ({ labels }: IProps) => {
       {labels.length == 101 ? (
         <>
           <Arrows startIndex={startIndex} setStartIndex={setStartIndex} />
-          <div className="stroke-3 stroke-var-black fixed left-0 right-0 flex justify-between border-t-2 border-gray-900 pt-0 mx-0 items-center pl-8 pr-8 ">
+          <div className="stroke-3 stroke-var-black fixed left-0 right-0 flex justify-between border-t-4 border-gray-900 pt-0 mx-0 items-center pl-8 pr-8 ">
             <Numbers labels={labels} startIndex={startIndex} setStartIndex={setStartIndex} />
           </div>
         </>
       ) : (
-        <div className="fixed left-0 right-0 flex justify-between border-t-2 border-gray-900 pt-0 mx-0 items-center pl-8 pr-8 ">
+        <div className="fixed left-0 right-0 flex justify-between border-t-4 border-gray-900 pt-0 mx-0 items-center pl-8 pr-8 ">
           <Numbers labels={labels} startIndex={startIndex} setStartIndex={setStartIndex} />
         </div>
       )}
diff --git a/src/components/toolbar/LineDefinition.tsx b/src/components/toolbar/LineDefinition.tsx
index 0c0b34a..19d5903 100644
--- a/src/components/toolbar/LineDefinition.tsx
+++ b/src/components/toolbar/LineDefinition.tsx
@@ -2,6 +2,9 @@ import { useState } from "react";
 import { Button } from "../ui/button";
 import { LineRange } from "../../type/Line";
 import { useNumbersLineContext } from "../../context/numbersLineContext";
+import openMenu from "../../assets/icons/menuButtonOpen.svg";
+import closeMenu from "../../assets/icons/menuButtonClose.svg";
+
 
 const LineDefinition = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -18,23 +21,40 @@ const LineDefinition = () => {
   };
 
   return (
-    <div className="relative">
-      <Button className={`m-1 text-xl font-bold ${isMenuOpen ? "text-blue-600" : "text-sky-600"}`} variant="ghost" onClick={handleButtonClick}>
-        <span className="mr-3">&#x25BC;</span> הגדרת הישר
+    <div className=" absolute m-2 relative  rounded-md" style={isMenuOpen ? { background: "#009FDE" } : { background: "var(--cyan-100)" }}>
+      <Button
+        className={`m-4 mb-0 mr-0 w-259 text-xl font-bold ${isMenuOpen && "text-white bg-sky-100"}`}
+        variant="ghost"
+        onClick={handleButtonClick}
+        style={isMenuOpen ? { background: "#009FDE" } : { background: "var(--cyan-100)" }}
+      >
+        <img className="m-5" src={isMenuOpen ? closeMenu : openMenu} alt="open/close" />
+        <div
+          className="ml-6  text-capitalize font-Abraham text-32 font-normal "
+          style={
+            isMenuOpen
+              ? { color: "#ffffff", fontFamily: "Abraham", fontSize: "26px", fontWeight: 700 }
+              : { color: "#009FDE", fontFamily: "Abraham", fontSize: "26px", fontWeight: 700 }
+          }
+        >
+          הגדרת הישר
+        </div>
       </Button>
 
       {isMenuOpen && (
-        <div className="absolute top-8 right-0 bg-sky-100 border border-gray-300 rounded-md p-2">
+        <div className="flex flex-col items-end mt-0 rounded-tl-5 right-0  rounded-md p-2 m-2" style={{ background: "#009FDE" }}>
           <Button
-            className="block mb-2 text-blue-600 font-bold"
+            className="bg-white text-block mb-4 mt-6 hover:bg-sky-100 transition"
+            style={{ borderRadius: "20px", fontFamily: "Abraham", fontSize: "20px", fontWeight: 800 }}
             onClick={() => {
               handleMenuButtonClick(LineRange.ten);
             }}
           >
-            0 -10
+            0 - 10
           </Button>
           <Button
-            className="block mb-2 text-blue-600 font-bold"
+            className="bg-white text-block mb-4 hover:bg-sky-100 transition"
+            style={{ borderRadius: "20px", fontFamily: "Abraham", fontSize: "20px", fontWeight: 800 }}
             onClick={() => {
               handleMenuButtonClick(LineRange.twenty);
             }}
@@ -42,20 +62,22 @@ const LineDefinition = () => {
             0 - 20
           </Button>
           <Button
-            className="block mb-2 text-blue-600 font-bold"
+            className="bg-white text-block mb-4 hover:bg-sky-100 transition"
+            style={{ borderRadius: "20px", fontFamily: "Abraham", fontSize: "20px", fontWeight: 800 }}
             onClick={() => {
               handleMenuButtonClick(LineRange.hundred);
             }}
           >
-            0 - 100 (קפיצות של 1)
+            (קפיצות של 1) 100 - 0
           </Button>
           <Button
-            className="block text-blue-600 font-bold"
+            className="bg-white text-block mb-4 hover:bg-sky-100 transition"
+            style={{ borderRadius: "20px", fontFamily: "Abraham", fontSize: "20px", fontWeight: 800 }}
             onClick={() => {
               handleMenuButtonClick(LineRange.hundredCircular);
             }}
           >
-            O0 - 100 (קפיצות של 10)
+            (קפיצות של 10) 100 - 0
           </Button>
         </div>
       )}