diff --git a/kubelab-ui/src/app.css b/kubelab-ui/src/app.css
index a257694..bb16e49 100644
--- a/kubelab-ui/src/app.css
+++ b/kubelab-ui/src/app.css
@@ -52,7 +52,23 @@ table {
     width: 100%;
 }
 
-td, th {
+td,
+th {
     border: 1px solid #ddd;
     padding: 0.5em;
 }
+
+@layer utilities {
+    @layer components {
+        /* Hide scrollbar for Chrome, Safari and Opera */
+        .no-scrollbar::-webkit-scrollbar {
+            display: none;
+        }
+
+        /* Hide scrollbar for IE, Edge and Firefox */
+        .no-scrollbar {
+            -ms-overflow-style: none; /* IE and Edge */
+            scrollbar-width: none; /* Firefox */
+        }
+    }
+}
diff --git a/kubelab-ui/src/lib/components/Console.svelte b/kubelab-ui/src/lib/components/Console.svelte
index 8b48100..7485c3c 100644
--- a/kubelab-ui/src/lib/components/Console.svelte
+++ b/kubelab-ui/src/lib/components/Console.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { page } from "$app/stores";
   import { client } from "$lib/pocketbase";
   import { layout_store } from "$lib/stores/layout_store";
   import { terminal_size } from "$lib/stores/terminal";
@@ -15,17 +14,17 @@
     fontFamily: "monospace",
     fontSize: 14,
     theme: {
-      foreground: "#d2d2d2",
-      background: "#2B3441",
-      cursor: "#adadad",
-      black: "#000000",
+      foreground: "#2B3441",
+      background: "#ffffff",
+      cursor: "#2B3441",
+      black: "#2B3441",
       red: "#d81e00",
       green: "#5ea702",
       yellow: "#cfae00",
       blue: "#427ab3",
       magenta: "#89658e",
       cyan: "#00a7aa",
-      white: "#dbded8",
+      white: "#000000",
       brightBlack: "#686a66",
       brightRed: "#f54235",
       brightGreen: "#99e343",
@@ -33,8 +32,9 @@
       brightBlue: "#84b0d8",
       brightMagenta: "#bc94b7",
       brightCyan: "#37e6e8",
-      brightWhite: "#f1f1f0"
+      brightWhite: "#2B3441"
     },
+
     scrollOnUserInput: true
   });
 
@@ -150,5 +150,4 @@
   div :global(.xterm) {
     height: 100%;
   }
-
 </style>
diff --git a/kubelab-ui/src/lib/components/base/Desktop.svelte b/kubelab-ui/src/lib/components/base/Desktop.svelte
index b7597bf..9b1daf0 100644
--- a/kubelab-ui/src/lib/components/base/Desktop.svelte
+++ b/kubelab-ui/src/lib/components/base/Desktop.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import PlaceholderComponent from "$lib/components/base/PlaceholderComponent.svelte";
-    import type { ComponentType, SvelteComponentTyped } from "svelte";
+  import type { ComponentType, SvelteComponentTyped } from "svelte";
   // eslint-disable-next-line @typescript-eslint/naming-convention
   export let Console: ComponentType<SvelteComponentTyped>;
 </script>
diff --git a/kubelab-ui/src/lib/stores/tableView.ts b/kubelab-ui/src/lib/stores/tableView.ts
index ee38c8b..48f54af 100644
--- a/kubelab-ui/src/lib/stores/tableView.ts
+++ b/kubelab-ui/src/lib/stores/tableView.ts
@@ -1,15 +1,15 @@
 import { writable } from "svelte/store";
 
 const defaultValue = false;
-const initialTableViewValue =
-    localStorage.getItem("tableView") === null
+const initialHorizontalViewValue =
+    localStorage.getItem("horizontalView") === null
         ? defaultValue
-        : localStorage.getItem("tableView") === "true";
+        : localStorage.getItem("horizontalView") === "true";
 
-const tableView = writable<boolean>(initialTableViewValue);
+const horizontalView = writable<boolean>(initialHorizontalViewValue);
 
-tableView.subscribe((value) => {
-    localStorage.setItem("tableView", value.toString());
+horizontalView.subscribe((value) => {
+    localStorage.setItem("horizontalView", value.toString());
 });
 
-export default tableView;
+export default horizontalView;
diff --git a/kubelab-ui/src/routes/labs/[id]/[id]/+layout.svelte b/kubelab-ui/src/routes/labs/[id]/[id]/+layout.svelte
index 96acece..ccff7a6 100644
--- a/kubelab-ui/src/routes/labs/[id]/[id]/+layout.svelte
+++ b/kubelab-ui/src/routes/labs/[id]/[id]/+layout.svelte
@@ -1,7 +1,14 @@
 <script lang="ts">
   import { metadata } from "$lib/stores/metadata";
   import { goto } from "$app/navigation";
-  import { ArrowLeft, Check, RotateCw, StopCircle } from "lucide-svelte";
+  import {
+    ArrowLeft,
+    Check,
+    RotateCw,
+    StopCircle,
+    StretchHorizontal,
+    StretchVertical
+  } from "lucide-svelte";
   import { client } from "$lib/pocketbase/index.js";
   import toast from "svelte-french-toast";
   import {
@@ -16,6 +23,7 @@
   // @ts-ignore
   import { Confetti } from "svelte-confetti";
   import ToggleConfetti from "$lib/components/base/ToggleConfetti.svelte";
+  import horizontalView from "$lib/stores/tableView.js";
 
   $metadata.title = "Exercises";
 
@@ -137,13 +145,31 @@
   }
 </script>
 
-<div class="absolute top-0 h-20 left-0 right-0 bg-neutral">
+<div class="absolute top-0 h-20 left-0 right-0 ">
   <div class="mt-5 flex justify-between px-2">
     <!-- add back button -->
-    <button class="btn " on:click={() => goto("/labs/" + data.pathname.split("/")[2])}>
+    <button class="btn btn-neutral" on:click={() => goto("/labs/" + data.pathname.split("/")[2])}>
       <ArrowLeft class="inline-block w-4 h-4 mr-2" />
       Exercises
     </button>
+    <div class="join grid grid-cols-2">
+      <button
+        on:click={() => {
+          horizontalView.set(true);
+        }}
+        class="join-item btn {$horizontalView ? 'btn-neutral' : 'btn-outline'} "
+      >
+        <StretchHorizontal />
+      </button>
+      <button
+        on:click={() => {
+          horizontalView.set(false);
+        }}
+        class="join-item btn {$horizontalView ? 'btn-outline' : 'btn-neutral'}"
+      >
+        <StretchVertical />
+      </button>
+    </div>
     <ToggleConfetti>
       <button
         slot="label"
@@ -157,14 +183,14 @@
         style="position: fixed; top: -10px; left: 0; height: 100vh; width: 100vw; display: flex; justify-content: center; overflow: hidden; z-index: 10;"
       >
         {#if $exercise_session.endTime}
-        <Confetti
-          x={[-5, 5]}
-          y={[0, 0.1]}
-          delay={[0, 2000]}
-          duration="3000"
-          amount="100"
-          fallDistance="100vh"
-        />
+          <Confetti
+            x={[-5, 5]}
+            y={[0, 0.1]}
+            delay={[0, 2000]}
+            duration="3000"
+            amount="100"
+            fallDistance="100vh"
+          />
         {/if}
       </div>
     </ToggleConfetti>
@@ -173,7 +199,7 @@
 <div class="absolute top-16 bottom-16 left-0 right-0 z-0">
   <slot />
 </div>
-<div class="absolute h-16 bottom-0 left-0 right-0 bg-neutral">
+<div class="absolute h-16 bottom-0 left-0 right-0">
   <div class="mt-2 flex justify-between px-2">
     <div>
       <button
@@ -208,8 +234,7 @@
                 class="step
           {checkIfExerciseIsDone(currentExercise.id) ? 'step-success' : ''}
           "
-              >
-              </button>
+              />
             {/each}
           {/key}
         {/key}
diff --git a/kubelab-ui/src/routes/labs/[id]/[id]/+page.svelte b/kubelab-ui/src/routes/labs/[id]/[id]/+page.svelte
index 3a98a7d..a33e1d3 100644
--- a/kubelab-ui/src/routes/labs/[id]/[id]/+page.svelte
+++ b/kubelab-ui/src/routes/labs/[id]/[id]/+page.svelte
@@ -21,6 +21,7 @@
   import CodeSpanComponent from "$lib/components/markdown/CodeSpanComponent.svelte";
   import CodeComponent from "$lib/components/markdown/CodeComponent.svelte";
   import LinkComponent from "$lib/components/markdown/LinkComponent.svelte";
+  import horizontalView from "$lib/stores/tableView";
   let Console: ComponentType<SvelteComponentTyped> = PlaceholderComponent;
 
   let loading = "";
@@ -153,127 +154,253 @@
   }
 </script>
 
-<Splitpanes horizontal class="p-2 mt-2 pb-2 bg-neutral">
-  <Pane class="rounded-md my-2">
-    <Splitpanes>
-      <Pane maxSize={75} size={65}>
-        <div class="p-2 leading-8 h-full overflow-y-scroll bg-white">
-          {#key $page.params}
-            <SvelteMarkdown
-              source={docs}
-              renderers={{
-                codespan: CodeSpanComponent,
-                code: CodeComponent,
-                link: LinkComponent
-              }}
-            />
-          {/key}
-        </div>
-      </Pane>
-      <Pane>
-        <div class="p-2 leading-8 h-full overflow-y-scroll">
-          {#key $page.params}
-            <div class="flex justify-center">
-              <!-- svelte-ignore missing-declaration -->
+{#if $horizontalView}
+  <Splitpanes horizontal class="p-2 mt-2 pb-2">
+    <Pane class="rounded-md my-2">
+      <Splitpanes>
+        <Pane maxSize={75} size={65}>
+          <div class="p-2 leading-8 h-full overflow-y-scroll  bg-white">
+            {#key $page.params}
+              <SvelteMarkdown
+                source={docs}
+                renderers={{
+                  codespan: CodeSpanComponent,
+                  code: CodeComponent,
+                  link: LinkComponent
+                }}
+              />
+            {/key}
+          </div>
+        </Pane>
+        <Pane>
+          <div class="p-2 leading-8 h-full overflow-y-scroll">
+            {#key $page.params}
+              <div class="flex justify-center">
+                <!-- svelte-ignore missing-declaration -->
+                <button class="btn mt-4 btn-neutral" on:click={() => openModal2()}>
+                  <Search class="mr-2" size={16} />
+                  Show Hint
+                </button>
+                <dialog id="my_modal_2" class="modal">
+                  <form method="dialog" class="modal-box">
+                    <h3 class="font-bold text-lg">Hint</h3>
+                    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button
+                    >
+                    <SvelteMarkdown
+                      source={hint}
+                      renderers={{
+                        codespan: CodeSpanComponent,
+                        code: CodeComponent,
+                        link: LinkComponent
+                      }}
+                    />
+                  </form>
+                </dialog>
+              </div>
+              <div class="flex justify-center">
+                <!-- svelte-ignore missing-declaration -->
+                <button
+                  class="btn mt-4 {(showSolution === window.location.pathname.split('/')[3] &&
+                    $exercise_session.agentRunning) ||
+                  $exercise_session.endTime
+                    ? 'btn-neutral'
+                    : 'btn-disabled'}"
+                  on:click={() => openModal()}
+                >
+                  <Info size={16} />
+                  Show Solution
+                </button>
+                <dialog id="my_modal_1" class="modal">
+                  <form method="dialog" class="modal-box">
+                    <h3 class="font-bold text-lg">Solution</h3>
+
+                    <SvelteMarkdown
+                      source={solution}
+                      renderers={{
+                        codespan: CodeSpanComponent,
+                        code: CodeComponent,
+                        link: LinkComponent
+                      }}
+                    />
+                    <div class="modal-action">
+                      <!-- if there is a button in form, it will close the modal -->
+                      <button class="btn">Close</button>
+                    </div>
+                  </form>
+                </dialog>
+              </div>
+            {/key}
+          </div>
+        </Pane>
+      </Splitpanes>
+    </Pane>
+    <Pane bind:size={$terminal_size.height}>
+      {#if $exercise_session.agentRunning}
+        {#key $page.params}
+          {#if $exercise_session.exercise === $exercise.id}
+            <Desktop {Console} />
+          {/if}
+        {/key}
+      {:else}
+        <!-- button to start the agent -->
+        {#key $page.params}
+          <div
+            class="flex justify-center items-center h-full {checkIfExerciseIsDone($exercise.id)
+              ? 'bg-green-200'
+              : ''}"
+          >
+            <div class="text-center">
+              <h1 class="text-4xl font-bold">
+                {checkIfExerciseIsDone($exercise.id) ? "Exercise done" : "Exercise not started"}
+              </h1>
+              <p class="text-xl">
+                {checkIfExerciseIsDone($exercise.id)
+                  ? "Click the button below to restart the exercise. You must finish it again!"
+                  : "Click the button below to start the exercise"}
+              </p>
               <button
-                class="btn mt-4 btn-neutral"
-                on:click={() => openModal2()}
+                class="btn {checkIfExerciseIsDone($exercise.id)
+                  ? 'btn-warning'
+                  : 'btn-neutral'} mt-4"
+                on:click={() => handleStartExercise()}
               >
-                <Search class="mr-2" size={16} />
-                Show Hint
+                {#if loading === window.location.pathname.split("/")[3]}
+                  <span class="loading loading-dots loading-md" /> Start Terminal
+                {:else}
+                  <Play /> Start Terminal
+                {/if}
+                {checkIfExerciseIsDone($exercise.id) ? " - Exercise already Done" : ""}
               </button>
-              <dialog id="my_modal_2" class="modal">
-                <form method="dialog" class="modal-box">
-                  <h3 class="font-bold text-lg">Hint</h3>
-                  <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
-                  <SvelteMarkdown
-                    source={hint}
-                    renderers={{
-                      codespan: CodeSpanComponent,
-                      code: CodeComponent,
-                      link: LinkComponent
-                    }}
-                  />
-                </form>
-              </dialog>
             </div>
-            <div class="flex justify-center">
-              <!-- svelte-ignore missing-declaration -->
+          </div>
+        {/key}
+      {/if}
+    </Pane>
+  </Splitpanes>
+{:else}
+  <Splitpanes class="p-2 mt-2">
+    <Pane bind:size={$terminal_size.height}>
+      {#if $exercise_session.agentRunning}
+        {#key $page.params}
+          {#if $exercise_session.exercise === $exercise.id}
+            <Desktop {Console} />
+          {/if}
+        {/key}
+      {:else}
+        <!-- button to start the agent -->
+        {#key $page.params}
+          <div
+            class="flex justify-center items-center h-full {checkIfExerciseIsDone($exercise.id)
+              ? 'bg-green-200'
+              : ''}"
+          >
+            <div class="text-center">
+              <h1 class="text-4xl font-bold">
+                {checkIfExerciseIsDone($exercise.id) ? "Exercise done" : "Exercise not started"}
+              </h1>
+              <p class="text-xl">
+                {checkIfExerciseIsDone($exercise.id)
+                  ? "Click the button below to restart the exercise. You must finish it again!"
+                  : "Click the button below to start the exercise"}
+              </p>
               <button
-                class="btn mt-4 {(showSolution === window.location.pathname.split('/')[3] &&
-                $exercise_session.agentRunning) || $exercise_session.endTime
-                  ? 'btn-neutral'
-                  : 'btn-disabled'}"
-                on:click={() => openModal()}
+                class="btn {checkIfExerciseIsDone($exercise.id)
+                  ? 'btn-warning'
+                  : 'btn-neutral'} mt-4"
+                on:click={() => handleStartExercise()}
               >
-                <Info size={16} />
-                Show Solution
+                {#if loading === window.location.pathname.split("/")[3]}
+                  <span class="loading loading-dots loading-md" /> Start Terminal
+                {:else}
+                  <Play /> Start Terminal
+                {/if}
+                {checkIfExerciseIsDone($exercise.id) ? " - Exercise already Done" : ""}
               </button>
-              <dialog id="my_modal_1" class="modal">
-                <form method="dialog" class="modal-box">
-                  <h3 class="font-bold text-lg">Solution</h3>
-
-                  <SvelteMarkdown
-                    source={solution}
-                    renderers={{
-                      codespan: CodeSpanComponent,
-                      code: CodeComponent,
-                      link: LinkComponent
-                    }}
-                  />
-                  <div class="modal-action">
-                    <!-- if there is a button in form, it will close the modal -->
-                    <button class="btn">Close</button>
-                  </div>
-                </form>
-              </dialog>
             </div>
-          {/key}
-        </div>
-      </Pane>
-    </Splitpanes>
-  </Pane>
-  <Pane bind:size={$terminal_size.height}>
-    {#if $exercise_session.agentRunning}
-      {#key $page.params}
-        {#if $exercise_session.exercise === $exercise.id}
-          <Desktop {Console} />
-        {/if}
-      {/key}
-    {:else}
-      <!-- button to start the agent -->
-      {#key $page.params}
-        <div
-          class="flex justify-center items-center h-full {checkIfExerciseIsDone($exercise.id)
-            ? 'bg-green-200'
-            : ''}"
-        >
-          <div class="text-center">
-            <h1 class="text-4xl font-bold">
-              {checkIfExerciseIsDone($exercise.id) ? "Exercise done" : "Exercise not started"}
-            </h1>
-            <p class="text-xl">
-              {checkIfExerciseIsDone($exercise.id)
-                ? "Click the button below to restart the exercise. You must finish it again!"
-                : "Click the button below to start the exercise"}
-            </p>
-            <button
-              class="btn {checkIfExerciseIsDone($exercise.id) ? 'btn-warning' : 'btn-neutral'} mt-4"
-              on:click={() => handleStartExercise()}
-            >
-              {#if loading === window.location.pathname.split("/")[3]}
-                <span class="loading loading-dots loading-md" /> Start Terminal
-              {:else}
-                <Play /> Start Terminal
-              {/if}
-              {checkIfExerciseIsDone($exercise.id) ? " - Exercise already Done" : ""}
-            </button>
           </div>
-        </div>
-      {/key}
-    {/if}
-  </Pane>
-</Splitpanes>
+        {/key}
+      {/if}
+    </Pane>
+    <Pane>
+      <Splitpanes horizontal>
+        <Pane maxSize={75} size={65}>
+          <div class="p-2 leading-8 h-full overflow-y-scroll bg-white">
+            {#key $page.params}
+              <SvelteMarkdown
+                source={docs}
+                renderers={{
+                  codespan: CodeSpanComponent,
+                  code: CodeComponent,
+                  link: LinkComponent
+                }}
+              />
+            {/key}
+          </div>
+        </Pane>
+        <Pane>
+          <div class="p-2 leading-8 h-full overflow-y-scroll">
+            {#key $page.params}
+              <div class="flex justify-center">
+                <!-- svelte-ignore missing-declaration -->
+                <button class="btn mt-4 btn-neutral" on:click={() => openModal2()}>
+                  <Search class="mr-2" size={16} />
+                  Show Hint
+                </button>
+                <dialog id="my_modal_2" class="modal">
+                  <form method="dialog" class="modal-box">
+                    <h3 class="font-bold text-lg">Hint</h3>
+                    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button
+                    >
+                    <SvelteMarkdown
+                      source={hint}
+                      renderers={{
+                        codespan: CodeSpanComponent,
+                        code: CodeComponent,
+                        link: LinkComponent
+                      }}
+                    />
+                  </form>
+                </dialog>
+              </div>
+              <div class="flex justify-center">
+                <!-- svelte-ignore missing-declaration -->
+                <button
+                  class="btn mt-4 {(showSolution === window.location.pathname.split('/')[3] &&
+                    $exercise_session.agentRunning) ||
+                  $exercise_session.endTime
+                    ? 'btn-neutral'
+                    : 'btn-disabled'}"
+                  on:click={() => openModal()}
+                >
+                  <Info size={16} />
+                  Show Solution
+                </button>
+                <dialog id="my_modal_1" class="modal">
+                  <form method="dialog" class="modal-box">
+                    <h3 class="font-bold text-lg">Solution</h3>
+
+                    <SvelteMarkdown
+                      source={solution}
+                      renderers={{
+                        codespan: CodeSpanComponent,
+                        code: CodeComponent,
+                        link: LinkComponent
+                      }}
+                    />
+                    <div class="modal-action">
+                      <!-- if there is a button in form, it will close the modal -->
+                      <button class="btn">Close</button>
+                    </div>
+                  </form>
+                </dialog>
+              </div>
+            {/key}
+          </div>
+        </Pane>
+      </Splitpanes>
+    </Pane>
+  </Splitpanes>
+{/if}
 
 <style>
   * {