diff --git a/css/base.css b/css/base.css
index 480e533..179e59c 100644
--- a/css/base.css
+++ b/css/base.css
@@ -450,21 +450,22 @@ object {
           @media (min-width: 769px) {
             .wrapper main section article .metadata {
               font-size: 1.2rem; } }
-          .wrapper main section article .metadata::after {
-            content: "";
-            display: block;
-            position: absolute;
-            background-color: transparent;
-            width: 0;
-            height: 0;
-            left: -5rem;
-            top: -5rem;
-            border-top: 5rem solid transparent;
-            border-left: 5rem solid transparent;
-            border-right: 5rem solid transparent;
-            border-bottom: 5rem solid #fff;
-            position: absolute;
-            z-index: -1; }
+          @media (max-width: 768px) {
+            .wrapper main section article .metadata::after {
+              content: "";
+              display: block;
+              position: absolute;
+              background-color: transparent;
+              width: 0;
+              height: 0;
+              left: -5rem;
+              top: -5rem;
+              border-top: 5rem solid transparent;
+              border-left: 5rem solid transparent;
+              border-right: 5rem solid transparent;
+              border-bottom: 5rem solid #fff;
+              position: absolute;
+              z-index: -1; } }
       @media (min-width: 769px) {
         .wrapper main section .misha_loadmore {
           width: 10rem;
@@ -655,6 +656,9 @@ object {
         .home main section .home-wrapper-big article .metadata {
           height: calc(10rem / 2); } }
   @media (min-width: 769px) {
+          .archive main section .home-wrapper-big article .metadata > div,
+          .home main section .home-wrapper-big article .metadata > div {
+            flex: 1 0 auto; }
           .archive main section .home-wrapper-big article .metadata .categories,
           .home main section .home-wrapper-big article .metadata .categories {
             display: block;
@@ -674,11 +678,6 @@ object {
           .home main section .home-wrapper-big article .metadata .alcim {
             color: #000 !important;
             display: none; }
-            .archive main section .home-wrapper-big article .metadata .bevezeto.transparent,
-            .archive main section .home-wrapper-big article .metadata .alcim.transparent,
-            .home main section .home-wrapper-big article .metadata .bevezeto.transparent,
-            .home main section .home-wrapper-big article .metadata .alcim.transparent {
-              color: transparent !important; }
           .archive main section .home-wrapper-big article .metadata .alcim,
           .home main section .home-wrapper-big article .metadata .alcim {
             -moz-transform: rotate(270deg);
@@ -704,10 +703,17 @@ object {
           .home main section .home-wrapper-big article .metadata .bevezeto {
             font-size: 2rem; } }
   @media (min-width: 769px) {
+          .archive main section .home-wrapper-big article .metadata .transparent,
+          .archive main section .home-wrapper-big article .metadata .transparent a,
+          .home main section .home-wrapper-big article .metadata .transparent,
+          .home main section .home-wrapper-big article .metadata .transparent a {
+            color: transparent !important; }
           .archive main section .home-wrapper-big article .metadata .filler,
           .home main section .home-wrapper-big article .metadata .filler {
             flex: 0 0 auto;
-            width: 40%; }
+            width: 40%;
+            height: 1px;
+            align-self: flex-start; }
         .archive main section .home-wrapper-big article.hovered h2 > a,
         .home main section .home-wrapper-big article.hovered h2 > a {
           color: #000; }
@@ -720,8 +726,8 @@ object {
         border: none;
         width: calc(100% - 4rem);
         border-top: #000 1px solid;
-        left: calc(4rem);
         background-color: transparent;
+        left: calc(4rem);
         margin-left: -0; }
       .archive main section .home-wrapper-big.home-wrapper-1 article .metadata::before,
       .home main section .home-wrapper-big.home-wrapper-1 article .metadata::before {
@@ -731,6 +737,8 @@ object {
         width: calc(4rem);
         height: calc(4rem);
         top: 0;
+        background-color: transparent;
+        z-index: 9;
         left: -0;
         border-left: #000 solid 1px;
         -moz-transform: skewX(-45deg);
@@ -738,45 +746,58 @@ object {
         -ms-transform: skewX(-45deg);
         -webkit-transform: skewX(-45deg);
         transform: skewX(-45deg);
-        transform-origin: left bottom;
-        background-color: transparent;
-        z-index: 9; }
+        transform-origin: left bottom; }
+      .archive main section .home-wrapper-big.home-wrapper-1 article .metadata .filler,
+      .home main section .home-wrapper-big.home-wrapper-1 article .metadata .filler {
+        position: relative; }
+        .archive main section .home-wrapper-big.home-wrapper-1 article .metadata .filler::after,
+        .home main section .home-wrapper-big.home-wrapper-1 article .metadata .filler::after {
+          content: url("../img/curvy_arrow.svg");
+          position: absolute;
+          top: -50%;
+          right: 0; }
       .archive main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper,
       .home main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper {
         float: right; }
       .archive main section .home-wrapper-big.home-wrapper-2 article,
       .home main section .home-wrapper-big.home-wrapper-2 article {
         border-left: #000 1px solid; }
-        .archive main section .home-wrapper-big.home-wrapper-2 article .metadata::after,
-        .home main section .home-wrapper-big.home-wrapper-2 article .metadata::after {
-          position: absolute;
-          content: "";
-          display: block;
-          top: 0;
-          border: none;
-          width: calc(100% - 4rem);
-          border-top: #000 1px solid;
-          left: calc(4rem);
-          background-color: transparent;
-          margin-left: -0; }
-        .archive main section .home-wrapper-big.home-wrapper-2 article .metadata::before,
-        .home main section .home-wrapper-big.home-wrapper-2 article .metadata::before {
-          display: block;
-          content: "";
-          position: absolute;
-          width: calc(4rem);
-          height: calc(4rem);
-          top: 0;
-          left: -0;
-          border-left: #000 solid 1px;
-          -moz-transform: skewX(-45deg);
-          -o-transform: skewX(-45deg);
-          -ms-transform: skewX(-45deg);
-          -webkit-transform: skewX(-45deg);
-          transform: skewX(-45deg);
-          transform-origin: left bottom;
-          background-color: transparent;
-          z-index: 9; }
+        .archive main section .home-wrapper-big.home-wrapper-2 article .metadata,
+        .home main section .home-wrapper-big.home-wrapper-2 article .metadata {
+          justify-content: flex-end; }
+          .archive main section .home-wrapper-big.home-wrapper-2 article .metadata::after,
+          .home main section .home-wrapper-big.home-wrapper-2 article .metadata::after {
+            position: absolute;
+            content: "";
+            display: block;
+            top: 0;
+            border: none;
+            width: calc(100% - 4rem);
+            border-top: #000 1px solid;
+            background-color: transparent;
+            right: calc(4rem);
+            margin-right: -0; }
+          .archive main section .home-wrapper-big.home-wrapper-2 article .metadata::before,
+          .home main section .home-wrapper-big.home-wrapper-2 article .metadata::before {
+            display: block;
+            content: "";
+            position: absolute;
+            width: calc(4rem);
+            height: calc(4rem);
+            top: 0;
+            background-color: transparent;
+            z-index: 9;
+            right: -0;
+            border-right: #000 solid 1px;
+            -moz-transform: skewX(45deg);
+            -o-transform: skewX(45deg);
+            -ms-transform: skewX(45deg);
+            -webkit-transform: skewX(45deg);
+            transform: skewX(45deg);
+            transform-origin: right bottom; }
+          .archive main section .home-wrapper-big.home-wrapper-2 article .metadata .filler,
+          .home main section .home-wrapper-big.home-wrapper-2 article .metadata .filler {
+            order: -1; }
         .archive main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img,
         .home main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img {
           left: -5rem;
@@ -851,8 +872,8 @@ object {
             border: none;
             width: calc(100% - 4rem);
             border-top: #000 1px solid;
-            left: calc(4rem);
             background-color: transparent;
+            left: calc(4rem);
             margin-left: -0; }
           .archive main section .home-wrapper-small article .metadata::before,
           .archive main section .home-wrapper-small .archivetitle .metadata::before,
@@ -866,6 +887,8 @@ object {
             width: calc(4rem);
             height: calc(4rem);
             top: 0;
+            background-color: transparent;
+            z-index: 9;
             left: -0;
             border-left: #000 solid 1px;
             -moz-transform: skewX(-45deg);
@@ -873,9 +896,7 @@ object {
             -ms-transform: skewX(-45deg);
             -webkit-transform: skewX(-45deg);
             transform: skewX(-45deg);
-            transform-origin: left bottom;
-            background-color: transparent;
-            z-index: 9; }
+            transform-origin: left bottom; }
           .archive main section .home-wrapper-small article .metadata.vis,
           .archive main section .home-wrapper-small .archivetitle .metadata.vis,
           .archive main section .home-wrapper-small .archivedescription .metadata.vis,
@@ -951,8 +972,8 @@ object {
           border: none;
           width: calc(100% - 5rem);
           border-top: #000 1px solid;
-          left: calc(5rem);
           background-color: transparent;
+          left: calc(5rem);
           margin-left: -0; }
         .archive main section .home-wrapper-small .archivetitle::before,
         .home main section .home-wrapper-small .archivetitle::before {
@@ -962,6 +983,8 @@ object {
           width: calc(5rem);
           height: calc(5rem);
           top: 0;
+          background-color: transparent;
+          z-index: 9;
           left: -0;
           border-left: #000 solid 1px;
           -moz-transform: skewX(-45deg);
@@ -969,9 +992,7 @@ object {
           -ms-transform: skewX(-45deg);
           -webkit-transform: skewX(-45deg);
           transform: skewX(-45deg);
-          transform-origin: left bottom;
-          background-color: transparent;
-          z-index: 9; }
+          transform-origin: left bottom; }
         .archive main section .home-wrapper-small .archivetitle.tag,
         .home main section .home-wrapper-small .archivetitle.tag {
           text-transform: uppercase; }
@@ -1098,8 +1119,8 @@ object {
             border: none;
             width: calc(100% - 5rem + 5rem);
             border-top: #000 1px solid;
-            left: calc(5rem);
             background-color: white;
+            left: calc(5rem);
             margin-left: -5rem; }
           .single article .titlewrapper .metadata::before {
             display: block;
@@ -1108,6 +1129,8 @@ object {
             width: calc(5rem);
             height: calc(5rem);
             top: 0;
+            background-color: white;
+            z-index: 9;
             left: -5rem;
             border-left: #000 solid 1px;
             -moz-transform: skewX(-45deg);
@@ -1115,9 +1138,7 @@ object {
             -ms-transform: skewX(-45deg);
             -webkit-transform: skewX(-45deg);
             transform: skewX(-45deg);
-            transform-origin: left bottom;
-            background-color: white;
-            z-index: 9; } }
+            transform-origin: left bottom; } }
       .single article .titlewrapper .metadata .time-cat {
         z-index: 10; }
     .single article .titlewrapper h1 {
diff --git a/img/curvy_arrow.svg b/img/curvy_arrow.svg
new file mode 100644
index 0000000..ea96b80
--- /dev/null
+++ b/img/curvy_arrow.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 122.1 232.379"
+   height="232.379"
+   width="122.1"
+   xml:space="preserve"
+   id="svg2"
+   version="1.1"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs6"><clipPath
+       id="clipPath18"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path16"
+         d="m 1715,37 h 45 v 974 h -45 z" /></clipPath><clipPath
+       id="clipPath32"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path30"
+         d="m 799,37 h 800.78 v 972 H 799 Z" /></clipPath><clipPath
+       id="clipPath64"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path62"
+         d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath><clipPath
+       id="clipPath80"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path78"
+         d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath><clipPath
+       id="clipPath198"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path196"
+         d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath><clipPath
+       id="clipPath222"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path220"
+         d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath></defs><path
+     id="path226"
+     style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+     d="m 1.044,0 c 0,63.609 53.057,115.94 121.056,115.94 -67.999,0 -121.35,52.828 -121.35,116.439" /></svg>
\ No newline at end of file
diff --git a/js/scripts.js b/js/scripts.js
index a7cd30e..6971740 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -466,17 +466,22 @@
 			let cc = $(this)
 			let cArticle = cc.parents("article")
 			let cMetadata = cArticle.children(".metadata")
+			
 			//add hovered class
 			cArticle.addClass("hovered")
+			
 			//add tag to header for bg
 			let artClasses = cArticle.attr("class").split(" ")
 			let theTag = findClassByStart(artClasses, "tag")
 			$("body, .header-1, .header-2").addClass("hover-" + theTag)
 
+			//transparent metadata
+			cMetadata.children(".categories, .postedon").addClass("transparent")
+			
 			//animate border
 			cMetadata.stop().animate({ height: "25rem" }, _ => {
 				//hide metadata
-				cMetadata.children(".categories, .postedon").hide()
+				cMetadata.children(".categories, .postedon").hide().removeClass("transparent")
 				cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent")
 			})
 
@@ -484,19 +489,23 @@
 			let cc = $(this)
 			let cArticle = cc.parents("article")
 			let cMetadata = cArticle.children(".metadata")
+
 			//remove hovered class
 			cArticle.removeClass("hovered")
+			
 			//remove tag from header and body
 			let headerClasses = $(".header-1").attr("class").split(" ")
 			var hoverClass = findClassByStart(headerClasses, "hover")
 			$("body, .header-1, .header-2").removeClass(hoverClass)
+			
 			//transparent metadata
 			cMetadata.children(".alcim, .bevezeto").addClass("transparent")
+			
 			//animate height change
 			cMetadata.stop().animate({ height: "10rem" }, _ => {
 				//hide and show metadata
 				cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
-				cMetadata.children(".categories, .postedon").show()
+				cMetadata.children(".categories, .postedon").removeClass("transparent").show()
 			})
 
 		})
diff --git a/sass/base.scss b/sass/base.scss
index 71644a7..1240ac9 100644
--- a/sass/base.scss
+++ b/sass/base.scss
@@ -82,6 +82,10 @@ object {
 /* -------------------------------------------------------------------------- */
 /*                              GLOBAL VARIABLES                              */
 /* -------------------------------------------------------------------------- */
+$only-mobile: only screen and
+  (
+    max-width: 768px
+  );
 
 $smalldesktop: only screen and
   (
@@ -177,7 +181,7 @@ $v-unit-2: 8rem;
   z-index: -1;
 }
 
-@mixin triangle-corner-bordered($radius, $left, $bgcolor) {
+@mixin triangle-corner-bordered($radius, $offset, $bgcolor, $side) {
   &::after {
     //for border without corner
     position: absolute;
@@ -185,16 +189,23 @@ $v-unit-2: 8rem;
     display: block;
     top: 0;
     border: none;
-    @if $left==0 {
+    @if $offset==0 {
       width: calc(100% - #{$radius});
     } @else {
-      width: calc(100% - #{$radius} + #{$left});
+      width: calc(100% - #{$radius} + #{$offset});
     }
 
     border-top: #000 1px solid;
-    left: calc(#{$radius});
     background-color: $bgcolor;
-    margin-left: -#{$left};
+
+    @if $side==left {
+      left: calc(#{$radius});
+      margin-left: -#{$offset};
+    }
+    @if $side==right {
+      right: calc(#{$radius});
+      margin-right: -#{$offset};
+    }
   }
   &::before {
     //filleted corner
@@ -204,13 +215,21 @@ $v-unit-2: 8rem;
     width: calc(#{$radius});
     height: calc(#{$radius});
     top: 0;
-    left: -#{$left};
-    border-left: #000 solid 1px;
-    // border-top: #000 1px solid;
-    @include transform(skewX(-45deg));
-    transform-origin: left bottom;
     background-color: $bgcolor;
     z-index: 9;
+
+    @if $side==left {
+      left: -#{$offset};
+      border-left: #000 solid 1px;
+      @include transform(skewX(-45deg));
+      transform-origin: left bottom;
+    }
+    @if $side==right {
+      right: -#{$offset};
+      border-right: #000 solid 1px;
+      @include transform(skewX(45deg));
+      transform-origin: right bottom;
+    }
   }
 }
 
@@ -312,7 +331,7 @@ $v-unit-2: 8rem;
           // color: #000;
           // fill: currentColor;
           filter: invert(100%); //black
-          @include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;;
+          @include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;;;;;;
         }
       }
     }
@@ -531,7 +550,9 @@ $v-unit-2: 8rem;
           @include home-metadata();
           z-index: 1;
           &::after {
-            @include trianglecorner(topleft, $h-unit-1);
+            @media #{$only-mobile} {
+              @include trianglecorner(topleft, $h-unit-1);
+            }
           }
         }
       } //article end
@@ -695,7 +716,7 @@ $v-unit-2: 8rem;
             padding: 0;
             margin-left: $h-unit-2;
             margin-top: $v-unit-1;
-            
+
             border-top: 1px #000 solid;
 
             /* ------------- home article desktop big - thumbnail and title ------------- */
@@ -706,7 +727,7 @@ $v-unit-2: 8rem;
               display: flex;
               flex-direction: row;
               justify-content: flex-start;
-              
+
               img.attachment-home-big-thumbnail {
                 object-fit: cover;
                 width: 100%;
@@ -733,12 +754,17 @@ $v-unit-2: 8rem;
               padding: 0;
               justify-content: flex-start;
               align-items: center;
-              
+
               @include home-metadata-big();
-              
+
               @media #{$mobile-landscape} {
                 height: calc(#{$h-unit-2} / 2);
               }
+
+              &>div{
+                flex: 1 0 auto;
+              }
+
               .categories {
                 display: block;
                 padding: 0 $h-unit-1;
@@ -749,10 +775,9 @@ $v-unit-2: 8rem;
                 width: 1px;
                 background-color: #000;
                 flex: 0 0 auto;
-                
               }
 
-              .postedon{
+              .postedon {
                 padding: 0 $h-unit-1;
               }
 
@@ -760,12 +785,9 @@ $v-unit-2: 8rem;
               .alcim {
                 color: #000 !important;
                 display: none;
-                &.transparent{
-                  color: transparent !important;
-                }
               }
 
-              .alcim{
+              .alcim {
                 @include transform(rotate(270deg));
                 transform-origin: top bottom;
                 text-align: left;
@@ -775,7 +797,7 @@ $v-unit-2: 8rem;
                 margin: 0 -3rem;
               }
 
-              .bevezeto{
+              .bevezeto {
                 width: 50%;
                 flex: 0 1 auto;
                 text-align: left;
@@ -783,9 +805,16 @@ $v-unit-2: 8rem;
                 @include home-metadata-bevezeto();
               }
 
-              .filler{
+              .transparent,
+              .transparent a {
+                color: transparent !important;
+              }
+
+              .filler {
                 flex: 0 0 auto;
                 width: 40%;
+                height: 1px;
+                align-self: flex-start;
               }
             } //metadata end
 
@@ -798,8 +827,22 @@ $v-unit-2: 8rem;
           }
           &.home-wrapper-1 {
             article {
-              .metadata{
-                @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
+              .metadata {
+                @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, left);
+                .filler{
+                  position: relative;
+                  
+                  &::after{
+                    content: url('../img/curvy_arrow.svg');
+                    position: absolute;
+                    top: -50%;
+                    right: 0;
+                    
+                    
+                    
+                  }
+                }
+                
               }
               a.thumbnailwrapper {
                 float: right;
@@ -809,8 +852,13 @@ $v-unit-2: 8rem;
           &.home-wrapper-2 {
             article {
               border-left: #000 1px solid;
-              .metadata{
-                @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
+              
+              .metadata {
+                justify-content: flex-end;
+                @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, right);
+                .filler{
+                  order: -1;
+                }
               }
               .thumbnailwrapper {
                 img {
@@ -869,7 +917,7 @@ $v-unit-2: 8rem;
               padding: 0;
               justify-content: flex-end;
               align-items: stretch;
-              @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
+              @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, left);
               display: none;
               &.vis {
                 display: flex;
@@ -905,7 +953,7 @@ $v-unit-2: 8rem;
             padding: 2rem;
             border-right: #000 1px solid;
             @include home-title();
-            @include triangle-corner-bordered($h-unit-1, 0, transparent);
+            @include triangle-corner-bordered($h-unit-1, 0, transparent, left);
             &.tag {
               text-transform: uppercase;
             }
@@ -1037,7 +1085,7 @@ $v-unit-2: 8rem;
           padding-left: 0;
 
           width: calc(100% - #{$h-unit-1}) !important;
-          @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white);
+          @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, left);
         }
         .time-cat {
           z-index: 10;