diff --git a/src/screens/AddBankAccount/AddBankAccount.js b/src/components/Forms/AddAccount.js
similarity index 88%
rename from src/screens/AddBankAccount/AddBankAccount.js
rename to src/components/Forms/AddAccount.js
index 8206176..7723b76 100644
--- a/src/screens/AddBankAccount/AddBankAccount.js
+++ b/src/components/Forms/AddAccount.js
@@ -3,9 +3,9 @@ import { View, Text, TextInput, Button, Alert } from "react-native";
 
 import { addAccounts } from "../../utils/storageAccounts.js";
 
-import styles from "./styles.js";
+import styles from "../../styles/styles";
 
-function AddBankAccount({ navigation }) {
+function AddAccount({ navigation }) {
   const [name, setName] = useState("");
   const [bank, setbank] = useState("");
   const [balance, setbalance] = useState(0.0);
@@ -77,16 +77,9 @@ function AddBankAccount({ navigation }) {
 
       <View style={styles.buttonsView}>
         <Button title="Add" onPress={handleAddAccount} />
-        <Button
-          color="#757de8"
-          title="Back"
-          onPress={() => {
-            navigation.goBack();
-          }}
-        ></Button>
       </View>
     </View>
   );
 }
 
-export default AddBankAccount;
+export default AddAccount;
diff --git a/src/screens/Add/TransactionForm.js b/src/components/Forms/AddTransaction.js
similarity index 98%
rename from src/screens/Add/TransactionForm.js
rename to src/components/Forms/AddTransaction.js
index e07f245..45d6c29 100644
--- a/src/screens/Add/TransactionForm.js
+++ b/src/components/Forms/AddTransaction.js
@@ -3,7 +3,7 @@ import { View, Text, TextInput, TouchableOpacity, Alert } from "react-native";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import { Picker } from "@react-native-picker/picker";
 
-import styles from "./styles.js";
+import styles from "../../styles/AddTransactionStyle";
 import { addRevenuesAndExpenses } from "../../utils/storage.js";
 import { useAccountsCardStore } from "../../stores/CardsStore.js";
 
diff --git a/src/screens/EditBankAccount/EditBankAccount.js b/src/components/Forms/EditAccount.js
similarity index 94%
rename from src/screens/EditBankAccount/EditBankAccount.js
rename to src/components/Forms/EditAccount.js
index b611907..6bac508 100644
--- a/src/screens/EditBankAccount/EditBankAccount.js
+++ b/src/components/Forms/EditAccount.js
@@ -1,11 +1,10 @@
 import React, { useState } from "react";
 import { View, Text, TextInput, Button } from "react-native";
 
+import styles from "../../styles/EditFormsStyle";
 import {updateAccounts} from "../../utils/storageAccounts";
 
-import styles from "./styles";
-
-const EditBankAccount = ({ route, navigation }) => {
+const EditAccount = ({ route, navigation }) => {
   const { index, account } = route.params;
   const [name, setName] = useState(account.name);
   const [bank, setBank] = useState(account.bank);
@@ -84,4 +83,4 @@ const EditBankAccount = ({ route, navigation }) => {
     </View>
   );
 };
-export default EditBankAccount;
+export default EditAccount;
diff --git a/src/screens/ExtractDetail/formEdit.js b/src/components/Forms/EditTransaction.js
similarity index 97%
rename from src/screens/ExtractDetail/formEdit.js
rename to src/components/Forms/EditTransaction.js
index 6a1039b..fb05f09 100644
--- a/src/screens/ExtractDetail/formEdit.js
+++ b/src/components/Forms/EditTransaction.js
@@ -9,10 +9,10 @@ import {
 } from "react-native";
 import DateTimePicker from '@react-native-community/datetimepicker';
 
-import styles from "./stylesForms.js";
+import styles from "../../styles/EditFormsStyle.js"
 import { updateRevenuesAndExpenses } from "../../utils/storage.js";
 
-export default function EditForm({ route, navigation }) {
+export default function EditTransaction({ route, navigation }) {
   const { transaction, index } = route.params;
   const [name, setName] = useState(transaction.name);
   const [value, setValue] = useState(transaction.value.toString());
diff --git a/src/routes/AddAccount.js b/src/routes/AddAccount.js
deleted file mode 100644
index 602cc9c..0000000
--- a/src/routes/AddAccount.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from "react";
-
-import { createStackNavigator } from "@react-navigation/stack";
-
-import Accounts from "../screens/Accounts/Accounts";
-import AddCreditCard from "../screens/AddCreditCard/AddCreditCard";
-import AddBankAccount from "../screens/AddBankAccount/AddBankAccount";
-import DetailBankAccount from "../screens/DetailBankAccount/DetailBankAccount";
-import DetailCreditCard from "../screens/DetailCreditCard/DetailCreditCard";
-import EditBankAccount from "../screens/EditBankAccount/EditBankAccount";
-import EditCreditCard from "../screens/EditCreditCard/EditCreditCard";
-import ViewCard from "../screens/ViewCard/ViewCard";
-
-const Stack = createStackNavigator();
-
-export function AddRoute() {
-  return (
-    <Stack.Navigator screenOptions={{ headerShown: false }}>
-      <Stack.Screen name="MainCounts" component={Accounts} />
-      <Stack.Screen
-        name="AddBankAccount"
-        component={AddBankAccount}
-      />
-      <Stack.Screen
-        name="AddCreditCard"
-        component={AddCreditCard}
-      />
-      <Stack.Screen
-        name="DetailBankAccount"
-        component={DetailBankAccount}
-      />
-      <Stack.Screen
-        name="DetailCreditCard"
-        component={DetailCreditCard}
-      />
-      <Stack.Screen
-        name="EditBankAccount"
-        component={EditBankAccount}
-      />
-      <Stack.Screen
-        name="EditCreditCard"
-        component={EditCreditCard}
-      />
-      <Stack.Screen name="Card" component={ViewCard} />
-    </Stack.Navigator>
-  );
-}
diff --git a/src/routes/ExtractRoute.js b/src/routes/ExtractRoute.js
index 76a90c3..8d19058 100644
--- a/src/routes/ExtractRoute.js
+++ b/src/routes/ExtractRoute.js
@@ -2,8 +2,9 @@ import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 
 import ExtractS from "../screens/Extract/Extract";
-import ExtractDetail from "../screens/ExtractDetail/ExtractDetail";
-import EditForm from "../screens/ExtractDetail/formEdit";
+import DetailTransaction from "../screens/DetailTransaction/DetailTransaction";
+import EditTransaction from "../components/Forms/EditTransaction";
+import FormsScreen from "../screens/FormsScreen/FormsScreen";
 
 const Stack = createStackNavigator();
 
@@ -11,8 +12,9 @@ export function ExtractRoute() {
   return (
     <Stack.Navigator screenOptions={{ headerShown: false }}>
       <Stack.Screen name="ExtractS" component={ExtractS} />
-      <Stack.Screen name="ExtractDetail" component={ExtractDetail} />
-      <Stack.Screen name="EditForm" component={EditForm} />
+      <Stack.Screen name="DetailTransaction" component={DetailTransaction} />
+      <Stack.Screen name="EditTransaction" component={EditTransaction} />
+      <Stack.Screen name="FormsScreen" component={FormsScreen} />
     </Stack.Navigator>
   );
 }
diff --git a/src/routes/Main.js b/src/routes/Main.js
index d3c5bdc..d4135a0 100644
--- a/src/routes/Main.js
+++ b/src/routes/Main.js
@@ -3,16 +3,14 @@ import { NavigationContainer } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 
 import Home from "../screens/Home/Home.js";
-import { AddRoute } from "./AddAccount.js";
+import { AddRoute } from "./RouteAccounts.js";
 import { ExtractRoute } from "./ExtractRoute.js";
 
-import Add from "../screens/Add/Add";
 import { LogoTitle } from "../components/LogoTitle.js";
 
 import HomeIcon from "../assets/home.svg";
 import ExtratoIcon from "../assets/extract.svg";
 import ContasIcon from "../assets/accounts.svg";
-import AddIcon from "../assets/add.svg";
 
 const Tab = createBottomTabNavigator();
 
@@ -42,8 +40,6 @@ export function MainRoute() {
                 return <ExtratoIcon width={24} height={24} />;
               case "Accounts":
                 return <ContasIcon width={24} height={24} />;
-              case "Add":
-                return <AddIcon width={24} height={24} />;
               default:
                 return null;
             }
@@ -68,24 +64,22 @@ export function MainRoute() {
         >
           {(props) => <Home visibleBalance={visibleBalance} {...props} />}
         </Tab.Screen>
-        <Tab.Screen name="Extract" 
-          options={{
-              headerStyle:{backgroundColor:"#2196f3"},
-              headerTintColor: "#fff"
-              }}
-          component={ExtractRoute} />
-        <Tab.Screen name="Accounts"
+        <Tab.Screen
+          name="Extract"
           options={{
-            headerStyle:{backgroundColor:"#2196f3"},
-            headerTintColor: "#fff"
-            }}
-          component={AddRoute} />
-        <Tab.Screen name="Add" 
+            headerStyle: { backgroundColor: "#2196f3" },
+            headerTintColor: "#fff",
+          }}
+          component={ExtractRoute}
+        />
+        <Tab.Screen
+          name="Accounts"
           options={{
-            headerStyle:{backgroundColor:"#2196f3"},
-            headerTintColor: "#fff"
-            }}
-          component={Add} />
+            headerStyle: { backgroundColor: "#2196f3" },
+            headerTintColor: "#fff",
+          }}
+          component={AddRoute}
+        />
       </Tab.Navigator>
     </NavigationContainer>
   );
diff --git a/src/routes/RouteAccounts.js b/src/routes/RouteAccounts.js
new file mode 100644
index 0000000..957a16d
--- /dev/null
+++ b/src/routes/RouteAccounts.js
@@ -0,0 +1,23 @@
+import React from "react";
+
+import { createStackNavigator } from "@react-navigation/stack";
+
+import Accounts from "../screens/Accounts/Accounts";
+import FormsScreen from "../screens/FormsScreen/FormsScreen";
+import AddAccount from "../components/Forms/AddAccount";
+import DetailAccount from "../screens/DetailAccount/DetailAccount";
+import EditAccount from "../components/Forms/EditAccount";
+
+const Stack = createStackNavigator();
+
+export function AddRoute() {
+  return (
+    <Stack.Navigator screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="MainCounts" component={Accounts} />
+      <Stack.Screen name="FormsScreen" component={FormsScreen} />
+      <Stack.Screen name="AddAccount" component={AddAccount} />
+      <Stack.Screen name="DetailAccount" component={DetailAccount} />
+      <Stack.Screen name="EditAccount" component={EditAccount} />
+    </Stack.Navigator>
+  );
+}
diff --git a/src/screens/Accounts/Accounts.js b/src/screens/Accounts/Accounts.js
index b12d4d1..603bd66 100644
--- a/src/screens/Accounts/Accounts.js
+++ b/src/screens/Accounts/Accounts.js
@@ -1,168 +1,58 @@
-import React, { useState, useEffect } from "react";
-import { View, Text, ScrollView, TouchableOpacity, Alert } from "react-native";
-import { useNavigation, useFocusEffect } from "@react-navigation/native";
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import React, { useEffect } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
 
 import AddIcon from "../../assets/add.svg";
-import EditIcon from "../../assets/edit.svg";
-import DeleteIcon from "../../assets/delete_white.svg";
-import styles from "./styles.js";
-
-import { useAccountsStore } from "../../stores/AccountsStore.js";
-import { useCardStore } from "../../stores/CardsStore.js";
-
-import { removeAccounts } from "../../utils/storageAccounts";
-import { removeCards } from "../../utils/storageCards";
+import styles from "../../styles/listsStyle";
+import { useAccountsCardStore } from "../../stores/CardsStore.js";
+import AddAccount from "../../components/Forms/AddAccount";
 
 const Accounts = ({ navigation }) => {
-  const listAccounts = useAccountsStore((state) => state.listAccounts);
-  const fetchAccounts = useAccountsStore((state) => state.fetchAccounts);
-  const listCards = useCardStore((state) => state.listCards);
-  const fetchCards = useCardStore((state) => state.fetchCards);
-
-  const [updatedAccounts, setUpdatedAccounts] = useState(false);
+  const listAccountsCards = useAccountsCardStore(
+    (state) => state.listAccountsCards
+  );
+  const fetchAccountsCards = useAccountsCardStore(
+    (state) => state.fetchAccountsCards
+  );
 
   useEffect(() => {
-    fetchAccounts();
-    fetchCards();
+    fetchAccountsCards();
   }, []);
 
-  useFocusEffect(
-    React.useCallback(() => {
-      fetchAccounts();
-      fetchCards();
-    }, [updatedAccounts])
-  );
-
-  const dialogDeleteCard = (index) => {
-    Alert.alert("Delete card", "Do you really want to delete?", [
-      {
-        text: "Cancel",
-      },
-      {
-        text: "Confirm",
-        onPress: () => {
-          fetchCards();
-          removeCards(index);
-        },
-      },
-    ]);
-  };
-
-  const dialogDetails = (account) => {
-    Alert.alert(account.name, account.type_account);
-  };
-
-  const dialogDeleteAccount = (index) => {
-    Alert.alert("Delete account", "Do you really want to delete?", [
-      {
-        text: "Cancel",
-      },
-      {
-        text: "Confirm",
-        onPress: async () => {
-          removeAccounts(index);
-          setUpdatedAccounts(true);
-        },
-      },
-    ]);
-  };
-
   return (
-    <>
-      <View style={{ flex: 1, flexDirection: "row" }}>
-        <ScrollView style={styles.containerScroll}>
-          <Text style={styles.textTitle}>Bank Accounts</Text>
-
-          {listAccounts.map((account, index) => {
-            return (
+    <View style={styles.container}>
+      <>
+        {listAccountsCards.map((account, index) => {
+          return (
+            <View key={index}>
               <TouchableOpacity
-                key={index}
-                onPress={() =>  navigation.navigate("DetailBankAccount", { account })}
+                onPress={() => {
+                  navigation.navigate("DetailAccount", { account, index });
+                }}
               >
-                <View style={styles.contaBancaria}>
-                  <Text style={[styles.cardText, styles.cardTextTitle]}>
-                    {account.bank}
+                <View style={styles.item}>
+                  <Text style={styles.item__leftText}>
+                    {account.name}
+                    {"\n"}
+                    <Text>
+                      {"Bank:"} {account.bank}
+                    </Text>
                   </Text>
-                  <Text style={styles.cardText}>US$ {account.balance}</Text>
-
-                  <View style={styles.cardIcons}>
-                    {/* Edit button*/}
-                    <TouchableOpacity
-                      onPress={() =>
-                        navigation.navigate("EditBankAccount", { index, account })
-                      }
-                    >
-                      <EditIcon width={20} height={20} />
-                    </TouchableOpacity>
-
-                    {/* Delete button */}
-                    <TouchableOpacity onPress={() => dialogDeleteAccount(index)}>
-                      <DeleteIcon width={20} height={20} />
-                    </TouchableOpacity>
-                  </View>
                 </View>
               </TouchableOpacity>
-            );
-          })}
-
-          <View style={styles.addButtonContainer}>
-            <TouchableOpacity
-              style={styles.button}
-              onPress={() => navigation.navigate("AddBankAccount")}
-            >
-              <AddIcon width={24} height={24} />
-            </TouchableOpacity>
-          </View>
-        </ScrollView>
-
-        <ScrollView style={styles.containerScroll}>
-          <Text style={styles.textTitle}>Credit Cards</Text>
-          {listCards.map((card, index) => {
-            return (
-              <TouchableOpacity
-                key={index}
-                onPress={() =>
-                  navigation.navigate("DetailCreditCard", { card, index })
-                }
-              >
-                <View style={styles.cardCartao}>
-                  <Text style={[styles.cardText, styles.cardTextTitle]}>
-                    {card.name}
-                  </Text>
-                  <Text style={styles.cardText}>US$ {card.totalInvoices}</Text>
-
-                  <View style={styles.cardIcons}>
-                    {/* Edit button*/}
-                    <TouchableOpacity
-                      onPress={() =>
-                        navigation.navigate("EditCreditCard", { index, card })
-                      }
-                    >
-                      <EditIcon width={20} height={20} />
-                    </TouchableOpacity>
-
-                    {/* Delete button */}
-                    <TouchableOpacity onPress={() => dialogDeleteCard(index)}>
-                      <DeleteIcon width={20} height={20} />
-                    </TouchableOpacity>
-                  </View>
-                </View>
-              </TouchableOpacity>
-            );
-          })}
-
-          <View style={styles.addButtonContainer}>
-            <TouchableOpacity
-              style={styles.button}
-              onPress={() => navigation.navigate("AddCreditCard")}
-            >
-              <AddIcon width={24} height={24} />
-            </TouchableOpacity>
-          </View>
-        </ScrollView>
-      </View>
-    </>
+              <View style={styles.divider}></View>
+            </View>
+          );
+        })}
+        <View style={styles.addButtonContainer}>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => navigation.navigate("FormsScreen", { component: <AddAccount /> })}
+          >
+            <AddIcon width={24} height={24} />
+          </TouchableOpacity>
+        </View>
+      </>
+    </View>
   );
 };
 
diff --git a/src/screens/Accounts/styles.js b/src/screens/Accounts/styles.js
deleted file mode 100644
index 93d5429..0000000
--- a/src/screens/Accounts/styles.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import { StyleSheet } from "react-native";
-
-export default styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: "#fff",
-  },
-  textTitle: {
-    fontSize: 20,
-    fontWeight: "bold",
-    textAlign: "center",
-    paddingBottom: 5,
-  },
-  containerScroll: {
-    padding: 20,
-    width: "45%",
-  },
-  cardText: {
-    color: "white",
-    fontSize: 20,
-    textAlign: "center",
-  },
-  cardTextTitle: {
-    fontWeight: "bold",
-  },
-  cardIcons: {
-    flexDirection: "row",
-    gap: 15,
-  },
-  contaBancaria: {
-    gap: 4,
-    paddingBottom: 10,
-    paddingTop: 10,
-    marginBottom: 16,
-    alignItems: "center",
-    borderRadius: 10,
-    backgroundColor: "#1a7bd5",
-  },
-  cardCartao: {
-    gap: 4,
-    paddingBottom: 10,
-    paddingTop: 10,
-    marginBottom: 16,
-    alignItems: "center",
-    borderRadius: 10,
-    backgroundColor: "#757de8",
-  },
-  conta_bancaria: {
-    width: "80%",
-    paddingVertical: 15,
-    paddingHorizontal: 20,
-    fontSize: 16,
-    fontWeight: "bold",
-    borderRadius: 10,
-    borderColor: "black",
-    borderWidth: 1,
-    marginVertical: 5,
-    marginHorizontal: 1,
-    backgroundColor: "#D9D9D9",
-  },
-  btnStyle: {
-    alignItems: "center",
-    alignContent: "center",
-    justifyContent: "center",
-    backgroundColor: "red",
-    padding: 2,
-    margin: 3,
-    flexDirection: "row",
-    width: 50,
-    fontWeight: "bold",
-    borderRadius: 0, // Alterado para 0 para criar botões quadrados
-  },
-  btnStyleEdit: {
-    alignItems: "center",
-    alignContent: "center",
-    justifyContent: "center",
-    backgroundColor: "yellow",
-    padding: 2,
-    margin: 3,
-    flexDirection: "row",
-    width: 50,
-    fontWeight: "bold",
-    borderRadius: 0,
-  },
-  button: {
-    borderRadius: 100,
-    height: 40,
-    width: 40,
-    alignItems: "center",
-    alignContent: "center",
-    justifyContent: "center",
-    backgroundColor: "#1a7bd5",
-  },
-  viewbutton: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    width: "100%",
-  },
-  viewsContainer: {
-    flexDirection: "row",
-  },
-  viewbanco: {
-    width: "100%",
-    padding: 2,
-  },
-  ViewCartão: {
-    width: "45%",
-    left: 5,
-    backgroundColor: "#D9D99",
-  },
-  addButtonContainer: {
-    alignItems: 'center',
-    marginTop: 20, 
-  },
-});
diff --git a/src/screens/Add/Add.js b/src/screens/Add/Add.js
deleted file mode 100644
index a65002f..0000000
--- a/src/screens/Add/Add.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-
-import styles from "./styles.js";
-import Form from "./TransactionForm.js";
-
-export default function Add() {
-  return (
-    <View style={styles.container}>
-      <Form />
-    </View>
-  );
-}
diff --git a/src/screens/AddCreditCard/AddCreditCard.js b/src/screens/AddCreditCard/AddCreditCard.js
deleted file mode 100644
index 3d38bea..0000000
--- a/src/screens/AddCreditCard/AddCreditCard.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { useState } from "react";
-import { View, Text, TextInput, Button, Alert } from "react-native";
-
-import { addCards } from "../../utils/storageCards";
-
-import styles from "./styles";
-
-function AddCard({ navigation }) {
-  const [name, setName] = useState("");
-  const [bank, setBank] = useState("");
-  const [totalInvoices, setTotalInvoices] = useState(0.0);
-
-  const handleAddCard = async () => {
-    if (
-      name === "" ||
-      bank === "" ||
-      totalInvoices === "" ||
-      !Number(totalInvoices) ||
-      Number(totalInvoices) < 0
-    ) {
-      Alert.alert("Fill in the fields correctly!");
-      return;
-    }
-
-    if (name && bank && totalInvoices) {
-      const card = {
-        name,
-        bank,
-        totalInvoices,
-      };
-
-      try {
-        addCards(card);
-
-        // Clean the fields after adding the card
-        setName("");
-        setBank("");
-        setTotalInvoices(0.0);
-
-        Alert.alert("Card succesfully added!");
-      } catch (error) {
-        Alert.alert("Error saving card:", error);
-      }
-      navigation.goBack()
-    }
-  };
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.heading}>Add Credit Card</Text>
-      <TextInput
-        style={styles.input}
-        placeholder="Name"
-        value={name}
-        onChangeText={(text) => setName(text)}
-      />
-      <TextInput
-        style={styles.input}
-        placeholder="Bank"
-        value={bank}
-        onChangeText={(text) => setBank(text)}
-      />
-      <TextInput
-        style={styles.input}
-        placeholder="Total amount of card bills"
-        value={totalInvoices}
-        onChangeText={(text) => setTotalInvoices(text)}
-      />
-
-      <View style={styles.buttonsView}>
-        <Button title="Add" onPress={handleAddCard} />
-        <Button
-          color="#757de8"
-          title="Back"
-          onPress={() => {
-            navigation.goBack();
-          }}
-        ></Button>
-      </View>
-    </View>
-  );
-}
-
-export default AddCard;
diff --git a/src/screens/DetailBankAccount/DetailBankAccount.js b/src/screens/DetailAccount/DetailAccount.js
similarity index 91%
rename from src/screens/DetailBankAccount/DetailBankAccount.js
rename to src/screens/DetailAccount/DetailAccount.js
index db5aced..84962b4 100644
--- a/src/screens/DetailBankAccount/DetailBankAccount.js
+++ b/src/screens/DetailAccount/DetailAccount.js
@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from "react";
-import { View, Text, TextInput, Button, ScrollView, Alert } from "react-native";
+import React, { useEffect } from "react";
+import { View, Text, Button, ScrollView, Alert } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
 
 import styles from "./styles";
 import { removeAccounts } from "../../utils/storageAccounts";
 import { useExtractStore } from "../../stores/ExtractStore.js";
 
-const DetailBankAccount = ({ route, navigation }) => {
+const DetailAccount = ({ route, navigation }) => {
   const { account, index } = route.params;
 
   const extract = useExtractStore((state) => state.extract);
@@ -54,7 +54,7 @@ const DetailBankAccount = ({ route, navigation }) => {
       <View style={styles.buttonsView}>
         <Button
           title="Edit"
-          onPress={() => navigation.navigate("EditBankAccount", { account })}
+          onPress={() => navigation.navigate("EditAccount", { account })}
         ></Button>
         <Button
           color="red"
@@ -117,4 +117,4 @@ const DetailBankAccount = ({ route, navigation }) => {
   );
 };
 
-export default DetailBankAccount;
+export default DetailAccount;
diff --git a/src/screens/DetailBankAccount/styles.js b/src/screens/DetailAccount/styles.js
similarity index 100%
rename from src/screens/DetailBankAccount/styles.js
rename to src/screens/DetailAccount/styles.js
diff --git a/src/screens/DetailCreditCard/DetailCreditCard.js b/src/screens/DetailCreditCard/DetailCreditCard.js
deleted file mode 100644
index 7a5752a..0000000
--- a/src/screens/DetailCreditCard/DetailCreditCard.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { View, Text, TextInput, Button, ScrollView, TouchableOpacity, Alert } from "react-native";
-
-import styles from "./styles";
-import { useExtractStore } from "../../stores/ExtractStore.js";
-
-const DetailCreditCard = ({ navigation, route }) => {
-  const { card } = route.params;
-
-  const extract = useExtractStore((state) => state.extract);
-  const fetchExtract = useExtractStore((state) => state.fetchExtract);
-
-  useEffect(() => {
-    fetchExtract();
-  }, []);
-
-  const handleDelete = () => {
-    Alert.alert("Delete card", "Do you really want to delete?", [
-      {
-        text: "Cancel",
-        style: "cancel",
-      },
-      {
-        text: "Confirm",
-        onPress: () => {
-          // Perform delete logic here
-
-          // Navigate back to the "Accounts" screen
-          navigation.goBack();
-        },
-        style: "destructive",
-      },
-    ]);
-  };
-
-  const handleEdit = () => {
-    // Navigate to the "EditarCartao" screen and pass the card data
-    navigation.navigate("EditCreditCard", { card });
-  };
-
-  return (
-    <>
-    <View style={styles.container}>
-      <Text style={styles.textName}>{card.name}</Text>
-      <Text style={styles.text}>{card.bank}</Text>
-      <Text style={styles.text}>Total invoices: US$ {card.totalInvoices}</Text>
-      <View style={styles.buttonContainer}>
-        <TouchableOpacity onPress={handleEdit} style={styles.editButton}>
-          <Text style={styles.buttonTextEdit}>Edit Card</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={handleDelete} style={styles.deleteButton}>
-          <Text style={styles.buttonTextDelete}>Delete Card</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-    <View style={{ backgroundColor: "#fff",padding: 20 }}>
-    <ScrollView>
-      <View>
-        {extract.filter((item) => item.account == card.name).map((transaction, index) => {
-          return (
-            <View key={index}>
-              <TouchableOpacity
-                onPress={() => {
-                  navigation.navigate("ExtractDetail", {
-                    transaction,
-                    index,
-                  });
-                }}
-              >
-                <View style={styles.transaction}>
-                  <Text style={styles.extract}>
-                    {transaction.name}
-                    {"\n"}
-                    <Text
-                      style={
-                        transaction.selectedOption === "revenue"
-                          ? styles.revenue
-                          : styles.expense
-                      }
-                    >
-                      {"US$"}
-                      {transaction.value}
-                    </Text>
-                  </Text>
-
-                  <Text style={styles.dataStyle}>
-                    {transaction.date.getDate()}/{transaction.date.getMonth()}/
-                    {transaction.date.getFullYear()}
-                  </Text>
-                </View>
-              </TouchableOpacity>
-              <View style={styles.eu}></View>
-            </View>
-          );
-        })}
-      </View>
-    </ScrollView>
-  </View>
-  </>
-  );
-};
-
-export default DetailCreditCard;
diff --git a/src/screens/DetailCreditCard/styles.js b/src/screens/DetailCreditCard/styles.js
deleted file mode 100644
index b2188c3..0000000
--- a/src/screens/DetailCreditCard/styles.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { StyleSheet } from "react-native";
-
-export default StyleSheet.create({
-  container: {
-    backgroundColor: "#1a7bd5",
-    marginTop: 20,
-    borderRadius: 10,
-    padding: 15,
-    margin: 10,
-  },
-  heading: {
-    fontSize: 20,
-    fontWeight: "bold",
-    color: "#fff",
-    marginBottom: 10,
-  },
-  text: {
-    fontSize: 20,
-    color: "#fff",
-    marginBottom: 5,
-  },
-  buttonText: {
-    color: "#fff",
-    fontWeight: "bold",
-    fontSize: 15,
-  },
-  textName:{
-    color: "#fff",
-    fontSize: 22,
-    paddingBottom: 5,
-    fontWeight: "bold",
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginTop: 20,
-  },
-  buttonTextEdit: {
-    fontSize: 15,
-    color: "white",
-    backgroundColor: "#0A1CB4",
-    borderRadius: 5,
-    padding: 5,
-    
-  },
-  buttonTextDelete: {
-    fontSize: 15,
-    color: "white",
-    backgroundColor: "#E32204",
-    borderRadius: 5,
-    padding: 5,
-  }
-});
diff --git a/src/screens/ExtractDetail/ExtractDetail.js b/src/screens/DetailTransaction/DetailTransaction.js
similarity index 86%
rename from src/screens/ExtractDetail/ExtractDetail.js
rename to src/screens/DetailTransaction/DetailTransaction.js
index 1874eb0..5c7b30b 100644
--- a/src/screens/ExtractDetail/ExtractDetail.js
+++ b/src/screens/DetailTransaction/DetailTransaction.js
@@ -4,18 +4,11 @@ import { View, Text, Button, Alert } from "react-native";
 import styles from "./styles.js";
 import { removeRevenuesAndExpenses } from "../../utils/storage.js";
 
-export default function ExtractDetail({ route, navigation }) {
+export default function DetailTransaction({ route, navigation }) {
   const { transaction, index } = route.params;
 
   const handleEdit = () => {
-    navigation.navigate("EditForm", { transaction, index });
-  };
-
-  console.log(transaction)
-
-  const handleSalvarEdicao = (data) => {
-    console.log("Data edited:", data);
-    // ...
+    navigation.navigate("EditTransaction", { transaction, index });
   };
 
   const dialogDeleteTransaction = (index) => {
@@ -53,7 +46,8 @@ export default function ExtractDetail({ route, navigation }) {
       </Text>
       <Text style={styles.text}>
         <Text style={styles.textBold}>Date: </Text>
-        {transaction.date.getDate()}/{transaction.date.getMonth()}/{transaction.date.getFullYear()}
+        {transaction.date.getDate()}/{transaction.date.getMonth()}/
+        {transaction.date.getFullYear()}
       </Text>
 
       <View style={styles.buttonsView}>
diff --git a/src/screens/ExtractDetail/styles.js b/src/screens/DetailTransaction/styles.js
similarity index 100%
rename from src/screens/ExtractDetail/styles.js
rename to src/screens/DetailTransaction/styles.js
diff --git a/src/screens/EditBankAccount/styles.js b/src/screens/EditBankAccount/styles.js
deleted file mode 100644
index 8f5a69e..0000000
--- a/src/screens/EditBankAccount/styles.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { StyleSheet } from "react-native";
-
-export default styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    padding: 20,
-  },
-  heading: {
-    fontSize: 20,
-    fontWeight: "bold",
-    marginBottom: 16,
-  },
-  input: {
-    width: "100%",
-    height: 40,
-    borderColor: "black",
-    borderWidth: 1,
-    marginBottom: 16,
-    paddingHorizontal: 8,
-  },
-  buttonsView: {
-    flexDirection: "row",
-    gap: 20,
-    justifyContent: "center",
-    marginBottom: 50,
-    marginTop: 50,
-  },
-});
diff --git a/src/screens/EditCreditCard/EditCreditCard.js b/src/screens/EditCreditCard/EditCreditCard.js
deleted file mode 100644
index 051fe92..0000000
--- a/src/screens/EditCreditCard/EditCreditCard.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { useState } from "react";
-import { View, Text, TextInput, Button, Alert } from "react-native";
-
-import { updateCards } from "../../utils/storageCards";
-import styles from "./styles";
-
-const EditCreditCard = ({ route, navigation }) => {
-  const { index, card } = route.params;
-  const [name, setName] = useState(card.name);
-  const [bank, setBank] = useState(card.bank);
-  const [totalInvoices, setTotalInvoices] = useState(card.totalInvoices);
-
-  const handleEditCard = async () => {
-    if (
-      name === "" ||
-      bank === "" ||
-      totalInvoices === "" ||
-      !Number(totalInvoices) ||
-      Number(totalInvoices) < 0
-    ) {
-      Alert.alert("Complete all the fields correctly!");
-      return;
-    }
-
-    if (name && bank && totalInvoices) {
-      const editedCard = {
-        name,
-        bank,
-        totalInvoices,
-      };
-
-      try {
-        // Update the card details
-        updateCards(index, editedCard)
-          Alert.alert("Card succesfully edited!");
-      } catch (error) {
-        Alert.alert("Error editing card:", error);
-      }
-      navigation.goBack()
-    }
-  };
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.heading}>Edit Credit Card</Text>
-      <TextInput
-        style={styles.input}
-        placeholder="Name"
-        value={name}
-        onChangeText={(text) => setName(text)}
-      />
-      <TextInput
-        style={styles.input}
-        placeholder="Number"
-        value={bank}
-        onChangeText={(text) => setBank(text)}
-      />
-      <TextInput
-        style={styles.input}
-        placeholder="Total amount of card bills"
-        value={totalInvoices}
-        onChangeText={(text) => setTotalInvoices(text)}
-      />
-
-      <View style={styles.buttonsView}>
-        <Button title="Save" onPress={handleEditCard} />
-        <Button
-          color="#757de8"
-          title="Back"
-          onPress={() => {
-            navigation.goBack();
-          }}
-        ></Button>
-      </View>
-    </View>
-  );
-};
-
-export default EditCreditCard;
diff --git a/src/screens/EditCreditCard/styles.js b/src/screens/EditCreditCard/styles.js
deleted file mode 100644
index 8f5a69e..0000000
--- a/src/screens/EditCreditCard/styles.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { StyleSheet } from "react-native";
-
-export default styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    padding: 20,
-  },
-  heading: {
-    fontSize: 20,
-    fontWeight: "bold",
-    marginBottom: 16,
-  },
-  input: {
-    width: "100%",
-    height: 40,
-    borderColor: "black",
-    borderWidth: 1,
-    marginBottom: 16,
-    paddingHorizontal: 8,
-  },
-  buttonsView: {
-    flexDirection: "row",
-    gap: 20,
-    justifyContent: "center",
-    marginBottom: 50,
-    marginTop: 50,
-  },
-});
diff --git a/src/screens/Extract/Extract.js b/src/screens/Extract/Extract.js
index ca3fdc9..13b9971 100644
--- a/src/screens/Extract/Extract.js
+++ b/src/screens/Extract/Extract.js
@@ -1,14 +1,12 @@
-import React, { useState, useEffect } from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import React, { useEffect } from "react";
+import { View, Text } from "react-native";
 import { useNavigation, useFocusEffect } from "@react-navigation/native";
-import AsyncStorage from "@react-native-async-storage/async-storage";
 
-import { View, Text, ScrollView } from "react-native";
-
-import styles from "./styles.js";
-import { getRevenuesAndExpenses } from "../../utils/storage.js";
+import AddIcon from "../../assets/add.svg";
+import styles from "../../styles/listsStyle";
 import { useExtractStore } from "../../stores/ExtractStore.js";
 import { TouchableOpacity } from "react-native-gesture-handler";
+import AddTransaction from "../../components/Forms/AddTransaction";
 
 export default function Extracts() {
   const navigation = useNavigation();
@@ -28,44 +26,53 @@ export default function Extracts() {
 
   return (
     <View style={styles.container}>
-      <ScrollView>
-        <View>
-          {extract.map((transaction, index) => {
-            return (
-              <View key={index}>
-                <TouchableOpacity
-                  onPress={() => {
-                    navigation.navigate("ExtractDetail", { transaction, index });
-                  }}
-                >
-                  <View style={styles.transaction}>
-                    <Text style={styles.extract}>
-                      {transaction.name}
-                      {"\n"}
-                      <Text
-                        style={
-                          transaction.selectedOption === "revenue"
-                            ? styles.revenue
-                            : styles.expense
-                        }
-                      >
-                        {"US$"}
-                        {transaction.value}
-                      </Text>
-                    </Text>
+      {extract.map((transaction, index) => {
+        return (
+          <View key={index}>
+            <TouchableOpacity
+              onPress={() => {
+                navigation.navigate("DetailTransaction", {
+                  transaction,
+                  index,
+                });
+              }}
+            >
+              <View style={styles.item}>
+                <Text style={styles.item__leftText}>
+                  {transaction.name}
+                  {"\n"}
+                  <Text
+                    style={
+                      transaction.selectedOption === "revenue"
+                        ? styles.item__leftText$$revenue
+                        : styles.item__leftText$$expense
+                    }
+                  >
+                    {"US$"}
+                    {transaction.value}
+                  </Text>
+                </Text>
 
-                    <Text style={styles.dataStyle}>
-                      {transaction.date.getDate()}/{transaction.date.getMonth()}/
-                      {transaction.date.getFullYear()}
-                    </Text>
-                  </View>
-                </TouchableOpacity>
-                <View style={styles.me}></View>
+                <Text style={styles.item__date}>
+                  {transaction.date.getDate()}/{transaction.date.getMonth()}/
+                  {transaction.date.getFullYear()}
+                </Text>
               </View>
-            );
-          })}
-        </View>
-      </ScrollView>
+            </TouchableOpacity>
+            <View style={styles.divider}></View>
+          </View>
+        );
+      })}
+      <View style={styles.addButtonContainer}>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() =>
+            navigation.navigate("FormsScreen", { component: <AddTransaction /> })
+          }
+        >
+          <AddIcon width={24} height={24} />
+        </TouchableOpacity>
+      </View>
     </View>
   );
 }
diff --git a/src/screens/FormsScreen/FormsScreen.js b/src/screens/FormsScreen/FormsScreen.js
new file mode 100644
index 0000000..098c2ba
--- /dev/null
+++ b/src/screens/FormsScreen/FormsScreen.js
@@ -0,0 +1,10 @@
+import React from "react";
+import { View } from "react-native";
+
+import styles from "../../styles/AddTransactionStyle.js";
+
+export default function FormsScreen({ route }) {
+  const { component } = route.params;
+
+  return <View style={styles.container}>{component}</View>;
+}
diff --git a/src/screens/Home/Home.js b/src/screens/Home/Home.js
index 0834197..1c1ca86 100644
--- a/src/screens/Home/Home.js
+++ b/src/screens/Home/Home.js
@@ -1,5 +1,4 @@
 import React, { useEffect } from "react";
-
 import { View, Text } from "react-native";
 
 import styles from "./styles.js";
diff --git a/src/screens/Home/styles.js b/src/screens/Home/styles.js
index 174fed9..1ef4615 100644
--- a/src/screens/Home/styles.js
+++ b/src/screens/Home/styles.js
@@ -28,7 +28,20 @@ export default styles = StyleSheet.create({
     color: "white",
   },
   textSaldo: {
-  fontSize: 60,
-  color: "white",
-},
+    fontSize: 60,
+    color: "white",
+  },
+  button: {
+    borderRadius: 100,
+    height: 40,
+    width: 40,
+    alignItems: "center",
+    alignContent: "center",
+    justifyContent: "center",
+    backgroundColor: "#1a7bd5",
+  },
+  addButtonContainer: {
+    alignItems: "center",
+    marginTop: 20,
+  },
 });
diff --git a/src/screens/ViewCard/ViewCard.js b/src/screens/ViewCard/ViewCard.js
deleted file mode 100644
index a904118..0000000
--- a/src/screens/ViewCard/ViewCard.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from "react";
-import { View, Text, TouchableOpacity, Alert } from "react-native";
-
-import styles from "./styles";
-
-const ViewCard = ({ navigation, route }) => {
-  const { card } = route.params;
-
-  const handleDelete = () => {
-    Alert.alert("Deletar cartão", "Deseja realmente deletar?", [
-      {
-        text: "Cancelar",
-        style: "cancel",
-      },
-      {
-        text: "Confirmar",
-        onPress: () => {
-          // Perform delete logic here
-
-          // Navigate back to the "Accounts" screen
-          navigation.goBack();
-        },
-        style: "destructive",
-      },
-    ]);
-  };
-
-  const handleEdit = () => {
-    // Navigate to the "EditarCartao" screen and pass the card data
-    navigation.navigate("EditarCartao", { card });
-  };
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.textName}>{card.name}</Text>
-      <Text style={styles.text}>{card.numero}</Text>
-      <Text style={styles.text}>Vencimento: {card.vencimento}</Text>
-      <Text style={styles.text}>Codigo: {card.codigo}</Text>
-      <View style={styles.buttonContainer}>
-        <TouchableOpacity onPress={handleEdit} style={styles.editButton}>
-          <Text style={styles.buttonTextEdit}>Editar Cartão</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={handleDelete} style={styles.deleteButton}>
-          <Text style={styles.buttonTextDelete}>Deletar Cartão</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-};
-
-export default ViewCard;
diff --git a/src/screens/ViewCard/styles.js b/src/screens/ViewCard/styles.js
deleted file mode 100644
index b2188c3..0000000
--- a/src/screens/ViewCard/styles.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { StyleSheet } from "react-native";
-
-export default StyleSheet.create({
-  container: {
-    backgroundColor: "#1a7bd5",
-    marginTop: 20,
-    borderRadius: 10,
-    padding: 15,
-    margin: 10,
-  },
-  heading: {
-    fontSize: 20,
-    fontWeight: "bold",
-    color: "#fff",
-    marginBottom: 10,
-  },
-  text: {
-    fontSize: 20,
-    color: "#fff",
-    marginBottom: 5,
-  },
-  buttonText: {
-    color: "#fff",
-    fontWeight: "bold",
-    fontSize: 15,
-  },
-  textName:{
-    color: "#fff",
-    fontSize: 22,
-    paddingBottom: 5,
-    fontWeight: "bold",
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginTop: 20,
-  },
-  buttonTextEdit: {
-    fontSize: 15,
-    color: "white",
-    backgroundColor: "#0A1CB4",
-    borderRadius: 5,
-    padding: 5,
-    
-  },
-  buttonTextDelete: {
-    fontSize: 15,
-    color: "white",
-    backgroundColor: "#E32204",
-    borderRadius: 5,
-    padding: 5,
-  }
-});
diff --git a/src/screens/Add/styles.js b/src/styles/AddTransactionStyle.js
similarity index 100%
rename from src/screens/Add/styles.js
rename to src/styles/AddTransactionStyle.js
diff --git a/src/styles/DetailStyle.js b/src/styles/DetailStyle.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/screens/AddBankAccount/styles.js b/src/styles/EditFormsStyle.js
similarity index 100%
rename from src/screens/AddBankAccount/styles.js
rename to src/styles/EditFormsStyle.js
diff --git a/src/screens/ExtractDetail/stylesForms.js b/src/styles/EditTransactionFormsStyle.js
similarity index 100%
rename from src/screens/ExtractDetail/stylesForms.js
rename to src/styles/EditTransactionFormsStyle.js
diff --git a/src/screens/Extract/styles.js b/src/styles/listsStyle.js
similarity index 58%
rename from src/screens/Extract/styles.js
rename to src/styles/listsStyle.js
index 3d9ae86..7b3e61d 100644
--- a/src/screens/Extract/styles.js
+++ b/src/styles/listsStyle.js
@@ -5,32 +5,45 @@ export default styles = StyleSheet.create({
     flex: 1,
     padding: 20,
   },
-  extract: {
+  item: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginVertical: 4,
+  },
+  item__leftText: {
     color: "black",
-    paddingVertical: 12,
-    paddingLeft: 20,
     fontSize: 16,
     fontWeight: "bold",
+    paddingLeft: 20,
+    paddingVertical: 12,
   },
-  expense: {
+  item__leftText$$expense: {
     color: "red",
   },
-  revenue: {
+  item__leftText$$revenue: {
     color: "green",
   },
-  transaction: {
-    marginVertical: 4,
-    flexDirection: "row",
-    justifyContent: "space-between",
-  },
-  dataStyle: {
+  item__date: {
     fontSize: 14,
-    paddingVertical: 12,
     paddingRight: 18,
+    paddingVertical: 12,
   },
-  me: {
+  divider: {
+    borderColor: "lightgrey",
     borderStyle: "solid",
     borderWidth: 1,
-    borderColor: "lightgrey",
+  },
+  button: {
+    borderRadius: 100,
+    height: 40,
+    width: 40,
+    alignItems: "center",
+    alignContent: "center",
+    justifyContent: "center",
+    backgroundColor: "#1a7bd5",
+  },
+  addButtonContainer: {
+    alignItems: 'center',
+    marginTop: 20, 
   },
 });
diff --git a/src/screens/AddCreditCard/styles.js b/src/styles/styles.js
similarity index 100%
rename from src/screens/AddCreditCard/styles.js
rename to src/styles/styles.js