diff --git a/eslint.config.js b/eslint.config.js
index 3f91a86..dd83a4b 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -5,4 +5,10 @@ export default antfu(
   {
     type: 'lib',
   },
+  {
+    rules: {
+      'unused-imports/no-unused-vars': 'warn',
+
+    },
+  },
 )
diff --git a/package.json b/package.json
index 5448061..478e2fe 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "packageManager": "pnpm@10.4.0",
   "scripts": {
     "build": "nr -r build",
-    "dev": "nr -r dev",
+    "dev": "nr --parallel dev",
     "lint": "eslint --cache .",
     "prepublishOnly": "nr build",
     "docs": "pnpm -C docs run docs:dev",
diff --git a/packages/layout/tsconfig.json b/packages/layout/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/packages/layout/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/packages/math/README.md b/packages/math/README.md
new file mode 100644
index 0000000..92552c5
--- /dev/null
+++ b/packages/math/README.md
@@ -0,0 +1,3 @@
+# `@sciux/math`
+
+Mathematics components for SciuxKit
diff --git a/packages/math/package.json b/packages/math/package.json
new file mode 100644
index 0000000..f4787d9
--- /dev/null
+++ b/packages/math/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@sciux/math",
+  "type": "module",
+  "version": "0.0.5",
+  "description": "Layout components for SciuxKit",
+  "author": "BijonAI <info@bijon.ai>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sciux-kit/lib.git"
+  },
+  "bugs": "https://github.com/sciux-kit/lib/issues",
+  "keywords": [],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "nr build",
+    "start": "tsx src/index.ts"
+  },
+  "dependencies": {
+    "@sciux/utils-theme": "workspace:^",
+    "@sciux/widget": "workspace:^",
+    "@vue/reactivity": "^3.5.14",
+    "arktype": "^2.1.20",
+    "sciux-laplace": "catalog:"
+  }
+}
diff --git a/packages/math/src/angle/arc.ts b/packages/math/src/angle/arc.ts
new file mode 100644
index 0000000..6538330
--- /dev/null
+++ b/packages/math/src/angle/arc.ts
@@ -0,0 +1,49 @@
+import { theme } from '@sciux/utils-theme'
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+import { LineType } from '../shared'
+import { describeArc } from '../utils/arc-path'
+import { resolveDasharray } from '../utils/line'
+import { generateTexNode } from '../utils/tex'
+
+const T = type({
+  type: LineType,
+  value: type.string,
+})
+
+export const arc = defineComponent<'arc', typeof T.infer, {
+  x: number
+  y: number
+  from: number
+  to: number
+  startSide: number
+  endSide: number
+}>((attrs, context) => {
+  return {
+    name: 'arc',
+    attrs: T,
+    defaults: {
+      value: '',
+    },
+    setup() {
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+      path.setAttribute('d', describeArc([context.x, context.y], (context.startSide ?? context.endSide) / 3, context.from, context.to))
+      path.setAttribute('stroke', theme.pallete('primary'))
+      path.setAttribute('fill', 'none')
+      path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value))
+      const texElement = generateTexNode(attrs.value?.value)
+      const length = (context.startSide ?? context.endSide) / 3
+      const angle = context.from + (context.to - context.from) / 2
+      const position = [
+        length * Math.cos(angle * Math.PI / 180),
+        length * Math.sin(angle * Math.PI / 180),
+      ]
+      const texContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      texContainer.setAttribute('transform', `translate(${position[0]}, ${position[1]})`)
+      texContainer.append(texElement)
+      container.append(path, texContainer)
+      return container
+    },
+  }
+})
diff --git a/packages/math/src/angle/bouding.ts b/packages/math/src/angle/bouding.ts
new file mode 100644
index 0000000..026f1cd
--- /dev/null
+++ b/packages/math/src/angle/bouding.ts
@@ -0,0 +1,52 @@
+import { theme } from '@sciux/utils-theme'
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+import { LineType } from '../shared'
+import { describeArc } from '../utils/arc-path'
+import { resolveDasharray } from '../utils/line'
+import { generateTexNode } from '../utils/tex'
+
+const T = type({
+  type: LineType,
+  value: type.string,
+})
+
+export const bounding = defineComponent<'bounding', typeof T.infer, {
+  x: number
+  y: number
+  from: number
+  to: number
+  startSide?: number
+  endSide: number
+}>((attrs, context) => {
+  return {
+    name: 'bounding',
+    attrs: T,
+    defaults: {
+      type: 'solid',
+      value: '',
+    },
+    setup() {
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      const pathString = describeArc([context.x, context.y], context.startSide ?? context.endSide, context.from, context.to)
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+      path.setAttribute('d', pathString)
+      path.setAttribute('stroke-width', '1')
+      path.setAttribute('stroke', theme.pallete('primary'))
+      path.setAttribute('fill', 'none')
+      path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value))
+      const texElement = generateTexNode(attrs.value?.value)
+      const length = context.startSide ?? context.endSide
+      const angle = context.from + (context.to - context.from) / 2
+      const position = [
+        length * Math.cos(angle * Math.PI / 180),
+        length * Math.sin(angle * Math.PI / 180),
+      ]
+      const texContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      texContainer.setAttribute('transform', `translate(${position[0]}, ${position[1]})`)
+      texContainer.append(texElement)
+      container.append(path, texContainer)
+      return container
+    },
+  }
+})
diff --git a/packages/math/src/angle/index.ts b/packages/math/src/angle/index.ts
new file mode 100644
index 0000000..ec1a7df
--- /dev/null
+++ b/packages/math/src/angle/index.ts
@@ -0,0 +1,84 @@
+import { theme } from '@sciux/utils-theme'
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+import { LineType } from '../shared'
+import { resolveDasharray } from '../utils/line'
+import { arc } from './arc'
+import { bounding } from './bouding'
+import { angleEndPoint, angleStartPoint, origin } from './points'
+
+const T = type({
+  x: 'number',
+  y: 'number',
+  from: 'number',
+  to: 'number',
+  startSide: 'number',
+  endSide: 'number',
+  startSideType: LineType,
+  endSideType: LineType,
+  startSideValue: type.string.optional(),
+  endSideValue: type.string.optional(),
+})
+
+export const angle = defineComponent<'angle', typeof T.infer>((attrs) => {
+  const space = new Map()
+  space.set('arc', arc)
+  space.set('bounding', bounding)
+  space.set('start-point', angleStartPoint)
+  space.set('end-point', angleEndPoint)
+  space.set('origin', origin)
+  return {
+    name: 'angle',
+    attrs: T,
+    defaults: {
+      startSide: 10,
+      endSide: 10,
+      startSideType: 'solid',
+      endSideType: 'solid',
+    },
+    setup(children) {
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`)
+      const resolve = (value: number, length: number): { x1: number, y1: number, x2: number, y2: number } => {
+        const radian = value * Math.PI / 180
+        return {
+          x1: 0,
+          y1: 0,
+          x2: length * Math.cos(radian),
+          y2: length * Math.sin(radian),
+        }
+      }
+      const startSide = resolve(attrs.from.value, attrs.startSide.value)
+      const endSide = resolve(attrs.to.value, attrs.endSide.value)
+      const startSideLine = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+      startSideLine.setAttribute('x1', startSide.x1.toString())
+      startSideLine.setAttribute('y1', startSide.y1.toString())
+      startSideLine.setAttribute('x2', startSide.x2.toString())
+      startSideLine.setAttribute('y2', startSide.y2.toString())
+      startSideLine.setAttribute('stroke', theme.pallete('primary'))
+      startSideLine.setAttribute('stroke-width', '1')
+      startSideLine.setAttribute('stroke-dasharray', resolveDasharray(attrs.startSideType.value))
+      container.append(startSideLine)
+      const endSideLine = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+      endSideLine.setAttribute('x1', endSide.x1.toString())
+      endSideLine.setAttribute('y1', endSide.y1.toString())
+      endSideLine.setAttribute('x2', endSide.x2.toString())
+      endSideLine.setAttribute('y2', endSide.y2.toString())
+      endSideLine.setAttribute('stroke', theme.pallete('primary'))
+      endSideLine.setAttribute('stroke-width', '1')
+      endSideLine.setAttribute('stroke-dasharray', resolveDasharray(attrs.endSideType.value))
+      container.append(endSideLine)
+      container.append(...children())
+      return container
+    },
+    provides: {
+      x: attrs.x,
+      y: attrs.y,
+      from: attrs.from,
+      to: attrs.to,
+      startSide: attrs.startSide,
+      endSide: attrs.endSide,
+    },
+    space,
+  }
+})
diff --git a/packages/math/src/angle/points.ts b/packages/math/src/angle/points.ts
new file mode 100644
index 0000000..2063fea
--- /dev/null
+++ b/packages/math/src/angle/points.ts
@@ -0,0 +1,51 @@
+import { defineComponent } from 'sciux-laplace'
+import { InfoPointType } from '../shared'
+
+export const angleStartPoint = defineComponent<'start-point', typeof InfoPointType.infer, {
+  x: number
+  y: number
+  startSide: number
+  from: number
+}>((attrs, context) => {
+  return {
+    name: 'start-point',
+    attrs: InfoPointType,
+    globals: {
+      [attrs.as.value]: [
+        context.startSide * Math.cos(context.from * Math.PI / 180),
+        context.startSide * Math.sin(context.from * Math.PI / 180),
+      ],
+    },
+  }
+})
+
+export const angleEndPoint = defineComponent<'end-point', typeof InfoPointType.infer, {
+  x: number
+  y: number
+  endSide: number
+  to: number
+}>((attrs, context) => {
+  return {
+    name: 'end-point',
+    attrs: InfoPointType,
+    globals: {
+      [attrs.as.value]: [
+        context.endSide * Math.cos(context.to * Math.PI / 180),
+        context.endSide * Math.sin(context.to * Math.PI / 180),
+      ],
+    },
+  }
+})
+
+export const origin = defineComponent<'origin', typeof InfoPointType.infer, {
+  x: number
+  y: number
+}>((attrs, context) => {
+  return {
+    name: 'origin',
+    attrs: InfoPointType,
+    globals: {
+      [attrs.as.value]: [context.x, context.y],
+    },
+  }
+})
diff --git a/packages/math/src/axis/index.ts b/packages/math/src/axis/index.ts
new file mode 100644
index 0000000..66bbbee
--- /dev/null
+++ b/packages/math/src/axis/index.ts
@@ -0,0 +1,79 @@
+import { theme } from '@sciux/utils-theme'
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+
+const T = type({
+  x: type.number,
+  y: type.number,
+  division: type.number,
+  range: type('number[]'),
+  label: type.unknown,
+  direction: type.enumerated('top', 'bottom', 'left', 'right'),
+})
+interface withLabelT {
+  label: (count: number) => string
+}
+
+export const resolveDirection = (value: string): 1 | -1 => ['left', 'top'].includes(value) ? -1 : 1
+
+export const axis = defineComponent<'axis', typeof T.infer & withLabelT>((attrs) => {
+  return {
+    name: 'axis',
+    provides: {
+      division: attrs.division,
+    },
+    defaults: {
+      division: 20,
+      label: (count: number) => count.toString(),
+      direction: 'right',
+    },
+    setup(children) {
+      const root = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      root.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`)
+      const axes = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      // axis line
+      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+      line.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x1' : 'y1', (attrs.range.value[0] * attrs.division.value * resolveDirection(attrs.direction.value)).toString())
+      line.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x2' : 'y2', (attrs.range.value[1] * attrs.division.value * resolveDirection(attrs.direction.value)).toString())
+      axes.append(line)
+      // axis arrow
+      const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'polygon')
+      arrow.setAttribute('points', '0,0 -7,5 10,0 -7,-5 0,0')
+      arrow.setAttribute('transform', `translate(${['left', 'right'].includes(attrs.direction.value) ? '' : '0,'} ${attrs.range.value[1] * attrs.division.value * resolveDirection(attrs.direction.value)}${['top', 'bottom'].includes(attrs.direction.value) ? '' : ' ,0'})
+        rotate(${attrs.direction.value === 'left' ? '180' : attrs.direction.value === 'top' ? '270' : attrs.direction.value === 'bottom' ? '90' : '0'})`)
+      axes.append(arrow)
+      // axis ticks
+      const ticks = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      for (let i = attrs.range.value[0]; i < attrs.range.value[1]; i += 1) {
+        const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+        tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x1' : 'y1', (i * attrs.division.value * resolveDirection(attrs.direction.value)).toString())
+        tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x2' : 'y2', (i * attrs.division.value * resolveDirection(attrs.direction.value)).toString())
+        tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'y1' : 'x1', '-2')
+        tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'y2' : 'x2', '2')
+        ticks.append(tick)
+      }
+      axes.append(ticks)
+      // axis labels
+      const labels = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      labels.setAttribute('stroke', 'none')
+      labels.setAttribute('text-anchor', 'middle')
+      labels.setAttribute('dominant-baseline', 'middle')
+      labels.setAttribute('font-size', theme.size('3xs'))
+      labels.style.fontFamily = theme.font('math')
+      for (let i = attrs.range.value[0]; i < attrs.range.value[1]; i += 1) {
+        const label = document.createElementNS('http://www.w3.org/2000/svg', 'text')
+        label.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x' : 'y', (i * attrs.division.value * resolveDirection(attrs.direction.value)).toString())
+        label.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'y' : 'x', '16')
+        label.textContent = attrs.label.value(i)
+        labels.append(label)
+      }
+      axes.append(labels)
+
+      axes.setAttribute('fill', theme.pallete('primary'))
+      axes.setAttribute('stroke', theme.pallete('primary'))
+      root.append(axes, ...children())
+
+      return root
+    },
+  }
+})
diff --git a/packages/math/src/circle/index.ts b/packages/math/src/circle/index.ts
new file mode 100644
index 0000000..90bb515
--- /dev/null
+++ b/packages/math/src/circle/index.ts
@@ -0,0 +1,45 @@
+import { theme } from '@sciux/utils-theme'
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+import { LineType } from '../shared'
+import { describeArc } from '../utils/arc-path'
+import { resolveDasharray } from '../utils/line'
+import { edgePoint } from './points'
+
+const T = type({
+  x: type.number,
+  y: type.number,
+  radius: type.number,
+  from: type.number,
+  to: type.number,
+  type: LineType,
+})
+
+export const circle = defineComponent<'circle', typeof T.infer>((attrs) => {
+  const space = new Map()
+  space.set('edge-point', edgePoint)
+  space.set('origin', origin)
+  return {
+    name: 'circle',
+    attrs: T,
+    defaults: {
+      from: 0,
+      to: 360,
+      type: 'solid',
+      x: 0,
+      y: 0,
+    },
+    setup() {
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`)
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+      path.setAttribute('d', describeArc([attrs.x.value, attrs.y.value], attrs.radius.value, attrs.from.value, attrs.to.value))
+      path.setAttribute('stroke', theme.pallete('primary'))
+      path.setAttribute('fill', 'none')
+      path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value))
+      container.append(path)
+      return container
+    },
+    space,
+  }
+})
diff --git a/packages/math/src/circle/points.ts b/packages/math/src/circle/points.ts
new file mode 100644
index 0000000..a41cf19
--- /dev/null
+++ b/packages/math/src/circle/points.ts
@@ -0,0 +1,53 @@
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+
+const EdgePointType = type({
+  value: type.number,
+  as: type.string,
+})
+
+export const edgePoint = defineComponent<
+  'edge-points',
+  typeof EdgePointType.infer,
+  {
+    x: number
+    y: number
+    radius: number
+  }
+>((attrs, context) => {
+  const { x, y, radius } = context
+  const { value, as } = attrs
+  const point = [
+    x + radius * Math.cos(value.value),
+    y + radius * Math.sin(value.value),
+  ]
+  return {
+    name: 'edge-points',
+    attrs: EdgePointType,
+    globals: {
+      [as.value]: point,
+    },
+  }
+})
+
+const OriginType = type({
+  as: type.string,
+})
+
+export const origin = defineComponent<
+  'origin',
+  typeof OriginType.infer,
+  {
+    x: number
+    y: number
+  }
+>((attrs, context) => {
+  const { as } = attrs
+  return {
+    name: 'origin',
+    attrs: OriginType,
+    globals: {
+      [as.value]: [context.x, context.y],
+    },
+  }
+})
diff --git a/packages/math/src/figure/index.ts b/packages/math/src/figure/index.ts
new file mode 100644
index 0000000..0794b86
--- /dev/null
+++ b/packages/math/src/figure/index.ts
@@ -0,0 +1,46 @@
+import { theme } from '@sciux/utils-theme'
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+import { points } from './points'
+
+const T = type({
+  x: type.number,
+  y: type.number,
+  path: type.string.optional(),
+})
+
+export const figure = defineComponent<'figure', typeof T.infer>((attrs) => {
+  const path: [string, number, number?][] = []
+  const space = new Map()
+  Object.entries(points).forEach(([name, component]) => {
+    space.set(name, component)
+  })
+  return {
+    name: 'figure',
+    attrs: T,
+    defaults: {
+      x: 0,
+      y: 0,
+    },
+    setup(children) {
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+      children()
+      if (attrs.path?.value) {
+        pathElement.setAttribute('d', attrs.path.value)
+      }
+      else {
+        pathElement.setAttribute('d', path.map(([name, x, y]) => `${name}${x} ${y}`).join(' '))
+      }
+      pathElement.setAttribute('stroke', theme.pallete('primary'))
+      pathElement.setAttribute('fill', 'none')
+      container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`)
+      container.append(pathElement)
+      return container
+    },
+    provides: {
+      path,
+    },
+    space,
+  }
+})
diff --git a/packages/math/src/figure/points.ts b/packages/math/src/figure/points.ts
new file mode 100644
index 0000000..09d2aa9
--- /dev/null
+++ b/packages/math/src/figure/points.ts
@@ -0,0 +1,27 @@
+import type { Component } from 'sciux-laplace'
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+
+export const ControlPointType = type(`'m' | 'l' | 'h' | 'v' | 'c' | 'z' | 's' | 'q' | 't' | 'a'`)
+const T = type({
+  x: type.number.optional(),
+  y: type.number.optional(),
+})
+
+export function generateControlPoint(name: typeof ControlPointType.infer): Component<typeof ControlPointType.infer, typeof T.infer, any> | null {
+  if (ControlPointType(name) instanceof type.errors) {
+    return null
+  }
+  return defineComponent<typeof ControlPointType.infer, typeof T.infer, {
+    path: [string, number, number?][]
+  }>((attrs, context) => {
+    context.path.push([name, attrs.x?.value ?? attrs.y?.value ?? 0, attrs.y?.value])
+    return {
+      name,
+      attrs: T,
+    }
+  })
+}
+
+const pointSet = ['m', 'l', 'h', 'v', 'c', 'z', 's', 'q', 't', 'a']
+export const points = Object.fromEntries(pointSet.map(name => [name, generateControlPoint(name as typeof ControlPointType.infer)]))
diff --git a/packages/math/src/function/index.ts b/packages/math/src/function/index.ts
new file mode 100644
index 0000000..e64984c
--- /dev/null
+++ b/packages/math/src/function/index.ts
@@ -0,0 +1,76 @@
+import { theme } from '@sciux/utils-theme'
+import { type } from 'arktype'
+import { defineAnimation, defineComponent } from 'sciux-laplace'
+import { pointOn } from './point-on'
+
+const T = type({
+  domain: type('number[]'),
+  division: type.number,
+  expr: type.unknown,
+})
+interface withExprT {
+  expr: (x: number) => number
+}
+
+export function describeImage(expr: (x: number) => number, domain: number[], division: number): { points: number[][], length: number } {
+  let length = 0
+  const points = []
+  let latestX = domain[0]
+  let latestY = expr(latestX)
+  for (let x = domain[0]; x <= domain[1]; x += 1 / division) {
+    const point = [x * division, expr(x) * division]
+    length += Math.sqrt((point[0] - latestX) ** 2 + (point[1] - latestY) ** 2)
+    latestX = point[0]
+    latestY = point[1]
+    points.push(point)
+  }
+  return {
+    points,
+    length,
+  }
+}
+
+export const func = defineComponent<'function', withExprT & typeof T.infer, {
+  division?: number
+}>((attrs, context) => {
+  const space = new Map()
+  space.set('point-on', pointOn)
+  return {
+    name: 'function',
+    // attrs: T,
+    defaults: {
+      division: 1,
+    },
+    provides: {
+      expr: attrs.expr,
+    },
+    setup: (children) => {
+      const { domain, division, expr } = attrs
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+      path.setAttribute('stroke', theme.pallete('info'))
+      path.setAttribute('fill', 'none')
+      path.id = 'function-path'
+      const { points } = describeImage(expr.value, domain.value, context.division ?? division.value)
+      path.setAttribute('d', `M ${points.map(([x, y]) => `${x},${y}`).join(' ')}`)
+      // console.log(describeImage(expr.value, domain.value, context.division ?? division.value))
+      container.append(path, ...children())
+      return container
+    },
+    space,
+  }
+})
+
+export const funcCreation = defineAnimation<[], withExprT & typeof T.infer>((node: SVGGElement, _, { attrs }) => {
+  const { length } = describeImage(attrs.expr.value, attrs.domain.value, 25)
+  return {
+    validator: name => name === 'function',
+    setup(progress) {
+      if (progress >= 1) {
+        return true
+      }
+      node.style.strokeDasharray = `${length * progress},${length * (1 - progress)}`
+      return false
+    },
+  }
+})
diff --git a/packages/math/src/function/point-on.ts b/packages/math/src/function/point-on.ts
new file mode 100644
index 0000000..c0448d7
--- /dev/null
+++ b/packages/math/src/function/point-on.ts
@@ -0,0 +1,19 @@
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+
+const T = type({
+  x: type.number,
+  as: type.string,
+})
+
+export const pointOn = defineComponent<'point-on', typeof T.infer, {
+  expr: (x: number) => number
+}>((attrs, context) => {
+      return {
+        name: 'point-on',
+        attrs: T,
+        globals: {
+          [attrs.as.value]: context.expr(attrs.x.value),
+        },
+      }
+    })
diff --git a/packages/math/src/index.ts b/packages/math/src/index.ts
new file mode 100644
index 0000000..f9ae6ec
--- /dev/null
+++ b/packages/math/src/index.ts
@@ -0,0 +1,8 @@
+export * from './angle'
+export * from './axis'
+export * from './circle'
+export * from './figure'
+export * from './function'
+export * from './line'
+export * from './plane'
+export * from './shared'
diff --git a/packages/math/src/line/index.ts b/packages/math/src/line/index.ts
new file mode 100644
index 0000000..2c44fae
--- /dev/null
+++ b/packages/math/src/line/index.ts
@@ -0,0 +1,52 @@
+import { theme } from '@sciux/utils-theme'
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+import { LineType } from '../shared'
+import { resolveDasharray } from '../utils/line'
+import { generateTexNode } from '../utils/tex'
+import { lineEndPoint, lineStartPoint } from './points'
+
+const T = type({
+  from: [type.number, type.number],
+  to: [type.number, type.number],
+  value: type.string,
+  type: LineType,
+})
+
+export const line = defineComponent<'line', typeof T.infer>((attrs, context) => {
+  const space = new Map()
+  space.set('start-point', lineStartPoint)
+  space.set('end-point', lineEndPoint)
+  return {
+    name: 'line',
+    defaults: {
+      type: 'solid',
+      value: '',
+    },
+    provides: {
+      from: attrs.from.value,
+      to: attrs.to.value,
+    },
+    attrs: T,
+    setup(_children) {
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+      path.setAttribute('d', `M ${attrs.from.value[0]} ${attrs.from.value[1]} L ${attrs.to.value[0]} ${attrs.to.value[1]}`)
+      path.setAttribute('stroke', theme.pallete('primary'))
+      path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value))
+      const texElement = generateTexNode(attrs.value?.value)
+      const texPosition = [
+        attrs.from.value[0] + (attrs.to.value[0] - attrs.from.value[0]) / 2,
+        attrs.from.value[1] + (attrs.to.value[1] - attrs.from.value[1]) / 2,
+      ]
+      const texContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      texContainer.setAttribute('transform', `translate(${texPosition[0]}, ${texPosition[1]})`)
+      texContainer.append(texElement)
+      container.append(path, texContainer)
+      return container
+    },
+    space,
+  }
+})
+
+export * from './points'
diff --git a/packages/math/src/line/points.ts b/packages/math/src/line/points.ts
new file mode 100644
index 0000000..e98f6dd
--- /dev/null
+++ b/packages/math/src/line/points.ts
@@ -0,0 +1,47 @@
+import { defineComponent } from 'sciux-laplace'
+import { InfoPointType } from '../shared'
+import { generateTexNode } from '../utils/tex'
+
+export const lineStartPoint = defineComponent<'start-point', typeof InfoPointType.infer, {
+  from: [number, number]
+}>((attrs, context) => {
+  return {
+    name: 'start-point',
+    attrs: InfoPointType,
+    defaults: {
+      value: '',
+    },
+    setup() {
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      const texElement = generateTexNode(attrs.value?.value)
+      container.setAttribute('transform', `translate(${context.from[0]}, ${context.from[1]})`)
+      container.append(texElement)
+      return container
+    },
+    globals: {
+      [attrs.as.value]: context.from,
+    },
+  }
+})
+
+export const lineEndPoint = defineComponent<'end-point', typeof InfoPointType.infer, {
+  to: [number, number]
+}>((attrs, context) => {
+  return {
+    name: 'end-point',
+    attrs: InfoPointType,
+    defaults: {
+      value: '',
+    },
+    setup() {
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      const texElement = generateTexNode(attrs.value?.value)
+      container.setAttribute('transform', `translate(${context.to[0]}, ${context.to[1]})`)
+      container.append(texElement)
+      return container
+    },
+    globals: {
+      [attrs.as.value]: context.to,
+    },
+  }
+})
diff --git a/packages/math/src/plane/index.ts b/packages/math/src/plane/index.ts
new file mode 100644
index 0000000..6cd8fa2
--- /dev/null
+++ b/packages/math/src/plane/index.ts
@@ -0,0 +1,102 @@
+import { theme } from '@sciux/utils-theme'
+import { type } from 'arktype'
+import { defineComponent, ref } from 'sciux-laplace'
+import { axis } from '../axis'
+
+const T = type({
+  x: type.number,
+  y: type.number,
+  division: type.number,
+  domain: type('number[]'),
+  range: type('number[]'),
+  xLabel: type.unknown,
+  yLabel: type.unknown,
+  xDirection: type.enumerated('left', 'right'),
+  yDirection: type.enumerated('top', 'bottom'),
+})
+interface withLabelT {
+  xLabel: (count: number) => string
+  yLabel: (count: number) => string
+}
+
+export const plane = defineComponent<'plane', typeof T.infer & withLabelT>((attrs) => {
+  return {
+    name: 'plane',
+    provides: {
+      division: attrs.division,
+    },
+    defaults: {
+      division: 20,
+      xLabel: (count: number) => count.toString(),
+      yLabel: (count: number) => count.toString(),
+      xDirection: 'right',
+      yDirection: 'top',
+    },
+    setup(children) {
+      const root = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      root.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`)
+      // x-axis
+      const xAxis = axis({
+        x: attrs.x,
+        y: attrs.y,
+        division: attrs.division,
+        range: attrs.domain,
+        label: ref((count: number) => count === 0 ? '' : attrs.xLabel.value(count)),
+        direction: attrs.xDirection,
+      }, {})
+      root.append(<Node> xAxis.setup?.(() => []))
+      // y-axis
+      const yAxis = axis({
+        x: attrs.x,
+        y: attrs.y,
+        division: attrs.division,
+        range: attrs.range,
+        label: ref((count: number) => count === 0 ? '' : attrs.yLabel.value(count)),
+        direction: attrs.yDirection,
+      }, {})
+      const originLabel = attrs.xLabel ? attrs.xLabel.value(0) : attrs.yLabel ? attrs.yLabel.value(0) : ''
+      const origin = document.createElementNS('http://www.w3.org/2000/svg', 'text')
+      origin.setAttribute('x', (attrs.x.value + 10).toString())
+      origin.setAttribute('y', (attrs.y.value + 10).toString())
+      origin.style.fill = theme.pallete('primary')
+      origin.style.fontFamily = theme.font('math')
+      origin.style.fontSize = theme.size('3xs')
+      origin.style.textAnchor = 'middle'
+      origin.style.dominantBaseline = 'middle'
+      origin.textContent = originLabel
+
+      // Grid
+      const grid = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      grid.setAttribute('stroke', theme.pallete('primary'))
+      grid.setAttribute('stroke-width', '0.5')
+      grid.setAttribute('fill', 'none')
+      for (let i = attrs.domain.value[0]; i < attrs.domain.value[1]; i += 1) {
+        if (i === attrs.domain.value[0])
+          continue
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+        line.setAttribute('x1', (i * attrs.division.value).toString())
+        line.setAttribute('y1', (attrs.range.value[0] * attrs.division.value).toString())
+        line.setAttribute('x2', (i * attrs.division.value).toString())
+        line.setAttribute('y2', (attrs.range.value[1] * attrs.division.value).toString())
+        grid.append(line)
+      }
+      for (let i = attrs.range.value[0]; i < attrs.range.value[1]; i += 1) {
+        if (i === attrs.range.value[0])
+          continue
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+        line.setAttribute('x1', (attrs.domain.value[0] * attrs.division.value).toString())
+        line.setAttribute('y1', (i * attrs.division.value).toString())
+        line.setAttribute('x2', (attrs.domain.value[1] * attrs.division.value).toString())
+        line.setAttribute('y2', (i * attrs.division.value).toString())
+        grid.append(line)
+      }
+
+      // Root
+      root.append(origin, grid)
+      root.append(<Node> yAxis.setup?.(() => []))
+      root.append(...children())
+
+      return root
+    },
+  }
+})
diff --git a/packages/math/src/shared.ts b/packages/math/src/shared.ts
new file mode 100644
index 0000000..226e276
--- /dev/null
+++ b/packages/math/src/shared.ts
@@ -0,0 +1,7 @@
+import { type } from 'arktype'
+
+export const LineType = type(`'solid' | 'dashed' | 'dotted'`)
+export const InfoPointType = type({
+  as: type.string,
+  value: type.string,
+})
diff --git a/packages/math/src/utils/arc-path.ts b/packages/math/src/utils/arc-path.ts
new file mode 100644
index 0000000..4f75ffd
--- /dev/null
+++ b/packages/math/src/utils/arc-path.ts
@@ -0,0 +1,50 @@
+export function polarToCartesian(
+  center: [number, number],
+  radius: number,
+  angleInDegrees: number,
+): [number, number] {
+  const angleInRadians = (angleInDegrees * Math.PI) / 180
+  return [
+    center[0] + radius * Math.cos(angleInRadians),
+    center[1] + radius * Math.sin(angleInRadians),
+  ]
+}
+
+export function describeArc(
+  center: [number, number],
+  radius: number,
+  startAngle: number,
+  endAngle: number,
+): string {
+  if (Math.abs(startAngle - endAngle) % 360 <= 1e-6) {
+    return [
+      'M',
+      ...center,
+      'm',
+      -radius,
+      0,
+      'a',
+      radius,
+      radius,
+      0,
+      1,
+      0,
+      radius * 2,
+      0,
+      'a',
+      radius,
+      radius,
+      0,
+      1,
+      0,
+      -radius * 2,
+      0,
+    ].join(' ')
+  }
+  const start = polarToCartesian(center, radius, endAngle)
+  const end = polarToCartesian(center, radius, startAngle)
+  const largeArcFlag = Number(endAngle - startAngle > 180)
+  return ['M', ...start, 'A', radius, radius, 0, largeArcFlag, 0, ...end].join(
+    ' ',
+  )
+}
diff --git a/packages/math/src/utils/line.ts b/packages/math/src/utils/line.ts
new file mode 100644
index 0000000..9b4f460
--- /dev/null
+++ b/packages/math/src/utils/line.ts
@@ -0,0 +1,3 @@
+import type { LineType } from '../shared'
+
+export const resolveDasharray = (type: typeof LineType.infer): string => type === 'dashed' ? '10 5' : type === 'dotted' ? '2 2' : '0'
diff --git a/packages/math/src/utils/tex.ts b/packages/math/src/utils/tex.ts
new file mode 100644
index 0000000..8cb2340
--- /dev/null
+++ b/packages/math/src/utils/tex.ts
@@ -0,0 +1,10 @@
+import type { ComponentSetup } from 'sciux-laplace'
+import { tex } from '@sciux/widget'
+import { ref } from 'sciux-laplace'
+
+export function generateTexNode(value: string): Node {
+  const texElement = (tex({ size: ref('10px') }, { underCanvas: true }).setup as ComponentSetup)(
+    () => [document.createTextNode(value)],
+  )
+  return texElement
+}
diff --git a/packages/math/tsconfig.json b/packages/math/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/packages/math/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/packages/math/tsup.config.ts b/packages/math/tsup.config.ts
new file mode 100644
index 0000000..f37ebb2
--- /dev/null
+++ b/packages/math/tsup.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['./src/index.ts'],
+  outDir: './dist',
+  format: 'esm',
+  dts: true,
+  sourcemap: true,
+  clean: true,
+})
diff --git a/packages/model/tsconfig.json b/packages/model/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/packages/model/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/packages/sciux/package.json b/packages/sciux/package.json
index 51e1092..ec4fe9f 100644
--- a/packages/sciux/package.json
+++ b/packages/sciux/package.json
@@ -31,7 +31,9 @@
   },
   "dependencies": {
     "@sciux/layout": "workspace:*",
+    "@sciux/math": "workspace:*",
     "@sciux/model": "workspace:*",
+    "@sciux/utils-theme": "workspace:*",
     "@sciux/widget": "workspace:*",
     "sciux-laplace": "catalog:"
   }
diff --git a/packages/sciux/src/index.ts b/packages/sciux/src/index.ts
index d646137..12dfad7 100644
--- a/packages/sciux/src/index.ts
+++ b/packages/sciux/src/index.ts
@@ -1,16 +1,19 @@
 import type { RegisterContext } from './types'
-import { animations, components, flows, textModes } from 'sciux-laplace'
+import { theme } from '@sciux/utils-theme'
+import { animations, flows, root, textModes } from 'sciux-laplace'
 import layout from './layout'
+import math from './math'
 import model from './model'
 import widget from './widget'
 
 const defaultContext: RegisterContext = {
-  components,
+  root,
   flows,
   animations,
   textModes,
 }
-const registers = [widget, model, layout]
+const registers = [widget, model, layout, math]
+animations.set('creation', [])
 
 export default function (context: RegisterContext = defaultContext): void {
   for (const register of registers) {
@@ -18,7 +21,18 @@ export default function (context: RegisterContext = defaultContext): void {
   }
 }
 
+export function applyTheme(selector: string): void {
+  const containers = <HTMLElement[]> Array.from(document.querySelectorAll(selector))
+  for (const container of containers) {
+    container.style.backgroundColor = theme.pallete('background')
+    container.style.color = theme.pallete('primary')
+    container.style.fontFamily = theme.font('primary')
+  }
+}
+
 export * from './layout'
+export * from './math'
 export * from './model'
 export * from './widget'
+export * from '@sciux/utils-theme'
 export * from 'sciux-laplace'
diff --git a/packages/sciux/src/layout.ts b/packages/sciux/src/layout.ts
index ac31b72..415ab8c 100644
--- a/packages/sciux/src/layout.ts
+++ b/packages/sciux/src/layout.ts
@@ -1,14 +1,13 @@
-import type { Component } from 'sciux-laplace'
 import type { RegisterContext } from './types'
 import { align, block, columns, flexbox, grid, rows } from '@sciux/layout'
 
-export default function ({ components }: RegisterContext): void {
-  components.set('block', block)
-  components.set('flexbox', flexbox as Component<string, any, any>)
-  components.set('rows', rows as Component<string, any, any>)
-  components.set('columns', columns as Component<string, any, any>)
-  components.set('grid', grid)
-  components.set('align', align)
+export default function ({ root }: RegisterContext): void {
+  root.set('align', align)
+  root.set('block', block)
+  root.set('flexbox', flexbox)
+  root.set('rows', rows)
+  root.set('columns', columns)
+  root.set('grid', grid)
 }
 
 export * from '@sciux/layout'
diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts
index 8d72ce6..a88d496 100644
--- a/packages/sciux/src/math.ts
+++ b/packages/sciux/src/math.ts
@@ -1,8 +1,20 @@
+import type { Animation } from 'sciux-laplace'
 import type { RegisterContext } from './types'
-import { angle } from '@sciux/math'
+import { angle, axis, circle, figure, func, funcCreation, line, plane } from '@sciux/math'
+import { withSpace } from 'sciux-laplace'
+import { canvasSpace } from './widget'
 
-export default function ({ components }: RegisterContext): void {
-  components.set('angle', angle)
+export default function ({ animations }: RegisterContext): void {
+  canvasSpace.set('angle', angle)
+  canvasSpace.set('line', line)
+  canvasSpace.set('figure', figure)
+  canvasSpace.set('circle', circle)
+  canvasSpace.set('function', func)
+  canvasSpace.set('axis', axis)
+  canvasSpace.set('plane', withSpace(plane, canvasSpace))
+
+  const creation = <Animation<[], any, any>[]> animations.get('creation')
+  creation.push(funcCreation)
 }
 
 export * from '@sciux/math'
diff --git a/packages/sciux/src/model.ts b/packages/sciux/src/model.ts
index 633ec9d..bbec962 100644
--- a/packages/sciux/src/model.ts
+++ b/packages/sciux/src/model.ts
@@ -1,11 +1,11 @@
 import type { RegisterContext } from './types'
 import { button, checkbox, input, slider } from '@sciux/model'
 
-export default function ({ components }: RegisterContext): void {
-  components.set('button', button)
-  components.set('input', input)
-  components.set('slider', slider)
-  components.set('checkbox', checkbox)
+export default function ({ root }: RegisterContext): void {
+  root.set('button', button)
+  root.set('input', input)
+  root.set('slider', slider)
+  root.set('checkbox', checkbox)
 }
 
 export * from '@sciux/model'
diff --git a/packages/sciux/src/types.ts b/packages/sciux/src/types.ts
index dfe2ccd..4ec4b80 100644
--- a/packages/sciux/src/types.ts
+++ b/packages/sciux/src/types.ts
@@ -1,11 +1,10 @@
-import type { animations, components, flows, textModes } from 'sciux-laplace'
+import type { animations, ComponentSpace, flows, textModes } from 'sciux-laplace'
 
-export type Components = typeof components
 export type Flows = typeof flows
 export type Animations = typeof animations
 export type TextModes = typeof textModes
 export interface RegisterContext {
-  components: Components
+  root: ComponentSpace
   flows: Flows
   animations: Animations
   textModes: TextModes
diff --git a/packages/sciux/src/widget.ts b/packages/sciux/src/widget.ts
index e5e6d32..ee36f20 100644
--- a/packages/sciux/src/widget.ts
+++ b/packages/sciux/src/widget.ts
@@ -1,14 +1,18 @@
+import type { ComponentSpace } from 'sciux-laplace'
 import type { RegisterContext } from './types'
-import { canvas, code, link, table } from '@sciux/widget'
-import { TextMode } from 'sciux-laplace'
+import { canvas, code, link, table, tex } from '@sciux/widget'
+import { TextMode, withSpace } from 'sciux-laplace'
 
-export default function ({ components, textModes }: RegisterContext): void {
-  components.set('table', table)
-  components.set('canvas', canvas)
-  components.set('link', link)
-  components.set('code', code)
+export const canvasSpace: ComponentSpace = new Map()
 
+export default function ({ root, textModes }: RegisterContext): void {
+  root.set('table', table)
+  root.set('canvas', withSpace(canvas, canvasSpace))
+  root.set('link', link)
+  root.set('code', code)
+  root.set('tex', tex)
   textModes.set('code', TextMode.RCDATA)
+  textModes.set('tex', TextMode.RCDATA)
 }
 
 export * from '@sciux/widget'
diff --git a/packages/sciux/tsconfig.json b/packages/sciux/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/packages/sciux/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/packages/theme-default/styles/vars.css b/packages/theme-default/styles/vars.css
index d28640e..0aef616 100644
--- a/packages/theme-default/styles/vars.css
+++ b/packages/theme-default/styles/vars.css
@@ -8,12 +8,12 @@
 :root {
   --sci-primary: #FFFFFF;
   --sci-note: #C7EDCC;
-  --sci-warning: #F59E0B;
-  --sci-accent: #FFFF00;
-  --sci-alert: #EF4444;
-  --sci-info: #3B82F6;
-  --sci-success: #10B981;
-  --sci-creative: #F472B6;
+  --sci-warning: #F7B051;
+  --sci-accent: #F5F779;
+  --sci-alert: #F76E67;
+  --sci-info: #4DDEF6;
+  --sci-success: #66ECDD;
+  --sci-creative: #CCB8E4;
 }
 
 /* Transparent Marker Colors */
diff --git a/packages/utils-theme/src/theme.ts b/packages/utils-theme/src/theme.ts
index 0b0359f..3acff69 100644
--- a/packages/utils-theme/src/theme.ts
+++ b/packages/utils-theme/src/theme.ts
@@ -1,6 +1,7 @@
 export function isCSSVariableExist(variableName: string): boolean {
-  const rootStyles = document.documentElement.style
-  return rootStyles.getPropertyValue(variableName).trim() !== ''
+  const style = window.getComputedStyle(document.documentElement)
+  const value = style.getPropertyValue(variableName).trim()
+  return value !== ''
 }
 
 export function size(name: string | number): string {
@@ -22,3 +23,8 @@ export function dasharray(name: string): string {
   const variable = `--sci-dasharray-${name}`
   return isCSSVariableExist(variable) ? `var(${variable})` : name
 }
+
+export function font(name: string): string {
+  const variable = `--sci-font-${name}`
+  return isCSSVariableExist(variable) ? `var(${variable})` : name
+}
diff --git a/packages/widget/package.json b/packages/widget/package.json
index e8dbef3..1aa3774 100644
--- a/packages/widget/package.json
+++ b/packages/widget/package.json
@@ -34,6 +34,7 @@
     "@sciux/utils-theme": "workspace:^",
     "@vue/reactivity": "^3.5.14",
     "arktype": "^2.1.20",
+    "katex": "^0.16.22",
     "sciux-laplace": "catalog:",
     "shiki": "^3.4.2"
   }
diff --git a/packages/widget/src/canvas.ts b/packages/widget/src/canvas.ts
index 849ebd5..d09739a 100644
--- a/packages/widget/src/canvas.ts
+++ b/packages/widget/src/canvas.ts
@@ -4,7 +4,8 @@ import { defineComponent } from 'sciux-laplace'
 const CanvasType = type({
   width: 'number',
   height: 'number',
-  origin: 'number[]',
+  origin: type('number[]'),
+  division: type('number | number[]'),
 })
 
 export default defineComponent<'canvas', typeof CanvasType.infer>((attrs) => {
@@ -13,14 +14,19 @@ export default defineComponent<'canvas', typeof CanvasType.infer>((attrs) => {
     attrs: CanvasType,
     defaults: {
       origin: [0, 0],
+      division: 1,
     },
     setup(children) {
+      const division = Array.isArray(attrs.division.value) ? attrs.division.value : [attrs.division.value, attrs.division.value]
       const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
-      svg.setAttribute('viewBox', `0 0 ${attrs.width.value} ${attrs.height.value}`)
-
-      svg.style.height = attrs.height.value.toString()
-      svg.style.width = attrs.width.value.toString()
-
+      svg.setAttribute('viewBox', `0 0 ${attrs.width.value * division[0]} ${attrs.height.value * division[1]}`)
+      svg.setAttribute('width', '100%')
+      svg.setAttribute('height', '100%')
+      const caculateRatio = (width: number, height: number): number =>
+        (width < height ? width / height : height / width) * 100
+      if (attrs.width.value > attrs.height.value)
+        svg.setAttribute('height', `${caculateRatio(attrs.width.value, attrs.height.value)}%`)
+      else svg.setAttribute('width', `${caculateRatio(attrs.width.value, attrs.height.value)}%`)
       const root = document.createElementNS('http://www.w3.org/2000/svg', 'g')
       root.setAttribute('transform', `translate(${attrs.origin.value.join(',')})`)
       root.append(...children())
diff --git a/packages/widget/src/code.ts b/packages/widget/src/code.ts
index 905d167..2cbbd8d 100644
--- a/packages/widget/src/code.ts
+++ b/packages/widget/src/code.ts
@@ -18,6 +18,9 @@ export default defineComponent<'code', typeof T.infer>((attrs) => {
     attrs: T,
     setup(children) {
       const container = document.createElement('div')
+      container.style.width = '100%'
+      container.style.height = '100%'
+      container.style.display = 'flex'
       const kids = children()
       // Filter out text nodes
       const content = kids[0].textContent ?? ''
diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
index 866e649..7911984 100644
--- a/packages/widget/src/index.ts
+++ b/packages/widget/src/index.ts
@@ -2,3 +2,4 @@ export { default as canvas } from './canvas'
 export { default as code } from './code'
 export { default as link } from './link'
 export { default as table } from './table'
+export { default as tex } from './tex'
diff --git a/packages/widget/src/tex.ts b/packages/widget/src/tex.ts
new file mode 100644
index 0000000..93afdd4
--- /dev/null
+++ b/packages/widget/src/tex.ts
@@ -0,0 +1,41 @@
+import { theme } from '@sciux/utils-theme'
+import { type } from 'arktype'
+import { renderToString } from 'katex'
+import { defineComponent } from 'sciux-laplace'
+
+const T = type({
+  size: type.string,
+})
+
+export default defineComponent<'tex', typeof T.infer, {
+  underCanvas: boolean
+}>((_attrs, context) => {
+  return {
+    name: 'tex',
+    attrs: T,
+    setup(children) {
+      const content = children()[0].textContent ?? ''
+      const html = renderToString(content, {
+        throwOnError: false,
+        displayMode: false,
+        output: 'mathml',
+      })
+      let container: HTMLDivElement | SVGForeignObjectElement
+      if (context.underCanvas) {
+        container = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')
+        container.setAttribute('width', '100%')
+        container.setAttribute('height', '100%')
+        const subContainer = document.createElement('div')
+        subContainer.style.color = theme.pallete('note')
+        subContainer.innerHTML = html
+        container.append(subContainer)
+      }
+      else {
+        container = document.createElement('div')
+        container.style.color = theme.pallete('primary')
+        container.innerHTML = html
+      }
+      return container
+    },
+  }
+})
diff --git a/packages/widget/tsconfig.json b/packages/widget/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/packages/widget/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d3715af..509552f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,8 +49,8 @@ catalogs:
       specifier: ^10.4.0
       version: 10.4.0
     sciux-laplace:
-      specifier: v0.0.1-beta.6
-      version: 0.0.1-beta.1
+      specifier: v0.0.1-beta.10
+      version: 0.0.1-beta.10
     simple-git-hooks:
       specifier: ^2.11.1
       version: 2.11.1
@@ -190,7 +190,25 @@ importers:
         version: 2.1.20
       sciux-laplace:
         specifier: 'catalog:'
-        version: 0.0.1-beta.1
+        version: 0.0.1-beta.10
+
+  packages/math:
+    dependencies:
+      '@sciux/utils-theme':
+        specifier: workspace:^
+        version: link:../utils-theme
+      '@sciux/widget':
+        specifier: workspace:^
+        version: link:../widget
+      '@vue/reactivity':
+        specifier: ^3.5.14
+        version: 3.5.14
+      arktype:
+        specifier: ^2.1.20
+        version: 2.1.20
+      sciux-laplace:
+        specifier: 'catalog:'
+        version: 0.0.1-beta.10
 
   packages/model:
     dependencies:
@@ -202,22 +220,28 @@ importers:
         version: 2.1.20
       sciux-laplace:
         specifier: 'catalog:'
-        version: 0.0.1-beta.1
+        version: 0.0.1-beta.10
 
   packages/sciux:
     dependencies:
       '@sciux/layout':
         specifier: workspace:*
         version: link:../layout
+      '@sciux/math':
+        specifier: workspace:*
+        version: link:../math
       '@sciux/model':
         specifier: workspace:*
         version: link:../model
+      '@sciux/utils-theme':
+        specifier: workspace:*
+        version: link:../utils-theme
       '@sciux/widget':
         specifier: workspace:*
         version: link:../widget
       sciux-laplace:
         specifier: 'catalog:'
-        version: 0.0.1-beta.1
+        version: 0.0.1-beta.10
 
   packages/theme-default:
     dependencies:
@@ -235,7 +259,7 @@ importers:
         version: 0.16.22
       sciux-laplace:
         specifier: 'catalog:'
-        version: 0.0.1-beta.6
+        version: 0.0.1-beta.10
       shiki:
         specifier: ^3.4.2
         version: 3.4.2
@@ -250,7 +274,7 @@ importers:
         version: 2.1.20
       sciux-laplace:
         specifier: 'catalog:'
-        version: 0.0.1-beta.6
+        version: 0.0.1-beta.10
 
   packages/widget:
     dependencies:
@@ -266,9 +290,12 @@ importers:
       arktype:
         specifier: ^2.1.20
         version: 2.1.20
+      katex:
+        specifier: ^0.16.22
+        version: 0.16.22
       sciux-laplace:
         specifier: 'catalog:'
-        version: 0.0.1-beta.1
+        version: 0.0.1-beta.10
       shiki:
         specifier: ^3.4.2
         version: 3.4.2
@@ -295,7 +322,7 @@ importers:
         version: link:../packages/sciux
       sciux-laplace:
         specifier: 'catalog:'
-        version: 0.0.1-beta.1
+        version: 0.0.1-beta.10
     devDependencies:
       typescript:
         specifier: ~5.8.3
@@ -3693,11 +3720,8 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
-  sciux-laplace@0.0.1-beta.1:
-    resolution: {integrity: sha512-6+JtNbEnKen1GjsS8IWnvD0WOuhMAg+vqBZUqiJGqkLJ2DgNat/pct/nzAwrzN+5AEUY2fL8M4MjVF8onYGVEA==}
-
-  sciux-laplace@0.0.1-beta.6:
-    resolution: {integrity: sha512-kHTTtQoF3BB+NAwI6ZV6c+LZRWwwpNsFj/jrau97+aJSClKifauzubWzU5p4ofszaKUc18GtUdJo9PhjtkzlDw==}
+  sciux-laplace@0.0.1-beta.10:
+    resolution: {integrity: sha512-TdQfndfOPhLuHmye+btBYTURqxa8UJNT6BBLjAOvP7ieEyyJ/Moq4J8fHZnt8nYeFCmZGNE2gc0EHw8oUjOwKA==}
 
   scslre@0.3.0:
     resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
@@ -7984,19 +8008,7 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
-  sciux-laplace@0.0.1-beta.1:
-    dependencies:
-      '@vue/reactivity': 3.5.14
-      '@vue/shared': 3.5.14
-      '@xmldom/xmldom': 0.9.8
-      arktype: 2.1.20
-      clsx: 2.1.1
-      css-what: 6.1.0
-      morphdom: 2.7.5
-      parse-entities: 4.0.2
-      xpath: 0.0.34
-
-  sciux-laplace@0.0.1-beta.6:
+  sciux-laplace@0.0.1-beta.10:
     dependencies:
       '@vue/reactivity': 3.5.14
       '@vue/shared': 3.5.14
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 96c8963..1632f05 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -31,4 +31,4 @@ catalog:
   vitepress-plugin-group-icons: ^1.3.5
   vitest: ^3.0.5
   vue: ^3.5.13
-  sciux-laplace: v0.0.1-beta.8
+  sciux-laplace: v0.0.1-beta.10
diff --git a/test/index.html b/test/index.html
index 2f3d692..f528c79 100644
--- a/test/index.html
+++ b/test/index.html
@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + TS</title>
   </head>
-  <body style="margin: 0; padding: 5px;">
+  <body style="margin: 0; padding: 0">
     <div id="root" style="margin: 0px; padding: 0px; display: flex; flex-direction: row; width: 100%; height: 100%;">
-      <div id="sidebar" style="display: flex; flex-direction: column; height: 100%; margin: 0 0.5rem;"></div>
-      <div id="app" style="height: 100%; border: 1px dashed #ccc; overflow-y: auto;">
+      <div id="sidebar" style="display: flex; width: 200px; flex-direction: column; height: 100%; margin: 0 0.5rem;"></div>
+      <div id="app" style="height: 100%; width: 100%; border: 1px dashed #ccc; overflow-y: auto;">
       </div>
     </div>
     <script type="module" src="/src/main.ts"></script>
+    <!-- <link rel="stylesheet" href="/node_modules/@sciux/theme-default/styles/main.css"> -->
   </body>
 </html>
diff --git a/test/package.json b/test/package.json
index 1ba3395..f28f424 100644
--- a/test/package.json
+++ b/test/package.json
@@ -3,7 +3,7 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "vite",
+    "test:dev": "vite",
     "preview": "vite preview"
   },
   "dependencies": {
diff --git a/test/src/examples.ts b/test/src/examples.ts
index 2c82898..f8f2871 100644
--- a/test/src/examples.ts
+++ b/test/src/examples.ts
@@ -1,7 +1,17 @@
 import test from './example.sciux?raw'
+import angle from './template/math/angle.sciux?raw'
+import circle from './template/math/circle.sciux?raw'
+import figure from './template/math/figure.sciux?raw'
+import plane from './template/math/plane.sciux?raw'
 import widget from './template/widget.sciux?raw'
 
 export default {
   test,
   widget,
+  '@sciux/math': {
+    angle,
+    figure,
+    circle,
+    plane,
+  },
 }
diff --git a/test/src/main.ts b/test/src/main.ts
index edb881c..3b82230 100644
--- a/test/src/main.ts
+++ b/test/src/main.ts
@@ -1,6 +1,6 @@
-import init, { render } from 'sciux'
+import init, { applyTheme, render } from 'sciux'
 import examples from './examples'
-import '@sciux/theme-default/styles/vars.css'
+import '@sciux/theme-default/styles/main.css'
 
 const urlName = window.location.hash.slice(1)
 const app = document.getElementById('app')!
@@ -48,6 +48,7 @@ function createItem(name: string, level: number, handler: () => void): any {
 function createRenderer(source: string) {
   return () => {
     app.innerHTML = ''
+    applyTheme('#app')
     render(source, app)
   }
 }
diff --git a/test/src/template/math/angle.sciux b/test/src/template/math/angle.sciux
new file mode 100644
index 0000000..1fdf026
--- /dev/null
+++ b/test/src/template/math/angle.sciux
@@ -0,0 +1,13 @@
+<canvas :width="900" :height="240 * 3" :origin="[150 * 3, 120]">
+  <angle :x="0" :y="0" :from="0" :to="120" :start-side="100" :end-side="100">
+    <bounding type="dashed" value="R = 2r" />
+    <arc type="dashed" value="120" />
+    <start-point as="A" />
+    <end-point as="B" />
+  </angle>
+  <line :from="A" :to="B" type="dotted" value="C">
+    <start-point as="A" />
+    <end-point as="B" />
+  </line>
+  <function :domain="[-10, 10]" :expr="(x) => Math.cos(Math.sin(x) * Math.tan(x)) * Math.atan(x)" :division="10" />
+</canvas>
\ No newline at end of file
diff --git a/test/src/template/math/circle.sciux b/test/src/template/math/circle.sciux
new file mode 100644
index 0000000..9deaf33
--- /dev/null
+++ b/test/src/template/math/circle.sciux
@@ -0,0 +1,3 @@
+<canvas :width="300" :height="240" :origin="[150, 120]">
+  <circle :x="0" :y="0" :radius="100" :from="0" :to="120" type="dashed" />
+</canvas>
\ No newline at end of file
diff --git a/test/src/template/math/figure.sciux b/test/src/template/math/figure.sciux
new file mode 100644
index 0000000..5b4c942
--- /dev/null
+++ b/test/src/template/math/figure.sciux
@@ -0,0 +1,9 @@
+<canvas :width="100" :height="100" :origin="[50, 50]">
+  <figure x="0" y="0">
+    <m x="0" y="0" />
+    <l x="100" y="0" />
+    <l x="100" y="100" />
+    <l x="0" y="100" />
+    <l x="0" y="0" />
+  </figure>
+</canvas>
\ No newline at end of file
diff --git a/test/src/template/math/plane.sciux b/test/src/template/math/plane.sciux
new file mode 100644
index 0000000..c7f9143
--- /dev/null
+++ b/test/src/template/math/plane.sciux
@@ -0,0 +1,5 @@
+<canvas :width="600" :height="600" :origin="[300, 300]">
+  <plane :x="0" :y="0" :division="25" :domain="[-10, 10]" :range="[-5, 5]" :x-label="count => count.toString()" :y-label="count => count.toString()">
+    <function :domain="[-10, 10]" :expr="(x) => Math.cos(x)" />
+  </plane>
+</canvas>
\ No newline at end of file