diff --git a/__tests__/jest/getSkillBadgeColor.test.ts b/__tests__/jest/getSkillBadgeColor.test.ts
index cd1e2eb4..93091d2a 100644
--- a/__tests__/jest/getSkillBadgeColor.test.ts
+++ b/__tests__/jest/getSkillBadgeColor.test.ts
@@ -1,26 +1,26 @@
 import { getSkillBadgeColor } from '@/utils/getSkillBadgeColor'
-import { CategoryDescriptionType } from '@/utils/types'
+import { SkillCategoryType } from '@/utils/types'
 
 describe('getSkillBadgeColor', () => {
   it('returns "yellow" color for "Frontend"', () => {
-    expect(getSkillBadgeColor('Frontend' as CategoryDescriptionType)).toEqual('yellow')
+    expect(getSkillBadgeColor('Frontend' as SkillCategoryType)).toEqual('yellow')
   })
 
   it('returns "indigo" color for "Design"', () => {
-    expect(getSkillBadgeColor('Design' as CategoryDescriptionType)).toEqual('indigo')
+    expect(getSkillBadgeColor('Design' as SkillCategoryType)).toEqual('indigo')
   })
 
   it('return "lime" color for "Other"', () => {
-    expect(getSkillBadgeColor('Other' as CategoryDescriptionType)).toEqual('lime')
+    expect(getSkillBadgeColor('Other' as SkillCategoryType)).toEqual('lime')
   })
 
   it('returns "neutral" for unknown category', () => {
-    const category: CategoryDescriptionType = 'unknown' as CategoryDescriptionType
+    const category: SkillCategoryType = 'unknown' as SkillCategoryType
     expect(getSkillBadgeColor(category)).toEqual('neutral')
   })
 
   it('returns "neutral" for empty category', () => {
-    const category: CategoryDescriptionType = '' as CategoryDescriptionType
+    const category: SkillCategoryType = '' as SkillCategoryType
     expect(getSkillBadgeColor(category)).toEqual('neutral')
   })
 })
diff --git a/app/error.tsx b/app/error.tsx
index 558e81ee..a470ebe5 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -2,7 +2,7 @@
 
 import { ErrorPageLayout } from '@/components/layout/ErrorPageLayout'
 import { ID } from '@/utils/constants'
-import { ErrorProps } from '@/utils/types'
+import { ErrorProps } from '@/utils/sharedComponentProps'
 
 export default function Error({ error, reset }: ErrorProps) {
   return (
diff --git a/app/global-error.tsx b/app/global-error.tsx
index cfc1658d..474bc13a 100644
--- a/app/global-error.tsx
+++ b/app/global-error.tsx
@@ -2,7 +2,7 @@
 
 import { ErrorPageLayout } from '@/components/layout/ErrorPageLayout'
 import { ID } from '@/utils/constants'
-import { ErrorProps } from '@/utils/types'
+import { ErrorProps } from '@/utils/sharedComponentProps'
 
 export default function GlobalError({ error, reset }: ErrorProps) {
   return (
diff --git a/components/NextPageNavigation.tsx b/components/NextPageNavigation.tsx
index 0388f38a..f0963f5a 100644
--- a/components/NextPageNavigation.tsx
+++ b/components/NextPageNavigation.tsx
@@ -1,6 +1,6 @@
 import { IconArrow } from '@/components/icons'
 
-type Props = {
+type NextPageNavigationProps = {
   pageLinkPrevious?: string
   pageNamePrevious?: string
   pageLinkNext?: string
@@ -16,7 +16,7 @@ const NextPageNavigation = ({
   pageNameNext,
   dataTestIDPrevious,
   dataTestIDNext,
-}: Props) => {
+}: NextPageNavigationProps) => {
   const hasPrevious = pageLinkPrevious && pageNamePrevious
   const hasNext = pageLinkNext && pageNameNext
 
diff --git a/components/aboutMe/JobItem.tsx b/components/aboutMe/JobItem.tsx
index 47fb8e31..7fed8042 100644
--- a/components/aboutMe/JobItem.tsx
+++ b/components/aboutMe/JobItem.tsx
@@ -1,13 +1,13 @@
 import Image from 'next/image'
 
-type Props = {
+type JobItemProps = {
   path: string
   title: string
   description: string
   years: number
 }
 
-const JobItem = ({ path, title, description, years }: Props) => {
+const JobItem = ({ path, title, description, years }: JobItemProps) => {
   return (
     <li className="mb-10 ms-6 last:mb-0">
       <span className="absolute -start-5 flex h-10 w-10 items-center justify-center rounded-full bg-violet-100 ring-1 ring-violet-600">
diff --git a/components/header/ScrollProgressBar.tsx b/components/header/ScrollProgressBar.tsx
index 84b2fde0..8c20bf6a 100644
--- a/components/header/ScrollProgressBar.tsx
+++ b/components/header/ScrollProgressBar.tsx
@@ -1,8 +1,8 @@
-type Props = {
+type ScrollProgressBarProps = {
   scroll: number
 }
 
-const ScrollProgressBar = ({ scroll }: Props) => {
+const ScrollProgressBar = ({ scroll }: ScrollProgressBarProps) => {
   return <div className="absolute bottom-0 left-0 h-1 bg-violet-600" style={{ width: `${scroll}%` }}></div>
 }
 
diff --git a/components/homepage/Skills.tsx b/components/homepage/Skills.tsx
index dca1de85..9e1ca292 100644
--- a/components/homepage/Skills.tsx
+++ b/components/homepage/Skills.tsx
@@ -1,13 +1,9 @@
 import DividerWithText from '@/components/shared/DividerWithText'
 import { iconsSkills1, iconsSkills2, iconsSkills3, iconsSkills4 } from '@/data/skills/skills-main'
 import { ID } from '@/utils/constants'
+import { Icon } from '@/utils/interfaces'
 import Image from 'next/image'
 
-interface Icon {
-  name: string
-  path: string
-}
-
 type SkillsIconGroupProps = {
   icons: Icon[]
   className?: string
diff --git a/components/layout/ErrorPageLayout.tsx b/components/layout/ErrorPageLayout.tsx
index 97ec8e21..a3ea9946 100644
--- a/components/layout/ErrorPageLayout.tsx
+++ b/components/layout/ErrorPageLayout.tsx
@@ -1,17 +1,24 @@
 import PageContainer from '@/components/layout/PageContainer'
 import imgError from '@/public/images/illustrations/error.webp'
-import { ErrorProps } from '@/utils/types'
+import { ErrorProps } from '@/utils/sharedComponentProps'
 import Image from 'next/image'
 import { useEffect } from 'react'
 
-type Props = {
+type ErrorPageLayoutProps = {
   pageContainerId: string
   imgAlt: string
   textMain: string
   textSmall: string
 } & ErrorProps
 
-export const ErrorPageLayout = ({ error, reset, pageContainerId, imgAlt, textMain, textSmall }: Props) => {
+export const ErrorPageLayout = ({
+  error,
+  reset,
+  pageContainerId,
+  imgAlt,
+  textMain,
+  textSmall,
+}: ErrorPageLayoutProps) => {
   useEffect(() => {
     // Log the error to an error reporting service
     console.error(error)
diff --git a/components/layout/PageContainer.tsx b/components/layout/PageContainer.tsx
index 4da72dd1..f9d1410b 100644
--- a/components/layout/PageContainer.tsx
+++ b/components/layout/PageContainer.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 
-type props = {
+type PageContainerProps = {
   id?: string
   children: React.ReactNode
 }
 
-function PageContainer({ id, children }: props) {
+function PageContainer({ id, children }: PageContainerProps) {
   return (
     <div id={id} className="mt-20 px-5">
       <div className="container mx-auto max-w-screen-xl px-5">{children}</div>
diff --git a/components/layout/ProjectsLayout.tsx b/components/layout/ProjectsLayout.tsx
index 50398894..57af5420 100644
--- a/components/layout/ProjectsLayout.tsx
+++ b/components/layout/ProjectsLayout.tsx
@@ -1,12 +1,12 @@
 import PageHeading from '@/components/shared/PageHeading'
 
-type Props = {
+type ProjectsLayoutProps = {
   heading: string
   description: string
   children: React.ReactNode
 }
 
-const ProjectsLayout = ({ heading, description, children }: Props) => {
+const ProjectsLayout = ({ heading, description, children }: ProjectsLayoutProps) => {
   return (
     <>
       <div className="flex flex-col">
diff --git a/components/layout/projectPage/HeaderSection.tsx b/components/layout/projectPage/HeaderSection.tsx
index 1efc353a..761de709 100644
--- a/components/layout/projectPage/HeaderSection.tsx
+++ b/components/layout/projectPage/HeaderSection.tsx
@@ -1,7 +1,7 @@
 import { IconArrow } from '@/components/icons'
 import Heading2 from '@/components/shared/Heading2'
 import { getGoBackLinkID } from '@/utils/getGoBackLink'
-import { HeaderSectionProps } from '@/utils/types'
+import { HeaderSectionProps } from '@/utils/sharedComponentProps'
 import Link from 'next/link'
 
 const HeaderSection = ({ title, role, years, company, goBackLink, sectionID }: HeaderSectionProps) => {
diff --git a/components/layout/projectPage/ProjectPageLayout.tsx b/components/layout/projectPage/ProjectPageLayout.tsx
index 6955cd26..cded3bef 100644
--- a/components/layout/projectPage/ProjectPageLayout.tsx
+++ b/components/layout/projectPage/ProjectPageLayout.tsx
@@ -3,13 +3,14 @@ import HeaderSection from '@/components/layout/projectPage/HeaderSection'
 import Section from '@/components/layout/projectPage/Section'
 import ProjectInformation from '@/components/projects/ProjectInformation'
 import BreadCrumbs from '@/components/shared/Breadcrumbs'
-import { BreadCrumbsType, HeaderSectionProps, ProjectInformationProps, SectionItem } from '@/utils/types'
+import { HeaderSectionProps, ProjectInformationProps } from '@/utils/sharedComponentProps'
+import { BreadCrumbsType } from '@/utils/types'
 import Image from 'next/image'
 
-type Props = {
+type ProjectPageLayoutProps = {
   breadCrumbs: BreadCrumbsType
   pageID: string
-  sections: SectionItem[]
+  sections: Section[]
   imageShowcase: string[]
   nextPageNavigation: React.ReactNode
 } & HeaderSectionProps &
@@ -32,7 +33,7 @@ const ProjectPageLayout = ({
   sections,
   imageShowcase,
   nextPageNavigation,
-}: Props) => {
+}: ProjectPageLayoutProps) => {
   return (
     <PageContainer id={pageID}>
       <BreadCrumbs
diff --git a/components/layout/projectPage/ProjectPageLayoutWrapper.tsx b/components/layout/projectPage/ProjectPageLayoutWrapper.tsx
index 7b793962..a7fe1f1b 100644
--- a/components/layout/projectPage/ProjectPageLayoutWrapper.tsx
+++ b/components/layout/projectPage/ProjectPageLayoutWrapper.tsx
@@ -1,13 +1,14 @@
 import ProjectPageLayout from '@/components/layout/projectPage/ProjectPageLayout'
-import { BreadCrumbsType, GoBackLinkType, Project, SectionItem } from '@/utils/types'
+import { Project, Section } from '@/utils/interfaces'
+import { BreadCrumbsType, GoBackLinkType } from '@/utils/types'
 
-type Props = {
+type ProjectPageLayoutWrapperProps = {
   breadCrumbs: BreadCrumbsType
   pageID: string
   goBackLink: GoBackLinkType
   sectionID: string
   projectData: Project
-  sections: SectionItem[]
+  sections: Section[]
   nextPageNavigation: React.ReactNode
 }
 
@@ -19,7 +20,7 @@ export const ProjectPageLayoutWrapper = ({
   projectData,
   sections,
   nextPageNavigation,
-}: Props) => {
+}: ProjectPageLayoutWrapperProps) => {
   const { title, role, years, company, description, mySkills, customers, projectLinks, imageShowcase } = projectData
 
   return (
diff --git a/components/layout/projectPage/Section.tsx b/components/layout/projectPage/Section.tsx
index d9ca5748..5edc18db 100644
--- a/components/layout/projectPage/Section.tsx
+++ b/components/layout/projectPage/Section.tsx
@@ -1,8 +1,8 @@
 import List from '@/components/shared/List'
 import ListItem from '@/components/shared/ListItem'
-import { SectionItem } from '@/utils/types'
+import { Section } from '@/utils/interfaces'
 
-const Section = ({ title, titleHighlight, items }: SectionItem) => (
+const Section = ({ title, titleHighlight, items }: Section) => (
   <div className="mt-8">
     <h3 className="mb-4 text-3xl font-bold">
       {title} {titleHighlight && <span className="text-violet-600">{titleHighlight}</span>}
diff --git a/components/projects/ProjectInformation.tsx b/components/projects/ProjectInformation.tsx
index 7f344a2d..092c37f8 100644
--- a/components/projects/ProjectInformation.tsx
+++ b/components/projects/ProjectInformation.tsx
@@ -1,11 +1,15 @@
 import List from '@/components/shared/List'
 import ListItem from '@/components/shared/ListItem'
 import { getSkillBadgeColor } from '@/utils/getSkillBadgeColor'
-import { ProjectInformationProps } from '@/utils/types'
+import { ProjectInformationProps } from '@/utils/sharedComponentProps'
 
-type Props = ProjectInformationProps
-
-const ProjectInformation = ({ description, mySkills, customers, projectLinks, linkGitHub }: Props) => {
+const ProjectInformation = ({
+  description,
+  mySkills,
+  customers,
+  projectLinks,
+  linkGitHub,
+}: ProjectInformationProps) => {
   const hasMoreLinks = projectLinks.length > 1
   const hasGithub = linkGitHub ? true : false
 
diff --git a/components/projects/ProjectItem.tsx b/components/projects/ProjectItem.tsx
index 2c86441a..5afbf5e9 100644
--- a/components/projects/ProjectItem.tsx
+++ b/components/projects/ProjectItem.tsx
@@ -1,10 +1,10 @@
 import { IconArrow } from '@/components/icons'
 import Heading2 from '@/components/shared/Heading2'
 import { getFeaturedBorderColor } from '@/utils/getFeaturedBorderColor'
-import { Icon } from '@/utils/types'
+import { Icon } from '@/utils/interfaces'
 import Image from 'next/image'
 
-type Props = {
+type ProjectItemProps = {
   isFeatured?: boolean | undefined
   image: string
   title: string
@@ -32,7 +32,7 @@ const ProjectItem = ({
   linkText,
   linkProjectPage,
   dataTestId,
-}: Props) => {
+}: ProjectItemProps) => {
   return (
     <div className="flex flex-col lg:flex-row lg:space-x-10">
       <div className="mx-auto items-start gap-8 py-8 md:grid md:grid-cols-2 lg:py-8">
@@ -43,10 +43,7 @@ const ProjectItem = ({
             {/* TODO: change to webp or avif format */}
             <Image
               src={image}
-              className={`
-                  mb-4 rounded-lg border bg-neutral-100 shadow-md md:mb-0 
-                  ${getFeaturedBorderColor(isFeatured)}
-                `}
+              className={`mb-4 rounded-lg border bg-neutral-100 shadow-md md:mb-0 ${getFeaturedBorderColor(isFeatured)} `}
               alt={title}
               width={600}
               height={617}
diff --git a/components/projects/ProjectSection.tsx b/components/projects/ProjectSection.tsx
index e564cf2f..71b07cfa 100644
--- a/components/projects/ProjectSection.tsx
+++ b/components/projects/ProjectSection.tsx
@@ -1,6 +1,6 @@
 import ProjectItem from '@/components/projects/ProjectItem'
 import ExperienceSection from '@/components/projects/experience/ExperienceSection'
-import { Project } from '@/utils/types'
+import { Project } from '@/utils/interfaces'
 
 type ProjectSectionProps = {
   projectData: Project[]
diff --git a/components/projects/experience/ExperienceCard.tsx b/components/projects/experience/ExperienceCard.tsx
index 2a9f48ce..2979b58d 100644
--- a/components/projects/experience/ExperienceCard.tsx
+++ b/components/projects/experience/ExperienceCard.tsx
@@ -1,13 +1,13 @@
 import PartTimeLabel from '@/components/shared/PartTimeLabel'
 
-type Props = {
+type ExperienceCardProps = {
   company: string
   role: string
   isPartTime?: boolean
   description: string
 }
 
-const ExperienceCard = ({ company, role, isPartTime, description }: Props) => {
+const ExperienceCard = ({ company, role, isPartTime, description }: ExperienceCardProps) => {
   return (
     <div className="mb-8 w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md md:max-w-[600px]">
       <div>
diff --git a/components/projects/experience/ExperienceSection.tsx b/components/projects/experience/ExperienceSection.tsx
index 643895a1..01e26eb3 100644
--- a/components/projects/experience/ExperienceSection.tsx
+++ b/components/projects/experience/ExperienceSection.tsx
@@ -1,9 +1,9 @@
-type Props = {
+type ExperienceSectionProps = {
   id: string
   text: string
 }
 
-const ExperienceSection = ({ id, text }: Props) => {
+const ExperienceSection = ({ id, text }: ExperienceSectionProps) => {
   return (
     <div id={id} className="mb-2 mt-16 border-b pb-2 text-2xl font-bold uppercase">
       {text}
diff --git a/components/shared/Breadcrumbs.tsx b/components/shared/Breadcrumbs.tsx
index 6ac88f07..52c31d10 100644
--- a/components/shared/Breadcrumbs.tsx
+++ b/components/shared/Breadcrumbs.tsx
@@ -2,7 +2,9 @@ import { IconCaretRight, IconHome } from '@/components/icons'
 import { BreadCrumbsType } from '@/utils/types'
 import Link from 'next/link'
 
-const BreadCrumbs = ({ linkLevel1, textLevel1, linkLevel2, textLevel2 }: BreadCrumbsType) => {
+type BreadCrumbsProps = BreadCrumbsType
+
+const BreadCrumbs = ({ linkLevel1, textLevel1, linkLevel2, textLevel2 }: BreadCrumbsProps) => {
   return (
     <>
       <nav className="mb-10 flex text-neutral-700" aria-label="Breadcrumbs" data-testid="breadcrumbs">
diff --git a/components/shared/DividerWithText.tsx b/components/shared/DividerWithText.tsx
index f1e24c91..3c9d9570 100644
--- a/components/shared/DividerWithText.tsx
+++ b/components/shared/DividerWithText.tsx
@@ -1,8 +1,8 @@
-type Props = {
+type DividerWithTextProps = {
   text: string
 }
 
-const DividerWithText = ({ text }: Props) => {
+const DividerWithText = ({ text }: DividerWithTextProps) => {
   return (
     <div className="mb-0 inline-flex w-full items-center justify-center">
       <hr className="my-8 h-px w-96 border-0 bg-gray-200" />
diff --git a/components/shared/Heading2.tsx b/components/shared/Heading2.tsx
index 850c4fc8..f9af2c37 100644
--- a/components/shared/Heading2.tsx
+++ b/components/shared/Heading2.tsx
@@ -1,9 +1,9 @@
-type Props = {
+type Heading2Props = {
   children: React.ReactNode
   textColor: string
 }
 
-const Heading2 = ({ children, textColor }: Props) => {
+const Heading2 = ({ children, textColor }: Heading2Props) => {
   return <h2 className={`mb-2 text-4xl font-bold tracking-tight ${textColor}`}>{children}</h2>
 }
 
diff --git a/components/shared/List.tsx b/components/shared/List.tsx
index a49196f7..da7323ca 100644
--- a/components/shared/List.tsx
+++ b/components/shared/List.tsx
@@ -1,8 +1,8 @@
-type Props = {
+type ListProps = {
   children: React.ReactNode
 }
 
-const List = ({ children }: Props) => {
+const List = ({ children }: ListProps) => {
   return (
     <>
       <ul className="ml-2 list-inside space-y-2 text-neutral-600">{children}</ul>
diff --git a/components/shared/ListItem.tsx b/components/shared/ListItem.tsx
index 6ba822a9..e919bfb7 100644
--- a/components/shared/ListItem.tsx
+++ b/components/shared/ListItem.tsx
@@ -1,10 +1,10 @@
 import { IconCheck } from '@/components/icons'
 
-type Props = {
+type ListItemProps = {
   children: React.ReactNode
 }
 
-const ListItem = ({ children }: Props) => {
+const ListItem = ({ children }: ListItemProps) => {
   return (
     <>
       <li className="flex-start flex">
diff --git a/components/shared/PageHeading.tsx b/components/shared/PageHeading.tsx
index 76dc54e2..7dafa6bc 100644
--- a/components/shared/PageHeading.tsx
+++ b/components/shared/PageHeading.tsx
@@ -1,8 +1,8 @@
-type Props = {
+type PageHeadingProps = {
   title: string
 }
 
-const PageHeading = ({ title }: Props) => {
+const PageHeading = ({ title }: PageHeadingProps) => {
   return <h1 className="text-5xl font-bold text-violet-600 sm:text-7xl">{title}</h1>
 }
 
diff --git a/components/shared/SkillsCard.tsx b/components/shared/SkillsCard.tsx
index dad4ecc4..855685fb 100644
--- a/components/shared/SkillsCard.tsx
+++ b/components/shared/SkillsCard.tsx
@@ -1,6 +1,6 @@
 import Image, { StaticImageData } from 'next/image'
 
-type Props = {
+type SkillsCardProps = {
   imgSrc: StaticImageData
   imgAlt: string
   title: string
@@ -8,7 +8,7 @@ type Props = {
   description: string
 }
 
-const SkillsCard = ({ imgSrc, imgAlt, title, titleYears, description }: Props) => (
+const SkillsCard = ({ imgSrc, imgAlt, title, titleYears, description }: SkillsCardProps) => (
   <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-md">
     <Image src={imgSrc} alt={imgAlt} width={88} height={88} />
     <div className="mt-3 text-2xl font-semibold tracking-tight text-neutral-900">
diff --git a/data/projects/personal/cryptoMania.ts b/data/projects/personal/cryptoMania.ts
index 841af021..4c38a0b3 100644
--- a/data/projects/personal/cryptoMania.ts
+++ b/data/projects/personal/cryptoMania.ts
@@ -1,6 +1,6 @@
-import type { SectionItem } from '@/utils/types'
+import { Section } from '@/utils/interfaces'
 
-export const sections: SectionItem[] = [
+export const sections: Section[] = [
   {
     title: 'Description',
     titleHighlight: '',
diff --git a/data/projects/personal/krsiak.ts b/data/projects/personal/krsiak.ts
index f72691a2..4a812e06 100644
--- a/data/projects/personal/krsiak.ts
+++ b/data/projects/personal/krsiak.ts
@@ -1,6 +1,6 @@
-import type { SectionItem } from '@/utils/types'
+import { Section } from '@/utils/interfaces'
 
-export const sections: SectionItem[] = [
+export const sections: Section[] = [
   {
     title: 'Description',
     titleHighlight: '',
diff --git a/data/projects/personal/projectsOverview.ts b/data/projects/personal/projectsOverview.ts
index 7cb5952b..d5934830 100644
--- a/data/projects/personal/projectsOverview.ts
+++ b/data/projects/personal/projectsOverview.ts
@@ -2,7 +2,7 @@ import {
   iconsSkillsProjectsPersonalCryptomania,
   iconsSkillsProjectsPersonalKrsiak,
 } from '@/data/skills/skills-projects-personal'
-import { Project } from '@/utils/types'
+import { Project } from '@/utils/interfaces'
 
 // project images
 import krsiak1 from '@/public/images/projects-personal/krsiak/krsiak-1-light.png'
diff --git a/data/projects/work/groupon.ts b/data/projects/work/groupon.ts
index 7c658900..345f4aed 100644
--- a/data/projects/work/groupon.ts
+++ b/data/projects/work/groupon.ts
@@ -1,6 +1,6 @@
-import type { SectionItem } from '@/utils/types'
+import { Section } from '@/utils/interfaces'
 
-export const sections: SectionItem[] = [
+export const sections: Section[] = [
   {
     title: 'My job',
     titleHighlight: '',
diff --git a/data/projects/work/komercniBanka.ts b/data/projects/work/komercniBanka.ts
index c84aab0a..fb6c796f 100644
--- a/data/projects/work/komercniBanka.ts
+++ b/data/projects/work/komercniBanka.ts
@@ -1,6 +1,6 @@
-import type { SectionItem } from '@/utils/types'
+import { Section } from '@/utils/interfaces'
 
-export const sections: SectionItem[] = [
+export const sections: Section[] = [
   {
     title: 'My job',
     titleHighlight: '',
diff --git a/data/projects/work/kooperativa.ts b/data/projects/work/kooperativa.ts
index e32025bb..99ea2b61 100644
--- a/data/projects/work/kooperativa.ts
+++ b/data/projects/work/kooperativa.ts
@@ -1,6 +1,6 @@
-import type { SectionItem } from '@/utils/types'
+import { Section } from '@/utils/interfaces'
 
-export const sections: SectionItem[] = [
+export const sections: Section[] = [
   {
     title: 'My job',
     titleHighlight: '',
diff --git a/data/projects/work/moravia.ts b/data/projects/work/moravia.ts
index 6c70e827..1e9eb791 100644
--- a/data/projects/work/moravia.ts
+++ b/data/projects/work/moravia.ts
@@ -1,6 +1,6 @@
-import type { SectionItem } from '@/utils/types'
+import { Section } from '@/utils/interfaces'
 
-export const sections: SectionItem[] = [
+export const sections: Section[] = [
   {
     title: 'My job',
     titleHighlight: '',
diff --git a/data/projects/work/projectsOverview.ts b/data/projects/work/projectsOverview.ts
index 7328ae82..d9834cb7 100644
--- a/data/projects/work/projectsOverview.ts
+++ b/data/projects/work/projectsOverview.ts
@@ -8,7 +8,7 @@ import {
   iconsSkillsProjectsWorkSmartsuppWeb,
 } from '@/data/skills/skills-projects-work'
 import { PAGES_URL, PROJECT_ID } from '@/utils/constants'
-import { Project } from '@/utils/types'
+import { Project } from '@/utils/interfaces'
 
 // moravia
 import moravia1 from '@/public/images/projects-work/moravia/moravia-1-light.png'
diff --git a/data/projects/work/smartsuppDashboard.ts b/data/projects/work/smartsuppDashboard.ts
index c55d2262..54b997fa 100644
--- a/data/projects/work/smartsuppDashboard.ts
+++ b/data/projects/work/smartsuppDashboard.ts
@@ -1,6 +1,6 @@
-import type { SectionItem } from '@/utils/types'
+import { Section } from '@/utils/interfaces'
 
-export const sections: SectionItem[] = [
+export const sections: Section[] = [
   {
     title: 'My job',
     titleHighlight: '',
diff --git a/data/projects/work/smartsuppHelp.ts b/data/projects/work/smartsuppHelp.ts
index 55294996..76824600 100644
--- a/data/projects/work/smartsuppHelp.ts
+++ b/data/projects/work/smartsuppHelp.ts
@@ -1,6 +1,6 @@
-import type { SectionItem } from '@/utils/types'
+import { Section } from '@/utils/interfaces'
 
-export const sections: SectionItem[] = [
+export const sections: Section[] = [
   {
     title: 'My job',
     titleHighlight: '',
diff --git a/data/projects/work/smartsuppWeb.ts b/data/projects/work/smartsuppWeb.ts
index 64773525..ac943ca5 100644
--- a/data/projects/work/smartsuppWeb.ts
+++ b/data/projects/work/smartsuppWeb.ts
@@ -1,6 +1,6 @@
-import type { SectionItem } from '@/utils/types'
+import { Section } from '@/utils/interfaces'
 
-export const sections: SectionItem[] = [
+export const sections: Section[] = [
   {
     title: 'My job',
     titleHighlight: '',
diff --git a/utils/generateIconsSkills.ts b/utils/generateIconsSkills.ts
index 5e495397..d862d1f1 100644
--- a/utils/generateIconsSkills.ts
+++ b/utils/generateIconsSkills.ts
@@ -21,7 +21,7 @@ import ts from '@/public/icons/svg/skills/ts.svg'
 import wordpress from '@/public/icons/svg/skills/wordpress.svg'
 import xd from '@/public/icons/svg/skills/xd.svg'
 
-import { Icon } from '@/utils/types'
+import { Icon } from '@/utils/interfaces'
 
 type SkillKeys =
   | 'chakra'
diff --git a/utils/getSkillBadgeColor.ts b/utils/getSkillBadgeColor.ts
index c7587ad6..17bf59f1 100644
--- a/utils/getSkillBadgeColor.ts
+++ b/utils/getSkillBadgeColor.ts
@@ -1,6 +1,6 @@
-import { CategoryDescriptionType } from '@/utils/types'
+import { SkillCategoryType } from '@/utils/types'
 
-export const getSkillBadgeColor = (categoryDescription: CategoryDescriptionType): string => {
+export const getSkillBadgeColor = (categoryDescription: SkillCategoryType): string => {
   switch (categoryDescription) {
     case 'Frontend':
       return 'yellow'
diff --git a/utils/interfaces.ts b/utils/interfaces.ts
new file mode 100644
index 00000000..9db2a641
--- /dev/null
+++ b/utils/interfaces.ts
@@ -0,0 +1,44 @@
+import { SkillCategoryType } from './types'
+
+// icons
+export interface Icon {
+  name: string
+  path: string
+}
+
+// sections
+export interface Section {
+  title: string
+  titleHighlight?: string | undefined
+  items: string[]
+}
+
+// project item
+export interface Link {
+  urlText: string
+  url: string
+}
+
+export interface Skill {
+  description: SkillCategoryType
+  skills: string[]
+}
+
+export interface Project {
+  id: string
+  isFeatured?: boolean | undefined
+  image: string
+  imageShowcase: string[]
+  title: string
+  company: string
+  role: string
+  years?: string
+  description: string
+  mySkillsIcons: Icon[]
+  mySkills: Skill[]
+  linkText: string
+  projectLinks: Link[]
+  linkGitHub?: string
+  customers?: string
+  linkProjectPage: string
+}
diff --git a/utils/sharedComponentProps.ts b/utils/sharedComponentProps.ts
new file mode 100644
index 00000000..a019dd6c
--- /dev/null
+++ b/utils/sharedComponentProps.ts
@@ -0,0 +1,25 @@
+import { Link, Skill } from './interfaces'
+import { GoBackLinkType } from './types'
+
+export type HeaderSectionProps = {
+  title: string
+  sectionID: string
+  role: string
+  years?: string | undefined
+  company?: string
+  goBackLink: GoBackLinkType
+}
+
+export type ProjectInformationProps = {
+  description: string
+  mySkills: Skill[]
+  customers?: string | undefined
+  projectLinks: Link[]
+  linkGitHub?: string | undefined
+}
+
+// error pages
+export type ErrorProps = {
+  error: Error & { digest?: string }
+  reset: () => void
+}
diff --git a/utils/types.ts b/utils/types.ts
index 62ca45ca..3052cee3 100644
--- a/utils/types.ts
+++ b/utils/types.ts
@@ -1,75 +1,3 @@
-// icons
-export interface Icon {
-  name: string
-  path: string
-}
-
-// skills
-export type CategoryDescriptionType = 'Frontend' | 'Design' | 'Other'
-
-export type SkillItem = {
-  description: CategoryDescriptionType
-  skills: string[]
-}
-
-// project item
-export type LinkItem = {
-  urlText: string
-  url: string
-}
-
-export type Project = {
-  id: string
-  isFeatured?: boolean | undefined
-  image: string
-  imageShowcase: string[]
-  title: string
-  company: string
-  role: string
-  years?: string
-  description: string
-  mySkillsIcons: Icon[]
-  mySkills: SkillItem[]
-  linkText: string
-  projectLinks: LinkItem[]
-  linkGitHub?: string
-  customers?: string
-  linkProjectPage: string
-}
-
-// project sub page
-export type HeaderSectionProps = {
-  title: string
-  sectionID: string
-  role: string
-  years?: string | undefined
-  company?: string
-  goBackLink: GoBackLinkType
-}
-
-export type ProjectInformationProps = {
-  description: string
-  mySkills: SkillItem[]
-  customers?: string | undefined
-  projectLinks: LinkItem[]
-  linkGitHub?: string | undefined
-}
-
-export type SectionItem = {
-  title: string
-  titleHighlight?: string | undefined
-  items: string[]
-}
-
-// go back link
-export type GoBackLinkType = 'work' | 'personal'
-
-// error pages
-export type ErrorProps = {
-  error: Error & { digest?: string }
-  reset: () => void
-}
-
 // breadcrumbs
 export type BreadCrumbsType = {
   textLevel1: string
@@ -77,3 +5,9 @@ export type BreadCrumbsType = {
   textLevel2?: string
   linkLevel2?: string
 }
+
+// go back link
+export type GoBackLinkType = 'work' | 'personal'
+
+// skills
+export type SkillCategoryType = 'Frontend' | 'Design' | 'Other'