diff --git a/packages/frontend/src/scripts/components/values/MilestoneName.tsx b/packages/frontend/src/scripts/components/values/MilestoneName.tsx
index 21a149ab..a12bd500 100644
--- a/packages/frontend/src/scripts/components/values/MilestoneName.tsx
+++ b/packages/frontend/src/scripts/components/values/MilestoneName.tsx
@@ -2,10 +2,10 @@ import * as React from 'react'
 
 import { useMilestone } from '../../hooks/entity'
 
-export const MilestoneNameWidget = (props: { productId: string, milestoneId: string }) => {
+export const MilestoneName = (props: { productId: string, milestoneId: string, class?: string }) => {
     const milestone = useMilestone(props.productId, props.milestoneId)
     return (
-        <span className='value milestone_name'>
+        <span className={`value milestone_name ${props.class || ''}`}>
             {milestone ? (
                 milestone.label
             ) : (
diff --git a/packages/frontend/src/scripts/components/values/ProductUserEmail.tsx b/packages/frontend/src/scripts/components/values/ProductUserEmail.tsx
index 3a01a5f2..2fb69c9c 100644
--- a/packages/frontend/src/scripts/components/values/ProductUserEmail.tsx
+++ b/packages/frontend/src/scripts/components/values/ProductUserEmail.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useUser } from '../../hooks/entity'
 import { useMembers } from '../../hooks/list'
 
-export const ProductUserEmailWidget = (props: { productId: string, userId: string, class?: string }) => {
+export const ProductUserEmail = (props: { productId: string, userId: string, class?: string }) => {
     // HOOKS
 
     const members = useMembers(props.productId)
diff --git a/packages/frontend/src/scripts/components/values/ProductUserName.tsx b/packages/frontend/src/scripts/components/values/ProductUserName.tsx
index edcc8363..75aab1f0 100644
--- a/packages/frontend/src/scripts/components/values/ProductUserName.tsx
+++ b/packages/frontend/src/scripts/components/values/ProductUserName.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useUser } from '../../hooks/entity'
 import { useMembers } from '../../hooks/list'
 
-export const ProductUserNameWidget = (props: { productId: string, userId: string, class?: string }) => {
+export const ProductUserName = (props: { productId: string, userId: string, class?: string }) => {
     // HOOKS
 
     const members = useMembers(props.productId)
diff --git a/packages/frontend/src/scripts/components/values/ProductUserPicture.tsx b/packages/frontend/src/scripts/components/values/ProductUserPicture.tsx
index 3f81ed4e..906dd4ae 100644
--- a/packages/frontend/src/scripts/components/values/ProductUserPicture.tsx
+++ b/packages/frontend/src/scripts/components/values/ProductUserPicture.tsx
@@ -8,7 +8,7 @@ import LoadIcon from '/src/images/load.png'
 import PixelIcon from '/src/images/pixel.png'
 import UserIcon from '/src/images/user.png'
 
-export const ProductUserPictureWidget = (props: { userId: string, productId: string, background?: string, class?: string }) => {
+export const ProductUserPicture = (props: { userId: string, productId: string, background?: string, class?: string }) => {
     // HOOKS
 
     const members = useMembers(props.productId)
diff --git a/packages/frontend/src/scripts/components/views/Product.tsx b/packages/frontend/src/scripts/components/views/Product.tsx
index 020be8e6..669ea7e9 100644
--- a/packages/frontend/src/scripts/components/views/Product.tsx
+++ b/packages/frontend/src/scripts/components/views/Product.tsx
@@ -13,7 +13,7 @@ import { useProducts } from '../../hooks/list'
 import { LegalFooter } from '../snippets/LegalFooter'
 import { Column, Table } from '../widgets/Table'
 import { ProductImageWidget } from '../widgets/ProductImage'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
+import { ProductUserPicture } from '../values/ProductUserPicture'
 import { MemberCount } from '../counts/Members'
 import { IssueCount } from '../counts/Issues'
 import { VersionCount } from '../counts/Versions'
@@ -88,7 +88,7 @@ export const ProductView = () => {
             </span>
         ) },
         { label: '🧑', class: 'center', content: product => (
-            <ProductUserPictureWidget userId={product.userId} productId={product.productId} class='icon medium round'/>
+            <ProductUserPicture userId={product.userId} productId={product.productId} class='icon medium round'/>
         ) },
         { label: '🛠️', content: product => (
             <a onClick={event => deleteProduct(event, product)}>
diff --git a/packages/frontend/src/scripts/components/views/ProductIssue.tsx b/packages/frontend/src/scripts/components/views/ProductIssue.tsx
index 47826eae..ca2195b7 100644
--- a/packages/frontend/src/scripts/components/views/ProductIssue.tsx
+++ b/packages/frontend/src/scripts/components/views/ProductIssue.tsx
@@ -16,8 +16,8 @@ import { PartCount } from '../counts/Parts'
 import { LegalFooter } from '../snippets/LegalFooter'
 import { ProductFooter, ProductFooterItem } from '../snippets/ProductFooter'
 import { Column, Table } from '../widgets/Table'
-import { MilestoneNameWidget } from '../values/MilestoneName'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
+import { MilestoneName } from '../values/MilestoneName'
+import { ProductUserPicture } from '../values/ProductUserPicture'
 import { ProductView3D } from '../widgets/ProductView3D'
 import { LoadingView } from './Loading'
 
@@ -86,24 +86,30 @@ export const ProductIssueView = () => {
 
     const columns: Column<Issue>[] = [
         { label: '🧑', class: 'center', content: issue => (
-            <ProductUserPictureWidget userId={issue.userId} productId={productId} class='icon small round'/>
+            <ProductUserPicture userId={issue.userId} productId={productId} class='icon small round'/>
         ) },
         { label: '#', class: 'center nowrap', content: issue => (
-            issue.number
+            <span className='badge'>
+                {issue.number}
+            </span>
         ) },
         { label: 'Label', class: 'left fill', content: issue => (
             issue.label
         ) },
-        { label: 'Milestone', class: 'left nowrap', content: issue => (
-            issue.milestoneId && (
-                <MilestoneNameWidget productId={productId} milestoneId={issue.milestoneId}/>
+        { label: 'Milestone', class: 'center nowrap', content: issue => (
+            issue.milestoneId ? (
+                <MilestoneName productId={productId} milestoneId={issue.milestoneId} class='badge'/>
+            ) : (
+                <span className='badge stroke italic'>not scheduled</span>
             )
         ) },
         { label: 'Assignees', class: 'left nowrap assignees', content: issue => (
-            issue.assignedUserIds.length > 0 && (
+            issue.assignedUserIds.length > 0 ? (
                 issue.assignedUserIds.map((assignedUserId) => (
-                    <ProductUserPictureWidget key={assignedUserId} userId={assignedUserId} productId={productId} class='icon small round'/>
+                    <ProductUserPicture key={assignedUserId} userId={assignedUserId} productId={productId} class='icon small round'/>
                 ))
+            ) : (
+                <span className='badge stroke italic'>not assigned</span>
             )
         ) },
         { label: 'Comments', class: 'center nowrap', content: issue => (
diff --git a/packages/frontend/src/scripts/components/views/ProductIssueComment.tsx b/packages/frontend/src/scripts/components/views/ProductIssueComment.tsx
index 0c26933c..0a8ec9c6 100644
--- a/packages/frontend/src/scripts/components/views/ProductIssueComment.tsx
+++ b/packages/frontend/src/scripts/components/views/ProductIssueComment.tsx
@@ -17,9 +17,9 @@ import { computePath } from '../../functions/path'
 import { LegalFooter } from '../snippets/LegalFooter'
 import { ProductFooter, ProductFooterItem } from '../snippets/ProductFooter'
 import { CommentView } from '../widgets/CommentView'
-import { MilestoneNameWidget } from '../values/MilestoneName'
-import { ProductUserNameWidget } from '../values/ProductUserName'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
+import { MilestoneName } from '../values/MilestoneName'
+import { ProductUserName } from '../values/ProductUserName'
+import { ProductUserPicture } from '../values/ProductUserPicture'
 import { ProductView3D } from '../widgets/ProductView3D'
 import { LoadingView } from './Loading'
 
@@ -174,38 +174,28 @@ export const ProductIssueCommentView = () => {
                                     <span className='number'>{issue.number}</span> {issue.label}
                                 </h1>
                                 <p>
-                                    <ProductUserPictureWidget userId={issue.userId} productId={productId} class='icon middle small round'/>
+                                    <ProductUserPicture productId={productId} userId={issue.userId} class='icon small round'/>
                                     <span> </span>
-                                    <ProductUserNameWidget userId={issue.userId} productId={productId}/>
+                                    <ProductUserName productId={productId} userId={issue.userId}/>
                                     <span> created this issue on <span className='date'>{formatDateTime(new Date(issue.created))}</span></span>
                                 </p>
                                 <p>
-                                    <span className={`state ${issue.state}`}>
+                                    <span className={`state badge ${issue.state == 'open' ? 'red' : 'green'}`}>
                                         {issue.state}
                                     </span>
                                     {issue.milestoneId ? (
-                                        <span className='milestone'>
-                                            <span>scheduled for </span>
-                                            <MilestoneNameWidget productId={productId} milestoneId={issue.milestoneId}/>
-                                        </span>
+                                        <MilestoneName productId={productId} milestoneId={issue.milestoneId} class='milestone badge'/>
                                     ) : (
-                                        <span className='milestone' style={{fontWeight: 'bold'}}>not scheduled</span>
+                                        <span className='milestone badge stroke'>not scheduled</span>
                                     )}
                                     {issue.assignedUserIds && issue.assignedUserIds.length > 0 ? (
                                         <span className='assignees'>
-                                            <span>assigned to</span>
-                                            <span>
-                                                {issue.assignedUserIds.map(assignedUserId => (
-                                                    <span key={assignedUserId} className='assignee'>
-                                                        <ProductUserPictureWidget productId={productId} userId={assignedUserId} class='icon middle small round'/>
-                                                        <span> </span>
-                                                        <ProductUserNameWidget productId={productId} userId={assignedUserId}/>
-                                                    </span>
-                                                ))}
-                                            </span>
+                                            {issue.assignedUserIds.map(assignedUserId => (
+                                                <ProductUserPicture productId={productId} userId={assignedUserId} class='icon small round'/>
+                                            ))}
                                         </span>
                                     ) : (
-                                        <span className='assignees' style={{fontWeight: 'bold'}}>not assigned</span>
+                                        <span className='assignees badge stroke'>not assigned</span>
                                     )}
                                 </p>
                             </div>
diff --git a/packages/frontend/src/scripts/components/views/ProductIssueSetting.tsx b/packages/frontend/src/scripts/components/views/ProductIssueSetting.tsx
index e31e6954..787185db 100644
--- a/packages/frontend/src/scripts/components/views/ProductIssueSetting.tsx
+++ b/packages/frontend/src/scripts/components/views/ProductIssueSetting.tsx
@@ -15,8 +15,8 @@ import { LegalFooter } from '../snippets/LegalFooter'
 import { ProductFooter, ProductFooterItem } from '../snippets/ProductFooter'
 import { Column, Table } from '../widgets/Table'
 import { ProductView3D } from '../widgets/ProductView3D'
-import { ProductUserNameWidget } from '../values/ProductUserName'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
+import { ProductUserName } from '../values/ProductUserName'
+import { ProductUserPicture } from '../values/ProductUserPicture'
 import { LoadingView } from './Loading'
 
 import LeftIcon from '/src/images/setting.png'
@@ -97,10 +97,10 @@ export const ProductIssueSettingView = () => {
 
     const columns: Column<Member>[] = [
         { label: '👤', content: member => (
-            <ProductUserPictureWidget userId={member.userId} productId={productId} class='icon medium round'/>
+            <ProductUserPicture userId={member.userId} productId={productId} class='icon medium round'/>
         ) },
         { label: 'Name', class: 'fill left nowrap', content: member => (
-            <ProductUserNameWidget userId={member.userId} productId={productId}/>
+            <ProductUserName userId={member.userId} productId={productId}/>
         ) },
         { label: '🛠️', class: 'fill center nowrap', content: member => (
             <input type="checkbox" checked={assignedUserIds.indexOf(member.userId) != -1} onChange={() => selectAssignee(member.userId)}/>
diff --git a/packages/frontend/src/scripts/components/views/ProductMember.tsx b/packages/frontend/src/scripts/components/views/ProductMember.tsx
index 6522d67c..0dea8456 100644
--- a/packages/frontend/src/scripts/components/views/ProductMember.tsx
+++ b/packages/frontend/src/scripts/components/views/ProductMember.tsx
@@ -14,8 +14,8 @@ import { LegalFooter } from '../snippets/LegalFooter'
 import { ProductFooter, ProductFooterItem } from '../snippets/ProductFooter'
 import { ProductView3D } from '../widgets/ProductView3D'
 import { Column, Table } from '../widgets/Table'
-import { ProductUserNameWidget } from '../values/ProductUserName'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
+import { ProductUserName } from '../values/ProductUserName'
+import { ProductUserPicture } from '../values/ProductUserPicture'
 import { LoadingView } from './Loading'
 
 import MemberIcon from '/src/images/user.png'
@@ -58,10 +58,10 @@ export const ProductMemberView = () => {
 
     const columns: Column<Member>[] = [
         { label: '👤', content: member => (
-            <ProductUserPictureWidget userId={member.userId} productId={productId} class='icon medium round middle'/>
+            <ProductUserPicture userId={member.userId} productId={productId} class='icon medium round middle'/>
         ) },
         { label: 'Name', class: 'left nowrap', content: member => (
-            <ProductUserNameWidget userId={member.userId} productId={productId}/>
+            <ProductUserName userId={member.userId} productId={productId}/>
         ) },
         { label: 'Role', class: 'fill left nowrap', content: member => (
             <span className='badge role'>{member.role}</span>
diff --git a/packages/frontend/src/scripts/components/views/ProductMilestone.tsx b/packages/frontend/src/scripts/components/views/ProductMilestone.tsx
index e5b86173..bc5b4070 100644
--- a/packages/frontend/src/scripts/components/views/ProductMilestone.tsx
+++ b/packages/frontend/src/scripts/components/views/ProductMilestone.tsx
@@ -15,7 +15,7 @@ import { formatDateTime } from '../../functions/time'
 import { LegalFooter } from '../snippets/LegalFooter'
 import { ProductFooter, ProductFooterItem } from '../snippets/ProductFooter'
 import { MilestoneProgressWidget } from '../widgets/MilestoneProgress'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
+import { ProductUserPicture } from '../values/ProductUserPicture'
 import { ProductView3D } from '../widgets/ProductView3D'
 import { Column, Table } from '../widgets/Table'
 import { LoadingView } from './Loading'
@@ -61,16 +61,20 @@ export const ProductMilestoneView = () => {
 
     const columns: Column<Milestone>[] = [
         { label: '🧑', content: milestone => (
-            <ProductUserPictureWidget userId={milestone.userId} productId={productId} class='icon small round'/>
+            <ProductUserPicture userId={milestone.userId} productId={productId} class='icon small round'/>
         ) },
         { label: 'Label', class: 'left fill', content: milestone => (
             milestone.label
         ) },
         { label: 'Start', class: 'nowrap center', content: milestone => (
-            formatDateTime(new Date(milestone.start))
+            <span className='badge stroke'>
+                {formatDateTime(new Date(milestone.start))}
+            </span>
         ) },
         { label: 'End', class: 'nowrap center', content: milestone => (
-            formatDateTime(new Date(milestone.end))
+            <span className='badge stroke'>
+                {formatDateTime(new Date(milestone.end))}
+            </span>
         ) },
         { label: 'Open', class: 'center', content: milestone => (
             <span className='badge'>
diff --git a/packages/frontend/src/scripts/components/views/ProductMilestoneIssue.tsx b/packages/frontend/src/scripts/components/views/ProductMilestoneIssue.tsx
index 5c764ab0..0699d8b4 100644
--- a/packages/frontend/src/scripts/components/views/ProductMilestoneIssue.tsx
+++ b/packages/frontend/src/scripts/components/views/ProductMilestoneIssue.tsx
@@ -19,7 +19,8 @@ import { PartCount } from '../counts/Parts'
 import { LegalFooter } from '../snippets/LegalFooter'
 import { ProductFooter, ProductFooterItem } from '../snippets/ProductFooter'
 import { BurndownChartWidget } from '../widgets/BurndownChart'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
+import { ProductUserName } from '../values/ProductUserName'
+import { ProductUserPicture } from '../values/ProductUserPicture'
 import { Column, Table } from '../widgets/Table'
 import { LoadingView } from './Loading'
 
@@ -128,7 +129,7 @@ export const ProductMilestoneIssueView = () => {
 
     const columns: Column<Issue>[] = [
         { label: '🧑', content: issue => (
-            <ProductUserPictureWidget userId={issue.userId} productId={productId} class='icon small round'/>
+            <ProductUserPicture userId={issue.userId} productId={productId} class='icon small round'/>
         ) },
         { label: '#', class: 'center nowrap', content: issue => (
             issue.number
@@ -137,9 +138,13 @@ export const ProductMilestoneIssueView = () => {
             issue.label
         ) },
         { label: 'Assignees', class: 'left nowrap assignees', content: issue => (
-            issue.assignedUserIds.map((assignedUserId) => (
-                <ProductUserPictureWidget key={assignedUserId} userId={assignedUserId} productId={productId} class='icon small round'/>
-            ))
+            issue.assignedUserIds.length > 0 ? (
+                issue.assignedUserIds.map((assignedUserId) => (
+                    <ProductUserPicture key={assignedUserId} userId={assignedUserId} productId={productId} class='icon small round'/>
+                ))
+            ) : (
+                <span className='badge stroke italic'>not assigned</span>
+            )
         ) },
         { label: 'Comments', class: 'center nowrap', content: issue => (
             <span className='badge'>
@@ -193,14 +198,21 @@ export const ProductMilestoneIssueView = () => {
                                     {milestone.label}
                                 </h1>
                                 <p>
-                                    <span>Start: </span>    
-                                    <em>
+                                    <ProductUserPicture productId={productId} userId={milestone.userId} class='icon small round'/>
+                                    <span> </span>
+                                    <ProductUserName productId={productId} userId={milestone.userId}/>
+                                    <span> created this milestone on </span>
+                                    <span className='date'>{formatDateTime(new Date(milestone.created))}</span>
+                                </p>
+                                <p style={{color: 'gray'}}>
+                                    <span>This milestone starts on</span>    
+                                    <span className='badge stroke'>
                                         {formatDateTime(new Date(milestone.start))}
-                                    </em>
-                                    <span> / End: </span>  
-                                    <em>
+                                    </span>
+                                    <span style={{marginLeft: '0.5em'}}>and ends on</span>  
+                                    <span className='badge stroke'>
                                         {formatDateTime(new Date(milestone.end))}
-                                    </em>
+                                    </span>
                                 </p>
                                 {contextUser ? (
                                     members.filter(member => member.userId == contextUser.userId).length == 1 ? (
diff --git a/packages/frontend/src/scripts/components/views/ProductVersion.tsx b/packages/frontend/src/scripts/components/views/ProductVersion.tsx
index c3f6c322..245af83d 100644
--- a/packages/frontend/src/scripts/components/views/ProductVersion.tsx
+++ b/packages/frontend/src/scripts/components/views/ProductVersion.tsx
@@ -12,9 +12,9 @@ import { useMembers, useVersions } from '../../hooks/list'
 import { computeTree } from '../../functions/tree'
 import { LegalFooter } from '../snippets/LegalFooter'
 import { ProductFooter, ProductFooterItem } from '../snippets/ProductFooter'
-import { ProductUserNameWidget } from '../values/ProductUserName'
-import { ProductUserEmailWidget } from '../values/ProductUserEmail'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
+import { ProductUserName } from '../values/ProductUserName'
+import { ProductUserEmail } from '../values/ProductUserEmail'
+import { ProductUserPicture } from '../values/ProductUserPicture'
 import { ProductView3D } from '../widgets/ProductView3D'
 import { LoadingView } from './Loading'
 
@@ -161,13 +161,13 @@ export const ProductVersionView = () => {
                                                             <span className="label">
                                                                 {vers.major}.{vers.minor}.{vers.patch}
                                                             </span>
-                                                            <ProductUserPictureWidget userId={vers.userId} productId={productId} class='icon medium round middle'/>
+                                                            <ProductUserPicture userId={vers.userId} productId={productId} class='icon medium round middle'/>
                                                             <span className="user">
                                                                 <span className="name">
-                                                                    <ProductUserNameWidget userId={vers.userId} productId={productId}/>
+                                                                    <ProductUserName userId={vers.userId} productId={productId}/>
                                                                 </span>
                                                                 <span className="email">
-                                                                    <ProductUserEmailWidget userId={vers.userId} productId={productId}/>
+                                                                    <ProductUserEmail userId={vers.userId} productId={productId}/>
                                                                 </span>
                                                             </span>
                                                         </div>
diff --git a/packages/frontend/src/scripts/components/widgets/CommentView.tsx b/packages/frontend/src/scripts/components/widgets/CommentView.tsx
index 4d33aa19..62878c44 100644
--- a/packages/frontend/src/scripts/components/widgets/CommentView.tsx
+++ b/packages/frontend/src/scripts/components/widgets/CommentView.tsx
@@ -13,8 +13,8 @@ import { useMembers, useVersions } from '../../hooks/list'
 import { collectParts, createProcessor } from '../../functions/markdown'
 import { formatDateTime } from '../../functions/time'
 import { computePath } from '../../functions/path'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
-import { ProductUserNameWidget } from '../values/ProductUserName'
+import { ProductUserPicture } from '../values/ProductUserPicture'
+import { ProductUserName } from '../values/ProductUserName'
 
 import PartIcon from '/src/images/part.png'
 import CloseIcon from '/src/images/close.png'
@@ -258,14 +258,14 @@ export const CommentView = (props: { productId: string, issueId: string, comment
             <div className="head">
                 <div className="icon">
                     <a href={`/users/${userId}`}>
-                        <ProductUserPictureWidget userId={userId} productId={productId}/>
+                        <ProductUserPicture userId={userId} productId={productId}/>
                     </a>
                 </div>
                 <div className="text">
                     <p>
                         {comment ? (
                             <>
-                                <strong><ProductUserNameWidget userId={userId} productId={productId}/></strong> commented on {formatDateTime(new Date(comment.created))} {action}
+                                <strong><ProductUserName userId={userId} productId={productId}/></strong> commented on {formatDateTime(new Date(comment.created))} {action}
                             </>
                         ) : (
                             <>
diff --git a/packages/frontend/src/styles/classes/badge.css b/packages/frontend/src/styles/classes/badge.css
index d5a7c4cd..1ab56f35 100644
--- a/packages/frontend/src/styles/classes/badge.css
+++ b/packages/frontend/src/styles/classes/badge.css
@@ -20,6 +20,18 @@ span.badge {
 
     color: gray;
 }
+span.badge.stroke {
+    line-height: calc(1.25rem - 2px);
+
+    padding-left: calc(0.5rem - 1px);
+    padding-right: calc(0.5rem - 1px);
+
+    border-width: 1px;
+    border-style: solid;
+    border-color: lightgray;
+
+    background-color: transparent;
+}
 span.badge:first-child {
     margin-left: 0;
 }
@@ -38,6 +50,24 @@ span.badge.role {
 
     color: white;
 }
+span.badge.red {
+    background-color: var(--red);
+
+    color: white;
+}
+span.badge.green {
+    background-color: var(--green);
+
+    color: white;
+}
+span.badge.blue {
+    background-color: var(--blue);
+
+    color: white;
+}
+span.badge.italic {
+    font-style: italic;
+}
 
 .button.fill span.badge {
     background-color: rgba(255,255,255,0.5);
diff --git a/packages/frontend/src/styles/classes/state.css b/packages/frontend/src/styles/classes/state.css
deleted file mode 100644
index 6e4deb5d..00000000
--- a/packages/frontend/src/styles/classes/state.css
+++ /dev/null
@@ -1,17 +0,0 @@
-span.state {
-    display: inline-block;
-
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-    
-    border-radius: 1em;
-    
-    color: white;
-}
-
-span.state.open {
-    background-color: var(--red);
-}
-span.state.closed {
-    background-color: var(--green);
-}
\ No newline at end of file
diff --git a/packages/frontend/src/styles/classes/value.css b/packages/frontend/src/styles/classes/value.css
index 840c0481..38598ccb 100644
--- a/packages/frontend/src/styles/classes/value.css
+++ b/packages/frontend/src/styles/classes/value.css
@@ -6,11 +6,11 @@ span.value > span.loading {
     display: inline-block;
 
     width: 7em;
-    height: 1em;
+    height: 1.5em;
 
-    border-radius: 0.5em;
+    border-radius: 0.75em;
 
-    vertical-align: middle;
+    vertical-align: top;
 
     background-image: linear-gradient(rgba(0,0,0,0.05),rgba(0,0,0,0.10));
 }
\ No newline at end of file
diff --git a/packages/frontend/src/styles/root.css b/packages/frontend/src/styles/root.css
index 7d7f6646..ca798c35 100644
--- a/packages/frontend/src/styles/root.css
+++ b/packages/frontend/src/styles/root.css
@@ -40,7 +40,6 @@
 @import url(./classes/button.css);
 @import url(./classes/icon.css);
 @import url(./classes/position.css);
-@import url(./classes/state.css);
 @import url(./classes/value.css);
 
 /* Widget specific styles */
diff --git a/packages/frontend/src/styles/views/ProductIssueComment.css b/packages/frontend/src/styles/views/ProductIssueComment.css
index 6354f55d..f9bd56d1 100644
--- a/packages/frontend/src/styles/views/ProductIssueComment.css
+++ b/packages/frontend/src/styles/views/ProductIssueComment.css
@@ -16,38 +16,6 @@ main.view.product-issue-comment div.header span.date {
     font-weight: bold;
 }
 
-main.view.product-issue-comment div.header span.value.milestone_name {
-    font-weight: bold;
-
-    background-image: url(../../images/milestone.png);
-    background-size: 1em 1em;
-    background-repeat: no-repeat;
-    background-position: left center;
-
-    padding-left: 1.25em;
-}
-
-main.view.product-issue-comment div.header span.assignee::before {
-    content: ", ";
-}
-main.view.product-issue-comment div.header span.assignee:first-child:before {
-    content: " ";
-}
-main.view.product-issue-comment div.header span.assignee:last-child:before {
-    content: " and ";
-}
-
-main.view.product-issue-comment div.header p:last-child > span::before {
-    content: "/";
-
+main.view.product-issue-comment div.header span.assignees > * {
     margin-left: 0.5em;
-    margin-right: 0.5em;
-
-    color: lightgray;
-}
-main.view.product-issue-comment div.header p:last-child > span:first-child::before {
-    content: "";
-
-    margin-left: 0;
-    margin-right: 0;
 }
\ No newline at end of file
diff --git a/packages/frontend/src/styles/views/ProductMilestoneIssue.css b/packages/frontend/src/styles/views/ProductMilestoneIssue.css
index a111513d..7142518b 100644
--- a/packages/frontend/src/styles/views/ProductMilestoneIssue.css
+++ b/packages/frontend/src/styles/views/ProductMilestoneIssue.css
@@ -1,3 +1,11 @@
+main.view.product-milestone-issue div.header span.value.product_user_name {
+    font-weight: bold;
+}
+
+main.view.product-milestone-issue div.header span.date {
+    font-weight: bold;
+}
+
 main.view.product-milestone-issue td.assignees img {
     margin-left: 0.25em;
 }