diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/phoneinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/phoneinput.js
index c1567a9b87..b0e5fa3b72 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/phoneinput.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/phoneinput.js
@@ -35,7 +35,11 @@ export const phoneinputConfig = {
         defaultValue: 'Default value',
       },
     },
-
+    isCountryChangeEnabled: {
+      type: 'toggle',
+      displayName: 'Enable country change',
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+    },
     loadingState: {
       type: 'toggle',
       displayName: 'Loading state',
@@ -162,21 +166,6 @@ export const phoneinputConfig = {
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
     },
-    icon: {
-      type: 'icon',
-      displayName: 'Icon',
-      validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' },
-      accordian: 'field',
-      visibility: false,
-    },
-    iconColor: {
-      type: 'color',
-      displayName: 'Icon color',
-      validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
-      accordian: 'field',
-      visibility: false,
-      showLabel: false,
-    },
     borderRadius: {
       type: 'numberInput',
       displayName: 'Border radius',
@@ -279,6 +268,7 @@ export const phoneinputConfig = {
       disabledState: { value: '{{false}}' },
       loadingState: { value: '{{false}}' },
       tooltip: { value: '' },
+      isCountryChangeEnabled: { value: '{{true}}' },
     },
     events: [],
     styles: {
@@ -288,7 +278,6 @@ export const phoneinputConfig = {
       errTextColor: { value: '#D72D39' },
       borderRadius: { value: '{{6}}' },
       backgroundColor: { value: '#fff' },
-      iconColor: { value: '#CFD3D859' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
@@ -296,8 +285,6 @@ export const phoneinputConfig = {
       auto: { value: '{{true}}' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
-      icon: { value: 'IconHome2' },
-      iconVisibility: { value: false },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/Widgets/BaseComponents/hooks/useInput.js b/frontend/src/AppBuilder/Widgets/BaseComponents/hooks/useInput.js
index f298265cc7..a623c3d412 100644
--- a/frontend/src/AppBuilder/Widgets/BaseComponents/hooks/useInput.js
+++ b/frontend/src/AppBuilder/Widgets/BaseComponents/hooks/useInput.js
@@ -56,16 +56,27 @@ export const useInput = ({
 
   useEffect(() => {
     disable !== disabledState && setDisable(disabledState);
+    if (isInitialRender.current) return;
+    setExposedVariable('isDisabled', disabledState);
   }, [disabledState]);
 
   useEffect(() => {
     visibility !== properties.visibility && setVisibility(properties.visibility);
+    if (isInitialRender.current) return;
+    setExposedVariable('isVisible', properties.visibility);
   }, [properties.visibility]);
 
   useEffect(() => {
     loading !== loadingState && setLoading(loadingState);
+    if (isInitialRender.current) return;
+    setExposedVariable('isLoading', loadingState);
   }, [loadingState]);
 
+  useEffect(() => {
+    if (isInitialRender.current) return;
+    setExposedVariable('isMandatory', isMandatory);
+  }, [isMandatory]);
+
   useEffect(() => {
     if (isInitialRender.current) return;
     const validationStatus = validate(value);
diff --git a/frontend/src/AppBuilder/Widgets/PhoneInput.jsx b/frontend/src/AppBuilder/Widgets/PhoneInput.jsx
index 3a73d2209d..53eabe3e0f 100644
--- a/frontend/src/AppBuilder/Widgets/PhoneInput.jsx
+++ b/frontend/src/AppBuilder/Widgets/PhoneInput.jsx
@@ -1,8 +1,154 @@
 import React from 'react';
 import { default as ReactPhoneInput } from 'react-phone-input-2';
-import 'react-phone-input-2/lib/material.css';
+import 'react-phone-input-2/lib/style.css';
+import { useInput } from './BaseComponents/hooks/useInput';
+import Loader from '@/ToolJetUI/Loader/Loader';
+import Label from '@/_ui/Label';
 
 export const PhoneInput = (props) => {
-  const [value, setValue] = React.useState();
-  return <ReactPhoneInput placeholder="Enter phone number" value={value} onChange={setValue} enableSearch={true} />;
+  const { properties, styles, componentName, darkMode } = props;
+  const inputLogic = useInput(props);
+  const {
+    inputRef,
+    labelRef,
+    value,
+    visibility,
+    loading,
+    disable,
+    validationStatus,
+    showValidationError,
+    isFocused,
+    labelWidth,
+    iconVisibility,
+    setIconVisibility,
+    isValid,
+    validationError,
+    isMandatory,
+    setInputValue,
+    handleChange,
+    handleBlur,
+    handleFocus,
+    handleKeyUp,
+  } = inputLogic;
+  const { label, placeholder, isCountryChangeEnabled } = properties;
+  const {
+    textColor,
+    backgroundColor,
+    alignment,
+    width,
+    direction,
+    auto,
+    color,
+    borderColor,
+    accentColor,
+    errTextColor,
+  } = styles;
+  const _width = (width / 100) * 70;
+  const defaultAlignment = alignment === 'side' || alignment === 'top' ? alignment : 'side';
+
+  const inputBorderColor = isFocused
+    ? accentColor != '4368E3'
+      ? accentColor
+      : 'var(--primary-accent-strong)'
+    : borderColor != '#CCD1D5'
+    ? borderColor
+    : disable || loading
+    ? '1px solid var(--borders-disabled-on-white)'
+    : 'var(--borders-default)';
+
+  const inputStyle = {
+    color: textColor,
+    backgroundColor,
+    border: `${isFocused ? '1.5px' : '1px'} solid ${inputBorderColor}`,
+  };
+
+  const buttonStyle = {
+    backgroundColor: backgroundColor,
+    border: `${isFocused ? '1.5px' : '1px'} solid ${inputBorderColor}`,
+  };
+
+  const loaderStyle = {
+    right:
+      direction === 'right' &&
+      defaultAlignment === 'side' &&
+      ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0))
+        ? `${labelWidth + 11}px`
+        : '11px',
+    top:
+      defaultAlignment === 'top'
+        ? ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0)) &&
+          'calc(50% + 10px)'
+        : '',
+    transform:
+      defaultAlignment === 'top' &&
+      ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0)) &&
+      ' translateY(-50%)',
+    zIndex: 3,
+  };
+
+  return (
+    <>
+      <div
+        data-cy={`label-${String(componentName).toLowerCase()}`}
+        className={`text-input d-flex ${
+          defaultAlignment === 'top' &&
+          ((width != 0 && label?.length != 0) || (auto && width == 0 && label && label?.length != 0))
+            ? 'flex-column'
+            : 'align-items-center'
+        } ${direction === 'right' && defaultAlignment === 'side' ? 'flex-row-reverse' : ''}
+        ${direction === 'right' && defaultAlignment === 'top' ? 'text-right' : ''}
+        ${visibility || 'invisible'}`}
+        style={{
+          position: 'relative',
+          whiteSpace: 'nowrap',
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <Label
+          label={label}
+          width={width}
+          labelRef={labelRef}
+          darkMode={darkMode}
+          color={color}
+          defaultAlignment={defaultAlignment}
+          direction={direction}
+          auto={auto}
+          isMandatory={isMandatory}
+          _width={_width}
+          labelWidth={labelWidth}
+        />
+        <ReactPhoneInput
+          placeholder={placeholder}
+          value={value}
+          onChange={setInputValue}
+          enableSearch={true}
+          ref={inputRef}
+          inputStyle={inputStyle}
+          buttonStyle={buttonStyle}
+          searchPlaceholder="Search"
+          disabled={disable || loading}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          onKeyUp={handleKeyUp}
+          disableDropdown={isCountryChangeEnabled}
+        />
+        {loading && <Loader style={loaderStyle} width="16" />}
+      </div>
+      {showValidationError && visibility && (
+        <div
+          data-cy={`${String(componentName).toLowerCase()}-invalid-feedback`}
+          style={{
+            color: errTextColor !== '#D72D39' ? errTextColor : 'var(--status-error-strong)',
+            textAlign: direction == 'left' && 'end',
+            fontSize: '11px',
+            fontWeight: '400',
+            lineHeight: '16px',
+          }}
+        >
+          {validationError}
+        </div>
+      )}
+    </>
+  );
 };
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index a3cd170f30..0259451ab9 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -18629,3 +18629,55 @@ section.ai-message-prompt-input-wrapper {
     }
   }
 }
+
+
+.react-tel-input {
+  height:100% !important;
+  width: 100% !important;
+
+  .country-list {
+    scrollbar-width: none;
+    width: 208px;
+    height:236px;
+    border-radius: 8px;
+    margin-top: 3px !important;
+  }
+
+
+  .form-control {
+    height:100% !important;
+    width: 100% !important;
+    // border: 1px solid var(--border-weak, #E4E7EB) !important;
+  }
+
+  .flag-dropdown {
+    border-right: 1px solid #CCD1D5 !important;
+  }
+
+  .search {
+    width:100%;
+    padding: 0px !important;
+
+    .search-emoji {
+      display: none;
+    }
+
+    .search-box {
+      border: 0px;
+      border-bottom: 1px solid var(--border-weak, #ccd1d5);
+      width:100%;
+      margin-left: 0 !important;
+      height: 36px;
+    }
+  }
+
+  .country {
+    min-height:32px;
+    font-size: 14px;
+    font-family: IBM Plex Sans;
+    font-weight: 400;
+    padding: 6px 6px !important; 
+    padding-left: 22px !important;
+    color: #1B1F24;
+  }
+}
\ No newline at end of file
diff --git a/server/src/modules/apps/services/widget-config/phoneinput.js b/server/src/modules/apps/services/widget-config/phoneinput.js
index c1567a9b87..b0e5fa3b72 100644
--- a/server/src/modules/apps/services/widget-config/phoneinput.js
+++ b/server/src/modules/apps/services/widget-config/phoneinput.js
@@ -35,7 +35,11 @@ export const phoneinputConfig = {
         defaultValue: 'Default value',
       },
     },
-
+    isCountryChangeEnabled: {
+      type: 'toggle',
+      displayName: 'Enable country change',
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+    },
     loadingState: {
       type: 'toggle',
       displayName: 'Loading state',
@@ -162,21 +166,6 @@ export const phoneinputConfig = {
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
     },
-    icon: {
-      type: 'icon',
-      displayName: 'Icon',
-      validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' },
-      accordian: 'field',
-      visibility: false,
-    },
-    iconColor: {
-      type: 'color',
-      displayName: 'Icon color',
-      validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
-      accordian: 'field',
-      visibility: false,
-      showLabel: false,
-    },
     borderRadius: {
       type: 'numberInput',
       displayName: 'Border radius',
@@ -279,6 +268,7 @@ export const phoneinputConfig = {
       disabledState: { value: '{{false}}' },
       loadingState: { value: '{{false}}' },
       tooltip: { value: '' },
+      isCountryChangeEnabled: { value: '{{true}}' },
     },
     events: [],
     styles: {
@@ -288,7 +278,6 @@ export const phoneinputConfig = {
       errTextColor: { value: '#D72D39' },
       borderRadius: { value: '{{6}}' },
       backgroundColor: { value: '#fff' },
-      iconColor: { value: '#CFD3D859' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
@@ -296,8 +285,6 @@ export const phoneinputConfig = {
       auto: { value: '{{true}}' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
-      icon: { value: 'IconHome2' },
-      iconVisibility: { value: false },
     },
   },
 };