diff --git a/src/components/InlineInflectionButton.js b/src/components/InlineInflectionButton.js
new file mode 100644
index 0000000..52d09e8
--- /dev/null
+++ b/src/components/InlineInflectionButton.js
@@ -0,0 +1,21 @@
+import React from "react";
+import buttonUnpressed from "../images/button-unpressed.png";
+import buttonHalfPressed from "../images/button-half-pressed.png";
+import buttonFullyPressed from "../images/button-fully-pressed.png";
+
+function InlineInflectionButton({ inflection }) {
+    return (
+        <img
+            src={inflection === 2 ? buttonFullyPressed
+                : inflection === 1 ? buttonHalfPressed
+                : buttonUnpressed}
+            style={{ maxWidth: "2rem" }}
+            alt={inflection === 2 ? "button fully pressed"
+                : inflection === 1 ? "button halp pressed"
+                : "button unpressed"}
+            className="mx-1"
+        />
+    );
+}
+
+export default InlineInflectionButton;
diff --git a/src/components/Table.js b/src/components/Table.js
index 2896f49..a5ae97f 100644
--- a/src/components/Table.js
+++ b/src/components/Table.js
@@ -9,31 +9,33 @@ const isObject = x => (
     typeof x === "object" && x !== null
 );
 
-function Table({ headRow, children, opts }) {
+function Table({ headRow, children, opts, wide }) {
     return (
-        <table class="table">
-            {headRow && <thead>
-                <tr>
-                    {headRow.map((h, i) => (
-                        <th scope="col" key={`headRow ${i}`}>{h}</th>
-                    ))}
-                </tr>
-            </thead>}
-            <tbody>
-                {children.map((row, i) => (
-                    <tr key={`row ${i}`}>
-                        {row.map((cell, j) => (
-                            <td key={`row ${i}, cell ${j}`} style={cell.gender ? { backgroundColor: cell.gender === "m" ? mascColor : femColor } : {}}>
-                                {isObject(cell)
-                                    ? <Examples opts={opts}>{[cell]}</Examples>
-                                    : cell
-                                }
-                            </td>
+        <div style={{ overflowX: "auto", marginBottom: "1em" }}>
+            <table class="table" style={wide ? { minWidth: "635px" } : {}}>
+                {headRow && <thead>
+                    <tr>
+                        {headRow.map((h, i) => (
+                            <th scope="col" key={`headRow ${i}`}>{h}</th>
                         ))}
                     </tr>
-                ))}
-            </tbody>
-        </table>
+                </thead>}
+                <tbody>
+                    {children.map((row, i) => (
+                        <tr key={`row ${i}`}>
+                            {row.map((cell, j) => (
+                                <td key={`row ${i}, cell ${j}`} style={(cell && cell.gender) ? { backgroundColor: cell.gender === "m" ? mascColor : femColor } : {}}>
+                                    {isObject(cell)
+                                        ? (console.log(cell), <Examples opts={opts}>{[cell]}</Examples>)
+                                        : cell
+                                    }
+                                </td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
     );
 }
 
diff --git a/src/content/index.js b/src/content/index.js
index a9151e6..9ff8a43 100644
--- a/src/content/index.js
+++ b/src/content/index.js
@@ -25,6 +25,7 @@ import * as sentenceStructure from "!babel-loader!mdx-loader!./verbs/sentence-st
 import * as pronounsBasic from "!babel-loader!mdx-loader!./pronouns/pronouns-basic.mdx";
 import * as pronounsMini from "!babel-loader!mdx-loader!./pronouns/pronouns-mini.mdx";
 
+import * as inflectionIntro from "!babel-loader!mdx-loader!./inflection/inflection-intro.mdx";
 import * as inflectionPatterns from "!babel-loader!mdx-loader!./inflection/inflection-patterns.mdx";
 
 const contentTree = [
@@ -108,6 +109,10 @@ const contentTree = [
         heading: "Inflection",
         subdirectory: "inflection",
         chapters: [
+            {
+                import: inflectionIntro,
+                slug: "inflection-intro",
+            },
             {
                 import: inflectionPatterns,
                 slug: "inflection-patterns",
diff --git a/src/content/inflection/inflection-intro.mdx b/src/content/inflection/inflection-intro.mdx
new file mode 100644
index 0000000..95f0137
--- /dev/null
+++ b/src/content/inflection/inflection-intro.mdx
@@ -0,0 +1,134 @@
+---
+title: Intro to Inflection
+date: 2017-07-01
+---
+
+import {
+    defaultTextOptions as opts,
+    Examples,
+    InlinePs,
+    grammarUnits,
+    removeFVariants,
+    InflectionsTable,
+    inflectWord,
+} from "@lingdocs/pashto-inflector";
+import Carousel from "../../components/Carousel";
+import Table from "../../components/Table";
+import InlineInflectionButton from "../../components/InlineInflectionButton";
+import Formula from "../../components/Formula.js";
+import catInflectionGif from "../../images/cat-inflection.gif";
+
+export const singleInflectionHeadRow = [
+    <div className="d-flex flex-row flex-align-items-center">
+        <div className="mr-2"><InlineInflectionButton /></div>
+        <div className="align-self-center">Plain</div>
+    </div>,
+    <div className="d-flex flex-row flex-align-items-center">
+        <div className="mr-2"><InlineInflectionButton inflection={1} /></div>
+        <div className="align-self-center">Inflected</div>
+    </div>,
+];
+
+In Pashto, *nouns and adjectives get morphed or changed in certain situations*. We call this **inflection**.
+
+In this chapter we will explain *why* inflection happens (in what situations words inflect). In the following chapters we will explain *how* inflection happens with different types of words (how exactly the words change).
+
+## 3 reasons to inflect:
+
+There are 3 reasons to inflect a word:
+
+1. It's plural
+2. It's in a sandwich (adpositional phrase)
+3. It's the subject of a transitive past tense verb
+
+For any of these three reasons, you do the same thing to the word: inflect it!
+
+If we think of a word as a little button <InlineInflectionButton />, then we can think of inflection as pressing down the button <InlineInflectionButton inflection={1} /> and modifying the word slightly.
+
+<div className="text-center mb-3">
+    <img src={catInflectionGif} alt="a cat pressing a button for Pashto inflections" className="img-fluid" />
+</div>
+
+### Inflecting for Reason #1 - Plural
+
+<Table headRow={singleInflectionHeadRow} opts={opts}>{[
+    [{p:"سړی", f:"saRey", e:"man"}, {p:"سړي", f:"saRee", e:"men"}],
+    [{p:"ښځه", f:"xudza", e:"woman"}, {p:"ښځې", f:"xudze", e:"women"}],
+]}</Table>
+
+### Inflecting for Reason #2 - Sandwich
+
+Let's attach a little <InlinePs opts={opts} ps={{p:"د ...", f:"du ...", e:"'s, of, possessive"}} /> sandwich to the same words and watch what happens.
+
+<Table headRow={singleInflectionHeadRow} opts={opts}>{[
+    [{p:"سړی", f:"saRey", e:"man"}, {p:"د سړي نوم څه دی؟", f:"du saRee noom tsu dey?", e:"What's the man's name?"}],
+    [{p:"ښځه", f:"xudza", e:"woman"}, {p:"د ښځې نوم څه دی؟", f:"du xudze noom tsu dey?", e:"What's the woman's name?"}],
+]}</Table>
+
+### Inflecting for Reason #3 - Subject of a transitive past tense verb
+
+If a word is the subject of a past tense transitive verb, we also inflect it.
+
+<Table headRow={singleInflectionHeadRow} opts={opts}>{[
+    [{p:"سړی", f:"saRey", e:"man"}, {p:"سړي ډوډۍ وخوړه", f:"saRee DoDuy ookhoRa", e:"The man ate food."}],
+    [{p:"ښځه", f:"xudza", e:"woman"}, {p:"ښځې ډوډۍ وخوړه", f:"xudze DoDuy ookhoRa", e:"The woman ate food."}],
+]}</Table>
+
+Notice how for all these reasons, the exact same thing happened to the words. 
+
+***It doesn't matter if you're inflecting it for reason #1, reason #2, or reason #3. The inflection always looks the same.*** 🤯  
+
+## Double Inflection
+
+So what happens if you need to inflect for two reasons at once? 🤔 
+
+Once a word gets inflected, you can push or bend it even further a second time. Think of the word as a button that gets pushed halfway down, <InlineInflectionButton inflection={1} /> (1st inflection) then all the way down <InlineInflectionButton inflection={2} /> (2nd inflection).
+
+<Table wide headRow={[
+    <div className="d-flex flex-row flex-align-items-center">
+        <div className="mr-2"><InlineInflectionButton /></div>
+        <div className="align-self-center">Plain</div>
+    </div>,
+    <div className="d-flex flex-row flex-align-items-center">
+        <div className="mr-2"><InlineInflectionButton inflection={1} /></div>
+        <div className="align-self-center">1st Inflection</div>
+    </div>,
+    <div className="d-flex flex-row flex-align-items-center">
+        <div className="mr-2"><InlineInflectionButton inflection={2} /></div>
+        <div className="align-self-center">2nd Inflection</div>
+    </div>,
+]} opts={opts}>{[
+    [
+        {p:"سړی", f:"saRey", e:"man"}, 
+        {p:"سړي", f:"saRee"}, 
+        {p:"سړیو", f:"saReyo"},
+    ],
+    [
+        {p:"ښځه", f:"xudza", e:"woman"}, 
+        {p:"ښځې", f:"xudze"}, {p:"ښځو", f:"xudzo"}
+    ],
+    [
+        {p:"دا سړی پښتون دی", f:"daa saRey puxtoon dey", e:"That man is a Pashtun", sub:"no reason to inflect"},
+        {p:"هغوي سړي دي", f:"haghwee saRee dee", e:"They are men", sub:"inflect for plural"},
+        {p:"د سړیو کور هلته دی", f:"du saRiyo kor halta dey", e:"The men's house is there", sub:"inflect for plural and sandwich"},
+    ],
+    [
+        null,
+        {p:"د سړي کور هلته دی", f:"du saRee kor halta dey", e:"The man's house is there", sub:"inflect for sandwich"},
+        null,
+    ],
+    [
+        {p:"دا ښځه پښتنه ده", f:"daa xudza puxtana da", e:"That woman is a Pashtun", sub:"no reason to inflect"},
+        {p:"هغوي ښځې دي", f:"haghwee xudze dee", e:"They are women", sub:"inflect for plural"},
+        {p:"د ښځو کور هلته دی", f:"du xudzo kor halta dey", e:"The ladies' house is there", sub:"inflect for plural and sandwich"},
+    ],
+    [
+        null,
+        {p:"د ښځې کور هلته دی", f:"du xudze kor halta dey", e:"The woman's house is there", sub:"inflect for sandwich"},
+        null,
+    ],
+]}</Table>
+
+## Exceptions
+
+There are a few exceptions where words may avoid certain inflections... more will be written on that later.
\ No newline at end of file
diff --git a/src/images/button-fully-pressed.png b/src/images/button-fully-pressed.png
new file mode 100644
index 0000000..7b0242e
Binary files /dev/null and b/src/images/button-fully-pressed.png differ
diff --git a/src/images/button-half-pressed.png b/src/images/button-half-pressed.png
new file mode 100644
index 0000000..b522d6c
Binary files /dev/null and b/src/images/button-half-pressed.png differ
diff --git a/src/images/button-unpressed.png b/src/images/button-unpressed.png
new file mode 100644
index 0000000..33164cf
Binary files /dev/null and b/src/images/button-unpressed.png differ
diff --git a/src/images/cat-inflection.gif b/src/images/cat-inflection.gif
new file mode 100644
index 0000000..0934dae
Binary files /dev/null and b/src/images/cat-inflection.gif differ
diff --git a/yarn.lock b/yarn.lock
index 6f320a1..481bd1b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1505,9 +1505,9 @@
     chalk "^4.0.0"
 
 "@lingdocs/pashto-inflector@^0.3.7":
-  version "0.3.7"
-  resolved "https://npm.lingdocs.com/@lingdocs%2fpashto-inflector/-/pashto-inflector-0.3.7.tgz#24a656f8912555cd13a9bb3ef0ea64c4e6d6bdf4"
-  integrity sha512-J6twWM5DeCZCMn5D94/0nt9L0iJk/v3KTKVmrYTTgrYwuStOGV9hj3k6SIzd4mKuFxbTAj6DY9dXpQHEUKp7yQ==
+  version "0.3.8"
+  resolved "https://npm.lingdocs.com/@lingdocs%2fpashto-inflector/-/pashto-inflector-0.3.8.tgz#0bcf3acc3d8fe56099f445d5789041cd8965d1d8"
+  integrity sha512-BTzCVGrd79DgjXVD4yvB2jQL4EYJshafFy9IgzRwj0CyWE9crKcMGpeDdXi+h/kxXLQQ1L7vRwPfElSSvwW3GA==
   dependencies:
     classnames "^2.2.6"
     pbf "^3.2.1"