diff --git a/webapp/web/css/account/account.css b/webapp/web/css/account/account.css
index de984ed38..d46773de9 100644
--- a/webapp/web/css/account/account.css
+++ b/webapp/web/css/account/account.css
@@ -149,4 +149,34 @@ padding-right: 5px;
 /* RESET PASSWORD ------>  */
 #reset-password p.note {
      margin-top: 0;
-}
\ No newline at end of file
+}
+/* ASSOCIATE PROFILE ------>  */
+.explanatoryText {
+    color:#999;
+    font-size:.8em;
+    font-style:bold;
+    width:280px;
+    margin-left:10px;
+    line-height:15px; 
+}
+#associated {
+    float:right;
+    margin-top:-98px;
+    margin-right:80px;
+    display:none; 
+}
+#associated label {
+    margin-bottom:5px;
+}
+#associationOptions {
+    float:right;
+    margin-top:-98px;
+    margin-right:80px;
+    display:none; 
+}
+#verifyProfileLink {
+    margin-left:10px;
+}
+#externalAuthIdInUse {
+    color: #f70;
+}
diff --git a/webapp/web/templates/freemarker/body/accounts/userAccounts-associateProfilePanel.ftl b/webapp/web/templates/freemarker/body/accounts/userAccounts-associateProfilePanel.ftl
index e02d41756..aa76ddfa0 100644
--- a/webapp/web/templates/freemarker/body/accounts/userAccounts-associateProfilePanel.ftl
+++ b/webapp/web/templates/freemarker/body/accounts/userAccounts-associateProfilePanel.ftl
@@ -2,51 +2,41 @@
 
 <#-- Template for setting the account reference field, which can also associate a profile with the user account -->
 
-<table>
-    <tr>
-        <td>
-            <label for="externalAuthId">Account Reference</label> 
-            <input type="text" name="externalAuthId" value="${externalAuthId}" id="externalAuthId" role="input "/>
-            <p>
-                External Auth. ID or other unique ID. Can associate the account to the user's profile.
-            </p>
-            <p id="externalAuthIdInUse">
-                That Account Reference is already in use.
-            </p>
-        </td>
-        <td>
-            <#-- If there is an associated profile, show these -->
-            <div id="associated">
-                <p>
-                    <label for="associatedProfileName">Associated profile:</label>
-                    <span class="acSelectionInfo" id="associatedProfileName"></span>
-                    <a href="" id="verifyProfileLink">(verify this match)</a>
-                    <a href="" id="changeProfileLink">(change profile)</a>
-                </p>
-                <input type="hidden" id="associatedProfileUri" name="associatedProfileUri" value="" />
-            </div>
+${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/autocomplete.css"" />',
+                   '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css"" />')}
+
+    <label for="externalAuthId">External Auth. ID / Matching ID</label> 
+    <input type="text" name="externalAuthId" value="${externalAuthId}" id="externalAuthId" role="input "/>
+    <span id="externalAuthIdInUse"  style="display: none;" >This Account Reference is already in use.</span>
+    <p class="explanatoryText"  style="margin-top:-8px">Can be used to associate the account with the user's profile via the matching property.</p>
+    <#-- If there is an associated profile, show these -->
+    <div id="associated">
+        <p>
+            <label for="associatedProfileName">Associated profile:</label>
+            <span class="acSelectionInfo" id="associatedProfileName"></span>
+            <a href="" id="verifyProfileLink">(verify this match)</a>
+            <a href="" id="changeProfileLink">(change profile)</a>
+        </p>
+        <input type="hidden" id="associatedProfileUri" name="associatedProfileUri" value="" />
+    </div>
             
-            <#-- If we haven't selected one, show these instead -->
-            <div id="associationOptions">
-                <p>
-                    <label for="associateProfileName">Select an existing profile</label>
-                    <input type="text" id="associateProfileName" name="associateProfileName" class="acSelector" size="35">
-                </p>
-                <p> - or - </p>
-                <p> 
-                    <label for="">Create an associated profile</label> 
-                    <select name="degreeUri" id="degreeUri" >
-                        <option value="" selected="selected">Select one</option>
-                        <#list profileTypes?keys as key>
-                            <option value="${key}" >${profileTypes[key]}</option>           
-                        </#list>    
-                    </select>    
-                </p>
-            </div>
-            
-        </td>
-    </tr>
-</table>
+    <#-- If we haven't selected one, show these instead -->
+    <div id="associationOptions">
+        <p>
+            <label for="associateProfileName">Select the associated profile</label>
+            <input type="text" id="associateProfileName" name="associateProfileName" class="acSelector" size="35">
+        </p>
+        <p> - or - </p>
+        <p> 
+            <label for="">Create the associated profile</label> 
+            <select name="degreeUri" id="degreeUri" >
+                <option value="" selected="selected">Select one</option>
+                <#list profileTypes?keys as key>
+                    <option value="${key}" >${profileTypes[key]}</option>           
+                </#list>    
+            </select>    
+        </p>
+    </div>
 
 <script type="text/javascript">
 var associateProfileFieldsData = {