diff --git a/README.md b/README.md
index 0c30dc7..89fdd97 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,24 @@ const sources = [
 </style>
 ```
 
+## Nuxt Integration
+The library is easy to implement in any Nuxt project.
+Remember to wrap it on the ```<ClientOnly>``` component.
+
+```js
+<script setup>
+import { VuePlayer } from '@display-studio/vue-player'
+</script>
+
+<template>
+    <ClientOnly>
+        <VuePlayer class="vue-player" :sources="sources" poster="..." @play="...">
+            // Your custom controls here
+        </VuePlayer>
+    </ClientOnly>
+</template>
+```
+
 ## Custom Controls
 
 You can disable the native video tag controls and use your own custom ones.
@@ -82,16 +100,16 @@ import { VuePlayer } from '@display-studio/vue-player'
 ```js
 <script setup>
 import { useVuePlayer } from '@display-studio/vue-player'
-const player = useVuePlayer()
+const { playing, togglePlay, toggleMute, videoMuted } = useVuePlayer()
 </script>
 
 <template>
   <div class="vue-player__controls">
-    <button @click="player.togglePlay()" class="vue-player__controls-toggleplay">
-      {{ player.playing ? "pause" : "play" }}
+    <button @click="togglePlay()" class="vue-player__controls-toggleplay">
+      {{ playing ? "pause" : "play" }}
     </button>
-    <button @click="player.toggleMute()" class="vue-player__controls-togglemute">
-      {{ player.videoMuted ? "unmute" : "mute" }}
+    <button @click="toggleMute()" class="vue-player__controls-togglemute">
+      {{ videoMuted ? "unmute" : "mute" }}
     </button>
   </div>
 </template>
@@ -129,15 +147,15 @@ const player = useVuePlayer()
 ```js
 <script setup lang="ts">
 import { useVuePlayer } from '@display-studio/vue-player'
-const player = useVuePlayer()
+const { convertTimeToDuration, time, duration } = useVuePlayer()
 </script>
 
 <template>
     <div class="vue-player__timestamp">
         <div class="vue-player__timestamp-inner">
-            <p class="vue-player__current-time">{{ player.convertTimeToDuration(player.time) }}</p>
+            <p class="vue-player__current-time">{{ convertTimeToDuration(time) }}</p>
             <p class="vue-player__separator">/</p>
-            <p class="vue-player__duration">{{ player.convertTimeToDuration(player.duration) }}</p>
+            <p class="vue-player__duration">{{ convertTimeToDuration(duration) }}</p>
         </div>
     </div>
 </template>
@@ -187,13 +205,13 @@ const player = useVuePlayer()
 ```js
 <script setup lang="ts">
 import { useVuePlayer } from '@display-studio/vue-player'
-const player = useVuePlayer()
+const { percentagePlayed, seekToPercentage } = useVuePlayer()
 </script>
 
 <template>
     <div class="vue-player__video-track">
-        <input type="range" min="0" max="100" step="1" :value="player.percentagePlayed.toFixed(1)"
-            @input="(e) => player.seekToPercentage(e.target.value)" />
+        <input type="range" min="0" max="100" step="1" :value="percentagePlayed.toFixed(1)"
+            @input="(e) => seekToPercentage(e.target.value)" />
     </div>
 </template>
 
@@ -313,4 +331,4 @@ See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events
 <template>
     <VuePlayer @play="myCustomFunction"></VuePlayer>
 </template>
-```
+```
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index 251d5d8..8afeae3 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 189861d..8b50e98 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@display-studio/vue-player",
   "description": "Lightweight, customizable, and easy-to-implement vue video player.",
   "author": "display-studio (https://www.display.design/)",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "homepage": "https://github.com/display-design-studio/vue-player",
   "keywords": [
     "vue",
@@ -25,17 +25,17 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc && vite build",
+    "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
     "publish": "bun run build && npm publish"
   },
   "dependencies": {
-    "vue": "^3.3.11"
+    "vue": "^3.4.35"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.5.2",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.8",
-    "vue-tsc": "^1.8.25"
+    "@vitejs/plugin-vue": "^5.1.2",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.5",
+    "vue-tsc": "latest"
   }
-}
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 582f891..dd1b9f4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,7 +20,6 @@ const sources = [
 
 <template>
   <main class="app">
-    <h1 class="title">display vue-player</h1>
     <div class="container">
       <VuePlayer class="vue-player" :sources="sources"
         poster="https://demo-res.cloudinary.com/video/upload/q_auto,f_auto,w_500/dog.jpg" :muted="true"
@@ -54,10 +53,14 @@ const sources = [
 }
 
 .container {
-  width: 60%;
+  width: 90%;
   margin: 100px auto;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 18px;
+
+  @media (min-width:1024px) {
+    width: 50%;
+  }
 }
 
 .vue-player {
diff --git a/src/components/VuePlayer.vue b/src/components/VuePlayer.vue
index cbebc61..176d7a6 100644
--- a/src/components/VuePlayer.vue
+++ b/src/components/VuePlayer.vue
@@ -1,18 +1,6 @@
 <script setup>
-import { ref, onMounted, provide, reactive } from 'vue'
-
-const EVENTS = [
-    "play",
-    "pause",
-    "ended",
-    "loadeddata",
-    "waiting",
-    "playing",
-    "timeupdate",
-    "canplay",
-    "canplaythrough",
-    "statechanged",
-];
+import { ref, onMounted, provide } from 'vue'
+import { usePlayer } from '../composables/usePlayer.js'
 
 const props = defineProps({
     controls: { type: Boolean, required: false, default: false },
@@ -27,6 +15,26 @@ const props = defineProps({
     togglePlayOnClick: { type: Boolean, required: false, default: false }
 })
 
+const playerRef = ref(null)
+
+const {
+    events,
+    playing,
+    videoMuted,
+    duration,
+    percentagePlayed,
+    time,
+    play,
+    pause,
+    togglePlay,
+    toggleMute,
+    seekToPercentage,
+    convertTimeToDuration,
+    openFullScreen,
+    togglePictureInPicture,
+    bindEvents
+} = usePlayer(playerRef, props)
+
 const emit = defineEmits([
     "play",
     "pause",
@@ -37,118 +45,28 @@ const emit = defineEmits([
     "timeupdate",
     "canplay",
     "canplaythrough",
-    "statechanged",
+    "statechanged"
 ])
 
-const playerRef = ref(null)
-const playing = ref(false);
-const duration = ref(0);
-const percentagePlayed = ref(0);
-const videoMuted = ref(props.muted)
-const time = ref(0);
-
-const bindEvents = () => {
-    EVENTS.forEach((customEvent) => {
-        playerRef.value.addEventListener(customEvent, (event) => {
-
-            if (customEvent == "canplay") {
-                duration.value = playerRef.value.duration
-            }
-
-            if (customEvent == "timeupdate") {
-                percentagePlayed.value =
-                    (playerRef.value.currentTime / playerRef.value.duration) * 100;
-                time.value = playerRef.value.currentTime;
-            }
-
-            emit(customEvent, { event })
-        }, true)
-
-    });
-}
-
-const play = () => {
-    playerRef.value.play()
-    setPlaying(true)
-}
-
-const pause = () => {
-    playerRef.value.pause()
-    setPlaying(false)
-}
-
-const togglePlay = () => {
-    if (playing.value) {
-        pause()
-    } else {
-        play()
-    }
-}
-
-const setPlaying = (state) => {
-    playing.value = state
-}
-
-const seekToPercentage = (percentage) => {
-    playerRef.value.currentTime = (percentage / 100) * duration.value;
-}
-
-const toggleMute = () => {
-    if (videoMuted.value) {
-        setMuted(false)
-    } else {
-        setMuted(true)
-    }
-}
-
-const setMuted = (state) => {
-    playerRef.value.muted = state
-    videoMuted.value = state
-}
-
-const convertTimeToDuration = (seconds) => {
-    return [Math.floor((seconds / 60) % 60), Math.floor(seconds % 60)]
-        .map(num => num.toString().padStart(2, "0"))
-        .join(":");
-}
-
-const openFullScreen = () => {
-    if (playerRef.value.requestFullscreen) {
-        playerRef.value.requestFullscreen();
-    } else if (playerRef.value.webkitRequestFullscreen) {
-        playerRef.value.webkitRequestFullscreen();
-    } else if (playerRef.value.msRequestFullscreen) {
-        playerRef.value.msRequestFullscreen();
-    }
-}
-
-const togglePictureInPicture = () => {
-    if (document.pictureInPictureElement) {
-        document.exitPictureInPicture();
-    } else if (document.pictureInPictureEnabled) {
-        playerRef.value.requestPictureInPicture();
-    }
-}
-
 onMounted(() => {
-    bindEvents()
+    bindEvents(events, emit)
 })
 
-const injectedReactive = reactive({
-    togglePlay,
+provide('vue-player', {
     playing,
-    toggleMute,
     videoMuted,
-    time,
     duration,
-    convertTimeToDuration,
     percentagePlayed,
+    time,
+    play,
+    pause,
+    togglePlay,
+    toggleMute,
     seekToPercentage,
+    convertTimeToDuration,
     openFullScreen,
-    togglePictureInPicture
+    togglePictureInPicture,
 })
-
-provide('vue-player', injectedReactive)
 </script>
 
 <template>
diff --git a/src/components/custom/MyPlayerDuration.vue b/src/components/custom/MyPlayerDuration.vue
index ec45438..0b3b526 100644
--- a/src/components/custom/MyPlayerDuration.vue
+++ b/src/components/custom/MyPlayerDuration.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { useVuePlayer } from '../../utils/context'
-const player = useVuePlayer()
+const { convertTimeToDuration, time, duration } = useVuePlayer()
 </script>
 
 <template>
     <div class="vue-player__timestamp">
         <div class="vue-player__timestamp-inner">
-            <p class="vue-player__current-time">{{ player.convertTimeToDuration(player.time) }}</p>
+            <p class="vue-player__current-time">{{ convertTimeToDuration(time) }}</p>
             <p class="vue-player__separator">/</p>
-            <p class="vue-player__duration">{{ player.convertTimeToDuration(player.duration) }}</p>
+            <p class="vue-player__duration">{{ convertTimeToDuration(duration) }}</p>
         </div>
     </div>
 </template>
@@ -18,7 +18,7 @@ const player = useVuePlayer()
     flex: 2;
     text-align: center;
     position: absolute;
-    bottom: 0px;
+    top: 0px;
     left: 0px;
     padding: 10px;
 }
diff --git a/src/components/custom/MyPlayerTrack.vue b/src/components/custom/MyPlayerTrack.vue
index 473101e..81cdf12 100644
--- a/src/components/custom/MyPlayerTrack.vue
+++ b/src/components/custom/MyPlayerTrack.vue
@@ -1,12 +1,12 @@
 <script setup>
 import { useVuePlayer } from '../../utils/context'
-const player = useVuePlayer()
+const { percentagePlayed, seekToPercentage } = useVuePlayer()
 </script>
 
 <template>
     <div class="vue-player__video-track">
-        <input type="range" min="0" max="100" step="1" :value="player.percentagePlayed.toFixed(1)"
-            @input="(e) => player.seekToPercentage(e.target.value)" />
+        <input type="range" min="0" max="100" step="1" :value="percentagePlayed.toFixed(1)"
+            @input="(e) => seekToPercentage(e.target.value)" />
     </div>
 </template>
 
@@ -15,9 +15,8 @@ const player = useVuePlayer()
     padding: 0 0 10px;
     position: absolute;
     bottom: 0px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 50%;
+    left: 10px;
+    width: 70%;
     height: 25px;
     display: flex;
     align-items: center;
diff --git a/src/components/custom/MySvgControls.vue b/src/components/custom/MySvgControls.vue
index 5fe8c13..9acb456 100644
--- a/src/components/custom/MySvgControls.vue
+++ b/src/components/custom/MySvgControls.vue
@@ -4,17 +4,17 @@ import Mute from './Mute.vue'
 import Unmute from './Unmute.vue'
 import Play from './Play.vue'
 import Pause from './Pause.vue'
-const player = useVuePlayer()
+const { playing, togglePlay, toggleMute, videoMuted } = useVuePlayer()
 </script>
 
 <template>
   <div class="vue-player__controls">
-    <button @click="player.togglePlay()" class="vue-player__controls-toggleplay">
-      <Pause v-if="player.playing" />
+    <button @click="togglePlay()" class="vue-player__controls-toggleplay">
+      <Pause v-if="playing" />
       <Play v-else />
     </button>
-    <button @click="player.toggleMute()" class="vue-player__controls-togglemute">
-      <Mute v-if="player.videoMuted" />
+    <button @click="toggleMute()" class="vue-player__controls-togglemute">
+      <Mute v-if="videoMuted" />
       <Unmute v-else />
     </button>
   </div>
diff --git a/src/composables/usePlayer.js b/src/composables/usePlayer.js
new file mode 100644
index 0000000..62677b6
--- /dev/null
+++ b/src/composables/usePlayer.js
@@ -0,0 +1,115 @@
+import { reactive, toRefs } from 'vue'
+
+export function usePlayer(playerRef, props) {
+    const player = reactive({
+        playing: false,
+        duration: 0,
+        percentagePlayed: 0,
+        videoMuted: props.muted,
+        time: 0
+    })
+
+    const events = [
+        "play",
+        "pause",
+        "ended",
+        "loadeddata",
+        "waiting",
+        "playing",
+        "timeupdate",
+        "canplay",
+        "canplaythrough",
+        "statechanged",
+    ];
+
+    const play = () => {
+        playerRef.value.play()
+        player.playing = true
+    }
+
+    const pause = () => {
+        playerRef.value.pause()
+        player.playing = false
+    }
+
+    const togglePlay = () => {
+        if (player.playing) {
+            pause()
+        } else {
+            play()
+        }
+    }
+
+    const toggleMute = () => {
+        if (player.videoMuted) {
+            setMuted(false)
+        } else {
+            setMuted(true)
+        }
+    }
+
+    const setMuted = (state) => {
+        playerRef.value.muted = state
+        player.videoMuted = state
+    }
+
+    const seekToPercentage = (percentage) => {
+        playerRef.value.currentTime = (percentage / 100) * player.duration;
+    }
+
+    const convertTimeToDuration = (seconds) => {
+        return [Math.floor((seconds / 60) % 60), Math.floor(seconds % 60)]
+            .map(num => num.toString().padStart(2, "0"))
+            .join(":");
+    }
+
+    const openFullScreen = () => {
+        if (playerRef.value.requestFullscreen) {
+            playerRef.value.requestFullscreen();
+        } else if (playerRef.value.webkitRequestFullscreen) {
+            playerRef.value.webkitRequestFullscreen();
+        } else if (playerRef.value.msRequestFullscreen) {
+            playerRef.value.msRequestFullscreen();
+        }
+    }
+
+    const togglePictureInPicture = () => {
+        if (document.pictureInPictureElement) {
+            document.exitPictureInPicture();
+        } else if (document.pictureInPictureEnabled) {
+            playerRef.value.requestPictureInPicture();
+        }
+    }
+
+    const bindEvents = (events, emit) => {
+        events.forEach((customEvent) => {
+            playerRef.value.addEventListener(customEvent, (event) => {
+                switch (customEvent) {
+                    case "canplay":
+                        player.duration = playerRef.value.duration
+                        break;
+                    case "timeupdate":
+                        player.percentagePlayed = (playerRef.value.currentTime / playerRef.value.duration) * 100;
+                        player.time = playerRef.value.currentTime;
+                        break;
+                }
+                emit(customEvent, { event })
+            }, true)
+
+        });
+    }
+
+    return {
+        ...toRefs(player),
+        events,
+        play,
+        pause,
+        togglePlay,
+        toggleMute,
+        seekToPercentage,
+        convertTimeToDuration,
+        openFullScreen,
+        togglePictureInPicture,
+        bindEvents,
+    }
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 01433bc..1d4acd7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,3 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-
 createApp(App).mount('#app')
diff --git a/src/utils/context.js b/src/utils/context.js
index 4bdc456..f2e4266 100644
--- a/src/utils/context.js
+++ b/src/utils/context.js
@@ -1,2 +1,2 @@
-import { inject } from 'vue'
+import { inject } from 'vue';
 export const useVuePlayer = () => inject('vue-player')