diff --git a/ui/src/app/settings/components/repo-details/repo-details.tsx b/ui/src/app/settings/components/repo-details/repo-details.tsx
index 017d87bede789..613d469c81612 100644
--- a/ui/src/app/settings/components/repo-details/repo-details.tsx
+++ b/ui/src/app/settings/components/repo-details/repo-details.tsx
@@ -17,6 +17,11 @@ export const RepoDetails = (props: {repo: models.Repository; save?: (params: New
                 title: 'Repository URL',
                 view: repository.repo
             },
+            {
+                title: 'Name',
+                view: repository.name || '',
+                edit: (formApi: FormApi) => <FormField formApi={formApi} field='name' component={Text} />
+            },
             {
                 title: 'Username (optional)',
                 view: repository.username || '',
@@ -29,13 +34,6 @@ export const RepoDetails = (props: {repo: models.Repository; save?: (params: New
             }
         ];
 
-        if (repository.name) {
-            items.splice(1, 0, {
-                title: 'NAME',
-                view: repository.name
-            });
-        }
-
         if (repository.project) {
             items.splice(repository.name ? 2 : 1, 0, {
                 title: 'Project',
@@ -86,6 +84,7 @@ export const RepoDetails = (props: {repo: models.Repository; save?: (params: New
             })}
             save={async input => {
                 const params: NewHTTPSRepoParams = {...newRepo};
+                params.name = input.name || '';
                 params.username = input.username || '';
                 params.password = input.password || '';
                 save(params);
diff --git a/ui/src/app/settings/components/repos-list/repos-list.tsx b/ui/src/app/settings/components/repos-list/repos-list.tsx
index 6b79ab490e359..876bf5378f957 100644
--- a/ui/src/app/settings/components/repos-list/repos-list.tsx
+++ b/ui/src/app/settings/components/repos-list/repos-list.tsx
@@ -470,9 +470,14 @@ export class ReposList extends React.Component<
                                                     <div className='argo-form-row'>
                                                         <FormField formApi={formApi} label='Type' field='type' component={FormSelect} componentProps={{options: ['git', 'helm']}} />
                                                     </div>
-                                                    {formApi.getFormState().values.type === 'helm' && (
+                                                    {(formApi.getFormState().values.type === 'helm' || formApi.getFormState().values.type === 'git') && (
                                                         <div className='argo-form-row'>
-                                                            <FormField formApi={formApi} label='Name' field='name' component={Text} />
+                                                            <FormField
+                                                                formApi={formApi}
+                                                                label={`Name ${formApi.getFormState().values.type === 'git' ? '(optional)' : ''}`}
+                                                                field='name'
+                                                                component={Text}
+                                                            />
                                                         </div>
                                                     )}
                                                     <div className='argo-form-row'>