diff --git a/README.md b/README.md
index 9175a43..49d2604 100644
--- a/README.md
+++ b/README.md
@@ -20,12 +20,16 @@ composer require justbetter/statamic-translation-management
 
 This addon makes use of [spatie/laravel-translation-loader](https://github.com/spatie/laravel-translation-loader), and has migrations. 
 To publish and migrate, you can run:
-
 ```bash
 php artisan vendor:publish --provider="Spatie\TranslationLoader\TranslationServiceProvider" --tag="migrations"
 php artisan migrate
 ```
 
+This addon adds two custom field types, if you want to use them include the script in your cp.js.
+```js
+import 'Vendor/justbetter/statamic-translation-management/resources/js/translation-manager.js'
+```
+
 ## How to Use
 
 This addon adds a "translations" menu item in the control panel through [Runway](https://github.com/statamic-rad-pack/runway). Here you can add/edit the translations.
\ No newline at end of file
diff --git a/resources/js/components/fieldtypes/LocaleSelectArrayFieldtype.vue b/resources/js/components/fieldtypes/LocaleSelectArrayFieldtype.vue
index 28223b1..b8183dc 100644
--- a/resources/js/components/fieldtypes/LocaleSelectArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/LocaleSelectArrayFieldtype.vue
@@ -10,16 +10,18 @@
             </thead>
             <tbody>
                 <tr v-for="(row, index) in rows" :key="index">
-                    <!-- Replace the key input with a select dropdown -->
                     <td>
-                        <v-select v-model="row.key" :options="configOptions" label="label" value-field="value"
-                            placeholder="Select a key" />
+                        <v-select 
+                            v-model="row.key" 
+                            :options="configOptions" 
+                            label="label" 
+                            value-field="value"
+                            placeholder="Select a key" 
+                        />
                     </td>
-                    <!-- Value input -->
                     <td>
                         <text-input v-model="row.value" placeholder="Enter value" :name="'value-' + index" />
                     </td>
-                    <!-- Actions -->
                     <td>
                         <button type="button" @click="removeRow(index)">Remove</button>
                     </td>
@@ -27,7 +29,6 @@
             </tbody>
         </table>
 
-        <!-- Add Row Button -->
         <button type="button" class="btn-primary" @click="addRow">Add Row</button>
     </div>
 </template>
@@ -36,7 +37,7 @@
 export default {
     props: {
         value: {
-            type: Object, // Adjusted to match the desired data structure
+            type: Object,
             default: () => ({}),
         },
         config: {
@@ -51,7 +52,6 @@ export default {
     },
     computed: {
         configOptions() {
-            // Transform the `options` metadata into label/value pairs
             return Object.values(this.$attrs.meta.options).map((option) => ({
                 label: option,
                 value: option,
@@ -68,14 +68,12 @@ export default {
     },
     methods: {
         parseInitialValue(value) {
-            // Convert the initial object to an array for easier manipulation in the UI
             return Object.entries(value).map(([key, val]) => ({
                 key: { label: key, value: key },
                 value: val,
             }));
         },
         transformToDatabaseFormat() {
-            // Transform rows array back into the desired key-value object
             return this.rows.reduce((acc, row) => {
                 if (row.key && row.key.value) {
                     acc[row.key.value] = row.value;
diff --git a/resources/js/components/fieldtypes/LocaleSelectArrayIndexFieldtype.vue b/resources/js/components/fieldtypes/LocaleSelectArrayIndexFieldtype.vue
index 9d6a188..f7dd448 100644
--- a/resources/js/components/fieldtypes/LocaleSelectArrayIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/LocaleSelectArrayIndexFieldtype.vue
@@ -17,7 +17,6 @@ export default {
     },
     computed: {
         parsedKeys() {
-            console.log(this.value)
             if (Array.isArray(this.value)) {
                 return this.value.map((item) => item.key?.value || item.key);
             } else if (typeof this.value === 'object') {
diff --git a/resources/js/package.js b/resources/js/translation-manager.js
similarity index 100%
rename from resources/js/package.js
rename to resources/js/translation-manager.js
diff --git a/src/ServiceProvider.php b/src/ServiceProvider.php
index 28296ce..e38ada7 100644
--- a/src/ServiceProvider.php
+++ b/src/ServiceProvider.php
@@ -17,14 +17,12 @@ public function register()
 
     public function bootAddon(): void
     {
-        TranslationKey::register();
-        LocaleSelectArray::register();
-
         $this->bootRunway()
-            ->bootPublishables();
+            ->bootPublishables()
+            ->bootFieldTypes();
     }
 
-    public function bootRunway(): self
+    protected function bootRunway(): self
     {
         config(['runway.resources' => array_merge(
             [LanguageLine::class => [
@@ -36,7 +34,7 @@ public function bootRunway(): self
         return $this;
     }
 
-    public function bootPublishables(): self
+    protected function bootPublishables(): self
     {
         $this->publishes([
             __DIR__.'/../resources/blueprints/vendor/runway' => resource_path('blueprints/vendor/runway'),
@@ -44,4 +42,12 @@ public function bootPublishables(): self
 
         return $this;
     }
+
+    protected function bootFieldTypes(): self
+    {
+        TranslationKey::register();
+        LocaleSelectArray::register();
+
+        return $this;
+    }
 }