diff --git a/src/components/AboutSection.tsx b/src/components/AboutSection.tsx
index 76b6e31..f487d9c 100644
--- a/src/components/AboutSection.tsx
+++ b/src/components/AboutSection.tsx
@@ -1,7 +1,25 @@
-import { StyledAbout, StyledAboutItem } from './styles/About.styled';
+import {
+  StyledAbout,
+  StyledAboutContentWrapper,
+  StyledAboutDescription,
+  StyledAboutImageWrapper,
+  StyledAboutItem,
+  StyledAboutTitle,
+} from './styles/About.styled';
 import { StyledCursor } from './styles/Cursor.styled';
 import { StyledSectionHeader } from './styles/SectionHeader.styled';
 
+const aboutInfo = [
+  {
+    title: 'MYSELF',
+    desc: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis, modi!',
+  },
+  {
+    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.',
+  },
+];
+
 function AboutSection() {
   return (
     <StyledAbout id="about">
@@ -13,14 +31,18 @@ function AboutSection() {
         </span>
       </StyledSectionHeader>
 
-      <div>
+      {aboutInfo.map((about) => (
         <StyledAboutItem>
-          <img src="question.svg" alt="" />
-          <h2>MYSELF</h2>
-        </StyledAboutItem>
+          <StyledAboutImageWrapper>
+            <img src="question.svg" alt="question" />
+          </StyledAboutImageWrapper>
 
-        <div>test</div>
-      </div>
+          <StyledAboutContentWrapper>
+            <StyledAboutTitle>{about.title}</StyledAboutTitle>
+            <StyledAboutDescription>{about.desc}</StyledAboutDescription>
+          </StyledAboutContentWrapper>
+        </StyledAboutItem>
+      ))}
     </StyledAbout>
   );
 }
diff --git a/src/components/styles/About.styled.ts b/src/components/styles/About.styled.ts
index 4344e90..c4771b7 100644
--- a/src/components/styles/About.styled.ts
+++ b/src/components/styles/About.styled.ts
@@ -2,36 +2,52 @@ import { styled } from 'styled-components';
 
 export const StyledAbout = styled.section`
   img {
-    max-width: 120px;
+    max-width: 90px;
   }
 `;
 
 export const StyledAboutItem = styled.div`
+  display: flex;
+  justify-content: flex-start;
+
+  gap: 1em;
+
+  margin-top: 50px;
   h2 {
-    position: relative;
-    display: inline-block;
-    transform: translate(20px, -15px);
     margin: 0;
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      height: 4px;
-      background-color: ${({ theme }) => theme.colors.primary};
-    }
-
-    &::before {
-      right: 100%;
-      transform: translate(0, 15px);
-      width: 30px;
-    }
-
-    &::after {
-      left: 0;
-      width: calc(100% + 5px);
-      transform: translate(-5px, 15px);
-    }
   }
 `;
+
+export const StyledAboutImageWrapper = styled.div`
+  display: inline-block;
+  position: relative;
+
+  &::before {
+    position: absolute;
+    content: '';
+    height: calc(100% + 100px);
+    width: 5px;
+    background-color: ${({ theme }) => theme.colors.primary};
+
+    top: 50px;
+    left: 50%;
+    z-index: -1;
+    transform: translateX(-50%);
+  }
+`;
+
+export const StyledAboutContentWrapper = styled.div``;
+
+export const StyledAboutTitle = styled.h2`
+  display: inline-block;
+  margin: 1em 0;
+  padding: 0.1em 2em 0.1em 0.5em;
+
+  background-color: ${({ theme }) => theme.colors.primary};
+`;
+
+export const StyledAboutDescription = styled.p`
+  margin: 0;
+  margin-top: 1em;
+  text-align: justify;
+`;
diff --git a/src/components/styles/Global.styled.ts b/src/components/styles/Global.styled.ts
index e4a6956..f4e26f0 100644
--- a/src/components/styles/Global.styled.ts
+++ b/src/components/styles/Global.styled.ts
@@ -22,6 +22,7 @@ export const GlobalStyles = createGlobalStyle`
       margin: 0;
       min-height: 100vh;
       width: 100%;
+      overflow-x: hidden;
    }
 
    .text {
diff --git a/src/components/styles/Navbar.styled.ts b/src/components/styles/Navbar.styled.ts
index b163c8c..bbf3234 100644
--- a/src/components/styles/Navbar.styled.ts
+++ b/src/components/styles/Navbar.styled.ts
@@ -3,6 +3,7 @@ import { styled } from 'styled-components';
 export const StyledNavbar = styled.nav`
   position: sticky;
   top: 0;
+  z-index: 1000;
 
   display: flex;
   justify-content: space-between;