diff --git a/packages/app/src/components/EmbbededMediaPlayer/index.jsx b/packages/app/src/components/EmbbededMediaPlayer/index.jsx
new file mode 100644
index 00000000..3b5bcbe5
--- /dev/null
+++ b/packages/app/src/components/EmbbededMediaPlayer/index.jsx
@@ -0,0 +1,14 @@
+import React from "react"
+
+import "./index.less"
+
+export default (props) => {
+    return <div className="embbededMediaPlayer">
+        <div className="controls">
+            
+        </div>
+        <h1>
+            Media player
+        </h1>
+    </div>
+}
\ No newline at end of file
diff --git a/packages/app/src/components/EmbbededMediaPlayer/index.less b/packages/app/src/components/EmbbededMediaPlayer/index.less
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/app/src/components/index.js b/packages/app/src/components/index.js
index 6c57591b..8dadbe29 100644
--- a/packages/app/src/components/index.js
+++ b/packages/app/src/components/index.js
@@ -25,6 +25,7 @@ export { default as ImageViewer } from "./ImageViewer"
 export { default as Login } from "./Login"
 export { default as Image } from "./Image"
 export { default as LoadMore } from "./LoadMore"
+export { default as EmbbededMediaPlayer } from "./EmbbededMediaPlayer"
 
 // BUTTONS
 export { default as LikeButton } from "./LikeButton"
diff --git a/packages/app/src/cores/index.js b/packages/app/src/cores/index.js
index da53d49b..a3d4a9e2 100644
--- a/packages/app/src/cores/index.js
+++ b/packages/app/src/cores/index.js
@@ -7,6 +7,8 @@ import NotificationsCore from "./notifications"
 import ShortcutsCore from "./shortcuts"
 import SoundCore from "./sound"
 
+import mediaPlayer from "./mediaPlayer"
+
 // DEFINE LOAD ORDER HERE
 export default [
     SettingsCore,
@@ -16,4 +18,6 @@ export default [
     SoundCore,
     NotificationsCore,
     ShortcutsCore,
+    
+    mediaPlayer,
 ]
\ No newline at end of file
diff --git a/packages/app/src/cores/mediaPlayer/index.jsx b/packages/app/src/cores/mediaPlayer/index.jsx
new file mode 100644
index 00000000..4c863d6e
--- /dev/null
+++ b/packages/app/src/cores/mediaPlayer/index.jsx
@@ -0,0 +1,40 @@
+import React from "react"
+import ReactDOM from "react-dom"
+import Core from "evite/src/core"
+
+import { EmbbededMediaPlayer } from "components"
+
+import { DOMWindow } from "components/RenderWindow"
+
+import "./index.less"
+
+const EmbbededMediaPlayerWrapper = (props) => {
+    return <div className="embbededMediaPlayerWrapper">
+        {props.children}
+    </div>
+}
+
+export default class MediaPlayerCore extends Core {
+    constructor(props) {
+        super(props)
+
+    }
+    currentDomWindow = null
+
+    publicMethods = {
+        MediaPlayerCore: this,
+    }
+
+    attachEmbbededMediaPlayer() {
+        if (this.currentDomWindow) {
+            console.warn("EmbbededMediaPlayer already attached")
+            return false
+        }
+
+        this.currentDomWindow = new DOMWindow({
+            id: "mediaPlayer"
+        })
+
+        this.currentDomWindow.render(<EmbbededMediaPlayerWrapper><EmbbededMediaPlayer /></EmbbededMediaPlayerWrapper>)
+    }
+}
\ No newline at end of file
diff --git a/packages/app/src/cores/mediaPlayer/index.less b/packages/app/src/cores/mediaPlayer/index.less
new file mode 100644
index 00000000..81e45c33
--- /dev/null
+++ b/packages/app/src/cores/mediaPlayer/index.less
@@ -0,0 +1,37 @@
+.embbededMediaPlayerWrapper {
+    position: absolute;
+
+    width: fit-content;
+    height: 80px;
+
+    padding: 10px;
+
+    z-index: 300;
+
+    border-radius: 8px;
+
+    background-color: var(--background-color-accent);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    // positionate to bottom right
+    right: 0;
+    bottom: 0;
+
+    margin: 10px;
+
+    // animate in from bottom to top
+    animation: fadeIn 150ms ease-out forwards;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
\ No newline at end of file