diff --git a/src/components/textarea.svelte b/src/components/textarea.svelte
index 2541904..97957b5 100644
--- a/src/components/textarea.svelte
+++ b/src/components/textarea.svelte
@@ -98,10 +98,13 @@
 	*/
 </script>
 
-<div class="docContainer h-95 flex flex-col" role="application" id="docContainer">
-	<textarea style="
-		font-size:{textSettings.size}px;
-		font-family:{textSettings.font};
+<div class="docContainer h-full flex flex-col" role="application" id="docContainer">
+	<textarea 
+		style="
+			font-size:{textSettings.size}px;
+			font-family:{textSettings.font};
+			color:{textSettings.colors.fg};
+			background-color:{textSettings.colors.bg};
 		"
 		class="textarea flex-grow" 
 		id="doc" 
diff --git a/src/lib/stores.svelte.ts b/src/lib/stores.svelte.ts
index 168728e..514d41f 100644
--- a/src/lib/stores.svelte.ts
+++ b/src/lib/stores.svelte.ts
@@ -1,8 +1,47 @@
+const colorSetting = {
+	bg: "black",
+	fg: "white",
+}
+
+const colorThemes = [
+	{ 
+	bg: "white",
+	fg: "black",
+	},
+	{ 
+	bg: "black",
+	fg: "white",
+	},
+	{ 
+	bg: "black",
+	fg: "yellow",
+	},
+	{ 
+	bg: "yellow",
+	fg: "black",
+	},
+	{ 
+	bg: "blue",
+	fg: "yellow",
+	},
+	{ 
+	bg: "yellow",
+	fg: "blue",
+	}
+]
+
+let selectedColor = 0;
+
 export const shortforms = $state({ standardList: "", subjectLists: [], cache: new Map() })
 export const importState = $state({ data: "", errors: [] })
-export const textSettings = $state({ font: "Arial", size: 30, padding: 0, lineheight: 1 })
+export const textSettings = $state({ font: "Arial", size: 30, colors: colorSetting, padding: 0, lineheight: 1 })
 export const appState = $state({ text: "" })
 
+export const selectNextColor = () => {
+	selectedColor += 1
+	textSettings.colors = colorThemes[(selectedColor % 6)]
+}
+
 export const incTextSize = () => {
 	console.log(textSettings.size)
 	if (textSettings.size < 200) {
diff --git a/src/modules/keyboard.ts b/src/modules/keyboard.ts
index 9dd9c92..0b66f7a 100644
--- a/src/modules/keyboard.ts
+++ b/src/modules/keyboard.ts
@@ -1,7 +1,7 @@
 import { goto } from '$app/navigation';
 import type { ExpanderType } from "./index.d.ts";
 import { getCurrentWindow } from "@tauri-apps/api/window";
-import { incTextSize, decTextSize, appState } from "$lib/stores.svelte"
+import { incTextSize, decTextSize, selectNextColor, appState } from "$lib/stores.svelte"
 
 let fullscreen = true;
 export const defaultExpanders: Map<string, ExpanderType> = new Map();
@@ -109,6 +109,14 @@ hotkeys.set("F7", {
 	}
 })
 
+hotkeys.set("F8", {
+	action: (e) => {
+		e.preventDefault()
+		console.log("Increase text size")
+		selectNextColor()
+	}
+})
+
 hotkeys.set("F11", {
 	action: (e) => {
 		e.preventDefault()
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2f666d6..a5018bd 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -31,7 +31,7 @@
 </svelte:head>
 <svelte:window on:keydown={handleHotkeys} />
 
-<div class="h-dvh w-full" role="application">
+<div class="h-dvh w-full overflow-hidden" role="application">
 	<div class="h-full">
 		<Textarea />
 		<Dashboard open={showDashboard} />