diff --git a/.loki/reference/chrome.laptop/Inputs/RadioField_Radio_Group_Card.png b/.loki/reference/chrome.laptop/Inputs/RadioField_Radio_Group_Card.png
index 70f82521..db81ff8c 100644
Binary files a/.loki/reference/chrome.laptop/Inputs/RadioField_Radio_Group_Card.png and b/.loki/reference/chrome.laptop/Inputs/RadioField_Radio_Group_Card.png differ
diff --git a/packages/ui/src/radio/RadioField.stories.tsx b/packages/ui/src/radio/RadioField.stories.tsx
index 5c852dd5..98243d09 100644
--- a/packages/ui/src/radio/RadioField.stories.tsx
+++ b/packages/ui/src/radio/RadioField.stories.tsx
@@ -4,17 +4,20 @@ import {
   Switch,
   TextField,
 } from '@material-ui/core';
-import { AccountBoxOutlined, Error, VerifiedUser } from '@material-ui/icons';
+import { AccountBoxOutlined, Error } from '@material-ui/icons';
 import { UseState } from '@superdispatch/ui-docs';
 import {
   CheckboxField,
+  CollapseProp,
   Column,
   Columns,
+  Image,
   Inline,
   RadioField,
   RadioFieldCard,
   RadioGroupField,
   Stack,
+  Tag,
 } from '..';
 
 export default { title: 'Inputs/RadioField', component: RadioField };
@@ -197,7 +200,27 @@ export const radioGroupCard = () => {
       name: 'driver_dispatcher',
       label: 'I Drive And Dispatch',
       caption: 'I use both Carrier TMS and Driver App.',
-      icon: <VerifiedUser />,
+      icon: <Image src="https://dummyimage.com/72x72/7a7a7a/fff" />,
+      collapseIconBelow: 'tablet' as CollapseProp,
+    },
+    {
+      value: 'truck',
+      name: 'truck',
+      label: 'Im truck',
+      caption: 'Im truck',
+      icon: <Image src="https://dummyimage.com/144x72/7a7a7a/fff" />,
+      collapseIconBelow: 'tablet' as CollapseProp,
+    },
+    {
+      value: 'tag',
+      name: 'tag',
+      label: 'Im tag',
+      caption: 'Im tag',
+      icon: (
+        <Tag variant="subtle" color="grey">
+          Verified
+        </Tag>
+      ),
     },
   ];
 
diff --git a/packages/ui/src/radio/RadioFieldCard.tsx b/packages/ui/src/radio/RadioFieldCard.tsx
index e5fc24d9..ecd4ffb3 100644
--- a/packages/ui/src/radio/RadioFieldCard.tsx
+++ b/packages/ui/src/radio/RadioFieldCard.tsx
@@ -6,7 +6,7 @@ import {
   Radio,
   Typography,
 } from '@material-ui/core';
-import { forwardRef, ForwardRefExoticComponent } from 'react';
+import { forwardRef, ForwardRefExoticComponent, ReactNode } from 'react';
 import styled from 'styled-components';
 import { Column } from '../columns/Column';
 import { Columns } from '../columns/Columns';
@@ -40,12 +40,20 @@ const Caption = styled.div`
   padding-left: 30px;
 `;
 
+const IconWrapper = styled.div`
+  display: flex;
+
+  ${({ theme }) => theme.breakpoints.down('xs')} {
+    padding-left: 30px;
+  }
+`;
+
 export interface RadioCardItemProps {
   value: string;
   label: string;
   name?: string;
   caption?: string;
-  icon?: React.ReactNode;
+  icon?: ReactNode;
 }
 
 interface RadioCardProps
@@ -75,7 +83,7 @@ export const RadioFieldCard: ForwardRefExoticComponent<RadioCardProps> =
         <Card disabled={disabled} key={value}>
           <ClickableCard name={name} disabled={disabled} {...props}>
             <Content active={checked}>
-              <Columns space="small">
+              <Columns collapseBelow="tablet" space="small">
                 <Column>
                   <FormControlLabel
                     value={value}
@@ -90,7 +98,9 @@ export const RadioFieldCard: ForwardRefExoticComponent<RadioCardProps> =
                   </Caption>
                 </Column>
 
-                <Column width="content">{icon}</Column>
+                <Column width="content">
+                  <IconWrapper>{icon}</IconWrapper>
+                </Column>
               </Columns>
             </Content>
           </ClickableCard>