diff --git a/clog-utilities.lisp b/clog-utilities.lisp
index e44430d..bd54360 100644
--- a/clog-utilities.lisp
+++ b/clog-utilities.lisp
@@ -130,14 +130,13 @@ CLOG-OBJ unless :NAME is set and is used instead."))
 alpha 0.0 - 1.0"
   (format nil "hsla(~A, ~A, ~A, ~A)" hue saturation lightness alpha))
 
-;; https://www.w3schools.com/colors/colors_names.asp
-;;
-;; From - https://www.w3schools.com/
-;;
-;; linear-gradient(direction, color-stop1, color-stop2, ...);
-;; radial-gradient(shape size at position, start-color, ..., last-color);
-;; repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
-;; epeating-radial-gradient(shape size at position, start-color, ..., last-color);
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Implementation - Units
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+;;;;;;;;;;
+;; unit ;;
+;;;;;;;;;;
 
 ;; cm	centimeters
 ;; mm	millimeters
@@ -145,7 +144,6 @@ alpha 0.0 - 1.0"
 ;; px  	pixels (1px = 1/96th of 1in)
 ;; pt	points (1pt = 1/72 of 1in)
 ;; pc	picas (1pc = 12 pt)
-
 ;; em	Relative to the font-size of the element (2em means 2 times the size of the current font)	
 ;; ex	Relative to the x-height of the current font (rarely used)	
 ;; ch	Relative to the width of the "0" (zero)	
@@ -155,6 +153,23 @@ alpha 0.0 - 1.0"
 ;; vmin	Relative to 1% of viewport's* smaller dimension	
 ;; vmax	Relative to 1% of viewport's* larger dimension	
 ;; %	Relative to the parent element
+
+(deftype unit-type () '(member :cm :mm :in :px :pt :pc :em :ex :ch :rem :vw
+			 :vh :vmin :vmax :%))
+
+(defun unit (unit-type value)
+  "produce a string from numeric value with UNIT-TYPE appended."
+  (format nil "~A~A" value unit-type))
+  
+;; https://www.w3schools.com/colors/colors_names.asp
+;;
+;; From - https://www.w3schools.com/
+;;
+;; linear-gradient(direction, color-stop1, color-stop2, ...);
+;; radial-gradient(shape size at position, start-color, ..., last-color);
+;; repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
+;; epeating-radial-gradient(shape size at position, start-color, ..., last-color);
+
 ;;
 ;; * Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.
 ;;
diff --git a/tutorial/07-tutorial.lisp b/tutorial/07-tutorial.lisp
index 24cf188..9a42910 100644
--- a/tutorial/07-tutorial.lisp
+++ b/tutorial/07-tutorial.lisp
@@ -55,8 +55,8 @@
 	      (return))
 	    (when (connection-data-item body "done")
 	      (return))	    
-	    (setf (top mover) (format nil "~Apx" mover-y))
-	    (setf (left mover) (format nil "~Apx" mover-x))	  
+	    (setf (top mover) (unit :px mover-y))
+	    (setf (left mover) (unit :px mover-x))
 	    (if (= (random 2) 0)
 		(incf mover-y (random 10))
 		(decf mover-y (random 10)))
diff --git a/tutorial/08-tutorial.lisp b/tutorial/08-tutorial.lisp
index 17ee230..965e759 100644
--- a/tutorial/08-tutorial.lisp
+++ b/tutorial/08-tutorial.lisp
@@ -46,8 +46,8 @@
   (let* ((app (connection-data-item obj "app-data"))
 	 (x   (getf data ':screen-x))
 	 (y   (getf data ':screen-y)))    
-    (setf (top obj) (format nil "~Apx" (- y (drag-y app))))
-    (setf (left obj) (format nil "~Apx" (- x (drag-x app))))))
+    (setf (top obj) (unit :px (- y (drag-y app))))
+    (setf (left obj) (unit :px (- x (drag-x app))))))
 
 (defun on-mouse-leave (obj)
   (let ((app (connection-data-item obj "app-data")))