diff --git a/components/Buttons/README.md b/components/Buttons/README.md
index ebb2fcf37d7..da702548ae5 100644
--- a/components/Buttons/README.md
+++ b/components/Buttons/README.md
@@ -11,7 +11,7 @@ path: /catalog/buttons/
 
 <!--{% if site.link_to_site == "true" %}-->
 <div class="article__asset article__asset--screenshot">
-  <img src="docs/assets/buttons.png" alt="Buttons" width="320">
+  <img src="docs/assets/buttons.png" alt="Buttons" width="375">
 </div>
 <!--{% else %}
 <div class="article__asset article__asset--screenshot" markdown="1">
diff --git a/components/Buttons/docs/assets/buttons.png b/components/Buttons/docs/assets/buttons.png
index a9101ecaf9e..1bf8850fded 100644
Binary files a/components/Buttons/docs/assets/buttons.png and b/components/Buttons/docs/assets/buttons.png differ
diff --git a/components/PageControl/README.md b/components/PageControl/README.md
index 2f4367724d9..fe1925619a0 100644
--- a/components/PageControl/README.md
+++ b/components/PageControl/README.md
@@ -10,7 +10,7 @@ path: /catalog/page-controls/
 
 <!--{% if site.link_to_site == "true" %}-->
 <div class="article__asset article__asset--screenshot">
-  <img src="docs/assets/page_control.png" alt="Page Control" width="320">
+  <img src="docs/assets/page_control.png" alt="Page Control" width="375">
 </div>
 <!--{% else %}
 <div class="article__asset article__asset--screenshot" markdown="1">
diff --git a/components/PageControl/docs/assets/MDCPageControl_screenshot-1.png b/components/PageControl/docs/assets/MDCPageControl_screenshot-1.png
index ce9e1bac7b8..6a66d4ee769 100644
Binary files a/components/PageControl/docs/assets/MDCPageControl_screenshot-1.png and b/components/PageControl/docs/assets/MDCPageControl_screenshot-1.png differ
diff --git a/components/PageControl/docs/assets/MDCPageControl_screenshot-2.png b/components/PageControl/docs/assets/MDCPageControl_screenshot-2.png
index 29bbeffb386..98859ea151a 100644
Binary files a/components/PageControl/docs/assets/MDCPageControl_screenshot-2.png and b/components/PageControl/docs/assets/MDCPageControl_screenshot-2.png differ
diff --git a/components/PageControl/docs/assets/MDCPageControl_screenshot-3.png b/components/PageControl/docs/assets/MDCPageControl_screenshot-3.png
index 9a6fc3b951e..84ae4d40ab4 100644
Binary files a/components/PageControl/docs/assets/MDCPageControl_screenshot-3.png and b/components/PageControl/docs/assets/MDCPageControl_screenshot-3.png differ
diff --git a/components/PageControl/docs/assets/page_control.png b/components/PageControl/docs/assets/page_control.png
index 804874f7016..7a0a87067ce 100644
Binary files a/components/PageControl/docs/assets/page_control.png and b/components/PageControl/docs/assets/page_control.png differ
diff --git a/components/Typography/README.md b/components/Typography/README.md
index f6c89615dcc..cd33447fa0d 100644
--- a/components/Typography/README.md
+++ b/components/Typography/README.md
@@ -11,7 +11,7 @@ path: /catalog/typography/
 
 <!--{% if site.link_to_site == "true" %}-->
 <div class="article__asset article__asset--screenshot">
-  <img src="docs/assets/typography.png" alt="Typography" width="320">
+  <img src="docs/assets/typography.png" alt="Typography" width="375">
 </div>
 <!--{% else %}
 <div class="article__asset article__asset--screenshot" markdown="1">
diff --git a/components/Typography/docs/assets/typography.png b/components/Typography/docs/assets/typography.png
index 0ae1bdd5a0e..f1e71048181 100644
Binary files a/components/Typography/docs/assets/typography.png and b/components/Typography/docs/assets/typography.png differ