diff --git a/v2/test/kitchensink/frontend/src/components/CodeBlock.svelte b/v2/test/kitchensink/frontend/src/components/CodeBlock.svelte
index 2935711c3..3eb4bd15d 100644
--- a/v2/test/kitchensink/frontend/src/components/CodeBlock.svelte
+++ b/v2/test/kitchensink/frontend/src/components/CodeBlock.svelte
@@ -20,11 +20,13 @@
     $: code = isJs ? jsCode : goCode;
 
     // Handle hiding example
-    let showCode = true;
+    let showCode = false;
 
     function toggleExample() {
         showCode = !showCode;
     }   
+
+    export let id;
     
     // Handle hiding example
     let showRun = true;
@@ -40,8 +42,8 @@
             <span class="toggle">
                 <span>Go</span>
                 <span class="custom-switch">
-                    <input type="checkbox" id="languageToggle" value="" bind:checked={isJs}>
-                    <label for="languageToggle">Javascript</label>
+                    <input type="checkbox" {id} value="" bind:checked={isJs}>
+                    <label for={id}>Javascript</label>
                 </span>
             </span>
         {#if description}
diff --git a/v2/test/kitchensink/frontend/src/pages/logging/Log/Log.svelte b/v2/test/kitchensink/frontend/src/pages/logging/Log/Log.svelte
new file mode 100644
index 000000000..6b84166af
--- /dev/null
+++ b/v2/test/kitchensink/frontend/src/pages/logging/Log/Log.svelte
@@ -0,0 +1,62 @@
+<script>
+    import { Log } from '@wails/runtime';
+    import CodeBlock from '../../../components/CodeBlock.svelte';
+    import jsCode from './code.jsx';
+    import goCode from './code.go';
+
+    import { logLevel } from '../../../Store';
+
+    var message = '';
+    var isJs = false;
+
+    const loglevels = ["Trace", "Debug", "Info", "Warning", "Error", "Fatal", "Print"];
+    var loglevel = loglevels[0];
+
+    $: lang = isJs ? 'Javascript' : 'Go';
+
+    var id = "Logging";
+
+    $: () => {
+        console.log("Loglevel:", $logLevel)
+    }
+
+    function sendLogMessage() {
+        if( message.length > 0 ) {
+            if( isJs ) {
+                // Call JS runtime
+                Log[loglevel](message);
+            } else {
+                // Call Go method which calls Go Runtime
+                backend.main.Logger[loglevel](message);              
+            }
+        }
+    }
+
+</script>
+
+<CodeBlock bind:isJs={isJs} {jsCode} {goCode} title="Logging" {id}>
+    <div class="logging-form">
+        <form data-wails-no-drag class="w-500 mw-full"> 
+            <div class="form-group">
+                <label for="Debug">Select Logging Level</label>
+                {#each loglevels as option, index}
+                {#if index === $logLevel}
+                <span style="margin-top: 5px; height: 20px; display: inline-block;"><hr style="width: 270px;display: inline-block; vertical-align: middle; margin-right: 10px"/> Current Log Level </span>
+                {/if}
+                <div class="custom-radio">
+                    <input type="radio" name="logging" bind:group="{loglevel}" id="{id}-{option}" value="{option}">
+                    <label for="{id}-{option}">{option}</label>
+                </div>   
+                {/each}
+            </div>
+
+            <div class="form-group">
+                <label for="{id}-message" class="required">Message</label>
+                <input type="text" class="form-control" id="{id}-message" placeholder="Hello World!" bind:value="{message}" required="required">
+            </div>
+
+            <input class="btn btn-primary" type="button" on:click="{sendLogMessage}" value="Call {lang} method">
+        </form>
+    </div>
+</CodeBlock>
+
diff --git a/v2/test/kitchensink/frontend/src/pages/logging/code.go b/v2/test/kitchensink/frontend/src/pages/logging/Log/code.go
similarity index 100%
rename from v2/test/kitchensink/frontend/src/pages/logging/code.go
rename to v2/test/kitchensink/frontend/src/pages/logging/Log/code.go
diff --git a/v2/test/kitchensink/frontend/src/pages/logging/code.jsx b/v2/test/kitchensink/frontend/src/pages/logging/Log/code.jsx
similarity index 100%
rename from v2/test/kitchensink/frontend/src/pages/logging/code.jsx
rename to v2/test/kitchensink/frontend/src/pages/logging/Log/code.jsx
diff --git a/v2/test/kitchensink/frontend/src/pages/logging/Logging.svelte b/v2/test/kitchensink/frontend/src/pages/logging/Logging.svelte
index 7241a11aa..2720ee16e 100644
--- a/v2/test/kitchensink/frontend/src/pages/logging/Logging.svelte
+++ b/v2/test/kitchensink/frontend/src/pages/logging/Logging.svelte
@@ -1,77 +1,36 @@
 <script>
-
-    import { Log } from '@wails/runtime';
-    import CodeBlock from '../../components/CodeBlock.svelte';
-    import jsCode from './code.jsx';
-    import goCode from './code.go';
-
-    import { logLevel } from '../../Store';
-
-    var message = '';
-    var isJs = false;
-
-    var options = ["Trace", "Debug", "Info", "Warning", "Error", "Fatal", "Print"];
-    var loglevel = options[0];
-
-
-    // This is the current log level in text form
-    $: currentLoglevelText = options[$logLevel];
-
-    $: lang = isJs ? 'Javascript' : 'Go';
-
-    function sendLogMessage() {
-        if( message.length > 0 ) {
-            if( isJs ) {
-                // Call JS runtime
-                Log[loglevel](message);
-            } else {
-                // Call Go method which calls Go Runtime
-                backend.main.Logger[loglevel](message);              
-            }
-        }
-    }
-
+    import Log from './Log/Log.svelte';
+    import SetLogLevel from './SetLogLevel/SetLogLevel.svelte';
+    
+    const loglevels = ["Trace", "Debug", "Info", "Warning", "Error", "Fatal", "Print"];
+    
 </script>
 <div>
     <h4>Logging</h4>
 
-    Logging is part of the Wails Runtime and is accessed through the <code>runtime.Log</code> object. There are {options.length} methods available:
+    Logging is part of the Wails Runtime and is accessed through the <code>runtime.Log</code> object. There are {loglevels.length} methods available:
     
     <ul class="list">
-        {#each options as option}
+        {#each loglevels as option}
         <li>{option}</li>
         {/each}
     </ul>
-    All methods will log to the console and <code>Fatal</code> will also exit the program.
+    <br/>
+
+    The default logger will log all messages to the console EG:<br/>
+    <pre>
+INFO  | I am an Info message
+ERROR | I am an Error message
+WARN  | I am a Warning message
+    </pre>
+
+    <code>Fatal</code> will print the message and then immediately exit the program.
     
     <div style="padding: 15px"></div>
     
-    <CodeBlock bind:isJs={isJs} {jsCode} {goCode} title="Logging" >
-        <div class="logging-form">
-            <form data-wails-no-drag class="w-500 mw-full"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
-                <!-- Radio -->
-                <div class="form-group">
-                    <label for="Debug">Select Logging Level</label>
-                    {#each options as option, index}
-                    {#if index === $logLevel}
-                    <span style="margin-top: 5px; height: 20px; display: inline-block;"><hr style="width: 270px;display: inline-block; vertical-align: middle; margin-right: 10px"/> Current Log Level </span>
-                    {/if}
-                    <div class="custom-radio">
-                        <input type="radio" name="logging" bind:group="{loglevel}" id="{option}" value="{option}">
-                        <label for="{option}">{option}</label>
-                    </div>   
-                    {/each}
-                </div>
+    <Log></Log>
+    <br/>
+    <SetLogLevel></SetLogLevel>
 
-                <!-- Input -->
-                <div class="form-group">
-                    <label for="message" class="required">Message</label>
-                    <input type="text" class="form-control" id="message" placeholder="Hello World!" bind:value="{message}" required="required">
-                </div>
-
-                <input class="btn btn-primary" type="button" on:click="{sendLogMessage}" value="Call {lang} method">
-            </form>
-        </div>
-    </CodeBlock>
 
 </div>
diff --git a/v2/test/kitchensink/frontend/src/pages/logging/SetLogLevel/SetLogLevel.svelte b/v2/test/kitchensink/frontend/src/pages/logging/SetLogLevel/SetLogLevel.svelte
new file mode 100644
index 000000000..912ea34b3
--- /dev/null
+++ b/v2/test/kitchensink/frontend/src/pages/logging/SetLogLevel/SetLogLevel.svelte
@@ -0,0 +1,32 @@
+<script>
+    import CodeBlock from '../../../components/CodeBlock.svelte';
+    import { logLevel } from '../../../Store';
+
+    import jsCode from './code.jsx';
+    import goCode from './code.go';
+
+    var options = ["Trace", "Debug", "Info", "Warning", "Error"];
+
+    var id = "SetLogLevel";
+    let loglevelText = options[$logLevel];
+
+    $: logLevel.set(options.indexOf(loglevelText));
+    
+</script>
+
+<CodeBlock {jsCode} {goCode} title="SetLogLevel" {id}>
+    <div class="logging-form">
+        <form data-wails-no-drag class="w-500 mw-full">
+            <!-- Radio -->
+            <div class="form-group">
+                <label for="Debug">Select Logging Level</label>
+                {#each options as option}
+                <div class="custom-radio">
+                    <input type="radio" name="logging" bind:group="{loglevelText}" id="{id}-{option}" value="{option}">
+                    <label for="{id}-{option}">{option}</label>
+                </div>   
+                {/each}
+            </div>
+        </form>
+    </div>
+</CodeBlock>
\ No newline at end of file
diff --git a/v2/test/kitchensink/frontend/src/pages/logging/SetLogLevel/code.go b/v2/test/kitchensink/frontend/src/pages/logging/SetLogLevel/code.go
new file mode 100644
index 000000000..08abc2cb1
--- /dev/null
+++ b/v2/test/kitchensink/frontend/src/pages/logging/SetLogLevel/code.go
@@ -0,0 +1,23 @@
+package main
+
+// SET LOG LEVEL
+
+import wails "github.com/wailsapp/wails/v2"
+
+type MyStruct struct {
+	runtime *wails.Runtime
+}
+
+func (l *MyStruct) WailsInit(runtime *wails.Runtime) error {
+
+	runtime.Log.Print(message)
+	runtime.Log.Trace(message)
+	runtime.Log.Debug(message)
+	runtime.Log.Info(message)
+	runtime.Log.Warning(message)
+	runtime.Log.Error(message)
+	runtime.Log.Fatal(message)
+
+	l.runtime = runtime
+	return nil
+}
diff --git a/v2/test/kitchensink/frontend/src/pages/logging/SetLogLevel/code.jsx b/v2/test/kitchensink/frontend/src/pages/logging/SetLogLevel/code.jsx
new file mode 100644
index 000000000..8e10ac834
--- /dev/null
+++ b/v2/test/kitchensink/frontend/src/pages/logging/SetLogLevel/code.jsx
@@ -0,0 +1,20 @@
+import { Log } from '@wails/runtime';
+
+
+// SET LOG LEVEL
+
+function doSomeOperation() {
+  // Do things
+  let value = doSomething();
+  Log.Print("A raw message");
+  Log.Trace("I got: " + value);
+  Log.Debug("A debug message");
+  Log.Info("An Info message");
+  Log.Warning("A Warning message");
+  Log.Error("An Error message");
+}
+
+function abort() {
+  // Do some things
+  Log.Fatal("I accidentally the whole application!");
+}
\ No newline at end of file