diff --git a/src/app/editArea/[slug]/SidebarNav.tsx b/src/app/editArea/[slug]/SidebarNav.tsx
index 5ed49e55b..94fa75665 100644
--- a/src/app/editArea/[slug]/SidebarNav.tsx
+++ b/src/app/editArea/[slug]/SidebarNav.tsx
@@ -1,7 +1,7 @@
 'use client'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { MapPinLine, Graph, Article, FolderSimplePlus } from '@phosphor-icons/react/dist/ssr'
+import { Article, FolderSimplePlus } from '@phosphor-icons/react/dist/ssr'
 
 /**
  * Sidebar navigation for area edit
@@ -14,28 +14,24 @@ export const SidebarNav: React.FC<{ slug: string }> = ({ slug }) => {
   const classForActivePage = (myPath: string): string => activePath.endsWith(myPath) ? 'bg-base-300/60 pointer-events-none' : ''
   return (
     <nav className='px-6'>
-      <ul className='menu w-56'>
-        <li>
-          <Link href={`/editArea/${slug}/general`} className={classForActivePage('general')}>
-            <Article size={24} /> General
-          </Link>
-        </li>
-        <li>
-          <Link href={`/editArea/${slug}/location`} className={classForActivePage('location')}>
-            <MapPinLine size={24} /> Location
-          </Link>
-        </li>
-        <li>
-          <Link href={`/editArea/${slug}/manage`} className={classForActivePage('manage')}>
-            <Graph size={24} weight='duotone' /> Manage areas
+      <div className='sticky top-0'>
+        <ul className='menu w-56'>
+          <li>
+            <Link href={`/editArea/${slug}/general`} className={classForActivePage('general')}>
+              <Article size={24} /> General
+            </Link>
+          </li>
+        </ul>
+
+        <div className='p-2 w-56 mt-4'>
+          <hr className='border-t' />
+          <Link href={`/editArea/${slug}/general#addArea`} className='block py-4'>
+            <button className='btn btn-primary btn-block justify-start'> <FolderSimplePlus size={24} /> Add area</button>
           </Link>
-        </li>
-      </ul>
 
-      <div className='p-2 w-56'>
-        <Link href={`/editArea/${slug}/attributes`}>
-          <button className='btn btn-primary btn-block justify-start'> <FolderSimplePlus size={24} /> Add area</button>
-        </Link>
+          <hr className='border-t' />
+
+        </div>
       </div>
     </nav>
   )
diff --git a/src/app/editArea/[slug]/components/SingleEntryForm.tsx b/src/app/editArea/[slug]/components/SingleEntryForm.tsx
index a4c1148bf..6731b29b2 100644
--- a/src/app/editArea/[slug]/components/SingleEntryForm.tsx
+++ b/src/app/editArea/[slug]/components/SingleEntryForm.tsx
@@ -47,7 +47,7 @@ export function SingleEntryForm<T extends FieldValues> ({
       >
         <div className={clx('card card-bordered border-base-300/40 overflow-hidden w-full bg-base-100', className)}>
           <div className='card-body'>
-            <h2 className='font-semibold text-2xl'>{title}</h2>
+            <h4 className='font-semibold text-2xl'>{title}</h4>
             <div className='pt-2 flex flex-col gap-y-4'>
               {children}
             </div>
diff --git a/src/app/editArea/[slug]/manage/AddAreaForm.tsx b/src/app/editArea/[slug]/general/components/AddAreaForm.tsx
similarity index 94%
rename from src/app/editArea/[slug]/manage/AddAreaForm.tsx
rename to src/app/editArea/[slug]/general/components/AddAreaForm.tsx
index 354a8d8d3..3c0e21c84 100644
--- a/src/app/editArea/[slug]/manage/AddAreaForm.tsx
+++ b/src/app/editArea/[slug]/general/components/AddAreaForm.tsx
@@ -10,7 +10,7 @@ import { AreaDesignationRadioGroup, areaDesignationToDb, AreaTypeFormProp } from
 import { AREA_NAME_FORM_VALIDATION_RULES } from '@/components/edit/EditAreaForm'
 
 /**
- *
+ * Add a new area/crag/boulder
  */
 export const AddAreaForm: React.FC<{ area: AreaType }> = ({ area }) => {
   const { uuid } = area
@@ -32,7 +32,7 @@ export const AddAreaForm: React.FC<{ area: AreaType }> = ({ area }) => {
         await addOneAreaCmd({ name: areaName, parentUuid: uuid, isBoulder, isLeaf })
         router.refresh() // Ask Next to refresh props from the server
       }}
-      className='border-primary border-2'
+      className='outline outline-2 outline-accent outline-offset-2'
     >
       <DashboardInput
         name='areaName'
diff --git a/src/app/editArea/[slug]/general/AreaDescriptionForm.tsx b/src/app/editArea/[slug]/general/components/AreaDescriptionForm.tsx
similarity index 100%
rename from src/app/editArea/[slug]/general/AreaDescriptionForm.tsx
rename to src/app/editArea/[slug]/general/components/AreaDescriptionForm.tsx
diff --git a/src/app/editArea/[slug]/manage/components/AreaItem.tsx b/src/app/editArea/[slug]/general/components/AreaItem.tsx
similarity index 85%
rename from src/app/editArea/[slug]/manage/components/AreaItem.tsx
rename to src/app/editArea/[slug]/general/components/AreaItem.tsx
index c54a094f0..38c3d56eb 100644
--- a/src/app/editArea/[slug]/manage/components/AreaItem.tsx
+++ b/src/app/editArea/[slug]/general/components/AreaItem.tsx
@@ -6,7 +6,7 @@ import { Icon, IconProps } from '@phosphor-icons/react'
 import { AreaType } from '@/js/types'
 import { DeleteAreaTrigger, DeleteAreaTriggerButtonSm } from '@/components/edit/Triggers'
 
-type EType = 'area' | 'crag' | 'boulder' | 'climb'
+export type EType = 'area' | 'crag' | 'boulder' | 'climb'
 
 const CragIcon = forwardRef<any, IconProps>((props, ref) => <ShareNetwork ref={ref} {...props} className='p-1 rotate-90' />)
 
@@ -20,12 +20,12 @@ const IconMap: Record<EType, Icon> = {
   climb: LineSegments
 }
 
-export const EntityIcon: React.FC<{ type: EType, withLabel?: boolean, className?: string }> = ({ type, withLabel = true, className = '' }) => {
+export const EntityIcon: React.FC<{ type: EType, withLabel?: boolean, size?: 20 | 24 | 28, className?: string }> = ({ type, withLabel = true, size = 24, className = '' }) => {
   const IconComponent = IconMap?.[type]
   if (IconComponent == null) return null
   return (
     <div className='flex gap-1.5 items-center'>
-      <IconComponent size={20} weight='duotone' className={className} />
+      <IconComponent size={size} weight='duotone' className={className} />
       {withLabel && <span className='text-xs font-light'>{type.toUpperCase()}</span>}
     </div>
   )
@@ -41,10 +41,10 @@ export const AreaItem: React.FC<{ area: AreaType, parentUuid: string, index: num
     <div className='break-inside-avoid-column break-inside-avoid pb-8'>
       <div className='card card-compact card-bordered border-base-300/80 w-full bg-base-100 shadow  p-2'>
         <div className='flex items-center gap-4 justify-between'>
-          <div>
+          <div className='px-2'>
             <div className='area-entity-box'>{index}</div>
           </div>
-          <div className='grow space-y-2'>
+          <div className='grow'>
             <Link
               className='uppercase font-semibold hover:underline underline-offset-4
 '
@@ -68,12 +68,12 @@ export const AreaItem: React.FC<{ area: AreaType, parentUuid: string, index: num
 export const AreaIcon: React.FC<{ area: AreaType }> =
   ({ area: { climbs, metadata: { isBoulder } } }) => {
     if ((climbs?.length ?? 0) > 0) {
-      return <EntityIcon type='crag' />
+      return <EntityIcon type='crag' size={20} />
     }
     if (isBoulder) {
-      return <EntityIcon type='boulder' />
+      return <EntityIcon type='boulder' size={20} />
     }
-    return <EntityIcon type='area' className='text-secondary' />
+    return <EntityIcon type='area' size={20} />
   }
 
 const Actions: React.FC<{
@@ -85,10 +85,10 @@ const Actions: React.FC<{
   return (
     <div className='flex items-center divide-x'>
       <Link className='px-4' href={`/editArea/${uuid}`}>
-        <button className='btn btn-link btn-primary btn-sm text-secondary'>Edit</button>
+        <button className='btn btn-link btn-primary btn-sm text-secondary font-semibold'>Edit</button>
       </Link>
       <Link className='px-4' href={`/area/${uuid}`} target='_new'>
-        <button className='btn btn-link btn-primary btn-sm text-secondary'>View</button>
+        <button className='btn btn-link btn-primary btn-sm text-secondary font-light'>View</button>
       </Link>
       <div className='px-4 relative'>
         <DeleteAreaTrigger
diff --git a/src/app/editArea/[slug]/general/AreaLatLngForm.tsx b/src/app/editArea/[slug]/general/components/AreaLatLngForm.tsx
similarity index 100%
rename from src/app/editArea/[slug]/general/AreaLatLngForm.tsx
rename to src/app/editArea/[slug]/general/components/AreaLatLngForm.tsx
diff --git a/src/app/editArea/[slug]/manage/components/AreaList.tsx b/src/app/editArea/[slug]/general/components/AreaList.tsx
similarity index 86%
rename from src/app/editArea/[slug]/manage/components/AreaList.tsx
rename to src/app/editArea/[slug]/general/components/AreaList.tsx
index a6c99e6ac..b142af1d4 100644
--- a/src/app/editArea/[slug]/manage/components/AreaList.tsx
+++ b/src/app/editArea/[slug]/general/components/AreaList.tsx
@@ -9,13 +9,13 @@ type AreaListProps = Pick<AreaType, 'uuid' | 'areaName' | 'pathTokens' | 'ancest
 
 export const AreaList: React.FC<AreaListProps> = ({ areaName, uuid, pathTokens, ancestors, areas }) => {
   return (
-    <div className='card card-compact card-bordered border-base-300/50  overflow-hidden w-full'>
+    <div id='children' className='card card-compact card-bordered border-base-300/50  overflow-hidden w-full'>
       <div className='form-control'>
         <div className='p-6'>
           {/* Heading */}
           <label className='flex flex-col items-start justify-start gap-2 pb-2'>
             <div className='flex items-baseline gap-4'>
-              <h2 className='font-semibold text-2xl'>Child areas</h2>
+              <h4 className='font-semibold text-2xl'>Child areas</h4>
               <div className='text-secondary text-sm'>Total: <span>{areas.length}</span></div>
             </div>
           </label>
diff --git a/src/app/editArea/[slug]/general/AreaNameForm.tsx b/src/app/editArea/[slug]/general/components/AreaNameForm.tsx
similarity index 100%
rename from src/app/editArea/[slug]/general/AreaNameForm.tsx
rename to src/app/editArea/[slug]/general/components/AreaNameForm.tsx
diff --git a/src/app/editArea/[slug]/general/components/AreaTypeForm.tsx b/src/app/editArea/[slug]/general/components/AreaTypeForm.tsx
new file mode 100644
index 000000000..c43ee0848
--- /dev/null
+++ b/src/app/editArea/[slug]/general/components/AreaTypeForm.tsx
@@ -0,0 +1,44 @@
+'use client'
+import { useSession } from 'next-auth/react'
+import { useRouter } from 'next/navigation'
+
+import { SingleEntryForm } from 'app/editArea/[slug]/components/SingleEntryForm'
+import useUpdateAreasCmd from '@/js/hooks/useUpdateAreasCmd'
+import { AreaType } from '@/js/types'
+import { AreaDesignationRadioGroup, areaDesignationToDb, areaDesignationToForm, AreaTypeFormProp } from '@/components/edit/form/AreaDesignationRadioGroup'
+
+/**
+ * Set area type: general area | crag | boulder
+ */
+export const AreaTypeForm: React.FC<{ area: AreaType }> = ({ area }) => {
+  const { uuid, climbs, children } = area
+  const session = useSession({ required: true })
+  const router = useRouter()
+  const { updateOneAreaCmd } = useUpdateAreasCmd({
+    areaId: uuid,
+    accessToken: session?.data?.accessToken as string
+  }
+  )
+
+  const areaType = areaDesignationToForm(area.metadata)
+
+  // we're allowed to change area designation when the area has neither climbs nor areas.
+  const canChangeAreaType =
+    climbs.length === 0 &&
+    children.length === 0
+  return (
+    <SingleEntryForm<{ areaType: AreaTypeFormProp }>
+      initialValues={{ areaType }}
+      keepValuesAfterReset={false}
+      title='Area Type'
+      helperText='You can not change the type if this area contains subareas or climbs.'
+      submitHandler={async ({ areaType }) => {
+        const { isBoulder, isLeaf } = areaDesignationToDb(areaType)
+        await updateOneAreaCmd({ uuid, isBoulder, isLeaf })
+        router.refresh() // Ask Next to refresh props from the server
+      }}
+    >
+      <AreaDesignationRadioGroup disabled={!canChangeAreaType} />
+    </SingleEntryForm>
+  )
+}
diff --git a/src/app/editArea/[slug]/general/page.tsx b/src/app/editArea/[slug]/general/page.tsx
index dc8093939..e6ba01f92 100644
--- a/src/app/editArea/[slug]/general/page.tsx
+++ b/src/app/editArea/[slug]/general/page.tsx
@@ -1,14 +1,27 @@
 import { notFound } from 'next/navigation'
 import { validate } from 'uuid'
 import { ReactNode } from 'react'
+import { Metadata } from 'next'
 
 import { AreaPageDataProps, getArea } from '@/js/graphql/getArea'
-import { AreaNameForm } from './AreaNameForm'
-import { AreaDescriptionForm } from './AreaDescriptionForm'
+import { AreaNameForm } from './components/AreaNameForm'
+import { AreaDescriptionForm } from './components/AreaDescriptionForm'
+import { AreaLatLngForm } from './components/AreaLatLngForm'
+import { AddAreaForm } from './components/AddAreaForm'
+import { AreaList } from './components/AreaList'
+import { AreaTypeForm } from './components/AreaTypeForm'
 
 // Opt out of caching for all data requests in the route segment
 export const dynamic = 'force-dynamic'
 
+// Page metadata
+export async function generateMetadata ({ params }: DashboardPageProps): Promise<Metadata> {
+  const { area: { areaName } } = await getPageDataForEdit(params.slug)
+  return {
+    title: `Editing area ${areaName}`
+  }
+}
+
 export interface DashboardPageProps {
   params: {
     slug: string
@@ -16,19 +29,53 @@ export interface DashboardPageProps {
 }
 
 export default async function AreaEditPage ({ params }: DashboardPageProps): Promise<any> {
-  const { area: { areaName, uuid, content: { description } } } = await getPageDataForEdit(params.slug)
+  const { area } = await getPageDataForEdit(params.slug)
+  const {
+    areaName, uuid, ancestors, pathTokens, children,
+    content: { description },
+    metadata: { lat, lng }
+  } = area
   return (
-    <PageContainer>
-      <AreaNameForm initialValue={areaName} uuid={uuid} />
-      <AreaDescriptionForm initialValue={description} uuid={uuid} />
-    </PageContainer>
+    <div className='grid grid-cols-1 gap-y-8'>
+      <PageContainer id='general'>
+        <AreaNameForm initialValue={areaName} uuid={uuid} />
+      </PageContainer>
+
+      <PageContainer id='general'>
+        <AreaDescriptionForm initialValue={description} uuid={uuid} />
+      </PageContainer>
+
+      <PageContainer id='location'>
+        <AreaLatLngForm initLat={lat} initLng={lng} uuid={uuid} />
+      </PageContainer>
+
+      <PageContainer id='areaType'>
+        <AreaTypeForm area={area} />
+      </PageContainer>
+
+      <PageContainer id='addArea'>
+        <AddAreaForm area={area} />
+      </PageContainer>
+
+      <PageContainer id='children'>
+        <AreaList
+          areaName={areaName}
+          uuid={uuid}
+          ancestors={ancestors}
+          pathTokens={pathTokens}
+          areas={children}
+        />
+      </PageContainer>
+    </div>
   )
 }
 
-export const PageContainer: React.FC<{ children: ReactNode } > = ({ children }) => (
-  <section className='w-full flex flex-col gap-y-8'>
-    {children}
-  </section>
+export const PageContainer: React.FC<{ children: ReactNode, id: string }> = ({ id, children }) => (
+  <div id={id}>
+    <section className='mt-2 w-full flex flex-col gap-y-8'>
+      {children}
+    </section>
+  </div>
 )
 
 export const getPageDataForEdit = async (pageSlug: string): Promise<AreaPageDataProps> => {
diff --git a/src/app/editArea/[slug]/layout.tsx b/src/app/editArea/[slug]/layout.tsx
index 3d3c842bc..bfbc736ce 100644
--- a/src/app/editArea/[slug]/layout.tsx
+++ b/src/app/editArea/[slug]/layout.tsx
@@ -3,6 +3,9 @@ import { SidebarNav } from './SidebarNav'
 import { getPageDataForEdit } from './general/page'
 import { GluttenFreeCrumbs } from '@/components/ui/BreadCrumbs'
 
+// Opt out of caching for all data requests in the route segment
+export const dynamic = 'force-dynamic'
+
 /**
  * Layout for edit area dashboard
  */
@@ -12,23 +15,22 @@ export default async function RootLayout ({
   children: React.ReactNode
   params: { slug: string }
 }): Promise<any> {
-  const { area: { areaName, uuid, pathTokens, ancestors } } = await getPageDataForEdit(params.slug)
+  const { area: { uuid, pathTokens, ancestors } } = await getPageDataForEdit(params.slug)
   return (
     <div>
       <div className='px-12 pt-8 pb-4'>
-        <div className='flex items-center justify-between'>
-          <h1 className='text-4xl tracking-tight'>Edit area <span className='text-secondary'>{areaName}</span>
-          </h1>
-        </div>
+        <div className='text-3xl tracking-tight font-semibold'>Edit area</div>
+
         <GluttenFreeCrumbs pathTokens={pathTokens} ancestors={ancestors} />
         <div className='text-sm flex justify-end'>
-          <a href={`/area/${uuid}`} className='flex items-center gap-2'>
+          <a href={`/area/${uuid}`} className='flex items-center gap-2 hover:underline'>
             Return to public version <ArrowUUpLeft size={18} />
           </a>
         </div>
       </div>
 
       <hr className='border-1' />
+
       <div className='pt-12 flex bg-base-200 flex-col lg:flex-row'>
         <SidebarNav slug={params.slug} />
         <main className='w-full px-2 lg:px-16'>
diff --git a/src/app/editArea/[slug]/loading.tsx b/src/app/editArea/[slug]/loading.tsx
index d28e1a741..3d4e9e9ec 100644
--- a/src/app/editArea/[slug]/loading.tsx
+++ b/src/app/editArea/[slug]/loading.tsx
@@ -1,8 +1,11 @@
 import { PageContainer } from './general/page'
 
+/**
+ * Loading skeleton
+ */
 export default function Loading (): JSX.Element {
   return (
-    <PageContainer>
+    <PageContainer id='loading'>
       <div className='card card-compact card-bordered w-full h-56 bg-base-300/20' />
       <div className='card card-compact card-bordered w-full h-56 bg-base-300/20' />
       <div className='card card-compact card-bordered w-full h-56 bg-base-300/20' />
diff --git a/src/app/editArea/[slug]/location/page.tsx b/src/app/editArea/[slug]/location/page.tsx
deleted file mode 100644
index 3d6d68a1e..000000000
--- a/src/app/editArea/[slug]/location/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { AreaLatLngForm } from '../general/AreaLatLngForm'
-import { DashboardPageProps, getPageDataForEdit, PageContainer } from '../general/page'
-
-export default async function AreaEditPage ({ params }: DashboardPageProps): Promise<any> {
-  const { area: { uuid, metadata: { lat, lng } } } = await getPageDataForEdit(params.slug)
-
-  return (
-    <PageContainer>
-      <AreaLatLngForm initLat={lat} initLng={lng} uuid={uuid} />
-    </PageContainer>
-  )
-}
diff --git a/src/app/editArea/[slug]/manage/page.tsx b/src/app/editArea/[slug]/manage/page.tsx
deleted file mode 100644
index c5f291801..000000000
--- a/src/app/editArea/[slug]/manage/page.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { DashboardPageProps, getPageDataForEdit, PageContainer } from '../general/page'
-import { AreaList } from './components/AreaList'
-import { AddAreaForm } from './AddAreaForm'
-
-// Opt out of caching for all data requests in the route segment
-export const dynamic = 'force-dynamic'
-
-/**
- * Area management
- */
-export default async function Page ({ params }: DashboardPageProps): Promise<any> {
-  const { area } = await getPageDataForEdit(params.slug)
-
-  const { areaName, uuid, ancestors, pathTokens, children } = area
-
-  return (
-    <PageContainer>
-      <AddAreaForm area={area} />
-      <AreaList
-        areaName={areaName}
-        uuid={uuid}
-        ancestors={ancestors}
-        pathTokens={pathTokens}
-        areas={children}
-      />
-    </PageContainer>
-  )
-}
diff --git a/src/app/editArea/[slug]/updateCache/route.ts b/src/app/editArea/[slug]/updateCache/route.ts
index 5225e8bf1..566a6b02a 100644
--- a/src/app/editArea/[slug]/updateCache/route.ts
+++ b/src/app/editArea/[slug]/updateCache/route.ts
@@ -3,5 +3,6 @@ import { revalidatePath } from 'next/cache'
 
 export async function GET (request: Request, res: NextResponse): Promise<NextResponse> {
   revalidatePath('/editArea/[slug]', 'page')
+  revalidatePath('/editArea/[slug]/layout', 'page')
   return NextResponse.json({ message: 'ok' })
 }
diff --git a/src/app/global.css b/src/app/global.css
index 278124ebe..b99afe9ae 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -26,6 +26,10 @@ h3 {
     @apply text-base-content text-lg font-semibold tracking-tight leading-loose;
 }
 
+h4 {
+    @apply tracking-tight leading-loose;
+}
+
 .text-primary {
   @apply text-base-content !important;
 }
diff --git a/src/components/edit/form/AreaDesignationRadioGroup.tsx b/src/components/edit/form/AreaDesignationRadioGroup.tsx
index 559f684b7..1bd35f086 100644
--- a/src/components/edit/form/AreaDesignationRadioGroup.tsx
+++ b/src/components/edit/form/AreaDesignationRadioGroup.tsx
@@ -2,6 +2,7 @@ import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
 import { AreaMetadataType, AreaUpdatableFieldsType } from '../../../js/types'
 import { RadioGroup } from '../../ui/form'
 import Tooltip from '../../ui/Tooltip'
+import { EntityIcon } from 'app/editArea/[slug]/general/components/AreaItem'
 
 export type AreaTypeFormProp = 'crag' | 'area' | 'boulder'
 
@@ -16,16 +17,16 @@ export interface AreaDesignationRadioGroupProps {
  */
 export const AreaDesignationRadioGroup = ({ name = 'areaType', disabled = false }: AreaDesignationRadioGroupProps): JSX.Element => (
   <RadioGroup
-    groupLabel='Area designation'
+    groupLabel='Area type helps us organize subareas and climbs.'
     groupLabelAlt={<ExplainAreaTypeLockTooltip canEdit={!disabled} />}
     name={name}
     disabled={disabled}
     labels={[
-      'Area',
-      'Crag (sport, trad, ice)',
-      'Boulder']}
+      <EntityIcon key='area' type='area' size={28} />,
+      <EntityIcon key='crag' type='crag' size={28} />,
+      <EntityIcon key='boulder' type='boulder' size={28} />]}
     values={['area', 'crag', 'boulder']}
-    labelTips={['Group other areas.', 'List rope climbing routes.', 'List boulder problems.']}
+    labelTips={['Group other smaller areas.', 'List rope climbing routes.', 'List boulder problems.']}
     requiredErrorMessage='Please select an area type'
   />
 )
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index c6fbabee8..26a0d9014 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -21,7 +21,6 @@ function Layout ({
   return (
     <>
       <div className={rootContainerClass}>
-
         <Header showFilterBar={showFilterBar} />
         {hero}
         <main className={contentContainerClass}>
diff --git a/src/components/ui/BreadCrumbs.tsx b/src/components/ui/BreadCrumbs.tsx
index 478eecba6..d1450a18e 100644
--- a/src/components/ui/BreadCrumbs.tsx
+++ b/src/components/ui/BreadCrumbs.tsx
@@ -130,7 +130,7 @@ export const GluttenFreeCrumbs: React.FC<{
   ancestors: string[]
 }> = ({ pathTokens, ancestors }) => {
   return (
-    <div className='breadcrumbs'>
+    <div className='breadcrumbs text-sm'>
       <ul>
         <li><a href='/' className='text-secondary'>Home</a></li>
         {pathTokens.map((path, index) => {
@@ -148,7 +148,7 @@ const GFItem: React.FC<{ path: string, url: string, isLast: boolean }> =
     <li>
       <a
         href={url}
-        className={clx(isLast ? 'text-primary pointer-events-none font-semibold' : 'text-secondary')}
+        className={clx(isLast ? 'text-primary pointer-events-none font-semibold badge badge-info' : 'text-secondary')}
       >
         {path}
       </a>
diff --git a/src/components/ui/form/Input.tsx b/src/components/ui/form/Input.tsx
index ae5e22ad6..3c45ecdbb 100644
--- a/src/components/ui/form/Input.tsx
+++ b/src/components/ui/form/Input.tsx
@@ -123,7 +123,7 @@ export const DashboardInput: React.FC<DashboardInputProps> = ({ name, label, pla
   return (
     <div className='form-control'>
       <label className='flex flex-col items-start justify-start gap-2 pb-2' htmlFor={name}>
-        <span className='text-md'>{label}</span>
+        {label}
       </label>
       <BaseInput
         name={name}
diff --git a/src/components/ui/form/RadioGroup.tsx b/src/components/ui/form/RadioGroup.tsx
index ae309e1b5..f7393ad27 100644
--- a/src/components/ui/form/RadioGroup.tsx
+++ b/src/components/ui/form/RadioGroup.tsx
@@ -30,8 +30,8 @@ export default function RadioGroup ({ groupLabel, groupLabelAlt, name, labels, v
   return (
     <div className='form-control'>
       <label className='label'>
-        <span className='cursor-pointer label-text font-semibold uppercase'>{groupLabel}</span>
-        <span className='cursor-pointer label-text-alt'>{groupLabelAlt}</span>
+        <span>{groupLabel}</span>
+        <span>{groupLabelAlt}</span>
       </label>
       <div className='bg-base-100 rounded-box divide-y border'>
         {labels.map((label, index: number) => (
@@ -39,7 +39,7 @@ export default function RadioGroup ({ groupLabel, groupLabelAlt, name, labels, v
             <div className=''>
               <div>{label}</div>
               {labelTips?.[index] != null &&
-                <div className='text-xs text-base-200'>
+                <div className='text-xs text-secondary'>
                   {labelTips[index]}
                 </div>}
             </div>
diff --git a/src/js/graphql/getArea.ts b/src/js/graphql/getArea.ts
index 3c514f6d9..ef341571b 100644
--- a/src/js/graphql/getArea.ts
+++ b/src/js/graphql/getArea.ts
@@ -8,7 +8,7 @@ export interface AreaPageDataProps {
 }
 
 /**
- * Get area page data
+ * Get area page data.
  * @param uuid area uuid
  */
 export const getArea = async (uuid: string): Promise<AreaPageDataProps> => {