diff --git a/examples/with-express/package.json b/examples/with-express/package.json
index 99553e2..c6f038c 100644
--- a/examples/with-express/package.json
+++ b/examples/with-express/package.json
@@ -7,7 +7,7 @@
     "dev": "ts-node src/index.ts"
   },
   "dependencies": {
-    "@ossph/temple": "0.0.6",
+    "@ossph/temple": "0.0.7",
     "express": "4.19.2"
   },
   "devDependencies": {
diff --git a/examples/with-fastify/package.json b/examples/with-fastify/package.json
index f225a6a..6ce2319 100644
--- a/examples/with-fastify/package.json
+++ b/examples/with-fastify/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@fastify/static": "7.0.4",
-    "@ossph/temple": "0.0.6",
+    "@ossph/temple": "0.0.7",
     "fastify": "4.27.0"
   },
   "devDependencies": {
diff --git a/examples/with-hapi/package.json b/examples/with-hapi/package.json
index 7877921..4ffceb8 100644
--- a/examples/with-hapi/package.json
+++ b/examples/with-hapi/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "@hapi/hapi": "21.3.9",
     "@hapi/inert": "7.1.0",
-    "@ossph/temple": "0.0.6"
+    "@ossph/temple": "0.0.7"
   },
   "devDependencies": {
     "@types/node": "20.12.7",
diff --git a/examples/with-koa/package.json b/examples/with-koa/package.json
index ab2415e..a923d0f 100644
--- a/examples/with-koa/package.json
+++ b/examples/with-koa/package.json
@@ -7,7 +7,7 @@
     "dev": "ts-node src/index.ts"
   },
   "dependencies": {
-    "@ossph/temple": "0.0.6",
+    "@ossph/temple": "0.0.7",
     "koa": "2.15.3",
     "koa-router": "12.0.1",
     "koa-static": "5.0.0"
diff --git a/examples/with-nest/package.json b/examples/with-nest/package.json
index 79b9346..36766c1 100644
--- a/examples/with-nest/package.json
+++ b/examples/with-nest/package.json
@@ -21,7 +21,7 @@
     "@nestjs/common": "^10.0.0",
     "@nestjs/core": "^10.0.0",
     "@nestjs/platform-express": "^10.0.0",
-    "@ossph/temple": "0.0.6",
+    "@ossph/temple": "0.0.7",
     "reflect-metadata": "^0.2.0",
     "rxjs": "^7.8.1"
   },
diff --git a/examples/with-restify/package.json b/examples/with-restify/package.json
index 5746079..a893b5c 100644
--- a/examples/with-restify/package.json
+++ b/examples/with-restify/package.json
@@ -7,7 +7,7 @@
     "dev": "ts-node src/index.ts"
   },
   "dependencies": {
-    "@ossph/temple": "0.0.6",
+    "@ossph/temple": "0.0.7",
     "restify": "11.1.0"
   },
   "devDependencies": {
diff --git a/examples/with-webpack/package.json b/examples/with-webpack/package.json
index bf5c9b8..9640a5a 100644
--- a/examples/with-webpack/package.json
+++ b/examples/with-webpack/package.json
@@ -8,8 +8,8 @@
     "build": "webpack"
   },
   "dependencies": {
-    "@ossph/temple": "0.0.6",
-    "@ossph/temple-loader": "0.0.6"
+    "@ossph/temple": "0.0.7",
+    "@ossph/temple-loader": "0.0.7"
   },
   "devDependencies": {
     "@types/node": "20.12.7",
diff --git a/packages/temple-client/package.json b/packages/temple-client/package.json
index 3af928c..5956292 100644
--- a/packages/temple-client/package.json
+++ b/packages/temple-client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ossph/temple-client",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Browser library that Temple scripts can use to manage data in different ways.",
   "license": "Apache-2.0",
   "author": "Chris <chris@incept.asia>",
diff --git a/packages/temple-client/src/signal.ts b/packages/temple-client/src/signal.ts
index ae6b371..b9cba8d 100644
--- a/packages/temple-client/src/signal.ts
+++ b/packages/temple-client/src/signal.ts
@@ -8,6 +8,14 @@ export type Observer = {
   values: { raw: any }[]
 };
 
+export type Property<T = any> = {
+  raw: T,
+  getter(callback: () => any): Property,
+  setter(callback: (value: any) => any): Property,
+  value: T
+
+};
+
 /**
  * Signal registry
  */
@@ -18,22 +26,36 @@ export class SignalRegistry {
   /**
    * Observe a value
    */
-  public static observe(component: TempleComponent, value: any) {
+  public static observe<T = any>(component: TempleComponent, value: T) {
+    const methods = {
+      getter: () => property.raw as T,
+      setter: (value: T) => value
+    };
     //make a new payload
-    const property = { raw: value };
+    const property = { 
+      raw: value,
+      getter(callback: () => T) {
+        methods.getter = callback;
+        return property;
+      },
+      setter(callback: (value: any) => T) {
+        methods.setter = callback;
+        return property;
+      }
+    };
     //define the access to the value
     Object.defineProperty(property, 'value', {
       get() {
-        return property.raw;
+        return methods.getter();
       },
-      set(value) {
-        const rerender = SignalRegistry.serialize(value) 
+      set(value: any) {
+        const formatted = methods.setter(value);
+        const rerender = SignalRegistry.serialize(formatted) 
           !== SignalRegistry.serialize(property.raw);
         property.raw = value;
         if (rerender) {
           component.render();
         }
-        
       }
     });
     //get the component's values
@@ -66,7 +88,6 @@ export class SignalRegistry {
    */
   protected static serialize(value: any) {
     return JSON.stringify(value);
-  
   }
 }
 
@@ -93,7 +114,7 @@ export default function signal<T = any>(
   //if component is not initiated
   if (!component.initiated) {
     //then add value to observer
-    return SignalRegistry.observe(component, value);
+    return SignalRegistry.observe<T>(component, value);
   }
   //The reason why signal() maybe called after the component
   //has initiated is because the signal() call was part of
@@ -110,7 +131,8 @@ export default function signal<T = any>(
   //get the property...
   //we are relying on JS single threaded nature to figure out 
   //what value to return based on how many times it was observed...
-  return observer.values[
+  const values = observer.values as Property<T>[];
+  return values[
     observer.observed++ % observer.values.length
   ];
 }
\ No newline at end of file
diff --git a/packages/temple-compiler/package.json b/packages/temple-compiler/package.json
index 20601e2..dfbeabe 100644
--- a/packages/temple-compiler/package.json
+++ b/packages/temple-compiler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ossph/temple-compiler",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Compiles Temple markup language files to JavaScript and HTML.",
   "license": "Apache-2.0",
   "author": "Chris <chris@incept.asia>",
@@ -21,9 +21,9 @@
     "test": "nyc ts-mocha tests/*.test.ts"
   },
   "dependencies": {
-    "@ossph/temple-client": "0.0.6",
-    "@ossph/temple-parser": "0.0.6",
-    "@ossph/temple-server": "0.0.6",
+    "@ossph/temple-client": "0.0.7",
+    "@ossph/temple-parser": "0.0.7",
+    "@ossph/temple-server": "0.0.7",
     "esbuild": "0.21.3",
     "typescript": "5.3.3",
     "ts-morph": "22.0.0"
diff --git a/packages/temple-loader/package.json b/packages/temple-loader/package.json
index 86f1cf1..d51c401 100644
--- a/packages/temple-loader/package.json
+++ b/packages/temple-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ossph/temple-loader",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Webpack support for the Temple markup language.",
   "license": "Apache-2.0",
   "author": "Chris <chris@incept.asia>",
@@ -20,7 +20,7 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@ossph/temple-compiler": "0.0.6",
+    "@ossph/temple-compiler": "0.0.7",
     "loader-utils": "3.2.1",
     "schema-utils": "4.2.0"
   },
diff --git a/packages/temple-parser/package.json b/packages/temple-parser/package.json
index 9ba4b37..a465da7 100644
--- a/packages/temple-parser/package.json
+++ b/packages/temple-parser/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ossph/temple-parser",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Parses the Temple markup language to an abstract syntac tree (AST).",
   "license": "Apache-2.0",
   "author": "Chris <chris@incept.asia>",
diff --git a/packages/temple-server/package.json b/packages/temple-server/package.json
index 529d473..07dd1dc 100644
--- a/packages/temple-server/package.json
+++ b/packages/temple-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ossph/temple-server",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Server library that Temple server uses to manage data in different ways.",
   "license": "Apache-2.0",
   "author": "Chris <chris@incept.asia>",
diff --git a/packages/temple-web/package.json b/packages/temple-web/package.json
index fcf5ea6..1d03b2c 100644
--- a/packages/temple-web/package.json
+++ b/packages/temple-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "temple-web",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Temple Website",
   "private": true,
   "scripts": {
@@ -8,7 +8,7 @@
     "dev": "ts-node ./src/index.ts"
   },
   "dependencies": {
-    "@ossph/temple": "0.0.6",
+    "@ossph/temple": "0.0.7",
     "express": "4.19.2",
     "fast-glob": "3.3.2"
   },
diff --git a/packages/temple/package.json b/packages/temple/package.json
index 6ac8552..3b672ff 100644
--- a/packages/temple/package.json
+++ b/packages/temple/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ossph/temple",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "The reactive web component template engine.",
   "license": "Apache-2.0",
   "author": "Chris <chris@incept.asia>",
@@ -28,7 +28,7 @@
     "test": "nyc cross-env DATABASE_URL=test ts-mocha tests/*.test.ts"
   },
   "dependencies": {
-    "@ossph/temple-compiler": "0.0.6"
+    "@ossph/temple-compiler": "0.0.7"
   },
   "devDependencies": {
     "@types/chai": "4.3.5",