diff --git a/graph.js b/graph.js
index f7db15f9d3335f5c6b759a511fec0615bce2f322..af00a39cb75fdf05437df185a7ab3419564235c5 100644
--- a/graph.js
+++ b/graph.js
@@ -14,16 +14,32 @@ const Graph = ForceGraph3D()
     .onNodeHover(nodeHover)
     .onLinkHover(linkHover);
 
-const sphereGeometry = new THREE.SphereGeometry(10000, 32, 32);
-//const planeGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
-const loader = new THREE.TextureLoader();
-//const planeMaterial = new THREE.MeshLambertMaterial({color: 0xFF0000, side: THREE.DoubleSide}); //THREE.BackSide
-const planeMaterial = new THREE.MeshBasicMaterial({map: loader.load(plugin_path + 'background.jpg'), side: THREE.DoubleSide}); //THREE.BackSide
-const mesh = new THREE.Mesh(sphereGeometry, planeMaterial);
-mesh.position.set(0, 0, 0);
-//mesh.rotation.set(0.5 * Math.PI, 0, 0);
+add_background()
+drawOverlay()
+
+function drawOverlay() {
+    const domNode = document.getElementById('3d-graph');
+    const sceneNode = domNode.firstChild.firstChild.firstChild
+    const overlayNode = document.createElement('div');
+    overlayNode.className = 'kg-overlay';
+    overlayNode.innerText = 'Hello there!';
+    //sceneNode.appendChild(overlayNode);
+    sceneNode.insertBefore(overlayNode, sceneNode.childNodes[2])
+}
+
 
-Graph.scene().add(mesh);
+function add_background() {
+    const sphereGeometry = new THREE.SphereGeometry(20000, 32, 32);
+    //const planeGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
+    const loader = new THREE.TextureLoader();
+    //const planeMaterial = new THREE.MeshLambertMaterial({color: 0xFF0000, side: THREE.DoubleSide}); //THREE.BackSide
+    const planeMaterial = new THREE.MeshBasicMaterial({map: loader.load(plugin_path + 'background.jpg'), side: THREE.DoubleSide}); //THREE.BackSide
+    const mesh = new THREE.Mesh(sphereGeometry, planeMaterial);
+    mesh.position.set(0, 0, 0);
+    //mesh.rotation.set(0.5 * Math.PI, 0, 0);
+
+    Graph.scene().add(mesh);
+}
 
 
 function updateLinks() {
@@ -58,6 +74,7 @@ function focusOnNode(node) {
     );
 }
 
+
 function nodeHover(node) {
 
     // no state change
@@ -79,6 +96,7 @@ function nodeHover(node) {
     updateHighlight();
 }
 
+
 function linkHover(link) {
     highlightNodes.clear();
     highlightLinks.clear();
@@ -92,6 +110,7 @@ function linkHover(link) {
     updateHighlight();
 }
 
+
 function updateHighlight() {
     // trigger update of highlighted objects in scene
     Graph
diff --git a/kg-style.css b/kg-style.css
new file mode 100644
index 0000000000000000000000000000000000000000..41ad255767f9561d35227a684499aadd9a75e091
--- /dev/null
+++ b/kg-style.css
@@ -0,0 +1,25 @@
+#3d-graph {
+    display: flex;
+}
+
+.kg-overlay {
+    position: absolute;
+    bottom: 5px;
+    pointer-events: none;
+    width: 100%;
+    text-align: center;
+    left: 0;
+    display: inline-block;
+    background-color: rgba(0,0,0,.6);
+    padding: 5px;
+}
+
+.renderer_label {
+    /*position: absolute;*/
+    bottom: 5px;
+    width: 100%;
+    /*color: white;*/
+    /*z-index: 10;*/
+    /*display: block;*/
+    text-align: center;
+}
\ No newline at end of file
diff --git a/knowledge-space.php b/knowledge-space.php
index 8fed53d7682482d15c38311f03785d8ebb4bb20f..9cd5f4747c9079bd7c5ee3b3ce6519760508b8ca 100644
--- a/knowledge-space.php
+++ b/knowledge-space.php
@@ -23,4 +23,10 @@ function ks_add_graph(): string
     return $graph . $three . $div . $variables . $script;
 }
 
+function kg_load_css() {
+    $plugin_dir = plugin_dir_url(__FILE__);
+    wp_enqueue_style('kg-style', $plugin_dir.'kg-style.css');
+}
+
+add_action('wp_enqueue_scripts', 'kg_load_css');
 add_shortcode('knowledge-space', 'ks_add_graph');