diff --git a/apps/gitness/src/App.tsx b/apps/gitness/src/App.tsx
index ffa05844b2..d4ba512b35 100644
--- a/apps/gitness/src/App.tsx
+++ b/apps/gitness/src/App.tsx
@@ -37,6 +37,7 @@ import PullRequestLayout from './layouts/PullRequestLayout'
 import RepoLayoutV1 from './layouts/RepoLayout'
 import SandboxPullRequestListPage from './pages-v2/pull-request/pull-request-list'
 import { RepoCode } from './pages-v2/repo/repo-code'
+import { CreateRepo } from './pages-v2/repo/repo-create-page'
 import RepoLayout from './pages-v2/repo/repo-layout'
 import ReposListPage from './pages-v2/repo/repo-list'
 import { RepoSidebar } from './pages-v2/repo/repo-sidebar'
@@ -68,7 +69,7 @@ import PullRequestListPage from './pages/pull-request/pull-request-list-page'
 import { RepoBranchesListPage } from './pages/repo/repo-branch-list'
 import { RepoBranchSettingsRulesPageContainer } from './pages/repo/repo-branch-rules-container'
 import RepoCommitsPage from './pages/repo/repo-commits'
-import { CreateRepo } from './pages/repo/repo-create-page'
+import { CreateRepoV1 } from './pages/repo/repo-create-page'
 import { RepoFiles } from './pages/repo/repo-files'
 import { RepoHeader } from './pages/repo/repo-header'
 import { RepoImportContainer } from './pages/repo/repo-import-container'
@@ -200,6 +201,14 @@ export default function App() {
             }
           ]
         },
+        {
+          path: ':spaceId/repos/create',
+          element: <CreateRepo />
+        },
+        {
+          path: ':spaceId/repos/import',
+          element: <RepoImportContainer />
+        },
         {
           path: 'theme',
           element: <ProfileSettingsThemePage />
@@ -464,7 +473,7 @@ export default function App() {
             },
             {
               path: ':spaceId/repos/create',
-              element: <CreateRepo />
+              element: <CreateRepoV1 />
             },
             {
               path: ':spaceId/repos/import',
diff --git a/apps/gitness/src/pages-v2/repo/repo-create-page.tsx b/apps/gitness/src/pages-v2/repo/repo-create-page.tsx
new file mode 100644
index 0000000000..73601f6c7b
--- /dev/null
+++ b/apps/gitness/src/pages-v2/repo/repo-create-page.tsx
@@ -0,0 +1,73 @@
+import { useNavigate } from 'react-router-dom'
+
+import {
+  CreateRepositoryErrorResponse,
+  OpenapiCreateRepositoryRequest,
+  useCreateRepositoryMutation,
+  useListGitignoreQuery,
+  useListLicensesQuery
+} from '@harnessio/code-service-client'
+import { toast, Toaster } from '@harnessio/ui/components'
+import { FormFields, RepoCreatePage as RepoCreatePageView } from '@harnessio/ui/views'
+
+import { useGetSpaceURLParam } from '../../framework/hooks/useGetSpaceParam'
+
+export const CreateRepo = () => {
+  const createRepositoryMutation = useCreateRepositoryMutation({})
+  const spaceId = useGetSpaceURLParam()
+  const navigate = useNavigate()
+
+  const onSubmit = (data: FormFields) => {
+    const repositoryRequest: OpenapiCreateRepositoryRequest = {
+      default_branch: 'main',
+      parent_ref: spaceId,
+      description: data.description,
+      git_ignore: data.gitignore,
+      license: data.license,
+      is_public: data.access === '1',
+      readme: true,
+      identifier: data.name
+    }
+
+    createRepositoryMutation.mutate(
+      {
+        queryParams: {},
+        body: repositoryRequest
+      },
+      {
+        onSuccess: ({ body: data }) => {
+          navigate(`/${spaceId}/repos/${data?.identifier}`)
+        },
+        onError: (error: CreateRepositoryErrorResponse) => {
+          const message = error.message || 'An unknown error occurred.'
+          toast({
+            title: message,
+            variant: 'destructive'
+          })
+        }
+      }
+    )
+  }
+
+  const { data: { body: gitIgnoreOptions } = {} } = useListGitignoreQuery({})
+
+  const { data: { body: licenseOptions } = {} } = useListLicensesQuery({})
+
+  const onCancel = () => {
+    navigate(`/${spaceId}/repos`)
+  }
+
+  return (
+    <>
+      <RepoCreatePageView
+        onFormSubmit={onSubmit}
+        onFormCancel={onCancel}
+        isLoading={createRepositoryMutation.isLoading}
+        isSuccess={createRepositoryMutation.isSuccess}
+        gitIgnoreOptions={gitIgnoreOptions}
+        licenseOptions={licenseOptions}
+      />
+      <Toaster />
+    </>
+  )
+}
diff --git a/apps/gitness/src/pages/repo/repo-create-page.tsx b/apps/gitness/src/pages/repo/repo-create-page.tsx
index 9f6e71a196..55e29160b9 100644
--- a/apps/gitness/src/pages/repo/repo-create-page.tsx
+++ b/apps/gitness/src/pages/repo/repo-create-page.tsx
@@ -12,7 +12,7 @@ import { FormFields, RepoCreatePageForm } from '@harnessio/views'
 
 import { useGetSpaceURLParam } from '../../framework/hooks/useGetSpaceParam'
 
-export const CreateRepo = () => {
+export const CreateRepoV1 = () => {
   const createRepositoryMutation = useCreateRepositoryMutation({})
   const spaceId = useGetSpaceURLParam()
   const navigate = useNavigate()
diff --git a/packages/canary/src/components/toast.tsx b/packages/canary/src/components/toast.tsx
deleted file mode 100644
index 097c6eaa70..0000000000
--- a/packages/canary/src/components/toast.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '@/lib/utils'
-import { Cross2Icon } from '@radix-ui/react-icons'
-import * as ToastPrimitives from '@radix-ui/react-toast'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const toastVariants = cva(
-  'data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none',
-  {
-    variants: {
-      variant: {
-        default: 'bg-background text-foreground border',
-        destructive: 'destructive border-destructive bg-destructive text-destructive-foreground group'
-      }
-    },
-    defaultVariants: {
-      variant: 'default'
-    }
-  }
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      'hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-1 disabled:pointer-events-none disabled:opacity-50',
-      className
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      'text-foreground/50 hover:text-foreground absolute right-1 top-1 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <Cross2Icon className="size-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title ref={ref} className={cn('text-sm font-semibold [&+div]:text-xs', className)} {...props} />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description ref={ref} className={cn('text-sm opacity-90', className)} {...props} />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction
-}
diff --git a/packages/canary/src/index.ts b/packages/canary/src/index.ts
index c9afd6a081..be494c8fb6 100644
--- a/packages/canary/src/index.ts
+++ b/packages/canary/src/index.ts
@@ -38,12 +38,9 @@ export * from './components/switch'
 export * from './components/table'
 export * from './components/tabs'
 export * from './components/text'
-export * from './components/toast'
-// export * from './components/toaster' Duplicate with sooner! Use sooner's Toaster instead
 export * from './components/toggle-group'
 export * from './components/toggle'
 export * from './components/tooltip'
-export * from './components/use-toast'
 export * from './lib/utils'
 export * from './lib/CanaryOutletFactory'
 export * from './components/treeview'
diff --git a/packages/ui/src/components/badge.tsx b/packages/ui/src/components/badge.tsx
index a4cc554ea6..7530f38bf7 100644
--- a/packages/ui/src/components/badge.tsx
+++ b/packages/ui/src/components/badge.tsx
@@ -17,24 +17,24 @@ enum BadgesHoverStates {
 }
 
 const badgeVariants = cva(
-  'focus:ring-ring inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
+  'inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow',
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
         outline: 'text-foreground'
       },
       size: {
         default: 'px-2.5 py-0.5 text-xs font-semibold',
         lg: 'px-3 py-1 text-xs font-normal',
-        sm: 'text-12 h-5 px-1 leading-none',
-        xs: 'text-11 px-1.5 py-0 font-light',
+        sm: 'h-5 px-1 text-12 leading-none',
+        xs: 'px-1.5 py-0 text-11 font-light',
         // TODO: Consider switching size variants to numeric values
         // Numeric size variants (like '18') provide clearer context about actual dimensions
         // compared to abstract sizes (xs, sm, lg).
-        '18': 'text-12 h-[18px] px-2'
+        '18': 'h-[18px] px-2 text-12'
       },
       borderRadius: {
         default: '',
diff --git a/packages/ui/src/components/button-group.tsx b/packages/ui/src/components/button-group.tsx
index 25441832b3..dffe1edda9 100644
--- a/packages/ui/src/components/button-group.tsx
+++ b/packages/ui/src/components/button-group.tsx
@@ -1,16 +1,22 @@
-import React from 'react'
+import { ReactNode } from 'react'
 
 import { cn } from '@utils/cn'
 
 interface ButtonGroupProps {
-  children: React.ReactNode
+  children: ReactNode
   direction?: 'horizontal' | 'vertical'
   className?: string
   spacing?: string
   verticalAlign?: string
 }
 
-function Root({ children, direction = 'horizontal', className, spacing = '4', verticalAlign }: ButtonGroupProps) {
+export function ButtonGroup({
+  children,
+  direction = 'horizontal',
+  className,
+  spacing = '4',
+  verticalAlign
+}: ButtonGroupProps) {
   const gapClass = `gap-${spacing}`
   const verticalAlignClass = verticalAlign ? `items-${verticalAlign}` : ''
 
@@ -20,5 +26,3 @@ function Root({ children, direction = 'horizontal', className, spacing = '4', ve
     </div>
   )
 }
-
-export { Root }
diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
index 3622530848..cacb86d8ce 100644
--- a/packages/ui/src/components/button.tsx
+++ b/packages/ui/src/components/button.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react'
 
 import { Slot } from '@radix-ui/react-slot'
 import { CanaryOutletFactory, CanaryOutletName } from '@utils/CanaryOutletFactory'
@@ -6,15 +6,17 @@ import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium transition-colors disabled:cursor-not-allowed',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
-        outline: 'border-borders-2 bg-transparent hover:bg-accent hover:text-accent-foreground border shadow-sm',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
-        tertiary: 'bg-tertiary text-secondary-foreground hover:bg-tertiary/80 shadow-sm',
+        default:
+          'bg-background-5 text-foreground-6 hover:bg-background-10 disabled:bg-background-6 disabled:text-foreground-9',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-borders-2 bg-transparent text-foreground-2 hover:border-borders-6 hover:text-foreground-8',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        tertiary: 'bg-tertiary text-secondary-foreground shadow-sm hover:bg-tertiary/80',
         ghost: 'hover:bg-background-12 hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         link_accent: 'text-foreground-accent underline-offset-4 hover:underline',
@@ -64,17 +66,15 @@ const buttonVariants = cva(
   }
 )
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean
   loading?: boolean
-  spinner?: React.ReactNode
-  dropdown?: React.ReactNode
+  spinner?: ReactNode
+  dropdown?: ReactNode
   gradientType?: string
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       className,
diff --git a/packages/ui/src/components/card.tsx b/packages/ui/src/components/card.tsx
index 758e35e3bd..10db6b8cf8 100644
--- a/packages/ui/src/components/card.tsx
+++ b/packages/ui/src/components/card.tsx
@@ -3,7 +3,7 @@ import { forwardRef, HTMLAttributes } from 'react'
 import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-const cardVariants = cva('bg-card text-card-foreground rounded-lg border shadow', {
+const cardVariants = cva('rounded-lg border bg-card text-card-foreground shadow', {
   variants: {
     variant: {
       default: '',
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index f309c51baf..3a05a899cd 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <Cross2Icon className="size-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
index ef079416fd..f650662b78 100644
--- a/packages/ui/src/components/dropdown-menu.tsx
+++ b/packages/ui/src/components/dropdown-menu.tsx
@@ -126,9 +126,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     checked={checked}
     {...props}
   >
-    <span className="border-borders-9 group-data-[state=checked]:border-icons-2 absolute left-2 flex size-4 items-center justify-center rounded-sm border">
-      <DropdownMenuPrimitive.ItemIndicator className="bg-icons-2 flex size-full items-center justify-center">
-        <Icon className="text-icons-5 h-[7px]" name="checkbox" />
+    <span className="absolute left-2 flex size-4 items-center justify-center rounded-sm border border-borders-9 group-data-[state=checked]:border-icons-2">
+      <DropdownMenuPrimitive.ItemIndicator className="flex size-full items-center justify-center bg-icons-2">
+        <Icon className="h-[7px] text-icons-5" name="checkbox" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     <span className="text-14 text-foreground-8">{children}</span>
diff --git a/packages/ui/src/components/filters/filter-trigger.tsx b/packages/ui/src/components/filters/filter-trigger.tsx
index eb6d84b756..3a83d83600 100644
--- a/packages/ui/src/components/filters/filter-trigger.tsx
+++ b/packages/ui/src/components/filters/filter-trigger.tsx
@@ -1,6 +1,6 @@
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@components/dropdown-menu'
+import { Input } from '@components/form'
 import { Icon } from '@components/icon'
-import { Input } from '@components/input'
 import { TFunction } from 'i18next'
 
 import { FilterOption, SortOption } from './types'
diff --git a/packages/ui/src/components/filters/filters-bar/filter-variants/calendar.tsx b/packages/ui/src/components/filters/filters-bar/filter-variants/calendar.tsx
index 790b6b29b1..432027cc13 100644
--- a/packages/ui/src/components/filters/filters-bar/filter-variants/calendar.tsx
+++ b/packages/ui/src/components/filters/filters-bar/filter-variants/calendar.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 
 import { Calendar as UICalendar, type CalendarDateRange } from '@components/calendar'
-import { Input } from '@components/input'
+import { Input } from '@components/form'
 import { cn } from '@utils/cn'
 
 import { FilterValue } from '../../types'
diff --git a/packages/ui/src/components/filters/filters-bar/filter-variants/checkbox.tsx b/packages/ui/src/components/filters/filters-bar/filter-variants/checkbox.tsx
index 8b5050ba94..0b3cb9be89 100644
--- a/packages/ui/src/components/filters/filters-bar/filter-variants/checkbox.tsx
+++ b/packages/ui/src/components/filters/filters-bar/filter-variants/checkbox.tsx
@@ -1,6 +1,6 @@
 import { DropdownMenuCheckboxItem } from '@components/dropdown-menu'
+import { Input } from '@components/form'
 import { Icon } from '@components/icon'
-import { Input } from '@components/input'
 
 import { CheckboxFilterOption, FilterValue } from '../../types'
 import { UseFiltersReturn } from '../../use-filters'
diff --git a/packages/ui/src/components/filters/filters-bar/filter-variants/number.tsx b/packages/ui/src/components/filters/filters-bar/filter-variants/number.tsx
index 85a21bed29..9a7ba013c1 100644
--- a/packages/ui/src/components/filters/filters-bar/filter-variants/number.tsx
+++ b/packages/ui/src/components/filters/filters-bar/filter-variants/number.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 
+import { Input } from '@components/form'
 import { Icon } from '@components/icon'
-import { Input } from '@components/input'
 
 import { FilterValue } from '../../types'
 import { UseFiltersReturn } from '../../use-filters'
diff --git a/packages/ui/src/components/filters/filters-bar/filter-variants/text.tsx b/packages/ui/src/components/filters/filters-bar/filter-variants/text.tsx
index e877f2f642..0b7a0d14cc 100644
--- a/packages/ui/src/components/filters/filters-bar/filter-variants/text.tsx
+++ b/packages/ui/src/components/filters/filters-bar/filter-variants/text.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react'
 
 import { DropdownMenuItem } from '@components/dropdown-menu'
+import { Input } from '@components/form'
 import { Icon } from '@components/icon'
-import { Input } from '@components/input'
 
 import { FilterValue } from '../../types'
 import { UseFiltersReturn } from '../../use-filters'
diff --git a/packages/ui/src/components/filters/filters-bar/filters.tsx b/packages/ui/src/components/filters/filters-bar/filters.tsx
index a1063bc0e2..7aed6d7b48 100644
--- a/packages/ui/src/components/filters/filters-bar/filters.tsx
+++ b/packages/ui/src/components/filters/filters-bar/filters.tsx
@@ -84,8 +84,8 @@ const Filters = ({
 
   return (
     <DropdownMenu key={filter.type} open={isOpen} onOpenChange={setIsOpen}>
-      <DropdownMenuTrigger className="bg-background-3 hover:bg-background-8 flex h-8 items-center gap-x-3 whitespace-nowrap rounded pl-2.5 pr-2 transition-colors duration-200">
-        <div className="text-13 flex items-center gap-x-1.5">
+      <DropdownMenuTrigger className="flex h-8 items-center gap-x-3 whitespace-nowrap rounded bg-background-3 pl-2.5 pr-2 transition-colors duration-200 hover:bg-background-8">
+        <div className="flex items-center gap-x-1.5 text-13">
           <span className="text-foreground-1">
             {filterOption.label}
             {!!filter.selectedValues.length && ': '}
@@ -107,7 +107,7 @@ const Filters = ({
               <span className="text-14 text-foreground-4">{filterOption.label}</span>
 
               <DropdownMenu>
-                <DropdownMenuTrigger className="bg-background-3 text-14 text-foreground-2 flex h-[18px] items-center gap-x-1 rounded pl-1.5 pr-1">
+                <DropdownMenuTrigger className="flex h-[18px] items-center gap-x-1 rounded bg-background-3 pl-1.5 pr-1 text-14 text-foreground-2">
                   {filterOption.conditions?.find(c => c.value === filter.condition)?.label}
                   <Icon className="chevron-down text-icons-1" name="chevron-down" size={10} />
                 </DropdownMenuTrigger>
@@ -127,17 +127,17 @@ const Filters = ({
             <DropdownMenu>
               <DropdownMenuTrigger className="group flex h-[18px] items-center px-1">
                 <Icon
-                  className="text-icons-1 group-hover:text-foreground-1 transition-colors duration-200"
+                  className="text-icons-1 transition-colors duration-200 group-hover:text-foreground-1"
                   name="more-dots-fill"
                   size={12}
                 />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start">
                 <DropdownMenuItem
-                  className="text-foreground-4 hover:text-foreground-danger data-[highlighted]:text-foreground-danger duration-200 data-[highlighted]:bg-transparent data-[highlighted]:outline-none"
+                  className="text-foreground-4 duration-200 hover:text-foreground-danger data-[highlighted]:bg-transparent data-[highlighted]:text-foreground-danger data-[highlighted]:outline-none"
                   onSelect={() => handleRemoveFilter?.(filter.type)}
                 >
-                  <button className="text-14 flex items-center gap-x-1.5">
+                  <button className="flex items-center gap-x-1.5 text-14">
                     <Icon name="trash" size={12} />
                     Delete filter
                   </button>
@@ -153,7 +153,7 @@ const Filters = ({
 
           {filterOption.type === 'checkbox' && getFilteredOptions(filterOption, filter, searchQueries).length === 0 && (
             <div className="flex items-center justify-center p-4">
-              <span className="text-1 text-foreground-2 leading-none">No results</span>
+              <span className="text-1 leading-none text-foreground-2">No results</span>
             </div>
           )}
         </div>
diff --git a/packages/ui/src/components/filters/filters-bar/sorts.tsx b/packages/ui/src/components/filters/filters-bar/sorts.tsx
index ebc53f38ae..c9cda74c13 100644
--- a/packages/ui/src/components/filters/filters-bar/sorts.tsx
+++ b/packages/ui/src/components/filters/filters-bar/sorts.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
 
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@components/dropdown-menu'
+import { Input } from '@components/form'
 import { Icon } from '@components/icon'
-import { Input } from '@components/input'
 import { closestCenter, DndContext } from '@dnd-kit/core'
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
@@ -47,7 +47,7 @@ const SortableItem = ({
       <div className="flex items-center justify-between gap-x-2">
         <div className="flex items-center gap-x-2">
           <div
-            className="hover:bg-background-3 cursor-grab rounded p-1 active:cursor-grabbing"
+            className="cursor-grab rounded p-1 hover:bg-background-3 active:cursor-grabbing"
             {...attributes}
             {...listeners}
           >
@@ -55,7 +55,7 @@ const SortableItem = ({
           </div>
 
           <DropdownMenu>
-            <DropdownMenuTrigger className="border-borders-1 text-14 text-foreground-8 flex h-6 items-center gap-x-1.5 rounded border pl-2.5 pr-1.5">
+            <DropdownMenuTrigger className="flex h-6 items-center gap-x-1.5 rounded border border-borders-1 pl-2.5 pr-1.5 text-14 text-foreground-8">
               {sortOptions.find(opt => opt.value === sort.type)?.label}
               <Icon className="chevron-down text-icons-1" name="chevron-down" size={10} />
             </DropdownMenuTrigger>
@@ -72,7 +72,7 @@ const SortableItem = ({
           </DropdownMenu>
 
           <DropdownMenu>
-            <DropdownMenuTrigger className="border-borders-1 text-14 text-foreground-8 flex h-6 items-center gap-x-1.5 rounded border pl-2.5 pr-1.5">
+            <DropdownMenuTrigger className="flex h-6 items-center gap-x-1.5 rounded border border-borders-1 pl-2.5 pr-1.5 text-14 text-foreground-8">
               {sortDirections.find(dir => dir.value === sort.direction)?.label}
               <Icon className="chevron-down text-icons-1" name="chevron-down" size={10} />
             </DropdownMenuTrigger>
@@ -90,7 +90,7 @@ const SortableItem = ({
         </div>
 
         <button
-          className="text-foreground-4 hover:text-foreground-1 p-1 transition-colors duration-200 focus:bg-transparent"
+          className="p-1 text-foreground-4 transition-colors duration-200 hover:text-foreground-1 focus:bg-transparent"
           onClick={e => {
             e.preventDefault()
             onRemoveSort?.(index)
@@ -152,7 +152,7 @@ const Sorts = ({
 
   return (
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-      <DropdownMenuTrigger className="bg-background-3 hover:bg-background-8 flex h-8 items-center gap-x-3 whitespace-nowrap rounded px-2.5 transition-colors duration-200">
+      <DropdownMenuTrigger className="flex h-8 items-center gap-x-3 whitespace-nowrap rounded bg-background-3 px-2.5 transition-colors duration-200 hover:bg-background-8">
         <div className="flex items-center gap-x-1">
           <Icon
             className={cn('text-icons-1', getSortTriggerLabel(activeSorts, sortOptions).isDescending && 'rotate-180')}
@@ -190,12 +190,12 @@ const Sorts = ({
         <div className="mt-3 flex flex-col gap-y-2.5">
           {sortOptions.some(option => !activeSorts.some(sort => sort.type === option.value)) && (
             <DropdownMenu>
-              <DropdownMenuTrigger className="text-14 text-foreground-4 hover:text-foreground-1 flex w-full items-center gap-x-1.5 transition-colors duration-200">
+              <DropdownMenuTrigger className="flex w-full items-center gap-x-1.5 text-14 text-foreground-4 transition-colors duration-200 hover:text-foreground-1">
                 <Icon name="plus" size={12} />
                 Add sort
               </DropdownMenuTrigger>
               <DropdownMenuContent className="min-w-[224px] p-0" align="start">
-                <div className="border-borders-4 relative flex items-center justify-between border-b px-3 py-2.5">
+                <div className="relative flex items-center justify-between border-b border-borders-4 px-3 py-2.5">
                   <DropdownMenuItem className="hover:bg-transparent focus:bg-transparent" asChild>
                     <Input
                       type="text"
@@ -210,7 +210,7 @@ const Sorts = ({
                   {searchQueries.menu['sort'] && (
                     <DropdownMenuItem className="absolute right-3 hover:bg-transparent focus:bg-transparent" asChild>
                       <button
-                        className="text-foreground-4 hover:text-foreground-1 flex transition-colors duration-200"
+                        className="flex text-foreground-4 transition-colors duration-200 hover:text-foreground-1"
                         onClick={e => {
                           e.preventDefault()
                           handleSearchChange('sort', '', 'menu')
@@ -239,7 +239,7 @@ const Sorts = ({
 
                   {filteredBySearchSortOptions.length === 0 && (
                     <div className="flex items-center justify-center p-4">
-                      <span className="text-1 text-foreground-2 leading-none">No results</span>
+                      <span className="text-1 leading-none text-foreground-2">No results</span>
                     </div>
                   )}
                 </div>
@@ -248,10 +248,10 @@ const Sorts = ({
           )}
 
           <DropdownMenuItem
-            className="text-foreground-4 focus:text-foreground-danger data-[highlighted]:text-foreground-danger p-0 transition-colors duration-200 focus:bg-transparent focus:outline-none data-[highlighted]:bg-transparent"
+            className="p-0 text-foreground-4 transition-colors duration-200 focus:bg-transparent focus:text-foreground-danger focus:outline-none data-[highlighted]:bg-transparent data-[highlighted]:text-foreground-danger"
             asChild
           >
-            <button className="text-14 flex items-center gap-x-1.5" onClick={handleResetSorts}>
+            <button className="flex items-center gap-x-1.5 text-14" onClick={handleResetSorts}>
               <Icon name="trash" size={12} />
               Delete sort
             </button>
diff --git a/packages/ui/src/components/form-error-message.tsx b/packages/ui/src/components/form-error-message.tsx
deleted file mode 100644
index a76f89c1ed..0000000000
--- a/packages/ui/src/components/form-error-message.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { HTMLAttributes } from 'react'
-
-import { cn } from '@utils/cn'
-
-import { Text } from './text'
-
-export enum ErrorMessageTheme {
-  SUCCESS = 'success',
-  WARNING = 'warning',
-  ERROR = 'error',
-  DEFAULT = 'default'
-}
-
-interface FormErrorMessageProps extends HTMLAttributes<HTMLDivElement> {
-  theme: ErrorMessageTheme
-}
-
-const themeClassMap: Record<ErrorMessageTheme, string> = {
-  [ErrorMessageTheme.SUCCESS]: 'text-success',
-  [ErrorMessageTheme.WARNING]: 'text-warning',
-  [ErrorMessageTheme.ERROR]: 'text-foreground-danger',
-  [ErrorMessageTheme.DEFAULT]: 'text-tertiary-background'
-}
-
-export function FormErrorMessage({ children, theme, className }: FormErrorMessageProps) {
-  const textClass = themeClassMap[theme]
-  const role = theme === ErrorMessageTheme.ERROR ? 'alert' : 'status'
-  const ariaLive = theme === ErrorMessageTheme.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>
-  )
-}
diff --git a/packages/ui/src/components/form-field-set.tsx b/packages/ui/src/components/form-field-set.tsx
deleted file mode 100644
index cd467d8a06..0000000000
--- a/packages/ui/src/components/form-field-set.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { cn } from '@utils/cn'
-
-import Checkbox from './filters/filters-bar/filter-variants/checkbox'
-import { RadioGroupItem } from './radio-group'
-import { Text } from './text'
-
-interface CompProps {
-  children: React.ReactNode
-  className?: string
-}
-
-interface RootProps {
-  children: React.ReactNode
-  box?: boolean
-  shaded?: boolean
-  className?: string
-}
-
-enum MessageTheme {
-  SUCCESS = 'success',
-  WARNING = 'warning',
-  ERROR = 'error',
-  DEFAULT = 'default'
-}
-
-interface MessageProps {
-  children: React.ReactNode
-  className?: string
-  theme: MessageTheme
-}
-
-interface ControlProps {
-  children: React.ReactNode
-  type?: 'button'
-  className?: string
-}
-
-type ControlType = React.ReactElement<typeof RadioGroupItem> | React.ReactElement<typeof Checkbox>
-
-interface OptionProps {
-  control: ControlType
-  id: string
-  label?: string
-  description?: string
-  className?: string
-}
-
-interface LabelProps {
-  children: React.ReactNode
-  htmlFor?: string
-  required?: boolean
-  className?: string
-}
-
-interface SeparatorProps {
-  className?: string
-  dashed?: boolean
-  dotted?: boolean
-}
-
-interface SpacerProps {
-  className?: string
-}
-
-const themeClassMap: Record<MessageTheme, string> = {
-  [MessageTheme.SUCCESS]: 'text-success',
-  [MessageTheme.WARNING]: 'text-warning',
-  [MessageTheme.ERROR]: 'text-destructive',
-  [MessageTheme.DEFAULT]: 'text-tertiary-background'
-}
-
-function Root({ children, box, shaded, className }: RootProps) {
-  return (
-    <fieldset
-      className={cn(
-        'mb-8 flex flex-col gap-6',
-        { 'rounded-md border px-5 py-3.5 pb-5': box, 'bg-primary/[0.02]': shaded },
-        className
-      )}
-      role="group"
-      aria-describedby="fieldset-description"
-    >
-      {children}
-    </fieldset>
-  )
-}
-
-function Legend({ children, className }: CompProps) {
-  return (
-    <Text size={3} weight={'medium'} className={cn('mb-0', className)} as="p" role="heading">
-      {children}
-    </Text>
-  )
-}
-
-function SubLegend({ children, className }: CompProps) {
-  return (
-    <Text size={2} weight={'normal'} className={cn('text-primary/70 mb-0', className)} as="p" id="fieldset-description">
-      {children}
-    </Text>
-  )
-}
-
-function Item({ children, className }: CompProps) {
-  return (
-    <div className={cn('item-wrapper', className)} role="presentation">
-      {children}
-    </div>
-  )
-}
-
-function Label({ htmlFor, required, children, className }: LabelProps) {
-  return (
-    <Label htmlFor={htmlFor} className={cn('text-primary/80 font-normal', className)}>
-      {children}
-      {required && <span className="pl-0.5 align-top text-destructive">*</span>}
-    </Label>
-  )
-}
-
-function ControlGroup({ children, type, className }: ControlProps) {
-  return (
-    <div
-      className={cn('flex flex-col gap-2', { 'mt-2': type === 'button' }, className)}
-      role="group"
-      aria-label={type === 'button' ? 'Button control group' : 'Input control group'}
-    >
-      {children}
-    </div>
-  )
-}
-
-function Caption({ children, className }: CompProps) {
-  return (
-    <Text as="p" size={1} color="tertiaryBackground" role="note" aria-live="polite" className={cn('mt-1', className)}>
-      {children}
-    </Text>
-  )
-}
-
-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={1} className="text-inherit">
-        {children}
-      </Text>
-    </div>
-  )
-}
-
-function Option({ control, id, label, description, className }: OptionProps) {
-  return (
-    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-    <div className={cn('mt-2 flex items-start gap-x-4', className)} role="option" aria-labelledby={`${id}-label`}>
-      <div className="mt-0.5">{control}</div>
-      <div className="flex flex-col gap-0">
-        <Label htmlFor={id} className="font-medium">
-          {label}
-        </Label>
-        {description && (
-          <Text as="p" size={1} color="tertiaryBackground" id={`${id}-description`} role="note">
-            {description}
-          </Text>
-        )}
-      </div>
-    </div>
-  )
-}
-
-function Separator({ dashed, dotted, className }: SeparatorProps) {
-  return (
-    <div
-      className={cn('border-b', { 'border-dashed': dashed, 'border-dotted': dotted }, className)}
-      role="separator"
-      aria-orientation="horizontal"
-    />
-  )
-}
-
-function Spacer({ className }: SpacerProps) {
-  return <div className={cn('mt-1', className)} role="presentation" aria-hidden="true" />
-}
-
-export { Root, Legend, SubLegend, Item, Label, ControlGroup, Caption, Message, Option, Separator, Spacer, MessageTheme }
diff --git a/packages/ui/src/components/form/caption.tsx b/packages/ui/src/components/form/caption.tsx
new file mode 100644
index 0000000000..0318d5bbe6
--- /dev/null
+++ b/packages/ui/src/components/form/caption.tsx
@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react'
+
+import { Text } from '@/components'
+import { cn } from '@utils/cn'
+
+interface CaptionProps extends PropsWithChildren {
+  className?: string
+}
+
+/**
+ * Caption component that renders supplementary text below form inputs.
+ * Used to provide additional context or hints for form fields.
+ * @example
+ * <Caption>This is a caption</Caption>
+ */
+export function Caption({ children, className }: CaptionProps) {
+  return (
+    <Text className={cn('text-foreground-4 mt-1 leading-snug', className)} size={2}>
+      {children}
+    </Text>
+  )
+}
diff --git a/packages/ui/src/components/form/checkbox.tsx b/packages/ui/src/components/form/checkbox.tsx
new file mode 100644
index 0000000000..09d62f6bbb
--- /dev/null
+++ b/packages/ui/src/components/form/checkbox.tsx
@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
+
+import { Icon } from '@/components'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { cn } from '@utils/cn'
+
+interface CheckboxProps extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {}
+
+/**
+ * Checkbox component that provides a customizable, accessible checkbox input.
+ * Built on top of Radix UI Checkbox primitive with additional styling.
+ * @example
+ * <Checkbox id="checkbox" checked={checkboxValue} onCheckedChange={checkboxChange} />
+ */
+const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  ({ className, ...props }, ref) => (
+    <div className={cn('flex gap-x-2.5', className)}>
+      <CheckboxPrimitive.Root
+        ref={ref}
+        className="border-icons-1 hover:border-icons-3 disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow disabled:cursor-not-allowed"
+        {...props}
+      >
+        <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+          <Icon className="h-1.5 w-2" name="checkbox" width={8} height={6} />
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+    </div>
+  )
+)
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/packages/ui/src/components/control-group.tsx b/packages/ui/src/components/form/control-group.tsx
similarity index 75%
rename from packages/ui/src/components/control-group.tsx
rename to packages/ui/src/components/form/control-group.tsx
index f06ed08215..ad6f907f5f 100644
--- a/packages/ui/src/components/control-group.tsx
+++ b/packages/ui/src/components/form/control-group.tsx
@@ -6,6 +6,13 @@ interface ControlGroupProps extends HTMLAttributes<HTMLDivElement> {
   type?: 'button' | 'input'
 }
 
+/**
+ * A container component that groups form control elements together.
+ * @example
+ * <ControlGroup type="button">
+ *   <Button>Button</Button>
+ * </ControlGroup>
+ */
 export function ControlGroup({ children, type, className, ...props }: ControlGroupProps) {
   return (
     <div
diff --git a/packages/ui/src/components/form/fieldset.tsx b/packages/ui/src/components/form/fieldset.tsx
new file mode 100644
index 0000000000..e3301afbc9
--- /dev/null
+++ b/packages/ui/src/components/form/fieldset.tsx
@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react'
+
+import { cn } from '@utils/cn'
+
+interface FieldsetProps extends HTMLAttributes<HTMLFieldSetElement> {
+  box?: boolean
+  shaded?: boolean
+}
+
+/**
+ * A form fieldset component that groups related form elements.
+ * @example
+ * <Fieldset box shaded>
+ *   <div>Form elements</div>
+ * </Fieldset>
+ */
+export function Fieldset({ children, box, shaded, className, ...props }: FieldsetProps) {
+  return (
+    <fieldset
+      className={cn(
+        'flex flex-col',
+        { 'rounded-md border px-5 py-3.5 pb-5': box, 'bg-primary/[0.02]': shaded },
+        className
+      )}
+      role="group"
+      aria-describedby="fieldset-description"
+      {...props}
+    >
+      {children}
+    </fieldset>
+  )
+}
diff --git a/packages/ui/src/components/form/index.ts b/packages/ui/src/components/form/index.ts
new file mode 100644
index 0000000000..76eb171368
--- /dev/null
+++ b/packages/ui/src/components/form/index.ts
@@ -0,0 +1,13 @@
+export * from './caption'
+export * from './checkbox'
+export * from './control-group'
+export * from './fieldset'
+export * from './input'
+export * from './label'
+export * from './legend'
+export * from './message'
+export * from './option'
+export * from './radio'
+export * from './select'
+export * from './textarea'
+export * from './separator'
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/form/input.tsx
similarity index 66%
rename from packages/ui/src/components/input.tsx
rename to packages/ui/src/components/form/input.tsx
index 7497df11c0..5ca0b0e1ec 100644
--- a/packages/ui/src/components/input.tsx
+++ b/packages/ui/src/components/form/input.tsx
@@ -1,13 +1,9 @@
-import { forwardRef, InputHTMLAttributes, ReactNode } from 'react'
+import { forwardRef, Fragment, InputHTMLAttributes, ReactNode } from 'react'
 
+import { Caption, ControlGroup, Label, Message, MessageTheme } from '@/components'
 import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-import { ControlGroup } from './control-group'
-import { ErrorMessageTheme, FormErrorMessage } from './form-error-message'
-import { Label } from './label'
-import { Text } from './text'
-
 export interface BaseInputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>,
     VariantProps<typeof inputVariants> {}
@@ -20,8 +16,8 @@ const inputVariants = cva('text-foreground-1 bg-transparent px-2.5 py-1 disabled
       extended: 'grow border-none focus-visible:outline-none'
     },
     size: {
-      32: 'h-8',
-      36: 'h-9'
+      sm: 'h-8',
+      md: 'h-9'
     },
     theme: {
       default:
@@ -32,7 +28,7 @@ const inputVariants = cva('text-foreground-1 bg-transparent px-2.5 py-1 disabled
   defaultVariants: {
     variant: 'default',
     theme: 'default',
-    size: 32
+    size: 'sm'
   }
 })
 
@@ -45,7 +41,7 @@ const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
 BaseInput.displayName = 'BaseInput'
 
 interface InputError {
-  theme: ErrorMessageTheme
+  theme: MessageTheme
   message?: string
 }
 
@@ -54,15 +50,30 @@ interface InputProps extends BaseInputProps {
   caption?: ReactNode
   error?: InputError
   optional?: boolean
+  className?: string
   wrapperClassName?: string
 }
 
+/**
+ * A form input component with support for labels, captions, and error messages.
+ * @example
+ * <Input
+ *   label="Email"
+ *   id="email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   caption="We'll never share your email"
+ *   error={{ theme: 'danger', message: 'Invalid email format' }}
+ * />
+ */
 const Input = forwardRef<HTMLInputElement, InputProps>(
   ({ label, caption, error, id, theme, disabled, optional, className, wrapperClassName, ...props }, ref) => {
+    const InputWrapper = error || caption || label || wrapperClassName ? ControlGroup : Fragment
+
     return (
-      <ControlGroup className={wrapperClassName}>
+      <InputWrapper className={wrapperClassName}>
         {label && (
-          <Label className="mb-2.5" color={disabled ? 'foreground-9' : 'foreground-2'} optional={optional} htmlFor={id}>
+          <Label className="mb-2.5" color={disabled ? 'disabled-dark' : 'secondary'} optional={optional} htmlFor={id}>
             {label}
           </Label>
         )}
@@ -75,16 +86,12 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           {...props}
         />
         {error && (
-          <FormErrorMessage className={cn(caption ? 'mt-1' : 'absolute top-full translate-y-1')} theme={error.theme}>
+          <Message className={cn(caption ? 'mt-1' : 'absolute top-full translate-y-1')} theme={error.theme}>
             {error.message}
-          </FormErrorMessage>
-        )}
-        {caption && (
-          <Text className="text-foreground-4 mt-1 leading-snug" size={2}>
-            {caption}
-          </Text>
+          </Message>
         )}
-      </ControlGroup>
+        {caption && <Caption>{caption}</Caption>}
+      </InputWrapper>
     )
   }
 )
diff --git a/packages/ui/src/components/label.tsx b/packages/ui/src/components/form/label.tsx
similarity index 78%
rename from packages/ui/src/components/label.tsx
rename to packages/ui/src/components/form/label.tsx
index 1bb52ba5b8..4261be91f5 100644
--- a/packages/ui/src/components/label.tsx
+++ b/packages/ui/src/components/form/label.tsx
@@ -12,15 +12,15 @@ const labelVariants = cva('peer-disabled:cursor-not-allowed peer-disabled:opacit
       default: 'text-sm font-normal leading-none'
     },
     color: {
-      'foreground-1': 'text-foreground-1',
-      'foreground-2': 'text-foreground-2',
-      'foreground-5': 'text-foreground-5',
-      'foreground-9': 'text-foreground-9'
+      primary: 'text-foreground-1',
+      secondary: 'text-foreground-2',
+      disabled: 'text-foreground-5',
+      'disabled-dark': 'text-foreground-9'
     }
   },
   defaultVariants: {
     variant: 'default',
-    color: 'foreground-1'
+    color: 'primary'
   }
 })
 
@@ -38,6 +38,12 @@ interface LabelProps extends VariantProps<typeof labelVariants>, PropsWithChildr
   className?: string
 }
 
+/**
+ * A Label component that wraps the Radix UI LabelPrimitive.Root component.
+ * It supports variant and color styling through class-variance-authority.
+ * @example
+ * <Label htmlFor="label" optional>Label</Label>
+ */
 const Label = ({ htmlFor, optional, color, variant, children, className }: LabelProps) => {
   return (
     <LabelRoot htmlFor={htmlFor} variant={variant} color={color} className={className}>
diff --git a/packages/ui/src/components/form/legend.tsx b/packages/ui/src/components/form/legend.tsx
new file mode 100644
index 0000000000..0c183d117a
--- /dev/null
+++ b/packages/ui/src/components/form/legend.tsx
@@ -0,0 +1,33 @@
+import { ReactNode } from 'react'
+
+import { Text } from '@components/text'
+
+interface LegendProps {
+  title: ReactNode
+  description?: ReactNode
+  className?: string
+}
+
+/**
+ * Legend component for form fieldsets
+ *
+ * @example
+ * <Legend
+ *   title="Personal Information"
+ *   description="Please fill in your details below"
+ * />
+ */
+export function Legend({ title, description, className }: LegendProps) {
+  return (
+    <div className={className}>
+      <Text size={3} weight={'medium'} as="p" role="heading">
+        {title}
+      </Text>
+      {description && (
+        <Text size={2} as="p" id="fieldset-description">
+          {description}
+        </Text>
+      )}
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/form/message.tsx b/packages/ui/src/components/form/message.tsx
new file mode 100644
index 0000000000..f57c83f9d1
--- /dev/null
+++ b/packages/ui/src/components/form/message.tsx
@@ -0,0 +1,49 @@
+import { HTMLAttributes } from 'react'
+
+import { Text } from '@/components'
+import { cn } from '@utils/cn'
+
+export enum MessageTheme {
+  SUCCESS = 'success',
+  WARNING = 'warning',
+  ERROR = 'error',
+  DEFAULT = 'default'
+}
+
+interface MessageProps extends HTMLAttributes<HTMLDivElement> {
+  theme: MessageTheme
+}
+
+const themeClassMap: Record<MessageTheme, string> = {
+  [MessageTheme.SUCCESS]: 'text-success',
+  [MessageTheme.WARNING]: 'text-warning',
+  [MessageTheme.ERROR]: 'text-foreground-danger',
+  [MessageTheme.DEFAULT]: 'text-tertiary-background'
+}
+
+/**
+ * Message component for displaying status or error messages with different themes.
+ * This component is typically used in forms to provide feedback to users, such as success, warning, or error messages.
+ *
+ * @example
+ * <Message theme={MessageTheme.ERROR}>
+ *   This field is required
+ * </Message>
+ *
+ * <Message theme={MessageTheme.SUCCESS}>
+ *   Changes saved successfully
+ * </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>
+  )
+}
diff --git a/packages/ui/src/components/form/option.tsx b/packages/ui/src/components/form/option.tsx
new file mode 100644
index 0000000000..b1db2a01cd
--- /dev/null
+++ b/packages/ui/src/components/form/option.tsx
@@ -0,0 +1,55 @@
+import { FC, ReactElement, ReactNode } from 'react'
+
+import { Checkbox, Label, RadioButton, Text } from '@/components'
+import { cn } from '@utils/cn'
+
+type ControlType = ReactElement<typeof RadioButton> | ReactElement<typeof Checkbox>
+
+interface OptionProps {
+  control: ControlType
+  id: string
+  label?: string
+  description?: string | ReactNode
+  className?: string
+  ariaSelected?: boolean
+}
+
+/**
+ * Individual item that contains a control (radio button or checkbox) with optional label and description
+ * @example
+ * <Option
+ *   control={<RadioButton value="option1" />}
+ *   id="option1"
+ *   label="Option 1"
+ *   description="Description for Option 1"
+ * />
+ */
+export const Option: FC<OptionProps> = ({ control, id, label, description, ariaSelected, className }) => {
+  return (
+    <div
+      className={cn('flex items-start', className)}
+      role="option"
+      aria-labelledby={`${id}-label`}
+      aria-selected={ariaSelected}
+    >
+      {control}
+      <div className="flex flex-col gap-0">
+        <Label htmlFor={id} className="cursor-pointer pl-4 font-medium leading-tight">
+          {label}
+        </Label>
+        {description && (
+          <Text
+            className="ml-4 mt-1.5 leading-snug tracking-tight"
+            as="p"
+            size={2}
+            color="tertiaryBackground"
+            id={`${id}-description`}
+            role="note"
+          >
+            {description}
+          </Text>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/form/radio.tsx b/packages/ui/src/components/form/radio.tsx
new file mode 100644
index 0000000000..bd7210b7bf
--- /dev/null
+++ b/packages/ui/src/components/form/radio.tsx
@@ -0,0 +1,47 @@
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
+
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { cn } from '@utils/cn'
+
+/**
+ * A container component for radio group items
+ * @component
+ * @example
+ * <RadioGroup onValueChange={(value) => console.log(value)}>
+ *   <RadioGroupItem control={<RadioButton />} id="option1" label="Option 1" />
+ * </RadioGroup>
+ */
+const RadioGroup = forwardRef<
+  ElementRef<typeof RadioGroupPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return <RadioGroupPrimitive.Root className={cn('grid gap-5', className)} {...props} ref={ref} />
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+/**
+ * A styled radio button input component
+ * @component
+ * @example
+ * <RadioButton value="option1" name="group" />
+ */
+const RadioButton = forwardRef<
+  ElementRef<typeof RadioGroupPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'relative border-primary hover:border-icons-3 text-icons-5 aspect-square h-4 w-4 rounded-full border shadow focus-visible:rounded-full disabled:cursor-not-allowed disabled:border-icons-4 flex items-center justify-center',
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="size-2 rounded-full bg-primary" />
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioButton.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioButton }
diff --git a/packages/ui/src/components/form/select.tsx b/packages/ui/src/components/form/select.tsx
new file mode 100644
index 0000000000..f5e1d79677
--- /dev/null
+++ b/packages/ui/src/components/form/select.tsx
@@ -0,0 +1,168 @@
+// ToDo: Need to be reviewed by the XD team
+
+import { Children, ComponentPropsWithoutRef, ElementRef, FC, forwardRef, PropsWithChildren, ReactNode } from 'react'
+
+import { Caption, Label, Message, MessageTheme } from '@/components'
+import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { cn } from '@utils/cn'
+
+interface SelectError {
+  theme: MessageTheme
+  message?: string
+}
+
+interface SelectProps extends PropsWithChildren, SelectPrimitive.SelectProps {
+  label?: string
+  error?: SelectError
+  caption?: ReactNode
+  disabled?: boolean
+  placeholder: string
+}
+
+/**
+ * A customizable select component that supports labels, error states, and captions
+ * @example
+ * <Select name="select" label="Select an option" placeholder="Select an option">
+ *   <SelectItem value="option1">Option 1</SelectItem>
+ *   <SelectItem value="option2">Option 2</SelectItem>
+ * </Select>
+ */
+const Select: FC<SelectProps> = ({
+  name,
+  label,
+  error,
+  caption,
+  disabled = false,
+  placeholder,
+  children,
+  ...props
+}) => (
+  <SelectPrimitive.Root {...props}>
+    {label && (
+      <Label className="mb-2.5" color={disabled ? 'disabled-dark' : 'secondary'} htmlFor={name}>
+        {label}
+      </Label>
+    )}
+    <SelectTrigger id={name} disabled={disabled}>
+      <SelectValue placeholder={placeholder} />
+    </SelectTrigger>
+    {children}
+    {error && (
+      <Message className={cn(caption ? 'mt-1' : 'absolute top-full translate-y-1')} theme={error.theme}>
+        {error.message}
+      </Message>
+    )}
+    {caption && <Caption>{caption}</Caption>}
+  </SelectPrimitive.Root>
+)
+Select.displayName = SelectPrimitive.Root.displayName
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+/**
+ * The trigger button for the select dropdown
+ */
+const SelectTrigger = forwardRef<
+  ElementRef<typeof SelectPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { iconClassName?: string }
+>(({ className, children, iconClassName, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'border-borders-2 ring-offset-background placeholder:text-foreground-2 flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:rounded disabled:cursor-not-allowed disabled:border-borders-1 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDownIcon className={cn('h-4 w-4', iconClassName)} />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+/**
+ * The content container for the select dropdown
+ */
+const SelectContent = forwardRef<
+  ElementRef<typeof SelectPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] max-w-[var(--radix-popper-anchor-width)] overflow-hidden rounded-md box-border shadow-md',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1 rounded-md border',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {Children.count(children) > 0 ? children : <div className="pl-2">Nothing to select</div>}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+/**
+ * A label component for grouping select items
+ */
+const SelectLabel = forwardRef<
+  ElementRef<typeof SelectPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn('px-2 py-1.5 text-sm font-semibold', className)} {...props} />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+/**
+ * An individual selectable item within the dropdown
+ */
+const SelectItem = forwardRef<
+  ElementRef<typeof SelectPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:outline-none',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex size-3.5 items-center justify-center outline-none">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="size-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+/**
+ * A visual separator between select items
+ */
+const SelectSeparator = forwardRef<
+  ElementRef<typeof SelectPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cn('bg-muted -mx-1 my-1 h-px', className)} {...props} />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator }
diff --git a/packages/ui/src/components/form/separator.tsx b/packages/ui/src/components/form/separator.tsx
new file mode 100644
index 0000000000..f59ee67d56
--- /dev/null
+++ b/packages/ui/src/components/form/separator.tsx
@@ -0,0 +1,29 @@
+import { cn } from '@utils/cn'
+
+interface FormSeparatorProps {
+  dashed?: boolean
+  dotted?: boolean
+  className?: string
+}
+
+/**
+ * A horizontal separator component for forms
+ * @example
+ * // Basic usage
+ * <FormSeparator />
+ *
+ * // With dashed style
+ * <FormSeparator dashed />
+ *
+ * // With custom className
+ * <FormSeparator className="my-4" />
+ */
+export function FormSeparator({ dashed, dotted, className }: FormSeparatorProps) {
+  return (
+    <div
+      className={cn('border-b', { 'border-dashed': dashed, 'border-dotted': dotted }, className)}
+      role="separator"
+      aria-orientation="horizontal"
+    />
+  )
+}
diff --git a/packages/ui/src/components/form/textarea.tsx b/packages/ui/src/components/form/textarea.tsx
new file mode 100644
index 0000000000..c97fa6bca6
--- /dev/null
+++ b/packages/ui/src/components/form/textarea.tsx
@@ -0,0 +1,57 @@
+import { forwardRef, ReactNode, TextareaHTMLAttributes } from 'react'
+
+import { Caption, ControlGroup, Label, Message, MessageTheme } from '@/components'
+import { cn } from '@utils/cn'
+
+interface TextareaError {
+  theme: MessageTheme
+  message?: string
+}
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string
+  caption?: ReactNode
+  error?: TextareaError
+  optional?: boolean
+}
+
+/**
+ * A forward-ref Textarea component with support for labels, captions, and error messages.
+ * @example
+ * <Textarea name="textarea" label="Textarea" placeholder="Enter text here" />
+ */
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ id, disabled, label, caption, error, optional, className, ...props }, ref) => {
+    return (
+      <ControlGroup>
+        {label && (
+          <Label className="mb-2.5" color={disabled ? 'disabled-dark' : 'secondary'} optional={optional} htmlFor={id}>
+            {label}
+          </Label>
+        )}
+        <textarea
+          className={cn(
+            'placeholder:text-foreground-4 flex min-h-[74px] w-full rounded border bg-transparent px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:rounded disabled:cursor-not-allowed resize-none',
+            className,
+            error
+              ? 'border-borders-danger'
+              : 'border-borders-2 focus-visible:border-borders-3 disabled:placeholder:text-foreground-9 disabled:border-borders-1'
+          )}
+          id={id}
+          disabled={disabled}
+          ref={ref}
+          {...props}
+        />
+        {error && (
+          <Message className={cn(caption ? 'mt-1' : 'absolute top-full translate-y-1')} theme={error.theme}>
+            {error.message}
+          </Message>
+        )}
+        {caption && <Caption>{caption}</Caption>}
+      </ControlGroup>
+    )
+  }
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 77e1f4af85..6abddc994d 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,7 +1,6 @@
 export * from './alert'
 export * from './icon'
 export * from './button'
-export * from './input'
 export * from './more-submenu'
 export * from './settings-menu'
 export * from './sheet'
@@ -17,18 +16,17 @@ export * from './alert-dialog'
 export * from './popover'
 export * from './avatar'
 export * from './navbar'
-export * from './label'
-export * from './select'
 export * from './theme-selector'
 export * from './theme-selector/types'
 export * from './no-data'
 export * from './tabs'
 export * from './command'
 export * from './search-files'
+export * from './toast'
+export * from './styled-link'
 export * from './skeleton'
 export * from './table'
 export * from './commit-copy-actions'
-export * from './textarea'
 export * from './accordion'
 export * from './breadcrumb'
 export * from './skeleton-list'
@@ -36,8 +34,8 @@ export * from './dialog'
 export * from './path-breadcrumbs'
 export * from './card'
 export * from './input-otp'
-export * from './control-group'
-export * from './form-error-message'
+export * from './form'
+export * from './button-group'
 
 export * as ShaBadge from './sha-badge'
 export * as ListActions from './list-actions'
@@ -45,7 +43,6 @@ export * as ListPagination from './list-pagination'
 export * as SearchBox from './search-box'
 export * as NavbarProjectChooser from './navbar-project-chooser'
 export * as StackedList from './stacked-list'
-export * as ButtonGroup from './button-group'
 export * as FileExplorer from './file-explorer'
 
 export type * from './navbar/types'
diff --git a/packages/ui/src/components/input-otp.tsx b/packages/ui/src/components/input-otp.tsx
index e82a54665e..049f1fd6ca 100644
--- a/packages/ui/src/components/input-otp.tsx
+++ b/packages/ui/src/components/input-otp.tsx
@@ -48,7 +48,7 @@ const InputOTPSlot = forwardRef<HTMLDivElement, InputOTPSlotProps>(({ index, cla
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-background-5 h-4 w-px duration-1000" />
+          <div className="animate-caret-blink h-4 w-px bg-background-5 duration-1000" />
         </div>
       )}
     </div>
diff --git a/packages/ui/src/components/manage-navigation/index.tsx b/packages/ui/src/components/manage-navigation/index.tsx
index 123e31f24f..9e1df9ed80 100644
--- a/packages/ui/src/components/manage-navigation/index.tsx
+++ b/packages/ui/src/components/manage-navigation/index.tsx
@@ -127,7 +127,7 @@ export const ManageNavigation = ({
         </AlertDialogHeader>
         <ScrollArea className="-mx-5 -mb-5 mt-1">
           <div className="px-5">
-            <Text className="text-foreground-7 inline-block leading-none" size={1}>
+            <Text className="inline-block leading-none text-foreground-7" size={1}>
               Pinned
             </Text>
             {!currentPinnedItems.length ? (
@@ -200,7 +200,7 @@ export const ManageNavigation = ({
           </div>
         </ScrollArea>
         <AlertDialogFooter>
-          <ButtonGroup.Root>
+          <ButtonGroup>
             {!submitted ? (
               <>
                 <Button variant="outline" onClick={handleCancel} disabled={isSubmitting}>
@@ -223,7 +223,7 @@ export const ManageNavigation = ({
                 <Icon name="tick" size={14} />
               </Button>
             )}
-          </ButtonGroup.Root>
+          </ButtonGroup>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/packages/ui/src/components/radio-group.tsx b/packages/ui/src/components/radio-group.tsx
deleted file mode 100644
index 32d4bda0b4..0000000000
--- a/packages/ui/src/components/radio-group.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react'
-
-import { CheckIcon } from '@radix-ui/react-icons'
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
-import { cn } from '@utils/cn'
-
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
-
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        'border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="size-3.5 fill-primary" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  )
-})
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
-
-export { RadioGroup, RadioGroupItem }
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
deleted file mode 100644
index cdb9f42969..0000000000
--- a/packages/ui/src/components/select.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-// ToDo: Need to be reviewed by the XD team
-
-import * as React from 'react'
-
-import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'
-import * as SelectPrimitive from '@radix-ui/react-select'
-import { cn } from '@utils/cn'
-
-const Select = SelectPrimitive.Root
-
-const SelectGroup = SelectPrimitive.Group
-
-const SelectValue = SelectPrimitive.Value
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { iconClassName?: string }
->(({ className, children, iconClassName, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className={cn('h-4 w-4 opacity-50', iconClassName)} />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    {...props}
-  >
-    <ChevronUpIcon />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    {...props}
-  >
-    <ChevronDownIcon />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md',
-        position === 'popper' &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label ref={ref} className={cn('px-2 py-1.5 text-sm font-semibold', className)} {...props} />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex size-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="size-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator ref={ref} className={cn('bg-muted -mx-1 my-1 h-px', className)} {...props} />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton
-}
diff --git a/packages/ui/src/components/spacer.tsx b/packages/ui/src/components/spacer.tsx
index 088732bc9d..0130c55110 100644
--- a/packages/ui/src/components/spacer.tsx
+++ b/packages/ui/src/components/spacer.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ComponentProps } from 'react'
 
 import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
@@ -9,6 +9,7 @@ const spacerVariants = cva('mt-4 block', {
       1: 'mt-1',
       1.5: 'mt-1.5',
       2: 'mt-2',
+      2.5: 'mt-2.5',
       3: 'mt-3',
       4: 'mt-4',
       5: 'mt-5',
@@ -27,7 +28,7 @@ const spacerVariants = cva('mt-4 block', {
   }
 })
 
-export interface SpacerProps extends React.ComponentProps<'span'>, VariantProps<typeof spacerVariants> {}
+export interface SpacerProps extends ComponentProps<'span'>, VariantProps<typeof spacerVariants> {}
 
 const Spacer = ({ className, size, ...props }: SpacerProps) => (
   <span aria-hidden className={cn(spacerVariants({ size, className }))} {...props}></span>
diff --git a/packages/ui/src/components/styled-link.tsx b/packages/ui/src/components/styled-link.tsx
new file mode 100644
index 0000000000..6a06a8f968
--- /dev/null
+++ b/packages/ui/src/components/styled-link.tsx
@@ -0,0 +1,17 @@
+import { Link, type LinkProps } from 'react-router-dom'
+
+import { cn } from '@utils/cn'
+
+type StyledLinkProps = LinkProps & React.RefAttributes<HTMLAnchorElement>
+
+export function StyledLink({ className, ...props }: StyledLinkProps) {
+  return (
+    <Link
+      className={cn(
+        'text-foreground-accent hover:decoration-foreground-accent underline decoration-transparent underline-offset-4 transition-colors duration-200',
+        className
+      )}
+      {...props}
+    />
+  )
+}
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
deleted file mode 100644
index 3d1f5f9ee4..0000000000
--- a/packages/ui/src/components/textarea.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { forwardRef, TextareaHTMLAttributes } from 'react'
-
-import { cn } from '@utils/cn'
-
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        'border-borders-2 placeholder:text-foreground-4 flex min-h-[60px] w-full rounded border bg-transparent px-3 py-2 text-14 disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
-Textarea.displayName = 'Textarea'
-
-export { Textarea }
diff --git a/packages/ui/src/components/theme-selector/color-select.tsx b/packages/ui/src/components/theme-selector/color-select.tsx
index f854b9397e..42fbcf125b 100644
--- a/packages/ui/src/components/theme-selector/color-select.tsx
+++ b/packages/ui/src/components/theme-selector/color-select.tsx
@@ -1,14 +1,4 @@
-import {
-  Label,
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue
-} from '..'
+import { Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator } from '..'
 import { ColorType, ContrastType, FullTheme, ModeType } from './types'
 
 export function ColorSelect({
@@ -26,14 +16,13 @@ export function ColorSelect({
     <div>
       <Label className="text-xs">Color</Label>
       <Select
+        name="color"
+        placeholder="Select a color theme"
         value={color}
         onValueChange={(color: ColorType) => {
           setTheme(`${mode}-${color}-${contrast}`)
         }}
       >
-        <SelectTrigger>
-          <SelectValue placeholder="Select a color theme" />
-        </SelectTrigger>
         <SelectContent defaultValue={color}>
           <SelectItem value={ColorType.Standard}>Standard</SelectItem>
           <SelectSeparator />
diff --git a/packages/ui/src/components/theme-selector/contrast-select.tsx b/packages/ui/src/components/theme-selector/contrast-select.tsx
index ae63069186..8ee5236439 100644
--- a/packages/ui/src/components/theme-selector/contrast-select.tsx
+++ b/packages/ui/src/components/theme-selector/contrast-select.tsx
@@ -1,4 +1,4 @@
-import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..'
+import { Label, Select, SelectContent, SelectItem } from '..'
 import { ColorType, ContrastType, FullTheme, ModeType } from './types'
 
 export function ContrastSelect({
@@ -16,14 +16,13 @@ export function ContrastSelect({
     <div>
       <Label className="text-xs">Contrast</Label>
       <Select
+        name="contrast"
+        placeholder="Select a theme contrast"
         value={contrast}
         onValueChange={(contrast: ContrastType) => {
           setTheme(`${mode}-${color}-${contrast}`)
         }}
       >
-        <SelectTrigger>
-          <SelectValue placeholder="Select a theme contrast" />
-        </SelectTrigger>
         <SelectContent defaultValue={contrast}>
           <SelectItem value={ContrastType.Standard}>Standard</SelectItem>
           <SelectItem value={ContrastType.Low}>Low</SelectItem>
diff --git a/packages/ui/src/components/theme-selector/mode-select.tsx b/packages/ui/src/components/theme-selector/mode-select.tsx
index 99d14221ec..25e830f087 100644
--- a/packages/ui/src/components/theme-selector/mode-select.tsx
+++ b/packages/ui/src/components/theme-selector/mode-select.tsx
@@ -1,4 +1,4 @@
-import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..'
+import { Label, Select, SelectContent, SelectItem } from '..'
 import { ColorType, ContrastType, FullTheme, ModeType } from './types'
 
 export function ModeSelect({
@@ -16,14 +16,13 @@ export function ModeSelect({
     <div>
       <Label className="text-xs">Mode</Label>
       <Select
+        name="mode"
+        placeholder="Select a theme mode"
         value={mode}
         onValueChange={(mode: ModeType) => {
           setTheme(`${mode}-${color}-${contrast}`)
         }}
       >
-        <SelectTrigger>
-          <SelectValue placeholder="Select a theme mode" />
-        </SelectTrigger>
         <SelectContent defaultValue={mode}>
           <SelectItem value={ModeType.Light}>Light</SelectItem>
           <SelectItem value={ModeType.Dark}>Dark</SelectItem>
diff --git a/packages/ui/src/components/toast/index.ts b/packages/ui/src/components/toast/index.ts
new file mode 100644
index 0000000000..f2c80820b8
--- /dev/null
+++ b/packages/ui/src/components/toast/index.ts
@@ -0,0 +1,4 @@
+// TODO: Rewrite this to use Sooners Toaster
+
+export { toast } from './use-toast'
+export * from './toaster'
diff --git a/packages/ui/src/components/toast/toast.tsx b/packages/ui/src/components/toast/toast.tsx
new file mode 100644
index 0000000000..d05c246359
--- /dev/null
+++ b/packages/ui/src/components/toast/toast.tsx
@@ -0,0 +1,115 @@
+import { ComponentPropsWithoutRef, ElementRef, forwardRef, ReactElement } from 'react'
+
+import { Cross2Icon } from '@radix-ui/react-icons'
+import * as ToastPrimitives from '@radix-ui/react-toast'
+import { cn } from '@utils/cn'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = forwardRef<
+  ElementRef<typeof ToastPrimitives.Viewport>,
+  ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 gap-y-2 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[317px]',
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  'pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded border py-3 pl-3.5 pr-12 shadow-lg transition-all',
+  {
+    variants: {
+      variant: {
+        default: 'border-borders-1 bg-background-3 text-foreground [&_svg]:text-icons-1',
+        destructive: 'border-borders-danger bg-foreground-danger text-foreground-1 [&_svg]:text-icons-2'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)
+
+const Toast = forwardRef<
+  ElementRef<typeof ToastPrimitives.Root>,
+  ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = forwardRef<
+  ElementRef<typeof ToastPrimitives.Action>,
+  ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-1 disabled:pointer-events-none disabled:opacity-50',
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = forwardRef<
+  ElementRef<typeof ToastPrimitives.Close>,
+  ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'text-icons-2 absolute right-3.5 top-[15px] my-auto size-3 rounded-md focus:outline-none focus:ring-1',
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <Cross2Icon className="size-3" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = forwardRef<
+  ElementRef<typeof ToastPrimitives.Title>,
+  ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn('text-sm leading-tight tracking-tight [&+div]:text-xs', className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = forwardRef<
+  ElementRef<typeof ToastPrimitives.Description>,
+  ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description ref={ref} className={cn('text-sm opacity-90', className)} {...props} />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction
+}
diff --git a/packages/canary/src/components/toaster.tsx b/packages/ui/src/components/toast/toaster.tsx
similarity index 86%
rename from packages/canary/src/components/toaster.tsx
rename to packages/ui/src/components/toast/toaster.tsx
index d54f4640f6..c295e5f591 100644
--- a/packages/canary/src/components/toaster.tsx
+++ b/packages/ui/src/components/toast/toaster.tsx
@@ -1,5 +1,5 @@
-import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '@/components/toast'
-import { useToast } from '@/components/use-toast'
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from './toast'
+import { useToast } from './use-toast'
 
 export function Toaster() {
   const { toasts } = useToast()
diff --git a/packages/canary/src/components/use-toast.ts b/packages/ui/src/components/toast/use-toast.ts
similarity index 92%
rename from packages/canary/src/components/use-toast.ts
rename to packages/ui/src/components/toast/use-toast.ts
index d5237a9e6b..700d4b9445 100644
--- a/packages/canary/src/components/use-toast.ts
+++ b/packages/ui/src/components/toast/use-toast.ts
@@ -1,9 +1,9 @@
-import * as React from 'react'
+import { useEffect, useState } from 'react'
 
-import type { ToastActionElement, ToastProps } from '@/components/toast'
+import type { ToastActionElement, ToastProps } from './toast'
 
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_LIMIT = 3
+const TOAST_REMOVE_DELAY = 10000
 
 type ToasterToast = ToastProps & {
   id: string
@@ -136,9 +136,9 @@ function toast({ ...props }: Toast) {
 }
 
 function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
+  const [state, setState] = useState<State>(memoryState)
 
-  React.useEffect(() => {
+  useEffect(() => {
     listeners.push(setState)
     return () => {
       const index = listeners.indexOf(setState)
diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
index 1856222c82..c6b1fcc46e 100644
--- a/packages/ui/src/styles.css
+++ b/packages/ui/src/styles.css
@@ -1545,3 +1545,38 @@
   outline-offset: 2px;
   border-radius: 2px;
 }
+
+/* Hack for detecting scroll on select */
+@keyframes detect-scroll {
+  from,
+  to {
+    --can-scroll: ;
+  }
+}
+
+[data-radix-select-viewport] {
+  animation: detect-scroll linear;
+  animation-timeline: scroll(self);
+
+  --padding-if-can-scroll: var(--can-scroll) 4px 0 4px 4px;
+  --padding-if-cant-scroll: 4px;
+  padding: var(--padding-if-can-scroll, var(--padding-if-cant-scroll));
+}
+
+/* Select scrollbar */
+
+[data-radix-select-viewport] {
+  scrollbar-width: auto !important;
+}
+
+[data-radix-select-viewport]::-webkit-scrollbar {
+  width: 14px;
+  display: block !important;
+}
+
+[data-radix-select-viewport]::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--background-09));
+  border: 4px solid transparent;
+  border-radius: 7px;
+  background-clip: content-box;
+}
diff --git a/packages/ui/src/views/auth/components/agreements.tsx b/packages/ui/src/views/auth/components/agreements.tsx
index 7f99dadd9e..43e7261f9a 100644
--- a/packages/ui/src/views/auth/components/agreements.tsx
+++ b/packages/ui/src/views/auth/components/agreements.tsx
@@ -7,14 +7,14 @@ export function Agreements() {
     <Text className="relative z-10 mt-auto leading-tight" size={0} color="foreground-5" align="center">
       By joining, you agree to{' '}
       <Link
-        className="text-foreground-1 hover:decoration-foreground-1 whitespace-nowrap underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200"
+        className="whitespace-nowrap text-foreground-1 underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-1"
         to="/"
       >
         Terms of Service
       </Link>{' '}
       and&nbsp;
       <Link
-        className="text-foreground-1 hover:decoration-foreground-1 whitespace-nowrap underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200"
+        className="whitespace-nowrap text-foreground-1 underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-1"
         to="/"
       >
         Privacy Policy
diff --git a/packages/ui/src/views/auth/components/animated-harness-logo.tsx b/packages/ui/src/views/auth/components/animated-harness-logo.tsx
index 092e6a90c6..7adc6416ce 100644
--- a/packages/ui/src/views/auth/components/animated-harness-logo.tsx
+++ b/packages/ui/src/views/auth/components/animated-harness-logo.tsx
@@ -36,7 +36,7 @@ export function AnimatedHarnessLogo({ theme }: AnimatedHarnessLogoProps) {
             shadowBackground
           )}
         />
-        <div className="bg-background-3 relative flex size-16 overflow-hidden rounded-full shadow-[0px_0px_20px_0px_rgba(0,0,0,0.6)]">
+        <div className="relative flex size-16 overflow-hidden rounded-full bg-background-3 shadow-[0px_0px_20px_0px_rgba(0,0,0,0.6)]">
           <span className="border-linear absolute inset-0 mix-blend-overlay [background:linear-gradient(180deg,#fff,transparent)_border-box]" />
           <span className="absolute -right-0.5 bottom-px size-7 translate-y-1/2 rounded-full bg-[#D9D9D9] opacity-5 blur-[10px]" />
           <span
diff --git a/packages/ui/src/views/auth/forgot-password-page.tsx b/packages/ui/src/views/auth/forgot-password-page.tsx
index 5dc3b14dd4..0b8b3dc589 100644
--- a/packages/ui/src/views/auth/forgot-password-page.tsx
+++ b/packages/ui/src/views/auth/forgot-password-page.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, ErrorMessageTheme, Input, Spacer, Text } from '@/components'
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, MessageTheme, Spacer, Text } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
@@ -69,7 +69,7 @@ export function ForgotPasswordPage({ isLoading, onSubmit, error }: ForgotPasswor
 
   return (
     <Floating1ColumnLayout
-      className="bg-background-7 flex-col pt-20 sm:pt-[186px]"
+      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'blue'}
       verticalCenter
     >
@@ -90,11 +90,11 @@ export function ForgotPasswordPage({ isLoading, onSubmit, error }: ForgotPasswor
               type="email"
               placeholder="Your email"
               label="Email"
-              size={36}
+              size="md"
               {...register('email', { onChange: handleInputChange })}
               error={
                 errors.email && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.email.message?.toString()
                 }
               }
diff --git a/packages/ui/src/views/auth/new-password-page.tsx b/packages/ui/src/views/auth/new-password-page.tsx
index 59b76f89d8..b7a650e9fb 100644
--- a/packages/ui/src/views/auth/new-password-page.tsx
+++ b/packages/ui/src/views/auth/new-password-page.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, ErrorMessageTheme, Input, Text } from '@/components'
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, MessageTheme, Text } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
@@ -76,7 +76,7 @@ export function NewPasswordPage({ isLoading, handleFormSubmit, error }: NewPassw
 
   return (
     <Floating1ColumnLayout
-      className="bg-background-7 flex-col pt-20 sm:pt-[186px]"
+      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'blue'}
       verticalCenter
     >
@@ -96,12 +96,12 @@ export function NewPasswordPage({ isLoading, handleFormSubmit, error }: NewPassw
               id="password"
               type="password"
               label="New password"
-              size={36}
+              size="md"
               {...register('password', { onChange: handleInputChange })}
               placeholder="Password (6+ characters)"
               error={
                 errors.password && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.password.message?.toString()
                 }
               }
@@ -111,12 +111,12 @@ export function NewPasswordPage({ isLoading, handleFormSubmit, error }: NewPassw
               id="confirmPassword"
               type="password"
               label="Confirm password"
-              size={36}
+              size="md"
               {...register('confirmPassword', { onChange: handleInputChange })}
               placeholder="Confirm password"
               error={
                 errors.confirmPassword && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.confirmPassword.message?.toString()
                 }
               }
diff --git a/packages/ui/src/views/auth/otp-page.tsx b/packages/ui/src/views/auth/otp-page.tsx
index b80fa64797..2ae181233f 100644
--- a/packages/ui/src/views/auth/otp-page.tsx
+++ b/packages/ui/src/views/auth/otp-page.tsx
@@ -91,7 +91,7 @@ export function OTPPage({
 
   return (
     <Floating1ColumnLayout
-      className="bg-background-7 flex-col pt-20 sm:pt-[186px]"
+      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'blue'}
       verticalCenter
     >
@@ -126,7 +126,7 @@ export function OTPPage({
               />
               {(errors.otp || serverError) && (
                 <Text
-                  className="text-foreground-danger absolute top-full w-full translate-y-2 leading-none tracking-tight"
+                  className="absolute top-full w-full translate-y-2 leading-none tracking-tight text-foreground-danger"
                   align="center"
                   size={1}
                   as="p"
diff --git a/packages/ui/src/views/auth/signin-page.tsx b/packages/ui/src/views/auth/signin-page.tsx
index c17e9da5b3..80e1d9dce8 100644
--- a/packages/ui/src/views/auth/signin-page.tsx
+++ b/packages/ui/src/views/auth/signin-page.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, ErrorMessageTheme, Input, Spacer, Text } from '@/components'
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, MessageTheme, Spacer, Text } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
@@ -72,7 +72,7 @@ export function SignInPage({ handleSignIn, isLoading, error }: SignInPageProps)
 
   return (
     <Floating1ColumnLayout
-      className="bg-background-7 flex-col pt-20 sm:pt-[186px]"
+      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'blue'}
       verticalCenter
     >
@@ -93,11 +93,11 @@ export function SignInPage({ handleSignIn, isLoading, error }: SignInPageProps)
               type="email"
               label="Email"
               placeholder="Your email"
-              size={36}
+              size="md"
               {...register('email', { onChange: handleInputChange })}
               error={
                 errors.email && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.email.message?.toString()
                 }
               }
@@ -110,10 +110,10 @@ export function SignInPage({ handleSignIn, isLoading, error }: SignInPageProps)
               {...register('password', { onChange: handleInputChange })}
               label="Password"
               placeholder="Password"
-              size={36}
+              size="md"
               error={
                 errors.password && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.password.message?.toString()
                 }
               }
@@ -134,7 +134,7 @@ export function SignInPage({ handleSignIn, isLoading, error }: SignInPageProps)
           <Text className="block" size={2} color="foreground-5" weight="normal" align="center" as="p">
             Don’t have an account?{' '}
             <Link
-              className="text-foreground-accent hover:decoration-foreground-accent underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200"
+              className="text-foreground-accent underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-accent"
               to="/signup"
             >
               Sign up
diff --git a/packages/ui/src/views/auth/signup-page.tsx b/packages/ui/src/views/auth/signup-page.tsx
index 75a977ff45..ba836f8fac 100644
--- a/packages/ui/src/views/auth/signup-page.tsx
+++ b/packages/ui/src/views/auth/signup-page.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, ErrorMessageTheme, Input, Spacer, Text } from '@/components'
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, MessageTheme, Spacer, Text } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
@@ -69,7 +69,7 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
 
   return (
     <Floating1ColumnLayout
-      className="bg-background-7 flex-col pt-20 sm:pt-[186px]"
+      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'green'}
       verticalCenter
     >
@@ -91,11 +91,11 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
               {...register('userId', { onChange: handleInputChange })}
               placeholder="User ID"
               label="User ID"
-              size={36}
+              size="md"
               autoFocus
               error={
                 errors.userId && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.userId.message?.toString()
                 }
               }
@@ -107,10 +107,10 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
               {...register('email', { onChange: handleInputChange })}
               placeholder="Your email"
               label="Email"
-              size={36}
+              size="md"
               error={
                 errors.email && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.email.message?.toString()
                 }
               }
@@ -121,11 +121,11 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
               type="password"
               placeholder="Password (6+ characters)"
               label="Password"
-              size={36}
+              size="md"
               {...register('password', { onChange: handleInputChange })}
               error={
                 errors.password && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.password.message?.toString()
                 }
               }
@@ -136,18 +136,18 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
               type="password"
               placeholder="Confirm password"
               label="Confirm password"
-              size={36}
+              size="md"
               {...register('confirmPassword', { onChange: handleInputChange })}
               error={
                 errors.confirmPassword && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.confirmPassword.message?.toString()
                 }
               }
             />
             {serverError && (
               <>
-                <Text className="text-foreground-danger mt-1 leading-none tracking-tight" size={0}>
+                <Text className="mt-1 leading-none tracking-tight text-foreground-danger" size={0}>
                   {serverError}
                 </Text>
               </>
@@ -168,7 +168,7 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
           <Text className="block" size={2} color="foreground-5" weight="normal" align="center" as="p">
             Already have an account?{' '}
             <Link
-              className="text-foreground-accent hover:decoration-foreground-accent underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200"
+              className="text-foreground-accent underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-accent"
               to="/signin"
             >
               Sign in
diff --git a/packages/ui/src/views/layouts/SandboxLayout.tsx b/packages/ui/src/views/layouts/SandboxLayout.tsx
index 9c0ed9a012..0c1ecbfb24 100644
--- a/packages/ui/src/views/layouts/SandboxLayout.tsx
+++ b/packages/ui/src/views/layouts/SandboxLayout.tsx
@@ -127,12 +127,13 @@ interface ContentProps {
   children: ReactNode
   maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'
   className?: string
+  paddingClassName?: string
 }
 
-function Content({ children, maxWidth, className }: ContentProps) {
+function Content({ children, maxWidth, className, paddingClassName = 'px-8 py-5 pb-24' }: ContentProps) {
   const widthClass = maxWidth ? `max-w-${maxWidth} mx-auto` : ''
 
-  return <div className={cn('px-6 py-4 pb-20', widthClass, className)}>{children}</div>
+  return <div className={cn(paddingClassName, widthClass, className)}>{children}</div>
 }
 
 function Columns({ children, className, columnWidths = 'repeat(2, 1fr)' }: ColumnsProps) {
diff --git a/packages/ui/src/views/pull-request/compare/components/pull-request-compare-button.tsx b/packages/ui/src/views/pull-request/compare/components/pull-request-compare-button.tsx
index 2fce02b8e0..8e9e2298b1 100644
--- a/packages/ui/src/views/pull-request/compare/components/pull-request-compare-button.tsx
+++ b/packages/ui/src/views/pull-request/compare/components/pull-request-compare-button.tsx
@@ -53,7 +53,7 @@ const PullRequestCompareButton: React.FC<PullRequestCompareButtonProps> = ({
     <>
       {!isSubmitted ? (
         <>
-          <ButtonGroup.Root>
+          <ButtonGroup>
             <Button
               theme={'primary'}
               variant="split"
@@ -81,7 +81,7 @@ const PullRequestCompareButton: React.FC<PullRequestCompareButtonProps> = ({
             >
               {!isLoading ? 'Create pull request' : 'Creating pull request...'}
             </Button>
-          </ButtonGroup.Root>
+          </ButtonGroup>
         </>
       ) : (
         <Button variant="ghost" type="button" size="sm" theme="success" className="pointer-events-none">
diff --git a/packages/ui/src/views/pull-request/compare/components/pull-request-compare-form.tsx b/packages/ui/src/views/pull-request/compare/components/pull-request-compare-form.tsx
index 19b69fdf43..52a6ed9cd0 100644
--- a/packages/ui/src/views/pull-request/compare/components/pull-request-compare-form.tsx
+++ b/packages/ui/src/views/pull-request/compare/components/pull-request-compare-form.tsx
@@ -1,15 +1,11 @@
 import { forwardRef } from 'react'
 import { FieldErrors, SubmitHandler, UseFormHandleSubmit, UseFormRegister } from 'react-hook-form'
 
-import { MessageTheme } from '@components/form-field-set'
-import * as FormFieldSet from '@components/form-field-set'
+import { Fieldset, Input, MessageTheme, Textarea } from '@/components'
 import { Text } from '@components/text'
 import { z } from 'zod'
 
-import { Input, Textarea } from '@harnessio/ui/components'
-
 // Define the form schema
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const formSchemaCompare = z.object({
   title: z.string().min(1, { message: 'Please provide a pull request title' }),
   description: z.string().optional()
@@ -35,26 +31,28 @@ const PullRequestCompareForm = forwardRef<HTMLFormElement, PullRequestFormProps>
     }
     return (
       <form ref={ref} onSubmit={handleSubmit(onSubmit)}>
-        <FormFieldSet.Root>
-          <FormFieldSet.ControlGroup>
-            <FormFieldSet.Label htmlFor="title" required>
-              Title
-            </FormFieldSet.Label>
-            <Input id="title" {...register('title')} placeholder="Enter pull request title" autoFocus />
-            {errors.title && (
-              <FormFieldSet.Message theme={MessageTheme.ERROR}>{errors.title.message?.toString()}</FormFieldSet.Message>
-            )}
-          </FormFieldSet.ControlGroup>
-          <FormFieldSet.ControlGroup>
-            <FormFieldSet.Label htmlFor="description">Description</FormFieldSet.Label>
-            <Textarea id="description" {...register('description')} placeholder="Add Pull Request description here." />
-            {errors.description && (
-              <FormFieldSet.Message theme={MessageTheme.ERROR}>
-                {errors.description.message?.toString()}
-              </FormFieldSet.Message>
-            )}
-          </FormFieldSet.ControlGroup>
-        </FormFieldSet.Root>
+        <Fieldset>
+          <Input
+            id="title"
+            {...register('title')}
+            placeholder="Enter pull request title"
+            label="Title"
+            error={
+              errors.title && {
+                theme: MessageTheme.ERROR,
+                message: errors.title.message?.toString()
+              }
+            }
+            autoFocus
+          />
+          <Textarea
+            id="description"
+            {...register('description')}
+            placeholder="Add Pull Request description here."
+            label="Description"
+            error={errors.description && { theme: MessageTheme.ERROR, message: errors.description.message?.toString() }}
+          />
+        </Fieldset>
 
         {apiError && apiError !== "head branch doesn't contain any new commits." && (
           <Text size={1} className="text-destructive">
diff --git a/packages/ui/src/views/repo/components/branch-selector/branch-selector-dropdown.tsx b/packages/ui/src/views/repo/components/branch-selector/branch-selector-dropdown.tsx
index 83c896f5bd..c040098d0f 100644
--- a/packages/ui/src/views/repo/components/branch-selector/branch-selector-dropdown.tsx
+++ b/packages/ui/src/views/repo/components/branch-selector/branch-selector-dropdown.tsx
@@ -80,7 +80,7 @@ export const BranchSelectorDropdown: FC<BranchSelectorDropdownProps> = ({
   return (
     <DropdownMenuContent className="w-[298px] p-0" align="start">
       <div className="px-3 pt-2">
-        <span className="leading-none text-14 font-medium">Switch branches/tags</span>
+        <span className="text-14 font-medium leading-none">Switch branches/tags</span>
 
         <SearchBox.Root
           className="mt-[18px] w-full"
@@ -137,7 +137,7 @@ export const BranchSelectorDropdown: FC<BranchSelectorDropdownProps> = ({
       <div className="mt-1">
         {filteredItems.length === 0 && (
           <div className="px-5 py-4 text-center">
-            <span className="leading-tight text-foreground-2 text-14">Nothing to show</span>
+            <span className="text-14 leading-tight text-foreground-2">Nothing to show</span>
           </div>
         )}
 
@@ -196,7 +196,7 @@ export const BranchSelectorDropdown: FC<BranchSelectorDropdownProps> = ({
         <DropdownMenuItem className="p-0" asChild>
           <div className="mt-1 border-t border-borders-1 px-3 py-2">
             <Link to={viewAllUrl}>
-              <span className="leading-none transition-colors duration-200 hover:text-foreground-1 text-14 font-medium">
+              <span className="text-14 font-medium leading-none transition-colors duration-200 hover:text-foreground-1">
                 {t('views:repos.viewAll', 'View all {{type}}', {
                   type: activeTab === BranchSelectorTab.BRANCHES ? t('views:repos.branches') : t('views:repos.tags')
                 })}
diff --git a/packages/ui/src/views/repo/index.ts b/packages/ui/src/views/repo/index.ts
index 19e47e186d..733c3ba620 100644
--- a/packages/ui/src/views/repo/index.ts
+++ b/packages/ui/src/views/repo/index.ts
@@ -8,6 +8,9 @@ export * from '@views/repo/repo-layout'
 // repo sidebar
 export * from '@views/repo/repo-sidebar'
 
+// repo create
+export * from '@views/repo/repo-create'
+
 // repo summary
 export * from '@views/repo/repo-summary/repo-summary'
 
diff --git a/packages/ui/src/views/repo/repo-create/index.tsx b/packages/ui/src/views/repo/repo-create/index.tsx
new file mode 100644
index 0000000000..977cf399bb
--- /dev/null
+++ b/packages/ui/src/views/repo/repo-create/index.tsx
@@ -0,0 +1,289 @@
+import { useEffect } from 'react'
+import { useForm, type SubmitHandler } from 'react-hook-form'
+
+import {
+  Button,
+  ButtonGroup,
+  Checkbox,
+  ControlGroup,
+  Fieldset,
+  Input,
+  Message,
+  MessageTheme,
+  Option,
+  RadioButton,
+  RadioGroup,
+  Select,
+  SelectContent,
+  SelectItem,
+  Spacer,
+  StyledLink,
+  Text,
+  Textarea
+} from '@/components'
+import { SandboxLayout } 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 }[]
+}
+
+export function RepoCreatePage({
+  onFormSubmit,
+  onFormCancel,
+  isLoading,
+  isSuccess,
+  gitIgnoreOptions,
+  licenseOptions
+}: RepoCreatePageProps) {
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    reset,
+    formState: { errors, isValid }
+  } = 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 hasLeftPanel>
+      <SandboxLayout.Content paddingClassName="w-[570px] mx-auto pt-11 pb-20">
+        <Spacer size={5} />
+        <Text className="tracking-tight" size={5} weight="medium">
+          Create a new repository
+        </Text>
+        <Spacer size={2.5} />
+        <Text className="max-w-[476px] text-foreground-2" size={2} as="p">
+          A repository contains all project files, including the revision history. Already have a project repository
+          elsewhere?{' '}
+          <StyledLink to="../import" relative="path">
+            Import a repository.
+          </StyledLink>
+        </Text>
+        <Spacer size={10} />
+        <form onSubmit={handleSubmit(onSubmit)}>
+          {/* NAME */}
+          <Fieldset>
+            <Input
+              id="name"
+              label="Name"
+              {...register('name')}
+              placeholder="Enter repository name"
+              size="md"
+              error={errors.name && { theme: MessageTheme.ERROR, message: errors.name.message?.toString() }}
+              autoFocus
+            />
+            <Spacer size={7} />
+            {/* DESCRIPTION */}
+            <Textarea
+              id="description"
+              {...register('description')}
+              placeholder="Enter a description of this repository..."
+              label="Description"
+              error={
+                errors.description && {
+                  theme: MessageTheme.ERROR,
+                  message: errors.description.message?.toString()
+                }
+              }
+              optional
+            />
+          </Fieldset>
+          <Spacer size={7} />
+
+          {/* GITIGNORE */}
+          <Fieldset>
+            <ControlGroup>
+              <Select
+                name="gitignore"
+                value={gitignoreValue}
+                onValueChange={value => handleSelectChange('gitignore', value)}
+                placeholder="Select"
+                label="Add a .gitignore"
+                error={
+                  errors.gitignore && {
+                    theme: MessageTheme.ERROR,
+                    message: errors.gitignore.message?.toString()
+                  }
+                }
+                caption="Choose which files not to track from a list of templates."
+              >
+                <SelectContent>
+                  {gitIgnoreOptions &&
+                    gitIgnoreOptions?.map(option => {
+                      return (
+                        <SelectItem key={option} value={option}>
+                          {option}
+                        </SelectItem>
+                      )
+                    })}
+                </SelectContent>
+              </Select>
+            </ControlGroup>
+            <Spacer size={6} />
+
+            {/* LICENSE */}
+            <ControlGroup>
+              <Select
+                name="license"
+                value={licenseValue}
+                onValueChange={value => handleSelectChange('license', value)}
+                placeholder="Select"
+                label="Choose a license"
+                error={
+                  errors.license && {
+                    theme: MessageTheme.ERROR,
+                    message: errors.license.message?.toString()
+                  }
+                }
+                caption="A license tells others what they can and can't do with your code."
+              >
+                <SelectContent>
+                  {licenseOptions &&
+                    licenseOptions?.map(option => (
+                      <SelectItem key={option.value} value={option.value ?? ''}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
+            </ControlGroup>
+          </Fieldset>
+          <Spacer size={11} />
+
+          {/* ACCESS */}
+          <Fieldset>
+            <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-1" theme={MessageTheme.ERROR}>
+                  {errors.access.message?.toString()}
+                </Message>
+              )}
+            </ControlGroup>
+          </Fieldset>
+          <Spacer size={11} />
+
+          {/* README */}
+          <Fieldset>
+            <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.{' '}
+                    <StyledLink className="inline-block" to="/">
+                      Learn more about README
+                    </StyledLink>
+                  </>
+                }
+              />
+
+              {errors.readme && <Message theme={MessageTheme.ERROR}>{errors.readme.message?.toString()}</Message>}
+            </ControlGroup>
+          </Fieldset>
+
+          {/* SUBMIT BUTTONS */}
+          <Fieldset className="mt-[50px]">
+            <ControlGroup>
+              <ButtonGroup>
+                {/* TODO: Improve loading state to avoid flickering */}
+                <Button type="submit" disabled={!isValid || isLoading}>
+                  {!isLoading ? 'Create repository' : 'Creating repository...'}
+                </Button>
+                <Button type="button" variant="outline" onClick={handleCancel}>
+                  Cancel
+                </Button>
+              </ButtonGroup>
+            </ControlGroup>
+          </Fieldset>
+        </form>
+      </SandboxLayout.Content>
+    </SandboxLayout.Main>
+  )
+}
diff --git a/packages/ui/src/views/repo/repo-list/repo-list-page.tsx b/packages/ui/src/views/repo/repo-list/repo-list-page.tsx
index e39d426474..d6120ae3d5 100644
--- a/packages/ui/src/views/repo/repo-list/repo-list-page.tsx
+++ b/packages/ui/src/views/repo/repo-list/repo-list-page.tsx
@@ -410,7 +410,9 @@ const SandboxRepoListPage: FC<RepoListProps> = ({
                 filterHandlers={filterHandlers}
                 t={t}
               />
-              <Button variant="default">{t('views:repos.create-repository')}</Button>
+              <Button variant="default" asChild>
+                <Link to={`create`}>{t('views:repos.create-repository')}</Link>
+              </Button>
             </ListActions.Right>
           </ListActions.Root>
           {(filterHandlers.activeFilters.length > 0 || filterHandlers.activeSorts.length > 0) && <Spacer size={2} />}
diff --git a/packages/ui/src/views/repo/repo-sidebar/index.tsx b/packages/ui/src/views/repo/repo-sidebar/index.tsx
index adede730ed..b4f53780cb 100644
--- a/packages/ui/src/views/repo/repo-sidebar/index.tsx
+++ b/packages/ui/src/views/repo/repo-sidebar/index.tsx
@@ -54,7 +54,7 @@ export const RepoSidebar = ({
                 useTranslationStore={useTranslationStore}
               />
             )}
-            <ButtonGroup.Root spacing="0" className="h-full overflow-hidden rounded shadow-as-border shadow-borders-2">
+            <ButtonGroup spacing="0" className="h-full overflow-hidden rounded shadow-as-border shadow-borders-2">
               <Button
                 className="rounded-none border-l border-borders-2 p-0"
                 size="icon"
@@ -73,7 +73,7 @@ export const RepoSidebar = ({
               >
                 <Icon size={16} name="add-file" className="text-icons-3" />
               </Button>
-            </ButtonGroup.Root>
+            </ButtonGroup>
           </div>
           <div className="pr-5">
             <SearchFiles
diff --git a/packages/ui/src/views/repo/repo-summary/components/summary-panel.tsx b/packages/ui/src/views/repo/repo-summary/components/summary-panel.tsx
index b206e767c5..5ad616b1ac 100644
--- a/packages/ui/src/views/repo/repo-summary/components/summary-panel.tsx
+++ b/packages/ui/src/views/repo/repo-summary/components/summary-panel.tsx
@@ -46,7 +46,7 @@ const SummaryPanel: FC<SummaryPanelProps> = ({
   return (
     <div className="flex flex-col">
       <div className="flex items-center justify-between">
-        <span className="text-18 font-medium truncate">{title}</span>
+        <span className="truncate text-18 font-medium">{title}</span>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" size="sm_icon" aria-label="More options">
@@ -63,7 +63,7 @@ const SummaryPanel: FC<SummaryPanelProps> = ({
       </div>
       <Spacer size={3} />
       {description?.length && !isEditingDescription && (
-        <span className="line-clamp-3 py-3 border-y border-borders-4 text-foreground-2 text-14">{description}</span>
+        <span className="line-clamp-3 border-y border-borders-4 py-3 text-14 text-foreground-2">{description}</span>
       )}
       {isEditingDescription && (
         <div>
@@ -95,7 +95,7 @@ const SummaryPanel: FC<SummaryPanelProps> = ({
         </div>
       )}
       <Spacer size={2} />
-      {timestamp && <span className="text-foreground-4 text-13">Created {timestamp}</span>}
+      {timestamp && <span className="text-13 text-foreground-4">Created {timestamp}</span>}
       <Spacer size={5} />
       <div className="flex flex-col gap-3">
         {details &&
diff --git a/packages/ui/src/views/repo/repo-summary/repo-summary.tsx b/packages/ui/src/views/repo/repo-summary/repo-summary.tsx
index 2180dfa2d1..006893b093 100644
--- a/packages/ui/src/views/repo/repo-summary/repo-summary.tsx
+++ b/packages/ui/src/views/repo/repo-summary/repo-summary.tsx
@@ -130,7 +130,7 @@ export function RepoSummaryView({
           <SandboxLayout.Content>
             <ListActions.Root>
               <ListActions.Left>
-                <ButtonGroup.Root>
+                <ButtonGroup>
                   <BranchSelector
                     selectedBranch={selectedBranch}
                     branchList={branchList}
@@ -145,10 +145,10 @@ export function RepoSummaryView({
                     filesList={filesList}
                     useTranslationStore={useTranslationStore}
                   />
-                </ButtonGroup.Root>
+                </ButtonGroup>
               </ListActions.Left>
               <ListActions.Right>
-                <ButtonGroup.Root>
+                <ButtonGroup>
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <Button className="gap-x-2" variant="outline">
@@ -175,7 +175,7 @@ export function RepoSummaryView({
                       handleCreateToken={handleCreateToken}
                     />
                    */}
-                </ButtonGroup.Root>
+                </ButtonGroup>
               </ListActions.Right>
             </ListActions.Root>
             <Spacer size={5} />
diff --git a/packages/views/src/components/form-field-set.tsx b/packages/views/src/components/form-field-set.tsx
index 8e3548855f..38a7d1e41d 100644
--- a/packages/views/src/components/form-field-set.tsx
+++ b/packages/views/src/components/form-field-set.tsx
@@ -65,6 +65,7 @@ const themeClassMap: Record<MessageTheme, string> = {
   [MessageTheme.DEFAULT]: 'text-tertiary-background'
 }
 
+/** @deprecated: Use Fieldset from @harnessio/ui/components instead */
 function Root({ children, box, shaded, className }: RootProps) {
   return (
     <fieldset
@@ -81,6 +82,7 @@ function Root({ children, box, shaded, className }: RootProps) {
   )
 }
 
+/** @deprecated: Use FormLegend from @harnessio/ui/components instead */
 function Legend({ children, className }: CompProps) {
   return (
     <Text size={3} weight={'medium'} className={cn('mb-0', className)} as="p" role="heading">
@@ -89,6 +91,7 @@ function Legend({ children, className }: CompProps) {
   )
 }
 
+/** @deprecated: Use FormLegend from @harnessio/ui/components instead */
 function SubLegend({ children, className }: CompProps) {
   return (
     <Text size={2} weight={'normal'} className={cn('text-primary/70 mb-0', className)} as="p" id="fieldset-description">
@@ -97,6 +100,7 @@ function SubLegend({ children, className }: CompProps) {
   )
 }
 
+/** @deprecated */
 function Item({ children, className }: CompProps) {
   return (
     <div className={cn('item-wrapper', className)} role="presentation">
@@ -105,6 +109,7 @@ function Item({ children, className }: CompProps) {
   )
 }
 
+/** @deprecated: Use Label from @harnessio/ui/components instead */
 function Label({ htmlFor, required, children, className }: LabelProps) {
   return (
     <ShadLabel htmlFor={htmlFor} variant="sm" className={cn('text-primary/80 font-normal', className)}>
@@ -114,6 +119,7 @@ function Label({ htmlFor, required, children, className }: LabelProps) {
   )
 }
 
+/** @deprecated */
 function ControlGroup({ children, type, className }: ControlProps) {
   return (
     <div
@@ -126,6 +132,7 @@ function ControlGroup({ children, type, className }: ControlProps) {
   )
 }
 
+/** @deprecated: Use Text from @harnessio/ui/components instead */
 function Caption({ children, className }: CompProps) {
   return (
     <Text as="p" size={1} color="tertiaryBackground" role="note" aria-live="polite" className={cn('mt-1', className)}>
@@ -134,6 +141,7 @@ function Caption({ children, className }: CompProps) {
   )
 }
 
+/** @deprecated: Use FormErrorMessage from @harnessio/ui/components instead */
 function Message({ children, theme, className }: MessageProps) {
   const textClass = themeClassMap[theme]
   const role = theme === MessageTheme.ERROR ? 'alert' : 'status'
@@ -148,6 +156,7 @@ function Message({ children, theme, className }: MessageProps) {
   )
 }
 
+/** @deprecated: Use RadioGroupItem from @harnessio/ui/components instead */
 function Option({ control, id, label, description, className }: OptionProps) {
   return (
     // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
@@ -167,6 +176,7 @@ function Option({ control, id, label, description, className }: OptionProps) {
   )
 }
 
+/** @deprecated: Use FormSeparator from @harnessio/ui/components instead */
 function Separator({ dashed, dotted, className }: SeparatorProps) {
   return (
     <div
@@ -177,6 +187,7 @@ function Separator({ dashed, dotted, className }: SeparatorProps) {
   )
 }
 
+/** @deprecated: Use Spacer from @harnessio/ui/components instead */
 function Spacer({ className }: SpacerProps) {
   return <div className={cn('mt-1', className)} role="presentation" aria-hidden="true" />
 }