diff --git a/src/components/phrase-diagram/PhraseDiagram.tsx b/src/components/phrase-diagram/PhraseDiagram.tsx
index c308e29..3f4b2b6 100644
--- a/src/components/phrase-diagram/PhraseDiagram.tsx
+++ b/src/components/phrase-diagram/PhraseDiagram.tsx
@@ -9,11 +9,13 @@ function PhraseDiagram({ opts, children }: {
     opts: T.TextOptions,
     children: BlockInput[]
 }) {
-    return <div className="d-flex flex-row justify-content-center flex-wrap">
-        {children.map((block) => (
-            <Block key={Math.random()} opts={opts}>{block}</Block>
-        ))}
-    </div>;
+    return <div style={{ overflowX: "auto" }}>
+            <div className="d-flex flex-row justify-content-center flex-wrap">
+            {children.map((block) => (
+                <Block key={Math.random()} opts={opts}>{block}</Block>
+            ))}
+        </div>
+    </div>
 }
 
 function Block({ opts, children }: {
@@ -45,7 +47,7 @@ function NP({ opts, children, inside }: {
             <Adjectives opts={opts}>{np.adjectives}</Adjectives>
             <div> {np.ps[0].f}</div>
         </div>
-        <div>NP</div>
+        <div className={inside ? "small" : ""}>NP</div>
     </div>
 }
 
diff --git a/src/content/phrase-structure/np.mdx b/src/content/phrase-structure/np.mdx
index 3da34da..57bf735 100644
--- a/src/content/phrase-structure/np.mdx
+++ b/src/content/phrase-structure/np.mdx
@@ -21,32 +21,32 @@ Pashto phrases are built with a basic **building blocks** 🧱 like NPs, APs, ve
     <div className="text-center mr-2">
         <div className="d-flex justify-content-center align-items-center" style={{
             border: "2px solid black",
-            height: "3rem",
-            width: "7rem",
+            height: "2.5rem",
+            width: "4rem",
         }}/>
         <div>AP</div>
     </div>
     <div className="text-center mr-2">
         <div className="d-flex justify-content-center align-items-center" style={{
             border: "2px solid black",
-            height: "3rem",
-            width: "7rem",
+            height: "2.5rem",
+            width: "4rem",
         }}/>
         <div>NP</div>
     </div>
     <div className="text-center mr-2">
         <div className="d-flex justify-content-center align-items-center" style={{
             border: "2px solid black",
-            height: "3rem",
-            width: "7rem",
+            height: "2.5rem",
+            width: "4rem",
         }}/>
         <div>NP</div>
     </div>
     <div className="text-center">
         <div className="d-flex justify-content-center align-items-center" style={{
             border: "2px solid black",
-            height: "3rem",
-            width: "7rem",
+            height: "2.5rem",
+            width: "4rem",
         }}/>
         <div>Verb</div>
     </div>
@@ -58,24 +58,24 @@ Or like this...
     <div className="text-center mr-2">
         <div className="d-flex justify-content-center align-items-center" style={{
             border: "2px solid black",
-            height: "3rem",
-            width: "7rem",
+            height: "2.5rem",
+            width: "4rem",
         }}/>
         <div>NP</div>
     </div>
     <div className="text-center mr-2">
         <div className="d-flex justify-content-center align-items-center" style={{
             border: "2px solid black",
-            height: "3rem",
-            width: "7rem",
+            height: "2.5rem",
+            width: "4rem",
         }}/>
         <div>NP</div>
     </div>
     <div className="text-center">
         <div className="d-flex justify-content-center align-items-center" style={{
             border: "2px solid black",
-            height: "3rem",
-            width: "7rem",
+            height: "2.5rem",
+            width: "4rem",
         }}/>
         <div>Equative</div>
     </div>
@@ -265,6 +265,6 @@ coming soon
 
 coming soon
 
-Now try to make your own from scratch!
+Now try to make your own NPs from scratch!
 
 <NPPlayground opts={opts} />