diff --git a/src/App.vue b/src/App.vue
index 422aeea3..9392ce97 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,18 @@
 <template>
   <div id="app">
     <h1>Revue Flow</h1>
+    <Basic style="height: 75vh; background: #1a192b" />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi';
+import Basic from './Basic';
 
 export default defineComponent({
   name: 'App',
   components: {
+    Basic
   },
   data() {
     return {
diff --git a/src/main.ts b/src/main.ts
index cb3e946f..21dc9fe3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,8 +1,6 @@
 import { createApp } from 'vue-demi';
 import App from './App.vue';
-import { createPinia } from 'pinia';
 
 const app = createApp(App);
 app.config.performance = true;
-app.use(createPinia());
 app.mount('#app');
diff --git a/src/store/configure-store.ts b/src/store/configure-store.ts
index cdb0e7e8..cb91b3f7 100644
--- a/src/store/configure-store.ts
+++ b/src/store/configure-store.ts
@@ -1,28 +1,21 @@
-import { createPinia, defineStore, StoreDefinition } from 'pinia';
+import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia';
 import isEqual from 'fast-deep-equal';
 import { Edge, Node, NodeDiffUpdate, ReactFlowState, RevueFlowActionsTree, XYPosition } from '../types';
-import {
-  getConnectedEdges,
-  getNodesInside,
-  getRectOfNodes,
-  isEdge,
-  isNode,
-  parseEdge,
-  parseNode
-} from '../utils/graph';
+import { getConnectedEdges, getNodesInside, getRectOfNodes, isEdge, isNode, parseEdge, parseNode } from '../utils/graph';
 import { clampPosition, getDimensions } from '../utils';
 import { getHandleBounds } from '../components/Nodes/utils';
-import { provide } from 'vue-demi';
 
 type NextElements = {
   nextNodes: Node[];
   nextEdges: Edge[];
 };
 
+const pinia = createPinia();
+setActivePinia(pinia);
+
 export default function configureStore(
   preloadedState: ReactFlowState
 ): StoreDefinition<'revue-flow', ReactFlowState, any, RevueFlowActionsTree> {
-  provide(Symbol('pinia'), createPinia());
   return defineStore({
     id: 'revue-flow',
     state: () => preloadedState,
@@ -199,8 +192,8 @@ export default function configureStore(
         const selectedElementsChanged = !isEqual(nextSelectedElements, this.selectedElements);
         const selectedElementsUpdate = selectedElementsChanged
           ? {
-            selectedElements: nextSelectedElements.length > 0 ? nextSelectedElements : null
-          }
+              selectedElements: nextSelectedElements.length > 0 ? nextSelectedElements : null
+            }
           : {};
 
         this.userSelectionRect = nextUserSelectRect;