diff --git a/.eleventy.js b/.eleventy.js
index d07df14..e6a57d0 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -51,6 +51,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy('src/robots.txt')
 
   eleventyConfig.addFilter('postDate', (dateObj) => {
+    if (typeof (dateObj) !== 'object') dateObj = new Date(dateObj)
     return DateTime.fromJSDate(dateObj).toLocaleString(DateTime.DATE_MED)
   })
 
@@ -75,6 +76,32 @@ module.exports = function (eleventyConfig) {
     return string.split(' ').splice(0, 12).join(' ')
   })
 
+  eleventyConfig.addFilter('cutText', (string, size) => {
+    return string.split('-').splice(0, size).join('-')
+  })
+
+  eleventyConfig.addFilter('serializeTitle', (string, yearSplice = 2) => {
+    const titleParts = string.split('-')
+    const [year, ...title] = titleParts
+    const titleInitials = title.map(title => title.split('')[0]).join('')
+    const yearSuffix = year.slice(-yearSplice)
+    
+    return `${yearSuffix}-${titleInitials}`
+  })
+
+  eleventyConfig.addFilter('breakLine', (string, cutAt = 3, maxSize = 30) => {
+    const titleWords = string.split(' ')
+    const titleLength = string.length
+    const titlePreview = titleWords.slice(0, cutAt).join(" ")
+    const titleRemaining = titleWords.slice(cutAt).join(" ")
+
+    const hasTitleRemaining = !!titleRemaining
+    const formattedTitleWithBreak = hasTitleRemaining ? `${titlePreview}<br/>${titleRemaining}` : titlePreview
+    
+    const returnTitle = titleLength <= maxSize || !hasTitleRemaining ? string : formattedTitleWithBreak
+    return returnTitle
+  })
+
   eleventyConfig.addFilter('renderMarkdown', (text) => {
     return markdownIt.render(text)
   })
diff --git a/src/_includes/components/snippets/prototype.njk b/src/_includes/components/snippets/prototype.njk
index cc8e1b6..2e8615f 100644
--- a/src/_includes/components/snippets/prototype.njk
+++ b/src/_includes/components/snippets/prototype.njk
@@ -4,7 +4,7 @@
       <header class="note-header">
         <div>
           {% include 'components/svg/logo.njk' %}
-          <h3 id="{{ post.fileSlug }}-code">{{ post.fileSlug | truncate(12) }}.dev</h3>
+          <h3 id="{{ post.fileSlug }}-code">dev#{{ post.fileSlug | serializeTitle }}</h3>
         </div>
         <div>
           <span class="dot"></span>
@@ -30,7 +30,7 @@
           <span aria-hidden="true">#</span>
           <span class="sr-only">Link to heading "{{ post.data.title }}"</span>
         </a>
-        <h3 id="{{ post.fileSlug }}-header">{{ post.data.title }}</h3>
+        <h3 id="{{ post.fileSlug }}-header">{{ post.data.title | breakLine | safe}}</h3>
       </header>
       <p lang="{{ post.data.language }}">
         {{  post.data.description }}
diff --git a/src/assets/scss/modules/component/_aboutme.scss b/src/assets/scss/modules/component/_aboutme.scss
index 43f40a4..518f969 100644
--- a/src/assets/scss/modules/component/_aboutme.scss
+++ b/src/assets/scss/modules/component/_aboutme.scss
@@ -227,59 +227,61 @@
 
   .note {
     rotate: -3deg;
-    display: flex;
-    flex: 0 0 auto;
-    position: relative;
-    flex-direction: column;
-    background-color: hsl(0, 0%, 13%);
-    border-radius: 0.6rem;
-    box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
-    height: 100%;
-    transition: all 300ms ease-in-out;
+  }
+}
+
+.note {
+  display: flex;
+  flex: 0 0 auto;
+  position: relative;
+  flex-direction: column;
+  background-color: hsl(0, 0%, 13%);
+  border-radius: 0.6rem;
+  box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
+  height: 100%;
+  transition: all 300ms ease-in-out;
+
+  & > svg {
+    position: absolute;
+    right: 0.1rem;
+    bottom: 0.1rem;
+    color: hsl(0, 0%, 11%);
+  }
 
-    &>svg {
-      position: absolute;
-      right: 0.1rem;
-      bottom: 0.1rem;
-      color: hsl(0, 0%, 11%);
-      z-index: -1;
-    }
+  &-heading {
+    font-weight: 600;
+    display: block;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
 
-    &-heading {
-      font-weight: 600;
-      display: block;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-    }
+  &-header {
+    display: flex;
+    height: 2.5rem;
+    padding: 0 1rem;
+    width: 100%;
+    justify-content: space-between;
+    box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
+    flex: 0 0 auto;
 
-    &-header {
+    div {
       display: flex;
-      height: 2.5rem;
-      padding: 0 1rem;
-      width: 100%;
-      justify-content: space-between;
-      box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
-      flex: 0 0 auto;
+      align-items: center;
+      font-weight: 600;
+      gap: 0.2rem;
 
-      div {
-        display: flex;
-        align-items: center;
-        font-weight: 600;
-        gap: 0.2rem;
+      .dot {
+        height: 0.9375rem;
+        width: 0.9375rem;
+        background-color: hsl(0, 100%, 43%);
+        border-radius: 50%;
 
-        .dot {
-          height: 0.9375rem;
-          width: 0.9375rem;
-          background-color: hsl(0, 100%, 43%);
-          border-radius: 50%;
-
-          &:first-of-type {
-            background-color: green;
-          }
+        &:first-of-type {
+          background-color: green;
+        }
 
-          &:nth-of-type(2) {
-            background-color: yellow;
-          }
+        &:nth-of-type(2) {
+          background-color: yellow;
         }
       }
     }
diff --git a/src/assets/scss/modules/component/_prototype.scss b/src/assets/scss/modules/component/_prototype.scss
index e82b13f..bc4496c 100644
--- a/src/assets/scss/modules/component/_prototype.scss
+++ b/src/assets/scss/modules/component/_prototype.scss
@@ -136,6 +136,7 @@
       gap: 0.5em;
       font-weight: 700;
       align-items: center;
+      line-height: 1.2;
     }
   }
 
@@ -208,24 +209,6 @@
   }
 
   .note {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    background-color: hsl(0, 0%, 13%);
-    border-radius: 0.6rem;
-    box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
-    height: 100%;
-    transition: all 300ms ease-in-out;
-    z-index: 0;
-
-    & > svg {
-      position: absolute;
-      right: 0.1rem;
-      bottom: 0.1rem;
-      color: hsl(0, 0%, 11%);
-      z-index: -1;
-    }
-
     article {
       padding: 1rem;
       height: 100%;
@@ -238,35 +221,10 @@
       }
     }
 
-    &-header {
-      display: flex;
-      height: 2.5rem;
-      padding: 0 1rem;
-      width: 100%;
-      justify-content: space-between;
-      box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
-      flex: 0 0 auto;
-
-      div {
-        display: flex;
-        align-items: center;
-        font-weight: 600;
-        gap: 0.2rem;
-
-        .dot {
-          height: 0.9375rem;
-          width: 0.9375rem;
-          background-color: hsl(0, 100%, 43%);
-          border-radius: 50%;
-
-          &:first-of-type {
-            background-color: green;
-          }
-
-          &:nth-of-type(2) {
-            background-color: yellow;
-          }
-        }
+    pre {
+      overflow: scroll;
+      &::-webkit-scrollbar {
+        width: 0;
       }
     }
   }
diff --git a/src/blog.njk b/src/blog.njk
index 3520ebd..9951f27 100644
--- a/src/blog.njk
+++ b/src/blog.njk
@@ -3,37 +3,36 @@ title : 'Recent Articles - Blog | EmptyWork'
 description : "List of all articles that was written by me, its mostly contain topics about Accessibility, PHP, HTML, CSS and Fullstack development"
 layout: 'layouts/secondary.njk'
 ---
+
 {% set posts = [] %}
+{% set recentPosts = [] %}
 {% for post in collections.post | reverse %}
-{% if post.data.draft == false %}
-{% set postDate = {
-    year: post.data.date | postYear,
-    fullDate: post.data.date
-  } %}
-  {% set posts = (posts.push({
-    title: post.data.title,
-    url: post.url,
-    date: postDate,
-    desc: post.data.description,
-    author: post.data.author,
-    slug: post.fileSlug
-  }), posts) %}
-{% endif %}
-{% endfor %}{% set recentPosts = [] %}
-{% for post in collections.post | reverse %}
-{% if post.data.draft == false %}
-  {% set recentPosts = (recentPosts.push({
-    title: post.data.title,
-    description: post.data.description,
-    url: post.url,
-    slug: post.fileSlug,
-    author: post.data.author,
-    date: post.data.date,
-    image: post.data.image
-  }), recentPosts) %}
-{% endif %}
-{% endfor %}{% set lengthRecentPosts = recentPosts | length %}
-{% if lengthRecentPosts > 3 %}{% set recentPosts = recentPosts | sliceRecent %}
+  {% if not post.data.draft %}
+    {% set postDate = {
+          year: post.data.date | postYear,
+          fullDate: post.data.date
+        } %}
+    {% set _ = posts.push({
+          title: post.data.title,
+          url: post.url,
+          date: postDate,
+          desc: post.data.description,
+          author: post.data.author,
+          slug: post.fileSlug
+        }) %}
+    {% set _ = recentPosts.push({
+          title: post.data.title,
+          description: post.data.description,
+          url: post.url,
+          slug: post.fileSlug,
+          author: post.data.author,
+          date: post.data.date,
+          image: post.data.image
+        }) %}
+  {% endif %}
+{% endfor %}
+{% if recentPosts | length > 3 %}
+  {% set recentPosts = recentPosts | sliceRecent %}
 {% endif %}
 <main id="main" class="main  blog">
   <section aria-labelledby="article" class="articles">
@@ -48,38 +47,51 @@ layout: 'layouts/secondary.njk'
             <span aria-hidden="true">#</span>
             <span class="sr-only">Link to heading "recent articles"</span>
           </a>
-          Recent Articles 
+          Recent Articles
         </h1>
       </header>
       <ul class="cards cards-horizontal{% if lengthRecentPosts == 3 %} cards-3-item{% endif %}">
         {%- for post in recentPosts -%}
-          {% include 'components/snippets/article.njk' %}
+          {% include "components/snippets/article.njk" %}
         {% else %}
           <li class="card card-empty">
             <h2>You haven't post anything yet.</h2>
-              It seems like there is no article right now...
+            It seems like there is no article right now...
           </li>
         {%- endfor -%}
       </ul>
       {% set groupedPosts = posts | groupby("date.year") %}
       {% for year, posts in groupedPosts | reverseGroupedPosts %}
         <div class="posts">
-          <h2 class="posts-yeargroup" data-animation="fade-in" data-delay="{{ loop.index }}">{{ year }}</h2>
+          <h2 class="posts-yeargroup"
+              data-animation="fade-in"
+              data-delay="{{ loop.index }}">{{ year }}</h2>
           <ul class="posts-list">
             {% for post in posts %}
-              <li class="posts-detail" data-animation="prototype-card" data-delay="{{ loop.index + 0.5 | float }}">
+              <li class="posts-detail"
+                  data-animation="prototype-card"
+                  data-delay="{{ loop.index + 0.5 | float }}">
                 <p class="posts-detail_accent">
-                  <time class="posts-detail_accent-item posts-detail_accent-item_filled" datetime="{{ post.date.fullDate | htmlDateString }}">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="posts-detail_svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                  <time class="posts-detail_accent-item posts-detail_accent-item_filled"
+                        datetime="{{ post.date.fullDate | htmlDateString }}">
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                         class="posts-detail_svg"
+                         fill="none"
+                         viewBox="0 0 24 24"
+                         stroke="currentColor"
+                         stroke-width="2">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                     </svg>
                     {{ post.date.fullDate | postDate }}
                   </time>
                   <span class="posts-detail_accent-item">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                    stroke="currentColor" class="article-detail_item_svg">
-                      <path stroke-linecap="round" stroke-linejoin="round"
-                        d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                         fill="none"
+                         viewBox="0 0 24 24"
+                         stroke-width="1.5"
+                         stroke="currentColor"
+                         class="article-detail_item_svg">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                     </svg>
                     {{ post.author }}
                   </span>
@@ -91,9 +103,7 @@ layout: 'layouts/secondary.njk'
                     <span id="{{ post.slug }}">{{ post.title }}</span>
                   </a>
                 </p>
-                <p>
-                  {{ post.desc | truncate(60) }}
-                </p>
+                <p>{{ post.desc | truncate(60) }}</p>
               </li>
             {% endfor %}
           </ul>
@@ -101,4 +111,13 @@ layout: 'layouts/secondary.njk'
       {% endfor %}
     </div>
   </section>
-</main>
\ No newline at end of file
+</main>
+<script>
+  let links = document.links
+  for (link of links) {
+    if (document.location.hostname == 'localhost') break
+    let regex = /\/articles\/blog/g
+    const currentHref = link.href
+    if (currentHref.includes("/articles/blog")) link.href = currentHref.replace(regex, "/blog")
+  }
+</script>
diff --git a/src/contact.njk b/src/contact.njk
index 9d0602c..f4f6a6c 100644
--- a/src/contact.njk
+++ b/src/contact.njk
@@ -21,7 +21,7 @@ layout: 'layouts/secondary.njk'
       </header>
       <div class="contact-container" data-animation="fade-in" data-delay="2">
         <p class="contact-summary">{{ contact.summary | renderMarkdownInline | safe }}</p>
-        <ul class=social-container>
+        <ul class="social-container">
           {% for social in contact.mainSocials %}
           <li data-animation="fade-in" data-delay="{{ loop.index }}">
             {% include 'components/snippets/social-items.njk' %}
diff --git a/src/error.njk b/src/error.njk
index 07569b6..08d1954 100644
--- a/src/error.njk
+++ b/src/error.njk
@@ -44,7 +44,7 @@ style: 'error.css'
             <a class="error-link" href="{{ link.website }}">Go to Home</a>
           </li>
           <li data-animation="fade-in" data-delay="5">
-            <a class="error-link" href="javascript:history.back()">Go Back</a>
+            <a class="error-link" onclick="history.back(); return false;">Go Back</a>
           </li>
         </ul>
       </div>