diff --git a/resources/js/api/beam.ts b/resources/js/api/beam.ts
index c948bb5..221f441 100644
--- a/resources/js/api/beam.ts
+++ b/resources/js/api/beam.ts
@@ -72,6 +72,7 @@ export class BeamApi {
                 start: createBeamData.start,
                 end: createBeamData.end,
                 flags: createBeamData.flags,
+                claimLimit: createBeamData.claimLimit,
                 collectionId: createBeamData.collectionId,
                 tokens: createBeamData.tokens,
             },
diff --git a/resources/js/components/Chip.vue b/resources/js/components/Chip.vue
index d6773a8..505643b 100644
--- a/resources/js/components/Chip.vue
+++ b/resources/js/components/Chip.vue
@@ -3,7 +3,7 @@
         class="inline-flex rounded-md px-1 truncate"
         :class="{
             'bg-red-500 !text-white ': isError,
-            'bg-light-surface-background dark:bg-dark-surface-background text-light-content-strong dark:text-dark-content-strong':
+            'bg-light-surface-brand-alpha dark:bg-dark-surface-brand-alpha text-light-content-strong dark:text-dark-content-strong':
                 !isError,
         }"
     >
diff --git a/resources/js/components/pages/create/CreateBeam.vue b/resources/js/components/pages/create/CreateBeam.vue
index e307efc..32fd7ab 100644
--- a/resources/js/components/pages/create/CreateBeam.vue
+++ b/resources/js/components/pages/create/CreateBeam.vue
@@ -95,6 +95,14 @@
                                     description="The claim period end date."
                                     required
                                 />
+                                <FormInput
+                                    v-model="claimLimit"
+                                    name="claimLimit"
+                                    label="Claim Limit"
+                                    description="Claim limit per token between 1 and 100."
+                                    type="number"
+                                    required
+                                />
                                 <MultiCheckbox
                                     v-model="flags"
                                     name="flags"
@@ -157,6 +165,7 @@ const description = ref('');
 const image = ref('');
 const start = ref(new Date());
 const end = ref(new Date());
+const claimLimit = ref(1);
 
 const flags = ref([]);
 
@@ -203,6 +212,7 @@ const validation = yup.object({
     start: yup.date().required(),
     end: yup.date().min(yup.ref('start')).required(),
     flags: yup.array().of(yup.string()),
+    claimLimit: yup.number().min(1).max(100).required(),
 });
 
 const addItem = () => {
@@ -250,6 +260,7 @@ const createBeam = async () => {
                 image: image.value,
                 start: new Date(start.value).toISOString(),
                 end: new Date(end.value).toISOString(),
+                claimLimit: claimLimit.value,
                 flags: flags.value.map((f) => {
                     return {
                         flag: f,
diff --git a/resources/js/graphql/mutation/beam/CreateBeam.ts b/resources/js/graphql/mutation/beam/CreateBeam.ts
index bc6fe39..5f6aa1a 100644
--- a/resources/js/graphql/mutation/beam/CreateBeam.ts
+++ b/resources/js/graphql/mutation/beam/CreateBeam.ts
@@ -1,4 +1,4 @@
-export default `mutation CreateBeam($name: String!, $description: String!, $image: String!, $start: DateTime!, $end: DateTime!, $flags: [BeamFlagInputType!], $collectionId: BigInt!, $tokens: [ClaimToken!]!) {
+export default `mutation CreateBeam($name: String!, $description: String!, $image: String!, $start: DateTime!, $end: DateTime!, $claimLimit: Int, $flags: [BeamFlagInputType!], $collectionId: BigInt!, $tokens: [ClaimToken!]!) {
     CreateBeam(
       name: $name
       description: $description
@@ -6,6 +6,7 @@ export default `mutation CreateBeam($name: String!, $description: String!, $imag
       start: $start
       end: $end
       flags: $flags
+      claimLimit: $claimLimit
       collectionId: $collectionId
       tokens: $tokens
     )
diff --git a/resources/js/graphql/query/beam/GetBeam.ts b/resources/js/graphql/query/beam/GetBeam.ts
index 593b728..b74d772 100644
--- a/resources/js/graphql/query/beam/GetBeam.ts
+++ b/resources/js/graphql/query/beam/GetBeam.ts
@@ -13,7 +13,10 @@ export default `query GetBeam($code: String!, $account: String) {
       isClaimable
       claimLimit
       claimsRemaining
-      claimConditions
+      claimConditions {
+        type
+        value
+      }
       flags
       qr {
         url
diff --git a/resources/js/graphql/query/beam/GetBeams.ts b/resources/js/graphql/query/beam/GetBeams.ts
index da5e6a2..3897de7 100644
--- a/resources/js/graphql/query/beam/GetBeams.ts
+++ b/resources/js/graphql/query/beam/GetBeams.ts
@@ -15,7 +15,10 @@ export default `query GetBeams($codes: [String!], $names: [String!], $after: Str
           isClaimable
           claimLimit
           claimsRemaining
-          claimConditions
+          claimConditions {
+            type
+            value
+          }
           flags
           qr {
             url