diff --git a/pages/form-builder/manage.vue b/pages/form-builder/manage.vue
index 0bf7148..de2100d 100644
--- a/pages/form-builder/manage.vue
+++ b/pages/form-builder/manage.vue
@@ -47,65 +47,71 @@
     <!-- Main Content Area -->
     <div class="flex-1 p-6 overflow-auto">
       <!-- Filters and Search -->
-      <div class="mb-6 flex flex-col sm:flex-row gap-4">
-        <div class="flex-1 max-w-md">
-          <FormKit
-            v-model="searchQuery"
-            type="text"
-            placeholder="Search forms by name or description..."
-            :classes="{
-              outer: 'mb-0',
-              wrapper: 'relative',
-              inner: 'relative',
-              input: 'w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500',
-              prefixIcon: 'absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none'
-            }"
-          >
-            <template #prefixIcon>
-              <Icon name="material-symbols:search" class="text-lg" />
-            </template>
-          </FormKit>
+      <div class="mb-6 bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+        <div class="flex flex-col lg:flex-row gap-4">
+          <div class="flex-1 max-w-md">
+            <FormKit
+              v-model="searchQuery"
+              type="text"
+              placeholder="Search forms by name or description..."
+              :classes="{
+                outer: 'mb-0',
+                wrapper: 'relative',
+                inner: 'relative',
+                input: 'w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500',
+                prefixIcon: 'absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none'
+              }"
+            >
+              <template #prefixIcon>
+                <Icon name="material-symbols:search" class="text-lg" />
+              </template>
+            </FormKit>
+          </div>
+          
+          <div class="min-w-48">
+            <FormKit
+              v-model="selectedCategory"
+              type="select"
+              :options="categoryOptions"
+              placeholder="Filter by category"
+              :classes="{
+                outer: 'mb-0',
+                input: 'w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white'
+              }"
+            />
+          </div>
+
+          <div class="min-w-48">
+            <FormKit
+              v-model="selectedGroup"
+              type="select"
+              :options="groupOptions"
+              placeholder="Filter by group"
+              :classes="{
+                outer: 'mb-0',
+                input: 'w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white'
+              }"
+            />
+          </div>
+          
+          <div class="flex gap-2">
+            <RsButton 
+              @click="clearFilters" 
+              variant="secondary" 
+              size="sm" 
+              :disabled="loading" 
+              v-if="hasActiveFilters"
+            >
+              <Icon name="material-symbols:filter-alt-off" class="mr-1" />
+              Clear
+            </RsButton>
+            
+            <RsButton @click="loadForms" variant="tertiary" size="sm" :disabled="loading">
+              <Icon name="material-symbols:refresh" class="mr-1" />
+              Refresh
+            </RsButton>
+          </div>
         </div>
-        
-                 <div class="flex gap-2">
-           <!-- Category Filter -->
-           <div class="relative">
-             <FormKit
-               v-model="selectedCategory"
-               type="select"
-               placeholder="All Categories"
-               :options="categoryOptions"
-               :classes="{
-                 outer: 'mb-0',
-                 input: 'min-w-[140px] text-sm'
-               }"
-             />
-           </div>
-           
-           <!-- Group Filter -->
-           <div class="relative">
-             <FormKit
-               v-model="selectedGroup"
-               type="select"
-               placeholder="All Groups"
-               :options="groupOptions"
-               :classes="{
-                 outer: 'mb-0',
-                 input: 'min-w-[140px] text-sm'
-               }"
-             />
-           </div>
-           
-           <RsButton @click="clearFilters" variant="secondary" size="sm" :disabled="loading" v-if="hasActiveFilters">
-             <Icon name="material-symbols:filter-alt-off" class="mr-1" />
-             Clear Filters
-           </RsButton>
-           
-           <RsButton @click="loadForms" variant="tertiary" size="sm" :disabled="loading">
-             <Icon name="material-symbols:refresh" class="mr-1" />
-             Refresh
-           </RsButton>
-         </div>
       </div>
       
       <!-- Loading State -->
@@ -116,133 +122,115 @@
         </div>
       </div>
       
-      <!-- Forms Table -->
-      <div v-else class="bg-white shadow-md rounded-lg overflow-hidden">
-        <table class="w-full table-auto">
-          <thead class="bg-gray-50 border-b">
-                         <tr>
-               <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
-               <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
-               <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
-               <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Group</th>
-               <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
-               <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Updated</th>
-               <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
-             </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200">
-                         <tr v-if="filteredForms.length === 0">
-               <td colspan="7" class="px-6 py-12 text-center text-gray-500">
-                <div class="flex flex-col items-center">
-                  <Icon name="material-symbols:description-outline" class="w-12 h-12 text-gray-300 mb-2" />
-                  <p class="text-lg font-medium mb-1">
-                    {{ searchQuery ? 'No forms match your search' : 'No forms found' }}
-                  </p>
-                  <p class="text-sm mb-2">
-                    {{ searchQuery ? 'Try adjusting your search terms' : 'Create your first form to get started' }}
-                  </p>
-                  
-                  <!-- Show current search if any -->
-                  <div v-if="searchQuery" class="text-xs text-gray-400 mb-4">
-                    <div>Search: "{{ searchQuery }}"</div>
-                  </div>
-                  
-                                     <div class="flex gap-2">
-                     <RsButton v-if="hasActiveFilters" @click="clearFilters" variant="secondary" size="sm">
-                       <Icon name="material-symbols:filter-alt-off" class="mr-1" />
-                       Clear Filters
-                     </RsButton>
-                     <RsButton v-if="!hasActiveFilters" @click="createNewForm" variant="primary" size="sm">
-                       <Icon name="material-symbols:add" class="mr-1" />
-                       Create New Form
-                     </RsButton>
-                   </div>
+      <!-- Forms Grid -->
+      <div v-else-if="filteredForms.length > 0" class="grid gap-4">
+        <div
+          v-for="form in filteredForms"
+          :key="form.id"
+          class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow"
+        >
+          <div class="flex items-start justify-between">
+            <div class="flex-1">
+              <div class="flex items-center gap-3 mb-2">
+                <h3 class="text-lg font-semibold text-gray-900">{{ form.name || 'Untitled Form' }}</h3>
+                <div class="flex gap-2">
+                  <RsBadge v-if="form.category" :variant="getCategoryColor(form.category)" size="sm">
+                    {{ form.category }}
+                  </RsBadge>
+                  <RsBadge v-if="form.group" variant="secondary" size="sm">
+                    {{ form.group }}
+                  </RsBadge>
                 </div>
-              </td>
-            </tr>
-            <tr v-for="form in filteredForms" :key="form.id" class="hover:bg-gray-50">
-              <td class="px-6 py-4 whitespace-nowrap">
-                <div class="font-medium text-gray-900">{{ form.name || 'Untitled Form' }}</div>
-                <div class="text-sm text-gray-500">ID: {{ form.id }}</div>
-              </td>
-              <td class="px-6 py-4">
-                <div class="text-sm text-gray-700 max-w-xs">
-                  <div 
-                    v-if="form.description && form.description.trim()" 
-                    class="line-clamp-2 cursor-help"
-                    :title="form.description.length > 100 ? form.description : ''"
-                  >
-                    {{ form.description }}
-                  </div>
-                  <div v-else class="text-gray-400 italic">
-                    No description
-                  </div>
-                                 </div>
-               </td>
-               <td class="px-6 py-4 whitespace-nowrap">
-                 <div v-if="form.category" class="text-sm">
-                   <RsBadge :variant="getCategoryColor(form.category)" size="sm">
-                     {{ form.category }}
-                   </RsBadge>
-                 </div>
-                 <div v-else class="text-sm text-gray-400 italic">No category</div>
-               </td>
-               <td class="px-6 py-4 whitespace-nowrap">
-                 <div v-if="form.group" class="text-sm">
-                   <RsBadge variant="secondary" size="sm">
-                     {{ form.group }}
-                   </RsBadge>
-                 </div>
-                 <div v-else class="text-sm text-gray-400 italic">No group</div>
-               </td>
-               <td class="px-6 py-4 whitespace-nowrap">
-                 <div class="text-sm text-gray-500">{{ formatDate(form.createdAt) }}</div>
-               </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <div class="text-sm text-gray-500">{{ formatDate(form.updatedAt) }}</div>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                <div class="flex space-x-2 justify-end">
-                  <button 
-                    @click="editForm(form.id)"
-                    class="p-1 text-blue-600 hover:text-blue-900 hover:bg-blue-50 rounded"
-                    title="Edit Form"
-                    :disabled="loading"
-                  >
-                    <Icon name="material-symbols:edit" class="text-lg" />
-                  </button>
-                  
-                  <button 
-                    @click="duplicateForm(form)"
-                    class="p-1 text-indigo-600 hover:text-indigo-900 hover:bg-indigo-50 rounded"
-                    title="Duplicate Form"
-                    :disabled="loading"
-                  >
-                    <Icon name="material-symbols:content-copy" class="text-lg" />
-                  </button>
-                  
-                  <button 
-                    @click="exportForm(form)"
-                    class="p-1 text-green-600 hover:text-green-900 hover:bg-green-50 rounded"
-                    title="Export Form as JSON"
-                    :disabled="loading"
-                  >
-                    <Icon name="material-symbols:download" class="text-lg" />
-                  </button>
-                  
-                  <button 
-                    @click="confirmDelete(form.id)"
-                    class="p-1 text-red-600 hover:text-red-900 hover:bg-red-50 rounded"
-                    title="Delete Form"
-                    :disabled="loading"
-                  >
-                    <Icon name="material-symbols:delete" class="text-lg" />
-                  </button>
+              </div>
+              
+              <p class="text-gray-600 mb-3">
+                {{ form.description || 'No description available' }}
+              </p>
+              
+              <div class="flex items-center gap-6 text-sm text-gray-500">
+                <div class="flex items-center gap-1">
+                  <Icon name="material-symbols:fingerprint" class="w-4 h-4" />
+                  ID: {{ form.id }}
                 </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                <div class="flex items-center gap-1">
+                  <Icon name="material-symbols:calendar-add-on-outline" class="w-4 h-4" />
+                  Created {{ formatDate(form.createdAt) }}
+                </div>
+                <div class="flex items-center gap-1">
+                  <Icon name="material-symbols:schedule" class="w-4 h-4" />
+                  Updated {{ formatDate(form.updatedAt) }}
+                </div>
+              </div>
+            </div>
+            
+            <div class="flex items-center gap-2 ml-4">
+              <button 
+                @click="editForm(form.id)"
+                class="p-2 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors"
+                title="Edit Form"
+                :disabled="loading"
+              >
+                <Icon name="material-symbols:edit" class="text-lg" />
+              </button>
+              
+              <button 
+                @click="duplicateForm(form)"
+                class="p-2 text-indigo-600 hover:text-indigo-800 hover:bg-indigo-50 rounded-lg transition-colors"
+                title="Duplicate Form"
+                :disabled="loading"
+              >
+                <Icon name="material-symbols:content-copy" class="text-lg" />
+              </button>
+              
+              <button 
+                @click="exportForm(form)"
+                class="p-2 text-green-600 hover:text-green-800 hover:bg-green-50 rounded-lg transition-colors"
+                title="Export Form as JSON"
+                :disabled="loading"
+              >
+                <Icon name="material-symbols:download" class="text-lg" />
+              </button>
+              
+              <button 
+                @click="confirmDelete(form.id)"
+                class="p-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors"
+                title="Delete Form"
+                :disabled="loading"
+              >
+                <Icon name="material-symbols:delete" class="text-lg" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Empty State -->
+      <div v-else class="bg-white rounded-xl shadow-sm border border-gray-200 p-12 text-center">
+        <Icon name="material-symbols:description-outline" class="w-16 h-16 text-gray-300 mx-auto mb-4" />
+        <h3 class="text-lg font-medium text-gray-900 mb-2">
+          {{ hasActiveFilters ? 'No forms match your filters' : 'No forms found' }}
+        </h3>
+        <p class="text-gray-600 mb-6">
+          {{ hasActiveFilters ? 'Try adjusting your search or filter criteria' : 'Create your first form to get started' }}
+        </p>
+        
+        <!-- Show current filters if any -->
+        <div v-if="hasActiveFilters" class="text-sm text-gray-400 mb-6 space-y-1">
+          <div v-if="searchQuery">Search: "{{ searchQuery }}"</div>
+          <div v-if="selectedCategory">Category: {{ selectedCategory }}</div>
+          <div v-if="selectedGroup">Group: {{ selectedGroup }}</div>
+        </div>
+        
+        <div class="flex justify-center gap-3">
+          <RsButton v-if="hasActiveFilters" @click="clearFilters" variant="secondary">
+            <Icon name="material-symbols:filter-alt-off" class="mr-2" />
+            Clear Filters
+          </RsButton>
+          <RsButton v-if="!hasActiveFilters" @click="createNewForm" variant="primary">
+            <Icon name="material-symbols:add" class="mr-2" />
+            Create New Form
+          </RsButton>
+        </div>
       </div>
       
       <!-- Global Loading Overlay -->
@@ -541,18 +529,17 @@ const duplicateForm = async (form) => {
     loading.value = true;
     const newName = `${form.name || 'Form'} (Copy)`;
     
-    // Create a copy of the form
-    const duplicatedForm = {
-      ...form,
-      id: null, // Will get new ID when saved
-      name: newName,
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString()
-    };
-    
-    // Load the original form, duplicate it, and save as new
+    // Load the original form first
     await formStore.loadForm(form.id);
+    
+    // Clear the current form ID to ensure a new form is created
+    formStore.currentFormId = null;
+    
+    // Update the form name for the duplicate
     formStore.setFormName(newName);
+    
+    // Mark as having unsaved changes and save as new form
+    formStore.hasUnsavedChanges = true;
     await formStore.saveForm();
     
     // Refresh the form list
@@ -923,9 +910,17 @@ const closeImportModal = () => {
 </script>
 
 <style scoped>
-/* Custom styles for better UX */
-.hover\:bg-gray-50:hover {
-  transition: background-color 0.15s ease-in-out;
+/* Custom transitions and animations */
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
 }
 
 button:disabled {
@@ -933,6 +928,11 @@ button:disabled {
   cursor: not-allowed;
 }
 
+/* Glassmorphism effect for cards */
+.bg-white {
+  backdrop-filter: blur(10px);
+}
+
 /* Line clamp utility for description text */
 .line-clamp-2 {
   display: -webkit-box;
diff --git a/pages/process-builder/manage.vue b/pages/process-builder/manage.vue
index 2019534..9f6cb8d 100644
--- a/pages/process-builder/manage.vue
+++ b/pages/process-builder/manage.vue
@@ -283,8 +283,24 @@ const publishProcess = async (processId) => {
     loading.value = true;
     await processStore.publishProcess(processId);
     await loadProcesses();
+    toast.success('Process published successfully');
   } catch (error) {
     console.error('Error publishing process:', error);
+    toast.error('Failed to publish process: ' + (error.message || 'Unknown error'));
+  } finally {
+    loading.value = false;
+  }
+};
+
+const unpublishProcess = async (processId) => {
+  try {
+    loading.value = true;
+    await processStore.unpublishProcess(processId);
+    await loadProcesses();
+    toast.success('Process unpublished successfully');
+  } catch (error) {
+    console.error('Error unpublishing process:', error);
+    toast.error('Failed to unpublish process: ' + (error.message || 'Unknown error'));
   } finally {
     loading.value = false;
   }
@@ -303,6 +319,14 @@ const restoreProcess = async (processId) => {
 };
 
 const confirmDelete = (processId) => {
+  const process = processStore.processes.find(p => p.id === processId);
+  
+  // If process is published, show a message instead of allowing deletion
+  if (process && process.status === 'published') {
+    toast.warning('Please unpublish the process first before deleting it.');
+    return;
+  }
+  
   processToDelete.value = processId;
   showDeleteConfirm.value = true;
 };
@@ -710,13 +734,23 @@ const copyWorkflowLink = async (processId) => {
                     <button 
                       v-if="process.status === 'draft'"
                       @click="publishProcess(process.id)"
-                    class="p-2 text-green-600 hover:text-green-800 hover:bg-green-50 rounded-lg transition-colors"
+                      class="p-2 text-green-600 hover:text-green-800 hover:bg-green-50 rounded-lg transition-colors"
                       title="Publish Process"
                       :disabled="loading"
                     >
                       <Icon name="material-symbols:publish" class="text-lg" />
                     </button>
                     
+                    <button 
+                      v-if="process.status === 'published'"
+                      @click="unpublishProcess(process.id)"
+                      class="p-2 text-orange-600 hover:text-orange-800 hover:bg-orange-50 rounded-lg transition-colors"
+                      title="Unpublish Process (Move to Draft)"
+                      :disabled="loading"
+                    >
+                      <Icon name="material-symbols:unpublished" class="text-lg" />
+                    </button>
+                    
                     <button 
                       @click="duplicateProcess(process)"
                     class="p-2 text-indigo-600 hover:text-indigo-800 hover:bg-indigo-50 rounded-lg transition-colors"
@@ -728,8 +762,8 @@ const copyWorkflowLink = async (processId) => {
                     
                     <button 
                       @click="confirmDelete(process.id)"
-                    class="p-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors"
-                      title="Delete Process"
+                      class="p-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors"
+                      :title="process.status === 'published' ? 'Unpublish first to delete this process' : 'Delete Process'"
                       :disabled="loading || process.status === 'published'"
                     >
                       <Icon name="material-symbols:delete" class="text-lg" />
@@ -790,7 +824,7 @@ const copyWorkflowLink = async (processId) => {
               This process will be moved to trash but not permanently deleted. You can restore it later from the "Deleted" filter if needed.
             </p>
             <p class="text-gray-500 text-xs mt-2">
-              Note: Published processes cannot be deleted and must be unpublished first.
+              Note: To delete a published process, first unpublish it using the orange unpublish button.
             </p>
           </div>
         </div>
diff --git a/server/api/process/[id]/unpublish.post.js b/server/api/process/[id]/unpublish.post.js
new file mode 100644
index 0000000..3df8f33
--- /dev/null
+++ b/server/api/process/[id]/unpublish.post.js
@@ -0,0 +1,84 @@
+import { PrismaClient } from '@prisma/client';
+
+// Initialize Prisma client
+const prisma = new PrismaClient();
+
+export default defineEventHandler(async (event) => {
+  try {
+    // Get the process ID from the route parameter
+    const processId = getRouterParam(event, 'id');
+    
+    if (!processId) {
+      return {
+        success: false,
+        error: 'Process ID is required'
+      };
+    }
+
+    // Check if the ID is a UUID or numeric ID
+    const isUUID = processId.length === 36 && processId.includes('-');
+    
+    // First, get the current process to validate it can be unpublished
+    const currentProcess = await prisma.process.findFirst({
+      where: isUUID 
+        ? { processUUID: processId }
+        : { processID: parseInt(processId) }
+    });
+
+    if (!currentProcess) {
+      return {
+        success: false,
+        error: 'Process not found'
+      };
+    }
+
+    // Check if the process is currently published
+    if (currentProcess.processStatus !== 'published') {
+      return {
+        success: false,
+        error: 'Process is not currently published'
+      };
+    }
+
+    // Update the process status to draft
+    const unpublishedProcess = await prisma.process.update({
+      where: isUUID 
+        ? { processUUID: processId }
+        : { processID: parseInt(processId) },
+      data: {
+        processStatus: 'draft'
+      },
+      include: {
+        creator: {
+          select: {
+            userID: true,
+            userFullName: true,
+            userUsername: true
+          }
+        }
+      }
+    });
+
+    return {
+      success: true,
+      message: 'Process unpublished successfully',
+      process: unpublishedProcess
+    };
+  } catch (error) {
+    console.error('Error unpublishing process:', error);
+    
+    // Handle specific Prisma errors
+    if (error.code === 'P2025') {
+      return {
+        success: false,
+        error: 'Process not found'
+      };
+    }
+    
+    return {
+      success: false,
+      error: 'Failed to unpublish process',
+      details: process.env.NODE_ENV === 'development' ? error.message : undefined
+    };
+  }
+}); 
\ No newline at end of file
diff --git a/stores/processBuilder.js b/stores/processBuilder.js
index 63543bf..d0fc6f9 100644
--- a/stores/processBuilder.js
+++ b/stores/processBuilder.js
@@ -633,6 +633,39 @@ export const useProcessBuilderStore = defineStore('processBuilder', {
       }
     },
 
+    /**
+     * Unpublish a process (change status from published to draft)
+     */
+    async unpublishProcess(processId) {
+      try {
+        const response = await $fetch(`/api/process/${processId}/unpublish`, {
+          method: 'POST'
+        });
+
+        if (response.success) {
+          // Update local state if process exists in the array
+          const process = this.processes.find(p => p.id === processId);
+          if (process) {
+            process.status = 'draft';
+            process.updatedAt = response.process.processModifiedDate;
+          }
+          
+          // Update current process if it's the same one
+          if (this.currentProcess && this.currentProcess.id === processId) {
+            this.currentProcess.status = 'draft';
+            this.currentProcess.updatedAt = response.process.processModifiedDate;
+          }
+          
+          return true;
+        } else {
+          throw new Error(response.error || 'Failed to unpublish process');
+        }
+      } catch (error) {
+        console.error('Error unpublishing process:', error);
+        throw error;
+      }
+    },
+
     /**
      * Duplicate a process
      */