diff --git a/WebSocketClient/UVLPlayground/index.html b/WebSocketClient/UVLPlayground/index.html
index 03fbbdb..b1fadeb 100644
--- a/WebSocketClient/UVLPlayground/index.html
+++ b/WebSocketClient/UVLPlayground/index.html
@@ -4,11 +4,18 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + TS</title>
+    <link rel="stylesheet" href="style.css">
+    <title>UVL Playground</title>
   </head>
   <body>
-    <h2>Monaco Language Client UVL Example</h2>
-    <div id="container" style="width:100%;height:700px;border:1px solid grey"></div>
+    <div class="container">
+      <h1>Monaco Language Client UVL Example</h1>
+        <div id="container" class="editor"></div>
+        <p>The Universal Variability Language (UVL) is a community effort towards a widely adopted textual specification for feature models. This playground provides the opportunity to get used to the language with syntaxhighlighting, autocompletion, and simple analysis. It is based on the <a href="https://github.com/Universal-Variability-Language/uvl-lsp">UVL Language Server</a>. To fully use all features use the UVLS - Universal Variability Language Server extensino for visual studio code. </p>
+    </div>
+    
+    
+    
     <script type="module">
         import { startPythonClient } from "./src/main.ts";
         startPythonClient();
diff --git a/WebSocketClient/UVLPlayground/src/style.css b/WebSocketClient/UVLPlayground/src/style.css
deleted file mode 100644
index b528b6c..0000000
--- a/WebSocketClient/UVLPlayground/src/style.css
+++ /dev/null
@@ -1,97 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #3178c6aa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/WebSocketClient/UVLPlayground/style.css b/WebSocketClient/UVLPlayground/style.css
new file mode 100644
index 0000000..a428c47
--- /dev/null
+++ b/WebSocketClient/UVLPlayground/style.css
@@ -0,0 +1,51 @@
+/* Reset default browser styles */
+body, h1, p {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #1e1e1e; /* Dark background color */
+  color: #ffffff; /* Light text color */
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 30px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.editor {
+  background-color: #2d2d2d;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  width:100%;
+  height:700px;
+  border:1px solid grey;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+p {
+  font-size: 20px;
+  line-height: 1.5;
+  margin-top: 20px;
+  width: 80%;
+  hyphens: auto; 
+	text-align: justify;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+a:link { color: lightskyblue; }
+a:visited { color: rgb(73, 185, 255); }
+a:hover { color: #ffffff; }
+a:active { color: #ff4040; text-decoration:none; font-weight:normal; }
\ No newline at end of file
