diff --git a/app/Livewire/System/Jcps/JCPCreateForm.php b/app/Livewire/System/Jcps/JCPCreateForm.php
index fe2c48a..560e12d 100644
--- a/app/Livewire/System/Jcps/JCPCreateForm.php
+++ b/app/Livewire/System/Jcps/JCPCreateForm.php
@@ -1,35 +1,25 @@
 <?php
 
 namespace App\Livewire\System\Jcps;
-
-use App\Models\Audit\assessment;
-use App\Models\Audit\Jcp;
+use App\Models\Audit\jcp;
 use App\Models\Audit\prerequisite;
 use App\Models\Audit\qualification;
 use App\Models\Audit\skill;
 use App\Models\User;
 use Livewire\Component;
 
+
 class JCPCreateForm extends Component
-{
-    public $currentPage = 1;
 
+{
     public $user_id = '';
-
     public $position_title = '';
-
     public $duty_station = '';
-
     public $job_grade = '';
-
     public $job_purpose = '';
-
     public $is_active = '';
-
     public $jcp_qualifications = [];
-
     public $jcp_skills = [];
-
     public $jcp_prerequisites = [];
 
     public function mount()
@@ -39,44 +29,20 @@ public function mount()
         ];
     }
 
-    // Page information
-    public $pages = [
-        1 => [
-            'title' => 'Job Competency Profile Information',
-            'description' => 'Make sure the information you enter corresponds to the Job Description.',
-        ],
-        2 => [
-            'title' => 'Prerequisite Information',
-            'description' => 'Enter the information regarding required qualifications, certifications, and/or licenses.',
-        ],
-        3 => [
-            'title' => 'Skills Information',
-            'description' => 'Enter the information regarding required skills and abilities.',
-        ],
-    ];
-
-    public function nextPage()
-    {
-        $this->validateForm();
-        $this->currentPage++;
-    }
-
-    public function previousPage()
-    {
-        $this->currentPage--;
-    }
 
     public function addSkill()
     {
         $this->jcp_skills[] = ['skill_id' => '', 'required_rating' => 1];
     }
 
+
     public function removeSkill($index)
     {
         unset($this->jcp_skills[$index]);
         $this->jcp_skills = array_values($this->jcp_skills); // Reindex the array
     }
 
+
     public function createJCPInformation()
     {
         $this->save();
@@ -84,80 +50,66 @@ public function createJCPInformation()
 
     public function save()
     {
-        dd($this->validateForm());
-
-        // Check if a record already exists for the given user_id and assessment_id
-        $existingJcp = Jcp::where('user_id', $this->user_id)
-            ->where('assessment_id', 1)
-            ->first();
-
-        if ($existingJcp) {
-            session()->flash('error', 'A JCP for this user and assessment already exists.');
-
-            return redirect()->route('jcp.index'); // redirect back with an error message
-        }
-
+        $this->validateForm();
         // Create a new JCP
-        $jcp = Jcp::create([
+
+        $jcp = JCP::create([
 
             'position_title' => $this->position_title,
             'duty_station' => $this->duty_station,
+            'user_id' => $this->user_id,
             'job_grade' => $this->job_grade,
             'job_purpose' => $this->job_purpose,
+            'is_active' => $this->is_active,
 
-            'is_active' => is_null($this->is_active) ? null : 0,            //Add Frontend for these elements
-            'user_id' => $this->user_id,
-            'assessment_id' => assessment::find(1)->id, //testing
         ]);
 
+
         // Attach qualifications
-        foreach ($this->jcp_qualifications as $qualId) {
-            $jcp->qualifications()->attach($qualId);
-        }
+        $jcp->qualifications()->sync($this->jcp_qualifications);
+
 
         // Attach prerequisites
-        foreach ($this->jcp_prerequisites as $prerequisite_id) {
-            $jcp->prerequisites()->attach($prerequisite_id);
-        }
+         $jcp->prerequisites()->sync($this->jcp_prerequisites);
 
         // Attach skills with required rating
         foreach ($this->jcp_skills as $skill) {
-            if (! empty($skill['skill_id'])) {
+            if (!empty($skill['skill_id'])) {
                 $jcp->skills()->attach($skill['skill_id'], ['required_level' => $skill['required_rating']]);
             }
         }
 
-        session()->flash('status', 'JCP successfully created.');
+        $this->reset();
 
-        return redirect()->route('jcp.index');
+        return redirect()->route('jcp.index')->with('success','JCP successfully created.');
     }
 
+
     public function validateForm()
     {
-        $rules = [];
-        if ($this->currentPage === 1) {
-            $rules = [
-                'position_title' => 'required|string|max:255',
-                'duty_station' => 'required|string|max:255',
-                'job_grade' => 'required|string|max:255',
-                'job_purpose' => 'required|string',
-                'user_id' => 'required|exists:users,id',
-            ];
-        } elseif ($this->currentPage === 2) {
-            $rules = [
-                'jcp_qualifications.*' => 'required|exists:qualifications,id',
-                'jcp_prerequisites.*' => 'required|exists:prerequisites,id',
-            ];
-        } elseif ($this->currentPage === 3) {
-            $rules = [
-                'jcp_skills.*.skill_id' => 'required|exists:skills,id',
-                'jcp_skills.*.required_rating' => 'required|integer|min:1|max:5',
-            ];
-        }
+        $this->validate([
 
-        $this->validate($rules);
-    }
+            'position_title' => 'required|string|max:255',
 
+            'duty_station' => 'required|string|max:255',
+
+            'user_id' => 'required|exists:users,id',
+
+            'job_grade' => 'required|string',
+
+            'job_purpose' => 'required|string',
+
+            'is_active' => 'boolean',
+
+            'jcp_qualifications' => 'required|array',
+
+            'jcp_qualifications.*' => 'exists:qualifications,id', // Validate each qualification
+
+            // Add other validations as necessary
+
+        ]);
+
+    }
     public function render()
     {
         return view('livewire.system.jcps.j-c-p-create-form', [
@@ -167,4 +119,5 @@ public function render()
             'prerequisites' => Prerequisite::all(),
         ]);
     }
+
 }
diff --git a/app/Models/Audit/assessment.php b/app/Models/Audit/assessment.php
index 0340c93..105fc46 100644
--- a/app/Models/Audit/assessment.php
+++ b/app/Models/Audit/assessment.php
@@ -12,11 +12,6 @@ class assessment extends Model
 
     protected $guarded = [];
 
-    public function jcp()
-    {
-        return $this->hasMany(jcp::class, 'assessment_id');
-
-    }
 
     public function enrolled()
     {
diff --git a/app/Models/Audit/jcp.php b/app/Models/Audit/jcp.php
index ede2a31..bbbc8d5 100644
--- a/app/Models/Audit/jcp.php
+++ b/app/Models/Audit/jcp.php
@@ -17,10 +17,6 @@ public function employee()
         return $this->belongsTo(User::class, 'user_id');
     }
 
-    public function assessment()
-    {
-        return $this->belongsTo(assessment::class, 'assessment_id');
-    }
 
     public function skills()
     {
diff --git a/database/factories/Audit/jcpFactory.php b/database/factories/Audit/jcpFactory.php
index 8474bef..33a038e 100644
--- a/database/factories/Audit/jcpFactory.php
+++ b/database/factories/Audit/jcpFactory.php
@@ -16,12 +16,10 @@ class jcpFactory extends Factory
      */
     public function definition(): array
     {
-        $assessment_ids = \App\Models\Audit\assessment::select('id')->get();
         $user_ids = \App\Models\User::select('id')->get();
 
         return [
             //This populates the jcp model fields
-            'assessment_id' => $this->faker->randomElement($assessment_ids),
             'user_id' => $this->faker->unique()->randomElement($user_ids),
             'position_title' => $this->faker->jobTitle(),
             'job_grade' => $this->faker->numerify('B-#'),
diff --git a/database/migrations/2024_03_22_094647_create_jcps_table.php b/database/migrations/2024_03_22_094647_create_jcps_table.php
index d8a1c1a..f72dc3e 100644
--- a/database/migrations/2024_03_22_094647_create_jcps_table.php
+++ b/database/migrations/2024_03_22_094647_create_jcps_table.php
@@ -13,7 +13,6 @@ public function up(): void
     {
         Schema::create('jcps', function (Blueprint $table) {
             $table->id();
-            $table->foreignId('assessment_id')->constrained()->cascadeOnDelete();
             $table->foreignId('user_id')->constrained()->cascadeOnDelete();
 
             $table->string('position_title');
@@ -23,7 +22,6 @@ public function up(): void
             $table->integer('is_active')->default(1);
 
             // Add a unique constraint
-            $table->unique(['user_id', 'assessment_id']);
 
             $table->timestamps();
         });
diff --git a/resources/views/livewire/system/assessments/assessments-table.blade.php b/resources/views/livewire/system/assessments/assessments-table.blade.php
index 7196c86..a9df2ac 100644
--- a/resources/views/livewire/system/assessments/assessments-table.blade.php
+++ b/resources/views/livewire/system/assessments/assessments-table.blade.php
@@ -6,12 +6,12 @@
         <div class="flex">
 
             <div class="flex-initial w-full">
-        <input type="text" wire:model.live.debounce.300ms="search" placeholder="Search Assessments directory..." class="mb-4 p-2 px-4 shadow-sm w-full border border-gray-300 rounded-l-3xl">
+        <input type="text" wire:model.live.debounce.300ms="search" placeholder="Search Assessments directory..." class="mb-4 p-2 px-4 shadow-sm w-full border border-gray-300 rounded-r-md rounded-l-3xl">
     </div>
     <div class="flex-initial w-auto ml-3 mb-4">
 
 
-                    <a class="flex flex-row p-2 px-4 bg-sky-400 hover:bg-sky-500 text-white transition ease-in-out duration-300 rounded-r-3xl shadow-sm" href={{ route('assessments.create')}}>
+                    <a class="flex flex-row p-2 px-4 bg-sky-200 border hover:bg-sky-300 text-sky-800 transition ease-in-out duration-300 rounded-r-3xl rounded-l-md shadow-sm" href={{ route('assessments.create')}}>
                         <x-gmdi-add-o class="w-6 h-6" />
                         Assessment
                     </a>
diff --git a/resources/views/livewire/system/jcps/j-c-p-create-form.blade.php b/resources/views/livewire/system/jcps/j-c-p-create-form.blade.php
index 1c2c158..97cb1c5 100644
--- a/resources/views/livewire/system/jcps/j-c-p-create-form.blade.php
+++ b/resources/views/livewire/system/jcps/j-c-p-create-form.blade.php
@@ -1,30 +1,34 @@
 <x-form-section submit="createJCPInformation">
     <x-slot name="title">
-        {{ $pages[$currentPage]['title'] }}
+        Create Job Competency Profile (JCP)
     </x-slot>
 
     <x-slot name="description">
-        {{ $pages[$currentPage]['description'] }}
+        Fill out the form below to create a new Job Competency Profile.
     </x-slot>
 
     <x-slot name="form">
-        @if ($currentPage === 1)
-        <!-- Name -->
+        <!-- Position Title -->
         <div class="col-span-6 sm:col-span-4">
             <x-label for="position_title" value="{{ __('Position Title') }}" />
-            <x-input id="position_title" type="text" class="mt-1 block w-full" wire:model.defer="position_title" required autocomplete="position_title" />
+            <x-input id="position_title" type="text" class="mt-1 block w-full" wire:model.defer="position_title"
+                required autocomplete="position_title" />
             <x-input-error for="position_title" class="mt-2" />
         </div>
 
+        <!-- Duty Station -->
         <div class="col-span-6 sm:col-span-4">
             <x-label for="duty_station" value="{{ __('Duty Station') }}" />
-            <x-input id="duty_station" type="text" class="mt-1 block w-full" wire:model.defer="duty_station" required autocomplete="duty_station" />
+            <x-input id="duty_station" type="text" class="mt-1 block w-full" wire:model.defer="duty_station" required
+                autocomplete="duty_station" />
             <x-input-error for="duty_station" class="mt-2" />
         </div>
 
+        <!-- Employee Selection -->
         <div class="col-span-6 sm:col-span-4">
             <x-label for="user" value="{{ __('Employee') }}" />
-            <select id="user" wire:model.defer="user_id" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-fuchsia-500 focus:border-fuchsia-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500">
+            <select id="user" wire:model.defer="user_id"
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5">
                 <option selected>Choose an employee to assign the JCP to.</option>
                 @forelse ($users as $user)
                     <option value="{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }}</option>
@@ -35,29 +39,15 @@
             <x-input-error for="user_id" class="mt-2" />
         </div>
 
+        <!-- Job Grade -->
         <div class="col-span-6 sm:col-span-4">
             <x-label for="job_grade" value="{{ __('Job Grade') }}" />
-            <select id="job_grade" wire:model.defer="job_grade" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-fuchsia-500 focus:border-fuchsia-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500">
+            <select id="job_grade" wire:model.defer="job_grade"
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5">
                 <option selected>Choose the job grade.</option>
-                <option value="a1">A1</option>
-                <option value="a2">A2</option>
-                <option value="a3">A3</option>
-                <option value="a4">A4</option>
-                <option value="b1">B1</option>
-                <option value="b2">B2</option>
-                <option value="b3">B3</option>
-                <option value="b4">B4</option>
-                <option value="bu">BU</option>
-                <option value="c1">C1</option>
-                <option value="c2">C2</option>
-                <option value="c3">C3</option>
-                <option value="c4">C4</option>
-                <option value="cu">CU</option>
-                <option value="d1">D1</option>
-                <option value="d2">D2</option>
-                <option value="d3">D3</option>
-                <option value="d4">D4</option>
-                <option value="du">DU</option>
+                @foreach (['a1', 'a2', 'a3', 'a4', 'b1', 'b2', 'b3', 'b4', 'bu', 'c1', 'c2', 'c3', 'c4', 'cu', 'd1', 'd2', 'd3', 'd4', 'du'] as $grade)
+                    <option value="{{ $grade }}">{{ strtoupper($grade) }}</option>
+                @endforeach
             </select>
             <x-input-error for="job_grade" class="mt-2" />
         </div>
@@ -65,110 +55,116 @@
         <!-- Job Purpose -->
         <div class="col-span-6 sm:col-span-4">
             <x-label for="job_purpose" value="{{ __('Job Purpose') }}" />
-            <textarea id="job_purpose" wire:model.defer="job_purpose" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-fuchsia-500 focus:border-fuchsia-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500" placeholder="Write your thoughts here..."></textarea>
+            <textarea id="job_purpose" wire:model.defer="job_purpose" rows="4"
+                class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-sky-500 focus:border-sky-500"
+                placeholder="Write your job purpose here..."></textarea>
             <x-input-error for="job_purpose" class="mt-2" />
         </div>
 
+        <!-- Active Checkbox -->
         <div class="col-span-6 sm:col-span-4">
             <label class="inline-flex items-center cursor-pointer">
-                <input type="checkbox" wire:model.defer="is_active" value="" class="sr-only peer">
-                <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-fuchsia-300 dark:peer-focus:ring-fuchsia-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-fuchsia-600"></div>
+                <input type="checkbox" wire:model.defer="is_active" class="sr-only peer">
+                <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring
+                                <div class="relative
+                    w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-sky-300 rounded-full
+                    peer dark:bg-gray-700 peer-checked:bg-sky-600"></div>
                 <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">JCP Active</span>
             </label>
         </div>
 
-        {{-- Prerequisite Information --}}
-        @elseif ($currentPage === 2 )
+        <!-- Qualifications Section -->
         <div class="col-span-full sm:col-span-4">
             <x-label for="qualifications" value="{{ __('Qualifications') }}" />
-            <select id="jcp_qualifications.qualification_id" wire:model.defer="jcp_qualifications.qualification_id" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
-                <option selected>Choose Qualifications</option>
-                @forelse ($qualifications as $qualification)
-                    <option value="{{ $qualification->id }}">{{ $qualification->qualification_title }}</option>
-                @empty
-                    <option value="">No Qualifications Found</option>
-                @endforelse
-            </select>
-            <x-input-error for="jcp_qualifications.qualification_id" class="mt-2" />
+            @foreach ($qualifications as $qualification)
+                <div class="flex items-center mb-2">
+                    <input type="checkbox" value="{{ $qualification->id }}" wire:model.defer="jcp_qualifications"
+                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
+                    <label
+                        class="ml-2 text-sm font-medium text-gray-900">{{ $qualification->qualification_title }}</label>
+                </div>
+            @endforeach
+            <x-input-error for="jcp_qualifications" class="mt-2" />
         </div>
 
+        <!-- Prerequisites Section -->
         <div class="col-span-6 sm:col-span-4">
-            <x-label for="jcp_prerequisites" value="{{ __('Prerequisites') }}" />
+            <x-label for="jcp_prerequisites[]" value="{{ __('Prerequisites') }}" />
             @forelse ($prerequisites as $prerequisite)
                 <div class="flex items-center ps-4 border border-gray-200 rounded dark:border-gray-700 mb-2">
-                    <input id="jcp_prerequisites" type="radio" value="{{ $prerequisite->id }}" wire:model.defer="jcp_prerequisites" name="jcp_prerequisites" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-                    <label for="jcp_prerequisites" class="w-full py-4 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{ $prerequisite->prerequisite_title }}</label>
+                    <input type="radio" value="{{ $prerequisite->id }}" wire:model.defer="jcp_prerequisites"
+                        name="jcp_prerequisites[]"
+                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                    <label
+                        class="w-full py-4 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{ $prerequisite->prerequisite_title }}</label>
                 </div>
             @empty
                 <div class="flex items-center ps-4 border border-gray-200 rounded dark:border-gray-700 mb-2">
-                    <input checked id="jcp_prerequisites" type="radio" value="" name="jcp_prerequisites" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-                    <label for="jcp_prerequisites" class="w-full py-4 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">No Prerequisites Loaded</label>
+                    <input checked type="radio" value="" name="jcp_prerequisites[]"
+                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                    <label class="w-full py-4 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">No
+                        Prerequisites Loaded</label>
                 </div>
             @endforelse
             <x-input-error for="jcp_prerequisites" class="mt-2" />
         </div>
 
-        {{-- Skills Information --}}
-        @elseif ($currentPage === 3 )
-        <div>
-            <table>
-                <thead class="text-base">
-                    <th>Skill Title</th>
-                    <th>Required Rating</th>
+        <!-- Skills Section -->
+        <div class="col-span-full sm:col-span-4">
+            <x-label for="jcp_skills" value="{{ __('Skills') }}" />
+            <table class="min-w-full divide-y divide-gray-200">
+                <thead>
+                    <tr>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Skill
+                            Title</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            Required Rating</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            Action</th>
+                    </tr>
                 </thead>
                 <tbody>
-                @foreach ($jcp_skills as $index => $skill)
-                <tr>
-                    <td class="px-6 py-4 whitespace-nowrap">
-                        <select name="skills" wire:model.defer="jcp_skills.{{ $index }}.skill_id" class="rounded-lg">
-                            @foreach ($skills as $availableSkill)
-                                <option value="{{ $availableSkill->id }}">
-                                    {{ $availableSkill->skill_title }}
-                                </option>
-                            @endforeach
-                        </select>
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap">
-                        <select name="jcp_skills.{{ $index }}.required_rating" wire:model.defer="jcp_skills.{{ $index }}.required_rating" class="rounded-lg">
-                            <option selected>Choose a required rating</option>
-                            <option value="1">Not Competent</option>
-                            <option value="2">Basic Skills</option>
-                            <option value="3">Competent</option>
-                            <option value="4">Developed Skills</option>
-                            <option value="5">Expert</option>
-                        </select>
-                    </td>
-                    <td class="px-3">
-                        <a href='#' class="text-red-500" wire:click.prevent="removeSkill({{ $index }})">Delete</a>
-                    </td>
-                </tr>
-                @endforeach
+                    @foreach ($jcp_skills as $index => $skill)
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <select wire:model.defer="jcp_skills.{{ $index }}.skill_id" class="rounded-lg">
+                                    <option selected>Choose a skill</option>
+                                    @foreach ($skills as $availableSkill)
+                                        <option value="{{ $availableSkill->id }}">{{ $availableSkill->skill_title }}
+                                        </option>
+                                    @endforeach
+                                </select>
+                                <x-input-error for="jcp_skills.{{ $index }}.skill_id" class="mt-2" />
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <select wire:model.defer="jcp_skills.{{ $index }}.required_rating"
+                                    class="rounded-lg">
+                                    <option selected>Choose a required rating</option>
+                                    <option value="1">Not Competent</option>
+                                    <option value="2">Basic Skills</option>
+                                    <option value="3">Competent</option>
+                                    <option value="4">Developed Skills</option>
+                                    <option value="5">Expert</option>
+                                </select>
+                                <x-input-error for="jcp_skills.{{ $index }}.required_rating" class="mt-2" />
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <a href="#" class="text-red-500"
+                                    wire:click.prevent="removeSkill({{ $index }})">Delete</a>
+                            </td>
+                        </tr>
+                    @endforeach
                 </tbody>
             </table>
+            <x-button type="button" wire:click.prevent="addSkill" class="mt-4">
+                {{ __('Add Skill') }}
+            </x-button>
         </div>
-        @endif
-
     </x-slot>
 
     <x-slot name="actions">
-        @if($currentPage === 1)
-            <x-secondary-button wire:click.prevent='previousPage' class="ms-2" disabled>
-                {{ __('Previous') }}
-            </x-secondary-button>
-        @elseif($currentPage > 1)
-            <x-secondary-button wire:click.prevent='previousPage' class="ms-2">
-                {{ __('Previous') }}
-            </x-secondary-button>
-        @endif
-
-        @if($currentPage === count($pages))
-            <x-button wire:click='createJCPInformation'>
-                {{ __('Register JCP') }}
-            </x-button>
-        @else
-            <x-secondary-button wire:click.prevent='nextPage'>
-                {{ __('Next') }}
-            </x-secondary-button>
-        @endif
+        <x-button wire:click='createJCPInformation'>
+            {{ __('Register JCP') }}
+        </x-button>
     </x-slot>
 </x-form-section>
diff --git a/resources/views/livewire/system/jcps/j-c-p-table.blade.php b/resources/views/livewire/system/jcps/j-c-p-table.blade.php
index 483c603..ef21c5a 100644
--- a/resources/views/livewire/system/jcps/j-c-p-table.blade.php
+++ b/resources/views/livewire/system/jcps/j-c-p-table.blade.php
@@ -4,12 +4,12 @@
         <div class="flex">
 
             <div class="flex-initial w-full ...">
-                <input type="text" wire:model.live.debounce.300ms="search" placeholder="Search JCP directory..." class="mb-4 p-2 w-full border border-gray-300 rounded-md">
+                <input type="text" wire:model.live.debounce.300ms="search" placeholder="Search JCP directory..." class="mb-4 p-2 px-4 w-full border border-gray-300 rounded-r-md rounded-l-3xl">
 
             </div>
             <div class="flex-initial w-auto ml-3 mb-4">
 
-                <a href="{{route('jcp.create')}}" class="flex flex-row p-2 w-28 bg-indigo-400 hover:bg-indigo-500 text-white transition ease-in-out duration-300 rounded-md">
+                <a href="{{route('jcp.create')}}" class="flex flex-row p-2 w-28 bg-sky-200 hover:bg-sky-300 text-sky-800 transition ease-in-out duration-300 rounded-l-md rounded-r-3xl">
                     <x-gmdi-add-o class="w-6 h-6" />
                     Add JCP
                 </a>
@@ -19,24 +19,24 @@
           </div>
 
 
-<div class="rounded-lg border ">
+<div class="rounded-3xl border bg-white shadow-md ">
     <table class="table-auto min-w-full divide-y divide-gray-200 overflow-y-auto">
-        <thead class="bg-gray-50 text-left text-xs text-purple-950/50">
+        <thead class="text-left text-xs text-sky-800">
             <tr>
-                <th class="px-6 py-3  uppercase ">jcp Title</th>
-                <th class="px-6 py-3  uppercase ">Grade</th>
+                <th class="px-6 py-3 ">JCP Title</th>
+                <th class="px-6 py-3">Job Grade</th>
 
-                <th class="px-6 py-3  uppercase ">Description</th>
-                <th class="px-6 py-3 uppercase ">Is Active</th>
-                <th class="px-6 py-3 text-center uppercase ">Actions</th>
+                <th class="px-6 py-3">Description</th>
+                <th class="px-6 py-3">Is Active</th>
+                <th class="px-6 py-3 text-center">Actions</th>
 
 
                 <!-- Add more table headers as needed -->
             </tr>
         </thead>
-        <tbody class="bg-white divide-y divide-gray-200">
+        <tbody>
             @foreach ($jcps as $jcp)
-                <tr class="cursor-pointer hover:bg-gray-50" onclick="window.location.href = '#'">
+                <tr class="cursor-pointer hover:bg-gray-50 border-t" onclick="window.location.href = '#'">
                     <td class="px-6 py-4 whitespace-nowrap">
                             {{ $jcp->position_title }}
                     </td>
@@ -64,7 +64,7 @@
                                 </x-slot>
                                 <x-slot name="content">
                                     <!-- Directory Management -->
-                                    <x-dropdown-link href="{{ route('jcp.edit', ['jcp' =>Crypt::encrypt($jcp->id)]) }}">    
+                                    <x-dropdown-link href="{{ route('jcp.edit', ['jcp' =>Crypt::encrypt($jcp->id)]) }}">
                                         Edit
                                     </x-dropdown-link>