diff --git a/src/components/dropWrapper/index.tsx b/src/components/dropWrapper/index.tsx
index 3ebd431..efa1ffa 100644
--- a/src/components/dropWrapper/index.tsx
+++ b/src/components/dropWrapper/index.tsx
@@ -118,7 +118,6 @@ const DropWrapper: React.FC<Props> = ({
       setColumnNumber(true);
       return;
     }
-
     if (
       event.currentTarget.contains(event.relatedTarget) ||
       event?.target?.innerHTML?.includes('span')
diff --git a/src/components/leftPanel/index.tsx b/src/components/leftPanel/index.tsx
index 5d3efe0..b8bd8e8 100644
--- a/src/components/leftPanel/index.tsx
+++ b/src/components/leftPanel/index.tsx
@@ -295,6 +295,9 @@ const LeftPanel: React.FC<any> = ({
                 CTID={card?.CTID}
                 id={card.Id}
                 type={card?.URI}
+                isDraggableCardVisibleMethod={(isDragTure: boolean) =>
+                  setDraggableCardVisible(isDragTure)
+                }
                 setLeftpanelSelectedElem={setLeftpanelSelectedElem}
               />
             ))}
diff --git a/src/components/multiCards/index.tsx b/src/components/multiCards/index.tsx
index 4df0902..5371ec6 100644
--- a/src/components/multiCards/index.tsx
+++ b/src/components/multiCards/index.tsx
@@ -61,6 +61,7 @@ interface Props {
   setIsConditionalEditing?: (a: boolean) => void;
   isConditionalEditing?: (a: boolean) => void;
   getComponentConditionData?: (data: any) => void;
+  abc: (a: any) => void;
 }
 
 const MultiCard: React.FC<Props> = ({
@@ -89,6 +90,7 @@ const MultiCard: React.FC<Props> = ({
   setDraggableCardVisible,
   setIsConditionalEditing,
   getComponentConditionData,
+  abc,
 }) => {
   const [showPopover, setShowPopover] = useState(false);
 
@@ -119,6 +121,7 @@ const MultiCard: React.FC<Props> = ({
   };
 
   const onDragStart = (e: any) => {
+    abc(null);
     updateXarrow();
     setIsZoomDisabled(true);
     const target = e.target;
@@ -154,6 +157,7 @@ const MultiCard: React.FC<Props> = ({
     !!setDraggableCardVisible && setDraggableCardVisible(false);
 
     e.target.style.visibility = 'visible';
+
     updateXarrow();
   };
 
@@ -335,6 +339,11 @@ const MultiCard: React.FC<Props> = ({
           (level: any) => data?.HasProgressionLevel === level?.CTID
         )?.Name
       : 'Pathway';
+
+  const onDropHandler = (e: any, draggableSide: string) => {
+    abc({ ...data, draggableSide });
+  };
+
   return (
     <>
       {isDraggableCardVisible ? (
@@ -342,13 +351,18 @@ const MultiCard: React.FC<Props> = ({
           <div
             id="verticalBorder"
             draggable={true}
+            onDrop={(e: any) => onDropHandler(e, 'left')}
             className={styles.draggableAreaBox}
           ></div>
           <div id="multiCard-Wrapper">
-            <div
-              id="horizontalBorder"
-              className={styles.draggableAreaBox + ' ' + styles.hori}
-            ></div>
+            {data.RowNumber > 1 && (
+              <div
+                id="horizontalBorder"
+                draggable
+                onDrop={(e: any) => onDropHandler(e, 'upper')}
+                className={styles.draggableAreaBox + ' ' + styles.hori}
+              ></div>
+            )}
             <div
               className={`${styles.multiCardWrapper} ${
                 (skipPreSelect && isAddDestination && destinationComponent) ||
@@ -588,10 +602,15 @@ const MultiCard: React.FC<Props> = ({
             </div>
             <div
               id="horizontalBorder"
+              onDrop={(e: any) => onDropHandler(e, 'lower')}
               className={styles.draggableAreaBox + ' ' + styles.hori}
             ></div>
           </div>
-          <div className={styles.draggableAreaBox}></div>
+          <div
+            className={styles.draggableAreaBox}
+            id="verticalBorder"
+            onDrop={(e: any) => onDropHandler(e, 'right')}
+          ></div>
         </div>
       ) : (
         <div
diff --git a/src/screens/homePage/index.tsx b/src/screens/homePage/index.tsx
index 643fb4a..aa362f8 100644
--- a/src/screens/homePage/index.tsx
+++ b/src/screens/homePage/index.tsx
@@ -191,7 +191,6 @@ const HomePage: React.FC<Props> = ({
     event.stopPropagation();
     setIsConditionalModalStatus(true);
     setConnectionsCTID(connections);
-    getComponentConditionData;
     const filteredEndComponent = [
       ...pathwayComponentCards,
       ...updatedPathwayComponentConditionCards,
@@ -397,6 +396,308 @@ const HomePage: React.FC<Props> = ({
   ) => {
     const updatedPathwayWrapper = { ...pathwayComponent };
 
+    if (!_.isUndefined(xyz) && !_.isNull(xyz) && !xyz.destinationColumn) {
+      const { draggableSide } = xyz;
+      const conditionalComponentOutOfProgressionLevel =
+        updatedPathwayComponentConditionCards?.filter(
+          (conditional_Card: any) =>
+            _.toString(conditional_Card?.HasProgressionLevel) !==
+            _.toString(xyz?.HasProgressionLevel)
+        );
+
+      const restConditionalComponentInProgressionLevel =
+        updatedPathwayComponentConditionCards?.filter(
+          (conditional_Card: any) =>
+            _.toString(conditional_Card?.HasProgressionLevel) ===
+            _.toString(xyz?.HasProgressionLevel)
+        );
+
+      const componentCardInProgressionLevel =
+        pathwayComponent?.PathwayComponents?.filter(
+          (card: any) => card?.HasProgressionLevel === xyz?.HasProgressionLevel
+        );
+
+      let updatedPathwayComponentArray: any = [];
+      let updatedConditionalArray: any = [];
+      let updatedCard: any;
+      if (draggableSide === 'right') {
+        updatedCard = {
+          ...card,
+          ColumnNumber: xyz.ColumnNumber + 1,
+          RowNumber: xyz.RowNumber,
+          HasProgressionLevel: xyz.HasProgressionLevel,
+        };
+      }
+      if (draggableSide === 'left') {
+        updatedCard = {
+          ...card,
+          ColumnNumber: xyz.ColumnNumber,
+          RowNumber: xyz.RowNumber,
+          HasProgressionLevel: xyz.HasProgressionLevel,
+        };
+      }
+      if (draggableSide === 'lower') {
+        updatedCard = {
+          ...card,
+          ColumnNumber: xyz.ColumnNumber,
+          RowNumber: xyz.RowNumber + 1,
+          HasProgressionLevel: xyz.HasProgressionLevel,
+        };
+
+        const componentCardInProgressionLevel =
+          pathwayComponent?.PathwayComponents?.filter(
+            (card: any) =>
+              card?.HasProgressionLevel === xyz?.HasProgressionLevel &&
+              card.ColumnNumber === xyz.ColumnNumber
+          );
+        updatedPathwayComponentArray = componentCardInProgressionLevel.map(
+          (a: any) => ({
+            ...a,
+            RowNumber: a?.destinationColumn
+              ? a?.RowNumber
+              : updatedCard.RowNumber <= a?.RowNumber
+              ? a?.RowNumber + 1
+              : a?.RowNumber,
+          })
+        );
+
+        const conditionalCardInProgressionLevel =
+          restConditionalComponentInProgressionLevel.filter(
+            (card: any) =>
+              card?.HasProgressionLevel === xyz?.HasProgressionLevel &&
+              card.ColumnNumber === xyz.ColumnNumber
+          );
+
+        const conditionalCardOutOfColumn =
+          restConditionalComponentInProgressionLevel.filter(
+            (card: any) =>
+              card?.HasProgressionLevel === xyz?.HasProgressionLevel &&
+              card.ColumnNumber !== xyz.ColumnNumber
+          );
+
+        updatedConditionalArray = conditionalCardInProgressionLevel.map(
+          (a: any) => ({
+            ...a,
+            RowNumber:
+              updatedCard.RowNumber <= a?.RowNumber
+                ? a.RowNumber + 1
+                : a.RowNumber,
+          })
+        );
+        let allPathwayComponentCard: any;
+        if (card?.Type !== 'conditional') {
+          allPathwayComponentCard = [
+            ...updatedPathwayWrapper.PathwayComponents,
+            ...updatedPathwayComponentArray,
+            updatedCard,
+          ];
+        } else {
+          allPathwayComponentCard = [
+            ...updatedPathwayWrapper.PathwayComponents,
+            ...updatedPathwayComponentArray,
+          ];
+        }
+        const allComponentConditionalCard = [
+          ...conditionalComponentOutOfProgressionLevel,
+          ...updatedConditionalArray,
+          ...conditionalCardOutOfColumn,
+        ];
+
+        const uniqueAllPathwayComponentArray = [
+          ...new Map(
+            allPathwayComponentCard.map((item: any) => [item['CTID'], item])
+          ).values(),
+        ];
+        updatedPathwayWrapper.ComponentConditions = allComponentConditionalCard;
+        updatedPathwayWrapper.PathwayComponents =
+          uniqueAllPathwayComponentArray;
+        dispatch(updateMappedDataRequest(updatedPathwayWrapper));
+
+        return;
+      }
+
+      if (draggableSide === 'upper') {
+        updatedCard = {
+          ...card,
+          ColumnNumber: xyz.ColumnNumber,
+          RowNumber: xyz.RowNumber - 1,
+          HasProgressionLevel: xyz.HasProgressionLevel,
+        };
+
+        const componentCardInProgressionLevel =
+          pathwayComponent?.PathwayComponents?.filter(
+            (card: any) =>
+              card?.HasProgressionLevel === xyz?.HasProgressionLevel &&
+              card.ColumnNumber === xyz.ColumnNumber
+          );
+        if (
+          componentCardInProgressionLevel.some(
+            (card: any) => card.RowNumber === updatedCard.RowNumber
+          )
+        ) {
+          updatedCard = {
+            ...card,
+            ColumnNumber: xyz.ColumnNumber,
+            RowNumber: xyz.RowNumber,
+            HasProgressionLevel: xyz.HasProgressionLevel,
+          };
+
+          updatedPathwayComponentArray = componentCardInProgressionLevel.map(
+            (a: any) => ({
+              ...a,
+              RowNumber: a?.destinationColumn
+                ? a?.RowNumber
+                : updatedCard.RowNumber <= a?.RowNumber
+                ? a?.RowNumber + 1
+                : a?.RowNumber,
+            })
+          );
+
+          const conditionalCardInProgressionLevel =
+            restConditionalComponentInProgressionLevel.filter(
+              (card: any) =>
+                card?.HasProgressionLevel === xyz?.HasProgressionLevel &&
+                card.ColumnNumber === xyz.ColumnNumber
+            );
+
+          const conditionalCardOutOfColumn =
+            restConditionalComponentInProgressionLevel.filter(
+              (card: any) =>
+                card?.HasProgressionLevel === xyz?.HasProgressionLevel &&
+                card.ColumnNumber !== xyz.ColumnNumber
+            );
+
+          updatedConditionalArray = conditionalCardInProgressionLevel.map(
+            (a: any) => ({
+              ...a,
+              RowNumber:
+                updatedCard.RowNumber <= a?.RowNumber
+                  ? a.RowNumber + 1
+                  : a.RowNumber,
+            })
+          );
+
+          const allComponentConditionalCard = [
+            ...conditionalComponentOutOfProgressionLevel,
+            ...updatedConditionalArray,
+            ...conditionalCardOutOfColumn,
+          ];
+          let allPathwayComponentCard: any;
+          if (card?.Type !== 'conditional') {
+            allPathwayComponentCard = [
+              ...updatedPathwayWrapper.PathwayComponents,
+              ...updatedPathwayComponentArray,
+              updatedCard,
+            ];
+          } else {
+            allPathwayComponentCard = [
+              ...updatedPathwayWrapper.PathwayComponents,
+              ...updatedPathwayComponentArray,
+            ];
+          }
+          const uniqueAllPathwayComponentArray = [
+            ...new Map(
+              allPathwayComponentCard.map((item: any) => [item['CTID'], item])
+            ).values(),
+          ];
+          updatedPathwayWrapper.ComponentConditions =
+            allComponentConditionalCard;
+          updatedPathwayWrapper.PathwayComponents =
+            uniqueAllPathwayComponentArray;
+          dispatch(updateMappedDataRequest(updatedPathwayWrapper));
+          return;
+        } else {
+          let allPathwayComponentCard: any;
+
+          if (card?.Type !== 'conditional') {
+            allPathwayComponentCard = [
+              ...updatedPathwayWrapper.PathwayComponents,
+              updatedCard,
+            ];
+          } else {
+            allPathwayComponentCard = [
+              ...updatedPathwayWrapper.PathwayComponents,
+            ];
+          }
+
+          // const allPathwayComponentCard = [
+          //   ...updatedPathwayWrapper.PathwayComponents,
+          //   updatedCard,
+          // ];
+
+          const uniqueAllPathwayComponentArray = [
+            ...new Map(
+              allPathwayComponentCard.map((item: any) => [item['CTID'], item])
+            ).values(),
+          ];
+
+          updatedPathwayWrapper.PathwayComponents =
+            uniqueAllPathwayComponentArray;
+          dispatch(updateMappedDataRequest(updatedPathwayWrapper));
+        }
+        return;
+      }
+      updatedPathwayComponentArray = componentCardInProgressionLevel.map(
+        (a: any) => ({
+          ...a,
+          ColumnNumber: a?.destinationColumn
+            ? a?.ColumnNumber
+            : updatedCard.ColumnNumber <= a?.ColumnNumber
+            ? a?.ColumnNumber + 1
+            : a?.ColumnNumber,
+        })
+      );
+      updatedConditionalArray = restConditionalComponentInProgressionLevel.map(
+        (a: any) => ({
+          ...a,
+          ColumnNumber:
+            updatedCard.ColumnNumber <= a?.ColumnNumber
+              ? a.ColumnNumber + 1
+              : a.ColumnNumber,
+        })
+      );
+
+      const allComponentConditionalCard = [
+        ...conditionalComponentOutOfProgressionLevel,
+        ...updatedConditionalArray,
+      ];
+
+      let allPathwayComponentCard: any;
+
+      if (card?.Type !== 'conditional') {
+        allPathwayComponentCard = [
+          ...updatedPathwayWrapper.PathwayComponents,
+          ...updatedPathwayComponentArray,
+          updatedCard,
+        ];
+      } else {
+        allPathwayComponentCard = [
+          ...updatedPathwayWrapper.PathwayComponents,
+          ...updatedPathwayComponentArray,
+        ];
+      }
+
+      // const allPathwayComponentCard = [
+      //   ...updatedPathwayWrapper.PathwayComponents,
+      //   ...updatedPathwayComponentArray,
+      //   updatedCard,
+      // ];
+
+      const uniqueAllPathwayComponentArray = [
+        ...new Map(
+          allPathwayComponentCard.map((item: any) => [item['CTID'], item])
+        ).values(),
+      ];
+
+      updatedPathwayWrapper.ComponentConditions = allComponentConditionalCard;
+      updatedPathwayWrapper.PathwayComponents = uniqueAllPathwayComponentArray;
+      dispatch(updateMappedDataRequest(updatedPathwayWrapper));
+
+      return;
+    }
+    // if (columnNumberEsixt) {
+    //   return;
+    // }
     if (!destinationColumn) {
       card.destinationColumn = false;
     }
@@ -408,13 +709,22 @@ const HomePage: React.FC<Props> = ({
       updatedPathwayWrapper?.Pathway?.HasDestinationComponent !== '';
 
     if (isComponentTab) {
-      card = {
-        HasProgressionLevel,
-        RowNumber,
-        ColumnNumber: ColumnNumber - 1,
-      };
+      if (card?.Type === 'conditional') {
+        card = {
+          ...card,
+          HasProgressionLevel,
+          RowNumber,
+          ColumnNumber: ColumnNumber - 1,
+        };
+      } else {
+        card = {
+          ...card,
+          HasProgressionLevel,
+          RowNumber,
+          ColumnNumber: ColumnNumber - 1,
+        };
+      }
     }
-
     if (columnNumberEsixt && !isPendingCards) {
       /* 
         this block is to prevent to create a new column when we overlap pathwayComponent inside gameboard
@@ -423,17 +733,19 @@ const HomePage: React.FC<Props> = ({
       return;
     }
     if (card?.Type === 'conditional') {
+      if (columnNumberEsixt) {
+        return;
+      }
       /* This Function add only conditional cards*/
       const updatedPathwayWrapper = { ...pathwayComponent };
-
-      const updatedCards = updatedPathwayComponentConditionCards
-        .filter((item: any) => item.RowId !== card.RowId)
-        .concat({
-          ...card,
-          RowNumber,
-          HasProgressionLevel,
-          ColumnNumber,
-        });
+      const updatedCards = updatedPathwayWrapper?.ComponentConditions.filter(
+        (item: any) => item.RowId !== card.RowId
+      ).concat({
+        ...card,
+        RowNumber,
+        HasProgressionLevel,
+        ColumnNumber,
+      });
       setUpdatedPathwayComponentConditionCards(updatedCards);
       updatedPathwayWrapper.ComponentConditions = updatedCards;
       dispatch(updateMappedDataRequest(updatedPathwayWrapper));
@@ -484,6 +796,14 @@ const HomePage: React.FC<Props> = ({
       dispatch(updateMappedDataRequest(updatedPathwayWrapper));
       return;
     }
+
+    if (columnNumberEsixt && !isPendingCards) {
+      /* 
+        this block is to prevent to create a new column when we overlap pathwayComponent inside gameboard
+      */
+      return;
+    }
+
     if (!!destinationColumn && isDestinationCardExist) {
       const isCardAlreadyInDestinationColumn = pathwayComponentCards?.filter(
         (component_card: any) =>
@@ -568,7 +888,7 @@ const HomePage: React.FC<Props> = ({
             firstColumn,
           })
       );
-    } else if (pathwayComponentCards.length !== 0) {
+    } else if (pathwayComponentCards.length !== 0 && !columnNumberEsixt) {
       setPathwayComponentCards(
         pathwayComponentCards
           .filter((item: any) => item.CTID !== card.CTID)
@@ -994,6 +1314,11 @@ const HomePage: React.FC<Props> = ({
     document.getElementById(item?.end)?.classList?.remove('active');
     setConstraintIcon(false);
   };
+  let xyz: any;
+
+  const abc = (value: any) => {
+    xyz = value;
+  };
   const getDropWrapperLayout = (column: any, index: any = 0) => {
     if (!column.semesters || !column.semesters.length) {
       const columnNumber = pathwayComponentCards
@@ -1265,6 +1590,7 @@ const HomePage: React.FC<Props> = ({
                                     getComponentConditionData={
                                       getComponentConditionData
                                     }
+                                    abc={abc}
                                   />
                                 </>
                               ))}
@@ -1296,6 +1622,7 @@ const HomePage: React.FC<Props> = ({
                               columnNumber={0}
                               HasProgressionLevel=""
                               ConstraintConditionState={false}
+                              abc={abc}
                             />
                           )}
                           {!!isStartFromInitialColumnSelected &&
@@ -1332,6 +1659,7 @@ const HomePage: React.FC<Props> = ({
                                 columnNumber={0}
                                 HasProgressionLevel=""
                                 ConstraintConditionState={false}
+                                abc={abc}
                               />
                             )}
                         </Xwrapper>