diff --git a/docs/getting-started/myalgo-connect-api.md b/docs/getting-started/myalgo-connect-api.md
index 2d6b83e..2368793 100644
--- a/docs/getting-started/myalgo-connect-api.md
+++ b/docs/getting-started/myalgo-connect-api.md
@@ -174,21 +174,49 @@ signLogicSig(logic: Uint8Array | Base64, address: Address): Promise<Uint8Array>;
 
 #### Params
 
-`Logic`:  TEAL program to be signed by the user.
+ - `Logic`:  TEAL program to be signed by the user.
 
-`Address`: Signer’s Address.
+ - `Address`: Signer’s Address.
 
 #### Response
 
 ```json
 // Uint8Array
-{
-  "0": 248,
-  "1": 77,
-  "2": 132,
-  ...
-  "61": 28,
-  "62": 131,
-  "63": 14
-}
+[ 248, 77, 132, ..., 28, 131, 14]
+```
+
+## tealSign()
+
+Sign an arbitrary piece of data which can be verified by a smart contract through the [ed25519verify](https://developer.algorand.org/docs/get-details/dapps/avm/teal/opcodes/#ed25519verify) opcode.
+
+See also: [algosdk tealSign](https://algorand.github.io/js-algorand-sdk/modules.html#tealSign)
+
+#### Signature and types
+
+```jsx
+export type Address = string;
+export type Base64 = string;
+
+tealSign(data: Uint8Array | Base64, contractAddress: Address, address: Address): Promise<Uint8Array>;
 ```
+
+#### Params
+
+ - `data`: The arbitrary piece of data to be signed
+
+ - `contractAddress`: Contract address/TEAL program hash, which can verify the signature.
+
+ - `address`: Signer address
+
+#### Response
+
+Returns the signature of the data
+
+```js
+// Uint8Array
+[ 248, 77, 132, ..., 28, 131, 14 ]
+```
+
+#### Considerations
+
+- This operation is supported only by mnemonic accounts. Ledger accounts are not supported.
diff --git a/docs/interactive-examples/TealSign.mdx b/docs/interactive-examples/TealSign.mdx
new file mode 100644
index 0000000..bc7dd8e
--- /dev/null
+++ b/docs/interactive-examples/TealSign.mdx
@@ -0,0 +1,18 @@
+---
+sidebar_position: 12
+--- 
+
+import TealSignExample from "../../src/components/TealSignExample"
+
+# Sign arbitrary data for teal program
+
+Sign an arbitrary piece of data which can be verified by a smart contract through the [ed25519verify](https://developer.algorand.org/docs/get-details/dapps/avm/teal/opcodes/#ed25519verify) opcode.
+
+See also: [algosdk tealSign](https://algorand.github.io/js-algorand-sdk/modules.html#tealSign)
+
+### Preconditions
+
+* The user has already shared the account to sign the data with.
+
+### Interactive Example
+<TealSignExample />
diff --git a/package-lock.json b/package-lock.json
index 8547336..a94c630 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "homepage",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1899,9 +1899,9 @@
       "integrity": "sha512-CuJNwtMTG1LHR1LQNWUPv+8xPUdkRY9p61wGJEp8J/N3q8djmnMySvSQlyVqLBvXsTPKmYc0ZmfXEXCpb5P5Cw=="
     },
     "@randlabs/myalgo-connect": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@randlabs/myalgo-connect/-/myalgo-connect-1.1.3.tgz",
-      "integrity": "sha512-iGme4YvAVCtZ6hjaEmltvd/z+Y2aIZ9s0Tw/t2WZRMD8CoWqYiDaj2vjrbtDyOarENQVNlAiY4IMpm0uI9gcUg==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@randlabs/myalgo-connect/-/myalgo-connect-1.2.0.tgz",
+      "integrity": "sha512-eUuv90M4LBrdL+A6qTrOqaICeRqmwZKW7JIfgaM6GgmfDopf8ugdK0gA2TuaCvCytA/NahEnsM5+Eup/ngUsLA==",
       "requires": {
         "@randlabs/communication-bridge": "^1.0.0"
       }
@@ -3123,6 +3123,15 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -5221,6 +5230,12 @@
         "schema-utils": "^3.0.0"
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
     "filesize": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
@@ -12114,6 +12129,7 @@
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "optional": true,
           "requires": {
+            "bindings": "^1.5.0",
             "nan": "^2.12.1"
           }
         },
diff --git a/package.json b/package.json
index fb2dd42..2a015bf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "homepage",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -17,7 +17,7 @@
     "@docusaurus/core": "^2.0.0-beta.3",
     "@docusaurus/preset-classic": "^2.0.0-beta.3",
     "@mdx-js/react": "^1.6.21",
-    "@randlabs/myalgo-connect": "^1.1.3",
+    "@randlabs/myalgo-connect": "^1.2.0",
     "@svgr/webpack": "^5.5.0",
     "algosdk": "^1.10.1",
     "bootstrap": "^5.0.2",
diff --git a/sidebars.js b/sidebars.js
index d52747b..90c3ead 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -36,7 +36,8 @@ module.exports = {
       'interactive-examples/connect','interactive-examples/PaymentTransaction', 'interactive-examples/GroupedTransaction', 
       'interactive-examples/ASATransacation', 'interactive-examples/ApplOptIn', 'interactive-examples/ApplCloseOut', 
       'interactive-examples/PaymentWithTeal', 'interactive-examples/ApplCreateTransaction', 'interactive-examples/ApplDeleteTransaction', 
-      'interactive-examples/ApplUpdateTransaction', 'interactive-examples/PaymentTransactionOverrideSigner'
+      'interactive-examples/ApplUpdateTransaction', 'interactive-examples/PaymentTransactionOverrideSigner',
+      'interactive-examples/TealSign'
       ],
     },
   ],
diff --git a/src/components/TealSignExample.tsx b/src/components/TealSignExample.tsx
new file mode 100644
index 0000000..a66de72
--- /dev/null
+++ b/src/components/TealSignExample.tsx
@@ -0,0 +1,122 @@
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import React, { useContext, useState } from "react";
+import { Button, Col, Label, Nav, NavItem, NavLink, Row, TabContent, TabPane } from "reactstrap";
+import PreLoadDataContextComponent, { PreLoadDataContext } from '../context/preLoadedData';
+import Address from "./commons/Address";
+import PrismCode from './commons/Code';
+import AccountDropdown from "./commons/FromDropdown";
+import Note from "./commons/Note";
+import "./interactive-examples.scss";
+
+const tealSignCode =
+    `
+import MyAlgoConnect from '@randlabs/myalgo-connect';
+
+const myAlgoConnect = new MyAlgoConnect();
+
+const data = new Uint8Array([...]);
+const contractAddress = '46Q...';
+const signer = 'MKJ...';
+
+const signature = await myAlgoConnect.tealSign(data, contractAddress, signer);
+`
+
+function TealSignExample(): JSX.Element {
+    const preLoadedData = useContext(PreLoadDataContext);
+    const accountslist = ExecutionEnvironment.canUseDOM && window.sharedAccounts && Array.isArray(window.sharedAccounts) ? window.sharedAccounts : [];
+    const [accounts, setAccount] = useState(accountslist);
+    const [accountSelected, selectAccount] = useState("");
+    const [data, setData] = useState<Uint8Array | undefined>();
+    const [contractAddress, setContractAddress] = useState("");
+    const [response, setResponse] = useState<string>("");
+    const [activeTab, setActiveTab] = useState('1');
+
+    const toggle = (tab: React.SetStateAction<string>) => {
+        if (activeTab !== tab) setActiveTab(tab);
+    }
+
+    const onSignData = async () => {
+        try {
+            const signature = await preLoadedData.myAlgoWallet.tealSign(data || [], contractAddress, accountSelected);
+
+            setResponse(Buffer.from(signature).toString('base64'));
+        }
+        catch (err) {
+            console.error(err)
+            setResponse(JSON.stringify(err, null, 4));
+        }
+    }
+
+    return (
+        <div className="interactive-example">
+            <Nav tabs>
+                <NavItem>
+                    <NavLink
+                        className={activeTab === '1' ? "active active-tab" : ""}
+                        onClick={() => { toggle('1'); }}>
+                        Form
+                </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink
+                        className={activeTab === '2' ? "active active-tab" : ""}
+                        onClick={() => { toggle('2'); }}>
+                        Code
+            </NavLink>
+                </NavItem>
+            </Nav>
+            <TabContent activeTab={activeTab}>
+                <TabPane tabId="1">
+                    <Row className="mt-3">
+                        <Col xs="12" lg="6" className="mt-2">
+                            <AccountDropdown onSelectAccount={selectAccount} accounts={accounts} />
+                            <Address label="Contract Address" onChangeAddress={setContractAddress} />
+                            <Note label="Data" onChangeNote={setData} />
+                            <Button color="primary" block className="mt-2" onClick={onSignData}  disabled={accounts.length === 0}>
+                                Sign
+                            </Button>
+                        </Col>
+                        <Col xs="12" lg="6" className="mt-2 mt-xs-2">
+                            <Label className="tx-label">
+                                Response
+                        </Label>
+                            <div className="response-base txn-payment-response">
+                                <PrismCode
+                                    code={response}
+                                    language="js"
+                                    plugins={["response"]}
+                                />
+                            </div>
+                            <Button
+                                className="button-margin"
+                                color="primary"
+                                block
+                                disabled={!response}
+                                onClick={() => setResponse("")}>
+                                Clear Response
+                        </Button>
+                        </Col>
+                    </Row>
+                    {accounts.length === 0 &&
+                        <div className="error-connect mt-3"> In order to run this example, you need to execute connect() method. </div>
+                    }
+                </TabPane>
+                <TabPane tabId="2">
+                    <Row className="mt-3">
+                        <Col>
+                            <Label className="tx-label">
+                                Sign data for teal program
+                            </Label>
+                            <PrismCode
+                                code={tealSignCode}
+                                language="js"
+                            />
+                        </Col>
+                    </Row>
+                </TabPane>
+            </TabContent>
+        </div>
+    )
+}
+
+export default () => <PreLoadDataContextComponent><TealSignExample /></PreLoadDataContextComponent>;
\ No newline at end of file
diff --git a/src/components/commons/Note.tsx b/src/components/commons/Note.tsx
index 31f0426..9baefa0 100644
--- a/src/components/commons/Note.tsx
+++ b/src/components/commons/Note.tsx
@@ -4,6 +4,7 @@ import { FormGroup, Input, Label } from "reactstrap";
 interface NoteProps {
     disabled?: boolean;
     onChangeNote(note: Uint8Array): void;
+    label?: string
 }
 
 export default function Note(props: NoteProps): JSX.Element {
@@ -17,12 +18,12 @@ export default function Note(props: NoteProps): JSX.Element {
     return <Fragment>
         <FormGroup>
             <Label className="tx-label">
-                Note
+                {props.label || "Note"}
             </Label>
             <Input
                 className="tx-input note"
                 type="textarea"
-                placeholder="Note"
+                placeholder={props.label || "Note"}
                 value={note}
                 onChange={onChangeNote}
                 disabled={props.disabled}