diff --git a/webapp/web/css/admin.css b/webapp/web/css/admin.css
index 8bc8f1fad..eb086d3af 100644
--- a/webapp/web/css/admin.css
+++ b/webapp/web/css/admin.css
@@ -42,4 +42,16 @@
 }
 #alertIcon {
     vertical-align:middle
+}
+/* BUBBLE ALERT FOR ADDING INDIVIDUAL CLASSES -----> */
+#addClassBubble p{
+    width: 258px;
+    height: 64px;
+    font-size: 13px;
+    line-height: 1.3em;
+    padding: 25px 5px 5px 13px;
+    background: #fff url('../images/siteAdmin/addClassBubble.png') 0 0 no-repeat; 
+    color: #797979;
+    padding-bottom: 0;
+    margin-bottom: 0;
 }
\ No newline at end of file
diff --git a/webapp/web/images/siteAdmin/addClassBubble.png b/webapp/web/images/siteAdmin/addClassBubble.png
new file mode 100644
index 000000000..41fdb5e92
Binary files /dev/null and b/webapp/web/images/siteAdmin/addClassBubble.png differ
diff --git a/webapp/web/js/siteAdmin/siteAdminUtils.js b/webapp/web/js/siteAdmin/siteAdminUtils.js
new file mode 100644
index 000000000..f6493f14f
--- /dev/null
+++ b/webapp/web/js/siteAdmin/siteAdminUtils.js
@@ -0,0 +1,27 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+  
+/*Display bubble message letting the user knows that it is necessary to create class groups and associate classes with class groups when there is no individual classes to select in Data Input section and 
+hide it when there are classes*/
+    
+$(document).ready(function(){
+    
+     var classesInSelectList = $('#addIndividualClass option').length;
+     
+     if (classesInSelectList == 0) {
+         $('#addIndividualClass input[type="submit"]').css('opacity','.4').click(function(event){
+             event.preventDefault();
+             $('#addClassBubble').effect( "shake", {times:2, direction:"up", distance:5}, 50 );
+          });
+          
+         $('#VClassURI').css('width','150px');
+         
+         $('#addClassBubble').show();
+         
+     }else{
+         $('#addIndividualClass input[type="submit"]').removeClass('opacity');
+         
+         $('#VClassURI').removeClass('width');
+         
+         $('#addClassBubble').hide();
+     }
+});
\ No newline at end of file
diff --git a/webapp/web/templates/freemarker/body/siteAdmin/siteAdmin-dataInput.ftl b/webapp/web/templates/freemarker/body/siteAdmin/siteAdmin-dataInput.ftl
index 5be180e1b..77698cd89 100644
--- a/webapp/web/templates/freemarker/body/siteAdmin/siteAdmin-dataInput.ftl
+++ b/webapp/web/templates/freemarker/body/siteAdmin/siteAdmin-dataInput.ftl
@@ -8,12 +8,21 @@
     <section class="pageBodyGroup" role="region">
         <h3>Data Input</h3>
 
-        <form action="${dataInput.formAction}" method="get">
+        <form id="addIndividualClass" action="${dataInput.formAction}" method="get">
             <select id="VClassURI" name="typeOfNew" class="form-item" role="select">
                 <@form.optionGroups groups=dataInput.groupedClassOptions />
             </select>
             <input type="hidden" name="editForm" value="edu.cornell.mannlib.vitro.webapp.edit.n3editing.configuration.generators.NewIndividualFormGenerator" role="input" />
             <input type="submit" id="submit" value="Add individual of this class" role="button" />
         </form>
+        
+        <section id="addClassBubble" role="region">
+            <p>Please create a <a title="Create a class gorup" href="${urls.base}/editForm?controller=Classgroup">class group</a> and associate classes with the group created.</p>
+        </section>
     </section>
-</#if>
\ No newline at end of file
+</#if>
+
+${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css" />')}
+
+${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>',
+              '<script type="text/javascript" src="${urls.base}/js/siteAdmin/siteAdminUtils.js"></script>')}
\ No newline at end of file