diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 940d0af..0c44556 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,11 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: make tool examples responsive">
-      <change afterPath="$PROJECT_DIR$/src/components/Loading.css" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: loading screen">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/Loading.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Loading.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/config/routesConfig.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/routesConfig.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Hero.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Hero.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -195,14 +193,7 @@
       <workItem from="1719294110005" duration="3842000" />
       <workItem from="1719339559458" duration="303000" />
       <workItem from="1719340295244" duration="772000" />
-    </task>
-    <task id="LOCAL-00015" summary="ubf">
-      <option name="closed" value="true" />
-      <created>1719006515710</created>
-      <option name="number" value="00015" />
-      <option name="presentableId" value="LOCAL-00015" />
-      <option name="project" value="LOCAL" />
-      <updated>1719006515710</updated>
+      <workItem from="1719363272227" duration="330000" />
     </task>
     <task id="LOCAL-00016" summary="ubf jn">
       <option name="closed" value="true" />
@@ -588,7 +579,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719359368236</updated>
     </task>
-    <option name="localTasksCounter" value="64" />
+    <task id="LOCAL-00064" summary="chore: loading screen">
+      <option name="closed" value="true" />
+      <created>1719360545177</created>
+      <option name="number" value="00064" />
+      <option name="presentableId" value="LOCAL-00064" />
+      <option name="project" value="LOCAL" />
+      <updated>1719360545177</updated>
+    </task>
+    <option name="localTasksCounter" value="65" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -609,7 +608,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="feat: create tool script" />
     <MESSAGE value="fix: missing files" />
     <MESSAGE value="fix: create tool" />
     <MESSAGE value="fix: build" />
@@ -634,7 +632,8 @@
     <MESSAGE value="feat: make responsive" />
     <MESSAGE value="feat: make tool responsive" />
     <MESSAGE value="chore: make tool examples responsive" />
-    <option name="LAST_COMMIT_MESSAGE" value="chore: make tool examples responsive" />
+    <MESSAGE value="chore: loading screen" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: loading screen" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 5c8a67d..4901e0a 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -6,6 +6,7 @@ import { useState } from 'react';
 import { DefinedTool } from '@tools/defineTool';
 import { filterTools, tools } from '@tools/index';
 import { useNavigate } from 'react-router-dom';
+import _ from 'lodash';
 
 const exampleTools: { label: string; url: string }[] = [
   {
@@ -23,14 +24,16 @@ const exampleTools: { label: string; url: string }[] = [
 ];
 export default function Hero() {
   const [inputValue, setInputValue] = useState<string>('');
-  const [filteredTools, setFilteredTools] = useState<DefinedTool[]>(tools);
+  const [filteredTools, setFilteredTools] = useState<DefinedTool[]>(
+    _.shuffle(tools)
+  );
   const navigate = useNavigate();
   const handleInputChange = (
     event: React.ChangeEvent<{}>,
     newInputValue: string
   ) => {
     setInputValue(newInputValue);
-    setFilteredTools(filterTools(tools, newInputValue));
+    setFilteredTools(_.shuffle(filterTools(tools, newInputValue)));
   };
   return (
     <Box width={{ xs: '90%', md: '80%', lg: '60%' }}>
@@ -61,6 +64,7 @@ export default function Hero() {
         sx={{ mb: 2 }}
         autoHighlight
         options={filteredTools}
+        inputValue={inputValue}
         getOptionLabel={(option) => option.name}
         renderInput={(params) => (
           <TextField