diff --git a/css/global.css b/css/global.css
index 175e946..ebb43d3 100644
--- a/css/global.css
+++ b/css/global.css
@@ -75,7 +75,27 @@ a{
 .sidebar{
     grid-area: sidebar;
     height: 82vh;
-    background-color: azure;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--primary-background);
+}
+
+.sidebar .siderbar__title{
+    width: 100%;
+    background-color: #4B0082;
+    text-align: center;
+    padding: 0.4em 0.2em;
+    margin-bottom: 1em;
+}
+
+.sidebar .sidebar__new-posts{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: auto;
+    width: 100%;
+    padding: 1em 0.3em;
 }
 
 .main{
@@ -112,4 +132,49 @@ a{
     border: none;
 }
 
-.btn--danger{}
\ No newline at end of file
+.btn--danger{}
+
+
+.card{
+    width: 280px;
+    border: 1px solid #000;
+    border-radius: 10px;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    background-color: #FFF;
+    margin-bottom: 2em;
+}
+
+.card > .card__img{
+    width: 100%;
+}
+
+.card > .card__img > img{
+    width: 100%;
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+}
+
+.card > .card__info{
+    width: 100%;
+}
+
+.card > .card__info{
+    width: 100%;
+    padding: 1em;
+}
+
+.card > .card__info > .card__title{
+    margin-bottom: 1em;
+}
+
+.card > .card__info > .card__title > *{
+    font-size: 1.2em;
+}
+
+.card > .card__info > .card__body{
+    margin-bottom: 1em;
+}
+
+.card .card__info .card__posted-by{
+    
+}
\ No newline at end of file
diff --git a/css/variables.css b/css/variables.css
index 022e7dc..52ea97f 100644
--- a/css/variables.css
+++ b/css/variables.css
@@ -2,4 +2,5 @@
     --primary-color: #000;
     --second-color:#00FFFF;
     --font-main:'Roboto', sans-serif;
+    --primary-background:#1C1C1C;
 }
\ No newline at end of file
diff --git a/img/html5 b/img/html5
new file mode 100644
index 0000000..27e27c8
Binary files /dev/null and b/img/html5 differ
diff --git a/img/html5.jpg b/img/html5.jpg
new file mode 100644
index 0000000..27e27c8
Binary files /dev/null and b/img/html5.jpg differ
diff --git a/index.html b/index.html
index 019e75c..2fddc31 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -7,6 +8,7 @@
     <link rel="stylesheet" href="./css/global.css">
     <title>Document</title>
 </head>
+
 <body>
 
     <div class="container">
@@ -16,14 +18,14 @@
             <div class="header__logo">
                 <h1><span>BLOG</span> Netuno</h1>
             </div>
-    
-                <nav class="header__menu">
-                     <ul>
-                        <li class="header__menu-item"><a href="#"> ABOUT </a></li>
-                        <li class="header__menu-item"><a href="#">LOGIN</a></li>
-                     </ul>   
-                </nav>
-    
+
+            <nav class="header__menu">
+                <ul>
+                    <li class="header__menu-item"><a href="#"> ABOUT </a></li>
+                    <li class="header__menu-item"><a href="#">LOGIN</a></li>
+                </ul>
+            </nav>
+
         </header>
 
         <main class="main">
@@ -32,19 +34,90 @@
 
 
         <div class="sidebar">
-            <h1>sidebar</h1>
+
+            <div class="siderbar__title">
+                 <h1>Ultimas postagens...</h1>   
+            </div>
+
+            <div class="sidebar__new-posts">
+
+                <div class="card">
+                    <div class="card__img">
+                        <img src="./img/html5.jpg" alt="img_card">
+                    </div>
+                    <div class="card__info">
+                        <div class="card__title">
+                            <h1>HTMl, a programind language or not?</h1>
+                        </div>
+                        
+                        <div class="card__body">
+                            <p>
+                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde reprehenderit, quam
+                            temporibus qui quo numquam iste totam quisquam, sint eius eos
+                            </p>
+                        </div>
+                        <div class="card__posted-by">
+                            <em>por: Jailton Araujo</em>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <div class="card__img">
+                        <img src="./img/html5.jpg" alt="img_card">
+                    </div>
+                    <div class="card__info">
+                        <div class="card__title">
+                            <h1>HTMl, a programind language or not?</h1>
+                        </div>
+                        
+                        <div class="card__body">
+                            <p>
+                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde reprehenderit, quam
+                            temporibus qui quo numquam iste totam quisquam, sint eius eos
+                            </p>
+                        </div>
+                        <div class="card__posted-by">
+                            <em>por: Jailton Araujo</em>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <div class="card__img">
+                        <img src="./img/html5.jpg" alt="img_card">
+                    </div>
+                    <div class="card__info">
+                        <div class="card__title">
+                            <h1>HTMl, a programind language or not?</h1>
+                        </div>
+                        
+                        <div class="card__body">
+                            <p>
+                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde reprehenderit, quam
+                            temporibus qui quo numquam iste totam quisquam, sint eius eos
+                            </p>
+                        </div>
+                        <div class="card__posted-by">
+                            <em>por: Jailton Araujo</em>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
         </div>
-    
+
         <footer class="footer">
-           <div class="footer_contact">
+            <div class="footer_contact">
 
-           </div>
-           <div class="footer_info">
-            
-           </div>
+            </div>
+            <div class="footer_info">
+
+            </div>
 
         </footer>
 
     </div>
 </body>
+
 </html>
\ No newline at end of file
