diff --git a/src/commands.ts b/src/commands.ts
deleted file mode 100644
index 55c3f9f..0000000
--- a/src/commands.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { EditorView } from "@codemirror/view";
-import { Command } from "./types";
-
-// Default commands that will be available if no custom commands are defined
-export const defaultCommands: Command[] = [
-    {
-        label: "Bold",
-        detail: "Apply bold formatting",
-        info: "Wrap the selected text in double asterisks (**bold**).",
-        apply: (view: EditorView) => {
-            const { state } = view;
-            const { from, to } = state.selection.main;
-            const selectedText = state.sliceDoc(from, to);
-            const replacement = `**${selectedText}**`;
-
-            view.dispatch({
-                changes: { from, to, insert: replacement },
-                selection: { anchor: from + 2, head: from + 2 + selectedText.length }
-            });
-        }
-    },
-    {
-        label: "Italic",
-        detail: "Apply italic formatting",
-        info: "Wrap the selected text in single asterisks (*italic*).",
-        apply: (view: EditorView) => {
-            const { state } = view;
-            const { from, to } = state.selection.main;
-            const selectedText = state.sliceDoc(from, to);
-            const replacement = `*${selectedText}*`;
-
-            view.dispatch({
-                changes: { from, to, insert: replacement },
-                selection: { anchor: from + 1, head: from + 1 + selectedText.length }
-            });
-        }
-    }
-];
-
-// Function to convert a custom command to a Command object
-export function createCustomCommand(name: string, prompt: string): Command {
-    return {
-        label: name,
-        detail: "Custom command",
-        info: prompt,
-        apply: (view: EditorView) => {
-            const { state } = view;
-            const { from, to } = state.selection.main;
-            const selectedText = state.sliceDoc(from, to);
-            
-            // Here you would typically handle the custom command
-            // For now, we'll just wrap it in a special syntax
-            const replacement = `{{${name}:${selectedText}}}`;
-            
-            view.dispatch({
-                changes: { from, to, insert: replacement }
-            });
-        }
-    };
-}
diff --git a/src/modules/commands/commands.ts b/src/modules/commands/commands.ts
index d4a4251..20ad5c1 100644
--- a/src/modules/commands/commands.ts
+++ b/src/modules/commands/commands.ts
@@ -1,4 +1,13 @@
-export const slashCommands = [
+import { EditorView } from "@codemirror/view"
+
+export interface SlashCommand {
+  label: string;
+  detail: string;
+  info: string;
+  apply: (view: EditorView) => void;
+}
+
+export const slashCommands: SlashCommand[] = [
     {
       label: "Bold",
       detail: "Apply bold formatting",
diff --git a/src/modules/commands/source.ts b/src/modules/commands/source.ts
index 3ada37a..4211162 100644
--- a/src/modules/commands/source.ts
+++ b/src/modules/commands/source.ts
@@ -1,13 +1,14 @@
 import { autocompletion, CompletionContext } from "@codemirror/autocomplete"
+import { SlashCommand, slashCommands } from "./commands";
 
 
 // Factory function that creates a completion source with custom parameters
 function createSlashCommandSource(options: {
   prefix?: string,
-  customCommands: Array<{ label: string, type: string }>
+  customCommands: SlashCommand[]
 } = { 
   prefix: '/', 
-  customCommands: []
+  customCommands: slashCommands
 }) {
   const { prefix, customCommands } = options;
   console.log(prefix, customCommands)
@@ -26,6 +27,8 @@ function createSlashCommandSource(options: {
 }
 
 // Create the extension that uses our custom completion source.
-export const slashCommandAutocompletion = (options = { customCommands: [] }) => autocompletion({
-  override: [createSlashCommandSource(options)]
-})
+export function slashCommandAutocompletion(options: { prefix?: string, customCommands: SlashCommand[] } = { customCommands: [] }) {
+  return autocompletion({
+    override: [createSlashCommandSource(options)]
+  })
+}
diff --git a/src/settings.ts b/src/settings.ts
index 4e7cf6a..23bd0ab 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -10,6 +10,7 @@ export interface InlineAISettings {
 	customURL?: string; // Add a custom URL field
 	selectionPrompt: string;
 	cursorPrompt: string;
+	customCommands: { name: string; prompt: string }[]; // Add custom commands array
 }
 
 // Default settings values
@@ -20,6 +21,7 @@ export const DEFAULT_SETTINGS: InlineAISettings = {
 	customURL: "",
 	selectionPrompt: selectionPrompt,
 	cursorPrompt: cursorPrompt,
+	customCommands: [], // Default is an empty array
 };
 
 // Settings tab class to display settings in Obsidian UI
@@ -146,5 +148,58 @@ export class InlineAISettingsTab extends PluginSettingTab {
 				// Add a CSS class for styling
 				textarea.inputEl.classList.add("wide-text-settings");
 			});
+
+		// Custom Commands Section
+		containerEl.createEl("h3", { text: "Custom Commands" });
+		// Add a description
+		containerEl.createEl("p", { text: "Add your own custom commands. Triggered with /" });
+
+		// Display existing commands
+		this.plugin.settings.customCommands.forEach((command, index) => {
+			const setting = new Setting(containerEl)
+				.setName(`Command: ${command.name}`)
+				.setDesc("Edit the command prompt.")
+				.addText((text) =>
+					text
+						.setValue(command.name)
+						.setPlaceholder("Command name")
+						.onChange(async (value) => {
+							this.plugin.settings.customCommands[index].name = value;
+							await this.plugin.saveSettings();
+						})
+				)
+				.addTextArea((textarea) =>
+					textarea
+						.setValue(command.prompt)
+						.setPlaceholder("Command prompt")
+						.onChange(async (value) => {
+							this.plugin.settings.customCommands[index].prompt = value;
+							await this.plugin.saveSettings();
+						})
+				)
+				.addExtraButton((btn) =>
+					btn
+						.setIcon("trash")
+						.setTooltip("Delete this command")
+						.onClick(async () => {
+							this.plugin.settings.customCommands.splice(index, 1);
+							await this.plugin.saveSettings();
+							this.display(); // Refresh the display
+						})
+				);
+		});
+
+		// Add new command button
+		new Setting(containerEl)
+			.addButton((btn) =>
+				btn
+					.setButtonText("Add Command")
+					.setCta()
+					.onClick(async () => {
+						this.plugin.settings.customCommands.push({ name: "New Command", prompt: "" });
+						await this.plugin.saveSettings();
+						this.display(); // Refresh the display
+					})
+			);
 	}
 }