diff --git a/src/content/admin/EditPagesComponent.vue b/src/content/admin/EditPagesComponent.vue
index cc83ecb..b5ee249 100644
--- a/src/content/admin/EditPagesComponent.vue
+++ b/src/content/admin/EditPagesComponent.vue
@@ -8,29 +8,29 @@
       </select>
     </div>
     <div class="toolbar">
-      <button @click="toggleHeading(3)">H3</button>
-      <button @click="toggleHeading(4)">H4</button>
-      <button @click="toggleHeading(5)">H5</button>
-      <button @click="toggleHeading(6)">H6</button>
-      <button @click="toggleBold()" width="24" height="24">
+      <button @click="toggleHeading(3)" :class="{ 'is-active': editor && editor.isActive('heading', { level: 3 }) }">H3</button>
+      <button @click="toggleHeading(4)" :class="{ 'is-active': editor && editor.isActive('heading', { level: 4 }) }">H4</button>
+      <button @click="toggleHeading(5)" :class="{ 'is-active': editor && editor.isActive('heading', { level: 5 }) }">H5</button>
+      <button @click="toggleHeading(6)" :class="{ 'is-active': editor && editor.isActive('heading', { level: 6 }) }">H6</button>
+      <button @click="toggleBold()" :class="{ 'is-active': editor && editor.isActive('bold') }" width="24" height="24">
         <BoldIcon width="24" height="24" />
       </button>
-      <button @click="toggleItalic()">
+      <button @click="toggleItalic()" :class="{ 'is-active': editor && editor.isActive('italic') }">
         <ItalicIcon width="24" height="24" />
       </button>
-      <button @click="toggleUnderline()">
+      <button @click="toggleUnderline()" :class="{ 'is-active': editor && editor.isActive('underline') }">
         <UnderlineIcon width="24" height="24" />
       </button>
-      <button @click="toggleStrike()">
+      <button @click="toggleStrike()" :class="{ 'is-active': editor && editor.isActive('strike') }">
         <StrikethroughIcon width="24" height="24" />
       </button>
       <button @click="insertTable()">
         <TableIcon width="24" height="24" />
       </button>
-      <button @click="toggleBulletList()">
+      <button @click="toggleBulletList()" :class="{ 'is-active': editor && editor.isActive('bulletList') }">
         <ListIcon width="24" height="24" />
       </button>
-      <button @click="toggleOrderedList()">
+      <button @click="toggleOrderedList()" :class="{ 'is-active': editor && editor.isActive('orderedList') }">
         <NumberedListLeftIcon width="24" height="24" />
       </button>
       <button @click="openAddImageDialog">
@@ -511,4 +511,16 @@ export default {
 .align-top {
   vertical-align: top;
 }
+
+.toolbar button.is-active,
+.table-toolbar button.is-active {
+  background-color: #4CAF50;
+  color: white;
+  border: 2px solid #2E7D32;
+}
+
+.toolbar button.is-active svg,
+.table-toolbar button.is-active svg {
+  fill: white;
+}
 </style>