diff --git a/src/harada.ts b/src/harada.ts
index b53ac63..1ac6066 100644
--- a/src/harada.ts
+++ b/src/harada.ts
@@ -96,7 +96,7 @@ export class HaradaMethod extends MarkdownRenderChild {
 
         if(box_index == 4 && inbox_index == 4){
           content = goal;
-          cell.id = 'goal';
+          cell.classList.add('goal');
         }
         else if(box_index == 4){
           let keyplan_index = inbox_index;
@@ -104,7 +104,7 @@ export class HaradaMethod extends MarkdownRenderChild {
             keyplan_index = inbox_index - 1;
           }
           content = keyplans[keyplan_index];
-          cell.id = 'keyplan';
+          cell.classList.add('keyplan');
         }
         else if(inbox_index == 4){
           let keyplan_index = box_index;
@@ -112,7 +112,7 @@ export class HaradaMethod extends MarkdownRenderChild {
             keyplan_index = box_index - 1;
           }
           content = keyplans[keyplan_index];
-          cell.id = 'keyplan';
+          cell.classList.add('keyplan');
         }
         else{
           let keyplan_index = box_index;
@@ -130,7 +130,7 @@ export class HaradaMethod extends MarkdownRenderChild {
           catch(err){
             console.log(err);
           }
-          cell.id = 'action';
+          cell.classList.add('action');
         }
 
         // check internal link
diff --git a/src/main.ts b/src/main.ts
index a77f519..83b2973 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,26 +1,32 @@
-// import { App, Modal, Plugin, PluginSettingTab, Setting, MarkdownPostProcessorContext } from 'obsidian';
-import { Plugin, MarkdownPostProcessorContext } from 'obsidian';
+import { Plugin, MarkdownPostProcessorContext, PluginSettingTab, App, Setting, ColorComponent } from 'obsidian';
 import { HaradaMethod } from "./harada";
 
 // Remember to rename these classes and interfaces!
 
-// interface ObsidianHaradaMethodPluginSettings {
-// 	mySetting: string;
-// }
+interface ObsidianHaradaMethodPluginSettings {
+	goalColor: string;
+	keyplanColor: string;
+	actionColor: string;
+}
 
-// const DEFAULT_SETTINGS: ObsidianHaradaMethodPluginSettings = {
-// 	mySetting: 'default'
-// }
+const DEFAULT_SETTINGS: ObsidianHaradaMethodPluginSettings = {
+	goalColor: "#FFE5AC",
+	keyplanColor: '#EFFFC9',
+	actionColor: '#FFFFFF',
+}
 
 export default class ObsidianHaradaMethodPlugin extends Plugin {
-	// settings: ObsidianHaradaMethodPluginSettings;
+	settings: ObsidianHaradaMethodPluginSettings;
 
 	async process (source: string, element: HTMLElement, context: MarkdownPostProcessorContext) {
 		context.addChild(new HaradaMethod(element, source));
 	}
 
 	async onload() {
-		// await this.loadSettings();
+		await this.loadSettings();
+
+		// This adds a settings tab so the user can configure various aspects of the plugin
+		this.addSettingTab(new ObsidianHaradaMethodPluginSettingTab(this.app, this));
 
 		this.registerMarkdownCodeBlockProcessor("harada", this.process)
 	}
@@ -29,13 +35,29 @@ export default class ObsidianHaradaMethodPlugin extends Plugin {
 
 	}
 
-	// async loadSettings() {
-	// 	this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
-	// }
+	async applySettings(){
+		Array.from(document.getElementsByClassName("goal")).forEach((element) => {
+			(element as HTMLElement).style.backgroundColor = this.settings.goalColor;
+		});
 
-	// async saveSettings() {
-	// 	await this.saveData(this.settings);
-	// }
+		Array.from(document.getElementsByClassName("keyplan")).forEach((element) => {
+			(element as HTMLElement).style.backgroundColor = this.settings.keyplanColor;
+		});
+
+		Array.from(document.getElementsByClassName("action")).forEach((element) => {
+			(element as HTMLElement).style.backgroundColor = this.settings.actionColor;
+		});
+	}
+
+	async loadSettings() {
+		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
+		this.applySettings();
+	}
+
+	async saveSettings() {
+		await this.saveData(this.settings);
+		this.applySettings();
+	}
 }
 
 // class SampleModal extends Modal {
@@ -55,30 +77,48 @@ export default class ObsidianHaradaMethodPlugin extends Plugin {
 // }
 
 
-// class SampleSettingTab extends PluginSettingTab {
-// 	plugin: ObsidianHaradaMethodPlugin;
+class ObsidianHaradaMethodPluginSettingTab extends PluginSettingTab {
+	plugin: ObsidianHaradaMethodPlugin;
 
-// 	constructor(app: App, plugin: ObsidianHaradaMethodPlugin) {
-// 		super(app, plugin);
-// 		this.plugin = plugin;
-// 	}
+	constructor(app: App, plugin: ObsidianHaradaMethodPlugin) {
+		super(app, plugin);
+		this.plugin = plugin;
+	}
 
-// 	display(): void {
-// 		const {containerEl} = this;
+	display(): void {
+		const {containerEl} = this;
 
-// 		containerEl.empty();
-// 		containerEl.createEl('h2', {text: 'Settings for my awesome plugin.'});
+		containerEl.empty();
+		containerEl.createEl('h2', {text: 'Draw Harada Method Plugin Settings'});
 
-// 		new Setting(containerEl)
-// 			.setName('Setting #1')
-// 			.setDesc('It\'s a secret')
-// 			.addText(text => text
-// 				.setPlaceholder('Enter your secret')
-// 				.setValue(this.plugin.settings.mySetting)
-// 				.onChange(async (value) => {
-// 					console.log('Secret: ' + value);
-// 					this.plugin.settings.mySetting = value;
-// 					await this.plugin.saveSettings();
-// 				}));
-// 	}
-// }
+		new Setting(containerEl)
+			.setName('Goal Color')
+			.setDesc('Goal Color')
+			.addColorPicker(cb => cb
+				.setValue(this.plugin.settings.goalColor)
+				.onChange(async (value) => {
+					this.plugin.settings.goalColor = value;
+					await this.plugin.saveSettings();
+				}));
+
+		new Setting(containerEl)
+			.setName('Keyplan Color')
+			.setDesc('Keyplan Color')
+			.addColorPicker(cb => cb
+				.setValue(this.plugin.settings.keyplanColor)
+				.onChange(async (value) => {
+					this.plugin.settings.keyplanColor = value;
+					await this.plugin.saveSettings();
+				}));
+
+		new Setting(containerEl)
+			.setName('Action Color')
+			.setDesc('Action Color')
+			.addColorPicker(cb => cb
+				.setValue(this.plugin.settings.actionColor)
+				.onChange(async (value) => {
+					this.plugin.settings.actionColor = value;
+					await this.plugin.saveSettings();
+				}));
+	}
+}
diff --git a/styles.css b/styles.css
index 35c30a4..b47af4c 100644
--- a/styles.css
+++ b/styles.css
@@ -39,18 +39,18 @@ td.bottom{
     border-bottom: 3px solid black;
 }
 
-#action{
+td.action{
     background-color: rgb(255, 255, 255);
     color: rgb(0, 0, 0); 
 }
 
-#keyplan{
+td.keyplan{
     background-color: rgb(239, 255, 201);
     color: rgb(0, 0, 0); 
     font-size: 25px;
 }
 
-#goal{
+td.goal{
     background-color: rgb(255, 229, 172);
     color: rgb(0, 0, 0); 
     font-size: 30px;