diff --git a/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.css b/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.css
index 0c0f9c0..8a1aa3f 100644
--- a/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.css
+++ b/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.css
@@ -1,8 +1,10 @@
-.area{
+
+
+.area {
   position: relative;
   width: 1300px;
   height: 690px;
-  background-color:white;
+  background-color: white;
   border: 1px solid #CCCCCC;
   margin: 0 auto;
 }
@@ -12,70 +14,70 @@
   margin-top: 10px;
 }
 
-.tool-area{
+.tool-area {
   width: 130px;
   height: 690px;
   background-color: #bcbcbc;
   float: right;
 }
 
-
 .box {
-  position:absolute;
+  position: absolute;
   background-color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 18px;
   border: 1px solid black;
-  margin: 2px
+  margin: 2px;
 }
 
-
 .add-button {
   position: absolute;
-  height: 10px;
-  width: 10px;
+  height: 20px;  /* Increased height for better visibility */
+  width: 20px;   /* Increased width for better visibility */
   align-items: center;
   align-content: center;
   border: none;
-  line-height: 10px; /* Added line-height to vertically center the content */
-
+  line-height: 20px;  /* Center the content vertically */
   background-color: #27ae60;
   color: white;
   cursor: pointer;
+  opacity: 0;
+  z-index: 2;
+  transition: opacity 0.3s ease;
+}
+
+.add-button:hover {
+  opacity: 1;
 }
 
 .right {
   top: 50%;
   left: 100%;
-  opacity: 0;
-  z-index: 2;
-  transform: translate(-50%, -50%);
-}
-.right:hover{
-  opacity: 1;
+  transform: translate(0, -50%);
 }
+
 .bottom {
   left: 50%;
   top: 100%;
-  opacity: 0;
-  z-index: 2;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, 0);
 }
 
-.bottom:hover
-{
-  opacity: 1;
+.left {
+  top: 50%;
+  right: 100%;
+  transform: translate(0, -50%);
 }
 
+.top {
+  left: 50%;
+  bottom: 100%;
+  transform: translate(-50%, 0);
+}
 
-
-
-
-#Draggable{
+#Draggable {
   background: rgba(1, 1, 1, 0.2);
-
   cursor: col-resize;
   height: 100%;
   width: 5px;
@@ -83,17 +85,16 @@
   opacity: 0;
   left: 100%;
   z-index: 2;
+  transition: opacity 0.3s ease;
 }
 
-#Draggable:hover{
+#Draggable:hover {
   opacity: 1;
 }
 
-
-#Draggable2{
+#Draggable2 {
   background: rgba(1, 1, 1, 0.2);
-
-  cursor: col-resize;
+  cursor: row-resize;  /* Changed to row-resize for vertical resizing */
   height: 5px;
   width: 100%;
   position: absolute;
@@ -101,16 +102,13 @@
   opacity: 0;
   left: 0%;
   z-index: 2;
+  transition: opacity 0.3s ease;
 }
 
-#Draggable2:hover{
+#Draggable2:hover {
   opacity: 1;
 }
 
-
-
-
-
 .circle {
   width: 16px;
   height: 16px;
@@ -119,13 +117,13 @@
   position: absolute;
   background-color: white;
   margin: 0;
-  top:0;
-  left:0;
+  top: 0;
+  left: 0;
 }
-.omr-box{
+
+.omr-box {
   width: 50px;
   display: flex;
-
   font-size: 16px;
   cursor: move;
 }
@@ -151,7 +149,7 @@
   margin: 20px;
   border-radius: 5px;
   position: relative;
-  background-color: #CCCCCC; 
+  background-color: #CCCCCC;
   color: #666666;
   cursor: not-allowed;
 }
@@ -173,6 +171,7 @@
   display: inline-flex;
   margin: 0px;
 }
+
 .rotate {
   transform: rotate(-90deg);
 }
@@ -182,3 +181,4 @@
 
 
 
+
diff --git a/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.js b/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.js
index 6a78a9d..00816c4 100644
--- a/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.js
+++ b/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.js
@@ -1,3 +1,4 @@
+
 import React, { useState } from "react";
 import "./FormBuilder.component.css";
 import DownloadPDF from "./DownloadPDF/DownloadPDF.component";
@@ -7,6 +8,7 @@ import FreeTextComponent from "./FreeText/FreeText.component";
 import BlackDotComponent from "./BlackDot/BlackDot.component";
 import EditableTableCell from "./EditableTabelCell/EditableTableCell.component";
 import Dropdown from "../Dropdown/Dropdown.component";
+
 const FormBuilder = ({
   handleDesignComplete,
   setActiveStep,
@@ -19,21 +21,18 @@ const FormBuilder = ({
   ]);
 
   const boundaryRef = React.useRef(null);
-
   const [blackdots, setBlackdots] = useState([]);
   const [fieldOrder, setFieldOrder] = useState(1);
 
   const handleFormConfigSet = (json) => {
-    setFieldOrder((prevCount) => prevCount + 1)
-    setFormJson(json)
-  }
+    setFieldOrder((prevCount) => prevCount + 1);
+    setFormJson(json);
+  };
 
   const updateSharedState = (newValue) => {
     setBlackdots(newValue);
   };
 
-  // main table
-
   const addbox = (oldbox, where) => {
     const newbox = {
       key: Date.now(),
@@ -49,23 +48,26 @@ const FormBuilder = ({
     if (where === "bottom") {
       newbox.x += oldbox.height;
     }
+    if (where === "left") {
+      newbox.y -= oldbox.width;
+    }
+    if (where === "top") {
+      newbox.x -= oldbox.height;
+    }
 
     setBoxes((prevBoxes) => [...prevBoxes, newbox]);
   };
+
   const removeDiv = (currentbox) => {
-    let newlist = [];
-    for (let i = 0; i < boxes.length; i++) {
-      if (currentbox.key === boxes[i].key) continue;
-      newlist.push(boxes[i]);
-    }
+    let newlist = boxes.filter((box) => box.key !== currentbox.key);
     setBoxes(newlist);
   };
 
-  const [initialPos, setInitialPos] = React.useState(null);
-  const [initialSize, setInitialSize] = React.useState(null);
+  const [initialPos, setInitialPos] = useState(null);
+  const [initialSize, setInitialSize] = useState(null);
   const [isDesignComplete, setDesignComplete] = useState(false);
 
-  const options = ["Landscape", "Potrait"];
+  const options = ["Landscape", "Portrait"];
 
   const handleSelect = (option) => {
     setSelectedOption(option);
@@ -73,19 +75,16 @@ const FormBuilder = ({
 
   const initial = (e, box) => {
     let resizable = document.getElementsByClassName("box " + box.key)[0];
-
     setInitialPos(e.clientX);
     setInitialSize(resizable.offsetWidth);
   };
 
   const resize = (e, box) => {
     let resizable = document.getElementsByClassName("box " + box.key)[0];
-
     resizable.style.width = `${
       parseInt(initialSize) + parseInt(e.clientX - initialPos)
     }px`;
     let ne = parseInt(resizable.style.width);
-
     ne = Math.floor(ne / 10);
     ne = ne * 10;
     if (box.y + ne > 1010) {
@@ -97,13 +96,11 @@ const FormBuilder = ({
         boxes[i].width = ne;
       }
     }
-
     setBoxes(boxes);
   };
 
   const initialdown = (e, box) => {
     let resizable = document.getElementsByClassName("box " + box.key)[0];
-
     setInitialPos(e.clientY);
     setInitialSize(resizable.offsetHeight);
   };
@@ -120,7 +117,6 @@ const FormBuilder = ({
       ne = 670 - box.x;
     }
     resizable.style.height = `${ne}px`;
-    // let curr;
     for (let i = 0; i < boxes.length; i++) {
       if (boxes[i] === box) {
         boxes[i].height = ne;
@@ -131,7 +127,7 @@ const FormBuilder = ({
 
   const handleExportComplete = (dstImg, imgData) => {
     handleDesignComplete(dstImg, imgData, (isNoError) => {
-      if (typeof isNoError == "boolean") {
+      if (typeof isNoError === "boolean") {
         setDesignComplete(true);
       }
     });
@@ -153,14 +149,12 @@ const FormBuilder = ({
             }}
           >
             <EditableTableCell initialValue={""} />
-
             <div
               id="Draggable"
               draggable="true"
               onDragStart={(event) => initial(event, box)}
               onDrag={(event) => resize(event, box)}
             />
-
             <div
               id="Draggable2"
               draggable="true"
@@ -186,20 +180,40 @@ const FormBuilder = ({
             >
               +
             </button>
+            <button
+              onClick={() => addbox(box, "left")}
+              className="add-button left"
+            >
+              +
+            </button>
+            <button
+              onClick={() => addbox(box, "top")}
+              className="add-button top"
+            >
+              +
+            </button>
           </div>
         ))}
         <div className="tool-area">
           <strong>Form orientation:</strong>
           <p
             className={`${
-              selectedOption == "Landscape" ? "rotate" : "none"
+              selectedOption === "Landscape" ? "rotate" : "none"
             } orientation`}
           >
             📝
           </p>
           <Dropdown options={options} onSelect={handleSelect}></Dropdown>
-          <OmrComponent boundaryRef={boundaryRef} setFormJson={handleFormConfigSet} fieldOrder={fieldOrder}/>
-          <IdComponent boundaryRef={boundaryRef} setFormJson={handleFormConfigSet} fieldOrder={fieldOrder}/>
+          <OmrComponent
+            boundaryRef={boundaryRef}
+            setFormJson={handleFormConfigSet}
+            fieldOrder={fieldOrder}
+          />
+          <IdComponent
+            boundaryRef={boundaryRef}
+            setFormJson={handleFormConfigSet}
+            fieldOrder={fieldOrder}
+          />
           <FreeTextComponent boundaryRef={boundaryRef} type="FreeText" />
           <DownloadPDF
             boxes={boxes}
diff --git a/src/components/AutoROIFormBuilder/FormBuilder/ID/Id.component.css b/src/components/AutoROIFormBuilder/FormBuilder/ID/Id.component.css
index b514be3..569ec92 100644
--- a/src/components/AutoROIFormBuilder/FormBuilder/ID/Id.component.css
+++ b/src/components/AutoROIFormBuilder/FormBuilder/ID/Id.component.css
@@ -31,7 +31,7 @@
 
 .roll td {
   padding: 5px;
-  border: 1px solid #ccc;
+  border: 1px solid #070707;
   text-align: center;
   position: relative;
   display: table-cell;