diff --git a/components/form/widget/CaseActionSelect.js b/components/form/widget/CaseActionSelect.js
index acd47e8..2facadc 100644
--- a/components/form/widget/CaseActionSelect.js
+++ b/components/form/widget/CaseActionSelect.js
@@ -139,8 +139,8 @@ export default function CaseActionSelect(props) {
                 sx={{
                   my: 0.5,
                   display: 'flex',
-                  flexDirection: 'row',
-                  alignItems: 'center',
+                  flexDirection: { xs: 'column', md: 'row' },
+                  alignItems: { xs: 'flex-start', md: 'center' },
                 }}
               >
                 {getActionIcon(option, 36)}
@@ -148,7 +148,8 @@ export default function CaseActionSelect(props) {
                   sx={{
                     display: 'flex',
                     flexDirection: 'column',
-                    ml: 2,
+                    mt: { xs: 1, md: 0 },
+                    ml: { xs: 0, md: 2 },
                   }}
                 >
                   <Typography sx={{ fontWeight: 'bold' }} gutterBottom>
diff --git a/components/form/widget/CaseRuleSelect.js b/components/form/widget/CaseRuleSelect.js
index 775dfa6..e0c65ce 100644
--- a/components/form/widget/CaseRuleSelect.js
+++ b/components/form/widget/CaseRuleSelect.js
@@ -4,13 +4,14 @@ import {
   List,
   ListItemButton,
   Skeleton,
-  Stack,
   Typography,
+  useMediaQuery,
 } from '@mui/material';
 import RuleEffects from 'components/law/RuleEffects';
 import useJurisdiction from 'hooks/useJurisdiction';
 import useToasts from 'hooks/useToasts';
 import { useEffect, useState } from 'react';
+import { theme } from 'theme';
 import { getActionIcon } from 'utils/metadata';
 
 /**
@@ -29,6 +30,7 @@ export default function CaseRuleSelect(props) {
   const { showToastError } = useToasts();
   const { getJurisdictionRules } = useJurisdiction();
   const [rules, setRules] = useState(null);
+  const isMediumDevice = useMediaQuery(theme.breakpoints.up('md'));
 
   useEffect(() => {
     if (propsJurisdiction && propsFormActionGuid) {
@@ -53,34 +55,71 @@ export default function CaseRuleSelect(props) {
         <List>
           {rules.map((rule, index) => (
             <ListItemButton
-              sx={{ py: 2.4 }}
               key={index}
               selected={rule.ruleId === propsValue}
               disabled={propsDisabled}
+              alignItems={isMediumDevice ? 'center' : 'flex-start'}
+              sx={{
+                py: 1.8,
+                display: 'flex',
+                flexDirection: {
+                  xs: 'column',
+                  md: 'row',
+                },
+              }}
               onClick={() => {
                 propsOnChange(rule.ruleId);
               }}
             >
+              {/* Action icon */}
+              {getActionIcon(propsFormAction, 36)}
+              {/* Rule details */}
               <Box
                 sx={{
                   display: 'flex',
-                  alignItems: 'flex-start',
                   flexDirection: 'column',
+                  mt: { xs: 1, md: 0 },
+                  ml: { xs: 0, md: 2 },
                 }}
               >
-                <Stack direction="row" alignItems="center" spacing={1}>
-                  {getActionIcon(propsFormAction, 28)}
-                  <Typography sx={{ fontWeight: 'bold' }}>
+                {/* Rule negation, name, id */}
+                <Box
+                  sx={{
+                    display: 'flex',
+                    flexDirection: { xs: 'column', md: 'row' },
+                    alignItems: { xs: 'flex-start', md: 'center' },
+                  }}
+                >
+                  {rule?.rule?.negation && (
+                    <Typography
+                      sx={{
+                        fontWeight: 'bold',
+                        color: 'danger.primary',
+                        mr: 0.5,
+                      }}
+                    >
+                      NOT
+                    </Typography>
+                  )}
+                  <Typography
+                    sx={{ fontWeight: 'bold', mr: 1, mt: { xs: 0.2, md: 0 } }}
+                  >
                     {rule?.rule?.uriData?.name || 'None Name'}
                   </Typography>
-                  <Chip label={`ID: ${rule.ruleId}`} size="small" />
-                </Stack>
+                  <Chip
+                    label={`ID: ${rule.ruleId}`}
+                    size="small"
+                    sx={{ mt: { xs: 0.5, md: 0 } }}
+                  />
+                </Box>
+                {/* Rule description */}
                 {rule?.rule?.uriData?.description && (
-                  <Typography variant="body2" sx={{ mt: 1 }}>
+                  <Typography variant="body2" sx={{ mt: { xs: 1, md: 0.3 } }}>
                     {rule.rule.uriData.description}
                   </Typography>
                 )}
-                <RuleEffects rule={rule} sx={{ mt: 1.2 }} />
+                {/* Rule effects */}
+                <RuleEffects rule={rule} sx={{ mt: { xs: 1.8, md: 1.2 } }} />
               </Box>
             </ListItemButton>
           ))}
diff --git a/components/law/LawCard.js b/components/law/LawCard.js
index 8ec9f27..757300b 100644
--- a/components/law/LawCard.js
+++ b/components/law/LawCard.js
@@ -20,7 +20,6 @@ import { getActionIcon } from 'utils/metadata';
  */
 export default function LawCard({ law, isCommentsEnabled, sx }) {
   const { showDialog, closeDialog } = useDialogContext();
-
   return (
     <Card elevation={1} sx={{ ...sx }}>
       <CardContent sx={{ p: 2.5 }}>
@@ -46,13 +45,33 @@ export default function LawCard({ law, isCommentsEnabled, sx }) {
         <Stack direction="column" spacing={2} sx={{ mt: 2 }}>
           {law?.rules?.map((rule, index) => (
             <Paper key={index} variant="outlined" sx={{ p: 2 }}>
-              {/* Rule name and id */}
-              <Stack direction="row" alignItems="center" spacing={1}>
-                <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
+              {/* Rule id */}
+              <Chip label={`ID: ${rule?.ruleId || 'None'}`} size="small" />
+              {/* Rule negation and name */}
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  mt: 1.5,
+                }}
+              >
+                {rule?.rule?.negation && (
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      fontWeight: 'bold',
+                      color: 'danger.primary',
+                      mr: 0.5,
+                    }}
+                  >
+                    NOT
+                  </Typography>
+                )}
+                <Typography variant="body2" sx={{ fontWeight: 'bold', mr: 1 }}>
                   {rule?.rule?.uriData?.name || 'None Rule Name'}
                 </Typography>
-                <Chip label={`ID: ${rule?.ruleId}`} size="small" />
-              </Stack>
+              </Box>
               {/* Rule description */}
               {rule?.rule?.uriData?.description && (
                 <Typography variant="body2" sx={{ mt: 0.3 }}>