diff --git a/wp1-frontend/cypress/e2e/combinator.cy.js b/wp1-frontend/cypress/e2e/combinator.cy.js
new file mode 100644
index 00000000..9cba2545
--- /dev/null
+++ b/wp1-frontend/cypress/e2e/combinator.cy.js
@@ -0,0 +1,291 @@
+/// <reference types="Cypress" />
+
+describe('the combinator builder page', () => {
+  describe('when the user is logged in', () => {
+    beforeEach(() => {
+      cy.intercept('v1/sites/', { fixture: 'sites.json' }).as('sites');
+      cy.intercept('v1/oauth/identify', { fixture: 'identity.json' }).as(
+        'identity'
+      );
+      cy.intercept('v1/selection/simple/lists', {
+        fixture: 'combinator_lists.json',
+      }).as('lists');
+    });
+
+    it('loads create form with eligible builders only', () => {
+      cy.visit('/#/selections/combinator');
+      cy.wait('@lists');
+
+      cy.get('#include-builder-select').should('contain', 'Simple Ready');
+      cy.get('#include-builder-select').should('contain', 'SPARQL Ready');
+      cy.get('#include-builder-select').should('not.contain', 'German Simple');
+      cy.get('#include-builder-select').should(
+        'not.contain',
+        'Existing Combinator'
+      );
+      cy.get('#exclude-builder-select').should('contain', 'Simple Ready');
+      cy.get('#exclude-builder-select').should('contain', 'SPARQL Ready');
+      cy.get('#exclude-builder-select').should('not.contain', 'German Simple');
+      cy.get('#exclude-builder-select').should(
+        'not.contain',
+        'Existing Combinator'
+      );
+    });
+
+    it('displays builder loading errors', () => {
+      cy.intercept('v1/selection/simple/lists', {
+        statusCode: 500,
+        body: {},
+      }).as('listsFailure');
+
+      cy.visit('/#/selections/combinator');
+      cy.wait('@listsFailure');
+
+      cy.get('.alert-danger')
+        .should('be.visible')
+        .and('contain', 'Unable to load builders. Please try again later.');
+      cy.contains('No builders are available').should('not.exist');
+    });
+
+    it('displays a separate message when no eligible builders are available', () => {
+      cy.intercept('v1/selection/simple/lists', {
+        body: {
+          builders: [
+            {
+              id: 'german-simple',
+              name: 'German Simple',
+              project: 'de.wikipedia.org',
+              model: 'wp1.selection.models.simple',
+            },
+            {
+              id: 'combo-1',
+              name: 'Existing Combinator',
+              project: 'en.wikipedia.org',
+              model: 'wp1.selection.models.combinator',
+            },
+          ],
+        },
+      }).as('listsNoEligible');
+
+      cy.visit('/#/selections/combinator');
+      cy.wait('@listsNoEligible');
+
+      cy.get('#include-items .alert-warning')
+        .should('be.visible')
+        .and(
+          'contain',
+          'No eligible builders are available for en.wikipedia.org.'
+        );
+      cy.get('#include-items .alert-danger').should('not.exist');
+      cy.contains('Unable to load builders. Please try again later.').should(
+        'not.exist'
+      );
+    });
+
+    it('validates that at least one include builder is selected', () => {
+      cy.visit('/#/selections/combinator');
+      cy.wait('@lists');
+
+      cy.get('#listName > .form-control').click().type('Combined List');
+      cy.get('#saveListButton').click();
+
+      cy.get('#include-items .invalid-feedback').should('be.visible');
+    });
+
+    it('validates selected builders belong to the selected project', () => {
+      cy.visit('/#/selections/combinator');
+      cy.wait('@lists');
+
+      cy.get('#listName > .form-control').click().type('Combined List');
+      cy.get('#include-builder-select').select('simple-ready');
+      cy.get('#add-include-builder').click();
+      cy.get('#project > select').select('en.wiktionary.org');
+      cy.get('#saveListButton').click();
+
+      cy.get('#include-items .invalid-feedback')
+        .should('be.visible')
+        .and('contain', 'Simple Ready (en.wikipedia.org)');
+    });
+
+    it('displays backend validation errors', () => {
+      cy.visit('/#/selections/combinator');
+      cy.wait('@lists');
+
+      cy.get('#listName > .form-control').click().type('Combined List');
+      cy.get('#include-builder-select').select('simple-ready');
+      cy.get('#add-include-builder').click();
+      cy.intercept('POST', 'v1/builders/', {
+        fixture: 'save_combinator_failure.json',
+      }).as('createBuilderFailure');
+      cy.get('#saveListButton').click();
+
+      cy.wait('@createBuilderFailure');
+      cy.get('.errors').contains(
+        "Builder 'missing-builder' no longer exists. Please remove it from this combinator."
+      );
+    });
+
+    it('sends correct create payload to the API', () => {
+      cy.visit('/#/selections/combinator');
+      cy.wait('@lists');
+
+      cy.get('#listName > .form-control').click().type('Combined List');
+      cy.get('#include-operation').select('intersection');
+      cy.get('#include-builder-select').select('simple-ready');
+      cy.get('#add-include-builder').click();
+      cy.get('#exclude-operation').select('union');
+      cy.get('#exclude-builder-select').select('sparql-ready');
+      cy.get('#add-exclude-builder').click();
+
+      cy.intercept('POST', 'v1/builders/', {
+        fixture: 'save_list_success.json',
+      }).as('createBuilderSuccess');
+      cy.get('#saveListButton').click();
+
+      cy.wait('@createBuilderSuccess').then((interception) => {
+        expect(interception.request.body.model).to.equal(
+          'wp1.selection.models.combinator'
+        );
+        expect(interception.request.body.params.include).to.deep.equal({
+          builders: ['simple-ready'],
+          operation: 'intersection',
+        });
+        expect(interception.request.body.params.exclude).to.deep.equal({
+          builders: ['sparql-ready'],
+          operation: 'union',
+        });
+      });
+    });
+
+    it('loads and updates an existing combinator', () => {
+      cy.intercept('GET', 'v1/builders/combo-1', {
+        fixture: 'combinator_builder.json',
+      }).as('builder');
+      cy.visit('/#/selections/combinator/combo-1');
+      cy.wait('@builder');
+      cy.wait('@lists');
+
+      cy.get('#listName > .form-control').should(
+        'have.value',
+        'Combinator Builder'
+      );
+      cy.get('#include-builders').should('contain', 'Simple Ready');
+      cy.get('#exclude-builders').should('contain', 'SPARQL Ready');
+      cy.get('#include-operation').should('have.value', 'intersection');
+      cy.get('#exclude-operation').should('have.value', 'union');
+      cy.get('#include-builder-select').should(
+        'not.contain',
+        'Existing Combinator'
+      );
+
+      cy.intercept('POST', 'v1/builders/combo-1', {
+        fixture: 'save_list_success.json',
+      }).as('updateBuilderSuccess');
+      cy.get('#updateListButton').click();
+
+      cy.wait('@updateBuilderSuccess').then((interception) => {
+        expect(interception.request.body.params.include).to.deep.equal({
+          builders: ['simple-ready'],
+          operation: 'intersection',
+        });
+        expect(interception.request.body.params.exclude).to.deep.equal({
+          builders: ['sparql-ready'],
+          operation: 'union',
+        });
+      });
+    });
+
+    describe('when save button clicked', () => {
+      beforeEach(() => {
+        cy.visit('/#/selections/combinator');
+        cy.wait('@lists');
+        cy.get('#listName > .form-control').click().type('Combined List');
+        cy.get('#include-builder-select').select('simple-ready');
+        cy.get('#add-include-builder').click();
+        cy.intercept('POST', 'v1/builders/', {
+          delay: 4000,
+          fixture: 'save_list_success.json',
+        }).as('createBuilderSuccess');
+      });
+
+      it('shows spinner', () => {
+        cy.get('#saveListButton').click();
+        cy.get('#saveLoader').should('be.visible');
+      });
+
+      it('disables save button', () => {
+        cy.get('#saveListButton').click();
+        cy.get('#saveListButton').should('have.attr', 'disabled');
+      });
+    });
+
+    describe('when the builder has fatal errors', () => {
+      beforeEach(() => {
+        cy.intercept('GET', 'v1/builders/combo-1', {
+          fixture: 'combinator_builder_fatal_error.json',
+        }).as('builder');
+        cy.visit('/#/selections/combinator/combo-1');
+        cy.wait('@builder');
+      });
+
+      it('displays the error div', () => {
+        cy.get('.materialize-error').should('be.visible');
+      });
+
+      it('disables the retry button', () => {
+        cy.get('.materialize-error .btn').should('have.attr', 'disabled');
+      });
+    });
+
+    describe('when the builder has retryable errors', () => {
+      beforeEach(() => {
+        cy.intercept('GET', 'v1/builders/combo-1', {
+          fixture: 'combinator_builder_retryable_error.json',
+        }).as('builder');
+        cy.visit('/#/selections/combinator/combo-1');
+        cy.wait('@builder');
+      });
+
+      it('displays the error div', () => {
+        cy.get('.materialize-error').should('be.visible');
+      });
+
+      it('enables the retry button', () => {
+        cy.get('.materialize-error .btn').should('not.have.attr', 'disabled');
+      });
+    });
+
+    describe('when the builder is not found', () => {
+      beforeEach(() => {
+        cy.intercept('GET', 'v1/builders/missing-combo', {
+          statusCode: 404,
+          body: '404 NOT FOUND',
+        }).as('builder');
+        cy.visit('/#/selections/combinator/missing-combo');
+        cy.wait('@builder');
+      });
+
+      it('displays the 404 text', () => {
+        cy.get('#404').should('be.visible');
+      });
+    });
+  });
+
+  describe('when the user is not logged in', () => {
+    beforeEach(() => {
+      cy.intercept('v1/sites/', { fixture: 'sites.json' });
+    });
+
+    it('opens login page for create', () => {
+      cy.visit('/#/selections/combinator');
+      cy.contains('Please Log In To Continue');
+      cy.get('.pt-2 > .btn');
+    });
+
+    it('opens login page for edit', () => {
+      cy.visit('/#/selections/combinator/combo-1');
+      cy.contains('Please Log In To Continue');
+      cy.get('.pt-2 > .btn');
+    });
+  });
+});
diff --git a/wp1-frontend/cypress/e2e/myLists.cy.js b/wp1-frontend/cypress/e2e/myLists.cy.js
index bc1d55e0..e0285d6c 100644
--- a/wp1-frontend/cypress/e2e/myLists.cy.js
+++ b/wp1-frontend/cypress/e2e/myLists.cy.js
@@ -17,7 +17,7 @@ describe('the user selection list page', () => {
     it('successfully loads', () => {});
 
     it('displays the datatables view', () => {
-      cy.get('.dataTables_info').contains('Showing 1 to 13 of 13 entries');
+      cy.get('.dataTables_info').contains('Showing 1 to 14 of 14 entries');
     });
 
     it('displays list and its contents', () => {
@@ -85,6 +85,20 @@ describe('the user selection list page', () => {
       cy.url().should('eq', 'http://localhost:5173/#/selections/sparql/2');
     });
 
+    it('takes the user to the combinator edit screen when combinator edit is clicked', () => {
+      cy.intercept('GET', 'v1/builders/combo-list', {
+        fixture: 'combinator_builder.json',
+      });
+      cy.contains('td', 'combinator list')
+        .siblings()
+        .contains('.btn-primary', 'Edit')
+        .click();
+      cy.url().should(
+        'eq',
+        'http://localhost:5173/#/selections/combinator/combo-list'
+      );
+    });
+
     it('displays a failed link for selection with failed ZIM', () => {
       cy.contains('td', 'zim failed')
         .parent('tr')
diff --git a/wp1-frontend/cypress/fixtures/combinator_builder.json b/wp1-frontend/cypress/fixtures/combinator_builder.json
new file mode 100644
index 00000000..50ed07ec
--- /dev/null
+++ b/wp1-frontend/cypress/fixtures/combinator_builder.json
@@ -0,0 +1,16 @@
+{
+  "params": {
+    "include": {
+      "builders": ["simple-ready"],
+      "operation": "intersection"
+    },
+    "exclude": {
+      "builders": ["sparql-ready"],
+      "operation": "union"
+    }
+  },
+  "name": "Combinator Builder",
+  "model": "wp1.selection.models.combinator",
+  "project": "en.wikipedia.org",
+  "selection_errors": []
+}
diff --git a/wp1-frontend/cypress/fixtures/combinator_builder_fatal_error.json b/wp1-frontend/cypress/fixtures/combinator_builder_fatal_error.json
new file mode 100644
index 00000000..82452aa8
--- /dev/null
+++ b/wp1-frontend/cypress/fixtures/combinator_builder_fatal_error.json
@@ -0,0 +1,24 @@
+{
+  "params": {
+    "include": {
+      "builders": ["simple-ready"],
+      "operation": "union"
+    },
+    "exclude": {
+      "builders": [],
+      "operation": "union"
+    }
+  },
+  "name": "Combinator Fatal Error",
+  "model": "wp1.selection.models.combinator",
+  "project": "en.wikipedia.org",
+  "selection_errors": [
+    {
+      "error_messages": [
+        "Referenced builder Failed Builder (failed-builder) latest selection failed"
+      ],
+      "ext": "tsv",
+      "status": "FAILED"
+    }
+  ]
+}
diff --git a/wp1-frontend/cypress/fixtures/combinator_builder_retryable_error.json b/wp1-frontend/cypress/fixtures/combinator_builder_retryable_error.json
new file mode 100644
index 00000000..4e3cb3be
--- /dev/null
+++ b/wp1-frontend/cypress/fixtures/combinator_builder_retryable_error.json
@@ -0,0 +1,24 @@
+{
+  "params": {
+    "include": {
+      "builders": ["simple-ready"],
+      "operation": "union"
+    },
+    "exclude": {
+      "builders": [],
+      "operation": "union"
+    }
+  },
+  "name": "Combinator Retryable Error",
+  "model": "wp1.selection.models.combinator",
+  "project": "en.wikipedia.org",
+  "selection_errors": [
+    {
+      "error_messages": [
+        "Referenced builder Retry Builder (retry-builder) latest selection is not ready"
+      ],
+      "ext": "tsv",
+      "status": "CAN_RETRY"
+    }
+  ]
+}
diff --git a/wp1-frontend/cypress/fixtures/combinator_lists.json b/wp1-frontend/cypress/fixtures/combinator_lists.json
new file mode 100644
index 00000000..c45630d8
--- /dev/null
+++ b/wp1-frontend/cypress/fixtures/combinator_lists.json
@@ -0,0 +1,44 @@
+{
+  "builders": [
+    {
+      "id": "simple-ready",
+      "name": "Simple Ready",
+      "project": "en.wikipedia.org",
+      "model": "wp1.selection.models.simple",
+      "updated_at": 1685646150,
+      "s_updated_at": 1685646500,
+      "s_status": "OK",
+      "s_url": "https://www.example.fake/simple-ready.tsv"
+    },
+    {
+      "id": "sparql-ready",
+      "name": "SPARQL Ready",
+      "project": "en.wikipedia.org",
+      "model": "wp1.selection.models.sparql",
+      "updated_at": 1685646150,
+      "s_updated_at": 1685646500,
+      "s_status": "OK",
+      "s_url": "https://www.example.fake/sparql-ready.tsv"
+    },
+    {
+      "id": "german-simple",
+      "name": "German Simple",
+      "project": "de.wikipedia.org",
+      "model": "wp1.selection.models.simple",
+      "updated_at": 1685646150,
+      "s_updated_at": 1685646500,
+      "s_status": "OK",
+      "s_url": "https://www.example.fake/german-simple.tsv"
+    },
+    {
+      "id": "combo-1",
+      "name": "Existing Combinator",
+      "project": "en.wikipedia.org",
+      "model": "wp1.selection.models.combinator",
+      "updated_at": 1685646150,
+      "s_updated_at": 1685646500,
+      "s_status": "OK",
+      "s_url": "https://www.example.fake/combo-1.tsv"
+    }
+  ]
+}
diff --git a/wp1-frontend/cypress/fixtures/list_data.json b/wp1-frontend/cypress/fixtures/list_data.json
index 9b0b5fc9..efe8d390 100644
--- a/wp1-frontend/cypress/fixtures/list_data.json
+++ b/wp1-frontend/cypress/fixtures/list_data.json
@@ -237,6 +237,24 @@
         "interval_months": 3,
         "next_generation_date": "2026-06-01"
       }
+    },
+    {
+      "created_at": 1685646000,
+      "id": "combo-list",
+      "model": "wp1.selection.models.combinator",
+      "name": "combinator list",
+      "project": "en.wikipedia.org",
+      "s_content_type": "text/tab-separated-values",
+      "s_extension": "tsv",
+      "s_id": "combo-selection-001",
+      "s_status": "OK",
+      "s_updated_at": 1685646500,
+      "s_url": "https://www.example.fake/combo-selection-001",
+      "updated_at": 1685646150,
+      "z_updated_at": null,
+      "z_url": null,
+      "z_status": "NOT_REQUESTED",
+      "z_is_deleted": null
     }
   ]
 }
diff --git a/wp1-frontend/cypress/fixtures/save_combinator_failure.json b/wp1-frontend/cypress/fixtures/save_combinator_failure.json
new file mode 100644
index 00000000..35b4d629
--- /dev/null
+++ b/wp1-frontend/cypress/fixtures/save_combinator_failure.json
@@ -0,0 +1,10 @@
+{
+  "success": false,
+  "items": {
+    "valid": [],
+    "invalid": [],
+    "errors": [
+      "Builder 'missing-builder' no longer exists. Please remove it from this combinator."
+    ]
+  }
+}
diff --git a/wp1-frontend/src/components/BaseBuilder.vue b/wp1-frontend/src/components/BaseBuilder.vue
index cde52b66..25e28c96 100644
--- a/wp1-frontend/src/components/BaseBuilder.vue
+++ b/wp1-frontend/src/components/BaseBuilder.vue
@@ -115,7 +115,11 @@
                   Please provide a valid list name
                 </div>
               </div>
-              <slot name="extra-params" :success="success"></slot>
+              <slot
+                name="extra-params"
+                :success="success"
+                :builder="builder"
+              ></slot>
             </div>
             <div
               v-if="this.success == false || this.deleteSuccess == false"
@@ -277,7 +281,7 @@ export default {
         {
           headers: { 'Content-Type': 'application/json' },
           credentials: 'include',
-        },
+        }
       );
       if (response.status == 404 || response.status == 401) {
         this.notFound = true;
@@ -290,7 +294,7 @@ export default {
       }
     },
     onSubmit: async function () {
-      this.$emit('onBeforeSubmit');
+      this.$emit('onBeforeSubmit', this.builder);
       const form = this.$refs.form;
       if (!form.checkValidity()) {
         this.$refs.form_group.classList.add('was-validated');
@@ -348,7 +352,7 @@ export default {
     onDelete: async function () {
       if (
         !window.confirm(
-          'Really delete this list? The definition and all downloadable selections will be permanently deleted.',
+          'Really delete this list? The definition and all downloadable selections will be permanently deleted.'
         )
       ) {
         return;
diff --git a/wp1-frontend/src/components/CombinatorBuilder.vue b/wp1-frontend/src/components/CombinatorBuilder.vue
new file mode 100644
index 00000000..a2c7ffb4
--- /dev/null
+++ b/wp1-frontend/src/components/CombinatorBuilder.vue
@@ -0,0 +1,547 @@
+<template>
+  <BaseBuilder
+    :key="$route.path"
+    :listName="'Combinator Selection'"
+    :model="'wp1.selection.models.combinator'"
+    :params="params"
+    :builderId="$route.params.builder_id"
+    :invalidItems="invalidItems"
+    @onBuilderLoaded="onBuilderLoaded"
+    @onBeforeSubmit="onBeforeSubmit"
+    @onValidationError="onValidationError"
+  >
+    <template #create-desc>
+      <p>
+        Use this tool to combine existing selections. Choose builders to
+        include, optionally choose builders to exclude, and select whether each
+        group uses all articles or only articles shared by every builder in that
+        group.
+      </p>
+    </template>
+
+    <template #extra-params="{ builder }">
+      <div id="combinator-groups" class="form-group m-4 my-2">
+        <div class="card mb-4 combinator-card">
+          <div class="card-header bg-success text-white">
+            <h5 class="mb-0">Include</h5>
+          </div>
+          <div class="card-body">
+            <div class="form-group mb-3">
+              <label for="include-operation"
+                >Combine included builders using</label
+              >
+              <select
+                id="include-operation"
+                v-model="includeOperation"
+                class="custom-select my-list"
+              >
+                <option value="union">All articles from any builder</option>
+                <option value="intersection">
+                  Only articles shared by every builder
+                </option>
+              </select>
+            </div>
+
+            <div id="include-items" class="form-group mb-3">
+              <label for="include-builder-select">Builders to include</label>
+              <div class="input-group">
+                <select
+                  id="include-builder-select"
+                  ref="includeSelect"
+                  v-model="includeDropdown"
+                  class="custom-select my-list"
+                  :class="{ 'is-invalid': includeValidationMessage }"
+                >
+                  <option value="">Select a builder to add</option>
+                  <option
+                    v-for="item in availableIncludeBuilders(builder.project)"
+                    :key="'include-option-' + item.id"
+                    :value="item.id"
+                  >
+                    {{ builderOptionLabel(item) }}
+                  </option>
+                </select>
+                <div class="input-group-append">
+                  <button
+                    id="add-include-builder"
+                    type="button"
+                    class="btn btn-success"
+                    :disabled="!includeDropdown"
+                    @click="addSelectedBuilder('include')"
+                  >
+                    Add
+                  </button>
+                </div>
+                <div class="invalid-feedback">
+                  {{
+                    includeValidationMessage ||
+                    'Please add at least one builder to include'
+                  }}
+                </div>
+              </div>
+              <div v-if="!buildersFetchFinished" class="text-muted small mt-2">
+                Loading builders...
+              </div>
+              <div
+                v-else-if="buildersLoadError"
+                class="alert alert-danger mt-2 mb-0"
+                role="alert"
+              >
+                {{ buildersLoadError }}
+              </div>
+              <div
+                v-else-if="hasNoEligibleBuilders(builder.project)"
+                class="alert alert-warning mt-2 mb-0"
+                role="alert"
+              >
+                No eligible builders are available for
+                {{ builder.project }}.
+              </div>
+            </div>
+
+            <div
+              id="include-builders"
+              class="selected-builders"
+              v-if="includeBuilders.length > 0"
+            >
+              <span
+                v-for="builderId in includeBuilders"
+                :key="'include-builder-' + builderId"
+                class="badge badge-success combinator-badge"
+              >
+                {{ builderLabel(builderId) }}
+                <button
+                  type="button"
+                  class="remove-builder"
+                  @click="removeSelectedBuilder('include', builderId)"
+                  aria-label="Remove included builder"
+                >
+                  &times;
+                </button>
+              </span>
+            </div>
+            <div v-else class="text-muted">No builders selected</div>
+          </div>
+        </div>
+
+        <div class="card mb-4 combinator-card">
+          <div class="card-header bg-danger text-white">
+            <h5 class="mb-0">
+              Exclude <span class="font-weight-normal">(optional)</span>
+            </h5>
+          </div>
+          <div class="card-body">
+            <div class="form-group mb-3">
+              <label for="exclude-operation"
+                >Combine excluded builders using</label
+              >
+              <select
+                id="exclude-operation"
+                v-model="excludeOperation"
+                class="custom-select my-list"
+              >
+                <option value="union">All articles from any builder</option>
+                <option value="intersection">
+                  Only articles shared by every builder
+                </option>
+              </select>
+            </div>
+
+            <div id="exclude-items" class="form-group mb-3">
+              <label for="exclude-builder-select">Builders to exclude</label>
+              <div class="input-group">
+                <select
+                  id="exclude-builder-select"
+                  ref="excludeSelect"
+                  v-model="excludeDropdown"
+                  class="custom-select my-list"
+                  :class="{ 'is-invalid': excludeValidationMessage }"
+                >
+                  <option value="">Select a builder to add</option>
+                  <option
+                    v-for="item in availableExcludeBuilders(builder.project)"
+                    :key="'exclude-option-' + item.id"
+                    :value="item.id"
+                  >
+                    {{ builderOptionLabel(item) }}
+                  </option>
+                </select>
+                <div class="input-group-append">
+                  <button
+                    id="add-exclude-builder"
+                    type="button"
+                    class="btn btn-danger"
+                    :disabled="!excludeDropdown"
+                    @click="addSelectedBuilder('exclude')"
+                  >
+                    Add
+                  </button>
+                </div>
+                <div class="invalid-feedback">
+                  {{ excludeValidationMessage }}
+                </div>
+              </div>
+            </div>
+
+            <div
+              id="exclude-builders"
+              class="selected-builders"
+              v-if="excludeBuilders.length > 0"
+            >
+              <span
+                v-for="builderId in excludeBuilders"
+                :key="'exclude-builder-' + builderId"
+                class="badge badge-danger combinator-badge"
+              >
+                {{ builderLabel(builderId) }}
+                <button
+                  type="button"
+                  class="remove-builder"
+                  @click="removeSelectedBuilder('exclude', builderId)"
+                  aria-label="Remove excluded builder"
+                >
+                  &times;
+                </button>
+              </span>
+            </div>
+            <div v-else class="text-muted">
+              No builders selected. Nothing will be excluded.
+            </div>
+          </div>
+        </div>
+
+        <div class="combinator-preview p-3 rounded border">
+          <h5 class="mb-2">Expression preview</h5>
+          <code>{{ expressionPreview }}</code>
+        </div>
+      </div>
+    </template>
+  </BaseBuilder>
+</template>
+
+<script>
+import BaseBuilder from './BaseBuilder.vue';
+//one of the metabuilders , so we filter the dropdown
+//enhance later to include any metaBuilder
+const COMBINATOR_MODEL = 'wp1.selection.models.combinator';
+
+export default {
+  components: { BaseBuilder },
+  name: 'CombinatorBuilder',
+  data: function () {
+    return {
+      allBuilders: [],
+      buildersLoadError: '',
+      buildersFetchFinished: false,
+      invalidItems: '',
+      includeBuilders: [],
+      includeDropdown: '',
+      includeOperation: 'union',
+      includeValidationMessage: '',
+      excludeBuilders: [],
+      excludeDropdown: '',
+      excludeOperation: 'union',
+      excludeValidationMessage: '',
+      params: this.defaultParams(),
+    };
+  },
+  computed: {
+    currentBuilderId: function () {
+      return this.$route.params.builder_id
+        ? String(this.$route.params.builder_id)
+        : null;
+    },
+    expressionPreview: function () {
+      if (this.includeBuilders.length === 0) {
+        return 'Add at least one included builder';
+      }
+
+      var includeNames = this.includeBuilders.map(this.previewName);
+      var expression =
+        '(' +
+        includeNames.join(this.operationText(this.includeOperation)) +
+        ')';
+
+      if (this.excludeBuilders.length > 0) {
+        expression +=
+          ' - (' +
+          this.excludeBuilders
+            .map(this.previewName)
+            .join(this.operationText(this.excludeOperation)) +
+          ')';
+      }
+
+      return expression;
+    },
+  },
+  created: function () {
+    this.fetchBuilders();
+    this.updateParams();
+  },
+  methods: {
+    defaultParams: function () {
+      return {
+        include: {
+          builders: [],
+          operation: 'union',
+        },
+        exclude: {
+          builders: [],
+          operation: 'union',
+        },
+      };
+    },
+    fetchBuilders: async function () {
+      this.buildersLoadError = '';
+      this.buildersFetchFinished = false;
+
+      try {
+        const response = await fetch(
+          `${import.meta.env.VITE_API_URL}/selection/simple/lists`,
+          {
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include',
+          }
+        );
+        if (!response.ok) {
+          this.buildersLoadError =
+            'Unable to load builders. Please try again later.';
+          return;
+        }
+
+        const data = await response.json();
+        this.allBuilders = data.builders.map((builder) => ({
+          ...builder,
+          id: String(builder.id),
+        }));
+      } catch (e) {
+        this.buildersLoadError =
+          'Unable to load builders. Please try again later.';
+      } finally {
+        this.buildersFetchFinished = true;
+      }
+    },
+    onBuilderLoaded: function (builder) {
+      var include = builder.params.include || {};
+      var exclude = builder.params.exclude || {};
+
+      this.includeBuilders = (include.builders || []).map(String);
+      this.includeOperation = include.operation || 'union';
+      this.excludeBuilders = (exclude.builders || []).map(String);
+      this.excludeOperation = exclude.operation || 'union';
+      this.updateParams();
+    },
+    onBeforeSubmit: function (builder) {
+      var project =
+        builder && builder.project ? builder.project : 'en.wikipedia.org';
+      var includeProjectErrors = this.buildersOutsideProject(
+        this.includeBuilders,
+        project
+      );
+      var excludeProjectErrors = this.buildersOutsideProject(
+        this.excludeBuilders,
+        project
+      );
+
+      this.includeValidationMessage = '';
+      this.excludeValidationMessage = '';
+
+      if (this.includeBuilders.length === 0) {
+        this.includeValidationMessage =
+          'Please add at least one builder to include';
+      } else if (includeProjectErrors.length) {
+        this.includeValidationMessage = this.projectMismatchMessage(
+          'Included',
+          includeProjectErrors,
+          project
+        );
+      }
+
+      if (excludeProjectErrors.length) {
+        this.excludeValidationMessage = this.projectMismatchMessage(
+          'Excluded',
+          excludeProjectErrors,
+          project
+        );
+      }
+
+      this.setSelectValidity('includeSelect', this.includeValidationMessage);
+      this.setSelectValidity('excludeSelect', this.excludeValidationMessage);
+      this.updateParams();
+    },
+    onValidationError: function (data) {
+      this.invalidItems = data.items.invalid.join('\n');
+      this.includeValidationMessage = 'Combinator configuration is not valid';
+      this.setSelectValidity('includeSelect', this.includeValidationMessage);
+    },
+    // TODO : just refactor into one function
+    availableIncludeBuilders: function (project) {
+      return this.availableBuildersFor(project, this.includeBuilders);
+    },
+    availableExcludeBuilders: function (project) {
+      return this.availableBuildersFor(project, this.excludeBuilders);
+    },
+    hasNoEligibleBuilders: function (project) {
+      return (
+        this.buildersFetchFinished &&
+        !this.buildersLoadError &&
+        this.availableIncludeBuilders(project).length === 0
+      );
+    },
+    availableBuildersFor: function (project, selectedIds) {
+      return this.allBuilders.filter((builder) => {
+        return (
+          builder.id !== this.currentBuilderId &&
+          builder.model !== COMBINATOR_MODEL &&
+          builder.project === project &&
+          !selectedIds.includes(builder.id)
+        );
+      });
+    },
+    builderById: function (builderId) {
+      return this.allBuilders.find((builder) => builder.id === builderId);
+    },
+    builderLabel: function (builderId) {
+      var builder = this.builderById(builderId);
+      if (!builder) {
+        return builderId.substring(0, 8);
+      }
+      return `${builder.name} (${this.modelName(builder.model)})`;
+    },
+    builderOptionLabel: function (builder) {
+      return `${builder.name} (${this.modelName(
+        builder.model
+      )}, ${this.statusText(builder)})`;
+    },
+    // better namming
+    modelName: function (model) {
+      var fragment = model.split('.').pop();
+      var labels = {
+        book: 'Book',
+        petscan: 'Petscan',
+        simple: 'Simple',
+        sparql: 'SPARQL',
+        wikiproject: 'WikiProject',
+      };
+      return labels[fragment] || fragment;
+    },
+    statusText: function (builder) {
+      if (builder.s_status === 'FAILED') {
+        return 'failed';
+      }
+      if (builder.s_status === 'CAN_RETRY') {
+        return 'retryable failure';
+      }
+      if (builder.s_status === 'OK' || builder.s_url) {
+        return 'ready';
+      }
+      return 'not materialized';
+    },
+    previewName: function (builderId) {
+      var builder = this.builderById(builderId);
+      if (!builder) {
+        return builderId.substring(0, 8);
+      }
+      return `"${builder.name}"`;
+    },
+    operationText: function (operation) {
+      return operation === 'intersection' ? ' INTERSECTION ' : ' UNION ';
+    },
+    addSelectedBuilder: function (group) {
+      var dropdownKey = `${group}Dropdown`;
+      var buildersKey = `${group}Builders`;
+      var validationKey = `${group}ValidationMessage`;
+      var selectRef = `${group}Select`;
+      var builderId = this[dropdownKey];
+
+      if (builderId && !this[buildersKey].includes(builderId)) {
+        this[buildersKey].push(builderId);
+        this[dropdownKey] = '';
+        this[validationKey] = '';
+        this.setSelectValidity(selectRef, '');
+        this.updateParams();
+      }
+    },
+    removeSelectedBuilder: function (group, builderId) {
+      var buildersKey = `${group}Builders`;
+      this[buildersKey] = this[buildersKey].filter((id) => id !== builderId);
+      this.updateParams();
+    },
+    buildersOutsideProject: function (builderIds, project) {
+      return builderIds
+        .map(this.builderById)
+        .filter((builder) => builder && builder.project !== project);
+    },
+    projectMismatchMessage: function (groupName, builders, project) {
+      var names = builders
+        .map((builder) => `${builder.name} (${builder.project})`)
+        .join(', ');
+      return `${groupName} builders must use ${project}. Remove or replace: ${names}`;
+    },
+    setSelectValidity: function (refName, message) {
+      if (this.$refs[refName]) {
+        this.$refs[refName].setCustomValidity(message);
+      }
+    },
+    updateParams: function () {
+      this.params = {
+        include: {
+          builders: [...this.includeBuilders],
+          operation: this.includeOperation,
+        },
+        exclude: {
+          builders: [...this.excludeBuilders],
+          operation: this.excludeOperation,
+        },
+      };
+    },
+  },
+  watch: {
+    includeOperation: function () {
+      this.updateParams();
+    },
+    excludeOperation: function () {
+      this.updateParams();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.combinator-card {
+  width: 100%;
+}
+
+.selected-builders {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.combinator-badge {
+  align-items: center;
+  display: inline-flex;
+  font-size: 0.9em;
+  margin: 0 0.5rem 0.5rem 0;
+  padding: 0.5rem;
+}
+
+.remove-builder {
+  background: none;
+  border: 0;
+  color: white;
+  font-size: 1rem;
+  line-height: 1;
+  margin-left: 0.5rem;
+  padding: 0;
+}
+
+.combinator-preview {
+  background: #f8f9fa;
+  width: 100%;
+}
+
+.combinator-preview code {
+  color: #d63384;
+  font-size: 1.05em;
+}
+</style>
diff --git a/wp1-frontend/src/main.js b/wp1-frontend/src/main.js
index e9818fe0..29701a57 100644
--- a/wp1-frontend/src/main.js
+++ b/wp1-frontend/src/main.js
@@ -12,6 +12,7 @@ import VueRouter from 'vue-router';
 import App from './App.vue';
 import ArticlePage from './components/ArticlePage.vue';
 import BookBuilder from './components/BookBuilder.vue';
+import CombinatorBuilder from './components/CombinatorBuilder.vue';
 import PetscanBuilder from './components/PetscanBuilder.vue';
 import SimpleBuilder from './components/SimpleBuilder.vue';
 import SparqlBuilder from './components/SparqlBuilder.vue';
@@ -134,6 +135,13 @@ const routes = [
       title: () => BASE_TITLE + ' - Edit WikiProject Selection',
     },
   },
+  {
+    path: '/selections/combinator',
+    component: CombinatorBuilder,
+    meta: {
+      title: () => BASE_TITLE + ' - Create Combinator Selection',
+    },
+  },
   {
     path: '/selections/simple/:builder_id',
     component: SimpleBuilder,
@@ -169,6 +177,13 @@ const routes = [
       title: () => BASE_TITLE + ' - Edit WikiProject Selection',
     },
   },
+  {
+    path: '/selections/combinator/:builder_id',
+    component: CombinatorBuilder,
+    meta: {
+      title: () => BASE_TITLE + ' - Edit Combinator Selection',
+    },
+  },
   {
     path: '/selections/:builder_id/zim',
     component: ZimFile,