diff --git a/agdb_studio/src/assets/main.css b/agdb_studio/src/assets/main.css
index df7b4bcf..c0b370a5 100644
--- a/agdb_studio/src/assets/main.css
+++ b/agdb_studio/src/assets/main.css
@@ -49,5 +49,7 @@ ul {
     }
 }
 
-@media (min-width: 1024px) {
+.emphesized {
+    color: #ff8800;
+    font-weight: bold;
 }
diff --git a/agdb_studio/src/components/base/modal/AgdbModal.spec.ts b/agdb_studio/src/components/base/modal/AgdbModal.spec.ts
index 63086964..38071d76 100644
--- a/agdb_studio/src/components/base/modal/AgdbModal.spec.ts
+++ b/agdb_studio/src/components/base/modal/AgdbModal.spec.ts
@@ -2,6 +2,7 @@ import { describe, beforeEach, it, expect } from "vitest";
 import useModal from "@/composables/modal/modal";
 import AgdbModal from "./AgdbModal.vue";
 import { mount } from "@vue/test-utils";
+import { convertArrayOfStringsToContent } from "@/utils/content";
 
 describe("AgdbModal", () => {
     const { showModal, hideModal } = useModal();
@@ -14,7 +15,7 @@ describe("AgdbModal", () => {
         expect(wrapper.isVisible()).toBe(false);
         showModal({
             header: "Test Header",
-            body: ["Test Body"],
+            content: convertArrayOfStringsToContent(["Test Body"]),
         });
         await wrapper.vm.$nextTick();
         expect(wrapper.isVisible()).toBe(true);
@@ -22,7 +23,7 @@ describe("AgdbModal", () => {
     it("hides a modal when clicked on close button", async () => {
         showModal({
             header: "Test Header",
-            body: ["Test Body"],
+            content: convertArrayOfStringsToContent(["Test Body"]),
         });
         await wrapper.vm.$nextTick();
         await wrapper.find(".modal-footer .button").trigger("click");
@@ -32,7 +33,7 @@ describe("AgdbModal", () => {
     it("hides a modal when clicked on close button in heades", async () => {
         showModal({
             header: "Test Header",
-            body: ["Test Body"],
+            content: convertArrayOfStringsToContent(["Test Body"]),
         });
         await wrapper.vm.$nextTick();
         await wrapper.find(".modal-header .close-button").trigger("click");
@@ -42,7 +43,7 @@ describe("AgdbModal", () => {
     it("shows a modal with custom buttons", async () => {
         showModal({
             header: "Test Header",
-            body: ["Test Body"],
+            content: convertArrayOfStringsToContent(["Test Body"]),
             buttons: [
                 {
                     className: "button",
diff --git a/agdb_studio/src/components/base/modal/AgdbModal.vue b/agdb_studio/src/components/base/modal/AgdbModal.vue
index dad34c4c..c78cc594 100644
--- a/agdb_studio/src/components/base/modal/AgdbModal.vue
+++ b/agdb_studio/src/components/base/modal/AgdbModal.vue
@@ -2,21 +2,28 @@
 import useModal from "@/composables/modal/modal";
 import { ClCloseMd } from "@kalimahapps/vue-icons";
 
-const { content, buttons, hideModal, modalIsVisible } = useModal();
+const { modal, buttons, hideModal, modalIsVisible } = useModal();
 </script>
 
 <template>
     <div v-if="modalIsVisible" class="modal-background">
         <section class="modal">
             <header class="modal-header">
-                <h3>{{ content.header }}</h3>
+                <h3>{{ modal.header }}</h3>
                 <button @click="hideModal" class="close-button">
                     <ClCloseMd />
                 </button>
             </header>
             <div class="modal-body">
-                <p v-for="(paragraph, index) in content.body" :key="index">
-                    {{ paragraph }}
+                <p v-for="(paragraph, index) in modal.content" :key="index">
+                    <span
+                        v-for="(text, index2) in paragraph.paragraph"
+                        :key="index2"
+                        :style="text.style"
+                        :class="text.className"
+                    >
+                        {{ text.text }}
+                    </span>
                 </p>
             </div>
             <footer class="modal-footer">
diff --git a/agdb_studio/src/components/base/table/AgdbCellMenu.spec.ts b/agdb_studio/src/components/base/table/AgdbCellMenu.spec.ts
index 78eff1f1..1b56a6bb 100644
--- a/agdb_studio/src/components/base/table/AgdbCellMenu.spec.ts
+++ b/agdb_studio/src/components/base/table/AgdbCellMenu.spec.ts
@@ -4,6 +4,7 @@ import { describe, beforeEach, vi, it, expect } from "vitest";
 import { dbActions } from "@/composables/db/dbConfig";
 import { INJECT_KEY_ROW } from "@/composables/table/constants";
 import useModal from "@/composables/modal/modal";
+import { convertArrayOfStringsToContent } from "@/utils/content";
 const { fetchDatabases } = vi.hoisted(() => {
     return {
         fetchDatabases: vi.fn(),
@@ -84,10 +85,10 @@ describe("AgdbCellMenu", () => {
     });
     it("should open the modal on click when confirmation is required", async () => {
         const deleteAction = vi.fn();
-        const deleteConfirmation = [
+        const deleteConfirmation = convertArrayOfStringsToContent([
             "Are you sure you want to delete this database?",
             "This will permanently delete all data.",
-        ];
+        ]);
         const wrapper = mount(AgdbCellMenu, {
             props: {
                 actions: [
diff --git a/agdb_studio/src/components/base/table/AgdbCellMenu.vue b/agdb_studio/src/components/base/table/AgdbCellMenu.vue
index 8bddd4e8..6a2580f9 100644
--- a/agdb_studio/src/components/base/table/AgdbCellMenu.vue
+++ b/agdb_studio/src/components/base/table/AgdbCellMenu.vue
@@ -35,7 +35,7 @@ const mapActions = (actions: Action[]): Action[] => {
                   ? ({ event }: ActionProps<undefined>) =>
                         showModal({
                             header: "Confirm action",
-                            body: action.confirmation,
+                            content: action.confirmation,
                             onConfirm: () =>
                                 runAction({ event, params: undefined }),
                         })
diff --git a/agdb_studio/src/composables/db/dbConfig.ts b/agdb_studio/src/composables/db/dbConfig.ts
index 5e9c553d..5f2b79ca 100644
--- a/agdb_studio/src/composables/db/dbConfig.ts
+++ b/agdb_studio/src/composables/db/dbConfig.ts
@@ -1,6 +1,7 @@
 import type { ServerDatabase } from "agdb_api/dist/openapi";
 import { client } from "@/services/api.service";
 import { dateFormatter } from "@/composables/table/utils";
+import { convertArrayOfStringsToContent } from "@/utils/content";
 
 type DbActionProps = ActionProps<ServerDatabase>;
 const dbActions: Action[] = [
@@ -17,8 +18,13 @@ const dbActions: Action[] = [
         label: "Backup",
         action: ({ params }: DbActionProps) => client.value?.db_backup(params),
         confirmation: [
-            "Are you sure you want to backup this database?",
-            "This will swap the existing backup with the current db.",
+            ...convertArrayOfStringsToContent(
+                ["Are you sure you want to backup this database?"],
+                { emphesizedWords: ["backup"] },
+            ),
+            ...convertArrayOfStringsToContent([
+                "This will swap the existing backup with the current db.",
+            ]),
         ],
     },
     {
@@ -30,38 +36,50 @@ const dbActions: Action[] = [
                 label: "All",
                 action: ({ params }: DbActionProps) =>
                     client.value?.db_clear({ ...params, resource: "all" }),
-                confirmation: [
-                    "Are you sure you want to clear all resources of this database?",
-                    "This will reset the database.",
-                ],
+                confirmation: convertArrayOfStringsToContent(
+                    [
+                        "Are you sure you want to clear all resources of this database?",
+                        "This will reset the database.",
+                    ],
+                    { emphesizedWords: ["clear", "all"] },
+                ),
             },
             {
                 key: "db",
                 label: "Db only",
                 action: ({ params }: DbActionProps) =>
                     client.value?.db_clear({ ...params, resource: "db" }),
-                confirmation: [
-                    "Are you sure you want to clear this database?",
-                    "This will remove all data.",
-                ],
+                confirmation: convertArrayOfStringsToContent(
+                    [
+                        "Are you sure you want to clear this database?",
+                        "This will remove all data.",
+                    ],
+                    { emphesizedWords: ["clear", "database"] },
+                ),
             },
             {
                 key: "audit",
                 label: "Audit only",
                 action: ({ params }: DbActionProps) =>
                     client.value?.db_clear({ ...params, resource: "audit" }),
-                confirmation: [
-                    "Are you sure you want to clear the audit log of this database?",
-                ],
+                confirmation: convertArrayOfStringsToContent(
+                    [
+                        "Are you sure you want to clear the audit log of this database?",
+                    ],
+                    { emphesizedWords: ["clear", "audit"] },
+                ),
             },
             {
                 key: "backup",
                 label: "Backup only",
                 action: ({ params }: DbActionProps) =>
                     client.value?.db_clear({ ...params, resource: "backup" }),
-                confirmation: [
-                    "Are you sure you want to clear the backup of this database?",
-                ],
+                confirmation: convertArrayOfStringsToContent(
+                    [
+                        "Are you sure you want to clear the backup of this database?",
+                    ],
+                    { emphesizedWords: ["clear", "backup"] },
+                ),
             },
         ],
     },
@@ -74,27 +92,36 @@ const dbActions: Action[] = [
                 label: "Memory",
                 action: ({ params }: DbActionProps) =>
                     client.value?.db_convert({ ...params, db_type: "memory" }),
-                confirmation: [
-                    "Are you sure you want to convert this database to memory only?",
-                ],
+                confirmation: convertArrayOfStringsToContent(
+                    [
+                        "Are you sure you want to convert this database to memory only?",
+                    ],
+                    { emphesizedWords: ["convert", "memory"] },
+                ),
             },
             {
                 key: "file",
                 label: "File",
                 action: ({ params }: DbActionProps) =>
                     client.value?.db_convert({ ...params, db_type: "file" }),
-                confirmation: [
-                    "Are you sure you want to convert this database to file based database?",
-                ],
+                confirmation: convertArrayOfStringsToContent(
+                    [
+                        "Are you sure you want to convert this database to file based database?",
+                    ],
+                    { emphesizedWords: ["convert", "file"] },
+                ),
             },
             {
                 key: "mapped",
                 label: "Mapped",
                 action: ({ params }: DbActionProps) =>
                     client.value?.db_convert({ ...params, db_type: "mapped" }),
-                confirmation: [
-                    "Are you sure you want to convert this database to memory mapped database?",
-                ],
+                confirmation: convertArrayOfStringsToContent(
+                    [
+                        "Are you sure you want to convert this database to memory mapped database?",
+                    ],
+                    { emphesizedWords: ["convert", "mapped"] },
+                ),
             },
         ],
     },
@@ -109,8 +136,14 @@ const dbActions: Action[] = [
         label: "Delete",
         action: ({ params }: DbActionProps) => client.value?.db_delete(params),
         confirmation: [
-            "Are you sure you want to delete this database?",
-            "This will permanently delete all data.",
+            ...convertArrayOfStringsToContent(
+                ["Are you sure you want to delete this database?"],
+                { emphesizedWords: ["delete"] },
+            ),
+            ...convertArrayOfStringsToContent(
+                ["This will permanently delete all data."],
+                { emphesizedWords: ["all data"] },
+            ),
         ],
     },
     {
@@ -118,17 +151,23 @@ const dbActions: Action[] = [
         label: "Optimize",
         action: ({ params }: DbActionProps) =>
             client.value?.db_optimize(params),
-        confirmation: ["Are you sure you want to optimize this database?"],
+        confirmation: convertArrayOfStringsToContent(
+            ["Are you sure you want to optimize this database?"],
+            { emphesizedWords: ["optimize"] },
+        ),
     },
 
     {
         key: "remove",
         label: "Remove",
         action: ({ params }: DbActionProps) => client.value?.db_remove(params),
-        confirmation: [
-            "Are you sure you want to remove this database?",
-            "This will only disassociate the database from the server. No data will be deleted.",
-        ],
+        confirmation: convertArrayOfStringsToContent(
+            [
+                "Are you sure you want to remove this database?",
+                "This will only disassociate the database from the server. No data will be deleted.",
+            ],
+            { emphesizedWords: ["remove"] },
+        ),
     },
     // todo: implement input for db name
     // {
@@ -140,10 +179,13 @@ const dbActions: Action[] = [
         key: "restore",
         label: "Restore",
         action: ({ params }: DbActionProps) => client.value?.db_restore(params),
-        confirmation: [
-            "Are you sure you want to restore backup of this database?",
-            "This will swap the existing db with the backup.",
-        ],
+        confirmation: convertArrayOfStringsToContent(
+            [
+                "Are you sure you want to restore backup of this database?",
+                "This will swap the existing db with the backup.",
+            ],
+            { emphesizedWords: ["restore"] },
+        ),
     },
 ];
 
diff --git a/agdb_studio/src/composables/modal/modal.spec.ts b/agdb_studio/src/composables/modal/modal.spec.ts
index 2a85b518..9989f878 100644
--- a/agdb_studio/src/composables/modal/modal.spec.ts
+++ b/agdb_studio/src/composables/modal/modal.spec.ts
@@ -1,5 +1,6 @@
 import { describe, beforeEach, vi, it, expect } from "vitest";
 import useModal from "./modal";
+import { convertArrayOfStringsToContent } from "@/utils/content";
 
 describe("Modal", () => {
     const { showModal, hideModal } = useModal();
@@ -9,14 +10,14 @@ describe("Modal", () => {
     it("shows a modal", () => {
         showModal({
             header: "Test Header",
-            body: ["Test Body"],
+            content: convertArrayOfStringsToContent(["Test Body"]),
         });
         expect(useModal().modalIsVisible.value).toBe(true);
     });
     it("hides a modal", () => {
         showModal({
             header: "Test Header",
-            body: ["Test Body"],
+            content: convertArrayOfStringsToContent(["Test Body"]),
         });
         hideModal();
         expect(useModal().modalIsVisible.value).toBe(false);
@@ -24,7 +25,7 @@ describe("Modal", () => {
     it("shows a modal with custom buttons", () => {
         showModal({
             header: "Test Header",
-            body: ["Test Body"],
+            content: convertArrayOfStringsToContent(["Test Body"]),
             buttons: [
                 {
                     className: "button",
@@ -40,16 +41,16 @@ describe("Modal", () => {
         const onConfirm = vi.fn();
         showModal({
             header: "Test Header",
-            body: ["Test Body"],
+            content: convertArrayOfStringsToContent(["Test Body"]),
             onConfirm,
         });
         useModal().buttons.value[1].action();
         expect(onConfirm).toHaveBeenCalled();
         expect(useModal().modalIsVisible.value).toBe(false);
     });
-    it("sets default if no header or body is provided", () => {
+    it("sets default if no header or content is provided", () => {
         showModal({});
-        expect(useModal().content.header).toBe("");
-        expect(useModal().content.body).toHaveLength(0);
+        expect(useModal().modal.header).toBe("");
+        expect(useModal().modal.content).toHaveLength(0);
     });
 });
diff --git a/agdb_studio/src/composables/modal/modal.ts b/agdb_studio/src/composables/modal/modal.ts
index 3a991474..9693acfa 100644
--- a/agdb_studio/src/composables/modal/modal.ts
+++ b/agdb_studio/src/composables/modal/modal.ts
@@ -1,12 +1,9 @@
 import { computed, reactive, ref } from "vue";
+import type { Button, Modal } from "./types";
 
-type Modal = {
-    header: string;
-    body: string[];
-};
-const content = reactive<Modal>({
+const modal = reactive<Modal>({
     header: "",
-    body: [],
+    content: [],
 });
 
 const modalIsVisible = ref(false);
@@ -14,17 +11,11 @@ const modalIsVisible = ref(false);
 const onConfirm = ref<() => void>();
 
 const hideModal = () => {
-    content.header = "";
-    content.body = [];
+    modal.header = "";
+    modal.content = [];
     modalIsVisible.value = false;
 };
 
-type Button = {
-    className: string;
-    text: string;
-    action: () => void;
-};
-
 const customButtons = ref<Button[]>([]);
 
 const buttons = computed<Button[]>(() => {
@@ -50,20 +41,19 @@ const buttons = computed<Button[]>(() => {
 
 type ShowModalProps = {
     header?: string;
-    body?: string[];
-    footer?: string;
+    content?: Content[];
     onConfirm?: () => void;
     buttons?: Button[];
 };
 
 const showModal = ({
     header,
-    body,
+    content,
     onConfirm: onConfirmFn,
     buttons: extraButtons,
 }: ShowModalProps) => {
-    content.header = header ?? "";
-    content.body = body ?? [];
+    modal.header = header ?? "";
+    modal.content = content ?? [];
     onConfirm.value = onConfirmFn;
     modalIsVisible.value = true;
     customButtons.value = extraButtons || [];
@@ -71,7 +61,7 @@ const showModal = ({
 
 export default function useModal() {
     return {
-        content,
+        modal,
         buttons,
         modalIsVisible,
         hideModal,
diff --git a/agdb_studio/src/composables/modal/types.ts b/agdb_studio/src/composables/modal/types.ts
new file mode 100644
index 00000000..f21e421b
--- /dev/null
+++ b/agdb_studio/src/composables/modal/types.ts
@@ -0,0 +1,10 @@
+export type Modal = {
+    header: string;
+    content: Content[];
+};
+
+export type Button = {
+    className: string;
+    text: string;
+    action: () => void;
+};
diff --git a/agdb_studio/src/types/base.d.ts b/agdb_studio/src/types/base.d.ts
index c1e68914..fddc01fe 100644
--- a/agdb_studio/src/types/base.d.ts
+++ b/agdb_studio/src/types/base.d.ts
@@ -8,10 +8,20 @@ type ActionProps<T> = {
 };
 type ActionFn<T> = ({ event, params }: ActionProps<T>) => void;
 
+type Paragraph = {
+    text: string;
+    style?: StyleObject;
+    className?: string;
+};
+type Content = {
+    paragraph?: Paragraph[];
+    component?: string;
+};
+
 type Action = {
     key: string;
     label: string;
     action?: ActionFn;
     actions?: Action[];
-    confirmation?: string[];
+    confirmation?: Content[];
 };
diff --git a/agdb_studio/src/utils/content.spec.ts b/agdb_studio/src/utils/content.spec.ts
new file mode 100644
index 00000000..10d473bd
--- /dev/null
+++ b/agdb_studio/src/utils/content.spec.ts
@@ -0,0 +1,50 @@
+import { describe, it, expect } from "vitest";
+import { convertArrayOfStringsToContent } from "@/utils/content";
+
+describe("Content utils", () => {
+    it("converts an array of strings to content", () => {
+        const content = convertArrayOfStringsToContent([
+            "Test Body",
+            "Test Body 2",
+        ]);
+        expect(content).toEqual([
+            {
+                paragraph: [
+                    {
+                        text: "Test Body",
+                    },
+                ],
+            },
+            {
+                paragraph: [
+                    {
+                        text: "Test Body 2",
+                    },
+                ],
+            },
+        ]);
+    });
+
+    it("emphesizes words in a text", () => {
+        const content = convertArrayOfStringsToContent(["Next test Body"], {
+            emphesizedWords: ["test"],
+        });
+        console.log(content);
+        expect(content).toEqual([
+            {
+                paragraph: [
+                    {
+                        text: "Next ",
+                    },
+                    {
+                        text: "test",
+                        className: "emphesized",
+                    },
+                    {
+                        text: " Body",
+                    },
+                ],
+            },
+        ]);
+    });
+});
diff --git a/agdb_studio/src/utils/content.ts b/agdb_studio/src/utils/content.ts
new file mode 100644
index 00000000..b10a1a18
--- /dev/null
+++ b/agdb_studio/src/utils/content.ts
@@ -0,0 +1,28 @@
+type ConvertParams = {
+    emphesizedWords?: string[];
+};
+
+const emphesizeWords = (text: string, words: string[]): Paragraph[] => {
+    const parts = text.split(new RegExp(`(${words.join("|")})`, "g"));
+
+    return parts.map((part) => {
+        if (words.includes(part)) {
+            return { text: part, className: "emphesized" };
+        }
+        return { text: part };
+    });
+};
+
+const convertArrayOfStringsToContent = (
+    array: string[],
+    params: ConvertParams | undefined = undefined,
+): Content[] => {
+    return array.map((text) => {
+        if (params?.emphesizedWords) {
+            return { paragraph: emphesizeWords(text, params.emphesizedWords) };
+        }
+        return { paragraph: [{ text }] };
+    });
+};
+
+export { convertArrayOfStringsToContent };