diff --git a/src/components/Footer/Accordion/AccordionFooter.tsx b/src/components/Footer/Accordion/AccordionFooter.tsx
index 101c7b2..e7774f6 100644
--- a/src/components/Footer/Accordion/AccordionFooter.tsx
+++ b/src/components/Footer/Accordion/AccordionFooter.tsx
@@ -3,117 +3,39 @@ import styleAccordion from "./styles/Accordion.module.scss";
 
 import { ListItem } from "../../utils/ListItem";
 import { AccordionElement } from "./AccordionElement";
-import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "react-headless-accordion";
+import {
+    Accordion,
 
+} from "react-headless-accordion";
+import { AccordionItem } from "./AccordionItem"
 
 export const AccordionFooter = () => {
 
     return (
-        <Accordion className={styleAccordion["accordion"]}
-        >
-            <AccordionItem >
-                <div>
-                    <AccordionHeader
-                        as={"div"}
-                        className={styleAccordion["toggle__accordion"]}>
-                        <span >
-                            <h5>Intitucional</h5>
-                        </span>
-                        <span className={styleAccordion["icon__plus"]}>+</span>
-
-                    </AccordionHeader>
-
-                    <AccordionBody className={styleAccordion["accordion__body"]}>
-                        <ListItem
-                            link={"/"}
-                            title={"Quem Somos"} />
-                        <ListItem
-                            link={"/"}
-                            title={"Política de Privacidade"}
-                        />
-                        <ListItem
-                            link={"/"}
-                            title={"Segurança"}
-                        />
-                        <ListItem
-                            link={"/"}
-                            title={"Seja um Revendedor"}
-                        />
-                    </AccordionBody>
-                </div>
-
+        <Accordion className={styleAccordion["accordion"]}>
+            <AccordionItem title="Institucional">
+                <ListItem link={"/"} title={"Quem Somos"} />
+                <ListItem link={"/"} title={"Política de Privacidade"} />
+                <ListItem link={"/"} title={"Segurança"} />
+                <ListItem link={"/"} title={"Seja um Revendedor"} />
             </AccordionItem>
-
-            <AccordionItem >
-                <div>
-                    <AccordionHeader
-                        as={"div"}
-                        className={styleAccordion["toggle__accordion"]}>
-                        <span>
-                            <h5 >Duvidas</h5>
-                        </span>
-                        <span className={styleAccordion["icon__plus"]}>+</span>
-                    </AccordionHeader>
-                    <AccordionBody className={styleAccordion["accordion__body"]}>
-                        <div className="accordion-body">
-                            <AccordionElement>
-                                <ListItem
-                                    link={"/"}
-                                    title={"Entrega"}
-                                />
-                                <ListItem
-                                    link={"/"}
-                                    title={"Pagamento"}
-                                />
-                                <ListItem
-                                    link={"/"}
-                                    title={"Trocas e Devoluções"}
-                                />
-                                <ListItem
-                                    link={"/"}
-                                    title={"Dúvidas Frequentes"}
-                                />
-                            </AccordionElement>
-                        </div>
-                    </AccordionBody>
-                </div>
+            <AccordionItem title="Duvidas">
+                <ListItem link={"/"} title={"Entrega"} />
+                <ListItem link={"/"} title={"Pagamento"} />
+                <ListItem link={"/"} title={"Trocas e Devoluções"} />
+                <ListItem link={"/"} title={"Dúvidas Frequentes"} />
             </AccordionItem>
-
-            <AccordionItem>
-                <div>
-                    <AccordionHeader
-                        as={"div"}
-                        className={styleAccordion["toggle__accordion"]}
-                    >
-                        <span>
-                            <h5>Fale Conosco</h5>
-                        </span>
-                        <span className={styleAccordion["icon__plus"]}>+</span>
-                    </AccordionHeader>
-
-                    <AccordionBody className={`${styleAccordion["accordion__body"]} ${styleAccordion.desk}`}>
-                        <AccordionElement>
-
-                            <span className={styleAccordion["contact__us"]}>
-                                <ListItem title={"Atendimento ao Consumidor"} />
-                            </span>
-                            <ListItem
-                                title={"(11) 4159-9504"}
-                            />
-                            <span className={styleAccordion["contact__us"]}>
-                                <ListItem title={"Atendimento Online"} />
-                            </span>
-                            <ListItem
-                                title={"(11) 99433-8825"}
-                            />
-                        </AccordionElement>
-                    </AccordionBody>
-                </div>
+            <AccordionItem title="Fale Conosco">
+                <span className={styleAccordion["contact__us"]}>
+                    <ListItem title={"Atendimento ao Consumidor"} />
+                </span>
+                <ListItem title={"(11) 4159-9504"} />
+                <span className={styleAccordion["contact__us"]}>
+                    <ListItem title={"Atendimento Online"} />
+                </span>
+                <ListItem title={"(11) 99433-8825"} />
             </AccordionItem>
-        </Accordion >
+        </Accordion>
+
     );
-
-
-}
-
-
+};
diff --git a/src/components/Footer/Accordion/AccordionItem.tsx b/src/components/Footer/Accordion/AccordionItem.tsx
new file mode 100644
index 0000000..8a53621
--- /dev/null
+++ b/src/components/Footer/Accordion/AccordionItem.tsx
@@ -0,0 +1,40 @@
+import { useState, ReactElement } from "react"
+
+
+import {
+    AccordionBody,
+    AccordionHeader,
+    AccordionItem as HAccordionItem,
+} from "react-headless-accordion";
+import styleAccordion from "./styles/Accordion.module.scss";
+
+
+interface AccordionItemFooterProps {
+    title: string
+    children: ReactElement | ReactElement[]
+}
+
+export const AccordionItem = ({ children, title }: AccordionItemFooterProps) => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    return (
+        <HAccordionItem>
+            <div>
+                <AccordionHeader
+                    as={"div"}
+                    className={isOpen
+                        ? `${styleAccordion["toggle__accordion"]} ${styleAccordion["icon__minus"]}`
+                        : `${styleAccordion["toggle__accordion"]} ${styleAccordion["icon__plus"]}`}
+                    onClick={() => setIsOpen((prevState) => !prevState)}
+                >
+                    <span>
+                        <h5>{title}</h5>
+                    </span>
+                </AccordionHeader>
+                <AccordionBody className={styleAccordion["accordion__body"]}>
+                    {children}
+                </AccordionBody>
+            </div>
+        </HAccordionItem>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Footer/Accordion/styles/Accordion.module.scss b/src/components/Footer/Accordion/styles/Accordion.module.scss
index 70df377..c7a3d2c 100644
--- a/src/components/Footer/Accordion/styles/Accordion.module.scss
+++ b/src/components/Footer/Accordion/styles/Accordion.module.scss
@@ -1,10 +1,41 @@
+h5 {
+    margin: 0;
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 16.41px;
+
+    text-transform: uppercase;
+
+    color: #303030;
+
+    @media (min-width:2500px) {
+        font-size: 28px;
+        line-height: 33px;
+    }
+}
+
 .accordion {
     padding: 0 16px;
     display: flex;
     justify-content: space-between;
+    width: 100%;
+    max-width: 707px;
+    height: 139px;
+
+    @media (min-width:250px) {
+
+        max-width: 1531px;
+
+    }
 
     @media (max-width:1024px) {
         flex-direction: column;
+        width: 96.875%;
+        max-width: 992px;
+        justify-content: initial;
+        height: auto;
     }
 }
 
@@ -14,37 +45,49 @@
     align-items: center;
     width: 100%;
 
-    .icon__plus {
 
-        @media (min-width:1025px) {
-            display: none;
-        }
+
+}
+
+.icon__minus {
+
+    &::after {
+
+        content: "-";
     }
 
-    span {
-        h5 {
-            font-family: 'Roboto';
-            font-style: normal;
-            font-weight: 500;
-            font-size: 14px;
-            line-height: 16px;
-
-            text-transform: uppercase;
-
-            color: #303030;
-
-            @media (min-width:2500px) {
-                font-size: 28px;
-                line-height: 33px;
-            }
+    @media (min-width:1025px) {
+        &::after {
+            content: " "
         }
     }
 }
 
+.icon__plus {
+
+    &::after {
+        content: "+";
+
+    }
+
+
+    @media (min-width:1025px) {
+        &::after {
+            content: " "
+        }
+    }
+}
+
+
+
+
 .accordion__body {
     display: flex;
     flex-direction: column;
-    row-gap: 12px;
+    max-height: 140px;
+    margin-top: 12px;
+    gap: 6px;
+    height: 125px;
 
     @media (min-width:1025px) {
         overflow: visible !important;
@@ -69,23 +112,28 @@
         }
     }
 
-    .contact__us {
-        max-width: 155px;
+}
 
-        @media (min-width:2500px) {
-            max-width: none;
-        }
+.contact__us {
+    max-width: 155px;
 
-        li {
-            a {
-                font-weight: 500;
+    font-size: 12px;
+    line-height: 14px;
 
-                @media (min-width:2500px) {
-                    font-size: 24px;
-                    line-height: 28px;
-                }
+    @media (min-width:2500px),
+    (max-width:1024px) {
+        max-width: none;
+    }
+
+    li {
+        a {
+            font-weight: 500;
+
+            @media (min-width:2500px) {
+                font-size: 24px;
+                line-height: 28px;
             }
         }
-
     }
+
 }
\ No newline at end of file
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..596d211
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { NewsLetter } from "./NewsLetter/NewsLetter";
+import { AccordionFooter } from "./Accordion/AccordionFooter";
+import { Rodape } from "./Rodape/Rodape";
+import { SocialMedia } from "./SocialMedia/SocialMedia";
+import styleFooter from "./styles/Footer.module.scss";
+export const Footer = () => {
+
+    return (
+        <div className={styleFooter["footer"]}>
+            <NewsLetter />
+            <div className={styleFooter["footer__middle"]}>
+                <AccordionFooter />
+                <SocialMedia />
+            </div>
+            <Rodape />
+        </div >
+
+    );
+}
\ No newline at end of file
diff --git a/src/components/NewsLetter/NewsLetter.tsx b/src/components/Footer/NewsLetter/NewsLetter.tsx
similarity index 100%
rename from src/components/NewsLetter/NewsLetter.tsx
rename to src/components/Footer/NewsLetter/NewsLetter.tsx
diff --git a/src/components/NewsLetter/Newsletter.module.scss b/src/components/Footer/NewsLetter/Newsletter.module.scss
similarity index 79%
rename from src/components/NewsLetter/Newsletter.module.scss
rename to src/components/Footer/NewsLetter/Newsletter.module.scss
index 4bfc54b..24f71cb 100644
--- a/src/components/NewsLetter/Newsletter.module.scss
+++ b/src/components/Footer/NewsLetter/Newsletter.module.scss
@@ -1,28 +1,30 @@
 .newsLetter {
     width: 100%;
     padding: 16px 0;
-    border: 1px solid;
 
     &__wrapper {
         display: flex;
         flex-direction: column;
         width: 37.03125%;
         margin: 0 auto;
+
         @media (max-width:1024px) {
             row-gap: 16px;
-           margin: 0 16px;
-           width: 96.875%;
+            margin: 0 16px;
+            width: 96.875%;
         }
+
         @media (max-width:768px) {
-            
+
             width: 94%;
-          }
+        }
+
         @media (max-width:490px) {
-            
-            width: 90.4%;
-          }
-    
-       
+
+            width: 91.42%;
+        }
+
+
 
         .newsLetter__title {
             font-family: 'Roboto';
@@ -44,10 +46,11 @@
                 font-size: 36px;
                 line-height: 42px;
             }
+
             @media (max-width:1024px) {
                 font-size: 14px;
                 line-height: 16px;
-             }
+            }
         }
 
         .newsLetter__form {
@@ -56,28 +59,30 @@
             align-items: center;
             justify-content: space-between;
             column-gap: 10px;
+
             @media (max-width:1024px) {
                 row-gap: 16px;
-               flex-direction: column;
-             }
+                flex-direction: column;
+            }
+
+            &__input {
 
-            &__input{
-                 
                 width: 100%;
                 max-width: 340px;
                 height: 42px;
                 border-radius: 4px;
                 border: 1px solid #E5E5E5;
                 outline: none;
-                
+
                 padding: 0 16px;
                 font-weight: 400;
                 font-size: 14px;
                 line-height: 16px;
-                
-                color: #C4C4C4;
-                &::placeholder{  
+
                 color: #C4C4C4;
+
+                &::placeholder {
+                    color: #C4C4C4;
                 }
 
                 @media (min-width:2500px) {
@@ -86,22 +91,26 @@
                     font-size: 28px;
                     line-height: 33px;
                 }
+
                 @media (max-width:1024px) {
-                    
-                    max-width: 96.875% ;
-                 }
-                 @media (max-width:768px) {
-            
+
+                    max-width: 96.875%;
+                }
+
+                @media (max-width:768px) {
+
                     width: 94.875%;
-                  }
-                 @media (max-width:512px) {
-            
+                }
+
+                @media (max-width:512px) {
+
                     width: 91.875%;
-                  }
-                 @media (max-width:490px) {
-            
+                }
+
+                @media (max-width:490px) {
+
                     width: 90.4%;
-                  }
+                }
             }
 
             &__submit {
@@ -137,10 +146,11 @@
                     font-size: 24px;
                     line-height: 28px;
                 }
+
                 @media (max-width:1024px) {
-                    
-                    max-width: none ;
-                 }
+
+                    max-width: none;
+                }
             }
         }
     }
diff --git a/src/components/Footer/SocialMedia/SocialMedia.module.scss b/src/components/Footer/SocialMedia/SocialMedia.module.scss
index 5ea9d28..d414ef3 100644
--- a/src/components/Footer/SocialMedia/SocialMedia.module.scss
+++ b/src/components/Footer/SocialMedia/SocialMedia.module.scss
@@ -1,17 +1,22 @@
 .wrapper {
+    @media (max-width:1025px) {
+        padding: 0 16px;
+    }
+
     &__social__media {
         display: flex;
         column-gap: 10px;
         width: 100%;
         max-width: 215px;
+        padding: 0;
 
         @media (min-width: 2500px) {
             max-width: 390px;
-
         }
 
         li {
             a {
+
                 img {
 
                     width: 35px;
@@ -26,4 +31,24 @@
         }
     }
 
+    .link__site {
+        a {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
+
+            color: #303030;
+
+            text-transform: lowercase;
+
+            @media (min-width:2500px) {
+                font-size: 28x;
+                line-height: 33px;
+            }
+
+        }
+    }
+
 }
\ No newline at end of file
diff --git a/src/components/Footer/SocialMedia/SocialMedia.tsx b/src/components/Footer/SocialMedia/SocialMedia.tsx
index 929c1d2..e4289f5 100644
--- a/src/components/Footer/SocialMedia/SocialMedia.tsx
+++ b/src/components/Footer/SocialMedia/SocialMedia.tsx
@@ -36,7 +36,7 @@ export const SocialMedia = () => {
                     altText="Logo da rede social "
                 />
             </div >
-            <div>
+            <div className={styleSocialMedia["link__site"]} >
                 <a href="www.loremipsum.com">
                     www.loremipsum.com
                 </a>
diff --git a/src/components/Footer/styles/Accordion.module.scss b/src/components/Footer/styles/Accordion.module.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Footer/styles/Footer.module.scss b/src/components/Footer/styles/Footer.module.scss
index e69de29..12c77dc 100644
--- a/src/components/Footer/styles/Footer.module.scss
+++ b/src/components/Footer/styles/Footer.module.scss
@@ -0,0 +1,28 @@
+.footer {
+    width: 100%;
+
+    &__middle {
+
+        display: flex;
+        justify-content: space-evenly;
+        height: 139px;
+        padding: 50px 0;
+
+        @media (min-width:2500px) {
+            height: 239px;
+        }
+
+        @media (max-width: 1024px) {
+            flex-direction: column;
+            width: 96.875%;
+            max-width: 992px;
+            justify-content: initial;
+            padding: 24px 0;
+            height: auto;
+        }
+
+        @media (max-width:768px) {
+            width: 94%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 0d5b9bc..9896224 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6,7 +6,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: gray;
+  /* background-color: gray; */
 }
 
 code {
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 7158afa..1c43ea5 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,19 +1,16 @@
 import React from "react";
-import { AccordionFooter } from "../components/Footer/Accordion/AccordionFooter";
+import { Footer } from "../components/Footer/Footer";
 import { Rodape } from "../components/Footer/Rodape/Rodape";
-import { SocialMedia } from "../components/Footer/SocialMedia/SocialMedia";
 import { Header } from "../components/Header/Header";
-import { NewsLetter } from "../components/NewsLetter/NewsLetter";
 
 
 export const Home = () => {
     return (
         <>
             <Header />
-            <AccordionFooter />
-            <SocialMedia />
-            <NewsLetter />
-            <Rodape />
+
+            <Footer />
+
         </>
     )
 }
\ No newline at end of file