diff --git a/astro.config.mjs b/astro.config.mjs
index b319c86..1487e87 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -25,5 +25,5 @@ export default defineConfig({
     assets: '_dasig',
     inlineStylesheets: 'never',
   },
-  site: 'https://articles.patalcala.com',
+  site: 'http://localhost:4321',
 })
diff --git a/src/components/Article.astro b/src/components/Article.astro
index fbacca2..12637f8 100644
--- a/src/components/Article.astro
+++ b/src/components/Article.astro
@@ -1,5 +1,5 @@
 ---
-import { Padding, Column, Page } from '../../@dasig'
+import { Padding, Column } from '../../@dasig'
 
 interface Props {
   title: string
@@ -13,17 +13,15 @@ interface Props {
 const { title, subtitle, category, date, minutes, content } = Astro.props
 ---
 
-<Page>
-  <div class="article__titles">
-    <span class="article__titles__category">{category}</span>
-    <h1 class="article__titles__title">{title}</h1>
-    <h3 class="article__titles__subtitle">{subtitle}</h3>
-  </div>
+<section class="article">
+  <span>{category}</span>
+  <h1>{title}</h1>
+  <h3>{subtitle}</h3>
 
   <div class="content">
     <p set:html={content} />
   </div>
-</Page>
+</section>
 
 <style lang="sass">
   .article
@@ -32,33 +30,6 @@ const { title, subtitle, category, date, minutes, content } = Astro.props
     flex-direction: column
     flex-wrap: wrap
     justify-content: start
-    align-items: start
-    text-align: left
-
-    &__titles
-      width: 100%
-      display: flex
-      gap: 1rem
-      flex-direction: column
-      flex-wrap: wrap
-      align-items: start
-      padding: 0 9rem 2rem 9rem
-
-      &__category
-        border: 1px solid red
-        border-radius: 1.5rem
-        padding: 0.5rem 0.75rem
-        font-size: 1rem
-
-      &__title
-        font-size: 2.625rem
-        margin: 0
-
-      &__subtitle
-        font-size: 1.375rem
-        opacity: 0.8
-        margin: 0
-
-  .content
-    padding: 0 15rem
+    align-items: center
+    text-align: center
 </style>
diff --git a/src/components/ArticleCard.astro b/src/components/ArticleCard.astro
index 9e79488..cc19751 100644
--- a/src/components/ArticleCard.astro
+++ b/src/components/ArticleCard.astro
@@ -1,12 +1,12 @@
 ---
-import { Row, Column, Padding, Image } from '../../@dasig'
+import { Row, Column, Padding } from '../../@dasig'
 
 interface Props {
   title: string
   subtitle: string
   date: string
-  imageA: any
-  imageW: any
+  imageA: string
+  imageW: string
   alt: string
   minutes: number
   url: string
@@ -20,7 +20,6 @@ const { title, subtitle, date, imageA, imageW, alt = 'article image', minutes, u
 <section class="article">
   <a href={url}>
     <Column gap={1} content="top">
-      <!-- <Image avif={imageA} webp={imageW} alt={alt} /> -->
       <picture>
         <source srcset={imageA} type="image/avif" />
         <source srcset={imageW} type="image/webp" />
@@ -70,12 +69,12 @@ const { title, subtitle, date, imageA, imageW, alt = 'article image', minutes, u
       height: auto
 
     &__title
-      font-size: 1rem
+      font-size: 0.8rem
       font-weight: 700
-      font-family: fonts.$Inter
+      font-family: fonts.$Literata
 
     &__subtitle
-      font-size: 0.75rem
+      font-size: 0.65rem
       font-weight: 500
       opacity: 0.8
 
@@ -83,7 +82,7 @@ const { title, subtitle, date, imageA, imageW, alt = 'article image', minutes, u
     font-family: fonts.$Inter
     width: 100%
     padding: 0.5rem 0 0 0
-    font-size: 0.75rem
+    font-size: 0.5rem
     font-weight: 500
     opacity: 0.6
 
diff --git a/src/content/articles/5-tech-icons-and-their-meaning.md b/src/content/articles/5-tech-icons-and-their-meaning.md
index 82ae792..dfc1419 100644
--- a/src/content/articles/5-tech-icons-and-their-meaning.md
+++ b/src/content/articles/5-tech-icons-and-their-meaning.md
@@ -10,20 +10,18 @@ category: Technology
 <style>
 p {
   text-align: left;
-  /*padding: 0 10rem*/
+  padding: 0 10rem
 }
 
 h2 {
   text-align: left;
-  /*padding: 0 10rem*/
 }
-  
 </style>
 
 <picture>
   <source srcset="../../../@dasig/images/5-tech-icons-and-their-meaning.avif" type="image/avif">
   <source srcset="../../../@dasig/images/5-tech-icons-and-their-meaning.webp" type="image/webp">
-  <img class="image" alt="5 Tech Icons And Their Meaning">
+  <img alt="5 Tech Icons And Their Meaning">
 </picture>
 
 An icon is a small image or symbol used to represent a concept, idea, or, in this case, a function or a technological indication. And digital icons are found everywhere, especially on software and website designs. Thanks to online resources like Material Fonts, Flaticon, Font Awesome, and many more.
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 788665e..7c906ed 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,7 @@
 ---
-import { Logo, Page, Row } from '../../@dasig'
-import ArticleCard from '../components/ArticleCard.astro'
 import Layout from '../layouts/Layout.astro'
+import { Page, Row, Logo } from '../../@dasig'
+import ArticleCard from '../components/ArticleCard.astro'
 
 const articles = Object.values(import.meta.glob('../content/articles/*.md', { eager: true }))