diff --git a/.envrc b/.envrc
deleted file mode 100644
index 9580819..0000000
--- a/.envrc
+++ /dev/null
@@ -1,13 +0,0 @@
-keys=(
-  ALCHEMY_API_KEY
-  ETHERSCAN_API_KEY
-  PUBLIC_WALLET_CONNECT_PROJECT_ID
-)
-
-for key in "${keys[@]}"; do
-  export $key=$(getSecret $key)
-done
-
-export PUBLIC_ALCHEMY_API_KEY=$ALCHEMY_API_KEY
-export PUBLIC_BURNER_WALLET_KEY=0x8b3a350cf5c34c9194ca85829a2df0ec3153be0318b5e2d3348e872092edffba
-
diff --git a/.gitignore b/.gitignore
index f0dacfa..1c9c4c5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,8 +16,7 @@ dist
 Thumbs.db
 
 # Env
-.env
-.env.*
+.env*
 !.env.example
 !.env.test
 
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..9062476
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-2024 Kredeum
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index 61880b1..ea37751 100644
--- a/README.md
+++ b/README.md
@@ -2,77 +2,151 @@
 
 A Svelte 5 Web3 library based on Wagmi, providing seamless integration of Web3 functionality into your Svelte applications.
 
-## Features
+## ✨ Features
 
-- 🔌 Built for Svelte 5
-- 🌐 Web3 Integration
-- 🔒 Wallet Connection Management
-- ⛓️ Multi-chain Support
-- 🎣 Reactive Web3 Hooks
+- 🔌 Built for Svelte 5 with full TypeScript support
+- 🌐 Web3 Integration using Wagmi core functionality
+- 🔒 Secure Wallet Connection Management
+- ⛓️ Multi-chain Support with Auto-detection
+- 🎣 Reactive Web3 Hooks for Real-time Updates
 - 🔄 Auto-refresh on Network Changes
+- 📦 Simple and Intuitive API
+- 🛠️ Type-safe Contract Interactions
 
-## Installation
+## 📁 Repository Structure
+
+This repository contains two main parts:
+
+- 📦 The Svelte5 package code in `src/lib/wagmi`
+- 🎮 A SvelteKit demo app with usage examples in `src/routes`
+
+## 📦 Svelte5 Package
+
+### 💻 Installation
+
+Add this package to your Svelte5 project:
 
 ```bash
 npm install @kredeum/wagmi-svelte5
 # or
-pnpm add @kredeum/wagmi-svelte5
+pnpm install @kredeum/wagmi-svelte5
 # or
 yarn add @kredeum/wagmi-svelte5
 ```
 
-## Quick Start
+### 🚀 Quick Start
 
-```typescript
-import { createConfig } from "@kredeum/wagmi-svelte5";
+#### Simple Example
+
+```svelte
+<script lang="ts">
+  import { newWagmi } from "@wagmi-svelte5";
+  import { Counter } from "$lib/examples/Counter.svelte";
+
+  newWagmi();
+  const counter = new Counter();
+</script>
 
-// Configure your Web3 settings
-const config = createConfig({
-  // Your configuration options here
-});
+{counter.number}² = {counter.square(counter.number)}
 ```
 
-## Usage
+#### Using this Counter class Helper
 
-### Connect Wallet
+```typescript
+import { SmartContract } from "$lib/wagmi";
+
+export class Counter extends SmartContract {
+  get number() {
+    return this.call("number") as bigint;
+  }
+  square(num: number | bigint) {
+    return this.call("square", [num]) as bigint;
+  }
+  constructor() {
+    super("Counter");
+  }
+}
+```
+
+#### Same example without Helper
 
 ```svelte
-<script>
-  import { connect } from "@kredeum/wagmi-svelte5";
+<script lang="ts">
+  import { newWagmi, SmartContract } from "@wagmi-svelte5";
+
+  newWagmi();
+  const contract = new SmartContract("Counter");
+  const num = $derived(contract.call("number"));
+  const square = $derived(contract.call("square", [num]));
 </script>
 
-<button on:click={connect}>Connect Wallet</button>
+{num}² = {square}
 ```
 
-## Requirements
+#### 📄 Smart Contract Source
 
-- Svelte 5.x
-- Node.js 16+
+```solidity
+// Counter.sol
+contract Counter is ICounter {
+    uint256 public number;
 
-## Development
+    function square(uint256 num) public pure override(ICounter) returns (uint256) {
+        return num ** 2;
+    }
+    ...
+}
+```
+
+Full Counter.sol code deployed on Base Sepolia testnet can be Viewed here:
+🔍 [on BaseScan](https://sepolia.basescan.org/address/0xb1eC295A306436560C7A27616f51B5d76D6aDCa8#code)
+
+## 🎮 SvelteKit Demo and Examples
+
+The demo app in `src/routes` showcases various package features and usage patterns.
+
+### 🛠️ Requirements
+
+Your local machine needs:
+
+- 📦 [Node.js](https://nodejs.org/) 20+
+- 📦 [Pnpm](https://pnpm.io/) 9+
+
+Optional but recommended:
+
+- 🚀 [Turborepo](https://turbo.build/repo) 1.8+
+
+### ⚡ Quick Setup
+
+Get started with the examples:
 
 ```bash
+# Clone the repository
+git clone https://github.com/kredeum/wagmi-svelte5.git
+cd wagmi-svelte5
+
 # Install dependencies
 pnpm install
 
-# Run development server
-pnpm dev
+# Run the demo app
+turbo start
+# or without Turborepo
+pnpx turbo start
+```
 
-# Build package
-pnpm build
+🌐 Your browser will open to http://localhost:5173 showing the `Tests` page
 
-# Run tests
-pnpm test
-```
+## 🤝 Contributing
 
-## Contributing
+We welcome contributions! Feel free to:
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+- 🐛 Report issues
+- 💡 Suggest features
+- 🔧 Submit pull requests
 
-## License
+## 📄 License
 
 MIT License - see the [LICENSE](LICENSE) file for details.
 
-## Author
+## 👨‍💻 Author
 
 zapaz.eth <zapaz@kredeum.com> (http://labs.kredeum.com/)
diff --git a/package.json b/package.json
index f61edde..b5f80e3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kredeum/wagmi-svelte5",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "description": "Svelte5 Web3 library based on Wagmi",
   "keywords": [
@@ -40,6 +40,7 @@
     "build": "vite build",
     "test": "pnpm run test:unit && pnpm run test:e2e",
     "dev": "vite dev",
+    "start": "vite dev",
     "preview": "vite preview",
     "test:unit": "vitest run",
     "test:e2e": "playwright test",
diff --git a/src/lib/examples/Counter.svelte.ts b/src/lib/examples/Counter.svelte.ts
new file mode 100644
index 0000000..eae6f13
--- /dev/null
+++ b/src/lib/examples/Counter.svelte.ts
@@ -0,0 +1,20 @@
+import { SmartContract } from "$lib/wagmi";
+
+class Counter extends SmartContract {
+  get number() {
+    return this.call("number") as bigint;
+  }
+  increment = async () => {
+    await this.sendAndWait("increment");
+    await this.callAsync("number");
+  };
+  square(num: number | bigint) {
+    return this.call("square", [num || 0n]) as bigint;
+  }
+
+  constructor() {
+    super("Counter");
+  }
+}
+
+export { Counter };
diff --git a/src/lib/wagmi/classes/SmartContract.svelte.ts b/src/lib/wagmi/classes/SmartContract.svelte.ts
index 17affb2..e6b178c 100644
--- a/src/lib/wagmi/classes/SmartContract.svelte.ts
+++ b/src/lib/wagmi/classes/SmartContract.svelte.ts
@@ -65,8 +65,7 @@ class SmartContract {
     functionName: string = "",
     args: unknown[] = []
   ) => {
-    // console.log("SMARTCONTRACT READ", functionName, args, chainId, deployment.address, `#${this.id}`);
-    // console.log("SMARTCONTRACT READ",  deployment.abi);
+    // console.log("SMARTCONTRACT READ", functionName, args, chainId, `#${this.id}`);
     const abiFunction = (abi as unknown as AbiFunction[]).find(
       (f) => f.type === "function" && f.name === functionName && f.inputs.length === args.length
     );
diff --git a/src/lib/wagmi/ts/notification.ts b/src/lib/wagmi/ts/notification.ts
index a5308d2..e6b9f56 100644
--- a/src/lib/wagmi/ts/notification.ts
+++ b/src/lib/wagmi/ts/notification.ts
@@ -53,7 +53,7 @@ export const notification = {
   loading: (Content: Renderable, options?: NotificationOptions) => {
     return Notification({ Content, status: "loading", ...options });
   },
-  remove: (toastId: string) => {
+  remove: (toastId?: string) => {
     toast.remove(toastId);
   }
 };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 79e59de..b9d0db8 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,19 +1,9 @@
 <script lang="ts">
+  import "../app.pcss";
   import type { Snippet } from "svelte";
-  import { Account, Connect, Disconnect, wagmi, newWagmi } from "$lib/wagmi";
   import { Toaster } from "svelte-hot-french-toast";
-  import "../app.pcss";
 
   let { children }: { children: Snippet } = $props();
-
-  newWagmi();
-
-  const chains = wagmi.chains;
-  const account = new Account();
-
-  const switchChain = (chainId: number) => {
-    wagmi.switch(chainId);
-  };
 </script>
 
 <Toaster />
@@ -24,27 +14,6 @@
       <a href="/">Tests</a>
     </h1>
 
-    <div class="pb-8">
-      {#if account.address}
-        {account.address} ({account.chainId})
-
-        <Disconnect />
-
-        {#each chains as chain (chain.id)}
-          {#if chain.id !== account.chainId}
-            <span class="px-1">
-              <button class="btn-default btn btn-sm" onclick={() => switchChain(chain.id)}>
-                {chain.name}
-              </button>
-            </span>
-          {/if}
-        {/each}
-        <div class="p-2"></div>
-      {:else}
-        <Connect chainId={account.chainId} bind:address={account.address} />
-      {/if}
-    </div>
-
-    <main class="relative flex flex-1 flex-col">{@render children()}</main>
+    {@render children()}
   </div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d9dd675..0ddc604 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,11 +1,12 @@
 <script lang="ts"></script>
 
-{#snippet pageTest(pageName: string)}
-  <li><a class="text-blue-500 hover:underline" href="/{pageName}">{pageName}</a></li>
+{#snippet pageTest(pagePath: string, pageDescription: string)}
+  <li><a class="text-blue-500 hover:underline" href={pagePath}>{pageDescription}</a></li>
 {/snippet}
 
 <ul class="list-disc space-y-2 pl-5">
-  {@render pageTest("notification")}
-  {@render pageTest("counter")}
-  {@render pageTest("deployments")}
+  {@render pageTest("/quick/counter", "Read Counter")}
+  {@render pageTest("/connect/counter", "Read/Write Counter")}
+  {@render pageTest("/quick/notification", "Notifications")}
+  {@render pageTest("/connect/deployments", "Deployments")}
 </ul>
diff --git a/src/routes/connect/+layout.svelte b/src/routes/connect/+layout.svelte
new file mode 100644
index 0000000..18399ce
--- /dev/null
+++ b/src/routes/connect/+layout.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Account, Connect, Disconnect, wagmi, newWagmi } from "$lib/wagmi";
+
+  let { children }: { children: Snippet } = $props();
+
+  newWagmi();
+
+  const chains = wagmi.chains;
+  const account = new Account();
+
+  const switchChain = (chainId: number) => {
+    wagmi.switch(chainId);
+  };
+</script>
+
+<div>
+  {#if account.address}
+    {account.address} ({account.chainId})
+
+    <Disconnect />
+
+    {#each chains as chain (chain.id)}
+      {#if chain.id !== account.chainId}
+        <span class="px-1">
+          <button class="btn-default btn btn-sm" onclick={() => switchChain(chain.id)}>
+            {chain.name}
+          </button>
+        </span>
+      {/if}
+    {/each}
+    <div class="p-2"></div>
+  {:else}
+    <Connect chainId={account.chainId} bind:address={account.address} />
+  {/if}
+</div>
+
+{@render children()}
diff --git a/src/routes/counter/+page.svelte b/src/routes/connect/counter/+page.svelte
similarity index 67%
rename from src/routes/counter/+page.svelte
rename to src/routes/connect/counter/+page.svelte
index e18ac17..3a39846 100644
--- a/src/routes/counter/+page.svelte
+++ b/src/routes/connect/counter/+page.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-  import { notification } from "@wagmi-svelte5";
-  import { Counter } from "./Counter.svelte";
+  import { Counter } from "$lib/examples/Counter.svelte";
 
   const contract = new Counter();
 
   $inspect(contract.isFetching);
 </script>
 
-<div class="p-4">
+<div>
   <div class="my-4 w-44 rounded bg-blue-100 p-2 text-center shadow">
     {contract.isFetching
       ? "fetching..."
@@ -20,14 +19,9 @@
             : "ok!"}
   </div>
 
-  <button class="btn btn-primary" onclick={() => contract.setNumber(0)}> Reset </button>
   <button class="btn btn-primary" onclick={() => contract.increment()}> Increment </button>
 
   <div class="my-4 w-44 rounded bg-blue-100 p-2 text-center shadow">
     {contract.number}² = {contract.square(contract.number)}
   </div>
-
-  <button class="btn btn-primary" onclick={() => notification.info("Notification!")}>
-    Notif
-  </button>
 </div>
diff --git a/src/routes/deployments/+page.svelte b/src/routes/connect/deployments/+page.svelte
similarity index 61%
rename from src/routes/deployments/+page.svelte
rename to src/routes/connect/deployments/+page.svelte
index 7b6295d..0f1f747 100644
--- a/src/routes/deployments/+page.svelte
+++ b/src/routes/connect/deployments/+page.svelte
@@ -4,12 +4,12 @@
   console.log("DEPLOYMENTS", deployments);
 </script>
 
-<div class="p-4">
-  Deployment <strong>Counter</strong>, address on chain #{wagmi.chainId} =
-  {readDeploymentByName(wagmi.chainId, "Counter")?.address}
-</div>
+<div>
+  <div class="py-4">
+    Deployment <strong>Counter</strong>, address on chain #{wagmi.chainId} =
+    {readDeploymentByName(wagmi.chainId, "Counter")?.address}
+  </div>
 
-<div class="p-4">
   <details>
     <summary>All Deployments</summary>
     <pre>
diff --git a/src/routes/counter/Counter.svelte.ts b/src/routes/counter/Counter.svelte.ts
deleted file mode 100644
index 8a6e9c7..0000000
--- a/src/routes/counter/Counter.svelte.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Address } from "viem";
-import { SmartContract, isAddress } from "$lib/wagmi";
-
-class Counter extends SmartContract {
-  get number() {
-    return this.call("number") as bigint;
-  }
-  increment = async () => {
-    await this.sendAndWait("increment");
-    await this.callAsync("number");
-  };
-  setNumber = async (num: number | bigint = 1n) => {
-    await this.sendAndWait("setNumber", [num]);
-    await this.callAsync("number");
-  };
-  square(num: number | bigint = 1n) {
-    return this.call("square", [num]) as bigint;
-  }
-  balanceOf(address: Address) {
-    if (!isAddress(address)) return;
-
-    const balance = this.call("balanceOf", [address]) as bigint;
-
-    return balance;
-  }
-
-  constructor() {
-    super("Counter");
-  }
-}
-
-export { Counter };
diff --git a/src/routes/notification/+page.svelte b/src/routes/notification/+page.svelte
deleted file mode 100644
index 8a7307a..0000000
--- a/src/routes/notification/+page.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-  import { notification } from "@wagmi-svelte5";
-</script>
-
-<div class="p-4">
-  <button class="btn btn-primary" onclick={() => notification.info("Notification!")}>
-    Notif
-  </button>
-</div>
diff --git a/src/routes/quick/counter/+page.svelte b/src/routes/quick/counter/+page.svelte
new file mode 100644
index 0000000..e9e64cf
--- /dev/null
+++ b/src/routes/quick/counter/+page.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { newWagmi, SmartContract } from "@wagmi-svelte5";
+  import { Counter } from "$lib/examples/Counter.svelte";
+
+  newWagmi();
+
+  // Using Counter class Helper
+  const counter = new Counter();
+
+  // Using SmartContract class
+  const contract = new SmartContract("Counter");
+  const num = $derived(contract.call("number"));
+  const square = $derived(contract.call("square", [num || 0n]));
+</script>
+
+<div class="py-4">
+  Using Counter class Helper
+  <div class="my-4 w-44 rounded bg-blue-100 p-2 text-center shadow">
+    {counter.number}² = {counter.square(counter.number)}
+  </div>
+</div>
+
+<div class="py-4">
+  Using SmartContract class
+  <div class="my-4 w-44 rounded bg-blue-100 p-2 text-center shadow">
+    {num}² = {square}
+  </div>
+</div>
diff --git a/src/routes/quick/notification/+page.svelte b/src/routes/quick/notification/+page.svelte
new file mode 100644
index 0000000..3e79573
--- /dev/null
+++ b/src/routes/quick/notification/+page.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { notification } from "@wagmi-svelte5";
+</script>
+
+<div>
+  <h2 class="mb-4 text-xl font-semibold text-gray-800">Notifications</h2>
+  <button class="btn btn-primary" onclick={() => notification.info("Info Notification!")}
+    >Info</button
+  >
+  <button class="btn btn-primary" onclick={() => notification.success("Success Notification!")}
+    >Success</button
+  >
+  <button class="btn btn-primary" onclick={() => notification.error("Error Notification!")}
+    >Error</button
+  >
+  <button class="btn btn-primary" onclick={() => notification.warning("Warning Notification!")}
+    >Warning</button
+  >
+  <button class="btn btn-primary" onclick={() => notification.loading("Loading Notification!")}
+    >Loading</button
+  >
+  <button class="btn btn-primary" onclick={() => notification.remove()}>X</button>
+</div>
diff --git a/turbo.json b/turbo.json
index fdca7f2..b3dc4a9 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,43 +1,68 @@
 {
   "$schema": "https://turbo.build/schema.json",
+  "globalPassThroughEnv": [
+    "PUBLIC_CHAINS",
+    "PUBLIC_POLLING_INTERVAL",
+    "PUBLIC_ALCHEMY_API_KEY",
+    "PUBLIC_WALLET_CONNECT_PROJECT_ID",
+    "PUBLIC_BURNER_WALLET_ONLY_LOCAL",
+    "PUBLIC_BURNER_WALLET_KEY"
+  ],
   "envMode": "strict",
   "ui": "stream",
   "tasks": {
     "format": {
-      "inputs": ["src/**", "test/**"],
+      "inputs": [
+        "src/**",
+        "test/**"
+      ],
       "outputLogs": "new-only"
     },
     "check": {
-      "dependsOn": ["format"],
+      "dependsOn": [
+        "format"
+      ],
       "outputLogs": "new-only"
     },
     "build": {
-      "dependsOn": ["check"],
+      "dependsOn": [
+        "check"
+      ],
       "outputLogs": "new-only"
     },
     "test": {
-      "dependsOn": ["build"],
+      "dependsOn": [
+        "build"
+      ],
       "cache": false,
       "outputLogs": "new-only"
     },
     "dev": {
       "cache": false,
       "persistent": true,
-      "inputs": ["src/**"],
+      "inputs": [
+        "src/**"
+      ],
       "outputLogs": "new-only"
     },
     "start": {
-      "dependsOn": ["check"],
+      "dependsOn": [
+        "check"
+      ],
       "cache": false,
       "persistent": true,
-      "inputs": ["src/**"],
+      "inputs": [
+        "src/**"
+      ],
       "outputLogs": "new-only"
     },
     "preview": {
-      "dependsOn": ["build"],
+      "dependsOn": [
+        "build"
+      ],
       "cache": false,
       "persistent": true,
       "outputLogs": "new-only"
     }
   }
-}
+}
\ No newline at end of file