diff --git a/ui/src/app/flags/Evaluation.tsx b/ui/src/app/flags/Evaluation.tsx
index b4d24fff16..ab411a810f 100644
--- a/ui/src/app/flags/Evaluation.tsx
+++ b/ui/src/app/flags/Evaluation.tsx
@@ -260,8 +260,8 @@ export default function Evaluation() {
                 </p>
               </div>
               <div
-                className="pattern-boxes w-full border p-6 pattern-bg-gray-50 pattern-gray-100 pattern-opacity-100 pattern-size-2 dark:pattern-bg-black  
-  dark:pattern-gray-900 lg:w-3/4"
+                className="pattern-boxes w-full border p-2 pattern-bg-gray-50 pattern-gray-100 pattern-opacity-100 pattern-size-2 dark:pattern-bg-black dark:pattern-gray-900  
+  lg:w-3/4 lg:p-6"
               >
                 <DndContext
                   sensors={sensors}
diff --git a/ui/src/components/rules/NewRule.tsx b/ui/src/components/rules/NewRule.tsx
index db731993aa..b2f6e86b0b 100644
--- a/ui/src/components/rules/NewRule.tsx
+++ b/ui/src/components/rules/NewRule.tsx
@@ -43,14 +43,14 @@ const NewRule = forwardRef(
       key={rule.id}
       ref={ref}
       style={style}
-      className={`${className} w-full items-center space-y-2 rounded-md border px-6 py-2 shadow-md shadow-violet-100 bg-white border-violet-300 hover:shadow-violet-200 sm:flex sm:flex-col`}
+      className={`${className} w-full items-center space-y-2 rounded-md border shadow-md shadow-violet-100 bg-white border-violet-300 hover:shadow-violet-200 sm:flex sm:flex-col lg:px-6 lg:py-2`}
     >
-      <div className="flex w-full flex-1 items-center text-xs">
+      <div className="flex w-full flex-1 items-center p-4 text-xs lg:p-0">
         <span
           key={rule.id}
           className={classNames(
             readOnly ? 'hover:cursor-not-allowed' : 'hover:cursor-move',
-            'ml-2 hidden h-4 w-4 justify-start text-gray-300 hover:text-violet-300 sm:flex'
+            'ml-2 hidden h-4 w-4 justify-start text-gray-400 hover:text-violet-300 sm:flex'
           )}
           {...rest}
         >
@@ -58,19 +58,19 @@ const NewRule = forwardRef(
           {rule.rank === totalRules && <ArrowUpIcon />}
           {rule.rank !== 1 && rule.rank !== totalRules && <ArrowsUpDownIcon />}
         </span>
-        <div className="ml-2 flex grow items-center justify-around">
-          <span className="flex items-center px-6 py-4 text-xs font-light text-gray-600">
+        <div className="flex grow flex-col items-center justify-center sm:ml-2 md:flex-row md:justify-between">
+          <span className="flex items-center text-xs font-light text-gray-600 lg:px-6 lg:py-4">
             IF
           </span>
           <Link
             to={`/namespaces/${namespace.key}/segments/${rule.segment.key}`}
           >
-            <span className="flex items-center px-6 py-4 font-medium">
-              <div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
-                <p className="flex whitespace-nowrap text-gray-500">
-                  Matches Segment
+            <span className="flex items-center px-6 py-4">
+              <div className="min-w-0 flex-auto space-y-2 text-center">
+                <p className="flex whitespace-nowrap text-gray-600">
+                  Matches Segment:
                 </p>
-                <p className="truncate bg-violet-50/80 px-3 py-1 font-semibold text-gray-900 hover:underline hover:underline-offset-2">
+                <p className="truncate bg-violet-50/80 px-3 py-1 font-medium text-gray-900 hover:underline hover:underline-offset-2">
                   {rule.segment.name}
                 </p>
               </div>
@@ -80,38 +80,38 @@ const NewRule = forwardRef(
             THEN
           </span>
           {rule.rollouts.length === 0 && (
-            <span className="flex items-center font-medium">
-              <CheckIcon className="h-6 w-6 text-violet-400" />
-              <div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
-                <p className="mt-1 flex text-gray-500">Return Match</p>
-                <p className="bg-violet-50/80 px-3 py-1 font-semibold text-gray-900">
+            <span className="flex items-center">
+              <CheckIcon className="hidden h-6 w-6 text-violet-400 lg:mr-4 lg:block" />
+              <div className="min-w-0 flex-auto space-y-2 text-center">
+                <p className="mt-1 flex text-gray-600">Return Match:</p>
+                <p className="bg-violet-50/80 px-3 py-1 font-medium text-gray-900">
                   true
                 </p>
               </div>
             </span>
           )}
           {rule.rollouts.length === 1 && (
-            <span className="flex items-center font-medium">
-              <VariableIcon className="h-6 w-6 text-violet-400" />
-              <div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
-                <p className="mt-1 flex text-gray-500">Return Variant</p>
-                <p className="bg-violet-50/80 px-3 py-1 font-semibold text-gray-900">
+            <span className="flex items-center">
+              <VariableIcon className="hidden h-6 w-6 text-violet-400 lg:mr-4 lg:block" />
+              <div className="min-w-0 flex-auto space-y-2 text-center">
+                <p className="mt-1 flex text-gray-600">Return Variant:</p>
+                <p className="bg-violet-50/80 px-3 py-1 font-medium text-gray-900">
                   {rule.rollouts[0].variant.key}
                 </p>
               </div>
             </span>
           )}
           {rule.rollouts.length > 1 && (
-            <span className="flex items-center font-medium">
-              <VariableIcon className="h-6 w-6 text-violet-400" />
-              <div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
-                <p className="mt-1 flex text-gray-500">Return a Distribution</p>
+            <span className="flex items-center">
+              <VariableIcon className="hidden h-6 w-6 text-violet-400 lg:mr-4 lg:block" />
+              <div className="min-w-0 flex-auto space-y-2 text-center">
+                <p className="mt-1 flex text-gray-600">Return a Distribution</p>
               </div>
             </span>
           )}
         </div>
         <Menu as="div" className="hidden sm:flex">
-          <Menu.Button className="-m-2.5 block p-2.5 text-gray-500 hover:text-gray-900">
+          <Menu.Button className="ml-4 block text-gray-600 hover:text-gray-900">
             <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
           </Menu.Button>
           {!readOnly && (