diff --git a/packages/resize-rotate-node/example/App.vue b/packages/resize-rotate-node/example/App.vue
index f2118f14..e2609399 100644
--- a/packages/resize-rotate-node/example/App.vue
+++ b/packages/resize-rotate-node/example/App.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { Connection, Edge, Elements, FlowInstance } from '@braks/vue-flow'
 import { Background, Controls, MiniMap, VueFlow, addEdge } from '@braks/vue-flow'
+import { ResizeRotateNode } from '../src'
 import initialElements from './elements'
-import { ResizeRotateNode } from '~/index'
 
 const elements = ref<Elements>(initialElements)
 const rfInstance = ref<FlowInstance | null>(null)
@@ -39,5 +39,6 @@ body,
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-transform: uppercase;
+  color: white;
 }
 </style>
diff --git a/packages/resize-rotate-node/example/elements.ts b/packages/resize-rotate-node/example/elements.ts
index f9f05531..ea5060eb 100644
--- a/packages/resize-rotate-node/example/elements.ts
+++ b/packages/resize-rotate-node/example/elements.ts
@@ -8,9 +8,41 @@ export default [
     id: '1',
     label: 'Node 1',
     type: 'resize-rotate',
+    targetPosition: 'left',
+    sourcePosition: 'right',
     position: {
-      x: 430,
+      x: 0,
       y: 0,
     },
+    data: {
+      style: {
+        background: 'rgb(255, 0, 114) none repeat scroll 0% 0%',
+        padding: '20px',
+        borderRadius: '20px',
+      },
+    },
+  },
+  {
+    id: '2',
+    label: 'Node 2',
+    type: 'resize-rotate',
+    targetPosition: 'left',
+    position: {
+      x: 330,
+      y: 50,
+    },
+    data: {
+      style: {
+        background: 'rgb(50, 188, 188) none repeat scroll 0% 0%',
+        padding: '20px',
+        borderRadius: '20px',
+      },
+    },
+  },
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    type: 'smoothstep',
   },
 ] as Elements