diff --git a/README.md b/README.md
index df60d0f..bd7f6a3 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-d#
+#
 
 <p align="center"> 
   <img src="./wordmap.png" width="30%" title="Wordmap Demo" alt="Wordmap Demo">
@@ -11,12 +11,12 @@ The Wordmap is a tool that enhances vocabulary learning through visual organizat
 # Install the package using yarn.
  
 ```
-yarn add 'wordmap@https://github.com/membean/wordmap.git#v0.0.6'
+yarn add 'wordmap@https://github.com/membean/wordmap.git#v0.0.7'
  ```
 # Install the package using npm
 
 ```
-npm install 'wordmap@https://github.com/membean/wordmap.git#v0.0.6'
+npm install 'wordmap@https://github.com/membean/wordmap.git#v0.0.7'
 ```
 
 >  Note: you must have access to Wordmap repository in order to install it as node package / module.
diff --git a/bundle/bundle.js b/bundle/bundle.js
index 2b2feb8..57f8626 100644
--- a/bundle/bundle.js
+++ b/bundle/bundle.js
@@ -89,14 +89,14 @@ class Graph {
       pos = jsonNode.p;
       defn = jsonNode.d;
       if (type === 'ss') {
-        node = new _synsetnode.default(id, defn, pos, this, this.stage, type, jsonNode.l);
+        node = new _synsetnode.default(id, defn, pos, this, this.stage, type, jsonNode.l, this.mode);
       } else {
         node = new _labelnode.default(id, this, this.mode, this.fetchCallback, this.wordmap, type);
       }
 
       // if jsonNode.l === 1 then the word is an antonym and we pass true to the link constructor so that the Link class
       // can create the link in red
-      link = jsonNode.l === 1 ? new _link.default(parentNode, node, true, this.stage) : new _link.default(parentNode, node, false, this.stage);
+      link = jsonNode.l === 1 ? new _link.default(parentNode, node, true, this.stage, this.mode) : new _link.default(parentNode, node, false, this.stage, this.mode);
       this.nodes.push(node);
       this.links.push(link);
       if (jsonNode.children) {
@@ -705,12 +705,14 @@ class Link extends createjs.Container {
    * @param {Object} n2 - The Node to be linked TO
    * @param {Boolean} isAntonym - is the Link for an Antonym (These links are a different color from the others)
    * @param {Object} stage - A reference to the Stage object that Nodes are drawn to
+   * @param {String} mode - used to determine the constellaton mode, defaults to 'word' which is used for WordPage
    */
-  constructor(n1, n2, isAntonym, stage) {
+  constructor(n1, n2, isAntonym, stage, mode) {
     super();
     this.n1 = n1;
     this.n2 = n2;
     this._stage = stage;
+    this.mode = mode;
     this.hoverable = n1.type === 'ss' && n2.type === 'ss';
     this.isAntonym = isAntonym;
     this.initialize();
@@ -773,12 +775,15 @@ class Link extends createjs.Container {
   // Sets up the rollover/rollout event handlers by binding them to the current links scope so that 'this' references
   // the current Link object in the event handlers
   _setupHandler() {
-    this.line.cursor = 'hand';
-    // necessary so the event handlers have access to the class context
-    this._handleRollout = this._handleRollout.bind(this);
-    this._handleRollover = this._handleRollover.bind(this);
-    this.line.addEventListener('rollover', this._handleRollover);
-    this.line.addEventListener('rollout', this._handleRollout);
+    // incase of word mode only handler will be applicable.
+    if (this.mode === 'word') {
+      this.line.cursor = 'hand';
+      // necessary so the event handlers have access to the class context
+      this._handleRollout = this._handleRollout.bind(this);
+      this._handleRollover = this._handleRollover.bind(this);
+      this.line.addEventListener('rollover', this._handleRollover);
+      this.line.addEventListener('rollout', this._handleRollout);
+    }
   }
   _handleRollover() {
     this.line.graphics.clear();
@@ -1027,8 +1032,9 @@ class SynsetNode extends _node.default {
    * @param {Object} graph - the Graph instance that the RootNode is being added to
    * @param {Object} stage - A reference to the Stage object that Nodes are drawn on
    * @param {String} type - either 'label' or 'ss' (synset) to signify what type of node this is
+   * @param {String} mode - used to determine the constellaton mode, defaults to 'word' which is used for WordPage
    */
-  constructor(id, defn, partOfSpeech, graph, stage, type, l) {
+  constructor(id, defn, partOfSpeech, graph, stage, type, l, mode) {
     super(id, type, graph);
     this.l = l;
     this.defn = defn;
@@ -1036,6 +1042,7 @@ class SynsetNode extends _node.default {
     this.bubbleRadius = 5;
     this.color = this._color();
     this.graph = graph;
+    this.mode = mode;
     this._stage = stage;
     this._buildBubble();
     this._setupHandlers();
@@ -1066,13 +1073,14 @@ class SynsetNode extends _node.default {
   // Sets up the Node event handlers by binding them to the current SynsetNode scope. We do this so that 'this' references
   // the target SynsetNode during events
   _setupHandlers() {
-    this.b.cursor = 'pointer';
-
-    // necessary so the event handlers have access to the class context
-    this._handleRollout = this._handleRollout.bind(this);
-    this._handleRollover = this._handleRollover.bind(this);
-    this.b.addEventListener('rollover', this._handleRollover);
-    return this.b.addEventListener('rollout', this._handleRollout);
+    if (this.mode === 'word') {
+      this.b.cursor = 'pointer';
+      // necessary so the event handlers have access to the class context
+      this._handleRollout = this._handleRollout.bind(this);
+      this._handleRollover = this._handleRollover.bind(this);
+      this.b.addEventListener('rollover', this._handleRollover);
+      return this.b.addEventListener('rollout', this._handleRollout);
+    }
   }
 
   /**
diff --git a/examples/react-wordmap-demo/package.json b/examples/react-wordmap-demo/package.json
index aa09ce0..a749c4c 100644
--- a/examples/react-wordmap-demo/package.json
+++ b/examples/react-wordmap-demo/package.json
@@ -11,7 +11,7 @@
     "react-scripts": "5.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "web-vitals": "^2.1.0",
-    "wordmap": "https://github.com/membean/wordmap.git#v0.0.4"
+    "wordmap": "https://github.com/membean/wordmap.git#v0.0.7"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/examples/react-wordmap-demo/src/App.js b/examples/react-wordmap-demo/src/App.js
index 8916101..7627618 100644
--- a/examples/react-wordmap-demo/src/App.js
+++ b/examples/react-wordmap-demo/src/App.js
@@ -12,14 +12,14 @@ function App() {
       <header className="App-header">
         <h2>Wordmap</h2>
         <div>
-          <button onClick={() => setIsQuestion(!isQuestion)}>Word Constellation</button>
-          <button onClick={() => setIsQuestion(!isQuestion)}>Question Constellation</button>
+          <button onClick={() => setIsQuestion(false)}>Word Constellation</button>
+          <button onClick={() => setIsQuestion(true)}>Question Constellation</button>
         </div>
       </header>
       <div>
         <div>
           <section>
-            {isQuestion ?
+            {!isQuestion ?
               <WordConstellation /> : <QuestionConstellation />
             }
           </section>
diff --git a/package.json b/package.json
index 6664259..68a9b33 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "bundle": "browserify ./src/index.js -p esmify > ./bundle/bundle.js"
+    "bundle": "browserify ./src/index.js -p esmify > ./bundle/bundle.js",
+    "types": "tsc --project tsconfig.json"
   },
   "dependencies": {
     "browserify": "^17.0.0",
diff --git a/src/graph.js b/src/graph.js
index 226c59b..99ffa72 100644
--- a/src/graph.js
+++ b/src/graph.js
@@ -92,7 +92,8 @@ export default class Graph {
           this,
           this.stage,
           type,
-          jsonNode.l
+          jsonNode.l,
+          this.mode
         );
       } else {
         node = new LabelNode(
@@ -109,8 +110,8 @@ export default class Graph {
       // can create the link in red
       link =
         jsonNode.l === 1
-          ? new Link(parentNode, node, true, this.stage)
-          : new Link(parentNode, node, false, this.stage);
+          ? new Link(parentNode, node, true, this.stage, this.mode)
+          : new Link(parentNode, node, false, this.stage, this.mode);
       this.nodes.push(node);
       this.links.push(link);
       if (jsonNode.children) {
diff --git a/src/link.js b/src/link.js
index 342d63c..a710221 100644
--- a/src/link.js
+++ b/src/link.js
@@ -57,12 +57,14 @@ export default class Link extends createjs.Container {
    * @param {Object} n2 - The Node to be linked TO
    * @param {Boolean} isAntonym - is the Link for an Antonym (These links are a different color from the others)
    * @param {Object} stage - A reference to the Stage object that Nodes are drawn to
+   * @param {String} mode - used to determine the constellaton mode, defaults to 'word' which is used for WordPage
    */
-  constructor(n1, n2, isAntonym, stage) {
+  constructor(n1, n2, isAntonym, stage, mode) {
     super();
     this.n1 = n1;
     this.n2 = n2;
     this._stage = stage;
+    this.mode = mode;
     this.hoverable = n1.type === 'ss' && n2.type === 'ss';
     this.isAntonym = isAntonym;
     this.initialize();
@@ -124,13 +126,16 @@ export default class Link extends createjs.Container {
   // Sets up the rollover/rollout event handlers by binding them to the current links scope so that 'this' references
   // the current Link object in the event handlers
   _setupHandler() {
-    this.line.cursor = 'hand';
-    // necessary so the event handlers have access to the class context
-    this._handleRollout = this._handleRollout.bind(this);
-    this._handleRollover = this._handleRollover.bind(this);
+    // incase of word mode only handler will be applicable.
+    if (this.mode === 'word') {
+      this.line.cursor = 'hand';
+      // necessary so the event handlers have access to the class context
+      this._handleRollout = this._handleRollout.bind(this);
+      this._handleRollover = this._handleRollover.bind(this);
 
-    this.line.addEventListener('rollover', this._handleRollover);
-    this.line.addEventListener('rollout', this._handleRollout);
+      this.line.addEventListener('rollover', this._handleRollover);
+      this.line.addEventListener('rollout', this._handleRollout); 
+    }
   }
 
   _handleRollover() {
diff --git a/src/synsetnode.js b/src/synsetnode.js
index 5ec3250..5f29566 100644
--- a/src/synsetnode.js
+++ b/src/synsetnode.js
@@ -14,8 +14,9 @@ export default class SynsetNode extends Node {
    * @param {Object} graph - the Graph instance that the RootNode is being added to
    * @param {Object} stage - A reference to the Stage object that Nodes are drawn on
    * @param {String} type - either 'label' or 'ss' (synset) to signify what type of node this is
+   * @param {String} mode - used to determine the constellaton mode, defaults to 'word' which is used for WordPage
    */
-  constructor(id, defn, partOfSpeech, graph, stage, type, l) {
+  constructor(id, defn, partOfSpeech, graph, stage, type, l, mode) {
     super(id, type, graph);
     this.l = l;
     this.defn = defn;
@@ -23,6 +24,7 @@ export default class SynsetNode extends Node {
     this.bubbleRadius = 5;
     this.color = this._color();
     this.graph = graph;
+    this.mode = mode;
     this._stage = stage;
     this._buildBubble();
     this._setupHandlers();
@@ -30,7 +32,7 @@ export default class SynsetNode extends Node {
 
   // returns the distance from the center of the graph
   distance_from_center() {
-    return this.graph.ringRadius[this.level];
+    return this.graph.ringRadius[ this.level ];
   }
 
   // sets up the animation of the SynsetNode
@@ -58,14 +60,15 @@ export default class SynsetNode extends Node {
   // Sets up the Node event handlers by binding them to the current SynsetNode scope. We do this so that 'this' references
   // the target SynsetNode during events
   _setupHandlers() {
-    this.b.cursor = 'pointer';
+    if (this.mode === 'word') {
+      this.b.cursor = 'pointer';
+      // necessary so the event handlers have access to the class context
+      this._handleRollout = this._handleRollout.bind(this);
+      this._handleRollover = this._handleRollover.bind(this);
 
-    // necessary so the event handlers have access to the class context
-    this._handleRollout = this._handleRollout.bind(this);
-    this._handleRollover = this._handleRollover.bind(this);
-
-    this.b.addEventListener('rollover', this._handleRollover);
-    return this.b.addEventListener('rollout', this._handleRollout);
+      this.b.addEventListener('rollover', this._handleRollover);
+      return this.b.addEventListener('rollout', this._handleRollout);
+    }
   }
 
   /**
diff --git a/tsconfig.json b/tsconfig.json
index 7301270..da24757 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
-    "allowJs": true
+    "allowJs": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "types"
   },
+  "include": ["src/**/*"]
 }
diff --git a/types/index.d.ts b/types/index.d.ts
index 737a598..ea0e3df 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -15,6 +15,7 @@ export default class Wordmap {
      *    [Required] - In case of Interactive mode of constellation like forward backword mode.
      * @param {Function} fetchCallback - The callback method to fetch data for constellation, callback trigger when click on label.  which accepts 2 args like word & callback with data to renrender graph.
      *    [Required] - In case of Interactive mode of constellation like forward backword mode.
+     *    Default will be empty function.
      * @param {Object} props [Optional] - The Constellation component props
      *    Default value is {}
      */
diff --git a/types/link.d.ts b/types/link.d.ts
index cdffa61..cc0bdd4 100644
--- a/types/link.d.ts
+++ b/types/link.d.ts
@@ -6,11 +6,13 @@ export default class Link {
      * @param {Object} n2 - The Node to be linked TO
      * @param {Boolean} isAntonym - is the Link for an Antonym (These links are a different color from the others)
      * @param {Object} stage - A reference to the Stage object that Nodes are drawn to
+     * @param {String} mode - used to determine the constellaton mode, defaults to 'word' which is used for WordPage
      */
-    constructor(n1: any, n2: any, isAntonym: boolean, stage: any);
+    constructor(n1: any, n2: any, isAntonym: boolean, stage: any, mode: string);
     n1: any;
     n2: any;
     _stage: any;
+    mode: string;
     hoverable: boolean;
     isAntonym: boolean;
     line: any;
diff --git a/types/synsetnode.d.ts b/types/synsetnode.d.ts
index 99be7e6..88ffabb 100644
--- a/types/synsetnode.d.ts
+++ b/types/synsetnode.d.ts
@@ -10,13 +10,15 @@ export default class SynsetNode extends Node {
      * @param {Object} graph - the Graph instance that the RootNode is being added to
      * @param {Object} stage - A reference to the Stage object that Nodes are drawn on
      * @param {String} type - either 'label' or 'ss' (synset) to signify what type of node this is
+     * @param {String} mode - used to determine the constellaton mode, defaults to 'word' which is used for WordPage
      */
-    constructor(id: string, defn: string, partOfSpeech: string, graph: any, stage: any, type: string, l: any);
+    constructor(id: string, defn: string, partOfSpeech: string, graph: any, stage: any, type: string, l: any, mode: string);
     l: any;
     defn: string;
     partOfSpeech: string;
     bubbleRadius: number;
     color: string;
+    mode: string;
     _stage: any;
     distance_from_center(): any;
     setupAnimation(): any;