diff --git a/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx b/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx
index 2378695f2..881c5fc3d 100644
--- a/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx
+++ b/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx
@@ -25,6 +25,7 @@ interface InputDropdownProps {
   dataTestIdforDropdown?:string
   setNewInput? : (value: string) => void;
   isInvalid?: boolean;
+  inputClassName?: string;
 }
 
 export const InputDropdown: React.FC<InputDropdownProps> = ({
@@ -41,7 +42,8 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
   ariaLabelforInput,
   dataTestIdforDropdown,
   dataTestIdforInput,
-  isInvalid
+  isInvalid,
+  inputClassName=''
 }) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
   const [inputValue, setInputValue] = useState<string>(selectedOption || ''); 
@@ -132,7 +134,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
                       ariaLabel={ariaLabelforDropdown}
                       dataTestid={dataTestIdforDropdown}
                       icon={<ChevronIcon data-testid="dropdown-input" aria-label="dropdown input"/>}
-                      className={`${isDropdownOpen ? 'border-input collapsed' : ''}`}
+                      className={`${inputClassName} ${isDropdownOpen ? 'border-input collapsed' : ''}`}
                       onIconClick={toggleDropdown}
                       label={dropdownLabel}
                       required={required}
diff --git a/forms-flow-components/src/components/CustomComponents/Pills.tsx b/forms-flow-components/src/components/CustomComponents/Pills.tsx
index e32f257d5..b7df7e5a5 100644
--- a/forms-flow-components/src/components/CustomComponents/Pills.tsx
+++ b/forms-flow-components/src/components/CustomComponents/Pills.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import Badge from "react-bootstrap/Badge";
-import {  DeleteIcon } from "../SvgIcons/index";
 
 interface CustomPillProps {
   label: string;
diff --git a/forms-flow-theme/scss/_forms.scss b/forms-flow-theme/scss/_forms.scss
index fa976796c..cb53b1066 100644
--- a/forms-flow-theme/scss/_forms.scss
+++ b/forms-flow-theme/scss/_forms.scss
@@ -249,7 +249,7 @@ select option:hover {
   outline: none;
 
   display: flex;
-  padding: var(--spacer-050) var(--spacer-100);
+  padding: var(--spacer-050) var(--spacer-100) !important;
   justify-content: center;
   align-items: center;
   align-self: stretch;
diff --git a/forms-flow-theme/scss/_modal.scss b/forms-flow-theme/scss/_modal.scss
index d5dbb5120..0dde136f9 100644
--- a/forms-flow-theme/scss/_modal.scss
+++ b/forms-flow-theme/scss/_modal.scss
@@ -183,9 +183,9 @@
   }
 
   .modal-dialog {
-    margin-top: 2.5vh !important;
+    margin-top: 6.5vh !important;
     margin-bottom: 2.5vh !important;
-    height: 95vh;
+    height: 87vh;
     background: var(--ff-white, #FFF);
     border-radius: var(--radius-0150);
   }
@@ -204,16 +204,19 @@
     overflow-y: scroll;
     -ms-overflow-style: none;
     max-height: 75vh;
-    height: 74vh
+    height: 59vh;
+    border-top: 1px solid var(--ff-gray-000);
+  }
+  //TBD: Quick fix ,will remove later. 
+  .line-height-1{
+    line-height: 1 !important;
   }
-
   .choose-template-header {
     display: flex;
     padding: var(--spacer-200) 6.5rem var(--spacer-200) var(--spacer-250);
     align-items: center;
     gap: var(--spacer-200);
     align-self: stretch;
-    border-bottom: none;
   }
 
   .template-left {
@@ -235,13 +238,17 @@
 
   .search-category {
     display: flex;
-    padding: var(--spacer-100) var(--spacer-200);
-    gap: var(--spacer-050);
-
+    padding: var(--spacer-200) var(--spacer-225);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacer-150);
+    flex-shrink: 0;
   }
 
   .template-item {
-    padding: var(--spacer-125) var(--spacer-250) !important;
+    padding: var(--spacer-050) var(--spacer-225) !important;
+    display: flex;
+    flex-direction: column;
     border-bottom: 1px solid var(--ff-gray-000);
     background: var(--ff-white);
     overflow: hidden;
@@ -286,26 +293,24 @@
   .form-container {
     overflow-y: scroll;
     -ms-overflow-style: none;
-    max-height: 25rem;
-    height: 52vh;
+    height: 56vh;
   }
 
   .bpmn-container {
-    height: 52vh;
+    height: 56vh;
     overflow: auto;
   }
 
   .select-temp-btn {
     display: flex;
-    padding: var(--spacer-200) var(--spacer-250);
+    padding: var(--spacer-100);
     flex-direction: column;
     align-items: center;
   }
 
   .form-flow-tabs {
     display: flex;
-    height: 4.625rem;
-    padding: var(--spacer-100) var(--spacer-150);
+    padding: var(--spacer-200) var(--spacer-225);
     align-items: center;
     gap: var(--spacer-150);
     align-self: stretch;
@@ -321,18 +326,6 @@
     left: 50%;
   }
 
-  .custom-button-container {
-    display: flex;
-    width: 40%;
-
-    .btn-group {
-      width: 9rem;
-    }
-  }
-
-  .custom-search-container {
-    width: 60%;
-  }
 
   .not-found {
     display: flex;
diff --git a/forms-flow-theme/scss/external/formio.scss b/forms-flow-theme/scss/external/formio.scss
index caeee2d93..004ecf020 100644
--- a/forms-flow-theme/scss/external/formio.scss
+++ b/forms-flow-theme/scss/external/formio.scss
@@ -56,6 +56,20 @@ $primary: var(--ff-primary);
     transition: border 0.05s ease, padding 0.3s ease; 
   }
 
+  //TBD : getting hovered all the component including panels,columns,etc.need to exclude those items.
+//   .form-hilighter{
+//   .formio-form{
+//     .formio-component{
+//       &:hover{
+//        border-style: dotted;
+//        padding: 10px;
+//        border-color: var(--ff-primary-200);
+//        cursor: pointer;
+//       }
+//      }
+//   }
+// }
+
   .formio-component{
       .bg-default {
         background: $base-100 !important;