diff --git a/client/i18n/intro-schema.js b/client/i18n/intro-schema.js
index fb790b747f..07980da317 100644
--- a/client/i18n/intro-schema.js
+++ b/client/i18n/intro-schema.js
@@ -10,13 +10,6 @@ const introSchema = {
       "First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.",
       "Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid."
     ],
-    image:
-      'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/building_websites_i78t.svg',
-    'image-alt': 'Three people designing a responsive website layout together',
-    icon:
-      'https://cdn3.iconfinder.com/data/icons/seo-web-5-1/128/Vigor_responsive-web-design-adaptive-64.png',
-    'icon-alt':
-      'A computer monitor with the desktop view and a smartphone with the mobile view of the same website.',
     blocks: {
       'basic-html-and-html5': {
         title: 'Basic HTML and HTML5',
@@ -95,12 +88,6 @@ const introSchema = {
       "Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.",
       "Along the way, you'll also learn two important programing styles or paradigms: Object Oriented Programing (OOP), and Functional Programing (FP)."
     ],
-    image:
-      'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/dev_focus_b9xo.svg',
-    'image-alt': 'A person working on a laptop',
-    icon:
-      'https://i2.wp.com/info.widespace.com/wp-content/uploads/2016/03/javascript-shield-logo.png?ssl=1',
-    'icon-alt': 'JavaScript shield logo',
     blocks: {
       'basic-javascript': {
         title: 'Basic JavaScript',
@@ -195,12 +182,6 @@ const introSchema = {
       "In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
       "Later, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux."
     ],
-    image:
-      'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/react_y7wq.svg',
-    'image-alt': 'A person sitting atop the react logo',
-    icon:
-      'https://cdn4.iconfinder.com/data/icons/logos-3/600/React.js_logo-64.png',
-    'icon-alt': 'React logo',
     blocks: {
       bootstrap: {
         title: 'Bootstrap',
@@ -263,13 +244,6 @@ const introSchema = {
       "In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
       "You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programing Interface)."
     ],
-    image:
-      'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Data_re_80ws.svg',
-    'image-alt':
-      'Three people placing charts and graphs onto a browser interface',
-    icon:
-      'https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667',
-    'icon-alt': 'D3 logo',
     blocks: {
       'data-visualization-with-d3': {
         title: 'Data Visualization with D3',
@@ -308,12 +282,6 @@ const introSchema = {
       'Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.',
       "In the APIs and Microservices Certification, you'll learn how to write back end-ready with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
     ],
-    image:
-      'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/server_status_5pbv.svg',
-    'image-alt': 'A person standing next to a database icon larger than her',
-    icon:
-      'https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Cloud-Server-Database-Hosting-64.png',
-    'icon-alt': 'A server in front of a cloud.',
     blocks: {
       'managing-packages-with-npm': {
         title: 'Managing Packages with NPM',
@@ -355,12 +323,6 @@ const introSchema = {
       "In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
       "Then you'll build a chat application to learn advanced Node and Express concepts. You'll also use Pug as a template engine, Passport for authentication, and Socket.io for real-time communication between the server and connected clients."
     ],
-    image:
-      'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/usability_testing_2xs4.svg',
-    'image-alt': 'Two people interacting with a website',
-    icon:
-      'https://cdn1.iconfinder.com/data/icons/smallicons-misc/32/clipboard-64.png',
-    'icon-alt': 'A clipboard with a bulleted list.',
     blocks: {
       'quality-assurance-and-testing-with-chai': {
         title: 'Quality Assurance and Testing with Chai',
@@ -393,12 +355,6 @@ const introSchema = {
       'Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.',
       "In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
     ],
-    image:
-      'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/pair_programming_njlp.svg',
-    'image-alt': 'Two people sitting in front of a computer',
-    icon:
-      'https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/267_Python_logo-64.png',
-    'icon-alt': 'Python logo',
     blocks: {
       'python-for-everybody': {
         title: 'Python for Everybody',
@@ -421,12 +377,6 @@ const introSchema = {
       'Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.',
       "In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
     ],
-    image:
-      'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/design_data_khdb.svg',
-    'image-alt': 'A person looking at various charts',
-    icon:
-      'https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Analytics-Graph-Statistics-64.png',
-    'icon-alt': 'A line graph',
     blocks: {
       'data-analysis-with-python-course': {
         title: 'Data Analysis with Python',
@@ -458,12 +408,6 @@ const introSchema = {
       "With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
       "You'll also build a TCP client, and an Nmap and port scanner in Python. This will help you learn the basics of penetration testing — an important component of good information security."
     ],
-    image:
-      'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/security_o890.svg',
-    'image-alt': 'A person standing in front of a browser with a padlock',
-    icon:
-      'https://cdn1.iconfinder.com/data/icons/unigrid-phantom-security-vol-1/60/013_005_shield_protect_protection_security_secure_guard_guardian_defense_firewall_5-64.png',
-    'icon-alt': 'Green shield logo',
     blocks: {
       'information-security-with-helmetjs': {
         title: 'Information Security with HelmetJS',
@@ -495,11 +439,6 @@ const introSchema = {
       "In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
       "You'll also dive into neural networks, and learn the principles behind how deep, recurrent, and convolutional neural networks work."
     ],
-    image:
-      'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Artificial_intelligence_re_enpp.svg',
-    'image-alt': 'A person holding a cell phone standing next to a robot',
-    icon: 'https://www.kubeflow.org/docs/images/logos/TensorFlow.png',
-    'icon-alt': 'TensorFlow logo',
     blocks: {
       tensorflow: {
         title: 'Tensorflow',
@@ -529,13 +468,6 @@ const introSchema = {
       "If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
       'This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio.'
     ],
-    image:
-      'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/software_engineer_lvl5.svg',
-    'image-alt':
-      'A person sitting at a computer with a data structure in the background',
-    icon:
-      'https://cdn1.iconfinder.com/data/icons/data-science-flat-1/64/neural-network-machine-learning-algorithm-64.png',
-    'icon-alt': 'Algorithm, creative shape icon',
     blocks: {
       algorithms: {
         title: 'Algorithms',
@@ -578,9 +510,9 @@ const introSchema = {
     certification: '{{cert}} Certification',
     'browse-other':
       'Browse our other free certifications\n(we recommend doing these in order)',
-    courses: 'courses',
-    'section-courses': '{{section}} courses'
+    courses: 'Courses',
+    expand: 'Expand',
+    collapse: 'Collapse'
   }
 };
-
 exports.introSchema = introSchema;
diff --git a/client/i18n/locales/chinese/intro.json b/client/i18n/locales/chinese/intro.json
index 3b53c44832..1dbf447d8b 100644
--- a/client/i18n/locales/chinese/intro.json
+++ b/client/i18n/locales/chinese/intro.json
@@ -6,10 +6,6 @@
       "First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.",
       "Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/building_websites_i78t.svg",
-    "image-alt": "Three people designing a responsive website layout together",
-    "icon": "https://cdn3.iconfinder.com/data/icons/seo-web-5-1/128/Vigor_responsive-web-design-adaptive-64.png",
-    "icon-alt": "A computer monitor with the desktop view and a smartphone with the mobile view of the same website.",
     "blocks": {
       "basic-html-and-html5": {
         "title": "Basic HTML and HTML5",
@@ -88,10 +84,6 @@
       "Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.",
       "Along the way, you'll also learn two important programing styles or paradigms: Object Oriented Programing (OOP), and Functional Programing (FP)."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/dev_focus_b9xo.svg",
-    "image-alt": "A person working on a laptop",
-    "icon": "https://i2.wp.com/info.widespace.com/wp-content/uploads/2016/03/javascript-shield-logo.png?ssl=1",
-    "icon-alt": "JavaScript shield logo",
     "blocks": {
       "basic-javascript": {
         "title": "Basic JavaScript",
@@ -186,10 +178,6 @@
       "In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
       "Later, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/react_y7wq.svg",
-    "image-alt": "A person sitting atop the react logo",
-    "icon": "https://cdn4.iconfinder.com/data/icons/logos-3/600/React.js_logo-64.png",
-    "icon-alt": "React logo",
     "blocks": {
       "bootstrap": {
         "title": "Bootstrap",
@@ -252,10 +240,6 @@
       "In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
       "You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programing Interface)."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Data_re_80ws.svg",
-    "image-alt": "Three people placing charts and graphs onto a browser interface",
-    "icon": "https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667",
-    "icon-alt": "D3 logo",
     "blocks": {
       "data-visualization-with-d3": {
         "title": "Data Visualization with D3",
@@ -294,10 +278,6 @@
       "Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.",
       "In the APIs and Microservices Certification, you'll learn how to write back end-ready with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/server_status_5pbv.svg",
-    "image-alt": "A person standing next to a database icon larger than her",
-    "icon": "https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Cloud-Server-Database-Hosting-64.png",
-    "icon-alt": "A server in front of a cloud.",
     "blocks": {
       "managing-packages-with-npm": {
         "title": "Managing Packages with NPM",
@@ -339,10 +319,6 @@
       "In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
       "Then you'll build a chat application to learn advanced Node and Express concepts. You'll also use Pug as a template engine, Passport for authentication, and Socket.io for real-time communication between the server and connected clients."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/usability_testing_2xs4.svg",
-    "image-alt": "Two people interacting with a website",
-    "icon": "https://cdn1.iconfinder.com/data/icons/smallicons-misc/32/clipboard-64.png",
-    "icon-alt": "A clipboard with a bulleted list.",
     "blocks": {
       "quality-assurance-and-testing-with-chai": {
         "title": "Quality Assurance and Testing with Chai",
@@ -375,10 +351,6 @@
       "Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.",
       "In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/pair_programming_njlp.svg",
-    "image-alt": "Two people sitting in front of a computer",
-    "icon": "https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/267_Python_logo-64.png",
-    "icon-alt": "Python logo",
     "blocks": {
       "python-for-everybody": {
         "title": "Python for Everybody",
@@ -401,10 +373,6 @@
       "Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.",
       "In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/design_data_khdb.svg",
-    "image-alt": "A person looking at various charts",
-    "icon": "https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Analytics-Graph-Statistics-64.png",
-    "icon-alt": "A line graph",
     "blocks": {
       "data-analysis-with-python-course": {
         "title": "Data Analysis with Python",
@@ -436,10 +404,6 @@
       "With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
       "You'll also build a TCP client, and an Nmap and port scanner in Python. This will help you learn the basics of penetration testing — an important component of good information security."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/security_o890.svg",
-    "image-alt": "A person standing in front of a browser with a padlock",
-    "icon": "https://cdn1.iconfinder.com/data/icons/unigrid-phantom-security-vol-1/60/013_005_shield_protect_protection_security_secure_guard_guardian_defense_firewall_5-64.png",
-    "icon-alt": "Green shield logo",
     "blocks": {
       "information-security-with-helmetjs": {
         "title": "Information Security with HelmetJS",
@@ -471,10 +435,6 @@
       "In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
       "You'll also dive into neural networks, and learn the principles behind how deep, recurrent, and convolutional neural networks work."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Artificial_intelligence_re_enpp.svg",
-    "image-alt": "A person holding a cell phone standing next to a robot",
-    "icon": "https://www.kubeflow.org/docs/images/logos/TensorFlow.png",
-    "icon-alt": "TensorFlow logo",
     "blocks": {
       "tensorflow": {
         "title": "Tensorflow",
@@ -504,10 +464,6 @@
       "If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
       "This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/software_engineer_lvl5.svg",
-    "image-alt": "A person sitting at a computer with a data structure in the background",
-    "icon": "https://cdn1.iconfinder.com/data/icons/data-science-flat-1/64/neural-network-machine-learning-algorithm-64.png",
-    "icon-alt": "Algorithm, creative shape icon",
     "blocks": {
       "algorithms": {
         "title": "Algorithms",
@@ -549,7 +505,8 @@
   "misc-text": {
     "certification": "{{cert}} Certification",
     "browse-other": "Browse our other free certifications\n(we recommend doing these in order)",
-    "courses": "courses",
-    "section-courses": "{{section}} courses"
+    "courses": "Courses",
+    "expand": "Expand",
+    "collapse": "Collapse"
   }
 }
diff --git a/client/i18n/locales/chinese/translations.json b/client/i18n/locales/chinese/translations.json
index 427e0ed4ca..554d94a03c 100644
--- a/client/i18n/locales/chinese/translations.json
+++ b/client/i18n/locales/chinese/translations.json
@@ -404,7 +404,18 @@
     "initial": "初始",
     "info": "介绍信息",
     "spacer": "间隔",
-    "toggle": "切换选中标记"
+    "toggle": "切换选中标记",
+    "responsive-design": "Laptop and mobile phone icon",
+    "javascript": "JavaScript icon",
+    "react": "React icon",
+    "d3": "D3 icon",
+    "api": "A stack of servers",
+    "clipboard": "A clipboard with a checkmark",
+    "python": "Python icon",
+    "analytics": "A bar chart and line graph",
+    "shield": "A shield with a checkmark",
+    "tensorflow": "Tensorflow icon",
+    "algorithm": "Branching nodes"
   },
   "aria": {
     "fcc-logo": "freeCodeCamp Logo",
diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 6f3ff08613..1dbf447d8b 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -6,10 +6,6 @@
       "First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.",
       "Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/building_websites_i78t.svg",
-    "image-alt": "Three people designing a responsive website layout together",
-    "icon": "https://cdn3.iconfinder.com/data/icons/seo-web-5-1/128/Vigor_responsive-web-design-adaptive-64.png",
-    "icon-alt": "A computer monitor with the desktop view and a smartphone with the mobile view of the same website.",
     "blocks": {
       "basic-html-and-html5": {
         "title": "Basic HTML and HTML5",
@@ -88,10 +84,6 @@
       "Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.",
       "Along the way, you'll also learn two important programing styles or paradigms: Object Oriented Programing (OOP), and Functional Programing (FP)."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/dev_focus_b9xo.svg",
-    "image-alt": "A person working on a laptop",
-    "icon": "https://i2.wp.com/info.widespace.com/wp-content/uploads/2016/03/javascript-shield-logo.png?ssl=1",
-    "icon-alt": "JavaScript shield logo",
     "blocks": {
       "basic-javascript": {
         "title": "Basic JavaScript",
@@ -186,10 +178,6 @@
       "In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
       "Later, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/react_y7wq.svg",
-    "image-alt": "A person sitting atop the react logo",
-    "icon": "https://cdn4.iconfinder.com/data/icons/logos-3/600/React.js_logo-64.png",
-    "icon-alt": "React logo",
     "blocks": {
       "bootstrap": {
         "title": "Bootstrap",
@@ -252,10 +240,6 @@
       "In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
       "You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programing Interface)."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Data_re_80ws.svg",
-    "image-alt": "Three people placing charts and graphs onto a browser interface",
-    "icon": "https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667",
-    "icon-alt": "D3 logo",
     "blocks": {
       "data-visualization-with-d3": {
         "title": "Data Visualization with D3",
@@ -294,10 +278,6 @@
       "Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.",
       "In the APIs and Microservices Certification, you'll learn how to write back end-ready with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/server_status_5pbv.svg",
-    "image-alt": "A person standing next to a database icon larger than her",
-    "icon": "https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Cloud-Server-Database-Hosting-64.png",
-    "icon-alt": "A server in front of a cloud.",
     "blocks": {
       "managing-packages-with-npm": {
         "title": "Managing Packages with NPM",
@@ -339,10 +319,6 @@
       "In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
       "Then you'll build a chat application to learn advanced Node and Express concepts. You'll also use Pug as a template engine, Passport for authentication, and Socket.io for real-time communication between the server and connected clients."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/usability_testing_2xs4.svg",
-    "image-alt": "Two people interacting with a website",
-    "icon": "https://cdn1.iconfinder.com/data/icons/smallicons-misc/32/clipboard-64.png",
-    "icon-alt": "A clipboard with a bulleted list.",
     "blocks": {
       "quality-assurance-and-testing-with-chai": {
         "title": "Quality Assurance and Testing with Chai",
@@ -375,10 +351,6 @@
       "Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.",
       "In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/pair_programming_njlp.svg",
-    "image-alt": "Two people sitting in front of a computer",
-    "icon": "https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/267_Python_logo-64.png",
-    "icon-alt": "Python logo",
     "blocks": {
       "python-for-everybody": {
         "title": "Python for Everybody",
@@ -401,10 +373,6 @@
       "Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.",
       "In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/design_data_khdb.svg",
-    "image-alt": "A person looking at various charts",
-    "icon": "https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Analytics-Graph-Statistics-64.png",
-    "icon-alt": "A line graph",
     "blocks": {
       "data-analysis-with-python-course": {
         "title": "Data Analysis with Python",
@@ -436,10 +404,6 @@
       "With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
       "You'll also build a TCP client, and an Nmap and port scanner in Python. This will help you learn the basics of penetration testing — an important component of good information security."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/security_o890.svg",
-    "image-alt": "A person standing in front of a browser with a padlock",
-    "icon": "https://cdn1.iconfinder.com/data/icons/unigrid-phantom-security-vol-1/60/013_005_shield_protect_protection_security_secure_guard_guardian_defense_firewall_5-64.png",
-    "icon-alt": "Green shield logo",
     "blocks": {
       "information-security-with-helmetjs": {
         "title": "Information Security with HelmetJS",
@@ -471,10 +435,6 @@
       "In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
       "You'll also dive into neural networks, and learn the principles behind how deep, recurrent, and convolutional neural networks work."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Artificial_intelligence_re_enpp.svg",
-    "image-alt": "A person holding a cell phone standing next to a robot",
-    "icon": "https://www.kubeflow.org/docs/images/logos/TensorFlow.png",
-    "icon-alt": "TensorFlow logo",
     "blocks": {
       "tensorflow": {
         "title": "Tensorflow",
@@ -504,10 +464,6 @@
       "If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
       "This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/software_engineer_lvl5.svg",
-    "image-alt": "A person sitting at a computer with a data structure in the background",
-    "icon": "https://cdn1.iconfinder.com/data/icons/data-science-flat-1/64/neural-network-machine-learning-algorithm-64.png",
-    "icon-alt": "Algorithm, creative shape icon",
     "blocks": {
       "algorithms": {
         "title": "Algorithms",
@@ -550,6 +506,7 @@
     "certification": "{{cert}} Certification",
     "browse-other": "Browse our other free certifications\n(we recommend doing these in order)",
     "courses": "Courses",
-    "section-courses": "{{section}} Courses"
+    "expand": "Expand",
+    "collapse": "Collapse"
   }
 }
diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index 6003040630..96d48db7ba 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -406,7 +406,18 @@
     "initial": "Initial",
     "info": "Intro Information",
     "spacer": "Spacer",
-    "toggle": "Toggle Checkmark"
+    "toggle": "Toggle Checkmark",
+    "responsive-design": "Laptop and mobile phone icon",
+    "javascript": "JavaScript icon",
+    "react": "React icon",
+    "d3": "D3 icon",
+    "api": "A stack of servers",
+    "clipboard": "A clipboard with a checkmark",
+    "python": "Python icon",
+    "analytics": "A bar chart and line graph",
+    "shield": "A shield with a checkmark",
+    "tensorflow": "Tensorflow icon",
+    "algorithm": "Branching nodes"
   },
   "aria": {
     "fcc-logo": "freeCodeCamp Logo",
diff --git a/client/i18n/locales/espanol/intro.json b/client/i18n/locales/espanol/intro.json
index 3b53c44832..1dbf447d8b 100644
--- a/client/i18n/locales/espanol/intro.json
+++ b/client/i18n/locales/espanol/intro.json
@@ -6,10 +6,6 @@
       "First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.",
       "Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/building_websites_i78t.svg",
-    "image-alt": "Three people designing a responsive website layout together",
-    "icon": "https://cdn3.iconfinder.com/data/icons/seo-web-5-1/128/Vigor_responsive-web-design-adaptive-64.png",
-    "icon-alt": "A computer monitor with the desktop view and a smartphone with the mobile view of the same website.",
     "blocks": {
       "basic-html-and-html5": {
         "title": "Basic HTML and HTML5",
@@ -88,10 +84,6 @@
       "Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.",
       "Along the way, you'll also learn two important programing styles or paradigms: Object Oriented Programing (OOP), and Functional Programing (FP)."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/dev_focus_b9xo.svg",
-    "image-alt": "A person working on a laptop",
-    "icon": "https://i2.wp.com/info.widespace.com/wp-content/uploads/2016/03/javascript-shield-logo.png?ssl=1",
-    "icon-alt": "JavaScript shield logo",
     "blocks": {
       "basic-javascript": {
         "title": "Basic JavaScript",
@@ -186,10 +178,6 @@
       "In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
       "Later, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/react_y7wq.svg",
-    "image-alt": "A person sitting atop the react logo",
-    "icon": "https://cdn4.iconfinder.com/data/icons/logos-3/600/React.js_logo-64.png",
-    "icon-alt": "React logo",
     "blocks": {
       "bootstrap": {
         "title": "Bootstrap",
@@ -252,10 +240,6 @@
       "In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
       "You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programing Interface)."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Data_re_80ws.svg",
-    "image-alt": "Three people placing charts and graphs onto a browser interface",
-    "icon": "https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667",
-    "icon-alt": "D3 logo",
     "blocks": {
       "data-visualization-with-d3": {
         "title": "Data Visualization with D3",
@@ -294,10 +278,6 @@
       "Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.",
       "In the APIs and Microservices Certification, you'll learn how to write back end-ready with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/server_status_5pbv.svg",
-    "image-alt": "A person standing next to a database icon larger than her",
-    "icon": "https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Cloud-Server-Database-Hosting-64.png",
-    "icon-alt": "A server in front of a cloud.",
     "blocks": {
       "managing-packages-with-npm": {
         "title": "Managing Packages with NPM",
@@ -339,10 +319,6 @@
       "In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
       "Then you'll build a chat application to learn advanced Node and Express concepts. You'll also use Pug as a template engine, Passport for authentication, and Socket.io for real-time communication between the server and connected clients."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/usability_testing_2xs4.svg",
-    "image-alt": "Two people interacting with a website",
-    "icon": "https://cdn1.iconfinder.com/data/icons/smallicons-misc/32/clipboard-64.png",
-    "icon-alt": "A clipboard with a bulleted list.",
     "blocks": {
       "quality-assurance-and-testing-with-chai": {
         "title": "Quality Assurance and Testing with Chai",
@@ -375,10 +351,6 @@
       "Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.",
       "In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/pair_programming_njlp.svg",
-    "image-alt": "Two people sitting in front of a computer",
-    "icon": "https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/267_Python_logo-64.png",
-    "icon-alt": "Python logo",
     "blocks": {
       "python-for-everybody": {
         "title": "Python for Everybody",
@@ -401,10 +373,6 @@
       "Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.",
       "In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/design_data_khdb.svg",
-    "image-alt": "A person looking at various charts",
-    "icon": "https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Analytics-Graph-Statistics-64.png",
-    "icon-alt": "A line graph",
     "blocks": {
       "data-analysis-with-python-course": {
         "title": "Data Analysis with Python",
@@ -436,10 +404,6 @@
       "With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
       "You'll also build a TCP client, and an Nmap and port scanner in Python. This will help you learn the basics of penetration testing — an important component of good information security."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/security_o890.svg",
-    "image-alt": "A person standing in front of a browser with a padlock",
-    "icon": "https://cdn1.iconfinder.com/data/icons/unigrid-phantom-security-vol-1/60/013_005_shield_protect_protection_security_secure_guard_guardian_defense_firewall_5-64.png",
-    "icon-alt": "Green shield logo",
     "blocks": {
       "information-security-with-helmetjs": {
         "title": "Information Security with HelmetJS",
@@ -471,10 +435,6 @@
       "In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
       "You'll also dive into neural networks, and learn the principles behind how deep, recurrent, and convolutional neural networks work."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Artificial_intelligence_re_enpp.svg",
-    "image-alt": "A person holding a cell phone standing next to a robot",
-    "icon": "https://www.kubeflow.org/docs/images/logos/TensorFlow.png",
-    "icon-alt": "TensorFlow logo",
     "blocks": {
       "tensorflow": {
         "title": "Tensorflow",
@@ -504,10 +464,6 @@
       "If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
       "This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio."
     ],
-    "image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/software_engineer_lvl5.svg",
-    "image-alt": "A person sitting at a computer with a data structure in the background",
-    "icon": "https://cdn1.iconfinder.com/data/icons/data-science-flat-1/64/neural-network-machine-learning-algorithm-64.png",
-    "icon-alt": "Algorithm, creative shape icon",
     "blocks": {
       "algorithms": {
         "title": "Algorithms",
@@ -549,7 +505,8 @@
   "misc-text": {
     "certification": "{{cert}} Certification",
     "browse-other": "Browse our other free certifications\n(we recommend doing these in order)",
-    "courses": "courses",
-    "section-courses": "{{section}} courses"
+    "courses": "Courses",
+    "expand": "Expand",
+    "collapse": "Collapse"
   }
 }
diff --git a/client/i18n/locales/espanol/translations.json b/client/i18n/locales/espanol/translations.json
index c8846a07b2..b86238bc08 100644
--- a/client/i18n/locales/espanol/translations.json
+++ b/client/i18n/locales/espanol/translations.json
@@ -406,7 +406,18 @@
     "initial": "Inicial",
     "info": "Información de introducción",
     "spacer": "Espaciador",
-    "toggle": "Alternar marca de verificación"
+    "toggle": "Alternar marca de verificación",
+    "responsive-design": "Laptop and mobile phone icon",
+    "javascript": "JavaScript icon",
+    "react": "React icon",
+    "d3": "D3 icon",
+    "api": "A stack of servers",
+    "clipboard": "A clipboard with a checkmark",
+    "python": "Python icon",
+    "analytics": "A bar chart and line graph",
+    "shield": "A shield with a checkmark",
+    "tensorflow": "Tensorflow icon",
+    "algorithm": "Branching nodes"
   },
   "aria": {
     "fcc-logo": "freeCodeCamp Logo",
diff --git a/client/i18n/translations-schema.js b/client/i18n/translations-schema.js
index e4ea14b1ad..bbd5701b71 100644
--- a/client/i18n/translations-schema.js
+++ b/client/i18n/translations-schema.js
@@ -415,7 +415,7 @@ const translationsSchema = {
     'bigger-donation':
       'Want to make a bigger one-time donation, mail us a check, or give in other ways?',
     'other-ways':
-      "Here are many <0>other ways we could support our non-profit's mission</0>.",
+      "Here are many <0>other ways you can support our non-profit's mission</0>.",
     'other-ways-url':
       'https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp',
     'failed-pay':
@@ -477,7 +477,18 @@ const translationsSchema = {
     initial: 'Initial',
     info: 'Intro Information',
     spacer: 'Spacer',
-    toggle: 'Toggle Checkmark'
+    toggle: 'Toggle Checkmark',
+    'responsive-design': 'Laptop and mobile phone icon',
+    javascript: 'JavaScript icon',
+    react: 'React icon',
+    d3: 'D3 icon',
+    api: 'A stack of servers',
+    clipboard: 'A clipboard with a checkmark',
+    python: 'Python icon',
+    analytics: 'A bar chart and line graph',
+    shield: 'A shield with a checkmark',
+    tensorflow: 'Tensorflow icon',
+    algorithm: 'Branching nodes'
   },
   aria: {
     'fcc-logo': 'freeCodeCamp Logo',
diff --git a/client/src/assets/icons/APIIcon.js b/client/src/assets/icons/APIIcon.js
new file mode 100644
index 0000000000..c798554d83
--- /dev/null
+++ b/client/src/assets/icons/APIIcon.js
@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function APIIcon(props) {
+  const { t } = useTranslation();
+
+  return (
+    <Fragment>
+      <span className='sr-only'>{t('icons.api')}</span>
+      <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' {...props}>
+        <path d='M424 400c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24zm-88-24c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm64-144c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm176-72a47.758 47.758 0 01-6.438 24A47.758 47.758 0 01512 208v96a47.758 47.758 0 01-6.438 24A47.758 47.758 0 01512 352v96c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48v-96a47.758 47.758 0 016.438-24A47.758 47.758 0 010 304v-96a47.758 47.758 0 016.438-24A47.758 47.758 0 010 160V64c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v96zm-464 0h416V64H48v96zm416 48H48v96h416v-96zm0 144H48v96h416v-96zm-64-216c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24zm-64 0c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24z' />
+      </svg>
+    </Fragment>
+  );
+}
+
+APIIcon.displayName = 'APIIcon';
+
+export default APIIcon;
diff --git a/client/src/assets/icons/Algorithm.js b/client/src/assets/icons/Algorithm.js
new file mode 100644
index 0000000000..3b4ec28558
--- /dev/null
+++ b/client/src/assets/icons/Algorithm.js
@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function Algorithm(props) {
+  const { t } = useTranslation();
+
+  return (
+    <Fragment>
+      <span className='sr-only'>{t('icons.algorithm')}</span>
+      <svg viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg' {...props}>
+        <path d='M568 368c-19.1 0-36.3 7.6-49.2 19.7L440.6 343c4.5-12.2 7.4-25.2 7.4-39 0-61.9-50.1-112-112-112-8.4 0-16.6 1.1-24.4 2.9l-32.2-69c15-13.2 24.6-32.3 24.6-53.8 0-39.8-32.2-72-72-72s-72 32.2-72 72 32.2 72 72 72c.9 0 1.8-.2 2.7-.3l33.5 71.7C241.5 235.9 224 267.8 224 304c0 61.9 50.1 112 112 112 30.7 0 58.6-12.4 78.8-32.5l82.2 47c-.4 3.1-1 6.3-1 9.5 0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72zM232 96c-13.2 0-24-10.8-24-24s10.8-24 24-24 24 10.8 24 24-10.8 24-24 24zm104 272c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm232 96c-13.2 0-24-10.8-24-24s10.8-24 24-24 24 10.8 24 24-10.8 24-24 24zm-54.4-261.2l-19.2-25.6-48 36 19.2 25.6 48-36zM576 192c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zM152 320h48v-32h-48v32zm-88-80c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64z' />
+      </svg>
+    </Fragment>
+  );
+}
+
+Algorithm.displayName = 'Algorithm';
+
+export default Algorithm;
diff --git a/client/src/assets/icons/Analytics.js b/client/src/assets/icons/Analytics.js
new file mode 100644
index 0000000000..3d1263b173
--- /dev/null
+++ b/client/src/assets/icons/Analytics.js
@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function Analytics(props) {
+  const { t } = useTranslation();
+
+  return (
+    <Fragment>
+      <span className='sr-only'>{t('icons.analytics')}</span>
+      <svg viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg' {...props}>
+        <path d='M510.62 92.63C516.03 94.74 521.85 96 528 96c26.51 0 48-21.49 48-48S554.51 0 528 0s-48 21.49-48 48c0 2.43.37 4.76.71 7.09l-95.34 76.27c-5.4-2.11-11.23-3.37-17.38-3.37s-11.97 1.26-17.38 3.37L255.29 55.1c.35-2.33.71-4.67.71-7.1 0-26.51-21.49-48-48-48s-48 21.49-48 48c0 4.27.74 8.34 1.78 12.28l-101.5 101.5C56.34 160.74 52.27 160 48 160c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-4.27-.74-8.34-1.78-12.28l101.5-101.5C199.66 95.26 203.73 96 208 96c6.15 0 11.97-1.26 17.38-3.37l95.34 76.27c-.35 2.33-.71 4.67-.71 7.1 0 26.51 21.49 48 48 48s48-21.49 48-48c0-2.43-.37-4.76-.71-7.09l95.32-76.28zM400 320h-64c-8.84 0-16 7.16-16 16v160c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V336c0-8.84-7.16-16-16-16zm160-128h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zm-320 0h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zM80 352H16c-8.84 0-16 7.16-16 16v128c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V368c0-8.84-7.16-16-16-16z' />
+      </svg>
+    </Fragment>
+  );
+}
+
+Analytics.displayName = 'Analytics';
+
+export default Analytics;
diff --git a/client/src/assets/icons/Clipboard.js b/client/src/assets/icons/Clipboard.js
new file mode 100644
index 0000000000..f9a76382fd
--- /dev/null
+++ b/client/src/assets/icons/Clipboard.js
@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function Clipboard(props) {
+  const { t } = useTranslation();
+
+  return (
+    <Fragment>
+      <span className='sr-only'>{t('icons.clipboard')}</span>
+      <svg viewBox='0 0 384 512' xmlns='http://www.w3.org/2000/svg' {...props}>
+        <path d='M126.2 286.4l64.2-63.6c2.1-2.1 2.1-5.5 0-7.6l-12.6-12.7c-2.1-2.1-5.5-2.1-7.6 0l-47.6 47.2-20.6-20.9c-2.1-2.1-5.5-2.1-7.6 0l-12.7 12.6c-2.1 2.1-2.1 5.5 0 7.6l37.1 37.4c1.9 2.1 5.3 2.1 7.4 0zM336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 48c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16zm144 408c0 4.4-3.6 8-8 8H56c-4.4 0-8-3.6-8-8V120c0-4.4 3.6-8 8-8h40v32c0 8.8 7.2 16 16 16h160c8.8 0 16-7.2 16-16v-32h40c4.4 0 8 3.6 8 8v336zM112 328c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zm168-88h-63.3c-1.3 1.8-2.1 3.9-3.7 5.5L186.2 272H280c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zm0 96H168c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8z' />
+      </svg>
+    </Fragment>
+  );
+}
+
+Clipboard.displayName = 'Clipboard';
+
+export default Clipboard;
diff --git a/client/src/assets/icons/D3Icon.js b/client/src/assets/icons/D3Icon.js
new file mode 100644
index 0000000000..3e7a8341e2
--- /dev/null
+++ b/client/src/assets/icons/D3Icon.js
@@ -0,0 +1,23 @@
+import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function D3Icon(props) {
+  const { t } = useTranslation();
+
+  return (
+    <Fragment>
+      <span className='sr-only'>{t('icons.d3')}</span>
+      <svg
+        viewBox='-10 -10 116 111'
+        xmlns='http://www.w3.org/2000/svg'
+        {...props}
+      >
+        <path d='M0 0h7.75a45.5 45.5 0 110 91H0V71h7.75a25.5 25.5 0 100-51H0zm36.251 0h32a27.75 27.75 0 0121.331 45.5A27.75 27.75 0 0168.251 91h-32a53.69 53.69 0 0018.746-20H68.25a7.75 7.75 0 100-15.5H60.5a53.69 53.69 0 000-20h7.75a7.75 7.75 0 100-15.5H54.997A53.69 53.69 0 0036.251 0z' />
+      </svg>
+    </Fragment>
+  );
+}
+
+D3Icon.displayName = 'D3';
+
+export default D3Icon;
diff --git a/client/src/assets/icons/JavaScriptIcon.js b/client/src/assets/icons/JavaScriptIcon.js
new file mode 100644
index 0000000000..00afba058e
--- /dev/null
+++ b/client/src/assets/icons/JavaScriptIcon.js
@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function JavaScriptIcon(props) {
+  const { t } = useTranslation();
+
+  return (
+    <Fragment>
+      <span className='sr-only'>{t('icons.javascript')}</span>
+      <svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg' {...props}>
+        <path d='M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z' />
+      </svg>
+    </Fragment>
+  );
+}
+
+JavaScriptIcon.displayName = 'JavaScriptIcon';
+
+export default JavaScriptIcon;
diff --git a/client/src/assets/icons/PythonIcon.js b/client/src/assets/icons/PythonIcon.js
new file mode 100644
index 0000000000..a9f562ff7e
--- /dev/null
+++ b/client/src/assets/icons/PythonIcon.js
@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function PythonIcon(props) {
+  const { t } = useTranslation();
+
+  return (
+    <Fragment>
+      <span className='sr-only'>{t('icons.python')}</span>
+      <svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg' {...props}>
+        <path d='M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z' />
+      </svg>
+    </Fragment>
+  );
+}
+
+PythonIcon.displayName = 'PythonIcon';
+
+export default PythonIcon;
diff --git a/client/src/assets/icons/ReactIcon.js b/client/src/assets/icons/ReactIcon.js
new file mode 100644
index 0000000000..037a66d193
--- /dev/null
+++ b/client/src/assets/icons/ReactIcon.js
@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function ReactIcon(props) {
+  const { t } = useTranslation();
+
+  return (
+    <Fragment>
+      <span className='sr-only'>{t('icons.react')}</span>
+      <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' {...props}>
+        <path d='M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z' />
+      </svg>
+    </Fragment>
+  );
+}
+
+ReactIcon.displayName = 'ReactIcon';
+
+export default ReactIcon;
diff --git a/client/src/assets/icons/ResponsiveDesign.js b/client/src/assets/icons/ResponsiveDesign.js
new file mode 100644
index 0000000000..e32cb6f302
--- /dev/null
+++ b/client/src/assets/icons/ResponsiveDesign.js
@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function ResponsiveDesign(props) {
+  const { t } = useTranslation();
+
+  return (
+    <Fragment>
+      <span className='sr-only'>{t('icons.responsive-design')}</span>
+      <svg viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg' {...props}>
+        <path d='M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z' />
+      </svg>
+    </Fragment>
+  );
+}
+
+ResponsiveDesign.displayName = 'ResponsiveDesign';
+
+export default ResponsiveDesign;
diff --git a/client/src/assets/icons/Shield.js b/client/src/assets/icons/Shield.js
new file mode 100644
index 0000000000..dcfbc2d09f
--- /dev/null
+++ b/client/src/assets/icons/Shield.js
@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function Shield(props) {
+  const { t } = useTranslation();
+
+  return (
+    <Fragment>
+      <span className='sr-only'>{t('icons.shield')}</span>
+      <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' {...props}>
+        <path d='M466.5 83.7l-192-80a48.15 48.15 0 00-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zm-47.2 114.2l-184 184c-6.2 6.2-16.4 6.2-22.6 0l-104-104c-6.2-6.2-6.2-16.4 0-22.6l22.6-22.6c6.2-6.2 16.4-6.2 22.6 0l70.1 70.1 150.1-150.1c6.2-6.2 16.4-6.2 22.6 0l22.6 22.6c6.3 6.3 6.3 16.4 0 22.6z' />
+      </svg>
+    </Fragment>
+  );
+}
+
+Shield.displayName = 'Shield';
+
+export default Shield;
diff --git a/client/src/assets/icons/TensorflowIcon.js b/client/src/assets/icons/TensorflowIcon.js
new file mode 100644
index 0000000000..acc0f31321
--- /dev/null
+++ b/client/src/assets/icons/TensorflowIcon.js
@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function TensorflowIcon(props) {
+  const { t } = useTranslation();
+
+  return (
+    <Fragment>
+      <span className='sr-only'>{t('icons.tensorflow')}</span>
+      <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
+        <path d='M1.292 5.856L11.54 0v24l-4.095-2.378V7.603l-6.168 3.564.015-5.31zm21.43 5.311l-.014-5.31L12.46 0v24l4.095-2.378V14.87l3.092 1.788-.018-4.618-3.074-1.756V7.603l6.168 3.564z' />
+      </svg>
+    </Fragment>
+  );
+}
+
+TensorflowIcon.displayName = 'TensorflowIcon';
+
+export default TensorflowIcon;
diff --git a/client/src/assets/icons/index.js b/client/src/assets/icons/index.js
new file mode 100644
index 0000000000..83d5a41ae7
--- /dev/null
+++ b/client/src/assets/icons/index.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import ResponsiveDesign from './ResponsiveDesign';
+import JavaScriptIcon from './JavaScriptIcon';
+import ReactIcon from './ReactIcon';
+import D3Icon from './D3Icon';
+import APIIcon from './APIIcon';
+import Clipboard from './Clipboard';
+import PythonIcon from './PythonIcon';
+import Analytics from './Analytics';
+import Shield from './Shield';
+import TensorflowIcon from './TensorflowIcon';
+import Algorithm from './Algorithm';
+
+const generateIconComponent = (superBlock, className) => {
+  const iconMap = {
+    'Responsive Web Design': ResponsiveDesign,
+    'JavaScript Algorithms and Data Structures': JavaScriptIcon,
+    'Front End Libraries': ReactIcon,
+    'Data Visualization': D3Icon,
+    'APIs and Microservices': APIIcon,
+    'Quality Assurance': Clipboard,
+    'Scientific Computing with Python': PythonIcon,
+    'Data Analysis with Python': Analytics,
+    'Information Security': Shield,
+    'Machine Learning with Python': TensorflowIcon,
+    'Coding Interview Prep': Algorithm
+  };
+  // fallback in case super block doesn't exist and for tests
+  const Icon = iconMap[superBlock] ? iconMap[superBlock] : ResponsiveDesign;
+
+  return <Icon className={className} />;
+};
+
+export { generateIconComponent };
diff --git a/client/src/components/Intro/components/IntroDescription.js b/client/src/components/Intro/components/IntroDescription.js
index 6820bf7b0a..525dedadc7 100644
--- a/client/src/components/Intro/components/IntroDescription.js
+++ b/client/src/components/Intro/components/IntroDescription.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Link, Spacer } from '../../helpers';
-import { Col } from '@freecodecamp/react-bootstrap';
 import { forumLocation } from '../../../../config/env.json';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -10,14 +9,7 @@ function IntroDescription() {
   const { t } = useTranslation();
 
   return (
-    <Col
-      className='intro-description'
-      md={8}
-      mdOffset={2}
-      sm={10}
-      smOffset={1}
-      xs={12}
-    >
+    <div className='intro-description'>
       <strong>{t('learn.read-this.heading')}</strong>
       <Spacer />
       <p>{t('learn.read-this.p1')}</p>
@@ -40,7 +32,7 @@ function IntroDescription() {
         </Trans>
       </p>
       <p>{t('learn.read-this.p12')}</p>
-    </Col>
+    </div>
   );
 }
 
diff --git a/client/src/components/Intro/index.js b/client/src/components/Intro/index.js
index de6d27698b..0473a00e0a 100644
--- a/client/src/components/Intro/index.js
+++ b/client/src/components/Intro/index.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link, Spacer, Loader, FullWidthRow } from '../helpers';
-import { Row, Col } from '@freecodecamp/react-bootstrap';
 import { randomQuote } from '../../utils/get-words';
 import CurrentChallengeLink from '../helpers/CurrentChallengeLink';
 import IntroDescription from './components/IntroDescription';
@@ -41,17 +40,13 @@ function Intro({
     const { quote, author } = randomQuote();
     return (
       <>
-        <Row>
-          <Col sm={10} smOffset={1} xs={12}>
-            <Spacer />
-            <h1 className='text-center '>
-              {name
-                ? `${t('learn.welcome-1', { name: name })}`
-                : `${t('learn.welcome-2')}`}
-            </h1>
-            <Spacer />
-          </Col>
-        </Row>
+        <Spacer />
+        <h1 className='text-center '>
+          {name
+            ? `${t('learn.welcome-1', { name: name })}`
+            : `${t('learn.welcome-2')}`}
+        </h1>
+        <Spacer />
         <FullWidthRow>
           <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
             {t('buttons.update-settings')}
@@ -65,49 +60,39 @@ function Intro({
           )}
         </FullWidthRow>
         <Spacer />
-        <Row className='text-center quote-partial'>
-          <Col sm={10} smOffset={1} xs={12}>
-            <blockquote className='blockquote'>
-              <span>
-                <q>{quote}</q>
-                <footer className='quote-author blockquote-footer'>
-                  <cite>{author}</cite>
-                </footer>
-              </span>
-            </blockquote>
-          </Col>
-        </Row>
-        <Row>
-          {completedChallengeCount < 15 ? (
-            <Col sm={10} smOffset={1} xs={12}>
-              <Spacer />
-              <h4>
-                <Trans i18nKey='learn.start-at-beginning'>
-                  <Link to={slug} />
-                </Trans>
-              </h4>
-            </Col>
-          ) : (
-            ''
-          )}
-        </Row>
+        <div className='text-center quote-partial'>
+          <blockquote className='blockquote'>
+            <span>
+              <q>{quote}</q>
+              <footer className='quote-author blockquote-footer'>
+                <cite>{author}</cite>
+              </footer>
+            </span>
+          </blockquote>
+        </div>
+        {completedChallengeCount < 15 ? (
+          <div className='intro-description'>
+            <Spacer />
+            <p>
+              <Trans i18nKey='learn.start-at-beginning'>
+                <Link to={slug} />
+              </Trans>
+            </p>
+          </div>
+        ) : (
+          ''
+        )}
       </>
     );
   } else {
     return (
       <>
-        <Row>
-          <Col sm={8} smOffset={2} xs={12}>
-            <Spacer />
-            <h1>{t('learn.heading')}</h1>
-            <Spacer size={1} />
-          </Col>
-          <IntroDescription />
-          <Col sm={8} smOffset={2} xs={12}>
-            <Spacer />
-            <Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
-          </Col>
-        </Row>
+        <Spacer />
+        <h1>{t('learn.heading')}</h1>
+        <Spacer />
+        <IntroDescription />
+        <Spacer />
+        <Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
         <Spacer />
       </>
     );
diff --git a/client/src/components/Intro/intro.css b/client/src/components/Intro/intro.css
index 01d9a564df..7502422201 100644
--- a/client/src/components/Intro/intro.css
+++ b/client/src/components/Intro/intro.css
@@ -24,25 +24,23 @@
   border: none;
 }
 
+.intro-description strong,
+.intro-description p {
+  font-family: 'Lato', sans-serif;
+  font-size: 1.17rem;
+}
+
 @media (max-width: 500px) {
   .quote-partial .blockquote {
     font-size: 1.2rem;
     border: none;
   }
+
+  .intro-description strong,
+  .intro-description p {
+    font-size: 1rem;
+  }
 }
 .quote-author {
   font-style: normal;
 }
-
-.intro-description strong,
-.intro-description p {
-  font-family: 'Lato', sans-serif;
-  font-size: 1rem;
-}
-
-@media (min-width: 500px) {
-  .intro-description strong,
-  .intro-description p {
-    font-size: 1.22rem;
-  }
-}
diff --git a/client/src/components/Map/__snapshots__/Map.test.js.snap b/client/src/components/Map/__snapshots__/Map.test.js.snap
index af4819124d..8af928ccf5 100644
--- a/client/src/components/Map/__snapshots__/Map.test.js.snap
+++ b/client/src/components/Map/__snapshots__/Map.test.js.snap
@@ -17,9 +17,20 @@ exports[`<Map /> snapshot: Map 1`] = `
           <div
             style="display: flex; justify-content: space-between; align-items: center;"
           >
-            <div
-              class="LazyLoad"
-            />
+            <span
+              class="sr-only"
+            >
+              icons.responsive-design
+            </span>
+            <svg
+              class="map-icon"
+              viewBox="0 0 640 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
+              />
+            </svg>
           </div>
           <svg
             aria-hidden="true"
@@ -50,9 +61,20 @@ exports[`<Map /> snapshot: Map 1`] = `
           <div
             style="display: flex; justify-content: space-between; align-items: center;"
           >
-            <div
-              class="LazyLoad"
-            />
+            <span
+              class="sr-only"
+            >
+              icons.responsive-design
+            </span>
+            <svg
+              class="map-icon"
+              viewBox="0 0 640 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
+              />
+            </svg>
           </div>
           <svg
             aria-hidden="true"
@@ -83,9 +105,20 @@ exports[`<Map /> snapshot: Map 1`] = `
           <div
             style="display: flex; justify-content: space-between; align-items: center;"
           >
-            <div
-              class="LazyLoad"
-            />
+            <span
+              class="sr-only"
+            >
+              icons.responsive-design
+            </span>
+            <svg
+              class="map-icon"
+              viewBox="0 0 640 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
+              />
+            </svg>
           </div>
           <svg
             aria-hidden="true"
@@ -116,9 +149,20 @@ exports[`<Map /> snapshot: Map 1`] = `
           <div
             style="display: flex; justify-content: space-between; align-items: center;"
           >
-            <div
-              class="LazyLoad"
-            />
+            <span
+              class="sr-only"
+            >
+              icons.responsive-design
+            </span>
+            <svg
+              class="map-icon"
+              viewBox="0 0 640 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
+              />
+            </svg>
           </div>
           <svg
             aria-hidden="true"
@@ -149,9 +193,20 @@ exports[`<Map /> snapshot: Map 1`] = `
           <div
             style="display: flex; justify-content: space-between; align-items: center;"
           >
-            <div
-              class="LazyLoad"
-            />
+            <span
+              class="sr-only"
+            >
+              icons.responsive-design
+            </span>
+            <svg
+              class="map-icon"
+              viewBox="0 0 640 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
+              />
+            </svg>
           </div>
           <svg
             aria-hidden="true"
@@ -182,9 +237,20 @@ exports[`<Map /> snapshot: Map 1`] = `
           <div
             style="display: flex; justify-content: space-between; align-items: center;"
           >
-            <div
-              class="LazyLoad"
-            />
+            <span
+              class="sr-only"
+            >
+              icons.responsive-design
+            </span>
+            <svg
+              class="map-icon"
+              viewBox="0 0 640 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
+              />
+            </svg>
           </div>
           <svg
             aria-hidden="true"
@@ -215,9 +281,20 @@ exports[`<Map /> snapshot: Map 1`] = `
           <div
             style="display: flex; justify-content: space-between; align-items: center;"
           >
-            <div
-              class="LazyLoad"
-            />
+            <span
+              class="sr-only"
+            >
+              icons.responsive-design
+            </span>
+            <svg
+              class="map-icon"
+              viewBox="0 0 640 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
+              />
+            </svg>
           </div>
           <svg
             aria-hidden="true"
@@ -248,9 +325,20 @@ exports[`<Map /> snapshot: Map 1`] = `
           <div
             style="display: flex; justify-content: space-between; align-items: center;"
           >
-            <div
-              class="LazyLoad"
-            />
+            <span
+              class="sr-only"
+            >
+              icons.responsive-design
+            </span>
+            <svg
+              class="map-icon"
+              viewBox="0 0 640 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
+              />
+            </svg>
           </div>
           <svg
             aria-hidden="true"
@@ -281,9 +369,20 @@ exports[`<Map /> snapshot: Map 1`] = `
           <div
             style="display: flex; justify-content: space-between; align-items: center;"
           >
-            <div
-              class="LazyLoad"
-            />
+            <span
+              class="sr-only"
+            >
+              icons.responsive-design
+            </span>
+            <svg
+              class="map-icon"
+              viewBox="0 0 640 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
+              />
+            </svg>
           </div>
           <svg
             aria-hidden="true"
@@ -314,9 +413,20 @@ exports[`<Map /> snapshot: Map 1`] = `
           <div
             style="display: flex; justify-content: space-between; align-items: center;"
           >
-            <div
-              class="LazyLoad"
-            />
+            <span
+              class="sr-only"
+            >
+              icons.responsive-design
+            </span>
+            <svg
+              class="map-icon"
+              viewBox="0 0 640 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
+              />
+            </svg>
           </div>
           <svg
             aria-hidden="true"
@@ -347,9 +457,20 @@ exports[`<Map /> snapshot: Map 1`] = `
           <div
             style="display: flex; justify-content: space-between; align-items: center;"
           >
-            <div
-              class="LazyLoad"
-            />
+            <span
+              class="sr-only"
+            >
+              icons.responsive-design
+            </span>
+            <svg
+              class="map-icon"
+              viewBox="0 0 640 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
+              />
+            </svg>
           </div>
           <svg
             aria-hidden="true"
diff --git a/client/src/components/Map/index.js b/client/src/components/Map/index.js
index a1f846737c..081fd1918f 100644
--- a/client/src/components/Map/index.js
+++ b/client/src/components/Map/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { Row, Col } from '@freecodecamp/react-bootstrap';
 import PropTypes from 'prop-types';
 import { graphql, useStaticQuery } from 'gatsby';
 import i18next from 'i18next';
+import { generateIconComponent } from '../../assets/icons';
 
-import { ImageLoader, Link } from '../helpers';
+import { Link } from '../helpers';
 import LinkButton from '../../assets/icons/LinkButton';
 import { dasherize } from '../../../../utils/slugs';
 import './map.css';
@@ -23,12 +23,6 @@ function createSuperBlockTitle(str) {
     : `${superBlockTitle} ${i18next.t('learn.cert-map-estimates.certs')}`;
 }
 
-const iconStyle = {
-  width: '55px',
-  height: '55px',
-  marginRight: '20px'
-};
-
 const linkSpacingStyle = {
   display: 'flex',
   justifyContent: 'space-between',
@@ -46,12 +40,7 @@ function renderLandingMap(nodes) {
             to={`/learn/${dasherize(node.superBlock)}/`}
           >
             <div style={linkSpacingStyle}>
-              <ImageLoader
-                alt='building a website'
-                offsetVertical={500}
-                src={i18next.t(`intro:${dasherize(node.superBlock)}.icon`)}
-                style={iconStyle}
-              />
+              {generateIconComponent(node.superBlock, 'map-icon')}
               {i18next.t(`intro:${dasherize(node.superBlock)}.title`)}
             </div>
             <LinkButton />
@@ -65,30 +54,21 @@ function renderLandingMap(nodes) {
 function renderLearnMap(nodes, currentSuperBlock = '') {
   nodes = nodes.filter(node => node.superBlock !== currentSuperBlock);
   return (
-    <Row>
-      <Col sm={10} smOffset={1} xs={12}>
-        <ul data-test-label='learn-curriculum-map'>
-          {nodes.map((node, i) => (
-            <li key={i}>
-              <Link
-                className='btn link-btn btn-lg'
-                to={`/learn/${dasherize(node.superBlock)}/`}
-              >
-                <div style={linkSpacingStyle}>
-                  <ImageLoader
-                    alt='building a website'
-                    offsetVertical={500}
-                    src={i18next.t(`intro:${dasherize(node.superBlock)}.icon`)}
-                    style={iconStyle}
-                  />
-                  {createSuperBlockTitle(node.superBlock)}
-                </div>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </Col>
-    </Row>
+    <ul data-test-label='learn-curriculum-map'>
+      {nodes.map((node, i) => (
+        <li key={i}>
+          <Link
+            className='btn link-btn btn-lg'
+            to={`/learn/${dasherize(node.superBlock)}/`}
+          >
+            <div style={linkSpacingStyle}>
+              {generateIconComponent(node.superBlock, 'map-icon')}
+              {createSuperBlockTitle(node.superBlock)}
+            </div>
+          </Link>
+        </li>
+      ))}
+    </ul>
   );
 }
 
diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index ce43ab1291..85a625cb18 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -297,6 +297,23 @@ fieldset[disabled] .btn-primary.focus {
   margin-left: 5px;
 }
 
+.map-icon,
+.cert-header-icon {
+  flex-shrink: 0;
+  fill: var(--primary-color);
+}
+
+.map-icon {
+  width: 35px;
+  margin-right: 20px;
+}
+
+.cert-header-icon {
+  display: block;
+  width: 80px;
+  margin: auto;
+}
+
 .link-btn:hover svg {
   fill: var(--quaternary-background);
 }
@@ -305,6 +322,21 @@ fieldset[disabled] .btn-primary.focus {
   .link-btn {
     font-size: 1.1rem;
   }
+  .map-icon {
+    width: 45px;
+  }
+  .cert-header-icon {
+    width: 100px;
+  }
+}
+
+@media (min-width: 1000px) {
+  .map-icon {
+    width: 50px;
+  }
+  .cert-header-icon {
+    width: 120px;
+  }
 }
 
 .button-group .btn:not(:last-child) {
diff --git a/client/src/pages/learn.js b/client/src/pages/learn.js
index 2494891139..cd68ecd938 100644
--- a/client/src/pages/learn.js
+++ b/client/src/pages/learn.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid } from '@freecodecamp/react-bootstrap';
+import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
 import PropTypes from 'prop-types';
 import { createSelector } from 'reselect';
 import { graphql } from 'gatsby';
@@ -63,16 +63,20 @@ export const LearnPage = ({
     <LearnLayout>
       <Helmet title={t('meta.title')} />
       <Grid>
-        <Intro
-          complete={complete}
-          completedChallengeCount={completedChallengeCount}
-          isSignedIn={isSignedIn}
-          name={name}
-          pending={pending}
-          slug={slug}
-        />
-        <Map />
-        <Spacer size={2} />
+        <Row>
+          <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+            <Intro
+              complete={complete}
+              completedChallengeCount={completedChallengeCount}
+              isSignedIn={isSignedIn}
+              name={name}
+              pending={pending}
+              slug={slug}
+            />
+            <Map />
+            <Spacer size={2} />
+          </Col>
+        </Row>
       </Grid>
     </LearnLayout>
   );
diff --git a/client/src/templates/Introduction/SuperBlockIntro.js b/client/src/templates/Introduction/SuperBlockIntro.js
index 5aeb07f67e..6d0379f07b 100644
--- a/client/src/templates/Introduction/SuperBlockIntro.js
+++ b/client/src/templates/Introduction/SuperBlockIntro.js
@@ -1,4 +1,4 @@
-import React, { Fragment, Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import { graphql } from 'gatsby';
@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import { withTranslation } from 'react-i18next';
-import { Row, Col } from '@freecodecamp/react-bootstrap';
+import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
 
 import Login from '../../components/Header/components/Login';
 import Map from '../../components/Map';
@@ -15,7 +15,7 @@ import CertChallenge from './components/CertChallenge';
 import SuperBlockIntro from './components/SuperBlockIntro';
 import { dasherize } from '../../../../utils/slugs';
 import Block from './components/Block';
-import { FullWidthRow, Spacer } from '../../components/helpers';
+import { Spacer } from '../../components/helpers';
 import {
   currentChallengeIdSelector,
   userFetchStateSelector,
@@ -160,54 +160,63 @@ export class SuperBlockIntroductionPage extends Component {
         <Helmet>
           <title>{i18nSuperBlock} | freeCodeCamp.org</title>
         </Helmet>
-        <FullWidthRow
-          className='overflow-fix'
-          ref={blockToScrollTo === 'top' ? this.elementRef : null}
-        >
-          <Spacer size={2} />
-          <SuperBlockIntro superBlock={superBlock} />
-          <Spacer size={2} />
-          <h2 className='text-center'>{t(`intro:misc-text.courses`)}</h2>
-          <Spacer />
-          <div className='block-ui'>
-            {blockDashedNames.map(blockDashedName => (
-              <div
-                key={blockDashedName}
-                ref={
-                  blockDashedName === blockToScrollTo ? this.elementRef : null
-                }
+        <Grid>
+          <Row
+            className='super-block-intro-page'
+            ref={blockToScrollTo === 'top' ? this.elementRef : null}
+          >
+            <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+              <Spacer size={2} />
+              <SuperBlockIntro superBlock={superBlock} />
+              <Spacer size={2} />
+              <h2 className='text-center big-subheading'>
+                {t(`intro:misc-text.courses`)}
+              </h2>
+              <Spacer />
+              <div className='block-ui'>
+                {blockDashedNames.map(blockDashedName => (
+                  <div
+                    key={blockDashedName}
+                    ref={
+                      blockDashedName === blockToScrollTo
+                        ? this.elementRef
+                        : null
+                    }
+                  >
+                    <Block
+                      blockDashedName={blockDashedName}
+                      challenges={nodesForSuperBlock.filter(
+                        node => node.block === blockDashedName
+                      )}
+                      superBlockDashedName={superBlockDashedName}
+                    />
+                  </div>
+                ))}
+                {superBlock !== 'Coding Interview Prep' && (
+                  <div>
+                    <CertChallenge superBlock={superBlock} />
+                  </div>
+                )}
+              </div>
+              {!isSignedIn && (
+                <div>
+                  <Spacer size={2} />
+                  <Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
+                </div>
+              )}
+              <Spacer size={2} />
+              <h3
+                className='text-center big-block-title'
+                style={{ whiteSpace: 'pre-line' }}
               >
-                <Block
-                  blockDashedName={blockDashedName}
-                  challenges={nodesForSuperBlock.filter(
-                    node => node.block === blockDashedName
-                  )}
-                  superBlockDashedName={superBlockDashedName}
-                />
-              </div>
-            ))}
-            {superBlock !== 'Coding Interview Prep' && (
-              <div>
-                <CertChallenge superBlock={superBlock} />
-                <Spacer size={2} />
-              </div>
-            )}
-          </div>
-          {!isSignedIn && (
-            <Row>
-              <Col sm={10} smOffset={1} xs={12}>
-                <Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
-                <Spacer />
-              </Col>
-            </Row>
-          )}
-          <h2 className='text-center' style={{ whiteSpace: 'pre-line' }}>
-            {t(`intro:misc-text.browse-other`)}
-          </h2>
-          <Spacer />
-          <Map currentSuperBlock={superBlock} />
-          <Spacer size={2} />
-        </FullWidthRow>
+                {t(`intro:misc-text.browse-other`)}
+              </h3>
+              <Spacer />
+              <Map currentSuperBlock={superBlock} />
+              <Spacer size={2} />
+            </Col>
+          </Row>
+        </Grid>
       </>
     );
   }
diff --git a/client/src/templates/Introduction/components/Block.js b/client/src/templates/Introduction/components/Block.js
index 03560ef779..997d4627df 100644
--- a/client/src/templates/Introduction/components/Block.js
+++ b/client/src/templates/Introduction/components/Block.js
@@ -123,10 +123,15 @@ export class Block extends Component {
     );
     const blockTitle = blockIntroObj ? blockIntroObj.title : null;
     const blockIntroArr = blockIntroObj ? blockIntroObj.intro : [];
+    const {
+      expand: expandText,
+      collapse: collapseText,
+      courses: coursesText
+    } = t('intro:misc-text');
 
     return isProjectBlock ? (
       <div className='block'>
-        <h3>{blockTitle}</h3>
+        <h3 className='big-block-title'>{blockTitle}</h3>
         {this.renderBlockIntros(blockIntroArr)}
         <Challenges
           challengesWithCompleted={challengesWithCompleted}
@@ -135,7 +140,7 @@ export class Block extends Component {
       </div>
     ) : (
       <div className={`block ${isExpanded ? 'open' : ''}`}>
-        <h3>{blockTitle}</h3>
+        <h3 className='big-block-title'>{blockTitle}</h3>
         {this.renderBlockIntros(blockIntroArr)}
         <button
           aria-expanded={isExpanded}
@@ -143,10 +148,12 @@ export class Block extends Component {
           onClick={this.handleBlockClick}
         >
           <Caret />
-          <h4>
-            {t(`intro:misc-text.section-courses`, { section: blockTitle })}
+          <h4 className='course-title'>
+            {`${
+              isExpanded ? collapseText : expandText
+            } ${coursesText.toLowerCase()}`}
           </h4>
-          <div className='map-title-completed'>
+          <div className='map-title-completed course-title'>
             {this.renderCheckMark(
               completedCount === challengesWithCompleted.length
             )}
@@ -159,7 +166,7 @@ export class Block extends Component {
             isProjectBlock={isProjectBlock}
           />
         )}
-        <Spacer size={2} />
+        {blockDashedName !== 'project-euler' ? <Spacer size={2} /> : null}
       </div>
     );
   }
diff --git a/client/src/templates/Introduction/components/Challenges.js b/client/src/templates/Introduction/components/Challenges.js
index ef39acdcdc..a97914efee 100644
--- a/client/src/templates/Introduction/components/Challenges.js
+++ b/client/src/templates/Introduction/components/Challenges.js
@@ -65,7 +65,7 @@ export class Challenges extends Component {
         {[...challengesWithCompleted].map(challenge => (
           <li
             className={`map-challenge-title ${
-              isProjectBlock ? 'map-project-wrap' : ''
+              isProjectBlock ? 'map-project-wrap' : 'map-challenge-wrap'
             }`}
             id={challenge.dashedName}
             key={'map-challenge' + challenge.fields.slug}
diff --git a/client/src/templates/Introduction/components/SuperBlockIntro.js b/client/src/templates/Introduction/components/SuperBlockIntro.js
index 6bbf711de2..2055c9e204 100644
--- a/client/src/templates/Introduction/components/SuperBlockIntro.js
+++ b/client/src/templates/Introduction/components/SuperBlockIntro.js
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { dasherize } from '../../../../../utils/slugs';
 import { Spacer } from '../../../components/helpers';
+import { generateIconComponent } from '../../../assets/icons';
 
 const propTypes = {
   superBlock: PropTypes.string
@@ -17,28 +18,14 @@ function SuperBlockIntro(props) {
   const superBlockIntroObj = t(`intro:${superBlockDashedName}`);
   const {
     title: i18nSuperBlock,
-    image: superBlockImage,
     intro: superBlockIntroText
   } = superBlockIntroObj;
 
   return (
     <>
-      <h1 className='text-center'>{i18nSuperBlock}</h1>
+      <h1 className='text-center big-heading'>{i18nSuperBlock}</h1>
       <Spacer />
-      <div style={{ margin: 'auto', maxWidth: '500px' }}>
-        <img
-          alt='building a website'
-          className='superBlock-image'
-          src={superBlockImage}
-          style={{
-            backgroundColor: '#f5f6f7',
-            marginBottom: '1rem',
-            padding: '15px',
-            width: '500px',
-            height: '367px'
-          }}
-        />
-      </div>
+      {generateIconComponent(superBlock, 'cert-header-icon')}
       <Spacer />
       {superBlockIntroText.map((str, i) => (
         <p key={i}>{str}</p>
diff --git a/client/src/templates/Introduction/intro.css b/client/src/templates/Introduction/intro.css
index d2826a15d2..412e269b74 100644
--- a/client/src/templates/Introduction/intro.css
+++ b/client/src/templates/Introduction/intro.css
@@ -1,3 +1,28 @@
+.super-block-intro-page p {
+  font-family: 'Lato', sans-serif;
+  font-size: 1.17rem;
+}
+
+.big-subheading {
+  font-size: 2rem;
+  overflow-wrap: break-word;
+}
+
+.big-block-title {
+  font-size: 1.5rem;
+  overflow-wrap: break-word;
+}
+
+.course-title {
+  font-size: 1.13rem;
+  overflow-wrap: break-word;
+}
+
+.block-description pre {
+  display: inline;
+  padding: 0;
+}
+
 .superBlock-image {
   max-width: 100%;
   height: auto !important;
@@ -34,8 +59,12 @@ button.map-title {
   background-color: var(--tertiary-background);
 }
 
+.map-challenge-wrap > a,
 .map-project-wrap > a {
   display: flex;
+}
+
+.map-project-wrap > a {
   justify-content: space-between;
 }
 
@@ -68,6 +97,7 @@ button.map-title {
 }
 
 .map-cert-title > h3 {
+  font-size: 1.17rem;
   margin: 0 0 0 15px;
 }
 
@@ -116,6 +146,7 @@ button.map-title {
   display: flex;
   align-items: center;
   width: 100%;
+  font-size: 1.13rem;
 }
 
 .map-challenge-title a {
@@ -131,6 +162,26 @@ button.map-title {
   margin-bottom: 0;
 }
 
+@media screen and (max-width: 500px) {
+  .super-block-intro-page p {
+    font-size: 1rem;
+  }
+
+  .big-subheading {
+    font-size: 1.35rem;
+  }
+
+  .big-block-title {
+    font-size: 1.17rem;
+  }
+
+  .course-title,
+  .map-cert-title,
+  .map-challenge-title {
+    font-size: 1rem;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .intro-layout-container {
     padding: 0 10px;