diff --git a/app/index.js b/app/index.js
index 0a1bfdb3..2afaf13c 100644
--- a/app/index.js
+++ b/app/index.js
@@ -1,3 +1,6 @@
+// Set server timezone to UTC to avoid issues with date parsing
+process.env.TZ = 'UTC'
+
 const path = require('path')
 const express = require('express')
 const bodyParser = require('body-parser')
diff --git a/app/manage/index.js b/app/manage/index.js
index a44ca0be..4fd7b603 100644
--- a/app/manage/index.js
+++ b/app/manage/index.js
@@ -302,18 +302,18 @@ function manageRouter (nextApp) {
     }
   )
 
-  // Use same page for two routes
-  const assignBadgePageRoute = [
-    can('organization:edit'),
-    (req, res) => nextApp.render(req, res, '/badges/assign', req.params)
-  ]
+  // New badge assignment
   router.get(
     '/organizations/:id/badges/assign/:userId',
-    ...assignBadgePageRoute
+    can('organization:edit'),
+    (req, res) => nextApp.render(req, res, '/badges-assignment/new', req.params)
   )
+
+  // Edit badge assignment
   router.get(
     '/organizations/:id/badges/:badgeId/assign/:userId',
-    ...assignBadgePageRoute
+    can('organization:edit'),
+    (req, res) => nextApp.render(req, res, '/badges-assignment/edit', req.params)
   )
 
   return router
diff --git a/components/profile-modal.js b/components/profile-modal.js
index bb83481d..18ae1c02 100644
--- a/components/profile-modal.js
+++ b/components/profile-modal.js
@@ -3,6 +3,7 @@ import { isEmpty } from 'ramda'
 import theme from '../styles/theme'
 import Popup from 'reactjs-popup'
 import Button from './button'
+import SvgSquare from '../components/svg-square'
 
 function renderActions (actions) {
   return (
@@ -43,7 +44,32 @@ function renderActions (actions) {
   )
 }
 
-export default function ProfileModal ({ user, attributes, onClose, actions }) {
+function renderBadges (badges) {
+  if (!badges || badges.length === 0) {
+    return null
+  }
+
+  return (
+    <table>
+      {badges.map((b) => (
+        <tr>
+          <td>
+            <SvgSquare color={b.color} />
+          </td>
+          <td>{b.name}</td>
+        </tr>
+      ))}
+    </table>
+  )
+}
+
+export default function ProfileModal ({
+  user,
+  attributes,
+  badges,
+  onClose,
+  actions
+}) {
   actions = actions || []
   let profileContent = <dl>User does not have a profile</dl>
   if (!isEmpty(attributes)) {
@@ -87,13 +113,18 @@ export default function ProfileModal ({ user, attributes, onClose, actions }) {
   `}</style>
     </>
   }
-  return <article className='modal__details'>
-    { user.img ? <img src={user.img} /> : '' }
-    <h2 style={{ display: 'flex', 'justifyContent': 'space-between' }}>
-      <span>{user.name}</span>
-      {!isEmpty(actions) && renderActions(actions)}
-    </h2>
-    {profileContent}
-    <Button size='small' onClick={() => onClose()}>close</Button>
-  </article>
+  return (
+    <article className='modal__details'>
+      {user.img ? <img src={user.img} /> : ''}
+      <h2 style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <span>{user.name}</span>
+        {!isEmpty(actions) && renderActions(actions)}
+      </h2>
+      {profileContent}
+      {renderBadges(badges)}
+      <Button size='small' onClick={() => onClose()}>
+        close
+      </Button>
+    </article>
+  )
 }
diff --git a/components/svg-square.js b/components/svg-square.js
new file mode 100644
index 00000000..0c33d9bc
--- /dev/null
+++ b/components/svg-square.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function SvgSquare ({ color, size = 20 }) {
+  return (
+    <svg width={size} height={size}>
+      <rect width={size} height={size} style={{ fill: color }} />
+    </svg>
+  )
+}
diff --git a/pages/badges/assign.js b/pages/badges-assignment/edit.js
similarity index 72%
rename from pages/badges/assign.js
rename to pages/badges-assignment/edit.js
index 9298cb7b..f78c4a39 100644
--- a/pages/badges/assign.js
+++ b/pages/badges-assignment/edit.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import * as Yup from 'yup'
 import { Formik, Field, Form } from 'formik'
 import APIClient from '../../lib/api-client'
 import Button from '../../components/button'
@@ -39,13 +40,13 @@ function Section ({ children }) {
   )
 }
 
-export default class AssignBadge extends Component {
+export default class EditBadgeAssignment extends Component {
   static async getInitialProps ({ query }) {
     if (query) {
       return {
         orgId: query.id,
-        badgeId: query.badgeId,
-        userId: query.userId
+        badgeId: parseInt(query.badgeId),
+        userId: parseInt(query.userId)
       }
     }
   }
@@ -64,22 +65,26 @@ export default class AssignBadge extends Component {
   }
 
   async loadData () {
-    const { orgId, badgeId } = this.props
+    const { orgId, badgeId, userId } = this.props
 
     try {
       const org = await apiClient.get(`/organizations/${orgId}`)
-      let badge, badges
+      const badge = await apiClient.get(
+        `/organizations/${orgId}/badges/${badgeId}`
+      )
+      let assignment
+      if (badge && badge.users) {
+        assignment = badge.users.find((u) => u.id === parseInt(userId))
+      }
 
-      if (badgeId) {
-        badge = await apiClient.get(`/organizations/${orgId}/badges/${badgeId}`)
-      } else {
-        badges = await apiClient.get(`/organizations/${orgId}/badges`)
+      if (!assignment) {
+        throw Error('Badge assignment not found.')
       }
 
       this.setState({
         org,
         badge,
-        badges
+        assignment
       })
     } catch (error) {
       console.error(error)
@@ -99,8 +104,8 @@ export default class AssignBadge extends Component {
       return <div>Loading...</div>
     }
 
-    const { orgId, userId } = this.props
-    const { badges, badge, user } = this.state
+    const { orgId, userId, badgeId } = this.props
+    const { badge, assignment } = this.state
 
     return (
       <>
@@ -111,66 +116,57 @@ export default class AssignBadge extends Component {
           <Formik
             initialValues={{
               assignedAt:
-                (user && user.assignedAt && user.assignedAt.substring(0, 10)) ||
+                (assignment &&
+                  assignment.assignedAt &&
+                  assignment.assignedAt.substring(0, 10)) ||
                 format(Date.now(), 'yyyy-MM-dd'),
               validUntil:
-                (user && user.validUntil && user.validUntil.substring(0, 10)) ||
+                (assignment &&
+                  assignment.validUntil &&
+                  assignment.validUntil.substring(0, 10)) ||
                 ''
             }}
-            onSubmit={async ({ assignedAt, validUntil, badgeId }) => {
+            validationSchema={Yup.object().shape({
+              assignedAt: Yup.date().required(
+                'Please select an assignment date.'
+              ),
+              validUntil: Yup.date().when(
+                'assignedAt',
+                (assignedAt, schema) =>
+                  assignedAt &&
+                  schema.min(
+                    assignedAt,
+                    'End date must be after the start date.'
+                  )
+              )
+            })}
+            onSubmit={async ({ assignedAt, validUntil }) => {
               try {
                 const payload = {
                   assigned_at: assignedAt,
                   valid_until: validUntil !== '' ? validUntil : null
                 }
 
-                if (!user) {
-                  await apiClient.post(
-                    `/organizations/${orgId}/badges/${badgeId}/assign/${userId}`,
-                    payload
-                  )
-                  Router.push(
-                    join(
-                      URL,
-                      `/organizations/${orgId}/badges/${badgeId}/assign/${userId}`
-                    )
-                  )
-                } else {
-                  await apiClient.patch(
-                    `/organizations/${orgId}/member/${userId}/badge/${badgeId}`,
-                    payload
-                  )
-                  toast.info('Badge updated successfully.')
-                }
+                await apiClient.patch(
+                  `/organizations/${orgId}/member/${userId}/badge/${badgeId}`,
+                  payload
+                )
+                toast.info('Badge updated successfully.')
                 this.loadData()
               } catch (error) {
                 console.log(error)
                 toast.error(`Unexpected error, please try again later.`)
               }
             }}
-            render={({ isSubmitting, values }) => {
+            render={({ isSubmitting, values, errors }) => {
               return (
                 <Form>
                   <div className='page__heading'>
                     <h2>User: {userId} (OSM id)</h2>
                   </div>
-                  {badge ? (
-                    <div className='page__heading'>
-                      <h2>Badge: {badge && badge.name}</h2>
-                    </div>
-                  ) : (
-                    <div className='form-control form-control__vertical'>
-                      <label htmlFor='badgeId'>Badge:</label>
-                      <Field as='select' name='badgeId'>
-                        <option value=''>Select a badge</option>
-                        {badges.map((b) => (
-                          <option key={b.id} value={b.id}>
-                            {b.name}
-                          </option>
-                        ))}
-                      </Field>
-                    </div>
-                  )}
+                  <div className='page__heading'>
+                    <h2>Badge: {badge && badge.name}</h2>
+                  </div>
                   <div className='form-control form-control__vertical'>
                     <label htmlFor='assignedAt'>Assigned At (required)</label>
                     <Field
@@ -178,6 +174,9 @@ export default class AssignBadge extends Component {
                       type='date'
                       value={values.assignedAt}
                     />
+                    {errors.assignedAt && (
+                      <div className='form--error'>{errors.assignedAt}</div>
+                    )}
                   </div>
                   <div className='form-control form-control__vertical'>
                     <label htmlFor='validUntil'>Valid Until</label>
@@ -186,6 +185,9 @@ export default class AssignBadge extends Component {
                       type='date'
                       value={values.validUntil}
                     />
+                    {errors.validUntil && (
+                      <div className='form--error'>{errors.validUntil}</div>
+                    )}
                   </div>
                   <ButtonWrapper>
                     <Button
diff --git a/pages/badges-assignment/new.js b/pages/badges-assignment/new.js
new file mode 100644
index 00000000..e083c673
--- /dev/null
+++ b/pages/badges-assignment/new.js
@@ -0,0 +1,218 @@
+import React, { Component } from 'react'
+import * as Yup from 'yup'
+import { Formik, Field, Form } from 'formik'
+import APIClient from '../../lib/api-client'
+import Button from '../../components/button'
+import { format } from 'date-fns'
+import { toast } from 'react-toastify'
+import join from 'url-join'
+import Router from 'next/router'
+import getConfig from 'next/config'
+
+const { publicRuntimeConfig } = getConfig()
+const URL = publicRuntimeConfig.APP_URL
+
+const apiClient = new APIClient()
+
+function ButtonWrapper ({ children }) {
+  return (
+    <div>
+      {children}
+      <style jsx global>{`
+      .button {
+        margin-right: 10px;
+      }
+    }`}</style>
+    </div>
+  )
+}
+
+function Section ({ children }) {
+  return (
+    <section>
+      {children}
+      <style jsx global>{`
+      section {
+        margin-bottom: 20px;
+      }
+    }`}</style>
+    </section>
+  )
+}
+
+export default class NewBadgeAssignment extends Component {
+  static async getInitialProps ({ query }) {
+    if (query) {
+      return {
+        orgId: query.id,
+        userId: query.userId
+      }
+    }
+  }
+
+  constructor (props) {
+    super(props)
+    this.state = {
+      badges: []
+    }
+
+    this.loadData = this.loadData.bind(this)
+  }
+
+  async componentDidMount () {
+    this.loadData()
+  }
+
+  async loadData () {
+    const { orgId } = this.props
+
+    try {
+      // Fetch data and apply to state
+      const org = await apiClient.get(`/organizations/${orgId}`)
+      const badges = await apiClient.get(`/organizations/${orgId}/badges`)
+      this.setState({
+        org,
+        badges
+      })
+    } catch (error) {
+      console.error(error)
+      this.setState({
+        error,
+        loading: false
+      })
+    }
+  }
+
+  renderPageInner () {
+    if (this.state.error) {
+      return <div>An unexpected error occurred, please try again later.</div>
+    }
+
+    if (!this.state.org && (!this.state.badge || !this.state.badges)) {
+      return <div>Loading...</div>
+    }
+
+    const { orgId, userId } = this.props
+    const { badges } = this.state
+
+    return (
+      <>
+        <div className='page__heading'>
+          <h1>Badge Assignment</h1>
+        </div>
+        <Section>
+          <Formik
+            initialValues={{
+              assignedAt: format(Date.now(), 'yyyy-MM-dd')
+            }}
+            validationSchema={Yup.object().shape({
+              badgeId: Yup.number()
+                .oneOf(badges.map((b) => b.id))
+                .required('Please select a badge.'),
+              assignedAt: Yup.date().required(
+                'Please select an assignment date.'
+              ),
+              validUntil: Yup.date().when(
+                'assignedAt',
+                (assignedAt, schema) =>
+                  assignedAt &&
+                  schema.min(
+                    assignedAt,
+                    'End date must be after the start date.'
+                  )
+              )
+            })}
+            onSubmit={async ({ assignedAt, validUntil, badgeId }) => {
+              try {
+                await apiClient.post(
+                  `/organizations/${orgId}/badges/${badgeId}/assign/${userId}`,
+                  {
+                    assigned_at: assignedAt,
+                    valid_until: validUntil
+                  }
+                )
+                Router.push(
+                  join(
+                    URL,
+                    `/organizations/${orgId}/badges/${badgeId}/assign/${userId}`
+                  )
+                )
+              } catch (error) {
+                console.log(error)
+
+                if (error.message === 'User is already assigned to badge.') {
+                  toast.error(`User is already assigned to this badge, please select a different one.`)
+                } else {
+                  toast.error(`Unexpected error, please try again later.`)
+                }
+              }
+            }}
+            render={({ isSubmitting, values, errors, touched }) => {
+              return (
+                <Form>
+                  <div className='page__heading'>
+                    <h2>User: {userId} (OSM id)</h2>
+                  </div>
+
+                  <div className='form-control form-control__vertical'>
+                    <label htmlFor='badgeId'>Badge:</label>
+                    <Field as='select' name='badgeId'>
+                      <option value=''>Select a badge</option>
+                      {badges.map((b) => (
+                        <option key={b.id} value={b.id}>
+                          {b.name}
+                        </option>
+                      ))}
+                    </Field>
+                    {errors.badgeId && (
+                      <div className='form--error'>{errors.badgeId}</div>
+                    )}
+                  </div>
+                  <div className='form-control form-control__vertical'>
+                    <label htmlFor='assignedAt'>Assigned At (required)</label>
+                    <Field
+                      name='assignedAt'
+                      type='date'
+                      value={values.assignedAt}
+                    />
+                    {errors.assignedAt && (
+                      <div className='form--error'>{errors.assignedAt}</div>
+                    )}
+                  </div>
+                  <div className='form-control form-control__vertical'>
+                    <label htmlFor='validUntil'>Valid Until</label>
+                    <Field
+                      name='validUntil'
+                      type='date'
+                      value={values.validUntil}
+                    />
+                    {errors.validUntil && (
+                      <div className='form--error'>{errors.validUntil}</div>
+                    )}
+                  </div>
+                  <ButtonWrapper>
+                    <Button
+                      disabled={isSubmitting}
+                      variant='primary'
+                      type='submit'
+                      value='Assign'
+                    />
+                    <Button
+                      variant='small'
+                      href={`/organizations/${orgId}`}
+                      value='Go to organization view'
+                    />
+                  </ButtonWrapper>
+                </Form>
+              )
+            }}
+          />
+        </Section>
+      </>
+    )
+  }
+
+  render () {
+    return <article className='inner page'>{this.renderPageInner()}</article>
+  }
+}
diff --git a/pages/badges/edit.js b/pages/badges/edit.js
index 917b2ceb..6a705ee0 100644
--- a/pages/badges/edit.js
+++ b/pages/badges/edit.js
@@ -94,7 +94,7 @@ export default class EditBadge extends Component {
       { key: 'validUntil', label: 'Valid Until' }
     ]
 
-    const { badge, assignablePeople } = this.state
+    const { badge } = this.state
     const users = (badge && badge.users) || []
 
     return (
@@ -102,63 +102,26 @@ export default class EditBadge extends Component {
         <div className='team__table'>
           <div className='page__heading'>
             <h2>Assigned Members</h2>
-            <Formik
-              initialValues={{ osmIdentifier: '' }}
-              onSubmit={async ({ osmIdentifier }) => {
-                const user = assignablePeople.find(
-                  (p) =>
-                    p.id === osmIdentifier ||
-                    p.name.toLowerCase() === osmIdentifier.toLowerCase()
-                )
-                if (!user) {
-                  toast.error('User is not part of this organization.')
-                } else {
-                  Router.push(
-                    join(
-                      URL,
-                      `/organizations/${orgId}/badges/${badgeId}/assign/${user.id}`
-                    )
-                  )
-                }
-              }}
-              render={({ values }) => {
-                return (
-                  <Form className='form-control'>
-                    <Field
-                      type='text'
-                      name='osmIdentifier'
-                      id='osmIdentifier'
-                      placeholder='OSM id'
-                      value={values.osmIdentifier}
-                    />
-                    <Button type='submit' variant='submit'>
-                      Assign
-                    </Button>
-                  </Form>
-                )
-              }}
-            />
           </div>
         </div>
 
-        {users.length > 0 && (
-          <Table
-            rows={users.map((u) => ({
-              ...u,
-              assignedAt: u.assignedAt && toDateString(u.assignedAt),
-              validUntil: u.validUntil && toDateString(u.validUntil)
-            }))}
-            columns={columns}
-            onRowClick={({ id }) =>
-              Router.push(
-                join(
-                  URL,
-                  `/organizations/${orgId}/badges/${badgeId}/assign/${id}`
-                )
+        <Table
+          rows={users.map((u) => ({
+            ...u,
+            assignedAt: u.assignedAt && toDateString(u.assignedAt),
+            validUntil: u.validUntil && toDateString(u.validUntil)
+          }))}
+          emptyPlaceHolder='No members have this badge assigned. Badges can be assigned via user profile actions.'
+          columns={columns}
+          onRowClick={({ id }) =>
+            Router.push(
+              join(
+                URL,
+                `/organizations/${orgId}/badges/${badgeId}/assign/${id}`
               )
-            }
-          />
-        )}
+            )
+          }
+        />
       </section>
     )
   }
diff --git a/pages/organization.js b/pages/organization.js
index ff68fa15..d45659ee 100644
--- a/pages/organization.js
+++ b/pages/organization.js
@@ -8,6 +8,7 @@ import SectionHeader from '../components/section-header'
 import Table from '../components/table'
 import theme from '../styles/theme'
 import AddMemberForm from '../components/add-member-form'
+import SvgSquare from '../components/svg-square'
 import Button from '../components/button'
 import Modal from 'react-modal'
 import ProfileModal from '../components/profile-modal'
@@ -74,10 +75,18 @@ export default class Organization extends Component {
     const { id } = this.props
 
     try {
+      // Fetch profile attributes
       const profileInfo = await getUserOrgProfile(id, user.id)
+
+      // Fetch badges for this organization
+      const profileBadges = (
+        await apiClient.get(`/user/${user.id}/badges`)
+      ).badges.filter((b) => b.organization_id === parseInt(id))
+
       this.setState({
         profileInfo,
         profileMeta: user,
+        profileBadges,
         modalIsOpen: true
       })
     } catch (e) {
@@ -233,11 +242,7 @@ export default class Organization extends Component {
           <Table rows={(this.state.badges || []).map((row) => {
             return {
               ...row,
-              color: () => (
-                <svg width='20' height='20'>
-                  <rect width='20' height='20' style={{ fill: row.color }} />
-                </svg>
-              )
+              color: () => <SvgSquare color={row.color} />
             }
           })} columns={columns} onRowClick={
             ({ id: badgeId }) => Router.push(
@@ -307,6 +312,7 @@ export default class Organization extends Component {
     let profileActions = []
 
     if (this.state.modalIsOpen && isUserOwner) {
+      console.log('here')
       const profileId = parseInt(this.state.profileMeta.id)
       const isProfileManager = contains(profileId, managerIds)
       const isProfileOwner = contains(profileId, ownerIds)
@@ -338,14 +344,13 @@ export default class Organization extends Component {
         }
       }
 
-      if (isProfileManager || isProfileOwner) {
-        profileActions.push({
-          name: 'Assign a Badge',
-          onClick: () => Router.push(
+      profileActions.push({
+        name: 'Assign a Badge',
+        onClick: () =>
+          Router.push(
             join(URL, `/organizations/${org.id}/badges/assign/${profileId}`)
           )
-        })
-      }
+      })
     }
 
     return (
@@ -415,6 +420,7 @@ export default class Organization extends Component {
         }} isOpen={this.state.modalIsOpen}>
           <ProfileModal
             user={this.state.profileMeta}
+            badges={this.state.profileBadges}
             attributes={this.state.profileInfo}
             onClose={this.closeProfileModal}
             actions={profileActions}