diff --git a/package.json b/package.json
index 1430292..3f0c845 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@design.estate/dees-wcctools": "^1.0.37",
     "@git.zone/tsrun": "^1.2.12",
     "@losslessone_private/loint-pubapi": "^1.0.9",
-    "@signature.digital/portablecontract": "^1.0.3",
+    "@signature.digital/portablecontract": "^1.0.4",
     "signature_pad": "^4.1.7"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f5f7c89..859d4b9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ dependencies:
     specifier: ^1.0.9
     version: 1.0.13
   '@signature.digital/portablecontract':
-    specifier: ^1.0.3
-    version: 1.0.3
+    specifier: ^1.0.4
+    version: 1.0.4
   signature_pad:
     specifier: ^4.1.7
     version: 4.1.7
@@ -1209,8 +1209,8 @@ packages:
       uuid: 7.0.3
     dev: true
 
-  /@signature.digital/portablecontract@1.0.3:
-    resolution: {integrity: sha512-WA9KxKvK4ktYR6npMa2v/dtUfg/eCTX4AHQYT8wEOBVE5NjtEly4u4PoEI/HEEulfGlEiigYbZXMQj0M6zCeGA==}
+  /@signature.digital/portablecontract@1.0.4:
+    resolution: {integrity: sha512-f9CBdZ1m0oN2RE+R5ON+h9QfJXLmP57+qer2boxHkVJGZqbB4qixO5hS1SZWYRX7QrMK9EHzCZW1ZUN0uxkv9A==}
     dependencies:
       '@tsclass/tsclass': 4.0.46
     dev: false
diff --git a/ts_iso/democontract.ts b/ts_iso/democontract.ts
new file mode 100644
index 0000000..ce8326e
--- /dev/null
+++ b/ts_iso/democontract.ts
@@ -0,0 +1,49 @@
+import * as plugins from './plugins.js';
+
+export const demoContract: plugins.portablecontract.IPortableContract = {
+  "title": "Minijob Employment Contract",
+  "context": "This contract is for a Minijob position under German law.",
+  "availableRoles": [
+    {
+      "id": "employer",
+      "name": "Employer",
+      "description": "The party offering the Minijob position."
+    },
+    {
+      "id": "employee",
+      "name": "Employee",
+      "description": "The party accepting the Minijob position."
+    }
+  ],
+  "involvedParties": [
+    {
+      "role": "employer",
+      "contact": null
+    },
+    {
+      "role": "employee",
+      "contact": null
+    }
+  ],
+  "priorContracts": [],
+  "paragraphs": [
+    {
+      "uniqueId": "1",
+      "parent": null,
+      "title": "Introduction",
+      "content": "This contract outlines the terms of employment for a Minijob position between [Employer Name] and [Employee Name]."
+    },
+    {
+      "uniqueId": "2",
+      "parent": null,
+      "title": "Scope of Work",
+      "content": "The employee will perform the following duties: [List of Duties]."
+    },
+    {
+      "uniqueId": "3",
+      "parent": null,
+      "title": "Compensation",
+      "content": "The employee will be compensated with a monthly salary of [Salary Amount], in accordance with Minijob regulations."
+    }
+  ]
+};
\ No newline at end of file
diff --git a/ts_iso/index.ts b/ts_iso/index.ts
new file mode 100644
index 0000000..b6274cf
--- /dev/null
+++ b/ts_iso/index.ts
@@ -0,0 +1 @@
+export * from './democontract.js';
\ No newline at end of file
diff --git a/ts_iso/plugins.ts b/ts_iso/plugins.ts
new file mode 100644
index 0000000..4504272
--- /dev/null
+++ b/ts_iso/plugins.ts
@@ -0,0 +1,5 @@
+import * as portablecontract from '@signature.digital/portablecontract';
+
+export {
+  portablecontract,
+}
\ No newline at end of file
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index e109a5f..4ccac66 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@signature.digital_private/catalog',
-  version: '1.0.57',
+  version: '1.0.58',
   description: 'a catalog containing components for e-signing'
 }
diff --git a/ts_web/elements/sdig-contracteditor.ts b/ts_web/elements/sdig-contracteditor.ts
index 8b54028..62346b6 100644
--- a/ts_web/elements/sdig-contracteditor.ts
+++ b/ts_web/elements/sdig-contracteditor.ts
@@ -1,4 +1,14 @@
-import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+  domtools,
+} from '@design.estate/dees-element';
+import * as tsIso from '../../ts_iso/index.js';
 import * as plugins from '../plugins.js';
 
 declare global {
@@ -7,5 +17,26 @@ declare global {
   }
 }
 
-@customElement('sdig-signbox')
-export class ContractEditor extends DeesElement {}
\ No newline at end of file
+@customElement('sdig-contracteditor')
+export class ContractEditor extends DeesElement {
+  public static demo = () => html` <sdig-contracteditor
+    .contract=${tsIso.demoContract}
+  ></sdig-contracteditor> `;
+
+  // INSTANCE
+  public localStateInstance = new domtools.plugins.smartstate.Smartstate();
+  public contractState =
+    this.localStateInstance.getStatePart<plugins.portablecontract.IPortableContract>('contract');
+
+  @property({ type: Object })
+  public contract: plugins.portablecontract.IPortableContract;
+
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    super.firstUpdated(_changedProperties);
+    
+  }
+
+  public render(): TemplateResult {
+    return html` <div class="mainbox"></div> `;
+  }
+}
diff --git a/ts_web/elements/sdig-contractrenderer.ts b/ts_web/elements/sdig-contractrenderer.ts
new file mode 100644
index 0000000..e69de29
diff --git a/ts_web/elements/sdig-signpad.ts b/ts_web/elements/sdig-signpad.ts
index 5475ebd..96dc8d1 100644
--- a/ts_web/elements/sdig-signpad.ts
+++ b/ts_web/elements/sdig-signpad.ts
@@ -26,13 +26,14 @@ export class SignPad extends DeesElement {
         color: white;
         position: relative;
         max-width: 600px;
-        min-height: 200px;
+        min-height: 280px;
         max-height: 400px;
       }
 
       .mainbox {
         position: relative;
-        min-height: 280px;
+        width: 600px;
+        height: 280px;
       }
 
       .signline {