diff --git a/src/App.js b/src/App.js
index e24581a..4008728 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React from 'react'
 
 import './App.css'
+import { Canvas } from './components.js/Canvas'
 
 export const App = () => {
   return (
@@ -9,7 +10,7 @@ export const App = () => {
         <h1>Ebermergen</h1>
       </header>
       <main>
-        <canvas></canvas>
+        <Canvas />
       </main>
       <footer>Made by Alfred Melch</footer>
     </>
diff --git a/src/components.js/Canvas.js b/src/components.js/Canvas.js
new file mode 100644
index 0000000..c8ae297
--- /dev/null
+++ b/src/components.js/Canvas.js
@@ -0,0 +1,12 @@
+import React, { useLayoutEffect, useRef } from 'react'
+import { main } from '../lib'
+
+export const Canvas = () => {
+  const canvasRef = useRef(null)
+
+  useLayoutEffect(() => {
+    main(canvasRef.current)
+  })
+
+  return <canvas width={500} height={400} ref={canvasRef} />
+}
diff --git a/src/lib/index.js b/src/lib/index.js
new file mode 100644
index 0000000..436cb2a
--- /dev/null
+++ b/src/lib/index.js
@@ -0,0 +1,6 @@
+console.log('import entrypoint lib')
+
+export function main(canvas) {
+  console.log('entrypoint function')
+  console.log(canvas)
+}