diff --git a/src/components/cards/cardDefault.js b/src/components/cards/cardDefault.js
index 3e4c98a..a5a3e8e 100644
--- a/src/components/cards/cardDefault.js
+++ b/src/components/cards/cardDefault.js
@@ -8,6 +8,8 @@ export default class CardDefault extends React.Component {
             imageSrc: props.imageSrc,
             description: props.description,
             title: props.title,
+            buttonLink: props.buttonLink,
+            buttonName: props.buttonName,
             pageLink: props.pageLink,
             class: `col ${props.colSize != null ? props.colSize : "s12 m4"} ${props.class}`,
             size: props.size,
@@ -48,8 +50,10 @@ export default class CardDefault extends React.Component {
                         {this.state.imageSrc != null ? imgTitle : ""}
                     </div>
                     <div className="card-content">
-                    {this.state.imageSrc == null ? title : ""}
+                        {this.state.imageSrc == null ? title : ""}
                         {this.renderDescription()}
+                        &emsp;
+                        <p><a className="amber-text text-accent-4" href={this.state.buttonLink}>{this.state.buttonName}</a></p>
                     </div>
                     {this.state.pageLink != null ? cardActions : ""}
                 </div>
diff --git a/src/components/modals/store-modal.css b/src/components/modals/store-modal.css
new file mode 100644
index 0000000..0034f58
--- /dev/null
+++ b/src/components/modals/store-modal.css
@@ -0,0 +1,56 @@
+.modal-container {
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.48);
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    z-index: 100;
+    display: none;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-container.show-modal {
+    display: flex;
+}
+
+.modal-content {
+    background: #461000;
+    width: 64%;
+    min-width: 360px;
+    padding: 40px;
+    border: 8px solid white;
+    box-shadow: 0px 0px 0px 8px #461000;
+    position: relative;
+}
+
+@keyframes show {
+    from {
+        opacity: 0;
+        transform: translate3d(0px, 64px, 0px);
+    } to {
+        opacity: 1;
+        transform: translate3d(0px, 0px, 0px);
+    }
+}
+
+.show-modal .modal-content {
+    animation: show 0.64s;
+}
+
+.close-modal {
+    position: absolute;
+    font-size: 24px;
+    font-family: 'Blinker', sans-serif;
+    top: -32px;
+    right: -32px;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 4px solid white;
+    background: #F0C030;
+    color: white;
+    cursor: pointer;
+    box-shadow: 0px 4px 8px rgb(0, 0, 0, 0.72);
+}
\ No newline at end of file
diff --git a/src/components/modals/store-modal.js b/src/components/modals/store-modal.js
new file mode 100644
index 0000000..27868f3
--- /dev/null
+++ b/src/components/modals/store-modal.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import './store-modal.css'
+
+export default class Modal extends React.Component {
+    // startModal(modalID) {
+    //     const modal = document.getElementById(modalID);
+
+    //     if(localStorage.closeModal !== modalID) {
+    //         if(modal) {
+    //             modal.classList.add('show-modal');
+    //             modal.addEventListener('select', (event) => {
+    //                 if(event.target.id == modalID || event.target.className == 'close-modal') {
+    //                     modal.classList.remove('show-modal');
+    //                     localStorage.closeModal = modalID;
+    //                 }
+    //             });
+    //         }
+    //     }
+        
+    //     const action = document.querySelector('button-element');
+    //     action.addEventListener('select', () => startModal('store-modal'));
+    // }
+
+    render() {
+        return (
+            <div id="store-modal" class="modal-container">
+                <div class="modal-content">
+                    <button class="close-modal">X</button>
+                    <p>FUNCIONA!!! SIM, FUNCIONA!!!</p>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/screens/store/store.js b/src/screens/store/store.js
index 3d63c37..910279d 100644
--- a/src/screens/store/store.js
+++ b/src/screens/store/store.js
@@ -1,4 +1,5 @@
 import React from "react"
+import StoreModal from '../../components/modals/store-modal'
 
 import Navbar from '../../components/commons/navbar'
 import info from "../../staticInfo/store"
@@ -6,11 +7,9 @@ import Title from "../../components/title";
 import CardDefault from "../../components/cards/cardDefault";
 import CardHorizontal from "../../components/cards/cardHorizontal";
 import Footer from "../../components/commons/footer";
-import { write } from "fs";
 
 
 export default class Store extends React.Component {
-
     renderSpotlight() {
         const p = info.products[0]
 
@@ -22,7 +21,14 @@ export default class Store extends React.Component {
                     <p>{p.description}</p>
                 </div>
         
-        return <CardDefault colSize="s12 m6" imageSrc={imgSrc} title={title} description={description}/>
+        return <CardDefault
+                    colSize="s12 m6"
+                    imageSrc={imgSrc}
+                    title={title}
+                    description={description}
+                    buttonLink="#"
+                    buttonName="COMPRAR"
+                />
     }
 
     renderProducts(from, to, col) {
@@ -41,8 +47,8 @@ export default class Store extends React.Component {
                         content={content} 
                         col={col} 
                         size="small"
+                        buttonLink="#store-modal"
                         buttonName="Comprar"
-                        buttonLink="#"
                     />
         })
     }
@@ -53,30 +59,24 @@ export default class Store extends React.Component {
                 <Navbar/>
                 <div className="container">
                     <Title>Loja</Title>
-
                     <div className="row">
                         {this.renderSpotlight()}
-
                         <div className="col m6 s12">
                             <div className="row">
                                 {this.renderProducts(1, 3, "s12")}
                             </div>
                         </div>
                     </div>
-
                     <div className="row">
                         {this.renderProducts(3, info.products.length, "col s12 m6")}
                     </div>
-
                     <h2 className="center-align">Informações</h2>
-
                     <div className="row">
                         {info.informative.map(i => <CardDefault colSize="s12 m6" centerTitle title={i.title} description={i.description} />)}
                     </div>
-
                 </div>
-
                 <Footer/>
+                <StoreModal/>
             </div>
         )
     }