diff --git a/public/Images/arrow-back.svg b/public/Images/arrow-back.svg
new file mode 100644
index 0000000..d7320d2
--- /dev/null
+++ b/public/Images/arrow-back.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_561_6030" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
+<rect y="0.953613" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_561_6030)">
+<path d="M13 22.9536L3 12.9536L13 2.95361L14.775 4.72861L6.55 12.9536L14.775 21.1786L13 22.9536Z" fill="#828282"/>
+</g>
+</svg>
diff --git a/public/scripts/device.js b/public/scripts/device.js
index e1fbb81..ad8f5ec 100644
--- a/public/scripts/device.js
+++ b/public/scripts/device.js
@@ -194,6 +194,30 @@ function initializeSearch(viewModel, containerId) {
     placement: "bottom",
     theme: "light-border",
   });
+
+  const detachedSearchButtonList = document.querySelectorAll(
+    ".aa-DetachedSearchButton",
+  );
+  detachedSearchButtonList.forEach((detachedSearchButton) => {
+    detachedSearchButton.addEventListener("click", () => {
+      const inputForm = document.querySelector(".aa-Form");
+
+      if (inputForm.querySelector(".aa-DetachedCancelButton") != null) {
+        return;
+      }
+      const newCancelButton = document.createElement("button");
+      newCancelButton.type = "button";
+      newCancelButton.classList.add("aa-DetachedCancelButton");
+
+      newCancelButton.addEventListener("click", () => {
+        // ref https://github.com/algolia/autocomplete/blob/d0b3b27d2d22f06590cef5606062ca0e48c9003f/packages/autocomplete-js/src/__tests__/detached.test.ts#L420
+        const detachedContainer = document.querySelector(".aa-DetachedOverlay");
+        document.body.removeChild(detachedContainer);
+        document.body.classList.remove("aa-Detached");
+      });
+      inputForm.appendChild(newCancelButton);
+    });
+  });
 }
 
 function handleBrandSearchParams(viewModel) {
diff --git a/public/scripts/home.js b/public/scripts/home.js
index c7659ee..9d6e8ac 100644
--- a/public/scripts/home.js
+++ b/public/scripts/home.js
@@ -29,13 +29,6 @@ class RootViewModel {
   }
 }
 
-function handleSearchInput(viewModel) {
-  const searchInput = document.querySelector(".aa-Input");
-  searchInput.addEventListener("input", (e) => {
-    viewModel.searchText = e.target.value;
-  });
-}
-
 function initializeAutocomplete(viewModel) {
   const { autocomplete } = window["@algolia/autocomplete-js"];
 
@@ -100,13 +93,35 @@ function initializeAutocomplete(viewModel) {
     },
   });
 
-  handleSearchInput(viewModel);
-
   tippy(".aa-ClearButton", {
     content: "Clear",
     placement: "bottom",
     theme: "light-border",
   });
+
+  const detachedSearchButtonList = document.querySelectorAll(
+    ".aa-DetachedSearchButton",
+  );
+  detachedSearchButtonList.forEach((detachedSearchButton) => {
+    detachedSearchButton.addEventListener("click", () => {
+      const inputForm = document.querySelector(".aa-Form");
+
+      if (inputForm.querySelector(".aa-DetachedCancelButton") != null) {
+        return;
+      }
+      const newCancelButton = document.createElement("button");
+      newCancelButton.type = "button";
+      newCancelButton.classList.add("aa-DetachedCancelButton");
+
+      newCancelButton.addEventListener("click", () => {
+        // ref https://github.com/algolia/autocomplete/blob/d0b3b27d2d22f06590cef5606062ca0e48c9003f/packages/autocomplete-js/src/__tests__/detached.test.ts#L420
+        const detachedContainer = document.querySelector(".aa-DetachedOverlay");
+        document.body.removeChild(detachedContainer);
+        document.body.classList.remove("aa-Detached");
+      });
+      inputForm.appendChild(newCancelButton);
+    });
+  });
 }
 function main() {
   const viewModel = new RootViewModel(window.modelItems, window.brandItems);
diff --git a/src/styles/search.css b/src/styles/search.css
index 489e255..9f72082 100644
--- a/src/styles/search.css
+++ b/src/styles/search.css
@@ -58,8 +58,8 @@
 /* Mobile */
 
 .aa-DetachedFormContainer {
-  height: 64px;
-  padding: 8px 4px;
+  /* height: 64px; */
+  padding: 16px 20px;
 }
 
 .aa-DetachedSearchButton {
@@ -88,3 +88,50 @@
   box-shadow: none;
   background-color: #e5e5e5;
 }
+
+@media (max-width: 680px) {
+  .aa-SubmitButton,
+  .aa-Label,
+  .aa-InputWrapperPrefix {
+    display: none;
+  }
+  .aa-DetachedFormContainer > .aa-DetachedCancelButton {
+    display: none;
+  }
+  .aa-Form > .aa-DetachedCancelButton {
+    height: 100%;
+    background-image: url("/Images/arrow-back.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    /* margin: 0 12px 0 12px; */
+    margin: 0;
+    padding: 0 12px;
+    width: 48px;
+  }
+  .aa-Form > .aa-DetachedCancelButton:hover {
+    border: none;
+    outline: none;
+  }
+  .aa-Form > .aa-DetachedCancelButton:active {
+    outline: none;
+    background-color: #e0e0e0;
+  }
+  .aa-Form {
+    overflow: hidden;
+  }
+
+  .cancelButton {
+    height: 100%;
+  }
+  /* .aa-InputWrapperPrefix > .aa-DetachedCancelButton {
+    height: 100%;
+  } */
+  .aa-InputWrapperSuffix {
+    width: 48px;
+  }
+  .aa-Form {
+    height: 50px;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+  }
+}