diff --git a/frontend/src/component/common/common.module.scss b/frontend/src/component/common/common.module.scss
index 896769c8b5..22234bbd9f 100644
--- a/frontend/src/component/common/common.module.scss
+++ b/frontend/src/component/common/common.module.scss
@@ -40,6 +40,13 @@
     }
 }
 
+@media (max-width: 600px) {
+    .hideLt600 {
+        display: none;
+    }
+}
+
+
 .dataTableHeader {
     display: flex;
     justify-content: space-between;
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
index 0e850a913e..950e5cc16d 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
@@ -17,6 +17,7 @@ import { styles as commonStyles } from '../../../common';
 import { useStyles } from './styles';
 import { getTogglePath } from '../../../../utils/route-path-helpers';
 import FeatureStatus from '../../FeatureView2/FeatureStatus/FeatureStatus';
+import FeatureType from '../../FeatureView2/FeatureType/FeatureType';
 
 
 
@@ -48,6 +49,9 @@ const FeatureToggleListItem = ({
             <span className={styles.listItemMetric}>
                 <FeatureStatus lastSeenAt={lastSeenAt} />
             </span>
+            <span className={classnames(styles.listItemType, commonStyles.hideLt600)}>
+                <FeatureType type={type} />
+            </span>
             <span className={classnames(styles.listItemLink)}>
                 <Link
                     to={featureUrl}
@@ -59,6 +63,8 @@ const FeatureToggleListItem = ({
                     <span className={commonStyles.toggleName}>
                         {name}&nbsp;
                     </span>
+                    <span className={styles.listItemToggle}>
+                    </span>
                     <small>
                         <TimeAgo date={createdAt} live={false} />
                     </small>
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js
index 009f075301..75b4efac67 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js
@@ -10,6 +10,10 @@ export const useStyles = makeStyles(theme => ({
         marginRight: '0.25rem',
         flexShrink: '0',
     },
+    listItemType: {
+        width: '40px',
+        textAlign: 'center',
+    },
     listItemSvg: {
         fill: theme.palette.icons.lightGrey,
     },
diff --git a/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap b/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap
index 152bdef64c..6bb02340d6 100644
--- a/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap
+++ b/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap
@@ -10,7 +10,7 @@ exports[`renders correctly with one feature 1`] = `
   >
     <div
       aria-describedby={null}
-      className="makeStyles-container-6"
+      className="makeStyles-container-7"
       onBlur={[Function]}
       onFocus={[Function]}
       onMouseLeave={[Function]}
@@ -37,7 +37,30 @@ exports[`renders correctly with one feature 1`] = `
     </div>
   </span>
   <span
-    className="makeStyles-listItemLink-4"
+    className="makeStyles-listItemType-3 hideLt600"
+  >
+    <svg
+      aria-describedby={null}
+      aria-hidden={true}
+      className="MuiSvgIcon-root makeStyles-icon-8"
+      data-loading={true}
+      focusable="false"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onMouseLeave={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      onTouchStart={[Function]}
+      title={null}
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"
+      />
+    </svg>
+  </span>
+  <span
+    className="makeStyles-listItemLink-5"
   >
     <a
       className="listLink truncate"
@@ -50,6 +73,7 @@ exports[`renders correctly with one feature 1`] = `
         Another
          
       </span>
+      <span />
       <small>
         <time
           dateTime="2018-02-04T20:27:52.127Z"
@@ -70,7 +94,7 @@ exports[`renders correctly with one feature 1`] = `
     </a>
   </span>
   <span
-    className="makeStyles-listItemStrategies-5 hideLt920"
+    className="makeStyles-listItemStrategies-6 hideLt920"
   />
 </li>
 `;
@@ -85,7 +109,7 @@ exports[`renders correctly with one feature without permission 1`] = `
   >
     <div
       aria-describedby={null}
-      className="makeStyles-container-6"
+      className="makeStyles-container-7"
       onBlur={[Function]}
       onFocus={[Function]}
       onMouseLeave={[Function]}
@@ -112,7 +136,30 @@ exports[`renders correctly with one feature without permission 1`] = `
     </div>
   </span>
   <span
-    className="makeStyles-listItemLink-4"
+    className="makeStyles-listItemType-3 hideLt600"
+  >
+    <svg
+      aria-describedby={null}
+      aria-hidden={true}
+      className="MuiSvgIcon-root makeStyles-icon-8"
+      data-loading={true}
+      focusable="false"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onMouseLeave={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      onTouchStart={[Function]}
+      title={null}
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"
+      />
+    </svg>
+  </span>
+  <span
+    className="makeStyles-listItemLink-5"
   >
     <a
       className="listLink truncate"
@@ -125,6 +172,7 @@ exports[`renders correctly with one feature without permission 1`] = `
         Another
          
       </span>
+      <span />
       <small>
         <time
           dateTime="2018-02-04T20:27:52.127Z"
@@ -145,7 +193,7 @@ exports[`renders correctly with one feature without permission 1`] = `
     </a>
   </span>
   <span
-    className="makeStyles-listItemStrategies-5 hideLt920"
+    className="makeStyles-listItemStrategies-6 hideLt920"
   />
 </li>
 `;
diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
index 02f26c73e6..53747c340e 100644
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
@@ -14,29 +14,23 @@ export const useStyles = makeStyles(theme => ({
         color: theme.palette.grey[600],
         borderBottom: '1px solid ' + theme.palette.grey[200],
     },
-    typeHeader: {
-        [theme.breakpoints.down('sm')]: {
-            display: 'none',
-        },
-    },
     tableCellStatus: {
         width: '50px',
     },
     tableCellName: {
-        width: '250px',
-        display: 'flex',
+        paddingLeft: '10px',
     },
     tableCellEnv: {
         width: '20px',
-    },
-    tableCellType: {
-        width: '32px',
-        alignItems: 'center',
         [theme.breakpoints.down('sm')]: {
             display: 'none',
         },
     },
-    icon: {
-        color: theme.palette.grey[600],
+    tableCellType: {
+        width: '32px',
+        alignItems: 'center',
+        [theme.breakpoints.down(600)]: {
+            display: 'none',
+        },
     },
 }));
diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx
index 1688b11ef5..0c1900a93a 100644
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx
@@ -92,8 +92,8 @@ const FeatureToggleListNew = ({
                         <TableCell
                             className={classnames(
                                 styles.tableCell,
-                                styles.tableCellHeader,
-                                styles.typeHeader
+                                styles.tableCellType,
+                                styles.tableCellHeader
                             )}
                             align="center"
                         >
diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
index 104fd80b51..77e264448f 100644
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
@@ -3,21 +3,19 @@ import {
     Switch,
     TableCell,
     TableRow,
-    Tooltip,
-    useMediaQuery,
-    useTheme,
 } from '@material-ui/core';
 import { useHistory } from 'react-router';
-import { getFeatureTypeIcons } from '../../../../utils/get-feature-type-icons';
+
 import { useStyles } from '../FeatureToggleListNew.styles';
 import useToggleFeatureByEnv from '../../../../hooks/api/actions/useToggleFeatureByEnv/useToggleFeatureByEnv';
 import { IEnvironments } from '../../../../interfaces/featureToggle';
-import ConditionallyRender from '../../../common/ConditionallyRender';
 import useToast from '../../../../hooks/useToast';
 import { getTogglePath } from '../../../../utils/route-path-helpers';
 import { SyntheticEvent } from 'react-router/node_modules/@types/react';
 import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
 import FeatureStatus from '../../FeatureView2/FeatureStatus/FeatureStatus';
+import FeatureType from '../../FeatureView2/FeatureType/FeatureType';
+import classNames from 'classnames';
 
 interface IFeatureToggleListNewItemProps {
     name: string;
@@ -34,9 +32,7 @@ const FeatureToggleListNewItem = ({
     environments,
     projectId,
 }: IFeatureToggleListNewItemProps) => {
-    const theme = useTheme();
     const { toast, setToastData } = useToast();
-    const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
     const { toggleFeatureByEnvironment } = useToggleFeatureByEnv(
         projectId,
         name,
@@ -72,28 +68,23 @@ const FeatureToggleListNewItem = ({
             });
     };
 
-    const IconComponent = getFeatureTypeIcons(type);
+    
 
     return (
         <>
             <TableRow className={styles.tableRow}>
-                <TableCell className={styles.tableCell} align="left" onClick={onClick}>
+                <TableCell className={classNames(
+                                styles.tableCell,
+                                styles.tableCellStatus)} align="left" onClick={onClick}>
                     <FeatureStatus lastSeenAt={lastSeenAt} />
                 </TableCell>
-                <ConditionallyRender
-                    condition={!smallScreen}
-                    show={
-                        <TableCell className={styles.tableCell} align="center" onClick={onClick}>
-                            <Tooltip arrow placement="right" title={type}>
-                                <IconComponent
-                                    data-loading
-                                    className={styles.icon}
-                                />
-                            </Tooltip>
-                        </TableCell>
-                    }
-                />
-                <TableCell className={styles.tableCell} align="left" onClick={onClick}>
+                <TableCell className={classNames(
+                                styles.tableCell,
+                                styles.tableCellType)} align="center" onClick={onClick}>
+                    <FeatureType type={type} />
+                </TableCell>
+                <TableCell className={classNames(
+                                styles.tableCell, styles.tableCellName)} align="left" onClick={onClick}>
                     <span data-loading>{name}</span>
                 </TableCell>
                 
@@ -101,7 +92,9 @@ const FeatureToggleListNewItem = ({
                 {environments.map((env: IEnvironments) => {
                     return (
                         <TableCell
-                            className={styles.tableCell}
+                            className={classNames(
+                                styles.tableCell,
+                                styles.tableCellEnv)}
                             align="center"
                             key={env.name}
                         >
diff --git a/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.styles.ts
new file mode 100644
index 0000000000..ebd7158147
--- /dev/null
+++ b/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.styles.ts
@@ -0,0 +1,7 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(theme => ({
+    icon: {
+        color: theme.palette.grey[600],
+    },
+}));
diff --git a/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.tsx b/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.tsx
new file mode 100644
index 0000000000..c3ba8a157d
--- /dev/null
+++ b/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.tsx
@@ -0,0 +1,24 @@
+import { useStyles } from './FeatureType.styles';
+import { Tooltip } from '@material-ui/core';
+import { getFeatureTypeIcons } from '../../../../utils/get-feature-type-icons';
+
+
+interface FeatureTypeProps {
+    type: string;
+}
+
+const FeatureStatus = ({ type }: FeatureTypeProps) => {
+    const styles = useStyles();
+    const IconComponent = getFeatureTypeIcons(type);
+
+    return (
+        <Tooltip arrow placement="right" title={type}>
+            <IconComponent
+                data-loading
+                className={styles.icon}
+            />
+        </Tooltip>
+    );
+};
+
+export default FeatureStatus;
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
index 892da3ae12..6429a52bb6 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
@@ -11,6 +11,7 @@ export const useStyles = makeStyles(theme => ({
         [theme.breakpoints.down('sm')]: {
             marginLeft: '0',
             paddingBottom: '4rem',
+            width: 'inherit',
         },
     },
     bodyClass: { padding: '0.5rem 2rem' },