diff --git a/src/components/common/FormikAutocomplete.tsx b/src/components/common/FormikAutocomplete.tsx
new file mode 100644
index 0000000..7ad440e
--- /dev/null
+++ b/src/components/common/FormikAutocomplete.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { Autocomplete } from "@material-ui/lab";
+import { TextField } from "@material-ui/core";
+
+interface Form {
+  setFieldValue: Function;
+  setTouched: Function;
+}
+
+interface FormikAutocompleteProps {
+  options: string[];
+  name: string;
+  getOptionLabel: (option: string) => string;
+  form: Form;
+  field: { [x: string]: any };
+  textFieldProps: { [x: string]: any };
+}
+
+export const FormikAutocomplete = (props: FormikAutocompleteProps) => {
+  const {
+    form: { setTouched, setFieldValue },
+    textFieldProps,
+    field,
+    ...remaningField
+  } = props;
+  const { name } = field;
+  return (
+    <Autocomplete
+      {...field}
+      {...remaningField}
+      onChange={(_, value) => setFieldValue(name, value)}
+      onBlur={() => setTouched({ [name]: true })}
+      renderInput={(props) => (
+        <TextField
+          {...props}
+          {...textFieldProps}
+          //   helperText={helperText}
+          //   error={error}
+        />
+      )}
+    />
+  );
+};
diff --git a/src/coreform/DeploymentBasicTab.tsx b/src/coreform/DeploymentBasicTab.tsx
index 3689c7d..6029868 100644
--- a/src/coreform/DeploymentBasicTab.tsx
+++ b/src/coreform/DeploymentBasicTab.tsx
@@ -1,116 +1,216 @@
-import * as React from 'react';
-import Grid from '@material-ui/core/Grid';
-import { toMenuItems } from './FormUtil';
-import * as _m from '../models/Manifest'
-import { FormikTextField } from '../components/common/FormikTextField';
-import { useFormikContext } from 'formik';
-import {Box, makeStyles, TableCell, Typography} from '@material-ui/core';
-import { FormikTable } from '../components/common/FormikTable';
-import HealthCheckCard from './HealthCheckCard';
-import {boxStyleProps, cardStyles} from './Styles';
-import AutoscalingCard from './AutoscalingCard';
-import CardLayout from '../components/common/CardLayout';
-import {FormikCardList} from "../components/common/FormikCardList";
+import * as React from "react";
+import Grid from "@material-ui/core/Grid";
+import { toMenuItems } from "./FormUtil";
+import * as _m from "../models/Manifest";
+import { FormikTextField } from "../components/common/FormikTextField";
+import { FormikAutocomplete } from "../components/common/FormikAutocomplete";
+import { useFormikContext, Field } from "formik";
+import {
+  Box,
+  makeStyles,
+  TableCell,
+  Typography,
+  MenuItem,
+  TextField,
+} from "@material-ui/core";
+import { FormikTable } from "../components/common/FormikTable";
+import HealthCheckCard from "./HealthCheckCard";
+import { boxStyleProps, cardStyles } from "./Styles";
+import AutoscalingCard from "./AutoscalingCard";
+import CardLayout from "../components/common/CardLayout";
+import { useEffect, useState, useRef } from "react";
+import { httpClient } from "../helper/api-client";
+import { Autocomplete } from "@material-ui/lab";
 
 const useStyles = makeStyles({
-    ...cardStyles,
-    root: {
-        minWidth: 275,
-    },
-    title: {
-        fontSize: 14,
-    },
-    card: {
-        marginBottom: 10,
-        width: 300,
-        border: '5px solid #E8E8E8',
-    },
-    twoFieldBigCard: {
-        width: 180
-    },
-    oneFieldBigCard: {
-        width: 405
-    },
-    spacer: {
-        marginTop: 5,
-        marginBottom: 10
-    },
-    gridRow: {
-        width: 1200
-    }
+  ...cardStyles,
+  root: {
+    minWidth: 275,
+  },
+  title: {
+    fontSize: 14,
+  },
+  card: {
+    marginBottom: 10,
+    width: 300,
+    border: "5px solid #E8E8E8",
+  },
+  twoFieldBigCard: {
+    width: 180,
+  },
+  oneFieldBigCard: {
+    width: 405,
+  },
+  spacer: {
+    marginTop: 5,
+    marginBottom: 10,
+  },
+  gridRow: {
+    width: 1200,
+  },
 });
 
 const ClusterCard = () => {
-    const classes = useStyles();
-    const { values }: { values: any } = useFormikContext()
-    return (
-        <CardLayout heading="Kubernetes Cluster">
-            <FormikTextField className={classes.spacer} select label="Cluster" fullWidth name="deployment.cluster">
-                {toMenuItems(_m.clusters)}
-            </FormikTextField>
-            <FormikTextField className={classes.spacer} select label="Namespace" fullWidth name="deployment.namespace">
-                {toMenuItems(_m.namespaces[values?.environment] || [])}
-            </FormikTextField>
-        </CardLayout>
-    )
-}
+  const classes = useStyles();
+  const { values }: { values: any } = useFormikContext();
+  return (
+    <CardLayout heading="Kubernetes Cluster">
+      <FormikTextField
+        className={classes.spacer}
+        select
+        label="Cluster"
+        fullWidth
+        name="deployment.cluster"
+      >
+        {toMenuItems(_m.clusters)}
+      </FormikTextField>
+      <FormikTextField
+        className={classes.spacer}
+        select
+        label="Namespace"
+        fullWidth
+        name="deployment.namespace"
+      >
+        {toMenuItems(_m.namespaces[values?.environment] || [])}
+      </FormikTextField>
+    </CardLayout>
+  );
+};
 
 const InstanceCard = () => {
-    const classes = useStyles();
-    return (
-        <CardLayout heading="Instance Sizing">
-            <FormikTextField className={classes.spacer} type='number' label="Cpu" fullWidth name="deployment.instance.cpu" />
-            <FormikTextField className={classes.spacer} label="Memory" fullWidth name="deployment.instance.memory" />
-        </CardLayout>
-    )
-}
+  const classes = useStyles();
+  return (
+    <CardLayout heading="Instance Sizing">
+      <FormikTextField
+        className={classes.spacer}
+        type="number"
+        label="Cpu"
+        fullWidth
+        name="deployment.instance.cpu"
+      />
+      <FormikTextField
+        className={classes.spacer}
+        label="Memory"
+        fullWidth
+        name="deployment.instance.memory"
+      />
+    </CardLayout>
+  );
+};
 
 const ExposedPortsCard = () => {
-    const classes = useStyles();
-    return (
-        <CardLayout heading="Exposed Ports">
-            <FormikTable name="deployment.exposedPorts" headers={['Name', 'Port']} newItem={_m.newExposedPort}>
-                {(i) => (
-                    <>
-                        <TableCell><FormikTextField className={classes.twoFieldBigCard} select name={`deployment.exposedPorts.${i}.name`} >{toMenuItems(_m.portTypes)}</FormikTextField></TableCell>
-                        <TableCell><FormikTextField className={classes.twoFieldBigCard} type='number' name={`deployment.exposedPorts.${i}.port`} /></TableCell>
-                    </>
-                )}
-            </FormikTable>
-        </CardLayout>
-    )
-}
+  const classes = useStyles();
+  return (
+    <CardLayout heading="Exposed Ports">
+      <FormikTable
+        name="deployment.exposedPorts"
+        headers={["Name", "Port"]}
+        newItem={_m.newExposedPort}
+      >
+        {(i) => (
+          <>
+            <TableCell>
+              <FormikTextField
+                className={classes.twoFieldBigCard}
+                select
+                name={`deployment.exposedPorts.${i}.name`}
+              >
+                {toMenuItems(_m.portTypes)}
+              </FormikTextField>
+            </TableCell>
+            <TableCell>
+              <FormikTextField
+                className={classes.twoFieldBigCard}
+                type="number"
+                name={`deployment.exposedPorts.${i}.port`}
+              />
+            </TableCell>
+          </>
+        )}
+      </FormikTable>
+    </CardLayout>
+  );
+};
 
-const OutboundConnectivityCard = () => {
-    const classes = useStyles();
-    return (
-        <CardLayout heading="Outbound Connectivity">
-            <FormikTable name="deployment.allowEgress" headers={['Service']} newItem={_m.newOutboundConnectivity}>
-                {(i) => <TableCell><FormikTextField className={classes.oneFieldBigCard} name={`deployment.allowEgress.${i}`} /></TableCell>}
-            </FormikTable>
-        </CardLayout>
-    )
-}
+const OutboundConnectivityCard = (props) => {
+  const classes = useStyles();
+  return (
+    <CardLayout heading="Outbound Connectivity">
+      <FormikTable
+        name="deployment.allowEgress"
+        headers={["Service"]}
+        newItem={_m.newOutboundConnectivity}
+      >
+        {(i) => (
+          <TableCell>
+            <Field
+              name={`deployment.allowEgress.${i}`}
+              component={FormikAutocomplete}
+              options={props.serviceEntries}
+              freeSolo
+              textFieldProps={{
+                name: `deployment.allowEgress.${i}`,
+                className: "classes.oneFieldBigCarded",
+              }}
+            />
+          </TableCell>
+        )}
+      </FormikTable>
+    </CardLayout>
+  );
+};
 
 const DeploymentBasicTab = () => {
-    const classes = useStyles();
+  const [serviceEntries, setServiceEntries] = useState<Array<string>>([]);
+  const [FetchError, setFetchError] = useState<Object>({});
 
-    return (
-        <Grid container direction="column" justify="flex-start" alignItems="flex-start" >
-            <Grid container direction="row" justify="space-evenly" alignItems="flex-start" className={classes.gridRow}>
-                <Grid item>
-                    <ClusterCard />
-                    <HealthCheckCard />
-                </Grid>
-                <Grid item>
-                    <InstanceCard />
-                    <ExposedPortsCard />
-                    <OutboundConnectivityCard />
-                    <AutoscalingCard />
-                </Grid>
-            </Grid>
+  const classes = useStyles();
+  const { values }: { values: any } = useFormikContext();
+  const cluster = values?.deployment?.cluster;
+
+  const getServiceEntries = async (cluster: string): Promise<Response> => {
+    return httpClient(`/api/kube/allowedEndpoint?cluster=${cluster}`);
+  };
+
+  useEffect(() => {
+    getServiceEntries(cluster).then((res) =>
+      res.json().then((resJson) => {
+        if (res.ok) {
+          setServiceEntries(resJson);
+        } else {
+          setFetchError(resJson);
+        }
+      })
+    );
+  }, [cluster]);
+
+  return (
+    <Grid
+      container
+      direction="column"
+      justify="flex-start"
+      alignItems="flex-start"
+    >
+      <Grid
+        container
+        direction="row"
+        justify="space-evenly"
+        alignItems="flex-start"
+        className={classes.gridRow}
+      >
+        <Grid item>
+          <ClusterCard />
+          <HealthCheckCard />
         </Grid>
-    )
-}
+        <Grid item>
+          <InstanceCard />
+          <ExposedPortsCard />
+          <OutboundConnectivityCard serviceEntries={serviceEntries} />
+          <AutoscalingCard />
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
 
-export default DeploymentBasicTab
\ No newline at end of file
+export default DeploymentBasicTab;