diff --git a/package-lock.json b/package-lock.json
index 573c29155..52afe323b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,16 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.16.0-pre-1",
+    "version": "1.16.0-pre-2",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "1.16.0-pre-1",
+            "version": "1.16.0-pre-2",
             "hasInstallScript": true,
             "license": "ISC",
             "dependencies": {
+                "@codemirror/autocomplete": "6.18.6",
                 "@codemirror/lang-json": "6.0.1",
                 "@codemirror/lang-yaml": "6.1.2",
                 "@codemirror/language": "6.10.8",
@@ -562,9 +563,10 @@
             }
         },
         "node_modules/@codemirror/autocomplete": {
-            "version": "6.18.4",
-            "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.4.tgz",
-            "integrity": "sha512-sFAphGQIqyQZfP2ZBsSHV7xQvo9Py0rV0dW7W3IMRdS+zDuNb2l3no78CvUaWKGfzFjI4FTrLdUSj86IGb2hRA==",
+            "version": "6.18.6",
+            "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz",
+            "integrity": "sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==",
+            "license": "MIT",
             "dependencies": {
                 "@codemirror/language": "^6.0.0",
                 "@codemirror/state": "^6.0.0",
diff --git a/package.json b/package.json
index d977fa103..0a3efc2c3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.16.0-pre-1",
+    "version": "1.16.0-pre-2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -95,6 +95,7 @@
         "yaml": "^2.4.1"
     },
     "dependencies": {
+        "@codemirror/autocomplete": "6.18.6",
         "@codemirror/lang-json": "6.0.1",
         "@codemirror/lang-yaml": "6.1.2",
         "@codemirror/language": "6.10.8",
diff --git a/src/Common/SegmentedControl/Segment.tsx b/src/Common/SegmentedControl/Segment.tsx
index c4b23fdb3..65d7cf1ba 100644
--- a/src/Common/SegmentedControl/Segment.tsx
+++ b/src/Common/SegmentedControl/Segment.tsx
@@ -1,5 +1,5 @@
 import { ReactElement, useMemo } from 'react'
-import { motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
 
 import { Tooltip } from '@Common/Tooltip'
 import { Icon } from '@Shared/Components'
@@ -38,19 +38,21 @@ const Segment = ({ segment, isSelected, name, onChange, fullWidth, size, disable
                     disabled={disabled}
                 />
 
-                <motion.label
+                <label
                     htmlFor={inputId}
-                    layout
                     className={`pointer m-0 dc__position-rel flex ${!fullWidth ? 'left' : ''} dc__gap-4 br-4 segmented-control__segment segmented-control__segment--${size} ${isSelected ? 'fw-6 segmented-control__segment--selected' : 'fw-4'} ${segment.isError ? 'cr-5' : 'cn-9'} ${disabled ? 'cursor-not-allowed' : ''} ${COMPONENT_SIZE_TO_SEGMENT_CLASS_MAP[size]}`}
                     key={inputId}
                     aria-label={ariaLabel}
                 >
-                    {isSelected && (
-                        <motion.div
-                            layoutId={`active-segment-control-${name}`}
-                            className="dc__position-abs active-mask dc__top-0 dc__left-0 dc__right-0 dc__bottom-0 bg__primary br-4"
-                        />
-                    )}
+                    <AnimatePresence>
+                        {isSelected && (
+                            <motion.div
+                                layoutId={`active-segment-control-${name}`}
+                                className="dc__position-abs active-mask dc__top-0 dc__left-0 dc__right-0 dc__bottom-0 bg__primary br-4"
+                                transition={{ type: 'spring' }}
+                            />
+                        )}
+                    </AnimatePresence>
 
                     {(isError || icon) && (
                         <span className={`flex ${COMPONENT_SIZE_TO_ICON_CLASS_MAP[size]}`}>
@@ -69,7 +71,7 @@ const Segment = ({ segment, isSelected, name, onChange, fullWidth, size, disable
                         </span>
                     )}
                     {label && <span>{label}</span>}
-                </motion.label>
+                </label>
             </div>
         </ConditionalWrap>
     )
diff --git a/src/Common/SegmentedControl/segmentedControl.scss b/src/Common/SegmentedControl/segmentedControl.scss
index a2cc2ea19..8d170b8ae 100644
--- a/src/Common/SegmentedControl/segmentedControl.scss
+++ b/src/Common/SegmentedControl/segmentedControl.scss
@@ -37,10 +37,11 @@
                 border: 0.5px solid var(--border-primary);
                 box-shadow: 0px 1px 2px 0px var(--black-20);
             }
+        }
 
-            > *:not(.active-mask) {
-                z-index: 1;
-            }
+        > span {
+            position: relative;
+            z-index: 1;
         }
 
         &:hover:not(#{$parent-selector}--selected):not(.cursor-not-allowed) {
diff --git a/src/Pages/Applications/DevtronApps/Details/CIPipeline/constants.ts b/src/Pages/Applications/DevtronApps/Details/CIPipeline/constants.ts
index 1e2cc7e6d..03e5287d4 100644
--- a/src/Pages/Applications/DevtronApps/Details/CIPipeline/constants.ts
+++ b/src/Pages/Applications/DevtronApps/Details/CIPipeline/constants.ts
@@ -63,3 +63,12 @@ export const IO_VARIABLES_VALUE_COLUMN_DATE_OPTIONS: SelectPickerOptionType<stri
         description: 'ISO8601 with nanoseconds',
     },
 ]
+
+export const VALUE_COLUMN_DROPDOWN_LABEL = {
+    CHOICES: 'Choices',
+    SUPPORTED_DATE_FORMATS: 'Supported date formats',
+    SYSTEM_VARIABLES: 'System variables',
+    PRE_BUILD_STAGE: 'From Pre-build Stage',
+    POST_BUILD_STAGE: 'From Post-build Stage',
+    PREVIOUS_STEPS: 'From Previous Steps',
+} as const
diff --git a/src/Shared/Components/CodeEditor/CodeEditor.tsx b/src/Shared/Components/CodeEditor/CodeEditor.tsx
index b1cdcbcaa..c6f57f598 100644
--- a/src/Shared/Components/CodeEditor/CodeEditor.tsx
+++ b/src/Shared/Components/CodeEditor/CodeEditor.tsx
@@ -15,6 +15,7 @@
  */
 
 import { useEffect, useMemo, useRef, useState } from 'react'
+import { autocompletion } from '@codemirror/autocomplete'
 import { foldGutter } from '@codemirror/language'
 import { lintGutter } from '@codemirror/lint'
 import { search } from '@codemirror/search'
@@ -193,6 +194,7 @@ const CodeEditor = <DiffView extends boolean = false>({
         drawSelection: true,
         highlightActiveLineGutter: true,
         tabSize,
+        autocompletion: false,
     }
 
     const handleOnChange: ReactCodeMirrorProps['onChange'] = (newValue) => {
@@ -216,6 +218,7 @@ const CodeEditor = <DiffView extends boolean = false>({
     // EXTENSIONS
     const getBaseExtensions = (): Extension[] => [
         basicSetup(basicSetupOptions),
+        autocompletion({ closeOnBlur: false }),
         themeExtension,
         keymap.of([
             ...vscodeKeymap.filter(({ key }) => key !== 'Mod-Alt-Enter' && key !== 'Mod-Enter' && key !== 'Mod-f'),
diff --git a/src/Shared/Components/CodeEditor/codeEditor.scss b/src/Shared/Components/CodeEditor/codeEditor.scss
index bd1894d7e..49907ae4a 100644
--- a/src/Shared/Components/CodeEditor/codeEditor.scss
+++ b/src/Shared/Components/CodeEditor/codeEditor.scss
@@ -181,7 +181,54 @@
     }
 
     .cm-tooltip-autocomplete {
-        background-color: var(--bg-primary);
+        padding: 2px;
+        background-color: var(--bg-menu-primary);
+        border: 1px solid var(--border-primary-translucent);
+
+        & > ul > li {
+            display: flex;
+            gap: 6px;
+            padding: 2px 4px;
+            color: var(--N900);
+            border-radius: 2px;
+            font-size: 13px;
+            line-height: 20px;
+        }
+
+        & > ul li[aria-selected] {
+            color: var(--N900);
+            background-color: var(--bg-hover);
+        }
+
+        .cm-completionDetail {
+            margin-left: 0;
+        }
+
+        .cm-completionIcon.cm-completionIcon-property {
+            box-sizing: border-box;
+            height: 14px;
+            width: 14px;
+            padding-right: 0;
+            font-size: 100%;
+            vertical-align: middle;
+            opacity: 1;
+
+            &::after {
+                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='rgb(29, 39, 48)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 22.015a.75.75 0 0 1-.368-.097l-8.25-4.64A.75.75 0 0 1 3 16.623V7.376a.75.75 0 0 1 .382-.654l8.25-4.64a.75.75 0 0 1 .736 0l8.25 4.64a.75.75 0 0 1 .382.654v9.248a.75.75 0 0 1-.382.654l-8.25 4.64a.75.75 0 0 1-.368.097Zm0 0L12.089 12m8.808-5.004L12.089 12m0 0L3.104 6.995' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
+            }
+        }
+    }
+
+    .cm-tooltip .cm-completionInfo {
+        padding: 3px 7px;
+        background-color: var(--bg-menu-primary);
+        color: var(--N700);
+        border: 1px solid var(--border-primary-translucent);
+        border-radius: 0;
+        font-size: 13px;
+        line-height: 1.5;
+        max-height: 240px;
+        overflow-y: auto;
     }
 
     .cm-diagnostic-error {
@@ -277,6 +324,23 @@
     }
 }
 
+// THEME SPECIFIC STYLES
+.component-specific-theme__dark {
+    .cm-editor {
+        .cm-tooltip-autocomplete .cm-completionIcon.cm-completionIcon-property::after {
+            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='rgb(228, 229, 230)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 22.015a.75.75 0 0 1-.368-.097l-8.25-4.64A.75.75 0 0 1 3 16.623V7.376a.75.75 0 0 1 .382-.654l8.25-4.64a.75.75 0 0 1 .736 0l8.25 4.64a.75.75 0 0 1 .382.654v9.248a.75.75 0 0 1-.382.654l-8.25 4.64a.75.75 0 0 1-.368.097Zm0 0L12.089 12m8.808-5.004L12.089 12m0 0L3.104 6.995' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
+        }
+
+        .cm-lint-marker-error {
+            content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><g transform="translate(2.667 2.667)"><rect width="26.667" height="26.667" class="fill-color" fill="%23FF5D60" rx="13.333"/><path fill="%23FFF" fill-rule="nonzero" d="M8.62 8.62c.52-.521 1.364-.521 1.885 0l2.828 2.827 2.829-2.828a1.334 1.334 0 0 1 1.777-.097l.108.097c.521.521.521 1.365 0 1.886l-2.828 2.828 2.828 2.829c.486.486.519 1.254.098 1.777l-.098.108c-.52.521-1.365.521-1.885 0l-2.83-2.828-2.827 2.828a1.334 1.334 0 0 1-1.777.098l-.109-.098a1.333 1.333 0 0 1 0-1.885l2.828-2.83-2.828-2.827a1.334 1.334 0 0 1-.097-1.777z"/></g></g></svg>');
+        }
+
+        .cm-lint-marker-warning {
+            content: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.702 3.74857L2.45423 17.9978C2.32226 18.2259 2.25266 18.4846 2.25244 18.748C2.25222 19.0115 2.32139 19.2703 2.45299 19.4986C2.58459 19.7268 2.77397 19.9163 3.00209 20.0481C3.2302 20.1799 3.489 20.2493 3.75245 20.2493H20.248C20.5114 20.2493 20.7702 20.1799 20.9984 20.0481C21.2265 19.9163 21.4159 19.7268 21.5474 19.4986C21.679 19.2703 21.7482 19.0115 21.748 18.748C21.7478 18.4846 21.6782 18.2258 21.5462 17.9978L13.2984 3.74857C13.1667 3.52093 12.9774 3.33193 12.7495 3.20055C12.5216 3.06916 12.2632 3 12.0002 3C11.7372 3 11.4788 3.06916 11.2509 3.20055C11.0231 3.33193 10.8338 3.52093 10.702 3.74857Z" fill="%23F4BA63"/><path d="M13 9.75C13 9.19772 12.5523 8.75 12 8.75C11.4477 8.75 11 9.19772 11 9.75V13.5C11 14.0523 11.4477 14.5 12 14.5C12.5523 14.5 13 14.0523 13 13.5V9.75Z" fill="%23000A14"/><path d="M13.125 16.875C13.125 17.4963 12.6213 18 12 18C11.3787 18 10.875 17.4963 10.875 16.875C10.875 16.2537 11.3787 15.75 12 15.75C12.6213 15.75 13.125 16.2537 13.125 16.875Z" fill="%23000A14"/></svg>');
+        }
+    }
+}
+
 // MINIMAP STYLES
 .code-editor__mini-map {
     user-select: none;
diff --git a/src/Shared/Components/SelectPicker/FilterSelectPicker.tsx b/src/Shared/Components/SelectPicker/FilterSelectPicker.tsx
index db5ce8d1f..7210ef5d0 100644
--- a/src/Shared/Components/SelectPicker/FilterSelectPicker.tsx
+++ b/src/Shared/Components/SelectPicker/FilterSelectPicker.tsx
@@ -71,11 +71,6 @@ const FilterSelectPicker = ({
         setSelectedOptions(structuredClone(selectedOptionsToUpdate) as SelectPickerOptionType[])
     }
 
-    const handleMenuClose = () => {
-        closeMenu()
-        setSelectedOptions(structuredClone(appliedFilterOptions ?? []))
-    }
-
     const handleApplyClick: ButtonProps['onClick'] = (e) => {
         handleApplyFilter(selectedOptions)
         resetTriggerAutoClickTimestamp()
@@ -113,7 +108,7 @@ const FilterSelectPicker = ({
                 isMulti
                 menuIsOpen={isMenuOpen}
                 onMenuOpen={openMenu}
-                onMenuClose={handleMenuClose}
+                onMenuClose={handleApplyClick as () => void}
                 onChange={handleSelectOnChange}
                 menuListFooterConfig={{
                     type: 'button',