diff --git a/typography.tsx b/typography.tsx
index b596dfa..f6e3baf 100644
--- a/typography.tsx
+++ b/typography.tsx
@@ -11,7 +11,7 @@ export interface Props {
 export class H1 extends React.Component<Props> {
     render() {
         return (
-            <h1 className={cn("scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", this.props.className)}>
+            <h1 className={cn("mt-5 scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", this.props.className)}>
                 {this.props.children}
             </h1>
         );
@@ -21,7 +21,7 @@ export class H1 extends React.Component<Props> {
 export class H2 extends React.Component<Props> {
     render() {
         return (
-            <h2 className={cn("scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0", this.props.className)}>
+            <h2 className={cn("mt-5 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0", this.props.className)}>
                 {this.props.children}
             </h2>
         );
@@ -31,7 +31,7 @@ export class H2 extends React.Component<Props> {
 export class H3 extends React.Component<Props> {
     render() {
         return (
-            <h3 className={cn("scroll-m-20 text-2xl font-semibold tracking-tight", this.props.className)}>
+            <h3 className={cn("mt-5 scroll-m-20 text-2xl font-semibold tracking-tight", this.props.className)}>
                 {this.props.children}
             </h3>
         );
@@ -41,7 +41,7 @@ export class H3 extends React.Component<Props> {
 export class H4 extends React.Component<Props> {
     render() {
         return (
-            <h4 className={cn("scroll-m-20 text-xl font-semibold tracking-tight", this.props.className)}>
+            <h4 className={cn("mt-5 scroll-m-20 text-xl font-semibold tracking-tight", this.props.className)}>
                 {this.props.children}
             </h4>
         );
@@ -51,7 +51,7 @@ export class H4 extends React.Component<Props> {
 export class P extends React.Component<Props> {
     render() {
         return (
-            <p className={cn("leading-7 [&:not(:first-child)]:mt-6", this.props.className)}>
+            <p className={cn("text-justify leading-7 [&:not(:first-child)]:mt-6", this.props.className)}>
                 {this.props.children}
             </p>
         );