diff --git a/app/Views/fedeploy.php b/app/Views/fedeploy.php
index eca24795..56228bac 100644
--- a/app/Views/fedeploy.php
+++ b/app/Views/fedeploy.php
@@ -1,54 +1,90 @@
-<form action="<?= base_url('fedeploy'); ?>" method="post" enctype="multipart/form-data">
-    <!-- Single zip upload -->
-    <div>
-        <label for="zip_file">Zip File</label>
-        <input type="file" name="zip_file" id="zip_file" required>
-    </div>
+<div class="container-fluid-min">
+  <div class="card mb-1">
+    <!---- new -----> 
+    <div class="row">
+        <div class="col-12">
+          <div class="card-body">
+            <div class="custom-form">
+            <form role="form" class="parsley-examples" action="<?= base_url('fedeploy'); ?>" method="post" enctype="multipart/form-data">
+                <!-- Single zip upload -->
+                <div class="form-group row">
+                    <label for="zip_file" class="col-md-4 col-form-label">Zip File</label>
+                    <div class="col-md-5">
+                            <div class="input-icon">
+                                <input type="file" class="form-control" id="zip_file" name="zip_file" >
+                                <i class="mdi mdi-upload additional-icon"></i>
+                            </div>
+                    </div>
+                </div>
 
-    <div>
-        <label for="zip_folder">Zip Folder (inside zip to deploy)</label>
-        <select name="zip_folder" id="zip_folder">
-            <option value="web/">web/</option>
-            <!-- <option value="dist/">dist/</option> -->
-        </select>
-    </div>
+                <!-- Zip Folder-->
+                <div class="form-group row">
+                    <label for="zip_folder" class="col-md-4 col-form-label">Zip Folder (inside zip to deploy)</label>
+                    <div class="col-md-5">                    
+                        <select name="zip_folder" id="zip_folder" class="form-control">
+                            <option value="web/">web/</option>
+                            <!-- <option value="dist/">dist/</option> -->
+                        </select>
+                    </div>
+                </div>
 
-    <div>
-        <label for="s3_bucket">S3 Bucket</label>
-        <select name="s3_bucket" id="s3_bucket">
-            <option value="uat-benefits-app-bucket">UAT Benefits</option>
-            <option value="uat-hr-app-bucket">UAT HR</option>
-            <option value="benefits-app-bucket">Live Benefits</option>
-            <option value="live-hr-app-bucket">Live HR</option>
-        </select>
-    </div>
+                <div class="form-group row">
+                    <label class="col-md-4 col-form-label" for="s3_bucket">S3 Bucket</label>
+                    <div class="col-md-5">
+                            <select name="s3_bucket" id="s3_bucket" class="form-control">
+                                <option value="uat-benefits-app-bucket">UAT Benefits</option>
+                                <option value="uat-hr-app-bucket">UAT HR</option>
+                                <option value="benefits-app-bucket">Live Benefits</option>
+                                <option value="live-hr-app-bucket">Live HR</option>
+                            </select>    
+                    </div>
+                </div>
 
-    <div>
-        <label for="s3_prefix">S3 Prefix</label>
-        <input type="text" name="s3_prefix" id="s3_prefix" value="/*">
-    </div>
+                <!-- S3 Prefix -->
+                <div class="form-group row">
+                    <label class="col-md-4 col-form-label" for="s3_prefix">S3 Prefix</label>
+                    <div class="col-md-5">
+                        <input type="text" name="s3_prefix" id="s3_prefix" value="/*" class="form-control">
+                    </div>
+                </div>
 
-    <div>
-        <label for="cf_distribution_id">CloudFront Distribution ID (optional)</label>
-        <!-- <input type="text" name="cf_distribution_id" id="cf_distribution_id" value="E1MKRK4U5MZ3BD"> -->
-        <select name="cf_distribution_id" id="cf_distribution_id">
-            <option value="EUBZ8CDSV9KZZ">UAT Benefits</option>
-            <option value="E9TNPRI9ITM1M">UAT HR</option>
-            <option value="E1MKRK4U5MZ3BD">Live Benefits</option>
-            <option value="E3TE01DPKHTD8B">Live HR</option>
-        </select>
-    </div>
+                <!-- CloudFront Distribution -->
+                <div class="form-group row">
+                    <label for="cf_distribution_id" class="col-md-4 col-form-label">CloudFront Distribution ID (optional)</label>
+                    <div class="col-md-5">
+                        <select name="cf_distribution_id" id="cf_distribution_id" class="form-control">
+                            <option value="EUBZ8CDSV9KZZ">UAT Benefits</option>
+                            <option value="E9TNPRI9ITM1M">UAT HR</option>
+                            <option value="E1MKRK4U5MZ3BD">Live Benefits</option>
+                            <option value="E3TE01DPKHTD8B">Live HR</option>
+                        </select>
+                    </div>
+                </div>
 
-    <div>
-        <label for="cf_paths">
-            CloudFront Invalidation Paths (comma or newline separated, e.g. <code>/hr/*,/hr/special/*</code>)
-        </label>
-        <input type="text" name="cf_paths" id="cf_paths" value="/*">
-        <!-- If you prefer multi-line, use <textarea> instead of <input> -->
-    </div>
+                <!-- CloudFront Invalidation -->
+                <div class="form-group row">
+                    <label class="col-md-4 col-form-label" for="cf_paths"> CloudFront Invalidation Paths (comma or newline separated, e.g. <code>/hr/*,/hr/special/*</code>) </label>
+                    <div class="col-md-5 d-flex align-items-center">
+                        <input type="text" name="cf_paths" id="cf_paths" value="/*" class="form-control">
+                    </div>
+                </div>
+
+
+                <!-- Buttons -->
+                <div class="form-group row">
+                <div class="col-md-12 text-right">
+                    <button type="submit" class="btn btn-primary waves-effect waves-light mr-1" id="btnSubmit">Deploy</button>
+                </div>
+                </div>
+            </form>
+           </div>
+          </div>
+        </div> <!-- end col-->
+    </div>
+    <!---- ends ------>
+  </div>
+</div>
 
-    <button type="submit">Deploy</button>
-</form>
 <script>
 document.addEventListener('DOMContentLoaded', function () {
     const bucketToDistributionMap = {