diff --git a/_chapters/add-the-create-note-page.md b/_chapters/add-the-create-note-page.md
index d524adccf..974697474 100644
--- a/_chapters/add-the-create-note-page.md
+++ b/_chapters/add-the-create-note-page.md
@@ -18,7 +18,7 @@ First we are going to create the form for a note. It'll take some content and a
 
 ``` coffee
 import React, { useRef, useState } from "react";
-import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
+import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
 import LoaderButton from "../components/LoaderButton";
 import config from "../config";
 import "./NewNote.css";
@@ -61,7 +61,7 @@ export default function NewNote(props) {
           />
         </FormGroup>
         <FormGroup controlId="file">
-          <ControlLabel>Attachment</ControlLabel>
+          <FormLabel>Attachment</FormLabel>
           <FormControl onChange={handleFileChange} type="file" />
         </FormGroup>
         <LoaderButton
diff --git a/_chapters/allow-users-to-change-passwords.md b/_chapters/allow-users-to-change-passwords.md
index 3881e9b11..7f7bf5f47 100644
--- a/_chapters/allow-users-to-change-passwords.md
+++ b/_chapters/allow-users-to-change-passwords.md
@@ -137,7 +137,7 @@ Now let's create the form that allows our users to change their password.
 ``` coffee
 import React, { Component } from "react";
 import { Auth } from "aws-amplify";
-import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
+import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
 import LoaderButton from "../components/LoaderButton";
 import "./ChangePassword.css";
 
@@ -192,7 +192,7 @@ export default class ChangePassword extends Component {
       <div className="ChangePassword">
         <form onSubmit={this.handleChangeClick}>
           <FormGroup bsSize="large" controlId="oldPassword">
-            <ControlLabel>Old Password</ControlLabel>
+            <FormLabel>Old Password</FormLabel>
             <FormControl
               type="password"
               onChange={this.handleChange}
@@ -201,7 +201,7 @@ export default class ChangePassword extends Component {
           </FormGroup>
           <hr />
           <FormGroup bsSize="large" controlId="password">
-            <ControlLabel>New Password</ControlLabel>
+            <FormLabel>New Password</FormLabel>
             <FormControl
               type="password"
               value={this.state.password}
@@ -209,7 +209,7 @@ export default class ChangePassword extends Component {
             />
           </FormGroup>
           <FormGroup bsSize="large" controlId="confirmPassword">
-            <ControlLabel>Confirm Password</ControlLabel>
+            <FormLabel>Confirm Password</FormLabel>
             <FormControl
               type="password"
               onChange={this.handleChange}
diff --git a/_chapters/allow-users-to-change-their-email.md b/_chapters/allow-users-to-change-their-email.md
index f0d3586a7..5c897bf53 100644
--- a/_chapters/allow-users-to-change-their-email.md
+++ b/_chapters/allow-users-to-change-their-email.md
@@ -27,7 +27,7 @@ import {
   HelpBlock,
   FormGroup,
   FormControl,
-  ControlLabel
+  FormLabel
 } from "react-bootstrap";
 import LoaderButton from "../components/LoaderButton";
 import "./ChangeEmail.css";
@@ -94,7 +94,7 @@ export default class ChangeEmail extends Component {
     return (
       <form onSubmit={this.handleUpdateClick}>
         <FormGroup bsSize="large" controlId="email">
-          <ControlLabel>Email</ControlLabel>
+          <FormLabel>Email</FormLabel>
           <FormControl
             autoFocus
             type="email"
@@ -119,7 +119,7 @@ export default class ChangeEmail extends Component {
     return (
       <form onSubmit={this.handleConfirmClick}>
         <FormGroup bsSize="large" controlId="code">
-          <ControlLabel>Confirmation Code</ControlLabel>
+          <FormLabel>Confirmation Code</FormLabel>
           <FormControl
             autoFocus
             type="tel"
diff --git a/_chapters/create-a-billing-form.md b/_chapters/create-a-billing-form.md
index 44aab6329..cf9bbd440 100644
--- a/_chapters/create-a-billing-form.md
+++ b/_chapters/create-a-billing-form.md
@@ -23,7 +23,7 @@ Next let's create our billing form component.
 {% raw %}
 ``` coffee
 import React, { useState } from "react";
-import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
+import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
 import { CardElement, injectStripe } from "react-stripe-elements";
 import LoaderButton from "./LoaderButton";
 import { useFormFields } from "../libs/hooksLib";
@@ -62,7 +62,7 @@ function BillingForm({ isLoading, onSubmit, ...props }) {
   return (
     <form className="BillingForm" onSubmit={handleSubmitClick}>
       <FormGroup bsSize="large" controlId="storage">
-        <ControlLabel>Storage</ControlLabel>
+        <FormLabel>Storage</FormLabel>
         <FormControl
           min="0"
           type="number"
@@ -73,7 +73,7 @@ function BillingForm({ isLoading, onSubmit, ...props }) {
       </FormGroup>
       <hr />
       <FormGroup bsSize="large" controlId="name">
-        <ControlLabel>Cardholder&apos;s name</ControlLabel>
+        <FormLabel>Cardholder&apos;s name</FormLabel>
         <FormControl
           type="text"
           value={fields.name}
@@ -81,7 +81,7 @@ function BillingForm({ isLoading, onSubmit, ...props }) {
           placeholder="Name on the card"
         />
       </FormGroup>
-      <ControlLabel>Credit Card Info</ControlLabel>
+      <FormLabel>Credit Card Info</FormLabel>
       <CardElement
         className="card-field"
         onChange={e => setIsCardComplete(e.complete)}
diff --git a/_chapters/create-a-custom-react-hook-to-handle-form-fields.md b/_chapters/create-a-custom-react-hook-to-handle-form-fields.md
index efcf96849..d77e6627f 100644
--- a/_chapters/create-a-custom-react-hook-to-handle-form-fields.md
+++ b/_chapters/create-a-custom-react-hook-to-handle-form-fields.md
@@ -70,7 +70,7 @@ And that's it! We can now use this in our Login component.
 ``` coffee
 import React, { useState } from "react";
 import { Auth } from "aws-amplify";
-import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
+import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
 import LoaderButton from "../components/LoaderButton";
 import { useFormFields } from "../libs/hooksLib";
 import "./Login.css";
@@ -105,7 +105,7 @@ export default function Login(props) {
     <div className="Login">
       <form onSubmit={handleSubmit}>
         <FormGroup controlId="email" bsSize="large">
-          <ControlLabel>Email</ControlLabel>
+          <FormLabel>Email</FormLabel>
           <FormControl
             autoFocus
             type="email"
@@ -114,7 +114,7 @@ export default function Login(props) {
           />
         </FormGroup>
         <FormGroup controlId="password" bsSize="large">
-          <ControlLabel>Password</ControlLabel>
+          <FormLabel>Password</FormLabel>
           <FormControl
             type="password"
             value={fields.password}
diff --git a/_chapters/create-a-login-page.md b/_chapters/create-a-login-page.md
index 4923fa44d..81d8d2665 100644
--- a/_chapters/create-a-login-page.md
+++ b/_chapters/create-a-login-page.md
@@ -18,7 +18,7 @@ So let's start by creating the basic form that'll take the user's email (as thei
 
 ``` coffee
 import React, { useState } from "react";
-import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
+import { Button, FormGroup, FormControl, FormLabel } from "react-bootstrap";
 import "./Login.css";
 
 export default function Login(props) {
@@ -37,7 +37,7 @@ export default function Login(props) {
     <div className="Login">
       <form onSubmit={handleSubmit}>
         <FormGroup controlId="email" bsSize="large">
-          <ControlLabel>Email</ControlLabel>
+          <FormLabel>Email</FormLabel>
           <FormControl
             autoFocus
             type="email"
@@ -46,7 +46,7 @@ export default function Login(props) {
           />
         </FormGroup>
         <FormGroup controlId="password" bsSize="large">
-          <ControlLabel>Password</ControlLabel>
+          <FormLabel>Password</FormLabel>
           <FormControl
             value={password}
             onChange={e => setPassword(e.target.value)}
diff --git a/_chapters/create-the-signup-form.md b/_chapters/create-the-signup-form.md
index 4cbf27954..0790b2bd5 100644
--- a/_chapters/create-the-signup-form.md
+++ b/_chapters/create-the-signup-form.md
@@ -20,7 +20,7 @@ import {
   HelpBlock,
   FormGroup,
   FormControl,
-  ControlLabel
+  FormLabel
 } from "react-bootstrap";
 import LoaderButton from "../components/LoaderButton";
 import { useFormFields } from "../libs/hooksLib";
@@ -68,7 +68,7 @@ export default function Signup(props) {
     return (
       <form onSubmit={handleConfirmationSubmit}>
         <FormGroup controlId="confirmationCode" bsSize="large">
-          <ControlLabel>Confirmation Code</ControlLabel>
+          <FormLabel>Confirmation Code</FormLabel>
           <FormControl
             autoFocus
             type="tel"
@@ -94,7 +94,7 @@ export default function Signup(props) {
     return (
       <form onSubmit={handleSubmit}>
         <FormGroup controlId="email" bsSize="large">
-          <ControlLabel>Email</ControlLabel>
+          <FormLabel>Email</FormLabel>
           <FormControl
             autoFocus
             type="email"
@@ -103,7 +103,7 @@ export default function Signup(props) {
           />
         </FormGroup>
         <FormGroup controlId="password" bsSize="large">
-          <ControlLabel>Password</ControlLabel>
+          <FormLabel>Password</FormLabel>
           <FormControl
             type="password"
             value={fields.password}
@@ -111,7 +111,7 @@ export default function Signup(props) {
           />
         </FormGroup>
         <FormGroup controlId="confirmPassword" bsSize="large">
-          <ControlLabel>Confirm Password</ControlLabel>
+          <FormLabel>Confirm Password</FormLabel>
           <FormControl
             type="password"
             onChange={handleFieldChange}
diff --git a/_chapters/give-feedback-while-logging-in.md b/_chapters/give-feedback-while-logging-in.md
index 7d1b79e37..7656ad873 100644
--- a/_chapters/give-feedback-while-logging-in.md
+++ b/_chapters/give-feedback-while-logging-in.md
@@ -116,7 +116,7 @@ Now we can use our new component in our `Login` container.
 <img class="code-marker" src="/assets/s.png" />Also, import the `LoaderButton` in the header. And remove the reference to the `Button` component.
 
 ``` javascript
-import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
+import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
 import LoaderButton from "../components/LoaderButton";
 ```
 
diff --git a/_chapters/handle-forgot-and-reset-password.md b/_chapters/handle-forgot-and-reset-password.md
index 11365bd9f..666aee5b3 100644
--- a/_chapters/handle-forgot-and-reset-password.md
+++ b/_chapters/handle-forgot-and-reset-password.md
@@ -29,7 +29,7 @@ import {
   FormGroup,
   Glyphicon,
   FormControl,
-  ControlLabel
+  FormLabel
 } from "react-bootstrap";
 import LoaderButton from "../components/LoaderButton";
 import "./ResetPassword.css";
@@ -104,7 +104,7 @@ export default class ResetPassword extends Component {
     return (
       <form onSubmit={this.handleSendCodeClick}>
         <FormGroup bsSize="large" controlId="email">
-          <ControlLabel>Email</ControlLabel>
+          <FormLabel>Email</FormLabel>
           <FormControl
             autoFocus
             type="email"
@@ -129,7 +129,7 @@ export default class ResetPassword extends Component {
     return (
       <form onSubmit={this.handleConfirmClick}>
         <FormGroup bsSize="large" controlId="code">
-          <ControlLabel>Confirmation Code</ControlLabel>
+          <FormLabel>Confirmation Code</FormLabel>
           <FormControl
             autoFocus
             type="tel"
@@ -143,7 +143,7 @@ export default class ResetPassword extends Component {
         </FormGroup>
         <hr />
         <FormGroup bsSize="large" controlId="password">
-          <ControlLabel>New Password</ControlLabel>
+          <FormLabel>New Password</FormLabel>
           <FormControl
             type="password"
             value={this.state.password}
@@ -151,7 +151,7 @@ export default class ResetPassword extends Component {
           />
         </FormGroup>
         <FormGroup bsSize="large" controlId="confirmPassword">
-          <ControlLabel>Confirm Password</ControlLabel>
+          <FormLabel>Confirm Password</FormLabel>
           <FormControl
             type="password"
             onChange={this.handleChange}
diff --git a/_chapters/ko/add-the-create-note-page.md b/_chapters/ko/add-the-create-note-page.md
index 227221e7d..8c2fb6534 100644
--- a/_chapters/ko/add-the-create-note-page.md
+++ b/_chapters/ko/add-the-create-note-page.md
@@ -19,7 +19,7 @@ comments_id: add-the-create-note-page/107
 
 ``` coffee
 import React, { Component } from "react";
-import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
+import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
 import LoaderButton from "../components/LoaderButton";
 import config from "../config";
 import "./NewNote.css";
@@ -73,7 +73,7 @@ export default class NewNote extends Component {
             />
           </FormGroup>
           <FormGroup controlId="file">
-            <ControlLabel>Attachment</ControlLabel>
+            <FormLabel>Attachment</FormLabel>
             <FormControl onChange={this.handleFileChange} type="file" />
           </FormGroup>
           <LoaderButton
diff --git a/_chapters/ko/create-a-billing-form.md b/_chapters/ko/create-a-billing-form.md
index db3bd2cef..070482100 100644
--- a/_chapters/ko/create-a-billing-form.md
+++ b/_chapters/ko/create-a-billing-form.md
@@ -24,7 +24,7 @@ $ npm install --save react-stripe-elements
 {% raw %}
 ``` coffee
 import React, { Component } from "react";
-import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
+import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
 import { CardElement, injectStripe } from "react-stripe-elements";
 import LoaderButton from "./LoaderButton";
 import "./BillingForm.css";
@@ -81,7 +81,7 @@ class BillingForm extends Component {
     return (
       <form className="BillingForm" onSubmit={this.handleSubmitClick}>
         <FormGroup bsSize="large" controlId="storage">
-          <ControlLabel>Storage</ControlLabel>
+          <FormLabel>Storage</FormLabel>
           <FormControl
             min="0"
             type="number"
@@ -92,7 +92,7 @@ class BillingForm extends Component {
         </FormGroup>
         <hr />
         <FormGroup bsSize="large" controlId="name">
-          <ControlLabel>Cardholder&apos;s name</ControlLabel>
+          <FormLabel>Cardholder&apos;s name</FormLabel>
           <FormControl
             type="text"
             value={this.state.name}
@@ -100,7 +100,7 @@ class BillingForm extends Component {
             placeholder="Name on the card"
           />
         </FormGroup>
-        <ControlLabel>Credit Card Info</ControlLabel>
+        <FormLabel>Credit Card Info</FormLabel>
         <CardElement
           className="card-field"
           onChange={this.handleCardFieldChange}
diff --git a/_chapters/ko/create-a-login-page.md b/_chapters/ko/create-a-login-page.md
index 2bbf7e584..09158875b 100644
--- a/_chapters/ko/create-a-login-page.md
+++ b/_chapters/ko/create-a-login-page.md
@@ -18,7 +18,7 @@ comments_id: create-a-login-page/71
 
 ``` coffee
 import React, { Component } from "react";
-import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
+import { Button, FormGroup, FormControl, FormLabel } from "react-bootstrap";
 import "./Login.css";
 
 export default class Login extends Component {
@@ -50,7 +50,7 @@ export default class Login extends Component {
       <div className="Login">
         <form onSubmit={this.handleSubmit}>
           <FormGroup controlId="email" bsSize="large">
-            <ControlLabel>Email</ControlLabel>
+            <FormLabel>Email</FormLabel>
             <FormControl
               autoFocus
               type="email"
@@ -59,7 +59,7 @@ export default class Login extends Component {
             />
           </FormGroup>
           <FormGroup controlId="password" bsSize="large">
-            <ControlLabel>Password</ControlLabel>
+            <FormLabel>Password</FormLabel>
             <FormControl
               value={this.state.password}
               onChange={this.handleChange}
diff --git a/_chapters/ko/create-the-signup-form.md b/_chapters/ko/create-the-signup-form.md
index 5785b9e28..db13dd083 100644
--- a/_chapters/ko/create-the-signup-form.md
+++ b/_chapters/ko/create-the-signup-form.md
@@ -21,7 +21,7 @@ import {
   HelpBlock,
   FormGroup,
   FormControl,
-  ControlLabel
+  FormLabel
 } from "react-bootstrap";
 import LoaderButton from "../components/LoaderButton";
 import "./Signup.css";
@@ -78,7 +78,7 @@ export default class Signup extends Component {
     return (
       <form onSubmit={this.handleConfirmationSubmit}>
         <FormGroup controlId="confirmationCode" bsSize="large">
-          <ControlLabel>Confirmation Code</ControlLabel>
+          <FormLabel>Confirmation Code</FormLabel>
           <FormControl
             autoFocus
             type="tel"
@@ -104,7 +104,7 @@ export default class Signup extends Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <FormGroup controlId="email" bsSize="large">
-          <ControlLabel>Email</ControlLabel>
+          <FormLabel>Email</FormLabel>
           <FormControl
             autoFocus
             type="email"
@@ -113,7 +113,7 @@ export default class Signup extends Component {
           />
         </FormGroup>
         <FormGroup controlId="password" bsSize="large">
-          <ControlLabel>Password</ControlLabel>
+          <FormLabel>Password</FormLabel>
           <FormControl
             value={this.state.password}
             onChange={this.handleChange}
@@ -121,7 +121,7 @@ export default class Signup extends Component {
           />
         </FormGroup>
         <FormGroup controlId="confirmPassword" bsSize="large">
-          <ControlLabel>Confirm Password</ControlLabel>
+          <FormLabel>Confirm Password</FormLabel>
           <FormControl
             value={this.state.confirmPassword}
             onChange={this.handleChange}
diff --git a/_chapters/ko/give-feedback-while-logging-in.md b/_chapters/ko/give-feedback-while-logging-in.md
index 738b69553..a816a95a6 100644
--- a/_chapters/ko/give-feedback-while-logging-in.md
+++ b/_chapters/ko/give-feedback-while-logging-in.md
@@ -125,7 +125,7 @@ export default ({
 <img class="code-marker" src="/assets/s.png" />또한 헤더에서 `LoaderButton`을 import 합니다. 그리고 `Button`에 대한 참조를 제거합니다.
 
 ``` javascript
-import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
+import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
 import LoaderButton from "../components/LoaderButton";
 ```
 
diff --git a/_chapters/ko/render-the-note-form.md b/_chapters/ko/render-the-note-form.md
index b6b6caa36..b55f47959 100644
--- a/_chapters/ko/render-the-note-form.md
+++ b/_chapters/ko/render-the-note-form.md
@@ -71,7 +71,7 @@ render() {
           </FormGroup>
           {this.state.note.attachment &&
             <FormGroup>
-              <ControlLabel>Attachment</ControlLabel>
+              <FormLabel>Attachment</FormLabel>
               <FormControl.Static>
                 <a
                   target="_blank"
@@ -84,7 +84,7 @@ render() {
             </FormGroup>}
           <FormGroup controlId="file">
             {!this.state.note.attachment &&
-              <ControlLabel>Attachment</ControlLabel>}
+              <FormLabel>Attachment</FormLabel>}
             <FormControl onChange={this.handleFileChange} type="file" />
           </FormGroup>
           <LoaderButton
@@ -157,7 +157,7 @@ this.state = {
 
 
 ``` javascript
-import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
+import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
 import LoaderButton from "../components/LoaderButton";
 import config from "../config";
 import "./Notes.css";
diff --git a/_chapters/render-the-note-form.md b/_chapters/render-the-note-form.md
index 33a85b755..fcf64a9b3 100644
--- a/_chapters/render-the-note-form.md
+++ b/_chapters/render-the-note-form.md
@@ -68,7 +68,7 @@ return (
         </FormGroup>
         {note.attachment && (
           <FormGroup>
-            <ControlLabel>Attachment</ControlLabel>
+            <FormLabel>Attachment</FormLabel>
             <FormControl.Static>
               <a
                 target="_blank"
@@ -81,7 +81,7 @@ return (
           </FormGroup>
         )}
         <FormGroup controlId="file">
-          {!note.attachment && <ControlLabel>Attachment</ControlLabel>}
+          {!note.attachment && <FormLabel>Attachment</FormLabel>}
           <FormControl onChange={handleFileChange} type="file" />
         </FormGroup>
         <LoaderButton
@@ -151,7 +151,7 @@ const [isDeleting, setIsDeleting] = useState(false);
 <img class="code-marker" src="/assets/s.png" />Also, let's include the React-Bootstrap components that we are using here by adding the following to our header. And our styles, the `LoaderButton`, and the `config`.
 
 ``` javascript
-import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
+import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
 import LoaderButton from "../components/LoaderButton";
 import config from "../config";
 import "./Notes.css";