diff --git a/resources/scripts/api/admin/databases/searchDatabases.ts b/resources/scripts/api/admin/databases/searchDatabases.ts
new file mode 100644
index 000000000..cff92ee82
--- /dev/null
+++ b/resources/scripts/api/admin/databases/searchDatabases.ts
@@ -0,0 +1,32 @@
+import { Database, rawDataToDatabase } from '@/api/admin/databases/getDatabases';
+import http from '@/api/http';
+
+interface Filters {
+    name?: string;
+    host?: string;
+}
+
+interface Wow {
+    [index: string]: string;
+}
+
+export default (filters?: Filters): Promise<Database[]> => {
+    let params = {};
+    if (filters !== undefined) {
+        params = Object.keys(filters).map((key) => {
+            const a: Wow = {};
+            a[`filter[${key}]`] = (filters as unknown as Wow)[key];
+            return a;
+        });
+
+        console.log(params);
+    }
+
+    return new Promise((resolve, reject) => {
+        http.get('/api/application/databases', { params: { ...params } })
+            .then(response => resolve(
+                (response.data.data || []).map(rawDataToDatabase)
+            ))
+            .catch(reject);
+    });
+};
diff --git a/resources/scripts/components/admin/nodes/DatabaseSelect.tsx b/resources/scripts/components/admin/nodes/DatabaseSelect.tsx
new file mode 100644
index 000000000..30f7212de
--- /dev/null
+++ b/resources/scripts/components/admin/nodes/DatabaseSelect.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import SearchableSelect from '@/components/elements/SearchableSelect';
+import searchDatabases from '@/api/admin/databases/searchDatabases';
+import { Database } from '@/api/admin/databases/getDatabases';
+import tw from 'twin.macro';
+
+export default () => {
+    const [ database, setDatabase ] = useState<Database | null>(null);
+    const [ databases, setDatabases ] = useState<Database[]>([]);
+
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise((resolve, reject) => {
+            searchDatabases({ name: query }).then((databases) => {
+                setDatabases(databases);
+                return resolve();
+            }).catch(reject);
+        });
+    };
+
+    const onSelect = (database: Database) => {
+        setDatabase(database);
+    };
+
+    return (
+        <SearchableSelect
+            id="database"
+            name="Database"
+            items={databases}
+            setItems={setDatabases}
+            onSearch={onSearch}
+            onSelect={onSelect}
+            nullable
+        >
+            {databases.map(d => (
+                d.id === database?.id ?
+                    <li key={d.id} id={'listbox-item-' + d.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={(e) => {
+                        e.stopPropagation();
+                        // selectItem(d);
+                    }}
+                    >
+                        <div css={tw`flex items-center`}>
+                            <span css={tw`block font-medium truncate`}>
+                                {d.name}
+                            </span>
+                        </div>
+
+                        <span css={tw`absolute inset-y-0 right-0 flex items-center pr-4`}>
+                            <svg css={tw`h-5 w-5 text-primary-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                <path clipRule="evenodd" fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
+                            </svg>
+                        </span>
+                    </li>
+                    :
+                    <li key={d.id} id={'listbox-item-' + d.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={(e) => {
+                        e.stopPropagation();
+                        // selectItem(d);
+                    }}
+                    >
+                        <div css={tw`flex items-center`}>
+                            <span css={tw`block font-normal truncate`}>
+                                {d.name}
+                            </span>
+                        </div>
+                    </li>
+            ))}
+        </SearchableSelect>
+    );
+};
diff --git a/resources/scripts/components/elements/SearchableSelect.tsx b/resources/scripts/components/elements/SearchableSelect.tsx
new file mode 100644
index 000000000..5cbc87414
--- /dev/null
+++ b/resources/scripts/components/elements/SearchableSelect.tsx
@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
+import Input from '@/components/elements/Input';
+import Label from '@/components/elements/Label';
+import InputSpinner from '@/components/elements/InputSpinner';
+import { debounce } from 'debounce';
+
+const Dropdown = styled.div<{ expanded: boolean }>`
+    ${tw`absolute mt-1 w-full rounded-md bg-neutral-900 shadow-lg z-10`};
+    ${props => !props.expanded && tw`hidden`};
+`;
+
+interface Props<T> {
+    id: string;
+    name: string;
+    nullable: boolean;
+
+    items: T[];
+    setItems: (items: T[]) => void;
+
+    onSearch: (query: string) => Promise<void>;
+    onSelect: (item: T) => void;
+
+    children: React.ReactNode;
+}
+
+function SearchableSelect<T> ({ id, name, items, setItems, onSearch, children }: Props<T>) {
+    const [ loading, setLoading ] = useState(false);
+    const [ expanded, setExpanded ] = useState(false);
+
+    const [ inputText, setInputText ] = useState('');
+
+    const onFocus = () => {
+        setInputText('');
+        setItems([]);
+        setExpanded(true);
+    };
+
+    const search = debounce((query: string) => {
+        if (!expanded) {
+            return;
+        }
+
+        if (query === '' || query.length < 2) {
+            setItems([]);
+            return;
+        }
+
+        setLoading(true);
+        onSearch(query).then(() => setLoading(false));
+    }, 250);
+
+    /* const selectItem = (item: any) => {
+        onSelect(item);
+    }; */
+
+    useEffect(() => {
+        // setInputText(location.short);
+        setExpanded(false);
+    }, [ ]);
+    // }, [ location ]);
+
+    useEffect(() => {
+        const handler = (e: KeyboardEvent) => {
+            if (e.key !== 'Escape') {
+                return;
+            }
+
+            // setInputText(location.short);
+            setExpanded(false);
+        };
+
+        window.addEventListener('keydown', handler);
+        return () => {
+            window.removeEventListener('keydown', handler);
+        };
+    }, [ expanded ]);
+
+    return (
+        <div>
+            <Label htmlFor={id}>{name}</Label>
+
+            <div css={tw`mt-1 relative`}>
+                <InputSpinner visible={loading}>
+                    <Input type="text" className="ignoreReadOnly" id={id} name={id} value={inputText} readOnly={!expanded} onFocus={onFocus} onChange={e => {
+                        setInputText(e.currentTarget.value);
+                        search(e.currentTarget.value);
+                    }}
+                    />
+                </InputSpinner>
+
+                <div css={tw`ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none`}>
+                    <svg css={tw`h-5 w-5 text-neutral-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path clipRule="evenodd" fillRule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"/>
+                    </svg>
+                </div>
+
+                <Dropdown expanded={expanded}>
+                    { items.length < 1 ?
+                        inputText.length < 2 ?
+                            <div css={tw`h-10 flex flex-row items-center px-3`}>
+                                <p css={tw`text-sm`}>Please type 2 or more characters.</p>
+                            </div>
+                            :
+                            <div css={tw`h-10 flex flex-row items-center px-3`}>
+                                <p css={tw`text-sm`}>No results found.</p>
+                            </div>
+                        :
+                        <ul tabIndex={-1} css={tw`max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm`}>
+                            {children}
+                        </ul>
+                    }
+                </Dropdown>
+            </div>
+        </div>
+    );
+}
+
+export default SearchableSelect;