diff --git a/apps/design-system/src/subjects/views/pipeline-list/pipeline-list.tsx b/apps/design-system/src/subjects/views/pipeline-list/pipeline-list.tsx
index b5033eb6dd..34cbed97ee 100644
--- a/apps/design-system/src/subjects/views/pipeline-list/pipeline-list.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-list/pipeline-list.tsx
@@ -24,6 +24,7 @@ const PipelineListWrapper: FC<Partial<RepoSummaryViewProps>> = () => {
       />
       <CreatePipelineDialog
         isOpen={createPipelineOpen}
+        useTranslationStore={useTranslationStore}
         onClose={() => setCreatePipelineOpen(false)}
         onSubmit={() => {
           setCreatePipelineOpen(false)
diff --git a/apps/design-system/src/subjects/views/signin/index.tsx b/apps/design-system/src/subjects/views/signin/index.tsx
index a3f21993a0..7af71f44a5 100644
--- a/apps/design-system/src/subjects/views/signin/index.tsx
+++ b/apps/design-system/src/subjects/views/signin/index.tsx
@@ -1,7 +1,7 @@
-import { noop } from '@utils/viewUtils'
+import { noop, useTranslationStore } from '@utils/viewUtils'
 
 import { SignInPage } from '@harnessio/ui/views'
 
 export const SignInView = () => {
-  return <SignInPage isLoading={false} handleSignIn={noop} error={''} />
+  return <SignInPage isLoading={false} handleSignIn={noop} error={''} useTranslationStore={useTranslationStore} />
 }
diff --git a/apps/design-system/src/subjects/views/signup/index.tsx b/apps/design-system/src/subjects/views/signup/index.tsx
index ac77182174..8cdcc90ab2 100644
--- a/apps/design-system/src/subjects/views/signup/index.tsx
+++ b/apps/design-system/src/subjects/views/signup/index.tsx
@@ -1,7 +1,7 @@
-import { noop } from '@utils/viewUtils'
+import { noop, useTranslationStore } from '@utils/viewUtils'
 
 import { SignUpPage } from '@harnessio/ui/views'
 
 export const SignUpView = () => {
-  return <SignUpPage isLoading={false} handleSignUp={noop} error={''} />
+  return <SignUpPage isLoading={false} handleSignUp={noop} error={''} useTranslationStore={useTranslationStore} />
 }
diff --git a/apps/gitness/src/pages-v2/pipeline/create-pipeline-dialog.tsx b/apps/gitness/src/pages-v2/pipeline/create-pipeline-dialog.tsx
index 5b8e88d26b..83d52fb995 100644
--- a/apps/gitness/src/pages-v2/pipeline/create-pipeline-dialog.tsx
+++ b/apps/gitness/src/pages-v2/pipeline/create-pipeline-dialog.tsx
@@ -6,6 +6,7 @@ import { CreatePipelineDialog as CreatePipelineDialogView, CreatePipelineFormTyp
 
 import { useRoutes } from '../../framework/context/NavigationContext'
 import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath'
+import { useTranslationStore } from '../../i18n/stores/i18n-store'
 import { PathParams } from '../../RouteDefinitions'
 import { apiBranches2BranchNames, apiBranches2DefaultBranchName } from '../repo/transform-utils/branch-transform'
 import { useCreatePipelineStore } from './stores/create-pipeline-dialog.store'
@@ -69,6 +70,7 @@ export default function CreatePipelineDialog({ open, onClose }: CreatePipelineDi
       onSubmit={onSubmit}
       onCancel={onCloseInternal}
       useCreatePipelineStore={useCreatePipelineStore}
+      useTranslationStore={useTranslationStore}
     />
   )
 }
diff --git a/apps/gitness/src/pages-v2/project/project-import-container.tsx b/apps/gitness/src/pages-v2/project/project-import-container.tsx
index d6e1a4ba47..708ed0afd6 100644
--- a/apps/gitness/src/pages-v2/project/project-import-container.tsx
+++ b/apps/gitness/src/pages-v2/project/project-import-container.tsx
@@ -4,6 +4,7 @@ import { ImporterProviderType, ImportSpaceRequestBody, useImportSpaceMutation }
 import { ImportProjectFormFields, ImportProjectPage, ProviderOptionsEnum } from '@harnessio/ui/views'
 
 import { useRoutes } from '../../framework/context/NavigationContext'
+import { useTranslationStore } from '../../i18n/stores/i18n-store'
 
 export const ImportProjectContainer = () => {
   const routes = useRoutes()
@@ -53,6 +54,7 @@ export const ImportProjectContainer = () => {
       onFormCancel={onCancel}
       isLoading={isLoading}
       apiErrorsValue={error?.message?.toString()}
+      useTranslationStore={useTranslationStore}
     />
   )
 }
diff --git a/apps/gitness/src/pages-v2/repo/repo-create-page.tsx b/apps/gitness/src/pages-v2/repo/repo-create-page.tsx
index 2a883c88e7..fee940892f 100644
--- a/apps/gitness/src/pages-v2/repo/repo-create-page.tsx
+++ b/apps/gitness/src/pages-v2/repo/repo-create-page.tsx
@@ -6,7 +6,7 @@ import {
   useListGitignoreQuery,
   useListLicensesQuery
 } from '@harnessio/code-service-client'
-import { FormFields, RepoCreatePage as RepoCreatePageView } from '@harnessio/ui/views'
+import { RepoCreateFormFields, RepoCreatePage as RepoCreatePageView } from '@harnessio/ui/views'
 
 // import { Toaster } from '../../components-v2/toaster'
 import { useRoutes } from '../../framework/context/NavigationContext'
@@ -21,7 +21,7 @@ export const CreateRepo = () => {
   const spaceURL = useGetSpaceURLParam()
   const navigate = useNavigate()
 
-  const onSubmit = (data: FormFields) => {
+  const onSubmit = (data: RepoCreateFormFields) => {
     const repositoryRequest: OpenapiCreateRepositoryRequest = {
       default_branch: 'main',
       parent_ref: spaceURL,
diff --git a/apps/gitness/src/pages-v2/repo/repo-import-multiple-container.tsx b/apps/gitness/src/pages-v2/repo/repo-import-multiple-container.tsx
index 66e91b751d..6166d306b0 100644
--- a/apps/gitness/src/pages-v2/repo/repo-import-multiple-container.tsx
+++ b/apps/gitness/src/pages-v2/repo/repo-import-multiple-container.tsx
@@ -7,6 +7,7 @@ import { ImportMultipleReposFormFields, RepoImportMultiplePage } from '@harnessi
 import { useRoutes } from '../../framework/context/NavigationContext'
 import { useGetSpaceURLParam } from '../../framework/hooks/useGetSpaceParam'
 import { useAPIPath } from '../../hooks/useAPIPath'
+import { useTranslationStore } from '../../i18n/stores/i18n-store'
 import { getRepoProviderConfig, PROVIDER_TYPE_MAP } from './constants/import-providers-map'
 
 export const ImportMultipleRepos = () => {
@@ -73,13 +74,12 @@ export const ImportMultipleRepos = () => {
 
   return (
     // @TODO: Add loading states and error handling when API is available
-    <>
-      <RepoImportMultiplePage
-        onFormSubmit={onSubmit}
-        onFormCancel={onCancel}
-        isLoading={loading}
-        apiErrorsValue={apiError}
-      />
-    </>
+    <RepoImportMultiplePage
+      onFormSubmit={onSubmit}
+      onFormCancel={onCancel}
+      isLoading={loading}
+      apiErrorsValue={apiError}
+      useTranslationStore={useTranslationStore}
+    />
   )
 }
diff --git a/apps/gitness/src/pages-v2/signin.tsx b/apps/gitness/src/pages-v2/signin.tsx
index cbf9f12b63..f41e056910 100644
--- a/apps/gitness/src/pages-v2/signin.tsx
+++ b/apps/gitness/src/pages-v2/signin.tsx
@@ -5,6 +5,7 @@ import { useOnLoginMutation } from '@harnessio/code-service-client'
 import { SignInData, SignInPage } from '@harnessio/ui/views'
 
 import { useRoutes } from '../framework/context/NavigationContext'
+import { useTranslationStore } from '../i18n/stores/i18n-store'
 
 export const SignIn: FC = () => {
   const routes = useRoutes()
@@ -32,6 +33,7 @@ export const SignIn: FC = () => {
         })
       }}
       error={error?.message}
+      useTranslationStore={useTranslationStore}
     />
   )
 }
diff --git a/apps/gitness/src/pages-v2/signup.tsx b/apps/gitness/src/pages-v2/signup.tsx
index cd0c254c51..61780b239f 100644
--- a/apps/gitness/src/pages-v2/signup.tsx
+++ b/apps/gitness/src/pages-v2/signup.tsx
@@ -1,12 +1,13 @@
-import { useEffect } from 'react'
+import { FC, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { useOnRegisterMutation } from '@harnessio/code-service-client'
 import { SignUpData, SignUpPage } from '@harnessio/ui/views'
 
 import { useRoutes } from '../framework/context/NavigationContext'
+import { useTranslationStore } from '../i18n/stores/i18n-store'
 
-export const SignUp: React.FC = () => {
+export const SignUp: FC = () => {
   const routes = useRoutes()
   const navigate = useNavigate()
 
@@ -34,5 +35,12 @@ export const SignUp: React.FC = () => {
     })
   }
 
-  return <SignUpPage isLoading={isLoading} handleSignUp={handleSignUp} error={error?.message} />
+  return (
+    <SignUpPage
+      isLoading={isLoading}
+      handleSignUp={handleSignUp}
+      error={error?.message}
+      useTranslationStore={useTranslationStore}
+    />
+  )
 }
diff --git a/apps/gitness/src/pages/pull-request/types/types.ts b/apps/gitness/src/pages/pull-request/types/types.ts
index 4870df0de0..33fae22e6f 100644
--- a/apps/gitness/src/pages/pull-request/types/types.ts
+++ b/apps/gitness/src/pages/pull-request/types/types.ts
@@ -1,6 +1,5 @@
 import { DiffModeEnum } from '@git-diff-view/react'
 import { atom } from 'jotai'
-import { z } from 'zod'
 
 import {
   EnumPullReqReviewDecision,
@@ -197,11 +196,6 @@ export interface FilterViewProps {
 
 export type EnumPullReqReviewDecisionExtended = EnumPullReqReviewDecision | 'outdated'
 
-export const formSchema = z.object({
-  title: z.string().min(1, { message: 'Please provide a pull request title' }),
-  description: z.string().optional()
-})
-export type FormFields = z.infer<typeof formSchema> // Automatically generate a type from the schema
 export const changesInfoAtom = atom<{ path?: string; raw?: string; fileViews?: Map<string, string> }>({})
 
 export interface TypesDiffStats {
diff --git a/packages/ui/locales/en/views.json b/packages/ui/locales/en/views.json
index 9d95dbe248..894085c603 100644
--- a/packages/ui/locales/en/views.json
+++ b/packages/ui/locales/en/views.json
@@ -86,8 +86,10 @@
     "targetPatterns": "Target patterns",
     "createRuleCaption": "Match branches using globstar patterns (e.g.”golden”, “feature-*”, “releases/**”)",
     "rulePatternPlaceholder": "Enter the target patterns",
-    "include": "Include",
-    "exclude": "Exclude",
+    "ruleTarget": {
+      "include": "Include",
+      "exclude": "Exclude"
+    },
     "applyRuleDefaultBranch": "Apply this rule to the default branch",
     "bypassList": "Bypass list",
     "selectUsers": "Select users",
@@ -110,13 +112,95 @@
     "viewRules": "View Rules",
     "browse": "Browse",
     "deleteBranch": "Delete Branch",
+    "createBranchDialog": {
+      "branchNameLabel": "Branch name",
+      "validation": {
+        "target": "Target branch"
+      },
+      "branchNamePlaceholder": "Enter branch name"
+    },
     "createBranchTitle": "Create a branch",
     "createBranchButton": "Create branch",
     "newBranch": "New branch",
-    "createNewRepo": "Create a new repository",
-    "repoContains": "A repository contains all project files, including the revision history. Already have a project repository elsewhere?",
-    "importRepo": "Import a repository",
+    "repoCreate": {
+      "nameLabel": "Name",
+      "descriptionLabel": "Description",
+      "validation": {
+        "access": "Please select who has access"
+      },
+      "title": "Create a new repository",
+      "description": "A repository contains all project files, including the revision history. Already have a project repository elsewhere?",
+      "importRepo": "Import a repository",
+      "namePlaceholder": "Enter repository name",
+      "descriptionPlaceholder": "Enter a description of this repository",
+      "gitignorePlaceholder": "Select",
+      "gitignoreLabel": "Add .gitignore",
+      "gitignoreCaption": "Choose which files not to track from a list of templates.",
+      "licensePlaceholder": "Select",
+      "licenseLabel": "Choose a license",
+      "licenseCaption": "A license tells others what they can and can't do with your code.",
+      "access": {
+        "legend": "Who has access",
+        "publicOptionLabel": "Public",
+        "publicOptionDescription": "Anyone with access to the Gitness environment can clone this repo.",
+        "privateOptionLabel": "Private",
+        "privateOptionDescription": "You choose who can see and commit to this repository."
+      },
+      "initialize": {
+        "label": "Initialize this repository with",
+        "readmeLabel": "Add a README file",
+        "readmeDescription": "This is where you can write a long description for your project"
+      },
+      "create": {
+        "create": "Create repository",
+        "creating": "Creating repository..."
+      },
+      "cancel": "Cancel"
+    },
     "emptyRepo": "This repository is empty.",
+    "importRepo": {
+      "providerLabel": "Git provider",
+      "organizationLabel": "Organization",
+      "hostLabel": "Host URL",
+      "workspaceLabel": "Workspace",
+      "groupLabel": "Group",
+      "projectLabel": "Project",
+      "importMultipleTitle": "Import Repositories",
+      "providerPlaceholder": "Select",
+      "hostPlaceholder": "Enter the host URL",
+      "usernameLabel": "Username",
+      "usernamePlaceholder": "Enter your username",
+      "accessInput": {
+        "passwordLabel": "Password",
+        "tokenLabel": "Token",
+        "passwordPlaceholder": "Enter your password",
+        "tokenPlaceholder": "Enter your access token"
+      },
+      "groupPlaceholder": "Enter the group name",
+      "workspacePlaceholder": "Enter the workspace name",
+      "organizationPlaceholder": "Enter the organization name",
+      "projectPlaceholder": "Enter the project name",
+      "repositoriesOption": "Repositories",
+      "pipelinesOption": "Pipelines",
+      "importMultipleButton": {
+        "import": "Import repositories",
+        "importing": "Importing repositories..."
+      },
+      "cancelButton": "Cancel",
+      "repositoryNameLabel": "Repository name",
+      "repositoryLabel": "Repository",
+      "importTitle": "Import a repository",
+      "repositoryPlaceholder": "Enter the repository name",
+      "authorizationOption": "Authorization",
+      "importPipelinesOption": "Import Pipelines",
+      "repositoryNamePlaceholder": "Enter the repository name",
+      "repositoryDescriptionLabel": "Description",
+      "repositoryDescriptionPlaceholder": "Enter the repository description",
+      "importButton": {
+        "import": "Import repository",
+        "importing": "Importing repository..."
+      }
+    },
     "repositories": "Repositories",
     "import-repository": "Import repository",
     "import-repositories": "Import repositories",
@@ -183,38 +267,7 @@
     "updatingWebhook": "Updating webhook...",
     "creatingWebhook": "Creating webhook...",
     "updateWebhook": "Update webhook",
-    "createWebhook": "Create webhook",
-    "deleteConnector": "Delete Connector",
-    "deleteSecret": "Delete Secret",
-    "status": "Status",
-    "tagger": "Tagger",
-    "creationDate": "Creation date",
-    "createBranchDialog": {
-      "validation": {
-        "name": "Branch name is required",
-        "nameRegex": "Name must contain only letters, numbers, and the characters: - _ .",
-        "noSpaces": "Name cannot contain spaces",
-        "target": "Base branch is required"
-      }
-    },
-    "createTagDialog": {
-      "validation": {
-        "name": "Tag name is required",
-        "nameMax": "Name must be no longer than 40 characters",
-        "nameRegex": "Name must contain only letters, numbers, and the characters: - _ .",
-        "noSpaces": "Name cannot contain spaces",
-        "target": "Base branch is required",
-        "message": "Description is required"
-      },
-      "name": "Name",
-      "target": "Target",
-      "message": "Message"
-    },
-    "renameBranch": "Rename Branch",
-    "add": "Add",
-    "users": "Users",
-    "clone": "Clone",
-    "addFile": "Add file"
+    "createWebhook": "Create webhook"
   },
   "noData": {
     "noResults": "No search results",
@@ -267,6 +320,56 @@
     "noLabels": "No labels yet",
     "noLabelsDescription": "Use labels to organize, prioritize, and categorize tasks efficiently."
   },
+  "utils": {
+    "validation": {
+      "required": "{{name}} is required",
+      "invalid": "{{name}} is invalid",
+      "minLength": "{{name}} must be at least {{length}} characters",
+      "maxLength": "{{name}} must be no longer than {{length}} characters",
+      "specialSymbols": "{{name}} must contain only letters, numbers, and the characters: - _ .",
+      "noSpaces": "{{name}} cannot contain spaces"
+    }
+  },
+  "signIn": {
+    "emailTitle": "Username/Email",
+    "passwordTitle": "Password",
+    "checkDetails": "Please check your details",
+    "pageTitle": "Sign in to Harness",
+    "pageDescription": "Welcome back! Please enter your details.",
+    "emailDescription": "Your email",
+    "passwordDescription": "Password",
+    "buttonText": {
+      "signingIn": "Signing in...",
+      "signIn": "Sign in"
+    },
+    "signUpLink": {
+      "question": "Don’t have an account?",
+      "linkText": "Sign up"
+    }
+  },
+  "signUp": {
+    "userIDPlaceholder": "User ID",
+    "emailLabel": "Email",
+    "passwordLabel": "Password",
+    "validation": {
+      "passwordsCheck": "Passwords don't match"
+    },
+    "pageTitle": "Sign up to Harness",
+    "pageDescription": "Let’s start your journey with us today.",
+    "userIDLabel": "User ID",
+    "emailPlaceholder": "Your email",
+    "passwordPlaceholder": "Password (6+ characters)",
+    "confirmPasswordPlaceholder": "Confirm password",
+    "confirmPasswordLabel": "Confirm password",
+    "buttonText": {
+      "signingUp": "Signing up...",
+      "signUp": "Sign up"
+    },
+    "signInLink": {
+      "question": "Already have an account?",
+      "linkText": "Sign in"
+    }
+  },
   "notFound": {
     "button": "Reload page",
     "title": "Something went wrong…",
@@ -276,9 +379,7 @@
   "search": "Search",
   "connectors": {
     "createNew": "Create new connector",
-    "delete": "Delete Connector",
-    "updated": "Last updated",
-    "lastConnected": "Last connected"
+    "delete": "Delete Connector"
   },
   "execution": {
     "summary": "Summary",
@@ -319,11 +420,11 @@
   "projectSettings": {
     "newLabels": "Create label",
     "general": {
+      "projectNameLabel": "Project name",
+      "projectDescriptionLabel": "Description",
       "mainTitle": "General settings",
       "projectNamePlaceholder": "Enter project name",
-      "projectNameLabel": "Project name",
       "projectDescriptionPlaceholder": "Enter description (optional)",
-      "projectDescriptionLabel": "Description",
       "formSubmitButton": {
         "savingState": "Saving...",
         "defaultState": "Save changes",
@@ -334,9 +435,9 @@
       "deleteProjectDescription": "This will permanently delete this project, and everything contained in it. All repositories in it will also be deleted.",
       "deleteProjectButton": "Delete project"
     },
-    "newMember": "New member",
     "member": "Member",
     "role": "Role",
+    "newMember": "New member",
     "addMember": "Add member to this project",
     "membersTable": {
       "user": "User",
@@ -378,6 +479,11 @@
     "compareChangesFormTitleLabel": "Title",
     "compareChangesFormDescriptionPlaceholder": "Add Pull Request description here.",
     "compareChangesFormDescriptionLabel": "Description",
+    "compare": {
+      "validation": {
+        "title": "Pull request title"
+      }
+    },
     "compareChanges": "Comparing changes",
     "compareChangesDescription": "Choose two branches to see what’s changed or to start a new pull request.",
     "compareChangesAbleToMerge": "Able to merge.",
@@ -412,6 +518,7 @@
     "split": "Split",
     "unified": "Unified",
     "viewed": "Viewed",
+    "compareChangesCantMergeDesciption": "You can still create the pull request.",
     "compareChangesForkLink": "compare across forks",
     "compareChangesOr": "or",
     "compareChangesDiffLink": "learn more about diff comparisons",
@@ -428,28 +535,57 @@
     "fileNoChanges": "File without changes.",
     "binaryNotShown": "Binary file not shown."
   },
+  "pipelines": {
+    "createPipelineDialog": {
+      "nameLabel": "Pipeline name",
+      "branchLabel": "Branch",
+      "yamlPathLabel": "Yaml path",
+      "dialogTitle": "Create Pipeline",
+      "branchPlaceholder": "Select",
+      "cancelButton": "Cancel",
+      "createButton": "Create Pipeline"
+    }
+  },
   "profileSettings": {
-    "newSshKey": "New SSH key",
-    "enterNamePlaceholder": "Enter the name",
-    "publicKey": "Public key",
-    "cancel": "Cancel",
-    "save": "Save",
+    "sshKey": {
+      "validation": {
+        "name": "Key name"
+      },
+      "publicKey": "Public key",
+      "newSshKey": "New SSH key",
+      "enterNamePlaceholder": "Enter the name",
+      "enterPublicKeyPlaceholder": "Enter the public key",
+      "cancel": "Cancel",
+      "save": "Save"
+    },
     "name": "Name",
     "added": "Added",
     "lastUsedDate": "Last used date",
     "deleteSshKey": "Delete SSH key",
     "noDataKeysDescription": "There are no SSH keys associated with this account.",
-    "createToken": "Create a token",
-    "enterTokenPlaceholder": "Enter token name",
-    "expiration": "Expiration",
-    "token": "Token",
-    "tokenSuccessDescription": "Your token has been generated. Please make sure to copy and store your token somewhere safe, you won’t beable to see it again.",
-    "select": "Select",
-    "tokenExpiryNone": "Token will never expire",
-    "tokenExpiryDate": " Token will expire on",
-    "gotItButton": "Got it",
-    "generateTokenButton": "Generate token",
-    "generatingTokenButton": "Generating token...",
+    "createTokenDialog": {
+      "nameLabel": "Name",
+      "expirationLabel": "Expiration",
+      "expirationOptions": {
+        "7_days": "7 days",
+        "30_days": "30 days",
+        "60_days": "60 days",
+        "90_days": "90 days",
+        "never": "Never"
+      },
+      "tokenExpiryNone": "Token will never expire",
+      "tokenExpiryDate": "Token will expire on",
+      "title": "Create a token",
+      "namePlaceholder": "Enter token name",
+      "expiration": "Expiration",
+      "tokenFieldLabel": "Token",
+      "successDescription": "Your token has been generated. Please make sure to copy and store your token somewhere safe, you won’t be able to see it again.",
+      "expirationPlaceholder": "Select",
+      "gotItButton": "Got it",
+      "cancelButton": "Cancel",
+      "generateButton": "Generate token",
+      "generatingButton": "Generating token..."
+    },
     "tokenTableHeader": "Token",
     "statusTableHeader": "Status",
     "expirationDateTableHeader": "Expiration date",
@@ -458,30 +594,22 @@
     "noExpiration": "No Expiration",
     "deleteToken": "Delete token",
     "noTokenDescription": "There are no personal access tokens associated with this account.",
+    "username": "Username",
+    "accountEmail": "Account email",
+    "newPassword": "New password",
     "validation": {
-      "nameMin": "Please provide your name",
-      "nameMax": "Name must be no longer than 256 characters",
-      "usernameMin": "Please provide a username",
-      "emailInvalid": "Please provide a valid email address",
-      "emailMax": "Email must be no longer than 250 characters",
-      "passwordMin": "New password must be at least 6 characters",
-      "passwordMax": "New password must be no longer than 128 characters",
-      "confirmPasswordMin": "Please confirm your new password",
       "passwordsDoNotMatch": "Passwords do not match"
     },
     "accountSettings": "Account settings",
     "personalInfo": "Personal information",
+    "enterNamePlaceholder": "Enter your name",
     "enterUsernamePlaceholder": "Enter your username",
-    "username": "Username",
-    "enterUsernameCaption": "This username will be shown across the platform.",
-    "accountEmail": "Account email",
     "updatingProfileButton": "Updating...",
     "updateProfileButton": "Update profile",
     "updatedButton": "Updated",
     "passwordSettingsTitle": "Password settings",
     "passwordSettingsDesc": "Minimum of 6 characters long containing at least one number and a mixture of uppercase and lowercase letters.",
     "enterPasswordPlaceholder": "Enter a new password",
-    "newPassword": "New password",
     "confirmPasswordPlaceholder": "Confirm your new password",
     "confirmPassword": "Confirm password",
     "updating": "Updating...",
@@ -493,24 +621,18 @@
     "sshKeys": "My SSH keys",
     "addSshKeyDescription": "SSH keys allow you to establish a secure connection to your code repository.",
     "addSshKey": "Add new SSH key",
-    "saving": "Saving...",
-    "generalTab": "General",
-    "keysTab": "Keys and Tokens"
+    "enterUsernameCaption": "This username will be shown across the platform."
   },
   "createProject": {
-    "validation": {
-      "nameNoEmpty": "The field can’t be blank",
-      "nameMinLength": "The project name should be at least 4 characters"
-    },
-    "backButton": "Back",
-    "title": "Create your new project",
-    "description": "Organize your repositories, pipelines and more.",
     "form": {
       "name": "Project name",
-      "namePlaceholder": "Enter your project name",
       "description": "Description",
+      "namePlaceholder": "Enter your project name",
       "descriptionPlaceholder": "Enter a description (optional)"
     },
+    "backButton": "Back",
+    "title": "Create your new project",
+    "description": "Organize your repositories, pipelines and more.",
     "create": {
       "projectCreation": "Creating project...",
       "createProject": "Create project"
@@ -520,20 +642,33 @@
       "link": "Log out"
     }
   },
+  "importProject": {
+    "projectNameLabel": "Name",
+    "descriptionLabel": "Description",
+    "gitProviderLabel": "Git provider",
+    "organizationLabel": "Organization",
+    "hostUrlLabel": "Host URL",
+    "title": "Import a project",
+    "gitProviderPlaceholder": "Select provider",
+    "hostUrlPlaceholder": "Enter the host URL",
+    "tokenLabel": "Token",
+    "tokenPlaceholder": "Enter your access token",
+    "organizationPlaceholder": "Enter the organization name",
+    "repositoriesLabel": "Repositories",
+    "pipelinesLabel": "Import Pipelines",
+    "projectNamePlaceholder": "Enter repository name",
+    "descriptionPlaceholder": "Enter a description",
+    "importButton": {
+      "default": "Import project",
+      "importing": "Importing project..."
+    },
+    "cancelButton": "Cancel"
+  },
   "forms": {
     "selectMember": "Select member",
     "selectRole": "Select role",
-    "enterBranchName": "Enter branch name",
-    "createBranchError": "Branch name is required",
-    "enterTagName": "Enter a tag name here",
-    "tagName": "Name",
-    "basedOn": "Based on",
-    "select": "Select",
-    "baseBranch": "Base branch",
-    "selectBranchError": "Base branch is required",
-    "baseTag": "Based on",
-    "selectMemberError": "Member is required",
-    "selectRoleError": "Role is required"
+    "enterTagName": "Enter tag name",
+    "createBranchError": ""
   },
   "roles": {
     "owner": "Owner",
@@ -604,8 +739,7 @@
       "validation": {
         "userIdRequired": "Please provide a user ID",
         "invalidEmail": "Please enter a valid email address",
-        "displayNameRequired": "Please provide a display name",
-        "emailInvalid": "Please enter a valid email"
+        "displayNameRequired": "Please provide a display name"
       }
     },
     "userId": "User ID",
diff --git a/packages/ui/locales/fr/views.json b/packages/ui/locales/fr/views.json
index fbb9c46073..4874a62752 100644
--- a/packages/ui/locales/fr/views.json
+++ b/packages/ui/locales/fr/views.json
@@ -86,8 +86,10 @@
     "targetPatterns": "Modèles cibles",
     "createRuleCaption": "Définir les branches correspondant aux modèles globaux (ex : 'feature-*', 'release/**')",
     "rulePatternPlaceholder": "Enter the target patterns",
-    "include": "Include",
-    "exclude": "Exclude",
+    "ruleTarget": {
+      "include": "Include",
+      "exclude": "Exclude"
+    },
     "applyRuleDefaultBranch": "Appliquer la règle à la branche par défaut",
     "bypassList": "Liste de contournement",
     "selectUsers": "Sélectionner les utilisateurs",
@@ -108,15 +110,97 @@
     "pullRequest": "Pull Request",
     "newPullReq": "Nouvelle requête de tirage",
     "viewRules": "Voir les règles",
-    "browse": "Browse",
-    "deleteBranch": "Delete Branch",
+    "browse": "Parcourir",
+    "deleteBranch": "Supprimer la branche",
+    "createBranchDialog": {
+      "branchNameLabel": "Nom de la branche",
+      "validation": {
+        "target": "Branche cible"
+      },
+      "branchNamePlaceholder": "Entrez le nom de la branche"
+    },
     "createBranchTitle": "Créer une branche",
     "createBranchButton": "Créer une branche",
     "newBranch": "Nouvelle branche",
-    "createNewRepo": "Create a new repository",
-    "repoContains": "A repository contains all project files, including the revision history. Already have a project repository elsewhere?",
-    "importRepo": "Import a repository",
+    "repoCreate": {
+      "nameLabel": "Nom",
+      "descriptionLabel": "Description",
+      "validation": {
+        "access": "Veuillez sélectionner qui a accès"
+      },
+      "title": "Créer un nouveau dépôt",
+      "description": "Un dépôt contient tous les fichiers du projet, y compris l'historique des révisions. Vous avez déjà un dépôt de projet ailleurs ?",
+      "importRepo": "Importer un dépôt",
+      "namePlaceholder": "Entrez le nom du dépôt",
+      "descriptionPlaceholder": "Entrez une description de ce dépôt",
+      "gitignorePlaceholder": "Sélectionner",
+      "gitignoreLabel": "Ajouter .gitignore",
+      "gitignoreCaption": "Choisissez quels fichiers ne pas suivre à partir d'une liste de modèles.",
+      "licensePlaceholder": "Sélectionner",
+      "licenseLabel": "Choisir une licence",
+      "licenseCaption": "Une licence indique aux autres ce qu'ils peuvent et ne peuvent pas faire avec votre code.",
+      "access": {
+        "legend": "Qui a accès",
+        "publicOptionLabel": "Public",
+        "publicOptionDescription": "Toute personne ayant accès à l'environnement Gitness peut cloner ce dépôt.",
+        "privateOptionLabel": "Privé",
+        "privateOptionDescription": "Vous choisissez qui peut voir et contribuer à ce dépôt."
+      },
+      "initialize": {
+        "label": "Initialiser ce dépôt avec",
+        "readmeLabel": "Ajouter un fichier README",
+        "readmeDescription": "C'est ici que vous pouvez écrire une longue description pour votre projet"
+      },
+      "create": {
+        "create": "Créer un dépôt",
+        "creating": "Création du dépôt..."
+      },
+      "cancel": "Annuler"
+    },
     "emptyRepo": "Ce référentiel est vide.",
+    "importRepo": {
+      "providerLabel": "Fournisseur Git",
+      "organizationLabel": "Organisation",
+      "hostLabel": "URL d'hôte",
+      "workspaceLabel": "Espace de travail",
+      "groupLabel": "Groupe",
+      "projectLabel": "Projet",
+      "importMultipleTitle": "Importer des dépôts",
+      "providerPlaceholder": "Sélectionner",
+      "hostPlaceholder": "Entrez l'URL d'hôte",
+      "usernameLabel": "Nom d'utilisateur",
+      "usernamePlaceholder": "Entrez votre nom d'utilisateur",
+      "accessInput": {
+        "passwordLabel": "Mot de passe",
+        "tokenLabel": "Jeton",
+        "passwordPlaceholder": "Entrez votre mot de passe",
+        "tokenPlaceholder": "Entrez votre jeton d'accès"
+      },
+      "groupPlaceholder": "Entrez le nom du groupe",
+      "workspacePlaceholder": "Entrez le nom de l'espace de travail",
+      "organizationPlaceholder": "Entrez le nom de l'organisation",
+      "projectPlaceholder": "Entrez le nom du projet",
+      "repositoriesOption": "Dépôts",
+      "pipelinesOption": "Pipelines",
+      "importMultipleButton": {
+        "import": "Importer des dépôts",
+        "importing": "Importation des dépôts..."
+      },
+      "cancelButton": "Annuler",
+      "repositoryNameLabel": "Nom du dépôt",
+      "repositoryLabel": "Dépôt",
+      "importTitle": "Importer un dépôt",
+      "repositoryPlaceholder": "Entrez le nom du dépôt",
+      "authorizationOption": "Autorisation",
+      "importPipelinesOption": "Importer les pipelines",
+      "repositoryNamePlaceholder": "Entrez le nom du dépôt",
+      "repositoryDescriptionLabel": "Description",
+      "repositoryDescriptionPlaceholder": "Entrez la description du dépôt",
+      "importButton": {
+        "import": "Importer le dépôt",
+        "importing": "Importation du dépôt..."
+      }
+    },
     "repositories": "Dépôts",
     "import-repository": "Importer un dépôt",
     "import-repositories": "Import repositories",
@@ -183,14 +267,7 @@
     "updatingWebhook": "Updating webhook...",
     "creatingWebhook": "Creating webhook...",
     "updateWebhook": "Update webhook",
-    "createWebhook": "Create webhook",
-    "status": "Statut",
-    "tagger": "Tagger",
-    "renameBranch": "Renommer la branche",
-    "add": "Ajouter",
-    "users": "Utilisateurs",
-    "clone": "Cloner",
-    "addFile": "Ajouter un fichier"
+    "createWebhook": "Create webhook"
   },
   "noData": {
     "noResults": "Aucun résultat de recherche",
@@ -241,16 +318,66 @@
     "noLabels": "No labels yet",
     "noLabelsDescription": "Use labels to organize, prioritize, and categorize tasks efficiently."
   },
+  "utils": {
+    "validation": {
+      "required": "{{name}} est requis",
+      "invalid": "{{name}} est invalide",
+      "minLength": "{{name}} doit comporter au moins {{length}} caractères",
+      "maxLength": "{{name}} ne doit pas dépasser {{length}} caractères",
+      "specialSymbols": "{{name}} doit contenir uniquement des lettres, des chiffres et les caractères : - _ .",
+      "noSpaces": "{{name}} ne peut pas contenir d'espaces"
+    }
+  },
+  "signIn": {
+    "emailTitle": "Nom d'utilisateur/Adresse e-mail",
+    "passwordTitle": "Mot de passe",
+    "checkDetails": "Please check your details",
+    "pageTitle": "Se connecter à Harness",
+    "pageDescription": "Bienvenue ! Veuillez entrer vos informations.",
+    "emailDescription": "Votre adresse e-mail",
+    "passwordDescription": "Mot de passe",
+    "buttonText": {
+      "signingIn": "Connexion en cours...",
+      "signIn": "Se connecter"
+    },
+    "signUpLink": {
+      "question": "Vous n'avez pas de compte ?",
+      "linkText": "S'inscrire"
+    }
+  },
+  "signUp": {
+    "userIDPlaceholder": "ID utilisateur",
+    "emailLabel": "Adresse e-mail",
+    "passwordLabel": "Mot de passe",
+    "validation": {
+      "passwordsCheck": "Les mots de passe ne correspondent pas"
+    },
+    "pageTitle": "S'inscrire à Harness",
+    "pageDescription": "Commencez votre aventure avec nous dès aujourd'hui.",
+    "userIDLabel": "ID utilisateur",
+    "emailPlaceholder": "Votre adresse e-mail",
+    "passwordPlaceholder": "Mot de passe (6 caractères minimum)",
+    "confirmPasswordPlaceholder": "Confirmer le mot de passe",
+    "confirmPasswordLabel": "Confirmer le mot de passe",
+    "buttonText": {
+      "signingUp": "Inscription en cours...",
+      "signUp": "S'inscrire"
+    },
+    "signInLink": {
+      "question": "Vous avez déjà un compte ?",
+      "linkText": "Se connecter"
+    }
+  },
   "notFound": {
     "button": "Recharger la page",
     "title": "Quelque chose s'est mal passé…",
     "descriptionWithType": "La page demandée est introuvable. Vous pouvez revenir pour voir tous les {{type}} et gérer vos paramètres.",
     "description": "La page demandée est introuvable."
   },
-  "search": "Rechercher",
+  "search": "Search",
   "connectors": {
-    "createNew": "Créer un nouveau connecteur",
-    "delete": "Supprimer le connecteur"
+    "createNew": "Create new connector",
+    "delete": "Delete Connector"
   },
   "execution": {
     "summary": "Résumé",
@@ -258,7 +385,7 @@
     "graph": "Graphique",
     "inputs": "Entrées",
     "opa": "Évaluations de politique",
-    "artifacts": "Artéfacts",
+    "artifacts": "Artefacts",
     "tests": "Tests",
     "sto": "Tests de sécurité",
     "secrets": "Secrets"
@@ -289,44 +416,44 @@
     "create": "Create labels"
   },
   "projectSettings": {
-    "newLabels": "Create label",
+    "newLabels": "Créer une étiquette",
     "general": {
-      "mainTitle": "",
-      "projectNamePlaceholder": "",
-      "projectNameLabel": "",
-      "projectDescriptionPlaceholder": "",
-      "projectDescriptionLabel": "",
+      "projectNameLabel": "Nom du projet",
+      "projectDescriptionLabel": "Description",
+      "mainTitle": "Paramètres généraux",
+      "projectNamePlaceholder": "Entrer le nom du projet",
+      "projectDescriptionPlaceholder": "Entrer une description (facultatif)",
       "formSubmitButton": {
-        "savingState": "",
-        "defaultState": "",
-        "savedState": ""
+        "savingState": "Enregistrement...",
+        "defaultState": "Enregistrer les modifications",
+        "savedState": "Enregistré"
       },
-      "formCancelButton": "Cancel",
-      "deleteProjectTitle": "",
-      "deleteProjectDescription": "",
-      "deleteProjectButton": ""
+      "formCancelButton": "Annuler",
+      "deleteProjectTitle": "Supprimer le projet",
+      "deleteProjectDescription": "Cela supprimera définitivement ce projet et tout ce qu'il contient. Tous les référentiels qu'il contient seront également supprimés.",
+      "deleteProjectButton": "Supprimer le projet"
     },
-    "newMember": "",
-    "member": "",
-    "role": "",
-    "addMember": "",
+    "member": "Membre",
+    "role": "Rôle",
+    "newMember": "Nouveau membre",
+    "addMember": "Ajouter un membre à ce projet",
     "membersTable": {
-      "user": "User",
-      "email": "Email",
-      "role": "Role"
+      "user": "Utilisateur",
+      "email": "Adresse e-mail",
+      "role": "Rôle"
     },
-    "removeMember": "Remove member",
-    "inviteNewMember": "Invite new member",
-    "members": "",
-    "rules": "Rules",
-    "addRule": "Add new rule",
+    "removeMember": "Supprimer le membre",
+    "inviteNewMember": "Inviter un nouveau membre",
+    "members": "Membres",
+    "rules": "Règles",
+    "addRule": "Ajouter une nouvelle règle",
     "tabs": {
-      "general": "General",
-      "members": "Members",
-      "labels": "Labels",
-      "rules": "Rules"
+      "general": "Général",
+      "members": "Membres",
+      "labels": "Étiquettes",
+      "rules": "Règles"
     },
-    "newBranchRule": "New branch rule"
+    "newBranchRule": "Nouvelle règle de branche"
   },
   "landingPage": {
     "selectProject": "Sélectionnez un projet pour commencer",
@@ -350,6 +477,11 @@
     "compareChangesFormTitleLabel": "Title",
     "compareChangesFormDescriptionPlaceholder": "Ajoutez la description de la pull request ici.",
     "compareChangesFormDescriptionLabel": "Description",
+    "compare": {
+      "validation": {
+        "title": "Titre de la demande de fusion"
+      }
+    },
     "compareChanges": "Comparaison des modifications",
     "compareChangesDescription": "Choisissez deux branches pour voir les modifications ou pour créer une nouvelle pull request. Si nécessaire, vous pouvez aussi",
     "compareChangesAbleToMerge": "Fusion possible.",
@@ -384,6 +516,7 @@
     "split": "Diviser",
     "unified": "Unifié",
     "viewed": "Vu",
+    "compareChangesCantMergeDesciption": "Vous pouvez quand même créer la pull request.",
     "compareChangesForkLink": "comparer entre les forks",
     "compareChangesOr": "ou",
     "compareChangesDiffLink": "en savoir plus sur les comparaisons diff",
@@ -396,89 +529,107 @@
     "fileNoChanges": "Fichier sans modifications.",
     "binaryNotShown": "Fichier binaire non affiché."
   },
+  "pipelines": {
+    "createPipelineDialog": {
+      "nameLabel": "Nom du pipeline",
+      "branchLabel": "Branche",
+      "yamlPathLabel": "Chemin YAML",
+      "dialogTitle": "Créer un pipeline",
+      "branchPlaceholder": "Sélectionner",
+      "cancelButton": "Annuler",
+      "createButton": "Créer le pipeline"
+    }
+  },
   "profileSettings": {
-    "newSshKey": "Nouvelle clé SSH",
-    "enterNamePlaceholder": "Entrez le nom",
-    "publicKey": "Clé publique",
-    "cancel": "Annuler",
-    "save": "Enregistrer",
+    "sshKey": {
+      "validation": {
+        "name": "Nom de la clé"
+      },
+      "publicKey": "Clé publique",
+      "newSshKey": "Nouvelle clé SSH",
+      "enterNamePlaceholder": "Entrer le nom",
+      "enterPublicKeyPlaceholder": "Entrez la clé publique",
+      "cancel": "Annuler",
+      "save": "Enregistrer"
+    },
     "name": "Nom",
     "added": "Ajouté",
-    "lastUsedDate": "Dernière date d'utilisation",
-    "deleteSshKey": "Delete SSH key",
-    "noDataKeysDescription": "Il n'y a aucune clé SSH associée à ce compte.",
-    "createToken": "Créer un jeton",
-    "enterTokenPlaceholder": "Entrez le nom du jeton",
-    "expiration": "Expiration",
-    "token": "Jeton",
-    "tokenSuccessDescription": "Votre jeton a été généré. Assurez-vous de copier et de stocker votre jeton en lieu sûr, car vous ne pourrez plus le voir.",
-    "select": "Sélectionner",
-    "tokenExpiryNone": "Le jeton n'expirera jamais",
-    "tokenExpiryDate": "Le jeton expirera le",
-    "gotItButton": "Compris",
-    "generateTokenButton": "Générer le jeton",
-    "generatingTokenButton": "Génération du jeton...",
+    "lastUsedDate": "Date de dernière utilisation",
+    "deleteSshKey": "Supprimer la clé SSH",
+    "noDataKeysDescription": "Il n'y a pas de clés SSH associées à ce compte.",
+    "createTokenDialog": {
+      "nameLabel": "Nom",
+      "expirationLabel": "Expiration",
+      "expirationOptions": {
+        "7_days": "7 jours",
+        "30_days": "30 jours",
+        "60_days": "60 jours",
+        "90_days": "90 jours",
+        "never": "Jamais"
+      },
+      "tokenExpiryNone": "Le jeton n'expirera jamais",
+      "tokenExpiryDate": "Le jeton expirera le",
+      "title": "Créer un jeton",
+      "namePlaceholder": "Entrer le nom du jeton",
+      "expiration": "Expiration",
+      "tokenFieldLabel": "Jeton",
+      "successDescription": "Votre jeton a été généré. Assurez-vous de copier et stocker votre jeton en lieu sûr, vous ne pourrez pas le voir à nouveau.",
+      "expirationPlaceholder": "Sélectionner",
+      "gotItButton": "Compris",
+      "cancelButton": "Annuler",
+      "generateButton": "Générer le jeton",
+      "generatingButton": "Génération du jeton..."
+    },
     "tokenTableHeader": "Jeton",
-    "statusTableHeader": "Statut",
+    "statusTableHeader": "État",
     "expirationDateTableHeader": "Date d'expiration",
     "createdTableHeader": "Créé",
     "active": "Actif",
     "noExpiration": "Pas d'expiration",
-    "deleteToken": "Delete token",
-    "noTokenDescription": "Il n'y a aucun jeton d'accès personnel associé à ce compte.",
+    "deleteToken": "Supprimer le jeton",
+    "noTokenDescription": "Il n'y a pas de jetons d'accès personnel associés à ce compte.",
+    "username": "Nom d'utilisateur",
+    "accountEmail": "Adresse e-mail du compte",
+    "newPassword": "Nouveau mot de passe",
     "validation": {
-      "nameMin": "Veuillez indiquer votre nom",
-      "nameMax": "Le nom ne doit pas dépasser 256 caractères",
-      "usernameMin": "Veuillez fournir un nom d'utilisateur",
-      "emailInvalid": "Veuillez fournir une adresse e-mail valide",
-      "emailMax": "L'e-mail ne doit pas dépasser 250 caractères",
-      "passwordMin": "Le nouveau mot de passe doit contenir au moins 6 caractères",
-      "passwordMax": "Le nouveau mot de passe ne doit pas dépasser 128 caractères",
-      "confirmPasswordMin": "Veuillez confirmer votre nouveau mot de passe",
       "passwordsDoNotMatch": "Les mots de passe ne correspondent pas"
     },
     "accountSettings": "Paramètres du compte",
     "personalInfo": "Informations personnelles",
-    "enterUsernamePlaceholder": "Entrez votre nom d'utilisateur",
-    "username": "Nom d'utilisateur",
-    "enterUsernameCaption": "Ce nom d'utilisateur sera affiché sur toute la plateforme.",
-    "accountEmail": "Email du compte",
+    "enterNamePlaceholder": "Entrer votre nom",
+    "enterUsernamePlaceholder": "Entrer votre nom d'utilisateur",
     "updatingProfileButton": "Mise à jour...",
     "updateProfileButton": "Mettre à jour le profil",
     "updatedButton": "Mis à jour",
-    "passwordSettingsTitle": "Paramètres du mot de passe",
-    "passwordSettingsDesc": "Minimum 6 caractères contenant au moins un chiffre et un mélange de lettres majuscules et minuscules.",
-    "enterPasswordPlaceholder": "Entrez un nouveau mot de passe",
-    "newPassword": "Nouveau mot de passe",
-    "confirmPasswordPlaceholder": "Confirmez votre nouveau mot de passe",
+    "passwordSettingsTitle": "Paramètres de mot de passe",
+    "passwordSettingsDesc": "Minimum de 6 caractères, contenant au moins un chiffre et un mélange de lettres majuscules et minuscules.",
+    "enterPasswordPlaceholder": "Entrer un nouveau mot de passe",
+    "confirmPasswordPlaceholder": "Confirmer votre nouveau mot de passe",
     "confirmPassword": "Confirmer le mot de passe",
     "updating": "Mise à jour...",
     "updatePassword": "Mettre à jour le mot de passe",
     "keysAndTokens": "Clés et jetons",
     "personalAccessToken": "Jeton d'accès personnel",
-    "addTokenDescription": "Les jetons d'accès personnels vous permettent de vous authentifier avec l'API.",
+    "addTokenDescription": "Les jetons d'accès personnel vous permettent d'authentifier avec l'API.",
     "addToken": "Ajouter un nouveau jeton",
     "sshKeys": "Mes clés SSH",
-    "addSshKeyDescription": "Les clés SSH vous permettent d'établir une connexion sécurisée avec votre dépôt de code.",
+    "addSshKeyDescription": "Les clés SSH vous permettent d'établir une connexion sécurisée à votre référentiel de code.",
     "addSshKey": "Ajouter une nouvelle clé SSH",
+    "enterUsernameCaption": "Ce nom d'utilisateur sera affiché sur toute la plateforme.",
     "generalTab": "Général",
     "keysTab": "Clés et Jetons",
     "saving": "Enregistrement..."
   },
   "createProject": {
-    "validation": {
-      "nameNoEmpty": "Le champ ne peut pas être vide",
-      "nameMinLength": "Le nom du projet doit contenir au moins 4 caractères"
-    },
-    "backButton": "Retour",
-    "title": "Créez votre nouveau projet",
-    "description": "Organisez vos dépôts, pipelines et plus encore.",
     "form": {
       "name": "Nom du projet",
-      "namePlaceholder": "Entrez le nom de votre projet",
       "description": "Description",
+      "namePlaceholder": "Entrez le nom de votre projet",
       "descriptionPlaceholder": "Entrez une description (facultatif)"
     },
+    "backButton": "Retour",
+    "title": "Créez votre nouveau projet",
+    "description": "Organisez vos dépôts, pipelines et plus encore.",
     "create": {
       "projectCreation": "Création du projet...",
       "createProject": "Créer le projet"
@@ -488,18 +639,33 @@
       "link": "Se déconnecter"
     }
   },
+  "importProject": {
+    "projectNameLabel": "Nom",
+    "descriptionLabel": "Description",
+    "gitProviderLabel": "Fournisseur Git",
+    "organizationLabel": "Organisation",
+    "hostUrlLabel": "URL d'hôte",
+    "title": "Importer un projet",
+    "gitProviderPlaceholder": "Sélectionner un fournisseur",
+    "hostUrlPlaceholder": "Entrer l'URL d'hôte",
+    "tokenLabel": "Jeton",
+    "tokenPlaceholder": "Entrer votre jeton d'accès",
+    "organizationPlaceholder": "Entrer le nom de l'organisation",
+    "repositoriesLabel": "Référentiels",
+    "pipelinesLabel": "Importer des pipelines",
+    "projectNamePlaceholder": "Entrer le nom du référentiel",
+    "descriptionPlaceholder": "Entrer une description",
+    "importButton": {
+      "default": "Importer le projet",
+      "importing": "Importation du projet..."
+    },
+    "cancelButton": "Annuler"
+  },
   "forms": {
-    "selectMember": "",
-    "selectRole": "",
-    "enterBranchName": "Entrez le nom de la branche",
-    "createBranchError": "Le nom de la branche est requis",
+    "selectMember": "Select member",
+    "selectRole": "Select role",
     "enterTagName": "Enter tag name",
-    "select": "Sélectionner",
-    "baseBranch": "Branche de base",
-    "selectBranchError": "La branche de base est requise",
-    "baseTag": "Based on",
-    "selectMemberError": "",
-    "selectRoleError": ""
+    "createBranchError": ""
   },
   "roles": {
     "owner": "Owner",
@@ -568,8 +734,7 @@
       "validation": {
         "userIdRequired": "Veuillez fournir un identifiant utilisateur",
         "invalidEmail": "Veuillez saisir une adresse e-mail valide",
-        "displayNameRequired": "Veuillez fournir un nom d'affichage",
-        "emailInvalid": "Veuillez saisir une adresse e-mail valide"
+        "displayNameRequired": "Veuillez fournir un nom d'affichage"
       }
     },
     "userId": "Identifiant utilisateur",
diff --git a/packages/ui/src/components/alert/AlertContainer.tsx b/packages/ui/src/components/alert/AlertContainer.tsx
index acfc96cdfa..48276ada36 100644
--- a/packages/ui/src/components/alert/AlertContainer.tsx
+++ b/packages/ui/src/components/alert/AlertContainer.tsx
@@ -18,7 +18,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { Icon } from '../icon'
 
 const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  '[&>svg]:text-foreground relative grid w-full gap-1 rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7',
   {
     variants: {
       variant: {
diff --git a/packages/ui/src/components/alert/AlertTitle.tsx b/packages/ui/src/components/alert/AlertTitle.tsx
index e66048a61b..3c39384b66 100644
--- a/packages/ui/src/components/alert/AlertTitle.tsx
+++ b/packages/ui/src/components/alert/AlertTitle.tsx
@@ -7,7 +7,7 @@ export interface AlertTitleProps extends PropsWithChildren<React.HTMLAttributes<
 }
 
 export const AlertTitle = forwardRef<HTMLHeadingElement, AlertTitleProps>(({ className, children }, ref) => (
-  <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)}>
+  <h5 ref={ref} className={cn('font-medium leading-none tracking-tight', className)}>
     {children}
   </h5>
 ))
diff --git a/packages/ui/src/components/button-group.tsx b/packages/ui/src/components/button-group.tsx
index dffe1edda9..24df1ef811 100644
--- a/packages/ui/src/components/button-group.tsx
+++ b/packages/ui/src/components/button-group.tsx
@@ -21,7 +21,10 @@ export function ButtonGroup({
   const verticalAlignClass = verticalAlign ? `items-${verticalAlign}` : ''
 
   return (
-    <div className={cn('flex', direction === 'vertical' ? 'flex-col' : '', gapClass, verticalAlignClass, className)}>
+    <div
+      className={cn('flex', direction === 'vertical' ? 'flex-col' : '', gapClass, verticalAlignClass, className)}
+      aria-label="Button control group"
+    >
       {children}
     </div>
   )
diff --git a/packages/ui/src/components/button-with-options.tsx b/packages/ui/src/components/button-with-options.tsx
index 97a3dcdc6d..14ba9ea3b6 100644
--- a/packages/ui/src/components/button-with-options.tsx
+++ b/packages/ui/src/components/button-with-options.tsx
@@ -139,7 +139,7 @@ export const ButtonWithOptions = <T extends string>({
                   onClick={() => handleOptionChange(option.value)}
                 >
                   <span className="flex flex-col gap-y-1.5">
-                    <span className="leading-none text-foreground-8">{option.label}</span>
+                    <span className="text-foreground-8 leading-none">{option.label}</span>
                     {option?.description && <span className="text-foreground-4">{option.description}</span>}
                   </span>
                 </DropdownMenu.Item>
diff --git a/packages/ui/src/components/form-primitives/caption.tsx b/packages/ui/src/components/form-primitives/caption.tsx
index 5b049a1141..51272dcd9d 100644
--- a/packages/ui/src/components/form-primitives/caption.tsx
+++ b/packages/ui/src/components/form-primitives/caption.tsx
@@ -1,8 +1,8 @@
-import { PropsWithChildren } from 'react'
+import { HTMLAttributes, PropsWithChildren } from 'react'
 
 import { cn } from '@utils/cn'
 
-interface CaptionProps extends PropsWithChildren<React.HTMLAttributes<HTMLElement>> {
+interface CaptionProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
   className?: string
 }
 
diff --git a/packages/ui/src/components/form-primitives/control-group.tsx b/packages/ui/src/components/form-primitives/control-group.tsx
index e0369e5e39..1a496299a7 100644
--- a/packages/ui/src/components/form-primitives/control-group.tsx
+++ b/packages/ui/src/components/form-primitives/control-group.tsx
@@ -2,10 +2,6 @@ import { HTMLAttributes } from 'react'
 
 import { cn } from '@utils/cn'
 
-interface ControlGroupProps extends HTMLAttributes<HTMLDivElement> {
-  type?: 'button' | 'input'
-}
-
 /**
  * A container component that groups form control elements together.
  * @example
@@ -13,14 +9,9 @@ interface ControlGroupProps extends HTMLAttributes<HTMLDivElement> {
  *   <Button>Button</Button>
  * </ControlGroup>
  */
-export function ControlGroup({ children, type, className, ...props }: ControlGroupProps) {
+export function ControlGroup({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return (
-    <div
-      className={cn('relative flex flex-col', className)}
-      role="group"
-      aria-label={type === 'button' ? 'Button control group' : 'Input control group'}
-      {...props}
-    >
+    <div className={cn('relative flex flex-col', className)} role="group" aria-label="Input control group" {...props}>
       {children}
     </div>
   )
diff --git a/packages/ui/src/components/form-primitives/fieldset.tsx b/packages/ui/src/components/form-primitives/fieldset.tsx
index b7d9984a8c..1ecc192bb0 100644
--- a/packages/ui/src/components/form-primitives/fieldset.tsx
+++ b/packages/ui/src/components/form-primitives/fieldset.tsx
@@ -5,16 +5,20 @@ import { cn } from '@utils/cn'
 interface FieldsetProps extends HTMLAttributes<HTMLFieldSetElement> {
   box?: boolean
   shaded?: boolean
+  /**
+   * For better accessibility, the fieldset should start from the legend element
+   */
+  legend?: string
 }
 
 /**
  * A form fieldset component that groups related form elements.
  * @example
- * <Fieldset box shaded>
+ * <Fieldset box shaded legend="Some Information">
  *   <div>Form elements</div>
  * </Fieldset>
  */
-export function Fieldset({ children, box, shaded, className, ...props }: FieldsetProps) {
+export function Fieldset({ children, box, shaded, className, legend, ...props }: FieldsetProps) {
   return (
     <fieldset
       className={cn(
@@ -22,10 +26,10 @@ export function Fieldset({ children, box, shaded, className, ...props }: Fieldse
         { 'rounded-md border px-5 py-3.5 pb-5': box, 'bg-primary/[0.02]': shaded },
         className
       )}
-      role="group"
-      aria-describedby="fieldset-description"
       {...props}
     >
+      <legend className="sr-only">{legend}</legend>
+
       {children}
     </fieldset>
   )
diff --git a/packages/ui/src/components/form-primitives/message.tsx b/packages/ui/src/components/form-primitives/message.tsx
index 6642ca7c85..69ac2c1733 100644
--- a/packages/ui/src/components/form-primitives/message.tsx
+++ b/packages/ui/src/components/form-primitives/message.tsx
@@ -1,6 +1,5 @@
 import { HTMLAttributes } from 'react'
 
-import { Text } from '@/components'
 import { cn } from '@utils/cn'
 
 import { MessageTheme } from './form-primitives.types'
@@ -30,15 +29,12 @@ const themeClassMap: Record<MessageTheme, string> = {
  * </Message>
  */
 export function Message({ children, theme, className }: MessageProps) {
-  const textClass = themeClassMap[theme]
   const role = theme === MessageTheme.ERROR ? 'alert' : 'status'
   const ariaLive = theme === MessageTheme.ERROR ? 'assertive' : 'polite'
 
   return (
-    <div className={cn(textClass, className)} role={role} aria-live={ariaLive}>
-      <Text as="p" size={2} className="text-inherit">
-        {children}
-      </Text>
-    </div>
+    <p className={cn('text-sm font-normal', themeClassMap[theme], className)} role={role} aria-live={ariaLive}>
+      {children}
+    </p>
   )
 }
diff --git a/packages/ui/src/components/form-primitives/separator.tsx b/packages/ui/src/components/form-primitives/separator.tsx
index f59ee67d56..c3ff0d2869 100644
--- a/packages/ui/src/components/form-primitives/separator.tsx
+++ b/packages/ui/src/components/form-primitives/separator.tsx
@@ -9,13 +9,13 @@ interface FormSeparatorProps {
 /**
  * A horizontal separator component for forms
  * @example
- * // Basic usage
+ * Basic usage
  * <FormSeparator />
  *
- * // With dashed style
+ * With dashed style
  * <FormSeparator dashed />
  *
- * // With custom className
+ * With custom className
  * <FormSeparator className="my-4" />
  */
 export function FormSeparator({ dashed, dotted, className }: FormSeparatorProps) {
diff --git a/packages/ui/src/components/git-commit-dialog/git-commit-dialog.tsx b/packages/ui/src/components/git-commit-dialog/git-commit-dialog.tsx
index d44557fd82..f920e87a1d 100644
--- a/packages/ui/src/components/git-commit-dialog/git-commit-dialog.tsx
+++ b/packages/ui/src/components/git-commit-dialog/git-commit-dialog.tsx
@@ -175,11 +175,11 @@ export const GitCommitDialog: FC<GitCommitDialogProps> = ({
                     Commit directly to the
                     <span
                       className="
-                        relative mx-1.5 inline-flex gap-1 px-2.5 text-foreground-8
-                        before:absolute before:-top-1 before:left-0 before:z-[-1] before:h-6 before:w-full before:rounded before:bg-background-8
+                        text-foreground-8 before:bg-background-8 relative mx-1.5 inline-flex gap-1
+                        px-2.5 before:absolute before:-top-1 before:left-0 before:z-[-1] before:h-6 before:w-full before:rounded
                       "
                     >
-                      <Icon className="translate-y-0.5 text-icons-9" name="branch" size={14} />
+                      <Icon className="text-icons-9 translate-y-0.5" name="branch" size={14} />
                       {currentBranch}
                     </span>
                     branch
diff --git a/packages/ui/src/components/option.tsx b/packages/ui/src/components/option.tsx
index d11fea49e2..278ec86010 100644
--- a/packages/ui/src/components/option.tsx
+++ b/packages/ui/src/components/option.tsx
@@ -1,16 +1,17 @@
-import { FC, ReactElement, ReactNode } from 'react'
+import { FC, HTMLAttributes, ReactElement, ReactNode } from 'react'
 
-import { Checkbox, Label, RadioButton, Text } from '@/components'
+import { Caption, Checkbox, Label, Message, MessageTheme, RadioButton } from '@/components'
 import { cn } from '@utils/cn'
 
 type ControlType = ReactElement<typeof RadioButton> | ReactElement<typeof Checkbox>
 
-interface OptionProps {
+interface OptionProps extends HTMLAttributes<HTMLDivElement> {
   control: ControlType
   id: string
   label?: string | ReactNode
   description?: string | ReactNode
-  className?: string
+  disabled?: boolean
+  error?: string
   ariaSelected?: boolean
 }
 
@@ -24,30 +25,45 @@ interface OptionProps {
  *   description="Description for Option 1"
  * />
  */
-export const Option: FC<OptionProps> = ({ control, id, label, description, ariaSelected, className }) => {
+export const Option: FC<OptionProps> = ({
+  control,
+  id,
+  label,
+  description,
+  className,
+  disabled,
+  error,
+  ariaSelected,
+  ...props
+}) => {
   return (
     <div
       className={cn('flex items-start', className)}
       role="option"
       aria-labelledby={`${id}-label`}
       aria-selected={ariaSelected}
+      {...props}
     >
       {control}
       <div className="flex flex-col gap-0">
-        <Label htmlFor={id} className="cursor-pointer pl-2.5 leading-tight">
+        <Label
+          htmlFor={id}
+          className={cn('cursor-pointer pl-2.5 leading-tight', { 'cursor-default': disabled })}
+          color={disabled ? 'disabled' : 'primary'}
+        >
           {label}
         </Label>
+
+        {!!error && (
+          <Message className="mt-0.5" theme={MessageTheme.ERROR}>
+            {error}
+          </Message>
+        )}
+
         {description && (
-          <Text
-            className="ml-2.5 mt-1.5 leading-snug tracking-tight"
-            as="p"
-            size={2}
-            color="foreground-4"
-            id={`${id}-description`}
-            role="note"
-          >
+          <Caption className="ml-2.5 tracking-tight" id={`${id}-description`} role="note">
             {description}
-          </Text>
+          </Caption>
         )}
       </div>
     </div>
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
index c13ec148e5..b73616ad20 100644
--- a/packages/ui/src/components/textarea.tsx
+++ b/packages/ui/src/components/textarea.tsx
@@ -27,7 +27,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         )}
         <textarea
           className={cn(
-            'placeholder:text-foreground-4 flex min-h-[74px] w-full rounded border bg-input-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:rounded disabled:cursor-not-allowed',
+            'text-foreground-1 placeholder:text-foreground-4 flex min-h-[74px] w-full rounded border bg-input-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:rounded disabled:cursor-not-allowed',
             resizable ? 'resize-y [field-sizing:content] whitespace-pre-wrap [word-break:break-word]' : 'resize-none',
             className,
             error
diff --git a/packages/ui/src/types/index.ts b/packages/ui/src/types/index.ts
index cb5033fbd7..c9f6f047dc 100644
--- a/packages/ui/src/types/index.ts
+++ b/packages/ui/src/types/index.ts
@@ -1,54 +1 @@
-import { z } from 'zod'
-
-export interface TypesUser {
-  admin?: boolean
-  blocked?: boolean
-  created?: number
-  display_name?: string
-  email?: string
-  uid?: string
-  updated?: number
-  url?: string
-}
-
-export const formSchema = z.object({
-  title: z.string().min(1, { message: 'Please provide a pull request title' }),
-  description: z.string().min(1, { message: 'Please provide a description' })
-})
-export type FormFields = z.infer<typeof formSchema> // Automatically generate a type from the schema
-
-export interface TypesDiffStats {
-  additions?: number | null
-  commits?: number | null
-  deletions?: number | null
-  files_changed?: number | null
-}
-
-export interface ViolationState {
-  violation: boolean
-  bypassable: boolean
-  bypassed: boolean
-}
-
-// TODO: The error type will need to be properly defined once it's clear what format the errors will have and whether they need to be passed into the UI components. It was migrated from @harnessio/code-service-client.
-export interface UsererrorError {
-  message?: string
-  values?: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    [key: string]: any
-  }
-}
-
-export type EnumPrincipalType = 'service' | 'serviceaccount' | 'user'
-
-export interface PrincipalType {
-  id?: number
-  uid: string
-  display_name: string
-  email: string
-  type?: EnumPrincipalType
-  created?: number
-  updated?: number
-  // TODO: need to add avatar
-  avatar_url?: string
-}
+export * from './types'
diff --git a/packages/ui/src/types/types.ts b/packages/ui/src/types/types.ts
new file mode 100644
index 0000000000..03450a04d0
--- /dev/null
+++ b/packages/ui/src/types/types.ts
@@ -0,0 +1,46 @@
+export interface TypesUser {
+  admin?: boolean
+  blocked?: boolean
+  created?: number
+  display_name?: string
+  email?: string
+  uid?: string
+  updated?: number
+  url?: string
+}
+
+export interface TypesDiffStats {
+  additions?: number | null
+  commits?: number | null
+  deletions?: number | null
+  files_changed?: number | null
+}
+
+export interface ViolationState {
+  violation: boolean
+  bypassable: boolean
+  bypassed: boolean
+}
+
+// TODO: The error type will need to be properly defined once it's clear what format the errors will have and whether they need to be passed into the UI components. It was migrated from @harnessio/code-service-client.
+export interface UsererrorError {
+  message?: string
+  values?: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [key: string]: any
+  }
+}
+
+export type EnumPrincipalType = 'service' | 'serviceaccount' | 'user'
+
+export interface PrincipalType {
+  id?: number
+  uid: string
+  display_name: string
+  email: string
+  type?: EnumPrincipalType
+  created?: number
+  updated?: number
+  // TODO: need to add avatar
+  avatar_url?: string
+}
diff --git a/packages/ui/src/utils/validation.ts b/packages/ui/src/utils/validation.ts
new file mode 100644
index 0000000000..3a1b122340
--- /dev/null
+++ b/packages/ui/src/utils/validation.ts
@@ -0,0 +1,74 @@
+import { TranslationStore } from '@/views'
+import { z } from 'zod'
+
+export const makeValidationUtils = (t: TranslationStore['t']) => ({
+  required: (name: string): string => t('views:utils.validation.required', `${name} is required`, { name }),
+  invalid: (name: string): string => t('views:utils.validation.invalid', `${name} is invalid`, { name }),
+  minLength: (length: number, name: string): [number, string] => [
+    length,
+    t('views:utils.validation.minLength', `${name} must be at least ${length} characters`, { name, length })
+  ],
+  maxLength: (length: number, name: string): [number, string] => [
+    length,
+    t('views:utils.validation.maxLength', `${name} must be no longer than ${length} characters`, { name, length })
+  ],
+  specialSymbols: (name: string): [RegExp, string] => [
+    /^[a-zA-Z0-9._-\s]+$/,
+    t(
+      'views:utils.validation.specialSymbols',
+      `${name} must contain only letters, numbers, and the characters: - _ .`,
+      { name }
+    )
+  ],
+  noSpaces: (name: string): [(data: string) => boolean, string] => [
+    data => !data.includes(' '),
+    t('views:utils.validation.noSpaces', `${name} cannot contain spaces`, { name })
+  ]
+})
+
+export const makeFloatValidationUtils =
+  (t: TranslationStore['t'], ctx: z.RefinementCtx) =>
+  ({ value: v, path, name }: { value: string | undefined; path: string; name: string }) => {
+    const { required, invalid, maxLength, specialSymbols, noSpaces } = makeValidationUtils(t)
+    const value = v?.trim()
+
+    const addIssue = (message: string) => ctx.addIssue({ code: 'custom', path: [path], message })
+
+    return {
+      requiredFloat: (): void => {
+        if (value) return
+
+        addIssue(required(name))
+      },
+      maxLengthFloat: (length: number): void => {
+        if (!value) return
+        const [maxLen, errorMessage] = maxLength(length, name)
+        if (value.length <= maxLen) return
+
+        addIssue(errorMessage)
+      },
+      specialSymbolsFloat: (): void => {
+        if (!value) return
+        const [regex, errorMessage] = specialSymbols(name)
+        if (regex.test(value)) return
+
+        addIssue(errorMessage)
+      },
+      noSpacesFloat: (): void => {
+        if (!value) return
+        const [checkFn, errorMessage] = noSpaces(name)
+        if (checkFn(value)) return
+
+        addIssue(errorMessage)
+      },
+      urlFloat: (): void => {
+        if (!value) return
+
+        try {
+          new URL(value)
+        } catch (error) {
+          addIssue(invalid(name))
+        }
+      }
+    }
+  }
diff --git a/packages/ui/src/views/auth/signin-page.tsx b/packages/ui/src/views/auth/signin-page.tsx
index 086a8bec59..d9cca77724 100644
--- a/packages/ui/src/views/auth/signin-page.tsx
+++ b/packages/ui/src/views/auth/signin-page.tsx
@@ -1,113 +1,116 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { Button, Card, Input, Spacer, StyledLink, Text } from '@/components'
+import { Button, Card, Fieldset, FormWrapper, Input, Message, MessageTheme, StyledLink } from '@/components'
+import { Floating1ColumnLayout, TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { makeValidationUtils } from '@utils/validation'
 import { z } from 'zod'
 
-import { Floating1ColumnLayout } from '..'
 import { Agreements } from './components/agreements'
 import { AnimatedHarnessLogo } from './components/animated-harness-logo'
 
 interface SignInPageProps {
   handleSignIn: (data: SignInData) => void
+  useTranslationStore: () => TranslationStore
   isLoading?: boolean
   error?: string
 }
 
-export interface SignInData {
-  email?: string
-  password?: string
+const makeSignInSchema = (t: TranslationStore['t']) => {
+  const { required } = makeValidationUtils(t)
+
+  return z.object({
+    email: z
+      .string()
+      .trim()
+      .nonempty(required(t('views:signIn.emailTitle'))),
+    password: z.string().nonempty(required(t('views:signIn.passwordTitle')))
+  })
 }
 
-const signInSchema = z.object({
-  email: z.string(),
-  password: z.string().min(1, { message: 'The field can’t be blank' })
-})
+export type SignInData = z.infer<ReturnType<typeof makeSignInSchema>>
 
-export function SignInPage({ handleSignIn, isLoading, error }: SignInPageProps) {
+export function SignInPage({ handleSignIn, useTranslationStore, isLoading, error }: SignInPageProps) {
   const [serverError, setServerError] = useState<string | null>(null)
+
+  const { t } = useTranslationStore()
   const {
     register,
     handleSubmit,
-    setError,
-    clearErrors,
-    formState: { errors },
-    trigger
-  } = useForm({
-    resolver: zodResolver(signInSchema)
+    formState: { errors }
+  } = useForm<SignInData>({
+    mode: 'onChange',
+    resolver: zodResolver(makeSignInSchema(t))
   })
 
-  const onSubmit = (data: SignInData) => {
-    handleSignIn(data)
-  }
+  const errorMessage = useMemo(
+    () => (error?.includes('Not Found') ? t('views:signIn.checkDetails', 'Please check your details') : error),
+    [error, t]
+  )
 
   const handleInputChange = async () => {
-    if (serverError) {
-      setServerError(null)
-      clearErrors(['password'])
-      await trigger()
-    }
+    if (!serverError) return
+    setServerError(null)
   }
 
   useEffect(() => {
-    if (error) {
-      setServerError(error)
-      setError('email', {
-        type: 'manual',
-        message: ' '
-      })
-      setError('password', {
-        type: 'manual',
-        message: error
-      })
-    } else {
-      setServerError(null)
-      clearErrors(['email', 'password'])
-    }
-  }, [error, setError, clearErrors])
+    if (!error) return
+    setServerError(error)
+  }, [error])
 
   const hasError = Object.keys(errors).length > 0 || !!serverError
 
   return (
     <Floating1ColumnLayout
-      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
+      className="bg-background-7 flex-col pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'blue'}
       verticalCenter
     >
       <Card.Root className="relative z-10 mb-8 max-w-full" variant="plain" width="xl">
         <Card.Header className="items-center">
           <AnimatedHarnessLogo theme={hasError ? 'error' : 'blue'} />
+
           <Card.Title className="mt-3 text-center" as="h1">
-            Sign in to Harness
+            {t('views:signIn.pageTitle', 'Sign in to Harness')}
           </Card.Title>
-          <Text className="mt-0.5 leading-snug" size={2} color="foreground-4" align="center" as="p">
-            Welcome back! Please enter your details.
-          </Text>
+
+          <p className="text-foreground-4 mt-0.5 text-center text-sm leading-snug">
+            {t('views:signIn.pageDescription', 'Welcome back! Please enter your details.')}
+          </p>
         </Card.Header>
+
         <Card.Content className="mt-10">
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <Input
-              id="email"
-              label="Username/Email"
-              placeholder="Your email"
-              size="md"
-              {...register('email', { onChange: handleInputChange })}
-              error={errors.email?.message?.toString()}
-              autoFocus
-            />
-            <Input
-              wrapperClassName="mt-7"
-              id="password"
-              type="password"
-              {...register('password', { onChange: handleInputChange })}
-              label="Password"
-              placeholder="Password"
-              size="md"
-              error={errors.password?.message?.toString()}
-            />
+          <FormWrapper onSubmit={handleSubmit(handleSignIn)}>
+            <Fieldset legend="User details">
+              <Input
+                id="email"
+                label={t('views:signIn.emailTitle', 'Username/Email')}
+                placeholder={t('views:signIn.emailDescription', 'Your email')}
+                size="md"
+                {...register('email', { onChange: handleInputChange })}
+                error={errors.email?.message?.toString()}
+                autoFocus
+              />
+              <Input
+                id="password"
+                type="password"
+                {...register('password', { onChange: handleInputChange })}
+                label={t('views:signIn.passwordTitle', 'Password')}
+                placeholder={t('views:signIn.passwordDescription', 'Password')}
+                size="md"
+                error={errors.password?.message?.toString()}
+              />
+            </Fieldset>
+
+            {error && (
+              <Message className="mt-1" theme={MessageTheme.ERROR}>
+                {errorMessage}
+              </Message>
+            )}
+
             <Button
-              className="mt-10 w-full"
+              className="mt-3 w-full"
               variant="default"
               borderRadius="full"
               type="submit"
@@ -115,16 +118,18 @@ export function SignInPage({ handleSignIn, isLoading, error }: SignInPageProps)
               loading={isLoading}
               disabled={hasError}
             >
-              {isLoading ? 'Signing in...' : 'Sign in'}
+              {isLoading
+                ? t('views:signIn.buttonText.signingIn', 'Signing in...')
+                : t('views:signIn.buttonText.signIn', 'Sign in')}
             </Button>
-          </form>
-          <Spacer size={4} />
-          <Text className="block" size={2} color="foreground-5" weight="normal" align="center" as="p">
-            Don’t have an account?{' '}
-            <StyledLink variant="accent" to="/signup">
-              Sign up
+          </FormWrapper>
+
+          <p className="foreground-5 text-foreground-5 mt-4 text-center text-sm">
+            {t('views:signIn.signUpLink.question', 'Don’t have an account?')}{' '}
+            <StyledLink to="/signup" variant="accent">
+              {t('views:signIn.signUpLink.linkText', 'Sign up')}
             </StyledLink>
-          </Text>
+          </p>
         </Card.Content>
       </Card.Root>
       <Agreements />
diff --git a/packages/ui/src/views/auth/signup-page.tsx b/packages/ui/src/views/auth/signup-page.tsx
index b8678321a9..a48b8ac06c 100644
--- a/packages/ui/src/views/auth/signup-page.tsx
+++ b/packages/ui/src/views/auth/signup-page.tsx
@@ -1,136 +1,146 @@
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { Button, Card, Input, Spacer, StyledLink, Text } from '@/components'
+import { Button, Card, Fieldset, FormWrapper, Input, Message, MessageTheme, StyledLink } from '@/components'
+import { Floating1ColumnLayout, TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { makeValidationUtils } from '@utils/validation'
 import { z } from 'zod'
 
-import { Floating1ColumnLayout } from '..'
 import { Agreements } from './components/agreements'
 import { AnimatedHarnessLogo } from './components/animated-harness-logo'
 
 interface SignUpPageProps {
   isLoading?: boolean
   handleSignUp: (data: SignUpData) => void
+  useTranslationStore: () => TranslationStore
   error?: string
 }
 
-export interface SignUpData {
-  userId?: string
-  email?: string
-  password?: string
-  confirmPassword?: string
+const makeSignUpSchema = (t: TranslationStore['t']) => {
+  const { required, maxLength, minLength, specialSymbols, noSpaces, invalid } = makeValidationUtils(t)
+
+  return z
+    .object({
+      userId: z
+        .string()
+        .trim()
+        .nonempty(required(t('views:signUp.userIDPlaceholder')))
+        .max(...maxLength(100, t('views:signUp.userIDPlaceholder')))
+        .regex(...specialSymbols(t('views:signUp.userIDPlaceholder')))
+        .refine(...noSpaces(t('views:signUp.userIDPlaceholder'))),
+      email: z
+        .string()
+        .email(invalid(t('views:signUp.emailLabel', 'Email')))
+        .max(...maxLength(250, t('views:signUp.emailLabel', 'Email'))),
+      password: z
+        .string()
+        .min(...minLength(6, t('views:signUp.passwordLabel', 'Password')))
+        .max(...maxLength(128, t('views:signUp.passwordLabel', 'Password'))),
+      confirmPassword: z.string().min(...minLength(6, t('views:signUp.passwordLabel', 'Password')))
+    })
+    .refine(data => data.password === data.confirmPassword, {
+      message: t('views:signUp.validation.passwordsCheck', "Passwords don't match"),
+      path: ['confirmPassword']
+    })
 }
 
-const signUpSchema = z
-  .object({
-    userId: z.string().min(1, { message: 'User ID cannot be blank' }),
-    email: z.string().email({ message: 'Invalid email address' }),
-    password: z.string().min(6, { message: 'Password must be at least 6 characters' }),
-    confirmPassword: z.string()
-  })
-  .refine(data => data.password === data.confirmPassword, {
-    message: "Passwords don't match",
-    path: ['confirmPassword']
-  })
+export type SignUpData = z.infer<ReturnType<typeof makeSignUpSchema>>
 
-export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps) {
+export function SignUpPage({ isLoading, handleSignUp, useTranslationStore, error }: SignUpPageProps) {
   const [serverError, setServerError] = useState<string | null>(null)
+
+  const { t } = useTranslationStore()
   const {
     register,
     handleSubmit,
-    formState: { errors },
-    trigger
-  } = useForm({
-    resolver: zodResolver(signUpSchema)
+    formState: { errors }
+  } = useForm<SignUpData>({
+    mode: 'onChange',
+    resolver: zodResolver(makeSignUpSchema(t))
   })
 
-  const onSubmit = (data: SignUpData) => {
-    handleSignUp(data)
-  }
-
   const handleInputChange = async () => {
-    if (serverError) {
-      setServerError(null)
-      await trigger()
-    }
+    if (!serverError) return
+    setServerError(null)
   }
 
   useEffect(() => {
-    if (error) {
-      setServerError(error)
-    }
+    if (!error) return
+    setServerError(error)
   }, [error])
 
   const hasError = Object.keys(errors).length > 0 || !!serverError
 
   return (
     <Floating1ColumnLayout
-      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
+      className="bg-background-7 flex-col pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'green'}
       verticalCenter
     >
       <Card.Root className="relative z-10 mb-8 max-w-full" variant="plain" width="xl">
         <Card.Header className="items-center">
           <AnimatedHarnessLogo theme={hasError ? 'error' : 'green'} />
+
           <Card.Title className="mt-3 text-center" as="h1">
-            Sign up to Harness
+            {t('views:signUp.pageTitle', 'Sign up to Harness')}
           </Card.Title>
-          <Text className="mt-0.5 leading-snug" size={2} color="foreground-4" align="center" as="p">
-            Let’s start your journey with us today.
-          </Text>
+
+          <p className="text-foreground-4 mt-0.5 text-center text-sm leading-snug">
+            {t('views:signUp.pageDescription', 'Let’s start your journey with us today.')}
+          </p>
         </Card.Header>
+
         <Card.Content className="mt-10">
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <Input
-              id="userId"
-              type="text"
-              {...register('userId', { onChange: handleInputChange })}
-              placeholder="User ID"
-              label="User ID"
-              size="md"
-              autoFocus
-              error={errors.userId?.message?.toString()}
-            />
-            <Input
-              wrapperClassName="mt-7"
-              id="email"
-              type="email"
-              {...register('email', { onChange: handleInputChange })}
-              placeholder="Your email"
-              label="Email"
-              size="md"
-              error={errors.email?.message?.toString()}
-            />
-            <Input
-              wrapperClassName="mt-7"
-              id="password"
-              type="password"
-              placeholder="Password (6+ characters)"
-              label="Password"
-              size="md"
-              {...register('password', { onChange: handleInputChange })}
-              error={errors.password?.message?.toString()}
-            />
-            <Input
-              wrapperClassName="mt-7"
-              id="confirmPassword"
-              type="password"
-              placeholder="Confirm password"
-              label="Confirm password"
-              size="md"
-              {...register('confirmPassword', { onChange: handleInputChange })}
-              error={errors.confirmPassword?.message?.toString()}
-            />
-            {serverError && (
-              <>
-                <Text className="mt-1 leading-none tracking-tight text-foreground-danger" size={0}>
-                  {serverError}
-                </Text>
-              </>
+          <FormWrapper onSubmit={handleSubmit(handleSignUp)}>
+            <Fieldset legend="User details">
+              <Input
+                id="userId"
+                type="text"
+                {...register('userId', { onChange: handleInputChange })}
+                placeholder={t('views:signUp.userIDPlaceholder', 'User ID')}
+                label={t('views:signUp.userIDLabel', 'User ID')}
+                size="md"
+                autoFocus
+                error={errors.userId?.message?.toString()}
+              />
+              <Input
+                id="email"
+                type="email"
+                {...register('email', { onChange: handleInputChange })}
+                placeholder={t('views:signUp.emailPlaceholder', 'Your email')}
+                label={t('views:signUp.emailLabel', 'Email')}
+                size="md"
+                error={errors.email?.message?.toString()}
+              />
+              <Input
+                id="password"
+                type="password"
+                placeholder={t('views:signUp.passwordPlaceholder', 'Password (6+ characters)')}
+                label={t('views:signUp.passwordLabel', 'Password')}
+                size="md"
+                {...register('password', { onChange: handleInputChange })}
+                error={errors.password?.message?.toString()}
+              />
+              <Input
+                id="confirmPassword"
+                type="password"
+                placeholder={t('views:signUp.confirmPasswordPlaceholder', 'Confirm password')}
+                label={t('views:signUp.confirmPasswordLabel', 'Confirm password')}
+                size="md"
+                {...register('confirmPassword', { onChange: handleInputChange })}
+                error={errors.confirmPassword?.message?.toString()}
+              />
+            </Fieldset>
+
+            {error && (
+              <Message className="mt-1" theme={MessageTheme.ERROR}>
+                {error}
+              </Message>
             )}
+
             <Button
-              className="mt-10 w-full"
+              className="mt-3 w-full"
               variant="default"
               borderRadius="full"
               type="submit"
@@ -138,16 +148,18 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
               loading={isLoading}
               disabled={hasError}
             >
-              {isLoading ? 'Signing up...' : 'Sign up'}
+              {isLoading
+                ? t('views:signUp.buttonText.signingUp', 'Signing up...')
+                : t('views:signUp.buttonText.signUp', 'Sign up')}
             </Button>
-          </form>
-          <Spacer size={4} />
-          <Text className="block" size={2} color="foreground-5" weight="normal" align="center" as="p">
-            Already have an account?{' '}
-            <StyledLink variant="accent" to="/signin">
-              Sign in
+          </FormWrapper>
+
+          <p className="foreground-5 text-foreground-5 mt-4 text-center text-sm">
+            {t('views:signUp.signInLink.question', 'Already have an account?')}{' '}
+            <StyledLink to="/signin" variant="accent">
+              {t('views:signUp.signInLink.linkText', 'Sign in')}
             </StyledLink>
-          </Text>
+          </p>
         </Card.Content>
       </Card.Root>
       <Agreements />
diff --git a/packages/ui/src/views/pipelines/create-pipeline-dialog/create-pipeline-dialog.tsx b/packages/ui/src/views/pipelines/create-pipeline-dialog/create-pipeline-dialog.tsx
index e9aa15ee3e..41caf99b5d 100644
--- a/packages/ui/src/views/pipelines/create-pipeline-dialog/create-pipeline-dialog.tsx
+++ b/packages/ui/src/views/pipelines/create-pipeline-dialog/create-pipeline-dialog.tsx
@@ -2,19 +2,49 @@ import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
 import { Alert, Button, ControlGroup, Dialog, Fieldset, FormWrapper, Input, Select } from '@/components'
+import { TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { makeValidationUtils } from '@utils/validation'
 import { z } from 'zod'
 
-import { CreatePipelineDialogProps, CreatePipelineFormType } from './types'
+import { ICreatePipelineStore } from './types'
+
+export const makeCreatePipelineSchema = (t: TranslationStore['t']) => {
+  const { required, maxLength, specialSymbols, noSpaces } = makeValidationUtils(t)
+
+  return z.object({
+    name: z
+      .string()
+      .trim()
+      .nonempty(required(t('views:pipelines.createPipelineDialog.nameLabel')))
+      .max(...maxLength(100, t('views:pipelines.createPipelineDialog.nameLabel')))
+      .regex(...specialSymbols(t('views:pipelines.createPipelineDialog.nameLabel')))
+      .refine(...noSpaces(t('views:pipelines.createPipelineDialog.nameLabel'))),
+    branch: z
+      .string()
+      .trim()
+      .nonempty(required(t('views:pipelines.createPipelineDialog.branchLabel'))),
+    yamlPath: z
+      .string()
+      .trim()
+      .nonempty(required(t('views:pipelines.createPipelineDialog.yamlPathLabel')))
+  })
+}
 
-const createPipelineSchema = z.object({
-  name: z.string().min(1, { message: 'Pipeline name is required' }),
-  branch: z.string().min(1, { message: 'Branch name is required' }),
-  yamlPath: z.string().min(1, { message: 'YAML path is required' })
-})
+export type CreatePipelineFormType = z.infer<ReturnType<typeof makeCreatePipelineSchema>>
+
+interface CreatePipelineDialogProps {
+  useCreatePipelineStore: () => ICreatePipelineStore
+  isOpen: boolean
+  onClose: () => void
+  onCancel: () => void
+  onSubmit: (formValues: CreatePipelineFormType) => Promise<void>
+  useTranslationStore: () => TranslationStore
+}
 
 export function CreatePipelineDialog(props: CreatePipelineDialogProps) {
-  const { onCancel, onSubmit, isOpen, onClose, useCreatePipelineStore } = props
+  const { onCancel, onSubmit, isOpen, onClose, useCreatePipelineStore, useTranslationStore } = props
+  const { t } = useTranslationStore()
 
   const { isLoadingBranchNames, branchNames, defaultBranch, error } = useCreatePipelineStore()
 
@@ -35,7 +65,7 @@ export function CreatePipelineDialog(props: CreatePipelineDialogProps) {
     trigger,
     formState: { errors, isValid }
   } = useForm<CreatePipelineFormType>({
-    resolver: zodResolver(createPipelineSchema),
+    resolver: zodResolver(makeCreatePipelineSchema(t)),
     mode: 'onChange',
     defaultValues: {
       name: '',
@@ -66,52 +96,46 @@ export function CreatePipelineDialog(props: CreatePipelineDialogProps) {
     return () => subscription.unsubscribe()
   }, [watch, setValue, clearErrors, error, trigger])
 
-  const handleSelectChange = (fieldName: keyof CreatePipelineFormType, value: string) => {
-    setValue(fieldName, value, { shouldValidate: true })
+  const handleSelectBranch = (value: string) => setValue('branch', value, { shouldValidate: true })
+
+  const handleClose = () => {
+    onCancel()
+    onClose()
+    reset()
   }
 
   return (
-    <Dialog.Root
-      open={isOpen}
-      onOpenChange={() => {
-        onClose()
-        reset()
-      }}
-    >
+    <Dialog.Root open={isOpen} onOpenChange={handleClose}>
       <Dialog.Content className="max-w-xl" aria-describedby={undefined}>
         <Dialog.Header>
-          <Dialog.Title>Create Pipeline</Dialog.Title>
+          <Dialog.Title>{t('views:pipelines.createPipelineDialog.dialogTitle', 'Create Pipeline')}</Dialog.Title>
         </Dialog.Header>
         <FormWrapper onSubmit={handleSubmit(onSubmit)}>
-          <Fieldset>
+          <Fieldset legend="Pipeline details">
             <Input
               id="name"
-              label="Pipeline name"
+              label={t('views:pipelines.createPipelineDialog.nameLabel', 'Pipeline name')}
               {...register('name')}
               size="md"
               error={errors.name?.message?.toString()}
             />
-          </Fieldset>
 
-          <Fieldset>
             <Input
               id="yamlPath"
-              label="Yaml path"
+              label={t('views:pipelines.createPipelineDialog.yamlPathLabel', 'Yaml path')}
               {...register('yamlPath')}
               size="md"
               error={errors.name?.message?.toString()}
             />
-          </Fieldset>
 
-          <Fieldset>
             <ControlGroup>
               <Select.Root
                 disabled={isLoadingBranchNames}
                 name="branch"
                 value={branch}
-                onValueChange={value => handleSelectChange('branch', value)}
-                placeholder="Select"
-                label="Branch"
+                onValueChange={handleSelectBranch}
+                placeholder={t('views:pipelines.createPipelineDialog.branchPlaceholder', 'Select')}
+                label={t('views:pipelines.createPipelineDialog.branchLabel', 'Branch')}
               >
                 <Select.Content>
                   {branchNames?.map(branchName => (
@@ -131,19 +155,11 @@ export function CreatePipelineDialog(props: CreatePipelineDialogProps) {
           )}
 
           <Dialog.Footer className="-mx-5 -mb-5">
-            <Button
-              type="button"
-              onClick={() => {
-                onCancel()
-                reset()
-              }}
-              className="text-primary"
-              variant="outline"
-            >
-              Cancel
+            <Button type="button" onClick={handleClose} className="text-primary" variant="outline">
+              {t('views:pipelines.createPipelineDialog.cancelButton', 'Cancel')}
             </Button>
             <Button type="submit" disabled={!isValid || isLoadingBranchNames}>
-              Create Pipeline
+              {t('views:pipelines.createPipelineDialog.createButton', 'Create Pipeline')}
             </Button>
           </Dialog.Footer>
         </FormWrapper>
diff --git a/packages/ui/src/views/pipelines/create-pipeline-dialog/types.ts b/packages/ui/src/views/pipelines/create-pipeline-dialog/types.ts
index 86118b0ef0..e17b7d6e9a 100644
--- a/packages/ui/src/views/pipelines/create-pipeline-dialog/types.ts
+++ b/packages/ui/src/views/pipelines/create-pipeline-dialog/types.ts
@@ -6,17 +6,3 @@ export interface ICreatePipelineStore {
   error?: { message: string }
   setError: (error?: { message: string }) => void
 }
-
-export interface CreatePipelineFormType {
-  name: string
-  branch: string
-  yamlPath: string
-}
-
-export interface CreatePipelineDialogProps {
-  useCreatePipelineStore: () => ICreatePipelineStore
-  isOpen: boolean
-  onClose: () => void
-  onCancel: () => void
-  onSubmit: (formValues: CreatePipelineFormType) => Promise<void>
-}
diff --git a/packages/ui/src/views/profile-settings/components/profile-settings-keys-create-dialog.tsx b/packages/ui/src/views/profile-settings/components/profile-settings-keys-create-dialog.tsx
index 3e8b69dcac..4ca8f66cc5 100644
--- a/packages/ui/src/views/profile-settings/components/profile-settings-keys-create-dialog.tsx
+++ b/packages/ui/src/views/profile-settings/components/profile-settings-keys-create-dialog.tsx
@@ -1,14 +1,13 @@
 import { FC, useEffect } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
 
 import { Alert, Button, Dialog, Fieldset, FormWrapper, Input, Textarea } from '@/components'
 import { ApiErrorType } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { makeValidationUtils } from '@utils/validation'
 import { TranslationStore } from '@views/repo'
 import { z } from 'zod'
 
-type SshKeyFormType = z.infer<typeof formSchema>
-
 interface ProfileSettingsKeysCreateDialogProps {
   open: boolean
   onClose: () => void
@@ -17,10 +16,27 @@ interface ProfileSettingsKeysCreateDialogProps {
   useTranslationStore: () => TranslationStore
 }
 
-const formSchema = z.object({
-  identifier: z.string().min(1, { message: 'Please provide a name' }),
-  content: z.string().min(1, { message: 'Please add the public key' })
-})
+export const makeKeyCreateFormSchema = (t: TranslationStore['t']) => {
+  const { required, maxLength, specialSymbols, noSpaces } = makeValidationUtils(t)
+
+  const sshName = t('views:profileSettings.sshKey.validation.name', 'Key name')
+
+  return z.object({
+    identifier: z
+      .string()
+      .trim()
+      .nonempty(required(sshName))
+      .max(...maxLength(100, sshName))
+      .regex(...specialSymbols(sshName))
+      .refine(...noSpaces(sshName)),
+    content: z
+      .string()
+      .trim()
+      .nonempty(required(t('views:profileSettings.sshKey.publicKey')))
+  })
+}
+
+type SshKeyFormType = z.infer<ReturnType<typeof makeKeyCreateFormSchema>>
 
 export const ProfileSettingsKeysCreateDialog: FC<ProfileSettingsKeysCreateDialogProps> = ({
   open,
@@ -37,7 +53,7 @@ export const ProfileSettingsKeysCreateDialog: FC<ProfileSettingsKeysCreateDialog
     reset,
     formState: { errors, isValid }
   } = useForm<SshKeyFormType>({
-    resolver: zodResolver(formSchema),
+    resolver: zodResolver(makeKeyCreateFormSchema(t)),
     mode: 'onChange',
     defaultValues: {
       identifier: '',
@@ -46,56 +62,52 @@ export const ProfileSettingsKeysCreateDialog: FC<ProfileSettingsKeysCreateDialog
   })
 
   const content = watch('content')
-  const identifier = watch('identifier')
 
   useEffect(() => {
     !open && reset()
   }, [open, reset])
 
-  const handleFormSubmit: SubmitHandler<SshKeyFormType> = data => {
-    handleCreateSshKey(data)
-  }
-
   return (
     <Dialog.Root open={open} onOpenChange={onClose}>
       <Dialog.Content aria-describedby={undefined}>
         <Dialog.Header>
-          <Dialog.Title>{t('views:profileSettings.newSshKey', 'New SSH key')}</Dialog.Title>
+          <Dialog.Title>{t('views:profileSettings.sshKey.newSshKey', 'New SSH key')}</Dialog.Title>
         </Dialog.Header>
-        <FormWrapper onSubmit={handleSubmit(handleFormSubmit)}>
-          <Fieldset>
+
+        <FormWrapper onSubmit={handleSubmit(handleCreateSshKey)}>
+          <Fieldset legend="SSH key details">
             <Input
               id="identifier"
-              value={identifier}
               size="md"
               {...register('identifier')}
-              placeholder={t('views:profileSettings.enterNamePlaceholder', 'Enter the name')}
-              label={t('views:profileSettings.newSshKey', 'New SSH key')}
+              placeholder={t('views:profileSettings.sshKey.enterNamePlaceholder', 'Enter the name')}
+              label={t('views:profileSettings.sshKey.newSshKey', 'New SSH key')}
               error={errors.identifier?.message?.toString()}
               autoFocus
             />
-          </Fieldset>
-          <Fieldset className="gap-y-0">
             <Textarea
               className="text-foreground-1"
               id="content"
               value={content}
               {...register('content')}
-              label={t('views:profileSettings.publicKey', 'Public key')}
+              label={t('views:profileSettings.sshKey.publicKey', 'Public key')}
+              placeholder={t('views:profileSettings.sshKey.enterPublicKeyPlaceholder', 'Enter the public key')}
               error={errors.content?.message?.toString()}
             />
           </Fieldset>
+
           {error?.type === ApiErrorType.KeyCreate && (
             <Alert.Container variant="destructive">
               <Alert.Title>{error.message}</Alert.Title>
             </Alert.Container>
           )}
+
           <Dialog.Footer className="-mx-5 -mb-5">
             <Button type="button" variant="outline" onClick={onClose}>
-              {t('views:profileSettings.cancel', 'Cancel')}
+              {t('views:profileSettings.sshKey.cancel', 'Cancel')}
             </Button>
             <Button type="submit" disabled={!isValid}>
-              {t('views:profileSettings.save', 'Save')}
+              {t('views:profileSettings.sshKey.save', 'Save')}
             </Button>
           </Dialog.Footer>
         </FormWrapper>
diff --git a/packages/ui/src/views/profile-settings/components/profile-settings-token-create-dialog.tsx b/packages/ui/src/views/profile-settings/components/profile-settings-token-create-dialog.tsx
index 86a49839cb..364a3edf0e 100644
--- a/packages/ui/src/views/profile-settings/components/profile-settings-token-create-dialog.tsx
+++ b/packages/ui/src/views/profile-settings/components/profile-settings-token-create-dialog.tsx
@@ -1,8 +1,9 @@
-import { FC, useEffect } from 'react'
+import { FC, useEffect, useMemo } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 
 import { Alert, Button, CopyButton, Dialog, Fieldset, FormWrapper, Input, Select } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { makeValidationUtils } from '@utils/validation'
 import { TranslationStore } from '@views/repo'
 import { z } from 'zod'
 
@@ -18,20 +19,47 @@ interface ProfileSettingsTokenCreateDialogProps {
   useProfileSettingsStore: () => IProfileSettingsStore
 }
 
-export const tokenCreateFormSchema = z.object({
-  identifier: z.string().min(1, { message: 'Please provide a name' }),
-  lifetime: z.string().min(1, { message: 'Please select an expiration' }),
-  token: z.string()
-})
-
-const expirationOptions = [
-  { value: '7', label: '7 days' },
-  { value: '30', label: '30 days' },
-  { value: '60', label: '60 days' },
-  { value: '90', label: '90 days' },
-  { value: 'never', label: 'Never' }
+export const makeTokenCreateFormSchema = (t: TranslationStore['t']) => {
+  const { required, maxLength, specialSymbols, noSpaces } = makeValidationUtils(t)
+
+  return z.object({
+    identifier: z
+      .string()
+      .trim()
+      .nonempty(required(t('views:profileSettings.createTokenDialog.nameLabel')))
+      .max(...maxLength(100, t('views:profileSettings.createTokenDialog.nameLabel')))
+      .regex(...specialSymbols(t('views:profileSettings.createTokenDialog.nameLabel')))
+      .refine(...noSpaces(t('views:profileSettings.createTokenDialog.nameLabel'))),
+    lifetime: z.string().nonempty(required(t('views:profileSettings.createTokenDialog.expirationLabel'))),
+    token: z.string()
+  })
+}
+
+const getExpirationOptions = (t: TranslationStore['t']) => [
+  { value: '7', label: t('views:profileSettings.createTokenDialog.expirationOptions.7_days', '7 days') },
+  { value: '30', label: t('views:profileSettings.createTokenDialog.expirationOptions.30_days', '30 days') },
+  { value: '60', label: t('views:profileSettings.createTokenDialog.expirationOptions.60_days', '60 days') },
+  { value: '90', label: t('views:profileSettings.createTokenDialog.expirationOptions.90_days', '90 days') },
+  { value: 'never', label: t('views:profileSettings.createTokenDialog.expirationOptions.never', 'Never') }
 ]
 
+const defaultValues = { identifier: '', lifetime: '', token: '' }
+
+const calculateExpirationDate = (lifetime: string): string => {
+  if (lifetime === 'never') return ''
+
+  const days = parseInt(lifetime, 10)
+  const expirationDate = new Date()
+  expirationDate.setDate(expirationDate.getDate() + days)
+
+  return expirationDate.toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+}
+
 export const ProfileSettingsTokenCreateDialog: FC<ProfileSettingsTokenCreateDialogProps> = ({
   open,
   onClose,
@@ -43,6 +71,7 @@ export const ProfileSettingsTokenCreateDialog: FC<ProfileSettingsTokenCreateDial
 }) => {
   const { createdTokenData } = useProfileSettingsStore()
   const { t } = useTranslationStore()
+
   const {
     register,
     handleSubmit,
@@ -51,162 +80,132 @@ export const ProfileSettingsTokenCreateDialog: FC<ProfileSettingsTokenCreateDial
     reset,
     formState: { errors, isValid }
   } = useForm<TokenFormType>({
-    resolver: zodResolver(tokenCreateFormSchema),
+    resolver: zodResolver(makeTokenCreateFormSchema(t)),
     mode: 'onChange',
-    defaultValues: {
-      identifier: '',
-      lifetime: '',
-      token: ''
-    }
+    defaultValues
   })
 
+  const expirationOptions = useMemo(() => getExpirationOptions(t), [t])
   const expirationValue = watch('lifetime')
-  const identifier = watch('identifier')
 
   useEffect(() => {
-    if (!open) {
-      reset()
-    }
-  }, [open, reset, setValue])
+    if (!createdTokenData) return
 
-  useEffect(() => {
-    if (createdTokenData) {
-      setValue('identifier', createdTokenData.identifier)
-      setValue('lifetime', createdTokenData.lifetime)
-      setValue('token', createdTokenData.token)
-    }
-  }, [createdTokenData, setValue])
-
-  const handleSelectChange = (fieldName: keyof TokenFormType, value: string) => {
-    setValue(fieldName, value, { shouldValidate: true })
-  }
+    reset(createdTokenData)
+  }, [createdTokenData, reset])
+
+  const handleSelectLifetime = (value: string) => setValue('lifetime', value, { shouldValidate: true })
 
   const handleFormSubmit: SubmitHandler<TokenFormType> = data => {
     handleCreateToken(data)
   }
 
-  const calculateExpirationDate = (lifetime: string): string => {
-    if (lifetime === 'never') return ''
+  const handleClose = () => {
+    onClose()
+    setTimeout(() => reset(defaultValues), 300)
+  }
+
+  const handleOpenChange = (isOpen: boolean) => !isOpen && handleClose()
 
-    const days = parseInt(lifetime, 10)
-    const expirationDate = new Date()
-    expirationDate.setDate(expirationDate.getDate() + days)
+  const getSelectCaption = () => {
+    if (!isValid) return
 
-    return expirationDate.toLocaleDateString('en-US', {
-      weekday: 'long',
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric'
-    })
+    return expirationValue === 'never'
+      ? t('views:profileSettings.createTokenDialog.tokenExpiryNone', 'Token will never expire')
+      : `${t('views:profileSettings.createTokenDialog.tokenExpiryDate', 'Token will expire on')} ${calculateExpirationDate(expirationValue)}`
   }
 
   return (
-    <Dialog.Root open={open} onOpenChange={onClose}>
+    <Dialog.Root open={open} onOpenChange={handleOpenChange}>
       <Dialog.Content aria-describedby={undefined}>
         <Dialog.Header>
-          <Dialog.Title>{t('views:profileSettings.createToken', 'Create a token')}</Dialog.Title>
+          <Dialog.Title>{t('views:profileSettings.createTokenDialog.title', 'Create a token')}</Dialog.Title>
         </Dialog.Header>
         <FormWrapper onSubmit={handleSubmit(handleFormSubmit)}>
-          <Fieldset>
+          <Fieldset legend="Token details">
             <Input
               id="identifier"
-              value={identifier}
               size="md"
               {...register('identifier')}
-              placeholder={t('views:profileSettings.enterTokenPlaceholder', 'Enter token name')}
-              label={t('views:profileSettings.name', 'Name')}
+              placeholder={t('views:profileSettings.createTokenDialog.namePlaceholder', 'Enter token name')}
+              label={t('views:profileSettings.createTokenDialog.nameLabel', 'Name')}
               error={errors.identifier?.message?.toString()}
               rightElement={
                 createdTokenData && (
-                  <CopyButton className="absolute right-2.5 bg-background-1" name={createdTokenData.identifier || ''} />
+                  <CopyButton className="bg-background-1 absolute right-2.5" name={createdTokenData.identifier || ''} />
                 )
               }
               readOnly={!!createdTokenData}
               autoFocus
             />
-          </Fieldset>
-          {createdTokenData ? (
-            <>
-              <Fieldset>
+            {createdTokenData ? (
+              <>
                 <Input
                   id="lifetime"
                   value={createdTokenData?.lifetime}
                   size="md"
-                  label={t('views:profileSettings.expiration', 'Expiration')}
+                  label={t('views:profileSettings.createTokenDialog.expiration', 'Expiration')}
                   readOnly
                 />
-              </Fieldset>
-              <Fieldset>
                 <Input
                   className="truncate"
                   id="token"
                   value={createdTokenData?.token}
                   size="md"
                   readOnly
-                  label={t('views:profileSettings.token', 'Token')}
+                  label={t('views:profileSettings.createTokenDialog.tokenFieldLabel', 'Token')}
                   rightElement={
-                    <CopyButton className="absolute right-2.5 bg-background-1" name={createdTokenData?.token || ''} />
+                    <CopyButton className="bg-background-1 absolute right-2.5" name={createdTokenData?.token || ''} />
                   }
                 />
-              </Fieldset>
-              <span className="text-14 text-foreground-1">
-                {t(
-                  'views:profileSettings.tokenSuccessDescription',
-                  'Your token has been generated. Please make sure to copy and store your token somewhere safe, you won’t beable to see it again.'
-                )}
-              </span>
-            </>
-          ) : (
-            <>
-              <Fieldset className="gap-y-0">
-                <Select.Root
-                  value={expirationValue}
-                  onValueChange={value => handleSelectChange('lifetime', value)}
-                  label={t('views:profileSettings.expiration', 'Expiration')}
-                  placeholder={t('views:profileSettings.select', 'Select')}
-                  error={errors.lifetime?.message?.toString()}
-                >
-                  <Select.Content>
-                    {expirationOptions.map(expirationOption => {
-                      return (
-                        <Select.Item key={expirationOption.value} value={expirationOption.value}>
-                          <span className="text-foreground-1">{expirationOption.label}</span>
-                        </Select.Item>
-                      )
-                    })}
-                  </Select.Content>
-                </Select.Root>
-                {isValid && (
-                  <span className="mt-1.5 text-14 text-foreground-3">
-                    {watch('lifetime') === 'never' ? (
-                      <span>{t('views:profileSettings.tokenExpiryNone', 'Token will never expire')}</span>
-                    ) : (
-                      <span>
-                        {t('views:profileSettings.tokenExpiryDate', 'Token will expire on')}{' '}
-                        {calculateExpirationDate(watch('lifetime'))}
-                      </span>
-                    )}
-                  </span>
-                )}
-              </Fieldset>
-            </>
-          )}
+                <span className="text-14 text-foreground-1">
+                  {t(
+                    'views:profileSettings.createTokenDialog.successDescription',
+                    'Your token has been generated. Please make sure to copy and store your token somewhere safe, you won’t be able to see it again.'
+                  )}
+                </span>
+              </>
+            ) : (
+              <Select.Root
+                value={expirationValue}
+                onValueChange={handleSelectLifetime}
+                label={t('views:profileSettings.createTokenDialog.expirationLabel', 'Expiration')}
+                placeholder={t('views:profileSettings.createTokenDialog.expirationPlaceholder', 'Select')}
+                error={errors.lifetime?.message?.toString()}
+                caption={getSelectCaption()}
+              >
+                <Select.Content>
+                  {expirationOptions.map(expirationOption => (
+                    <Select.Item
+                      key={expirationOption.value}
+                      className="text-foreground-1"
+                      value={expirationOption.value}
+                    >
+                      {expirationOption.label}
+                    </Select.Item>
+                  ))}
+                </Select.Content>
+              </Select.Root>
+            )}
+          </Fieldset>
+
           {error?.type === ApiErrorType.TokenCreate && (
             <Alert.Container variant="destructive">
               <Alert.Title>{error.message}</Alert.Title>
             </Alert.Container>
           )}
+
           <Dialog.Footer className="-mx-5 -mb-5">
-            <Button type="button" variant="outline" onClick={onClose}>
+            <Button type="button" variant="outline" onClick={handleClose}>
               {createdTokenData
-                ? t('views:profileSettings.gotItButton', 'Got it')
-                : t('views:profileSettings.cancel', 'Cancel')}
+                ? t('views:profileSettings.createTokenDialog.gotItButton', 'Got it')
+                : t('views:profileSettings.createTokenDialog.cancelButton', 'Cancel')}
             </Button>
             {!createdTokenData && (
               <Button type="submit" disabled={!isValid || isLoading}>
                 {!isLoading
-                  ? t('views:profileSettings.generateTokenButton', 'Generate token')
-                  : t('views:profileSettings.generatingTokenButton', 'Generating token...')}
+                  ? t('views:profileSettings.createTokenDialog.generateButton', 'Generate token')
+                  : t('views:profileSettings.createTokenDialog.generatingButton', 'Generating token...')}
               </Button>
             )}
           </Dialog.Footer>
diff --git a/packages/ui/src/views/profile-settings/profile-settings-general-page.tsx b/packages/ui/src/views/profile-settings/profile-settings-general-page.tsx
index c5895b82b8..43af4f24e3 100644
--- a/packages/ui/src/views/profile-settings/profile-settings-general-page.tsx
+++ b/packages/ui/src/views/profile-settings/profile-settings-general-page.tsx
@@ -1,73 +1,51 @@
 import { FC, useEffect, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 
-import {
-  Alert,
-  Avatar,
-  Button,
-  ButtonGroup,
-  ControlGroup,
-  Fieldset,
-  FormSeparator,
-  FormWrapper,
-  Icon,
-  Input,
-  Legend
-} from '@/components'
+import { Alert, Avatar, Button, ButtonGroup, FormSeparator, FormWrapper, Icon, Input, Legend } from '@/components'
 import { SkeletonForm } from '@/components/skeletons'
 import { IProfileSettingsStore, ProfileSettingsErrorType, SandboxLayout, TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { getInitials } from '@utils/stringUtils'
+import { makeValidationUtils } from '@utils/validation'
 import { z } from 'zod'
 
-const makeProfileSchema = (t: TranslationStore['t']) =>
-  z.object({
+const makeProfileSchema = (t: TranslationStore['t']) => {
+  const { required, maxLength, invalid } = makeValidationUtils(t)
+
+  return z.object({
     name: z
       .string()
       .trim()
-      .min(1, { message: t('views:profileSettings.validation.nameMin', 'Please provide your name') })
-      .max(256, {
-        message: t('views:profileSettings.validation.nameMax', 'Name must be no longer than 256 characters')
-      }),
+      .nonempty(required(t('views:profileSettings.name')))
+      .max(...maxLength(256, t('views:profileSettings.name'))),
     username: z
       .string()
       .trim()
-      .min(1, {
-        message: t('views:profileSettings.validation.usernameMin', 'Please provide a username')
-      }),
+      .nonempty(required(t('views:profileSettings.username'))),
     email: z
       .string()
       .trim()
-      .email({
-        message: t('views:profileSettings.validation.emailInvalid', 'Please provide a valid email address')
-      })
-      .max(250, {
-        message: t('views:profileSettings.validation.emailMax', 'Email must be no longer than 250 characters')
-      })
+      .email(invalid(t('views:profileSettings.accountEmail')))
+      .max(...maxLength(250, t('views:profileSettings.accountEmail')))
   })
+}
 
-const makePasswordSchema = (t: TranslationStore['t']) =>
-  z
+const makePasswordSchema = (t: TranslationStore['t']) => {
+  const { maxLength, minLength } = makeValidationUtils(t)
+
+  return z
     .object({
       newPassword: z
         .string()
-        .min(6, {
-          message: t('views:profileSettings.validation.passwordMin', 'New password must be at least 6 characters')
-        })
-        .max(128, {
-          message: t(
-            'views:profileSettings.validation.passwordMax',
-            'New password must be no longer than 128 characters'
-          )
-        }),
-      confirmPassword: z.string().min(6, {
-        message: t('views:profileSettings.validation.confirmPasswordMin', 'Please confirm your new password')
-      })
+        .min(...minLength(6, t('views:profileSettings.newPassword')))
+        .max(...maxLength(128, t('views:profileSettings.newPassword'))),
+      confirmPassword: z.string().min(...minLength(6, t('views:profileSettings.newPassword')))
     })
     .refine(data => data.newPassword === data.confirmPassword, {
       message: t('views:profileSettings.validation.passwordsDoNotMatch', 'Passwords do not match'),
       path: ['confirmPassword']
     })
+}
 
 export type ProfileFields = z.infer<ReturnType<typeof makeProfileSchema>>
 export type PasswordFields = z.infer<ReturnType<typeof makePasswordSchema>>
@@ -133,12 +111,6 @@ export const SettingsAccountGeneralPage: FC<SettingsAccountGeneralPageProps> = (
     }
   })
 
-  useEffect(() => {
-    if (!userData) return
-
-    resetProfileForm(userData)
-  }, [resetProfileForm, userData])
-
   useEffect(() => {
     if (profileUpdateSuccess && userData) {
       resetProfileForm(userData)
@@ -199,65 +171,54 @@ export const SettingsAccountGeneralPage: FC<SettingsAccountGeneralPageProps> = (
                 {getInitials(userData?.name || '')}
               </Avatar.Fallback>
             </Avatar.Root>
-            <Fieldset>
-              <Input
-                id="name"
-                size="md"
-                {...registerProfile('name')}
-                placeholder={t('views:profileSettings.enterNamePlaceholder', 'Enter your name')}
-                label={t('views:profileSettings.name', 'Name')}
-                error={profileErrors?.name?.message?.toString()}
-                disabled={isUpdatingUser}
-              />
-            </Fieldset>
-            <Fieldset>
-              <Input
-                id="username"
-                size="md"
-                {...registerProfile('username')}
-                placeholder={t('views:profileSettings.enterUsernamePlaceholder', 'Enter your username')}
-                disabled
-                label={t('views:profileSettings.username', 'Username')}
-                caption={t(
-                  'views:profileSettings.enterUsernameCaption',
-                  'This username will be shown across the platform.'
-                )}
-                error={profileErrors?.username?.message?.toString()}
-              />
-            </Fieldset>
-            <Fieldset>
-              <Input
-                id="email"
-                size="md"
-                {...registerProfile('email')}
-                placeholder="name@domain.com"
-                label={t('views:profileSettings.accountEmail', 'Account email')}
-                error={profileErrors?.email?.message}
-                disabled={isUpdatingUser}
-              />
-            </Fieldset>
+            <Input
+              id="name"
+              size="md"
+              {...registerProfile('name')}
+              placeholder={t('views:profileSettings.enterNamePlaceholder', 'Enter your name')}
+              label={t('views:profileSettings.name', 'Name')}
+              error={profileErrors?.name?.message?.toString()}
+              disabled={isUpdatingUser}
+            />
+            <Input
+              id="username"
+              size="md"
+              {...registerProfile('username')}
+              placeholder={t('views:profileSettings.enterUsernamePlaceholder', 'Enter your username')}
+              disabled
+              label={t('views:profileSettings.username', 'Username')}
+              caption={'This username will be shown across the platform.'}
+              error={profileErrors?.username?.message?.toString()}
+            />
+            <Input
+              id="email"
+              size="md"
+              {...registerProfile('email')}
+              placeholder="name@domain.com"
+              label={t('views:profileSettings.accountEmail', 'Account email')}
+              error={profileErrors?.email?.message}
+              disabled={isUpdatingUser}
+            />
 
             {renderErrorMessage(ProfileSettingsErrorType.PROFILE, error?.message || '')}
 
-            <ControlGroup type="button">
-              <ButtonGroup>
-                {!profileSubmitted ? (
-                  <Button
-                    type="submit"
-                    disabled={!isProfileValid || isUpdatingUser || !Object.keys(profileDirtyFields).length}
-                  >
-                    {isUpdatingUser
-                      ? t('views:profileSettings.updatingProfileButton', 'Updating...')
-                      : t('views:profileSettings.updateProfileButton', 'Update profile')}
-                  </Button>
-                ) : (
-                  <Button className="pointer-events-none" variant="ghost" type="button" theme="success">
-                    {t('views:profileSettings.updatedButton', 'Updated')}&nbsp;&nbsp;
-                    <Icon name="tick" size={14} />
-                  </Button>
-                )}
-              </ButtonGroup>
-            </ControlGroup>
+            <ButtonGroup>
+              {!profileSubmitted ? (
+                <Button
+                  type="submit"
+                  disabled={!isProfileValid || isUpdatingUser || !Object.keys(profileDirtyFields).length}
+                >
+                  {isUpdatingUser
+                    ? t('views:profileSettings.updatingProfileButton', 'Updating...')
+                    : t('views:profileSettings.updateProfileButton', 'Update profile')}
+                </Button>
+              ) : (
+                <Button className="pointer-events-none" variant="ghost" type="button" theme="success">
+                  {t('views:profileSettings.updatedButton', 'Updated')}&nbsp;&nbsp;
+                  <Icon name="tick" size={14} />
+                </Button>
+              )}
+            </ButtonGroup>
           </FormWrapper>
 
           <FormSeparator className="my-7 border-borders-4" />
@@ -270,49 +231,43 @@ export const SettingsAccountGeneralPage: FC<SettingsAccountGeneralPageProps> = (
                 'Minimum of 6 characters long containing at least one number and a mixture of uppercase and lowercase letters.'
               )}
             />
-            <Fieldset>
-              <Input
-                id="newPassword"
-                type="password"
-                size="md"
-                {...registerPassword('newPassword')}
-                placeholder={t('views:profileSettings.enterPasswordPlaceholder', 'Enter a new password')}
-                label={t('views:profileSettings.newPassword', 'New password')}
-                error={passwordErrors?.newPassword?.message}
-                disabled={isUpdatingPassword}
-              />
-            </Fieldset>
-            <Fieldset>
-              <Input
-                id="confirmPassword"
-                type="password"
-                size="md"
-                {...registerPassword('confirmPassword')}
-                placeholder={t('views:profileSettings.confirmPasswordPlaceholder', 'Confirm your new password')}
-                label={t('views:profileSettings.confirmPassword', 'Confirm password')}
-                error={passwordErrors?.confirmPassword?.message}
-                disabled={isUpdatingPassword}
-              />
-            </Fieldset>
+            <Input
+              id="newPassword"
+              type="password"
+              size="md"
+              {...registerPassword('newPassword')}
+              placeholder={t('views:profileSettings.enterPasswordPlaceholder', 'Enter a new password')}
+              label={t('views:profileSettings.newPassword', 'New password')}
+              error={passwordErrors?.newPassword?.message}
+              disabled={isUpdatingPassword}
+            />
+            <Input
+              id="confirmPassword"
+              type="password"
+              size="md"
+              {...registerPassword('confirmPassword')}
+              placeholder={t('views:profileSettings.confirmPasswordPlaceholder', 'Confirm your new password')}
+              label={t('views:profileSettings.confirmPassword', 'Confirm password')}
+              error={passwordErrors?.confirmPassword?.message}
+              disabled={isUpdatingPassword}
+            />
 
             {renderErrorMessage(ProfileSettingsErrorType.PASSWORD, error?.message || '')}
 
-            <ControlGroup type="button">
-              <ButtonGroup>
-                {!passwordSubmitted ? (
-                  <Button type="submit" disabled={!isPasswordValid || isUpdatingPassword}>
-                    {isUpdatingPassword
-                      ? t('views:profileSettings.updating', 'Updating...')
-                      : t('views:profileSettings.updatePassword', 'Update password')}
-                  </Button>
-                ) : (
-                  <Button className="pointer-events-none" variant="ghost" type="button" theme="success">
-                    {t('views:profileSettings.updatedButton', 'Updated')}&nbsp;&nbsp;
-                    <Icon name="tick" size={14} />
-                  </Button>
-                )}
-              </ButtonGroup>
-            </ControlGroup>
+            <ButtonGroup>
+              {!passwordSubmitted ? (
+                <Button type="submit" disabled={!isPasswordValid || isUpdatingPassword}>
+                  {isUpdatingPassword
+                    ? t('views:profileSettings.updating', 'Updating...')
+                    : t('views:profileSettings.updatePassword', 'Update password')}
+                </Button>
+              ) : (
+                <Button className="pointer-events-none" variant="ghost" type="button" theme="success">
+                  {t('views:profileSettings.updatedButton', 'Updated')}&nbsp;&nbsp;
+                  <Icon name="tick" size={14} />
+                </Button>
+              )}
+            </ButtonGroup>
           </FormWrapper>
         </>
       )}
diff --git a/packages/ui/src/views/profile-settings/profile-settings-keys-page.tsx b/packages/ui/src/views/profile-settings/profile-settings-keys-page.tsx
index 06be794d94..c0a060f75c 100644
--- a/packages/ui/src/views/profile-settings/profile-settings-keys-page.tsx
+++ b/packages/ui/src/views/profile-settings/profile-settings-keys-page.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-import { Alert, Button, Fieldset, FormSeparator, FormWrapper, Legend, Spacer } from '@/components'
+import { Alert, Button, Separator } from '@/components'
 import { ApiErrorType, SandboxLayout, TranslationStore } from '@/views'
 
 import { ProfileKeysList } from './components/profile-settings-keys-list'
@@ -25,7 +25,7 @@ const ErrorMessage: FC<{ message: string }> = ({ message }) => (
   </Alert.Container>
 )
 
-const SettingsAccountKeysPage: FC<SettingsAccountKeysPageProps> = ({
+export const SettingsAccountKeysPage: FC<SettingsAccountKeysPageProps> = ({
   useProfileSettingsStore,
   openTokenDialog,
   openSshKeyDialog,
@@ -43,71 +43,73 @@ const SettingsAccountKeysPage: FC<SettingsAccountKeysPageProps> = ({
   const { t } = useTranslationStore()
 
   return (
-    <SandboxLayout.Content className="px-0">
-      <h1 className="text-24 font-medium text-foreground-1">
+    <SandboxLayout.Content className="grid gap-y-7 px-0">
+      <h1 className="text-24 text-foreground-1 mb-3 font-medium">
         {t('views:profileSettings.keysAndTokens', 'Keys and Tokens')}
       </h1>
-      <Spacer size={10} />
-      <FormWrapper>
-        <Fieldset className="gap-y-5">
-          <div className="flex items-end justify-between">
-            <Legend
-              title={
-                <span className="flex justify-between gap-x-4">
-                  {t('views:profileSettings.personalAccessToken', 'Personal access token')}
-                </span>
-              }
-              description={t(
+
+      <section className="grid gap-y-[18px]">
+        <header className="flex items-end justify-between">
+          <div className="max-w-[400px]">
+            <h4 className="text-18 text-foreground-1 mb-2.5 font-medium leading-snug">
+              {t('views:profileSettings.personalAccessToken', 'Personal access token')}
+            </h4>
+            <p className="text-14 text-foreground-2 leading-snug">
+              {t(
                 'views:profileSettings.addTokenDescription',
                 'Personal access tokens allow you to authenticate with the API.'
               )}
-            />
-            <Button type="button" variant="outline" onClick={openTokenDialog}>
-              {t('views:profileSettings.addToken', 'Add new token')}
-            </Button>
+            </p>
           </div>
-          {error?.type === ApiErrorType.TokenFetch ? (
-            <ErrorMessage message={error.message} />
-          ) : (
-            <ProfileTokensList
-              tokens={tokens}
-              isLoading={isLoadingTokenList}
-              openAlertDeleteDialog={openAlertDeleteDialog}
-              useTranslationStore={useTranslationStore}
-            />
-          )}
-        </Fieldset>
 
-        <FormSeparator className="border-borders-4" />
+          <Button type="button" variant="outline" onClick={openTokenDialog}>
+            {t('views:profileSettings.addToken', 'Add new token')}
+          </Button>
+        </header>
+
+        {error?.type === ApiErrorType.TokenFetch ? (
+          <ErrorMessage message={error.message} />
+        ) : (
+          <ProfileTokensList
+            tokens={tokens}
+            isLoading={isLoadingTokenList}
+            openAlertDeleteDialog={openAlertDeleteDialog}
+            useTranslationStore={useTranslationStore}
+          />
+        )}
+      </section>
+
+      <Separator className="bg-borders-4 h-px" />
 
-        <Fieldset className="gap-y-5">
-          <div className="flex items-end justify-between">
-            <Legend
-              className="max-w-[400px]"
-              title={t('views:profileSettings.sshKeys', 'My SSH keys')}
-              description={t(
+      <section className="grid gap-y-[18px]">
+        <header className="flex items-end justify-between">
+          <div className="max-w-[400px]">
+            <h4 className="text-18 text-foreground-1 mb-2.5 font-medium leading-snug">
+              {t('views:profileSettings.sshKeys', 'My SSH keys')}
+            </h4>
+            <p className="text-14 text-foreground-2 leading-snug">
+              {t(
                 'views:profileSettings.addSshKeyDescription',
                 'SSH keys allow you to establish a secure connection to your code repository.'
               )}
-            />
-            <Button variant="outline" type="button" onClick={openSshKeyDialog}>
-              {t('views:profileSettings.addSshKey', 'Add new SSH key')}
-            </Button>
+            </p>
           </div>
-          {error?.type === ApiErrorType.KeyFetch ? (
-            <ErrorMessage message={error.message} />
-          ) : (
-            <ProfileKeysList
-              publicKeys={publicKeys}
-              isLoading={isLoadingKeysList}
-              openAlertDeleteDialog={openAlertDeleteDialog}
-              useTranslationStore={useTranslationStore}
-            />
-          )}
-        </Fieldset>
-      </FormWrapper>
+          <Button variant="outline" type="button" onClick={openSshKeyDialog}>
+            {t('views:profileSettings.addSshKey', 'Add new SSH key')}
+          </Button>
+        </header>
+
+        {error?.type === ApiErrorType.KeyFetch ? (
+          <ErrorMessage message={error.message} />
+        ) : (
+          <ProfileKeysList
+            publicKeys={publicKeys}
+            isLoading={isLoadingKeysList}
+            openAlertDeleteDialog={openAlertDeleteDialog}
+            useTranslationStore={useTranslationStore}
+          />
+        )}
+      </section>
     </SandboxLayout.Content>
   )
 }
-
-export { SettingsAccountKeysPage }
diff --git a/packages/ui/src/views/profile-settings/types.ts b/packages/ui/src/views/profile-settings/types.ts
index 9bd0b5a3e3..965024f76f 100644
--- a/packages/ui/src/views/profile-settings/types.ts
+++ b/packages/ui/src/views/profile-settings/types.ts
@@ -1,9 +1,9 @@
 import { z } from 'zod'
 
-import { tokenCreateFormSchema } from './components/profile-settings-token-create-dialog'
+import { makeTokenCreateFormSchema } from './components/profile-settings-token-create-dialog'
 import { ProfileFields } from './profile-settings-general-page'
 
-export type TokenFormType = z.infer<typeof tokenCreateFormSchema>
+export type TokenFormType = z.infer<ReturnType<typeof makeTokenCreateFormSchema>>
 
 export interface AlertDeleteParams {
   identifier: string
diff --git a/packages/ui/src/views/project/create-project-page.tsx b/packages/ui/src/views/project/create-project-page.tsx
index 71a0ef7183..9bf2b166e8 100644
--- a/packages/ui/src/views/project/create-project-page.tsx
+++ b/packages/ui/src/views/project/create-project-page.tsx
@@ -1,9 +1,20 @@
 import { FC, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { Button, Card, Fieldset, FormWrapper, Icon, Input, StyledLink, StyledLinkProps } from '@/components'
+import {
+  Button,
+  Card,
+  Fieldset,
+  FormWrapper,
+  Icon,
+  Input,
+  Message,
+  MessageTheme,
+  StyledLink,
+  StyledLinkProps
+} from '@/components'
 import { useTheme } from '@/context'
-import { Floating1ColumnLayout, TranslationStore } from '@/views'
+import { Floating1ColumnLayout, makeProjectDescriptionSchema, makeProjectNameSchema, TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { cn } from '@utils/cn'
 import { z } from 'zod'
@@ -45,21 +56,18 @@ const getIsFirstProjectPage = (props: CreateProjectPageProps): props is CreateFi
   return 'logoutLinkProps' in props
 }
 
-const createProjectSchema = (t: TranslationStore['t']) =>
+export const makeCreateProjectSchema = (t: TranslationStore['t']) =>
   z.object({
-    name: z
-      .string()
-      .nonempty(t('views:createProject.validation.nameNoEmpty', 'The field can’t be blank'))
-      .min(4, {
-        message: t('views:createProject.validation.nameMinLength', 'The project name should be at least 4 characters')
-      }),
-    description: z.string()
+    name: makeProjectNameSchema(t, t('views:createProject.form.name')),
+    description: makeProjectDescriptionSchema(t, t('views:createProject.form.description'))
   })
 
-export type CreateProjectFields = z.infer<ReturnType<typeof createProjectSchema>>
+export type CreateProjectFields = z.infer<ReturnType<typeof makeCreateProjectSchema>>
 
 export const CreateProjectPage: FC<CreateProjectPageProps> = props => {
   const { error, isLoading, backLinkProps, onFormSubmit, useTranslationStore } = props
+  const [serverError, setServerError] = useState<string | null>(null)
+
   const { isLightTheme } = useTheme()
 
   const isAdditional = getIsAdditionalProjectPage(props)
@@ -68,43 +76,30 @@ export const CreateProjectPage: FC<CreateProjectPageProps> = props => {
 
   const { t } = useTranslationStore()
 
-  const [serverError, setServerError] = useState<string | null>(null)
   const {
-    trigger,
     register,
-    setError,
     formState: { errors },
-    clearErrors,
     handleSubmit
   } = useForm<CreateProjectFields>({
-    resolver: zodResolver(createProjectSchema(t))
+    mode: 'onChange',
+    resolver: zodResolver(makeCreateProjectSchema(t))
   })
 
   const handleInputChange = async () => {
-    clearErrors()
-
-    if (serverError) {
-      setServerError(null)
-      await trigger()
-    }
+    if (!serverError) return
+    setServerError(null)
   }
 
   useEffect(() => {
-    if (error) {
-      setServerError(error)
-      setError('name', { type: 'manual', message: error })
-    } else {
-      setServerError(null)
-      clearErrors()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!error) return
+    setServerError(error)
   }, [error])
 
   const hasError = Object.keys(errors).length > 0 || !!serverError
 
   return (
     <Floating1ColumnLayout
-      className="flex-col justify-start bg-background-7 pt-20 sm:pt-[8.75rem]"
+      className="bg-background-7 flex-col justify-start pt-20 sm:pt-[8.75rem]"
       highlightTheme={hasError ? 'error' : 'green'}
       verticalCenter
     >
@@ -126,17 +121,17 @@ export const CreateProjectPage: FC<CreateProjectPageProps> = props => {
             <CreateProjectAnimatedLogo hasError={hasError} />
           )}
 
-          <Card.Title className="mt-3 text-center text-foreground-1" as="h1">
+          <Card.Title className="text-foreground-1 mt-3 text-center" as="h1">
             {t('views:createProject.title', 'Create your new project')}
           </Card.Title>
 
-          <p className="mt-0.5 text-center text-sm leading-snug text-foreground-4">
+          <p className="text-foreground-4 mt-0.5 text-center text-sm leading-snug">
             {t('views:createProject.description', 'Organize your repositories, pipelines and more.')}
           </p>
         </div>
 
         <FormWrapper onSubmit={handleSubmit(onFormSubmit)}>
-          <Fieldset>
+          <Fieldset legend="Project details">
             <Input
               id="name"
               label={t('views:createProject.form.name', 'Project name')}
@@ -157,6 +152,12 @@ export const CreateProjectPage: FC<CreateProjectPageProps> = props => {
             />
           </Fieldset>
 
+          {error && (
+            <Message className="mt-1" theme={MessageTheme.ERROR}>
+              {error}
+            </Message>
+          )}
+
           <Button
             className="mt-3 w-full"
             borderRadius="full"
@@ -172,7 +173,7 @@ export const CreateProjectPage: FC<CreateProjectPageProps> = props => {
         </FormWrapper>
 
         {isFirst && (
-          <p className="foreground-5 mt-4 text-center text-sm text-foreground-5">
+          <p className="foreground-5 text-foreground-5 mt-4 text-center text-sm">
             {t('views:createProject.logout.question', 'Want to use a different account?')}{' '}
             <StyledLink {...props.logoutLinkProps} variant="accent">
               {t('views:createProject.logout.link', 'Log out')}
diff --git a/packages/ui/src/views/project/project-general/project-general-page.tsx b/packages/ui/src/views/project/project-general/project-general-page.tsx
index 5dfc666ba2..bc576e69ee 100644
--- a/packages/ui/src/views/project/project-general/project-general-page.tsx
+++ b/packages/ui/src/views/project/project-general/project-general-page.tsx
@@ -1,21 +1,26 @@
 import { useEffect, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
 
 import {
   Alert,
   Button,
   ButtonGroup,
-  ControlGroup,
   Fieldset,
-  FormSeparator,
   FormWrapper,
   Icon,
   Input,
   Legend,
+  Separator,
   SkeletonForm,
   Textarea
 } from '@/components'
-import { SandboxLayout, TranslationStore, TypesSpace } from '@/views'
+import {
+  makeProjectDescriptionSchema,
+  makeProjectNameSchema,
+  SandboxLayout,
+  TranslationStore,
+  TypesSpace
+} from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
@@ -30,12 +35,13 @@ interface ProjectSettingsGeneralPageProps {
   useTranslationStore: () => TranslationStore
 }
 
-const projectSettingsSchema = z.object({
-  identifier: z.string().min(1, { message: 'Please provide a project name' }),
-  description: z.string()
-})
+const makeProjectSettingsSchema = (t: TranslationStore['t']) =>
+  z.object({
+    identifier: makeProjectNameSchema(t, t('views:projectSettings.general.projectNameLabel')),
+    description: makeProjectDescriptionSchema(t, t('views:projectSettings.general.projectDescriptionLabel'))
+  })
 
-export type ProjectSettingsGeneralFields = z.infer<typeof projectSettingsSchema>
+export type ProjectSettingsGeneralFields = z.infer<ReturnType<typeof makeProjectSettingsSchema>>
 
 export const ProjectSettingsGeneralPage = ({
   data,
@@ -52,24 +58,18 @@ export const ProjectSettingsGeneralPage = ({
     register,
     handleSubmit,
     reset,
-    setValue,
     formState: { errors }
   } = useForm<ProjectSettingsGeneralFields>({
-    resolver: zodResolver(projectSettingsSchema),
+    resolver: zodResolver(makeProjectSettingsSchema(t)),
     mode: 'onSubmit',
     defaultValues: {
-      identifier: data?.identifier ?? '', //project name
+      identifier: data?.identifier ?? '',
       description: data?.description ?? ''
     }
   })
 
   const [submitted, setSubmitted] = useState(false)
 
-  // Form submit handler
-  const onSubmit: SubmitHandler<ProjectSettingsGeneralFields> = formData => {
-    onFormSubmit(formData)
-  }
-
   const handleReset = () => reset()
 
   useEffect(() => {
@@ -90,24 +90,13 @@ export const ProjectSettingsGeneralPage = ({
   }, [isUpdateSuccess, reset, data?.description, data?.identifier])
 
   useEffect(() => {
-    setValue('description', data?.description ?? '')
-  }, [data?.description, setValue])
-
-  useEffect(() => {
-    setValue('identifier', data?.identifier ?? '')
-  }, [data?.identifier, setValue])
-
-  useEffect(() => {
-    reset({
-      identifier: data?.identifier ?? '',
-      description: data?.description ?? ''
-    })
+    reset({ identifier: data?.identifier ?? '', description: data?.description ?? '' })
   }, [data, reset])
 
   return (
     <SandboxLayout.Main>
       <SandboxLayout.Content className="mx-auto max-w-[38.125rem] pt-[3.25rem]">
-        <h2 className="mb-10 text-2xl font-medium text-foreground-1">
+        <h2 className="text-foreground-1 mb-10 text-2xl font-medium">
           {t('views:projectSettings.general.mainTitle', 'Project Settings')}
         </h2>
 
@@ -115,34 +104,28 @@ export const ProjectSettingsGeneralPage = ({
 
         {!isLoading && (
           <>
-            <FormWrapper onSubmit={handleSubmit(onSubmit)}>
-              <Fieldset>
-                {/* PROJECT NAME */}
-                <ControlGroup>
-                  <Input
-                    id="identifier"
-                    {...register('identifier')}
-                    placeholder={t('views:projectSettings.general.projectNamePlaceholder', 'Enter project name')}
-                    label={t('views:projectSettings.general.projectNameLabel', 'Project name')}
-                    error={errors.identifier?.message?.toString()}
-                    // TODO: backend is not ready to update project name
-                    disabled
-                  />
-                </ControlGroup>
-
-                {/* IDENTIFIER/DESCRIPTION */}
-                <ControlGroup>
-                  <Textarea
-                    id="description"
-                    {...register('description')}
-                    placeholder={t(
-                      'views:projectSettings.general.projectDescriptionPlaceholder',
-                      'Enter description (optional)'
-                    )}
-                    label={t('views:projectSettings.general.projectDescriptionLabel', 'Description')}
-                    error={errors?.description?.message?.toString()}
-                  />
-                </ControlGroup>
+            <FormWrapper onSubmit={handleSubmit(onFormSubmit)}>
+              <Fieldset legend="Project details">
+                <Input
+                  id="identifier"
+                  {...register('identifier')}
+                  placeholder={t('views:projectSettings.general.projectNamePlaceholder', 'Enter project name')}
+                  label={t('views:projectSettings.general.projectNameLabel', 'Project name')}
+                  error={errors.identifier?.message?.toString()}
+                  // TODO: backend is not ready to update project name
+                  disabled
+                />
+
+                <Textarea
+                  id="description"
+                  {...register('description')}
+                  placeholder={t(
+                    'views:projectSettings.general.projectDescriptionPlaceholder',
+                    'Enter description (optional)'
+                  )}
+                  label={t('views:projectSettings.general.projectDescriptionLabel', 'Description')}
+                  error={errors?.description?.message?.toString()}
+                />
 
                 {updateError && (
                   <Alert.Container variant="destructive">
@@ -150,35 +133,32 @@ export const ProjectSettingsGeneralPage = ({
                   </Alert.Container>
                 )}
 
-                {/*BUTTON CONTROL: SAVE & CANCEL*/}
-                <ControlGroup type="button">
-                  <ButtonGroup spacing="3">
-                    {!submitted ? (
-                      <>
-                        <Button type="submit">
-                          {isUpdating
-                            ? t('views:projectSettings.general.formSubmitButton.savingState', 'Saving...')
-                            : t('views:projectSettings.general.formSubmitButton.defaultState', 'Save changes')}
-                        </Button>
-                        <Button variant="outline" type="button" onClick={handleReset}>
-                          {t('views:projectSettings.general.formCancelButton', 'Cancel')}
-                        </Button>
-                      </>
-                    ) : (
-                      <Button variant="ghost" type="button" theme="success" className="pointer-events-none">
-                        {t('views:projectSettings.general.formSubmitButton.savedState', 'Saved')}&nbsp;&nbsp;
-                        <Icon name="tick" size={14} />
+                <ButtonGroup spacing="3">
+                  {!submitted ? (
+                    <>
+                      <Button type="submit">
+                        {isUpdating
+                          ? t('views:projectSettings.general.formSubmitButton.savingState', 'Saving...')
+                          : t('views:projectSettings.general.formSubmitButton.defaultState', 'Save changes')}
+                      </Button>
+                      <Button variant="outline" type="button" onClick={handleReset}>
+                        {t('views:projectSettings.general.formCancelButton', 'Cancel')}
                       </Button>
-                    )}
-                  </ButtonGroup>
-                </ControlGroup>
+                    </>
+                  ) : (
+                    <Button variant="ghost" type="button" theme="success" className="pointer-events-none">
+                      {t('views:projectSettings.general.formSubmitButton.savedState', 'Saved')}&nbsp;&nbsp;
+                      <Icon name="tick" size={14} />
+                    </Button>
+                  )}
+                </ButtonGroup>
               </Fieldset>
             </FormWrapper>
 
-            <FormSeparator className="mt-8" />
+            <Separator className="mt-8" />
 
             <Legend
-              className="mt-7 max-w-[27.5rem]"
+              className="mt-7 max-w-[28.5rem]"
               title={t('views:projectSettings.general.deleteProjectTitle', 'Delete project')}
               description={t(
                 'views:projectSettings.general.deleteProjectDescription',
diff --git a/packages/ui/src/views/project/project-import.tsx b/packages/ui/src/views/project/project-import.tsx
index f5879fac32..3062a72a3e 100644
--- a/packages/ui/src/views/project/project-import.tsx
+++ b/packages/ui/src/views/project/project-import.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { useForm, type SubmitHandler } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
 
 import {
   Button,
@@ -11,61 +11,96 @@ import {
   FormWrapper,
   Input,
   Option,
-  Select,
-  Spacer,
-  Text
+  Select
 } from '@/components'
-import { SandboxLayout } from '@/views'
+import { SandboxLayout, TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { makeFloatValidationUtils, makeValidationUtils } from '@utils/validation'
 import { ProviderOptionsEnum } from '@views/repo/repo-import/types'
 import { z } from 'zod'
 
-const formSchema = z
-  .object({
-    identifier: z.string(),
-    description: z.string(),
-    hostUrl: z.string().optional(),
-    pipelines: z.boolean().optional(),
-    repositories: z.boolean().optional(),
-    provider: z.string().min(1, { message: 'Please select a provider' }),
-    password: z.string().optional(),
-    organization: z.string().min(1, { message: 'Please enter an organization' })
-  })
-  .superRefine((data, ctx) => {
-    if (data.provider === 'Github Enterprise' && !data.hostUrl) {
-      ctx.addIssue({
-        code: 'custom',
-        path: ['hostUrl'],
-        message: 'Repository URL is required'
-      })
-    }
-  })
+const makeImportProjectFormSchema = (t: TranslationStore['t']) => {
+  const { required, maxLength, specialSymbols, noSpaces } = makeValidationUtils(t)
+
+  return z
+    .object({
+      identifier: z
+        .string()
+        .trim()
+        .nonempty(required(t('views:importProject.projectNameLabel')))
+        .max(...maxLength(100, t('views:importProject.projectNameLabel')))
+        .regex(...specialSymbols(t('views:importProject.projectNameLabel')))
+        .refine(...noSpaces(t('views:importProject.projectNameLabel'))),
+      description: z
+        .string()
+        .trim()
+        .max(...maxLength(1024, t('views:importProject.descriptionLabel'))),
+      hostUrl: z.string().optional(),
+      pipelines: z.boolean().optional(),
+      repositories: z.boolean().optional(),
+      provider: z
+        .string()
+        .trim()
+        .nonempty(required(t('views:importProject.gitProviderLabel'))),
+      password: z.string().optional(),
+      organization: z
+        .string()
+        .trim()
+        .nonempty(required(t('views:importProject.organizationLabel')))
+        .max(...maxLength(100, t('views:importProject.organizationLabel')))
+        .regex(...specialSymbols(t('views:importProject.organizationLabel')))
+        .refine(...noSpaces(t('views:importProject.organizationLabel')))
+    })
+    .superRefine(({ provider, hostUrl }, ctx) => {
+      const makeValidators = makeFloatValidationUtils(t, ctx)
+
+      if (provider === ProviderOptionsEnum.GITHUB_ENTERPRISE) {
+        const { requiredFloat, urlFloat } = makeValidators({
+          value: hostUrl,
+          path: 'hostUrl',
+          name: t('views:importProject.hostUrlLabel', 'Host URL')
+        })
+        requiredFloat()
+        urlFloat()
+      }
+    })
+}
 
-export type ImportProjectFormFields = z.infer<typeof formSchema>
+export type ImportProjectFormFields = z.infer<ReturnType<typeof makeImportProjectFormSchema>>
 
 interface ImportProjectPageProps {
   onFormSubmit: (data: ImportProjectFormFields) => void
   onFormCancel: () => void
   isLoading: boolean
   apiErrorsValue?: string
+  useTranslationStore: () => TranslationStore
 }
 
-export function ImportProjectPage({ onFormSubmit, onFormCancel, isLoading, apiErrorsValue }: ImportProjectPageProps) {
+export function ImportProjectPage({
+  onFormSubmit,
+  onFormCancel,
+  isLoading,
+  apiErrorsValue,
+  useTranslationStore
+}: ImportProjectPageProps) {
+  const { t } = useTranslationStore()
+
   const {
     register,
     handleSubmit,
     setValue,
+    trigger,
     watch,
     formState: { errors }
   } = useForm<ImportProjectFormFields>({
-    resolver: zodResolver(formSchema),
+    resolver: zodResolver(makeImportProjectFormSchema(t)),
     mode: 'onChange',
     defaultValues: {
       identifier: '',
       description: '',
       pipelines: false,
       repositories: true,
-      provider: 'Github',
+      provider: ProviderOptionsEnum.GITHUB,
       password: '',
       organization: ''
     }
@@ -73,171 +108,141 @@ export function ImportProjectPage({ onFormSubmit, onFormCancel, isLoading, apiEr
 
   const providerValue = watch('provider')
   const orgValue = watch('organization')
+  const pipelinesValue = watch('pipelines')
 
   useEffect(() => {
     setValue('identifier', orgValue)
-  }, [orgValue, setValue])
 
-  const handleSelectChange = (fieldName: keyof ImportProjectFormFields, value: string) => {
-    setValue(fieldName, value, { shouldValidate: true })
-  }
+    if (!errors.organization) return
 
-  const onSubmit: SubmitHandler<ImportProjectFormFields> = data => {
-    onFormSubmit(data)
-  }
+    trigger('identifier')
+  }, [orgValue, trigger, errors.organization])
 
-  const handleCancel = () => {
-    onFormCancel()
-  }
+  const handleSelectProvider = (value: string) => setValue('provider', value, { shouldValidate: true })
 
   return (
     <SandboxLayout.Main>
       <SandboxLayout.Content paddingClassName="w-[570px] mx-auto pt-11 pb-20">
-        <Spacer size={5} />
-        <Text className="tracking-tight" size={5} weight="medium">
-          Import a Project
-        </Text>
-        <Spacer size={10} />
-        <FormWrapper onSubmit={handleSubmit(onSubmit)}>
-          {/* provider */}
-          <Fieldset>
+        <h1 className="text-foreground-1 mb-10 mt-5 text-2xl font-medium tracking-tight">
+          {t('views:importProject.title', 'Import a project')}
+        </h1>
+
+        <FormWrapper onSubmit={handleSubmit(onFormSubmit)}>
+          <Fieldset legend="Git provider details">
             <ControlGroup>
               <Select.Root
                 name="provider"
                 value={providerValue}
-                onValueChange={value => handleSelectChange('provider', value)}
-                placeholder="Select"
-                label="Git provider"
+                onValueChange={handleSelectProvider}
+                placeholder={t('views:importProject.gitProviderPlaceholder', 'Select provider')}
+                label={t('views:importProject.gitProviderLabel', 'Git provider')}
               >
                 <Select.Content>
-                  {ProviderOptionsEnum &&
-                    Object.values(ProviderOptionsEnum)?.map(option => {
-                      return (
-                        <Select.Item
-                          key={option}
-                          value={option}
-                          disabled={
-                            option !== ProviderOptionsEnum.GITHUB && option !== ProviderOptionsEnum.GITHUB_ENTERPRISE
-                          }
-                        >
-                          {option}
-                        </Select.Item>
-                      )
-                    })}
+                  {Object.values(ProviderOptionsEnum)?.map(option => {
+                    const isDisabled =
+                      option !== ProviderOptionsEnum.GITHUB && option !== ProviderOptionsEnum.GITHUB_ENTERPRISE
+
+                    return (
+                      <Select.Item key={option} value={option} disabled={isDisabled}>
+                        {option}
+                      </Select.Item>
+                    )
+                  })}
                 </Select.Content>
               </Select.Root>
             </ControlGroup>
-          </Fieldset>
-          {watch('provider') === ProviderOptionsEnum.GITHUB_ENTERPRISE && (
-            <Fieldset>
+
+            {providerValue === ProviderOptionsEnum.GITHUB_ENTERPRISE && (
               <Input
                 id="host"
-                label="Host URL"
+                label={t('views:importProject.hostUrlLabel', 'Host URL')}
                 {...register('hostUrl')}
-                placeholder="Enter the host URL"
+                placeholder={t('views:importProject.hostUrlPlaceholder', 'Enter the host URL')}
                 size="md"
                 error={errors.hostUrl?.message?.toString()}
               />
-            </Fieldset>
-          )}
+            )}
 
-          {/* token */}
-          <Fieldset>
-            <ControlGroup>
-              <Input
-                type="password"
-                id="password"
-                label="Token"
-                {...register('password')}
-                placeholder="Enter your access token"
-                size="md"
-                error={errors.password?.message?.toString()}
-              />
-            </ControlGroup>
+            <Input
+              type="password"
+              id="password"
+              label={t('views:importProject.tokenLabel', 'Token')}
+              {...register('password')}
+              placeholder={t('views:importProject.tokenPlaceholder', 'Enter your access token')}
+              size="md"
+              error={errors.password?.message?.toString()}
+            />
           </Fieldset>
 
           <FormSeparator />
 
-          {/* organization */}
-          <Fieldset>
+          <Fieldset legend="Organization import details">
             <Input
               id="organization"
-              label="Organization"
+              label={t('views:importProject.organizationLabel', 'Organization')}
               {...register('organization')}
-              placeholder="Enter the organization name"
+              placeholder={t('views:importProject.organizationPlaceholder', 'Enter the organization name')}
               size="md"
               error={errors.organization?.message?.toString()}
             />
-          </Fieldset>
 
-          {/* authorization - pipelines */}
-          <Fieldset>
-            <ControlGroup className="flex flex-row gap-5">
+            <div className="flex gap-5">
               <Option
-                control={<Checkbox {...register('repositories')} id="authorization" checked={true} disabled />}
+                control={<Checkbox {...register('repositories')} id="authorization" checked disabled />}
                 id="authorization"
-                label="Repositories"
-                className="mt-0 flex min-h-8 items-center"
+                label={t('views:importProject.repositoriesLabel', 'Repositories')}
+                disabled
               />
               <Option
                 control={
                   <Checkbox
                     {...register('pipelines')}
                     id="pipelines"
-                    checked={watch('pipelines')}
+                    checked={pipelinesValue}
                     onCheckedChange={(checked: boolean) => setValue('pipelines', checked)}
                   />
                 }
                 id="pipelines"
-                label="Import Pipelines"
-                className="mt-0 flex min-h-8 items-center"
+                label={t('views:importProject.pipelinesLabel', 'Import Pipelines')}
               />
-            </ControlGroup>
+            </div>
           </Fieldset>
 
           <FormSeparator />
 
-          {/* project identifier */}
-          <Fieldset>
-            <ControlGroup>
-              <Input
-                id="identifier"
-                label="Name"
-                {...register('identifier')}
-                placeholder="Enter repository name"
-                size="md"
-                error={errors.identifier?.message?.toString()}
-              />
-            </ControlGroup>
-          </Fieldset>
+          <Fieldset legend="Project details">
+            <Input
+              id="identifier"
+              label={t('views:importProject.projectNameLabel', 'Name')}
+              {...register('identifier')}
+              placeholder={t('views:importProject.projectNamePlaceholder', 'Enter repository name')}
+              size="md"
+              error={errors.identifier?.message?.toString()}
+            />
 
-          {/* description */}
-          <Fieldset>
-            <ControlGroup>
-              <Input
-                id="description"
-                label="Description"
-                {...register('description')}
-                placeholder="Enter a description"
-                size="md"
-                error={errors.description?.message?.toString()}
-              />
-            </ControlGroup>
+            <Input
+              id="description"
+              label={t('views:importProject.descriptionLabel', 'Description')}
+              {...register('description')}
+              placeholder={t('views:importProject.descriptionPlaceholder', 'Enter a description')}
+              size="md"
+              error={errors.description?.message?.toString()}
+            />
           </Fieldset>
 
-          {!!apiErrorsValue && <span className="text-xs text-destructive">{apiErrorsValue}</span>}
-          {/* SUBMIT BUTTONS */}
-          <Fieldset>
-            <ControlGroup>
-              <ButtonGroup>
-                <Button type="submit" disabled={isLoading}>
-                  {!isLoading ? 'Import project' : 'Importing project...'}
-                </Button>
-                <Button type="button" variant="outline" onClick={handleCancel}>
-                  Cancel
-                </Button>
-              </ButtonGroup>
-            </ControlGroup>
+          {!!apiErrorsValue && <span className="text-destructive text-xs">{apiErrorsValue}</span>}
+
+          <Fieldset legend="Form actions">
+            <ButtonGroup>
+              <Button type="submit" disabled={isLoading}>
+                {!isLoading
+                  ? t('views:importProject.importButton.default', 'Import project')
+                  : t('views:importProject.importButton.importing', 'Importing project...')}
+              </Button>
+              <Button type="button" variant="outline" onClick={onFormCancel}>
+                {t('views:importProject.cancelButton', 'Cancel')}
+              </Button>
+            </ButtonGroup>
           </Fieldset>
         </FormWrapper>
       </SandboxLayout.Content>
diff --git a/packages/ui/src/views/project/project-members/components/invite-member-dialog.tsx b/packages/ui/src/views/project/project-members/components/invite-member-dialog.tsx
index 19eb8c3890..ccd912a0e0 100644
--- a/packages/ui/src/views/project/project-members/components/invite-member-dialog.tsx
+++ b/packages/ui/src/views/project/project-members/components/invite-member-dialog.tsx
@@ -3,16 +3,27 @@ import { useForm } from 'react-hook-form'
 
 import { Alert, Avatar, Button, ControlGroup, Dialog, Fieldset, FormWrapper, Select } from '@/components'
 import { PrincipalType } from '@/types'
-import { InviteMemberDialogProps, InviteMemberFormFields } from '@/views'
+import { InviteMemberDialogProps, InviteMemberFormFields, TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { getInitials } from '@utils/stringUtils'
+import { makeValidationUtils } from '@utils/validation'
 import { getRolesData } from '@views/project/project-members/constants'
 import { z } from 'zod'
 
-export const inviteMemberFormSchema = z.object({
-  member: z.string().min(1, { message: 'Member name is required' }),
-  role: z.string().min(1, { message: 'Role is required' })
-})
+export const makeInviteMemberFormSchema = (t: TranslationStore['t']) => {
+  const { required } = makeValidationUtils(t)
+
+  return z.object({
+    member: z
+      .string()
+      .trim()
+      .nonempty(required(t('views:projectSettings.member', 'Member'))),
+    role: z
+      .string()
+      .trim()
+      .nonempty(required(t('views:projectSettings.role', 'Role')))
+  })
+}
 
 interface PrincipalOptionProps {
   principal: PrincipalType
@@ -30,7 +41,7 @@ const PrincipalOption = forwardRef<HTMLDivElement, PrincipalOptionProps>(({ prin
         <span className={`truncate ${isShortView ? 'text-foreground-1' : 'text-foreground-8'}`}>
           {principal.display_name}
         </span>
-        {!isShortView && <span className="truncate text-12 text-foreground-4">{principal.email}</span>}
+        {!isShortView && <span className="text-12 text-foreground-4 truncate">{principal.email}</span>}
       </span>
     </div>
   )
@@ -57,6 +68,7 @@ export const InviteMemberDialog: FC<InviteMemberDialogProps> = ({
   const [invitedMemberFullModel, setInvitedMemberFullModel] = useState<PrincipalType | null>(null)
 
   const roleOptions = useMemo(() => getRolesData(t), [t])
+  const readerRole = roleOptions[3]
 
   const {
     handleSubmit,
@@ -65,19 +77,19 @@ export const InviteMemberDialog: FC<InviteMemberDialogProps> = ({
     reset,
     formState: { errors, isValid }
   } = useForm<InviteMemberFormFields>({
-    resolver: zodResolver(inviteMemberFormSchema),
+    resolver: zodResolver(makeInviteMemberFormSchema(t)),
     mode: 'onChange',
     defaultValues: {
       member: '',
-      role: roleOptions[3].uid
+      role: readerRole.uid
     }
   })
 
   const invitedMember = watch('member')
   const memberRole = watch('role')
 
-  const handleSelectChange = (fieldName: keyof InviteMemberFormFields, value: string) => {
-    setValue(fieldName, value, { shouldValidate: true })
+  const handleSelectRole = (value: string) => {
+    setValue('role', value, { shouldValidate: true })
   }
 
   const handleMemberChange = (value: string) => {
@@ -108,8 +120,9 @@ export const InviteMemberDialog: FC<InviteMemberDialogProps> = ({
         <Dialog.Header>
           <Dialog.Title>{t('views:projectSettings.newMember', 'New member')}</Dialog.Title>
         </Dialog.Header>
-        <FormWrapper className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
-          <Fieldset>
+
+        <FormWrapper className="space-y-6" onSubmit={handleSubmit(onSubmit)} id="invite-member-form">
+          <Fieldset legend="Member details">
             <ControlGroup>
               <Select.Root
                 name="member"
@@ -142,7 +155,7 @@ export const InviteMemberDialog: FC<InviteMemberDialogProps> = ({
               <Select.Root
                 name="role"
                 value={memberRole}
-                onValueChange={value => handleSelectChange('role', value)}
+                onValueChange={handleSelectRole}
                 placeholder={t('views:forms.selectRole', 'Select role')}
                 label={t('views:projectSettings.role', 'Role')}
                 error={errors.role?.message?.toString()}
@@ -154,8 +167,8 @@ export const InviteMemberDialog: FC<InviteMemberDialogProps> = ({
                   {roleOptions.map(option => (
                     <Select.Item key={option.uid} value={option.uid} isItemTextAsChild>
                       <div className="flex cursor-pointer flex-col gap-y-1.5">
-                        <span className="leading-none text-foreground-8">{option.label}</span>
-                        <span className="leading-tight text-foreground-4">{option.description}</span>
+                        <span className="text-foreground-8 leading-none">{option.label}</span>
+                        <span className="text-foreground-4 leading-tight">{option.description}</span>
                       </div>
                     </Select.Item>
                   ))}
@@ -163,21 +176,21 @@ export const InviteMemberDialog: FC<InviteMemberDialogProps> = ({
               </Select.Root>
             </ControlGroup>
           </Fieldset>
-
-          {!!error && (
-            <Alert.Container className="!mt-0" variant="destructive">
-              <Alert.Title>
-                {t('views:repos.error', 'Error:')} {error}
-              </Alert.Title>
-            </Alert.Container>
-          )}
         </FormWrapper>
 
+        {!!error && (
+          <Alert.Container variant="destructive">
+            <Alert.Title>
+              {t('views:repos.error', 'Error:')} {error}
+            </Alert.Title>
+          </Alert.Container>
+        )}
+
         <Dialog.Footer>
           <Button type="button" variant="outline" onClick={onClose} loading={isInvitingMember}>
             {t('views:repos.cancel', 'Cancel')}
           </Button>
-          <Button type="button" onClick={handleSubmit(onSubmit)} disabled={isInvitingMember || !isValid}>
+          <Button type="submit" form="invite-member-form" disabled={isInvitingMember || !isValid}>
             {t('views:projectSettings.addMember', 'Add member to this project')}
           </Button>
         </Dialog.Footer>
diff --git a/packages/ui/src/views/project/project-members/types.ts b/packages/ui/src/views/project/project-members/types.ts
index 0f6da6e64b..9c8136f44c 100644
--- a/packages/ui/src/views/project/project-members/types.ts
+++ b/packages/ui/src/views/project/project-members/types.ts
@@ -4,7 +4,7 @@ import { TranslationStore } from '@views/repo'
 import { z } from 'zod'
 
 import { IMemberListStore } from '../project.types'
-import { inviteMemberFormSchema } from './components/invite-member-dialog'
+import { makeInviteMemberFormSchema } from './components/invite-member-dialog'
 
 export interface MembersProps {
   display_name: string
@@ -15,7 +15,7 @@ export interface MembersProps {
   uid: string
 }
 
-export type InviteMemberFormFields = z.infer<typeof inviteMemberFormSchema>
+export type InviteMemberFormFields = z.infer<ReturnType<typeof makeInviteMemberFormSchema>>
 
 export interface ProjectMemberListViewProps {
   isLoading: boolean
diff --git a/packages/ui/src/views/project/project.types.ts b/packages/ui/src/views/project/project.types.ts
index 1de364829d..24aa3167aa 100644
--- a/packages/ui/src/views/project/project.types.ts
+++ b/packages/ui/src/views/project/project.types.ts
@@ -1,3 +1,7 @@
+import { makeValidationUtils } from '@utils/validation'
+import { TranslationStore } from '@views/repo'
+import { z } from 'zod'
+
 export interface MemberData {
   display_name: string
   role: string
@@ -26,3 +30,24 @@ export interface IMemberListStore {
   page: number
   setPage: (page: number) => void
 }
+
+export const makeProjectNameSchema = (t: TranslationStore['t'], name: string) => {
+  const { required, maxLength, minLength, specialSymbols, noSpaces } = makeValidationUtils(t)
+
+  return z
+    .string()
+    .trim()
+    .nonempty(required(name))
+    .min(...minLength(4, name))
+    .max(...maxLength(100, name))
+    .regex(...specialSymbols(name))
+    .refine(...noSpaces(name))
+}
+
+export const makeProjectDescriptionSchema = (t: TranslationStore['t'], name: string) => {
+  const { maxLength } = makeValidationUtils(t)
+  return z
+    .string()
+    .trim()
+    .max(...maxLength(1024, name))
+}
diff --git a/packages/ui/src/views/repo/index.ts b/packages/ui/src/views/repo/index.ts
index eaf895e524..093fe997af 100644
--- a/packages/ui/src/views/repo/index.ts
+++ b/packages/ui/src/views/repo/index.ts
@@ -6,7 +6,7 @@ export * from '@views/repo/repo-list/types'
 export * from '@views/repo/repo-sidebar'
 
 // repo create
-export * from '@views/repo/repo-create'
+export * from '@views/repo/repo-create/repo-create'
 
 // repo summary
 export * from '@views/repo/repo-summary/repo-summary'
diff --git a/packages/ui/src/views/repo/pull-request/compare/components/pull-request-compare-form.tsx b/packages/ui/src/views/repo/pull-request/compare/components/pull-request-compare-form.tsx
index 16e95302e3..afe81d6522 100644
--- a/packages/ui/src/views/repo/pull-request/compare/components/pull-request-compare-form.tsx
+++ b/packages/ui/src/views/repo/pull-request/compare/components/pull-request-compare-form.tsx
@@ -2,31 +2,23 @@ import { forwardRef, MouseEvent, useRef, useState } from 'react'
 import { FieldErrors, SubmitHandler, UseFormHandleSubmit, UseFormRegister } from 'react-hook-form'
 
 import { Button, Fieldset, Icon, Input, MarkdownViewer, Tabs, Textarea } from '@/components'
-import { handleFileDrop, handlePaste, HandleUploadType, TranslationStore } from '@/views'
+import { CompareFormFields, handleFileDrop, handlePaste, HandleUploadType, TranslationStore } from '@/views'
 import { cn } from '@utils/cn'
-import { z } from 'zod'
 
 const TABS_KEYS = {
   WRITE: 'write',
   PREVIEW: 'preview'
 }
-// Define the form schema
-const formSchemaCompare = z.object({
-  title: z.string().min(1, { message: 'Please provide a pull request title' }),
-  description: z.string().optional()
-})
-
-export type FormFields = z.infer<typeof formSchemaCompare> // Automatically generate a type from the schema
 
 interface PullRequestFormProps {
   apiError: string | null
   isLoading: boolean
-  onFormDraftSubmit: (data: FormFields) => void
-  onFormSubmit: (data: FormFields) => void
+  onFormDraftSubmit: (data: CompareFormFields) => void
+  onFormSubmit: (data: CompareFormFields) => void
   isValid: boolean
-  errors: FieldErrors<FormFields>
-  handleSubmit: UseFormHandleSubmit<FormFields>
-  register: UseFormRegister<FormFields>
+  errors: FieldErrors<CompareFormFields>
+  handleSubmit: UseFormHandleSubmit<CompareFormFields>
+  register: UseFormRegister<CompareFormFields>
   useTranslationStore: () => TranslationStore
   handleUpload?: HandleUploadType
   desc?: string
@@ -39,7 +31,7 @@ const PullRequestCompareForm = forwardRef<HTMLFormElement, PullRequestFormProps>
     ref
   ) => {
     const { t } = useTranslationStore()
-    const onSubmit: SubmitHandler<FormFields> = data => {
+    const onSubmit: SubmitHandler<CompareFormFields> = data => {
       onFormSubmit(data)
     }
     const [__file, setFile] = useState<File>()
@@ -167,7 +159,7 @@ const PullRequestCompareForm = forwardRef<HTMLFormElement, PullRequestFormProps>
                     error={errors.description?.message?.toString()}
                   />
                   {isDragging && (
-                    <div className="absolute inset-1 cursor-copy rounded-sm border border-dashed border-borders-2" />
+                    <div className="border-borders-2 absolute inset-1 cursor-copy rounded-sm border border-dashed" />
                   )}
                 </div>
               </Tabs.Content>
@@ -187,7 +179,7 @@ const PullRequestCompareForm = forwardRef<HTMLFormElement, PullRequestFormProps>
                 <div>
                   <input type="file" ref={fileInputRef} className="hidden" onChange={handleFileChange} />
                   <Button
-                    className="gap-x-2 px-2.5 font-normal text-foreground-3 hover:bg-background-8"
+                    className="text-foreground-3 hover:bg-background-8 gap-x-2 px-2.5 font-normal"
                     variant="custom"
                     onClick={e => handleFileSelect(e)}
                   >
diff --git a/packages/ui/src/views/repo/pull-request/compare/pull-request-compare-page.tsx b/packages/ui/src/views/repo/pull-request/compare/pull-request-compare-page.tsx
index 01bad9ad2a..2ca1dc8a15 100644
--- a/packages/ui/src/views/repo/pull-request/compare/pull-request-compare-page.tsx
+++ b/packages/ui/src/views/repo/pull-request/compare/pull-request-compare-page.tsx
@@ -18,6 +18,7 @@ import {
 } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { getInitials } from '@utils/stringUtils'
+import { makeValidationUtils } from '@utils/validation'
 import { Layout } from '@views/layouts/layout'
 import { ICommitSelectorStore } from '@views/repo/components/commit-selector/types'
 import PullRequestCompareButton from '@views/repo/pull-request/compare/components/pull-request-compare-button'
@@ -36,12 +37,21 @@ import {
 import PullRequestCompareDiffList from './components/pull-request-compare-diff-list'
 import { HeaderProps } from './pull-request-compare.types'
 
-export const pullRequestFormSchema = z.object({
-  title: z.string().min(1, { message: 'Please provide a pull request title' }),
-  description: z.string().optional()
-})
+const makePullRequestFormSchema = (t: TranslationStore['t']) => {
+  const { required, maxLength } = makeValidationUtils(t)
+  const name = t('views:pullRequests.compare.validation.title', 'Pull request title')
 
-export type CompareFormFields = z.infer<typeof pullRequestFormSchema>
+  return z.object({
+    title: z
+      .string()
+      .trim()
+      .nonempty(required(name))
+      .max(...maxLength(256, name)),
+    description: z.string().optional()
+  })
+}
+
+export type CompareFormFields = z.infer<ReturnType<typeof makePullRequestFormSchema>>
 
 export const DiffModeOptions = [
   { name: 'Split', value: 'Split' },
@@ -150,7 +160,7 @@ export const PullRequestComparePage: FC<PullRequestComparePageProps> = ({
     reset,
     formState: { errors, isValid }
   } = useForm<CompareFormFields>({
-    resolver: zodResolver(pullRequestFormSchema),
+    resolver: zodResolver(makePullRequestFormSchema(t)),
     mode: 'onChange',
     defaultValues: {
       title: '',
@@ -187,11 +197,11 @@ export const PullRequestComparePage: FC<PullRequestComparePageProps> = ({
   return (
     <SandboxLayout.Main fullWidth>
       <SandboxLayout.Content className="px-20">
-        <span className="mt-7 text-24 font-medium leading-snug tracking-tight text-foreground-1">
+        <h1 className="text-24 text-foreground-1 mt-7 font-medium leading-snug tracking-tight">
           {t('views:pullRequests.compareChanges', 'Comparing changes')}
-        </span>
+        </h1>
         <Layout.Vertical className="mt-2.5">
-          <p className="max-w-xl text-14 leading-snug text-foreground-2">
+          <p className="text-14 text-foreground-2 max-w-xl leading-snug">
             {t(
               'views:pullRequests.compareChangesDescription',
               'Choose two branches to see what’s changed or to start a new pull request.'
@@ -202,56 +212,56 @@ export const PullRequestComparePage: FC<PullRequestComparePageProps> = ({
 
             {branchSelectorRenderer}
 
-            {isBranchSelected &&
-              !isLoading && ( // Only render this block if isBranchSelected is true
-                <Layout.Horizontal gap="gap-x-1" className="items-center">
-                  {mergeability ? (
-                    <>
-                      <Icon className="text-icons-success" name="tick" size={12} />
-                      <p className="text-14 leading-none text-foreground-success">
-                        {t('views:pullRequests.compareChangesAbleToMerge', 'Able to merge.')}{' '}
-                        <span className="text-foreground-4">
+            {/* Only render this block if isBranchSelected is true */}
+            {isBranchSelected && !isLoading && (
+              <Layout.Horizontal gap="gap-x-1" className="items-center">
+                {mergeability ? (
+                  <>
+                    <Icon className="text-icons-success" name="tick" size={12} />
+                    <p className="text-14 text-foreground-success leading-none">
+                      {t('views:pullRequests.compareChangesAbleToMerge', 'Able to merge.')}{' '}
+                      <span className="text-foreground-4">
+                        {t(
+                          'views:pullRequests.compareChangesAbleToMergeDescription',
+                          'These branches can be automatically merged.'
+                        )}
+                      </span>
+                    </p>
+                  </>
+                ) : (
+                  <>
+                    {apiError === "head branch doesn't contain any new commits." ? (
+                      <>
+                        <Icon name={'x-mark'} size={12} className="text-icons-1" />
+                        <p className="text-14 text-foreground-4 leading-none">
                           {t(
-                            'views:pullRequests.compareChangesAbleToMergeDescription',
-                            'These branches can be automatically merged.'
+                            'views:pullRequests.compareChangesApiError',
+                            'Head branch doesn’t contain any new commits.'
                           )}
-                        </span>
-                      </p>
-                    </>
-                  ) : (
-                    <>
-                      {apiError === "head branch doesn't contain any new commits." ? (
-                        <>
-                          <Icon name={'x-mark'} size={12} className="text-icons-1" />
-                          <p className="text-14 leading-none text-foreground-4">
+                        </p>
+                      </>
+                    ) : (
+                      <>
+                        <Icon className="text-icons-danger" name="x-mark" size={12} />
+                        <p className="text-14 text-foreground-danger leading-none">
+                          {t('views:pullRequests.compareChangesCantMerge', 'Can’t be merged.')}{' '}
+                          <span className="text-foreground-4">
                             {t(
-                              'views:pullRequests.compareChangesApiError',
-                              'Head branch doesn’t contain any new commits.'
+                              'views:pullRequests.compareChangesCantMergeDescription',
+                              'You can still create the pull request.'
                             )}
-                          </p>
-                        </>
-                      ) : (
-                        <>
-                          <Icon className="text-icons-danger" name="x-mark" size={12} />
-                          <p className="text-14 leading-none text-foreground-danger">
-                            {t('views:pullRequests.compareChangesCantMerge', 'Can’t be merged.')}{' '}
-                            <span className="text-foreground-4">
-                              {t(
-                                'views:pullRequests.compareChangesCantMergeDescription',
-                                'You can still create the pull request.'
-                              )}
-                            </span>
-                          </p>
-                        </>
-                      )}
-                    </>
-                  )}
-                </Layout.Horizontal>
-              )}
+                          </span>
+                        </p>
+                      </>
+                    )}
+                  </>
+                )}
+              </Layout.Horizontal>
+            )}
           </Layout.Horizontal>
         </Layout.Vertical>
         {!prBranchCombinationExists && (
-          <Layout.Horizontal className="mt-4 items-center justify-between rounded-md border border-borders-1 bg-background-2 p-4">
+          <Layout.Horizontal className="border-borders-1 bg-background-2 mt-4 items-center justify-between rounded-md border p-4">
             <p className="text-14 leading-none">
               {isBranchSelected ? (
                 <>
@@ -282,7 +292,7 @@ export const PullRequestComparePage: FC<PullRequestComparePageProps> = ({
           </Layout.Horizontal>
         )}
         {prBranchCombinationExists && (
-          <Layout.Horizontal className="mt-4 items-center justify-between rounded-md border border-borders-1 bg-background-2 p-4">
+          <Layout.Horizontal className="border-borders-1 bg-background-2 mt-4 items-center justify-between rounded-md border p-4">
             <div className="flex items-center gap-x-1.5">
               <div>
                 <Layout.Horizontal className="items-center">
diff --git a/packages/ui/src/views/repo/repo-branch-rules/components/repo-branch-rules-fields.tsx b/packages/ui/src/views/repo/repo-branch-rules/components/repo-branch-rules-fields.tsx
index 93c6ecda85..7c109c4daa 100644
--- a/packages/ui/src/views/repo/repo-branch-rules/components/repo-branch-rules-fields.tsx
+++ b/packages/ui/src/views/repo/repo-branch-rules/components/repo-branch-rules-fields.tsx
@@ -9,9 +9,6 @@ import {
   Fieldset,
   Icon,
   Input,
-  Label,
-  Message,
-  MessageTheme,
   MultiSelect,
   MultiSelectOptionType,
   Option,
@@ -34,9 +31,9 @@ export const BranchSettingsRuleToggleField: FC<FieldProps> = ({ register, watch,
       isLast
       actions={
         <Switch
-          {...register!('state')}
-          checked={watch!('state')}
-          onCheckedChange={() => setValue!('state', !watch!('state'))}
+          {...register('state')}
+          checked={watch('state')}
+          onCheckedChange={() => setValue('state', !watch('state'))}
         />
       }
     >
@@ -57,61 +54,55 @@ export const BranchSettingsRuleNameField: FC<FieldProps & { disabled: boolean }>
   disabled,
   t
 }) => (
-  <ControlGroup>
-    <Input
-      id="name"
-      label={t('views:repos.name', 'Name')}
-      {...register!('identifier')}
-      placeholder={t('views:repos.enterRuleName', 'Enter the rule name here')}
-      autoFocus
-      disabled={disabled}
-      error={errors?.identifier?.message?.toString()}
-      size="md"
-    />
-  </ControlGroup>
+  <Input
+    id="name"
+    label={t('views:repos.name', 'Name')}
+    {...register('identifier')}
+    placeholder={t('views:repos.enterRuleName', 'Enter the rule name here')}
+    autoFocus
+    disabled={disabled}
+    error={errors?.identifier?.message?.toString()}
+    size="md"
+  />
 )
 
 export const BranchSettingsRuleDescriptionField: FC<FieldProps> = ({ register, errors, t }) => (
-  <ControlGroup>
-    <Textarea
-      label={t('views:repos.description', 'Description')}
-      id="description"
-      {...register!('description')}
-      placeholder={t('views:repos.ruleDescriptionPlaceholder', 'Enter the description here')}
-      error={errors?.description?.message?.toString()}
-    />
-  </ControlGroup>
+  <Textarea
+    label={t('views:repos.description', 'Description')}
+    id="description"
+    {...register('description')}
+    placeholder={t('views:repos.ruleDescriptionPlaceholder', 'Enter the description here')}
+    error={errors?.description?.message?.toString()}
+  />
 )
 
 export const BranchSettingsRuleTargetPatternsField: FC<FieldProps> = ({ setValue, watch, register, errors, t }) => {
   const [selectedOption, setSelectedOption] = useState<PatternsButtonType>(PatternsButtonType.INCLUDE)
 
-  const patterns = watch!('patterns') || []
+  const patterns = watch('patterns') || []
 
   const handleAddPattern = () => {
-    const pattern = watch!('pattern')
+    const pattern = watch('pattern')
     if (pattern && !patterns.some(p => p.pattern === pattern)) {
-      setValue!('patterns', [...patterns, { pattern, option: selectedOption }])
-      setValue!('pattern', '')
+      setValue('patterns', [...patterns, { pattern, option: selectedOption }])
+      setValue('pattern', '')
     }
   }
 
   const handleRemovePattern = (patternVal: string) => {
     const updatedPatterns = patterns.filter(({ pattern }) => pattern !== patternVal)
-    setValue!('patterns', updatedPatterns)
+    setValue('patterns', updatedPatterns)
   }
 
   return (
-    <Fieldset className="gap-y-4">
+    <Fieldset className="gap-y-4" legend="Target patterns">
       <ControlGroup>
-        <Label htmlFor="target-patterns" className="mb-2.5" color="secondary">
-          {t('views:repos.targetPatterns', 'Target patterns')}
-        </Label>
         <div className="grid grid-cols-[1fr_112px] items-start gap-x-3.5">
           <Input
             id="pattern"
             size="md"
-            {...register!('pattern')}
+            label={t('views:repos.targetPatterns', 'Target patterns')}
+            {...register('pattern')}
             caption={t(
               'views:repos.createRuleCaption',
               'Match branches using globstar patterns (e.g.”golden”, “feature-*”, “releases/**”)'
@@ -123,21 +114,23 @@ export const BranchSettingsRuleTargetPatternsField: FC<FieldProps> = ({ setValue
             buttonClassName="px-0 w-full"
             id="patterns-type"
             size="md"
+            className="mt-6"
             handleButtonClick={handleAddPattern}
             selectedValue={selectedOption}
             handleOptionChange={setSelectedOption}
             options={[
               {
                 value: PatternsButtonType.INCLUDE,
-                label: t(`views:repos.include`, 'Include')
+                label: t(`views:repos.ruleTarget.include`, 'Include')
               },
               {
                 value: PatternsButtonType.EXCLUDE,
-                label: t(`views:repos.exclude`, 'Exclude')
+                label: t(`views:repos.ruleTarget.exclude`, 'Exclude')
               }
             ]}
           >
-            {t(`views:repos.${selectedOption.toLowerCase()}`, `${selectedOption}`)}
+            {selectedOption === PatternsButtonType.INCLUDE && t(`views:repos.ruleTarget.include`, 'Include')}
+            {selectedOption === PatternsButtonType.EXCLUDE && t(`views:repos.ruleTarget.exclude`, 'Exclude')}
           </ButtonWithOptions>
         </div>
         {!!patterns.length && (
@@ -145,7 +138,7 @@ export const BranchSettingsRuleTargetPatternsField: FC<FieldProps> = ({ setValue
             {patterns.map(pattern => (
               <Button
                 key={pattern.pattern}
-                className="group flex h-6 items-center gap-x-1.5 bg-background-8 px-2.5 text-foreground-8"
+                className="bg-background-8 text-foreground-8 group flex h-6 items-center gap-x-1.5 px-2.5"
                 type="button"
                 variant="custom"
                 onClick={() => handleRemovePattern(pattern.pattern)}
@@ -160,32 +153,31 @@ export const BranchSettingsRuleTargetPatternsField: FC<FieldProps> = ({ setValue
                   />
                   {pattern.pattern}
                 </span>
-                <span className="text-icons-1 transition-colors group-hover:text-foreground-1">
-                  <Icon className="rotate-45" name="plus" size={10} />
-                </span>
+
+                <Icon
+                  className="text-icons-1 group-hover:text-foreground-1 rotate-45 transition-colors"
+                  name="plus"
+                  size={10}
+                />
               </Button>
             ))}
           </div>
         )}
       </ControlGroup>
 
-      <ControlGroup>
-        <Option
-          control={
-            <Checkbox
-              {...register!('default')}
-              checked={watch!('default')}
-              onCheckedChange={() => setValue!('default', !watch!('default'))}
-              id="default-branch"
-            />
-          }
-          id="default-branch"
-          label={t('views:repos.applyRuleDefaultBranch', 'Apply this rule to the default branch')}
-          className="mt-0"
-        />
-
-        {!!errors?.default && <Message theme={MessageTheme.ERROR}>{errors?.default?.message?.toString()}</Message>}
-      </ControlGroup>
+      <Option
+        control={
+          <Checkbox
+            {...register('default')}
+            checked={watch('default')}
+            onCheckedChange={() => setValue('default', !watch('default'))}
+            id="default-branch"
+          />
+        }
+        id="default-branch"
+        label={t('views:repos.applyRuleDefaultBranch', 'Apply this rule to the default branch')}
+        error={errors?.default && errors?.default?.message?.toString()}
+      />
     </Fieldset>
   )
 }
@@ -209,7 +201,7 @@ export const BranchSettingsRuleBypassListField: FC<
     principalsSearchQuery: string
   }
 > = ({ watch, setValue, bypassOptions, t, register, errors, setPrincipalsSearchQuery, principalsSearchQuery }) => {
-  const selectedBypassUsers = watch!('bypass').map(user => ({
+  const selectedBypassUsers = watch('bypass').map(user => ({
     ...user,
     label: user.display_name
   }))
@@ -218,7 +210,7 @@ export const BranchSettingsRuleBypassListField: FC<
     (option: MultiSelectOptionType<Partial<PrincipalType>>) => {
       const selectedIds = selectedBypassUsers.map(it => it.id)
 
-      setValue!(
+      setValue(
         'bypass',
         selectedIds.includes(Number(option.id))
           ? selectedBypassUsers.filter(item => item.id !== option.id)
@@ -246,44 +238,35 @@ export const BranchSettingsRuleBypassListField: FC<
   }, [bypassOptions])
 
   return (
-    <Fieldset className="gap-y-4">
-      <ControlGroup>
-        <Label className="mb-2.5" htmlFor="bypassValue" color="secondary">
-          {t('views:repos.bypassList', 'Bypass list')}
-        </Label>
-
-        <MultiSelect<PrincipalType>
-          selectedItems={selectedBypassUsers}
-          t={t}
-          placeholder={t('views:repos.selectUsers', 'Select users')}
-          handleChange={handleCheckboxChange}
-          options={multiSelectOptions}
-          searchValue={principalsSearchQuery}
-          handleChangeSearchValue={setPrincipalsSearchQuery}
-          customOptionElem={BranchSettingsRuleBypassListOption}
-        />
-      </ControlGroup>
-
-      <ControlGroup>
-        <Option
-          control={
-            <Checkbox
-              {...register!('repo_owners')}
-              checked={watch!('repo_owners')}
-              onCheckedChange={() => setValue!('repo_owners', !watch!('repo_owners'))}
-              id="edit-permissons"
-            />
-          }
-          id="edit-permissons"
-          label={t(
-            'views:repos.editPermissionsCheckboxDescription',
-            'Allow users with edit permission on the repository to bypass'
-          )}
-          className="mt-0"
-        />
+    <Fieldset className="gap-y-4" legend="Bypass list">
+      <MultiSelect<PrincipalType>
+        selectedItems={selectedBypassUsers}
+        t={t}
+        label={t('views:repos.bypassList', 'Bypass list')}
+        placeholder={t('views:repos.selectUsers', 'Select users')}
+        handleChange={handleCheckboxChange}
+        options={multiSelectOptions}
+        searchValue={principalsSearchQuery}
+        handleChangeSearchValue={setPrincipalsSearchQuery}
+        customOptionElem={BranchSettingsRuleBypassListOption}
+      />
 
-        {errors!.repo_owners && <Message theme={MessageTheme.ERROR}>{errors!.repo_owners.message?.toString()}</Message>}
-      </ControlGroup>
+      <Option
+        control={
+          <Checkbox
+            {...register('repo_owners')}
+            checked={watch('repo_owners')}
+            onCheckedChange={() => setValue('repo_owners', !watch('repo_owners'))}
+            id="edit-permissions"
+          />
+        }
+        id="edit-permissions"
+        label={t(
+          'views:repos.editPermissionsCheckboxDescription',
+          'Allow users with edit permission on the repository to bypass'
+        )}
+        error={errors?.repo_owners && errors?.repo_owners?.message?.toString()}
+      />
     </Fieldset>
   )
 }
@@ -308,75 +291,73 @@ export const BranchSettingsRuleListField: FC<{
   const branchRules = getBranchRules(t)
 
   return (
-    <ControlGroup className="max-w-[476px]">
-      <Label className="mb-6" color="secondary">
+    <Fieldset className="grid max-w-[476px] gap-5">
+      <legend className="mb-6" color="secondary">
         {t('views:repos.rulesTitle', 'Rules: select all that apply')}
-      </Label>
-      <Fieldset className="gap-y-5">
-        {branchRules.map((rule, index) => {
-          const isChecked = rules[index]?.checked ?? false
+      </legend>
 
-          return (
-            <Fieldset key={rule.id} className="gap-y-4">
-              <Option
-                control={
-                  <Checkbox
-                    id={rule.id}
-                    checked={isChecked}
-                    onCheckedChange={checked => handleCheckboxChange(rule.id, checked === true)}
-                  />
-                }
-                id={rule.id}
-                label={rule.label}
-                description={rule.description}
-              />
-
-              {/* Conditionally render the submenu if this rule has a submenu and is checked */}
-              {!!rule?.submenuOptions && !!rule?.submenuOptions.length && isChecked && (
-                <Fieldset className="gap-y-4 pl-[26px]">
-                  {rule.submenuOptions.map(subOption => (
-                    <Option
-                      key={subOption.id}
-                      control={
-                        <Checkbox
-                          id={subOption.id}
-                          checked={rules[index].submenu?.includes(subOption.id as MergeStrategy)}
-                          onCheckedChange={checked => handleSubmenuChange(rule.id, subOption.id, checked === true)}
-                        />
-                      }
-                      id={subOption.id}
-                      label={subOption.label}
-                    />
-                  ))}
-                </Fieldset>
-              )}
+      {branchRules.map((rule, index) => {
+        const isChecked = rules[index]?.checked ?? false
 
-              {!!rule?.hasSelect && isChecked && (
-                <MultiSelect
-                  className="pl-[26px]"
-                  selectedItems={rules[index].selectOptions.map(option => ({ id: option, label: option }))}
-                  t={t}
-                  placeholder={t('views:repos.selectStatusesPlaceholder', 'Select status checks')}
-                  handleChange={val => handleSelectChangeForRule(rule.id, val.label)}
-                  options={recentStatusChecks?.map(check => ({ id: check, label: check })) ?? []}
+        return (
+          <div key={rule.id} className="grid gap-y-4">
+            <Option
+              control={
+                <Checkbox
+                  id={rule.id}
+                  checked={isChecked}
+                  onCheckedChange={checked => handleCheckboxChange(rule.id, checked === true)}
                 />
-              )}
+              }
+              id={rule.id}
+              label={rule.label}
+              description={rule.description}
+            />
 
-              {!!rule?.hasInput && isChecked && (
-                <div className="pl-[26px]">
-                  <Input
-                    id="name"
-                    size="md"
-                    placeholder={t('views:repos.enterMinReviewers', 'Enter minimum number of reviewers')}
-                    value={rules[index].input || ''}
-                    onChange={e => handleInputChange(rule.id, e.target.value)}
+            {/* Conditionally render the submenu if this rule has a submenu and is checked */}
+            {!!rule?.submenuOptions && !!rule?.submenuOptions.length && isChecked && (
+              <div className="grid gap-y-4 pl-[26px]">
+                {rule.submenuOptions.map(subOption => (
+                  <Option
+                    key={subOption.id}
+                    control={
+                      <Checkbox
+                        id={subOption.id}
+                        checked={rules[index].submenu?.includes(subOption.id as MergeStrategy)}
+                        onCheckedChange={checked => handleSubmenuChange(rule.id, subOption.id, checked === true)}
+                      />
+                    }
+                    id={subOption.id}
+                    label={subOption.label}
                   />
-                </div>
-              )}
-            </Fieldset>
-          )
-        })}
-      </Fieldset>
-    </ControlGroup>
+                ))}
+              </div>
+            )}
+
+            {!!rule?.hasSelect && isChecked && (
+              <MultiSelect
+                className="pl-[26px]"
+                selectedItems={rules[index].selectOptions.map(option => ({ id: option, label: option }))}
+                t={t}
+                placeholder={t('views:repos.selectStatusesPlaceholder', 'Select status checks')}
+                handleChange={val => handleSelectChangeForRule(rule.id, val.label)}
+                options={recentStatusChecks?.map(check => ({ id: check, label: check })) ?? []}
+              />
+            )}
+
+            {!!rule?.hasInput && isChecked && (
+              <Input
+                id="name"
+                size="md"
+                className="ml-[26px]"
+                placeholder={t('views:repos.enterMinReviewers', 'Enter minimum number of reviewers')}
+                value={rules[index].input || ''}
+                onChange={e => handleInputChange(rule.id, e.target.value)}
+              />
+            )}
+          </div>
+        )
+      })}
+    </Fieldset>
   )
 }
diff --git a/packages/ui/src/views/repo/repo-branch-rules/repo-branch-settings-rules-page.tsx b/packages/ui/src/views/repo/repo-branch-rules/repo-branch-settings-rules-page.tsx
index f3fc20d6c2..d810953cc7 100644
--- a/packages/ui/src/views/repo/repo-branch-rules/repo-branch-settings-rules-page.tsx
+++ b/packages/ui/src/views/repo/repo-branch-rules/repo-branch-settings-rules-page.tsx
@@ -1,10 +1,17 @@
 import { FC, useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 
-import { Button, ButtonGroup, ControlGroup, Fieldset, FormWrapper } from '@/components'
+import { Alert, Button, ButtonGroup, FormWrapper } from '@/components'
 import { useRouterContext } from '@/context'
-import { IProjectRulesStore, IRepoStore, repoBranchSettingsFormSchema, SandboxLayout, TranslationStore } from '@/views'
+import {
+  IProjectRulesStore,
+  IRepoStore,
+  makeRepoBranchSettingsFormSchema,
+  SandboxLayout,
+  TranslationStore
+} from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { cn } from '@utils/cn'
 
 import {
   BranchSettingsRuleBypassListField,
@@ -14,7 +21,7 @@ import {
   BranchSettingsRuleTargetPatternsField,
   BranchSettingsRuleToggleField
 } from './components/repo-branch-rules-fields'
-import { IBranchRulesStore, RepoBranchSettingsFormFields } from './types'
+import { FieldProps, IBranchRulesStore, RepoBranchSettingsFormFields } from './types'
 
 type BranchSettingsErrors = {
   principals: string | null
@@ -70,7 +77,7 @@ export const RepoBranchSettingsRulesPage: FC<RepoBranchSettingsRulesPageProps> =
     clearErrors,
     formState: { errors }
   } = useForm<RepoBranchSettingsFormFields>({
-    resolver: zodResolver(repoBranchSettingsFormSchema),
+    resolver: zodResolver(makeRepoBranchSettingsFormSchema(t)),
     mode: 'onChange',
     defaultValues: {
       identifier: '',
@@ -119,38 +126,29 @@ export const RepoBranchSettingsRulesPage: FC<RepoBranchSettingsRulesPageProps> =
     }
   }, [isSubmitSuccess])
 
-  const apiErrorsValue =
-    apiErrors?.principals || apiErrors?.statusChecks || apiErrors?.addRule || apiErrors?.updateRule || null
+  const apiErrorsValue = apiErrors?.principals ?? apiErrors?.statusChecks ?? apiErrors?.addRule ?? apiErrors?.updateRule
+
+  const fieldProps: FieldProps = { register, errors, setValue, watch, t }
 
   return (
-    <SandboxLayout.Content className={`max-w-[570px] px-0 ${projectScope ? 'mx-auto' : ''}`}>
-      <h1 className="mb-10 text-2xl font-medium text-foreground-1">
+    <SandboxLayout.Content className={cn(`max-w-[570px] px-0`, { 'mx-auto': !projectScope })}>
+      <h1 className="text-foreground-1 mb-10 text-2xl font-medium">
         {presetRuleData ? t('views:repos.updateRule', 'Update rule') : t('views:repos.CreateRule', 'Create a rule')}
       </h1>
 
       <FormWrapper onSubmit={handleSubmit(onSubmit)}>
-        <BranchSettingsRuleToggleField register={register} setValue={setValue} watch={watch} t={t} />
+        <BranchSettingsRuleToggleField {...fieldProps} />
 
-        <BranchSettingsRuleNameField register={register} errors={errors} disabled={!!presetRuleData} t={t} />
+        <BranchSettingsRuleNameField {...fieldProps} disabled={!!presetRuleData} />
 
-        <BranchSettingsRuleDescriptionField register={register} errors={errors} t={t} />
+        <BranchSettingsRuleDescriptionField {...fieldProps} />
 
-        <div className="flex flex-col gap-y-11">
-          <BranchSettingsRuleTargetPatternsField
-            watch={watch}
-            setValue={setValue}
-            register={register}
-            errors={errors}
-            t={t}
-          />
+        <div className="grid gap-y-11">
+          <BranchSettingsRuleTargetPatternsField {...fieldProps} />
 
           <BranchSettingsRuleBypassListField
-            register={register}
-            errors={errors}
-            setValue={setValue}
-            watch={watch}
+            {...fieldProps}
             bypassOptions={principals}
-            t={t}
             setPrincipalsSearchQuery={setPrincipalsSearchQuery}
             principalsSearchQuery={principalsSearchQuery}
           />
@@ -165,26 +163,28 @@ export const RepoBranchSettingsRulesPage: FC<RepoBranchSettingsRulesPageProps> =
             t={t}
           />
         </div>
-        <Fieldset className="mt-5">
-          <ControlGroup>
-            <ButtonGroup>
-              <Button type="submit" disabled={isLoading}>
-                {!isLoading
-                  ? presetRuleData
-                    ? t('views:repos.updateRule', 'Update rule')
-                    : t('views:repos.createRuleButton', 'Create rule')
-                  : presetRuleData
-                    ? t('views:repos.updatingRule', 'Updating rule...')
-                    : t('views:repos.creatingRuleButton', 'Creating rule...')}
-              </Button>
-              <Button type="button" variant="outline">
-                <NavLink to="..">{t('views:repos.cancel', 'Cancel')}</NavLink>
-              </Button>
-            </ButtonGroup>
-          </ControlGroup>
-        </Fieldset>
-
-        {!!apiErrorsValue && <span className="text-xs text-destructive">{apiErrorsValue}</span>}
+
+        {!!apiErrorsValue && (
+          <Alert.Container variant="destructive">
+            <Alert.Title>{apiErrorsValue}</Alert.Title>
+          </Alert.Container>
+        )}
+
+        <ButtonGroup className="mt-2">
+          <Button type="submit" disabled={isLoading}>
+            {!isLoading
+              ? presetRuleData
+                ? t('views:repos.updateRule', 'Update rule')
+                : t('views:repos.createRuleButton', 'Create rule')
+              : presetRuleData
+                ? t('views:repos.updatingRule', 'Updating rule...')
+                : t('views:repos.creatingRuleButton', 'Creating rule...')}
+          </Button>
+
+          <Button type="button" variant="outline" asChild>
+            <NavLink to="..">{t('views:repos.cancel', 'Cancel')}</NavLink>
+          </Button>
+        </ButtonGroup>
       </FormWrapper>
     </SandboxLayout.Content>
   )
diff --git a/packages/ui/src/views/repo/repo-branch-rules/types.ts b/packages/ui/src/views/repo/repo-branch-rules/types.ts
index aa6b61f199..6cef56301c 100644
--- a/packages/ui/src/views/repo/repo-branch-rules/types.ts
+++ b/packages/ui/src/views/repo/repo-branch-rules/types.ts
@@ -1,9 +1,11 @@
 import { FieldErrors, UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form'
 
+import { TranslationStore } from '@/views'
+import { makeValidationUtils } from '@utils/validation'
 import { TFunction } from 'i18next'
 import { z } from 'zod'
 
-export type RepoBranchSettingsFormFields = z.infer<typeof repoBranchSettingsFormSchema>
+export type RepoBranchSettingsFormFields = z.infer<ReturnType<typeof makeRepoBranchSettingsFormSchema>>
 
 export type Rule = {
   id: string
@@ -17,7 +19,7 @@ export enum BranchRulesActionType {
   TOGGLE_RULE = 'TOGGLE_RULE',
   TOGGLE_SUBMENU = 'TOGGLE_SUBMENU',
   SET_SELECT_OPTION = 'SET_SELECT_OPTION',
-  SET_INITIAL_RULES = 'SET_INITAL_RULES',
+  SET_INITIAL_RULES = 'SET_INITIAL_RULES',
   SET_INPUT_VALUE = 'SET_INPUT_VALUE'
 }
 
@@ -31,10 +33,10 @@ export type BranchRulesAction =
 export type Dispatch = (action: BranchRulesAction) => void
 
 export interface FieldProps {
-  register?: UseFormRegister<RepoBranchSettingsFormFields>
-  errors?: FieldErrors<RepoBranchSettingsFormFields>
-  watch?: UseFormWatch<RepoBranchSettingsFormFields>
-  setValue?: UseFormSetValue<RepoBranchSettingsFormFields>
+  register: UseFormRegister<RepoBranchSettingsFormFields>
+  errors: FieldErrors<RepoBranchSettingsFormFields>
+  watch: UseFormWatch<RepoBranchSettingsFormFields>
+  setValue: UseFormSetValue<RepoBranchSettingsFormFields>
   t: TFunction
 }
 
@@ -43,7 +45,7 @@ export enum BranchRuleId {
   REQUIRE_NO_CHANGE_REQUEST = 'require_no_change_request',
   COMMENTS = 'comments',
   STATUS_CHECKS = 'status_checks',
-  MERGE = 'merge',
+  MERGE = 'merge_strategies',
   DELETE_BRANCH = 'delete_branch',
   BLOCK_BRANCH_CREATION = 'create_forbidden',
   BLOCK_BRANCH_DELETION = 'delete_forbidden',
@@ -65,32 +67,34 @@ export type IBranchRulesStore = {
 
 // Constants
 
-export const repoBranchSettingsFormSchema = z.object({
-  identifier: z.string().min(1, 'Name is required'),
-  description: z.string(),
-  pattern: z.string(),
-  patterns: z.array(
-    z.object({
-      pattern: z.string(),
-      option: z.enum([PatternsButtonType.INCLUDE, PatternsButtonType.EXCLUDE])
-    })
-  ),
-  state: z.boolean(),
-  bypass: z.array(
-    z.object({
-      id: z.number(),
-      display_name: z.string()
-    })
-  ),
-  default: z.boolean().optional(),
-  repo_owners: z.boolean().optional(),
-  rules: z.array(
-    z.object({
-      id: z.string(),
-      checked: z.boolean(),
-      submenu: z.array(z.enum(['merge', 'rebase', 'squash'])),
-      selectOptions: z.array(z.string()),
-      input: z.string()
-    })
-  )
-})
+export const makeRepoBranchSettingsFormSchema = (t: TranslationStore['t']) => {
+  const { required, maxLength, specialSymbols, noSpaces } = makeValidationUtils(t)
+
+  return z.object({
+    identifier: z
+      .string()
+      .trim()
+      .nonempty(required(t('views:repos.name')))
+      .max(...maxLength(100, t('views:repos.name')))
+      .regex(...specialSymbols(t('views:repos.name')))
+      .refine(...noSpaces(t('views:repos.name'))),
+    description: z.string(),
+    pattern: z.string(),
+    patterns: z.array(
+      z.object({ pattern: z.string(), option: z.enum([PatternsButtonType.INCLUDE, PatternsButtonType.EXCLUDE]) })
+    ),
+    state: z.boolean(),
+    bypass: z.array(z.object({ id: z.number(), display_name: z.string() })),
+    default: z.boolean().optional(),
+    repo_owners: z.boolean().optional(),
+    rules: z.array(
+      z.object({
+        id: z.string(),
+        checked: z.boolean(),
+        submenu: z.array(z.enum(['merge', 'rebase', 'squash'])),
+        selectOptions: z.array(z.string()),
+        input: z.string()
+      })
+    )
+  })
+}
diff --git a/packages/ui/src/views/repo/repo-branch/components/create-branch-dialog.tsx b/packages/ui/src/views/repo/repo-branch/components/create-branch-dialog.tsx
index 9f69db6e37..a60879bc68 100644
--- a/packages/ui/src/views/repo/repo-branch/components/create-branch-dialog.tsx
+++ b/packages/ui/src/views/repo/repo-branch/components/create-branch-dialog.tsx
@@ -1,17 +1,28 @@
 import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { Alert, Button, ControlGroup, Dialog, Fieldset, FormWrapper, Input } from '@/components'
+import { Alert, Button, Dialog, Fieldset, FormWrapper, Input, Message, MessageTheme } from '@/components'
+import { BranchSelector, BranchSelectorListItem, TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { BranchSelector } from '@views/repo/components'
+import { makeValidationUtils } from '@utils/validation'
 import { z } from 'zod'
 
 import { CreateBranchDialogProps, CreateBranchFormFields } from '../types'
 
-export const createBranchFormSchema = z.object({
-  name: z.string().min(1, { message: 'Branch name is required' }),
-  target: z.string().min(1, { message: 'Base branch is required' })
-})
+export const makeCreateBranchFormSchema = (t: TranslationStore['t']) => {
+  const { required, maxLength, specialSymbols, noSpaces } = makeValidationUtils(t)
+
+  return z.object({
+    name: z
+      .string()
+      .trim()
+      .nonempty(required(t('views:repos.createBranchDialog.branchNameLabel')))
+      .max(...maxLength(256, t('views:repos.createBranchDialog.branchNameLabel')))
+      .regex(...specialSymbols(t('views:repos.createBranchDialog.branchNameLabel')))
+      .refine(...noSpaces(t('views:repos.createBranchDialog.branchNameLabel'))),
+    target: z.string().nonempty(required(t('views:repos.createBranchDialog.validation.target', 'Target branch')))
+  })
+}
 
 export function CreateBranchDialog({
   open,
@@ -24,7 +35,7 @@ export function CreateBranchDialog({
   handleChangeSearchValue
 }: CreateBranchDialogProps) {
   const { t } = useTranslationStore()
-  const { setSelectedBranchTag, defaultBranch } = useRepoBranchesStore()
+  const { setSelectedBranchTag, defaultBranch = '' } = useRepoBranchesStore()
 
   const {
     register,
@@ -34,49 +45,42 @@ export function CreateBranchDialog({
     clearErrors,
     formState: { errors, isValid, isSubmitSuccessful }
   } = useForm<CreateBranchFormFields>({
-    resolver: zodResolver(createBranchFormSchema),
+    resolver: zodResolver(makeCreateBranchFormSchema(t)),
     mode: 'onChange',
     defaultValues: {
       name: '',
-      target: ''
+      target: defaultBranch
     }
   })
 
-  useEffect(() => {
-    if (isSubmitSuccessful) {
-      clearErrors()
-      reset()
-      setValue('name', '', { shouldValidate: false })
-      setValue('target', defaultBranch || '', { shouldValidate: false })
-      setSelectedBranchTag({ name: defaultBranch || '', sha: '' })
-      onClose()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSubmitSuccessful, open, onClose])
-
   const handleClose = () => {
     clearErrors()
-    setValue('name', '', { shouldValidate: false })
-    setValue('target', defaultBranch || '', { shouldValidate: false })
-    setSelectedBranchTag({ name: defaultBranch || '', sha: '' })
+    reset()
+    setSelectedBranchTag({ name: defaultBranch, sha: '' })
     handleChangeSearchValue('')
     onClose()
   }
 
-  const handleSelectChange = (fieldName: keyof CreateBranchFormFields, value: string) => {
-    setValue(fieldName, value, { shouldValidate: true })
+  useEffect(() => {
+    if (isSubmitSuccessful) {
+      handleClose()
+    }
+  }, [isSubmitSuccessful])
+
+  const handleSelectTargetBranch = (value: BranchSelectorListItem) => {
+    setValue('target', value.name, { shouldValidate: true })
+    setSelectedBranchTag(value)
   }
 
   useEffect(() => {
-    if (defaultBranch) {
-      setValue('target', defaultBranch, { shouldValidate: true })
-      setSelectedBranchTag({ name: defaultBranch, sha: '' })
+    if (open && defaultBranch) {
+      handleSelectTargetBranch({ name: defaultBranch, sha: '' })
     }
-  }, [defaultBranch, setValue])
+  }, [open, defaultBranch])
 
   return (
     <Dialog.Root open={open} onOpenChange={handleClose}>
-      <Dialog.Content className="max-w-[460px] border-border bg-background-1" aria-describedby={undefined}>
+      <Dialog.Content className="border-border bg-background-1 max-w-[460px]" aria-describedby={undefined}>
         <Dialog.Header>
           <Dialog.Title>{t('views:repos.createBranchTitle', 'Create a branch')}</Dialog.Title>
         </Dialog.Header>
@@ -84,42 +88,41 @@ export function CreateBranchDialog({
           <Fieldset>
             <Input
               id="name"
-              label="Branch name"
+              label={t('views:repos.createBranchDialog.branchNameLabel', 'Branch name')}
               {...register('name')}
               maxLength={50}
-              placeholder={t('views:forms.enterBranchName', 'Enter branch name')}
+              placeholder={t('views:repos.createBranchDialog.branchNamePlaceholder', 'Enter branch name')}
               size="md"
-              error={
-                errors.name?.message ? t('views:forms.createBranchError', errors.name?.message?.toString()) : undefined
-              }
+              error={errors.name?.message?.toString()}
             />
-          </Fieldset>
 
-          <Fieldset>
-            <ControlGroup>
+            <div className="grid">
               {/* TODO: Currently the search within BranchSelector is not working, we need to review the current passed states for it to work */}
               <BranchSelector
                 useRepoBranchesStore={useRepoBranchesStore}
                 useTranslationStore={useTranslationStore}
-                onSelectBranch={value => {
-                  handleSelectChange('target', value.name)
-                  setSelectedBranchTag(value)
-                }}
+                onSelectBranch={handleSelectTargetBranch}
                 setSearchQuery={handleChangeSearchValue}
                 buttonSize="md"
                 isBranchOnly
                 dynamicWidth
               />
-            </ControlGroup>
+
+              {!!errors.target && (
+                <Message className="mt-0.5" theme={MessageTheme.ERROR}>
+                  {errors.target.message}
+                </Message>
+              )}
+            </div>
           </Fieldset>
 
-          {error ? (
+          {error && (
             <Alert.Container variant="destructive">
               <Alert.Title>
                 {t('views:repos.error', 'Error:')} {error}
               </Alert.Title>
             </Alert.Container>
-          ) : null}
+          )}
 
           <Dialog.Footer className="-mx-5 -mb-5">
             <Button
diff --git a/packages/ui/src/views/repo/repo-branch/types.ts b/packages/ui/src/views/repo/repo-branch/types.ts
index 482d03e7b1..0f5de9e56b 100644
--- a/packages/ui/src/views/repo/repo-branch/types.ts
+++ b/packages/ui/src/views/repo/repo-branch/types.ts
@@ -5,9 +5,9 @@ import { z } from 'zod'
 
 import { PullRequestType } from '../pull-request/pull-request.types'
 import { IBranchSelectorStore } from '../repo.types'
-import { createBranchFormSchema } from './components/create-branch-dialog'
+import { makeCreateBranchFormSchema } from './components/create-branch-dialog'
 
-export type CreateBranchFormFields = z.infer<typeof createBranchFormSchema>
+export type CreateBranchFormFields = z.infer<ReturnType<typeof makeCreateBranchFormSchema>>
 export interface BranchProps {
   id: number
   name: string
diff --git a/packages/ui/src/views/repo/repo-create/index.tsx b/packages/ui/src/views/repo/repo-create/index.tsx
deleted file mode 100644
index 5949151173..0000000000
--- a/packages/ui/src/views/repo/repo-create/index.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-import { useEffect } from 'react'
-import { useForm, type SubmitHandler } from 'react-hook-form'
-
-import {
-  Alert,
-  Button,
-  ButtonGroup,
-  Checkbox,
-  ControlGroup,
-  Fieldset,
-  FormWrapper,
-  Input,
-  Message,
-  MessageTheme,
-  Option,
-  RadioButton,
-  RadioGroup,
-  Select,
-  Spacer,
-  StyledLink,
-  Text,
-  Textarea
-} from '@/components'
-import { SandboxLayout, TranslationStore } from '@/views'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { z } from 'zod'
-
-// Define the form schema with optional fields for gitignore and license
-const formSchema = z.object({
-  name: z.string().min(1, { message: 'Please provide a name' }),
-  description: z.string(),
-  gitignore: z.string().optional(),
-  license: z.string().optional(),
-  access: z.enum(['1', '2'], { errorMap: () => ({ message: 'Please select who has access' }) }),
-  readme: z.boolean()
-})
-
-export type FormFields = z.infer<typeof formSchema> // Automatically generate a type from the schema
-
-interface RepoCreatePageProps {
-  onFormSubmit: (data: FormFields) => void
-  onFormCancel: () => void
-  isLoading: boolean
-  isSuccess: boolean
-  gitIgnoreOptions?: string[]
-  licenseOptions?: { value?: string; label?: string }[]
-  useTranslationStore: () => TranslationStore
-  apiError?: string
-}
-
-export function RepoCreatePage({
-  onFormSubmit,
-  onFormCancel,
-  isLoading,
-  isSuccess,
-  gitIgnoreOptions,
-  licenseOptions,
-  useTranslationStore,
-  apiError
-}: RepoCreatePageProps) {
-  const { t } = useTranslationStore()
-
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    watch,
-    reset,
-    formState: { errors }
-  } = useForm<FormFields>({
-    resolver: zodResolver(formSchema),
-    mode: 'onChange',
-    defaultValues: {
-      name: '',
-      description: '',
-      gitignore: '',
-      license: '',
-      access: '2',
-      readme: false
-    }
-  })
-
-  const accessValue = watch('access')
-  const gitignoreValue = watch('gitignore')
-  const licenseValue = watch('license')
-  const readmeValue = watch('readme')
-
-  const handleSelectChange = (fieldName: keyof FormFields, value: string) => {
-    setValue(fieldName, value, { shouldValidate: true })
-  }
-
-  const handleAccessChange = (value: '1' | '2') => {
-    setValue('access', value, { shouldValidate: true })
-  }
-
-  const handleReadmeChange = (value: boolean) => {
-    setValue('readme', value, { shouldValidate: true })
-  }
-
-  useEffect(() => {
-    if (isSuccess) {
-      reset()
-    }
-  }, [isSuccess, reset])
-
-  const onSubmit: SubmitHandler<FormFields> = data => {
-    onFormSubmit(data)
-  }
-
-  const handleCancel = () => {
-    onFormCancel()
-  }
-
-  return (
-    <SandboxLayout.Main>
-      <SandboxLayout.Content paddingClassName="w-[570px] mx-auto pt-11 pb-20">
-        <Spacer size={5} />
-        <Text className="tracking-tight" size={5} weight="medium">
-          {t('views:repos.createNewRepo', 'Create a new repository')}
-        </Text>
-        <Spacer size={2.5} />
-        <Text className="max-w-[476px] text-foreground-2" size={2} as="p">
-          {t(
-            'views:repos.repoContains',
-            'A repository contains all project files, including the revision history. Already have a project repository elsewhere?'
-          )}{' '}
-          <StyledLink to="../import" relative="path">
-            {t('views:repos.importRepo', 'Import a repository')}.
-          </StyledLink>
-        </Text>
-        <Spacer size={10} />
-        <FormWrapper className="gap-y-7" onSubmit={handleSubmit(onSubmit)}>
-          {/* NAME */}
-          <Fieldset>
-            <Input
-              id="name"
-              label="Name"
-              {...register('name')}
-              placeholder="Enter repository name"
-              size="md"
-              error={errors.name?.message?.toString()}
-              autoFocus
-            />
-            {/* DESCRIPTION */}
-            <Textarea
-              id="description"
-              {...register('description')}
-              placeholder="Enter a description of this repository"
-              label="Description"
-              error={errors.description?.message?.toString()}
-              optional
-            />
-          </Fieldset>
-
-          {/* GITIGNORE */}
-          <Fieldset>
-            <ControlGroup>
-              <Select.Root
-                name="gitignore"
-                value={gitignoreValue}
-                onValueChange={value => handleSelectChange('gitignore', value)}
-                placeholder="Select"
-                label="Add a .gitignore"
-                error={errors.gitignore?.message?.toString()}
-                caption="Choose which files not to track from a list of templates."
-              >
-                <Select.Content>
-                  {!!gitIgnoreOptions &&
-                    gitIgnoreOptions.map(option => (
-                      <Select.Item key={option} value={option}>
-                        {option}
-                      </Select.Item>
-                    ))}
-                </Select.Content>
-              </Select.Root>
-            </ControlGroup>
-
-            {/* LICENSE */}
-            <ControlGroup>
-              <Select.Root
-                name="license"
-                value={licenseValue}
-                onValueChange={value => handleSelectChange('license', value)}
-                placeholder="Select"
-                label="Choose a license"
-                error={errors.license?.message?.toString()}
-                caption="A license tells others what they can and can't do with your code."
-              >
-                <Select.Content>
-                  {licenseOptions &&
-                    licenseOptions?.map(option => (
-                      <Select.Item key={option.value} value={option.value ?? ''}>
-                        {option.label}
-                      </Select.Item>
-                    ))}
-                </Select.Content>
-              </Select.Root>
-            </ControlGroup>
-          </Fieldset>
-
-          {/* ACCESS */}
-          <Fieldset className="mt-4">
-            <ControlGroup>
-              <Text className="leading-none text-foreground-2" size={2}>
-                Who has access
-              </Text>
-              <RadioGroup className="mt-6" value={accessValue} onValueChange={handleAccessChange} id="access">
-                <Option
-                  control={<RadioButton className="mt-px" value="1" id="access-public" />}
-                  id="access-public"
-                  label="Public"
-                  ariaSelected={accessValue === '1'}
-                  description="Anyone with access to the Gitness environment can clone this repo."
-                />
-                <Option
-                  control={<RadioButton className="mt-px" value="2" id="access-private" />}
-                  id="access-private"
-                  label="Private"
-                  ariaSelected={accessValue === '2'}
-                  description="You choose who can see and commit to this repository."
-                />
-              </RadioGroup>
-              {errors.access && (
-                <Message className="mt-0.5" theme={MessageTheme.ERROR}>
-                  {errors.access.message?.toString()}
-                </Message>
-              )}
-            </ControlGroup>
-          </Fieldset>
-
-          {/* README */}
-          <Fieldset className="mt-4">
-            <ControlGroup>
-              <Text className="leading-none text-foreground-2" size={2}>
-                Initialize this repository with
-              </Text>
-              <Option
-                className="mt-6"
-                control={<Checkbox id="readme" checked={readmeValue} onCheckedChange={handleReadmeChange} />}
-                id="readme"
-                label="Add a README file"
-                ariaSelected={accessValue === '1'}
-                description={
-                  <>
-                    This is where you can write a long description for your project.{' '}
-                    {/* TODO: when theres a README docs , link to it
-                     <StyledLink className="inline-block" to="/">
-                      Learn more about README
-                    </StyledLink> */}
-                  </>
-                }
-              />
-
-              {errors.readme && <Message theme={MessageTheme.ERROR}>{errors.readme.message?.toString()}</Message>}
-            </ControlGroup>
-          </Fieldset>
-
-          {apiError && (
-            <Alert.Container variant="destructive">
-              <Alert.Description>{apiError}</Alert.Description>
-            </Alert.Container>
-          )}
-
-          {/* SUBMIT BUTTONS */}
-          <Fieldset>
-            <ControlGroup>
-              <ButtonGroup>
-                {/* TODO: Improve loading state to avoid flickering */}
-                <Button type="submit" disabled={isLoading}>
-                  {!isLoading ? 'Create repository' : 'Creating repository...'}
-                </Button>
-                <Button type="button" variant="outline" onClick={handleCancel}>
-                  Cancel
-                </Button>
-              </ButtonGroup>
-            </ControlGroup>
-          </Fieldset>
-        </FormWrapper>
-      </SandboxLayout.Content>
-    </SandboxLayout.Main>
-  )
-}
diff --git a/packages/ui/src/views/repo/repo-create/repo-create.tsx b/packages/ui/src/views/repo/repo-create/repo-create.tsx
new file mode 100644
index 0000000000..c1e2ac9fb7
--- /dev/null
+++ b/packages/ui/src/views/repo/repo-create/repo-create.tsx
@@ -0,0 +1,290 @@
+import { useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+
+import {
+  Alert,
+  Button,
+  ButtonGroup,
+  Checkbox,
+  ControlGroup,
+  Fieldset,
+  FormWrapper,
+  Input,
+  Label,
+  Message,
+  MessageTheme,
+  Option,
+  RadioButton,
+  RadioGroup,
+  Select,
+  StyledLink,
+  Textarea
+} from '@/components'
+import { SandboxLayout, TranslationStore } from '@/views'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { makeValidationUtils } from '@utils/validation'
+import { z } from 'zod'
+
+// Define the form schema with optional fields for gitignore and license
+const makeRepoCreateFormSchema = (t: TranslationStore['t']) => {
+  const { required, maxLength, specialSymbols, noSpaces } = makeValidationUtils(t)
+
+  return z.object({
+    name: z
+      .string()
+      .trim()
+      .nonempty(required(t('views:repos.repoCreate.nameLabel')))
+      .max(...maxLength(100, t('views:repos.repoCreate.nameLabel')))
+      .regex(...specialSymbols(t('views:repos.repoCreate.nameLabel')))
+      .refine(...noSpaces(t('views:repos.repoCreate.nameLabel'))),
+    description: z
+      .string()
+      .trim()
+      .max(...maxLength(1024, t('views:repos.repoCreate.descriptionLabel'))),
+    gitignore: z.string().optional(),
+    license: z.string().optional(),
+    access: z.enum(['1', '2'], {
+      errorMap: () => ({ message: t('views:repos.repoCreate.validation.access', 'Please select who has access') })
+    }),
+    readme: z.boolean()
+  })
+}
+
+export type RepoCreateFormFields = z.infer<ReturnType<typeof makeRepoCreateFormSchema>>
+
+interface RepoCreatePageProps {
+  onFormSubmit: (data: RepoCreateFormFields) => void
+  onFormCancel: () => void
+  isLoading: boolean
+  isSuccess: boolean
+  gitIgnoreOptions?: string[]
+  licenseOptions?: { value?: string; label?: string }[]
+  useTranslationStore: () => TranslationStore
+  apiError?: string
+}
+
+export function RepoCreatePage({
+  onFormSubmit,
+  onFormCancel,
+  isLoading,
+  isSuccess,
+  gitIgnoreOptions,
+  licenseOptions,
+  useTranslationStore,
+  apiError
+}: RepoCreatePageProps) {
+  const { t } = useTranslationStore()
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    reset,
+    formState: { errors }
+  } = useForm<RepoCreateFormFields>({
+    resolver: zodResolver(makeRepoCreateFormSchema(t)),
+    mode: 'onChange',
+    defaultValues: {
+      name: '',
+      description: '',
+      gitignore: '',
+      license: '',
+      access: '2',
+      readme: false
+    }
+  })
+
+  const accessValue = watch('access')
+  const gitignoreValue = watch('gitignore')
+  const licenseValue = watch('license')
+  const readmeValue = watch('readme')
+
+  const handleSelectChange = (fieldName: keyof RepoCreateFormFields, value: string) => {
+    setValue(fieldName, value, { shouldValidate: true })
+  }
+
+  const handleAccessChange = (value: '1' | '2') => {
+    setValue('access', value, { shouldValidate: true })
+  }
+
+  const handleReadmeChange = (value: boolean) => {
+    setValue('readme', value, { shouldValidate: true })
+  }
+
+  useEffect(() => {
+    if (isSuccess) {
+      reset()
+    }
+  }, [isSuccess, reset])
+
+  return (
+    <SandboxLayout.Main>
+      <SandboxLayout.Content paddingClassName="w-[570px] mx-auto pt-11 pb-20">
+        <h1 className="text-24 text-foreground-1 mb-2.5 font-medium">
+          {t('views:repos.repoCreate.title', 'Create a new repository')}
+        </h1>
+
+        <p className="text-foreground-2 mb-10 max-w-[476px] text-sm">
+          {t(
+            'views:repos.repoCreate.description',
+            'A repository contains all project files, including the revision history. Already have a project repository elsewhere?'
+          )}{' '}
+          <StyledLink to="../import" relative="path">
+            {t('views:repos.repoCreate.importRepo', 'Import a repository')}.
+          </StyledLink>
+        </p>
+
+        <FormWrapper className="gap-y-7" onSubmit={handleSubmit(onFormSubmit)}>
+          <Fieldset legend="Repository details">
+            <Input
+              id="name"
+              label={t('views:repos.repoCreate.nameLabel', 'Name')}
+              {...register('name')}
+              placeholder={t('views:repos.repoCreate.namePlaceholder', 'Enter repository name')}
+              size="md"
+              error={errors.name?.message?.toString()}
+              autoFocus
+            />
+            <Textarea
+              id="description"
+              {...register('description')}
+              placeholder={t('views:repos.repoCreate.descriptionPlaceholder', 'Enter a description of this repository')}
+              label={t('views:repos.repoCreate.descriptionLabel', 'Description')}
+              error={errors.description?.message?.toString()}
+              optional
+            />
+          </Fieldset>
+
+          <Fieldset legend="Optional settings">
+            <ControlGroup>
+              <Select.Root
+                name="gitignore"
+                value={gitignoreValue}
+                onValueChange={value => handleSelectChange('gitignore', value)}
+                placeholder={t('views:repos.repoCreate.gitignorePlaceholder', 'Select')}
+                label={t('views:repos.repoCreate.gitignoreLabel', 'Add .gitignore')}
+                error={errors.gitignore?.message?.toString()}
+                caption={t(
+                  'views:repos.repoCreate.gitignoreCaption',
+                  'Choose which files not to track from a list of templates.'
+                )}
+              >
+                <Select.Content>
+                  {gitIgnoreOptions?.map(option => (
+                    <Select.Item key={option} value={option}>
+                      {option}
+                    </Select.Item>
+                  ))}
+                </Select.Content>
+              </Select.Root>
+            </ControlGroup>
+
+            <ControlGroup>
+              <Select.Root
+                name="license"
+                value={licenseValue}
+                onValueChange={value => handleSelectChange('license', value)}
+                placeholder={t('views:repos.repoCreate.licensePlaceholder', 'Select')}
+                label={t('views:repos.repoCreate.licenseLabel', 'Choose a license')}
+                error={errors.license?.message?.toString()}
+                caption={t(
+                  'views:repos.repoCreate.licenseCaption',
+                  "A license tells others what they can and can't do with your code."
+                )}
+              >
+                <Select.Content>
+                  {licenseOptions?.map(option => (
+                    <Select.Item key={option.value} value={option.value ?? ''}>
+                      {option.label}
+                    </Select.Item>
+                  ))}
+                </Select.Content>
+              </Select.Root>
+            </ControlGroup>
+          </Fieldset>
+
+          <Fieldset className="mt-4 gap-y-0">
+            <legend className="text-foreground-2 text-sm font-normal leading-none">
+              {t('views:repos.repoCreate.access.legend', 'Who has access')}
+            </legend>
+
+            <RadioGroup className="mt-6" value={accessValue} onValueChange={handleAccessChange} id="access">
+              <Option
+                control={<RadioButton className="mt-px" value="1" id="access-public" />}
+                id="access-public"
+                label={t('views:repos.repoCreate.access.publicOptionLabel', 'Public')}
+                ariaSelected={accessValue === '1'}
+                description={t(
+                  'views:repos.repoCreate.access.publicOptionDescription',
+                  'Anyone with access to the Gitness environment can clone this repo.'
+                )}
+              />
+              <Option
+                control={<RadioButton className="mt-px" value="2" id="access-private" />}
+                id="access-private"
+                label={t('views:repos.repoCreate.access.privateOptionLabel', 'Private')}
+                ariaSelected={accessValue === '2'}
+                description={t(
+                  'views:repos.repoCreate.access.privateOptionDescription',
+                  'You choose who can see and commit to this repository.'
+                )}
+              />
+            </RadioGroup>
+
+            {errors.access && (
+              <Message className="mt-0.5" theme={MessageTheme.ERROR}>
+                {errors.access.message?.toString()}
+              </Message>
+            )}
+          </Fieldset>
+
+          <ControlGroup className="mt-4">
+            <Label color="secondary" htmlFor="readme">
+              {t('views:repos.repoCreate.initialize.label', 'Initialize this repository with')}
+            </Label>
+
+            <Option
+              className="mt-6"
+              control={<Checkbox id="readme" checked={readmeValue} onCheckedChange={handleReadmeChange} />}
+              id="readme"
+              label={t('views:repos.repoCreate.initialize.readmeLabel', 'Add a README file')}
+              ariaSelected={accessValue === '1'}
+              description={
+                <>
+                  {t(
+                    'views:repos.repoCreate.initialize.readmeDescription',
+                    'This is where you can write a long description for your project'
+                  )}{' '}
+                  {/* TODO: when theres a README docs , link to it
+                     <StyledLink className="inline-block" to="/">
+                      Learn more about README
+                    </StyledLink> */}
+                </>
+              }
+              error={errors.readme && errors.readme.message?.toString()}
+            />
+          </ControlGroup>
+
+          {apiError && (
+            <Alert.Container variant="destructive">
+              <Alert.Description>{apiError}</Alert.Description>
+            </Alert.Container>
+          )}
+
+          <ButtonGroup className="mt-6">
+            {/* TODO: Improve loading state to avoid flickering */}
+            <Button type="submit" disabled={isLoading}>
+              {!isLoading
+                ? t('views:repos.repoCreate.create.create', 'Create repository')
+                : t('views:repos.repoCreate.create.creating', 'Creating repository...')}
+            </Button>
+            <Button type="button" variant="outline" onClick={onFormCancel}>
+              {t('views:repos.repoCreate.cancel', 'Cancel')}
+            </Button>
+          </ButtonGroup>
+        </FormWrapper>
+      </SandboxLayout.Content>
+    </SandboxLayout.Main>
+  )
+}
diff --git a/packages/ui/src/views/repo/repo-files/index.tsx b/packages/ui/src/views/repo/repo-files/index.tsx
index 0848b3241d..025ec7c412 100644
--- a/packages/ui/src/views/repo/repo-files/index.tsx
+++ b/packages/ui/src/views/repo/repo-files/index.tsx
@@ -65,7 +65,7 @@ export const RepoFiles: FC<RepoFilesProps> = ({
     if (!isView) return children
 
     if (isRepoEmpty) {
-      return <p>{t('views:repos.emptyRepo')}</p>
+      return <p>{t('views:repos.emptyRepo', 'This repository is empty.')}</p>
     }
 
     if (!isDir) {
diff --git a/packages/ui/src/views/repo/repo-import/repo-import-mulitple.tsx b/packages/ui/src/views/repo/repo-import/repo-import-mulitple.tsx
index fc3a70aabb..ce10e2ecf5 100644
--- a/packages/ui/src/views/repo/repo-import/repo-import-mulitple.tsx
+++ b/packages/ui/src/views/repo/repo-import/repo-import-mulitple.tsx
@@ -1,6 +1,8 @@
-import { useForm, type SubmitHandler } from 'react-hook-form'
+import { useMemo } from 'react'
+import { useForm } from 'react-hook-form'
 
 import {
+  Alert,
   Button,
   ButtonGroup,
   Checkbox,
@@ -10,110 +12,127 @@ import {
   FormWrapper,
   Input,
   Option,
-  Select,
-  Spacer,
-  Text
+  Select
 } from '@/components'
-import { SandboxLayout } from '@/views'
+import { SandboxLayout, TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { makeFloatValidationUtils, makeValidationUtils } from '@utils/validation'
 import { z } from 'zod'
 
 import { ProviderOptionsEnum } from './types'
 
-const formSchema = z
-  .object({
-    hostUrl: z.string().optional(),
-    pipelines: z.boolean().optional(),
-    repositories: z.boolean().optional(),
-    provider: z.nativeEnum(ProviderOptionsEnum, { message: 'Please select a provider' }),
-    password: z.string().optional(),
-    organization: z.string().optional(),
-    group: z.string().optional(),
-    username: z.string().optional(),
-    workspace: z.string().optional(),
-    project: z.string().optional()
-  })
-  .superRefine((data, ctx) => {
-    if (
-      [
-        ProviderOptionsEnum.GITHUB,
-        ProviderOptionsEnum.GITHUB_ENTERPRISE,
-        ProviderOptionsEnum.GITEA,
-        ProviderOptionsEnum.GOGS,
-        ProviderOptionsEnum.AZURE_DEVOPS
-      ].includes(data.provider) &&
-      !data.organization?.trim()
-    ) {
-      ctx.addIssue({
-        code: 'custom',
-        path: ['organization'],
-        message: 'Please enter an organization'
-      })
-    }
+const checkProvider = (provider: ProviderOptionsEnum) => ({
+  isOrganizationRequired: [
+    ProviderOptionsEnum.GITHUB,
+    ProviderOptionsEnum.GITHUB_ENTERPRISE,
+    ProviderOptionsEnum.GITEA,
+    ProviderOptionsEnum.GOGS,
+    ProviderOptionsEnum.AZURE_DEVOPS
+  ].includes(provider),
+  isGitlab: [ProviderOptionsEnum.GITLAB, ProviderOptionsEnum.GITLAB_SELF_HOSTED].includes(provider),
+  isBitbucket: [ProviderOptionsEnum.BITBUCKET].includes(provider),
+  isHostUrlRequired: [
+    ProviderOptionsEnum.GITHUB_ENTERPRISE,
+    ProviderOptionsEnum.GITLAB_SELF_HOSTED,
+    ProviderOptionsEnum.BITBUCKET_SERVER,
+    ProviderOptionsEnum.GITEA,
+    ProviderOptionsEnum.GOGS
+  ].includes(provider),
+  isProjectRequired: [ProviderOptionsEnum.BITBUCKET_SERVER, ProviderOptionsEnum.AZURE_DEVOPS].includes(provider),
+  isAuthorizationRequired: [ProviderOptionsEnum.BITBUCKET, ProviderOptionsEnum.AZURE_DEVOPS].includes(provider)
+})
 
-    if (data.provider === ProviderOptionsEnum.BITBUCKET && !data.workspace?.trim()) {
-      ctx.addIssue({
-        code: 'custom',
-        path: ['workspace'],
-        message: 'Please enter a Workspace'
-      })
-    }
+const makeImportMultipleReposFormSchema = (t: TranslationStore['t']) => {
+  const { required } = makeValidationUtils(t)
 
-    if (
-      [ProviderOptionsEnum.GITLAB, ProviderOptionsEnum.GITLAB_SELF_HOSTED].includes(data.provider) &&
-      !data.group?.trim()
-    ) {
-      ctx.addIssue({
-        code: 'custom',
-        path: ['group'],
-        message: 'Please enter a Group'
-      })
-    }
+  return z
+    .object({
+      hostUrl: z.string().trim().optional(),
+      pipelines: z.boolean().optional(),
+      repositories: z.boolean().optional(),
+      provider: z.nativeEnum(ProviderOptionsEnum, { message: required(t('views:repos.importRepo.providerLabel')) }),
+      password: z.string().trim().optional(),
+      organization: z.string().trim().optional(),
+      group: z.string().trim().optional(),
+      username: z.string().trim().optional(),
+      workspace: z.string().trim().optional(),
+      project: z.string().trim().optional()
+    })
+    .superRefine(({ hostUrl, provider, organization, group, workspace, project }, ctx) => {
+      const { isGitlab, isBitbucket, isHostUrlRequired, isProjectRequired, isOrganizationRequired } =
+        checkProvider(provider)
+      const makeValidators = makeFloatValidationUtils(t, ctx)
 
-    if (
-      [
-        ProviderOptionsEnum.GITHUB_ENTERPRISE,
-        ProviderOptionsEnum.GITLAB_SELF_HOSTED,
-        ProviderOptionsEnum.BITBUCKET_SERVER,
-        ProviderOptionsEnum.GITEA,
-        ProviderOptionsEnum.GOGS
-      ].includes(data.provider) &&
-      !data.hostUrl?.trim()
-    ) {
-      ctx.addIssue({
-        code: 'custom',
-        path: ['hostUrl'],
-        message: 'Please enter a Host URL'
-      })
-    }
+      if (isOrganizationRequired) {
+        const { noSpacesFloat, requiredFloat } = makeValidators({
+          value: organization,
+          path: 'organization',
+          name: t('views:repos.importRepo.organizationLabel')
+        })
+        requiredFloat()
+        noSpacesFloat()
+      }
 
-    if (
-      [ProviderOptionsEnum.BITBUCKET_SERVER, ProviderOptionsEnum.AZURE_DEVOPS].includes(data.provider) &&
-      !data.project?.trim()
-    ) {
-      ctx.addIssue({
-        code: 'custom',
-        path: ['project'],
-        message: 'Please enter a Project'
-      })
-    }
-  })
+      if (isHostUrlRequired) {
+        const { requiredFloat, urlFloat } = makeValidators({
+          value: hostUrl,
+          path: 'hostUrl',
+          name: t('views:repos.importRepo.hostLabel')
+        })
+        requiredFloat()
+        urlFloat()
+      }
+
+      if (isBitbucket) {
+        const { requiredFloat, noSpacesFloat } = makeValidators({
+          value: workspace,
+          path: 'workspace',
+          name: t('views:repos.importRepo.workspaceLabel')
+        })
+        requiredFloat()
+        noSpacesFloat()
+      }
+
+      if (isGitlab) {
+        const { requiredFloat, noSpacesFloat } = makeValidators({
+          value: group,
+          path: 'group',
+          name: t('views:repos.importRepo.groupLabel')
+        })
+        requiredFloat()
+        noSpacesFloat()
+      }
 
-export type ImportMultipleReposFormFields = z.infer<typeof formSchema>
+      if (isProjectRequired) {
+        const { requiredFloat, noSpacesFloat } = makeValidators({
+          value: project,
+          path: 'project',
+          name: t('views:repos.importRepo.projectLabel')
+        })
+        requiredFloat()
+        noSpacesFloat()
+      }
+    })
+}
+
+export type ImportMultipleReposFormFields = z.infer<ReturnType<typeof makeImportMultipleReposFormSchema>>
 
 interface RepoImportMultiplePageProps {
   onFormSubmit: (data: ImportMultipleReposFormFields) => void
   onFormCancel: () => void
   isLoading: boolean
   apiErrorsValue?: string
+  useTranslationStore: () => TranslationStore
 }
 
 export function RepoImportMultiplePage({
   onFormSubmit,
   onFormCancel,
   isLoading,
-  apiErrorsValue
+  apiErrorsValue,
+  useTranslationStore
 }: RepoImportMultiplePageProps) {
+  const { t } = useTranslationStore()
   const {
     register,
     handleSubmit,
@@ -122,7 +141,7 @@ export function RepoImportMultiplePage({
     formState: { errors },
     reset
   } = useForm<ImportMultipleReposFormFields>({
-    resolver: zodResolver(formSchema),
+    resolver: zodResolver(makeImportMultipleReposFormSchema(t)),
     mode: 'onChange',
     defaultValues: {
       pipelines: false,
@@ -132,6 +151,14 @@ export function RepoImportMultiplePage({
   })
 
   const providerValue = watch('provider')
+  const {
+    isGitlab,
+    isBitbucket,
+    isHostUrlRequired,
+    isProjectRequired,
+    isOrganizationRequired,
+    isAuthorizationRequired
+  } = useMemo(() => checkProvider(providerValue), [providerValue])
 
   const handleSelectChange = (fieldName: keyof ImportMultipleReposFormFields, value: string) => {
     if (fieldName === 'provider') {
@@ -141,206 +168,159 @@ export function RepoImportMultiplePage({
     }
   }
 
-  const onSubmit: SubmitHandler<ImportMultipleReposFormFields> = data => {
-    onFormSubmit(data)
-  }
-
-  const handleCancel = () => {
-    onFormCancel()
-  }
-
   return (
     <SandboxLayout.Main>
-      <SandboxLayout.Content key={providerValue} paddingClassName="w-[570px] sdfsdfsdfdsf mx-auto pt-11 pb-20">
-        <Spacer size={5} />
-        <Text className="tracking-tight" size={5} weight="medium">
-          Import Repositories
-        </Text>
-        <Spacer size={10} />
-        <FormWrapper onSubmit={handleSubmit(onSubmit)}>
-          {/* provider */}
-          <Fieldset>
-            <ControlGroup>
-              <Select.Root
-                name="provider"
-                value={providerValue}
-                onValueChange={value => handleSelectChange('provider', value)}
-                placeholder="Select"
-                label="Git provider"
-              >
-                <Select.Content>
-                  {ProviderOptionsEnum &&
-                    Object.values(ProviderOptionsEnum)?.map(option => {
-                      return (
-                        <Select.Item key={option} value={option}>
-                          {option}
-                        </Select.Item>
-                      )
-                    })}
-                </Select.Content>
-              </Select.Root>
-            </ControlGroup>
-          </Fieldset>
+      <SandboxLayout.Content key={providerValue} paddingClassName="w-[570px] mx-auto pt-11 pb-20">
+        <h1 className="text-24 text-foreground-1 mb-10 font-medium">
+          {t('views:repos.importRepo.importMultipleTitle', 'Import Repositories')}
+        </h1>
+
+        <FormWrapper onSubmit={handleSubmit(onFormSubmit)}>
+          <ControlGroup>
+            <Select.Root
+              name="provider"
+              value={providerValue}
+              onValueChange={value => handleSelectChange('provider', value)}
+              placeholder={t('views:repos.importRepo.providerPlaceholder', 'Select')}
+              label={t('views:repos.importRepo.providerLabel', 'Git provider')}
+            >
+              <Select.Content>
+                {Object.values(ProviderOptionsEnum).map(option => (
+                  <Select.Item key={option} value={option}>
+                    {option}
+                  </Select.Item>
+                ))}
+              </Select.Content>
+            </Select.Root>
+          </ControlGroup>
 
-          {[
-            ProviderOptionsEnum.GITHUB_ENTERPRISE,
-            ProviderOptionsEnum.GITLAB_SELF_HOSTED,
-            ProviderOptionsEnum.BITBUCKET_SERVER,
-            ProviderOptionsEnum.GITEA,
-            ProviderOptionsEnum.GOGS
-          ].includes(watch('provider')) && (
-            <Fieldset>
-              <Input
-                id="host"
-                label="Host URL"
-                {...register('hostUrl')}
-                placeholder="Enter the host URL"
-                size="md"
-                error={errors.hostUrl?.message?.toString()}
-              />
-            </Fieldset>
+          {isHostUrlRequired && (
+            <Input
+              id="host"
+              label={t('views:repos.importRepo.hostLabel', 'Host URL')}
+              {...register('hostUrl')}
+              placeholder={t('views:repos.importRepo.hostPlaceholder', 'Enter the host URL')}
+              size="md"
+              error={errors.hostUrl?.message?.toString()}
+            />
           )}
 
-          {[ProviderOptionsEnum.BITBUCKET, ProviderOptionsEnum.AZURE_DEVOPS].includes(watch('provider')) && (
-            <Fieldset>
-              <ControlGroup>
-                <Input
-                  id="username"
-                  label="Username"
-                  {...register('username')}
-                  placeholder="Enter your Username"
-                  size="md"
-                  error={errors.password?.message?.toString()}
-                />
-              </ControlGroup>
-            </Fieldset>
+          {isAuthorizationRequired && (
+            <Input
+              id="username"
+              label={t('views:repos.importRepo.usernameLabel', 'Username')}
+              {...register('username')}
+              placeholder={t('views:repos.importRepo.usernamePlaceholder', 'Enter your username')}
+              size="md"
+              error={errors.password?.message?.toString()}
+            />
           )}
 
-          {/* token */}
-          <Fieldset>
-            <ControlGroup>
-              <Input
-                type="password"
-                id="password"
-                label={
-                  [ProviderOptionsEnum.BITBUCKET, ProviderOptionsEnum.AZURE_DEVOPS].includes(watch('provider'))
-                    ? 'Password'
-                    : 'Token'
-                }
-                {...register('password')}
-                placeholder={
-                  [ProviderOptionsEnum.BITBUCKET, ProviderOptionsEnum.AZURE_DEVOPS].includes(watch('provider'))
-                    ? 'Enter your password'
-                    : 'Enter your access token'
-                }
-                size="md"
-                error={errors.password?.message?.toString()}
-              />
-            </ControlGroup>
-          </Fieldset>
+          <Input
+            type="password"
+            id="password"
+            label={
+              isAuthorizationRequired
+                ? t('views:repos.importRepo.accessInput.passwordLabel', 'Password')
+                : t('views:repos.importRepo.accessInput.tokenLabel', 'Token')
+            }
+            {...register('password')}
+            placeholder={
+              isAuthorizationRequired
+                ? t('views:repos.importRepo.accessInput.passwordPlaceholder', 'Enter your password')
+                : t('views:repos.importRepo.accessInput.tokenPlaceholder', 'Enter your access token')
+            }
+            size="md"
+            error={errors.password?.message?.toString()}
+          />
 
           <FormSeparator />
 
-          {[ProviderOptionsEnum.GITLAB, ProviderOptionsEnum.GITLAB_SELF_HOSTED].includes(watch('provider')) && (
-            <Fieldset className="mt-4">
-              <Input
-                id="group"
-                label="Group"
-                {...register('group')}
-                placeholder="Enter the group name"
-                size="md"
-                error={errors.group?.message?.toString()}
-              />
-            </Fieldset>
+          {isGitlab && (
+            <Input
+              className="mt-4"
+              id="group"
+              label={t('views:repos.importRepo.groupLabel', 'Group')}
+              {...register('group')}
+              placeholder={t('views:repos.importRepo.groupPlaceholder', 'Enter the group name')}
+              size="md"
+              error={errors.group?.message?.toString()}
+            />
           )}
 
-          {watch('provider') === ProviderOptionsEnum.BITBUCKET && (
-            <Fieldset className="mt-4">
-              <Input
-                id="workspace"
-                label="Workspace"
-                {...register('workspace')}
-                placeholder="Enter the workspace name"
-                size="md"
-                error={errors.workspace?.message?.toString()}
-              />
-            </Fieldset>
+          {isBitbucket && (
+            <Input
+              className="mt-4"
+              id="workspace"
+              label={t('views:repos.importRepo.workspaceLabel', 'Workspace')}
+              {...register('workspace')}
+              placeholder={t('views:repos.importRepo.workspacePlaceholder', 'Enter the workspace name')}
+              size="md"
+              error={errors.workspace?.message?.toString()}
+            />
           )}
 
-          {/* organization */}
-          {[
-            ProviderOptionsEnum.GITHUB,
-            ProviderOptionsEnum.GITHUB_ENTERPRISE,
-            ProviderOptionsEnum.GITEA,
-            ProviderOptionsEnum.GOGS,
-            ProviderOptionsEnum.AZURE_DEVOPS
-          ].includes(watch('provider')) && (
-            <Fieldset>
-              <Input
-                id="organization"
-                label="Organization"
-                {...register('organization')}
-                placeholder="Enter the organization name"
-                size="md"
-                error={errors.organization?.message?.toString()}
-              />
-            </Fieldset>
+          {isOrganizationRequired && (
+            <Input
+              id="organization"
+              label={t('views:repos.importRepo.organizationLabel', 'Organization')}
+              {...register('organization')}
+              placeholder={t('views:repos.importRepo.organizationPlaceholder', 'Enter the organization name')}
+              size="md"
+              error={errors.organization?.message?.toString()}
+            />
           )}
 
-          {/* Project */}
-          {[ProviderOptionsEnum.BITBUCKET_SERVER, ProviderOptionsEnum.AZURE_DEVOPS].includes(watch('provider')) && (
-            <Fieldset className="mt-4">
-              <Input
-                id="project"
-                label="Project"
-                {...register('project')}
-                placeholder="Enter the project name"
-                size="md"
-                error={errors.project?.message?.toString()}
-              />
-            </Fieldset>
+          {isProjectRequired && (
+            <Input
+              className="mt-4"
+              id="project"
+              label={t('views:repos.importRepo.projectLabel', 'Project')}
+              {...register('project')}
+              placeholder={t('views:repos.importRepo.projectPlaceholder', 'Enter the project name')}
+              size="md"
+              error={errors.project?.message?.toString()}
+            />
           )}
 
-          {/* authorization - pipelines */}
-          <Fieldset>
-            <ControlGroup className="flex flex-row gap-5">
-              <Option
-                control={<Checkbox {...register('repositories')} id="authorization" checked={true} disabled />}
-                id="authorization"
-                label="Repositories"
-                className="mt-0 flex min-h-8 items-center"
-              />
-              <Option
-                control={
-                  <Checkbox
-                    {...register('pipelines')}
-                    id="pipelines"
-                    checked={watch('pipelines')}
-                    onCheckedChange={(checked: boolean) => setValue('pipelines', checked)}
-                  />
-                }
-                id="pipelines"
-                label="Pipelines"
-                className="mt-0 flex min-h-8 items-center"
-              />
-            </ControlGroup>
+          <Fieldset className="flex-row gap-5" legend="What do you want to import?">
+            <Option
+              control={<Checkbox {...register('repositories')} id="authorization" checked={true} disabled />}
+              id="authorization"
+              label={t('views:repos.importRepo.repositoriesOption', 'Repositories')}
+              className="mt-0 flex min-h-8 items-center"
+            />
+            <Option
+              control={
+                <Checkbox
+                  {...register('pipelines')}
+                  id="pipelines"
+                  checked={watch('pipelines')}
+                  onCheckedChange={(checked: boolean) => setValue('pipelines', checked)}
+                />
+              }
+              id="pipelines"
+              label={t('views:repos.importRepo.pipelinesOption', 'Pipelines')}
+              className="mt-0 flex min-h-8 items-center"
+            />
           </Fieldset>
 
-          {!!apiErrorsValue && <span className="text-xs text-destructive">{apiErrorsValue}</span>}
-          {/* SUBMIT BUTTONS */}
-          <Fieldset>
-            <ControlGroup>
-              <ButtonGroup>
-                {/* TODO: Improve loading state to avoid flickering */}
-                <Button type="submit" disabled={isLoading}>
-                  {!isLoading ? 'Import repositories' : 'Importing repositories...'}
-                </Button>
-                <Button type="button" variant="outline" onClick={handleCancel}>
-                  Cancel
-                </Button>
-              </ButtonGroup>
-            </ControlGroup>
-          </Fieldset>
+          {!!apiErrorsValue && (
+            <Alert.Container variant="destructive">
+              <Alert.Title>{apiErrorsValue}</Alert.Title>
+            </Alert.Container>
+          )}
+
+          <ButtonGroup className="mt-6">
+            <Button type="submit" disabled={isLoading}>
+              {!isLoading
+                ? t('views:repos.importRepo.importMultipleButton.import', 'Import repositories')
+                : t('views:repos.importRepo.importMultipleButton.importing', 'Importing repositories...')}
+            </Button>
+            <Button type="button" variant="outline" onClick={onFormCancel}>
+              {t('views:repos.importRepo.cancelButton', 'Cancel')}
+            </Button>
+          </ButtonGroup>
         </FormWrapper>
       </SandboxLayout.Content>
     </SandboxLayout.Main>
diff --git a/packages/ui/src/views/repo/repo-import/repo-import.tsx b/packages/ui/src/views/repo/repo-import/repo-import.tsx
index fd00daae1e..0ceda706c4 100644
--- a/packages/ui/src/views/repo/repo-import/repo-import.tsx
+++ b/packages/ui/src/views/repo/repo-import/repo-import.tsx
@@ -1,7 +1,8 @@
-import { useEffect } from 'react'
-import { useForm, type SubmitHandler } from 'react-hook-form'
+import { useEffect, useMemo } from 'react'
+import { useForm } from 'react-hook-form'
 
 import {
+  Alert,
   Button,
   ButtonGroup,
   Checkbox,
@@ -12,91 +13,121 @@ import {
   Input,
   Option,
   Select,
-  Spacer,
-  Text,
   Textarea
 } from '@/components'
 import { SandboxLayout, TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { makeFloatValidationUtils, makeValidationUtils } from '@utils/validation'
 import { z } from 'zod'
 
 import { ProviderOptionsEnum } from './types'
 
-const formSchema = z
-  .object({
-    identifier: z.string(),
-    hostUrl: z.string().optional(),
-    description: z.string(),
-    pipelines: z.boolean().optional(),
-    authorization: z.boolean().optional(),
-    provider: z.nativeEnum(ProviderOptionsEnum, { message: 'Please select a provider' }),
-    password: z.string().optional(),
-    organization: z.string().optional(),
-    repository: z.string().min(1, { message: 'Please enter a repository' }),
-    group: z.string().optional(),
-    workspace: z.string().optional(),
-    project: z.string().optional()
-  })
-  .superRefine((data, ctx) => {
-    if (
-      [
-        ProviderOptionsEnum.GITHUB,
-        ProviderOptionsEnum.GITHUB_ENTERPRISE,
-        ProviderOptionsEnum.GITEA,
-        ProviderOptionsEnum.GOGS,
-        ProviderOptionsEnum.AZURE_DEVOPS
-      ].includes(data.provider) &&
-      !data.organization?.trim()
-    ) {
-      ctx.addIssue({
-        code: 'custom',
-        path: ['organization'],
-        message: 'Please enter a organization'
-      })
-    }
-    if (
-      [
-        ProviderOptionsEnum.GITHUB_ENTERPRISE,
-        ProviderOptionsEnum.GITLAB_SELF_HOSTED,
-        ProviderOptionsEnum.BITBUCKET_SERVER,
-        ProviderOptionsEnum.GITEA,
-        ProviderOptionsEnum.GOGS
-      ].includes(data.provider) &&
-      !data.hostUrl?.trim()
-    ) {
-      ctx.addIssue({
-        code: 'custom',
-        path: ['hostUrl'],
-        message: 'Please enter the Repository URL'
-      })
-    }
-    if (data.provider === ProviderOptionsEnum.GITLAB && !data.group?.trim()) {
-      ctx.addIssue({
-        code: 'custom',
-        path: ['group'],
-        message: 'Please enter a Group'
-      })
-    }
-    if (data.provider === ProviderOptionsEnum.BITBUCKET && !data.workspace?.trim()) {
-      ctx.addIssue({
-        code: 'custom',
-        path: ['workspace'],
-        message: 'Please enter a Workspace'
-      })
-    }
-    if (
-      [ProviderOptionsEnum.BITBUCKET_SERVER, ProviderOptionsEnum.AZURE_DEVOPS].includes(data.provider) &&
-      !data.project?.trim()
-    ) {
-      ctx.addIssue({
-        code: 'custom',
-        path: ['project'],
-        message: 'Please enter a Project'
-      })
-    }
-  })
+const checkProvider = (provider: ProviderOptionsEnum) => ({
+  isOrganizationRequired: [
+    ProviderOptionsEnum.GITHUB,
+    ProviderOptionsEnum.GITHUB_ENTERPRISE,
+    ProviderOptionsEnum.GITEA,
+    ProviderOptionsEnum.GOGS,
+    ProviderOptionsEnum.AZURE_DEVOPS
+  ].includes(provider),
+  isGitlab: [ProviderOptionsEnum.GITLAB, ProviderOptionsEnum.GITLAB_SELF_HOSTED].includes(provider),
+  isBitbucket: [ProviderOptionsEnum.BITBUCKET].includes(provider),
+  isHostUrlRequired: [
+    ProviderOptionsEnum.GITHUB_ENTERPRISE,
+    ProviderOptionsEnum.GITLAB_SELF_HOSTED,
+    ProviderOptionsEnum.BITBUCKET_SERVER,
+    ProviderOptionsEnum.GITEA,
+    ProviderOptionsEnum.GOGS
+  ].includes(provider),
+  isProjectRequired: [ProviderOptionsEnum.BITBUCKET_SERVER, ProviderOptionsEnum.AZURE_DEVOPS].includes(provider)
+})
+
+const makeImportRepoFormSchema = (t: TranslationStore['t']) => {
+  const { required, maxLength, specialSymbols, noSpaces } = makeValidationUtils(t)
+
+  const getRepositoryValidation = (name: string) =>
+    z
+      .string()
+      .trim()
+      .nonempty(required(name))
+      .max(...maxLength(100, name))
+      .regex(...specialSymbols(name))
+      .refine(...noSpaces(name))
+
+  return z
+    .object({
+      identifier: getRepositoryValidation(t('views:repos.importRepo.repositoryNameLabel')),
+      hostUrl: z.string().trim().optional(),
+      description: z.string().trim().optional(),
+      pipelines: z.boolean().optional(),
+      authorization: z.boolean().optional(),
+      provider: z.nativeEnum(ProviderOptionsEnum, { message: required(t('views:repos.importRepo.providerLabel')) }),
+      password: z.string().trim().optional(),
+      organization: z.string().optional(),
+      repository: getRepositoryValidation(t('views:repos.importRepo.repositoryLabel')),
+      group: z.string().trim().optional(),
+      workspace: z.string().trim().optional(),
+      project: z.string().trim().optional()
+    })
+    .superRefine(({ hostUrl, provider, organization, group, workspace, project }, ctx) => {
+      const { isGitlab, isBitbucket, isHostUrlRequired, isProjectRequired, isOrganizationRequired } =
+        checkProvider(provider)
+
+      const makeValidators = makeFloatValidationUtils(t, ctx)
+
+      if (isOrganizationRequired) {
+        const { noSpacesFloat, requiredFloat } = makeValidators({
+          value: organization,
+          path: 'organization',
+          name: t('views:repos.importRepo.organizationLabel')
+        })
+        requiredFloat()
+        noSpacesFloat()
+      }
+
+      if (isHostUrlRequired) {
+        const { requiredFloat, urlFloat } = makeValidators({
+          value: hostUrl,
+          path: 'hostUrl',
+          name: t('views:repos.importRepo.hostLabel')
+        })
+        requiredFloat()
+        urlFloat()
+      }
+
+      if (isBitbucket) {
+        const { requiredFloat, noSpacesFloat } = makeValidators({
+          value: workspace,
+          path: 'workspace',
+          name: t('views:repos.importRepo.workspaceLabel')
+        })
+        requiredFloat()
+        noSpacesFloat()
+      }
 
-export type ImportRepoFormFields = z.infer<typeof formSchema>
+      if (isGitlab) {
+        const { requiredFloat, noSpacesFloat } = makeValidators({
+          value: group,
+          path: 'group',
+          name: t('views:repos.importRepo.groupLabel')
+        })
+        requiredFloat()
+        noSpacesFloat()
+      }
+
+      if (isProjectRequired) {
+        const { requiredFloat, noSpacesFloat } = makeValidators({
+          value: project,
+          path: 'project',
+          name: t('views:repos.importRepo.projectLabel')
+        })
+        requiredFloat()
+        noSpacesFloat()
+      }
+    })
+}
+
+export type ImportRepoFormFields = z.infer<ReturnType<typeof makeImportRepoFormSchema>>
 
 interface RepoImportPageProps {
   onFormSubmit: (data: ImportRepoFormFields) => void
@@ -120,9 +151,10 @@ export function RepoImportPage({
     handleSubmit,
     setValue,
     watch,
+    trigger,
     formState: { errors }
   } = useForm<ImportRepoFormFields>({
-    resolver: zodResolver(formSchema),
+    resolver: zodResolver(makeImportRepoFormSchema(t)),
     mode: 'onChange',
     defaultValues: {
       pipelines: false,
@@ -132,238 +164,199 @@ export function RepoImportPage({
   })
 
   const providerValue = watch('provider')
+  const pipelinesValue = watch('pipelines')
   const repositoryValue = watch('repository')
+  const authorizationValue = watch('authorization')
+  const { isGitlab, isBitbucket, isHostUrlRequired, isProjectRequired, isOrganizationRequired } = useMemo(
+    () => checkProvider(providerValue),
+    [providerValue]
+  )
 
   useEffect(() => {
     setValue('identifier', repositoryValue)
-  }, [repositoryValue, setValue])
+
+    if (!errors.repository) return
+
+    trigger('identifier')
+  }, [repositoryValue, trigger, errors.repository])
 
   const handleSelectChange = (fieldName: keyof ImportRepoFormFields, value: string) => {
     setValue(fieldName, value, { shouldValidate: true })
   }
 
-  const onSubmit: SubmitHandler<ImportRepoFormFields> = data => {
-    onFormSubmit(data)
-  }
-
-  const handleCancel = () => {
-    onFormCancel()
-  }
   return (
     <SandboxLayout.Main>
       <SandboxLayout.Content paddingClassName="w-[570px] mx-auto pt-11 pb-20">
-        <Spacer size={5} />
-        <Text className="tracking-tight" size={5} weight="medium">
-          {t('views:repos.importRepo', 'Import a repository')}
-        </Text>
-        <Spacer size={10} />
-        <FormWrapper className="gap-y-7" onSubmit={handleSubmit(onSubmit)}>
-          {/* provider */}
-          <Fieldset>
-            <ControlGroup>
-              <Select.Root
-                name="provider"
-                value={providerValue}
-                onValueChange={value => handleSelectChange('provider', value)}
-                placeholder="Select"
-                label="Provider"
-              >
-                <Select.Content>
-                  {ProviderOptionsEnum &&
-                    Object.values(ProviderOptionsEnum)?.map(option => {
-                      return (
-                        <Select.Item key={option} value={option}>
-                          {option}
-                        </Select.Item>
-                      )
-                    })}
-                </Select.Content>
-              </Select.Root>
-            </ControlGroup>
-          </Fieldset>
+        <h1 className="text-24 text-foreground-1 mb-10 font-medium">
+          {t('views:repos.importRepo.importTitle', 'Import a repository')}
+        </h1>
 
-          {[
-            ProviderOptionsEnum.GITHUB_ENTERPRISE,
-            ProviderOptionsEnum.GITLAB_SELF_HOSTED,
-            ProviderOptionsEnum.BITBUCKET_SERVER,
-            ProviderOptionsEnum.GITEA,
-            ProviderOptionsEnum.GOGS
-          ].includes(watch('provider')) && (
-            <Fieldset className="mt-4">
-              <Input
-                id="host"
-                label="Host URL"
-                {...register('hostUrl')}
-                placeholder="Enter the host URL"
-                size="md"
-                error={errors.hostUrl?.message?.toString()}
-              />
-            </Fieldset>
-          )}
-          {[ProviderOptionsEnum.GITLAB, ProviderOptionsEnum.GITLAB_SELF_HOSTED].includes(watch('provider')) && (
-            <Fieldset className="mt-4">
-              <Input
-                id="group"
-                label="Group"
-                {...register('group')}
-                placeholder="Enter the group name"
-                size="md"
-                error={errors.group?.message?.toString()}
-              />
-            </Fieldset>
+        <FormWrapper onSubmit={handleSubmit(onFormSubmit)}>
+          <ControlGroup>
+            <Select.Root
+              name="provider"
+              value={providerValue}
+              onValueChange={value => handleSelectChange('provider', value)}
+              placeholder={t('views:repos.importRepo.providerPlaceholder', 'Select')}
+              label={t('views:repos.importRepo.providerLabel', 'Git provider')}
+            >
+              <Select.Content>
+                {Object.values(ProviderOptionsEnum).map(option => (
+                  <Select.Item key={option} value={option}>
+                    {option}
+                  </Select.Item>
+                ))}
+              </Select.Content>
+            </Select.Root>
+          </ControlGroup>
+
+          {isHostUrlRequired && (
+            <Input
+              id="host"
+              label={t('views:repos.importRepo.hostLabel', 'Host URL')}
+              {...register('hostUrl')}
+              placeholder={t('views:repos.importRepo.hostPlaceholder', 'Enter the host URL')}
+              size="md"
+              error={errors.hostUrl?.message?.toString()}
+            />
           )}
 
-          {watch('provider') === ProviderOptionsEnum.BITBUCKET && (
-            <Fieldset className="mt-4">
-              <Input
-                id="workspace"
-                label="Workspace"
-                {...register('workspace')}
-                placeholder="Enter the workspace name"
-                size="md"
-                error={errors.workspace?.message?.toString()}
-              />
-            </Fieldset>
+          {isGitlab && (
+            <Input
+              className="mt-4"
+              id="group"
+              label={t('views:repos.importRepo.groupLabel', 'Group')}
+              {...register('group')}
+              placeholder={t('views:repos.importRepo.groupPlaceholder', 'Enter the group name')}
+              size="md"
+              error={errors.group?.message?.toString()}
+            />
           )}
 
-          {/* organization */}
-          {[
-            ProviderOptionsEnum.GITHUB,
-            ProviderOptionsEnum.GITHUB_ENTERPRISE,
-            ProviderOptionsEnum.GITEA,
-            ProviderOptionsEnum.GOGS,
-            ProviderOptionsEnum.AZURE_DEVOPS
-          ].includes(watch('provider')) && (
-            <Fieldset className="mt-4">
-              <Input
-                id="organization"
-                label="Organization"
-                {...register('organization')}
-                placeholder="Enter the organization name"
-                size="md"
-                error={errors.organization?.message?.toString()}
-              />
-            </Fieldset>
+          {isBitbucket && (
+            <Input
+              className="mt-4"
+              id="workspace"
+              label={t('views:repos.importRepo.workspaceLabel', 'Workspace')}
+              {...register('workspace')}
+              placeholder={t('views:repos.importRepo.workspacePlaceholder', 'Enter the workspace name')}
+              size="md"
+              error={errors.workspace?.message?.toString()}
+            />
           )}
-          {[ProviderOptionsEnum.BITBUCKET_SERVER, ProviderOptionsEnum.AZURE_DEVOPS].includes(watch('provider')) && (
-            <Fieldset className="mt-4">
-              <Input
-                id="project"
-                label="Project"
-                {...register('project')}
-                placeholder="Enter the project name"
-                size="md"
-                error={errors.project?.message?.toString()}
-              />
-            </Fieldset>
+
+          {isOrganizationRequired && (
+            <Input
+              id="organization"
+              label={t('views:repos.importRepo.organizationLabel', 'Organization')}
+              {...register('organization')}
+              placeholder={t('views:repos.importRepo.organizationPlaceholder', 'Enter the organization name')}
+              size="md"
+              error={errors.organization?.message?.toString()}
+            />
           )}
-          {/* repository */}
-          <Fieldset className="mt-4">
+
+          {isProjectRequired && (
             <Input
-              id="repository"
-              label="Repository"
-              {...register('repository')}
-              placeholder="Enter the repository name"
+              className="mt-4"
+              id="project"
+              label={t('views:repos.importRepo.projectLabel', 'Project')}
+              {...register('project')}
+              placeholder={t('views:repos.importRepo.projectPlaceholder', 'Enter the project name')}
               size="md"
-              error={errors.repository?.message?.toString()}
+              error={errors.project?.message?.toString()}
             />
-          </Fieldset>
+          )}
 
-          {/* authorization - pipelines */}
-          <Fieldset className="mt-4">
-            <ControlGroup className="flex flex-row gap-5">
-              <Option
-                control={
-                  <Checkbox
-                    {...register('authorization')}
-                    id="authorization"
-                    checked={watch('authorization')}
-                    onCheckedChange={(checked: boolean) => setValue('authorization', checked)}
-                  />
-                }
-                id="authorization"
-                label="Requires Authorization"
-                className="mt-0 flex min-h-8 items-center"
-              />
-              <Option
-                control={
-                  <Checkbox
-                    {...register('pipelines')}
-                    id="pipelines"
-                    checked={watch('pipelines')}
-                    onCheckedChange={(checked: boolean) => setValue('pipelines', checked)}
-                  />
-                }
-                id="pipelines"
-                label="Import Pipelines"
-                className="mt-0 flex min-h-8 items-center"
-              />
-            </ControlGroup>
-          </Fieldset>
+          <Input
+            id="repository"
+            label={t('views:repos.importRepo.repositoryLabel', 'Repository')}
+            {...register('repository')}
+            placeholder={t('views:repos.importRepo.repositoryPlaceholder', 'Enter the repository name')}
+            size="md"
+            error={errors.repository?.message?.toString()}
+          />
 
-          {/* token */}
-          {watch('authorization') && (
-            <Fieldset>
-              <ControlGroup>
-                <Input
-                  type="password"
-                  id="password"
-                  label="Token"
-                  {...register('password')}
-                  placeholder="Enter your access token"
-                  size="md"
-                  error={errors.password?.message?.toString()}
+          <Fieldset className="flex-row gap-5" legend="Import options">
+            <Option
+              control={
+                <Checkbox
+                  {...register('authorization')}
+                  id="authorization"
+                  checked={authorizationValue}
+                  onCheckedChange={(checked: boolean) => setValue('authorization', checked)}
+                />
+              }
+              id="authorization"
+              label={t('views:repos.importRepo.authorizationOption', 'Authorization')}
+              className="mt-0 flex min-h-8 items-center"
+            />
+            <Option
+              control={
+                <Checkbox
+                  {...register('pipelines')}
+                  id="pipelines"
+                  checked={pipelinesValue}
+                  onCheckedChange={(checked: boolean) => setValue('pipelines', checked)}
                 />
-              </ControlGroup>
-            </Fieldset>
+              }
+              id="pipelines"
+              label={t('views:repos.importRepo.importPipelinesOption', 'Import Pipelines')}
+              className="mt-0 flex min-h-8 items-center"
+            />
+          </Fieldset>
+
+          {authorizationValue && (
+            <Input
+              type="password"
+              id="password"
+              label={t('views:repos.importRepo.accessInput.tokenLabel', 'Token')}
+              {...register('password')}
+              placeholder={t('views:repos.importRepo.accessInput.tokenPlaceholder', 'Enter your access token')}
+              size="md"
+              error={errors.password?.message?.toString()}
+            />
           )}
 
           <FormSeparator />
 
-          {/* repo identifier */}
-          <Fieldset className="mt-4">
-            <ControlGroup>
-              <Input
-                id="identifier"
-                label="Name"
-                {...register('identifier')}
-                placeholder="Enter repository name"
-                size="md"
-                error={errors.identifier?.message?.toString()}
-              />
-            </ControlGroup>
-          </Fieldset>
+          <Input
+            id="identifier"
+            label={t('views:repos.importRepo.repositoryNameLabel', 'Repository name')}
+            {...register('identifier')}
+            placeholder={t('views:repos.importRepo.repositoryNamePlaceholder', 'Enter the repository name')}
+            size="md"
+            error={errors.identifier?.message?.toString()}
+          />
 
-          {/* description */}
-          <Fieldset className="mt-4">
-            <ControlGroup>
-              <Textarea
-                id="description"
-                label="Description"
-                {...register('description')}
-                placeholder="Enter a description"
-                error={errors.description?.message?.toString()}
-                optional
-              />
-            </ControlGroup>
-          </Fieldset>
+          <Textarea
+            id="description"
+            label={t('views:repos.importRepo.repositoryDescriptionLabel', 'Description')}
+            {...register('description')}
+            placeholder={t(
+              'views:repos.importRepo.repositoryDescriptionPlaceholder',
+              'Enter the repository description'
+            )}
+            error={errors.description?.message?.toString()}
+            optional
+          />
 
-          {!!apiErrorsValue && <span className="text-xs text-destructive">{apiErrorsValue}</span>}
-
-          {/* SUBMIT BUTTONS */}
-          <Fieldset className="mt-6">
-            <ControlGroup>
-              <ButtonGroup>
-                {/* TODO: Improve loading state to avoid flickering */}
-                <Button type="submit" disabled={isLoading}>
-                  {!isLoading ? 'Import repository' : 'Importing repository...'}
-                </Button>
-                <Button type="button" variant="outline" onClick={handleCancel}>
-                  Cancel
-                </Button>
-              </ButtonGroup>
-            </ControlGroup>
-          </Fieldset>
+          {!!apiErrorsValue && (
+            <Alert.Container closable variant="destructive">
+              <Alert.Title>{apiErrorsValue}</Alert.Title>
+            </Alert.Container>
+          )}
+
+          <ButtonGroup className="mt-6">
+            <Button type="submit" disabled={isLoading}>
+              {!isLoading
+                ? t('views:repos.importRepo.importButton.import', 'Import repository')
+                : t('views:repos.importRepo.importButton.importing', 'Importing repository...')}
+            </Button>
+            <Button type="button" variant="outline" onClick={onFormCancel}>
+              {t('views:repos.importRepo.cancelButton', 'Cancel')}
+            </Button>
+          </ButtonGroup>
         </FormWrapper>
       </SandboxLayout.Content>
     </SandboxLayout.Main>