diff --git a/ui_src/src/components/customSelect/index.js b/ui_src/src/components/customSelect/index.js
index dfedd337d..622004b9b 100644
--- a/ui_src/src/components/customSelect/index.js
+++ b/ui_src/src/components/customSelect/index.js
@@ -28,7 +28,7 @@ import pathDomains from '../../router';
 
 const { Option } = Select;
 
-const CustomSelect = ({ options, onChange, value, placeholder, type = 'schema', handleCreateNew }) => {
+const CustomSelect = ({ options, onChange, value, placeholder, type = 'schema', handleCreateNew, showCreatedBy = true }) => {
     const history = useHistory();
 
     const handleChange = (e) => {
@@ -107,10 +107,12 @@ const CustomSelect = ({ options, onChange, value, placeholder, type = 'schema',
                                     />
                                     <p className="schema-name">{schema?.name || schema}</p>
                                 </div>
-                                <p className="created-by">
-                                    {type === 'schema' ? <>{schema?.type} &#8226; </> : null}
-                                    {parsingDate(schema?.created_at)}
-                                </p>
+                                {showCreatedBy &&
+                                    <p className="created-by">
+                                        {type === 'schema' ? <>{schema?.type} &#8226; </> : null}
+                                        {parsingDate(schema?.created_at)}
+                                    </p>
+                                }
                             </>
                         </Option>
                     );
diff --git a/ui_src/src/components/sdkExample/index.js b/ui_src/src/components/sdkExample/index.js
index 6e5893aed..21cc50c45 100644
--- a/ui_src/src/components/sdkExample/index.js
+++ b/ui_src/src/components/sdkExample/index.js
@@ -55,7 +55,6 @@ loader.config({ monaco });
 const tabs = ['Producer', 'Consumer'];
 const tabsProtocol = ['Generate token', 'Produce data', 'Consume data'];
 const selectProtocolOption = ['SDK', 'REST'];
-const ExpandIcon = ({ isActive }) => <img className={isActive ? 'collapse-arrow open' : 'collapse-arrow close'} src={CollapseArrow} alt="collapse-arrow" />;
 
 const SdkExample = ({ consumer, showTabs = true, stationName, username, connectionCreds, withHeader = false }) => {
     const [langSelected, setLangSelected] = useState('Go');
@@ -497,7 +496,7 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                             <CodeIcon className="headerImage" alt="codeIcon" />
                         </div>
                         <p className="modal-title-sdk">Client generator</p>
-                        <label>We'll provide you with snippets that you can easily connect your application with Memphis</label>
+                        <label>Utilize the client generator for a quick integration of your application with the station.</label>
                     </div>
                 )}
                 <div className="code-generator-container" style={{ height: withHeader ? 'calc(100% - 150px)' : '700px' }}>
@@ -541,13 +540,11 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                                     <p className="field-title">Package installation</p>
                                     <div className="install-copy">
                                         <p>{SDK_CODE_EXAMPLE[langSelected].installation}</p>
-                                        <Copy data={SDK_CODE_EXAMPLE[langSelected].installation} />
+                                        <Copy data={SDK_CODE_EXAMPLE[langSelected].installation}/>
                                     </div>
                                 </div>
-                                <div className="tabs">
-                                    {showTabs && <SegmentButton value={tabValue} options={tabs} onChange={(tabValue) => setTabValue(tabValue)} size="medium" />}
-                                    {!showTabs && <p className="field-title">{`Code snippet for ${tabValue === 'Producer' ? 'producing' : 'consuming'} data`}</p>}
-                                </div>
+
+                                <div className="ant-divider" style={{marginBottom: '.5rem', marginTop: '1.5rem'}} role="separator"></div>
                             </>
                         )}
                         {protocolSelected === 'REST' && (
@@ -555,61 +552,51 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                         )}
                         {
                             <div className="code-builder">
-                                <Collapse ghost defaultActiveKey={['0']} expandIcon={({ isActive }) => <ExpandIcon isActive={isActive} />}>
-                                    <Panel
-                                        header={
-                                            <div className="header">
-                                                <span className="panel-header">
-                                                    <p className="collapse-title">Parameters</p>
-                                                    <label className="custom-label">Custom</label>
-                                                </span>
-
-                                                <label className="collapse-description">Clients can have multiple parameters to best suit each use case best</label>
-                                            </div>
-                                        }
-                                    >
-                                        <div className="parameters-section">
-                                            {(tabValue === 'SDK' || tabValueRest === 'Generate token') && withHeader && (
-                                                <div className="username-section">
-                                                    <span className="input-item">
-                                                        <TitleComponent headerTitle="Username" typeTitle="sub-header" />
-                                                        <Form.Item>
-                                                            <CustomSelect
-                                                                placeholder={'Select user'}
-                                                                value={formFields.userName}
-                                                                options={users}
-                                                                onChange={(e) => updateFormFields('userName', e)}
-                                                                type="user"
-                                                                handleCreateNew={() => addUserModalFlip(true)}
-                                                            />
-                                                        </Form.Item>
-                                                    </span>
-                                                    <span className="input-item">
-                                                        <TitleComponent headerTitle="Password" typeTitle="sub-header" />
-                                                        <Form.Item name="password">
-                                                            <Input
-                                                                placeholder="Type password"
-                                                                type="password"
-                                                                fontSize="14px"
-                                                                radiusType="semi-round"
-                                                                colorType="black"
-                                                                backgroundColorType="none"
-                                                                borderColorType="gray"
-                                                                height="40px"
-                                                                onBlur={(e) => updateFormFields('password', e.target.value)}
-                                                                onChange={(e) => updateFormFields('password', e.target.value)}
-                                                                value={formFields.password}
-                                                            />
-                                                        </Form.Item>
-                                                    </span>
-                                                </div>
-                                            )}
+                                <div className="parameters-section">
+                                    {(tabValue === 'SDK' || tabValueRest === 'Generate token') && withHeader && (
+                                        <div className="username-section">
+                                            <span className="input-item">
+                                                <TitleComponent headerTitle="Username" typeTitle="sub-header"/>
+                                                <Form.Item>
+                                                    <CustomSelect
+                                                        placeholder={'Select user'}
+                                                        value={formFields.userName}
+                                                        options={users}
+                                                        onChange={(e) => updateFormFields('userName', e)}
+                                                        type="user"
+                                                        handleCreateNew={() => addUserModalFlip(true)}
+                                                        showCreatedBy={false}
+                                                    />
+                                                </Form.Item>
+                                            </span>
+                                            <span className="input-item">
+                                                <TitleComponent headerTitle="Password" typeTitle="sub-header"/>
+                                                <Form.Item name="password">
+                                                    <Input
+                                                        placeholder="Type password"
+                                                        type="password"
+                                                        fontSize="14px"
+                                                        radiusType="semi-round"
+                                                        colorType="black"
+                                                        backgroundColorType="none"
+                                                        borderColorType="gray"
+                                                        height="40px"
+                                                        onBlur={(e) => updateFormFields('password', e.target.value)}
+                                                        onChange={(e) => updateFormFields('password', e.target.value)}
+                                                        value={formFields.password}
+                                                    />
+                                                </Form.Item>
+                                            </span>
+                                        </div>
+                                    )}
 
-                                            {protocolSelected === 'REST' && tabValueRest === 'Generate token' && (
-                                                <>
-                                                    <div className="username-section">
+                                    {protocolSelected === 'REST' && tabValueRest === 'Generate token' && (
+                                        <>
+                                            <div className="username-section">
                                                         <span className="input-item">
-                                                            <TitleComponent headerTitle="Token expiry" spanHeader="(In minutes)" typeTitle="sub-header" />
+                                                            <TitleComponent headerTitle="Token expiry"
+                                                                            spanHeader="(In minutes)"
+                                                                            typeTitle="sub-header"/>
                                                             <Form.Item>
                                                                 <Input
                                                                     placeholder="Type token expiry"
@@ -627,8 +614,10 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                                                                 />
                                                             </Form.Item>
                                                         </span>
-                                                        <span className="input-item">
-                                                            <TitleComponent headerTitle="Refresh token expiry" spanHeader="(In minutes)" typeTitle="sub-header" />
+                                                <span className="input-item">
+                                                            <TitleComponent headerTitle="Refresh token expiry"
+                                                                            spanHeader="(In minutes)"
+                                                                            typeTitle="sub-header"/>
                                                             <Form.Item>
                                                                 <Input
                                                                     placeholder="Refresh token expiry"
@@ -646,36 +635,36 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                                                                 />
                                                             </Form.Item>
                                                         </span>
-                                                    </div>
-                                                </>
-                                            )}
-                                            {protocolSelected === 'REST' && tabValueRest !== 'Generate token' && (
-                                                <>
-                                                    <TitleComponent
-                                                        headerTitle="JWT"
-                                                        typeTitle="sub-header"
-                                                        headerDescription="To be able to recognize a specific producer across the system"
-                                                    />
-                                                    <Form.Item>
-                                                        <Input
-                                                            placeholder="JWT"
-                                                            type="text"
-                                                            fontSize="14px"
-                                                            radiusType="semi-round"
-                                                            colorType="black"
-                                                            backgroundColorType="white"
-                                                            borderColorType="gray"
-                                                            height="40px"
-                                                            onBlur={(e) => updateFormFields('jwt', e.target.value)}
-                                                            onChange={(e) => updateFormFields('jwt', e.target.value)}
-                                                            value={formFields.jwt}
-                                                        />
-                                                    </Form.Item>
-                                                </>
-                                            )}
-                                            {(protocolSelected === 'SDK' || tabValueRest === 'Consume data') && (
-                                                <>
-                                                    <div className="username-section">
+                                            </div>
+                                        </>
+                                    )}
+                                    {protocolSelected === 'REST' && tabValueRest !== 'Generate token' && (
+                                        <>
+                                            <TitleComponent
+                                                headerTitle="JWT"
+                                                typeTitle="sub-header"
+                                                headerDescription="To be able to recognize a specific producer across the system"
+                                            />
+                                            <Form.Item>
+                                                <Input
+                                                    placeholder="JWT"
+                                                    type="text"
+                                                    fontSize="14px"
+                                                    radiusType="semi-round"
+                                                    colorType="black"
+                                                    backgroundColorType="white"
+                                                    borderColorType="gray"
+                                                    height="40px"
+                                                    onBlur={(e) => updateFormFields('jwt', e.target.value)}
+                                                    onChange={(e) => updateFormFields('jwt', e.target.value)}
+                                                    value={formFields.jwt}
+                                                />
+                                            </Form.Item>
+                                        </>
+                                    )}
+                                    {(protocolSelected === 'SDK' || tabValueRest === 'Consume data') && (
+                                        <>
+                                            <div className="username-section">
                                                         <span className="input-item">
                                                             <TitleComponent
                                                                 headerTitle={`${
@@ -702,9 +691,10 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                                                                 />
                                                             </Form.Item>
                                                         </span>
-                                                        {(tabValue === 'Consumer' || tabValueRest === 'Consume data') && (
-                                                            <span className="input-item">
-                                                                <TitleComponent headerTitle="Consumer group name" typeTitle="sub-header" />
+                                                {(tabValue === 'Consumer' || tabValueRest === 'Consume data') && (
+                                                    <span className="input-item">
+                                                                <TitleComponent headerTitle="Consumer group name"
+                                                                                typeTitle="sub-header"/>
                                                                 <Form.Item>
                                                                     <Input
                                                                         placeholder="Type consumer group name"
@@ -722,15 +712,16 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                                                                     />
                                                                 </Form.Item>
                                                             </span>
-                                                        )}
-                                                    </div>
-                                                </>
-                                            )}
-                                            {protocolSelected === 'REST' && tabValueRest === 'Consume data' && (
-                                                <>
-                                                    <div className="username-section">
+                                                )}
+                                            </div>
+                                        </>
+                                    )}
+                                    {protocolSelected === 'REST' && tabValueRest === 'Consume data' && (
+                                        <>
+                                            <div className="username-section">
                                                         <span className="input-item">
-                                                            <TitleComponent headerTitle="Batch size" typeTitle="sub-header" />
+                                                            <TitleComponent headerTitle="Batch size"
+                                                                            typeTitle="sub-header"/>
                                                             <Form.Item>
                                                                 <Input
                                                                     placeholder="Type batch size"
@@ -748,8 +739,9 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                                                                 />
                                                             </Form.Item>
                                                         </span>
-                                                        <span className="input-item">
-                                                            <TitleComponent headerTitle="Batch timeout" spanHeader="(ms)" typeTitle="sub-header" />
+                                                <span className="input-item">
+                                                            <TitleComponent headerTitle="Batch timeout"
+                                                                            spanHeader="(ms)" typeTitle="sub-header"/>
                                                             <Form.Item>
                                                                 <Input
                                                                     placeholder="Batch timeout (ms)"
@@ -767,103 +759,104 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                                                                 />
                                                             </Form.Item>
                                                         </span>
+                                            </div>
+                                        </>
+                                    )}
+                                    {protocolSelected === 'SDK' && langSelected === 'Python' && tabValue === 'Producer' && (
+                                        <div className="username-section">
+                                            <TitleComponent
+                                                headerTitle="Blocking"
+                                                typeTitle="sub-header"
+                                                headerDescription="For better performance, the client won't block requests while waiting for an acknowledgment"
+                                            />
+
+                                            <Form.Item>
+                                                <Switcher
+                                                    onChange={() => updateFormFields('blocking', !formFields.blocking)}
+                                                    checked={formFields.blocking}/>
+                                            </Form.Item>
+                                        </div>
+                                    )}
+                                    {protocolSelected === 'SDK' && langSelected !== 'Python' && tabValue === 'Producer' && (
+                                        <div className="username-section">
+                                            <TitleComponent
+                                                headerTitle="Async"
+                                                typeTitle="sub-header"
+                                                headerDescription="For better performance, the client won't block requests while waiting for an acknowledgment"
+                                            />
+
+                                            <Form.Item>
+                                                <Switcher onChange={() => updateFormFields('async', !formFields.async)}
+                                                          checked={formFields.async}/>
+                                            </Form.Item>
+                                        </div>
+                                    )}
+                                    {((protocolSelected === 'SDK' && tabValue === 'Producer') ||
+                                        (protocolSelected === 'REST' && tabValueRest === 'Produce data')) && (
+                                        <div className="username-section">
+                                            <TitleComponent headerTitle="Headers" typeTitle="sub-header"
+                                                            headerDescription="Add header to the message"/>
+                                            <Form.Item>
+                                                <Switcher
+                                                    onChange={() => updateFormFields('useHeaders', !formFields.useHeaders)}
+                                                    checked={formFields.useHeaders}
+                                                />
+                                            </Form.Item>
+                                        </div>
+                                    )}
+                                    {formFields.useHeaders &&
+                                        ((protocolSelected === 'SDK' && tabValue === 'Producer') ||
+                                            (protocolSelected === 'REST' && tabValueRest === 'Produce data')) && (
+                                            <div>
+                                                {formFields.headersList.map((header, index) => (
+                                                    <div className="header-section" key={index}>
+                                                        <span className="input-item">
+                                                            <Form.Item>
+                                                                <Input
+                                                                    placeholder="key"
+                                                                    type="text"
+                                                                    fontSize="14px"
+                                                                    maxLength="200"
+                                                                    radiusType="semi-round"
+                                                                    colorType="black"
+                                                                    backgroundColorType="white"
+                                                                    borderColorType="gray"
+                                                                    height="40px"
+                                                                    onBlur={(e) => updateHeaders('key', e.target.value, index)}
+                                                                    onChange={(e) => updateHeaders('key', e.target.value, index)}
+                                                                    value={header.key}
+                                                                />
+                                                            </Form.Item>
+                                                        </span>
+                                                        <span className="input-item">
+                                                            <Form.Item>
+                                                                <Input
+                                                                    placeholder="value"
+                                                                    type="text"
+                                                                    maxLength="200"
+                                                                    fontSize="14px"
+                                                                    radiusType="semi-round"
+                                                                    colorType="black"
+                                                                    backgroundColorType="white"
+                                                                    borderColorType="gray"
+                                                                    height="40px"
+                                                                    onBlur={(e) => updateHeaders('value', e.target.value, index)}
+                                                                    onChange={(e) => updateHeaders('value', e.target.value, index)}
+                                                                    value={header.value}
+                                                                />
+                                                            </Form.Item>
+                                                        </span>
+                                                        <FiMinusCircle className="remove-icon"
+                                                                       onClick={() => removeHeader(index)}/>
                                                     </div>
-                                                </>
-                                            )}
-                                            {protocolSelected === 'SDK' && langSelected === 'Python' && tabValue === 'Producer' && (
-                                                <div className="username-section">
-                                                    <TitleComponent
-                                                        headerTitle="Bloking"
-                                                        typeTitle="sub-header"
-                                                        headerDescription="For better performance, the client won't block requests while waiting for an acknowledgment"
-                                                    />
-
-                                                    <Form.Item>
-                                                        <Switcher onChange={() => updateFormFields('blocking', !formFields.blocking)} checked={formFields.blocking} />
-                                                    </Form.Item>
+                                                ))}
+                                                <div className="generate-action" onClick={() => addHeader()}>
+                                                    <FiPlus/>
+                                                    <span>Add more</span>
                                                 </div>
-                                            )}
-                                            {protocolSelected === 'SDK' && langSelected !== 'Python' && tabValue === 'Producer' && (
-                                                <div className="username-section">
-                                                    <TitleComponent
-                                                        headerTitle="Async"
-                                                        typeTitle="sub-header"
-                                                        headerDescription="For better performance, the client won't block requests while waiting for an acknowledgment"
-                                                    />
-
-                                                    <Form.Item>
-                                                        <Switcher onChange={() => updateFormFields('async', !formFields.async)} checked={formFields.async} />
-                                                    </Form.Item>
-                                                </div>
-                                            )}
-                                            {((protocolSelected === 'SDK' && tabValue === 'Producer') ||
-                                                (protocolSelected === 'REST' && tabValueRest === 'Produce data')) && (
-                                                <div className="username-section">
-                                                    <TitleComponent headerTitle="Headers" typeTitle="sub-header" headerDescription="Add header to the message" />
-                                                    <Form.Item>
-                                                        <Switcher
-                                                            onChange={() => updateFormFields('useHeaders', !formFields.useHeaders)}
-                                                            checked={formFields.useHeaders}
-                                                        />
-                                                    </Form.Item>
-                                                </div>
-                                            )}
-                                            {formFields.useHeaders &&
-                                                ((protocolSelected === 'SDK' && tabValue === 'Producer') ||
-                                                    (protocolSelected === 'REST' && tabValueRest === 'Produce data')) && (
-                                                    <div>
-                                                        {formFields.headersList.map((header, index) => (
-                                                            <div className="username-section" key={index}>
-                                                                <span className="input-item">
-                                                                    <TitleComponent headerTitle="Key" typeTitle="sub-header" />
-                                                                    <Form.Item>
-                                                                        <Input
-                                                                            placeholder="Type key"
-                                                                            type="text"
-                                                                            fontSize="14px"
-                                                                            maxLength="200"
-                                                                            radiusType="semi-round"
-                                                                            colorType="black"
-                                                                            backgroundColorType="white"
-                                                                            borderColorType="gray"
-                                                                            height="40px"
-                                                                            onBlur={(e) => updateHeaders('key', e.target.value, index)}
-                                                                            onChange={(e) => updateHeaders('key', e.target.value, index)}
-                                                                            value={header.key}
-                                                                        />
-                                                                    </Form.Item>
-                                                                </span>
-                                                                <span className="input-item">
-                                                                    <TitleComponent headerTitle="Value" typeTitle="sub-header" />
-                                                                    <Form.Item>
-                                                                        <Input
-                                                                            placeholder="Type value"
-                                                                            type="text"
-                                                                            maxLength="200"
-                                                                            fontSize="14px"
-                                                                            radiusType="semi-round"
-                                                                            colorType="black"
-                                                                            backgroundColorType="white"
-                                                                            borderColorType="gray"
-                                                                            height="40px"
-                                                                            onBlur={(e) => updateHeaders('value', e.target.value, index)}
-                                                                            onChange={(e) => updateHeaders('value', e.target.value, index)}
-                                                                            value={header.value}
-                                                                        />
-                                                                    </Form.Item>
-                                                                </span>
-                                                                <FiMinusCircle className="remove-icon" onClick={() => removeHeader(index)} />
-                                                            </div>
-                                                        ))}
-                                                        <div className="generate-action" onClick={() => addHeader()}>
-                                                            <FiPlus />
-                                                            <span>Add more</span>
-                                                        </div>
-                                                    </div>
-                                                )}
-                                        </div>
-                                    </Panel>
-                                </Collapse>
+                                            </div>
+                                        )}
+                                </div>
                             </div>
                         }
                     </>
@@ -906,15 +899,14 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                     />
                 </Drawer>
             </div>
-            <Divider type="vertical" />
+            <Divider type="vertical"/>
             <div>
                 <div className={`code-output-title ${withHeader && 'code-output-title-code-example'}`}>
-                    <p>Code Output</p>
-                    <label>Copy code generator to your IDE</label>
+                    <p>Generated code</p>
                 </div>
                 {protocolSelected === 'SDK' && SDK_CODE_EXAMPLE[langSelected]?.link && (
                     <div className="guidline">
-                        <NoCodeExampleIcon />
+                        <NoCodeExampleIcon/>
                         <div className="content">
                             <p>{SDK_CODE_EXAMPLE[langSelected].title}</p>
                             <span>{SDK_CODE_EXAMPLE[langSelected].desc}</span>
@@ -942,12 +934,13 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                                 <div className="generate-wrapper">
                                     <p className="field-title">Generate a token</p>
                                     <div className="generate-action" onClick={() => setGenerateModal(true)}>
-                                        <RefreshIcon width="14" />
+                                        <RefreshIcon width="14"/>
                                         <span>Generate JWT token</span>
                                     </div>
                                 </div>
                                 <div className="code-example ce-protoco">
-                                    <div className="code-content">{generateEditor(REST_CODE_EXAMPLE[langSelected].langCode, codeExample.tokenGenerate)}</div>
+                                    <div
+                                        className="code-content">{generateEditor(REST_CODE_EXAMPLE[langSelected].langCode, codeExample.tokenGenerate)}</div>
                                 </div>
                             </div>
                         )}
@@ -955,7 +948,8 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                             <div className="tabs">
                                 <p className="field-title">Produce data</p>
                                 <div className="code-example ce-protoco">
-                                    <div className="code-content produce">{generateEditor(REST_CODE_EXAMPLE[langSelected].langCode, codeExample.producer)}</div>
+                                    <div
+                                        className="code-content produce">{generateEditor(REST_CODE_EXAMPLE[langSelected].langCode, codeExample.producer)}</div>
                                 </div>
                             </div>
                         )}
@@ -963,7 +957,8 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                             <div className="tabs">
                                 <p className="field-title">Consumem data</p>
                                 <div className="code-example ce-protoco">
-                                    <div className="code-content produce">{generateEditor(REST_CODE_EXAMPLE[langSelected].langCode, codeExample.consumer)}</div>
+                                    <div
+                                        className="code-content produce">{generateEditor(REST_CODE_EXAMPLE[langSelected].langCode, codeExample.consumer)}</div>
                                 </div>
                             </div>
                         )}
diff --git a/ui_src/src/components/sdkExample/style.scss b/ui_src/src/components/sdkExample/style.scss
index b312b1970..7a27ebeb1 100644
--- a/ui_src/src/components/sdkExample/style.scss
+++ b/ui_src/src/components/sdkExample/style.scss
@@ -5,6 +5,20 @@
     height: calc(100% - 15px);
     margin-top: 15px;
     position: relative;
+    .header-section {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        .input-item {
+            width: 100%;
+        }
+        .remove-icon {
+            font-size: 30px;
+            cursor: pointer;
+            position: relative;
+            top: -5px;
+        }
+    }
     .username-section {
         display: flex;
         justify-content: space-between;
@@ -50,8 +64,6 @@
         overflow-y: auto;
         padding-right: 20px;
         .code-builder {
-            border: #e7e7e7 1px solid;
-            border-radius: 12px;
             margin-bottom: 20px;
             .ant-collapse {
                 background: rgba(101, 87, 255, 0.1);
@@ -83,10 +95,6 @@
                 color: #84818a;
             }
             .parameters-section {
-                background-color: #ffffff;
-                border-radius: 0px 0px 12px 12px;
-                position: relative;
-                padding: 10px 15px;
                 .new-user {
                     position: absolute;
                     right: 15px;
@@ -121,6 +129,7 @@
         margin: 10px 0px;
     }
     .modal-header {
+        margin-bottom: 1rem;
         .header-img-container {
             background: rgba(101, 87, 255, 0.1);
             height: 45px;
@@ -139,6 +148,7 @@
         .modal-title-sdk {
             font-family: 'InterMedium';
             font-size: 20px;
+            margin-bottom: 0!important;
         }
         p {
             margin-bottom: 0;
@@ -199,7 +209,7 @@
             border: 1px solid var(--gray);
             box-sizing: border-box;
             border-radius: 4px;
-            height: 540px;
+            height: 640px;
             overflow: auto;
             align-items: flex-start;
             display: flex;
@@ -263,19 +273,14 @@
         }
     }
     .code-output-title-code-example {
-        margin-top: 50px;
+        margin-top: 60px;
     }
 
     .code-output-title {
-        border-radius: 8px;
-        background: rgba(101, 87, 255, 0.1);
-        padding: 15px 20px;
-        margin-bottom: 20px;
         p {
-            margin-bottom: 5px;
-            color: #6557ff;
-            font-family: 'InterSemiBold';
-            font-size: 16px;
+            font-family: 'InterMedium', sans-serif;
+            margin-bottom: 1rem;
+            font-size: 20px;
         }
     }
 }
diff --git a/ui_src/src/components/titleComponent/style.scss b/ui_src/src/components/titleComponent/style.scss
index 7551495a9..a9731964d 100644
--- a/ui_src/src/components/titleComponent/style.scss
+++ b/ui_src/src/components/titleComponent/style.scss
@@ -47,7 +47,7 @@
 }
 .sub-header-title {
     font-family: 'InterMedium';
-    font-size: 16px;
+    font-size: 14px;
     line-height: 20px;
     color: #2e2c34;
     margin-bottom: 8px;