diff --git a/angular.json b/angular.json
index 39ff8649c..a7b302a96 100644
--- a/angular.json
+++ b/angular.json
@@ -102,8 +102,7 @@
       },
       "tags": [],
       "implicitDependencies": [
-        "file-uploader",
-        "portfolio"
+        "file-uploader"
       ]
     },
     "feedback": {
@@ -198,52 +197,6 @@
       },
       "tags": []
     },
-    "portfolio": {
-      "projectType": "library",
-      "root": "libs/portfolio",
-      "sourceRoot": "libs/portfolio/src",
-      "prefix": "valor-software-site-base",
-      "targets": {
-        "build": {
-          "executor": "@nrwl/angular:ng-packagr-lite",
-          "outputs": [
-            "dist/libs/portfolio"
-          ],
-          "options": {
-            "project": "libs/portfolio/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "libs/portfolio/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "libs/portfolio/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "executor": "@nrwl/jest:jest",
-          "outputs": [
-            "coverage/libs/portfolio"
-          ],
-          "options": {
-            "jestConfig": "libs/portfolio/jest.config.js",
-            "passWithNoTests": true
-          }
-        },
-        "lint": {
-          "executor": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": [
-              "libs/portfolio/src/**/*.ts",
-              "libs/portfolio/src/**/*.html"
-            ]
-          }
-        }
-      },
-      "tags": []
-    },
     "route-pages-blog-portfolio": {
       "projectType": "library",
       "root": "libs/route-pages/blog-portfolio",
@@ -291,8 +244,7 @@
       "tags": [],
       "implicitDependencies": [
         "common-docs",
-        "feedback",
-        "portfolio"
+        "feedback"
       ]
     },
     "route-pages-careers": {
@@ -438,8 +390,7 @@
       "tags": [],
       "implicitDependencies": [
         "common-docs",
-        "feedback",
-        "portfolio"
+        "feedback"
       ]
     },
     "route-pages-services-page": {
diff --git a/apps/valor-software-site/src/app/404.component.ts b/apps/valor-software-site/src/app/404.component.ts
index bb6a4fc60..856753a1e 100644
--- a/apps/valor-software-site/src/app/404.component.ts
+++ b/apps/valor-software-site/src/app/404.component.ts
@@ -10,8 +10,8 @@ import { Component } from '@angular/core';
                     <h1 class="text-light_title_col text-8xl leading-100 md:text-250 md:leading-250 mb-4 font-bold">404</h1>
                     <p class="leading-40 text-grey_font_col text-center lg:text-left text-large font-bold mb-6">Ooops! You weren’t supposed to see this.</p>
                     <p class="text-base leading-6 text-light_title_col text-center lg:text-left">The page you’re looking for no longer exist. Return to the previous page and remember: you haven’t seen anything! </p>
-                    <button class="btn-pink w-full md:w-auto flex justify-center mt-8">
-                        <a [routerLink]="'/'"  class="w-full flex justify-center items-center">Go to the main page <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+                    <button class="w-full md:w-auto flex justify-center mt-8">
+                        <a [routerLink]="'/'"  class="btn-pink w-full flex justify-center items-center">Go to the main page <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                     </button>
                 </div>
                 <div class="hidden lg:flex items-end">
diff --git a/apps/valor-software-site/src/app/app.module.ts b/apps/valor-software-site/src/app/app.module.ts
index 404a54ffd..3c708a0b2 100644
--- a/apps/valor-software-site/src/app/app.module.ts
+++ b/apps/valor-software-site/src/app/app.module.ts
@@ -3,11 +3,10 @@ import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { routes } from './app.routing';
 import { AppComponent } from './app.component';
-import { CommonDocsModule, ARTICLES_LIST, ARTICLES_REFACTORED_TITLE_LIST, SeoService, OLD_ROUTES_FROM_OLD_SITE } from '@valor-software/common-docs';
+import { CommonDocsModule, ARTICLES_LIST, SeoService, PORTFOLIO_LIST, ARTICLES_REFACTORED_TITLE_LIST, OLD_ROUTES_FROM_OLD_SITE } from '@valor-software/common-docs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ScullyLibModule } from '@scullyio/ng-lib';
 import { articlesList, articlesRefactoringTitlesList } from "../../../../assets/articles/articlesList";
-import { PORTFOLIO_LIST } from "@valor-software/portfolio";
 import { projectsList } from "../assets/portfolio/portfolio.list";
 import { linksFromOldSite } from "../../../../assets/articles/brokenRoutes";
 import { NotFoundComponent } from './404.component';
diff --git a/libs/common-docs/src/common-docs.module.ts b/libs/common-docs/src/common-docs.module.ts
index 8af218b6b..41840b3f1 100644
--- a/libs/common-docs/src/common-docs.module.ts
+++ b/libs/common-docs/src/common-docs.module.ts
@@ -19,9 +19,8 @@ import { SwiperModule } from "swiper/angular";
 import { BlogPreviewComponent } from './components/blog-preview/blog-preview.component';
 import { BlogPortfolioItemComponent } from './components/blog-preview/blog-portfolio-item.component';
 import { GetArticlesService } from './services/getArticles.service';
-import { ArticlesRouteService } from './services/articlesRoute.service';
 import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from 'ng-recaptcha';
-import { GetPortfolioService } from "@valor-software/portfolio";
+import { GetPortfolioService } from "./services/getPortfolio.service";
 import { CustomSlicePipe } from './pipes/customSlice.pipe';
 
 export { PopoverComponent } from './components/popover/popover.component';
@@ -34,13 +33,15 @@ export { ModalService } from './services/modal.service';
 export { BreadCrumbsComponent } from './components/breadCrumbs/breadCrumbs.component';
 export { ShowHideDirective } from './directives/showHide.directive';
 export { GetArticlesService } from './services/getArticles.service';
-export { ArticlesRouteService } from './services/articlesRoute.service';
 export { IArticle } from './models/article.interface';
 export { BlogPreviewComponent } from './components/blog-preview/blog-preview.component';
 export { BlogPortfolioItemComponent } from './components/blog-preview/blog-portfolio-item.component';
 export { ARTICLES_LIST, ARTICLES_REFACTORED_TITLE_LIST } from './tokens/articlesList.token';
 export { SeoService } from './services/seo.service';
 export { CustomSlicePipe } from './pipes/customSlice.pipe';
+export { PORTFOLIO_LIST } from './tokens/portfolioList.token';
+export { IPortfolio } from './models/portfolio.interface';
+export { GetPortfolioService } from './services/getPortfolio.service';
 export { titleRefactoring, checkHTMLExtension} from './utils/titleRefactoringUtil';
 export { OLD_ROUTES_FROM_OLD_SITE } from "./tokens/linksFromOldSite.token";
 
@@ -70,9 +71,9 @@ export { OLD_ROUTES_FROM_OLD_SITE } from "./tokens/linksFromOldSite.token";
     ShowHideDirective,
     BlogPreviewComponent,
     BlogPortfolioItemComponent,
-    CustomSlicePipe
+    CustomSlicePipe,
   ],
-  providers: [ModalService, SendEmailService, ArticlesRouteService, GetArticlesService, GetPortfolioService,
+  providers: [ModalService, SendEmailService, GetArticlesService, GetPortfolioService,
     {
       provide: RECAPTCHA_V3_SITE_KEY,
       useValue: '6LctnKQdAAAAABGStzrEdBnCWVYwkqAafI7pcUz3',
diff --git a/libs/common-docs/src/components/blog-preview/blog-portfolio-item.component.ts b/libs/common-docs/src/components/blog-preview/blog-portfolio-item.component.ts
index 88b8fc60c..a45e77206 100644
--- a/libs/common-docs/src/components/blog-preview/blog-portfolio-item.component.ts
+++ b/libs/common-docs/src/components/blog-preview/blog-portfolio-item.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { IArticle } from "../../models/article.interface";
-import { IPortfolio } from "@valor-software/portfolio";
+import { IPortfolio } from "../../models/portfolio.interface";
 
 
 @Component({
diff --git a/libs/common-docs/src/components/blog-preview/blog-preview.component.html b/libs/common-docs/src/components/blog-preview/blog-preview.component.html
index c6deb7e51..7a04e7c85 100644
--- a/libs/common-docs/src/components/blog-preview/blog-preview.component.html
+++ b/libs/common-docs/src/components/blog-preview/blog-preview.component.html
@@ -4,7 +4,11 @@
             class="article_swiper"
     >
         <ng-template swiperSlide *ngFor="let article of articles">
-            <blog-portfolio-item class="w-full cursor-pointer" [article]="article" (click)="route(article.title)"></blog-portfolio-item>
+            <ng-container *ngIf="article && article.title">
+                <a class="block w-full cursor-pointer" href="javascript:void(0)" [routerLink]="['/articles', getRouteLink(article.title)]">
+                    <blog-portfolio-item [article]="article"></blog-portfolio-item>
+                </a>
+            </ng-container>
         </ng-template>
     </swiper>
 </ng-container>
\ No newline at end of file
diff --git a/libs/common-docs/src/components/blog-preview/blog-preview.component.ts b/libs/common-docs/src/components/blog-preview/blog-preview.component.ts
index 8d92430c7..654f760d5 100644
--- a/libs/common-docs/src/components/blog-preview/blog-preview.component.ts
+++ b/libs/common-docs/src/components/blog-preview/blog-preview.component.ts
@@ -3,7 +3,7 @@ import { GetArticlesService } from "../../services/getArticles.service";
 import { IArticle } from "../../models/article.interface";
 import { forkJoin, Subscription } from "rxjs";
 import SwiperCore, { Pagination, SwiperOptions  } from "swiper";
-import {Router} from "@angular/router";
+import {titleRefactoring} from "../../utils/titleRefactoringUtil";
 SwiperCore.use([Pagination]);
 
 @Component({
@@ -37,7 +37,6 @@ export class BlogPreviewComponent implements OnDestroy, OnInit{
 
     constructor(
         private getArticles: GetArticlesService,
-        private router: Router
     ) {}
 
     ngOnInit() {
@@ -58,12 +57,7 @@ export class BlogPreviewComponent implements OnDestroy, OnInit{
         this.$articles?.unsubscribe();
     }
 
-    route(title: string) {
-        if (!title) {
-            return;
-        }
-
-        const link = this.getArticles.getRefactoredTitle(title);
-        this.router.navigate(['articles', link]);
+    getRouteLink(link: string): string {
+        return titleRefactoring(link);
     }
 }
\ No newline at end of file
diff --git a/libs/common-docs/src/components/breadCrumbs/breadCrumbs.component.ts b/libs/common-docs/src/components/breadCrumbs/breadCrumbs.component.ts
index 514ca9bbc..2bef3bbf9 100644
--- a/libs/common-docs/src/components/breadCrumbs/breadCrumbs.component.ts
+++ b/libs/common-docs/src/components/breadCrumbs/breadCrumbs.component.ts
@@ -7,16 +7,17 @@ import { Router, UrlSegment } from "@angular/router";
     template:`
         <div *ngIf="segments && segments?.length && segments.length > 1">
             <div class="flex text-grey_font_col">
-                <p class="underline cursor-pointer" (click)="navigate()">Home</p>
+                <a href="javascript:void(0)" class="underline cursor-pointer" [routerLink]="[getRouteLink()]">Home</a>
                 <ng-container *ngFor="let segment of segments;let i = index">
                     <ng-container *ngIf="segment.title && segment.path">
                         <span>&nbsp;{{'>'}}&nbsp;</span>
-                        <p
-                                (click)="navigate(i)"
+                        <a
+                                href="javascript:void(0)"
+                                [routerLink]="[getRouteLink(i)]"
                                 [ngClass]="{'disabled': checkDisabled(i), 'underline cursor-pointer': !checkDisabled(i)}"
                         >
                             {{segment.title.toString() | titlecase}}
-                        </p>
+                        </a>
                     </ng-container>
                 </ng-container>
             </div>
@@ -62,24 +63,19 @@ export class BreadCrumbsComponent {
         });
     }
 
-    navigate(link?: number) {
-        if (!this.segments?.length) {
-            return;
-        }
-
-        if (!link && link !== 0) {
-            this.router.navigate(['/']);
-            return;
+    getRouteLink(link?: number): string {
+        if (!this.segments?.length || !link && link !== 0) {
+            return '/';
         }
 
         link++;
         if (link >= this.segments.length) {
-            return;
+            return '/';
         }
 
         const arr = this.segments.slice(0, link);
         const url = arr.map(url => url.path);
-        this.router.navigate([`/${url.join('/')}`]);
+        return `/${url.join('/')}`;
     }
 
     checkDisabled(index: number) {
diff --git a/libs/common-docs/src/components/popover/popover.component.html b/libs/common-docs/src/components/popover/popover.component.html
index 1024ba926..cd737c4c3 100644
--- a/libs/common-docs/src/components/popover/popover.component.html
+++ b/libs/common-docs/src/components/popover/popover.component.html
@@ -2,16 +2,18 @@
     <div class="popover pt-10 px-10 z-20" [class.popover_show]="show">
         <div class="arrow"></div>
         <div class="flex justify-between flex-wrap">
-            <div class="w-45% cursor-pointer text-light_font_col mb-12" *ngFor="let item of popover_str" changeSrcOnHover [defaultSrc]="item.icon" [activeSrc]="item.activeIcon" [routerLink]="item.route" (click)="changeShow(false)">
-                <div class="flex mb-2.5">
-                    <div class="flex items-center">
-                        <img [src]="item.icon">
-                        <h3 class="ml-2.5">{{item.title}}</h3>
+            <div class="w-45% cursor-pointer text-light_font_col mb-12" *ngFor="let item of popover_str" changeSrcOnHover [defaultSrc]="item.icon" [activeSrc]="item.activeIcon" (click)="changeShow(false)">
+                <a href="javaScript:void(0)" [routerLink]="item.route">
+                    <div class="flex mb-2.5">
+                        <div class="flex items-center">
+                            <img [src]="item.icon">
+                            <h3 class="ml-2.5">{{item.title}}</h3>
+                        </div>
+                        <div *ngIf="!item.route" class="bg-yellow_bg_col rounded-2xl text-dark_font_col text-xs ml-5 self-center px-1.5" >
+                            Coming soon
+                        </div>
                     </div>
-                    <div *ngIf="!item.route" class="bg-yellow_bg_col rounded-2xl text-dark_font_col text-xs ml-5 self-center px-1.5" >
-                        Coming soon
-                    </div>
-                </div>
+                </a>
                 <div>
                     <p class="text-grey_font_col text-sm">{{item.description}}</p>
                 </div>
@@ -23,16 +25,18 @@ <h3 class="ml-2.5">{{item.title}}</h3>
 
 <!--ADAPTIVE MENU-->
 <div class="adaptive-popover" [class.show]="show">
-    <div class="" *ngFor="let item of popover_str; index as i" [routerLink]="item.route" (click)="changeShow(false)">
-        <div class="flex" [class.mb-7]="i !== popover_str.length-1">
-            <div class="flex items-center">
-                <img [src]="item.icon">
-                <h3 class="ml-2.5 text-xl">{{item.title}}</h3>
-            </div>
-            <div *ngIf="!item.route" class="bg-yellow_bg_col rounded-2xl px-2 text-dark_font_col text-xs ml-5 self-center">
-                Coming soon
+    <div class="" *ngFor="let item of popover_str; index as i" (click)="changeShow(false)">
+        <a href="javaScript:void(0)" [routerLink]="item.route">
+            <div class="flex" [class.mb-7]="i !== popover_str.length-1">
+                <div class="flex items-center">
+                    <img [src]="item.icon">
+                    <h3 class="ml-2.5 text-xl">{{item.title}}</h3>
+                </div>
+                <div *ngIf="!item.route" class="bg-yellow_bg_col rounded-2xl px-2 text-dark_font_col text-xs ml-5 self-center">
+                    Coming soon
+                </div>
             </div>
-        </div>
+        </a>
     </div>
 </div>
 
diff --git a/libs/common-docs/src/components/services_block/services-block.component.html b/libs/common-docs/src/components/services_block/services-block.component.html
index 9f4894d3f..5423deeb8 100644
--- a/libs/common-docs/src/components/services_block/services-block.component.html
+++ b/libs/common-docs/src/components/services_block/services-block.component.html
@@ -1,8 +1,8 @@
 <div class="flex justify-between flex-col flex-wrap lg:flex-row" *ngIf="preview">
-    <div *ngFor="let serv of servicesInfList" class="lg:w-48% bg-grey py-7 px-12 flex justify-between flex-col-reverse md:flex-row font-bold mb-8 w-full items-center cursor-pointer md:border-2 md:border-transparent md:hover:border-pink transition-colors" (click)="routeLink('services')">
+    <a *ngFor="let serv of servicesInfList" href="javascript:void(0)" [routerLink]="getRouteLink('services')" class="block lg:w-48% bg-grey py-7 px-12 flex justify-between flex-col-reverse md:flex-row font-bold mb-8 w-full items-center cursor-pointer md:border-2 md:border-transparent md:hover:border-pink transition-colors">
         <p class="text-light_title_col md:text-large block md:mr-3.5 flex items-center mt-6 md:mt-0 text-xl md:leading-44 text-center md:text-left">{{serv.title}}</p>
         <img [src]="serv.img" [alt]="serv.title + ' icon'" class="md:max-w-45% max-w-10.5">
-    </div>
+    </a>
 </div>
 <ng-container *ngIf="!preview">
     <div
diff --git a/libs/common-docs/src/components/services_block/services-block.component.ts b/libs/common-docs/src/components/services_block/services-block.component.ts
index 78380165c..45cb1ae38 100644
--- a/libs/common-docs/src/components/services_block/services-block.component.ts
+++ b/libs/common-docs/src/components/services_block/services-block.component.ts
@@ -15,7 +15,7 @@ export class ServicesBlockComponent {
         private router: Router
     ) {}
 
-    routeLink(link: string) {
-        this.router.navigate([`/${link}`]);
+    getRouteLink(link: string) {
+        return [`/${link}`];
     }
 }
\ No newline at end of file
diff --git a/libs/common-docs/src/services/articlesRoute.service.ts b/libs/common-docs/src/services/articlesRoute.service.ts
deleted file mode 100644
index 19735db40..000000000
--- a/libs/common-docs/src/services/articlesRoute.service.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Router } from "@angular/router";
-
-@Injectable({providedIn: 'platform'})
-export class ArticlesRouteService {
-
-    constructor(
-        private router: Router
-    ){}
-
-    route(title: string) {
-        let link = title;
-        while(link.match(' '|| ':' || '–' || '—')) {
-            link = link.replace(' ','_');
-            link = link.replace(':','');
-            link = link.replace('–','_');
-            link = link.replace('—','_');
-            link = link.replace('\'','_');
-        }
-        this.router.navigate(['articles', link]);
-    }
-}
diff --git a/libs/portfolio/src/getPortfolio.service.ts b/libs/common-docs/src/services/getPortfolio.service.ts
similarity index 89%
rename from libs/portfolio/src/getPortfolio.service.ts
rename to libs/common-docs/src/services/getPortfolio.service.ts
index f57f9651f..e5d5e7ea4 100644
--- a/libs/portfolio/src/getPortfolio.service.ts
+++ b/libs/common-docs/src/services/getPortfolio.service.ts
@@ -1,9 +1,9 @@
 import { Inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { IPortfolio } from "./portfolio.interface";
-import { PORTFOLIO_LIST } from "./portfolioList.token";
-import {titleRefactoring, checkHTMLExtension} from "./titleRefactoringUtil";
+import { IPortfolio } from "../models/portfolio.interface";
+import { PORTFOLIO_LIST } from "../tokens/portfolioList.token";
+import {titleRefactoring, checkHTMLExtension} from "../utils/titleRefactoringUtil";
 
 
 @Injectable({providedIn: 'platform'})
diff --git a/libs/common-docs/src/services/seo.service.ts b/libs/common-docs/src/services/seo.service.ts
index e0b638de5..e9901ca43 100644
--- a/libs/common-docs/src/services/seo.service.ts
+++ b/libs/common-docs/src/services/seo.service.ts
@@ -1,12 +1,12 @@
-import { Injectable, Inject } from '@angular/core';
+import {Inject, Injectable} from '@angular/core';
 import { Title, Meta } from '@angular/platform-browser';
-import {filter} from "rxjs/operators";
-import {NavigationEnd, Router, UrlSegment} from "@angular/router";
-import {Observable, Subscription} from "rxjs";
-import {GetArticlesService} from "./getArticles.service";
-import { GetPortfolioService } from "@valor-software/portfolio";
+import { GetArticlesService } from "./getArticles.service";
+import { GetPortfolioService } from "./getPortfolio.service";
+import { filter } from "rxjs/operators";
+import { NavigationEnd, Router, UrlSegment } from "@angular/router";
+import { Observable, Subscription } from "rxjs";
 import { checkHTMLExtension } from "../utils/titleRefactoringUtil";
-import {OLD_ROUTES_FROM_OLD_SITE} from "../tokens/linksFromOldSite.token";
+import { OLD_ROUTES_FROM_OLD_SITE } from "../tokens/linksFromOldSite.token";
 
 const ex: {[key: string] : { nameType: 'meta' | 'title', name: string, nameValue: string, content: string }[]} = {
     '/': [
diff --git a/libs/portfolio/src/portfolioList.token.ts b/libs/common-docs/src/tokens/portfolioList.token.ts
similarity index 100%
rename from libs/portfolio/src/portfolioList.token.ts
rename to libs/common-docs/src/tokens/portfolioList.token.ts
diff --git a/libs/portfolio/.eslintrc.json b/libs/portfolio/.eslintrc.json
deleted file mode 100644
index 17d600b7e..000000000
--- a/libs/portfolio/.eslintrc.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "extends": [
-    "../../.eslintrc.json"
-  ],
-  "ignorePatterns": [
-    "!**/*"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "*.ts"
-      ],
-      "extends": [
-        "plugin:@nrwl/nx/angular",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
-      "rules": {
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "valorSoftwareSiteBase",
-            "style": "camelCase"
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "valor-software-site-base",
-            "style": "kebab-case"
-          }
-        ]
-      }
-    },
-    {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@nrwl/nx/angular-template"
-      ],
-      "rules": {}
-    }
-  ]
-}
diff --git a/libs/portfolio/README.md b/libs/portfolio/README.md
deleted file mode 100644
index 7ad895bb4..000000000
--- a/libs/portfolio/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# portfolio
-
-This library was generated with [Nx](https://nx.dev).
-
-
-## Running unit tests
-
-Run `nx test portfolio` to execute the unit tests.
-
diff --git a/libs/portfolio/jest.config.js b/libs/portfolio/jest.config.js
deleted file mode 100644
index 127dea1ee..000000000
--- a/libs/portfolio/jest.config.js
+++ /dev/null
@@ -1,20 +0,0 @@
-module.exports = {
-  displayName: 'portfolio',
-  preset: '../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-      stringifyContentPathRegex: '\\.(html|svg)$',
-    }
-  },
-  coverageDirectory: '../../coverage/libs/portfolio',
-  transform: {
-    '^.+\\.(ts|js|html)$': 'jest-preset-angular'
-  },
-  snapshotSerializers: [
-    'jest-preset-angular/build/serializers/no-ng-attributes',
-    'jest-preset-angular/build/serializers/ng-snapshot',
-    'jest-preset-angular/build/serializers/html-comment',
-  ]
-};
diff --git a/libs/portfolio/ng-package.json b/libs/portfolio/ng-package.json
deleted file mode 100644
index 356e5da05..000000000
--- a/libs/portfolio/ng-package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/libs/portfolio",
-  "lib": {
-    "entryFile": "src/index.ts"
-  }
-}
diff --git a/libs/portfolio/package.json b/libs/portfolio/package.json
deleted file mode 100644
index ab892ee3a..000000000
--- a/libs/portfolio/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "@valor-software/portfolio",
-  "version": "0.0.1",
-  "peerDependencies": {
-    "@angular/common": "^12.2.0",
-    "@angular/core": "^12.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
-}
diff --git a/libs/portfolio/src/index.ts b/libs/portfolio/src/index.ts
deleted file mode 100644
index a6ed102b0..000000000
--- a/libs/portfolio/src/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-
-        export * from './portfolio.module';
-        
\ No newline at end of file
diff --git a/libs/portfolio/src/portfolio.interface.ts b/libs/portfolio/src/portfolio.interface.ts
deleted file mode 100644
index 51526d609..000000000
--- a/libs/portfolio/src/portfolio.interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export interface IPortfolio {
-    name: string;
-    link?: string;
-    behanceLink?: string;
-    goalsImg?: string;
-    solutionsImg?: string;
-    webSort?: string[];
-    video?:string;
-    iframe?: string;
-    feedback?: string;
-    sortTechnologies: string[];
-    previewImg: string;
-    description: string;
-    goals: string[];
-    solutions: string[];
-    outcome: string;
-    headerImg: string;
-    sortServices: string[];
-    aspects: {
-        type: string[];
-        country: string[];
-        technology_stack: string[];
-        services_provided: string[];
-    }
-}
\ No newline at end of file
diff --git a/libs/portfolio/src/portfolio.module.ts b/libs/portfolio/src/portfolio.module.ts
deleted file mode 100644
index d69aba435..000000000
--- a/libs/portfolio/src/portfolio.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-export { IPortfolio} from './portfolio.interface';
-export { GetPortfolioService } from './getPortfolio.service';
-export { ProjectsRouteService } from './projectsRoute.service';
-export { PORTFOLIO_LIST } from './portfolioList.token';
-
-@NgModule({
-  imports: [
-    CommonModule
-  ]
-})
-export class PortfolioModule { }
-        
\ No newline at end of file
diff --git a/libs/portfolio/src/projectsRoute.service.ts b/libs/portfolio/src/projectsRoute.service.ts
deleted file mode 100644
index 10a4ba03d..000000000
--- a/libs/portfolio/src/projectsRoute.service.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Router } from "@angular/router";
-
-@Injectable({providedIn: 'platform'})
-export class ProjectsRouteService {
-
-    constructor(
-        private router: Router
-    ){}
-
-    route(title: string) {
-        let link = title;
-        while(link.match(' '|| ':' || '–' || '—' || '&')) {
-            link = link.replace(' ','_');
-            link = link.replace(':','');
-            link = link.replace('–','_');
-            link = link.replace('—','_');
-            link = link.replace('&','_');
-            link = link.replace('\'','_');
-        }
-        this.router.navigate(['projects', link]);
-    }
-}
diff --git a/libs/portfolio/src/test-setup.ts b/libs/portfolio/src/test-setup.ts
deleted file mode 100644
index 1100b3e8a..000000000
--- a/libs/portfolio/src/test-setup.ts
+++ /dev/null
@@ -1 +0,0 @@
-import 'jest-preset-angular/setup-jest';
diff --git a/libs/portfolio/tsconfig.json b/libs/portfolio/tsconfig.json
deleted file mode 100644
index d7a0c7629..000000000
--- a/libs/portfolio/tsconfig.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ],
-  "compilerOptions": {
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "angularCompilerOptions": {
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
-}
diff --git a/libs/portfolio/tsconfig.lib.json b/libs/portfolio/tsconfig.lib.json
deleted file mode 100644
index fd887c2a4..000000000
--- a/libs/portfolio/tsconfig.lib.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "target": "es2015",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": [],
-    "lib": [
-      "dom",
-      "es2018"
-    ]
-  },
-  "exclude": [
-    "src/test-setup.ts",
-    "**/*.spec.ts",
-    "**/*.test.ts"
-  ],
-  "include": [
-    "**/*.ts"
-  ]
-}
diff --git a/libs/portfolio/tsconfig.lib.prod.json b/libs/portfolio/tsconfig.lib.prod.json
deleted file mode 100644
index 06de549e1..000000000
--- a/libs/portfolio/tsconfig.lib.prod.json
+++ /dev/null
@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}
diff --git a/libs/portfolio/tsconfig.spec.json b/libs/portfolio/tsconfig.spec.json
deleted file mode 100644
index a66ee4d3a..000000000
--- a/libs/portfolio/tsconfig.spec.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node"]
-  },
-  "files": ["src/test-setup.ts"],
-  "include": [
-    "**/*.test.ts",
-    "**/*.spec.ts",
-    "**/*.d.ts"
-]
-}
diff --git a/libs/route-pages/blog-portfolio/src/blog-portfolio.module.ts b/libs/route-pages/blog-portfolio/src/blog-portfolio.module.ts
index f1f5f924c..61d6a434d 100644
--- a/libs/route-pages/blog-portfolio/src/blog-portfolio.module.ts
+++ b/libs/route-pages/blog-portfolio/src/blog-portfolio.module.ts
@@ -12,7 +12,6 @@ import { ArticleComponent } from './article.component';
 import { ProjectComponent } from './project.component';
 import { FeedbackModule } from "@valor-software/feedback";
 import { SwiperModule } from "swiper/angular";
-import { GetBlogsService } from "./services/getBlogs.service";
 
 @NgModule({
   declarations: [
@@ -30,8 +29,7 @@ import { GetBlogsService } from "./services/getBlogs.service";
     CommonDocsModule,
     FeedbackModule,
     SwiperModule
-  ],
-  providers: [ GetBlogsService ]
+  ]
 })
 export class BlogPortfolioModule { }
         
\ No newline at end of file
diff --git a/libs/route-pages/blog-portfolio/src/blog.component.html b/libs/route-pages/blog-portfolio/src/blog.component.html
index 7cbfb5af0..6f9d371ff 100644
--- a/libs/route-pages/blog-portfolio/src/blog.component.html
+++ b/libs/route-pages/blog-portfolio/src/blog.component.html
@@ -54,12 +54,16 @@ <h3 class="text-placeholder_col text-24 font-bold mb-6">Language</h3>
         <div class="w-full flex flex-wrap justify-between">
             <ng-container *ngIf="!showAll && checkLength()">
                 <ng-container *ngFor="let art of sortArticles | slice:0:8">
-                    <blog-portfolio-item class="w-full lg:w-45% cursor-pointer" [article]="art" (click)="route(art.title)"></blog-portfolio-item>
+                    <a href="javascript:void(0)" [routerLink]="getRouteLink(art.title)" class="w-full lg:w-45% cursor-pointer">
+                        <blog-portfolio-item [article]="art"></blog-portfolio-item>
+                    </a>
                 </ng-container>
             </ng-container>
             <ng-container *ngIf="showAll || !checkLength()">
                 <ng-container *ngFor="let art of sortArticles">
-                    <blog-portfolio-item class="w-full lg:w-45% cursor-pointer" [article]="art" (click)="route(art.title)"></blog-portfolio-item>
+                    <a href="javascript:void(0)" [routerLink]="getRouteLink(art.title)" class="w-full lg:w-45% cursor-pointer">
+                        <blog-portfolio-item [article]="art"></blog-portfolio-item>
+                    </a>
                 </ng-container>
             </ng-container>
         </div>
diff --git a/libs/route-pages/blog-portfolio/src/blog.component.ts b/libs/route-pages/blog-portfolio/src/blog.component.ts
index 226cac0b1..d198f2248 100644
--- a/libs/route-pages/blog-portfolio/src/blog.component.ts
+++ b/libs/route-pages/blog-portfolio/src/blog.component.ts
@@ -1,9 +1,8 @@
 import {ChangeDetectorRef, Component, Input, OnDestroy} from '@angular/core';
-import { GetArticlesService } from "@valor-software/common-docs";
+import {GetArticlesService, titleRefactoring} from "@valor-software/common-docs";
 import { Subscription } from "rxjs";
 import { IArticle } from "@valor-software/common-docs";
 import { Router } from "@angular/router";
-import {ArticlesRouteService} from "@valor-software/common-docs";
 
 export const Domains = {
     business_analysis: 'Business Analysis',
@@ -44,7 +43,6 @@ export class BlogComponent implements OnDestroy {
         private router: Router,
         private getArticles: GetArticlesService,
         private cdr: ChangeDetectorRef,
-        private routeArticle: ArticlesRouteService
     ) {
         this.getSortKeys();
     }
@@ -100,10 +98,8 @@ export class BlogComponent implements OnDestroy {
         this.activeIndex = [lang];
     }
 
-    route(title: string) {
-        const link = this.getArticles.getRefactoredTitle(title);
-        this.router.navigate(['articles', link]);
-        return;
+    getRouteLink(link: string): any {
+        return titleRefactoring(link);
     }
 
     checkLength(): boolean {
diff --git a/libs/route-pages/blog-portfolio/src/directives/sort.directive.ts b/libs/route-pages/blog-portfolio/src/directives/sort.directive.ts
index 434790be0..cf61dfa66 100644
--- a/libs/route-pages/blog-portfolio/src/directives/sort.directive.ts
+++ b/libs/route-pages/blog-portfolio/src/directives/sort.directive.ts
@@ -3,8 +3,7 @@ import {
     Output,
     EventEmitter,  Input
 } from "@angular/core";
-import { IPortfolio } from "@valor-software/portfolio";
-import { IArticle } from "@valor-software/common-docs";
+import { IArticle, IPortfolio } from "@valor-software/common-docs";
 
 
 @Directive({
diff --git a/libs/route-pages/blog-portfolio/src/general-page.component.html b/libs/route-pages/blog-portfolio/src/general-page.component.html
index 7ff3c4f9e..f1a1704cf 100644
--- a/libs/route-pages/blog-portfolio/src/general-page.component.html
+++ b/libs/route-pages/blog-portfolio/src/general-page.component.html
@@ -12,23 +12,38 @@ <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 m
                         <ng-template #blogPageDescription>{{activeArticle?.seoDescription | customSlice: 300}}</ng-template>
                     </p>
                     <ng-container *ngIf="!isBlogPage(); else blogPageButton">
-                        <button class="btn-pink w-full md:w-auto flex justify-center" (click)="route(activeProject?.name)">
-                            Visit this project<img src="assets/img/icons/arrow.svg" class="ml-2" alt="">
+                        <button class="w-full md:w-auto flex justify-center">
+                            <ng-container *ngIf="activeProject && activeProject.name">
+                                <a href="javascript:void(0)" [routerLink]="[getRouteLink(activeProject.name)]" class="btn-pink flex justify-center">
+                                    Visit this project<img src="assets/img/icons/arrow.svg" class="ml-2" alt="">
+                                </a>
+                            </ng-container>
                         </button>
                     </ng-container>
                     <ng-template #blogPageButton>
-                        <button class="btn-pink w-full md:w-auto flex justify-center" (click)="route(activeArticle?.title)">
-                            Check this article<img src="assets/img/icons/arrow.svg" class="ml-2" alt="">
+                        <button class="w-full md:w-auto flex justify-center">
+                            <ng-container *ngIf="activeArticle && activeArticle.title">
+                                <a href="javascript:void(0)" [routerLink]="[getRouteLink(activeArticle.title)]" class="btn-pink flex justify-center">
+                                    Check this article<img src="assets/img/icons/arrow.svg" class="ml-2" alt="">
+                                </a>
+                            </ng-container>
                         </button>
                     </ng-template>
-
                 </div>
                 <div class="hidden lg:block ml-6">
                     <ng-container *ngIf="!isBlogPage(); else blogPageImage">
-                        <img [src]="activeProject?.previewImg" [alt]="activeProject?.name + 'image'">
+                        <ng-container *ngIf="activeProject && activeProject.name">
+                            <a href="javascript:void(0)" [routerLink]="[getRouteLink(activeProject.name)]" class="block zoom-img-scale">
+                                <img [src]="activeProject?.previewImg" [alt]="activeProject?.name + 'image'">
+                            </a>
+                        </ng-container>
                     </ng-container>
                     <ng-template #blogPageImage>
-                        <img [src]="activeArticle?.bgImg" [alt]="activeArticle?.title + 'image'">
+                        <ng-container *ngIf="activeArticle && activeArticle.title">
+                            <a href="javascript:void(0)" [routerLink]="[getRouteLink(activeArticle.title)]" class="block zoom-img-scale">
+                                <img [src]="activeArticle?.bgImg" [alt]="activeArticle?.title + 'image'">
+                            </a>
+                        </ng-container>
                     </ng-template>
                 </div>
             </div>
@@ -38,21 +53,26 @@ <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 m
             <div class="hidden lg:flex w-full justify-between" style="max-height: 100%;">
                 <ng-container *ngIf="!isBlogPage(); else blogPageArticlesList">
                     <ng-container *ngFor="let project of firstProjects">
-                        <blog-portfolio-item class="w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-project-item"
-                            *ngIf="project?.name !== activeProject?.name"
-                            [project]="project"
-                            (click)="route(project?.name)"
-                        ></blog-portfolio-item>
+                        <ng-container *ngIf="project && project.name">
+                            <a href="javascript:void(0)" [routerLink]="[getRouteLink(project.name)]" class="block w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-project-item">
+                                <blog-portfolio-item
+                                     *ngIf="project?.name !== activeProject?.name"
+                                     [project]="project"
+                                ></blog-portfolio-item>
+                            </a>
+                        </ng-container>
                     </ng-container>
                 </ng-container>
                 <ng-template #blogPageArticlesList>
                     <ng-container *ngFor="let article of firstArticles">
-                        <blog-portfolio-item
-                                class="lg:max-w-380 lg:w-31% cursor-pointer smaller-article-item"
-                                *ngIf="article?.title !== activeArticle?.title"
-                                [article]="article"
-                                (click)="route(article?.title)"
-                        ></blog-portfolio-item>
+                        <ng-container *ngIf="article && article.title">
+                            <a href="javascript:void(0)" [routerLink]="[getRouteLink(article.title)]" class="lg:max-w-380 lg:w-31% cursor-pointer smaller-article-item">
+                                <blog-portfolio-item
+                                    *ngIf="article?.title !== activeArticle?.title"
+                                    [article]="article"
+                                ></blog-portfolio-item>
+                            </a>
+                        </ng-container>
                     </ng-container>
                 </ng-template>
             </div>
@@ -64,22 +84,28 @@ <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 m
                 >
                     <ng-container *ngIf="isBlogPage()">
                         <ng-template swiperSlide *ngFor="let article of firstArticles">
-                            <blog-portfolio-item
-                                    class="w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-article-item"
-                                    *ngIf="article?.title !== activeArticle?.title"
-                                    [article]="article"
-                                    (click)="route(article?.title)"
-                            ></blog-portfolio-item>
+                            <ng-container *ngIf="article && article.title">
+                                <a href="javascript:void(0)" [routerLink]="[getRouteLink(article.title)]" class="w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-article-item">
+                                    <blog-portfolio-item
+                                            class="w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-article-item"
+                                            *ngIf="article?.title !== activeArticle?.title"
+                                            [article]="article"
+                                    ></blog-portfolio-item>
+                                </a>
+                            </ng-container>
                         </ng-template>
                     </ng-container>
                     <ng-container *ngIf="!isBlogPage()">
                         <ng-template swiperSlide *ngFor="let project of firstProjects">
-                            <blog-portfolio-item
-                                    class="w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-project-item"
-                                                 *ngIf="project?.name !== activeProject?.name"
-                                                 [project]="project"
-                                                 (click)="route(project?.name)"
-                            ></blog-portfolio-item>
+                            <ng-container *ngIf="project && project.name">
+                                <a href="javascript:void(0)" [routerLink]="[getRouteLink(project.name)]" class="w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-article-item">
+                                    <blog-portfolio-item
+                                            class="w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-project-item"
+                                            *ngIf="project?.name !== activeProject?.name"
+                                            [project]="project"
+                                    ></blog-portfolio-item>
+                                </a>
+                            </ng-container>
                         </ng-template>
                     </ng-container>
                 </swiper>
diff --git a/libs/route-pages/blog-portfolio/src/genral-page.component.ts b/libs/route-pages/blog-portfolio/src/genral-page.component.ts
index 754f469f9..e8a399602 100644
--- a/libs/route-pages/blog-portfolio/src/genral-page.component.ts
+++ b/libs/route-pages/blog-portfolio/src/genral-page.component.ts
@@ -2,8 +2,13 @@ import { Component, OnDestroy, Type } from '@angular/core';
 import { NavigationEnd, Router } from "@angular/router";
 import { filter } from "rxjs/operators";
 import { forkJoin, Subscription } from "rxjs";
-import { GetArticlesService, IArticle } from "@valor-software/common-docs";
-import { GetPortfolioService, IPortfolio } from "@valor-software/portfolio";
+import {
+    GetArticlesService,
+    IArticle,
+    GetPortfolioService,
+    IPortfolio,
+    titleRefactoring
+} from "@valor-software/common-docs";
 import SwiperCore, { Pagination, SwiperOptions  } from "swiper";
 
 SwiperCore.use([Pagination]);
@@ -80,18 +85,8 @@ export class GeneralPageComponent implements OnDestroy{
         return value.slice(0,4);
     }
 
-    route(link?: string) {
-        if (!link) {
-            return;
-        }
-
-        if (this.isBlogPage()) {
-            const title = this.getArticlesServ.getRefactoredTitle(link);
-            this.router.navigate(['articles', title]);
-            return;
-        }
-
-        this.router.navigate(['projects', this.getPortfolio.getRefactoredTitle(link)]);
+    getRouteLink(link: string): any {
+        return titleRefactoring(link);
     }
 
     filterFirstItems() {
diff --git a/libs/route-pages/blog-portfolio/src/project.component.html b/libs/route-pages/blog-portfolio/src/project.component.html
index 405fbe005..bed532ff1 100644
--- a/libs/route-pages/blog-portfolio/src/project.component.html
+++ b/libs/route-pages/blog-portfolio/src/project.component.html
@@ -12,8 +12,8 @@
                         <h1 class="text-light_title_col lg:text-center xl:text-left md:text-64 text-large md:leading-66 leading-44 mb-12 font-bold">{{project.name}}</h1>
                         <p class="leading-normal text-grey_font_col lg:mb-8 mb-14">{{project.description}}</p>
                         <div class="flex flex-col xl:flex-row md:items-center xl:items-start mb-5 xl:mb-0" *ngIf="project.link || project.behanceLink">
-                            <button class="btn-pink w-full lg:w-auto flex md:items-center xl:mr-6 mb-5 xl:mb-0 justify-center" *ngIf="project.link">
-                                <a class="flex justify-center items-center" [href]="project.link" target="_blank">Visit the site<img src="assets/img/icons/arrow.svg" class="ml-2 -rotate-45 mb-2" alt=""></a>
+                            <button class="w-full lg:w-auto flex md:items-center xl:mr-6 mb-5 xl:mb-0 justify-center" *ngIf="project.link">
+                                <a class="btn-pink flex justify-center items-center" [href]="project.link" target="_blank">Visit the site<img src="assets/img/icons/arrow.svg" class="ml-2 -rotate-45 mb-2" alt=""></a>
                             </button>
                             <button class="btn-dark-pink w-full lg:w-auto flex md:items-center xl:mr-6 mb-5 xl:mb-0 justify-center" *ngIf="project.behanceLink">
                                 <a class="flex justify-center items-center" [href]="project.behanceLink" target="_blank">
@@ -130,19 +130,24 @@ <h1 class="main-title">Aspects</h1>
         <h1 class="main-title">Next Project</h1>
         <div class="container">
             <div class="w-full max-w-80% mx-auto">
-                <div class="mb-10 zoom-img-scale cursor-pointer" (click)="route(nextProject.name)">
-                    <img [src]="nextProject.previewImg" [alt]="nextProject.name+' image'" class="w-full h-full object-cover">
-                </div>
+                <a class="block mb-10 zoom-img-scale cursor-pointer" href="javascript:void(0)" [routerLink]="['/projects', getRouteLink(nextProject.name)]">
+                    <div>
+                        <img [src]="nextProject.previewImg" [alt]="nextProject.name+' image'" class="w-full h-full object-cover">
+                    </div>
+                </a>
                 <div class="flex flex-col">
-                    <div class="mb-12 cursor-pointer" (click)="route(nextProject.name)">
-                        <p *ngIf="nextProject.sortServices.includes('web')" class="text-header_font_col text-sm md:text-20">Website</p>
-                        <div class="flex">
-                            <p class="text-light_title_col font-bold text-24 lg:text-56 mr-4">{{nextProject.name}}</p>
-                            <img src="assets/img/icons/arrow.svg" class="ml-2 w-35" alt="">
+                    <a class="block mb-12 cursor-pointer" href="javascript:void(0)" [routerLink]="['/projects', getRouteLink(nextProject.name)]">
+                        <div>
+                            <p *ngIf="nextProject.sortServices.includes('web')" class="text-header_font_col text-sm md:text-20">Website</p>
+                            <div class="flex">
+                                <p class="text-light_title_col font-bold text-24 lg:text-56 mr-4">{{nextProject.name}}</p>
+                                <img src="assets/img/icons/arrow.svg" class="ml-2 w-35" alt="">
+                            </div>
                         </div>
-                    </div>
-                    <button class="btn-pink w-full md:w-auto flex items-center self-end">
-                        <a class="flex justify-center items-center mx-auto" [routerLink]="'/projects'">Visit all projects<img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+                    </a>
+
+                    <button class="w-full md:w-auto flex items-center self-end">
+                        <a class="btn-pink flex justify-center items-center mx-auto" [routerLink]="'/projects'">Visit all projects<img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                     </button>
                 </div>
             </div>
diff --git a/libs/route-pages/blog-portfolio/src/project.component.ts b/libs/route-pages/blog-portfolio/src/project.component.ts
index 150b92d71..12c9775d2 100644
--- a/libs/route-pages/blog-portfolio/src/project.component.ts
+++ b/libs/route-pages/blog-portfolio/src/project.component.ts
@@ -1,9 +1,9 @@
-import {ChangeDetectorRef, Component, OnDestroy} from '@angular/core';
-import { IPortfolio, GetPortfolioService } from "@valor-software/portfolio";
+import { ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
 import { Subscription } from "rxjs";
 import { NavigationEnd, Router } from "@angular/router";
 import { filter } from "rxjs/operators";
 import { DomSanitizer } from '@angular/platform-browser';
+import { IPortfolio, GetPortfolioService } from "@valor-software/common-docs";
 import {checkHTMLExtension, titleRefactoring} from "@valor-software/common-docs";
 
 @Component({
@@ -86,8 +86,8 @@ export class ProjectComponent implements OnDestroy{
         });
     }
 
-    route(link: string) {
-        this.router.navigate(['projects', titleRefactoring(link)]);
+    getRouteLink(link: string): string {
+        return titleRefactoring(link);
     }
 
     getRespSrc(link: string): string {
diff --git a/libs/route-pages/blog-portfolio/src/projects-block.component.html b/libs/route-pages/blog-portfolio/src/projects-block.component.html
index 82945e8bf..b267e2342 100644
--- a/libs/route-pages/blog-portfolio/src/projects-block.component.html
+++ b/libs/route-pages/blog-portfolio/src/projects-block.component.html
@@ -24,12 +24,16 @@
         <div class="w-full flex flex-wrap justify-between">
             <ng-container *ngIf="!showAll && checkLength()">
                 <ng-container *ngFor="let art of sortProjects | slice:0:8">
-                    <blog-portfolio-item class="w-full lg:w-45% cursor-pointer" [project]="art" (click)="route(art.name)"></blog-portfolio-item>
+                    <a href="javascript:void(0)" [routerLink]="getRouteLink(art.name)" class="w-full lg:w-45% cursor-pointer">
+                        <blog-portfolio-item [project]="art"></blog-portfolio-item>
+                    </a>
                 </ng-container>
             </ng-container>
             <ng-container *ngIf="showAll || !checkLength()">
                 <ng-container *ngFor="let art of sortProjects">
-                    <blog-portfolio-item class="w-full lg:w-45% cursor-pointer" [project]="art" (click)="route(art.name)"></blog-portfolio-item>
+                    <a href="javascript:void(0)" [routerLink]="getRouteLink(art.name)" class="w-full lg:w-45% cursor-pointer">
+                        <blog-portfolio-item [project]="art"></blog-portfolio-item>
+                    </a>
                 </ng-container>
             </ng-container>
         </div>
diff --git a/libs/route-pages/blog-portfolio/src/projects-block.component.ts b/libs/route-pages/blog-portfolio/src/projects-block.component.ts
index e907f25d8..d0343653d 100644
--- a/libs/route-pages/blog-portfolio/src/projects-block.component.ts
+++ b/libs/route-pages/blog-portfolio/src/projects-block.component.ts
@@ -1,7 +1,6 @@
 import {ChangeDetectorRef, Component, Input } from '@angular/core';
-import { IPortfolio } from "@valor-software/portfolio";
 import { Router } from "@angular/router";
-import { titleRefactoring } from "@valor-software/common-docs";
+import {IPortfolio, titleRefactoring} from '@valor-software/common-docs';
 
 const SortList = {
     all_projects: 'All Projects',
@@ -74,8 +73,8 @@ export class ProjectsBlockComponent {
         return !!(this.sortProjects?.length && this.sortProjects?.length > 8);
     }
 
-    route(title: string) {
-        this.router.navigate(['projects', titleRefactoring(title)]);
+    getRouteLink(link: string): any {
+        return titleRefactoring(link);
     }
 
     updateProjects(projects: IPortfolio[]) {
diff --git a/libs/route-pages/careers/src/careers-page.component.html b/libs/route-pages/careers/src/careers-page.component.html
index e4d6b03ab..fc5f78d10 100644
--- a/libs/route-pages/careers/src/careers-page.component.html
+++ b/libs/route-pages/careers/src/careers-page.component.html
@@ -3,8 +3,8 @@
         <div class="max-w-600">
             <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 mb-12 font-bold">Who we are</h1>
             <p class="leading-normal text-grey_font_col lg:mb-8 mb-14">Professional and friendly with our clients and co-workers, we treat each other as we would want to be treated. Our working environment emphasizes equality, transparency... and a pet-friendly atmosphere! That's what Valor is all about :)</p>
-            <button class="btn-pink w-full md:w-auto flex">
-                <a href="https://valorsoftware.recruitee.com/" target="_blank" class="w-full flex justify-center items-center">Check the openings<img src="assets/img/icons/arrow.svg" class="ml-2 -rotate-45 mb-2" alt=""></a>
+            <button class="w-full md:w-auto flex">
+                <a href="https://valorsoftware.recruitee.com/" target="_blank" class="btn-pink w-full flex justify-center items-center">Check the openings<img src="assets/img/icons/arrow.svg" class="ml-2 -rotate-45 mb-2" alt=""></a>
             </button>
         </div>
         <div class="hidden lg:block">
@@ -52,8 +52,8 @@ <h2 class="text-feedback_font_col text-left text-32 lg:text-56 font-bold leading
             <div class="block lg:hidden">
                 <img src="assets/img/bg-img/careers/rock_it.svg" alt="">
             </div>
-            <button class="btn-pink w-full md:w-auto flex mt-4 lg:mt-0">
-                <a href="https://valorsoftware.recruitee.com/" target="_blank" class="w-full flex justify-center items-center">Join us<img src="assets/img/icons/arrow.svg" class="ml-2 -rotate-45 mb-2" alt=""></a>
+            <button class="w-full md:w-auto flex mt-4 lg:mt-0">
+                <a href="https://valorsoftware.recruitee.com/" target="_blank" class="btn-pink w-full flex justify-center items-center">Join us<img src="assets/img/icons/arrow.svg" class="ml-2 -rotate-45 mb-2" alt=""></a>
             </button>
         </div>
     </div>
diff --git a/libs/route-pages/for-clients/src/enterprises.component.html b/libs/route-pages/for-clients/src/enterprises.component.html
index 9d035e415..50de95063 100644
--- a/libs/route-pages/for-clients/src/enterprises.component.html
+++ b/libs/route-pages/for-clients/src/enterprises.component.html
@@ -7,8 +7,8 @@
             <div class="lg:max-w-600">
                 <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 mb-12 font-bold">Accelerating your enterprise technologies</h1>
                 <p class="leading-normal text-grey_font_col lg:mb-8 mb-14">We blend a business-oriented approach with deep technical expertise to help you solve the toughest challenges within your enterprise in a snap of fingers. It doesn’t matter if it’s cloud migration, optimization, implementation of new technologies, or underpinning everything with security — our industry competence will help you on this journey.</p>
-                <button class="btn-pink w-full md:w-auto flex">
-                    <a [routerLink]="'/projects'" class=" w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+                <button class="w-full md:w-auto flex">
+                    <a [routerLink]="'/projects'" class="btn-pink w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                 </button>
             </div>
             <div class="hidden lg:block">
diff --git a/libs/route-pages/for-clients/src/nonProfit.component.html b/libs/route-pages/for-clients/src/nonProfit.component.html
index e8a76f840..64a4ca660 100644
--- a/libs/route-pages/for-clients/src/nonProfit.component.html
+++ b/libs/route-pages/for-clients/src/nonProfit.component.html
@@ -7,8 +7,8 @@
             <div class="lg:max-w-600">
                 <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 mb-12 font-bold">Building reliable software time and budget-wise</h1>
                 <p class="leading-normal text-grey_font_col lg:mb-8 mb-14">A strong desire to change the world for the better and improve people's quality of life is one of the core drivers for Valor Software. That is why we have by now broad expertise in working with non-profit organizations (NPOs), including non-governmental organizations. We know the specifics of approaching projects of this kind, and we know how to deliver the result, setting the priorities right.</p>
-                <button class="btn-pink w-full md:w-auto flex">
-                    <a [routerLink]="'/projects'" class=" w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+                <button class="w-full md:w-auto flex">
+                    <a [routerLink]="'/projects'" class="btn-pink w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                 </button>
             </div>
             <div class="hidden lg:block">
diff --git a/libs/route-pages/for-clients/src/smallMediumBusinesses.component.html b/libs/route-pages/for-clients/src/smallMediumBusinesses.component.html
index 90e3e2abe..9f8aa0758 100644
--- a/libs/route-pages/for-clients/src/smallMediumBusinesses.component.html
+++ b/libs/route-pages/for-clients/src/smallMediumBusinesses.component.html
@@ -7,8 +7,8 @@
             <div class="max-w-600">
                 <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 mb-12 font-bold">Helping your business to grow</h1>
                 <p class="leading-normal text-grey_font_col lg:mb-8 mb-14">Seeking a reliable partner with transparent processes who is available for long-term business relationships? — Search no more! Valor Software is here to become your trusted software development associate and collaborate on your brilliant idea to boost your business above and beyond!</p>
-                <button class="btn-pink w-full md:w-auto flex">
-                    <a [routerLink]="'/projects'" class="w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+                <button class="w-full md:w-auto flex">
+                    <a [routerLink]="'/projects'" class="btn-pink w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                 </button>
             </div>
             <div class="hidden lg:block">
diff --git a/libs/route-pages/for-clients/src/startups.component.html b/libs/route-pages/for-clients/src/startups.component.html
index 15fc32c22..8ef8e95c7 100644
--- a/libs/route-pages/for-clients/src/startups.component.html
+++ b/libs/route-pages/for-clients/src/startups.component.html
@@ -7,8 +7,8 @@
             <div class="lg:max-w-600">
                 <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 mb-12 font-bold">Turning your idea into reality</h1>
                 <p class="leading-normal text-grey_font_col lg:mb-8 mb-14">Being startup entrepreneurs ourselves, we are here to support you at all stages: from pre-revenue inception to launch. Valor Software helps startups solidify their vision, develop minimum viable product (MVP) that will show the essence of your solution and its value, and launch to market with a Cloud-First scale.</p>
-                <button class="btn-pink w-full md:w-auto flex">
-                    <a [routerLink]="'/projects'" class=" w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+                <button class="w-full md:w-auto flex">
+                    <a [routerLink]="'/projects'" class="btn-pink w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                 </button>
             </div>
             <div class="hidden lg:block">
diff --git a/libs/route-pages/home-page/src/main-page.component.html b/libs/route-pages/home-page/src/main-page.component.html
index 3f89d33ef..05ba6d53b 100644
--- a/libs/route-pages/home-page/src/main-page.component.html
+++ b/libs/route-pages/home-page/src/main-page.component.html
@@ -50,8 +50,8 @@ <h3 [innerHTML]="slide.title" class=" swiper-no-swiping md:text-large font-bold
                     <ul class="list-disc text-grey_font_col pl-5 swiper-no-swiping">
                         <li *ngFor="let item of slide.list" class="mb-4 swiper-no-swiping">{{item}}</li>
                     </ul>
-                    <button class="btn-pink flex justify-center md:justify-between mt-10 w-full md:w-auto">
-                        <a [routerLink]="['articles']" class="flex justify-center w-full">Visit blog <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+                    <button class="flex justify-center md:justify-between mt-10 w-full md:w-auto">
+                        <a [routerLink]="['articles']" class="btn-pink flex justify-center w-full">Visit blog <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                     </button>
                 </div>
                 <div class="max-w-140 md:max-w-full mb-6 md:mb-0">
@@ -80,19 +80,20 @@ <h1 class="main-title">Technology</h1>
         </div>
         <div class="lg:max-w-735 w-full flex flex-col justify-between max-w-455 mx-auto">
             <div class="flex flex-wrap justify-between">
-                <div *ngFor="let project of sortProjects"  class="lg:w-48% w-full relative  mb-8 cursor-pointer lg:h-300 border-grey_bg border-2 hover:border-pink" (click)="projectRoute(project.name)">
-                    <img [src]="project.previewImg" [alt]="project.name" class="w-full h-full object-cover">
-                    <div class="absolute inset-0 flex flex-col justify-end p-6 w-full h-full" [style.background]="'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%)'">
-                        <p class="font-bold text-light_title_col text-xl mb-2 text-center lg:text-left">{{project.name}}</p>
-                        <div class="hidden lg:flex flex-wrap">
-                            <span *ngFor="let item of project.aspects.technology_stack | slice:0:3" class="text-light_title_col text-sm px-3.5 py-1 border border-light_title_col rounded-20 mr-2 hover:text-grey_bg hover:bg-light_title_col transition-colors">{{item}}</span>
+                <div *ngFor="let project of sortProjects"  class="lg:w-48% w-full relative  mb-8 cursor-pointer lg:h-300 border-grey_bg border-2 hover:border-pink">
+                    <a href="javaScript:void(0)" [routerLink]="['projects', projectRoute(project.name)]">
+                        <img [src]="project.previewImg" [alt]="project.name" class="w-full h-full object-cover">
+                        <div class="absolute inset-0 flex flex-col justify-end p-6 w-full h-full" [style.background]="'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%)'">
+                            <p class="font-bold text-light_title_col text-xl mb-2 text-center lg:text-left">{{project.name}}</p>
+                            <div class="hidden lg:flex flex-wrap">
+                                <span *ngFor="let item of project.aspects.technology_stack | slice:0:3" class="text-light_title_col text-sm px-3.5 py-1 border border-light_title_col rounded-20 mr-2 hover:text-grey_bg hover:bg-light_title_col transition-colors">{{item}}</span>
+                            </div>
                         </div>
-                    </div>
+                    </a>
                 </div>
             </div>
-
-            <button class="btn-pink mx-auto flex">
-                <a [routerLink]="'/projects'" class="flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+            <button class="mx-auto flex">
+                <a [routerLink]="'/projects'" class="btn-pink flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
             </button>
         </div>
     </div>
@@ -123,7 +124,7 @@ <h3 class="md:text-large text-32 lg:text-56 text-light_title_col lg:leading-66 l
                                     <li class="leading-4 mb-4" *ngFor="let item of slide.list">{{item}}</li>
                                 </ul>
                             </div>
-                            <button class="btn-pink flex justify-between"><a class="flex justify-between items-center" [href]="slide.link" target="_blank">Visit {{slide.name}}<img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a></button>
+                            <button class="flex justify-between"><a class="btn-pink flex justify-between items-center" [href]="slide.link" target="_blank">Visit {{slide.name}}<img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a></button>
                         </div>
                         <div class="max-w-65% flex flex-col justify-center items-center text-light_title_col">
                             <img [src]="slide.img" [alt]="slide.name + 'icon'">
@@ -163,7 +164,7 @@ <h3 class="md:text-large text-32 lg:text-56 text-light_title_col lg:leading-66 l
                                 <p class="text-large cursor-pointer" *ngIf="slide.npmLink"><a [href]="slide.npmLink" target="_blank">{{slide.downloads | number}}</a></p>
                             </ng-container>
                         </div>
-                        <button class="btn-pink flex justify-center w-full mt-24"><a class="flex justify-between items-center" [href]="slide.link" target="_blank">Visit {{slide.name}}<img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a></button>
+                        <button class="flex justify-center w-full mt-24"><a class="btn-pink flex justify-between items-center" [href]="slide.link" target="_blank">Visit {{slide.name}}<img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a></button>
                     </div>
                 </ng-template>
             </swiper>
diff --git a/libs/route-pages/home-page/src/main-page.component.ts b/libs/route-pages/home-page/src/main-page.component.ts
index 1694e21bb..b7175045b 100644
--- a/libs/route-pages/home-page/src/main-page.component.ts
+++ b/libs/route-pages/home-page/src/main-page.component.ts
@@ -2,9 +2,9 @@ import {Component, ViewChild, ChangeDetectorRef, HostListener} from '@angular/co
 import { Router } from '@angular/router';
 import { NpmStatisticService } from "./getNpmStatistic.service";
 import SwiperCore, { Pagination, Mousewheel, SwiperOptions  } from "swiper";
-import {forkJoin, Subscription} from "rxjs";
-import {GetPortfolioService, IPortfolio, ProjectsRouteService} from "@valor-software/portfolio";
-import {titleRefactoring} from "@valor-software/common-docs";
+import { forkJoin, Subscription } from "rxjs";
+import { GetPortfolioService, IPortfolio } from "@valor-software/common-docs";
+import { titleRefactoring } from "@valor-software/common-docs";
 SwiperCore.use([Mousewheel, Pagination]);
 
 const slideModel = [
@@ -280,7 +280,6 @@ export class MainPageComponent {
         private cdr: ChangeDetectorRef,
         protected router: Router,
         private getPortfolio: GetPortfolioService,
-        private projectRouteServ: ProjectsRouteService
     ) {
         this.$portfolio = forkJoin(this.getPortfolio.getFullListOfPortfolio()).subscribe((res: IPortfolio[] | undefined) => {
             this.projects = res;
@@ -332,8 +331,8 @@ export class MainPageComponent {
         }
     }
 
-    projectRoute(name: string) {
-        this.router.navigate(['projects', titleRefactoring(name)]);
+    projectRoute(name: string): string {
+        return titleRefactoring(name);
     }
 
     checkIndex(index: number): boolean {
diff --git a/libs/route-pages/home-page/src/main-page.module.ts b/libs/route-pages/home-page/src/main-page.module.ts
index 12bcdabe1..eb10bb7e2 100644
--- a/libs/route-pages/home-page/src/main-page.module.ts
+++ b/libs/route-pages/home-page/src/main-page.module.ts
@@ -3,12 +3,10 @@ import { CommonModule } from '@angular/common';
 import { RouterModule, Routes } from "@angular/router";
 import { routes } from "./routes";
 import { SwiperModule } from "swiper/angular";
-import { CommonDocsModule } from '@valor-software/common-docs';
+import { CommonDocsModule, GetPortfolioService } from '@valor-software/common-docs';
 import { NpmStatisticService } from './getNpmStatistic.service';
 import { MainPageComponent } from "./main-page.component";
 import { FeedbackModule } from "@valor-software/feedback";
-import {GetPortfolioService, ProjectsRouteService} from "@valor-software/portfolio";
-
 
 export { MainPageComponent } from "./main-page.component";
 
@@ -23,7 +21,7 @@ export { MainPageComponent } from "./main-page.component";
         CommonDocsModule,
         FeedbackModule
     ],
-    providers: [NpmStatisticService, GetPortfolioService, ProjectsRouteService]
+    providers: [NpmStatisticService, GetPortfolioService]
 })
 export class MainPageModule {
     static routes: Routes = routes;
diff --git a/libs/route-pages/services-page/src/services-page.component.html b/libs/route-pages/services-page/src/services-page.component.html
index de4952737..7bb2d9f95 100644
--- a/libs/route-pages/services-page/src/services-page.component.html
+++ b/libs/route-pages/services-page/src/services-page.component.html
@@ -3,8 +3,8 @@
         <div class="max-w-600">
             <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 mb-12 font-bold">Full-cycle software development for your business </h1>
             <p class="leading-normal text-grey_font_col lg:mb-8 mb-14">We can help you cover all aspects of software development, including UX/UI design, custom web and mobile development, QA services, business analysis, and content writing. With the help of our Technical Writers, you’ll have all the documentation ready for smooth product maintenance in the future.</p>
-            <button class="btn-pink w-full md:w-auto flex">
-                <a [routerLink]="'/projects'" class="w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+            <button class="w-full md:w-auto flex">
+                <a [routerLink]="'/projects'" class="btn-pink w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
             </button>
         </div>
         <div class="hidden lg:block">
@@ -18,7 +18,7 @@ <h1 class="main-title">Services</h1>
         <services-block [preview]="false"></services-block>
     </div>
 </section>
-<section class="landing-section !pb-0">
+<section class="landing-section">
     <div class="container">
         <h2 class="text-feedback_font_col text-left lg:text-center leading-56 text-32 lg:text-56 font-bold mb-4">Wondering what special offerings<br> can we provide?</h2>
         <p class="text-dar_grey_font_col text-left text-24 lg:text-large lg:text-center mb-14">Check out our exclusive packages!</p>
diff --git a/tsconfig.base.json b/tsconfig.base.json
index ec93ca9d1..56b526d1b 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -42,9 +42,6 @@
       "@valor-software/home-page": [
         "libs/route-pages/home-page/src/index.ts"
       ],
-      "@valor-software/portfolio": [
-        "libs/portfolio/src/index.ts"
-      ],
       "@valor-software/services-page": [
         "libs/route-pages/services-page/src/index.ts"
       ]