diff --git a/app/components/allianceInfo.tsx b/app/components/allianceInfo.tsx
index f763c20d..cb283200 100644
--- a/app/components/allianceInfo.tsx
+++ b/app/components/allianceInfo.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { serverDateToMoment } from 'app/util';
 import QueryState from 'app/components/queryState';
 import EmpireLink from 'app/components/empireLink';
 import { AllianceInfoWindowOptions } from 'app/interfaces/window';
 import { useAllianceProfileQuery } from 'app/queries/alliance';
+import TimeInWords from 'app/components/menu/timeInWords';
 
 type Props = {
   options: AllianceInfoWindowOptions;
@@ -16,21 +16,34 @@ const AllianceInfoWindow: React.FunctionComponent<Props> = ({ options }) => {
     <QueryState isPending={isPending} error={error}>
       {profile && (
         <div className='bulma'>
-          <ul>
-            <li>
-              <strong>Name:</strong> {profile.name}
-            </li>
-            <li>
-              <strong>Description:</strong> {profile.description}
-            </li>
-            <li>
-              <strong>Founded:</strong> {serverDateToMoment(profile.date_created).format('LL')}
-            </li>
-            <li>
-              <strong>Leader:</strong>{' '}
-              {profile.members.find((member) => member.id === profile.leader_id)?.name}
-            </li>
-          </ul>
+          <table className='table is-fullwidth is-borderless mb-4'>
+            <tr>
+              <td>
+                <span className='has-text-weight-bold'>Name</span>
+              </td>
+              <td>{profile.name}</td>
+            </tr>
+            <tr>
+              <td>
+                <span className='has-text-weight-bold'>Description</span>
+              </td>
+              <td>{profile.description}</td>
+            </tr>
+            <tr>
+              <td>
+                <span className='has-text-weight-bold'>Founded</span>
+              </td>
+              <td>
+                <TimeInWords date={profile.date_created} />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className='has-text-weight-bold'>Leader</span>
+              </td>
+              <td>{profile.members.find((member) => member.id === profile.leader_id)?.name}</td>
+            </tr>
+          </table>
 
           <p className='has-text-weight-bold mt-3'>Members ({profile.members.length})</p>
           <ul>
diff --git a/app/components/bodyDetails/bodyDetailsHeader.tsx b/app/components/bodyDetails/bodyDetailsHeader.tsx
index 6de6f74f..18779f23 100644
--- a/app/components/bodyDetails/bodyDetailsHeader.tsx
+++ b/app/components/bodyDetails/bodyDetailsHeader.tsx
@@ -34,13 +34,13 @@ const BodyDetailsHeader = ({ options }: Props) => {
                 <tbody>
                   <tr>
                     <td>
-                      <span className='has-text-weight-bold'>Type:</span>
+                      <span className='has-text-weight-bold'>Type</span>
                     </td>
                     <td>{options.type}</td>
                   </tr>
                   <tr>
                     <td>
-                      <span className='has-text-weight-bold'>Empire: </span>
+                      <span className='has-text-weight-bold'>Empire</span>
                     </td>
                     <td>
                       {body?.empire ? (
@@ -52,19 +52,19 @@ const BodyDetailsHeader = ({ options }: Props) => {
                   </tr>
                   <tr>
                     <td>
-                      <span className='has-text-weight-bold'>Water: </span>
+                      <span className='has-text-weight-bold'>Water</span>
                     </td>
                     <td>{body?.water}</td>
                   </tr>
                   <tr>
                     <td>
-                      <span className='has-text-weight-bold'>Planet Size: </span>
+                      <span className='has-text-weight-bold'>Planet Size</span>
                     </td>
                     <td>{options.size}</td>
                   </tr>
                   <tr>
                     <td>
-                      <span className='has-text-weight-bold'>Location:</span>
+                      <span className='has-text-weight-bold'>Location</span>
                     </td>
                     <td>
                       {options.x}, {options.y}
@@ -72,34 +72,34 @@ const BodyDetailsHeader = ({ options }: Props) => {
                   </tr>
                   <tr>
                     <td>
-                      <span className='has-text-weight-bold'>Zone: </span>
+                      <span className='has-text-weight-bold'>Zone</span>
                     </td>
                     <td>{body?.zone}</td>
                   </tr>
                   {MenuStore.shouldShowIds ? (
                     <tr>
                       <td>
-                        <span className='has-text-weight-bold'>Body ID: </span>
+                        <span className='has-text-weight-bold'>Body ID</span>
                       </td>
                       <td>{options.id}</td>
                     </tr>
                   ) : undefined}
                   <tr>
                     <td>
-                      <span className='has-text-weight-bold'>Star: </span>
+                      <span className='has-text-weight-bold'>Star</span>
                     </td>
                     <td>
                       {body?.star_name}{' '}
                       {MenuStore.shouldShowIds ? (
                         <>
-                          (<span className='has-text-weight-bold'>ID:</span> {body?.star_id})
+                          (<span className='has-text-weight-bold'>ID</span> {body?.star_id})
                         </>
                       ) : undefined}
                     </td>
                   </tr>
                   <tr>
                     <td>
-                      <span className='has-text-weight-bold'>Orbit: </span>
+                      <span className='has-text-weight-bold'>Orbit</span>
                     </td>
                     <td>{body?.orbit}</td>
                   </tr>
diff --git a/app/components/builder/buildableRow.tsx b/app/components/builder/buildableRow.tsx
index 883f8449..ba89fd87 100644
--- a/app/components/builder/buildableRow.tsx
+++ b/app/components/builder/buildableRow.tsx
@@ -77,7 +77,7 @@ const BuildableRow: React.FunctionComponent<Props> = ({
               <tbody>
                 <tr>
                   <td>
-                    <span className='has-text-weight-bold'>Cost:</span>
+                    <span className='has-text-weight-bold'>Cost</span>
                   </td>
                   <td>
                     <span className='icon mr-2'>
@@ -143,7 +143,7 @@ const BuildableRow: React.FunctionComponent<Props> = ({
 
                 <tr>
                   <td>
-                    <span className='has-text-weight-bold'>Production:</span>
+                    <span className='has-text-weight-bold'>Production</span>
                   </td>
                   <td>
                     <span className='icon mr-2'>
diff --git a/app/components/empireInfo.tsx b/app/components/empireInfo.tsx
index c5a74524..34e9b517 100644
--- a/app/components/empireInfo.tsx
+++ b/app/components/empireInfo.tsx
@@ -7,6 +7,8 @@ import WindowsStore from 'app/stores/windows';
 import AllianceLink from 'app/components/allianceLink';
 import { EmpireInfoWindowOptions } from 'app/interfaces/window';
 import { usePublicProfileQuery } from 'app/queries/empire';
+import { BUILDING_WINDOW_SCROLL_SMALL } from 'app/constants';
+import TimeInWords from 'app/components/menu/timeInWords';
 
 type Props = {
   options: EmpireInfoWindowOptions;
@@ -27,35 +29,62 @@ const EmpireInfoWindow: React.FunctionComponent<Props> = ({ options }) => {
 
                 return (
                   <div className='bulma'>
-                    <ul>
-                      <li>
-                        <strong>Empire:</strong> {profile.name}
-                      </li>
-                      <li>
-                        <strong>Status:</strong> {profile.status_message}
-                      </li>
-                      <li>
-                        <strong>Description:</strong> {profile.description}
-                      </li>
-                      <li>
-                        <strong>Species:</strong> {profile.species}
-                      </li>
-                      <li>
-                        <strong>Alliance:</strong>{' '}
-                        {alliance ? <AllianceLink id={alliance.id} name={alliance.name} /> : ''}
-                      </li>
-                      <li>
-                        <strong>Colonies:</strong> {profile.colony_count}
-                      </li>
-                      <li>
-                        <strong>Founded:</strong>{' '}
-                        {serverDateToMoment(profile.date_founded).format('LL')}
-                      </li>
-                      <li>
-                        <strong>Last Login:</strong>{' '}
-                        {serverDateToMoment(profile.last_login).format('LL')}
-                      </li>
-                    </ul>
+                    <table className='table is-fullwidth is-borderless'>
+                      <tr>
+                        <td>
+                          <span className='has-text-weight-bold'>Empire</span>
+                        </td>
+                        <td>{profile.name}</td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <span className='has-text-weight-bold'>Status</span>
+                        </td>
+                        <td>{profile.status_message}</td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <span className='has-text-weight-bold'>Description</span>
+                        </td>
+                        <td>{profile.description}</td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <span className='has-text-weight-bold'>Species</span>
+                        </td>
+                        <td>{profile.species}</td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <span className='has-text-weight-bold'>Alliance</span>
+                        </td>
+                        <td>
+                          {alliance ? <AllianceLink id={alliance.id} name={alliance.name} /> : ''}
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <span className='has-text-weight-bold'>Colonies</span>
+                        </td>
+                        <td>{profile.colony_count}</td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <span className='has-text-weight-bold'>Founded</span>
+                        </td>
+                        <td>
+                          <TimeInWords date={profile.date_founded} />
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <span className='has-text-weight-bold'>Last Login</span>
+                        </td>
+                        <td>
+                          <TimeInWords date={profile.last_login} />
+                        </td>
+                      </tr>
+                    </table>
 
                     <button
                       type='button'
@@ -76,19 +105,17 @@ const EmpireInfoWindow: React.FunctionComponent<Props> = ({ options }) => {
                 <div className='bulma'>
                   {profile.known_colonies.length === 0 && <p>No known colonies.</p>}
                   {profile.known_colonies.map((colony) => (
-                    <div className='level is-mobile' key={colony.id}>
-                      <div className='level-left'>
-                        <span className='level-item'>
-                          <img
-                            src={`${environment.getAssetsUrl()}star_system/${colony.image}.png`}
-                            alt={colony.name}
-                            style={{ width: 32, height: 32 }}
-                          />
-                        </span>
-                        <span className='level-item'>{colony.name}</span>
-                        <span className='level-item has-text-grey'>
-                          {colony.x} : {colony.y}
-                        </span>
+                    <div className='columns' key={colony.id}>
+                      <div className='column is-narrow'>
+                        <img
+                          src={`${environment.getAssetsUrl()}star_system/${colony.image}.png`}
+                          alt={colony.name}
+                          style={{ width: 32, height: 32 }}
+                        />
+                      </div>
+                      <div className='column'>{colony.name}</div>
+                      <div className='column is-narrow'>
+                        {colony.x}, {colony.y}
                       </div>
                     </div>
                   ))}
@@ -100,7 +127,14 @@ const EmpireInfoWindow: React.FunctionComponent<Props> = ({ options }) => {
               component: () => (
                 <div className='bulma'>
                   {Object.keys(profile.medals).length === 0 && <p>No medals earned.</p>}
-                  <div className='level is-mobile' style={{ flexWrap: 'wrap' }}>
+                  <div
+                    className='level is-mobile'
+                    style={{
+                      flexWrap: 'wrap',
+                      maxHeight: BUILDING_WINDOW_SCROLL_SMALL,
+                      overflowY: 'auto',
+                    }}
+                  >
                     {Object.entries(profile.medals).map(([medalId, medal]) => (
                       <span
                         className='level-item'
@@ -123,21 +157,39 @@ const EmpireInfoWindow: React.FunctionComponent<Props> = ({ options }) => {
               title: 'Player',
               component: () => (
                 <div className='bulma'>
-                  <ul>
-                    <li>
-                      <strong>Name:</strong> {profile.player_name}
-                    </li>
-                    <li>
-                      <strong>City:</strong> {profile.city}
-                    </li>
-                    <li>
-                      <strong>Country:</strong> {profile.country}
-                    </li>
-                    <li>
-                      <strong>Skype:</strong>{' '}
-                      {profile.skype ? <a href={`callto:${profile.skype}`}>{profile.skype}</a> : ''}
-                    </li>
-                  </ul>
+                  <table className='table is-fullwidth is-borderless'>
+                    <tr>
+                      <td>
+                        <span className='has-text-weight-bold'>Name</span>
+                      </td>
+                      <td>{profile.player_name}</td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <span className='has-text-weight-bold'>City</span>
+                      </td>
+                      <td>{profile.city}</td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <span className='has-text-weight-bold'>Country</span>
+                      </td>
+                      <td>{profile.country}</td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <span className='has-text-weight-bold'>Skype</span>
+                      </td>
+                      <td>
+                        {' '}
+                        {profile.skype ? (
+                          <a href={`callto:${profile.skype}`}>{profile.skype}</a>
+                        ) : (
+                          ''
+                        )}
+                      </td>
+                    </tr>
+                  </table>
                 </div>
               ),
             },
diff --git a/app/components/intelligence/spiesTab.tsx b/app/components/intelligence/spiesTab.tsx
index c0b1d87a..12ea514f 100644
--- a/app/components/intelligence/spiesTab.tsx
+++ b/app/components/intelligence/spiesTab.tsx
@@ -138,9 +138,9 @@ const SpiesTab: React.FunctionComponent<Props> = ({ building }) => {
                       </div>
 
                       <div className='block mb-2'>
-                        <span className='has-text-weight-bold'>Attributes:</span> Intel: {spy.intel}
-                        , Mayhem: {spy.mayhem}, Politics: {spy.politics}, Theft: {spy.theft},
-                        Mission Count:{' '}
+                        <span className='has-text-weight-bold'>Attributes</span> Intel: {spy.intel},
+                        Mayhem: {spy.mayhem}, Politics: {spy.politics}, Theft: {spy.theft}, Mission
+                        Count:{' '}
                         {(spy.mission_count?.offensive ?? 0) + (spy.mission_count?.defensive ?? 0)}
                       </div>
 
diff --git a/app/components/shipyard/buildShipsTab.tsx b/app/components/shipyard/buildShipsTab.tsx
index 2c788759..dc6619e2 100644
--- a/app/components/shipyard/buildShipsTab.tsx
+++ b/app/components/shipyard/buildShipsTab.tsx
@@ -152,7 +152,7 @@ const BuildFleetTab: React.FunctionComponent<Props> = ({ building }) => {
                     <h2 className='title is-size-6 mb-2'>{ship.type_human}</h2>
 
                     <div className='mb-2'>
-                      <span className='has-text-weight-bold'>Cost:</span>{' '}
+                      <span className='has-text-weight-bold'>Cost</span>{' '}
                       <span className='icon'>
                         <Icon style='food' />
                       </span>{' '}
@@ -180,7 +180,7 @@ const BuildFleetTab: React.FunctionComponent<Props> = ({ building }) => {
                     </div>
 
                     <div className='mb-2'>
-                      <span className='has-text-weight-bold'>Attributes:</span> Speed:{' '}
+                      <span className='has-text-weight-bold'>Attributes</span> Speed:{' '}
                       {util.reduceNumber(ship.attributes.speed)}, Hold Size:{' '}
                       {util.reduceNumber(ship.attributes.hold_size)}, Stealth:{' '}
                       {util.reduceNumber(ship.attributes.stealth)}, Combat:{' '}
diff --git a/app/components/starDetails/starInfoHeader.tsx b/app/components/starDetails/starInfoHeader.tsx
index 40d155fb..19100219 100644
--- a/app/components/starDetails/starInfoHeader.tsx
+++ b/app/components/starDetails/starInfoHeader.tsx
@@ -35,7 +35,7 @@ const StarInfoHeader = ({ options }: Props) => {
                 <tbody>
                   <tr>
                     <td>
-                      <span className='has-text-weight-bold'>Location:</span>
+                      <span className='has-text-weight-bold'>Location</span>
                     </td>
                     <td>
                       {options.x}, {options.y}
@@ -43,28 +43,28 @@ const StarInfoHeader = ({ options }: Props) => {
                   </tr>
                   <tr>
                     <td>
-                      <span className='has-text-weight-bold'>Zone: </span>
+                      <span className='has-text-weight-bold'>Zone</span>
                     </td>
                     <td>{options.zone}</td>
                   </tr>
                   {MenuStore.shouldShowIds ? (
                     <tr>
                       <td>
-                        <span className='has-text-weight-bold'>Star ID: </span>
+                        <span className='has-text-weight-bold'>Star ID</span>
                       </td>
                       <td>{options.id}</td>
                     </tr>
                   ) : undefined}
                   <tr>
                     <td>
-                      <span className='has-text-weight-bold'>Net Influence: </span>
+                      <span className='has-text-weight-bold'>Net Influence</span>
                     </td>
                     <td>{options.influence}</td>
                   </tr>
                   {station ? (
                     <tr>
                       <td>
-                        <span className='has-text-weight-bold'>Station: </span>
+                        <span className='has-text-weight-bold'>Station</span>
                       </td>
                       <td>
                         {station.name} ({station.x}, {station.y})
@@ -74,7 +74,7 @@ const StarInfoHeader = ({ options }: Props) => {
                   {station && MenuStore.shouldShowIds ? (
                     <tr>
                       <td>
-                        <span className='has-text-weight-bold'>Station ID: </span>
+                        <span className='has-text-weight-bold'>Station ID</span>
                       </td>
                       <td>{station.id}</td>
                     </tr>