diff --git a/index.html b/index.html
index 139f5ff..7661825 100644
--- a/index.html
+++ b/index.html
@@ -37,6 +37,7 @@
 
         </main>
         
+        <script src="./heonian-ime/ime.js"></script>
         <script src="./main.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/main.css b/main.css
index 5faddc1..cf0ba79 100644
--- a/main.css
+++ b/main.css
@@ -101,6 +101,9 @@ header #search button {
     text-align: center;
     height: 2rem;
     border-left: 1px solid var(--grey);
+    color: var(--grey);
+    transition: 0.3s color ease;
+    cursor: pointer;
 }
 
 header input {
diff --git a/main.js b/main.js
index 400e0ca..6548a38 100644
--- a/main.js
+++ b/main.js
@@ -5,6 +5,19 @@ let searchDictionary = {};
 let header = null;
 let main = null;
 
+let ime = null;
+
+function toggleIME() {
+    if (ime == null) {
+        ime = new HeonianIME(header.querySelector("input"));
+        header.querySelector("#search button").style.color = "var(--fg)";
+    } else {
+        ime.imeDetach();
+        ime = null;
+        header.querySelector("#search button").style.color = "var(--grey)";
+    }
+}
+
 function animateHeader(inout = false) {
     //todo: debounce this
     if (inout) {
@@ -47,10 +60,14 @@ document.addEventListener("keydown", (e) => {
         if (!header.querySelector("input").matches(":focus") && !header.classList.contains("fullscreen")) {
             e.preventDefault();
             animateHeader(true);
+        } else if (header.querySelector("input").matches(":focus") && ime != null) {
+            toggleIME();
+        } else if (header.querySelector("input").matches(":focus")) {
+            header.querySelector("input").value = "";
         }
     }
     if (e.keyCode === 13) {
-        if (header.querySelector("input").matches(":focus")) {
+        if (header.querySelector("input").matches(":focus") && ime == null) {
             //search
             e.preventDefault();
             if (header.classList.contains("fullscreen")) {
@@ -262,5 +279,6 @@ function doSearch() {
 window.onload = () => {
     header = document.querySelector("header");
     main = document.querySelector("main");
+    header.querySelector("#search button").onclick = () => {toggleIME();};
     loadDictionary();
 }
\ No newline at end of file