diff --git a/resources/views/approval/approve-form.blade.php b/resources/views/approval/approve-form.blade.php
new file mode 100644
index 0000000..6ab83d3
--- /dev/null
+++ b/resources/views/approval/approve-form.blade.php
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Request On Approve</title>
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+</head>
+<body style="font-family: Arial, sans-serif; background-color: #f4f4f4; margin:0; padding:0;">
+    <table width="100%" cellpadding="0" cellspacing="0" style="padding: 20px 0;">
+        <tr>
+            <td align="center">
+                <!-- Card container -->
+                <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); border: 1px solid #e0e0e0;">
+                    <tr>
+                        <td style="padding: 30px; text-align: center;">
+                            <!-- Header -->
+                            <div style="font-size: 35px;"></div>
+                            <h2 style="color: Green; margin: 10px 0 20px; font-size: 24px;">✔ Request On Approve</h2>
+
+                            <!-- Message -->
+                            {{-- <p style="font-size: 16px; color: #555555; line-height: 1.5;">
+                                Your request has been put on reject.
+                            </p> --}}
+
+                            <!-- Remark Textbox -->
+                            <div style="margin-top: 20px; text-align: left;">
+                                <label for="remark" style="font-size: 14px; color: #333;">Remark</label>
+                                <textarea id="remark" style="width:100%; height:100px; padding:10px; margin-top:5px; border:1px solid #ddd; border-radius:5px;"></textarea>
+                            </div>
+
+                            <!-- Buttons -->
+                            <div style="margin-top: 20px;">
+                                {{-- <button onclick="holdRequest()" style="padding: 10px 20px; margin-right: 10px; background-color:#FF8800; color:#fff; border:none; border-radius:5px; cursor:pointer;">
+                                    Hold
+                                </button> --}}
+                                <input type="hidden" id="requestId" value="{{ request()->query('id') }}">
+                                <input type="hidden" id="level" value="{{ request()->query('level') }}">
+
+                                <button onclick="saveRemark()" style="padding: 10px 20px; background-color:#4CAF50; color:#fff; border:none; border-radius:5px; cursor:pointer;">
+                                    Save Remark
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+
+                    <!-- Footer -->
+                    <tr>
+                        <td style="padding: 15px; text-align: center; font-size: 12px; color: #999999;">
+                            CRI Digital Manufacturing Solutions<br>
+                            &copy; 2026 All Rights Reserved
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+
+    <script>
+
+        function saveRemark() {
+            const remark = document.getElementById("remark").value.trim();
+            const id = document.getElementById("requestId").value;
+            const level = document.getElementById("level").value;
+
+            fetch('/characteristic/approve-save', {
+                method: 'POST',
+                credentials: 'same-origin',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
+                },
+                body: JSON.stringify({
+                    id: id,
+                    level: level,
+                    remark: remark
+                })
+            })
+            .then(res => {
+                if (!res.ok) {
+                    throw new Error("HTTP error " + res.status);
+                }
+                return res.json();
+            })
+            .then(data => {
+                alert('Approved saved successfully!');
+                window.location.href = "/approval/approve-success";
+            })
+            .catch(err => {
+                console.error(err);
+                alert('Error saving approve!');
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/resources/views/approval/approve-level.blade.php b/resources/views/approval/approve-level.blade.php
new file mode 100644
index 0000000..93fdd6e
--- /dev/null
+++ b/resources/views/approval/approve-level.blade.php
@@ -0,0 +1,99 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Action Time Reached</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: #f6f6f6;
+            padding: 20px;
+        }
+        .status {
+            margin-top: 15px;
+            padding: 10px;
+            border-radius: 6px;
+            font-weight: bold;
+            font-size: 16px;
+        }
+
+        .status.Approved {
+            background-color: #e8f5e9;
+            color: #2e7d32;
+        }
+
+        .status.Hold {
+            background-color: #fff3e0;
+            color: #ef6c00;
+        }
+
+        .status.Rejected {
+            background-color: #fdecea;
+            color: #c62828;
+        }
+        .approvelevel {
+            /* color: red; */
+            font-size: 18px;
+            font-weight: bold;
+        }
+
+        .card {
+            background: #ffffff;
+            padding: 20px;
+            max-width: 500px;
+            margin: 50px auto;
+            border-radius: 6px;
+            text-align: center;
+            box-shadow: 0 0 10px rgba(0,0,0,.1);
+        }
+        .success {
+            color: green;
+            font-size: 18px;
+            font-weight: bold;
+        }
+        .footer {
+            font-size: 12px;
+            color: #999999;
+            text-align: center;
+            margin-top: 20px;
+        }
+        .icon {
+            font-size: 30px;
+            margin-bottom: 10px;
+            color: #ff9800;
+        }
+
+        .approvelevel {
+            /* color: red; */
+            font-size: 18px;
+            font-weight: bold;
+        }
+        .status-message.expired {
+            color: #d84315;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+
+<div class="card">
+    <div class="approvelevel">⚠️ Action Expired</div>
+
+    <div class="status {{ $status }}">
+        Status:
+    <span class="status-message expired">
+        {{ $message ?? $status }}
+    </span>
+    </div>
+
+    {{-- <p>Your approval time limit has expired</p> --}}
+
+    <div class="footer">
+        CRI Digital Manufacturing Solutions<br>
+        &copy; 2026 All Rights Reserved
+    </div>
+</div>
+
+</body>
+</html>
+
diff --git a/resources/views/approval/approve-success.blade.php b/resources/views/approval/approve-success.blade.php
new file mode 100644
index 0000000..107143a
--- /dev/null
+++ b/resources/views/approval/approve-success.blade.php
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Approval</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: #f6f6f6;
+            padding: 20px;
+        }
+        .card {
+            background: #ffffff;
+            padding: 20px;
+            max-width: 500px;
+            margin: 50px auto;
+            border-radius: 6px;
+            text-align: center;
+            box-shadow: 0 0 10px rgba(0,0,0,.1);
+        }
+        .hold {
+            color: Green;
+            font-size: 18px;
+            font-weight: bold;
+        }
+        .footer {
+            font-size: 12px;
+            color: #999999;
+            text-align: center;
+            margin-top: 20px;
+        }
+        a.button {
+            display: inline-block;
+            margin-top: 15px;
+            padding: 10px 20px;
+            background-color: Green;
+            color: #ffffff;
+            text-decoration: none;
+            border-radius: 5px;
+            font-weight: bold;
+        }
+        .pulse-darkred {
+            color: Green;                /* #8B0000 */
+            background-color: #fff;        /* White bg for contrast */
+            display: inline-block;
+            padding: 0.5em 0.75em;
+            border-radius: 4px;
+            font-size: 1em;
+            line-height: 1;
+            animation: pulse 1.5s ease-in-out infinite;  /* Duration, easing, infinite loop */
+        }
+
+        @keyframes pulse {
+            0%, 100% {
+                transform: scale(1);
+            }
+            50% {
+                transform: scale(1.2);      /* Gentle 5% expansion */
+            }
+        }
+    </style>
+</head>
+<body>
+
+<div class="card">
+    <div class="hold"><span class="pulse-darkred">🟢</span> Approved Successfully</div>
+    <p>Your request has been approved.</p>
+
+    <!-- Footer -->
+    <div class="footer">
+        CRI Digital Manufacturing Solutions<br>
+        &copy; 2026 All Rights Reserved
+    </div>
+</div>
+
+</body>
+</html>
+
