diff --git a/ui/package-lock.json b/ui/package-lock.json
index 8eddde867f2..9bc8741c038 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -9,6 +9,13 @@
       "version": "0.0.0",
       "dependencies": {
         "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+        "@fontsource/anonymous-pro": "^5.2.8",
+        "@fontsource/fira-code": "^5.2.7",
+        "@fontsource/inconsolata": "^5.2.8",
+        "@fontsource/jetbrains-mono": "^5.2.8",
+        "@fontsource/noto-mono": "^5.2.5",
+        "@fontsource/source-code-pro": "^5.2.7",
+        "@fontsource/ubuntu-mono": "^5.2.8",
         "@fortawesome/fontawesome-free": "^7.0.0",
         "@fortawesome/fontawesome-svg-core": "^7.0.0",
         "@fortawesome/free-brands-svg-icons": "^7.0.0",
@@ -35,6 +42,7 @@
         "express": "^4.18.1",
         "file-saver": "^2.0.5",
         "font-logos": "^1.0.0",
+        "fontfaceobserver": "^2.3.0",
         "gitter-sidecar": "^1.5.0",
         "markdown-it": "^14.0.0",
         "moment": "^2.29.4",
@@ -949,6 +957,62 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fontsource/anonymous-pro": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/anonymous-pro/-/anonymous-pro-5.2.8.tgz",
+      "integrity": "sha512-nCK3XLqSyTjWw94vtgaI5n8j+jsxz7Eds5S38il0DSZ+lBqs/O08m41iXqmm+i/pXqQb/KBxA6hck3hbozZQiA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/fira-code": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource/fira-code/-/fira-code-5.2.7.tgz",
+      "integrity": "sha512-tnB9NNund9TwIym8/7DMJe573nlPEQb+fKUV5GL8TBYXjIhDvL0D7mgmNVNQUPhXp+R7RylQeiBdkA4EbOHPGQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/inconsolata": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/inconsolata/-/inconsolata-5.2.8.tgz",
+      "integrity": "sha512-lIZW+WOZYpUH91g9r6rYYhfTmptF3YPPM54ZOs8IYVeeL4SeiAu4tfj7mdr8llYEq31DLYgi6JtGIJa192gB0Q==",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/jetbrains-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+      "integrity": "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/noto-mono": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/noto-mono/-/noto-mono-5.2.5.tgz",
+      "integrity": "sha512-mWcCCJtB7CneVkqDz8WzzXXnAgFldJmkVL3AX815RjKaEP+dEGzxjVX89080wmXQ322Z6vcb+PI9qP9RbafKcg==",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/source-code-pro": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource/source-code-pro/-/source-code-pro-5.2.7.tgz",
+      "integrity": "sha512-7papq9TH94KT+S5VSY8cU7tFmwuGkIe3qxXRMscuAXH6AjMU+KJI75f28FzgBVDrlMfA0jjlTV4/x5+H5o/5EQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/ubuntu-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/ubuntu-mono/-/ubuntu-mono-5.2.8.tgz",
+      "integrity": "sha512-N4nT8+GYWWcDODVSBLU4f3PycZQH9YIF6SypDI0rti3HrLqcXFS9u6wMvAd9vx1FmjAQkYv7Ld9CZ8XYTEOD0A==",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.0.1.tgz",
@@ -6107,6 +6171,11 @@
       "resolved": "https://registry.npmjs.org/font-logos/-/font-logos-1.3.0.tgz",
       "integrity": "sha512-YGqFNu8+0bWFTU7bh3aveSl4CSsUEOEPEkRW4tP1EnmLHzAunpeHagD3ICVttn7/oPHRWO/UStMkS/tYTZTt5g=="
     },
+    "node_modules/fontfaceobserver": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz",
+      "integrity": "sha512-6FPvD/IVyT4ZlNe7Wcn5Fb/4ChigpucKYSvD6a+0iMoLn2inpo711eyIcKjmDtE5XNcgAkSH9uN/nfAeZzHEfg=="
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
diff --git a/ui/package.json b/ui/package.json
index 3df002119a3..5d6b06c2ac1 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -17,6 +17,13 @@
   },
   "dependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@fontsource/anonymous-pro": "^5.2.8",
+    "@fontsource/fira-code": "^5.2.7",
+    "@fontsource/inconsolata": "^5.2.8",
+    "@fontsource/jetbrains-mono": "^5.2.8",
+    "@fontsource/noto-mono": "^5.2.5",
+    "@fontsource/source-code-pro": "^5.2.7",
+    "@fontsource/ubuntu-mono": "^5.2.8",
     "@fortawesome/fontawesome-free": "^7.0.0",
     "@fortawesome/fontawesome-svg-core": "^7.0.0",
     "@fortawesome/free-brands-svg-icons": "^7.0.0",
@@ -34,12 +41,16 @@
     "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/runtime-dom": "^3.2.40",
     "@vueuse/core": "^13.0.0",
+    "@xterm/addon-attach": "^0.11.0",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
     "assert": "^2.0.0",
     "axios": "^1.4.0",
     "dotenv": "^16.0.3",
     "express": "^4.18.1",
     "file-saver": "^2.0.5",
     "font-logos": "^1.0.0",
+    "fontfaceobserver": "^2.3.0",
     "gitter-sidecar": "^1.5.0",
     "markdown-it": "^14.0.0",
     "moment": "^2.29.4",
@@ -57,10 +68,7 @@
     "vue-router": "4",
     "vuetify": "^3.4.9",
     "webcrypto": "^0.1.1",
-    "webfontloader": "^1.6.28",
-    "@xterm/xterm": "^5.5.0",
-    "@xterm/addon-attach": "^0.11.0",
-    "@xterm/addon-fit": "^0.10.0"
+    "webfontloader": "^1.6.28"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.1",
diff --git a/ui/public/xterm-themes/atom_one_dark.json b/ui/public/xterm-themes/atom_one_dark.json
new file mode 100644
index 00000000000..e68b6e5e17f
--- /dev/null
+++ b/ui/public/xterm-themes/atom_one_dark.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#abb2bf",
+  "background": "#1e2127",
+  "cursor": "#5c6370",
+  "selection": "#abb2bf80",
+  "black": "#000000",
+  "red": "#ca6169",
+  "green": "#82a568",
+  "yellow": "#bf8c5d",
+  "blue": "#56a2e1",
+  "magenta": "#b76ccd",
+  "cyan": "#4e9aa3",
+  "white": "#c5cbd6",
+  "brightBlack": "#5c6370",
+  "brightRed": "#e77c84",
+  "brightGreen": "#b4e294",
+  "brightYellow": "#e9b17b",
+  "brightBlue": "#7ec5ff",
+  "brightMagenta": "#db8df2",
+  "brightCyan": "#64cfdd",
+  "brightWhite": "#ffffff"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/atom_one_light.json b/ui/public/xterm-themes/atom_one_light.json
new file mode 100644
index 00000000000..c82eefba8f3
--- /dev/null
+++ b/ui/public/xterm-themes/atom_one_light.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#383a42",
+  "background": "#f9f9f9",
+  "cursor": "#383a42",
+  "selection": "#383a4280",
+  "black": "#000000",
+  "red": "#e45649",
+  "green": "#4c9b4b",
+  "yellow": "#c99525",
+  "blue": "#4078f2",
+  "magenta": "#a626a4",
+  "cyan": "#0184bc",
+  "white": "#b8b9bf",
+  "brightBlack": "#474747",
+  "brightRed": "#ff7468",
+  "brightGreen": "#74ca72",
+  "brightYellow": "#dba633",
+  "brightBlue": "#6a99ff",
+  "brightMagenta": "#c142bf",
+  "brightCyan": "#00b1fd",
+  "brightWhite": "#ffffff"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/basic.json b/ui/public/xterm-themes/basic.json
new file mode 100644
index 00000000000..382579a3b88
--- /dev/null
+++ b/ui/public/xterm-themes/basic.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#000000",
+  "background": "#ffffff",
+  "cursor": "#7f7f7f",
+  "selection": "#00000080",
+  "black": "#2e2e2e",
+  "red": "#c61a1a",
+  "green": "#007900",
+  "yellow": "#999900",
+  "blue": "#0f48cd",
+  "magenta": "#b200b2",
+  "cyan": "#3fc1dd",
+  "white": "#acacac",
+  "brightBlack": "#757575",
+  "brightRed": "#ff3e3e",
+  "brightGreen": "#00b300",
+  "brightYellow": "#d4d400",
+  "brightBlue": "#316fff",
+  "brightMagenta": "#ff60c9",
+  "brightCyan": "#6ce5ff",
+  "brightWhite": "#cac5c5"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/dia_de_muertos.json b/ui/public/xterm-themes/dia_de_muertos.json
new file mode 100644
index 00000000000..08cd514429f
--- /dev/null
+++ b/ui/public/xterm-themes/dia_de_muertos.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#281f63",
+  "background": "#fffdf5",
+  "cursor": "#b33a00",
+  "selection": "#e6760180",
+  "black": "#020018",
+  "red": "#eb1670",
+  "green": "#23816c",
+  "yellow": "#fb6633",
+  "blue": "#5c439e",
+  "magenta": "#9d2686",
+  "cyan": "#e29b00",
+  "white": "#d2cbb4",
+  "brightBlack": "#3f3b64",
+  "brightRed": "#f63b7b",
+  "brightGreen": "#28aa8b",
+  "brightYellow": "#ffa85e",
+  "brightBlue": "#7a54df",
+  "brightMagenta": "#ff81c7",
+  "brightCyan": "#ffbe30",
+  "brightWhite": "#f1ebd9"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/dracula.json b/ui/public/xterm-themes/dracula.json
new file mode 100644
index 00000000000..726b73fced0
--- /dev/null
+++ b/ui/public/xterm-themes/dracula.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#f8f8f2",
+  "background": "#282a36",
+  "cursor": "#bbbbbb",
+  "selection": "#f8f8f280",
+  "black": "#000000",
+  "red": "#e04242",
+  "green": "#45e16c",
+  "yellow": "#e3ec7d",
+  "blue": "#9b7dc6",
+  "magenta": "#e469b0",
+  "cyan": "#8be9fd",
+  "white": "#cac5c5",
+  "brightBlack": "#4a4a4a",
+  "brightRed": "#ff5555",
+  "brightGreen": "#b5ffc8",
+  "brightYellow": "#fff9c8",
+  "brightBlue": "#c8a1ff",
+  "brightMagenta": "#ff8cce",
+  "brightCyan": "#c8f5ff",
+  "brightWhite": "#ffffff"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/grass.json b/ui/public/xterm-themes/grass.json
new file mode 100644
index 00000000000..07cce09e1d5
--- /dev/null
+++ b/ui/public/xterm-themes/grass.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#fff0a5",
+  "background": "#13773d",
+  "cursor": "#8c2800",
+  "selection": "#fff0a580",
+  "black": "#000000",
+  "red": "#9a183c",
+  "green": "#6eb95e",
+  "yellow": "#ffa673",
+  "blue": "#00378a",
+  "magenta": "#771361",
+  "cyan": "#3bcbea",
+  "white": "#939393",
+  "brightBlack": "#393939",
+  "brightRed": "#e0692f",
+  "brightGreen": "#b2ffa2",
+  "brightYellow": "#ffc27b",
+  "brightBlue": "#2380c4",
+  "brightMagenta": "#ec88c2",
+  "brightCyan": "#70e4ff",
+  "brightWhite": "#ffffff"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/gruvbox_dark.json b/ui/public/xterm-themes/gruvbox_dark.json
new file mode 100644
index 00000000000..d3b5e7cd9fd
--- /dev/null
+++ b/ui/public/xterm-themes/gruvbox_dark.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#ebdbb2",
+  "background": "#282828",
+  "cursor": "#ebdbb2",
+  "selection": "#ebdbb280",
+  "black": "#151515",
+  "red": "#cc241d",
+  "green": "#98971a",
+  "yellow": "#d79921",
+  "blue": "#458588",
+  "magenta": "#b16286",
+  "cyan": "#689d6a",
+  "white": "#c3b198",
+  "brightBlack": "#695c50",
+  "brightRed": "#fb4934",
+  "brightGreen": "#b8bb26",
+  "brightYellow": "#fabd2f",
+  "brightBlue": "#83a598",
+  "brightMagenta": "#f59db5",
+  "brightCyan": "#8ec07c",
+  "brightWhite": "#ebdbb2"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/gruvbox_light.json b/ui/public/xterm-themes/gruvbox_light.json
new file mode 100644
index 00000000000..8904663d17f
--- /dev/null
+++ b/ui/public/xterm-themes/gruvbox_light.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#282828",
+  "background": "#fbf1c7",
+  "cursor": "#282828",
+  "selection": "#28282880",
+  "black": "#dfd6b1",
+  "red": "#9d0006",
+  "green": "#79740e",
+  "yellow": "#b57614",
+  "blue": "#076678",
+  "magenta": "#8f3f71",
+  "cyan": "#427b58",
+  "white": "#3c3836",
+  "brightBlack": "#9d8374",
+  "brightRed": "#cc241d",
+  "brightGreen": "#98971a",
+  "brightYellow": "#d79921",
+  "brightBlue": "#458588",
+  "brightMagenta": "#d180a5",
+  "brightCyan": "#689d69",
+  "brightWhite": "#7c6f64"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/halloween.json b/ui/public/xterm-themes/halloween.json
new file mode 100644
index 00000000000..8772a4e8f3d
--- /dev/null
+++ b/ui/public/xterm-themes/halloween.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#e5e5e5",
+  "background": "#22012b",
+  "cursor": "#ffa900",
+  "selection": "#ffa90080",
+  "black": "#100015",
+  "red": "#a31736",
+  "green": "#887225",
+  "yellow": "#ff7600",
+  "blue": "#5c50a6",
+  "magenta": "#6d008d",
+  "cyan": "#ae4fa4",
+  "white": "#c7c7c6",
+  "brightBlack": "#694a71",
+  "brightRed": "#ff2e5d",
+  "brightGreen": "#c3a640",
+  "brightYellow": "#ffa85e",
+  "brightBlue": "#8e7cff",
+  "brightMagenta": "#c500ff",
+  "brightCyan": "#f491ea",
+  "brightWhite": "#fafafa"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/homebrew.json b/ui/public/xterm-themes/homebrew.json
new file mode 100644
index 00000000000..d859737817b
--- /dev/null
+++ b/ui/public/xterm-themes/homebrew.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#00ff00",
+  "background": "#000000",
+  "cursor": "#23ff18",
+  "selection": "#00ff0080",
+  "black": "#2e2e2e",
+  "red": "#c93434",
+  "green": "#348e48",
+  "yellow": "#e09e00",
+  "blue": "#0031e0",
+  "magenta": "#e235ff",
+  "cyan": "#3fc1dd",
+  "white": "#d0cfcf",
+  "brightBlack": "#5b5b5b",
+  "brightRed": "#ff6767",
+  "brightGreen": "#31ff31",
+  "brightYellow": "#ffdca8",
+  "brightBlue": "#4465da",
+  "brightMagenta": "#ff5fc8",
+  "brightCyan": "#8debff",
+  "brightWhite": "#e6e6e6"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/man_page.json b/ui/public/xterm-themes/man_page.json
new file mode 100644
index 00000000000..116ca892c87
--- /dev/null
+++ b/ui/public/xterm-themes/man_page.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#000000",
+  "background": "#fef49c",
+  "cursor": "#7f7f7f",
+  "selection": "#00000080",
+  "black": "#383838",
+  "red": "#9a183c",
+  "green": "#009100",
+  "yellow": "#be6600",
+  "blue": "#114695",
+  "magenta": "#b72fb9",
+  "cyan": "#3bcbea",
+  "white": "#959595",
+  "brightBlack": "#a7a7a7",
+  "brightRed": "#e0692f",
+  "brightGreen": "#00b400",
+  "brightYellow": "#ffb571",
+  "brightBlue": "#3392d6",
+  "brightMagenta": "#ec88c2",
+  "brightCyan": "#70e4ff",
+  "brightWhite": "#dadada"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/manhattan.json b/ui/public/xterm-themes/manhattan.json
new file mode 100644
index 00000000000..30ab27a15f2
--- /dev/null
+++ b/ui/public/xterm-themes/manhattan.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#b8b9b4",
+  "background": "#0a0a0a",
+  "cursor": "#dfe0db",
+  "selection": "#b8b9b480",
+  "black": "#0a0a0a",
+  "red": "#840f02",
+  "green": "#5e5e5c",
+  "yellow": "#c3a421",
+  "blue": "#727370",
+  "magenta": "#d1d1cb",
+  "cyan": "#4f4f4c",
+  "white": "#aaaba6",
+  "brightBlack": "#2e2e2c",
+  "brightRed": "#d15510",
+  "brightGreen": "#636361",
+  "brightYellow": "#d8b741",
+  "brightBlue": "#777875",
+  "brightMagenta": "#d6d6d0",
+  "brightCyan": "#696966",
+  "brightWhite": "#afb0ab"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/material_dark.json b/ui/public/xterm-themes/material_dark.json
new file mode 100644
index 00000000000..6d09aca561d
--- /dev/null
+++ b/ui/public/xterm-themes/material_dark.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#e5e5e5",
+  "background": "#232322",
+  "cursor": "#16afca",
+  "selection": "#e5e5e580",
+  "black": "#040404",
+  "red": "#b7141f",
+  "green": "#457b24",
+  "yellow": "#f6981e",
+  "blue": "#134eb2",
+  "magenta": "#560088",
+  "cyan": "#0e717c",
+  "white": "#efefef",
+  "brightBlack": "#424242",
+  "brightRed": "#e83b3f",
+  "brightGreen": "#7aba3a",
+  "brightYellow": "#ffea2e",
+  "brightBlue": "#54a4f3",
+  "brightMagenta": "#aa4dbc",
+  "brightCyan": "#26bbd1",
+  "brightWhite": "#d9d9d9"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/material_light.json b/ui/public/xterm-themes/material_light.json
new file mode 100644
index 00000000000..41dbddadca2
--- /dev/null
+++ b/ui/public/xterm-themes/material_light.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#2f2f2f",
+  "background": "#eaeaea",
+  "cursor": "#16afca",
+  "selection": "#23232280",
+  "black": "#000000",
+  "red": "#b7141f",
+  "green": "#457b24",
+  "yellow": "#f6981e",
+  "blue": "#134eb2",
+  "magenta": "#560088",
+  "cyan": "#0e717c",
+  "white": "#f5f5f5",
+  "brightBlack": "#424242",
+  "brightRed": "#e83b3f",
+  "brightGreen": "#7aba3a",
+  "brightYellow": "#ffea2e",
+  "brightBlue": "#54a4f3",
+  "brightMagenta": "#aa4dbc",
+  "brightCyan": "#26bbd1",
+  "brightWhite": "#d9d9d9"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/metadata.json b/ui/public/xterm-themes/metadata.json
new file mode 100644
index 00000000000..b593ffbfc2b
--- /dev/null
+++ b/ui/public/xterm-themes/metadata.json
@@ -0,0 +1,263 @@
+[
+  {
+    "name": "ShellHub Dark",
+    "file": "shellhub_dark.json",
+    "dark": true,
+    "preview": {
+      "background": "#18191B",
+      "foreground": "#667ACC"
+    }
+  },
+  {
+    "name": "ShellHub Henry",
+    "file": "shellhub_light.json",
+    "dark": false,
+    "preview": {
+      "background": "#F5F5F5",
+      "foreground": "#667ACC"
+    }
+  },
+  {
+    "name": "Termius Dark",
+    "file": "termius_dark.json",
+    "dark": true,
+    "preview": {
+      "background": "#141729",
+      "foreground": "#21b568"
+    }
+  },
+  {
+    "name": "Termius Light",
+    "file": "termius_light.json",
+    "dark": false,
+    "preview": {
+      "background": "#d5dde0",
+      "foreground": "#32364a"
+    }
+  },
+  {
+    "name": "Atom One Dark",
+    "file": "atom_one_dark.json",
+    "dark": true,
+    "preview": {
+      "background": "#1e2127",
+      "foreground": "#abb2bf"
+    }
+  },
+  {
+    "name": "Atom One Light",
+    "file": "atom_one_light.json",
+    "dark": false,
+    "preview": {
+      "background": "#f9f9f9",
+      "foreground": "#383a42"
+    }
+  },
+  {
+    "name": "Halloween",
+    "file": "halloween.json",
+    "dark": true,
+    "preview": {
+      "background": "#22012b",
+      "foreground": "#e5e5e5"
+    }
+  },
+  {
+    "name": "Dia De Muertos",
+    "file": "dia_de_muertos.json",
+    "dark": false,
+    "preview": {
+      "background": "#fffdf5",
+      "foreground": "#281f63"
+    }
+  },
+  {
+    "name": "Gruvbox Dark",
+    "file": "gruvbox_dark.json",
+    "dark": true,
+    "preview": {
+      "background": "#282828",
+      "foreground": "#ebdbb2"
+    }
+  },
+  {
+    "name": "Gruvbox Light",
+    "file": "gruvbox_light.json",
+    "dark": false,
+    "preview": {
+      "background": "#fbf1c7",
+      "foreground": "#282828"
+    }
+  },
+  {
+    "name": "Material Dark",
+    "file": "material_dark.json",
+    "dark": true,
+    "preview": {
+      "background": "#232322",
+      "foreground": "#e5e5e5"
+    }
+  },
+  {
+    "name": "Material Light",
+    "file": "material_light.json",
+    "dark": false,
+    "preview": {
+      "background": "#eaeaea",
+      "foreground": "#2f2f2f"
+    }
+  },
+  {
+    "name": "Manhattan",
+    "file": "manhattan.json",
+    "dark": true,
+    "preview": {
+      "background": "#0a0a0a",
+      "foreground": "#b8b9b4"
+    }
+  },
+  {
+    "name": "Plastic World",
+    "file": "plastic_world.json",
+    "dark": false,
+    "preview": {
+      "background": "#ff8cd9",
+      "foreground": "#0b0b0b"
+    }
+  },
+  {
+    "name": "Basic",
+    "file": "basic.json",
+    "dark": false,
+    "preview": {
+      "background": "#ffffff",
+      "foreground": "#000000"
+    }
+  },
+  {
+    "name": "Homebrew",
+    "file": "homebrew.json",
+    "dark": true,
+    "preview": {
+      "background": "#000000",
+      "foreground": "#00ff00"
+    }
+  },
+  {
+    "name": "Grass",
+    "file": "grass.json",
+    "dark": true,
+    "preview": {
+      "background": "#13773d",
+      "foreground": "#fff0a5"
+    }
+  },
+  {
+    "name": "Man Page",
+    "file": "man_page.json",
+    "dark": false,
+    "preview": {
+      "background": "#fef49c",
+      "foreground": "#000000"
+    }
+  },
+  {
+    "name": "Novel",
+    "file": "novel.json",
+    "dark": false,
+    "preview": {
+      "background": "#dfdbc3",
+      "foreground": "#3b2322"
+    }
+  },
+  {
+    "name": "Ocean",
+    "file": "ocean.json",
+    "dark": true,
+    "preview": {
+      "background": "#224fbc",
+      "foreground": "#ffffff"
+    }
+  },
+  {
+    "name": "Pro",
+    "file": "pro.json",
+    "dark": true,
+    "preview": {
+      "background": "#000000",
+      "foreground": "#f2f2f2"
+    }
+  },
+  {
+    "name": "Red Sands",
+    "file": "red_sands.json",
+    "dark": true,
+    "preview": {
+      "background": "#7a251e",
+      "foreground": "#d7c9a7"
+    }
+  },
+  {
+    "name": "Solarized Dark",
+    "file": "solarized_dark.json",
+    "dark": true,
+    "preview": {
+      "background": "#002b36",
+      "foreground": "#839496"
+    }
+  },
+  {
+    "name": "Solarized Light",
+    "file": "solarized_light.json",
+    "dark": false,
+    "preview": {
+      "background": "#fdf6e3",
+      "foreground": "#657b83"
+    }
+  },
+  {
+    "name": "Silver Aerogel",
+    "file": "silver_aerogel.json",
+    "dark": false,
+    "preview": {
+      "background": "#919191",
+      "foreground": "#000000"
+    }
+  },
+  {
+    "name": "Dracula",
+    "file": "dracula.json",
+    "dark": true,
+    "preview": {
+      "background": "#282a36",
+      "foreground": "#f8f8f2"
+    }
+  },
+  {
+    "name": "Monokai",
+    "file": "monokai.json",
+    "dark": true,
+    "preview": {
+      "background": "#0c0c0c",
+      "foreground": "#d9d9d9"
+    }
+  },
+  {
+    "name": "Nord Light",
+    "file": "nord_light.json",
+    "dark": false,
+    "preview": {
+      "background": "#e5e9f0",
+      "foreground": "#414858"
+    }
+  },
+  {
+    "name": "Nord Dark",
+    "file": "nord_dark.json",
+    "dark": true,
+    "preview": {
+      "background": "#2e3440",
+      "foreground": "#d8dee9"
+    }
+  }
+]
diff --git a/ui/public/xterm-themes/monokai.json b/ui/public/xterm-themes/monokai.json
new file mode 100644
index 00000000000..d05f0c21fd4
--- /dev/null
+++ b/ui/public/xterm-themes/monokai.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#d9d9d9",
+  "background": "#0c0c0c",
+  "cursor": "#fc971f",
+  "selection": "#d9d9d980",
+  "black": "#1a1a1a",
+  "red": "#dd0056",
+  "green": "#92d526",
+  "yellow": "#fd971f",
+  "blue": "#874deb",
+  "magenta": "#ea095a",
+  "cyan": "#48bfd8",
+  "white": "#c4c5b5",
+  "brightBlack": "#625e4c",
+  "brightRed": "#ff3382",
+  "brightGreen": "#a6f12f",
+  "brightYellow": "#e0d561",
+  "brightBlue": "#9d65ff",
+  "brightMagenta": "#ff116d",
+  "brightCyan": "#58d1eb",
+  "brightWhite": "#f6f6ef"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/nord_dark.json b/ui/public/xterm-themes/nord_dark.json
new file mode 100644
index 00000000000..9ff6d009070
--- /dev/null
+++ b/ui/public/xterm-themes/nord_dark.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#d8dee9",
+  "background": "#2e3440",
+  "cursor": "#eceff4",
+  "selection": "#eceff480",
+  "black": "#3b4252",
+  "red": "#ae545d",
+  "green": "#8ca377",
+  "yellow": "#dabe84",
+  "blue": "#718fae",
+  "magenta": "#95728e",
+  "cyan": "#78acbb",
+  "white": "#d8dee9",
+  "brightBlack": "#4c556a",
+  "brightRed": "#d97982",
+  "brightGreen": "#a3be8b",
+  "brightYellow": "#eacb8a",
+  "brightBlue": "#a4c7e9",
+  "brightMagenta": "#b48dac",
+  "brightCyan": "#8fbcbb",
+  "brightWhite": "#eceff4"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/nord_light.json b/ui/public/xterm-themes/nord_light.json
new file mode 100644
index 00000000000..70bf1b1c243
--- /dev/null
+++ b/ui/public/xterm-themes/nord_light.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#414858",
+  "background": "#e5e9f0",
+  "cursor": "#88c0d0",
+  "selection": "#41485880",
+  "black": "#2c3344",
+  "red": "#ae545d",
+  "green": "#8ca377",
+  "yellow": "#dabe84",
+  "blue": "#718fae",
+  "magenta": "#95728e",
+  "cyan": "#78acbb",
+  "white": "#d8dee9",
+  "brightBlack": "#4c556a",
+  "brightRed": "#d97982",
+  "brightGreen": "#a3be8b",
+  "brightYellow": "#eacb8a",
+  "brightBlue": "#a4c7e9",
+  "brightMagenta": "#b48dac",
+  "brightCyan": "#8fbcbb",
+  "brightWhite": "#eceff4"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/novel.json b/ui/public/xterm-themes/novel.json
new file mode 100644
index 00000000000..a9b9107dfb0
--- /dev/null
+++ b/ui/public/xterm-themes/novel.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#3b2322",
+  "background": "#dfdbc3",
+  "cursor": "#73635a",
+  "selection": "#3b232280",
+  "black": "#000000",
+  "red": "#d30f0f",
+  "green": "#00933b",
+  "yellow": "#d38b40",
+  "blue": "#00528e",
+  "magenta": "#cc32cf",
+  "cyan": "#26c3e6",
+  "white": "#a6a6a6",
+  "brightBlack": "#5c5c5c",
+  "brightRed": "#e0692f",
+  "brightGreen": "#00b400",
+  "brightYellow": "#fff284",
+  "brightBlue": "#3ba6f3",
+  "brightMagenta": "#ec88c2",
+  "brightCyan": "#38daff",
+  "brightWhite": "#f2f2f2"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/ocean.json b/ui/public/xterm-themes/ocean.json
new file mode 100644
index 00000000000..9d361ee89a9
--- /dev/null
+++ b/ui/public/xterm-themes/ocean.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#ffffff",
+  "background": "#224fbc",
+  "cursor": "#7f7f7f",
+  "selection": "#ffffff80",
+  "black": "#000000",
+  "red": "#881616",
+  "green": "#399518",
+  "yellow": "#dda114",
+  "blue": "#00a3ff",
+  "magenta": "#a83aff",
+  "cyan": "#28ccd6",
+  "white": "#d3d3d3",
+  "brightBlack": "#d2d2d2",
+  "brightRed": "#ff7658",
+  "brightGreen": "#00ff47",
+  "brightYellow": "#f5c147",
+  "brightBlue": "#79ceff",
+  "brightMagenta": "#ea6fff",
+  "brightCyan": "#58f4ff",
+  "brightWhite": "#ffffff"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/plastic_world.json b/ui/public/xterm-themes/plastic_world.json
new file mode 100644
index 00000000000..e63930c15bc
--- /dev/null
+++ b/ui/public/xterm-themes/plastic_world.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#0b0b0b",
+  "background": "#ff8cd9",
+  "cursor": "#bafc8b",
+  "selection": "#0b0b0b80",
+  "black": "#303030",
+  "red": "#a80f20",
+  "green": "#99d76d",
+  "yellow": "#eedf4b",
+  "blue": "#145fcd",
+  "magenta": "#ff36a2",
+  "cyan": "#5cbda9",
+  "white": "#c089bb",
+  "brightBlack": "#434343",
+  "brightRed": "#d91329",
+  "brightGreen": "#d3ffaf",
+  "brightYellow": "#ffef50",
+  "brightBlue": "#0075ea",
+  "brightMagenta": "#ffa6ca",
+  "brightCyan": "#79ecd5",
+  "brightWhite": "#fff3fe"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/pro.json b/ui/public/xterm-themes/pro.json
new file mode 100644
index 00000000000..b3bf8b8756c
--- /dev/null
+++ b/ui/public/xterm-themes/pro.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#f2f2f2",
+  "background": "#000000",
+  "cursor": "#4d4d4d",
+  "selection": "#f2f2f280",
+  "black": "#2e2e2e",
+  "red": "#c93434",
+  "green": "#348e48",
+  "yellow": "#e09e00",
+  "blue": "#002bc7",
+  "magenta": "#e235ff",
+  "cyan": "#3fc1dd",
+  "white": "#d0cfcf",
+  "brightBlack": "#5b5b5b",
+  "brightRed": "#ff6767",
+  "brightGreen": "#31ff31",
+  "brightYellow": "#ffdca8",
+  "brightBlue": "#4465da",
+  "brightMagenta": "#ff5fc8",
+  "brightCyan": "#8debff",
+  "brightWhite": "#e6e6e6"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/red_sands.json b/ui/public/xterm-themes/red_sands.json
new file mode 100644
index 00000000000..26c4d2d88bd
--- /dev/null
+++ b/ui/public/xterm-themes/red_sands.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#d7c9a7",
+  "background": "#7a251e",
+  "cursor": "#ffffff",
+  "selection": "#d7c9a780",
+  "black": "#000000",
+  "red": "#d30e0e",
+  "green": "#58aa47",
+  "yellow": "#ffa673",
+  "blue": "#0072ff",
+  "magenta": "#ff57ee",
+  "cyan": "#3bcbea",
+  "white": "#e6e6e6",
+  "brightBlack": "#606060",
+  "brightRed": "#e0692f",
+  "brightGreen": "#b2ffa2",
+  "brightYellow": "#ffc27b",
+  "brightBlue": "#0193fc",
+  "brightMagenta": "#ffbce2",
+  "brightCyan": "#70e4ff",
+  "brightWhite": "#ffffff"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/shellhub_dark.json b/ui/public/xterm-themes/shellhub_dark.json
new file mode 100644
index 00000000000..1ab95d1ede8
--- /dev/null
+++ b/ui/public/xterm-themes/shellhub_dark.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#667ACC",
+  "background": "#18191B",
+  "cursor": "#5c6370",
+  "selection": "#abb2bf80",
+  "black": "#000000",
+  "red": "#ca6169",
+  "green": "#82a568",
+  "yellow": "#bf8c5d",
+  "blue": "#56a2e1",
+  "magenta": "#b76ccd",
+  "cyan": "#4e9aa3",
+  "white": "#c5cbd6",
+  "brightBlack": "#5c6370",
+  "brightRed": "#e77c84",
+  "brightGreen": "#b4e294",
+  "brightYellow": "#e9b17b",
+  "brightBlue": "#7ec5ff",
+  "brightMagenta": "#db8df2",
+  "brightCyan": "#64cfdd",
+  "brightWhite": "#ffffff"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/shellhub_light.json b/ui/public/xterm-themes/shellhub_light.json
new file mode 100644
index 00000000000..d48eacee184
--- /dev/null
+++ b/ui/public/xterm-themes/shellhub_light.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#667ACC",
+  "background": "#F5F5F5",
+  "cursor": "#383a42",
+  "selection": "#383a4280",
+  "black": "#000000",
+  "red": "#e45649",
+  "green": "#4c9b4b",
+  "yellow": "#c99525",
+  "blue": "#4078f2",
+  "magenta": "#a626a4",
+  "cyan": "#0184bc",
+  "white": "#b8b9bf",
+  "brightBlack": "#474747",
+  "brightRed": "#ff7468",
+  "brightGreen": "#74ca72",
+  "brightYellow": "#dba633",
+  "brightBlue": "#6a99ff",
+  "brightMagenta": "#c142bf",
+  "brightCyan": "#00b1fd",
+  "brightWhite": "#ffffff"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/silver_aerogel.json b/ui/public/xterm-themes/silver_aerogel.json
new file mode 100644
index 00000000000..291ffc6be01
--- /dev/null
+++ b/ui/public/xterm-themes/silver_aerogel.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#000000",
+  "background": "#919191",
+  "cursor": "#d9d9d9",
+  "selection": "#00000080",
+  "black": "#262424",
+  "red": "#ca3535",
+  "green": "#09672f",
+  "yellow": "#ffbe73",
+  "blue": "#004582",
+  "magenta": "#cf41e6",
+  "cyan": "#45adce",
+  "white": "#eae9e9",
+  "brightBlack": "#b6b6b6",
+  "brightRed": "#ff7658",
+  "brightGreen": "#57cc5c",
+  "brightYellow": "#fff06b",
+  "brightBlue": "#487bff",
+  "brightMagenta": "#ff60c9",
+  "brightCyan": "#2cc6f7",
+  "brightWhite": "#ffffff"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/solarized_dark.json b/ui/public/xterm-themes/solarized_dark.json
new file mode 100644
index 00000000000..5d10cfd34a9
--- /dev/null
+++ b/ui/public/xterm-themes/solarized_dark.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#839496",
+  "background": "#002b36",
+  "cursor": "#657779",
+  "selection": "#65777980",
+  "black": "#11586a",
+  "red": "#dc322f",
+  "green": "#8ea20a",
+  "yellow": "#b58900",
+  "blue": "#268bd2",
+  "magenta": "#c41f6f",
+  "cyan": "#2aa198",
+  "white": "#e7e0cc",
+  "brightBlack": "#003b4a",
+  "brightRed": "#f15c59",
+  "brightGreen": "#677558",
+  "brightYellow": "#7e7a61",
+  "brightBlue": "#83a8ad",
+  "brightMagenta": "#886cc4",
+  "brightCyan": "#72b6b6",
+  "brightWhite": "#fdf6e3"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/solarized_light.json b/ui/public/xterm-themes/solarized_light.json
new file mode 100644
index 00000000000..4578dc40b12
--- /dev/null
+++ b/ui/public/xterm-themes/solarized_light.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#657b83",
+  "background": "#fdf6e3",
+  "cursor": "#657b83",
+  "selection": "#657b8380",
+  "black": "#073642",
+  "red": "#dc322f",
+  "green": "#8fa30a",
+  "yellow": "#b58900",
+  "blue": "#268bd2",
+  "magenta": "#c41f6f",
+  "cyan": "#2aa198",
+  "white": "#e6e0cb",
+  "brightBlack": "#00252f",
+  "brightRed": "#e05319",
+  "brightGreen": "#667558",
+  "brightYellow": "#7e7960",
+  "brightBlue": "#83a8ad",
+  "brightMagenta": "#886cc4",
+  "brightCyan": "#72b6b6",
+  "brightWhite": "#fff0c7"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/termius_dark.json b/ui/public/xterm-themes/termius_dark.json
new file mode 100644
index 00000000000..f4db79938bf
--- /dev/null
+++ b/ui/public/xterm-themes/termius_dark.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#21b568",
+  "background": "#141729",
+  "cursor": "#21b568",
+  "selection": "#21b56880",
+  "black": "#343851",
+  "red": "#f24e50",
+  "green": "#008463",
+  "yellow": "#eca855",
+  "blue": "#08639f",
+  "magenta": "#c13282",
+  "cyan": "#2091f6",
+  "white": "#e2e3e8",
+  "brightBlack": "#8d91a5",
+  "brightRed": "#ff7375",
+  "brightGreen": "#3ed7be",
+  "brightYellow": "#fdc47d",
+  "brightBlue": "#6ba0c3",
+  "brightMagenta": "#ff7dc5",
+  "brightCyan": "#44a7ff",
+  "brightWhite": "#ffffff"
+}
\ No newline at end of file
diff --git a/ui/public/xterm-themes/termius_light.json b/ui/public/xterm-themes/termius_light.json
new file mode 100644
index 00000000000..8c7a68b2cee
--- /dev/null
+++ b/ui/public/xterm-themes/termius_light.json
@@ -0,0 +1,22 @@
+{
+  "foreground": "#32364a",
+  "background": "#d5dde0",
+  "cursor": "#32364a",
+  "selection": "#32364a80",
+  "black": "#141729",
+  "red": "#f24e50",
+  "green": "#198c51",
+  "yellow": "#f8aa4b",
+  "blue": "#004878",
+  "magenta": "#8f3c91",
+  "cyan": "#2091f6",
+  "white": "#eeeeee",
+  "brightBlack": "#3e4257",
+  "brightRed": "#ff7375",
+  "brightGreen": "#21b568",
+  "brightYellow": "#fdc47d",
+  "brightBlue": "#1d6da2",
+  "brightMagenta": "#ff7dc5",
+  "brightCyan": "#44a7ff",
+  "brightWhite": "#ffffff"
+}
\ No newline at end of file
diff --git a/ui/src/components/MessageDialog.vue b/ui/src/components/MessageDialog.vue
index ce84a1eaf73..da4835e755e 100644
--- a/ui/src/components/MessageDialog.vue
+++ b/ui/src/components/MessageDialog.vue
@@ -28,6 +28,7 @@
         </div>
         <slot name="titlebar-content" />
         <v-spacer />
+        <slot name="titlebar-actions" />
         <v-btn
           v-if="showCloseButton"
           icon="mdi-close"
@@ -35,7 +36,6 @@
           @click="$emit('close')"
           data-test="close-btn-toolbar"
         />
-        <slot name="titlebar-actions" />
       </v-toolbar>
 
       <!-- Content -->
diff --git a/ui/src/components/Terminal/Terminal.vue b/ui/src/components/Terminal/Terminal.vue
index b84a3e532d9..63ae2177b39 100644
--- a/ui/src/components/Terminal/Terminal.vue
+++ b/ui/src/components/Terminal/Terminal.vue
@@ -11,14 +11,31 @@
     :scrollable="false"
     class="bg-terminal h-100"
   >
+    <template #titlebar-actions>
+      <v-btn
+        :icon="showThemeDrawer ? 'mdi-palette' : 'mdi-palette-outline'"
+        variant="text"
+        @click="showThemeDrawer = !showThemeDrawer"
+        data-test="theme-toggle-btn"
+      />
+    </template>
+
     <div class="ma-0 pa-0 w-100 fill-height position-relative">
       <div ref="terminal" class="terminal" data-test="terminal-container" />
+
+      <TerminalThemeDrawer
+        v-model="selectedThemeName"
+        v-model:showDrawer="showThemeDrawer"
+        @update:selected-theme="applyTheme"
+        @update:font-settings="applyFontSettings"
+        data-test="theme-picker"
+      />
     </div>
   </WindowDialog>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import { useEventListener } from "@vueuse/core";
 // Terminal styles and required classes
 import "@xterm/xterm/css/xterm.css";
@@ -30,6 +47,7 @@ import { IParams } from "@/interfaces/IParams";
 import {
   ErrorMessage,
   InputMessage,
+  ITerminalTheme,
   MessageKind,
   ResizeMessage,
   SignatureMessage,
@@ -43,6 +61,8 @@ import {
 
 import handleError from "@/utils/handleError";
 import WindowDialog from "../WindowDialog.vue";
+import TerminalThemeDrawer from "./TerminalThemeDrawer.vue";
+import useTerminalThemeStore from "@/store/modules/terminal_theme";
 
 // Props passed to the component
 const { token, privateKey, passphrase } = defineProps<{
@@ -56,19 +76,35 @@ const emit = defineEmits<{
   close: [];
 }>();
 
+const terminalThemeStore = useTerminalThemeStore();
 const showDialog = defineModel<boolean>({ required: true });
 const terminal = ref<HTMLElement>({} as HTMLElement); // Terminal DOM container
 const xterm = ref<Terminal>({} as Terminal); // xterm.js terminal instance
 const fitAddon = ref<FitAddon>(new FitAddon()); // Auto-fit terminal to container
 const ws = ref<WebSocket>({} as WebSocket); // Active WebSocket connection
+const selectedThemeName = computed({
+  get: () => terminalThemeStore.currentThemeName,
+  set: (value: string) => terminalThemeStore.setTheme(value),
+});
+const showThemeDrawer = ref(false);
+
+const applyTheme = (theme: ITerminalTheme) => {
+  xterm.value.options.theme = theme.colors;
+};
+
+const applyFontSettings = (settings: { fontFamily: string; fontSize: number }) => {
+  xterm.value.options.fontSize = settings.fontSize;
+  xterm.value.options.fontFamily = settings.fontFamily;
+  fitAddon.value.fit();
+};
 
-// Initializes the xterm.js terminal and applies styling and behavior.
 const initializeTerminal = () => {
   xterm.value = new Terminal({
     cursorBlink: true,
-    fontFamily: "monospace",
-    theme: { background: "#0f1526" },
+    fontFamily: terminalThemeStore.currentFontFamily,
+    fontSize: terminalThemeStore.currentFontSize,
   });
+  applyTheme(terminalThemeStore.currentTheme);
   xterm.value.loadAddon(fitAddon.value);
 };
 
@@ -213,7 +249,9 @@ const handleEscKey = (event: KeyboardEvent) => {
 useEventListener("keyup", handleEscKey);
 
 // Lifecycle: Setup terminal and WebSocket calls
-onMounted(() => {
+onMounted(async () => {
+  await terminalThemeStore.loadInitialFont();
+  await terminalThemeStore.loadThemes();
   initializeTerminal();
   setupTerminalEvents();
   xterm.value.open(terminal.value);
diff --git a/ui/src/components/Terminal/TerminalFontPicker.vue b/ui/src/components/Terminal/TerminalFontPicker.vue
new file mode 100644
index 00000000000..4ad5addd492
--- /dev/null
+++ b/ui/src/components/Terminal/TerminalFontPicker.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="d-flex flex-column align-center pa-4">
+    <v-select
+      v-model="currentFontFamily"
+      @update:model-value="updateFontSettings"
+      :items="availableFonts"
+      class="w-100"
+      label="Font Family"
+    />
+    <v-number-input
+      v-model="currentFontSize"
+      @update:model-value="updateFontSettings"
+      control-variant="split"
+      variant="outlined"
+      density="compact"
+      :min="8"
+      :max="32"
+      hide-details
+      inset
+      class="w-100"
+      label="Font Size"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import useTerminalThemeStore from "@/store/modules/terminal_theme";
+
+const emit = defineEmits<{
+  "update:fontSettings": [settings: { fontFamily: string; fontSize: number }];
+}>();
+
+const terminalThemeStore = useTerminalThemeStore();
+const { availableFonts, currentFontFamily, currentFontSize } = storeToRefs(terminalThemeStore);
+
+const updateFontSettings = async () => {
+  await terminalThemeStore.setFontSettings(currentFontFamily.value, currentFontSize.value);
+  emit("update:fontSettings", {
+    fontFamily: currentFontFamily.value,
+    fontSize: currentFontSize.value,
+  });
+};
+</script>
diff --git a/ui/src/components/Terminal/TerminalThemeDrawer.vue b/ui/src/components/Terminal/TerminalThemeDrawer.vue
new file mode 100644
index 00000000000..ef1c09564a3
--- /dev/null
+++ b/ui/src/components/Terminal/TerminalThemeDrawer.vue
@@ -0,0 +1,46 @@
+<template>
+  <v-navigation-drawer
+    v-model="showDrawer"
+    location="right"
+    temporary
+    disable-resize-watcher
+    width="300"
+    class="theme-drawer bg-v-theme-surface"
+    data-test="theme-drawer"
+    elevation="8"
+  >
+    <TerminalFontPicker @update:font-settings="$emit('update:fontSettings', $event)" />
+    <v-divider />
+    <v-list class="pa-0">
+      <TerminalThemePicker
+        v-model="selectedTheme"
+        @update:selected-theme="$emit('update:selectedTheme', $event)"
+      />
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script setup lang="ts">
+import { ITerminalTheme } from "@/interfaces/ITerminal";
+import TerminalFontPicker from "./TerminalFontPicker.vue";
+import TerminalThemePicker from "./TerminalThemePicker.vue";
+
+defineEmits<{
+  "update:selectedTheme": [theme: ITerminalTheme];
+  "update:fontSettings": [settings: { fontFamily: string; fontSize: number }];
+}>();
+
+const selectedTheme = defineModel<string>({ required: true });
+const showDrawer = defineModel<boolean>("showDrawer", { required: true });
+</script>
+
+<style scoped lang="scss">
+.theme-drawer {
+  position: absolute !important;
+  top: 0 !important;
+  right: 0 !important;
+  height: 100% !important;
+  z-index: 2000;
+  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
+}
+</style>
diff --git a/ui/src/components/Terminal/TerminalThemePicker.vue b/ui/src/components/Terminal/TerminalThemePicker.vue
new file mode 100644
index 00000000000..60f6304703a
--- /dev/null
+++ b/ui/src/components/Terminal/TerminalThemePicker.vue
@@ -0,0 +1,108 @@
+<template>
+  <v-list-item v-if="terminalThemes.length === 0" class="text-center py-4" title="No themes available" />
+  <v-list-item
+    v-else
+    v-for="theme in terminalThemes"
+    :key="theme.name"
+    @click="selectTheme(theme)"
+    :class="{ 'v-list-item--active': selectedTheme === theme.name }"
+    class="py-3"
+    data-test="theme-item"
+  >
+    <template #prepend>
+      <div class="theme-preview" :style="getThemePreviewStyle(theme)">
+        <div class="preview-text">
+          <div class="preview-line">$ ls</div>
+          <div class="preview-line dir">file.txt</div>
+          <div class="preview-line file">home</div>
+        </div>
+      </div>
+    </template>
+
+    <v-list-item-title>{{ theme.name }}</v-list-item-title>
+    <v-list-item-subtitle>{{ theme.description }}</v-list-item-subtitle>
+
+    <template #append>
+      <v-icon
+        v-if="selectedTheme === theme.name"
+        color="primary"
+        size="small"
+        icon="mdi-check"
+      />
+    </template>
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { ITerminalTheme } from "@/interfaces/ITerminal";
+import useTerminalThemeStore from "@/store/modules/terminal_theme";
+
+const emit = defineEmits<{
+  "update:selectedTheme": [theme: ITerminalTheme];
+}>();
+
+const terminalThemeStore = useTerminalThemeStore();
+const selectedTheme = defineModel<string>({ required: true });
+const terminalThemes = computed(() => terminalThemeStore.terminalThemes || []);
+
+const selectTheme = (theme: ITerminalTheme) => {
+  selectedTheme.value = theme.name;
+  emit("update:selectedTheme", theme);
+};
+
+const getThemePreviewStyle = (theme: ITerminalTheme) => ({
+  backgroundColor: theme.colors.background,
+  color: theme.colors.foreground,
+  border: `1px solid ${theme.colors.selection || theme.colors.black || "#666"}`,
+});
+</script>
+
+<style scoped lang="scss">
+.theme-preview {
+  width: 60px;
+  height: 40px;
+  border-radius: 4px;
+  padding: 4px;
+  font-family: monospace;
+  font-size: 8px;
+  line-height: 1.2;
+  overflow: hidden;
+  margin-right: 8px;
+  position: relative;
+
+  .preview-text {
+    width: 100%;
+    height: 100%;
+
+    .preview-line {
+      margin-bottom: 1px;
+
+      &.file {
+        opacity: 0.8;
+      }
+
+      &.dir {
+        opacity: 0.6;
+      }
+    }
+  }
+}
+
+.v-list-item {
+  border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+
+  &:hover {
+    background: rgba(var(--v-theme-primary), 0.08);
+  }
+
+  &.v-list-item--active {
+    background: rgba(var(--v-theme-primary), 0.12);
+
+    .v-list-item-title {
+      color: rgb(var(--v-theme-primary));
+      font-weight: 500;
+    }
+  }
+}
+</style>
diff --git a/ui/src/components/WindowDialog.vue b/ui/src/components/WindowDialog.vue
index 8015225b286..72cad82d38f 100644
--- a/ui/src/components/WindowDialog.vue
+++ b/ui/src/components/WindowDialog.vue
@@ -27,6 +27,7 @@
         </div>
         <slot name="titlebar-content" />
         <v-spacer />
+        <slot name="titlebar-actions" />
         <v-btn
           v-if="showCloseButton"
           icon="mdi-close"
@@ -34,7 +35,6 @@
           @click="$emit('close')"
           data-test="close-btn-toolbar"
         />
-        <slot name="titlebar-actions" />
       </v-toolbar>
 
       <!-- Content -->
diff --git a/ui/src/interfaces/ITerminal.ts b/ui/src/interfaces/ITerminal.ts
index 1e5130566ec..9fba1c77d31 100644
--- a/ui/src/interfaces/ITerminal.ts
+++ b/ui/src/interfaces/ITerminal.ts
@@ -51,3 +51,40 @@ export interface ErrorMessage {
   kind: MessageKind.Error;
   data: string; // Error Message Content
 }
+
+export interface ITerminalTheme {
+  name: string;
+  description: string;
+  colors: {
+    background: string;
+    foreground: string;
+    cursor?: string;
+    selection?: string;
+    black?: string;
+    red?: string;
+    green?: string;
+    yellow?: string;
+    blue?: string;
+    magenta?: string;
+    cyan?: string;
+    white?: string;
+    brightBlack?: string;
+    brightRed?: string;
+    brightGreen?: string;
+    brightYellow?: string;
+    brightBlue?: string;
+    brightMagenta?: string;
+    brightCyan?: string;
+    brightWhite?: string;
+  };
+}
+
+export interface IThemeMetadata {
+  name: string;
+  file: string;
+  dark: boolean;
+  preview: {
+    background: string;
+    foreground: string;
+  };
+}
diff --git a/ui/src/main.ts b/ui/src/main.ts
index 3597efd8b55..8d62633020a 100755
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -11,6 +11,13 @@ import App from "./App.vue";
 import "asciinema-player/dist/bundle/asciinema-player.css";
 import "@/nodespecific";
 import { loadFonts } from "./plugins/webfontloader";
+import "@fontsource/fira-code";
+import "@fontsource/source-code-pro";
+import "@fontsource/jetbrains-mono";
+import "@fontsource/ubuntu-mono";
+import "@fontsource/noto-mono";
+import "@fontsource/inconsolata";
+import "@fontsource/anonymous-pro";
 import { SnackbarPlugin } from "./plugins/snackbar";
 
 const pinia = createPinia();
diff --git a/ui/src/store/modules/terminal_theme.ts b/ui/src/store/modules/terminal_theme.ts
new file mode 100644
index 00000000000..94521537084
--- /dev/null
+++ b/ui/src/store/modules/terminal_theme.ts
@@ -0,0 +1,116 @@
+import { defineStore } from "pinia";
+import FontFaceObserver from "fontfaceobserver";
+import { computed, ref } from "vue";
+import axios from "axios";
+import { ITerminalTheme, IThemeMetadata } from "@/interfaces/ITerminal";
+import handleError from "@/utils/handleError";
+
+const fallbackTheme: ITerminalTheme = {
+  name: "Default",
+  description: "Fallback theme",
+  colors: {
+    background: "#0f1526",
+    foreground: "#ffffff",
+  },
+};
+
+const terminalFontFamilies = [
+  "Source Code Pro",
+  "Inconsolata",
+  "Ubuntu Mono",
+  "Fira Code",
+  "Anonymous Pro",
+  "JetBrains Mono",
+  "Noto Mono",
+  "monospace",
+] as const;
+
+export type TerminalFontFamily = typeof terminalFontFamilies[number];
+
+const useTerminalThemeStore = defineStore("terminal-theme", () => {
+  const availableFonts = ref(terminalFontFamilies);
+  const currentFontFamily = ref<TerminalFontFamily>(localStorage.getItem("terminalFontFamily") as TerminalFontFamily || "monospace");
+  const currentFontSize = ref<number>(parseInt(localStorage.getItem("terminalFontSize") || "15", 10));
+
+  const setFontSettings = async (fontFamily: TerminalFontFamily, fontSize: number) => {
+    const font = new FontFaceObserver(fontFamily);
+    try {
+      if (fontFamily !== "monospace") await font.load();
+      currentFontFamily.value = fontFamily;
+      currentFontSize.value = fontSize;
+      localStorage.setItem("terminalFontFamily", fontFamily);
+      localStorage.setItem("terminalFontSize", fontSize.toString());
+    } catch (error) {
+      // Font failed to load, keep current settings
+      handleError(new Error(`Failed to load font ${fontFamily}:`, { cause: error }));
+    }
+  };
+
+  const loadInitialFont = async () => {
+    // No need to load the browser's default monospace font
+    if (currentFontFamily.value === "monospace") return;
+
+    const font = new FontFaceObserver(currentFontFamily.value);
+    try {
+      await font.load();
+    } catch {
+      currentFontFamily.value = "monospace";
+      localStorage.setItem("terminalFontFamily", "monospace");
+    }
+  };
+
+  const terminalThemes = ref<ITerminalTheme[]>();
+  const currentThemeName = ref<string>(localStorage.getItem("terminalTheme") || "ShellHub Dark");
+  const currentTheme = computed(() => terminalThemes.value?.find((theme) => theme.name === currentThemeName.value) || fallbackTheme);
+
+  const loadThemes = async () => {
+    if (terminalThemes.value?.length) return; // Themes already loaded
+
+    try {
+      const { data: metadata } = await axios.get<IThemeMetadata[]>("/xterm-themes/metadata.json");
+
+      const themePromises = metadata.map(async (meta) => {
+        try {
+          const { data: themeColors } = await axios.get(`/xterm-themes/${meta.file}`);
+
+          return {
+            name: meta.name,
+            description: meta.dark ? "Dark theme" : "Light theme",
+            colors: themeColors,
+          };
+        } catch (error) {
+          console.warn(`Failed to load theme ${meta.name}:`, error);
+          return null;
+        }
+      });
+
+      const themes = (await Promise.all(themePromises)).filter(Boolean) as ITerminalTheme[];
+      terminalThemes.value = themes;
+    } catch (error) {
+      handleError(new Error("Failed to load terminal themes.", { cause: error }));
+      currentThemeName.value = fallbackTheme.name;
+      terminalThemes.value = [fallbackTheme];
+    }
+  };
+
+  const setTheme = (themeName: string) => {
+    currentThemeName.value = themeName;
+    localStorage.setItem("terminalTheme", themeName);
+  };
+
+  return {
+    availableFonts,
+    currentFontFamily,
+    currentFontSize,
+    setFontSettings,
+    loadInitialFont,
+
+    terminalThemes,
+    currentThemeName,
+    currentTheme,
+    loadThemes,
+    setTheme,
+  };
+});
+
+export default useTerminalThemeStore;