diff --git a/WebSocketClient/index.html b/WebSocketClient/index.html
index a7d0029..bcf6fbb 100644
--- a/WebSocketClient/index.html
+++ b/WebSocketClient/index.html
@@ -31,8 +31,8 @@ <h1>UVL Playground</h1>
         <button class="dropbtn">›</button>
         <div class="dropdown-content">
             <button id="defaultExample">Default</button>
-            <button>Ice Cream</button>
-            <button>Computer</button>
+            <button id="iceCreamExample">Ice Cream</button>
+            <button id="computerExample">Computer</button>
         </div>
     </div>
 </div>
diff --git a/WebSocketClient/src/examples.ts b/WebSocketClient/src/examples.ts
index c05a021..4708905 100644
--- a/WebSocketClient/src/examples.ts
+++ b/WebSocketClient/src/examples.ts
@@ -7,10 +7,73 @@ let globalEditor: editor.IStandaloneCodeEditor|null;
 export function initExamples(editor: editor.IStandaloneCodeEditor) {
     globalEditor = editor;
     loadDefaultExample();
+    loadIceCreamExample();
+    loadComputerExample();
 }
 
-const defaultExampleText = "features\n\tfeature1\n\t\tor\n\t\t\tfeature2\n\t\t\tfeature3\n\nconstraints\n\tfeature1";
+const defaultExampleText = `features
+    feature1
+        or
+            feature2
+            feature3
+    
+constraints
+feature1`;
+const iceCreamExampleText = `features
+    "Ice Cream" {extended__}
+        mandatory
+            Category
+                alternative
+                    Popsicle {Price 1}
+                    Scoop {Price 2}
+            Flavors
+                or
+                    Lemon
+                    Chocolate cardinality [1..3]
+                        alternative
+                            White
+                            Dark
+            Container
+                alternative
+                    Stick
+                    Cup
+                    Cone
 
+        optional
+            Waffle {Price 0.7}
+            String "Name of customer"
+
+constraints
+    Popsicle => Stick
+    Scoop => Cup | Cone
+    sum(Price) < 2.5`;
+
+const computerExampleText = `features
+    Computer {abstract}
+        mandatory
+            CPU {Power 100, Manufacturer 'Intel'}
+            "Graphics Card"
+                or
+                    Dedicated {powerConsumption 300}
+                    Integrated {powerConsumption 100}
+            Cooling
+                alternative
+                    Liquid
+                    Air
+            PSU
+                alternative
+                    StrongPSU
+                    WeakPSU
+        optional
+            "SATA-Devices"
+                [0..2]
+                    HDD {powerConsumption 10}
+                    SSD {powerConsumption 5}
+                    "DVD-Drive" {powerConsumption 5}
+
+constraints
+    Dedicated => Liquid
+    sum(powerConsumption) > 300 => StrongPSU`
 
 function loadDefaultExample() {
     const button: HTMLButtonElement|null = document.querySelector("#defaultExample");
@@ -24,4 +87,32 @@ function loadDefaultExample() {
             }
         }
     }
+}
+
+function loadIceCreamExample() {
+    const button: HTMLButtonElement|null = document.querySelector("#iceCreamExample");
+    if(button){
+        button.onclick = () => {
+            const opsModel = globalEditor?.getModel();
+            if (opsModel) {
+                const fullModelRange = opsModel.getFullModelRange();
+                const operation: IIdentifiedSingleEditOperation = {text: iceCreamExampleText, range: fullModelRange};
+                opsModel.applyEdits([operation], false);
+            }
+        }
+    }
+}
+
+function loadComputerExample() {
+    const button: HTMLButtonElement|null = document.querySelector("#computerExample");
+    if(button){
+        button.onclick = () => {
+            const opsModel = globalEditor?.getModel();
+            if (opsModel) {
+                const fullModelRange = opsModel.getFullModelRange();
+                const operation: IIdentifiedSingleEditOperation = {text: computerExampleText, range: fullModelRange};
+                opsModel.applyEdits([operation], false);
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/WebSocketClient/style/dropdown.css b/WebSocketClient/style/dropdown.css
index 283c9e9..c2db147 100644
--- a/WebSocketClient/style/dropdown.css
+++ b/WebSocketClient/style/dropdown.css
@@ -12,6 +12,8 @@
 /* The container <div> - needed to position the dropdown content */
 .dropdown {
     text-align: right;
+    display: flex;
+    justify-content: right;
     width: 100%;
 }