diff --git a/.gitignore b/.gitignore
index 5961fa7cb2..06ebb533ba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,6 +30,7 @@ yarn-error.log*
 
 # local environment set up
 application-local.yml
+
 local.env
 .env
 
diff --git a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.module.scss b/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.module.scss
index 17d6f770f5..4e20d79982 100644
--- a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.module.scss
+++ b/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.module.scss
@@ -72,5 +72,6 @@
 
     .configurationDetails {
         width: 100rem;
+        margin-top: 1.5rem;
     }
 }
diff --git a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.tsx b/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.tsx
index a0fd4457ba..f5e09cfff0 100644
--- a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.tsx
+++ b/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.tsx
@@ -13,7 +13,8 @@ type ConfigurationListItem = {
 
 const MatchConfiguration = () => {
     const [configurations, setConfigurations] = useState<ConfigurationListItem[]>([]);
-    const [selectedConfigurationIndex, setSelectedConfigurationIndex] = useState<number>(0);
+    const [selectedConfigurationIndex, setSelectedConfigurationIndex] = useState<number | null>(null);
+    const [isEditingConfiguration, setIsEditingConfiguration] = useState<boolean>(false);
 
     const handleAddConfiguration = () => {
         const configs = [...configurations];
@@ -24,12 +25,16 @@ const MatchConfiguration = () => {
         });
         setConfigurations(configs);
         setSelectedConfigurationIndex(configurations.length);
+        setIsEditingConfiguration(true);
     };
 
     const handleConfigListItemClick = (index: number) => {
         setSelectedConfigurationIndex(index);
+        setIsEditingConfiguration(true);
     };
 
+    const showConfiguration = isEditingConfiguration && configurations.length;
+
     return (
         <div className={styles.wrapper}>
             <div className={styles.configurationList}>
@@ -56,7 +61,7 @@ const MatchConfiguration = () => {
                 </Button>
             </div>
             <div className={styles.configurationDetails}>
-                {selectedConfigurationIndex ? <PassConfiguration /> : <NoPassConfigurations />}
+                {showConfiguration ? <PassConfiguration /> : <NoPassConfigurations />}
             </div>
         </div>
     );
diff --git a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.module.scss b/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.module.scss
index 358432c18e..c88eac4821 100644
--- a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.module.scss
+++ b/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.module.scss
@@ -3,5 +3,24 @@
 .criteria {
     background-color: colors.$base-white;
     margin-bottom: 1rem;
-    padding: 1.5rem;
+    border: 1px solid colors.$base-lighter;
+    border-radius: 0.3125rem;
+
+    &.disabled {
+        background-color: colors.$disabled-light;
+    }
+
+    .criteriaHeadingContainer {
+        padding: 1.5rem;
+        border-bottom: 1px solid colors.$base-lighter;
+    }
+
+    .criteriaContentContainer {
+        padding: 1.5rem;
+
+        .criteriaRequest {
+            border-bottom: 1px solid colors.$base-lighter;
+            padding-bottom: 1.5rem;
+        }
+    }
 }
diff --git a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.tsx b/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.tsx
index 3dc8873ab5..6b76ae9520 100644
--- a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.tsx
+++ b/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.tsx
@@ -1,11 +1,38 @@
+import { Button, Icon } from '@trussworks/react-uswds';
 import styles from './PassConfiguration.module.scss';
 
 const PassConfiguration = () => {
     return (
         <div className={styles.configurationDetails}>
-            <div className={styles.criteria}>Blocking criteria</div>
-            <div className={styles.criteria}>Matching criteria</div>
-            <div className={styles.matchingBounds}>Matching bounds</div>
+            <div className={styles.criteria}>
+                <div className={styles.criteriaHeadingContainer}>
+                    <h4>Blocking criteria</h4>
+                    <span>Include records that meet all these conditions</span>
+                </div>
+                <div className={styles.criteriaContentContainer}>
+                    <p className={styles.criteriaRequest}>Please add blocking criteria to get started</p>
+                    <Button unstyled type={'button'}>
+                        <Icon.Add />
+                        Add blocking criteria
+                    </Button>
+                </div>
+            </div>
+            <div className={`${styles.criteria} ${styles.disabled}`}>
+                <div className={styles.criteriaHeadingContainer}>
+                    <h4>Matching criteria</h4>
+                    <span>Include records that meet all these conditions</span>
+                </div>
+                <div className={styles.criteriaContentContainer}>
+                    <p className={styles.criteriaRequest}>Please add a matching attribute to continue</p>
+                    <Button unstyled type={'button'} disabled>
+                        <Icon.Add />
+                        Add matching criteria
+                    </Button>
+                </div>
+            </div>
+            <div className={styles.matchingBounds}>
+                <h4>Matching bounds</h4>
+            </div>
         </div>
     );
 };