diff --git a/src/components/ProjectInfo/ProjectInfo.jsx b/src/components/ProjectInfo/ProjectInfo.jsx
index 2b8f3e6d6..5de8c8916 100644
--- a/src/components/ProjectInfo/ProjectInfo.jsx
+++ b/src/components/ProjectInfo/ProjectInfo.jsx
@@ -9,6 +9,8 @@ import MobileExpandable from '../MobileExpandable/MobileExpandable'
 import MediaQuery from 'react-responsive'
 import { SCREEN_BREAKPOINT_MD, PROJECT_STATUS_ACTIVE, PHASE_STATUS_ACTIVE, PHASE_STATUS_REVIEWED, PROJECT_ROLE_OWNER, PROJECT_ROLE_CUSTOMER } from '../../config/constants'
 import ReviewProjectButton from '../../projects/detail/components/ReviewProjectButton'
+import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip'
+import { TOOLTIP_DEFAULT_DELAY } from '../../config/constants'
 
 import './ProjectInfo.scss'
 
@@ -51,24 +53,39 @@ class ProjectInfo extends Component {
     return (
       <div className="project-info">
         <div className="project-status">
-          <div>
-            <div styleName="project-name">{_.unescape(project.name)}</div>
-            <div className="project-status-time">Created {moment(project.createdAt).format('MMM DD, YYYY')}</div>
-            {!!code && <div className="project-status-ref">{_.unescape(code)}</div>}
+          <div styleName="project-name">{_.unescape(project.name)}</div>
+
+          <div styleName="project-status-bottom">
+            <div className="project-status-time">
+              Created {moment(project.createdAt).format('MMM DD, YYYY')}
+            </div>
+            {!!code &&
+            <div styleName="tooltip-target-container">
+              <Tooltip styleName="tooltip" theme="light" tooltipDelay={TOOLTIP_DEFAULT_DELAY}>
+                <div className="tooltip-target">
+                  <div className="project-status-ref">{_.unescape(code)}</div>
+                </div>
+                <div className="tooltip-body">
+                  <span>{_.unescape(code)}</span>
+                </div>
+              </Tooltip>
+            </div>
+
+            }
           </div>
         </div>
-        {showDeleteConfirm &&
+        {showDeleteConfirm && (
           <DeleteProjectModal
             onCancel={toggleProjectDelete}
             onConfirm={onConfirmDelete}
           />
-        }
+        )}
         {showReviewBtn ? (
           reviewButtonSection
         ) : (
           <MobileExpandable title="DESCRIPTION" defaultOpen>
             <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
-              {(matches) => (
+              {matches => (
                 <ProjectCardBody
                   project={project}
                   projectCanBeActive={projectCanBeActive}
diff --git a/src/components/ProjectInfo/ProjectInfo.scss b/src/components/ProjectInfo/ProjectInfo.scss
index 715c77e60..2e82430db 100644
--- a/src/components/ProjectInfo/ProjectInfo.scss
+++ b/src/components/ProjectInfo/ProjectInfo.scss
@@ -1,6 +1,10 @@
 @import '~tc-ui/src/styles/tc-includes';
 
 :global {
+  .sticky-inner-wrapper {
+    z-index: 1;
+  }
+
   .project-info {
     display: flex;
     flex-direction: column;
@@ -40,6 +44,8 @@
       margin-bottom: 10px;
       padding-left: 4 * $base_unit;
       padding-right: 4 * $base_unit;
+      display: flex;
+      flex-direction: column;
     }
 
     .project-status-header {
@@ -60,6 +66,7 @@
       text-transform: uppercase;
       white-space: nowrap;
       float: left;
+      margin-right: 10px;
     }
 
     .project-status-ref {
@@ -74,6 +81,9 @@
       margin-top: $base-unit;
       white-space: nowrap;
       float: right;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
     }
 
     .project-card-body {
@@ -110,3 +120,37 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
+.project-status-bottom {
+  display: flex;
+  justify-content: space-between;
+}
+
+.tooltip-target-container {
+  flex: 1;
+  width: 0;
+  display: flex;
+  justify-content: flex-end;
+
+  :global {
+    .tooltip-target {
+      height: 100%;
+    }
+
+    .tooltip-body {
+      display: flex;
+
+      span {
+        width: 200px;
+        white-space: normal;
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+}
+
+.tooltip {
+  max-width: 100%;
+  height: 100%;
+}
diff --git a/src/projects/list/components/Projects/ProjectsGridView.jsx b/src/projects/list/components/Projects/ProjectsGridView.jsx
index 5727f721b..c609a15b4 100644
--- a/src/projects/list/components/Projects/ProjectsGridView.jsx
+++ b/src/projects/list/components/Projects/ProjectsGridView.jsx
@@ -14,7 +14,7 @@ import GridView from '../../../../components/Grid/GridView'
 import UserTooltip from '../../../../components/User/UserTooltip'
 import {
   PROJECTS_LIST_PER_PAGE, SORT_OPTIONS, PROJECT_STATUS_COMPLETED, DATE_TO_USER_FIELD_MAP, PHASE_STATUS_REVIEWED,
-  PHASE_STATUS_ACTIVE, PROJECT_STATUS_ACTIVE
+  PHASE_STATUS_ACTIVE, PROJECT_STATUS_ACTIVE, TOOLTIP_DEFAULT_DELAY
 } from '../../../../config/constants'
 import { getProjectTemplateByKey } from '../../../../helpers/templates'
 import TextTruncate from 'react-text-truncate'
@@ -23,6 +23,7 @@ import editableProjectStatus from '../../../../components/ProjectStatus/editable
 import ProjectManagerAvatars from './ProjectManagerAvatars'
 import ProjectTypeIcon from '../../../../components/ProjectTypeIcon'
 import IconProjectStatusTitle from '../../../../assets/icons/status-ico.svg'
+import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip'
 
 import './ProjectsGridView.scss'
 import NotificationBadge from '../../../../components/NotificationBadge/NotificationBadge'
@@ -118,7 +119,16 @@ const ProjectsGridView = props => {
         const code = _.get(item, 'details.utm.code', '')
         return (
           <div className="spacing time-container">
-            <span className="txt-gray-md">{code}</span>
+            <div className="code-tooltip-container">
+              <Tooltip theme="light" tooltipDelay={TOOLTIP_DEFAULT_DELAY}>
+                <div className="tooltip-target">
+                  <span className="txt-gray-md">{code}</span>
+                </div>
+                <div className="tooltip-body">
+                  <span>{code}</span>
+                </div>
+              </Tooltip>
+            </div>
           </div>
         )
       }
diff --git a/src/projects/list/components/Projects/ProjectsGridView.scss b/src/projects/list/components/Projects/ProjectsGridView.scss
index e4987fa74..197f56de7 100644
--- a/src/projects/list/components/Projects/ProjectsGridView.scss
+++ b/src/projects/list/components/Projects/ProjectsGridView.scss
@@ -26,6 +26,42 @@ $screen-one-column: 720px;
       .item-ref-code {
         flex: 1 3 100px;
         min-width: 100px;
+
+        .time-container {
+          display: flex;
+          width: 100%;
+          padding-right: 10px;
+
+          .code-tooltip-container {
+            display: flex;
+            width: 100%;
+
+            .Tooltip {
+              max-width: 100%;
+
+              .tooltip-target {
+                display: flex;
+              }
+
+              .tooltip-body {
+                display: flex;
+
+                span {
+                  width: 200px;
+                  white-space: normal;
+                  display: flex;
+                  justify-content: center;
+                }
+              }
+            }
+          }
+
+          span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
       }
 
       .item-status-date {