diff --git a/ui_src/src/assets/images/cliIcon.svg b/ui_src/src/assets/images/cliIcon.svg
new file mode 100644
index 000000000..ac22e43d5
--- /dev/null
+++ b/ui_src/src/assets/images/cliIcon.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="24" fill="#6557FF" fill-opacity="0.1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5029 16.32L26.0029 17L25.3229 15.5L26.0029 14L24.5029 14.68L23.0029 14L23.6829 15.5L23.0029 17L24.5029 16.32ZM30.8825 16.96L33.0025 16L32.0425 18.12L33.0025 20.24L30.8825 19.28L28.7625 20.24L29.7225 18.12L28.7625 16L30.8825 16.96ZM23.1725 19.83C24.2725 18.72 26.0625 18.72 27.1725 19.83C28.2825 20.93 28.2825 22.72 27.1725 23.83L19.8325 31.17C18.7325 32.28 16.9425 32.28 15.8325 31.17C14.7225 30.07 14.7225 28.28 15.8325 27.17L23.1725 19.83ZM23.7725 25.11L26.1225 22.76C26.6425 22.24 26.6425 21.4 26.1225 20.88C25.6025 20.36 24.7625 20.36 24.2425 20.88L21.8925 23.23C21.3725 23.75 21.3725 24.59 21.8925 25.11C22.4125 25.63 23.2525 25.63 23.7725 25.11ZM27.0029 26L30.0029 27.36L33.0029 26L31.6429 29L33.0029 32L30.0029 30.64L27.0029 32L28.3629 29L27.0029 26Z" fill="#6557FF"/>
+</svg>
diff --git a/ui_src/src/assets/images/collapseArrowWhite.svg b/ui_src/src/assets/images/collapseArrowWhite.svg
new file mode 100644
index 000000000..d0fd36596
--- /dev/null
+++ b/ui_src/src/assets/images/collapseArrowWhite.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.75 4.875L6.5 8.125L3.25 4.875" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/ui_src/src/components/Tabs/index.js b/ui_src/src/components/Tabs/index.js
index 60d654868..b202c925d 100644
--- a/ui_src/src/components/Tabs/index.js
+++ b/ui_src/src/components/Tabs/index.js
@@ -24,7 +24,7 @@ import CheckboxComponent from '../checkBox';
 import { PriorityHighRounded } from '@material-ui/icons';
 import CloudOnly from '../cloudOnly';
 
-const CustomTabs = ({ tabs, onChange, value, disabled, length, tooltip, icon = false, checkbox = false, defaultActiveKey, tabsCounter }) => {
+const CustomTabs = ({ tabs, onChange, value, disabled, length, tooltip, icon = false, checkbox = false, defaultActiveKey, tabsCounter, icons }) => {
     return (
         <div className={!disabled ? 'tabs-container hover' : 'tabs-container'}>
             <Tabs
@@ -36,6 +36,7 @@ const CustomTabs = ({ tabs, onChange, value, disabled, length, tooltip, icon = f
                         disabled: tab?.disabled || disabled,
                         label: (
                             <label className="tabs-name" style={{ width: length && length[index] && '135px' }}>
+                                {icons && icons[index] && !icon && icons[index]}
                                 {checkbox && <CheckboxComponent checked={tab.checked} />}
                                 <TooltipComponent text={tooltip && tooltip[index]}>
                                     <>
diff --git a/ui_src/src/components/cloneModal/index.js b/ui_src/src/components/cloneModal/index.js
index ff7c67479..6b30b41c4 100644
--- a/ui_src/src/components/cloneModal/index.js
+++ b/ui_src/src/components/cloneModal/index.js
@@ -17,19 +17,34 @@ import { FiDownload } from 'react-icons/fi';
 import Copy from '../copy';
 import CustomTabs from '../Tabs';
 import { githubUrls } from '../../const/globalConst';
+import { SiLinux, SiApple, SiWindows11 } from 'react-icons/si';
 
 const CloneModal = ({ type }) => {
-    const [tabValue, setTabValue] = useState('HTTPS');
+    const [tabValue, setTabValue] = useState(type === 'cli' ? 'Windows' : 'HTTPS');
     const downloadRepoArchive = async () => {
         window.open(githubUrls[type].DOWNLOAD_URL, '_blank');
     };
 
     return (
         <div className="clone-wrapper">
-            <p className="title"> Clone</p>
-            <p className="subtitle">Kindly clone our explanatory repository to quickly start.</p>
-            <CustomTabs tabs={['HTTPS', 'SSH']} size={'small'} tabValue={tabValue} onChange={(tabValue) => setTabValue(tabValue)} />
-            {tabValue === 'HTTPS' ? (
+            {type === 'cli' ? (
+                <>
+                    <p className="title">Functions Template Generator</p>
+                </>
+            ) : (
+                <>
+                    <p className="title">Clone</p>
+                    <p className="subtitle">Kindly clone our explanatory repository to quickly start.</p>
+                </>
+            )}
+            <CustomTabs
+                tabs={type === 'cli' ? ['Windows', 'Mac', 'Linux RPM', 'Linux APK'] : ['HTTPS', 'SSH']}
+                icons={type === 'cli' ? [<SiWindows11 />, <SiApple />, <SiLinux />, <SiLinux />] : []}
+                size={'small'}
+                tabValue={tabValue}
+                onChange={(tabValue) => setTabValue(tabValue)}
+            />
+            {type !== 'cli' && tabValue === 'HTTPS' && (
                 <>
                     <div className="url-wrapper">
                         <p className="url-text"> {githubUrls[type].MEMPHIS_GIT_HTTPS}</p>
@@ -38,7 +53,8 @@ const CloneModal = ({ type }) => {
                         </div>
                     </div>
                 </>
-            ) : (
+            )}
+            {type !== 'cli' && tabValue === 'SSH' && (
                 <>
                     <div className="url-wrapper">
                         <p className="url-text"> {githubUrls[type].MEMPHIS_GIT_SSH}</p>
@@ -48,23 +64,42 @@ const CloneModal = ({ type }) => {
                     </div>
                 </>
             )}
+            {type === 'cli' && (
+                <>
+                    <div className="url-wrapper">
+                        <p className="url-text"> {githubUrls[type][tabValue]}</p>
+                        <div className="icon">
+                            <Copy width="18" data={githubUrls[type][tabValue]} />
+                        </div>
+                    </div>
+                    <p className="create-func-cli">Create a basic Memphis function template</p>
+                    <div className="url-wrapper">
+                        <p className="url-text"> {githubUrls[type]?.code}</p>
+                        <div className="icon">
+                            <Copy width="18" data={githubUrls[type]?.code} />
+                        </div>
+                    </div>
+                </>
+            )}
             <p className="secondary-text">Use Git or checkout with SVN using the web URL.</p>
 
-            <div className="footer">
-                <Button
-                    placeholder={
-                        <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
-                            <FiDownload width={16} height={14} /> Download ZIP
-                        </div>
-                    }
-                    colorType={'purple'}
-                    onClick={downloadRepoArchive}
-                    fontSize={'14px'}
-                    fontWeight={500}
-                    border="none"
-                    backgroundColorType={'none'}
-                />
-            </div>
+            {type !== 'cli' && (
+                <div className="footer">
+                    <Button
+                        placeholder={
+                            <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+                                <FiDownload width={16} height={14} /> Download ZIP
+                            </div>
+                        }
+                        colorType={'purple'}
+                        onClick={downloadRepoArchive}
+                        fontSize={'14px'}
+                        fontWeight={500}
+                        border="none"
+                        backgroundColorType={'none'}
+                    />
+                </div>
+            )}
         </div>
     );
 };
diff --git a/ui_src/src/components/cloneModal/style.scss b/ui_src/src/components/cloneModal/style.scss
index 90c740075..5bfaa4e05 100644
--- a/ui_src/src/components/cloneModal/style.scss
+++ b/ui_src/src/components/cloneModal/style.scss
@@ -52,6 +52,11 @@
             cursor: pointer;
         }
     }
+    .create-func-cli {
+        font-size: 14px;
+        font-family: 'InterMedium';
+        margin: 15px 0px 5px 0px;
+    }
     .footer {
         border-top: 1px solid #e4e4e4;
         display: flex;
diff --git a/ui_src/src/components/connectorError/index.js b/ui_src/src/components/connectorError/index.js
index 4c36a5aad..d4f3019b7 100644
--- a/ui_src/src/components/connectorError/index.js
+++ b/ui_src/src/components/connectorError/index.js
@@ -38,15 +38,13 @@ const ConnectorError = ({ open, clickOutside, connectorId }) => {
     const [logs, setLogs] = useState(null);
 
     useEffect(() => {
-        open && getConnectorErrors();
+        open && getConnectorErrors(connectorId);
     }, [open]);
 
-    const getConnectorErrors = async () => {
+    const getConnectorErrors = async (connectorId) => {
         setLoading(true);
         try {
-            const data = await httpRequest('GET', ApiEndpoints.GET_CONNECTOR_ERRORS, {
-                connector_id: connectorId
-            });
+            const data = await httpRequest('GET', `${ApiEndpoints.GET_CONNECTOR_ERRORS}?connector_id=${connectorId}`);
             setLogs(data?.logs);
         } catch (error) {
         } finally {
diff --git a/ui_src/src/components/connectorModal/index.js b/ui_src/src/components/connectorModal/index.js
index 04a29153e..96a8401a1 100644
--- a/ui_src/src/components/connectorModal/index.js
+++ b/ui_src/src/components/connectorModal/index.js
@@ -81,8 +81,8 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
         else setIsEditing(true);
         value !== '' &&
             conntectorsNewFields[index]?.options?.push({
-                name: value,
-                value: value
+                name: value?.trim(),
+                value: value?.trim()
             });
         setConnectorInputFields(conntectorsNewFields);
     };
@@ -115,15 +115,19 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
         );
     const onFinish = async () => {
         try {
-            await connectorForm.validateFields();
             if (step === 1) {
-                isCloud() ? createConnector() : setCloudModalOpen(true);
+                try {
+                    await connectorForm.validateFields();
+                    isCloud() ? createConnector() : setCloudModalOpen(true);
+                } catch (err) {
+                    return;
+                }
             } else {
                 resError ? setStep(1) : clickOutside();
                 setError(null);
             }
         } catch (err) {
-            console.log(err);
+            return;
         }
     };
 
@@ -133,7 +137,6 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
         setStep(2);
         try {
             const modifiedSettings = { ...formFields?.settings };
-
             for (const key in modifiedSettings) {
                 if (Array.isArray(modifiedSettings[key])) {
                     modifiedSettings[key] = modifiedSettings[key].join(',');
@@ -155,7 +158,7 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
         }
     };
 
-    const generateFormItem = (input, index) => {
+    const generateFormItem = (input, index, depth, inputName) => {
         return (
             <>
                 <Form.Item
@@ -247,10 +250,17 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
                         />
                     )}
                 </Form.Item>
-                {input?.children &&
+
+                {depth === 0 &&
+                    input?.children &&
                     formFields?.settings &&
                     formFields?.settings[input?.name] &&
-                    connectorInputFields[index][formFields?.settings[input?.name]]?.map((child, index) => generateFormItem(child, index))}
+                    connectorInputFields[index][formFields?.settings[input?.name]]?.map((child, index) => generateFormItem(child, index, depth + 1, input?.name))}
+
+                {depth === 1 &&
+                    input?.children &&
+                    formFields?.settings[input?.name] &&
+                    input[formFields?.settings[input?.name]]?.map((child, index) => generateFormItem(child, index, depth + 1, input?.name))}
             </>
         );
     };
@@ -267,7 +277,6 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
             }
             className={'modal-wrapper produce-modal'}
             width="550px"
-            height="60vh"
             clickOutside={clickOutside}
             open={open}
             displayButtons={true}
@@ -317,16 +326,19 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
                                 disabled={false}
                             />
                         </Form.Item>
-                        <Divider />
-                        <div className="connector-inputs">
-                            {formFields?.type &&
-                                connectorInputFields?.map((input, index) => {
-                                    return generateFormItem(input, index);
-                                })}
-                        </div>
+                        {formFields?.type && (
+                            <>
+                                <Divider />
+                                <div className="connector-inputs">
+                                    {connectorInputFields?.map((input, index) => {
+                                        return generateFormItem(input, index, 0);
+                                    })}
+                                </div>
+                            </>
+                        )}
                     </Form>
                 )}
-                {step === 2 && !resError && (
+                {step === 2 && (!resError || (resError && Object.keys(resError)?.length === 0)) && (
                     <div className="validation">
                         {loading ? (
                             <>
@@ -339,7 +351,7 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
                     </div>
                 )}
 
-                {step === 2 && resError && !loading && <div className="result">{resError}</div>}
+                {step === 2 && resError && Object.keys(resError)?.length > 0 && !loading && <div className="result">{resError}</div>}
             </div>
             <CloudModal type="cloud" open={cloudModalopen} handleClose={() => setCloudModalOpen(false)} />
         </Modal>
diff --git a/ui_src/src/components/connectorModal/style.scss b/ui_src/src/components/connectorModal/style.scss
index 796069363..0fe0b553a 100644
--- a/ui_src/src/components/connectorModal/style.scss
+++ b/ui_src/src/components/connectorModal/style.scss
@@ -29,14 +29,14 @@
         position: relative;
     }
     .connector-inputs {
-        height: calc(100% - 215px);
+        height: 350px;
         overflow-y: auto;
         padding: 2px;
     }
     .validation {
         width: 100%;
         margin: 20px 0px;
-        height: calc(100% - 40px);
+        height: 400px;
         border-radius: 12px;
         border: 1px solid #dcdcdc;
         display: flex;
@@ -48,7 +48,7 @@
     .result {
         width: 100%;
         margin: 20px 0px;
-        height: calc(100% - 40px);
+        height: 400px;
         border-radius: 12px;
         border: 1px solid #dcdcdc;
         padding: 20px;
diff --git a/ui_src/src/components/customSelect/index.js b/ui_src/src/components/customSelect/index.js
index ab2930ba2..dfedd337d 100644
--- a/ui_src/src/components/customSelect/index.js
+++ b/ui_src/src/components/customSelect/index.js
@@ -96,7 +96,7 @@ const CustomSelect = ({ options, onChange, value, placeholder, type = 'schema',
                 )}
                 {options?.map((schema) => {
                     return (
-                        <Option key={schema?.id} value={schema?.name}>
+                        <Option key={schema?.id || schema} value={schema?.name || schema}>
                             <>
                                 <div className="schema-details">
                                     <img
@@ -105,7 +105,7 @@ const CustomSelect = ({ options, onChange, value, placeholder, type = 'schema',
                                         height={20}
                                         width={20}
                                     />
-                                    <p className="schema-name">{schema?.name}</p>
+                                    <p className="schema-name">{schema?.name || schema}</p>
                                 </div>
                                 <p className="created-by">
                                     {type === 'schema' ? <>{schema?.type} &#8226; </> : null}
diff --git a/ui_src/src/components/refreshButton/index.js b/ui_src/src/components/refreshButton/index.js
new file mode 100644
index 000000000..44f1d9712
--- /dev/null
+++ b/ui_src/src/components/refreshButton/index.js
@@ -0,0 +1,34 @@
+// Copyright 2022-2023 The Memphis.dev Authors
+// Licensed under the Memphis Business Source License 1.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// Changed License: [Apache License, Version 2.0 (https://www.apache.org/licenses/LICENSE-2.0), as published by the Apache Foundation.
+//
+// https://github.com/memphisdev/memphis/blob/master/LICENSE
+//
+// Additional Use Grant: You may make use of the Licensed Work (i) only as part of your own product or service, provided it is not a message broker or a message queue product or service; and (ii) provided that you do not use, provide, distribute, or make available the Licensed Work as a Service.
+// A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
+
+import './style.scss';
+import React from 'react';
+import { Spin, Badge } from 'antd';
+import { SyncOutlined } from '@ant-design/icons';
+import { ReactComponent as RefreshIcon } from '../../assets/images/refresh.svg';
+
+const RefreshButton = ({ refreshIndeicator, onClick, isLoading }) => {
+    return (
+        <span className="update-refresh">
+            {refreshIndeicator && <Badge dot />}
+            <div className="refresh-btn" onClick={onClick}>
+                {isLoading ? (
+                    <Spin indicator={<SyncOutlined style={{ color: '#6557FF', fontSize: '16px' }} spin />} />
+                ) : (
+                    <RefreshIcon alt="refreshIcon" style={{ path: { color: '#6557FF' } }} />
+                )}
+            </div>
+        </span>
+    );
+};
+
+export default RefreshButton;
diff --git a/ui_src/src/components/refreshButton/style.scss b/ui_src/src/components/refreshButton/style.scss
new file mode 100644
index 000000000..fee283670
--- /dev/null
+++ b/ui_src/src/components/refreshButton/style.scss
@@ -0,0 +1,21 @@
+.update-refresh {
+    display: flex;
+    position: relative;
+    .ant-badge {
+        position: absolute;
+        right: 5px;
+        top: 5px;
+        z-index: 5;
+    }
+    .refresh-btn {
+        background-color: #ffffff;
+        border-radius: 50%;
+        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+        width: 34px;
+        height: 34px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+    }
+}
diff --git a/ui_src/src/connectors/index.js b/ui_src/src/connectors/index.js
index 0e11803fc..dd7b5afa2 100644
--- a/ui_src/src/connectors/index.js
+++ b/ui_src/src/connectors/index.js
@@ -6,7 +6,7 @@ import { kafka } from './kafka';
 import { kinesis } from './kinesis';
 
 export const connectorTypes = [
-    { name: 'Kafka', icon: KafkaIcon, comment: 'Supported version: v1.0.3', inputs: kafka },
+    { name: 'Kafka', icon: KafkaIcon, comment: 'Supported version: 0.9 and above', inputs: kafka },
     // { name: 'kinesis', icon: KinesisIcon, inputs: kinesis },
     { name: 'S3', icon: S3LogoIcon, disabled: true, soon: true }
 ];
diff --git a/ui_src/src/connectors/kafka.js b/ui_src/src/connectors/kafka.js
index dfc031c8b..82c213bc8 100644
--- a/ui_src/src/connectors/kafka.js
+++ b/ui_src/src/connectors/kafka.js
@@ -2,7 +2,7 @@ export const kafka = {
     Source: [
         {
             name: 'name',
-            display: 'Name',
+            display: 'Connector name',
             type: 'string',
             required: true
         },
@@ -12,8 +12,7 @@ export const kafka = {
             type: 'multi',
             options: [],
             required: true,
-            placeholder: 'localhost:9092',
-            description: 'list of brokers'
+            placeholder: 'kafka-1:9092,kafka-2:9092'
         },
         {
             name: 'security.protocol',
@@ -27,14 +26,16 @@ export const kafka = {
                 {
                     name: 'ssl.mechanism',
                     display: 'SSL mechanism',
-                    type: 'string',
+                    type: 'select',
+                    options: ['GSSAPI', 'PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512'],
                     required: true
                 },
                 {
                     name: 'ssl.certificate.pem',
                     display: 'SSL certificate pem',
                     type: 'string',
-                    required: true
+                    required: true,
+                    placeholder: '-----BEGIN CERTIFICATE-----\n...\n-----END CERTIFICATE-----'
                 },
                 {
                     name: 'ssl.key.password',
@@ -48,7 +49,7 @@ export const kafka = {
                     name: 'sasl.mechanism',
                     display: 'SASL mechanism',
                     type: 'select',
-                    options: ['PLAIN', 'SCRAM-SHA-256'],
+                    options: ['GSSAPI', 'PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512'],
                     required: true
                 },
                 {
@@ -61,7 +62,8 @@ export const kafka = {
                     name: 'sasl.password',
                     display: 'SASL password',
                     type: 'string',
-                    required: true
+                    required: true,
+                    placeholder: 'password'
                 }
             ],
             'No authentication': []
@@ -71,33 +73,14 @@ export const kafka = {
             display: 'Group id',
             type: 'string',
             required: true,
-            description: 'consumer group id'
-        },
-        {
-            name: 'offset_strategy',
-            display: 'Offset strategy',
-            type: 'select',
-            options: ['Earliest', 'End', 'Specific offset (int)'],
-            required: false,
-            description: 'choose offset strategy',
-            children: true,
-            Earliest: [],
-            End: [],
-            'Specific offset (int)': [
-                {
-                    name: 'offset_value',
-                    display: 'Value',
-                    type: 'string',
-                    required: true
-                }
-            ]
+            description: 'Consumer group id'
         },
         {
             name: 'topic',
             display: 'Topic',
             type: 'string',
             required: true,
-            description: 'topic name'
+            description: 'Topic name'
         },
         {
             name: 'partition_strategy',
@@ -105,32 +88,63 @@ export const kafka = {
             type: 'select',
             options: ['Partition Number', 'Any Partition'],
             required: true,
-            description: 'Partition Number / Any Partition',
+            description: 'Partition Number / Any Partition (round robin)',
             children: true,
             'Partition Number': [
                 {
                     name: 'partition_value',
-                    display: 'Value',
+                    display: 'Partition Value',
                     type: 'string',
                     required: true
+                },
+                {
+                    name: 'offset_strategy',
+                    display: 'Offset strategy',
+                    type: 'select',
+                    options: ['Earliest', 'End', 'Specific offset'],
+                    required: false,
+                    description: 'choose offset strategy',
+                    children: true,
+                    Earliest: [],
+                    End: [],
+                    'Specific offset': [
+                        {
+                            name: 'offset_value',
+                            description: 'choose offset value (int)',
+                            display: 'Value',
+                            type: 'string',
+                            required: true,
+                            placeholder: 0
+                        }
+                    ]
                 }
             ],
-            'Any Partition': []
+            'Any Partition': [
+                {
+                    name: 'offset_strategy',
+                    display: 'Offset strategy',
+                    type: 'select',
+                    options: ['Earliest', 'End'],
+                    required: true,
+                    description: 'choose offset strategy'
+                }
+            ]
         },
         {
             name: 'timeout_duration_seconds',
-            display: 'kafka consumer timeout duration',
+            display: 'Consumer timeout duration (seconds)',
             type: 'string',
             required: false,
-            description: 'kafka consumer timeout duration'
+            placeholder: 10
         }
     ],
     Sink: [
         {
             name: 'name',
-            display: 'Name',
+            display: 'Connector name',
             type: 'string',
-            required: true
+            required: true,
+            description: 'Note that the sink connector name is also consumer group name'
         },
         {
             name: 'bootstrap.servers',
@@ -138,8 +152,7 @@ export const kafka = {
             type: 'multi',
             options: [],
             required: true,
-            placeholder: 'localhost:9092',
-            description: 'list of brokers'
+            placeholder: 'kafka-1:9092,kafka-2:9092'
         },
         {
             name: 'security.protocol',
@@ -153,14 +166,16 @@ export const kafka = {
                 {
                     name: 'ssl.mechanism',
                     display: 'SSL mechanism',
-                    type: 'string',
+                    type: 'select',
+                    options: ['GSSAPI', 'PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512'],
                     required: true
                 },
                 {
                     name: 'ssl.certificate.pem',
                     display: 'SSL certificate pem',
                     type: 'string',
-                    required: true
+                    required: true,
+                    placeholder: '-----BEGIN CERTIFICATE-----\n...\n-----END CERTIFICATE-----'
                 },
                 {
                     name: 'ssl.key.password',
@@ -174,7 +189,7 @@ export const kafka = {
                     name: 'sasl.mechanism',
                     display: 'SASL mechanism',
                     type: 'select',
-                    options: ['PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512'],
+                    options: ['GSSAPI', 'PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512'],
                     required: true
                 },
                 {
@@ -197,7 +212,7 @@ export const kafka = {
             display: 'Topic',
             type: 'string',
             required: true,
-            description: 'topic name'
+            description: 'Topic name'
         },
         {
             name: 'partition_strategy',
@@ -227,17 +242,19 @@ export const kafka = {
         },
         {
             name: 'memphis_batch_size',
-            display: 'Memphis batch size',
+            display: 'Memphis batch size (messages)',
             type: 'string',
             required: false,
-            description: 'memphis consuemr batch size'
+            placeholder: 100,
+            description: 'The buffer size used by Memphis to accumulate and handle incoming messages before processing'
         },
         {
             name: 'memphis_max_time_wait',
-            display: 'Max time to wait for a batch of messages',
+            display: 'Max time to wait for a batch of messages (seconds)',
+            placeholder: 5,
             type: 'string',
             required: false,
-            description: 'the time to wait for a batch of messages'
+            description: 'The duration which a batch of messages is awaited till processing'
         }
     ]
 };
diff --git a/ui_src/src/const/globalConst.js b/ui_src/src/const/globalConst.js
index 4e7a41357..3f2da5003 100644
--- a/ui_src/src/const/globalConst.js
+++ b/ui_src/src/const/globalConst.js
@@ -85,6 +85,17 @@ export const githubUrls = {
         DOWNLOAD_URL: 'https://github.com/memphisdev/functions-templates/archive/refs/heads/master.zip',
         MEMPHIS_GIT_HTTPS: 'https://github.com/memphisdev/functions-templates.git',
         MEMPHIS_GIT_SSH: 'git@github.com:memphisdev/functions-templates.git'
+    },
+    cli: {
+        Windows: `powershell -c "Invoke-WebRequest -Uri 'https://github.com/memphisdev/memphis-cli/releases/latest/download/memphis-cli_Windows_x86_64.zip'  -OutFile './memphis-cli_Windows_x86_64.zip'"
+        powershell -c "Expand-Archive memphis-cli_Windows_x86_64.zip -DestinationPath memphis-cli -Force"`,
+        Mac: `brew tap memphisdev/memphis-cli
+        brew install memphis-cli`,
+        'Linux RPM': `wget https://github.com/memphisdev/memphis-cli/releases/download/v0.0.1/memphis-cli_0.0.1_linux_amd64.rpm
+        sudo rpm -i memphis-cli_0.0.1_linux_amd64.rpm`,
+        'Linux APK': `wget https://github.com/memphisdev/memphis-cli/releases/download/v0.0.1/memphis-cli_0.0.1_linux_arm64.apk
+        apk add memphis-cli_0.0.1_linux_arm64.apk --allow-untrusted`,
+        code: 'mem func init myExampleFunc --lang [nodejs/go/python]'
     }
 };
 
diff --git a/ui_src/src/domain/administration/softwareUpdates/index.js b/ui_src/src/domain/administration/softwareUpdates/index.js
index 1b452ae46..bdf7d7886 100644
--- a/ui_src/src/domain/administration/softwareUpdates/index.js
+++ b/ui_src/src/domain/administration/softwareUpdates/index.js
@@ -49,7 +49,7 @@ function SoftwareUpates({}) {
     const [checkboxdeleteAccount, setCheckboxdeleteAccount] = useState(false);
     const [delateLoader, setDelateLoader] = useState(false);
     const systemDataComponents = [
-        { title: 'Amount of brokers', value: systemData?.total_amount_brokers },
+        { title: 'Amount of brokers', value: systemData?.total_amount_brokers, ossOnly: true },
         { title: 'total stations', value: systemData?.total_stations },
         { title: 'total users', value: systemData?.total_users },
         { title: 'total schemas', value: systemData?.total_schemas }
@@ -145,7 +145,7 @@ function SoftwareUpates({}) {
             <div className="rows">
                 <div className="item-component">
                     <div className="title-component">
-                        <div className="versions" onClick={() => isUpdateAvailable && window.open(latestVersionUrl, '_blank')}>
+                        <div className="versions" onClick={() => !isCloud() && isUpdateAvailable && window.open(latestVersionUrl, '_blank')}>
                             <LogoTexeMemphis alt="Memphis logo" width="300px" />
                             {isCloud() ? (
                                 <div className="hostname">
@@ -180,14 +180,14 @@ function SoftwareUpates({}) {
                 </div>
                 <div className="statistics">
                     {systemDataComponents.map((item, index) => {
-                        return (
+                        return (isCloud() && !item.ossOnly) || !isCloud() ? (
                             <div className="item-component" key={`${item}-${index}`}>
                                 <span className="stat-item">
                                     <label className="title">{item.title}</label>
                                     <label className="numbers">{item.value}</label>
                                 </span>
                             </div>
-                        );
+                        ) : null;
                     })}
                 </div>
                 <div className="charts">{informationPanelData.map((item, index) => genrateInformationPanel(item, index))}</div>
diff --git a/ui_src/src/domain/administration/softwareUpdates/style.scss b/ui_src/src/domain/administration/softwareUpdates/style.scss
index a2cd851ad..33217ab7c 100644
--- a/ui_src/src/domain/administration/softwareUpdates/style.scss
+++ b/ui_src/src/domain/administration/softwareUpdates/style.scss
@@ -22,9 +22,9 @@
         }
     }
     .statistics {
-        display: grid;
-        grid-template-columns: 24% 24% 24% 24%;
+        display: flex;
         justify-content: space-between;
+        gap: 15px;
         .stat-item {
             height: 100%;
             width: 100%;
@@ -47,9 +47,9 @@
         }
     }
     .charts {
-        display: grid;
-        grid-template-columns: 32% 33% 32%;
+        display: flex;
         justify-content: space-between;
+        gap: 15px;
         .info-item {
             height: 100%;
             width: 100%;
diff --git a/ui_src/src/domain/functions/components/functionList/index.js b/ui_src/src/domain/functions/components/functionList/index.js
index 3c681e0b9..b65dd677c 100644
--- a/ui_src/src/domain/functions/components/functionList/index.js
+++ b/ui_src/src/domain/functions/components/functionList/index.js
@@ -20,11 +20,13 @@ import GitHubIntegration from '../../../administration/integrations/components/g
 import { ReactComponent as PlaceholderFunctionsIcon } from '../../../../assets/images/placeholderFunctions.svg';
 import { ReactComponent as SearchIcon } from '../../../../assets/images/searchIcon.svg';
 import { ReactComponent as CloneModalIcon } from '../../../../assets/images/cloneModalIcon.svg';
-import { ReactComponent as RefreshIcon } from '../../../../assets/images/refresh.svg';
+import { ReactComponent as CliIcon } from '../../../../assets/images/cliIcon.svg';
 import { ReactComponent as RepoIcon } from '../../../../assets/images/repoPurple.svg';
 import { ReactComponent as PurpleQuestionMark } from '../../../../assets/images/purpleQuestionMark.svg';
 import { ReactComponent as MemphisLogo } from '../../../../assets/images/logo.svg';
+import { ReactComponent as RedirectIcon } from '../../../../assets/images/redirectIcon.svg';
 import CollapseArrow from '../../../../assets/images/collapseArrow.svg';
+import CollapseArroWhite from '../../../../assets/images/collapseArrowWhite.svg';
 import { BiCode } from 'react-icons/bi';
 import { MdDone } from 'react-icons/md';
 import { BsGit } from 'react-icons/bs';
@@ -48,9 +50,20 @@ import { OWNER } from '../../../../const/globalConst';
 import { Collapse, Divider, Popover, Badge } from 'antd';
 import { LOCAL_STORAGE_FUNCTION_PAGE_VIEW } from '../../../../const/localStorageConsts';
 import { getFunctionsTabs } from '../../../../services/valueConvertor';
+import RefreshButton from '../../../../components/refreshButton';
 const { Panel } = Collapse;
 const TABS = getFunctionsTabs();
 
+const MenuItem = ({ name, onClick }) => {
+    return (
+        <div className="item-wrapper-functions" onClick={onClick} key={name}>
+            <span className="item-name">
+                <label>{name}</label>
+            </span>
+        </div>
+    );
+};
+
 function FunctionList({ tabPrivate }) {
     const [state, dispatch] = useContext(Context);
     const [isLoading, setisLoading] = useState(true);
@@ -65,6 +78,7 @@ function FunctionList({ tabPrivate }) {
     const [tabValue, setTabValue] = useState(tabPrivate ? 'Private' : 'All');
     const [isFunctionsGuideOpen, setIsFunctionsGuideOpen] = useState(false);
     const [isCloneModalOpen, setIsCloneModalOpen] = useState(false);
+    const [isCloneCliModalOpen, setIsCloneCliModalOpen] = useState(false);
     const [connectedRepos, setConnectedRepos] = useState([]);
     const [clickedRefresh, setClickedRefresh] = useState(false);
     const [refreshIndeicator, setRefreshIndicator] = useState(false);
@@ -83,6 +97,23 @@ function FunctionList({ tabPrivate }) {
         setTabsCounter([memphisCount + privateCount, memphisCount, privateCount]);
     }, [filteredInstalledData, filteredOtherData]);
 
+    const cloneOptions = [
+        {
+            action: 'Clone a template',
+            onClick: () => {
+                setIsCloneModalOpen(true);
+                cloneTooltipIsOpenFlip(false);
+            }
+        },
+        {
+            action: 'Use the generator',
+            onClick: () => {
+                setIsCloneCliModalOpen(true);
+                cloneTooltipIsOpenFlip(false);
+            }
+        }
+    ];
+
     const findAndUpdateGithubIntegration = () => {
         const integrationData = state?.integrationsList?.find((integration) => integration?.name === 'github');
         setGithubIntegrationData(integrationData);
@@ -351,7 +382,12 @@ function FunctionList({ tabPrivate }) {
                         <PurpleQuestionMark className="info-icon" alt="Integration info" onClick={() => setIsFunctionsGuideOpen(true)} />
                         <Button
                             height={'26px'}
-                            placeholder={'Alpha feedback '}
+                            placeholder={
+                                <span className="alpha-feedback">
+                                    <label>Feedback</label>
+                                    <RedirectIcon alt="redirectIcon" />
+                                </span>
+                            }
                             colorType="purple"
                             radiusType="semi-round"
                             backgroundColorType={'transparent'}
@@ -364,16 +400,7 @@ function FunctionList({ tabPrivate }) {
                     <span className="memphis-label">Serverless functions to process ingested events "on the fly"</span>
                 </div>
                 <div className="action-section">
-                    <span className="update-refresh">
-                        {refreshIndeicator && <Badge dot />}
-                        <div className="refresh-btn" onClick={getAllFunctions}>
-                            {isLoading ? (
-                                <Spin indicator={<SyncOutlined style={{ color: '#6557FF', fontSize: '16px' }} spin />} />
-                            ) : (
-                                <RefreshIcon alt="refreshIcon" style={{ path: { color: '#6557FF' } }} />
-                            )}
-                        </div>
-                    </span>
+                    <RefreshButton refreshIndeicator={refreshIndeicator} onClick={getAllFunctions} isLoading={isLoading} />
                     <Popover
                         placement="top"
                         title={
@@ -411,7 +438,7 @@ function FunctionList({ tabPrivate }) {
                     </Popover>
                     <Popover
                         placement="bottomLeft"
-                        content={<CloneModal type="functions" />}
+                        content={cloneOptions.map((option, index) => MenuItem({ name: option.action, onClick: option.onClick }))}
                         width="540px"
                         trigger="click"
                         overlayClassName="clone-popover"
@@ -419,12 +446,14 @@ function FunctionList({ tabPrivate }) {
                         onOpenChange={(open) => cloneTooltipIsOpenFlip(open)}
                     >
                         <Button
-                            width="100px"
+                            width="120px"
                             height="34px"
                             placeholder={
                                 <span className="code-btn">
                                     <BiCode size={18} />
                                     <label>Code</label>
+                                    <Divider type="vertical" style={{ 'background-color': '#D9D9D9' }} />
+                                    <img src={CollapseArroWhite} alt="arrow" className={`collapse-arrow code-arrow ${cloneTooltipIsOpen ? 'open' : undefined}`} />
                                 </span>
                             }
                             colorType="white"
@@ -498,6 +527,15 @@ function FunctionList({ tabPrivate }) {
             >
                 <CloneModal type="functions" />
             </Modal>
+            <Modal
+                header={<CliIcon alt="cloModalIcon" />}
+                width="540px"
+                displayButtons={false}
+                clickOutside={() => setIsCloneCliModalOpen(false)}
+                open={isCloneCliModalOpen}
+            >
+                <CloneModal type="cli" />
+            </Modal>
             <CloudModal type="cloud" open={isCloudModalOpen} handleClose={() => setIsCloudModalOpen(false)} />
         </div>
     );
diff --git a/ui_src/src/domain/functions/components/functionList/style.scss b/ui_src/src/domain/functions/components/functionList/style.scss
index 4d8283635..3fc2ceb6f 100644
--- a/ui_src/src/domain/functions/components/functionList/style.scss
+++ b/ui_src/src/domain/functions/components/functionList/style.scss
@@ -1,6 +1,7 @@
 .function-container {
     width: calc(100% - var(--main-container-sidebar-width));
-    transition: .3s ease-in-out;
+    transition: 0.3s ease-in-out;
+    transition: 0.3s ease-in-out;
     position: absolute;
     padding: 1vw;
     min-width: 700px;
@@ -14,6 +15,14 @@
         align-items: center;
         justify-content: center;
         gap: 4px;
+        fill: #ffffff;
+        .code-arrow {
+            height: 16px;
+        }
+        fill: #ffffff;
+        .code-arrow {
+            height: 16px;
+        }
     }
     connectedRepos {
         display: flex;
@@ -73,33 +82,30 @@
             margin-bottom: 5px;
             cursor: pointer;
         }
+        .alpha-feedback {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            cursor: pointer;
+            label {
+                cursor: pointer;
+            }
+        }
+        .alpha-feedback {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            cursor: pointer;
+            label {
+                cursor: pointer;
+            }
+        }
     }
 
     .action-section {
         display: flex;
         gap: 10px;
         justify-content: flex-end;
-        .update-refresh {
-            display: flex;
-            position: relative;
-            .ant-badge {
-                position: absolute;
-                right: 5px;
-                top: 5px;
-                z-index: 5;
-            }
-            .refresh-btn {
-                background-color: #ffffff;
-                border-radius: 50%;
-                box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
-                width: 34px;
-                height: 34px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-            }
-        }
     }
     .function-list-collapse {
         width: 100%;
@@ -261,7 +267,31 @@
 }
 .clone-popover {
     .ant-popover-inner-content {
-        padding: 20px !important;
-        width: 540px;
+        padding: 5px !important;
+        width: 200px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        margin-bottom: 10px;
+    }
+}
+.item-wrapper-functions {
+    padding-left: 5px;
+    padding-right: 5px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    .item-name {
+        display: flex;
+        align-items: center;
+        gap: 5px;
     }
+    label {
+        cursor: pointer;
+    }
+}
+.item-wrapper-functions:hover {
+    background: #e3e0ff;
+    border-radius: 4px;
+    color: var(--purple);
 }
diff --git a/ui_src/src/domain/stationOverview/components/generateTokenModal/index.js b/ui_src/src/domain/stationOverview/components/generateTokenModal/index.js
index 70c72b48a..ad665833e 100644
--- a/ui_src/src/domain/stationOverview/components/generateTokenModal/index.js
+++ b/ui_src/src/domain/stationOverview/components/generateTokenModal/index.js
@@ -126,18 +126,6 @@ const GenerateTokenModal = ({ host, close, returnToken, restProducer, stationNam
                             <div className="user-password-section">
                                 <div className="app-username">
                                     <p className="field-title">Client-type user</p>
-                                    {/* <SelectComponent
-                                        placeholder="choose your app user"
-                                        colorType="black"
-                                        backgroundColorType="none"
-                                        borderColorType="gray"
-                                        radiusType="semi-round"
-                                        height="40px"
-                                        popupClassName="select-options"
-                                        options={appUsers}
-                                        value={formFields?.username || appUsers[0]}
-                                        onChange={(e) => updateState('username', e)}
-                                    /> */}
                                     <CustomSelect
                                         placeholder="choose your app user"
                                         value={formFields?.username || appUsers[0]}
diff --git a/ui_src/src/domain/stationOverview/index.js b/ui_src/src/domain/stationOverview/index.js
index f9da5c61c..5795896cd 100644
--- a/ui_src/src/domain/stationOverview/index.js
+++ b/ui_src/src/domain/stationOverview/index.js
@@ -171,7 +171,7 @@ const StationOverview = () => {
                 {!isLoading && (
                     <div className="station-overview-container">
                         <div className="overview-header">
-                            <StationOverviewHeader />
+                            <StationOverviewHeader refresh={() => getStationDetails()} />
                         </div>
                         <div className="station-observability">
                             <StationObservabilty referredFunction={location?.selectedFunction} />
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/ProduceConsumList/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/ProduceConsumList/index.js
index 631900383..f7b7fa445 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/ProduceConsumList/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/ProduceConsumList/index.js
@@ -220,12 +220,12 @@ const ProduceConsumList = ({ producer }) => {
         if (producer) {
             let [result, activeConsumers] = concatFunction('producer', stationState?.stationSocketData);
             setProducersList(result);
-            setConnectorsSourceList(stationState?.stationSocketData?.connectors?.filter((connector) => connector?.connector_type === 'source'));
+            setConnectorsSourceList(stationState?.stationSocketData?.source_connectors);
             setActiveConsumerList(activeConsumers);
         } else {
             let result = concatFunction('cgs', stationState?.stationSocketData);
             setCgsList(result);
-            setConnectorsSinkList(stationState?.stationSocketData?.connectors?.filter((connector) => connector?.connector_type === 'sink'));
+            setConnectorsSinkList(stationState?.stationSocketData?.sink_connectors);
         }
     }, [stationState?.stationSocketData]);
 
@@ -458,11 +458,20 @@ const ProduceConsumList = ({ producer }) => {
                                                         />
                                                         <MenuItem
                                                             name={'Disconnect'}
-                                                            onClick={() => removeConnector('source')}
+                                                            onClick={() => {
+                                                                removeConnector('source');
+                                                            }}
                                                             icon={<IoRemoveCircleOutline />}
                                                             loader={loading && openConnectorPopoverItem === index}
                                                         />
-                                                        <MenuItem name={'Erros'} onClick={() => setOpenConnectorError(true)} icon={<IoWarning />} />
+                                                        <MenuItem
+                                                            name={'Erros'}
+                                                            onClick={() => {
+                                                                setOpenConnectorError(true);
+                                                                setOpenConnectorPopover(false);
+                                                            }}
+                                                            icon={<IoWarning />}
+                                                        />
                                                     </>
                                                 }
                                                 trigger="click"
@@ -517,6 +526,7 @@ const ProduceConsumList = ({ producer }) => {
                                                 placement="bottomLeft"
                                                 onOpenChange={() => {
                                                     setOpenConnectorPopoverItem(index);
+                                                    setSelectedConnector(row);
                                                     setOpenConnectorPopover(!openConnectorPopover);
                                                 }}
                                                 open={openConnectorPopover && openConnectorPopoverItem === index}
@@ -528,7 +538,14 @@ const ProduceConsumList = ({ producer }) => {
                                                             icon={row?.is_active ? <IoPause /> : <IoPlayCircleOutline />}
                                                         />
                                                         <MenuItem name={'Disconnect'} onClick={() => removeConnector('sink')} icon={<IoRemoveCircleOutline />} />
-                                                        <MenuItem name={'Erros'} onClick={() => setOpenConnectorError(true)} icon={<IoWarning />} />
+                                                        <MenuItem
+                                                            name={'Erros'}
+                                                            onClick={() => {
+                                                                setOpenConnectorError(true);
+                                                                setOpenConnectorPopover(false);
+                                                            }}
+                                                            icon={<IoWarning />}
+                                                        />
                                                     </>
                                                 }
                                                 trigger="click"
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionData/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionData/index.js
index 67ab41f3d..e744299b6 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionData/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionData/index.js
@@ -34,7 +34,7 @@ import { Drawer } from 'antd';
 import { IoClose } from 'react-icons/io5';
 import OverflowTip from '../../../../../components/tooltip/overflowtip';
 
-const tabValuesList = ['Information', 'Logs', 'Dead-letter', 'Monitoring'];
+const tabValuesList = ['Monitoring', 'Information', 'Dead-letter', 'Logs'];
 loader.init();
 loader.config({ monaco });
 
@@ -48,7 +48,7 @@ const FunctionData = ({ open, onClose, setOpenFunctionDetails, functionDetails }
 
     useEffect(() => {
         if (open) {
-            setTabValue('Information');
+            setTabValue('Monitoring');
         }
     }, [open]);
 
@@ -133,8 +133,43 @@ const FunctionData = ({ open, onClose, setOpenFunctionDetails, functionDetails }
         >
             <div className="function-data-container">
                 <CustomTabs tabs={tabValuesList} size={'small'} tabValue={tabValue} onChange={(tabValue) => setTabValue(tabValue)} />
-                {tabValue === tabValuesList[0] && <FunctionInformation inputs={functionDetails?.function?.inputs || []} />}
-                {tabValue === tabValuesList[1] && <FunctionLogs functionId={functionDetails?.function?.id} />}
+                {tabValue === tabValuesList[0] && (
+                    <div className="metrics-wrapper">
+                        <div className="metrics">
+                            <MetricsIcon width="25" height="25" />
+                            <div className="metrics-body">
+                                <div className="metrics-body-title">Total invocations</div>
+                                <div className="metrics-body-subtitle">{functionDetails?.metrics?.total_invocations?.toLocaleString() || 0}</div>
+                            </div>
+                        </div>
+
+                        <div className="metrics">
+                            <MetricsClockIcon width="25" height="25" />
+                            <div className="metrics-body">
+                                <div className="metrics-body-title">Av. Processing time</div>
+                                <div className="metrics-body-subtitle">
+                                    {functionDetails?.metrics?.average_processing_time}
+                                    <span className="ms">/ms</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="metrics">
+                            <MetricsErrorIcon width="25" height="25" />
+                            <div className="metrics-body">
+                                <div className="metrics-body-title">Error rate</div>
+                                <div className="metrics-body-subtitle">{functionDetails?.metrics?.error_rate}%</div>
+                            </div>
+                        </div>
+                        <div className="metrics">
+                            <OrderingIcon width="25" height="25" />
+                            <div className="metrics-body">
+                                <div className="metrics-body-title">Ordering</div>
+                                <div className="metrics-body-subtitle">{functionDetails?.ordering_matter ? 'Yes' : 'No'}</div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+                {tabValue === tabValuesList[1] && <FunctionInformation inputs={functionDetails?.function?.inputs || []} />}
                 {tabValue === tabValuesList[2] && (
                     <dls is="x3d">
                         {attachedFunctionDlsMsgs && attachedFunctionDlsMsgs?.length > 0 ? (
@@ -195,42 +230,7 @@ const FunctionData = ({ open, onClose, setOpenFunctionDetails, functionDetails }
                         )}
                     </dls>
                 )}
-                {tabValue === tabValuesList[3] && (
-                    <div className="metrics-wrapper">
-                        <div className="metrics">
-                            <MetricsIcon width="25" height="25" />
-                            <div className="metrics-body">
-                                <div className="metrics-body-title">Total invocations</div>
-                                <div className="metrics-body-subtitle">{functionDetails?.metrics?.total_invocations?.toLocaleString() || 0}</div>
-                            </div>
-                        </div>
-
-                        <div className="metrics">
-                            <MetricsClockIcon width="25" height="25" />
-                            <div className="metrics-body">
-                                <div className="metrics-body-title">Av. Processing time</div>
-                                <div className="metrics-body-subtitle">
-                                    {functionDetails?.metrics?.average_processing_time}
-                                    <span className="ms">/ms</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="metrics">
-                            <MetricsErrorIcon width="25" height="25" />
-                            <div className="metrics-body">
-                                <div className="metrics-body-title">Error rate</div>
-                                <div className="metrics-body-subtitle">{functionDetails?.metrics?.error_rate}%</div>
-                            </div>
-                        </div>
-                        <div className="metrics">
-                            <OrderingIcon width="25" height="25" />
-                            <div className="metrics-body">
-                                <div className="metrics-body-title">Ordering</div>
-                                <div className="metrics-body-subtitle">{functionDetails?.ordering_matter ? 'Yes' : 'No'}</div>
-                            </div>
-                        </div>
-                    </div>
-                )}
+                {tabValue === tabValuesList[3] && <FunctionLogs functionId={functionDetails?.function?.id} />}
             </div>
         </Drawer>
     );
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionInputsModal/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionInputsModal/index.js
index 23d1e43e2..c283ee201 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionInputsModal/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionInputsModal/index.js
@@ -20,19 +20,15 @@ import TooltipComponent from '../../../../../components/tooltip/tooltip';
 import { ReactComponent as CheckShieldIcon } from '../../../../../assets/images/checkShieldIcon.svg';
 import { ReactComponent as LockIcon } from '../../../../../assets/images/lockIcon.svg';
 
-const FunctionInputsModal = ({ open, clickOutside, rBtnClick, rBtnText, clickedFunction }) => {
+const FunctionInputsModal = ({ open, clickOutside, rBtnClick, rBtnText, clickedFunction, handleInputsChange }) => {
     const [inputs, setInputs] = useState([]);
     const [inputsForm] = Form.useForm();
 
     const handleChange = async (e, index) => {
-        try {
-            await inputsForm.validateFields();
-            const newInputs = [...inputs];
-            newInputs[index].value = e.target.value;
-            setInputs(newInputs);
-        } catch (e) {
-            return;
-        }
+        const newInputs = [...inputs];
+        newInputs[index].value = e.target.value;
+        setInputs(newInputs);
+        handleInputsChange(newInputs);
     };
 
     useEffect(() => {
@@ -70,7 +66,6 @@ const FunctionInputsModal = ({ open, clickOutside, rBtnClick, rBtnText, clickedF
             }
             open={open}
             clickOutside={() => clickOutside()}
-            // rBtnClick={() => rBtnClick()}
             rBtnClick={onFinish}
             rBtnText={rBtnText}
         >
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsModal/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsModal/index.js
index 61feb0fa0..b2df4ba9e 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsModal/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsModal/index.js
@@ -14,7 +14,7 @@ import './style.scss';
 
 import { useState, useEffect, useContext } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
-import { Spin, Badge } from 'antd';
+import { Spin } from 'antd';
 import CustomTabs from '../../../../../components/Tabs';
 import FunctionBox from '../../../../functions/components/functionBox';
 import FunctionDetails from '../../../../functions/components/functionDetails';
@@ -28,13 +28,10 @@ import Modal from '../../../../../components/modal';
 import { ReactComponent as SearchIcon } from '../../../../../assets/images/searchIcon.svg';
 import { ReactComponent as CheckShieldIcon } from '../../../../../assets/images/checkShieldIcon.svg';
 import { ReactComponent as FunctionsModalIcon } from '../../../../../assets/images/vueSaxIcon.svg';
-import { ReactComponent as LockIcon } from '../../../../../assets/images/lockIcon.svg';
-import { ReactComponent as RefreshIcon } from '../../../../../assets/images/refresh.svg';
 import { StationStoreContext } from '../../../';
-import { SyncOutlined } from '@ant-design/icons';
 import { showMessages } from '../../../../../services/genericServices';
 import { OWNER } from '../../../../../const/globalConst';
-import TooltipComponent from '../../../../../components/tooltip/tooltip';
+import RefreshButton from '../../../../../components/refreshButton';
 
 const FunctionsModal = ({ open, clickOutside, applyFunction, referredFunction }) => {
     const [functionList, setFunctionList] = useState([]);
@@ -228,16 +225,7 @@ const FunctionsModal = ({ open, clickOutside, applyFunction, referredFunction })
                                 <p>Functions</p>
                                 <span className="title-section">
                                     <label>Say Goodbye to Manual Business Logic! Use Functions Instead of Building Complicated Clients.</label>
-                                    <span className="update-refresh">
-                                        {refreshIndeicator && <Badge dot />}
-                                        <div className="refresh-btn">
-                                            {isLoading ? (
-                                                <Spin indicator={<SyncOutlined style={{ color: '#6557FF', fontSize: '16px' }} spin />} />
-                                            ) : (
-                                                <RefreshIcon alt="refreshIcon" style={{ path: { color: '#6557FF' } }} onClick={getAllFunctions} />
-                                            )}
-                                        </div>
-                                    </span>
+                                    <RefreshButton refreshIndeicator={refreshIndeicator} onClick={getAllFunctions} isLoading={isLoading} />
                                 </span>
                             </div>
                             <div className="fdm-body">
@@ -293,6 +281,7 @@ const FunctionsModal = ({ open, clickOutside, applyFunction, referredFunction })
             <FunctionInputsModal
                 open={isInputsModalOpen}
                 clickOutside={() => setIsInputsModalOpen(false)}
+                handleInputsChange={(inputs) => handleInputsChange(inputs)}
                 rBtnClick={() => {
                     stationState?.stationFunctions?.functions?.length === 0 ? setIsApplyModalOpen(true) : onFunctionApply(selectedFunction);
                     setIsInputsModalOpen(false);
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsModal/style.scss b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsModal/style.scss
index c464d9cc4..7c8f59693 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsModal/style.scss
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsModal/style.scss
@@ -99,28 +99,6 @@
         align-items: center;
         justify-content: space-between;
     }
-    .update-refresh {
-        display: flex;
-        position: relative;
-        margin-right: 15px;
-        .ant-badge {
-            position: absolute;
-            right: 5px;
-            top: 5px;
-            z-index: 5;
-        }
-        .refresh-btn {
-            background-color: #ffffff;
-            border-radius: 50%;
-            box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
-            width: 34px;
-            height: 34px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-        }
-    }
 }
 .ant-modal-header {
     border-bottom: none;
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js
index 44a097b3d..49741c003 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js
@@ -48,8 +48,8 @@ import { Divider } from 'antd';
 import FunctionsOverview from '../components/functionsOverview';
 import CloudModal from '../../../../components/cloudModal';
 import { ReactComponent as CleanDisconnectedProducersIcon } from '../../../../assets/images/clean_disconnected_producers.svg';
-import {json} from "generate-schema";
-import pathDomains from "../../../../router";
+import { json } from 'generate-schema';
+import pathDomains from '../../../../router';
 
 const Messages = ({ referredFunction }) => {
     const [stationState, stationDispatch] = useContext(StationStoreContext);
@@ -129,7 +129,7 @@ const Messages = ({ referredFunction }) => {
     const cleanDisconnectedProducers = async (station_id) => {
         setDisableLoaderCleanDisconnectedProducers(true);
         try {
-            await httpRequest('POST', ApiEndpoints.CLEAN_DISCONNECTED_PRODUCERS, { station_id: station_id, client_type: "producers" });
+            await httpRequest('POST', ApiEndpoints.CLEAN_DISCONNECTED_PRODUCERS, { station_id: station_id, client_type: 'producers' });
             await getStationDetails();
             setDisableLoaderCleanDisconnectedProducers(false);
         } catch (error) {
@@ -399,10 +399,7 @@ const Messages = ({ referredFunction }) => {
                 <div className="tab-general">
                     <Divider style={{ marginTop: 0, marginBottom: '10px' }} />
                     <div className="header">
-                        <div className="left-side">
-                            <p className="title">Station</p>
-                            {showLastMsg()}
-                        </div>
+                        <div className="left-side">{showLastMsg()}</div>
                         <div className="right-side">
                             {((tabValue === tabs[0] && stationState?.stationSocketData?.messages?.length > 0) ||
                                 (tabValue === tabs[1] &&
@@ -604,34 +601,48 @@ const Messages = ({ referredFunction }) => {
                                 showDivider
                             />
 
-                            {isCloud() && (<>
-                                <Divider />
-                                <DetailBox
-                                    icon={<CleanDisconnectedProducersIcon width={24} alt="clean disconnected producers" />}
-                                    title="Clean disconnected producers"
-                                    data={[
-                                        <Button
-                                            width="80px"
-                                            height="25px"
-                                            placeholder="Clean"
-                                            colorType="white"
-                                            radiusType="circle"
-                                            backgroundColorType="red"
-                                            fontSize="12px"
-                                            fontWeight="600"
-                                            disabled={disableLoaderCleanDisconnectedProducers ||
-                                                stationState?.stationSocketData?.disconnected_producers?.reduce((accumulator, item) => accumulator + item.disconnected_producers_count, 0) === 0 &&
-                                                stationState?.stationSocketData?.connected_producers?.reduce((accumulator, item) => accumulator + item.disconnected_producers_count, 0) === 0
-                                            }
-                                            onClick={() => cleanDisconnectedProducers(stationState?.stationMetaData?.id)}
-                                            isLoading={disableLoaderCleanDisconnectedProducers}
-                                            tooltip={stationState?.stationSocketData?.disconnected_producers?.reduce((accumulator, item) => accumulator + item.disconnected_producers_count, 0) === 0 && "Nothing to clean"}
-                                            tooltip_placement={"right"}
-                                        />
-                                    ]}
-                                    showDivider
-                                ></DetailBox>
-                            </>)}
+                            {isCloud() && (
+                                <>
+                                    <Divider />
+                                    <DetailBox
+                                        icon={<CleanDisconnectedProducersIcon width={24} alt="clean disconnected producers" />}
+                                        title="Clean disconnected producers"
+                                        data={[
+                                            <Button
+                                                width="80px"
+                                                height="25px"
+                                                placeholder="Clean"
+                                                colorType="white"
+                                                radiusType="circle"
+                                                backgroundColorType="red"
+                                                fontSize="12px"
+                                                fontWeight="600"
+                                                disabled={
+                                                    disableLoaderCleanDisconnectedProducers ||
+                                                    (stationState?.stationSocketData?.disconnected_producers?.reduce(
+                                                        (accumulator, item) => accumulator + item.disconnected_producers_count,
+                                                        0
+                                                    ) === 0 &&
+                                                        stationState?.stationSocketData?.connected_producers?.reduce(
+                                                            (accumulator, item) => accumulator + item.disconnected_producers_count,
+                                                            0
+                                                        ) === 0)
+                                                }
+                                                onClick={() => cleanDisconnectedProducers(stationState?.stationMetaData?.id)}
+                                                isLoading={disableLoaderCleanDisconnectedProducers}
+                                                tooltip={
+                                                    stationState?.stationSocketData?.disconnected_producers?.reduce(
+                                                        (accumulator, item) => accumulator + item.disconnected_producers_count,
+                                                        0
+                                                    ) === 0 && 'Nothing to clean'
+                                                }
+                                                tooltip_placement={'right'}
+                                            />
+                                        ]}
+                                        showDivider
+                                    ></DetailBox>
+                                </>
+                            )}
                         </div>
                     )}
                 </div>
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/messages/style.scss b/ui_src/src/domain/stationOverview/stationObservabilty/messages/style.scss
index 6eabddaab..127c150ed 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/messages/style.scss
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/messages/style.scss
@@ -16,7 +16,7 @@
 .messages-container {
     flex: 0 0 40%;
     height: 71vh;
-    min-height: 622px;
+    min-height: 580px;
     box-shadow: 0px 0px 4px 3px rgba(204, 204, 204, 0.19);
     border-radius: 8px;
     background: white;
diff --git a/ui_src/src/domain/stationOverview/stationOverviewHeader/index.js b/ui_src/src/domain/stationOverview/stationOverviewHeader/index.js
index f968ac117..1f6f62011 100644
--- a/ui_src/src/domain/stationOverview/stationOverviewHeader/index.js
+++ b/ui_src/src/domain/stationOverview/stationOverviewHeader/index.js
@@ -44,13 +44,14 @@ import TagsList from '../../../components/tagList';
 import Button from '../../../components/button';
 import Modal from '../../../components/modal';
 import Auditing from '../components/auditing';
+import RefreshButton from '../../../components/refreshButton';
 import AsyncTasks from '../../../components/asyncTasks';
 import pathDomains from '../../../router';
 import { StationStoreContext } from '..';
 import { TIERED_STORAGE_UPLOAD_INTERVAL, LOCAL_STORAGE_ACCOUNT_ID, LOCAL_STORAGE_ENV, LOCAL_STORAGE_BROKER_HOST } from '../../../const/localStorageConsts';
 import { Context } from '../../../hooks/store';
 
-const StationOverviewHeader = () => {
+const StationOverviewHeader = ({ refresh }) => {
     const [stationState, stationDispatch] = useContext(StationStoreContext);
     const [state, dispatch] = useContext(Context);
     const [updateSchemaModal, setUpdateSchemaModal] = useState(false);
@@ -65,6 +66,7 @@ const StationOverviewHeader = () => {
     const [useDlsModal, setUseDlsModal] = useState(false);
     const [disableModal, setDisableModal] = useState(false);
     const [disableLoader, setDisableLoader] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
     const getAllowedActions = useGetAllowedActions();
     const history = useHistory();
 
@@ -96,6 +98,10 @@ const StationOverviewHeader = () => {
         }
     }, [stationState?.stationMetaData?.retention_type]);
 
+    useEffect(() => {
+        setIsLoading(false);
+    }, [stationState]);
+
     const returnToStaionsList = () => {
         history.push(pathDomains.stations);
     };
@@ -177,6 +183,11 @@ const StationOverviewHeader = () => {
         }
     };
 
+    const handleRefreshStationData = () => {
+        setIsLoading(true);
+        refresh();
+    };
+
     return (
         <div className="station-overview-header">
             <div className="title-wrapper">
@@ -217,7 +228,9 @@ const StationOverviewHeader = () => {
                         </span>
                     </div>
                 </div>
+
                 <div className="station-buttons">
+                    <RefreshButton onClick={() => handleRefreshStationData()} isLoading={isLoading} />
                     {stationState?.stationMetaData?.partitions_number > 1 && (
                         <PartitionsFilter partitions_number={stationState?.stationMetaData?.partitions_number || 0} />
                     )}
diff --git a/ui_src/src/domain/stationsList/index.js b/ui_src/src/domain/stationsList/index.js
index d334a89bf..3530e758a 100644
--- a/ui_src/src/domain/stationsList/index.js
+++ b/ui_src/src/domain/stationsList/index.js
@@ -41,6 +41,7 @@ import { Context } from '../../hooks/store';
 import Modal from '../../components/modal';
 import CloudModal from '../../components/cloudModal';
 import { FaArrowCircleUp } from 'react-icons/fa';
+import RefreshButton from '../../components/refreshButton';
 
 const StationsList = () => {
     const [state, dispatch] = useContext(Context);
@@ -203,6 +204,7 @@ const StationsList = () => {
                         </span>
                     </div>
                     <div className="right-side">
+                        <RefreshButton onClick={() => getAllStations()} isLoading={isLoading} />
                         <Button
                             height="34px"
                             placeholder={`Delete selected (${isCheck?.length})`}