diff --git a/src/components/controls/password-field.tsx b/src/components/controls/password-field.tsx
index 259f894..7937432 100644
--- a/src/components/controls/password-field.tsx
+++ b/src/components/controls/password-field.tsx
@@ -2,8 +2,7 @@ import React, { FC, ReactNode } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import zxcvbn from 'zxcvbn'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faKey, faExclamationTriangle, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+import { faKey } from '@fortawesome/free-solid-svg-icons'
 import { useTheme } from 'src/hooks'
 import { setFieldValue } from 'src/actions/forms'
 import { getFieldValue, getFieldNotification } from 'src/selectors/forms'
@@ -28,7 +27,6 @@ const PasswordField: FC<Props> = ({
     const notification = useSelector<AppState, FormNotification | undefined>(state => getFieldNotification(state, 'password'))
     const dispatch = useDispatch()
 
-    let icon: IconDefinition | undefined
     let passwordMessage: ReactNode | undefined
     let successState = false
     let errorState = false
@@ -39,7 +37,6 @@ const PasswordField: FC<Props> = ({
         switch (score) {
             case 0:
                 errorState = true
-                icon = faExclamationTriangle
                 passwordMessage = <span>Strength: <span style={{ color: theme.red }}>Unusable</span></span>
                 break
             case 1:
@@ -55,7 +52,6 @@ const PasswordField: FC<Props> = ({
                 break
             case 4:
                 successState = true
-                icon = faCheckCircle
                 passwordMessage = <span>Strength: <span style={{ color: theme.green }}>LIT</span></span>
                 break
         }
@@ -72,7 +68,7 @@ const PasswordField: FC<Props> = ({
         }
     }
 
-    const color = successState ? theme.green : errorState ? theme.red : theme.backgroundSecondary
+    const color = successState ? theme.green : errorState ? theme.red : theme.primary
 
     const helpText = () => {
         if (notification) return <FormNotificationComponent notification={notification} />
@@ -83,22 +79,17 @@ const PasswordField: FC<Props> = ({
         <div className="field">
             <FieldLabel>Password</FieldLabel>
             <div className="control-container">
-                <div className="icon">
+                <div className="icon" style={{ backgroundColor: color, color: theme.primaryAlternate }}>
                     <FontAwesomeIcon icon={faKey} />
                 </div>
                 <div className="control">
                     <input
-                        style={{ backgroundColor: theme.backgroundPrimary, borderColor: color, color: theme.text }}
+                        style={{ backgroundColor: theme.backgroundSecondary, borderColor: color, color: theme.text }}
                         type="password"
                         placeholder={placeholder}
                         value={value}
                         onChange={e => dispatch(setFieldValue('password', e.target.value))} />
                 </div>
-                {icon &&
-                    <div className="icon">
-                        <FontAwesomeIcon icon={icon} />
-                    </div>
-                }
             </div>
             {helpText()}
         </div>
diff --git a/src/components/controls/text-field.tsx b/src/components/controls/text-field.tsx
index 4f063f6..e0b5abd 100644
--- a/src/components/controls/text-field.tsx
+++ b/src/components/controls/text-field.tsx
@@ -36,7 +36,7 @@ const TextField: FC<Props> = ({
     const notification = useSelector<AppState, FormNotification | undefined>(state => getFieldNotification(state, name))
     const dispatch = useDispatch()
 
-    let color = theme.secondary
+    let color = theme.primary
 
     if (notification) {
         switch (notification.type) {
@@ -54,7 +54,7 @@ const TextField: FC<Props> = ({
             <FieldLabel>{label}</FieldLabel>
             <div className="control-container">
                 {icon &&
-                    <div className="icon" style={{ backgroundColor: theme.primary, color: theme.primaryAlternate }}>
+                    <div className="icon" style={{ backgroundColor: color, color: theme.primaryAlternate }}>
                         <FontAwesomeIcon icon={icon} />
                     </div>
                 }
diff --git a/src/components/notification.tsx b/src/components/notification.tsx
index d4089cd..bd6d5d5 100644
--- a/src/components/notification.tsx
+++ b/src/components/notification.tsx
@@ -1,4 +1,6 @@
 import React, { FC, MouseEventHandler } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faWindowClose } from '@fortawesome/free-solid-svg-icons'
 import { useTheme } from 'src/hooks'
 import { NotificationType } from 'src/types'
 
@@ -27,9 +29,13 @@ const Notification: FC<Props> = ({ id, type, auto, setAuto, dismiss, children })
     }
 
     return (
-        <div className="notification" onClick={() => setAuto(id)} style={{ backgroundColor: color(), color: theme.text }}>
-            {!auto && <button className="delete" onClick={handleDismiss}></button>}
-            {children}
+        <div className="notification" onClick={() => setAuto(id)} style={{ backgroundColor: color(), color: '#fff' }}>
+            {!auto &&
+                <button className="delete" onClick={handleDismiss} style={{ backgroundColor: color(), color: '#fff' }}>
+                    <FontAwesomeIcon icon={faWindowClose} />
+                </button>
+            }
+            <div>{children}</div>
         </div>
     )
 }
diff --git a/src/components/pages/login.tsx b/src/components/pages/login.tsx
index bb06edb..ab44408 100644
--- a/src/components/pages/login.tsx
+++ b/src/components/pages/login.tsx
@@ -12,6 +12,7 @@ import { getIsFetching } from 'src/selectors/requests'
 import { initForm, initField, setFieldNotification } from 'src/actions/forms'
 
 import Title from 'src/components/title'
+import Section from 'src/components/section'
 import TextField from 'src/components/controls/text-field'
 import PasswordField from 'src/components/controls/password-field'
 import PrimaryButton from 'src/components/controls/primary-button'
@@ -64,12 +65,14 @@ const Login: FC = () => {
     
     return (
         <div>
-            <Title>Log In to Flexor</Title>
+            <Section>
+                <Title>Log In to Flexor</Title>
 
-            <TextField icon={faIdCard} name="name" label="Username" placeholder="Your Username/ID" />
-            <PasswordField placeholder="Your password" showStrength={false} />
+                <TextField icon={faIdCard} name="name" label="Username" placeholder="Your Username/ID" />
+                <PasswordField placeholder="Your password" showStrength={false} />
 
-            <PrimaryButton text="Log In" icon={faKey} onClick={() => handleAuthenticate()} loading={authenticating} />
+                <PrimaryButton text="Log In" onClick={() => handleAuthenticate()} loading={authenticating} />
+            </Section>
         </div>
     )
 }
diff --git a/src/components/self-info.tsx b/src/components/self-info.tsx
index 692de24..f6d30ac 100644
--- a/src/components/self-info.tsx
+++ b/src/components/self-info.tsx
@@ -6,6 +6,8 @@ import { useConfig, useTheme } from 'src/hooks'
 import { urlForBlob } from 'src/utils'
 import { AppState, User } from 'src/types'
 
+import HorizontalRule from 'src/components/horizontal-rule'
+
 const SelfInfo: FC = () => {
     const theme = useTheme()
     const config = useConfig()
@@ -13,9 +15,9 @@ const SelfInfo: FC = () => {
 
     if (!user) {
         return (
-            <div className="user-info unauthenticated" style={{ backgroundColor: theme.primary }}>
+            <div className="user-info-unauthenticated" style={{ backgroundColor: theme.primary }}>
                 <Link to="/login" style={{ color: theme.primaryAlternate, fontSize: '1.1rem' }}>Log In to Flexor</Link>
-                <p className="divider">or</p>
+                <HorizontalRule />
                 <Link to="/communities" style={{ color: theme.backgroundSecondary, fontSize: '0.9rem' }}>Create an Account</Link>
             </div>
         )
diff --git a/src/styles/app.css b/src/styles/app.css
index fb71fe8..239f112 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -159,7 +159,7 @@ div.field {
     margin: 1rem 0px;
 }
 
-div.field div.label {
+div.field label {
     font-weight: 700;
 }
 
@@ -179,6 +179,7 @@ div.control {
 
 p.help {
     font-size: 0.8rem;
+    margin-top: -0.25rem;
 }
 
 div.search {
@@ -193,6 +194,25 @@ div.notification-container {
     width: 40%;
 }
 
+div.notification {
+    border-radius: 5px;
+    margin-bottom: 1rem;
+}
+
+div.notification > div {
+    padding: 1rem;
+}
+
+button.delete {
+    border: none;
+    margin: 0px;
+    min-width: 0px;
+    padding: 0px;
+    position: absolute;
+    right: 10px;
+    top: 3px;
+}
+
 nav.level {
     display: flex;
     justify-content: space-between;
@@ -227,7 +247,7 @@ div.composer-container {
     border-bottom: var(--default-border);
 }
 
-div.composer-empty, div.composer-empty {
+div.composer-empty, div.composer-error {
     font-size: 0.8rem;
     text-align: center;
     padding: 1.5rem;
@@ -265,6 +285,11 @@ div.user-info {
     padding: 1.5rem 1rem;
 }
 
+div.user-info-unauthenticated {
+    padding: 1.5rem 1rem;
+    text-align: center;
+}
+
 div.group-info {
     display: flex;
 }