diff --git a/package-lock.json b/package-lock.json
index 3ed1deb..3887342 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "lodash.throttle": "^4.1.1",
         "mode-watcher": "^0.4.1",
         "print-js": "^1.6.0",
+        "screenfull": "^6.0.2",
         "short-uuid": "^5.2.0",
         "svelte-input-auto-width": "^2.1.0",
         "svelte-radix": "^1.1.1",
@@ -4283,8 +4284,7 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-5.0.4.tgz",
       "integrity": "sha512-BV9NplVgLmSi4mwKzD8BD/NQ8erOY/nUE/GpgWe2ckx+wIQF5RyRirn/QsSSCPeulVpc3RA/iJt6DpfTIZps0Q==",
-      "dev": true,
-      "license": "MIT"
+      "dev": true
     },
     "node_modules/@types/eslint": {
       "version": "9.6.1",
@@ -13836,6 +13836,17 @@
         "rimraf": "^2.5.2"
       }
     },
+    "node_modules/screenfull": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.2.tgz",
+      "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/semantic-release": {
       "version": "24.1.1",
       "resolved": "https://registry.npmjs.org/semantic-release/-/semantic-release-24.1.1.tgz",
diff --git a/package.json b/package.json
index ef2a960..de2d736 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "lodash.throttle": "^4.1.1",
     "mode-watcher": "^0.4.1",
     "print-js": "^1.6.0",
+    "screenfull": "^6.0.2",
     "short-uuid": "^5.2.0",
     "svelte-input-auto-width": "^2.1.0",
     "svelte-radix": "^1.1.1",
diff --git a/src/App.svelte b/src/App.svelte
index 511dc31..0e1e269 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -14,8 +14,10 @@
 </script>
 
 <!-- Actual UI -->
-<MenuBar />
-<Editors />
+<div class="flex h-full flex-col">
+  <MenuBar />
+  <Editors />
+</div>
 
 <!-- Procedually -->
 <SaveDialog />
diff --git a/src/lib/components/Editors.svelte b/src/lib/components/Editors.svelte
index b9e313b..788cf1e 100644
--- a/src/lib/components/Editors.svelte
+++ b/src/lib/components/Editors.svelte
@@ -38,15 +38,17 @@
    * and on PCs when multiple editors are open.
    */
   $: tabsMode = $editors.length > 1;
-  $: tabsClass = tabsMode ? 'h-[calc(100%-96px)] w-full' : 'h-[calc(100%-60px)] w-full';
 </script>
 
 <svelte:window bind:innerWidth />
 
-<Tabs.Root bind:value={$activeTabId} class={tabsClass}>
+<Tabs.Root bind:value={$activeTabId} class="w-full" asChild>
   {#if tabsMode || isXS}
     <div transition:slide>
-      <Tabs.List class="w-full justify-start overflow-x-scroll rounded-t-none py-0.5 shadow">
+      <Tabs.List
+        class="w-full justify-start overflow-x-scroll 
+        rounded-t-none py-0.5 shadow"
+      >
         {#each $editors as editor}
           <Tabs.Trigger value={editor.id} class={tabsMode ? 'pr-1' : ''}>
             <EditorTitle {editor} />
@@ -68,10 +70,11 @@
   {/if}
 
   <!-- Only render one Textarea, which is focused based on selected tab -->
-  <Tabs.Content value={$activeTabId} class="mt-0 h-full">
+  <Tabs.Content asChild value={$activeTabId} class="mt-0 h-full">
     <Textarea
       bind:textarea
-      class="relative h-full w-full resize-none rounded-none !border-none bg-transparent text-base !outline-none !ring-0"
+      class="relative h-full w-full resize-none rounded-none 
+      !border-none bg-transparent text-base !outline-none !ring-0"
       spellcheck={false}
       value={$editors.find((editor) => editor.id === $activeTabId)?.content}
       on:keyup={onTextareaChange}
diff --git a/src/lib/components/MenuBar.svelte b/src/lib/components/MenuBar.svelte
index 1f97c09..3c01057 100644
--- a/src/lib/components/MenuBar.svelte
+++ b/src/lib/components/MenuBar.svelte
@@ -6,6 +6,7 @@
   import { toggleMode } from 'mode-watcher';
   import { fade } from 'svelte/transition';
   import { isTauri } from '$lib';
+  import screenfull from 'screenfull';
 
   interface MenuItems {
     label: string;
@@ -76,7 +77,11 @@
         { label: 'Zoom Out', shortcut: 'Ctrl+Minus' },
         { label: 'Reset Zoom', shortcut: 'Ctrl+0' },
         { type: 'separator' },
-        { label: 'Full Screen', shortcut: 'F11' },
+        {
+          label: 'Full Screen',
+          shortcut: 'F11',
+          onClick: () => screenfull.toggle()
+        },
         { label: 'Dark Mode', onClick: toggleMode }
       ]
     },
@@ -123,7 +128,8 @@
   {#if !isXS && !tabsMode}
     <div
       transition:fade
-      class="max-md:!ml-auto md:absolute md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2"
+      class="max-md:!ml-auto md:absolute md:left-1/2
+      md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2"
     >
       <EditorTitle editor={singleEditor} />
     </div>
diff --git a/src/lib/components/StatusBar.svelte b/src/lib/components/StatusBar.svelte
new file mode 100644
index 0000000..2aa532e
--- /dev/null
+++ b/src/lib/components/StatusBar.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import Separator from '@/components/ui/separator/separator.svelte';
+  import { slide } from 'svelte/transition';
+
+  export let lineNo = 1;
+  export let columnNo = 1;
+  export let characterCount = 0;
+
+  const inAnimation = {
+    duration: 80
+  };
+</script>
+
+<div
+  class="sticky bottom-0 z-10 h-[30px] w-full
+  bg-primary-foreground px-2"
+>
+  <Separator />
+  <p
+    class="flex h-full w-full items-center justify-start
+    divide-x-2 text-sm [&>span]:px-4 first:[&>span]:pl-0 last:[&>span]:pr-0"
+  >
+    <span class="flex items-center justify-center">
+      Line:
+      {#key lineNo}
+        <span in:slide={inAnimation} class="ml-1 inline-block">
+          {lineNo}
+        </span>
+      {/key}
+      , Column:
+      {#key columnNo}
+        <span in:slide={inAnimation} class="ml-1 inline-block">
+          {columnNo}
+        </span>
+      {/key}
+    </span>
+
+    <span class="flex items-center justify-center">
+      {#key characterCount}
+        <span in:slide={inAnimation} class="mr-1 inline-block">
+          {characterCount}
+        </span>
+      {/key}
+      {characterCount <= 1 ? 'Character' : 'Characters'}
+    </span>
+
+    <span class="ml-auto">100%</span>
+  </p>
+</div>
diff --git a/src/lib/components/ui/menubar/menubar-checkbox-item.svelte b/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
index 43c83b3..1add164 100644
--- a/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
+++ b/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
@@ -24,7 +24,10 @@
   on:pointermove
   on:pointerdown
 >
-  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+  <span
+    class="absolute left-2 flex h-3.5 w-3.5
+    items-center justify-center"
+  >
     <MenubarPrimitive.CheckboxIndicator>
       <Check class="h-4 w-4" />
     </MenubarPrimitive.CheckboxIndicator>
diff --git a/src/lib/components/ui/menubar/menubar-radio-item.svelte b/src/lib/components/ui/menubar/menubar-radio-item.svelte
index 4098f04..38af1aa 100644
--- a/src/lib/components/ui/menubar/menubar-radio-item.svelte
+++ b/src/lib/components/ui/menubar/menubar-radio-item.svelte
@@ -25,7 +25,10 @@
   on:pointermove
   on:pointerdown
 >
-  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+  <span
+    class="absolute left-2 flex h-3.5 w-3.5
+    items-center justify-center"
+  >
     <MenubarPrimitive.RadioIndicator>
       <DotFilled class="h-4 w-4 fill-current" />
     </MenubarPrimitive.RadioIndicator>
diff --git a/src/lib/components/ui/textarea/textarea.svelte b/src/lib/components/ui/textarea/textarea.svelte
index 7d7427b..0f73f73 100644
--- a/src/lib/components/ui/textarea/textarea.svelte
+++ b/src/lib/components/ui/textarea/textarea.svelte
@@ -4,14 +4,16 @@
   import { cn } from '@/utils.js';
   import { onMount } from 'svelte';
   import throttle from 'lodash.throttle';
-  import Separator from '@/components/ui/separator/separator.svelte';
+  import StatusBar from '@/components/StatusBar.svelte';
 
   export let textarea: HTMLTextAreaElement | null = null;
 
   let fakeCaret: HTMLDivElement | null = null;
   let caretPosition = { top: 10, left: 8, height: 24 };
   let lineNo = 1;
-  let column = 1;
+  let columnNo = 1;
+  let characterCount = 0;
+
   // Import the textarea-caret module
   let getCaretCoordinates: any;
   let updateScheduled = false; // Flag to track if update is already scheduled
@@ -23,7 +25,7 @@
     textarea?.focus();
   });
 
-  function updateLineAndColumn() {
+  function updateTextAreaInfo() {
     if (textarea) {
       const caretPosition = textarea.selectionStart;
       const textBeforeCaret = textarea.value.slice(0, caretPosition);
@@ -32,7 +34,10 @@
       lineNo = textBeforeCaret.split('\n').length;
 
       // Calculate column (length of last line before caret)
-      column = textBeforeCaret.length - textBeforeCaret.lastIndexOf('\n');
+      columnNo = textBeforeCaret.length - textBeforeCaret.lastIndexOf('\n');
+
+      // Update character count
+      characterCount = textarea.value.length; // Update character count
     }
   }
 
@@ -52,7 +57,7 @@
           };
 
           // Update line and column numbers
-          updateLineAndColumn();
+          updateTextAreaInfo();
         }
         updateScheduled = false;
       });
@@ -108,17 +113,14 @@
     style="top: calc({caretPosition.top}px - 2px); left: {caretPosition.left}px; height: {caretPosition.height}px;"
   />
 </div>
-<div class="absolute bottom-0 z-10 h-[24px] w-full bg-primary-foreground px-1">
-  <Separator />
-  <p class="flex h-full w-full items-center justify-start text-sm">
-    Line: {lineNo}, Column: {column}
-  </p>
-</div>
+
+<StatusBar {lineNo} {columnNo} {characterCount} />
 
 <style>
   .fake-caret {
     @apply absolute z-0 w-0.5 rounded-[2px] bg-primary duration-75;
   }
+
   @keyframes blink {
     0% {
       opacity: 1;