diff --git a/app-main/package.json b/app-main/package.json
index 79303fb..63fce6a 100644
--- a/app-main/package.json
+++ b/app-main/package.json
@@ -47,8 +47,8 @@
     "eslint-plugin-prettier": "^3.2.0",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.0.0",
-    "jest": "^26.6.3",
     "husky": "^4.3.6",
+    "jest": "^26.6.3",
     "prettier": "^2.2.1"
   }
 }
diff --git a/app-main/public/css/style.css b/app-main/public/css/style.css
index ac79fb0..5955f5a 100644
--- a/app-main/public/css/style.css
+++ b/app-main/public/css/style.css
@@ -366,12 +366,10 @@ span.lessons-count {
   border-radius: 3px;
   padding: 5px 8px;
 }
-.modal-lesson-close:hover 
-{
+.modal-lesson-close:hover {
   box-shadow: inset 50px 0 0 0 #a3d2ca;
 }
 
-
 .lesson-card-title {
   margin-top: 0;
   margin-bottom: 12px;
@@ -401,8 +399,8 @@ span.lessons-count {
   font-size: 12px;
   border-radius: 3px;
   box-shadow: inset 0 0 0 0 #ffee93;
-  transition: ease-out .3s;
-  outline:none;
+  transition: ease-out 0.3s;
+  outline: none;
   position: relative;
 }
 
@@ -414,25 +412,22 @@ span.lessons-count {
   background: var(--tertiary-b-color);
   color: black;
 }
-.lesson-card-content-buttons button:first-of-type:hover
-{
-   box-shadow: inset 115px 0 0 0 #ffee93;
-   color: black;
-   cursor: pointer;
+.lesson-card-content-buttons button:first-of-type:hover {
+  box-shadow: inset 115px 0 0 0 #ffee93;
+  color: black;
+  cursor: pointer;
 }
 
 .lesson-card-content-buttons button:last-of-type {
   padding: 5px 8px;
   max-width: 50px;
 }
-.lesson-card-content-buttons button:last-of-type:hover
-{ 
+.lesson-card-content-buttons button:last-of-type:hover {
   box-shadow: inset 50px 0 0 0 #a3d2ca;
-   color: black;
-   cursor: pointer;
+  color: black;
+  cursor: pointer;
 }
-.lesson-card-title-container .button:hover
-{
+.lesson-card-title-container .button:hover {
   box-shadow: inset 50px 0 0 0 #ec4646;
 }
 
@@ -446,6 +441,7 @@ span.lessons-count {
 
 .create-lesson-container {
   padding: 15px 50px 15px 45px;
+  position: relative;
 }
 
 .create-lesson-container-header,
@@ -472,15 +468,46 @@ span.lessons-count {
 }
 
 .create-lesson-input {
+  outline: none;
   margin-bottom: 20px;
   padding: 12px;
   border: 1px solid #ccc;
 }
 
-input.create-lesson-input {
+.create-lesson-input-invalid {
+  outline: none;
+  margin-bottom: 20px;
+  padding: 12px;
+  border: 1px solid red;
+}
+
+input.create-lesson-input,
+input.create-lesson-input-invalid {
   flex: 1;
 }
 
+span.create-lesson-input-tooltip::after {
+  content: "Please fill out this field";
+  position: absolute;
+  top: 14%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--tertiary-b-color);
+  clip-path: polygon(100% 0, 100% 40%, 39% 40%, 25% 60%, 13% 40%, 0 40%, 0 0);
+  border: 2px solid var(--tertiary-b-color);
+  height: 60px;
+  width: 155px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  font-family: inherit;
+  border-radius: 3px;
+  font-size: 14px;
+  text-align: center;
+  z-index: 10;
+  opacity: 1;
+}
+
 .tag-selectors {
   margin-top: -20px;
   display: flex;
@@ -537,21 +564,20 @@ input.create-lesson-input {
   max-width: 150px;
   padding: 10px 12px;
   border-radius: 3px;
-  background:var(--tertiary-b-color);
+  background: var(--tertiary-b-color);
   color: black;
   letter-spacing: 1px;
   font-size: 14px;
   white-space: nowrap;
   box-shadow: inset 0 0 0 0 #ffee93;
-  transition: ease-out .3s;
-  outline:none;
+  transition: ease-out 0.3s;
+  outline: none;
   position: relative;
 }
-.create-lesson .button:hover
-{
-   box-shadow: inset 150px 0 0 0 #ffee93;
-   color: black;
-   cursor: pointer;
+.create-lesson .button:hover {
+  box-shadow: inset 150px 0 0 0 #ffee93;
+  color: black;
+  cursor: pointer;
 }
 
 form {
@@ -602,20 +628,27 @@ form {
     overflow-x: scroll;
   }
 
+  span.create-lesson-input-tooltip::after {
+    top: 15%;
+    left: 58%;
+    transform: translate(-50%, -50%);
+    clip-path: polygon(100% 0, 100% 40%, 39% 40%, 25% 60%, 13% 40%, 0 40%, 0 0);
+  }
+
   .modal-lesson {
     max-width: 90%;
   }
 }
-@media(max-width: 900px){
+@media (max-width: 900px) {
   body {
     width: 100%;
     margin: 0 auto;
     box-sizing: border-box;
   }
-  .app-container{
+  .app-container {
     display: inline-block;
   }
-  .lessons-container{
+  .lessons-container {
     width: 80%;
     height: 250px;
     padding-bottom: 0px;
@@ -623,62 +656,58 @@ form {
     margin: auto;
     overflow-x: hidden;
   }
-  .lesson-card{
+  .lesson-card {
     display: inline-block;
     background: #fff;
     max-width: 150px;
   }
-  #delete{
+  #delete {
     padding: 1px 1px;
     width: 20px;
     height: 20px;
   }
-  .lesson-card-content-buttons{
+  .lesson-card-content-buttons {
     margin-top: 0;
     justify-content: flex-end;
     z-index: 500;
     position: relative;
   }
-  .lesson-card-content{
+  .lesson-card-content {
     border: none;
     padding: 0 5px;
   }
-  .ql-editor{
+  .ql-editor {
     padding: 0;
   }
-  .lesson-card-content-buttons button:first-of-type{
+  .lesson-card-content-buttons button:first-of-type {
     min-width: auto;
   }
-  .lesson-card{
+  .lesson-card {
     height: 120px;
     justify-content: space-around;
   }
-  .lesson-card-title-container{
+  .lesson-card-title-container {
     margin-top: 1px;
     margin-bottom: 5px;
   }
-  .lesson-card-title{
+  .lesson-card-title {
     margin-bottom: 0;
   }
-  html{
+  html {
     width: 100%;
   }
-  .modal-lesson{
+  .modal-lesson {
     z-index: 600;
     width: 100%;
   }
-  .app-container{
+  .app-container {
     width: 100%;
   }
-  .lesson-card .ql-editor{
+  .lesson-card .ql-editor {
     height: 65px;
   }
-  .lessons{
+  .lessons {
     display: flex;
     overflow-x: auto;
   }
-  .create-lesson .button{
-    margin-right: auto;
-    margin-left: auto;
-  }
 }
diff --git a/app-main/public/index.html b/app-main/public/index.html
index 0bbd61d..28a0df3 100644
--- a/app-main/public/index.html
+++ b/app-main/public/index.html
@@ -30,7 +30,7 @@
       content="/images/favicon/browserconfig.xml"
     />
     <meta name="theme-color" content="#ffffff" />
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="./css/style.css" />
     <link
       href="https://cdn.quilljs.com/1.3.6/quill.snow.css"
@@ -169,8 +169,8 @@ <h2>New Lesson</h2>
                     class="create-lesson-input"
                     type="text"
                     placeholder="Lesson title"
-                    required
                   />
+                  <span id="title-tooltip"></span>
                   <button
                     class="add-tag create-lesson-input"
                     id="addTag"
@@ -205,6 +205,7 @@ <h2>New Lesson</h2>
         >
       </div>
     </footer>
+
     <body>
       <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
     </body>
diff --git a/app-main/public/js/index.js b/app-main/public/js/index.js
index 813d197..c9ac6cc 100644
--- a/app-main/public/js/index.js
+++ b/app-main/public/js/index.js
@@ -1,4 +1,4 @@
 import init from "./init/init.js";
 
 // initialize Application
-init();
\ No newline at end of file
+init();
diff --git a/app-main/public/js/lessons/index.js b/app-main/public/js/lessons/index.js
index 068bae2..bb7fbe6 100644
--- a/app-main/public/js/lessons/index.js
+++ b/app-main/public/js/lessons/index.js
@@ -173,16 +173,24 @@ export function addLesson() {
   const user = JSON.parse(localStorage.getItem("user"));
   // get editor content;
   const content = quill.root.innerHTML;
-
+  const lessonTitle = lessonInput.value;
+  const titleTooltip = document.getElementById("title-tooltip");
   // Boolean for if edit View
   const isEditView = createLessonContainer
     .getAttribute("view")
     .includes("edit-lesson");
-
   // filter tags that are "selected" upon submission
   const tags = [...tagSelectors.children].filter((tag) =>
     tag.classList.contains("selected")
   );
+
+  if (lessonTitle === "") {
+    console.log("title not valid");
+    titleTooltip.classList.add("create-lesson-input-tooltip");
+    lessonInput.classList.remove("create-lesson-input");
+    lessonInput.classList.add("create-lesson-input-invalid");
+    return;
+  }
   // Regex to match any number of whitespaces in the content form.
   var regex = /<(.|\n)*?>/g;
   if (content.replace(regex, "").trim().length === 0) {
@@ -199,12 +207,10 @@ export function addLesson() {
       }
       return lesson;
     });
-
     if (!user.lessons.length) {
       console.log("Tried to add empty lessons.");
       return;
     }
-
     localStorage.setItem("user", JSON.stringify(user));
     renderLessons(user);
     createLessonContainer.setAttribute("view", "create-lesson");
@@ -218,6 +224,10 @@ export function addLesson() {
 
     localStorage.setItem("user", JSON.stringify(user));
 
+    lessonInput.classList.remove("create-lesson-input-invalid");
+    titleTooltip.classList.remove("create-lesson-input-tooltip");
+    lessonInput.classList.add("create-lesson-input");
+
     lessonInput.value = "";
     renderLessons(user);
   }