diff --git a/.github/workflows/cli_test.yaml b/.github/workflows/cli_test.yaml
index 9b24032..dde9ac4 100644
--- a/.github/workflows/cli_test.yaml
+++ b/.github/workflows/cli_test.yaml
@@ -1,42 +1,42 @@
-name: Test CLI Generated Project
+# name: Test CLI Generated Project
 
-on: [push]
+# on: [push]
 
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    services:
-      postgres:
-        image: postgres:17.4-bookworm
-        env:
-          POSTGRES_PASSWORD: postgres
-          POSTGRES_USER: postgres
-          POSTGRES_DB: postgres
-        ports:
-          - 5432
-        options: >-
-          --health-cmd "pg_isready"
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-    steps:
-      - uses: actions/checkout@v4
-      - name: Install uv
-        uses: astral-sh/setup-uv@v5
-      - name: "Set up Python"
-        uses: actions/setup-python@v5
-        with:
-          python-version-file: "pyproject.toml"
-      - name: Install the project
-        run: uv sync --all-extras --dev
-      - name: Generate example project
-        run: uv run -m fastapi_forge start --use-example --no-ui --yes
-      - name: Run tests
-        working-directory: ./game_zone
-        env:
-          GAME_ZONE_PG_HOST: localhost
-          GAME_ZONE_PG_PORT: ${{ job.services.postgres.ports['5432'] }}
-          GAME_ZONE_PG_USER: postgres
-          GAME_ZONE_PG_PASSWORD: postgres
-          GAME_ZONE_PG_DATABASE: postgres
-        run: uv run pytest ./tests -v -s
+# jobs:
+#   test:
+#     runs-on: ubuntu-latest
+#     services:
+#       postgres:
+#         image: postgres:17.4-bookworm
+#         env:
+#           POSTGRES_PASSWORD: postgres
+#           POSTGRES_USER: postgres
+#           POSTGRES_DB: postgres
+#         ports:
+#           - 5432
+#         options: >-
+#           --health-cmd "pg_isready"
+#           --health-interval 10s
+#           --health-timeout 5s
+#           --health-retries 5
+#     steps:
+#       - uses: actions/checkout@v4
+#       - name: Install uv
+#         uses: astral-sh/setup-uv@v5
+#       - name: "Set up Python"
+#         uses: actions/setup-python@v5
+#         with:
+#           python-version-file: "pyproject.toml"
+#       - name: Install the project
+#         run: uv sync --all-extras --dev
+#       - name: Generate example project
+#         run: uv run -m fastapi_forge start --use-example --no-ui --yes
+#       - name: Run tests
+#         working-directory: ./game_zone
+#         env:
+#           GAME_ZONE_PG_HOST: localhost
+#           GAME_ZONE_PG_PORT: ${{ job.services.postgres.ports['5432'] }}
+#           GAME_ZONE_PG_USER: postgres
+#           GAME_ZONE_PG_PASSWORD: postgres
+#           GAME_ZONE_PG_DATABASE: postgres
+#         run: uv run pytest ./tests -v -s
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 4a1c305..89dbaa4 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -6,7 +6,7 @@ body {
 :root {
   --color-primary: #5294fd;
   --color-secondary: #dcebfe;
-  --color-success: #b8fd9f;
+  --color-success: #7fbc8c;
   --color-danger: #ff6b6b;
   --color-background: #f4f4f0;
 }
diff --git a/frontend/src/components/StepWizard.vue b/frontend/src/components/StepWizard.vue
index ed8ff5c..61b73eb 100644
--- a/frontend/src/components/StepWizard.vue
+++ b/frontend/src/components/StepWizard.vue
@@ -91,7 +91,7 @@ const goToStep = (index) => {
 }
 
 .step.completed {
-  background-color: #7fbc8c;
+  background-color: var(--color-success);
 }
 
 .step-content {
diff --git a/frontend/src/components/modal/AddEnumValueModal.vue b/frontend/src/components/modal/AddEnumValueModal.vue
new file mode 100644
index 0000000..b113fa0
--- /dev/null
+++ b/frontend/src/components/modal/AddEnumValueModal.vue
@@ -0,0 +1,101 @@
+<template>
+  <main class="field-modal-container">
+    <div class="input-container">
+      <div class="input-group">
+        <label class="field-label">Name</label>
+        <input class="field-input" v-model="name" type="text" />
+      </div>
+
+      <div class="input-group">
+        <label class="field-label">Value</label>
+        <input class="field-input" v-model="value" type="text" />
+      </div>
+    </div>
+
+    <div class="action-group">
+      <button class="save-field-btn" @click="saveEnumValue">Save</button>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { useProjectStore } from "@/stores/useProjectStore"
+import { useModalStore } from "@/stores/useModalStore"
+
+const props = defineProps<{
+  enumName: string
+}>()
+
+const projectStore = useProjectStore()
+const modalStore = useModalStore()
+
+const name = ref("")
+const value = ref("auto()")
+
+const saveEnumValue = () => {
+  projectStore.addEnumValue(props.enumName, {
+    name: name.value,
+    value: value.value,
+  })
+  modalStore.close()
+}
+</script>
+
+<style scoped>
+.field-modal-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.field-label {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.field-input {
+  border: 2px solid black;
+  border-radius: 6px;
+  padding: 0.6rem;
+  background-color: white;
+}
+
+.action-group {
+  gap: 0.5rem;
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.save-field-btn {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border: 2px solid black;
+  border-radius: 4px;
+  background-color: var(--color-success);
+  box-shadow: 3px 3px 0px black;
+  transition:
+    transform 0.1s ease-in-out,
+    box-shadow 0.1s ease-in-out;
+}
+
+.save-field-btn:hover {
+  cursor: pointer;
+  transform: translate(2px, 2px);
+  box-shadow: none;
+}
+</style>
diff --git a/frontend/src/components/modal/AddFieldModal.vue b/frontend/src/components/modal/AddFieldModal.vue
index e7695d7..8aea2ad 100644
--- a/frontend/src/components/modal/AddFieldModal.vue
+++ b/frontend/src/components/modal/AddFieldModal.vue
@@ -16,12 +16,29 @@
           <option value="DateTime">DateTime</option>
           <option value="Boolean">Boolean</option>
           <option value="Float">Float</option>
+          <option value="Enum">Enum</option>
+        </select>
+      </div>
+
+      <div class="input-group" v-if="type === 'Enum'">
+        <label class="field-label">Select Enum</label>
+        <select class="field-select" v-model="selectedEnum">
+          <option disabled value="">-- Select Enum --</option>
+          <option v-for="e in projectStore.enums" :key="e.name" :value="e">
+            {{ e.name }}
+          </option>
         </select>
       </div>
 
       <div class="input-group">
         <label class="field-label">Default value</label>
-        <input class="field-input" v-model="defaultValue" type="text" />
+        <select class="field-select" v-model="defaultValue" v-if="type === 'Enum'">
+          <option value="" />
+          <option v-for="v in selectedEnum?.values" :key="v.name" :value="v.name">
+            {{ v.name }}
+          </option>
+        </select>
+        <input class="field-input" v-model="defaultValue" type="text" v-else />
       </div>
     </div>
 
@@ -42,6 +59,7 @@
 import { ref } from "vue"
 import { useProjectStore } from "@/stores/useProjectStore"
 import { useModalStore } from "@/stores/useModalStore"
+import type { EnumT, FieldType } from "@/types/types"
 
 const props = defineProps<{
   id: string
@@ -50,6 +68,8 @@ const props = defineProps<{
 const projectStore = useProjectStore()
 const modalStore = useModalStore()
 
+const selectedEnum = ref<EnumT | undefined>()
+
 const fieldName = ref("")
 const type = ref("")
 const defaultValue = ref("")
@@ -62,12 +82,13 @@ const saveField = () => {
   if (!fieldName.value || !type.value) return
   projectStore.addField(props.id, {
     name: fieldName.value,
-    type: type.value,
-    default: defaultValue.value || undefined,
+    type: type.value as FieldType,
+    typeEnum: selectedEnum.value?.name,
     isPrimaryKey: isPrimaryKey.value,
     isNullable: isNullable.value,
     isUnique: isUnique.value,
     isIndex: isIndex.value,
+    defaultValue: defaultValue.value || undefined,
   })
   modalStore.close()
 }
diff --git a/frontend/src/components/modal/EditEnumValueModal.vue b/frontend/src/components/modal/EditEnumValueModal.vue
new file mode 100644
index 0000000..95ceafa
--- /dev/null
+++ b/frontend/src/components/modal/EditEnumValueModal.vue
@@ -0,0 +1,103 @@
+<template>
+  <main class="field-modal-container">
+    <div class="input-container">
+      <div class="input-group">
+        <label class="field-label">Name</label>
+        <input class="field-input" v-model="name" type="text" />
+      </div>
+
+      <div class="input-group">
+        <label class="field-label">Value</label>
+        <input class="field-input" v-model="value" type="text" />
+      </div>
+    </div>
+
+    <div class="action-group">
+      <button class="save-field-btn" @click="saveEnumValue">Save</button>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { useProjectStore } from "@/stores/useProjectStore"
+import { useModalStore } from "@/stores/useModalStore"
+import type { EnumValue } from "@/types/types"
+
+const props = defineProps<{
+  enumName: string
+  enumValue: EnumValue
+}>()
+
+const projectStore = useProjectStore()
+const modalStore = useModalStore()
+
+const name = ref(props.enumValue.name)
+const value = ref(props.enumValue.value)
+
+const saveEnumValue = () => {
+  projectStore.updateEnumValue(props.enumName, props.enumValue.name, {
+    name: name.value,
+    value: value.value,
+  })
+  modalStore.close()
+}
+</script>
+
+<style scoped>
+.field-modal-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.field-label {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.field-input {
+  border: 2px solid black;
+  border-radius: 6px;
+  padding: 0.6rem;
+  background-color: white;
+}
+
+.action-group {
+  gap: 0.5rem;
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.save-field-btn {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border: 2px solid black;
+  border-radius: 4px;
+  background-color: var(--color-success);
+  box-shadow: 3px 3px 0px black;
+  transition:
+    transform 0.1s ease-in-out,
+    box-shadow 0.1s ease-in-out;
+}
+
+.save-field-btn:hover {
+  cursor: pointer;
+  transform: translate(2px, 2px);
+  box-shadow: none;
+}
+</style>
diff --git a/frontend/src/components/modal/EditFieldModal.vue b/frontend/src/components/modal/EditFieldModal.vue
index 032b147..4001328 100644
--- a/frontend/src/components/modal/EditFieldModal.vue
+++ b/frontend/src/components/modal/EditFieldModal.vue
@@ -16,12 +16,29 @@
           <option value="DateTime">DateTime</option>
           <option value="Boolean">Boolean</option>
           <option value="Float">Float</option>
+          <option value="Enum">Enum</option>
+        </select>
+      </div>
+
+      <div class="input-group" v-if="type === 'Enum'">
+        <label class="field-label">Select Enum</label>
+        <select class="field-select" v-model="selectedEnum">
+          <option disabled value="">-- Select Enum --</option>
+          <option v-for="e in projectStore.enums" :key="e.name" :value="e">
+            {{ e.name }}
+          </option>
         </select>
       </div>
 
       <div class="input-group">
         <label class="field-label">Default value</label>
-        <input class="field-input" v-model="defaultValue" type="text" />
+        <select class="field-select" v-model="defaultValue" v-if="type === 'Enum'">
+          <option value="" />
+          <option v-for="v in selectedEnum?.values" :key="v.name" :value="v.name">
+            {{ v.name }}
+          </option>
+        </select>
+        <input class="field-input" v-model="defaultValue" type="text" v-else />
       </div>
     </div>
 
@@ -40,32 +57,41 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref, onMounted } from "vue"
 import { useProjectStore } from "@/stores/useProjectStore"
 import { useModalStore } from "@/stores/useModalStore"
-import type { Field } from "@/types/types"
+import type { EnumT, RelationalField } from "@/types/types"
 
 const props = defineProps<{
   id: string
-  field: Field
+  field: RelationalField
 }>()
 
 const projectStore = useProjectStore()
 const modalStore = useModalStore()
 
+const selectedEnum = ref<EnumT | undefined>()
+onMounted(() => {
+  if (props.field.type !== "Enum" || !props.field.typeEnum) return
+  selectedEnum.value = projectStore.findEnumByName(props.field.typeEnum)
+})
+
 const fieldName = ref(props.field.name)
 const type = ref(props.field.type)
-const defaultValue = ref(props.field.default || "")
+const defaultValue = ref(props.field.defaultValue || "")
 const isPrimaryKey = ref(props.field.isPrimaryKey || false)
 const isNullable = ref(props.field.isNullable || false)
 const isUnique = ref(props.field.isUnique || false)
 const isIndex = ref(props.field.isIndex || false)
 
+console.log(defaultValue.value)
+
 const saveField = () => {
   projectStore.updateField(props.id, props.field.name, {
     name: fieldName.value,
     type: type.value,
-    default: defaultValue.value || undefined,
+    typeEnum: selectedEnum.value?.name,
+    defaultValue: defaultValue.value || undefined,
     isPrimaryKey: isPrimaryKey.value,
     isNullable: isNullable.value,
     isUnique: isUnique.value,
diff --git a/frontend/src/components/schema_editor/CustomNode.vue b/frontend/src/components/schema_editor/CustomNode.vue
index 14076bc..c04a937 100644
--- a/frontend/src/components/schema_editor/CustomNode.vue
+++ b/frontend/src/components/schema_editor/CustomNode.vue
@@ -41,7 +41,8 @@
         @click="$emit('open-edit-field-modal', props.id, field)"
       >
         <div class="custom-node-field-name">{{ field.name }}</div>
-        <div class="custom-node-field-type">{{ field.type }}</div>
+        <div class="custom-node-field-type" v-if="field.type !== 'Enum'">{{ field.type }}</div>
+        <div class="custom-node-field-type" v-else>{{ field.type }}({{ field.typeEnum }})</div>
       </div>
       <div
         v-for="relation in data.relations"
@@ -58,7 +59,6 @@
 
 <script setup lang="ts">
 import { ref } from "vue"
-import type { Position2D } from "@/types/types"
 const props = defineProps<{
   id: string
   data: object
diff --git a/frontend/src/components/schema_editor/EnumEditor.vue b/frontend/src/components/schema_editor/EnumEditor.vue
index 78bec82..118740a 100644
--- a/frontend/src/components/schema_editor/EnumEditor.vue
+++ b/frontend/src/components/schema_editor/EnumEditor.vue
@@ -2,58 +2,118 @@
   <div class="layout-container">
     <div class="enum-sidebar">
       <div class="sidebar-header">
-        <div class="create-enum-wrapper">
-          <input
-            class="create-enum-input"
-            type="text"
-            placeholder="New Enum Name"
-            v-model="newEnumName"
-            @keyup.enter="createEnum"
-          />
-          <button class="create-enum-btn" @click="createEnum">+</button>
+        <div class="input-group">
+          <div class="input-horizontal">
+            <input
+              id="new-enum-name"
+              class="project-name"
+              type="text"
+              placeholder="Enter new enum name"
+              v-model="newEnumName"
+              @keyup.enter="createEnum"
+              maxlength="50"
+            />
+            <button class="confirm-btn" @click="createEnum" :disabled="!newEnumName">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="lucide lucide-check"
+              >
+                <path d="M20 6 9 17l-5-5" />
+              </svg>
+            </button>
+          </div>
         </div>
       </div>
       <div class="enum-list">
         <div
-          v-for="enumItem in enums"
+          v-for="enumItem in projectStore.enums"
           :key="enumItem.name"
           class="enum-item"
-          :class="{ active: selectedEnumName === enumItem.name }"
+          :class="{ active: selectedEnum?.name === enumItem.name }"
           @click="selectEnum(enumItem)"
         >
-          {{ enumItem.name }}
-          <button class="delete-enum-btn" @click.stop="deleteEnum(enumItem.name)">×</button>
+          <div class="enum-name-wrapper">
+            <span v-if="!isEditingEnumItem(enumItem)">{{ enumItem.name }}</span>
+            <input
+              v-else
+              type="text"
+              class="enum-name-edit-input"
+              v-model="editedEnumName"
+              @click.stop
+              @keyup.enter="handleEditToggle(enumItem)"
+              ref="enumNameInput"
+            />
+          </div>
+          <div class="enum-item-actions">
+            <button class="edit-enum-toggle-btn" @click.stop="handleEditToggle(enumItem)">
+              <span v-if="isEditingEnumItem(enumItem)">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="lucide lucide-save"
+                >
+                  <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+                  <path d="M17 21v-8H7v8" />
+                  <path d="M7 3v4h6" />
+                </svg>
+              </span>
+              <svg
+                v-else
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="lucide lucide-pencil"
+              >
+                <path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+                <path d="m15 5 4 4" />
+              </svg>
+            </button>
+            <button class="delete-enum-btn" @click.stop="deleteEnum(enumItem)">×</button>
+          </div>
         </div>
       </div>
     </div>
-
-    <div class="main-content">
-      <div v-if="selectedEnum" class="table-wrapper">
-        <button
-          class="delete-selected-btn"
-          @click="deleteSelectedRows"
-          :disabled="!hasSelectedRows"
-        >
-          Delete Selected
-        </button>
-        <table class="enum-table">
-          <thead>
-            <tr>
-              <th>
-                <input type="checkbox" v-model="selectAll" @change="toggleSelectAll" />
-              </th>
-              <th>Name</th>
-              <th>Value</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(val, index) in selectedEnum.values" :key="index">
-              <td><input type="checkbox" v-model="selectedRows" :value="index" /></td>
-              <td>{{ val.name }}</td>
-              <td>{{ val.value }}</td>
-              <td>
-                <button class="action-btn">
+    <div class="main-content" v-if="selectedEnum">
+      <table class="main-table">
+        <thead>
+          <tr>
+            <th class="name-column">Name</th>
+            <th class="value-column">Value</th>
+            <th class="action-column">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(ev, index) in selectedEnum.values" :key="index">
+            <td class="name-column">{{ ev.name }}</td>
+            <td class="value-column">{{ ev.value }}</td>
+            <td class="action-column">
+              <div class="action-content">
+                <div
+                  class="enum-actions"
+                  @mouseover="openActions(index)"
+                  @mouseleave="closeActions(index)"
+                >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="24"
@@ -70,101 +130,123 @@
                     <circle cx="19" cy="12" r="1"></circle>
                     <circle cx="5" cy="12" r="1"></circle>
                   </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                  <div class="dropdown-list" v-if="activeActionIndex === index">
+                    <div class="dropdown-item" @click="openEditEnumValueModal(ev)">Edit</div>
+                    <div class="dropdown-item" @click="handleDeleteEnumValue(ev)">Delete</div>
+                  </div>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="main-footer">
+        <button class="add-btn" @click="openAddEnumValueModal">Add Enum Value</button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from "vue"
-import type { Enum, EnumsArray } from "@/types/types.ts"
+import { ref, nextTick } from "vue"
+import { useProjectStore } from "@/stores/useProjectStore"
+import { useModalStore } from "@/stores/useModalStore"
+import AddEnumValueModal from "@/components/modal/AddEnumValueModal.vue"
+import EditEnumValueModal from "@/components/modal/EditEnumValueModal.vue"
+import type { EnumT, EnumValue } from "@/types/types"
 
-const enums = ref<EnumsArray>([
-  {
-    name: "UserRole",
-    values: [
-      { name: "ADMIN", value: "admin" },
-      { name: "USER", value: "auto()" },
-    ],
-  },
-])
+const projectStore = useProjectStore()
+const modalStore = useModalStore()
 
 const newEnumName = ref("")
-const selectedEnumName = ref<string | null>(null)
+const selectedEnum = ref<EnumT | null>(null)
+const editingEnumName = ref<string | null>(null)
+const editedEnumName = ref("")
+const activeActionIndex = ref<number | null>(null)
+const enumNameInput = ref<HTMLInputElement | null>(null)
+
+const openAddEnumValueModal = () => {
+  const e = selectedEnum.value
+  if (!e) return
+  modalStore.open("Add Enum Value", AddEnumValueModal, { enumName: e.name })
+}
 
-const emit = defineEmits(["enum-selected"])
+const openEditEnumValueModal = (enumValue: EnumValue) => {
+  const e = selectedEnum.value
+  if (!e) return
+  modalStore.open("Edit Enum Value", EditEnumValueModal, { enumName: e.name, enumValue: enumValue })
+}
 
-const selectEnum = (enumItem: Enum) => {
-  selectedEnumName.value = enumItem.name
-  selectedRows.value = []
-  selectAll.value = false
-  emit("enum-selected", enumItem)
+const handleDeleteEnumValue = (enumValue: EnumValue) => {
+  console.log("Delete enum value:", enumValue)
+}
+
+const selectEnum = (e: EnumT) => {
+  selectedEnum.value = e
 }
 
 const createEnum = () => {
-  if (newEnumName.value.trim() === "") return
-  const newEnum: Enum = {
-    name: newEnumName.value.trim(),
-    values: [],
-  }
-  enums.value.push(newEnum)
+  const name = newEnumName.value.trim()
+  if (name === "") return
+  const newEnum = projectStore.addEnum(name)
   newEnumName.value = ""
   selectEnum(newEnum)
 }
 
-const deleteEnum = (name: string) => {
-  enums.value = enums.value.filter((e: Enum) => e.name !== name)
-  if (selectedEnumName.value === name) {
-    selectedEnumName.value = null
-    selectedRows.value = []
-    selectAll.value = false
+const deleteEnum = (e: EnumT) => {
+  projectStore.deleteEnum(e.name)
+  if (selectedEnum.value?.name === e.name) {
+    selectedEnum.value = null
   }
 }
 
-const selectedEnum = computed(
-  () => enums.value.find((e) => e.name === selectedEnumName.value) || null,
-)
-
-const selectedRows = ref<number[]>([])
-const selectAll = ref(false)
-
-const hasSelectedRows = computed(() => selectedRows.value.length > 0)
+const isEditingEnumItem = (enumItem: EnumT) => {
+  return editingEnumName.value === enumItem.name
+}
 
-const toggleSelectAll = () => {
-  if (!selectedEnum.value) return
-  if (selectAll.value) {
-    selectedRows.value = selectedEnum.value.values.map((_, i) => i)
+const handleEditToggle = (enumItem: EnumT) => {
+  if (isEditingEnumItem(enumItem)) {
+    saveEnumName(enumItem)
   } else {
-    selectedRows.value = []
+    editingEnumName.value = enumItem.name
+    editedEnumName.value = enumItem.name
+    nextTick(() => {
+      if (enumNameInput.value) {
+        enumNameInput.value.focus()
+      }
+    })
   }
 }
 
-watch(selectedRows, () => {
-  if (!selectedEnum.value) return
-  selectAll.value = selectedRows.value.length === selectedEnum.value.values.length
-})
+const saveEnumName = (enumItem: EnumT) => {
+  const newName = editedEnumName.value.trim()
+  if (newName && newName !== enumItem.name) {
+    projectStore.updateEnumName(enumItem.name, newName)
+    if (selectedEnum.value?.name === enumItem.name) {
+      selectedEnum.value.name = newName
+    }
+  }
+  editingEnumName.value = null
+  editedEnumName.value = ""
+}
 
-const deleteSelectedRows = () => {
-  if (!selectedEnum.value) return
-  const filtered = selectedEnum.value.values.filter((_, i) => !selectedRows.value.includes(i))
-  selectedEnum.value.values = filtered
-  selectedRows.value = []
-  selectAll.value = false
+const openActions = (index: number) => {
+  activeActionIndex.value = index
+}
+
+const closeActions = (index: number) => {
+  if (activeActionIndex.value === index) {
+    activeActionIndex.value = null
+  }
 }
 </script>
 
 <style scoped>
 .layout-container {
   display: flex;
-  height: 100vh;
-  font-family: sans-serif;
+  height: 100%;
+  min-height: 0;
 }
-
 .enum-sidebar {
   width: 250px;
   border-right: 2px solid black;
@@ -172,43 +254,13 @@ const deleteSelectedRows = () => {
   flex-direction: column;
   background-color: white;
 }
-
 .sidebar-header {
-  padding: 10px;
-  border-bottom: 2px solid black;
-}
-
-.create-enum-wrapper {
-  display: flex;
-  gap: 5px;
-}
-
-.create-enum-input {
-  flex: 1;
-  border: 2px solid black;
-  border-radius: 6px;
-  padding: 4px 10px;
-}
-
-.create-enum-btn {
-  width: 32px;
-  border: 2px solid black;
-  border-radius: 6px;
-  background-color: white;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.create-enum-btn:hover {
-  background-color: var(--color-success);
 }
-
 .enum-list {
   flex: 1;
   padding: 5px;
   overflow-y: auto;
 }
-
 .enum-item {
   padding: 10px 15px;
   cursor: pointer;
@@ -218,97 +270,243 @@ const deleteSelectedRows = () => {
   border-radius: 8px;
   border: 2px solid transparent;
 }
-
 .enum-item.active,
 .enum-item:hover {
   background-color: var(--color-primary);
   font-weight: bold;
   border-color: black;
 }
-
+.enum-name-wrapper {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-right: 8px;
+}
+.enum-name-edit-input {
+  width: 100%;
+  background: none;
+  border: 2px solid black;
+  border-radius: 4px;
+  padding: 2px 5px;
+  box-sizing: border-box;
+  background-color: white;
+}
+.enum-item-actions {
+  display: flex;
+  gap: 0;
+  align-items: center;
+}
+.edit-enum-toggle-btn {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+.edit-enum-toggle-btn:hover {
+  color: var(--color-success);
+}
 .delete-enum-btn {
   background: none;
   border: none;
   font-size: 18px;
   cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-
 .delete-enum-btn:hover {
   color: red;
 }
-
+.main-header {
+  height: 50px;
+  border-bottom: 2px solid black;
+  position: sticky;
+  top: 0;
+  background-color: inherit;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 15px;
+}
+.enum-title {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
 .main-content {
   flex: 1;
-  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
 }
-
-.table-wrapper {
-  margin-top: 20px;
+.main-table {
+  width: 100%;
+  border-collapse: collapse;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
 }
-
-.delete-selected-btn {
-  margin-bottom: 10px;
-  padding: 8px 12px;
-  border: 2px solid black;
-  border-radius: 8px;
-  background-color: white;
-  font-weight: bold;
-  cursor: pointer;
+.main-table thead {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
 }
-
-.delete-selected-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.main-table tbody {
+  display: block;
+  overflow-y: auto;
+  flex: 1;
+  width: 100%;
 }
-
-.enum-table {
-  border: 2px solid black;
-  border-collapse: collapse;
-  overflow: hidden;
-  width: 500px;
+.main-table tr {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
 }
-
-.enum-table th,
-.enum-table td {
-  height: 25px;
-  padding: 10px;
+.main-table th,
+.main-table td {
+  padding: 16px;
   text-align: left;
   border-bottom: 2px solid black;
 }
-
-.enum-table th:first-child,
-.enum-table td:first-child {
-  padding-right: 5px;
-  width: 30px;
+.name-column {
 }
-
-.enum-table th:nth-child(2),
-.enum-table td:nth-child(2) {
-  padding-left: 5px;
+.value-column {
 }
-
-.enum-table th:nth-child(3),
-.enum-table td:nth-child(3) {
-  text-align: right;
+.action-column {
+  width: 20%;
+  text-align: right !important;
 }
-
-.enum-table th:nth-child(4),
-.enum-table td:nth-child(4) {
-  width: 0px;
+.action-content {
+  margin-right: 15px;
 }
-
-.action-btn {
+.enum-actions {
   cursor: pointer;
-  width: 30px;
-  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+}
+.dropdown-list {
+  position: absolute;
+  border: 2px solid black;
+  border-radius: 5px;
+  background: white;
+  z-index: 100;
+  padding: 4px;
+  left: 0;
+  min-width: 100px;
+}
+.dropdown-item {
+  height: 35px;
+  width: 100%;
   display: flex;
   align-items: center;
-  justify-content: center;
-  border-left: 2px solid black;
-  background-color: var(--color-primary);
+  padding: 0 5px;
+  box-sizing: border-box;
+  border: 2px solid transparent;
   border-radius: 5px;
 }
-
-.action-btn:hover {
+.dropdown-item:hover {
+  border: 2px solid black;
+  cursor: pointer;
+}
+.main-footer {
+  height: 50px;
+  border-top: 2px solid black;
+  position: sticky;
+  bottom: 0;
+  padding: 0 15px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  padding: 10px;
+}
+.project-name-label {
+  font-weight: bold;
+  margin-bottom: 0.25rem;
+}
+.input-horizontal {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.confirm-btn {
+  caret-color: transparent;
+  border: 2px solid black;
+  border-radius: 4px;
+  background-color: var(--color-background);
+  padding: 0.25rem;
+  box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
+  transition:
+    transform 0.1s ease-in-out,
+    box-shadow 0.1s ease-in-out;
+  height: 2.125rem;
+  font-weight: bold;
+}
+.confirm-btn:hover {
+  transform: translate(2px, 2px);
+  box-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
+  cursor: pointer;
+  transition: 0.1s;
+  background-color: var(--color-success);
+}
+.confirm-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--color-background);
+}
+.project-name {
+  width: 100%;
+  padding: 0.5rem;
+  border: 2px solid black;
+  border-radius: 4px;
+  box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
+  transition:
+    transform 0.1s ease-in-out,
+    box-shadow 0.1s ease-in-out;
+}
+.project-name:focus {
+  outline: none;
+  transform: translate(2px, 2px);
+  box-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
+}
+.label-group {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.add-btn {
+  caret-color: transparent;
+  border: 2px solid black;
+  border-radius: 4px;
+  background-color: var(--color-success);
+  padding: 0.5rem 1rem;
+  box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
+  transition:
+    transform 0.1s ease-in-out,
+    box-shadow 0.1s ease-in-out;
+  font-weight: bold;
+}
+.add-btn:hover {
+  transform: translate(2px, 2px);
+  box-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
+  cursor: pointer;
+  transition: 0.1s;
 }
 </style>
diff --git a/frontend/src/components/schema_editor/SchemaEditor.vue b/frontend/src/components/schema_editor/SchemaEditor.vue
index ad5f522..c8f6981 100644
--- a/frontend/src/components/schema_editor/SchemaEditor.vue
+++ b/frontend/src/components/schema_editor/SchemaEditor.vue
@@ -37,7 +37,23 @@
                 v-model="modelName"
                 @keyup.enter="handleCreateClick"
               />
-              <button class="create-model-btn" @click="handleCreateClick">Create</button>
+              <button class="create-model-btn" @click="handleCreateClick">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="lucide lucide-check"
+                  style="height: 100%"
+                >
+                  <path d="M20 6 9 17l-5-5" />
+                </svg>
+              </button>
             </div>
             <div v-if="!showInput" class="create-circle" @click="showInput = true">+</div>
           </div>
@@ -222,7 +238,6 @@ const openEditRelationModal = (id: string, relation: RelationalRelationField) =>
 
 .create-model-btn {
   height: 30px;
-  padding: 0 12px;
   border: 2px solid black;
   border-radius: 6px;
   cursor: pointer;
diff --git a/frontend/src/components/schema_editor/Viewport.vue b/frontend/src/components/schema_editor/Viewport.vue
index 428b133..f534da0 100644
--- a/frontend/src/components/schema_editor/Viewport.vue
+++ b/frontend/src/components/schema_editor/Viewport.vue
@@ -32,7 +32,7 @@ import { ref } from "vue"
 import SchemaEditor from "@/components/schema_editor/SchemaEditor.vue"
 import EnumEditor from "@/components/schema_editor/EnumEditor.vue"
 
-const activeTab = ref<"models" | "enums">("models")
+const activeTab = ref<"models" | "enums">("enums")
 </script>
 
 <style scoped>
diff --git a/frontend/src/stores/useProjectStore.ts b/frontend/src/stores/useProjectStore.ts
index 9d7bff3..c0c89b5 100644
--- a/frontend/src/stores/useProjectStore.ts
+++ b/frontend/src/stores/useProjectStore.ts
@@ -1,5 +1,5 @@
 import { defineStore } from "pinia"
-import { ref, shallowRef } from "vue"
+import { ref } from "vue"
 import type { Ref } from "vue"
 import type {
   NodesArray,
@@ -10,14 +10,22 @@ import type {
   RelationalField,
   RelationalRelationField,
   EnumValue,
+  EnumT,
 } from "@/types/types.ts"
-import type { Edge } from "@vue-flow/core"
 
 export const useProjectStore = defineStore("projectSpec", () => {
   const projectSpec = ref({ project_name: "", database: "" })
   const isProjectNameConfirmed = ref(false)
 
-  const enums: Ref<EnumsArray> = ref([])
+  const enums: Ref<EnumsArray> = ref([
+    {
+      name: "UserRole",
+      values: [
+        { name: "ADMIN", value: "ADMIN" },
+        { name: "USER", value: "auto()" },
+      ],
+    },
+  ])
 
   const nodes: Ref<NodesArray> = ref([
     {
@@ -27,6 +35,7 @@ export const useProjectStore = defineStore("projectSpec", () => {
           { name: "id", type: "UUID", isPrimaryKey: true },
           { name: "name", type: "String" },
           { name: "email", type: "String" },
+          { name: "role", type: "Enum", typeEnum: "UserRole", defaultValue: "ADMIN" },
           { name: "created_at", type: "DateTime" },
           { name: "updated_at", type: "DateTime" },
         ],
@@ -206,13 +215,66 @@ export const useProjectStore = defineStore("projectSpec", () => {
     edges.value = edges.value.filter((edge) => edge.id !== formatEdgeId(source, target, fieldName))
   }
 
-  const addEnum = (name: string) => {}
-  const updateEnumName = (oldName: string, newName: string) => {}
-  const deleteEnum = (name: string) => {}
+  const findEnumByName = (name: string): EnumT => {
+    const en = enums.value.find((e) => e.name === name)
+    if (!en) throw Error(`Enum not found: ${name}`)
+    return en
+  }
 
-  const addEnumValue = (enumName: string, enumValue: EnumValue) => {}
-  const updateEnumValue = (enumName: string, enumValueName: string, newEnumValue: EnumValue) => {}
-  const deleteEnumValue = (enumName: string, enumValueName: string) => {}
+  const findEnumValue = (enumName: string, enumValueName: string): EnumValue => {
+    const en = findEnumByName(enumName)
+    const ev = en.values.find((v) => v.name === enumValueName)
+    if (!ev) throw Error(`EnumValue not found: ${enumValueName}`)
+    return ev
+  }
+
+  const addEnum = (name: string): EnumT => {
+    const newEnum = { name: name, values: [] }
+    enums.value.push(newEnum)
+    return newEnum
+  }
+  const updateEnumName = (oldName: string, newName: string) => {
+    const en = findEnumByName(oldName)
+    en.name = newName
+    nodes.value.forEach((n) => {
+      n.data.fields.forEach((f) => {
+        if (f.type === "Enum" && f.typeEnum === oldName) {
+          f.typeEnum = newName
+        }
+      })
+    })
+  }
+  const deleteEnum = (name: string) => {
+    enums.value = enums.value.filter((e) => e.name !== name)
+    nodes.value.forEach((n) => {
+      n.data.fields = n.data.fields.filter((f) => f.typeEnum !== name)
+    })
+  }
+
+  const addEnumValue = (enumName: string, enumValue: EnumValue) => {
+    const en = findEnumByName(enumName)
+    en.values.push(enumValue)
+  }
+  const updateEnumValue = (enumName: string, enumValueName: string, newEnumValue: EnumValue) => {
+    const ev = findEnumValue(enumName, enumValueName)
+    ev.name = newEnumValue.name
+    ev.value = newEnumValue.value
+
+    console.log(enumName)
+    console.log(newEnumValue)
+
+    nodes.value.forEach((n) => {
+      n.data.fields.forEach((f) => {
+        if (f.type === "Enum" && f.typeEnum === enumName) {
+          f.defaultValue = newEnumValue.name
+        }
+      })
+    })
+  }
+  const deleteEnumValue = (enumName: string, enumValueName: string) => {
+    const en = findEnumByName(enumName)
+    en.values = en.values.filter((e) => e.name !== enumValueName)
+  }
 
   const setProjectName = (projectName: string): void => {
     projectSpec.value.project_name = projectName
@@ -231,6 +293,7 @@ export const useProjectStore = defineStore("projectSpec", () => {
   return {
     nodes,
     edges,
+    enums,
     createNode,
     createEdge,
     deleteNode,
@@ -248,5 +311,12 @@ export const useProjectStore = defineStore("projectSpec", () => {
     setDatabase,
     getDatabase,
     findNodeById,
+    findEnumByName,
+    addEnum,
+    updateEnumName,
+    deleteEnum,
+    addEnumValue,
+    updateEnumValue,
+    deleteEnumValue,
   }
 })
diff --git a/frontend/src/types/types.ts b/frontend/src/types/types.ts
index 4461ea4..91f504f 100644
--- a/frontend/src/types/types.ts
+++ b/frontend/src/types/types.ts
@@ -3,12 +3,17 @@ export interface Position2D {
   y: number
 }
 
-export type FieldType = "String" | "UUID" | "DateTime" | "Number" | "Boolean" | "String"
+export type FieldType = "String" | "UUID" | "DateTime" | "Number" | "Boolean" | "String" | "Enum"
 
 export interface RelationalField {
   name: string
   type: FieldType
+  typeEnum?: string
   isPrimaryKey?: boolean
+  isNullable?: boolean
+  isUnique?: boolean
+  isIndex?: boolean
+  defaultValue?: string
 }
 
 export type OnDeleteType = "CASCADE" | "SET NULL"
@@ -16,11 +21,11 @@ export type OnDeleteType = "CASCADE" | "SET NULL"
 export interface RelationalRelationField {
   fieldName: string
   targetModel: string
-  backPopulates?: string
   onDelete: OnDeleteType
-  isNullable: boolean
-  isUnique: boolean
-  isIndex: boolean
+  backPopulates?: string
+  isNullable?: boolean
+  isUnique?: boolean
+  isIndex?: boolean
 }
 
 export interface RelationalNodeData {
@@ -47,11 +52,11 @@ export interface EnumValue {
   value: string
 }
 
-export interface Enum {
+export interface EnumT {
   name: string
   values: Array<EnumValue>
 }
 
 export type NodesArray = Array<NodeT>
 export type EdgesArray = Array<EdgeT>
-export type EnumsArray = Array<Enum>
+export type EnumsArray = Array<EnumT>