diff --git a/components/home/about/About.jsx b/components/home/about/About.jsx
index dbf2ad4..9180a89 100644
--- a/components/home/about/About.jsx
+++ b/components/home/about/About.jsx
@@ -3,10 +3,15 @@ import md from 'markdown-it'
 const About = ({ title, image, content }) => {
   return (
     <section className="about">
-      <h2>{title}</h2>
-      {/* image */}
+      <div className="about__content">
+        <h2 className="about__title">{title}</h2>
+        {/* TODO: add image */}
 
-      <div dangerouslySetInnerHTML={{ __html: md().render(content) }} />
+        <div
+          className="about__text"
+          dangerouslySetInnerHTML={{ __html: md().render(content) }}
+        />
+      </div>
     </section>
   )
 }
diff --git a/components/home/about/about.scss b/components/home/about/about.scss
index 4a4bfda..97de1e5 100644
--- a/components/home/about/about.scss
+++ b/components/home/about/about.scss
@@ -1,2 +1,41 @@
 .about {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+
+  &__content {
+    @extend %grid;
+  }
+
+  &__title {
+    grid-column: 1 / 4;
+
+    @extend %header-2;
+
+    @media (min-width: $md) {
+      grid-column: 2 / 7;
+    }
+
+    @media (min-width: $lg) {
+      grid-column: 3 / 7;
+    }
+  }
+
+  &__text {
+    @extend %body-1;
+
+    grid-column: 1 / 4;
+
+    @media (min-width: $md) {
+      grid-column: 2 / 7;
+    }
+
+    @media (min-width: $lg) {
+      grid-column: 8 / 12;
+    }
+
+    p {
+      margin-bottom: spacing(2);
+    }
+  }
 }