diff --git a/apps/ui/src/modals/DatasourceListModal.tsx b/apps/ui/src/modals/DatasourceListModal.tsx
index 71a49b2e..2c02b11d 100644
--- a/apps/ui/src/modals/DatasourceListModal.tsx
+++ b/apps/ui/src/modals/DatasourceListModal.tsx
@@ -17,11 +17,26 @@ import { DATA_LOADER_IMAGES } from 'pages/Datasource/constants'
 import { useEffect, useState } from 'react'
 import { ButtonPrimary } from 'components/Button/Button'
 import { t } from 'i18next'
+import DatasourceForm from 'pages/Datasource/DatasourceForm'
+import CreateDatasourceForm from 'pages/Datasource/DatasourceForm/CreateDatasourceForm'
+import EditDatasourceForm from 'pages/Datasource/DatasourceForm/EditDatasourceForm'
+import TabList from 'share-ui/components/Tabs/TabList/TabList'
+import Tab from 'share-ui/components/Tabs/Tab/Tab'
+import TabsContext from 'share-ui/components/Tabs/TabsContext/TabsContext'
+import TabPanels from 'share-ui/components/Tabs/TabPanels/TabPanels'
+import TabPanel from 'share-ui/components/Tabs/TabPanel/TabPanel'
+import styled from 'styled-components'
 
 const DatasourceListModal = () => {
   const { closeModal } = useModal()
 
   const [pickedDatasource, setPickedDatasource] = useState(null as any)
+  const [createState, setCreateState] = useState(null as any)
+  const [activeTab, setActiveTab] = useState(0)
+
+  const handleTabClick = (tabId: number, tabName: string) => {
+    setActiveTab(tabId)
+  }
 
   const { data: datasources } = useDatasourcesService()
 
@@ -49,10 +64,20 @@ const DatasourceListModal = () => {
     formik.submitForm()
   }
 
+  const handlePickDatasource = (id: string) => {
+    setPickedDatasource(id)
+    setCreateState(null)
+  }
+
+  const handleCreateState = (type: string) => {
+    setCreateState(type)
+    setPickedDatasource(null)
+  }
+
   useEffect(() => {
-    if (installedDatasources?.length > 0) setPickedDatasource(installedDatasources?.[0]?.id)
+    if (installedDatasources?.length > 0) handlePickDatasource(installedDatasources?.[0]?.id)
     else if (notInstalledDatasources?.length > 0)
-      setPickedDatasource(notInstalledDatasources?.[0]?.id)
+      handlePickDatasource(notInstalledDatasources?.[0]?.id)
   }, [agentDatasources])
 
   return (
@@ -76,7 +101,7 @@ const DatasourceListModal = () => {
               return (
                 <MiniToolCard
                   key={datasource.id}
-                  onClick={() => setPickedDatasource(datasource.id)}
+                  onClick={() => handlePickDatasource(datasource.id)}
                   picked={pickedDatasource === datasource.id}
                   name={datasource.name}
                   logo={imageSrc}
@@ -86,7 +111,23 @@ const DatasourceListModal = () => {
 
             <StyledHorizontalDivider />
 
-            <ListHeader title={'Marketplace'} />
+            <ListHeader
+              title={t('datasource')}
+              multiOption={[
+                {
+                  label: `File`,
+                  function: () => handleCreateState('File'),
+                },
+                {
+                  label: `MySQL`,
+                  function: () => handleCreateState('MySQL'),
+                },
+                {
+                  label: `Postgres`,
+                  function: () => handleCreateState('Postgres'),
+                },
+              ]}
+            />
             {notInstalledDatasources?.map((datasource: any) => {
               const filteredLogos = DATA_LOADER_IMAGES.filter(
                 loaderImages => loaderImages.sourceName === datasource.source_type,
@@ -97,7 +138,7 @@ const DatasourceListModal = () => {
               return (
                 <MiniToolCard
                   key={datasource.id}
-                  onClick={() => setPickedDatasource(datasource.id)}
+                  onClick={() => handlePickDatasource(datasource.id)}
                   picked={pickedDatasource === datasource.id}
                   name={datasource.name}
                   logo={imageSrc}
@@ -107,17 +148,40 @@ const DatasourceListModal = () => {
           </StyledLeftColumn>
 
           <StyledChatWrapper>
-            <StyledInnerWrapper>
-              <StyledFooter>
-                <ButtonPrimary
-                  onClick={handleUpdateDatasource}
-                  disabled={isLoading}
-                  loading={isLoading}
-                >
-                  {agentDatasources?.includes(pickedDatasource) ? t('remove') : t('install')}
-                </ButtonPrimary>
-              </StyledFooter>
-            </StyledInnerWrapper>
+            {createState ? (
+              <CreateDatasourceForm createCallback={handlePickDatasource} type={createState} />
+            ) : (
+              <StyledInnerWrapper>
+                <TabList size='small' activeTabId={activeTab} noBorder>
+                  <Tab onClick={() => handleTabClick(0, 'contact')}>{t('info')}</Tab>
+                  <Tab onClick={() => handleTabClick(1, 'settings')}>{t('settings')}</Tab>
+                </TabList>
+
+                <StyledBody>
+                  <TabsContext activeTabId={activeTab}>
+                    <TabPanels>
+                      <TabPanel>
+                        <StyledInnerTabWrapper>
+                          <ButtonPrimary
+                            onClick={handleUpdateDatasource}
+                            disabled={isLoading}
+                            loading={isLoading}
+                          >
+                            {agentDatasources?.includes(pickedDatasource)
+                              ? t('remove')
+                              : t('install')}
+                          </ButtonPrimary>
+                        </StyledInnerTabWrapper>
+                      </TabPanel>
+
+                      <TabPanel>
+                        <EditDatasourceForm incomingDatasourceId={pickedDatasource} />
+                      </TabPanel>
+                    </TabPanels>
+                  </TabsContext>
+                </StyledBody>
+              </StyledInnerWrapper>
+            )}
           </StyledChatWrapper>
         </StyledMainWrapper>
       </StyledModalBody>
@@ -126,3 +190,21 @@ const DatasourceListModal = () => {
 }
 
 export default withRenderModal('datasource-list-modal')(DatasourceListModal)
+
+const StyledInnerTabWrapper = styled.div`
+  width: 100%;
+
+  height: 100%;
+
+  display: flex;
+
+  align-items: flex-end;
+  justify-content: flex-end;
+
+  padding-right: 10px;
+`
+const StyledBody = styled.div`
+  margin-top: 10px;
+  width: 100%;
+  height: calc(100% - 55px);
+`
diff --git a/apps/ui/src/pages/Datasource/Datasource.tsx b/apps/ui/src/pages/Datasource/Datasource.tsx
index 5a93d31b..56596ae9 100644
--- a/apps/ui/src/pages/Datasource/Datasource.tsx
+++ b/apps/ui/src/pages/Datasource/Datasource.tsx
@@ -74,6 +74,10 @@ const Datasource = () => {
                     label: `Postgres`,
                     function: () => navigate('/datasources/create-datasource?type=Postgres'),
                   },
+                  {
+                    label: `${t('contact')} ${t('group')}`,
+                    function: () => navigate('/datasources/create-group'),
+                  },
                 ]}
               />
               {datasources?.map((datasource: any) => {
@@ -95,12 +99,12 @@ const Datasource = () => {
                 )
               })}
 
-              <StyledHorizontalDivider />
+              {/* <StyledHorizontalDivider />
 
               <ListHeader
                 title={`${t('contact')} ${t('groups')}`}
                 onAddClick={() => navigate('/datasources/create-group')}
-              />
+              /> */}
               {groups?.map((group: any) => {
                 return (
                   <MiniToolCard
diff --git a/apps/ui/src/pages/Datasource/DatasourceForm/CreateDatasourceForm.tsx b/apps/ui/src/pages/Datasource/DatasourceForm/CreateDatasourceForm.tsx
index 27229de3..7351364b 100644
--- a/apps/ui/src/pages/Datasource/DatasourceForm/CreateDatasourceForm.tsx
+++ b/apps/ui/src/pages/Datasource/DatasourceForm/CreateDatasourceForm.tsx
@@ -22,8 +22,14 @@ import { StyledFormWrapper } from 'styles/formStyles.css'
 import DatasourceDemoButton from './components/DatasourceDemoButton'
 import styled from 'styled-components'
 
-const CreateDatasourceForm = () => {
-  const { formik, isLoading } = useCreateDatasource()
+const CreateDatasourceForm = ({
+  createCallback,
+  type,
+}: {
+  createCallback?: (id: string) => void
+  type?: string
+}) => {
+  const { formik, isLoading } = useCreateDatasource({ createCallback })
 
   return (
     <>
@@ -37,12 +43,12 @@ const CreateDatasourceForm = () => {
             </StyledCombiner>
           </StyledHeaderGroup>
 
-          <StyledFormWrapper>
-            <DatasourceForm formik={formik} isLoading={isLoading} />
-          </StyledFormWrapper>
+          {/* <StyledFormWrapper> */}
+          <DatasourceForm formik={formik} isLoading={isLoading} type={type} />
+          {/* </StyledFormWrapper> */}
 
           <StyledButtonWrapper>
-            <BackButton />
+            {/* <BackButton /> */}
             <ButtonPrimary
               onClick={formik?.handleSubmit}
               size={Button.sizes?.MEDIUM}
diff --git a/apps/ui/src/pages/Datasource/DatasourceForm/DatasourceForm.tsx b/apps/ui/src/pages/Datasource/DatasourceForm/DatasourceForm.tsx
index 681bf828..b63e9477 100644
--- a/apps/ui/src/pages/Datasource/DatasourceForm/DatasourceForm.tsx
+++ b/apps/ui/src/pages/Datasource/DatasourceForm/DatasourceForm.tsx
@@ -28,9 +28,10 @@ type DatasourceFormProps = {
   formik: any
   isLoading?: boolean
   isEdit?: boolean
+  type?: string
 }
 
-const DatasourceForm = ({ formik, isLoading, isEdit = false }: DatasourceFormProps) => {
+const DatasourceForm = ({ formik, isLoading, isEdit = false, type }: DatasourceFormProps) => {
   const { t } = useTranslation()
   const { dataLoaders, pickedLoaderFields, handleUploadFile, fileLoading } =
     useDatasourceForm(formik)
@@ -54,7 +55,7 @@ const DatasourceForm = ({ formik, isLoading, isEdit = false }: DatasourceFormPro
   const location = useLocation()
 
   const urlParams = new URLSearchParams(location.search)
-  const formType = urlParams.get('type') || datasource_source_type
+  const formType = urlParams.get('type') || type || datasource_source_type
 
   const { host, port, user, pass, name, tables } = values.configs
 
diff --git a/apps/ui/src/pages/Datasource/DatasourceForm/EditDatasourceForm.tsx b/apps/ui/src/pages/Datasource/DatasourceForm/EditDatasourceForm.tsx
index ebceff22..3e68690f 100644
--- a/apps/ui/src/pages/Datasource/DatasourceForm/EditDatasourceForm.tsx
+++ b/apps/ui/src/pages/Datasource/DatasourceForm/EditDatasourceForm.tsx
@@ -22,25 +22,25 @@ import { StyledFormWrapper } from 'styles/formStyles.css'
 import DatasourceDemoButton from './components/DatasourceDemoButton'
 import { StyledCombiner } from './CreateDatasourceForm'
 
-const EditDatasourceForm = () => {
-  const { formik, isLoading } = useEditDatasource()
+const EditDatasourceForm = ({ incomingDatasourceId }: { incomingDatasourceId?: string }) => {
+  const { formik, isLoading } = useEditDatasource({ incomingDatasourceId })
 
   return (
     <>
       <FormikProvider value={formik}>
         <StyledSectionWrapper>
-          <StyledHeaderGroup className='header_group'>
+          {/* <StyledHeaderGroup className='header_group'>
             <StyledCombiner>
               <StyledSectionTitle>{`${t('edit-datasource')}`}</StyledSectionTitle>
             </StyledCombiner>
-          </StyledHeaderGroup>
+          </StyledHeaderGroup> */}
 
-          <StyledFormWrapper>
-            <DatasourceForm formik={formik} isLoading={isLoading} isEdit />
-          </StyledFormWrapper>
+          {/* <StyledFormWrapper> */}
+          <DatasourceForm formik={formik} isLoading={isLoading} isEdit />
+          {/* </StyledFormWrapper> */}
 
           <StyledButtonWrapper>
-            <BackButton />
+            {/* <BackButton /> */}
             <ButtonPrimary
               onClick={formik?.handleSubmit}
               size={Button.sizes?.MEDIUM}
diff --git a/apps/ui/src/pages/Datasource/useCreateDatasource.ts b/apps/ui/src/pages/Datasource/useCreateDatasource.ts
index 1c089a23..230578e3 100644
--- a/apps/ui/src/pages/Datasource/useCreateDatasource.ts
+++ b/apps/ui/src/pages/Datasource/useCreateDatasource.ts
@@ -8,7 +8,11 @@ import { useDataLoadersService } from 'services/datasource/useDataLoadersService
 import { useDatasourcesService } from 'services/datasource/useDatasourcesService'
 import { datasourceValidationSchema } from 'utils/validationsSchema'
 
-export const useCreateDatasource = () => {
+export const useCreateDatasource = ({
+  createCallback,
+}: {
+  createCallback?: (id: string) => void
+}) => {
   const navigate = useNavigate()
   const { setToast } = useContext(ToastContext)
 
@@ -120,7 +124,8 @@ export const useCreateDatasource = () => {
         type: 'positive',
         open: true,
       })
-      navigate(`/datasources/${datasource.id}/edit-datasource`)
+      if (createCallback) createCallback(datasource.id)
+      else navigate(`/datasources/${datasource.id}/edit-datasource`)
     } catch (e) {
       setToast({
         message: 'Failed To Add Datasource!',
diff --git a/apps/ui/src/pages/Datasource/useEditDatasource.ts b/apps/ui/src/pages/Datasource/useEditDatasource.ts
index a550070a..0e8809c3 100644
--- a/apps/ui/src/pages/Datasource/useEditDatasource.ts
+++ b/apps/ui/src/pages/Datasource/useEditDatasource.ts
@@ -10,10 +10,10 @@ import { useUpdateDatasourceService } from 'services/datasource/useUpdateDatasou
 import { datasourceValidationSchema } from 'utils/validationsSchema'
 import { useDatasource } from './useDatasource'
 
-export const useEditDatasource = () => {
+export const useEditDatasource = ({ incomingDatasourceId }: { incomingDatasourceId?: string }) => {
   const navigate = useNavigate()
   const params = useParams()
-  const { datasourceId } = params
+  const datasourceId = params?.datasourceId || incomingDatasourceId
 
   const { refetchDatasources } = useDatasource()
 
@@ -125,7 +125,7 @@ export const useEditDatasource = () => {
     await Promise.all(promises)
     await Promise.all([refetchDatasources(), refetchConfigs()])
 
-    navigate('/datasources')
+    if (!incomingDatasourceId) navigate('/datasources')
 
     setToast({
       message: 'Datasource was updated!',
diff --git a/apps/ui/src/pages/Home/homeStyle.css.ts b/apps/ui/src/pages/Home/homeStyle.css.ts
index eec45df2..4fc17bcd 100644
--- a/apps/ui/src/pages/Home/homeStyle.css.ts
+++ b/apps/ui/src/pages/Home/homeStyle.css.ts
@@ -73,6 +73,8 @@ const StyledHeaderGroup = styled.div`
   align-items: flex-end;
   gap: 15px;
   /* margin-bottom: 10px; */
+
+  padding: 0 20px;
 `
 const StyledTabList = styled(TabList)`
   position: absolute;
diff --git a/apps/ui/src/pages/Models/Models.tsx b/apps/ui/src/pages/Models/Models.tsx
index 38f27125..350f9f7c 100644
--- a/apps/ui/src/pages/Models/Models.tsx
+++ b/apps/ui/src/pages/Models/Models.tsx
@@ -71,28 +71,40 @@ const Models = ({ isPublic }: { isPublic?: boolean }) => {
         <StyledContainer>
           <StyledMainWrapper>
             <StyledLeftColumn>
-              <ListHeader
-                title={t('fine-tuning')}
-                onAddClick={() => navigate('/models/create-fine-tuning')}
-              />
-              {fineTuningData?.map((fineTuning: any) => {
-                return (
-                  <MiniToolCard
-                    key={fineTuning.id}
-                    onClick={() => {
-                      navigate(`/models/${fineTuning.id}/edit-fine-tuning`)
-                    }}
-                    name={fineTuning.name}
-                    logo={tuningIcon}
-                    picked={fineTuning.id === fineTuningId}
-                    onDeleteClick={() => deleteFineTuningHandler(fineTuning.id)}
+              {fineTuningData?.length > 0 && (
+                <>
+                  <ListHeader
+                    title={t('fine-tuning')}
+                    onAddClick={() => navigate('/models/create-fine-tuning')}
                   />
-                )
-              })}
 
-              <StyledHorizontalDivider />
+                  {fineTuningData?.map((fineTuning: any) => {
+                    return (
+                      <MiniToolCard
+                        key={fineTuning.id}
+                        onClick={() => {
+                          navigate(`/models/${fineTuning.id}/edit-fine-tuning`)
+                        }}
+                        name={fineTuning.name}
+                        logo={tuningIcon}
+                        picked={fineTuning.id === fineTuningId}
+                        onDeleteClick={() => deleteFineTuningHandler(fineTuning.id)}
+                      />
+                    )
+                  })}
+                  <StyledHorizontalDivider />
+                </>
+              )}
 
-              <ListHeader title={t('models')} />
+              <ListHeader
+                title={t('models')}
+                customLabel={t('add-fine-tuning')}
+                onAddClick={
+                  fineTuningData?.length === 0
+                    ? () => navigate('/models/create-fine-tuning')
+                    : undefined
+                }
+              />
               {models
                 ?.filter(model => !model.is_fine_tuned)
                 ?.map((model, index: number) => {
diff --git a/apps/ui/src/pages/Navigation/MainNavigation.tsx b/apps/ui/src/pages/Navigation/MainNavigation.tsx
index 2865fd6a..ee1a64d8 100644
--- a/apps/ui/src/pages/Navigation/MainNavigation.tsx
+++ b/apps/ui/src/pages/Navigation/MainNavigation.tsx
@@ -106,7 +106,7 @@ const MainNavigation = ({ user }: { user: any }) => {
           </Tooltip>
         )}
 
-        {isSession && (
+        {/* {isSession && (
           <Tooltip content={t('session')} position={Tooltip.positions.LEFT}>
             <StyledLi
               isActive={includes(active, 'sessions')}
@@ -115,7 +115,7 @@ const MainNavigation = ({ user }: { user: any }) => {
               <StyledSessionIcon size={30} />
             </StyledLi>
           </Tooltip>
-        )}
+        )} */}
 
         {/* {isSchedule && (
           <Tooltip content={t('schedule')} position={Tooltip.positions.LEFT}>
diff --git a/apps/ui/src/plugins/contact/pages/Group/GroupForm/EditGroupForm.tsx b/apps/ui/src/plugins/contact/pages/Group/GroupForm/EditGroupForm.tsx
index 3df47458..7532e15a 100644
--- a/apps/ui/src/plugins/contact/pages/Group/GroupForm/EditGroupForm.tsx
+++ b/apps/ui/src/plugins/contact/pages/Group/GroupForm/EditGroupForm.tsx
@@ -44,20 +44,20 @@ const EditGroupForm = () => {
         </StyledHeaderGroup> */}
 
         <TabList size='small' activeTabId={activeTab} noBorder>
-          <Tab onClick={() => handleTabClick(0, 'group')}>{t('group')}</Tab>
-          <Tab onClick={() => handleTabClick(1, 'contact')}>{t('contacts')}</Tab>
+          <Tab onClick={() => handleTabClick(0, 'contact')}>{t('contacts')}</Tab>
+          <Tab onClick={() => handleTabClick(1, 'settings')}>{t('settings')}</Tab>
         </TabList>
 
         <TabsContext activeTabId={activeTab}>
           <TabPanels>
             <TabPanel>
-              <StyledFormWrapper>
-                <GroupForm formik={formik} />
-              </StyledFormWrapper>
+              <Contacts />
             </TabPanel>
 
             <TabPanel>
-              <Contacts />
+              <StyledFormWrapper>
+                <GroupForm formik={formik} />
+              </StyledFormWrapper>
             </TabPanel>
           </TabPanels>
         </TabsContext>
diff --git a/apps/ui/src/routes/ChatRouteLayout.tsx b/apps/ui/src/routes/ChatRouteLayout.tsx
index 703ebcf1..56c4b32d 100644
--- a/apps/ui/src/routes/ChatRouteLayout.tsx
+++ b/apps/ui/src/routes/ChatRouteLayout.tsx
@@ -186,7 +186,6 @@ const ChatRouteLayout = () => {
         )}
         {expand && !showInfo && location.pathname.includes('/chat') && (
           <StyledShowButton
-            isSmallScreen={isSmallScreen}
             isRight
             onClick={() => setShowInfo(true)}
             onMouseEnter={() => setShowInfo(true)}
@@ -340,7 +339,7 @@ const ChatRouteLayout = () => {
                   onClick={() => handleTabClick(2, 'campaigns')}
                   disabled={teamId ? true : false}
                 >
-                  {t('campaigns')}
+                  {t('More')}
                 </Tab>
               </TabList>
 
@@ -502,9 +501,9 @@ const StyledOutletWrapper = styled.div`
 
   /* max-width: 1500px; */
 `
-const StyledShowButton = styled.div<{ isRight?: boolean; isSmallScreen?: boolean }>`
+const StyledShowButton = styled.div<{ isRight?: boolean }>`
   height: 100vh;
-  width: calc(10% - 120px);
+  width: 100px;
 
   cursor: pointer;
 
@@ -518,12 +517,7 @@ const StyledShowButton = styled.div<{ isRight?: boolean; isSmallScreen?: boolean
       right: 0;
       margin-left: auto;
 
-      width: calc(15% - 250px);
-    `}
-  ${props =>
-    props.isSmallScreen &&
-    css`
-      width: calc(15% - 150px);
+      width: 30px;
     `}
 `
 const StyledMiddleArea = styled.div`
diff --git a/apps/ui/src/routes/components/DatasourceDetails.tsx b/apps/ui/src/routes/components/DatasourceDetails.tsx
index a6aa69bd..fc257a43 100644
--- a/apps/ui/src/routes/components/DatasourceDetails.tsx
+++ b/apps/ui/src/routes/components/DatasourceDetails.tsx
@@ -14,7 +14,7 @@ import { DATA_LOADER_IMAGES } from 'pages/Datasource/constants'
 import { StyledAgentWrapper, StyledIconButtonWrapper } from 'components/ChatCards/TeamChatCard'
 import IconButton from 'share-ui/components/IconButton/IconButton'
 import { StyledCloseIcon } from 'pages/Home/GetStarted/GetStartedContainer'
-import { useEditDatasource } from 'pages/Datasource/useEditDatasource'
+
 import { useEditAgent } from 'pages/Agents/useEditAgent'
 import { useModal } from 'hooks'
 import { StyledSearchOutlineIcon } from 'components/ChatSwitcher/ChatSwitcher'
diff --git a/apps/ui/src/routes/components/ListHeader.tsx b/apps/ui/src/routes/components/ListHeader.tsx
index 760d7e33..43c5b15a 100644
--- a/apps/ui/src/routes/components/ListHeader.tsx
+++ b/apps/ui/src/routes/components/ListHeader.tsx
@@ -21,9 +21,10 @@ type ListHeaderProps = {
   title: string
   onAddClick?: () => void
   multiOption?: { label: string; function: () => void }[]
+  customLabel?: string
 }
 
-const ListHeader = ({ title, onAddClick, multiOption }: ListHeaderProps) => {
+const ListHeader = ({ title, customLabel, onAddClick, multiOption }: ListHeaderProps) => {
   return (
     <StyledListHeader>
       <TypographyPrimary
@@ -37,7 +38,7 @@ const ListHeader = ({ title, onAddClick, multiOption }: ListHeaderProps) => {
           onClick={onAddClick}
           size={IconButton.sizes?.SMALL}
           kind={IconButton.kinds?.TERTIARY}
-          ariaLabel={`Add ${title}`}
+          ariaLabel={customLabel || `Add ${title}`}
         />
       )}