diff --git a/tests/functional/cypress.config.js b/tests/functional/cypress.config.js
index 64f41cd9b..f2fccdbea 100644
--- a/tests/functional/cypress.config.js
+++ b/tests/functional/cypress.config.js
@@ -24,8 +24,10 @@ module.exports = defineConfig({
     //setupNodeEvents(on, config) {
      // return require('./plugins/index.js')(on, config)
     
-    baseUrl: 'http://localhost:5173',
+    //baseUrl: 'http://localhost:5173',
+    baseUrl:'https://chefs-dev.apps.silver.devops.gov.bc.ca',
     specPattern: 'cypress/e2e/*.cy.{js,jsx,ts,tsx}',
+    testIsolation: false,
     
     //supportFile: 'support/index.js',
   }
diff --git a/tests/functional/cypress/e2e/form-design-advanceddata.cy.js b/tests/functional/cypress/e2e/form-design-advanceddata.cy.js
new file mode 100644
index 000000000..e6231a942
--- /dev/null
+++ b/tests/functional/cypress/e2e/form-design-advanceddata.cy.js
@@ -0,0 +1,252 @@
+import 'cypress-keycloak-commands';
+import 'cypress-drag-drop';
+import { formsettings } from '../support/login.js';
+
+const depEnv = Cypress.env('depEnv');
+
+
+Cypress.Commands.add('waitForLoad', () => {
+  const loaderTimeout = 80000;
+
+  cy.get('.nprogress-busy', { timeout: loaderTimeout }).should('not.exist');
+});
+
+
+
+describe('Form Designer', () => {
+
+  
+    cy.on('uncaught:exception', (err, runnable) => {
+      // Form.io throws an uncaught exception for missing projectid
+      // Cypress catches it as undefined: undefined so we can't get the text
+      console.log(err);
+      return false;
+    });
+    
+
+ // Form design page with Advanced Data components 
+
+// Checks the Container component
+it('Checks the Container component', () => {
+
+  cy.viewport(1000, 1100);
+    formsettings();
+ 
+    cy.get('button').contains('Advanced Data').click();
+    cy.waitForLoad();
+    cy.waitForLoad();
+    cy.get('div.formio-builder-form').then($el => {
+        const coords = $el[0].getBoundingClientRect();
+        cy.get('span.btn').contains('Container')
+        
+        .trigger('mousedown', { which: 1}, { force: true })
+        .trigger('mousemove', coords.x, -400, { force: true })
+        .trigger('mouseup', { force: true });
+        cy.get('input[name="data[label]"]').clear().type('Application');
+        cy.get('input[name="data[customClass]"]').type('bg-primary');
+        cy.waitForLoad();
+        
+        cy.get('button').contains('Save').click();
+    });
+
+  });
+  // Checks the Data Grid component
+  it('Checks the Data Grid component', () => {
+
+    cy.viewport(1000, 1100);
+    cy.get('div.formio-builder-form').then($el => {
+        const coords = $el[0].getBoundingClientRect();
+        cy.get('span.btn').contains('Data Grid')
+        
+        .trigger('mousedown', { which: 1}, { force: true })
+        .trigger('mousemove', coords.x, -400, { force: true })
+        .trigger('mouseup', { force: true });
+        
+        cy.get('input[name="data[label]"]').clear().type('Application');
+        cy.get('input[name="data[customClass]"]').type('bg-primary');
+        cy.waitForLoad();
+        cy.get('button').contains('Save').click();
+    
+    });
+    
+        
+    cy.get('[ref=editJson]').then($el => {
+    
+            const rem=$el[1];
+            rem.click();
+    
+    });
+    
+    let acecont=cy.get('div.ace_content');
+    
+    cy.get('div.ace_content').then($el => {
+    cy.get('div.ace_content').type('{selectall}{backspace}');
+    
+    var pretty=JSON.stringify({
+      "label": "Applicant Details",
+          "customClass": "bg-primary",
+          "reorder": false,
+          "addAnotherPosition": "bottom",
+          "layoutFixed": false,
+          "enableRowGroups": false,
+          "initEmpty": false,
+          "tableView": false,
+          "key": "dataGrid",
+          "type": "datagrid",
+          "input": true,
+          "components": [
+          {
+            "label": "Children",
+            "key": "children",
+            "type": "datagrid",
+            "input": true,
+            "validate": {
+              "minLength": 3,
+              "maxLength": 6
+            },
+            "components": [
+                {
+                  "label": "First Name",
+                  "key": "firstName",
+                  "type": "textfield",
+                  "input": true,
+                  "tableView": true,
+              },
+              
+                {
+                  "label": "Last Name",
+                  "key": "lastName",
+                  "type": "textfield",
+                  "input": true,
+                  "tableView": true
+                },
+                {
+                  "label": "Gender",
+                  "key": "gender",
+                  "type": "select",
+                  "input": true,
+                  data: {
+                    values: [
+                      {
+                        "value": "male",
+                        "label": "Male"
+                      },
+                      {
+                        "value": "female",
+                        "label": "Female"
+                      },
+                      {
+                        "value": "other",
+                        "label": "Other"
+                      }
+                    ]
+                  },
+                  
+                }
+      
+            ]
+    
+          }
+    
+        ]
+      
+      
+      
+      })
+      
+    cy.get('div.ace_content').type(pretty,{ parseSpecialCharSequences: false });
+    cy.get('button').contains('Save').click();
+    cy.get('.ui').click();
+    cy.contains('Male').should('be.visible');
+       
+            
+        
+    });
+
+  });
+  // Checks the Edit Grid Component
+  it('Checks the Edit Grid Component', () => {
+
+    cy.viewport(1000, 1100);
+    cy.get('div.formio-builder-form').then($el => {
+      const coords = $el[0].getBoundingClientRect();
+      cy.get('span.btn').contains('Edit Grid')
+      
+      .trigger('mousedown', { which: 1}, { force: true })
+      .trigger('mousemove', coords.x, -500, { force: true })
+      .trigger('mouseup', { force: true });
+      
+      cy.get('input[name="data[label]"]').clear().type('Add more days');
+      cy.get('input[name="data[customClass]"]').type('bg-primary');
+      cy.waitForLoad();
+      
+      cy.get('button').contains('Save').click();
+    });
+  });
+  it('Visits the form design page for advanced Data', () => {
+
+    cy.viewport(1000, 1100);
+    cy.get('button').contains('Basic Fields').click();
+    cy.get('div.formio-builder-form').then($el => {
+            const coords = $el[0].getBoundingClientRect();
+            cy.get('span.btn').contains('Day')
+            
+            .trigger('mousedown', { which: 1}, { force: true })
+            .trigger('mousemove', coords.x, -400, { force: true })
+            .trigger('mouseup', { force: true });
+            cy.get('button').contains('Save').click();
+    });
+
+
+  });
+// Checks Data Map component
+  it('Checks Data Map component', () => {
+
+    cy.viewport(1000, 1100);
+    cy.get('button').contains('Advanced Data').click();
+    cy.get('div.formio-builder-form').then($el => {
+            const coords = $el[0].getBoundingClientRect();
+            cy.get('span.btn').contains('Data Map')
+            
+            .trigger('mousedown', { which: 1}, { force: true })
+            .trigger('mousemove', coords.x, -300, { force: true })
+            .trigger('mouseup', { force: true });
+            cy.get('button').contains('Save').click();
+    }); 
+    cy.intercept('GET', `/${depEnv}/api/v1/forms/*`).as('getForm');
+ // Form saving
+   let savedButton = cy.get('[data-cy=saveButton]');
+   expect(savedButton).to.not.be.null;
+   savedButton.trigger('click');
+   cy.waitForLoad();
+
+
+ // Go to My forms  
+   cy.wait('@getForm').then(()=>{
+     let userFormsLinks = cy.get('[data-cy=userFormsLinks]');
+     expect(userFormsLinks).to.not.be.null;
+     userFormsLinks.trigger('click');
+   });
+ // Filter the newly created form
+   cy.location('search').then(search => {
+     //let pathName = fullUrl.pathname
+     let arr = search.split('=');
+     let arrayValues = arr[1].split('&');
+     cy.log(arrayValues[0]);
+     //
+     //cy.log(arrayValues[2]);
+     let dval=arr[2].split('&');
+     cy.log(dval);
+     // Form preview
+     cy.visit(`/${depEnv}/form/preview?f=${arrayValues[0]}&d=${dval[0]}`);
+     cy.waitForLoad();
+     cy.get('.v-skeleton-loader > .v-container').should('be.visible');
+     cy.get('.list-group-item').should('be.visible');
+     cy.get('[ref="datagrid-dataGrid"]').should('be.visible');
+     cy.get('.col-md-1').should('be.visible');
+     
+   })
+    
+});
+    
+});
\ No newline at end of file
diff --git a/tests/functional/cypress/e2e/form-design-basicfields.cy.js b/tests/functional/cypress/e2e/form-design-basicfields.cy.js
new file mode 100644
index 000000000..faf875687
--- /dev/null
+++ b/tests/functional/cypress/e2e/form-design-basicfields.cy.js
@@ -0,0 +1,295 @@
+import 'cypress-keycloak-commands';
+import 'cypress-drag-drop';
+import { formsettings } from '../support/login.js';
+
+const depEnv = Cypress.env('depEnv');
+
+
+Cypress.Commands.add('waitForLoad', () => {
+  const loaderTimeout = 60000;
+
+  cy.get('.nprogress-busy', { timeout: loaderTimeout }).should('not.exist');
+});
+
+
+
+describe('Form Designer', () => {
+  
+
+ /* beforeEach(()=>{
+    
+    
+    */let str;
+    
+    cy.on('uncaught:exception', (err, runnable) => {
+      // Form.io throws an uncaught exception for missing projectid
+      // Cypress catches it as undefined: undefined so we can't get the text
+      console.log(err);
+      return false;
+    });
+
+  /*});
+  */it('Visits the form settings page', () => {
+    
+    
+    cy.viewport(1000, 1100);
+    cy.waitForLoad();
+    
+    formsettings();
+    
+
+  });
+    
+// Verifying fields in the form settings page
+  it('DesignTextbox components', () => {
+    cy.viewport(1000, 1100);
+    cy.get('button').contains('Basic Fields').click();
+    let textFields = ["First Name", "Middle Name", "Last Name"];
+
+    for(let i=0; i<textFields.length; i++) {
+      cy.get('button').contains('Basic Fields').click();
+      cy.get('div.formio-builder-form').then($el => {
+      const bounds = $el[0].getBoundingClientRect();
+      cy.get('span.btn').contains('Text Field')
+        .trigger('mousedown', { which: 1}, { force: true })
+        .trigger('mousemove', bounds.x, -50, { force: true })
+        .trigger('mouseup', { force: true });
+        cy.get('p').contains('Text Field Component');
+        cy.get('input[name="data[label]"]').clear();
+        cy.get('input[name="data[label]"]').clear();
+        cy.get('input[name="data[label]"]').type(textFields[i]);
+        cy.get('button').contains('Save').click();
+      });
+    }
+
+  });
+    
+
+  it('Design Multi-line text components', () => {
+    cy.viewport(1000, 1100);
+    cy.get('div.formio-builder-form').then($el => {
+        const coords = $el[0].getBoundingClientRect();
+        cy.get('span.btn').contains('Multi-line Text')
+        
+        .trigger('mousedown', { which: 1}, { force: true })
+        .trigger('mousemove', coords.x, +20, { force: true })
+        .trigger('mouseup', { force: true });
+        //cy.get('p').contains('Multi-line Text Component');
+        cy.get('input[name="data[label]"]').clear();
+        cy.get('input[name="data[label]"]').clear().type('Question');
+        cy.get('button').contains('Save').click();
+    });
+
+  });
+
+  it('Design SelectList components', () => {
+    cy.viewport(1000, 1100);
+    cy.get('div.formio-builder-form').then($el => {
+        const coords1 = $el[0].getBoundingClientRect();
+        cy.get('span.btn').contains('Select List')
+        .trigger('mousedown', { which: 1}, { force: true })
+        .trigger('mousemove', coords1.x, -50, { force: true })
+        .trigger('mouseup', { force: true });
+        cy.get('p').contains('Select List Component');
+        cy.get('input[name="data[label]"]').clear();
+        cy.get('input[name="data[label]"]').clear();
+        cy.get('input[name="data[label]"]').type('Select Gender');
+        cy.get(':nth-child(2) > .nav-link').click();
+        cy.get('tbody > tr > :nth-child(2)').click();
+        
+        cy.get('tbody > tr > :nth-child(2)').type('Male');
+        cy.get('tfoot > tr > td > .btn').click();
+        cy.get('tbody > :nth-child(2) > :nth-child(2)').type('Female');
+
+        cy.get('button').contains('Save').click();
+
+    });
+
+  });
+  it('Design Checkbox components', () => {
+    cy.viewport(1000, 1100);
+    cy.get('div.formio-builder-form').then($el => {
+        const coords2 = $el[0].getBoundingClientRect();
+        cy.get('span.btn').contains('Checkbox')
+        
+        .trigger('mousedown', { which: 1}, { force: true })
+        .trigger('mousemove', coords2.x, -50, { force: true })
+        .trigger('mouseup', { force: true });
+        cy.get('p').contains('Checkbox Component');
+        cy.get('input[name="data[label]"]').clear();
+        cy.get('input[name="data[label]"]').clear();
+        cy.get('input[name="data[label]"]').type('Applying for self');
+        cy.get('button').contains('Save').click();
+    });
+
+  });
+  it('Design Checkbox Group components', () => {
+    cy.viewport(1000, 1100);
+    cy.get('div.formio-builder-form').then($el => {
+        const coords3 = $el[0].getBoundingClientRect();
+        cy.get('span.btn').contains('Checkbox Group')
+        
+        .trigger('mousedown', { which: 1}, { force: true })
+        .trigger('mousemove', coords3.x, -50, { force: true })
+        .trigger('mouseup', { force: true });
+        cy.get('p').contains('Checkbox Group Component');
+       // cy.get('.nav-item.active > .nav-link').click();
+       cy.get('input[name="data[label]"]').clear();
+       cy.get('input[name="data[label]"]').clear();
+       
+        cy.get('input[name="data[label]"]').type('Select all skills');
+        cy.get(':nth-child(2) > .nav-link').click();
+        cy.get('tbody > tr > :nth-child(2)').click();
+        
+        cy.get('tbody > tr > :nth-child(2)').type('Javascript');
+        cy.get('tfoot > tr > td > .btn').click();
+        cy.get('tbody > :nth-child(2) > :nth-child(2)').type('python');
+        
+
+        cy.get('button').contains('Save').click();
+    });
+
+  });
+  it('Design Number components', () => {
+    cy.viewport(1000, 1100);  
+    cy.get('div.formio-builder-form').then($el => {
+        const coords = $el[0].getBoundingClientRect();
+        cy.get('span.btn').contains('Number')
+        
+        .trigger('mousedown', { which: 1}, { force: true })
+        .trigger('mousemove', coords.x, -50, { force: true })
+        .trigger('mouseup', { force: true });
+        //cy.get('p').contains('Multi-line Text Component');
+        cy.get('input[name="data[label]"]').clear();
+        cy.get('input[name="data[label]"]').clear();
+        cy.get('input[name="data[label]"]').type('Number');
+        cy.get('button').contains('Save').click();
+    });
+  });
+  it('Design Phone Number components', () => {
+    cy.viewport(1000, 1100);
+    cy.get('div.formio-builder-form').then($el => {
+        const coords = $el[0].getBoundingClientRect();
+        cy.get('span.btn').contains('Phone Number')
+        
+        .trigger('mousedown', { which: 1}, { force: true })
+        .trigger('mousemove', coords.x, -50, { force: true })
+        .trigger('mouseup', { force: true });
+        //cy.get('p').contains('Multi-line Text Component');
+        cy.get('input[name="data[label]"]').clear();
+        cy.get('input[name="data[label]"]').clear();
+        cy.get('input[name="data[label]"]').type('Phone Number');
+        cy.get('button').contains('Save').click();
+    });
+  });
+  it('Design Email components', () => {
+    cy.viewport(1000, 1100);
+    cy.get('div.formio-builder-form').then($el => {
+        const coords = $el[0].getBoundingClientRect();
+        cy.get('span.btn').contains('Email')
+        
+        .trigger('mousedown', { which: 1}, { force: true })
+        .trigger('mousemove', coords.x, -10, { force: true })
+        .trigger('mouseup', { force: true });
+        //cy.get('p').contains('Multi-line Text Component');
+        
+        cy.get('button').contains('Save').click();
+    });
+
+  });
+
+  it('Design date/Time components', () => {
+    cy.viewport(1000, 1100);
+    cy.get('div.formio-builder-form').then($el => {
+        const coords = $el[0].getBoundingClientRect();
+        cy.get('span.btn').contains('Date / Time')
+        
+        .trigger('mousedown', { which: 1}, { force: true })
+        .trigger('mousemove', coords.x, -70, { force: true })
+        .trigger('mouseup', { force: true });
+        //cy.get('p').contains('Multi-line Text Component');
+        cy.get('button').contains('Save').click();
+        cy.waitForLoad();
+    });
+
+  });
+    
+    
+    
+    // Form Editing 
+  it('Form Edit', () => {
+      cy.viewport(1000, 1100);
+      cy.intercept('GET', `/${depEnv}/api/v1/forms/*`).as('getForm');
+      let savedButton = cy.get('[data-cy=saveButton]');
+      expect(savedButton).to.not.be.null;
+      savedButton.trigger('click');
+      cy.waitForLoad();
+      cy.get('[data-cy="settingsRouterLink"]').click();
+      cy.get('a > .v-btn > .v-btn__content > .mdi-pencil').click();
+      cy.waitForLoad();
+      cy.waitForLoad();
+      
+      //Adding another component
+
+      cy.get('button').contains('Basic Fields').click();
+      cy.get('div.formio-builder-form').then($el => {
+        const coords = $el[0].getBoundingClientRect();
+        cy.get('span.btn').contains('Number')
+        
+        .trigger('mousedown', { which: 1}, { force: true })
+        .trigger('mousemove', coords.x, -50, { force: true })
+        .trigger('mouseup', { force: true });
+        //cy.get('p').contains('Multi-line Text Component');
+        cy.get('input[name="data[label]"]').clear().type('ID Number');
+        cy.get('button').contains('Save').click();
+      });
+      cy.get('[ref=removeComponent]').then($el => {
+
+        const rem=$el[11];
+        rem.click();
+        
+        });
+
+
+      cy.get('[data-cy=saveButton]').click();
+      cy.waitForLoad();
+
+
+      // Go to My forms  
+      cy.wait('@getForm').then(()=>{
+      let userFormsLinks = cy.get('[data-cy=userFormsLinks]');
+      expect(userFormsLinks).to.not.be.null;
+      userFormsLinks.trigger('click');
+      });
+ // Filter the newly created form
+   cy.location('search').then(search => {
+     //let pathName = fullUrl.pathname
+     let arr = search.split('=');
+     let arrayValues = arr[1].split('&');
+     cy.log(arrayValues[0]);
+     //
+     //cy.log(arrayValues[2]);
+     let dval=arr[2].split('&');
+     cy.log(dval);
+     //Form preview
+     cy.visit(`/${depEnv}/form/preview?f=${dval[0]}&d=${arrayValues[0]}`);
+     cy.waitForLoad();
+     cy.get('label').contains('Last Name');
+     cy.get('label').contains('First Name');
+     cy.get('input[name="data[simplecheckbox1]"]').should('be.visible');
+     cy.get('label').contains('Select all skills');
+     cy.get('input[name="data[simplephonenumber1]').should('be.visible');
+     cy.get('input[name="data[simpledatetime]').should('be.visible');
+     cy.get('input[name="data[simpleemail]').should('be.visible');
+     cy.get('input[name="data[simplenumber1]').should('be.visible');
+     cy.get('label').contains('Select Gender');
+
+
+
+    
+  });
+
+
+});
+
+});
\ No newline at end of file
diff --git a/tests/functional/cypress/e2e/form-design-basiclayout-advanced-layout.cy.js b/tests/functional/cypress/e2e/form-design-basiclayout-advanced-layout.cy.js
new file mode 100644
index 000000000..bd1dcc03d
--- /dev/null
+++ b/tests/functional/cypress/e2e/form-design-basiclayout-advanced-layout.cy.js
@@ -0,0 +1,259 @@
+
+import 'cypress-keycloak-commands';
+import 'cypress-drag-drop';
+import { formsettings } from '../support/login.js';
+
+const depEnv = Cypress.env('depEnv');
+
+
+Cypress.Commands.add('waitForLoad', () => {
+  const loaderTimeout = 80000;
+
+  cy.get('.nprogress-busy', { timeout: loaderTimeout }).should('not.exist');
+});
+
+
+
+describe('Form Designer', () => {
+
+  
+    
+    cy.on('uncaught:exception', (err, runnable) => {
+      // Form.io throws an uncaught exception for missing projectid
+      // Cypress catches it as undefined: undefined so we can't get the text
+      console.log(err);
+      return false;
+    });
+    
+
+  
+
+
+it('Visits the form settings page', () => {
+    
+    
+  cy.viewport(1000, 1100);
+  cy.waitForLoad();
+  
+  formsettings();
+  
+
+});
+
+ 
+  // Form design page for Field set components
+it('Checks the Field set', () => {
+
+  cy.viewport(1000, 1100);
+  cy.get('button').contains('Advanced Layout').click();
+  cy.get('div.formio-builder-form').then($el => {
+    const coords = $el[0].getBoundingClientRect();
+    cy.get('span.btn').contains('Field Set')
+    
+    .trigger('mousedown', { which: 1}, { force: true })
+    .trigger('mousemove', coords.x, -400, { force: true })
+    //.trigger('mousemove', coords.y, -50, { force: true })
+    .trigger('mouseup', { force: true });
+    cy.waitForLoad();
+    cy.get('input[name="data[legend]"]').clear().type('Application');
+    cy.get('input[name="data[customClass]"]').type('bg-primary');
+    
+    
+    
+    cy.get('button').contains('Save').click();
+});
+
+});
+// form design page for Text/images components
+it('Checks the Text/images', () => {
+
+  cy.viewport(1000, 1100);
+// form design page for Basic Layout components
+  cy.get('button').contains('Basic Layout').click();
+
+//
+    cy.get('div.formio-builder-form').then($el => {
+    const coords = $el[0].getBoundingClientRect();
+    cy.get('span.btn').contains('Text/Images')
+      
+      .trigger('mousedown', { which: 1}, { force: true })
+      .trigger('mousemove', coords.x, -50, { force: true })
+      .trigger('mouseup', { force: true });
+      cy.waitForLoad();
+  
+    cy.get('button').contains('Save').click();
+    
+  });
+});
+it('Checks the Coulmns-3', () => {
+
+  cy.viewport(1000, 1100);
+  cy.get('div.formio-builder-form').then($el => {
+    const coords = $el[0].getBoundingClientRect();
+    cy.get('span.btn').contains('Columns - 3')
+    
+    .trigger('mousedown', { which: 1}, { force: true })
+    .trigger('mousemove', coords.x, -140, { force: true })
+    .trigger('mouseup', { force: true });
+    
+    
+    
+    cy.get('button').contains('Save').click();
+});
+
+
+});
+it('Checks the tabs', () => {
+
+
+cy.viewport(1000, 1100);
+
+cy.get('div.formio-builder-form').then($el => {
+  const coords = $el[0].getBoundingClientRect();
+  cy.get('span.btn').contains('Tabs')
+  
+  .trigger('mousedown', { which: 1}, { force: true })
+  .trigger('mousemove', coords.x, -50, { force: true })
+  .trigger('mouseup', { force: true });
+  
+  cy.get('tbody > tr > :nth-child(2)').click();
+  cy.get('[name="data[components][0][label]"]').clear().type('work');
+  cy.get('tfoot > tr > td > .btn').click();
+  
+        
+  cy.get('[name="data[components][1][label]"]').clear().type('Home');
+  cy.get('button').contains('Save').click();
+});
+
+});
+
+
+
+
+it('Checks the HTML Element', () => {
+
+  
+
+cy.viewport(1000, 1100);
+cy.waitForLoad();
+// using Advance Layout components
+cy.get('button').contains('Advanced Layout').click();
+
+cy.waitForLoad();
+cy.get('div.formio-builder-form').then($el => {
+      const coords = $el[0].getBoundingClientRect();
+      cy.get('span.btn').contains('HTML Element')
+      
+      .trigger('mousedown', { which: 1}, { force: true })
+      .trigger('mousemove', coords.x, -50, { force: true })
+      //.trigger('mousemove', coords.y, -50, { force: true })
+      .trigger('mouseup', { force: true });
+      cy.get('tbody > tr > :nth-child(2)').click();
+        //cy.get('[name="data[components][0][label]"]').clear();
+        cy.get('[name="data[attrs][0][attr]"]').type('type');
+        //cy.get('tfoot > tr > td > .btn').click();
+        cy.get('[name="data[attrs][0][value]"]').type('text');
+       
+      
+      cy.get('button').contains('Save').click();
+});
+
+});
+it('Checks the Columns', () => {
+
+
+cy.viewport(1000, 1100);
+cy.waitForLoad();
+cy.get('button').contains('Advanced Layout').click();
+cy.waitForLoad();
+cy.get('div.formio-builder-form').then($el => {
+      const coords = $el[0].getBoundingClientRect();
+      //cy.get('span.btn').contains('Columns')
+      cy.get('[data-type="columns"]')
+      
+      .trigger('mousedown', { which: 1}, { force: true })
+      .trigger('mousemove', coords.x, -140, { force: true })
+      .trigger('mouseup', { force: true });
+      cy.waitForLoad();
+      cy.get('tbody > :nth-child(1) > :nth-child(2)').click();
+      cy.get('.choices__item').then($el => {
+
+        const rem=$el[1];
+        rem.click();
+        
+        
+        });
+        
+      
+      cy.waitForLoad();
+      cy.get('input[name="data[columns][0][width]"]').type('3');
+      cy.get('input[name="data[columns][1][width]"]').type('9');
+      cy.get('button').contains('Save').click();
+});
+
+});
+
+
+it('Checks the Table', () => {
+
+
+    cy.viewport(1000, 1100);
+    cy.waitForLoad();
+
+    
+    cy.waitForLoad();
+
+    cy.get('div.formio-builder-form').then($el => {
+      const coords = $el[0].getBoundingClientRect();
+      cy.get('span.btn').contains('Table')
+      
+      .trigger('mousedown', { which: 1}, { force: true })
+      //.trigger('mousemove', coords.x, -50, { force: true })
+      .trigger('mousemove', coords.y, +50, { force: true })
+      .trigger('mouseup', { force: true });
+      
+       
+      
+      cy.get('button').contains('Save').click();
+    });
+    cy.intercept('GET', `/${depEnv}/api/v1/forms/*`).as('getForm');
+ // Form saving
+    let savedButton = cy.get('[data-cy=saveButton]');
+    expect(savedButton).to.not.be.null;
+    savedButton.trigger('click');
+    cy.waitForLoad();
+
+
+ // Go to My forms  
+     cy.wait('@getForm').then(()=>{
+     let userFormsLinks = cy.get('[data-cy=userFormsLinks]');
+     expect(userFormsLinks).to.not.be.null;
+     userFormsLinks.trigger('click');
+   });
+ // Filter the newly created form
+     cy.location('search').then(search => {
+     //let pathName = fullUrl.pathname
+     let arr = search.split('=');
+     let arrayValues = arr[1].split('&');
+     cy.log(arrayValues[0]);
+     //
+     //cy.log(arrayValues[2]);
+     let dval=arr[2].split('&');
+     cy.log(dval);
+     //Form preview
+     cy.visit(`/${depEnv}/form/preview?f=${arrayValues[0]}&d=${dval[0]}`);
+     cy.waitForLoad();
+     cy.get('.nav-item.active > .nav-link').should('be.visible');
+     cy.get(':nth-child(2) > .nav-link').should('be.visible');
+     cy.get('.card-body.active').should('be.visible');
+     cy.get('fieldset').should('be.visible');
+     cy.get('legend').should('be.visible');
+     cy.get('.v-skeleton-loader > .v-container').should('be.visible');
+
+     })
+
+});
+
+
+
+});
\ No newline at end of file
diff --git a/tests/functional/cypress/e2e/kitchen-sink.cy.js b/tests/functional/cypress/e2e/kitchen-sink.cy.js
index bf7461f3c..aa1c9ee6c 100644
--- a/tests/functional/cypress/e2e/kitchen-sink.cy.js
+++ b/tests/functional/cypress/e2e/kitchen-sink.cy.js
@@ -44,8 +44,8 @@ const data = {
 // Helper Functions
 //
 function helperTwoColumn() {
-  //cy.contains('span', 'Layout & Static Content').click();
-  cy.get('[href="#2Column"]').click();
+  cy.contains('span', 'Layout & Static Content').click();
+  //cy.get('[href="#2Column"]').click();
   cy.contains('span', 'Layout & Static Content').click();
   cy.get('[href="#2Column"]').click();
 
diff --git a/tests/functional/cypress/fixtures/forms/griddata.json b/tests/functional/cypress/fixtures/forms/griddata.json
new file mode 100644
index 000000000..98c634308
--- /dev/null
+++ b/tests/functional/cypress/fixtures/forms/griddata.json
@@ -0,0 +1,121 @@
+{
+    "label": "Data Grid",
+    "customClass": "bg-primary",
+    "reorder": false,
+    "addAnotherPosition": "bottom",
+    "layoutFixed": false,
+    "enableRowGroups": false,
+    "initEmpty": false,
+    "tableView": false,
+    "key": "dataGrid",
+    "type": "datagrid",
+    "input": true,
+    "data": {
+      "children": [
+        {
+          "firstName": "Joe",
+          "lastName": "Smith",
+          "gender": "male",
+          "dependant": true,
+          "birthdate": "1982-05-18"
+        },
+        {
+          "firstName": "Mary",
+          "lastName": "Smith",
+          "gender": "female",
+          "dependant": false,
+          "birthdate": "1979-02-17"
+        }
+      ]
+    },
+    "components": [
+      {
+        "label": "Children",
+        "key": "children",
+        "type": "datagrid",
+        "input": true,
+        "validate": {
+          "minLength": 3,
+          "maxLength": 6
+        },
+        "components": [
+          {
+            "label": "First Name",
+            "key": "firstName",
+            "type": "textfield",
+            "input": true,
+            "tableView": true
+          },
+          {
+            "label": "Last Name",
+            "key": "lastName",
+            "type": "textfield",
+            "input": true,
+            "tableView": true
+          },
+          {
+            "label": "Gender",
+            "key": "gender",
+            "type": "select",
+            "input": true,
+            "data": {
+              "values": [
+                {
+                  "value": "male",
+                  "label": "Male"
+                },
+                {
+                  "value": "female",
+                  "label": "Female"
+                },
+                {
+                  "value": "other",
+                  "label": "Other"
+                }
+              ]
+            },
+            "tableView": true
+          },
+          {
+            "type": "checkbox",
+            "label": "Dependant",
+            "key": "dependant",
+            "input": true,
+            "tableView": false
+          },
+          {
+            "label": "Birthdate",
+            "key": "birthdate",
+            "type": "datetime",
+            "input": true,
+            "datePicker": {
+              "datepickerMode": "day"
+            },
+            "conditional": {
+              "eq": "true",
+              "when": "dependant",
+              "show": "true"
+            },
+            "tableView": false,
+            "widget": {
+              "type": "calendar",
+              "displayInTimezone": "viewer",
+              "locale": "en",
+              "useLocaleSettings": false,
+              "allowInput": true,
+              "mode": "single",
+              "enableTime": true,
+              "noCalendar": false,
+              "format": "yyyy-MM-dd hh:mm a",
+              "hourIncrement": 1,
+              "minuteIncrement": 1,
+              "time_24hr": false,
+              "minDate": null,
+              "maxDate": null
+            }
+          }
+        ],
+        "tableView": false
+      }
+    ]
+  }
\ No newline at end of file
diff --git a/tests/functional/cypress/support/login.js b/tests/functional/cypress/support/login.js
new file mode 100644
index 000000000..36ad34089
--- /dev/null
+++ b/tests/functional/cypress/support/login.js
@@ -0,0 +1,64 @@
+export function formsettings(){
+
+
+
+
+
+    const depEnv = Cypress.env('depEnv');
+    const username=Cypress.env('keycloakUsername');
+    const password=Cypress.env('keycloakPassword');
+    
+    
+    
+    cy.visit(`/${depEnv}`);
+    cy.get('[data-test="base-auth-btn"] > .v-btn > .v-btn__content > span').click();
+    cy.get('[data-test="idir"]').click();
+    
+    cy.get('#user').type(username);
+    cy.get('#password').type(password);
+    cy.get('.btn').click();
+    cy.get('[data-cy="createNewForm"]').click();
+    cy.get('.v-row > :nth-child(1) > .v-card > .v-card-title > span').contains('Form Title');
+
+    let title="title" + Math.random().toString(16).slice(2);
+
+    
+    cy.get('#input-15').type(title);
+    cy.get('#input-17').type('test description');
+    cy.get('#input-22').click();
+    cy.get('.v-selection-control-group > .v-card').should('be.visible');
+    cy.get('#input-23').click();
+    cy.get('.v-row > .v-input > .v-input__control > .v-selection-control-group > :nth-child(1) > .v-label > span').contains('IDIR');
+    cy.get('span').contains('Basic BCeID');
+    
+    cy.get(':nth-child(2) > .v-card > .v-card-text > .v-input--error > :nth-child(2)').contains('Please select 1 log-in type');
+    cy.get('#input-24').click();
+    cy.get('#checkbox-25').click();
+    cy.get('#checkbox-28').click();
+    cy.get('#checkbox-38').click();
+    cy.get('#checkbox-54').click();
+    cy.get('#input-92').click();
+    cy.get('#input-92').type('abc@gmail.com');
+    cy.get('#input-58').click();
+    cy.contains("Citizens' Services (CITZ)").click();
+    cy.get('#input-62').click();
+    cy.get('.v-list').should('contain','Applications that will be evaluated followed');
+    cy.get('.v-list').should('contain','Collection of Datasets, data submission');
+    cy.get('.v-list').should('contain','Registrations or Sign up - no evaluation');
+    cy.get('.v-list').should('contain','Reporting usually on a repeating schedule or event driven like follow-ups');
+    cy.get('.v-list').should('contain','Feedback Form to determine satisfaction, agreement, likelihood, or other qualitative questions');
+    cy.contains('Reporting usually on a repeating schedule or event driven like follow-ups').click();
+    cy.get('#input-69').click();
+    cy.get('#input-75').click();
+    cy.get('.mt-3 > .mdi-help-circle-outline').should('be.visible')
+    cy.get('.mt-3 > .mdi-help-circle-outline').click();
+    cy.get('.d-flex > .v-input > .v-input__control > .v-field > .v-field__field > .v-field__input').click();
+    cy.get('.d-flex > .v-input > .v-input__control > .v-field > .v-field__field > .v-field__input').type('test label');
+    cy.get('#checkbox-80').click();
+    cy.get('button').contains('Continue').click();
+
+
+
+
+
+}
\ No newline at end of file
diff --git a/tests/functional/package.json b/tests/functional/package.json
index 42a84dc71..efbaf9969 100644
--- a/tests/functional/package.json
+++ b/tests/functional/package.json
@@ -22,6 +22,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "cypress-drag-drop": "^1.1.1",
+    "cypress-real-events": "^1.12.0",
     "date-fns": "^2.26.0",
     "har-validator": "^5.1.5"
   },