diff --git a/EnvelopeGenerator.ReceiverUI/wwwroot/css/sender-page.css b/EnvelopeGenerator.ReceiverUI/wwwroot/css/sender-page.css
new file mode 100644
index 00000000..cff932bd
--- /dev/null
+++ b/EnvelopeGenerator.ReceiverUI/wwwroot/css/sender-page.css
@@ -0,0 +1,292 @@
+.sender-dashboard-layout {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ overflow: hidden;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
+}
+
+.sender-action-bar {
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(20px);
+ border-bottom: 3px solid rgba(126, 34, 206, 0.3);
+ padding: 1rem 2rem;
+ flex-shrink: 0;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.sender-action-bar__inner {
+ max-width: 1600px;
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1.5rem;
+}
+
+.sender-title-section {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.sender-logo svg {
+ filter: drop-shadow(0 2px 4px rgba(126, 34, 206, 0.3));
+ color: #7e22ce;
+}
+
+.sender-title {
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: #1e293b;
+ letter-spacing: -0.025em;
+}
+
+.sender-toolbar {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ flex-wrap: wrap;
+}
+
+.sender-btn {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.625rem 1.125rem;
+ background: linear-gradient(135deg, rgba(126, 34, 206, 0.05) 0%, rgba(42, 82, 152, 0.05) 100%);
+ border: 1px solid rgba(126, 34, 206, 0.2);
+ border-radius: 8px;
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: #1e293b;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ white-space: nowrap;
+}
+
+ .sender-btn:hover:not(:disabled) {
+ background: linear-gradient(135deg, rgba(126, 34, 206, 0.1) 0%, rgba(42, 82, 152, 0.1) 100%);
+ border-color: rgba(126, 34, 206, 0.4);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(126, 34, 206, 0.2);
+ }
+
+ .sender-btn:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ background: rgba(0, 0, 0, 0.02);
+ border-color: rgba(0, 0, 0, 0.1);
+ }
+
+.sender-btn--primary {
+ background: linear-gradient(135deg, #7e22ce 0%, #2a5298 100%);
+ border-color: transparent;
+ color: white;
+}
+
+ .sender-btn--primary:hover:not(:disabled) {
+ background: linear-gradient(135deg, #6b1cb0 0%, #1e3a72 100%);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 16px rgba(126, 34, 206, 0.3);
+ }
+
+.sender-btn--danger {
+ background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.08) 100%);
+ border-color: rgba(239, 68, 68, 0.3);
+ color: #dc2626;
+}
+
+ .sender-btn--danger:hover:not(:disabled) {
+ background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+ border-color: transparent;
+ color: white;
+ }
+
+.sender-btn--logout {
+ padding: 0.5rem;
+ min-width: 38px;
+}
+
+.sender-content {
+ flex: 1;
+ min-height: 0;
+ padding: 1.5rem;
+ position: relative;
+ overflow: auto;
+}
+
+.sender-grid-container {
+ background: rgba(255, 255, 255, 0.98);
+ backdrop-filter: blur(20px);
+ border-radius: 16px;
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
+ overflow: hidden;
+ position: relative;
+ max-width: 1600px;
+ margin: 0 auto;
+}
+
+ .sender-grid-container::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 4px;
+ background: linear-gradient(90deg, #7e22ce 0%, #2a5298 100%);
+ z-index: 1;
+ border-radius: 16px 16px 0 0;
+ }
+
+.sender-tabs {
+ display: flex;
+ border-bottom: 2px solid rgba(126, 34, 206, 0.1);
+ padding: 0 2rem;
+ background: rgba(126, 34, 206, 0.02);
+}
+
+.sender-tab {
+ padding: 1rem 1.5rem;
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: #6b7280;
+ background: transparent;
+ border: none;
+ border-bottom: 3px solid transparent;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ white-space: nowrap;
+}
+
+ .sender-tab:hover {
+ color: #7e22ce;
+ background: rgba(126, 34, 206, 0.05);
+ }
+
+.sender-tab--active {
+ color: #7e22ce;
+ border-bottom-color: #7e22ce;
+ background: white;
+}
+
+.sender-grid-wrapper {
+ padding: 1.5rem 2rem 2rem;
+}
+
+.status-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.375rem;
+ padding: 0.25rem 0.625rem;
+ border-radius: 6px;
+ font-size: 0.75rem;
+ font-weight: 600;
+ white-space: nowrap;
+}
+
+.status-badge--partly-signed,
+.status-badge--completed {
+ background: rgba(129, 199, 132, 0.15);
+ color: #2e7d32;
+}
+
+.status-badge--queued,
+.status-badge--sent {
+ background: rgba(255, 183, 77, 0.15);
+ color: #e65100;
+}
+
+.status-badge--deleted,
+.status-badge--rejected,
+.status-badge--withdrawn {
+ background: rgba(229, 115, 115, 0.15);
+ color: #c62828;
+}
+
+.status-badge--created,
+.status-badge--saved {
+ background: rgba(100, 181, 246, 0.15);
+ color: #1565c0;
+}
+
+.status-dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+}
+
+.status-dot--green {
+ background: #81c784;
+}
+
+.status-dot--orange {
+ background: #ffb74d;
+}
+
+.status-dot--red {
+ background: #e57373;
+}
+
+.status-dot--blue {
+ background: #64b5f6;
+}
+
+.receiver-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
+ padding: 0.125rem 0.5rem;
+ background: #f3f4f6;
+ border-radius: 4px;
+ font-size: 0.75rem;
+ color: #374151;
+ white-space: nowrap;
+}
+
+.receiver-badge--signed {
+ background: rgba(129, 199, 132, 0.15);
+ color: #2e7d32;
+}
+
+.receiver-badge--unsigned {
+ background: rgba(229, 115, 115, 0.15);
+ color: #c62828;
+}
+
+@@media (max-width: 768px) {
+ .sender-action-bar {
+ padding: 1rem 1.25rem;
+ }
+
+ .sender-action-bar__inner {
+ flex-wrap: wrap;
+ }
+
+ .sender-toolbar {
+ width: 100%;
+ justify-content: flex-start;
+ }
+
+ .sender-title {
+ font-size: 1.125rem;
+ }
+
+ .sender-content {
+ padding: 0.75rem;
+ }
+
+ .sender-grid-wrapper {
+ padding: 1rem;
+ }
+
+ .sender-tabs {
+ padding: 0 1rem;
+ overflow-x: auto;
+ }
+
+ .sender-tab {
+ padding: 0.875rem 1rem;
+ font-size: 0.813rem;
+ }
+}