diff --git a/src/api/axios.config.js b/src/api/axios.config.js
index 8b0efb2..1b093b3 100644
--- a/src/api/axios.config.js
+++ b/src/api/axios.config.js
@@ -1,7 +1,7 @@
 import axios from 'axios'
 
 const apis = {
-  development: 'http://localhost:4000',
+  development: 'https://actionsys.herokuapp.com/',
   production: 'https://actionsys.herokuapp.com/'
 }
 
diff --git a/src/components/ListarFuncionarios/ListarFuncionarios.js b/src/components/ListarFuncionarios/ListarFuncionarios.js
index b4efd16..e183550 100644
--- a/src/components/ListarFuncionarios/ListarFuncionarios.js
+++ b/src/components/ListarFuncionarios/ListarFuncionarios.js
@@ -7,23 +7,24 @@ function ListarFuncionarios() {
   const [funcionarios, setFuncionarios] = useState([]);
   const [filteredFuncionarios, setFilteredFuncionarios] = useState([]);
   const [searchWord, setSearchWord] = useState("");
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     async function buscarFuncionarios() {
       try {
-        setLoading(true)
+        setLoading(true);
         const response = await api.get("/funcionarios");
 
         setFuncionarios([...response.data]);
-        setLoading(false)
+
+        setLoading(false);
       } catch (err) {
         console.error(err);
       }
     }
     buscarFuncionarios();
   }, [setLoading]);
-  
+
   useEffect(() => {
     async function buscarFuncionarios() {
       try {
@@ -31,7 +32,7 @@ function ListarFuncionarios() {
 
         if (funcionarios.length !== 0 && searchWord.length !== 0) {
           filteredArray = funcionarios.filter((funcionario) =>
-          funcionario.nome.toLowerCase().includes(searchWord.toLowerCase())
+            funcionario.nome.toLowerCase().includes(searchWord.toLowerCase())
           );
         }
         setFilteredFuncionarios([...filteredArray]);
@@ -46,8 +47,16 @@ function ListarFuncionarios() {
     setSearchWord(event.target.value);
   }
 
-  if (loading === true ) {
-    return <div>LOADING...</div>
+  if (loading === true) {
+    return (
+      <div
+        className="w-100 d-flex justify-content-center align-items-center"
+        style={{ minHeight: "25rem" }}
+      >
+        <div class="spinner-border spinner-border-sm h1" role="status"></div>
+        <span className="sr-only mx-5">Loading...</span>
+      </div>
+    );
   }
 
   return (
@@ -63,17 +72,17 @@ function ListarFuncionarios() {
           value={searchWord}
         />
       </div>
-        {searchWord && filteredFuncionarios.map((funcionario, i) => (
-          <div className="d-flex justify-content-center"><CardFuncionario funcionarios={funcionario} id={i} /></div>
+      {searchWord &&
+        filteredFuncionarios.map((funcionario, i) => (
+          <div className="d-flex justify-content-center">
+            <CardFuncionario funcionarios={funcionario} id={i} />
+          </div>
         ))}
 
-        
       {funcionarios &&
         funcionarios.map((funcionario, i) => (
           <CardFuncionario key={i} funcionarios={funcionario} />
         ))}
-
-
     </div>
   );
 }