diff --git a/src/components/dictionaries/DictionaryCard.vue b/src/components/dictionaries/DictionaryCard.vue
new file mode 100644
index 0000000..f2a46bc
--- /dev/null
+++ b/src/components/dictionaries/DictionaryCard.vue
@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import { ref, toRaw, watchEffect } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Dialog from 'primevue/dialog';
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import ProgressSpinner from 'primevue/progressspinner';
+
+import DictionaryItemsCard from './DictionaryItemsCard.vue';
+import DictionaryAPIService from './dictionary.service';
+import VclAPIService from '../vcl/vcl.service';
+import { useCredentialsStore } from '@/stores/credentialsStore';
+import type { DictionaryEntity, DictionaryItemEntity } from './dictionary.interface';
+import { eventBus, EventType } from '@/utils/eventBus';
+
+// Init
+const toast = useToast();
+const credentialsStore = useCredentialsStore();
+const props = defineProps({
+  vcl_version: {
+    type: Number,
+    required: true,
+  },
+});
+
+// Data
+const dictionaries = ref<DictionaryEntity[]>([]);
+const dictionary_selected = ref<DictionaryEntity>();
+const deleteDictionaryDialog = ref<boolean>(false);
+const editDictionaryDialog = ref<boolean>(false);
+const isDeleting = ref<boolean>(false);
+
+function refresh() {
+  console.log('FastSun > Refresh Dictionaries!');
+  const dictionaryService = new DictionaryAPIService(
+    credentialsStore.getServiceId(),
+    credentialsStore.getServiceToken(),
+  );
+
+  dictionaryService
+    .getDictionaries(props.vcl_version!)
+    .then((result) => {
+      dictionaries.value = result;
+      cleanSelected();
+
+      if (import.meta.env.DEV) {
+        //DEBUG
+        dictionaries.value.forEach((dict) => {
+          console.log(toRaw(dict));
+        });
+      }
+
+      // If no dictionaries exist, display an informational message
+      if (dictionaries.value.length === 0) {
+        console.log('FastSun > No dictionaries found, user can create a new one');
+      }
+
+      dictionaries.value.forEach((dict: DictionaryEntity) => {
+        dictionaryService
+          .getDictionaryItems(dict.id)
+          .then((result) => {
+            dict.items = result;
+          })
+          .catch((error) => {
+            toast.add({ severity: 'error', summary: 'Error', detail: error, life: 5000 });
+          });
+      });
+    })
+    .catch((error) => {
+      toast.add({ severity: 'error', summary: 'Error', detail: error, life: 5000 });
+    });
+}
+watchEffect(refresh);
+
+// Events
+function cleanSelected() {
+  dictionary_selected.value = {} as DictionaryEntity;
+  dictionary_selected.value.items = [] as DictionaryItemEntity[];
+}
+function setSelected(dict: DictionaryEntity) {
+  dictionary_selected.value = dict;
+}
+
+function openDictionaryEditModal() {
+  editDictionaryDialog.value = true;
+}
+function closeDictionaryEditModal(updated: boolean) {
+  editDictionaryDialog.value = false;
+  cleanSelected();
+  // Refresh is handled by watch on props.vcl_version, no need to call it here
+}
+
+function openDictionaryDeleteModal() {
+  deleteDictionaryDialog.value = true;
+}
+function closeDictionaryDeleteModal() {
+  deleteDictionaryDialog.value = false;
+  cleanSelected();
+}
+
+function addDictionary() {
+  console.log('FastSun > Add Dictionary!');
+
+  const tempDict: DictionaryEntity = {
+    id: '', // Empty ID for a new dictionary
+    name: '',
+    write_only: false,
+    items: [] as DictionaryItemEntity[],
+    service_id: credentialsStore.getServiceId(),
+  } as DictionaryEntity;
+
+  setSelected(tempDict);
+  openDictionaryEditModal();
+}
+
+function editDictionary(dict: DictionaryEntity) {
+  console.log('FastSun > Edit Dictionary: ' + dict.id);
+
+  const clone = JSON.parse(JSON.stringify(dict));
+  setSelected(clone);
+  openDictionaryEditModal();
+}
+
+function confirmDeleteDictionary(dict: DictionaryEntity) {
+  console.log('FastSun > Delete Dictionary: (check): ' + dict.name);
+
+  setSelected(dict);
+  openDictionaryDeleteModal();
+}
+async function deleteDictionary() {
+  if (dictionary_selected.value) {
+    const dictionaryName = dictionary_selected.value.name; // Save the name before deletion for the notification toast
+    console.log('FastSun > Delete Dictionary (make): ' + dictionaryName);
+
+    isDeleting.value = true;
+    try {
+      // Create a new draft version for deletion
+      const vclService = new VclAPIService(credentialsStore.getServiceId(), credentialsStore.getServiceToken());
+      const newVersion = await vclService.cloneVersion(props.vcl_version!.toString());
+
+      // Delete the dictionary in the new version using the name
+      const dictionaryService = new DictionaryAPIService(
+        credentialsStore.getServiceId(),
+        credentialsStore.getServiceToken(),
+      );
+      await dictionaryService.deleteDictionary(parseInt(newVersion.number), dictionaryName);
+
+      // Validate the new VCL version
+      console.log('FastSun > Validating VCL version:', newVersion.number);
+      await vclService.validate(newVersion.number);
+
+      // Activate the new VCL version
+      console.log('FastSun > Activating VCL version:', newVersion.number);
+      await vclService.activate(newVersion.number);
+
+      // Update the VCL version in the store and notify other components
+      credentialsStore.setVclVersion(parseInt(newVersion.number));
+      eventBus.emit(EventType.VCL_VERSION_CHANGED, parseInt(newVersion.number));
+
+      // Remove locally from the list
+      dictionaries.value = dictionaries.value.filter((val: DictionaryEntity) => val.id !== dictionary_selected.value!.id);
+      closeDictionaryDeleteModal();
+
+      toast.add({
+        severity: 'success',
+        summary: 'Dictionary Deleted & Activated!',
+        detail: `Dictionary "${dictionaryName}" deleted and version ${newVersion.number} activated`,
+        life: 5000,
+      });
+    } catch (error) {
+      console.error('Error deleting dictionary:', error);
+      toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: 'Failed to delete dictionary. Please try again.',
+        life: 5000,
+      });
+    } finally {
+      isDeleting.value = false;
+      closeDictionaryDeleteModal();
+    }
+  }
+}
+</script>
+
+<template>
+  <Card>
+    <template #title v-if="false">Dictionaries</template>
+    <template #content>
+      <DataTable
+        :value="dictionaries"
+        dataKey="id"
+        stripedRows
+        resizableColumns
+        columnResizeMode="fit"
+        sortField="updated_at"
+        :sortOrder="-1"
+        :paginator="true"
+        :rows="5"
+        :rowsPerPageOptions="[5, 10, 20, 50]"
+        paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+        currentPageReportTemplate="{first} to {last} of {totalRecords}"
+      >
+        <template #paginatorstart>
+          <Button type="button" icon="pi pi-refresh" text @click="refresh" />
+        </template>
+        <template #paginatorend>
+          <Button type="button" v-if="false" icon="pi pi-download" text />
+        </template>
+        <template #header>
+          <div class="flex flex-wrap gap-2 items-center justify-between">
+            <h4 class="m-0" style="display: inline-flex">Manage Dictionaries</h4>
+            <Button
+              label="Add"
+              icon="pi pi-plus"
+              size="small"
+              class="mr-2"
+              style="margin-left: auto"
+              @click="addDictionary()"
+            />
+          </div>
+        </template>
+        <template #empty> No dictionaries found. </template>
+        <template #loading> Loading dictionaries data. Please wait. </template>
+        <Column field="name" header="Name" sortable></Column>
+        <Column field="write_only" header="Write Only" sortable>
+          <template #body="slotProps">
+            <span>{{ slotProps.data.write_only ? 'Yes' : 'No' }}</span>
+          </template>
+        </Column>
+        <Column field="created_at" header="Created at (UTC)" sortable>
+          <template #body="slotProps">
+            <span>{{ $d(slotProps.data.created_at, 'long') }}</span>
+          </template>
+        </Column>
+        <Column field="updated_at" header="Updated at (UTC)" sortable>
+          <template #body="slotProps">
+            <span>{{ $d(slotProps.data.updated_at, 'long') }}</span>
+          </template>
+        </Column>
+        <Column :exportable="false" style="min-width: 8rem" header="Actions">
+          <template #body="slotProps">
+            <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editDictionary(slotProps.data)" />
+            <Button
+              icon="pi pi-trash"
+              outlined
+              rounded
+              severity="danger"
+              @click="confirmDeleteDictionary(slotProps.data)"
+            />
+          </template>
+        </Column>
+      </DataTable>
+    </template>
+  </Card>
+
+  <DictionaryItemsCard
+    v-if="editDictionaryDialog && dictionary_selected"
+    :dictionary_data="dictionary_selected"
+    :dictionary_state_dialog="editDictionaryDialog"
+    @update:visible="closeDictionaryEditModal"
+  />
+
+  <Dialog v-model:visible="deleteDictionaryDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
+    <div v-if="!isDeleting" class="flex items-center gap-4">
+      <i class="pi pi-exclamation-triangle !text-3xl" />
+      <span v-if="dictionary_selected"
+        >Are you sure you want to delete <b>{{ dictionary_selected.name }}</b
+        >?</span
+      >
+    </div>
+    <div v-else class="flex flex-col items-center gap-4 p-4">
+      <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="4" />
+      <p class="text-center">
+        Deleting dictionary and activating new version...
+        <br />
+        <small class="text-gray-500">This may take a few seconds</small>
+      </p>
+    </div>
+    <template #footer v-if="!isDeleting">
+      <Button label="No" icon="pi pi-times" text @click="deleteDictionaryDialog = false" />
+      <Button label="Yes" icon="pi pi-check" @click="deleteDictionary" />
+    </template>
+  </Dialog>
+</template>
diff --git a/src/components/dictionaries/DictionaryItemsCard.vue b/src/components/dictionaries/DictionaryItemsCard.vue
new file mode 100644
index 0000000..36de049
--- /dev/null
+++ b/src/components/dictionaries/DictionaryItemsCard.vue
@@ -0,0 +1,410 @@
+<script setup lang="ts">
+import { computed, ref, toRaw, watchEffect, nextTick, type PropType } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import DataTable, { type DataTableRowEditSaveEvent } from 'primevue/datatable';
+import Column from 'primevue/column';
+import Dialog from 'primevue/dialog';
+import InputText from 'primevue/inputtext';
+import Checkbox from 'primevue/checkbox';
+import ProgressSpinner from 'primevue/progressspinner';
+
+import type { DictionaryEntity, DictionaryItemEntity } from './dictionary.interface';
+import DictionaryAPIService from './dictionary.service';
+import VclAPIService from '../vcl/vcl.service';
+import { useCredentialsStore } from '@/stores/credentialsStore';
+import LocalStore from '@/stores/localStorage';
+import { eventBus, EventType } from '@/utils/eventBus';
+
+// Init
+const emit = defineEmits(['update:visible']);
+const toast = useToast();
+const credentialsStore = useCredentialsStore();
+const props = defineProps({
+  dictionary_data: {
+    type: Object as PropType<DictionaryEntity>,
+    required: true,
+  },
+  dictionary_state_dialog: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+// Data
+const submitted = ref<boolean>(false);
+const headerTitle = ref<string>('Dictionary');
+const items = ref<DictionaryItemEntity[]>([]);
+const item_selected = ref<DictionaryItemEntity>();
+const deleteItemDialog = ref<boolean>(false);
+const editingRows = ref([]);
+const idCounter = ref<number>(-1);
+
+// Dynamic name validation
+const nameInputRef = ref<HTMLInputElement>();
+const nameError = ref<string>('');
+const isNameValid = ref<boolean>(true);
+const isSaving = ref<boolean>(false);
+
+// We need to retrieve the current VCL version from the credentialsStore
+const currentVclVersion = credentialsStore.getVclVersion();
+
+const localStore = new LocalStore();
+function refresh() {
+  console.log('FastSun > Load Dictionary: ' + props.dictionary_data!.id);
+
+  if (props.dictionary_data === undefined || Object.keys(props.dictionary_data).length === 0) {
+    headerTitle.value = 'Add Dictionary';
+  } else {
+    headerTitle.value = 'Edit Dictionary';
+    items.value = JSON.parse(JSON.stringify(props.dictionary_data.items));
+  }
+}
+watchEffect(refresh);
+
+// Events
+function closeModal(updated = false) {
+  emit('update:visible', updated);
+}
+
+function openItemDeleteModal() {
+  deleteItemDialog.value = true;
+}
+function closeItemDeleteModal() {
+  deleteItemDialog.value = false;
+  item_selected.value = {} as DictionaryItemEntity;
+}
+
+function isEdited(oldData: DictionaryItemEntity, newData: DictionaryItemEntity): boolean {
+  return oldData.item_key != newData.item_key || oldData.item_value != newData.item_value;
+}
+
+function onRowEditSave(event: DataTableRowEditSaveEvent) {
+  const { data, newData, index } = event;
+
+  if (isEdited(data, newData)) {
+    items.value[index] = newData;
+
+    if (data.op === undefined || data.op === '') {
+      newData.op = 'update';
+    }
+  }
+}
+
+async function saveDictionary() {
+  console.log('FastSun > Save Dictionary: ' + props.dictionary_data!.id);
+  submitted.value = true;
+
+  // Dynamic name validation
+  if (!validateName()) {
+    focusNameInput();
+    return;
+  }
+
+  // Check if this is a new dictionary (ID is empty or undefined)
+  const isNewDictionary = !props.dictionary_data!.id || props.dictionary_data!.id === '';
+
+  if (isNewDictionary) {
+    await createNewDictionary();
+  } else {
+    await updateDictionaryItems();
+  }
+}
+
+async function createNewDictionary() {
+  isSaving.value = true;
+  try {
+    console.log('FastSun > Creating new Dictionary with draft version...');
+
+    // Step 1: Create a new draft VCL version
+    const vclService = new VclAPIService(credentialsStore.getServiceId(), credentialsStore.getServiceToken());
+    const newVersion = await vclService.cloneVersion(currentVclVersion.toString());
+
+    console.log('FastSun > New draft version created:', newVersion.number);
+
+    // Step 2: Create the dictionary in the new version
+    const dictionaryService = new DictionaryAPIService(
+      credentialsStore.getServiceId(),
+      credentialsStore.getServiceToken(),
+    );
+    const cleanedName = props.dictionary_data!.name.trim(); // Ensure the name is clean
+    const newDictionary = await dictionaryService.createDictionary(
+      parseInt(newVersion.number),
+      cleanedName,
+      props.dictionary_data!.write_only,
+    );
+
+    console.log('FastSun > New Dictionary created:', newDictionary.id);
+
+    // Step 3: Update the items if there are any
+    const updated = items.value.filter((item: DictionaryItemEntity) => {
+      return item.op !== undefined && item.op !== '';
+    });
+
+    if (updated.length > 0) {
+      await dictionaryService.updateDictionaryItems(newDictionary.id, toRaw(updated));
+      console.log('FastSun > Dictionary items updated');
+    }
+
+    // Step 4: Validate the new VCL version
+    console.log('FastSun > Validating VCL version:', newVersion.number);
+    await vclService.validate(newVersion.number);
+
+    // Step 5: Activate the new VCL version
+    console.log('FastSun > Activating VCL version:', newVersion.number);
+    await vclService.activate(newVersion.number);
+
+    // Step 6: Close modal first, then update the VCL version in the store and notify other components
+    closeModal(true);
+
+    credentialsStore.setVclVersion(parseInt(newVersion.number));
+    eventBus.emit(EventType.VCL_VERSION_CHANGED, parseInt(newVersion.number));
+
+    toast.add({
+      severity: 'success',
+      summary: 'Dictionary Created & Activated!',
+      detail: `Dictionary "${props.dictionary_data!.name}" created and version ${newVersion.number} activated`,
+      life: 5000,
+    });
+  } catch (error) {
+    console.error('Error creating dictionary:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Error Creating Dictionary',
+      detail: error instanceof Error ? error.message : String(error),
+      life: 5000,
+    });
+  } finally {
+    isSaving.value = false;
+  }
+}
+
+function updateDictionaryItems() {
+  console.log('FastSun > Save Dictionary items: ' + props.dictionary_data!.id);
+
+  // Only items to update
+  const updated = items.value.filter((item: DictionaryItemEntity) => {
+    return item.op !== undefined && item.op !== '';
+  });
+
+  // Call API for items
+  if (updated.length > 0) {
+    const dictionaryApi = new DictionaryAPIService(
+      props.dictionary_data!.service_id,
+      credentialsStore.getServiceToken(),
+    );
+
+    dictionaryApi
+      .updateDictionaryItems(props.dictionary_data!.id, toRaw(updated))
+      .then(() => {
+        closeModal(true);
+        toast.add({
+          severity: 'success',
+          summary: 'Dictionary saved!',
+          detail: 'Dictionary items updated successfully',
+          life: 5000,
+        });
+      })
+      .catch((error) => {
+        console.error('Error updating dictionary items:', error);
+        toast.add({
+          severity: 'error',
+          summary: 'Error updating dictionary',
+          detail: error.message || error,
+          life: 5000,
+        });
+      });
+  } else {
+    // No items to update, just close
+    closeModal(true);
+    toast.add({
+      severity: 'success',
+      summary: 'Dictionary saved!',
+      detail: 'Dictionary configuration saved',
+      life: 5000,
+    });
+  }
+}
+
+function addItem() {
+  const newRow = {
+    id: idCounter.value--,
+    item_key: 'new_key',
+    item_value: 'new_value',
+    op: 'create',
+  } as never;
+  items.value.unshift(newRow);
+  editingRows.value = [...editingRows.value, newRow];
+}
+
+function confirmDeleteDictionaryItem(index: number) {
+  const itemEntity = displayItems.value[index];
+  if (itemEntity) {
+    console.log('FastSun > Delete Item (check): ' + itemEntity.id);
+
+    item_selected.value = itemEntity;
+    openItemDeleteModal();
+  }
+}
+
+function deleteItem() {
+  if (item_selected.value != null) {
+    console.log('FastSun > Delete Item (make): ' + item_selected.value.id);
+
+    item_selected.value.op = 'delete';
+    closeItemDeleteModal();
+  }
+}
+
+const displayItems = computed(() => {
+  return items.value.filter((item) => {
+    return item.op !== 'delete';
+  });
+});
+
+// Dynamic name validation
+function validateName() {
+  const name = props.dictionary_data!.name?.trim() || '';
+
+  if (!name) {
+    nameError.value = 'Name is required';
+    isNameValid.value = false;
+    return false;
+  }
+
+  const namePattern = /^[a-zA-Z][a-zA-Z0-9_\s]*$/;
+  if (!namePattern.test(name)) {
+    nameError.value = 'Name must start with a letter and contain only letters, numbers, underscores, and spaces';
+    isNameValid.value = false;
+    return false;
+  }
+
+  nameError.value = '';
+  isNameValid.value = true;
+  return true;
+}
+
+// Handler for real-time input
+function onNameInput() {
+  validateName();
+}
+
+// Focus on the name field with error
+function focusNameInput() {
+  nextTick(() => {
+    if (nameInputRef.value) {
+      nameInputRef.value.focus();
+    }
+  });
+}
+</script>
+
+<template>
+  <Dialog
+    v-bind:visible="dictionary_state_dialog"
+    @update:visible="closeModal"
+    :style="{ width: '900px' }"
+    v-bind:header="headerTitle"
+    :modal="true"
+  >
+    <div>
+      <label for="name" class="block font-bold mb-3">Name</label>
+      <InputText
+        ref="nameInputRef"
+        id="name"
+        v-model.trim="dictionary_data!.name"
+        required="true"
+        autofocus
+        :invalid="!isNameValid"
+        fluid
+        placeholder="e.g. my_dictionary_name or My Dictionary Name"
+        @input="onNameInput"
+        @blur="validateName"
+        :class="{ 'border-red-500 bg-red-50': !isNameValid }"
+      />
+      <small v-if="nameError" class="text-red-500 block mt-1">{{ nameError }}</small>
+      <small v-else class="text-gray-500 text-sm mt-1 block">
+        Must start with a letter and contain only letters, numbers, underscores, and spaces
+      </small>
+    </div>
+    <br />
+    <div class="flex items-center gap-2 mb-4">
+      <Checkbox v-model="dictionary_data!.write_only" :binary="true" inputId="write_only" />
+      <label for="write_only" class="cursor-pointer">Write-only (items are not readable)</label>
+    </div>
+    <div>
+      <DataTable
+        :value="displayItems"
+        dataKey="id"
+        scrollable
+        scrollHeight="400px"
+        editMode="row"
+        v-model:editingRows="editingRows"
+        @row-edit-save="onRowEditSave"
+      >
+        <template #empty> No items defined. </template>
+        <template #loading> Loading dictionary items. Please wait...</template>
+        <template #header>
+          <div class="flex flex-wrap gap-2 items-center justify-between">
+            <h4 class="m-0" style="display: inline-flex">Manage Items</h4>
+            <Button
+              label="Add"
+              icon="pi pi-plus"
+              size="small"
+              class="mr-2"
+              style="margin-left: auto"
+              @click="addItem()"
+            />
+          </div>
+        </template>
+        <Column field="item_key" header="Key" sortable>
+          <template #editor="{ data, field }">
+            <InputText v-model="data[field]" fluid />
+          </template>
+        </Column>
+        <Column field="item_value" header="Value" sortable>
+          <template #editor="{ data, field }">
+            <InputText v-model="data[field]" fluid />
+          </template>
+        </Column>
+        <Column :exportable="false" style="min-width: 8rem" header="Actions">
+          <template #body="{ editorInitCallback, index }">
+            <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editorInitCallback" />
+            <Button
+              icon="pi pi-trash"
+              outlined
+              rounded
+              severity="danger"
+              @click="confirmDeleteDictionaryItem(index)"
+            />
+          </template>
+          <template #editor="{ editorSaveCallback, editorCancelCallback }">
+            <Button icon="pi pi-save" text rounded @click="editorSaveCallback" />
+            <Button icon="pi pi-times" text rounded severity="danger" @click="editorCancelCallback" />
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+    <template #footer v-if="!isSaving">
+      <Button label="Cancel" icon="pi pi-times" text @click="closeModal(false)" />
+      <Button label="Save" icon="pi pi-check" @click="saveDictionary" />
+    </template>
+    <div v-if="isSaving" class="flex items-center justify-center gap-2 p-4">
+      <ProgressSpinner style="width: 30px; height: 30px" strokeWidth="4" />
+      <span>Creating dictionary and activating version...</span>
+    </div>
+  </Dialog>
+
+  <Dialog v-model:visible="deleteItemDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
+    <div class="flex items-center gap-4">
+      <i class="pi pi-exclamation-triangle !text-3xl" />
+      <span v-if="item_selected"
+        >Are you sure you want to delete <b>{{ item_selected.item_key }}</b
+        >?</span
+      >
+    </div>
+    <template #footer>
+      <Button label="No" icon="pi pi-times" text @click="deleteItemDialog = false" />
+      <Button label="Yes" icon="pi pi-check" @click="deleteItem" />
+    </template>
+  </Dialog>
+</template>
diff --git a/src/components/dictionaries/dictionary.interface.ts b/src/components/dictionaries/dictionary.interface.ts
new file mode 100644
index 0000000..39ccfdd
--- /dev/null
+++ b/src/components/dictionaries/dictionary.interface.ts
@@ -0,0 +1,14 @@
+import type Identifiable from '@/components/base/type';
+
+export interface DictionaryItemEntity extends Identifiable {
+  item_key: string;
+  item_value: string;
+  op: string;
+}
+
+export interface DictionaryEntity extends Identifiable {
+  name: string;
+  write_only: boolean;
+  items: DictionaryItemEntity[];
+  service_id: string;
+}
diff --git a/src/components/dictionaries/dictionary.service.ts b/src/components/dictionaries/dictionary.service.ts
new file mode 100644
index 0000000..6f8820e
--- /dev/null
+++ b/src/components/dictionaries/dictionary.service.ts
@@ -0,0 +1,191 @@
+import APIService from '../base/api';
+import type { DictionaryEntity, DictionaryItemEntity } from './dictionary.interface';
+
+export type APIResponse = [null, null] | [Error];
+
+export default class DictionaryAPIService extends APIService {
+  constructor(service_id: string, token: string) {
+    super(service_id, token);
+  }
+
+  /**
+   * Get all dictionaries for a specific version
+   * https://www.fastly.com/documentation/reference/api/dictionaries/dictionary/
+   * GET /service/{service_id}/version/{version_id}/dictionary
+   */
+  async getDictionaries(version: number): Promise<DictionaryEntity[]> {
+    try {
+      const response = await this.wsClient.get(`service/${this.service_id}/version/${version}/dictionary`);
+      return response.data;
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  /**
+   * Get all items in a dictionary
+   * https://www.fastly.com/documentation/reference/api/dictionaries/dictionary-item/
+   * GET /service/{service_id}/dictionary/{dictionary_id}/items
+   */
+  async getDictionaryItems(dictionary_id: string): Promise<DictionaryItemEntity[]> {
+    try {
+      const response = await this.wsClient.get(`service/${this.service_id}/dictionary/${dictionary_id}/items`);
+      return response.data;
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  /**
+   * Create a new dictionary
+   * https://www.fastly.com/documentation/reference/api/dictionaries/dictionary/
+   * POST /service/{service_id}/version/{version_id}/dictionary
+   */
+  async createDictionary(version: number, name: string, write_only: boolean = false): Promise<DictionaryEntity> {
+    try {
+      const dto = JSON.stringify({ name, write_only });
+      const response = await this.wsClient.post(`service/${this.service_id}/version/${version}/dictionary`, dto);
+      return response.data;
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  /**
+   * Update a dictionary
+   * https://www.fastly.com/documentation/reference/api/dictionaries/dictionary/
+   * PUT /service/{service_id}/version/{version_id}/dictionary/{dictionary_name}
+   */
+  async updateDictionary(
+    version: number,
+    dictionary_name: string,
+    new_name: string,
+    write_only?: boolean,
+  ): Promise<DictionaryEntity> {
+    try {
+      const dto: { name: string; write_only?: boolean } = { name: new_name };
+      if (write_only !== undefined) {
+        dto.write_only = write_only;
+      }
+      const response = await this.wsClient.put(
+        `service/${this.service_id}/version/${version}/dictionary/${encodeURIComponent(dictionary_name)}`,
+        JSON.stringify(dto),
+      );
+      return response.data;
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  /**
+   * Delete a dictionary
+   * https://www.fastly.com/documentation/reference/api/dictionaries/dictionary/
+   * DELETE /service/{service_id}/version/{version_id}/dictionary/{dictionary_name}
+   */
+  async deleteDictionary(version: number, dictionary_name: string): Promise<void> {
+    try {
+      await this.wsClient.delete(
+        `service/${this.service_id}/version/${version}/dictionary/${encodeURIComponent(dictionary_name)}`,
+      );
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  /**
+   * Create a dictionary item
+   * https://www.fastly.com/documentation/reference/api/dictionaries/dictionary-item/
+   * POST /service/{service_id}/dictionary/{dictionary_id}/item
+   */
+  async createDictionaryItem(dictionary_id: string, item_key: string, item_value: string): Promise<DictionaryItemEntity> {
+    try {
+      const dto = JSON.stringify({ item_key, item_value });
+      const response = await this.wsClient.post(`service/${this.service_id}/dictionary/${dictionary_id}/item`, dto);
+      return response.data;
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  /**
+   * Update a dictionary item
+   * https://www.fastly.com/documentation/reference/api/dictionaries/dictionary-item/
+   * PUT /service/{service_id}/dictionary/{dictionary_id}/item/{item_key}
+   */
+  async updateDictionaryItem(
+    dictionary_id: string,
+    item_key: string,
+    item_value: string,
+  ): Promise<DictionaryItemEntity> {
+    try {
+      const dto = JSON.stringify({ item_value });
+      const response = await this.wsClient.put(
+        `service/${this.service_id}/dictionary/${dictionary_id}/item/${encodeURIComponent(item_key)}`,
+        dto,
+      );
+      return response.data;
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  /**
+   * Delete a dictionary item
+   * https://www.fastly.com/documentation/reference/api/dictionaries/dictionary-item/
+   * DELETE /service/{service_id}/dictionary/{dictionary_id}/item/{item_key}
+   */
+  async deleteDictionaryItem(dictionary_id: string, item_key: string): Promise<void> {
+    try {
+      await this.wsClient.delete(
+        `service/${this.service_id}/dictionary/${dictionary_id}/item/${encodeURIComponent(item_key)}`,
+      );
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  /**
+   * Upsert a dictionary item (create or update)
+   * https://www.fastly.com/documentation/reference/api/dictionaries/dictionary-item/
+   * POST /service/{service_id}/dictionary/{dictionary_id}/item (upsert endpoint)
+   */
+  async upsertDictionaryItem(dictionary_id: string, item_key: string, item_value: string): Promise<DictionaryItemEntity> {
+    try {
+      const dto = JSON.stringify({ item_key, item_value });
+      const response = await this.wsClient.post(`service/${this.service_id}/dictionary/${dictionary_id}/item`, dto);
+      return response.data;
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  /**
+   * Batch update dictionary items (create, update, delete)
+   * This method processes an array of items with operation flags
+   */
+  async updateDictionaryItems(dictionary_id: string, items: DictionaryItemEntity[]): Promise<void> {
+    try {
+      for (const item of items) {
+        if (item.op === 'create') {
+          await this.createDictionaryItem(dictionary_id, item.item_key, item.item_value);
+        } else if (item.op === 'update') {
+          await this.updateDictionaryItem(dictionary_id, item.item_key, item.item_value);
+        } else if (item.op === 'delete') {
+          await this.deleteDictionaryItem(dictionary_id, item.item_key);
+        }
+      }
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+}
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 3b3c7ab..192b095 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -12,6 +12,7 @@ import ProgressSpinner from 'primevue/progressspinner';
 
 import SetupCard from '@/components/SetupCard.vue';
 import AclsCard from '@/components/acls/AclCard.vue';
+import DictionaryCard from '@/components/dictionaries/DictionaryCard.vue';
 import DomaCard from '@/components/domains/DomainCard.vue';
 import HistCard from '@/components/project/HistoryCard.vue';
 import InfoCard from '@/components/project/InfoCard.vue';
@@ -241,6 +242,7 @@ const vclVersionIsDefined = computed(() => credentialsStore.vclVersionIsDefined.
             <VersCard />
             <HistCard />
             <AclsCard :vcl_version="credentialsStore.getVclVersion()" />
+            <DictionaryCard :vcl_version="credentialsStore.getVclVersion()" />
           </TabPanel>
           <TabPanel :value="TAB_VALUES.HISTORY">
             <QueryCard />