diff --git a/src/App.tsx b/src/App.tsx
index 423d662..8cf4640 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import Navbar from './components/Navbar';
 import LandingSection from './components/LandingSection';
 import './i18n';
 import AboutSection from './components/AboutSection';
+import ProjectsSection from './components/ProjectsSection';
 
 function App() {
   return (
@@ -14,6 +15,7 @@ function App() {
         <Navbar />
         <LandingSection />
         <AboutSection />
+        <ProjectsSection />
       </>
     </ThemeProvider>
   );
diff --git a/src/components/AboutSection.tsx b/src/components/AboutSection.tsx
index f487d9c..ce59a81 100644
--- a/src/components/AboutSection.tsx
+++ b/src/components/AboutSection.tsx
@@ -12,11 +12,19 @@ import { StyledSectionHeader } from './styles/SectionHeader.styled';
 const aboutInfo = [
   {
     title: 'MYSELF',
-    desc: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis, modi!',
+    desc: 'My name is Daniel Pająk, but on the internet, I am better known as Spythere. I was born in 1999 and since I got my first computer at my 11th birthday I was amazed by its complexity, functioning and ability to create my own products of imagination. Computers were always my way to relieve stress and distance myself from overwhelming situations. Coding various things and delving into more and more knowledge about ways I can virtually build things became my passion and it lasts since I have opened my Notepad++ for the first time.',
   },
   {
     title: 'MY JOURNEY',
-    desc: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus autem id nostrum beatae distinctio porro, laudantium asperiores voluptatibus enim dignissimos consequatur excepturi quia iure cupiditate molestias in modi. Quo nisi nesciunt reprehenderit, odit, ad eveniet omnis nulla necessitatibus est incidunt numquam. Sapiente, harum! Repellat earum minus magnam praesentium voluptatibus! Pariatur.',
+    desc: 'Miłością do programowania zaraził mnie mój przyjaciel, który pokazał mi jak robić proste aplikacje okienkowe w Javie. Potem przerodziło się to w hobby, gdy odkryłem, że za pomocą tego języka mogę tworzyć m.in. pluginy na serwery Minecraft. W technikum bardziej zainteresowałem się web developmentem, zaprojektowałem kilka stron dla mojej szkoły, a w wolnym czasie szlifowałem umiejętności z podstawowych technologii takich jak HTML, CSS i JS.',
+  },
+  {
+    title: 'EXPERIENCE',
+    desc: ' Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure quia natus molestias doloremque voluptas quaerat earum necessitatibus! Iusto sapiente, soluta earum itaque perferendis placeat eligendi. Voluptas odio tenetur placeat quidem eveniet illo sunt ducimus distinctio corrupti. Velit tempore impedit eaque nihil exercitationem ipsa neque minus atque et, hic quae dolores!',
+  },
+  {
+    title: 'FUTURE',
+    desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti neque sed aut, nostrum, et laboriosam cupiditate repellat nihil magnam, ratione enim illo culpa odit aperiam porro? Fugiat, repellendus repudiandae cupiditate perferendis veritatis ea corrupti cum, perspiciatis reiciendis sit adipisci. Obcaecati magnam quisquam velit nobis dolorem, tempora beatae! Nobis eos cupiditate praesentium cumque? Possimus perspiciatis, maiores, rerum unde quo quas neque, sequi porro doloremque minima temporibus!',
   },
 ];
 
@@ -31,18 +39,20 @@ function AboutSection() {
         </span>
       </StyledSectionHeader>
 
-      {aboutInfo.map((about) => (
-        <StyledAboutItem>
-          <StyledAboutImageWrapper>
-            <img src="question.svg" alt="question" />
-          </StyledAboutImageWrapper>
+      <ul>
+        {aboutInfo.map((about) => (
+          <StyledAboutItem>
+            <StyledAboutImageWrapper>
+              <img src="question.svg" alt="question" />
+            </StyledAboutImageWrapper>
 
-          <StyledAboutContentWrapper>
-            <StyledAboutTitle>{about.title}</StyledAboutTitle>
-            <StyledAboutDescription>{about.desc}</StyledAboutDescription>
-          </StyledAboutContentWrapper>
-        </StyledAboutItem>
-      ))}
+            <StyledAboutContentWrapper>
+              <StyledAboutTitle>{about.title}</StyledAboutTitle>
+              <StyledAboutDescription>{about.desc}</StyledAboutDescription>
+            </StyledAboutContentWrapper>
+          </StyledAboutItem>
+        ))}
+      </ul>
     </StyledAbout>
   );
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 5108f6a..982d946 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,11 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import {
-  StyledLangButton,
-  StyledNavbar,
-  StyledNavlink,
-  StyledNavlinkBrand,
-  StyledNavlinkList,
-} from './styles/Navbar.styled';
+import { StyledLangButton, StyledNavbar, StyledNavBrand, StyledNavlinksWrapper } from './styles/Navbar.styled';
 
 interface NavLink {
   title: string;
@@ -20,21 +14,23 @@ function scrollToSection(e: React.MouseEvent, href: string) {
   });
 }
 
-function NavlinkList(props: { navlinks: NavLink[] }) {
+function Navlinks(props: { navlinks: NavLink[] }) {
   const { t } = useTranslation();
 
   return (
-    <>
-      <StyledNavlinkList>
+    <StyledNavlinksWrapper>
+      <ul>
         {props.navlinks.map((navlink) => (
-          <StyledNavlink key={navlink.title} href={navlink.href} onClick={(e) => scrollToSection(e, navlink.href)}>
-            {t(`navbar.${navlink.title}`)}
-          </StyledNavlink>
+          <li key={navlink.title}>
+            <a href={navlink.href} onClick={(e) => scrollToSection(e, navlink.href)}>
+              {t(`navbar.${navlink.title}`)}
+            </a>
+          </li>
         ))}
+      </ul>
 
-        <LanguageChoice />
-      </StyledNavlinkList>
-    </>
+      <LanguageChoice />
+    </StyledNavlinksWrapper>
   );
 }
 
@@ -46,9 +42,9 @@ function LanguageChoice() {
   }
 
   return (
-    <>
-      <StyledLangButton onClick={changeLanguage}>{i18n.language}</StyledLangButton>
-    </>
+    <StyledLangButton aria-description="Change language" onClick={changeLanguage}>
+      {i18n.language}
+    </StyledLangButton>
   );
 }
 
@@ -63,11 +59,11 @@ const navlinks = [
   },
   {
     title: 'projects',
-    href: '#',
+    href: '#projects',
   },
   {
     title: 'contact',
-    href: '#',
+    href: '#contact',
   },
 ];
 
@@ -76,10 +72,11 @@ export default function Navbar() {
 
   return (
     <StyledNavbar>
-      <StyledNavlinkBrand href="#" onClick={(e) => scrollToSection(e, '#landing')}>
+      <StyledNavBrand href="#" onClick={(e) => scrollToSection(e, '#landing')}>
         {t('navbar.title')}
-      </StyledNavlinkBrand>
-      <NavlinkList navlinks={navlinks} />
+      </StyledNavBrand>
+
+      <Navlinks navlinks={navlinks} />
     </StyledNavbar>
   );
 }
diff --git a/src/components/ProjectsSection.tsx b/src/components/ProjectsSection.tsx
new file mode 100644
index 0000000..ef0369e
--- /dev/null
+++ b/src/components/ProjectsSection.tsx
@@ -0,0 +1,114 @@
+import { StyledCursor } from './styles/Cursor.styled';
+import { StyledProjects } from './styles/Projects.styled';
+import { StyledSectionHeader } from './styles/SectionHeader.styled';
+
+const badges = {
+  HTML: ' https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white',
+  CSS: ' https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white',
+  JS: ' https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E',
+  SASS: ' https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white',
+  TS: ' https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white',
+  Node: ' https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white',
+  Vue: ' https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D',
+  Express: ' https://img.shields.io/badge/Express.js-404D59?style=for-the-badge',
+  Mongo: ' https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white',
+  React: ' https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB',
+  Flutter: ' https://img.shields.io/badge/Flutter-02569B?style=for-the-badge&logo=flutter&logoColor=white',
+  NET: ' https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white',
+  Python: ' https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white',
+  Java: ' https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=java&logoColor=white',
+  AWS: ' https://img.shields.io/badge/Amazon_AWS-232F3E?style=for-the-badge&logo=amazon-aws&logoColor=white',
+  Heroku: ' https://img.shields.io/badge/Heroku-430098?style=for-the-badge&logo=heroku&logoColor=white',
+  NestJS: 'https://img.shields.io/badge/nestjs-red?style=for-the-badge&logo=nestjs&logoColor=white',
+  Discord: ' https://img.shields.io/badge/discord.js-white?style=for-the-badge&logo=discord&logoColor=blue',
+  Postgresql: ' https://img.shields.io/badge/postgresql-blue?style=for-the-badge&logo=postgresql&logoColor=white',
+  CSharp: ' https://img.shields.io/badge/C%20SHARP-orange?style=for-the-badge&logo=csharp&logoColor=white',
+  Dotnet: ' https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white',
+};
+
+function ProjectsSection() {
+  return (
+    <StyledProjects id="projects">
+      <StyledSectionHeader>
+        MY{' '}
+        <span className="text--accent" style={{ position: 'relative' }}>
+          PROJECTS
+          <StyledCursor />
+        </span>
+      </StyledSectionHeader>
+
+      <h1>ROZWIJANE PROJEKTY</h1>
+
+      <div className="projects-grid">
+        <div className="project-card">
+          <h2>Stacjownik</h2>
+          <h3>Lorem ipsum dolor sit amet.</h3>
+
+          <div className="project-badges">
+            <img src={badges.TS} alt="typescript"></img>
+            <img src={badges.Vue} alt="vue.js"></img>
+            <img src={badges.SASS} alt="sass/scss"></img>
+          </div>
+
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
+            ipsum inventore quidem unde dolore.
+          </p>
+
+          <div className="project-actions">
+            <button>
+              <a href="#">GITHUB REPO</a>
+            </button>
+            <button>
+              <a href="#">STRONA</a>
+            </button>
+          </div>
+        </div>
+
+        <div className="project-card">
+          <h2>Pojazdownik</h2>
+          <h3>Lorem ipsum dolor sit amet.</h3>
+          <div className="project-badges">
+            <img src={badges.TS} alt="typescript"></img>
+            <img src={badges.Vue} alt="vue.js"></img>
+            <img src={badges.SASS} alt="sass/scss"></img>
+          </div>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
+            ipsum inventore quidem unde dolore.
+          </p>
+        </div>
+
+        <div className="project-card">
+          <h2>GeneraTOR</h2>
+          <h3>Lorem ipsum dolor sit amet.</h3>
+          <div className="project-badges">
+            <img src={badges.TS} alt="typescript"></img>
+            <img src={badges.Vue} alt="vue.js"></img>
+            <img src={badges.SASS} alt="sass/scss"></img>
+          </div>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
+            ipsum inventore quidem unde dolore.
+          </p>
+        </div>
+
+        <div className="project-card">
+          <h2>Stacjobot</h2>
+          <h3>Lorem ipsum dolor sit amet.</h3>
+          <div className="project-badges">
+            <img src={badges.TS} alt="typescript"></img>
+            <img src={badges.Vue} alt="vue.js"></img>
+            <img src={badges.SASS} alt="sass/scss"></img>
+          </div>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
+            ipsum inventore quidem unde dolore.
+          </p>
+        </div>
+      </div>
+    </StyledProjects>
+  );
+}
+
+export default ProjectsSection;
diff --git a/src/components/styles/About.styled.ts b/src/components/styles/About.styled.ts
index c4771b7..36c8863 100644
--- a/src/components/styles/About.styled.ts
+++ b/src/components/styles/About.styled.ts
@@ -6,13 +6,13 @@ export const StyledAbout = styled.section`
   }
 `;
 
-export const StyledAboutItem = styled.div`
+export const StyledAboutItem = styled.li`
   display: flex;
   justify-content: flex-start;
 
   gap: 1em;
-
   margin-top: 50px;
+
   h2 {
     margin: 0;
   }
@@ -24,13 +24,15 @@ export const StyledAboutImageWrapper = styled.div`
 
   &::before {
     position: absolute;
+    top: -25px;
+    left: 50%;
+    height: calc(100% + 52px);
+    
     content: '';
-    height: calc(100% + 100px);
     width: 5px;
     background-color: ${({ theme }) => theme.colors.primary};
+    border-radius: 2px;
 
-    top: 50px;
-    left: 50%;
     z-index: -1;
     transform: translateX(-50%);
   }
diff --git a/src/components/styles/Cursor.styled.ts b/src/components/styles/Cursor.styled.ts
index c175ed8..f54ec42 100644
--- a/src/components/styles/Cursor.styled.ts
+++ b/src/components/styles/Cursor.styled.ts
@@ -3,11 +3,11 @@ import { styled } from 'styled-components';
 export const StyledCursor = styled.span`
   position: absolute;
   top: 0;
-  left: 120%;
+  left: calc(100% + 0.25em);
 
   width: 15px;
   height: 100%;
-  background-color: ${({theme}) => theme.colors.primary};
+  background-color: ${({ theme }) => theme.colors.primary};
 
   animation: blinking 1s infinite;
 `;
diff --git a/src/components/styles/Global.styled.ts b/src/components/styles/Global.styled.ts
index f4e26f0..dbd5d76 100644
--- a/src/components/styles/Global.styled.ts
+++ b/src/components/styles/Global.styled.ts
@@ -58,6 +58,12 @@ export const GlobalStyles = createGlobalStyle`
       border: none;
    }
 
+   ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+   }
+
    @keyframes typing {
       to { left: 100% }
    }
diff --git a/src/components/styles/Navbar.styled.ts b/src/components/styles/Navbar.styled.ts
index bbf3234..9cf0001 100644
--- a/src/components/styles/Navbar.styled.ts
+++ b/src/components/styles/Navbar.styled.ts
@@ -15,23 +15,26 @@ export const StyledNavbar = styled.nav`
   padding: 0.75em 2em;
 `;
 
-export const StyledNavlinkBrand = styled.a`
+export const StyledNavBrand = styled.a`
   opacity: 0.85;
   font-weight: 700;
   color: ${({ theme }) => theme.colors.primary};
   font-size: 1.3em;
 `;
 
-export const StyledNavlinkList = styled.div`
+export const StyledNavlinksWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 1em;
   font-size: 1.1em;
-`;
 
-export const StyledNavlink = styled.a`
-  /* color: black; */
-  font-weight: bold;
+  ul {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    gap: 0.5em;
+    font-weight: bold;
+  }
 `;
 
 export const StyledLangButton = styled.button`
diff --git a/src/components/styles/Projects.styled.ts b/src/components/styles/Projects.styled.ts
new file mode 100644
index 0000000..8c505f9
--- /dev/null
+++ b/src/components/styles/Projects.styled.ts
@@ -0,0 +1,39 @@
+import { styled } from 'styled-components';
+
+export const StyledProjects = styled.section`
+  .projects-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+  }
+
+  .project-card {
+    padding: 0.5em;
+    background-color: #3b3b3b;
+    box-shadow: #333 10px 7px 11px 0px;
+
+    h2,
+    h3 {
+      margin: 0;
+    }
+
+    h2 {
+      color: ${({ theme }) => theme.colors.primary};
+    }
+
+    h3 {
+      color: #ddd;
+    }
+  }
+
+  .project-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+    margin-top: 0.5em;
+
+    img {
+      max-width: 120px;
+    }
+  }
+`;