diff --git a/app/components/layout/dialog/dialog-form.tsx b/app/components/layout/dialog/dialog-form.tsx
new file mode 100644
index 00000000..050f9c81
--- /dev/null
+++ b/app/components/layout/dialog/dialog-form.tsx
@@ -0,0 +1,15 @@
+import { createContainerComponent } from '../utils'
+
+const DialogContentGrid = createContainerComponent({
+	defaultTagName: 'div',
+	defaultClassName: 'grid gap-4 py-4',
+	displayName: 'DialogContentGrid',
+})
+
+const DialogFormsContainer = createContainerComponent({
+	defaultTagName: 'div',
+	defaultClassName: 'grid gap-2',
+	displayName: 'DialogFormsContainer',
+})
+
+export { DialogContentGrid, DialogFormsContainer }
diff --git a/app/components/layout/dialog/index.ts b/app/components/layout/dialog/index.ts
new file mode 100644
index 00000000..245b0bc7
--- /dev/null
+++ b/app/components/layout/dialog/index.ts
@@ -0,0 +1 @@
+export * from './dialog-form'
diff --git a/app/components/layout/panel.tsx b/app/components/layout/panel.tsx
index 4abc1640..9b9d0ac6 100644
--- a/app/components/layout/panel.tsx
+++ b/app/components/layout/panel.tsx
@@ -64,6 +64,12 @@ const PanelRowValuesContainer = createContainerComponent({
 	displayName: 'PanelRowValuesContainer',
 })
 
+const PanelRowIconContainer = createContainerComponent({
+	defaultTagName: 'div',
+	defaultClassName: 'm-2 mr-0 flex h-8 w-8 items-center justify-center',
+	displayName: 'PanelRowIconContainer',
+})
+
 // similar to a <nav> for the panel,
 // but no page navigation is occurring so just div
 // flex shrink to let values take up remaining space
@@ -81,5 +87,6 @@ export {
 	PanelTitle,
 	PanelRowReorderContainer,
 	PanelRowValuesContainer,
+	PanelRowIconContainer,
 	PanelRowActionsContainer,
 }
diff --git a/app/components/shared/index.ts b/app/components/shared/index.ts
index d2154250..6272a3a2 100644
--- a/app/components/shared/index.ts
+++ b/app/components/shared/index.ts
@@ -4,7 +4,6 @@ export * from './dialog-form'
 export * from './footer'
 export * from './form'
 export * from './page-layout'
-export * from './panel'
 export * from './side-nav'
 export * from './side-nav-form'
 export * from './side-nav-forms-list'
diff --git a/app/components/shared/panel.tsx b/app/components/shared/panel.tsx
deleted file mode 100644
index b1b873c6..00000000
--- a/app/components/shared/panel.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { cn } from '#app/utils/misc'
-
-const Panel = ({ children }: { children: React.ReactNode }) => {
-	return <div className="grid w-full border-b-2 py-2">{children}</div>
-}
-
-const PanelRow = ({
-	children,
-	className,
-}: {
-	children: React.ReactNode
-	className?: string
-}) => {
-	return (
-		<div
-			className={cn(
-				'relative grid h-8 w-full grid-cols-12 grid-rows-1 items-center px-2',
-				className,
-			)}
-		>
-			{children}
-		</div>
-	)
-}
-
-const PanelRowContainer = ({ children }: { children: React.ReactNode }) => {
-	return (
-		<div className="col-start-1 col-end-13 flex items-center justify-between gap-2">
-			{children}
-		</div>
-	)
-}
-
-const PanelHeader = ({ children }: { children: React.ReactNode }) => {
-	return (
-		<PanelRow>
-			<PanelRowContainer>{children}</PanelRowContainer>
-		</PanelRow>
-	)
-}
-
-const PanelTitle = ({ children }: { children: React.ReactNode }) => {
-	return (
-		<div className="col-start-1 h-8 w-full self-center overflow-x-hidden pl-2">
-			<span className="flex items-center">{children}</span>
-		</div>
-	)
-}
-
-const PanelRowOrderContainer = ({
-	children,
-}: {
-	children: React.ReactNode
-}) => {
-	return (
-		<div className="l-0 t-0 absolute flex h-8 w-4 flex-col items-center justify-center">
-			{children}
-		</div>
-	)
-}
-
-const PanelRowValueContainer = ({
-	children,
-	className,
-}: {
-	children: React.ReactNode
-	className?: string
-}) => {
-	return (
-		<div className={cn('col-end-8 flex max-w-36 items-center', className)}>
-			{children}
-		</div>
-	)
-}
-
-const PanelRowIconContainer = ({ children }: { children: React.ReactNode }) => {
-	return <div className="flex flex-shrink-0 items-center">{children}</div>
-}
-
-export {
-	Panel,
-	PanelRow,
-	PanelRowContainer,
-	PanelHeader,
-	PanelTitle,
-	PanelRowOrderContainer,
-	PanelRowValueContainer,
-	PanelRowIconContainer,
-}
diff --git a/app/components/templates/panel/dashboard-entity-panel.actions.delete.tsx b/app/components/templates/panel/dashboard-entity-panel.actions.delete.tsx
index 42a552de..3b8a0f41 100644
--- a/app/components/templates/panel/dashboard-entity-panel.actions.delete.tsx
+++ b/app/components/templates/panel/dashboard-entity-panel.actions.delete.tsx
@@ -1,4 +1,5 @@
 import { memo, useCallback } from 'react'
+import { type IDesign } from '#app/models/design/design.server'
 import { ArtworkVersionDesignDelete } from '#app/routes/resources+/api.v1+/artwork-version.design.delete'
 import { LayerDesignDelete } from '#app/routes/resources+/api.v1+/layer.design.delete'
 import {
@@ -24,11 +25,16 @@ const ArtworkVersionDeleteChildEntityForm = memo(
 			case EntityType.DESIGN:
 				return (
 					<ArtworkVersionDesignDelete
-						designId={entity.id}
+						design={entity as IDesign}
 						versionId={parent.id}
 					/>
 				)
 			case EntityType.LAYER:
+				// artwork version layer delete not on panel actions
+				// could be too easy to click and create a cascade of actions
+				// delete is inside popover
+				// keeping this here so if it shows up somehow,
+				// it will stick out sorely and this decision will be remembered
 				return 'av l'
 			default:
 				console.log('unknown artwork version entity type', entityType)
@@ -43,7 +49,9 @@ const LayerDeleteChildEntityForm = memo(
 	({ entityType, entity, parent }: DeleteChildEntityFormProps) => {
 		switch (entityType) {
 			case EntityType.DESIGN:
-				return <LayerDesignDelete designId={entity.id} layerId={parent.id} />
+				return (
+					<LayerDesignDelete design={entity as IDesign} layerId={parent.id} />
+				)
 			default:
 				console.log('unknown layer entity type', entityType)
 				return null
diff --git a/app/components/templates/panel/dashboard-entity-panel.icons.tsx b/app/components/templates/panel/dashboard-entity-panel.icons.tsx
index c8c5b77d..c4745955 100644
--- a/app/components/templates/panel/dashboard-entity-panel.icons.tsx
+++ b/app/components/templates/panel/dashboard-entity-panel.icons.tsx
@@ -1,3 +1,4 @@
+import { PanelRowIconContainer } from '#app/components/layout'
 import { Icon, type IconName } from '#app/components/ui/icon'
 
 export const PanelEntityIcon = ({
@@ -10,7 +11,7 @@ export const PanelEntityIcon = ({
 	text: string
 }) => {
 	return (
-		<div className="m-2 mr-0 flex h-8 w-8 items-center justify-center">
+		<PanelRowIconContainer>
 			{icon ? (
 				<Icon name={icon}>
 					<span className="sr-only">{text}</span>
@@ -18,6 +19,6 @@ export const PanelEntityIcon = ({
 			) : symbol ? (
 				<span className="text-body-xs leading-none">{symbol}</span>
 			) : null}
-		</div>
+		</PanelRowIconContainer>
 	)
 }
diff --git a/app/components/templates/panel/dashboard-entity-panel.values.design.line.tsx b/app/components/templates/panel/dashboard-entity-panel.values.design.line.tsx
index e0cd7cae..665a8554 100644
--- a/app/components/templates/panel/dashboard-entity-panel.values.design.line.tsx
+++ b/app/components/templates/panel/dashboard-entity-panel.values.design.line.tsx
@@ -12,8 +12,11 @@ import {
 	type lineBasisTypeEnum,
 	lineFormatIcon,
 	type lineFormatTypeEnum,
+	lineFormatIconTooltip,
+	lineBasisIconTooltip,
 } from '#app/schema/line'
 import { SidebarPanelRowValuesContainer } from '..'
+import { TooltipForContent } from '../tooltip'
 import { PanelEntityIcon } from './dashboard-entity-panel.icons'
 import { PanelEntityPopover } from './dashboard-entity-panel.popover'
 
@@ -59,8 +62,13 @@ const EntityFormatIcon = memo(({ entity }: EntityProps) => {
 	const { line } = entity as IDesignWithLine
 	const { format } = line
 	const symbol = lineFormatIcon(format as lineFormatTypeEnum)
+	const tooltipText = lineFormatIconTooltip(format as lineFormatTypeEnum)
 
-	return <PanelEntityIcon symbol={symbol} text={`Line format: ${format}`} />
+	return (
+		<TooltipForContent tooltipText={tooltipText}>
+			<PanelEntityIcon symbol={symbol} text={`Line format: ${format}`} />
+		</TooltipForContent>
+	)
 })
 EntityFormatIcon.displayName = 'EntityFormatIcon'
 
@@ -70,8 +78,13 @@ const EntityBasisIcon = memo(({ entity }: EntityProps) => {
 
 	if (format === LineFormatTypeEnum.PIXEL) return null
 	const icon = lineBasisIcon(basis as lineBasisTypeEnum) as IconName
+	const tooltipText = lineBasisIconTooltip(basis as lineBasisTypeEnum)
 
-	return <PanelEntityIcon icon={icon} text={`Line basis: ${basis}`} />
+	return (
+		<TooltipForContent tooltipText={tooltipText}>
+			<PanelEntityIcon icon={icon} text={`Line basis: ${basis}`} />
+		</TooltipForContent>
+	)
 })
 EntityBasisIcon.displayName = 'EntityBasisIcon'
 
diff --git a/app/components/templates/panel/dashboard-entity-panel.values.design.rotate.tsx b/app/components/templates/panel/dashboard-entity-panel.values.design.rotate.tsx
index c3416458..7f126b25 100644
--- a/app/components/templates/panel/dashboard-entity-panel.values.design.rotate.tsx
+++ b/app/components/templates/panel/dashboard-entity-panel.values.design.rotate.tsx
@@ -6,6 +6,7 @@ import { DesignTypeRotateValue } from '#app/routes/resources+/api.v1+/design.typ
 import { type IEntity } from '#app/schema/entity'
 import { RotateBasisTypeEnum } from '#app/schema/rotate'
 import { SidebarPanelRowValuesContainer } from '..'
+import { TooltipForContent } from '../tooltip'
 import { PanelEntityIcon } from './dashboard-entity-panel.icons'
 import { PanelEntityPopover } from './dashboard-entity-panel.popover'
 
@@ -53,8 +54,13 @@ const EntityBasisIcon = memo(({ entity }: EntityProps) => {
 
 	if (basis !== RotateBasisTypeEnum.DEFINED) return null
 	const symbol = '°'
+	const tooltipText = 'Degrees'
 
-	return <PanelEntityIcon symbol={symbol} text={`Rotate basis: ${basis}`} />
+	return (
+		<TooltipForContent tooltipText={tooltipText}>
+			<PanelEntityIcon symbol={symbol} text={`Rotate basis: ${basis}`} />
+		</TooltipForContent>
+	)
 })
 EntityBasisIcon.displayName = 'EntityBasisIcon'
 
diff --git a/app/components/templates/panel/dashboard-entity-panel.values.design.size.tsx b/app/components/templates/panel/dashboard-entity-panel.values.design.size.tsx
index 0b86322d..2138680f 100644
--- a/app/components/templates/panel/dashboard-entity-panel.values.design.size.tsx
+++ b/app/components/templates/panel/dashboard-entity-panel.values.design.size.tsx
@@ -12,8 +12,11 @@ import {
 	type sizeBasisTypeEnum,
 	sizeFormatIcon,
 	type sizeFormatTypeEnum,
+	sizeFormatIconTooltip,
+	sizeBasisIconTooltip,
 } from '#app/schema/size'
 import { SidebarPanelRowValuesContainer } from '..'
+import { TooltipForContent } from '../tooltip'
 import { PanelEntityIcon } from './dashboard-entity-panel.icons'
 import { PanelEntityPopover } from './dashboard-entity-panel.popover'
 
@@ -60,8 +63,13 @@ const EntityFormatIcon = memo(({ entity }: EntityProps) => {
 	const { format } = size
 
 	const symbol = sizeFormatIcon(format as sizeFormatTypeEnum)
+	const tooltipText = sizeFormatIconTooltip(format as sizeFormatTypeEnum)
 
-	return <PanelEntityIcon symbol={symbol} text={`Size format: ${format}`} />
+	return (
+		<TooltipForContent tooltipText={tooltipText}>
+			<PanelEntityIcon symbol={symbol} text={`Size format: ${format}`} />
+		</TooltipForContent>
+	)
 })
 EntityFormatIcon.displayName = 'EntityFormatIcon'
 
@@ -71,8 +79,13 @@ const EntityBasisIcon = memo(({ entity }: EntityProps) => {
 
 	if (format === SizeFormatTypeEnum.PIXEL) return undefined
 	const icon = sizeBasisIcon(basis as sizeBasisTypeEnum) as IconName
+	const tooltipText = sizeBasisIconTooltip(basis as sizeBasisTypeEnum)
 
-	return <PanelEntityIcon icon={icon} text={`Line basis: ${basis}`} />
+	return (
+		<TooltipForContent tooltipText={tooltipText}>
+			<PanelEntityIcon icon={icon} text={`Line basis: ${basis}`} />
+		</TooltipForContent>
+	)
 })
 EntityBasisIcon.displayName = 'EntityBasisIcon'
 
diff --git a/app/components/templates/tooltip/index.ts b/app/components/templates/tooltip/index.ts
new file mode 100644
index 00000000..bba3a02a
--- /dev/null
+++ b/app/components/templates/tooltip/index.ts
@@ -0,0 +1,2 @@
+export * from './tooltip-for-content'
+export * from './tooltip-hydrated'
diff --git a/app/components/templates/tooltip/tooltip-for-content.tsx b/app/components/templates/tooltip/tooltip-for-content.tsx
new file mode 100644
index 00000000..7f16cae9
--- /dev/null
+++ b/app/components/templates/tooltip/tooltip-for-content.tsx
@@ -0,0 +1,27 @@
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip'
+
+// use only for content that is not interactive
+// like a button or link
+// for buttons or links, use TooltipHydrated
+
+export const TooltipForContent = ({
+	tooltipText,
+	children,
+}: {
+	tooltipText: string
+	children: JSX.Element
+}) => {
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger>{children}</TooltipTrigger>
+				<TooltipContent>{tooltipText}</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	)
+}
diff --git a/app/components/templates/tooltip/tooltip-hydrated.tsx b/app/components/templates/tooltip/tooltip-hydrated.tsx
new file mode 100644
index 00000000..0a88b46b
--- /dev/null
+++ b/app/components/templates/tooltip/tooltip-hydrated.tsx
@@ -0,0 +1,31 @@
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip'
+
+// tooltip button, for example, needs to wait for hydration to avoid SSR issues
+// before hydration, render the button without the tooltip
+// after hydration, render the button with the tooltip
+
+export const TooltipHydrated = ({
+	tooltipText,
+	isHydrated,
+	children,
+}: {
+	tooltipText: string
+	isHydrated: boolean
+	children: JSX.Element
+}) => {
+	if (!isHydrated) return children
+
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger asChild>{children}</TooltipTrigger>
+				<TooltipContent>{tooltipText}</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	)
+}
diff --git a/app/routes/resources+/api.v1+/artwork-branch.create.tsx b/app/routes/resources+/api.v1+/artwork-branch.create.tsx
index c834426e..e8d50910 100644
--- a/app/routes/resources+/api.v1+/artwork-branch.create.tsx
+++ b/app/routes/resources+/api.v1+/artwork-branch.create.tsx
@@ -11,6 +11,11 @@ import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
 import { Field, TextareaField } from '#app/components/forms'
+import {
+	DialogContentGrid,
+	DialogFormsContainer,
+} from '#app/components/layout/dialog'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import {
 	Dialog,
 	DialogContent,
@@ -79,25 +84,23 @@ export async function action({ request }: ActionFunctionArgs) {
 }
 
 export const ArtworkBranchCreate = ({
-	branchId,
 	artworkId,
+	branchId,
 	versionId,
-	formId,
 }: {
-	branchId: IArtworkBranch['id']
 	artworkId: IArtwork['id']
+	branchId: IArtworkBranch['id']
 	versionId: IArtworkVersion['id']
-	formId: string
 }) => {
 	const [open, setOpen] = useState(false)
 
 	const fetcher = useFetcher<typeof action>()
 	const isPending = useIsPending()
 	const navigate = useNavigate()
-
 	let isHydrated = useHydrated()
+
 	const [form, fields] = useForm({
-		id: `${formId}-${artworkId}-${branchId}-${versionId}`,
+		id: `artwork-branch-create-${artworkId}-${branchId}-${versionId}`,
 		constraint: getFieldsetConstraint(schema),
 		lastSubmission: fetcher.data?.submission,
 		onValidate: ({ formData }) => {
@@ -120,25 +123,20 @@ export const ArtworkBranchCreate = ({
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			{/* Warning: Expected server HTML to contain a matching <button> in <button>. */}
-			{/* <TooltipIconDialogTrigger
-				icon="file-plus"
-				text="New Branch"
-				tooltipText="Create a new branch from current branch and version..."
-			/> */}
-			{/* Tooltip on dialog is not a priority right now */}
-			<DialogTrigger asChild>
-				<PanelIconButton iconName="file-plus" iconText="New Branch" />
-			</DialogTrigger>
+			<TooltipHydrated tooltipText="New branch..." isHydrated={isHydrated}>
+				<DialogTrigger asChild>
+					<PanelIconButton iconName="file-plus" iconText="New Branch" />
+				</DialogTrigger>
+			</TooltipHydrated>
 			<DialogContent className="sm:max-w-[425px]">
 				<DialogHeader>
 					<DialogTitle>Create a new branch</DialogTitle>
 					<DialogDescription>
-						Save a new branch of this artwork. Add a name and description to
-						help understand the changes. Click save when you're done.
+						Start a new branch for this artwork off the current settings. Add a
+						name and description to help understand the changes.
 					</DialogDescription>
 				</DialogHeader>
-				<div className="grid gap-4 py-4">
+				<DialogContentGrid>
 					<fetcher.Form method="POST" action={route} {...form.props}>
 						<AuthenticityTokenInput />
 
@@ -147,7 +145,7 @@ export const ArtworkBranchCreate = ({
 						<input type="hidden" name="artworkId" value={artworkId} />
 						<input type="hidden" name="versionId" value={versionId} />
 
-						<div className="grid grid-cols-4 items-center gap-4">
+						<DialogFormsContainer>
 							<Field
 								labelProps={{ children: 'Name' }}
 								inputProps={{
@@ -165,9 +163,9 @@ export const ArtworkBranchCreate = ({
 								}}
 								errors={fields.description.errors}
 							/>
-						</div>
+						</DialogFormsContainer>
 					</fetcher.Form>
-				</div>
+				</DialogContentGrid>
 				<DialogFooter>
 					<StatusButton
 						form={form.id}
diff --git a/app/routes/resources+/api.v1+/artwork-version.create.tsx b/app/routes/resources+/api.v1+/artwork-version.create.tsx
index 318b81d3..b709dc69 100644
--- a/app/routes/resources+/api.v1+/artwork-version.create.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.create.tsx
@@ -11,6 +11,11 @@ import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
 import { TextareaField } from '#app/components/forms'
+import {
+	DialogContentGrid,
+	DialogFormsContainer,
+} from '#app/components/layout/dialog'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import {
 	Dialog,
 	DialogContent,
@@ -22,13 +27,10 @@ import {
 } from '#app/components/ui/dialog'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { StatusButton } from '#app/components/ui/status-button'
+import { type IArtworkBranch } from '#app/models/artwork-branch/artwork-branch.server'
 import { validateNewArtworkVersionSubmission } from '#app/models/artwork-version/artwork-version.create.server'
+import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { NewArtworkVersionSchema } from '#app/schema/artwork-version'
-import {
-	type IEntityId,
-	type IEntityParentId,
-	type entityParentIdTypeEnum,
-} from '#app/schema/entity'
 import { validateNoJS } from '#app/schema/form-data'
 import { artworkVersionCreateService } from '#app/services/artwork/branch/version/create.service'
 import { requireUserId } from '#app/utils/auth.server'
@@ -79,16 +81,12 @@ export async function action({ request }: ActionFunctionArgs) {
 }
 
 export const ArtworkVersionCreate = ({
-	entityId,
-	parentTypeId,
-	parentId,
-	formId,
+	branchId,
+	versionId,
 	onOlderVersion,
 }: {
-	entityId?: IEntityId
-	parentTypeId?: entityParentIdTypeEnum
-	parentId?: IEntityParentId
-	formId: string
+	branchId: IArtworkBranch['id']
+	versionId: IArtworkVersion['id']
 	onOlderVersion: boolean
 }) => {
 	const [open, setOpen] = useState(false)
@@ -97,10 +95,10 @@ export const ArtworkVersionCreate = ({
 	const isPending = useIsPending()
 	const params = useParams()
 	const navigate = useNavigate()
-
 	let isHydrated = useHydrated()
+
 	const [form, fields] = useForm({
-		id: `${formId}-${parentId || 'parent'}-${entityId || 'new'}`,
+		id: `artwork-version-create-${branchId || 'parent'}-${versionId || 'new'}`,
 		constraint: getFieldsetConstraint(schema),
 		lastSubmission: fetcher.data?.submission,
 		defaultValue: {
@@ -122,52 +120,29 @@ export const ArtworkVersionCreate = ({
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			{/* Warning: Expected server HTML to contain a matching <button> in <button>. */}
-			{/* <TooltipIconDialogTrigger
-				icon="card-stack-plus"
-				text="New Version"
-				tooltipText="Save current changes to new version..."
-			/> */}
-
-			{/* Tooltip on dialog is not a priority right now */}
-			<DialogTrigger asChild>
-				<PanelIconButton iconName="card-stack-plus" iconText="New Version" />
-			</DialogTrigger>
-
-			{/* <TooltipProvider>
-				<Tooltip>
-					<TooltipTrigger>
-						<DialogTrigger asChild>
-							<PanelIconButton
-								iconName="card-stack-plus"
-								iconText="New Version"
-							/>
-						</DialogTrigger>
-					</TooltipTrigger>
-					<TooltipContent>
-						Save current changes to new version...
-					</TooltipContent>
-				</Tooltip>
-			</TooltipProvider> */}
+			<TooltipHydrated tooltipText="Save version..." isHydrated={isHydrated}>
+				<DialogTrigger asChild>
+					<PanelIconButton iconName="card-stack-plus" iconText="New Version" />
+				</DialogTrigger>
+			</TooltipHydrated>
 			<DialogContent className="sm:max-w-[425px]">
 				<DialogHeader>
-					<DialogTitle>Create new version</DialogTitle>
+					<DialogTitle>Save version</DialogTitle>
 					<DialogDescription>
-						Save a new version of this artwork. Add a description to help
-						understand the changes. Click save when you're done.
+						Save current settings of this artwork to a version. Add a
+						description to help understand the changes. A new version will be
+						created from here.
 					</DialogDescription>
 				</DialogHeader>
-				<div className="grid gap-4 py-4">
+				<DialogContentGrid>
 					<fetcher.Form method="POST" action={route} {...form.props}>
 						<AuthenticityTokenInput />
 
 						<input type="hidden" name="no-js" value={String(!isHydrated)} />
-						<input type="hidden" name="id" value={entityId} />
-						{parentId && (
-							<input type="hidden" name={parentTypeId} value={parentId} />
-						)}
+						<input type="hidden" name="id" value={versionId} />
+						<input type="hidden" name="branchId" value={branchId} />
 
-						<div className="grid grid-cols-4 items-center gap-4">
+						<DialogFormsContainer>
 							<TextareaField
 								labelProps={{ children: 'Description' }}
 								textareaProps={{
@@ -177,15 +152,22 @@ export const ArtworkVersionCreate = ({
 								}}
 								errors={fields.description.errors}
 							/>
-						</div>
+						</DialogFormsContainer>
 					</fetcher.Form>
-					{onOlderVersion && (
+					{onOlderVersion ? (
 						<p className="body-md pt-4 text-destructive">
-							Creating a new version will erase all versions after the current
-							version.
+							WARNING: Saving the version before "latest" will erase all
+							versions after the current version. Consider creating a new branch
+							instead if you want to keep the existing versions.
+						</p>
+					) : (
+						<p className="body-md pt-4">
+							To undo version history, just save a version from the last desired
+							version before the "latest" and all existing versions after that
+							will be replaced.
 						</p>
 					)}
-				</div>
+				</DialogContentGrid>
 				<DialogFooter>
 					<StatusButton
 						form={form.id}
diff --git a/app/routes/resources+/api.v1+/artwork-version.design.create.tsx b/app/routes/resources+/api.v1+/artwork-version.design.create.tsx
index 41a9d0a6..e2e7650d 100644
--- a/app/routes/resources+/api.v1+/artwork-version.design.create.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.design.create.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { validateArtworkVersionNewDesignSubmission } from '#app/models/design-artwork-version/design-artwork-version.create.server'
@@ -72,10 +73,13 @@ export const ArtworkVersionDesignCreate = ({
 	type: designTypeEnum
 	versionId: IArtworkVersion['id']
 }) => {
+	const iconText = `Add new ${type}`
+
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
 	const isPending = useIsPending()
 	let isHydrated = useHydrated()
+
 	const [form] = useForm({
 		id: `artwork-version-design-create-${versionId}-new`,
 		constraint: getFieldsetConstraint(schema),
@@ -94,12 +98,14 @@ export const ArtworkVersionDesignCreate = ({
 			/>
 			<input type="hidden" name="type" value={type} />
 
-			<PanelIconButton
-				type="submit"
-				iconName="plus"
-				iconText={`Add new ${type}`}
-				disabled={isPending}
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName="plus"
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/artwork-version.design.delete.tsx b/app/routes/resources+/api.v1+/artwork-version.design.delete.tsx
index 474c0edd..d1681657 100644
--- a/app/routes/resources+/api.v1+/artwork-version.design.delete.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.design.delete.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type IDesign } from '#app/models/design/design.server'
@@ -66,16 +67,20 @@ export async function action({ request }: ActionFunctionArgs) {
 }
 
 export const ArtworkVersionDesignDelete = ({
-	designId,
+	design,
 	versionId,
 }: {
-	designId: IDesign['id']
+	design: IDesign
 	versionId: IArtworkVersion['id']
 }) => {
+	const designId = design.id
+	const iconText = `Delete ${design.type}`
+
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
 	const isPending = useIsPending()
 	let isHydrated = useHydrated()
+
 	const [form] = useForm({
 		id: `artwork-version-design-delete-${versionId}-${designId}`,
 		constraint: getFieldsetConstraint(schema),
@@ -94,12 +99,14 @@ export const ArtworkVersionDesignDelete = ({
 				value={versionId}
 			/>
 
-			<PanelIconButton
-				type="submit"
-				iconName="minus"
-				iconText="Delete design"
-				disabled={isPending}
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName="minus"
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/artwork-version.design.update.order.tsx b/app/routes/resources+/api.v1+/artwork-version.design.update.order.tsx
index f7ef47a0..001711fb 100644
--- a/app/routes/resources+/api.v1+/artwork-version.design.update.order.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.design.update.order.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { type IconName } from '#app/components/ui/icon'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
@@ -114,14 +115,16 @@ export const ArtworkVersionDesignReorder = ({
 			/>
 			<input type="hidden" name="direction" value={direction} />
 
-			<PanelIconButton
-				type="submit"
-				iconName={icon as IconName}
-				iconText={iconText}
-				size="panel-sm"
-				disabled={atTopOrBottom || isPending}
-				className="my-0"
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName={icon as IconName}
+					iconText={iconText}
+					size="panel-sm"
+					disabled={atTopOrBottom || isPending}
+					className="my-0"
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/artwork-version.design.update.visible.tsx b/app/routes/resources+/api.v1+/artwork-version.design.update.visible.tsx
index 9dede3c7..88863bc3 100644
--- a/app/routes/resources+/api.v1+/artwork-version.design.update.visible.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.design.update.visible.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type IDesign } from '#app/models/design/design.server'
@@ -76,7 +77,7 @@ export const ArtworkVersionDesignToggleVisible = ({
 	const designId = design.id
 	const isVisible = design.visible
 	const icon = isVisible ? 'eye-open' : 'eye-closed'
-	const iconText = isVisible ? 'Hide design' : 'Show design'
+	const iconText = `${isVisible ? 'Hide' : 'Show'} ${design.type}`
 
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
@@ -100,12 +101,14 @@ export const ArtworkVersionDesignToggleVisible = ({
 				value={versionId}
 			/>
 
-			<PanelIconButton
-				type="submit"
-				iconName={icon}
-				iconText={iconText}
-				disabled={isPending}
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName={icon}
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/artwork-version.layer.create.tsx b/app/routes/resources+/api.v1+/artwork-version.layer.create.tsx
index 38a34b2f..481a6424 100644
--- a/app/routes/resources+/api.v1+/artwork-version.layer.create.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.layer.create.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { validateArtworkVersionNewLayerSubmission } from '#app/models/layer/layer.create.server'
@@ -70,6 +71,8 @@ export const ArtworkVersionLayerCreate = ({
 }: {
 	versionId: IArtworkVersion['id']
 }) => {
+	const iconText = 'Add new layer'
+
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
 	const isPending = useIsPending()
@@ -91,12 +94,14 @@ export const ArtworkVersionLayerCreate = ({
 				value={versionId}
 			/>
 
-			<PanelIconButton
-				type="submit"
-				iconName="plus"
-				iconText="Add new layer"
-				disabled={isPending}
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName="plus"
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/artwork-version.layer.delete.tsx b/app/routes/resources+/api.v1+/artwork-version.layer.delete.tsx
index f3f7ae71..8243e8c7 100644
--- a/app/routes/resources+/api.v1+/artwork-version.layer.delete.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.layer.delete.tsx
@@ -83,6 +83,7 @@ export const ArtworkVersionLayerDelete = ({
 
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
+	const isDeleted = fetcher.data?.status === 'success'
 	const isPending = useIsPending()
 	let isHydrated = useHydrated()
 	const [form] = useForm({
@@ -117,7 +118,9 @@ export const ArtworkVersionLayerDelete = ({
 				disabled={isPending}
 			>
 				<Icon name="trash" className="scale-125 max-md:scale-150">
-					<span className="max-md:hidden">Delete layer</span>
+					<span className="max-md:hidden">
+						{isDeleted ? 'Deleted' : 'Delete layer'}
+					</span>
 				</Icon>
 			</StatusButton>
 		</fetcher.Form>
diff --git a/app/routes/resources+/api.v1+/artwork-version.layer.update.order.tsx b/app/routes/resources+/api.v1+/artwork-version.layer.update.order.tsx
index f8ec9a19..7b9b0205 100644
--- a/app/routes/resources+/api.v1+/artwork-version.layer.update.order.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.layer.update.order.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { type IconName } from '#app/components/ui/icon'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
@@ -114,14 +115,16 @@ export const ArtworkVersionLayerReorder = ({
 			/>
 			<input type="hidden" name="direction" value={direction} />
 
-			<PanelIconButton
-				type="submit"
-				iconName={icon as IconName}
-				iconText={iconText}
-				size="panel-sm"
-				disabled={atTopOrBottom || isPending}
-				className="my-0"
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName={icon as IconName}
+					iconText={iconText}
+					size="panel-sm"
+					disabled={atTopOrBottom || isPending}
+					className="my-0"
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/artwork-version.layer.update.selected.tsx b/app/routes/resources+/api.v1+/artwork-version.layer.update.selected.tsx
index 4e2dbcee..5bd3dd73 100644
--- a/app/routes/resources+/api.v1+/artwork-version.layer.update.selected.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.layer.update.selected.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type ILayer } from '#app/models/layer/layer.server'
@@ -76,7 +77,8 @@ export const ArtworkVersionLayerToggleSelected = ({
 	const layerId = layer.id
 	const isSelected = layer.selected
 	const icon = isSelected ? 'crosshair-2' : 'crosshair-1'
-	const iconText = isSelected ? 'Deselect layer' : 'Select layer'
+	const iconText = `${isSelected ? 'Deselect' : 'Select'} layer`
+	const tooltipText = `Edit ${isSelected ? 'artwork' : layer.name} designs`
 	const className = isSelected ? 'bg-primary text-primary-foreground' : ''
 
 	const fetcher = useFetcher<typeof action>()
@@ -101,13 +103,15 @@ export const ArtworkVersionLayerToggleSelected = ({
 				value={versionId}
 			/>
 
-			<PanelIconButton
-				type="submit"
-				iconName={icon}
-				iconText={iconText}
-				disabled={isPending}
-				className={className}
-			/>
+			<TooltipHydrated tooltipText={tooltipText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName={icon}
+					iconText={iconText}
+					disabled={isPending}
+					className={className}
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/artwork-version.layer.update.visible.tsx b/app/routes/resources+/api.v1+/artwork-version.layer.update.visible.tsx
index 58555806..28456abe 100644
--- a/app/routes/resources+/api.v1+/artwork-version.layer.update.visible.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.layer.update.visible.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type ILayer } from '#app/models/layer/layer.server'
@@ -76,7 +77,7 @@ export const ArtworkVersionLayerToggleVisible = ({
 	const layerId = layer.id
 	const isVisible = layer.visible
 	const icon = isVisible ? 'eye-open' : 'eye-closed'
-	const iconText = isVisible ? 'Hide layer' : 'Show layer'
+	const iconText = `${isVisible ? 'Hide' : 'Show'} ${layer.name}`
 
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
@@ -100,12 +101,14 @@ export const ArtworkVersionLayerToggleVisible = ({
 				value={versionId}
 			/>
 
-			<PanelIconButton
-				type="submit"
-				iconName={icon}
-				iconText={iconText}
-				disabled={isPending}
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName={icon}
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx b/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx
index f0b90a39..098b6ff2 100644
--- a/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx
@@ -9,13 +9,8 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '#app/components/ui/tooltip'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { validateArtworkVersionStarredSubmission } from '#app/models/artwork-version/artwork-version.update.server'
 import { ArtworkVersionStarredSchema } from '#app/schema/artwork-version'
@@ -79,17 +74,20 @@ export const ArtworkVersionToggleStarred = ({
 	const isStarred = version.starred
 	const icon = isStarred ? 'star-filled' : 'star'
 	const iconText = isStarred ? 'Unstar version' : 'Star version'
+	const tooltipText = isStarred
+		? 'Remove from starred versions'
+		: 'Add to starred versions'
 
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
 	const isPending = useIsPending()
 	let isHydrated = useHydrated()
+
 	const [form] = useForm({
 		id: `artwork-version-toggle-starred-${versionId}`,
 		constraint: getFieldsetConstraint(schema),
 		lastSubmission,
 	})
-
 	return (
 		<fetcher.Form method="POST" action={route} {...form.props}>
 			<AuthenticityTokenInput />
@@ -97,21 +95,14 @@ export const ArtworkVersionToggleStarred = ({
 			<input type="hidden" name="no-js" value={String(!isHydrated)} />
 			<input type="hidden" name="id" value={versionId} />
 
-			{isHydrated ? (
-				<TooltipProvider>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<PanelIconButton
-								type="submit"
-								iconName={icon}
-								iconText={iconText}
-								disabled={isPending}
-							/>
-						</TooltipTrigger>
-						<TooltipContent>{iconText}</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
-			) : null}
+			<TooltipHydrated tooltipText={tooltipText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName={icon}
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/layer.design.create.tsx b/app/routes/resources+/api.v1+/layer.design.create.tsx
index 1d83fd66..c020b50b 100644
--- a/app/routes/resources+/api.v1+/layer.design.create.tsx
+++ b/app/routes/resources+/api.v1+/layer.design.create.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { validateLayerNewDesignSubmission } from '#app/models/design-layer/design-layer.create.server'
 import { type ILayer } from '#app/models/layer/layer.server'
@@ -71,6 +72,8 @@ export const LayerDesignCreate = ({
 	type: designTypeEnum
 	layerId: ILayer['id']
 }) => {
+	const iconText = `Add new ${type}`
+
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
 	const isPending = useIsPending()
@@ -89,12 +92,14 @@ export const LayerDesignCreate = ({
 			<input type="hidden" name={EntityParentIdType.LAYER_ID} value={layerId} />
 			<input type="hidden" name="type" value={type} />
 
-			<PanelIconButton
-				type="submit"
-				iconName="plus"
-				iconText={`Add new ${type}`}
-				disabled={isPending}
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName="plus"
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/layer.design.delete.tsx b/app/routes/resources+/api.v1+/layer.design.delete.tsx
index a47be558..dd883c07 100644
--- a/app/routes/resources+/api.v1+/layer.design.delete.tsx
+++ b/app/routes/resources+/api.v1+/layer.design.delete.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IDesign } from '#app/models/design/design.server'
 import { validateLayerDeleteDesignSubmission } from '#app/models/design-layer/design-layer.delete.server'
@@ -65,16 +66,20 @@ export async function action({ request }: ActionFunctionArgs) {
 }
 
 export const LayerDesignDelete = ({
-	designId,
+	design,
 	layerId,
 }: {
-	designId: IDesign['id']
+	design: IDesign
 	layerId: ILayer['id']
 }) => {
+	const designId = design.id
+	const iconText = `Delete ${design.type}`
+
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
 	const isPending = useIsPending()
 	let isHydrated = useHydrated()
+
 	const [form] = useForm({
 		id: `layer-design-delete-${layerId}-${designId}`,
 		constraint: getFieldsetConstraint(schema),
@@ -89,12 +94,14 @@ export const LayerDesignDelete = ({
 			<input type="hidden" name="id" value={designId} />
 			<input type="hidden" name={EntityParentIdType.LAYER_ID} value={layerId} />
 
-			<PanelIconButton
-				type="submit"
-				iconName="minus"
-				iconText="Delete design"
-				disabled={isPending}
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName="minus"
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/layer.design.update.order.tsx b/app/routes/resources+/api.v1+/layer.design.update.order.tsx
index 0764d62f..06283179 100644
--- a/app/routes/resources+/api.v1+/layer.design.update.order.tsx
+++ b/app/routes/resources+/api.v1+/layer.design.update.order.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { type IconName } from '#app/components/ui/icon'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IDesign } from '#app/models/design/design.server'
@@ -109,14 +110,16 @@ export const LayerDesignReorder = ({
 			<input type="hidden" name={EntityParentIdType.LAYER_ID} value={layerId} />
 			<input type="hidden" name="direction" value={direction} />
 
-			<PanelIconButton
-				type="submit"
-				iconName={icon as IconName}
-				iconText={iconText}
-				size="panel-sm"
-				disabled={atTopOrBottom || isPending}
-				className="my-0"
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName={icon as IconName}
+					iconText={iconText}
+					size="panel-sm"
+					disabled={atTopOrBottom || isPending}
+					className="my-0"
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/layer.design.update.visible.tsx b/app/routes/resources+/api.v1+/layer.design.update.visible.tsx
index 57a148cf..dc798420 100644
--- a/app/routes/resources+/api.v1+/layer.design.update.visible.tsx
+++ b/app/routes/resources+/api.v1+/layer.design.update.visible.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IDesign } from '#app/models/design/design.server'
 import { validateLayerToggleVisibeDesignSubmission } from '#app/models/design-layer/design-layer.update.server'
@@ -76,7 +77,7 @@ export const LayerDesignToggleVisible = ({
 	const designId = design.id
 	const isVisible = design.visible
 	const icon = isVisible ? 'eye-open' : 'eye-closed'
-	const iconText = isVisible ? 'Hide design' : 'Show design'
+	const iconText = `${isVisible ? 'Hide' : 'Show'} ${design.type}`
 
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
@@ -96,12 +97,14 @@ export const LayerDesignToggleVisible = ({
 			<input type="hidden" name="id" value={designId} />
 			<input type="hidden" name={EntityParentIdType.LAYER_ID} value={layerId} />
 
-			<PanelIconButton
-				type="submit"
-				iconName={icon}
-				iconText={iconText}
-				disabled={isPending}
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName={icon}
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx b/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx
index 0e6c8399..28f6c177 100644
--- a/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx
+++ b/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx
@@ -7,7 +7,6 @@ import { type IArtworkVersion } from '#app/models/artwork-version/artwork-versio
 import { ArtworkBranchCreate } from '#app/routes/resources+/api.v1+/artwork-branch.create'
 import { ArtworkVersionCreate } from '#app/routes/resources+/api.v1+/artwork-version.create'
 import { ArtworkVersionToggleStarred } from '#app/routes/resources+/api.v1+/artwork-version.update.starred'
-import { EntityParentIdType } from '#app/schema/entity'
 import { useUser } from '#app/utils/user'
 
 export const NavActionsButtonGroup = memo(
@@ -38,20 +37,17 @@ export const NavActionsButtonGroup = memo(
 						branchId={branch.id}
 						artworkId={artwork.id}
 						versionId={version.id}
-						formId="artwork-branch-create"
 					/>
 					<ArtworkVersionCreate
-						entityId={version.id}
-						parentId={branch.id}
-						parentTypeId={EntityParentIdType.ARTWORK_BRANCH_ID}
-						formId="artwork-version-create"
+						branchId={branch.id}
+						versionId={version.id}
 						onOlderVersion={!onLatestVersion}
 					/>
 					<TooltipIconLink
 						to={`/users/${user.username}/artworks/${artwork.slug}`}
-						icon="pencil-1"
+						icon="exit"
 						text="Latest"
-						tooltipText="View the artwork details"
+						tooltipText={`Go to ${artwork.name} page`}
 						buttonVariant="ghost"
 					/>
 				</NavbarButtonGroup>
diff --git a/app/schema/artwork-version.ts b/app/schema/artwork-version.ts
index da979105..fd7828a8 100644
--- a/app/schema/artwork-version.ts
+++ b/app/schema/artwork-version.ts
@@ -82,6 +82,6 @@ export const ArtworkVersionDataCreateSchema = z.object({
 
 export const NewArtworkVersionSchema = z.object({
 	id: z.string(),
-	artworkBranchId: z.string(),
+	branchId: z.string(),
 	description: z.string(),
 })
diff --git a/app/schema/line.ts b/app/schema/line.ts
index 131b2f57..119fa02e 100644
--- a/app/schema/line.ts
+++ b/app/schema/line.ts
@@ -50,14 +50,13 @@ export const EditDesignLineFormatSchema = z.object({
 })
 
 export const lineFormatIcon = (format: lineFormatTypeEnum) => {
-	switch (format) {
-		case LineFormatTypeEnum.PERCENT:
-			return '%'
-		case LineFormatTypeEnum.PIXEL:
-			return 'px'
-		default:
-			return '%'
-	}
+	return format === LineFormatTypeEnum.PERCENT ? '%' : 'px'
+}
+
+export const lineFormatIconTooltip = (format: lineFormatTypeEnum) => {
+	return format === LineFormatTypeEnum.PERCENT
+		? 'Line width is a percentage of the basis'
+		: 'Line width is a fixed pixel value'
 }
 
 export const lineBasisIcon = (basis: lineBasisTypeEnum) => {
@@ -76,3 +75,20 @@ export const lineBasisIcon = (basis: lineBasisTypeEnum) => {
 			return 'width'
 	}
 }
+
+export const lineBasisIconTooltip = (basis: lineBasisTypeEnum) => {
+	switch (basis) {
+		case LineBasisTypeEnum.SIZE:
+			return 'Line width is based on the design size'
+		case LineBasisTypeEnum.WIDTH:
+			return 'Line width is based on the layer width'
+		case LineBasisTypeEnum.HEIGHT:
+			return 'Line width is based on the layer height'
+		case LineBasisTypeEnum.CANVAS_WIDTH:
+			return 'Line width is based on the canvas width'
+		case LineBasisTypeEnum.CANVAS_HEIGHT:
+			return 'Line width is based on the canvas height'
+		default:
+			return 'Line width is based on the layer width'
+	}
+}
diff --git a/app/schema/size.ts b/app/schema/size.ts
index cc34189c..1a813344 100644
--- a/app/schema/size.ts
+++ b/app/schema/size.ts
@@ -54,6 +54,12 @@ export const sizeFormatIcon = (format: sizeFormatTypeEnum) => {
 	return format === SizeFormatTypeEnum.PERCENT ? '%' : 'px'
 }
 
+export const sizeFormatIconTooltip = (format: sizeFormatTypeEnum) => {
+	return format === SizeFormatTypeEnum.PERCENT
+		? 'Size is a percentage of the basis'
+		: 'Size is a fixed pixel value'
+}
+
 export const sizeBasisIcon = (basis: sizeBasisTypeEnum) => {
 	switch (basis) {
 		case SizeBasisTypeEnum.WIDTH:
@@ -68,3 +74,18 @@ export const sizeBasisIcon = (basis: sizeBasisTypeEnum) => {
 			return 'width'
 	}
 }
+
+export const sizeBasisIconTooltip = (basis: sizeBasisTypeEnum) => {
+	switch (basis) {
+		case SizeBasisTypeEnum.WIDTH:
+			return 'Size is based on the layer width'
+		case SizeBasisTypeEnum.HEIGHT:
+			return 'Size is based on the layer height'
+		case SizeBasisTypeEnum.CANVAS_WIDTH:
+			return 'Size is based on the canvas width'
+		case SizeBasisTypeEnum.CANVAS_HEIGHT:
+			return 'Size is based on the canvas height'
+		default:
+			return 'Size is based on the layer width'
+	}
+}
diff --git a/app/services/artwork/branch/version/create.service.ts b/app/services/artwork/branch/version/create.service.ts
index a6aafaea..420126ec 100644
--- a/app/services/artwork/branch/version/create.service.ts
+++ b/app/services/artwork/branch/version/create.service.ts
@@ -26,12 +26,12 @@ import { artworkVersionCloneLayersService } from '../../version/clone-layers.ser
 export const artworkVersionCreateService = async ({
 	userId,
 	id,
-	artworkBranchId,
+	branchId,
 	description,
 }: {
 	userId: User['id']
 	id: IArtworkVersion['id']
-	artworkBranchId: IArtworkBranch['id']
+	branchId: IArtworkBranch['id']
 	description: string
 }): Promise<IArtworkVersionCreatedResponse> => {
 	try {
@@ -49,7 +49,7 @@ export const artworkVersionCreateService = async ({
 		const newName = incrementVersionNameString(name)
 		const data = ArtworkVersionDataCreateSchema.parse({
 			ownerId: userId,
-			branchId: artworkBranchId,
+			branchId,
 			name: newName,
 			slug: newName,
 			description: description || 'new version',
@@ -61,7 +61,7 @@ export const artworkVersionCreateService = async ({
 		// Step 3: delete all artwork versions after the current artwork version
 		// getting multiple heads and tails on v1...
 		const artworkVersions = await getArtworkVersions({
-			where: { branchId: artworkBranchId },
+			where: { branchId },
 		})
 		const deleteArtworkVersionsPromise = deleteArtworkVersionsAfterCurrent({
 			id,
diff --git a/app/strategies/validate-submission.strategy.ts b/app/strategies/validate-submission.strategy.ts
index ba0be83f..3d36553e 100644
--- a/app/strategies/validate-submission.strategy.ts
+++ b/app/strategies/validate-submission.strategy.ts
@@ -47,9 +47,9 @@ export class ValidateArtworkBranchParentSubmissionStrategy
 		data: any
 		ctx: any
 	}): Promise<void> {
-		const { artworkBranchId } = data
+		const { branchId } = data
 		const artworkBranch = await getArtworkBranch({
-			where: { id: artworkBranchId, ownerId: userId },
+			where: { id: branchId, ownerId: userId },
 		})
 		if (!artworkBranch) ctx.addIssue(addNotFoundIssue('ArtworkBranch'))
 	}