diff --git a/cypress/e2e/navigation/navigation.cy.js b/cypress/e2e/navigation/navigation.cy.js
deleted file mode 100644
index 024a2cb40..000000000
--- a/cypress/e2e/navigation/navigation.cy.js
+++ /dev/null
@@ -1,25 +0,0 @@
-describe('Navigation E2E test suite', () => {
-  context('can toggle navigation mode', () => {
-    beforeEach(() => {
-      cy.setCookie('isFirstTime', 'false')
-      cy.visit('/', {
-        qs: {
-          feature: 'navTypes',
-        },
-      })
-    })
-
-    it.skip('can toggle navigation tree', () => {
-      cy.findByLabelText('spatial-tree').should('not.be.visible')
-      cy.findByLabelText('element-types').should('not.be.visible')
-      cy.findByLabelText('Navigation Panel').realHover()
-      cy.findByLabelText('spatial-tree').should('be.visible')
-      cy.findByLabelText('element-types').should('be.visible')
-      cy.findByLabelText('IFC Navigator').should('exist')
-      cy.findByLabelText('IFC Types Navigator').should('not.exist')
-      cy.findByLabelText('element-types').realClick()
-      cy.findByLabelText('IFC Navigator').should('not.exist')
-      cy.findByLabelText('IFC Types Navigator').should('exist')
-    })
-  })
-})
diff --git a/package.json b/package.json
index 03c8bba2e..0beb4b7b4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r705",
+  "version": "1.0.0-r688",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
@@ -72,8 +72,8 @@
     "@bahmutov/cypress-esbuild-preprocessor": "^2.1.3",
     "@mui/types": "^7.2.3",
     "@pablo-mayrgundter/cookies.js": "^1.0.0",
-    "@svgr/webpack": "^8.0.1",
     "@svgr/plugin-jsx": "^8.0.1",
+    "@svgr/webpack": "^8.0.1",
     "@testing-library/cypress": "^9.0.0",
     "@testing-library/dom": "^8.19.1",
     "@testing-library/jest-dom": "^5.16.5",
diff --git a/src/Components/InputAutocomplete.fixture.jsx b/src/Components/InputAutocomplete.fixture.jsx
new file mode 100644
index 000000000..b6b19e37e
--- /dev/null
+++ b/src/Components/InputAutocomplete.fixture.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import FixtureContext from '../FixtureContext'
+import InputAutocomplete from './InputAutocomplete'
+
+
+const elements = [
+  {title: 'Surfaces'},
+  {title: 'Case'},
+  {title: 'Gears'},
+  {title: 'Electonics'},
+]
+
+export default (
+  <FixtureContext>
+    <InputAutocomplete elements={elements} placeholder={'IFC property'}/>
+  </FixtureContext>
+)
diff --git a/src/Components/InputAutocomplete.jsx b/src/Components/InputAutocomplete.jsx
new file mode 100644
index 000000000..ef7b24a02
--- /dev/null
+++ b/src/Components/InputAutocomplete.jsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import Autocomplete from '@mui/material/Autocomplete'
+import TextField from '@mui/material/TextField'
+import Stack from '@mui/material/Stack'
+import {assertDefined} from '../utils/assert'
+
+/**
+ * Input with autocomplete feature.
+ *
+ * @property {Array<object>} elements suggested elements used to autocomple input,the object is in a shape of {title:'suggestion'}
+ * @property {string} placeholder Input placeholder
+ * @property {string} size MUI size of the input component
+ * @return {React.Component}
+ */
+export default function InputAutocomplete({elements, placeholder, size = 'small'}) {
+  assertDefined(elements, placeholder)
+  return (
+    <Stack spacing={3} sx={{minWidth: '280px'}}>
+      <Autocomplete
+        multiple
+        options={elements}
+        getOptionLabel={(option) => option.title}
+        filterSelectedOptions
+        size={size}
+        renderInput={(params) => {
+          return (
+            <TextField
+              {...params}
+              placeholder={placeholder}
+              size={size}
+            />
+          )
+        }
+        }
+      />
+    </Stack>
+  )
+}
diff --git a/src/Components/InputAutocomplete.test.jsx b/src/Components/InputAutocomplete.test.jsx
new file mode 100644
index 000000000..906df40a9
--- /dev/null
+++ b/src/Components/InputAutocomplete.test.jsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import {render, fireEvent} from '@testing-library/react'
+import InputAutocomplete from './InputAutocomplete' // Adjust the import path
+
+
+describe('InputAutocomplete', () => {
+  const elements = [
+    {title: 'Option 1'},
+    {title: 'Option 2'},
+    {title: 'Option 3'},
+  ]
+
+  it('renders the input with placeholder', () => {
+    const placeholderText = 'Type something'
+    const {getByPlaceholderText} = render(
+        <InputAutocomplete elements={elements} placeholder={placeholderText}/>,
+    )
+    const inputElement = getByPlaceholderText(placeholderText)
+    expect(inputElement).toBeInTheDocument()
+  })
+
+  it('displays suggestions when typing', () => {
+    const {getByPlaceholderText, getByText} = render(
+        <InputAutocomplete elements={elements} placeholder="Type something"/>,
+    )
+
+    const inputElement = getByPlaceholderText('Type something')
+
+    // Type some text into the input
+    fireEvent.change(inputElement, {target: {value: 'Option'}})
+
+    // Wait for suggestions to appear
+    const suggestion1 = getByText('Option 1')
+    const suggestion2 = getByText('Option 2')
+    const suggestion3 = getByText('Option 3')
+
+    expect(suggestion1).toBeInTheDocument()
+    expect(suggestion2).toBeInTheDocument()
+    expect(suggestion3).toBeInTheDocument()
+  })
+})