diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 00096b1..4184555 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -1,10 +1,84 @@
 'use client';
 
 import { Box, Button, ButtonIcon, SearchIcon, Input, InputField, Icon, Text, Link } from '@gluestack-ui/themed';
-import { UserRound } from 'lucide-react';
-import React from 'react';
+import { Search, UserRound } from 'lucide-react';
+import { useRouter } from 'next/router';
+import React, { useEffect, useState } from 'react';
+import Select, { components } from 'react-select';
+
+interface Concept {
+    value: string;
+    label: string;
+}
 
 const Navbar: React.FC = () => {
+    const [concepts, setConcepts] = useState<Concept[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [selectedTerm, setSelectedTerm] = useState('');
+    const router = useRouter();
+
+    const fetchConcepts = async () => {
+        try {
+            setLoading(true);
+            setError(null);
+            const response = await fetch('/api/getAllConceptMap');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+
+            if (!data.allConceptMap || Object.keys(data.allConceptMap).length === 0) {
+                throw new Error('No concepts found in the response');
+            }
+
+            const conceptsArray: Concept[] = Object.entries(data.allConceptMap).map(([key, value]) => ({
+                value: key,
+                label: String(value),
+            }));
+
+            conceptsArray.sort((a, b) => a.label.localeCompare(b.label));
+            
+            setConcepts(conceptsArray);
+        } catch (error) {
+            console.error('Errore durante il fetch dei concetti:', error);
+            setError('Failed to load concepts. Please try again later.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchConcepts();
+    }, []);
+
+    const handleNavigation = (selectedOption: Concept | null) => {
+        if (selectedOption) {
+            const parts = selectedOption.value.split('/');
+
+            if (parts.length >= 3) {
+                const vocabulary = parts[parts.length - 2];
+                const term = parts[parts.length - 1];
+
+                router.push(`/${vocabulary}/${term}`);
+            } else {
+                console.warn("URL non valido: ",  selectedOption.value);
+                router.push(selectedOption.value);
+            }
+        }
+    };
+
+    const DropdownIndicator = (props: any) => {
+        return (
+            <components.DropdownIndicator {...props}>
+                <Search
+                    size={16}
+                    onClick={() => handleNavigation(props.selectProps.value)}
+                />
+            </components.DropdownIndicator>
+        );
+    };
+
     return (
         <Box
             flexDirection='row'
@@ -27,35 +101,80 @@ const Navbar: React.FC = () => {
 
                 <Text fontSize={16} ml={40} color='red' alignContent='center' fontWeight='$semibold'>Pilot Project</Text>
             </Box>
-            <Box w='33%' alignItems='center' justifyContent='center' flexDirection='row' display='none'>
-                <Button
-                    size="sm"
-                    variant="link"
-                    action="primary"
-                    isDisabled={false}
-                    isFocusVisible={false}
-                    mr={5}
-                >
-                    <ButtonIcon as={SearchIcon} color='black' width={20} height={20} />
-                </Button>
-                <Input
-                    variant="outline"
-                    size="sm"
-                    isDisabled={false}
-                    isInvalid={false}
-                    isReadOnly={false}
-                    w='100%'
-                    borderColor='#dee2e6'
-                >
-                    <InputField placeholder="Search..." />
-                </Input>
-            </Box>
+            {loading ? (
+                <Text>Loading concepts...</Text>
+            ) : error ? (
+                <Text color="red">{error}</Text>
+            ) : (
+                <Box w={'33%'}>
+                    <Select
+                        value={concepts.find(option => option.value === selectedTerm)}
+                        onChange={(selectedOption) => {
+                            setSelectedTerm(selectedOption ? selectedOption.value : '');
+                            handleNavigation(selectedOption);
+                        }}
+                        onKeyDown={(event) => {
+                            if (event.key === 'Enter' && selectedTerm) {
+                                const selectedOption = concepts.find(option => option.value === selectedTerm);
+                                handleNavigation(selectedOption || null);
+                            }
+                        }}
+                        options={concepts}
+                        placeholder="Search term"
+                        isSearchable={true}
+                        classNamePrefix="react-select"
+                        menuPortalTarget={document.body}
+                        components={{ DropdownIndicator }}
+                        styles={{
+                            control: (provided) => ({
+                                ...provided,
+                                fontSize: '14px',
+                                color: 'black',
+                                width: '100%'
+                            }),
+                            singleValue: (provided) => ({
+                                ...provided,
+                                fontSize: '12px',
+                                color: 'black',
+                            }),
+                            placeholder: (provided) => ({
+                                ...provided,
+                                fontSize: '12px',
+                                color: 'black',
+                                fontWeight: 'bold'
+                            }),
+                            option: (provided) => ({
+                                ...provided,
+                                fontSize: '14px',
+                                color: 'black',
+                            }),
+                            menu: (provided) => ({
+                                ...provided,
+                            }),
+                            dropdownIndicator: (provided) => ({
+                                ...provided,
+                                color: '#999',
+                                '&:hover': {
+                                    color: '#666',
+                                },
+                                cursor: 'pointer',
+                            }),
+                            input: (provided) => ({
+                                ...provided,
+                                color: 'black',
+                                fontSize: '14px',
+                                fontWeight: 'bold'
+                            }),
+                        }}
+                    />
+                </Box>
 
-            <Box w='33%' alignItems='flex-end' display='none'>
-                <Icon as={UserRound} width={30} height={30} strokeWidth={1} />
+            )}
+            <Box w='33%' alignItems='flex-end' /* display='none' */>
+                {/* <Icon as={UserRound} width={30} height={30} strokeWidth={1} /> */}
             </Box>
         </Box>
     );
 }
 
-export default Navbar;
+export default Navbar;
\ No newline at end of file
diff --git a/app/components/VocabolaryTerm.tsx b/app/components/VocabolaryTerm.tsx
index f9796c4..c7e9597 100644
--- a/app/components/VocabolaryTerm.tsx
+++ b/app/components/VocabolaryTerm.tsx
@@ -9,9 +9,10 @@ import { BreadCrumbsData } from '../models/breadCrumbsInterface';
 interface VocabolaryTermProps {
     termData: TermData | null;
     breadCrumbsData: BreadCrumbsData;
+    allConceptMap: Map<string, string>;
 }
 
-const VocabolaryTerm: React.FC<VocabolaryTermProps> = ({ termData, breadCrumbsData }) => {
+const VocabolaryTerm: React.FC<VocabolaryTermProps> = ({ termData, breadCrumbsData, allConceptMap }) => {
     /**
      * Extracts the label or identifier from a URL by manipulating the URL string.
      * 
@@ -23,6 +24,17 @@ const VocabolaryTerm: React.FC<VocabolaryTermProps> = ({ termData, breadCrumbsDa
         const parts = url.replace('#', '/').split('/');
         return parts.pop();
     };
+    const getTermLabel = (term: string, isBadge: boolean) => {
+        console.log(allConceptMap);
+        if (!allConceptMap || allConceptMap.size === 0) {
+            return "Map is not available";
+        }
+        if (isBadge) {
+            return allConceptMap.get(term) || `[${extractLabel(term)}]`;
+        } else {
+            return allConceptMap.get(term) || term;
+        }
+    };
     /**
      * Retrieve the path of images based on the label indicating the language
      */
@@ -147,9 +159,12 @@ const VocabolaryTerm: React.FC<VocabolaryTermProps> = ({ termData, breadCrumbsDa
                                             <AccordionContent bgColor='$white' ml={15}>
                                                 {termData.relatedTerms.Broader.length > 0 ? (
                                                     termData.relatedTerms.Broader.map(term => (
-                                                        <Link href={`/${termData.vocabulary}/${extractLabel(term)}`} mb={1} key={term}>
-                                                            <LinkText color='black' textDecorationLine='none'>• {extractLabel(term)}</LinkText>
-                                                        </Link>
+                                                        <Box flexDirection='row'>
+                                                            <Text>•</Text>
+                                                            <Link href={`/${termData.vocabulary}/${extractLabel(term)}`} mb={1} key={term}>
+                                                                <LinkText color='#7c7c7c' textDecorationLine='none'> {getTermLabel(term, false)}</LinkText>
+                                                            </Link>
+                                                        </Box>
                                                     ))
                                                 ) : (
                                                     <Text color='$secondary300'>No Broader concepts...</Text>
@@ -174,9 +189,12 @@ const VocabolaryTerm: React.FC<VocabolaryTermProps> = ({ termData, breadCrumbsDa
                                             <AccordionContent bgColor='$white' ml={15}>
                                                 {termData.relatedTerms.Narrower.length > 0 ? (
                                                     termData.relatedTerms.Narrower.map(term => (
-                                                        <Link href={`/${termData.vocabulary}/${extractLabel(term)}`} mb={1} key={term}>
-                                                            <LinkText color='black' textDecorationLine='none'>• {extractLabel(term)}</LinkText>
-                                                        </Link>
+                                                        <Box flexDirection='row'>
+                                                            <Text>•</Text>
+                                                            <Link href={`/${termData.vocabulary}/${extractLabel(term)}`} mb={1} key={term}>
+                                                                <LinkText color='#7c7c7c' textDecorationLine='none'> {getTermLabel(term, false)}</LinkText>
+                                                            </Link>
+                                                        </Box>
                                                     ))
                                                 ) : (
                                                     <Text color='$secondary300'>No Narrowers concepts...</Text>
@@ -206,14 +224,14 @@ const VocabolaryTerm: React.FC<VocabolaryTermProps> = ({ termData, breadCrumbsDa
                                                                 <Text>•</Text>
                                                                 <Badge bg='#e0e0e0' variant='muted' borderRadius="$full" ml={2} mr={2}>
                                                                     <BadgeText color='#7c7c7c' fontSize={12} fontWeight={'$bold'} mb={1}>
-                                                                        {extractLabel(predicate)}
+                                                                        {getTermLabel(predicate, true)}
                                                                     </BadgeText>
                                                                 </Badge>
                                                                 <Box ml={4}>
                                                                     {term.startsWith('http') ? (
                                                                         <Link href={`${term}`} mb={1} key={`${predicate}-${index}`}>
                                                                             <Text fontSize={14} color="#7c7c7c" textDecorationLine="none">
-                                                                                {term}
+                                                                                {getTermLabel(term, false)}
                                                                             </Text>
                                                                         </Link>
                                                                     ) : (
diff --git a/app/layout.tsx b/app/layout.tsx
index ebac385..31987d8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -25,6 +25,9 @@ export default function RootLayout({
         <meta charSet="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>{title}</title>
+        <meta name="description" content="Developed by Nards IT"></meta>
+        <meta name="author" content="Nards IT"></meta>
+        <link rel="author" href="https://nards.it"></link>
       </head>
       <body className={inter.className}>
         <Providers>
diff --git a/app/lib/QueryApiClient.tsx b/app/lib/QueryApiClient.tsx
index 18e94bf..e6c5a70 100644
--- a/app/lib/QueryApiClient.tsx
+++ b/app/lib/QueryApiClient.tsx
@@ -47,7 +47,7 @@ class QueryExecutor {
                 .setQuery(sparqlQuery)
                 .setQueryType(QueryType.SELECT)
                 .setResponseType(RDFMimeType.SPARQL_RESULTS_XML)
-                .setLimit(100);
+                .setLimit(10000);
 
             const queryStream = await repository.query(payload);
             const results: any[] = [];
diff --git a/app/lib/getConfigQuery.js b/app/lib/getConfigQuery.js
index 2fff840..da16c5e 100644
--- a/app/lib/getConfigQuery.js
+++ b/app/lib/getConfigQuery.js
@@ -13,11 +13,16 @@ function getQueryConfig(vocabulary) {
 
     const queryBreadcrumbs = config[vocabulary].queryBreadcrumbs;
     const queryVocabolo = config[vocabulary].queryVocabolo;
+    const queryLabelOfAllConcept = config[vocabulary].prefLabelOfAllConcept;
+    const labelLanguageOrder = config.labelLanguageOrder;
 
     return {
         queryBreadcrumbs,
-        queryVocabolo
+        queryVocabolo,
+        queryLabelOfAllConcept,
+        labelLanguageOrder
     };
 }
 
 module.exports = { getQueryConfig };
+
diff --git a/package-lock.json b/package-lock.json
index e769b10..b1b74dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,8 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native-svg": "13.4.0",
-        "react-native-web": "^0.19.7"
+        "react-native-web": "^0.19.7",
+        "react-select": "^5.8.1"
       },
       "devDependencies": {
         "@types/node": "20.3.2",
@@ -59,7 +60,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
       "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
-      "peer": true,
       "dependencies": {
         "@babel/highlight": "^7.24.7",
         "picocolors": "^1.0.0"
@@ -385,7 +385,6 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
       "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
-      "peer": true,
       "dependencies": {
         "@babel/types": "^7.18.6"
       },
@@ -592,7 +591,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.7.tgz",
       "integrity": "sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==",
-      "peer": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -601,7 +599,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
       "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
-      "peer": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -675,7 +672,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
       "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
-      "peer": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.24.7",
         "chalk": "^2.4.2",
@@ -690,7 +686,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "peer": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -702,7 +697,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "peer": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -716,7 +710,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "peer": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -724,14 +717,12 @@
     "node_modules/@babel/highlight/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "peer": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/@babel/highlight/node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -740,7 +731,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "peer": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -2507,7 +2497,6 @@
       "version": "7.19.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.19.0.tgz",
       "integrity": "sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==",
-      "peer": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.18.10",
         "@babel/helper-validator-identifier": "^7.18.6",
@@ -2517,6 +2506,147 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
+      "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.2.0",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.13.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
+      "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.13.3",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz",
+      "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/cache": "^11.13.0",
+        "@emotion/serialize": "^1.3.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz",
+      "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz",
+      "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz",
+      "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -2680,6 +2810,31 @@
       "resolved": "https://registry.npmjs.org/@expo/html-elements/-/html-elements-0.10.1.tgz",
       "integrity": "sha512-3PTmtkV15D7+lykXVtvkH1jQ5Y6JE+e3zCaoMMux7z2cSLGQUNwDEUwG37gew3OEB1/E4/SEWgjvg8m7E6/e2Q=="
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz",
+      "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
+      "license": "MIT"
+    },
     "node_modules/@formatjs/ecma402-abstract": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz",
@@ -5573,6 +5728,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -5606,6 +5767,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.23.0.tgz",
@@ -5841,6 +6011,89 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.4.11",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz",
@@ -6825,7 +7078,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "peer": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -6871,7 +7123,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "peer": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -7370,6 +7621,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
+    },
     "node_modules/find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -7523,7 +7780,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -7657,7 +7913,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "peer": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -7701,6 +7956,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -7861,8 +8131,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "peer": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
@@ -7880,7 +8149,6 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "peer": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -8340,6 +8608,12 @@
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
       "peer": true
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "license": "MIT"
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -8521,8 +8795,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "peer": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/locate-path": {
       "version": "5.0.0",
@@ -9789,7 +10062,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "peer": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -9801,7 +10073,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -9858,8 +10129,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "peer": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
@@ -9886,6 +10156,15 @@
         "node": "14 || >=16.14"
       }
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
@@ -10282,6 +10561,23 @@
         "node": ">= 6"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -10587,6 +10883,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-select": {
+      "version": "5.8.1",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.1.tgz",
+      "integrity": "sha512-RT1CJmuc+ejqm5MPgzyZujqDskdvB9a9ZqrdnVLsvAHjJ3Tj0hELnLeVPQlmYdVKCdCpxanepl6z7R5KhXhWzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-shallow-renderer": {
       "version": "16.15.0",
       "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
@@ -10633,6 +10950,22 @@
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -10792,7 +11125,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "peer": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -11481,6 +11813,12 @@
       "resolved": "https://registry.npmjs.org/styleq/-/styleq-0.1.3.tgz",
       "integrity": "sha512-3ZUifmCDCQanjeej1f6kyl/BeP/Vae5EYkQ9iJfUm/QwZvlgnZzyflqAsAWYURdtea8Vkvswu2GrC57h3qffcA=="
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -11580,7 +11918,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "peer": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -11804,7 +12141,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -12022,6 +12358,20 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
diff --git a/package.json b/package.json
index fdcc575..2cf8f14 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native-svg": "13.4.0",
-    "react-native-web": "^0.19.7"
+    "react-native-web": "^0.19.7",
+    "react-select": "^5.8.1"
   },
   "devDependencies": {
     "@types/node": "20.3.2",
@@ -35,4 +36,4 @@
     "@types/react-native": "^0.72.5",
     "typescript": "5.1.3"
   }
-}
\ No newline at end of file
+}
diff --git a/pages/Chronostratigraphy/[term].tsx b/pages/Chronostratigraphy/[term].tsx
index 076198d..6ca35ad 100644
--- a/pages/Chronostratigraphy/[term].tsx
+++ b/pages/Chronostratigraphy/[term].tsx
@@ -10,6 +10,7 @@ const TermPage: React.FC = () => {
     // State for storing term data, breadcrumb data, loading status, and errors
     const [termData, setTermData] = useState(null);
     const [breadCrumbsData, setBreadCrumbsData] = useState();
+    const [allConceptMap, setAllConceptMap] = useState(new Map<string, string>());
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
 
@@ -36,9 +37,10 @@ const TermPage: React.FC = () => {
                 // Update state with the fetched data
                 const data = await response.json();
                 console.log('Received data:', data);
-
+                
                 setTermData(data.termData);
                 setBreadCrumbsData(data.breadCrumbsData || null);
+                setAllConceptMap(new Map(Object.entries(data.allConceptMap)));
             } catch (error) {
                 console.error('Error fetching term data:', error);
                 setError(error);
@@ -65,9 +67,11 @@ const TermPage: React.FC = () => {
         return <div>No data found for {term}</div>;
     }
 
+
+
     return (
         <div key={term}>
-            <VocabolaryTerm termData={termData} breadCrumbsData={breadCrumbsData} />
+            <VocabolaryTerm termData={termData} breadCrumbsData={breadCrumbsData} allConceptMap={allConceptMap} />
         </div>
     );
 };
diff --git a/pages/TectonicUnits/[term].tsx b/pages/TectonicUnits/[term].tsx
index a407451..c527e08 100644
--- a/pages/TectonicUnits/[term].tsx
+++ b/pages/TectonicUnits/[term].tsx
@@ -10,6 +10,7 @@ const TermPage: React.FC = () => {
     // State for storing term data, breadcrumb data, loading status, and errors
     const [termData, setTermData] = useState(null);
     const [breadCrumbsData, setBreadCrumbsData] = useState();
+    const [allConceptMap, setAllConceptMap] = useState(new Map<string, string>());
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
 
@@ -39,6 +40,7 @@ const TermPage: React.FC = () => {
 
                 setTermData(data.termData);
                 setBreadCrumbsData(data.breadCrumbsData || null);
+                setAllConceptMap(new Map(Object.entries(data.allConceptMap)));
             } catch (error) {
                 console.error('Error fetching term data:', error);
                 setError(error);
@@ -68,7 +70,7 @@ const TermPage: React.FC = () => {
 
     return (
         <div key={term}>
-            <VocabolaryTerm termData={termData} breadCrumbsData={breadCrumbsData} />
+            <VocabolaryTerm termData={termData} breadCrumbsData={breadCrumbsData} allConceptMap={allConceptMap} />
         </div>
     );
 };
diff --git a/pages/api/dbQueryTerms.tsx b/pages/api/dbQueryTerms.tsx
index fe3f8ef..9fb8679 100644
--- a/pages/api/dbQueryTerms.tsx
+++ b/pages/api/dbQueryTerms.tsx
@@ -26,6 +26,14 @@ interface SparqlResult {
         value: string;
     };
 }
+interface LabelQueryResult {
+    subject: {
+        value: string;
+    };
+    label: {
+        value: string;
+    };
+}
 /**
  * API route handler for fetching term and breadcrumb data from a GraphDB repository.
  * 
@@ -59,17 +67,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     let configJsonDB;
     try {
         const configFile = fs.readFileSync(configPath, 'utf8');
-        configJsonDB = JSON.parse(configFile)[vocabulary];
+        configJsonDB = JSON.parse(configFile);
     } catch (error) {
         console.error('Error reading configuration file:', error);
         return res.status(500).json({ error: 'Internal Server Error' });
     }
-    if (!configJsonDB) {
+    if (!configJsonDB[vocabulary]) {
         return res.status(404).json({ message: `Configuration not found for vocabulary: ${vocabulary}` });
     }
-    const url = configJsonDB.url;
-    const username = configJsonDB.username;
-    const password = configJsonDB.password;
+
+    const { url, username, password } = configJsonDB[vocabulary];
 
     console.log(`Attempting to connect to GraphDB at ${url} with user: ${username}`);
     try {
@@ -84,10 +91,21 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
          * Logs an error and returns a 500 Internal Server Error response if the connection test fails.
          */
         const graphDBClient = new GraphDBClient(url, username, password);
+
+        const otherVocabulary = Object.keys(configJsonDB).find(vocab => vocab !== vocabulary);
+        if (!otherVocabulary) {
+            return res.status(404).json({ message: 'No other vocabulary found' });
+        }
+
+        const { url: otherUrl, username: otherUsername, password: otherPassword } = configJsonDB[otherVocabulary];
+        const graphDBClientOtherVocabulary = new GraphDBClient(otherUrl, otherUsername, otherPassword);
+
         try {
-            console.log('Testing GraphDB connection...');
             await graphDBClient.getRepositoryIds();
-            console.log('GraphDB connection successful in queryterm api');
+            console.log('GraphDB connection successful for:', vocabulary);
+
+            await graphDBClientOtherVocabulary.getRepositoryIds();
+            console.log('GraphDB connection successful for:', otherVocabulary);
         } catch (error) {
             console.error('GraphDB connection failed:', error);
             return res.status(500).json({ error: 'Failed to connect to GraphDB' });
@@ -99,9 +117,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
          * - Creates the URL for the GraphDB repository using the base URL and the repository ID extracted from the configuration.
          * - Initializes a `QueryExecutor` instance with the GraphDB client. This instance will be used to execute SPARQL queries.
          */
-        const repositoryId = configJsonDB.repositoryId;
+        const repositoryId = configJsonDB[vocabulary].repositoryId;
         const repositoryUrl = `${url}/repositories/${repositoryId}`;
+        const repositoryIdOtherVocabolary = configJsonDB[otherVocabulary].repositoryId;
+        const repositoryUrlOherVocabolary = `${otherUrl}/repositories/${repositoryIdOtherVocabolary}`;
         const queryExecutor = new QueryExecutor(graphDBClient, repositoryId, url, username, password, repositoryUrl);
+        const queryExecutorOtherVocabolary = new QueryExecutor(graphDBClientOtherVocabulary, repositoryIdOtherVocabolary, otherUrl, otherUsername, otherPassword, repositoryUrlOherVocabolary);
         /**
          * Retrieves the query configuration for the specified vocabulary using `getQueryConfig`.
          * Prepares the SPARQL queries for term data and breadcrumb path data by replacing placeholders in the query templates with the actual term.
@@ -110,6 +131,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         const queryVocabolo = queryConfig.queryVocabolo.replace('${term}', term);
         const breadcrumbsConfig = getQueryConfig(vocabulary);
         const queryBreadcrumbs = breadcrumbsConfig.queryBreadcrumbs.replace('${term}', term);
+
+        const queryConfigCronos = getQueryConfig('Chronostratigraphy');
+        const queryConfigTecto = getQueryConfig('TectonicUnits');
+
+        const queryLabelOfAllConceptCronos = queryConfigCronos.queryLabelOfAllConcept;
+        const queryLabelOfAllConceptTecto = queryConfigTecto.queryLabelOfAllConcept;
         /**
          * Set the string representing the github version based on the vocabulary
          */
@@ -134,6 +161,48 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             const breadcrumbResult: SparqlResult[] = await queryExecutor.executeSparqlQuery(queryBreadcrumbs);
             console.log('Breadcrumbs query result:', breadcrumbResult);
             const broaderTerms: string[] = [];
+            const prefLabelOfAllConcept: LabelQueryResult[] = await queryExecutor.executeSparqlQuery(queryLabelOfAllConceptCronos); //for per iterare su tutti i vocabolari, segnalazione da inserire in pratiche, 
+            const prefLabelOfAllConceptOtherVocabolary: LabelQueryResult[] = await queryExecutorOtherVocabolary.executeSparqlQuery(queryLabelOfAllConceptTecto);
+
+            const allConceptMap = new Map<string, string>();
+
+            const processResults = (results: LabelQueryResult[]) => {
+                console.log('Processing results:', results.length);
+                let addedCount = 0;
+                let skippedCount = 0;
+                let duplicateCount = 0;
+
+                const initialSize = allConceptMap.size;
+
+                results.forEach(result => {
+                    const subject = result.subject.value;
+                    const label = result.label.value;
+
+                    if (subject && label) {
+                        if (allConceptMap.has(subject)) {
+                            duplicateCount++;
+                        } else {
+                            allConceptMap.set(subject, label);
+                            addedCount++;
+                        }
+                    } else {
+                        skippedCount++;
+                    }
+                });
+
+                console.log('Processing complete:');
+                console.log(`- Added: ${addedCount}`);
+                console.log(`- Skipped: ${skippedCount}`);
+                console.log(`- Duplicates: ${duplicateCount}`);
+                console.log(`- Initial map size: ${initialSize}`);
+                console.log(`- Final map size: ${allConceptMap.size}`);
+                console.log(`- Difference: ${allConceptMap.size - initialSize}`);
+            };
+
+
+            processResults(prefLabelOfAllConcept);
+            processResults(prefLabelOfAllConceptOtherVocabolary);
+
             /**
              * Initializes a `TermData` object to store the term details.
              * Iterates through the term data results and populates the `TermData` object based on the predicates and objects retrieved.
@@ -198,6 +267,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
                         break;
                 }
             });
+            /**
+             * Takes from configuration the order to follow when saving prefLabels by giving them a precise order of display 
+             */
+            const orderedLanguages = queryConfig.labelLanguageOrder;
+            const sortedLanguages: { [key: string]: string } = {};
+            orderedLanguages.forEach((lang: string) => {
+                if (termData.languages[lang]) {
+                    sortedLanguages[lang] = termData.languages[lang];
+                }
+            });
+            termData.languages = sortedLanguages;
 
             breadcrumbResult.forEach(result => {
                 const { narrowerConcept } = result;
@@ -225,6 +305,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             const otherRelationObject = Object.fromEntries(
                 Array.from(termData.relatedTerms.OtherRelation.entries()).map(([key, value]) => [key, Array.from(value)])
             );
+            const allConceptObject = Object.fromEntries(
+                Array.from(allConceptMap.entries()).map(([key, value]) => [key, value])
+            );
             // Constructs the response data object with query results and term data.
             const responseData = {
                 predicates: termResult, // Results of the SPARQL query for the term.
@@ -236,8 +319,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
                     }
                 },
                 breadCrumbsData: breadCrumbsData,
+                allConceptMap: allConceptObject,
             };
 
+            console.log('All Concept Map:', responseData.allConceptMap);
             console.log('Query executed successfully, sending response');
             res.status(200).json(responseData);
         } catch (error) {
diff --git a/pages/api/getAllConceptMap.tsx b/pages/api/getAllConceptMap.tsx
new file mode 100644
index 0000000..30de5a5
--- /dev/null
+++ b/pages/api/getAllConceptMap.tsx
@@ -0,0 +1,93 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { GraphDBClient, QueryExecutor, getConfigDB, getQueryConfig } from '@/app/lib';
+import fs from 'fs';
+import path from 'path';
+
+interface LabelQueryResult {
+    subject: {
+        value: string;
+    };
+    label: {
+        value: string;
+    };
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method !== 'GET') {
+        return res.status(405).json({ error: 'Method not allowed' });
+    }
+
+    const configPath = path.join(process.cwd(), 'connectionDbConfig.json');
+    let configJsonDB;
+    try {
+        const configFile = fs.readFileSync(configPath, 'utf8');
+        configJsonDB = JSON.parse(configFile);
+    } catch (error) {
+        console.error('Error reading configuration file:', error);
+        return res.status(500).json({ error: 'Internal Server Error' });
+    }
+
+    const vocabularies = Object.keys(configJsonDB);
+    console.log(vocabularies);
+    const allConceptMap = new Map<string, string>();
+
+    try {
+        for (const vocabulary of vocabularies) {
+            const { url, username, password, repositoryId } = configJsonDB[vocabulary];
+            const graphDBClient = new GraphDBClient(url, username, password);
+            const repositoryUrl = `${url}/repositories/${repositoryId}`;
+            const queryExecutor = new QueryExecutor(graphDBClient, repositoryId, url, username, password, repositoryUrl);
+
+            const queryConfig = getQueryConfig(vocabulary);
+            const queryLabelOfAllConcept = queryConfig.queryLabelOfAllConcept;
+
+            const prefLabels: LabelQueryResult[] = await queryExecutor.executeSparqlQuery(queryLabelOfAllConcept);
+
+            try {
+                await graphDBClient.getRepositoryIds();
+                console.log('GraphDB connection successful for:', vocabulary);
+            } catch (error) {
+                console.error('GraphDB connection failed:', error);
+                return res.status(500).json({ error: 'Failed to connect to GraphDB' });
+            }
+
+            const allSubjects = new Set();
+
+            prefLabels.forEach(result => {
+                const subject = result.subject.value;
+                const label = result.label.value;
+
+                if (subject && label) {
+                    if (allSubjects.has(subject)) {
+                        console.log('Duplicato trovato:', subject, 'con label:', label);
+                    } else {
+                        allSubjects.add(subject);
+
+                        const parts = subject.split('/');
+                        if (parts.length >= 5) {
+                            const vocabulary = parts[parts.length - 2];
+                            const term = parts[parts.length - 1];
+
+                            if ((vocabulary === 'Chronostratigraphy' || vocabulary === 'TectonicUnits') && term) {
+                                allConceptMap.set(subject, label);
+                            } else {
+                                console.log('Non aggiunto:', subject);
+                            }
+                        } else {
+                            console.log('URL non valido, troppe poche parti:', subject);
+                        }
+                    }
+                }
+            });
+        }
+
+        const allConceptObject = Object.fromEntries(
+            Array.from(allConceptMap.entries()).map(([key, value]) => [key, value])
+        );
+
+        res.status(200).json({ allConceptMap: allConceptObject });
+    } catch (error) {
+        console.error('Error fetching all concepts:', error);
+        res.status(500).json({ error: 'Internal Server Error' });
+    }
+}
diff --git a/queryConfig.json b/queryConfig.json
index 93040db..39aee90 100644
--- a/queryConfig.json
+++ b/queryConfig.json
@@ -1,11 +1,18 @@
 {
     "Chronostratigraphy": {
         "queryBreadcrumbs": "PREFIX skos: <http://www.w3.org/2004/02/skos/core#>\nPREFIX ex: <https://lexic.swisstopo.demo.epsilon-italia.it/Chronostratigraphy/>\n\nSELECT ?narrowerConcept\nWHERE {\n  ex:${term} skos:broader+ ?narrowerConcept.\n}",
-        "queryVocabolo": "PREFIX skos: <http://www.w3.org/2004/02/skos/core#>\nPREFIX ex: <https://lexic.swisstopo.demo.epsilon-italia.it/Chronostratigraphy/>\n\nSELECT ?predicate ?object\nWHERE {\n  ex:${term} ?predicate ?object .\n}"
+        "queryVocabolo": "PREFIX skos: <http://www.w3.org/2004/02/skos/core#>\nPREFIX ex: <https://lexic.swisstopo.demo.epsilon-italia.it/Chronostratigraphy/>\n\nSELECT ?predicate ?object\nWHERE {\n  ex:${term} ?predicate ?object .\n}",
+        "prefLabelOfAllConcept": "SELECT DISTINCT ?subject ?label\nWHERE {\n  GRAPH ?graph {\n ?subject ?predicate ?label .\n FILTER(CONTAINS(LCASE(STR(?predicate)), \"label\"))\n FILTER(LANGMATCHES(LANG(?label), \"en\"))\n }\n}"
     },
-    
     "TectonicUnits": {
         "queryBreadcrumbs": "PREFIX skos: <http://www.w3.org/2004/02/skos/core#>\nPREFIX ex: <https://lexic.swisstopo.demo.epsilon-italia.it/TectonicUnits/>\n\nSELECT ?narrowerConcept\nWHERE {\n  ex:${term} skos:broader+ ?narrowerConcept.\n}",
-        "queryVocabolo": "PREFIX skos: <http://www.w3.org/2004/02/skos/core#>\nPREFIX ex: <https://lexic.swisstopo.demo.epsilon-italia.it/TectonicUnits/>\n\nSELECT ?predicate ?object\nWHERE {\n  ex:${term} ?predicate ?object .\n}"
-    }
-}
\ No newline at end of file
+        "queryVocabolo": "PREFIX skos: <http://www.w3.org/2004/02/skos/core#>\nPREFIX ex: <https://lexic.swisstopo.demo.epsilon-italia.it/TectonicUnits/>\n\nSELECT ?predicate ?object\nWHERE {\n  ex:${term} ?predicate ?object .\n}",
+        "prefLabelOfAllConcept": "SELECT DISTINCT ?subject ?label\nWHERE {\n  GRAPH ?graph {\n ?subject ?predicate ?label .\n FILTER(CONTAINS(LCASE(STR(?predicate)), \"label\"))\n FILTER(LANGMATCHES(LANG(?label), \"en\"))\n }\n}"
+    },
+    "labelLanguageOrder": [
+        "en",
+        "de",
+        "fr",
+        "it"
+    ]
+}