diff --git a/react-app/src/component/ColorSelector/ColorSelectorAccordion.tsx b/react-app/src/component/ColorSelector/ColorSelectorAccordion.tsx
index c687ea26..d7dde017 100644
--- a/react-app/src/component/ColorSelector/ColorSelectorAccordion.tsx
+++ b/react-app/src/component/ColorSelector/ColorSelectorAccordion.tsx
@@ -48,38 +48,41 @@ export const ColorSelectorAccordion = (props: any) => {
       className="Container"
       style={{
         width: "316px",
-        position: "absolute",
+        // position: "absolute",
         zIndex: 1000,
         top: getColorSelectorPosition(props.position, props.isHorizontal).top,
         left: getColorSelectorPosition(props.position, props.isHorizontal).left,
       }}
     >
-      {!props.isModal && (
-        <div style={{ cursor: "pointer" }}>
-          <CancelIcon
-            style={{
-              position: "absolute",
-              top: "-10px",
-              right: "-10px",
-              cursor: "pointer",
-              color: "#007079",
-            }}
-            onMouseOver={(e) => {
-              e.preventDefault();
-              const target = e.target as SVGAElement;
-              target.style.color = "#1099a5";
-            }}
-            onMouseOut={(e) => {
-              const target = e.target as SVGAElement;
-              target.style.color = "#007079";
-            }}
-            onClick={props.setIsOpen}
-          />
-        </div>
-      )}
       <Accordion>
         <Accordion.Item isExpanded>
-          <Accordion.Header>Color Scales</Accordion.Header>
+          <Accordion.Header>
+            Color Scales
+            {!props.isModal && (
+              <div style={{ cursor: "pointer" }}>
+                <CancelIcon
+                  style={{
+                    // position: "absolute",
+                    top: "-10px",
+                    right: "-10px",
+                    cursor: "pointer",
+                    color: "#007079",
+                  }}
+                  onMouseOver={(e) => {
+                    e.preventDefault();
+                    const target = e.target as SVGAElement;
+                    target.style.color = "#1099a5";
+                  }}
+                  onMouseOut={(e) => {
+                    const target = e.target as SVGAElement;
+                    target.style.color = "#007079";
+                  }}
+                  onClick={props.setIsOpen}
+                />
+              </div>
+            )}
+          </Accordion.Header>
+
           <Accordion.Panel>
             <Accordion>
               <Accordion.Item>
diff --git a/react-app/src/component/Legend/ContinuousLegend.tsx b/react-app/src/component/Legend/ContinuousLegend.tsx
index 7c2444a3..90bfe5d5 100644
--- a/react-app/src/component/Legend/ContinuousLegend.tsx
+++ b/react-app/src/component/Legend/ContinuousLegend.tsx
@@ -401,8 +401,8 @@ export const ContinuousLegend: React.FC<continuousLegendProps> = ({
   return (
     <div
       style={{
-        position: "absolute",
-        left: position ? position.left : " ",
+        // position: "absolute",
+        right: position ? position.left : " ",
         top: position ? position.top : " ",
         zIndex: 999,
       }}
diff --git a/react-app/src/component/Legend/DiscreteLegend.tsx b/react-app/src/component/Legend/DiscreteLegend.tsx
index 660ca575..c3d59f56 100644
--- a/react-app/src/component/Legend/DiscreteLegend.tsx
+++ b/react-app/src/component/Legend/DiscreteLegend.tsx
@@ -274,8 +274,8 @@ export const DiscreteColorLegend: React.FC<discreteLegendProps> = ({
   return (
     <div
       style={{
-        position: "absolute",
-        left: position ? position.left : " ",
+        // position: "absolute",
+        right: position ? position.left : " ",
         top: position ? position.top : " ",
         backgroundColor: "#ffffffcc",
         borderRadius: "5px",