From af4f09a67b3ab7966b0c9941e66fe10e8bc8c566 Mon Sep 17 00:00:00 2001
From: despiegk <kristof@incubaid.com>
Date: Tue, 22 Apr 2025 06:44:29 +0400
Subject: [PATCH] ...

---
 actix_mvc_app/src/controllers/contract.rs     |  60 ++-
 actix_mvc_app/src/controllers/flow.rs         |  36 +-
 actix_mvc_app/src/views/base.html             |   8 +-
 actix_mvc_app/src/views/calendar/index.html   |   2 +-
 .../src/views/calendar/new_event.html         |   2 +-
 .../src/views/contracts/contract_detail.html  |   2 +-
 .../src/views/contracts/contracts.html        |   2 +-
 .../src/views/contracts/create_contract.html  |   2 +-
 actix_mvc_app/src/views/contracts/index.html  |   2 +-
 .../src/views/contracts/my_contracts.html     |   2 +-
 .../src/views/flows/create_flow.html          | 159 ++++---
 .../src/views/flows/flow_detail.html          | 429 +++++++++---------
 actix_mvc_app/src/views/flows/flows.html      | 279 ++++++------
 actix_mvc_app/src/views/flows/index.html      |   5 +-
 actix_mvc_app/src/views/flows/my_flows.html   | 200 ++++----
 .../src/views/governance/create_proposal.html |   2 +-
 actix_mvc_app/src/views/governance/index.html |   2 -
 .../src/views/governance/my_votes.html        |   2 +-
 .../src/views/governance/proposal_detail.html |   2 +-
 .../src/views/governance/proposals.html       |   2 +-
 actix_mvc_app/src/views/tickets/show.html     |   2 +-
 21 files changed, 616 insertions(+), 586 deletions(-)

diff --git a/actix_mvc_app/src/controllers/contract.rs b/actix_mvc_app/src/controllers/contract.rs
index 18d14e4..d8578b6 100644
--- a/actix_mvc_app/src/controllers/contract.rs
+++ b/actix_mvc_app/src/controllers/contract.rs
@@ -62,9 +62,15 @@ impl ContractController {
         
         context.insert("draft_contracts", &draft_contracts);
         
-        Ok(HttpResponse::Ok().content_type("text/html").body(
-            tmpl.render("contracts/index.html", &context).unwrap()
-        ))
+        let rendered = tmpl.render("contracts/index.html", &context)
+            .map_err(|e| {
+                log::error!("Template rendering error: {}", e);
+                log::error!("Error details: {:?}", e);
+                log::error!("Context: {:?}", context);
+                actix_web::error::ErrorInternalServerError("Template rendering error")
+            })?;
+        
+        Ok(HttpResponse::Ok().content_type("text/html").body(rendered))
     }
     
     // Display the list of all contracts
@@ -83,9 +89,15 @@ impl ContractController {
         context.insert("contracts", &contracts_data);
         context.insert("filter", &"all");
         
-        Ok(HttpResponse::Ok().content_type("text/html").body(
-            tmpl.render("contracts/contracts.html", &context).unwrap()
-        ))
+        let rendered = tmpl.render("contracts/contracts.html", &context)
+            .map_err(|e| {
+                log::error!("Template rendering error: {}", e);
+                log::error!("Error details: {:?}", e);
+                log::error!("Context: {:?}", context);
+                actix_web::error::ErrorInternalServerError("Template rendering error")
+            })?;
+        
+        Ok(HttpResponse::Ok().content_type("text/html").body(rendered))
     }
     
     // Display the list of user's contracts
@@ -103,9 +115,15 @@ impl ContractController {
         
         context.insert("contracts", &contracts_data);
         
-        Ok(HttpResponse::Ok().content_type("text/html").body(
-            tmpl.render("contracts/my_contracts.html", &context).unwrap()
-        ))
+        let rendered = tmpl.render("contracts/my_contracts.html", &context)
+            .map_err(|e| {
+                log::error!("Template rendering error: {}", e);
+                log::error!("Error details: {:?}", e);
+                log::error!("Context: {:?}", context);
+                actix_web::error::ErrorInternalServerError("Template rendering error")
+            })?;
+        
+        Ok(HttpResponse::Ok().content_type("text/html").body(rendered))
     }
     
     // Display a specific contract
@@ -128,9 +146,15 @@ impl ContractController {
                 context.insert("contract", &contract_json);
                 context.insert("user_has_signed", &false); // Mock data
                 
-                Ok(HttpResponse::Ok().content_type("text/html").body(
-                    tmpl.render("contracts/contract_detail.html", &context).unwrap()
-                ))
+                let rendered = tmpl.render("contracts/contract_detail.html", &context)
+                    .map_err(|e| {
+                        log::error!("Template rendering error: {}", e);
+                        log::error!("Error details: {:?}", e);
+                        log::error!("Context: {:?}", context);
+                        actix_web::error::ErrorInternalServerError("Template rendering error")
+                    })?;
+                
+                Ok(HttpResponse::Ok().content_type("text/html").body(rendered))
             },
             None => {
                 Ok(HttpResponse::NotFound().finish())
@@ -156,9 +180,15 @@ impl ContractController {
         
         context.insert("contract_types", &contract_types);
         
-        Ok(HttpResponse::Ok().content_type("text/html").body(
-            tmpl.render("contracts/create_contract.html", &context).unwrap()
-        ))
+        let rendered = tmpl.render("contracts/create_contract.html", &context)
+            .map_err(|e| {
+                log::error!("Template rendering error: {}", e);
+                log::error!("Error details: {:?}", e);
+                log::error!("Context: {:?}", context);
+                actix_web::error::ErrorInternalServerError("Template rendering error")
+            })?;
+        
+        Ok(HttpResponse::Ok().content_type("text/html").body(rendered))
     }
     
     // Process the create contract form
diff --git a/actix_mvc_app/src/controllers/flow.rs b/actix_mvc_app/src/controllers/flow.rs
index 00b5b78..8df1f7f 100644
--- a/actix_mvc_app/src/controllers/flow.rs
+++ b/actix_mvc_app/src/controllers/flow.rs
@@ -27,9 +27,9 @@ impl FlowController {
         
         let rendered = tmpl.render("flows/index.html", &ctx)
             .map_err(|e| {
-                eprintln!("Template rendering error: {}", e);
-                eprintln!("Error details: {:?}", e);
-                eprintln!("Context: {:?}", ctx);
+                log::error!("Template rendering error: {}", e);
+                log::error!("Error details: {:?}", e);
+                log::error!("Context: {:?}", ctx);
                 actix_web::error::ErrorInternalServerError("Template rendering error")
             })?;
         
@@ -48,9 +48,9 @@ impl FlowController {
         
         let rendered = tmpl.render("flows/flows.html", &ctx)
             .map_err(|e| {
-                eprintln!("Template rendering error: {}", e);
-                eprintln!("Error details: {:?}", e);
-                eprintln!("Context: {:?}", ctx);
+                log::error!("Template rendering error: {}", e);
+                log::error!("Error details: {:?}", e);
+                log::error!("Context: {:?}", ctx);
                 actix_web::error::ErrorInternalServerError("Template rendering error")
             })?;
         
@@ -78,9 +78,9 @@ impl FlowController {
             
             let rendered = tmpl.render("flows/flow_detail.html", &ctx)
                 .map_err(|e| {
-                    eprintln!("Template rendering error: {}", e);
-                    eprintln!("Error details: {:?}", e);
-                    eprintln!("Context: {:?}", ctx);
+                    log::error!("Template rendering error: {}", e);
+                    log::error!("Error details: {:?}", e);
+                    log::error!("Context: {:?}", ctx);
                     actix_web::error::ErrorInternalServerError("Template rendering error")
                 })?;
             
@@ -91,9 +91,9 @@ impl FlowController {
             
             let rendered = tmpl.render("error.html", &ctx)
                 .map_err(|e| {
-                    eprintln!("Template rendering error: {}", e);
-                    eprintln!("Error details: {:?}", e);
-                    eprintln!("Context: {:?}", ctx);
+                    log::error!("Template rendering error: {}", e);
+                    log::error!("Error details: {:?}", e);
+                    log::error!("Context: {:?}", ctx);
                     actix_web::error::ErrorInternalServerError("Template rendering error")
                 })?;
             
@@ -111,9 +111,9 @@ impl FlowController {
         
         let rendered = tmpl.render("flows/create_flow.html", &ctx)
             .map_err(|e| {
-                eprintln!("Template rendering error: {}", e);
-                eprintln!("Error details: {:?}", e);
-                eprintln!("Context: {:?}", ctx);
+                log::error!("Template rendering error: {}", e);
+                log::error!("Error details: {:?}", e);
+                log::error!("Context: {:?}", ctx);
                 actix_web::error::ErrorInternalServerError("Template rendering error")
             })?;
         
@@ -150,9 +150,9 @@ impl FlowController {
             
             let rendered = tmpl.render("flows/my_flows.html", &ctx)
                 .map_err(|e| {
-                    eprintln!("Template rendering error: {}", e);
-                    eprintln!("Error details: {:?}", e);
-                    eprintln!("Context: {:?}", ctx);
+                    log::error!("Template rendering error: {}", e);
+                    log::error!("Error details: {:?}", e);
+                    log::error!("Context: {:?}", ctx);
                     actix_web::error::ErrorInternalServerError("Template rendering error")
                 })?;
             
diff --git a/actix_mvc_app/src/views/base.html b/actix_mvc_app/src/views/base.html
index 1986b06..516d2da 100644
--- a/actix_mvc_app/src/views/base.html
+++ b/actix_mvc_app/src/views/base.html
@@ -154,10 +154,10 @@
         <!-- Main Content -->
         <div class="main-content">
             <!-- Page Content -->
-            <main class="container py-3">
-            {% block content %}{% endblock %}
-        </main>
-
+            <main class="py-3 w-100">
+                <div class="container-fluid">
+                    {% block content %}{% endblock %}
+                </div>
             </main>
         </div>
     </div>
diff --git a/actix_mvc_app/src/views/calendar/index.html b/actix_mvc_app/src/views/calendar/index.html
index e4b325c..fcca452 100644
--- a/actix_mvc_app/src/views/calendar/index.html
+++ b/actix_mvc_app/src/views/calendar/index.html
@@ -3,7 +3,7 @@
 {% block title %}Calendar{% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="container-fluid">
     <h1>Calendar</h1>
     
     <p>View Mode: {{ view_mode }}</p>
diff --git a/actix_mvc_app/src/views/calendar/new_event.html b/actix_mvc_app/src/views/calendar/new_event.html
index 9dcf41f..cfcc9c8 100644
--- a/actix_mvc_app/src/views/calendar/new_event.html
+++ b/actix_mvc_app/src/views/calendar/new_event.html
@@ -3,7 +3,7 @@
 {% block title %}New Calendar Event{% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="container-fluid">
     <h1>Create New Event</h1>
     
     {% if error %}
diff --git a/actix_mvc_app/src/views/contracts/contract_detail.html b/actix_mvc_app/src/views/contracts/contract_detail.html
index 95d941c..ac8991e 100644
--- a/actix_mvc_app/src/views/contracts/contract_detail.html
+++ b/actix_mvc_app/src/views/contracts/contract_detail.html
@@ -3,7 +3,7 @@
 {% block title %}Contract Details{% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="container-fluid">
     <div class="row mb-4">
         <div class="col-12">
             <nav aria-label="breadcrumb">
diff --git a/actix_mvc_app/src/views/contracts/contracts.html b/actix_mvc_app/src/views/contracts/contracts.html
index bf2f8e8..05d2c53 100644
--- a/actix_mvc_app/src/views/contracts/contracts.html
+++ b/actix_mvc_app/src/views/contracts/contracts.html
@@ -3,7 +3,7 @@
 {% block title %}All Contracts{% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="container-fluid">
     <div class="row mb-4">
         <div class="col-12">
             <nav aria-label="breadcrumb">
diff --git a/actix_mvc_app/src/views/contracts/create_contract.html b/actix_mvc_app/src/views/contracts/create_contract.html
index 5195099..779b9df 100644
--- a/actix_mvc_app/src/views/contracts/create_contract.html
+++ b/actix_mvc_app/src/views/contracts/create_contract.html
@@ -3,7 +3,7 @@
 {% block title %}Create New Contract{% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="container-fluid">
     <div class="row mb-4">
         <div class="col-12">
             <nav aria-label="breadcrumb">
diff --git a/actix_mvc_app/src/views/contracts/index.html b/actix_mvc_app/src/views/contracts/index.html
index b64d40c..70baa18 100644
--- a/actix_mvc_app/src/views/contracts/index.html
+++ b/actix_mvc_app/src/views/contracts/index.html
@@ -3,7 +3,7 @@
 {% block title %}Contracts Dashboard{% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="container-fluid">
     <div class="row mb-4">
         <div class="col-12">
             <h1 class="display-5 mb-3">Contracts Dashboard</h1>
diff --git a/actix_mvc_app/src/views/contracts/my_contracts.html b/actix_mvc_app/src/views/contracts/my_contracts.html
index a24e4af..03024c4 100644
--- a/actix_mvc_app/src/views/contracts/my_contracts.html
+++ b/actix_mvc_app/src/views/contracts/my_contracts.html
@@ -3,7 +3,7 @@
 {% block title %}My Contracts{% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="container-fluid">
     <div class="row mb-4">
         <div class="col-12">
             <nav aria-label="breadcrumb">
diff --git a/actix_mvc_app/src/views/flows/create_flow.html b/actix_mvc_app/src/views/flows/create_flow.html
index da2801e..8f794db 100644
--- a/actix_mvc_app/src/views/flows/create_flow.html
+++ b/actix_mvc_app/src/views/flows/create_flow.html
@@ -3,100 +3,99 @@
 {% block title %}Create New Flow{% endblock %}
 
 {% block content %}
-<div class="container">
-    <div class="row mb-4">
-        <div class="col-12">
-            <nav aria-label="breadcrumb">
-                <ol class="breadcrumb">
-                    <li class="breadcrumb-item"><a href="/flows">Flows</a></li>
-                    <li class="breadcrumb-item active" aria-current="page">Create New Flow</li>
-                </ol>
-            </nav>
-        </div>
+<div class="row mb-4">
+    <div class="col-12">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="/flows">Flows</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Create New Flow</li>
+            </ol>
+        </nav>
     </div>
+</div>
 
-    <div class="row mb-4">
-        <div class="col-12">
-            <h1 class="display-5 mb-3">Create New Flow</h1>
-            <p class="lead">Start a new workflow process by filling out the form below.</p>
-        </div>
+<div class="row mb-4">
+    <div class="col-12">
+        <h1 class="display-5 mb-3">Create New Flow</h1>
+        <p class="lead">Start a new workflow process by filling out the form below.</p>
     </div>
+</div>
 
-    <div class="row">
-        <div class="col-lg-8">
-            <div class="card">
-                <div class="card-body">
-                    <form action="/flows/create" method="post">
-                        <!-- Flow Information -->
-                        <div class="mb-4">
-                            <h5>Flow Information</h5>
-                            <hr>
-                            <div class="mb-3">
-                                <label for="name" class="form-label">Flow Name</label>
-                                <input type="text" class="form-control" id="name" name="name" required>
-                                <div class="form-text">A descriptive name for the flow process.</div>
-                            </div>
-                            <div class="mb-3">
-                                <label for="description" class="form-label">Description</label>
-                                <textarea class="form-control" id="description" name="description" rows="3" required></textarea>
-                                <div class="form-text">Detailed description of the flow's purpose and expected outcome.</div>
-                            </div>
-                            <div class="mb-3">
-                                <label for="flow_type" class="form-label">Flow Type</label>
-                                <select class="form-select" id="flow_type" name="flow_type" required>
-                                    <option value="" selected disabled>Select a flow type</option>
-                                    <option value="CompanyRegistration">Company Registration</option>
-                                    <option value="UserOnboarding">User Onboarding</option>
-                                    <option value="ServiceActivation">Service Activation</option>
-                                    <option value="PaymentProcessing">Payment Processing</option>
-                                </select>
-                                <div class="form-text">The type of workflow process.</div>
-                            </div>
+<div class="row">
+    <div class="col-lg-8">
+        <div class="card">
+            <div class="card-body">
+                <form action="/flows/create" method="post">
+                    <!-- Flow Information -->
+                    <div class="mb-4">
+                        <h5>Flow Information</h5>
+                        <hr>
+                        <div class="mb-3">
+                            <label for="name" class="form-label">Flow Name</label>
+                            <input type="text" class="form-control" id="name" name="name" required>
+                            <div class="form-text">A descriptive name for the flow process.</div>
                         </div>
+                        <div class="mb-3">
+                            <label for="description" class="form-label">Description</label>
+                            <textarea class="form-control" id="description" name="description" rows="3" required></textarea>
+                            <div class="form-text">Detailed description of the flow's purpose and expected outcome.</div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="flow_type" class="form-label">Flow Type</label>
+                            <select class="form-select" id="flow_type" name="flow_type" required>
+                                <option value="" selected disabled>Select a flow type</option>
+                                <option value="CompanyRegistration">Company Registration</option>
+                                <option value="UserOnboarding">User Onboarding</option>
+                                <option value="ServiceActivation">Service Activation</option>
+                                <option value="PaymentProcessing">Payment Processing</option>
+                            </select>
+                            <div class="form-text">The type of workflow process.</div>
+                        </div>
+                    </div>
 
-                        <!-- Flow Steps -->
-                        <div class="mb-4">
-                            <h5>Flow Steps</h5>
-                            <hr>
-                            <div class="alert alert-info">
-                                <i class="bi bi-info-circle me-2"></i> Steps will be configured after creating the flow.
-                            </div>
+                    <!-- Flow Steps -->
+                    <div class="mb-4">
+                        <h5>Flow Steps</h5>
+                        <hr>
+                        <div class="alert alert-info">
+                            <i class="bi bi-info-circle me-2"></i> Steps will be configured after creating the flow.
                         </div>
+                    </div>
 
-                        <!-- Submit Button -->
-                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-                            <a href="/flows" class="btn btn-outline-secondary me-md-2">Cancel</a>
-                            <button type="submit" class="btn btn-primary">Create Flow</button>
-                        </div>
-                    </form>
-                </div>
+                    <!-- Submit Button -->
+                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+                        <a href="/flows" class="btn btn-outline-secondary me-md-2">Cancel</a>
+                        <button type="submit" class="btn btn-primary">Create Flow</button>
+                    </div>
+                </form>
             </div>
         </div>
-        <div class="col-lg-4">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="mb-0">Flow Types</h5>
+    </div>
+    <div class="col-lg-4">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="mb-0">Flow Types</h5>
+            </div>
+            <div class="card-body">
+                <div class="mb-3">
+                    <h6>Company Registration</h6>
+                    <p class="small text-muted">Process for registering a new company, including document submission, verification, and approval.</p>
                 </div>
-                <div class="card-body">
-                    <div class="mb-3">
-                        <h6>Company Registration</h6>
-                        <p class="small text-muted">Process for registering a new company, including document submission, verification, and approval.</p>
-                    </div>
-                    <div class="mb-3">
-                        <h6>User Onboarding</h6>
-                        <p class="small text-muted">Process for onboarding new users to the platform, including account setup and verification.</p>
-                    </div>
-                    <div class="mb-3">
-                        <h6>Service Activation</h6>
-                        <p class="small text-muted">Process for activating a service, including subscription selection and payment processing.</p>
-                    </div>
-                    <div class="mb-3">
-                        <h6>Payment Processing</h6>
-                        <p class="small text-muted">Process for handling payments, including verification, processing, and receipt generation.</p>
-                    </div>
+                <div class="mb-3">
+                    <h6>User Onboarding</h6>
+                    <p class="small text-muted">Process for onboarding new users to the platform, including account setup and verification.</p>
+                </div>
+                <div class="mb-3">
+                    <h6>Service Activation</h6>
+                    <p class="small text-muted">Process for activating a service, including subscription selection and payment processing.</p>
+                </div>
+                <div class="mb-3">
+                    <h6>Payment Processing</h6>
+                    <p class="small text-muted">Process for handling payments, including verification, processing, and receipt generation.</p>
                 </div>
             </div>
         </div>
     </div>
 </div>
+
 {% endblock %}
diff --git a/actix_mvc_app/src/views/flows/flow_detail.html b/actix_mvc_app/src/views/flows/flow_detail.html
index bb04333..d279ff7 100644
--- a/actix_mvc_app/src/views/flows/flow_detail.html
+++ b/actix_mvc_app/src/views/flows/flow_detail.html
@@ -3,245 +3,244 @@
 {% block title %}{{ flow.name }} - Flow Details{% endblock %}
 
 {% block content %}
-<div class="container">
-    <div class="row mb-4">
-        <div class="col-12">
-            <nav aria-label="breadcrumb">
-                <ol class="breadcrumb">
-                    <li class="breadcrumb-item"><a href="/flows">Flows</a></li>
-                    <li class="breadcrumb-item"><a href="/flows/list">All Flows</a></li>
-                    <li class="breadcrumb-item active" aria-current="page">{{ flow.name }}</li>
-                </ol>
-            </nav>
+<div class="row mb-4">
+    <div class="col-12">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="/flows">Flows</a></li>
+                <li class="breadcrumb-item"><a href="/flows/list">All Flows</a></li>
+                <li class="breadcrumb-item active" aria-current="page">{{ flow.name }}</li>
+            </ol>
+        </nav>
+    </div>
+</div>
+
+<!-- Success message if present -->
+{% if success %}
+<div class="row mb-4">
+    <div class="col-12">
+        <div class="alert alert-success alert-dismissible fade show" role="alert">
+            {{ success }}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         </div>
     </div>
+</div>
+{% endif %}
 
-    <!-- Success message if present -->
-    {% if success %}
-    <div class="row mb-4">
-        <div class="col-12">
-            <div class="alert alert-success alert-dismissible fade show" role="alert">
-                {{ success }}
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+<!-- Flow Overview -->
+<div class="row mb-4">
+    <div class="col-md-8">
+        <div class="card">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h4 class="mb-0">{{ flow.name }}</h4>
+                <span class="badge {% if flow.status == 'In Progress' %}bg-primary{% elif flow.status == 'Completed' %}bg-success{% elif flow.status == 'Stuck' %}bg-danger{% else %}bg-secondary{% endif %} p-2">
+                    {{ flow.status }}
+                </span>
             </div>
-        </div>
-    </div>
-    {% endif %}
-
-    <!-- Flow Overview -->
-    <div class="row mb-4">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header d-flex justify-content-between align-items-center">
-                    <h4 class="mb-0">{{ flow.name }}</h4>
-                    <span class="badge {% if flow.status == 'In Progress' %}bg-primary{% elif flow.status == 'Completed' %}bg-success{% elif flow.status == 'Stuck' %}bg-danger{% else %}bg-secondary{% endif %} p-2">
-                        {{ flow.status }}
-                    </span>
+            <div class="card-body">
+                <div class="mb-3">
+                    <h5>Description</h5>
+                    <p>{{ flow.description }}</p>
                 </div>
-                <div class="card-body">
-                    <div class="mb-3">
-                        <h5>Description</h5>
-                        <p>{{ flow.description }}</p>
+                <div class="row mb-3">
+                    <div class="col-md-6">
+                        <h5>Details</h5>
+                        <ul class="list-group list-group-flush">
+                            <li class="list-group-item d-flex justify-content-between">
+                                <span>Flow Type:</span>
+                                <span class="fw-bold">{{ flow.flow_type }}</span>
+                            </li>
+                            <li class="list-group-item d-flex justify-content-between">
+                                <span>Owner:</span>
+                                <span class="fw-bold">{{ flow.owner_name }}</span>
+                            </li>
+                            <li class="list-group-item d-flex justify-content-between">
+                                <span>Created:</span>
+                                <span class="fw-bold">{{ flow.created_at | date(format="%Y-%m-%d %H:%M") }}</span>
+                            </li>
+                            <li class="list-group-item d-flex justify-content-between">
+                                <span>Last Updated:</span>
+                                <span class="fw-bold">{{ flow.updated_at | date(format="%Y-%m-%d %H:%M") }}</span>
+                            </li>
+                            {% if flow.completed_at %}
+                            <li class="list-group-item d-flex justify-content-between">
+                                <span>Completed:</span>
+                                <span class="fw-bold">{{ flow.completed_at | date(format="%Y-%m-%d %H:%M") }}</span>
+                            </li>
+                            {% endif %}
+                        </ul>
                     </div>
-                    <div class="row mb-3">
-                        <div class="col-md-6">
-                            <h5>Details</h5>
-                            <ul class="list-group list-group-flush">
-                                <li class="list-group-item d-flex justify-content-between">
-                                    <span>Flow Type:</span>
-                                    <span class="fw-bold">{{ flow.flow_type }}</span>
-                                </li>
-                                <li class="list-group-item d-flex justify-content-between">
-                                    <span>Owner:</span>
-                                    <span class="fw-bold">{{ flow.owner_name }}</span>
-                                </li>
-                                <li class="list-group-item d-flex justify-content-between">
-                                    <span>Created:</span>
-                                    <span class="fw-bold">{{ flow.created_at | date(format="%Y-%m-%d %H:%M") }}</span>
-                                </li>
-                                <li class="list-group-item d-flex justify-content-between">
-                                    <span>Last Updated:</span>
-                                    <span class="fw-bold">{{ flow.updated_at | date(format="%Y-%m-%d %H:%M") }}</span>
-                                </li>
-                                {% if flow.completed_at %}
-                                <li class="list-group-item d-flex justify-content-between">
-                                    <span>Completed:</span>
-                                    <span class="fw-bold">{{ flow.completed_at | date(format="%Y-%m-%d %H:%M") }}</span>
-                                </li>
-                                {% endif %}
-                            </ul>
-                        </div>
-                        <div class="col-md-6">
-                            <h5>Progress</h5>
-                            <div class="progress mb-3" style="height: 25px;">
-                                <div class="progress-bar {% if flow.status == 'Completed' %}bg-success{% elif flow.status == 'Stuck' %}bg-danger{% else %}bg-primary{% endif %}" role="progressbar" 
-                                    style="width: {{ flow.progress_percentage }}%;" 
-                                    aria-valuenow="{{ flow.progress_percentage }}" 
-                                    aria-valuemin="0" 
-                                    aria-valuemax="100">
-                                    {{ flow.progress_percentage }}%
-                                </div>
+                    <div class="col-md-6">
+                        <h5>Progress</h5>
+                        <div class="progress mb-3" style="height: 25px;">
+                            <div class="progress-bar {% if flow.status == 'Completed' %}bg-success{% elif flow.status == 'Stuck' %}bg-danger{% else %}bg-primary{% endif %}" role="progressbar" 
+                                style="width: {{ flow.progress_percentage }}%;" 
+                                aria-valuenow="{{ flow.progress_percentage }}" 
+                                aria-valuemin="0" 
+                                aria-valuemax="100">
+                                {{ flow.progress_percentage }}%
                             </div>
-                            <p>
-                                <strong>Current Step:</strong>
-                                {% set current = flow.current_step %}
-                                {% if current %}
-                                    {{ current.name }}
+                        </div>
+                        <p>
+                            <strong>Current Step:</strong>
+                            {% set current = flow.current_step %}
+                            {% if current %}
+                                {{ current.name }}
+                            {% else %}
+                                {% if flow.status == 'Completed' %}
+                                    All steps completed
+                                {% elif flow.status == 'Cancelled' %}
+                                    Flow cancelled
                                 {% else %}
-                                    {% if flow.status == 'Completed' %}
-                                        All steps completed
-                                    {% elif flow.status == 'Cancelled' %}
-                                        Flow cancelled
-                                    {% else %}
-                                        No active step
-                                    {% endif %}
+                                    No active step
                                 {% endif %}
-                            </p>
-                        </div>
+                            {% endif %}
+                        </p>
                     </div>
                 </div>
             </div>
         </div>
-        <div class="col-md-4">
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h5 class="mb-0">Actions</h5>
-                </div>
-                <div class="card-body">
-                    {% if flow.status == 'In Progress' %}
-                    <div class="d-grid gap-2 mb-3">
-                        <form action="/flows/{{ flow.id }}/advance" method="post" id="advance">
-                            <button type="submit" class="btn btn-success w-100">
-                                <i class="bi bi-arrow-right-circle me-1"></i> Advance to Next Step
-                            </button>
-                        </form>
-                    </div>
-                    <div class="d-grid gap-2">
-                        <button type="button" class="btn btn-warning w-100" data-bs-toggle="modal" data-bs-target="#markStuckModal">
-                            <i class="bi bi-exclamation-triangle me-1"></i> Mark as Stuck
-                        </button>
-                    </div>
-                    {% elif flow.status == 'Stuck' %}
-                    <div class="d-grid gap-2">
-                        <form action="/flows/{{ flow.id }}/advance" method="post">
-                            <button type="submit" class="btn btn-success w-100">
-                                <i class="bi bi-arrow-right-circle me-1"></i> Resume Flow
-                            </button>
-                        </form>
-                    </div>
-                    {% else %}
-                    <p class="text-center text-muted">No actions available for {{ flow.status | lower }} flows.</p>
-                    {% endif %}
-                </div>
-            </div>
-            
-            {% if flow.steps | length > 0 %}
-            <div class="card">
-                <div class="card-header d-flex justify-content-between align-items-center">
-                    <h5 class="mb-0">Add Log to Current Step</h5>
-                </div>
-                <div class="card-body">
-                    {% set current = flow.current_step %}
-                    {% if current %}
-                        <form action="/flows/{{ flow.id }}/step/{{ current.id }}/log" method="post">
-                            <div class="mb-3">
-                                <label for="message" class="form-label">Log Message</label>
-                                <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
-                            </div>
-                            <div class="d-grid">
-                                <button type="submit" class="btn btn-primary">
-                                    <i class="bi bi-plus-circle me-1"></i> Add Log Entry
-                                </button>
-                            </div>
-                        </form>
-                    {% endif %}
-                </div>
-            </div>
-            {% endif %}
-        </div>
     </div>
-
-    <!-- Flow Steps -->
-    <div class="row mb-4">
-        <div class="col-12">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="mb-0">Flow Steps</h5>
+    <div class="col-md-4">
+        <div class="card mb-4">
+            <div class="card-header">
+                <h5 class="mb-0">Actions</h5>
+            </div>
+            <div class="card-body">
+                {% if flow.status == 'In Progress' %}
+                <div class="d-grid gap-2 mb-3">
+                    <form action="/flows/{{ flow.id }}/advance" method="post" id="advance">
+                        <button type="submit" class="btn btn-success w-100">
+                            <i class="bi bi-arrow-right-circle me-1"></i> Advance to Next Step
+                        </button>
+                    </form>
                 </div>
-                <div class="card-body">
-                    <div class="flow-steps">
-                        {% for step in flow.steps %}
-                        <div class="flow-step mb-4">
-                            <div class="card {% if step.status == 'In Progress' %}border-primary{% elif step.status == 'Completed' %}border-success{% elif step.status == 'Stuck' %}border-danger{% else %}border-secondary{% endif %}">
-                                <div class="card-header d-flex justify-content-between align-items-center {% if step.status == 'In Progress' %}bg-primary text-white{% elif step.status == 'Completed' %}bg-success text-white{% elif step.status == 'Stuck' %}bg-danger text-white{% else %}{% endif %}">
-                                    <h5 class="mb-0">Step {{ step.order + 1 }}: {{ step.name }}</h5>
-                                    <span class="badge {% if step.status == 'In Progress' %}bg-light text-primary{% elif step.status == 'Completed' %}bg-light text-success{% elif step.status == 'Stuck' %}bg-light text-danger{% else %}bg-light text-secondary{% endif %}">
-                                        {{ step.status }}
-                                    </span>
-                                </div>
-                                <div class="card-body">
-                                    <p>{{ step.description }}</p>
-                                    <div class="d-flex justify-content-between small text-muted mb-3">
-                                        {% if step.started_at %}
-                                        <span>Started: {{ step.started_at | date(format="%Y-%m-%d %H:%M") }}</span>
-                                        {% else %}
-                                        <span>Not started yet</span>
-                                        {% endif %}
-                                        
-                                        {% if step.completed_at %}
-                                        <span>Completed: {{ step.completed_at | date(format="%Y-%m-%d %H:%M") }}</span>
-                                        {% endif %}
-                                    </div>
-                                    
-                                    {% if step.logs|length > 0 %}
-                                    <h6>Logs</h6>
-                                    <div class="logs-container border rounded p-2 bg-light" style="max-height: 200px; overflow-y: auto;">
-                                        {% for log in step.logs %}
-                                        <div class="log-entry mb-2 pb-2 {% if not loop.last %}border-bottom{% endif %}">
-                                            <div class="d-flex justify-content-between">
-                                                <span class="fw-bold">{{ log.timestamp | date(format="%Y-%m-%d %H:%M:%S") }}</span>
-                                                <span class="text-muted small">ID: {{ log.id }}</span>
-                                            </div>
-                                            <p class="mb-0">{{ log.message }}</p>
-                                        </div>
-                                        {% endfor %}
-                                    </div>
+                <div class="d-grid gap-2">
+                    <button type="button" class="btn btn-warning w-100" data-bs-toggle="modal" data-bs-target="#markStuckModal">
+                        <i class="bi bi-exclamation-triangle me-1"></i> Mark as Stuck
+                    </button>
+                </div>
+                {% elif flow.status == 'Stuck' %}
+                <div class="d-grid gap-2">
+                    <form action="/flows/{{ flow.id }}/advance" method="post">
+                        <button type="submit" class="btn btn-success w-100">
+                            <i class="bi bi-arrow-right-circle me-1"></i> Resume Flow
+                        </button>
+                    </form>
+                </div>
+                {% else %}
+                <p class="text-center text-muted">No actions available for {{ flow.status | lower }} flows.</p>
+                {% endif %}
+            </div>
+        </div>
+        
+        {% if flow.steps | length > 0 %}
+        <div class="card">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h5 class="mb-0">Add Log to Current Step</h5>
+            </div>
+            <div class="card-body">
+                {% set current = flow.current_step %}
+                {% if current %}
+                    <form action="/flows/{{ flow.id }}/step/{{ current.id }}/log" method="post">
+                        <div class="mb-3">
+                            <label for="message" class="form-label">Log Message</label>
+                            <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
+                        </div>
+                        <div class="d-grid">
+                            <button type="submit" class="btn btn-primary">
+                                <i class="bi bi-plus-circle me-1"></i> Add Log Entry
+                            </button>
+                        </div>
+                    </form>
+                {% endif %}
+            </div>
+        </div>
+        {% endif %}
+    </div>
+</div>
+
+<!-- Flow Steps -->
+<div class="row mb-4">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="mb-0">Flow Steps</h5>
+            </div>
+            <div class="card-body">
+                <div class="flow-steps">
+                    {% for step in flow.steps %}
+                    <div class="flow-step mb-4">
+                        <div class="card {% if step.status == 'In Progress' %}border-primary{% elif step.status == 'Completed' %}border-success{% elif step.status == 'Stuck' %}border-danger{% else %}border-secondary{% endif %}">
+                            <div class="card-header d-flex justify-content-between align-items-center {% if step.status == 'In Progress' %}bg-primary text-white{% elif step.status == 'Completed' %}bg-success text-white{% elif step.status == 'Stuck' %}bg-danger text-white{% else %}{% endif %}">
+                                <h5 class="mb-0">Step {{ step.order + 1 }}: {{ step.name }}</h5>
+                                <span class="badge {% if step.status == 'In Progress' %}bg-light text-primary{% elif step.status == 'Completed' %}bg-light text-success{% elif step.status == 'Stuck' %}bg-light text-danger{% else %}bg-light text-secondary{% endif %}">
+                                    {{ step.status }}
+                                </span>
+                            </div>
+                            <div class="card-body">
+                                <p>{{ step.description }}</p>
+                                <div class="d-flex justify-content-between small text-muted mb-3">
+                                    {% if step.started_at %}
+                                    <span>Started: {{ step.started_at | date(format="%Y-%m-%d %H:%M") }}</span>
                                     {% else %}
-                                    <p class="text-muted">No logs for this step.</p>
+                                    <span>Not started yet</span>
+                                    {% endif %}
+                                    
+                                    {% if step.completed_at %}
+                                    <span>Completed: {{ step.completed_at | date(format="%Y-%m-%d %H:%M") }}</span>
                                     {% endif %}
                                 </div>
+                                
+                                {% if step.logs|length > 0 %}
+                                <h6>Logs</h6>
+                                <div class="logs-container border rounded p-2 bg-light" style="max-height: 200px; overflow-y: auto;">
+                                    {% for log in step.logs %}
+                                    <div class="log-entry mb-2 pb-2 {% if not loop.last %}border-bottom{% endif %}">
+                                        <div class="d-flex justify-content-between">
+                                            <span class="fw-bold">{{ log.timestamp | date(format="%Y-%m-%d %H:%M:%S") }}</span>
+                                            <span class="text-muted small">ID: {{ log.id }}</span>
+                                        </div>
+                                        <p class="mb-0">{{ log.message }}</p>
+                                    </div>
+                                    {% endfor %}
+                                </div>
+                                {% else %}
+                                <p class="text-muted">No logs for this step.</p>
+                                {% endif %}
                             </div>
                         </div>
-                        {% endfor %}
                     </div>
+                    {% endfor %}
                 </div>
             </div>
         </div>
     </div>
-
-    <!-- Mark as Stuck Modal -->
-    <div class="modal fade" id="markStuckModal" tabindex="-1" aria-labelledby="markStuckModalLabel" aria-hidden="true">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <form action="/flows/{{ flow.id }}/stuck" method="post">
-                    <div class="modal-header">
-                        <h5 class="modal-title" id="markStuckModalLabel">Mark Flow as Stuck</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                    </div>
-                    <div class="modal-body">
-                        <div class="mb-3">
-                            <label for="reason" class="form-label">Reason</label>
-                            <textarea class="form-control" id="reason" name="reason" rows="3" required></textarea>
-                            <div class="form-text">Please provide a detailed explanation of why this flow is stuck.</div>
-                        </div>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                        <button type="submit" class="btn btn-warning">Mark as Stuck</button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
 </div>
+
+<!-- Mark as Stuck Modal -->
+<div class="modal fade" id="markStuckModal" tabindex="-1" aria-labelledby="markStuckModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <form action="/flows/{{ flow.id }}/stuck" method="post">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="markStuckModalLabel">Mark Flow as Stuck</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label for="reason" class="form-label">Reason</label>
+                        <textarea class="form-control" id="reason" name="reason" rows="3" required></textarea>
+                        <div class="form-text">Please provide a detailed explanation of why this flow is stuck.</div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-warning">Mark as Stuck</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
 {% endblock %}
diff --git a/actix_mvc_app/src/views/flows/flows.html b/actix_mvc_app/src/views/flows/flows.html
index 55ca568..f8e1309 100644
--- a/actix_mvc_app/src/views/flows/flows.html
+++ b/actix_mvc_app/src/views/flows/flows.html
@@ -3,151 +3,154 @@
 {% block title %}All Flows{% endblock %}
 
 {% block content %}
-<div class="container">
-    <div class="row mb-4">
-        <div class="col-12">
-            <nav aria-label="breadcrumb">
-                <ol class="breadcrumb">
-                    <li class="breadcrumb-item"><a href="/flows">Flows</a></li>
-                    <li class="breadcrumb-item active" aria-current="page">All Flows</li>
-                </ol>
-            </nav>
-        </div>
+<div class="row mb-4">
+    <div class="col-12">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="/flows">Flows</a></li>
+                <li class="breadcrumb-item active" aria-current="page">All Flows</li>
+            </ol>
+        </nav>
     </div>
+</div>
 
-    <div class="row mb-4">
-        <div class="col-md-8">
-            <h1 class="display-5 mb-0">All Flows</h1>
-        </div>
-        <div class="col-md-4 text-md-end">
-            <a href="/flows/create" class="btn btn-primary">
-                <i class="bi bi-plus-circle me-1"></i> Create New Flow
-            </a>
-        </div>
+<div class="row mb-4">
+    <div class="col-md-8">
+        <h1 class="display-5 mb-0">All Flows</h1>
     </div>
-
-    <!-- Filter Controls -->
-    <div class="row mb-4">
-        <div class="col-12">
-            <div class="card">
-                <div class="card-body">
-                    <form class="row g-3" action="/flows/list" method="get">
-                        <div class="col-md-4">
-                            <label for="status" class="form-label">Status</label>
-                            <select class="form-select" id="status" name="status">
-                                <option value="all" selected>All</option>
-                                <option value="in_progress">In Progress</option>
-                                <option value="completed">Completed</option>
-                                <option value="stuck">Stuck</option>
-                                <option value="cancelled">Cancelled</option>
-                            </select>
-                        </div>
-                        <div class="col-md-4">
-                            <label for="type" class="form-label">Type</label>
-                            <select class="form-select" id="type" name="type">
-                                <option value="all" selected>All</option>
-                                <option value="company_registration">Company Registration</option>
-                                <option value="user_onboarding">User Onboarding</option>
-                                <option value="service_activation">Service Activation</option>
-                                <option value="payment_processing">Payment Processing</option>
-                            </select>
-                        </div>
-                        <div class="col-md-4">
-                            <label for="search" class="form-label">Search</label>
-                            <input type="text" class="form-control" id="search" name="search" placeholder="Search flows...">
-                        </div>
-                        <div class="col-12 text-end">
-                            <button type="submit" class="btn btn-primary">
-                                <i class="bi bi-filter me-1"></i> Apply Filters
-                            </button>
-                            <a href="/flows/list" class="btn btn-outline-secondary">
-                                <i class="bi bi-x-circle me-1"></i> Clear Filters
-                            </a>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
+    <div class="col-md-4 text-md-end">
+        <a href="/flows/create" class="btn btn-primary">
+            <i class="bi bi-plus-circle me-1"></i> Create New Flow
+        </a>
     </div>
+</div>
 
-    <!-- Flows Table -->
-    <div class="row">
-        <div class="col-12">
-            <div class="card">
-                <div class="card-body">
-                    {% if flows|length > 0 %}
-                    <div class="table-responsive">
-                        <table class="table table-hover">
-                            <thead>
-                                <tr>
-                                    <th>Flow Name</th>
-                                    <th>Type</th>
-                                    <th>Status</th>
-                                    <th>Owner</th>
-                                    <th>Progress</th>
-                                    <th>Created</th>
-                                    <th>Updated</th>
-                                    <th>Current Step</th>
-                                    <th>Actions</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {% for flow in flows %}
-                                <tr>
-                                    <td>
-                                        <a href="/flows/{{ flow.id }}">{{ flow.name }}</a>
-                                    </td>
-                                    <td>{{ flow.flow_type }}</td>
-                                    <td>
-                                        <span class="badge {% if flow.status == 'In Progress' %}bg-primary{% elif flow.status == 'Completed' %}bg-success{% elif flow.status == 'Stuck' %}bg-danger{% else %}bg-secondary{% endif %}">
-                                            {{ flow.status }}
-                                        </span>
-                                    </td>
-                                    <td>{{ flow.owner_name }}</td>
-                                    <td>
-                                        <div class="progress mb-2" style="height: 20px;">
-                                            <div class="progress-bar {% if flow.status == 'Completed' %}bg-success{% elif flow.status == 'Stuck' %}bg-danger{% else %}bg-primary{% endif %}" role="progressbar" style="width: {{ flow.progress_percentage }}%;" aria-valuenow="{{ flow.progress_percentage }}" aria-valuemin="0" aria-valuemax="100">{{ flow.progress_percentage }}%</div>
-                                        </div>
-                                    </td>
-                                    <td>{{ flow.created_at | date(format="%Y-%m-%d") }}</td>
-                                    <td>{{ flow.updated_at | date(format="%Y-%m-%d") }}</td>
-                                    <td>
-                                        {% set current = flow.current_step %}
-                                        {% if current %}
-                                            {{ current.name }}
-                                        {% else %}
-                                            {% if flow.status == 'Completed' %}
-                                                All steps completed
-                                            {% elif flow.status == 'Cancelled' %}
-                                                Flow cancelled
-                                            {% else %}
-                                                No active step
-                                            {% endif %}
-                                        {% endif %}
-                                    </td>
-                                    <td>
-                                        <div class="btn-group">
-                                            <a href="/flows/{{ flow.id }}" class="btn btn-sm btn-primary">
-                                                <i class="bi bi-eye"></i>
-                                            </a>
-                                            {% if flow.status == 'In Progress' %}
-                                            <a href="/flows/{{ flow.id }}#advance" class="btn btn-sm btn-success">
-                                                <i class="bi bi-arrow-right"></i>
-                                            </a>
-                                            {% endif %}
-                                        </div>
-                                    </td>
-                                </tr>
-                                {% endfor %}
-                            </tbody>
-                        </table>
+<!-- Filter Controls -->
+<div class="row mb-4">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+                <form class="row g-3" action="/flows/list" method="get">
+                    <div class="col-md-4">
+                        <label for="status" class="form-label">Status</label>
+                        <select class="form-select" id="status" name="status">
+                            <option value="all" selected>All</option>
+                            <option value="in_progress">In Progress</option>
+                            <option value="completed">Completed</option>
+                            <option value="stuck">Stuck</option>
+                            <option value="cancelled">Cancelled</option>
+                        </select>
                     </div>
-                    {% else %}
-                    <p class="text-center">No flows found matching your criteria.</p>
-                    {% endif %}
-                </div>
+                    <div class="col-md-4">
+                        <label for="type" class="form-label">Type</label>
+                        <select class="form-select" id="type" name="type">
+                            <option value="all" selected>All</option>
+                            <option value="company_registration">Company Registration</option>
+                            <option value="user_onboarding">User Onboarding</option>
+                            <option value="service_activation">Service Activation</option>
+                            <option value="payment_processing">Payment Processing</option>
+                        </select>
+                    </div>
+                    <div class="col-md-4">
+                        <label for="search" class="form-label">Search</label>
+                        <input type="text" class="form-control" id="search" name="search" placeholder="Search flows...">
+                    </div>
+                    <div class="col-12 text-end">
+                        <button type="submit" class="btn btn-primary">
+                            <i class="bi bi-filter me-1"></i> Apply Filters
+                        </button>
+                        <a href="/flows/list" class="btn btn-outline-secondary">
+                            <i class="bi bi-x-circle me-1"></i> Clear Filters
+                        </a>
+                    </div>
+                </form>
             </div>
         </div>
     </div>
 </div>
-{% endblock %}
+
+<!-- Flows Table -->
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+                {% if flows|length > 0 %}
+                <div class="table-responsive">
+                    <table class="table table-hover">
+                        <thead>
+                            <tr>
+                                <th>Flow Name</th>
+                                <th>Type</th>
+                                <th>Status</th>
+                                <th>Owner</th>
+                                <th>Progress</th>
+                                <th>Created</th>
+                                <th>Updated</th>
+                                <th>Current Step</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for flow in flows %}
+                            <tr>
+                                <td>
+                                    <a href="/flows/{{ flow.id }}">{{ flow.name }}</a>
+                                </td>
+                                <td>{{ flow.flow_type }}</td>
+                                <td>
+                                    <span
+                                        class="badge {% if flow.status == 'In Progress' %}bg-primary{% elif flow.status == 'Completed' %}bg-success{% elif flow.status == 'Stuck' %}bg-danger{% else %}bg-secondary{% endif %}">
+                                        {{ flow.status }}
+                                    </span>
+                                </td>
+                                <td>{{ flow.owner_name }}</td>
+                                <td>
+                                    <div class="progress mb-2" style="height: 20px;">
+                                        <div class="progress-bar {% if flow.status == 'Completed' %}bg-success{% elif flow.status == 'Stuck' %}bg-danger{% else %}bg-primary{% endif %}"
+                                            role="progressbar" style="width: {{ flow.progress_percentage }}%;"
+                                            aria-valuenow="{{ flow.progress_percentage }}" aria-valuemin="0"
+                                            aria-valuemax="100">{{ flow.progress_percentage }}%</div>
+                                    </div>
+                                </td>
+                                <td>{{ flow.created_at | date(format="%Y-%m-%d") }}</td>
+                                <td>{{ flow.updated_at | date(format="%Y-%m-%d") }}</td>
+                                <td>
+                                    {% set current = flow.current_step %}
+                                    {% if current %}
+                                    {{ current.name }}
+                                    {% else %}
+                                    {% if flow.status == 'Completed' %}
+                                    All steps completed
+                                    {% elif flow.status == 'Cancelled' %}
+                                    Flow cancelled
+                                    {% else %}
+                                    No active step
+                                    {% endif %}
+                                    {% endif %}
+                                </td>
+                                <td>
+                                    <div class="btn-group">
+                                        <a href="/flows/{{ flow.id }}" class="btn btn-sm btn-primary">
+                                            <i class="bi bi-eye"></i>
+                                        </a>
+                                        {% if flow.status == 'In Progress' %}
+                                        <a href="/flows/{{ flow.id }}#advance" class="btn btn-sm btn-success">
+                                            <i class="bi bi-arrow-right"></i>
+                                        </a>
+                                        {% endif %}
+                                    </div>
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+                {% else %}
+                <p class="text-center">No flows found matching your criteria.</p>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}
\ No newline at end of file
diff --git a/actix_mvc_app/src/views/flows/index.html b/actix_mvc_app/src/views/flows/index.html
index 3c2e665..8fd9cee 100644
--- a/actix_mvc_app/src/views/flows/index.html
+++ b/actix_mvc_app/src/views/flows/index.html
@@ -3,7 +3,6 @@
 {% block title %}Flows Dashboard{% endblock %}
 
 {% block content %}
-<div class="container">
     <div class="row mb-4">
         <div class="col-12">
             <h1 class="display-5 mb-3">Flows Dashboard</h1>
@@ -70,5 +69,5 @@
             </div>
         </div>
     </div>
-</div>
-{% endblock %}
+
+{% endblock %}
\ No newline at end of file
diff --git a/actix_mvc_app/src/views/flows/my_flows.html b/actix_mvc_app/src/views/flows/my_flows.html
index a4ceecf..3950628 100644
--- a/actix_mvc_app/src/views/flows/my_flows.html
+++ b/actix_mvc_app/src/views/flows/my_flows.html
@@ -3,112 +3,114 @@
 {% block title %}My Flows{% endblock %}
 
 {% block content %}
-<div class="container">
-    <div class="row mb-4">
-        <div class="col-12">
-            <nav aria-label="breadcrumb">
-                <ol class="breadcrumb">
-                    <li class="breadcrumb-item"><a href="/flows">Flows</a></li>
-                    <li class="breadcrumb-item active" aria-current="page">My Flows</li>
-                </ol>
-            </nav>
-        </div>
+<div class="row mb-4">
+    <div class="col-12">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="/flows">Flows</a></li>
+                <li class="breadcrumb-item active" aria-current="page">My Flows</li>
+            </ol>
+        </nav>
     </div>
+</div>
 
-    <div class="row mb-4">
-        <div class="col-md-8">
-            <h1 class="display-5 mb-0">My Flows</h1>
-        </div>
-        <div class="col-md-4 text-md-end">
-            <a href="/flows/create" class="btn btn-primary">
-                <i class="bi bi-plus-circle me-1"></i> Create New Flow
-            </a>
-        </div>
+<div class="row mb-4">
+    <div class="col-md-8">
+        <h1 class="display-5 mb-0">My Flows</h1>
     </div>
+    <div class="col-md-4 text-md-end">
+        <a href="/flows/create" class="btn btn-primary">
+            <i class="bi bi-plus-circle me-1"></i> Create New Flow
+        </a>
+    </div>
+</div>
 
-    <!-- Flows Table -->
-    <div class="row">
-        <div class="col-12">
-            <div class="card">
-                <div class="card-body">
-                    {% if flows|length > 0 %}
-                    <div class="table-responsive">
-                        <table class="table table-hover">
-                            <thead>
-                                <tr>
-                                    <th>Flow Name</th>
-                                    <th>Type</th>
-                                    <th>Status</th>
-                                    <th>Progress</th>
-                                    <th>Current Step</th>
-                                    <th>Created</th>
-                                    <th>Updated</th>
-                                    <th>Actions</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {% for flow in flows %}
-                                <tr>
-                                    <td>
-                                        <a href="/flows/{{ flow.id }}">{{ flow.name }}</a>
-                                    </td>
-                                    <td>{{ flow.flow_type }}</td>
-                                    <td>
-                                        <span class="badge {% if flow.status == 'In Progress' %}bg-primary{% elif flow.status == 'Completed' %}bg-success{% elif flow.status == 'Stuck' %}bg-danger{% else %}bg-secondary{% endif %}">
-                                            {{ flow.status }}
-                                        </span>
-                                    </td>
-                                    <td>
-                                        <div class="progress mb-2" style="height: 20px;">
-                                            <div class="progress-bar {% if flow.status == 'Completed' %}bg-success{% elif flow.status == 'Stuck' %}bg-danger{% else %}bg-primary{% endif %}" role="progressbar" style="width: {{ flow.progress_percentage }}%;" aria-valuenow="{{ flow.progress_percentage }}" aria-valuemin="0" aria-valuemax="100">{{ flow.progress_percentage }}%</div>
-                                        </div>
-                                    </td>
-                                    <td>
-                                        {% set current = flow.current_step %}
-                                        {% if current %}
-                                            {{ current.name }}
-                                        {% else %}
-                                            {% if flow.status == 'Completed' %}
-                                                All steps completed
-                                            {% elif flow.status == 'Cancelled' %}
-                                                Flow cancelled
-                                            {% else %}
-                                                No active step
-                                            {% endif %}
+<!-- Flows Table -->
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+                {% if flows|length > 0 %}
+                <div class="table-responsive">
+                    <table class="table table-hover">
+                        <thead>
+                            <tr>
+                                <th>Flow Name</th>
+                                <th>Type</th>
+                                <th>Status</th>
+                                <th>Progress</th>
+                                <th>Current Step</th>
+                                <th>Created</th>
+                                <th>Updated</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for flow in flows %}
+                            <tr>
+                                <td>
+                                    <a href="/flows/{{ flow.id }}">{{ flow.name }}</a>
+                                </td>
+                                <td>{{ flow.flow_type }}</td>
+                                <td>
+                                    <span
+                                        class="badge {% if flow.status == 'In Progress' %}bg-primary{% elif flow.status == 'Completed' %}bg-success{% elif flow.status == 'Stuck' %}bg-danger{% else %}bg-secondary{% endif %}">
+                                        {{ flow.status }}
+                                    </span>
+                                </td>
+                                <td>
+                                    <div class="progress mb-2" style="height: 20px;">
+                                        <div class="progress-bar {% if flow.status == 'Completed' %}bg-success{% elif flow.status == 'Stuck' %}bg-danger{% else %}bg-primary{% endif %}"
+                                            role="progressbar" style="width: {{ flow.progress_percentage }}%;"
+                                            aria-valuenow="{{ flow.progress_percentage }}" aria-valuemin="0"
+                                            aria-valuemax="100">{{ flow.progress_percentage }}%</div>
+                                    </div>
+                                </td>
+                                <td>
+                                    {% set current = flow.current_step %}
+                                    {% if current %}
+                                    {{ current.name }}
+                                    {% else %}
+                                    {% if flow.status == 'Completed' %}
+                                    All steps completed
+                                    {% elif flow.status == 'Cancelled' %}
+                                    Flow cancelled
+                                    {% else %}
+                                    No active step
+                                    {% endif %}
+                                    {% endif %}
+                                </td>
+                                <td>{{ flow.created_at | date(format="%Y-%m-%d") }}</td>
+                                <td>{{ flow.updated_at | date(format="%Y-%m-%d") }}</td>
+                                <td>
+                                    <div class="btn-group">
+                                        <a href="/flows/{{ flow.id }}" class="btn btn-sm btn-primary">
+                                            <i class="bi bi-eye"></i>
+                                        </a>
+                                        {% if flow.status == 'In Progress' %}
+                                        <a href="/flows/{{ flow.id }}#advance" class="btn btn-sm btn-success">
+                                            <i class="bi bi-arrow-right"></i>
+                                        </a>
                                         {% endif %}
-                                    </td>
-                                    <td>{{ flow.created_at | date(format="%Y-%m-%d") }}</td>
-                                    <td>{{ flow.updated_at | date(format="%Y-%m-%d") }}</td>
-                                    <td>
-                                        <div class="btn-group">
-                                            <a href="/flows/{{ flow.id }}" class="btn btn-sm btn-primary">
-                                                <i class="bi bi-eye"></i>
-                                            </a>
-                                            {% if flow.status == 'In Progress' %}
-                                            <a href="/flows/{{ flow.id }}#advance" class="btn btn-sm btn-success">
-                                                <i class="bi bi-arrow-right"></i>
-                                            </a>
-                                            {% endif %}
-                                        </div>
-                                    </td>
-                                </tr>
-                                {% endfor %}
-                            </tbody>
-                        </table>
-                    </div>
-                    {% else %}
-                    <div class="text-center py-5">
-                        <i class="bi bi-diagram-3 display-1 text-muted"></i>
-                        <h4 class="mt-3">You don't have any flows yet</h4>
-                        <p class="text-muted">Create a new flow to get started with tracking your processes.</p>
-                        <a href="/flows/create" class="btn btn-primary mt-2">
-                            <i class="bi bi-plus-circle me-1"></i> Create New Flow
-                        </a>
-                    </div>
-                    {% endif %}
+                                    </div>
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
                 </div>
+                {% else %}
+                <div class="text-center py-5">
+                    <i class="bi bi-diagram-3 display-1 text-muted"></i>
+                    <h4 class="mt-3">You don't have any flows yet</h4>
+                    <p class="text-muted">Create a new flow to get started with tracking your processes.</p>
+                    <a href="/flows/create" class="btn btn-primary mt-2">
+                        <i class="bi bi-plus-circle me-1"></i> Create New Flow
+                    </a>
+                </div>
+                {% endif %}
             </div>
         </div>
     </div>
 </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/actix_mvc_app/src/views/governance/create_proposal.html b/actix_mvc_app/src/views/governance/create_proposal.html
index 4e3e043..eb91862 100644
--- a/actix_mvc_app/src/views/governance/create_proposal.html
+++ b/actix_mvc_app/src/views/governance/create_proposal.html
@@ -3,7 +3,7 @@
 {% block title %}Create Proposal - Governance Dashboard{% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="container-fluid">
     <div class="row mb-4">
         <div class="col-12">
             <h1 class="display-5 mb-4">Create Governance Proposal</h1>
diff --git a/actix_mvc_app/src/views/governance/index.html b/actix_mvc_app/src/views/governance/index.html
index 62bdf26..bdf50f1 100644
--- a/actix_mvc_app/src/views/governance/index.html
+++ b/actix_mvc_app/src/views/governance/index.html
@@ -3,7 +3,6 @@
 {% block title %}Governance Dashboard - Actix MVC App{% endblock %}
 
 {% block content %}
-<div class="container">
     <div class="row mb-4">
         <div class="col-12">
             <h1 class="display-5 mb-4">Governance Dashboard</h1>
@@ -160,5 +159,4 @@
             </div>
         </div>
     </div>
-</div>
 {% endblock %}
diff --git a/actix_mvc_app/src/views/governance/my_votes.html b/actix_mvc_app/src/views/governance/my_votes.html
index 3d7ad0b..11b9120 100644
--- a/actix_mvc_app/src/views/governance/my_votes.html
+++ b/actix_mvc_app/src/views/governance/my_votes.html
@@ -3,7 +3,7 @@
 {% block title %}My Votes - Governance Dashboard{% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="container-fluid">
     <div class="row mb-4">
         <div class="col-12">
             <h1 class="display-5 mb-4">My Votes</h1>
diff --git a/actix_mvc_app/src/views/governance/proposal_detail.html b/actix_mvc_app/src/views/governance/proposal_detail.html
index ae27a6c..e2506c5 100644
--- a/actix_mvc_app/src/views/governance/proposal_detail.html
+++ b/actix_mvc_app/src/views/governance/proposal_detail.html
@@ -3,7 +3,7 @@
 {% block title %}{{ proposal.title }} - Governance Proposal{% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="container-fluid">
     <div class="row mb-4">
         <div class="col-12">
             <nav aria-label="breadcrumb">
diff --git a/actix_mvc_app/src/views/governance/proposals.html b/actix_mvc_app/src/views/governance/proposals.html
index 18a8e1d..d3e4e51 100644
--- a/actix_mvc_app/src/views/governance/proposals.html
+++ b/actix_mvc_app/src/views/governance/proposals.html
@@ -3,7 +3,7 @@
 {% block title %}Proposals - Governance Dashboard{% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="container-fluid">
     <div class="row mb-4">
         <div class="col-12">
             <h1 class="display-5 mb-4">Governance Proposals</h1>
diff --git a/actix_mvc_app/src/views/tickets/show.html b/actix_mvc_app/src/views/tickets/show.html
index 52cb85a..efa9a3b 100644
--- a/actix_mvc_app/src/views/tickets/show.html
+++ b/actix_mvc_app/src/views/tickets/show.html
@@ -3,7 +3,7 @@
 {% block title %}Ticket #{{ ticket.id | truncate(length=8) }} - Actix MVC App{% endblock %}
 
 {% block content %}
-<div class="container" up-main>
+<div class="container-fluid" up-main>
     <div class="d-flex justify-content-between align-items-center mb-4">
         <h1>Ticket #{{ ticket.id | truncate(length=8) }}</h1>
         <div>