diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index dd84ea782..f9f7cc260 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,38 +1,47 @@
 ---
-name: Bug report
-about: Create a report to help us improve
+name: Chingu Dashboard Bug report
+about: Chingu Dashboard Alpha Testing Bug Tracker
 title: ''
-labels: ''
+labels: bug
 assignees: ''
 
 ---
 
-**Describe the bug**
+***Describe the bug***
 A clear and concise description of what the bug is.
 
-**To Reproduce**
-Steps to reproduce the behavior:
+***To Reproduce Bug***
+Steps to reproduce the bug:
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 
-**Expected behavior**
+***Expected behavior***
 A clear and concise description of what you expected to happen.
 
-**Screenshots**
+***Screenshots***
 If applicable, add screenshots to help explain your problem.
 
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
 
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
+***Additional context***
 Add any other context about the problem here.
+
+***--------------- End of User Report: DO NOT MODIFY ITEMS BELOW THIS LINE ---------------***
+
+***GitHub Issue No. / ID***
+
+***Team Task***
+Here will be added Team declaration by Team Leads.
+
+***Development start date***
+Date when dev team start fixing a bug
+
+***Development end date***
+Date when dev team complete fixing a bug
+
+***BugFix Deploy Date***
+Date when BugFix is deployed, and Bug Issue is closed
+
+***PO Comment***
+Here will be PO team add a comment.
diff --git a/.github/ISSUE_TEMPLATE/bug_report_old.md b/.github/ISSUE_TEMPLATE/bug_report_old.md
new file mode 100644
index 000000000..dd84ea782
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report_old.md
@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
diff --git a/.gitignore b/.gitignore
index c5eb4a8fc..73d21e5cd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,6 +30,7 @@ yarn-error.log*
 # local env files
 .env*.local
 .env
+.env.production
 
 # vercel
 .vercel
diff --git a/cypress/e2e/1-getting-started/todo.cy.js b/cypress/e2e/1-getting-started/todo.cy.js
index 623893c70..b52c6e751 100644
--- a/cypress/e2e/1-getting-started/todo.cy.js
+++ b/cypress/e2e/1-getting-started/todo.cy.js
@@ -11,133 +11,451 @@
 // please read our getting started guide:
 // https://on.cypress.io/introduction-to-cypress
 
-describe("example to-do app", () => {
-  beforeEach(() => {
-    // Cypress starts out with a blank slate for each test
-    // so we must tell it to visit our website with the `cy.visit()` command.
-    // Since we want to visit the same URL at the start of all our tests,
-    // we include it in our beforeEach function so that it runs before each test
-    cy.visit("https://example.cypress.io/todo");
-  });
-
-  it("displays two todo items by default", () => {
-    // We use the `cy.get()` command to get all elements that match the selector.
-    // Then, we use `should` to assert that there are two matched items,
-    // which are the two default items.
-    cy.get(".todo-list li").should("have.length", 2);
-
-    // We can go even further and check that the default todos each contain
-    // the correct text. We use the `first` and `last` functions
-    // to get just the first and last matched elements individually,
-    // and then perform an assertion with `should`.
-    cy.get(".todo-list li").first().should("have.text", "Pay electric bill");
-    cy.get(".todo-list li").last().should("have.text", "Walk the dog");
-  });
-
-  it("can add new todo items", () => {
-    // We'll store our item text in a variable so we can reuse it
-    const newItem = "Feed the cat";
-
-    // Let's get the input element and use the `type` command to
-    // input our new list item. After typing the content of our item,
-    // we need to type the enter key as well in order to submit the input.
-    // This input has a data-test attribute so we'll use that to select the
-    // element in accordance with best practices:
-    // https://on.cypress.io/selecting-elements
-    cy.get("[data-test=new-todo]").type(`${newItem}{enter}`);
-
-    // Now that we've typed our new item, let's check that it actually was added to the list.
-    // Since it's the newest item, it should exist as the last element in the list.
-    // In addition, with the two default items, we should have a total of 3 elements in the list.
-    // Since assertions yield the element that was asserted on,
-    // we can chain both of these assertions together into a single statement.
-    cy.get(".todo-list li")
-      .should("have.length", 3)
-      .last()
-      .should("have.text", newItem);
-  });
-
-  it("can check off an item as completed", () => {
-    // In addition to using the `get` command to get an element by selector,
-    // we can also use the `contains` command to get an element by its contents.
-    // However, this will yield the <label>, which is lowest-level element that contains the text.
-    // In order to check the item, we'll find the <input> element for this <label>
-    // by traversing up the dom to the parent element. From there, we can `find`
-    // the child checkbox <input> element and use the `check` command to check it.
-    cy.contains("Pay electric bill")
-      .parent()
-      .find("input[type=checkbox]")
-      .check();
-
-    // Now that we've checked the button, we can go ahead and make sure
-    // that the list element is now marked as completed.
-    // Again we'll use `contains` to find the <label> element and then use the `parents` command
-    // to traverse multiple levels up the dom until we find the corresponding <li> element.
-    // Once we get that element, we can assert that it has the completed class.
-    cy.contains("Pay electric bill")
-      .parents("li")
-      .should("have.class", "completed");
-  });
-
-  context("with a checked task", () => {
-    beforeEach(() => {
-      // We'll take the command we used above to check off an element
-      // Since we want to perform multiple tests that start with checking
-      // one element, we put it in the beforeEach hook
-      // so that it runs at the start of every test.
-      cy.contains("Pay electric bill")
-        .parent()
-        .find("input[type=checkbox]")
-        .check();
-    });
-
-    it("can filter for uncompleted tasks", () => {
-      // We'll click on the "active" button in order to
-      // display only incomplete items
-      cy.contains("Active").click();
-
-      // After filtering, we can assert that there is only the one
-      // incomplete item in the list.
-      cy.get(".todo-list li")
-        .should("have.length", 1)
-        .first()
-        .should("have.text", "Walk the dog");
-
-      // For good measure, let's also assert that the task we checked off
-      // does not exist on the page.
-      cy.contains("Pay electric bill").should("not.exist");
-    });
-
-    it("can filter for completed tasks", () => {
-      // We can perform similar steps as the test above to ensure
-      // that only completed tasks are shown
-      cy.contains("Completed").click();
-
-      cy.get(".todo-list li")
-        .should("have.length", 1)
-        .first()
-        .should("have.text", "Pay electric bill");
-
-      cy.contains("Walk the dog").should("not.exist");
-    });
-
-    it("can delete all completed tasks", () => {
-      // First, let's click the "Clear completed" button
-      // `contains` is actually serving two purposes here.
-      // First, it's ensuring that the button exists within the dom.
-      // This button only appears when at least one task is checked
-      // so this command is implicitly verifying that it does exist.
-      // Second, it selects the button so we can click it.
-      cy.contains("Clear completed").click();
-
-      // Then we can make sure that there is only one element
-      // in the list and our element does not exist
-      cy.get(".todo-list li")
-        .should("have.length", 1)
-        .should("not.have.text", "Pay electric bill");
-
-      // Finally, make sure that the clear button no longer exists.
-      cy.contains("Clear completed").should("not.exist");
-    });
-  });
-});
+// describe("example to-do app", () => {
+//   beforeEach(() => {
+//     // Cypress starts out with a blank slate for each test
+//     // so we must tell it to visit our website with the `cy.visit()` command.
+//     // Since we want to visit the same URL at the start of all our tests,
+//     // we include it in our beforeEach function so that it runs before each test
+//     cy.visit("https://example.cypress.io/todo");
+//   });
+
+//   it("displays two todo items by default", () => {
+//     // We use the `cy.get()` command to get all elements that match the selector.
+//     // Then, we use `should` to assert that there are two matched items,
+//     // which are the two default items.
+//     cy.get(".todo-list li").should("have.length", 2);
+
+//     // We can go even further and check that the default todos each contain
+//     // the correct text. We use the `first` and `last` functions
+//     // to get just the first and last matched elements individually,
+//     // and then perform an assertion with `should`.
+//     cy.get(".todo-list li").first().should("have.text", "Pay electric bill");
+//     cy.get(".todo-list li").last().should("have.text", "Walk the dog");
+//   });
+
+//   it("can add new todo items", () => {
+//     // We'll store our item text in a variable so we can reuse it
+//     const newItem = "Feed the cat";
+
+//     // Let's get the input element and use the `type` command to
+//     // input our new list item. After typing the content of our item,
+//     // we need to type the enter key as well in order to submit the input.
+//     // This input has a data-test attribute so we'll use that to select the
+//     // element in accordance with best practices:
+//     // https://on.cypress.io/selecting-elements
+//     cy.get("[data-test=new-todo]").type(`${newItem}{enter}`);
+
+//     // Now that we've typed our new item, let's check that it actually was added to the list.
+//     // Since it's the newest item, it should exist as the last element in the list.
+//     // In addition, with the two default items, we should have a total of 3 elements in the list.
+//     // Since assertions yield the element that was asserted on,
+//     // we can chain both of these assertions together into a single statement.
+//     cy.get(".todo-list li")
+//       .should("have.length", 3)
+//       .last()
+//       .should("have.text", newItem);
+//   });
+
+//   it("can check off an item as completed", () => {
+//     // In addition to using the `get` command to get an element by selector,
+//     // we can also use the `contains` command to get an element by its contents.
+//     // However, this will yield the <label>, which is lowest-level element that contains the text.
+//     // In order to check the item, we'll find the <input> element for this <label>
+//     // by traversing up the dom to the parent element. From there, we can `find`
+//     // the child checkbox <input> element and use the `check` command to check it.
+//     cy.contains("Pay electric bill")
+//       .parent()
+//       .find("input[type=checkbox]")
+//       .check();
+
+//     // Now that we've checked the button, we can go ahead and make sure
+//     // that the list element is now marked as completed.
+//     // Again we'll use `contains` to find the <label> element and then use the `parents` command
+//     // to traverse multiple levels up the dom until we find the corresponding <li> element.
+//     // Once we get that element, we can assert that it has the completed class.
+//     cy.contains("Pay electric bill")
+//       .parents("li")
+//       .should("have.class", "completed");
+//   });
+
+//   context("with a checked task", () => {
+//     beforeEach(() => {
+//       // We'll take the command we used above to check off an element
+//       // Since we want to perform multiple tests that start with checking
+//       // one element, we put it in the beforeEach hook
+//       // so that it runs at the start of every test.
+//       cy.contains("Pay electric bill")
+//         .parent()
+//         .find("input[type=checkbox]")
+//         .check();
+//     });
+
+//     it("can filter for uncompleted tasks", () => {
+//       // We'll click on the "active" button in order to
+//       // display only incomplete items
+//       cy.contains("Active").click();
+
+//       // After filtering, we can assert that there is only the one
+//       // incomplete item in the list.
+//       cy.get(".todo-list li")
+//         .should("have.length", 1)
+//         .first()
+//         .should("have.text", "Walk the dog");
+
+//       // For good measure, let's also assert that the task we checked off
+//       // does not exist on the page.
+//       cy.contains("Pay electric bill").should("not.exist");
+//     });
+
+//     it("can filter for completed tasks", () => {
+//       // We can perform similar steps as the test above to ensure
+//       // that only completed tasks are shown
+//       cy.contains("Completed").click();
+
+//       cy.get(".todo-list li")
+//         .should("have.length", 1)
+//         .first()
+//         .should("have.text", "Pay electric bill");
+
+//       cy.contains("Walk the dog").should("not.exist");
+//     });
+
+//     it("can delete all completed tasks", () => {
+//       // First, let's click the "Clear completed" button
+//       // `contains` is actually serving two purposes here.
+//       // First, it's ensuring that the button exists within the dom.
+//       // This button only appears when at least one task is checked
+//       // so this command is implicitly verifying that it does exist.
+//       // Second, it selects the button so we can click it.
+//       cy.contains("Clear completed").click();
+
+//       // Then we can make sure that there is only one element
+//       // in the list and our element does not exist
+//       cy.get(".todo-list li")
+//         .should("have.length", 1)
+//         .should("not.have.text", "Pay electric bill");
+
+//       // Finally, make sure that the clear button no longer exists.
+//       cy.contains("Clear completed").should("not.exist");
+//     });
+//   });
+// });
+
+// directory 2-advanced-examples:
+
+// /// <reference types="cypress" />
+
+// context("Actions", () => {
+//   beforeEach(() => {
+//     cy.visit("https://example.cypress.io/commands/actions");
+//   });
+
+//   // https://on.cypress.io/interacting-with-elements
+
+//   it(".type() - type into a DOM element", () => {
+//     // https://on.cypress.io/type
+//     cy.get(".action-email")
+//       .type("fake@email.com")
+//       .should("have.value", "fake@email.com")
+
+//       // .type() with special character sequences
+//       .type("{leftarrow}{rightarrow}{uparrow}{downarrow}")
+//       .type("{del}{selectall}{backspace}")
+
+//       // .type() with key modifiers
+//       .type("{alt}{option}") //these are equivalent
+//       .type("{ctrl}{control}") //these are equivalent
+//       .type("{meta}{command}{cmd}") //these are equivalent
+//       .type("{shift}")
+
+//       // Delay each keypress by 0.1 sec
+//       .type("slow.typing@email.com", { delay: 100 })
+//       .should("have.value", "slow.typing@email.com");
+
+//     cy.get(".action-disabled")
+//       // Ignore error checking prior to type
+//       // like whether the input is visible or disabled
+//       .type("disabled error checking", { force: true })
+//       .should("have.value", "disabled error checking");
+//   });
+
+//   it(".focus() - focus on a DOM element", () => {
+//     // https://on.cypress.io/focus
+//     cy.get(".action-focus")
+//       .focus()
+//       .should("have.class", "focus")
+//       .prev()
+//       .should("have.attr", "style", "color: orange;");
+//   });
+
+//   it(".blur() - blur off a DOM element", () => {
+//     // https://on.cypress.io/blur
+//     cy.get(".action-blur")
+//       .type("About to blur")
+//       .blur()
+//       .should("have.class", "error")
+//       .prev()
+//       .should("have.attr", "style", "color: red;");
+//   });
+
+//   it(".clear() - clears an input or textarea element", () => {
+//     // https://on.cypress.io/clear
+//     cy.get(".action-clear")
+//       .type("Clear this text")
+//       .should("have.value", "Clear this text")
+//       .clear()
+//       .should("have.value", "");
+//   });
+
+//   it(".submit() - submit a form", () => {
+//     // https://on.cypress.io/submit
+//     cy.get(".action-form").find('[type="text"]').type("HALFOFF");
+
+//     cy.get(".action-form")
+//       .submit()
+//       .next()
+//       .should("contain", "Your form has been submitted!");
+//   });
+
+//   it(".click() - click on a DOM element", () => {
+//     // https://on.cypress.io/click
+//     cy.get(".action-btn").click();
+
+//     // You can click on 9 specific positions of an element:
+//     //  -----------------------------------
+//     // | topLeft        top       topRight |
+//     // |                                   |
+//     // |                                   |
+//     // |                                   |
+//     // | left          center        right |
+//     // |                                   |
+//     // |                                   |
+//     // |                                   |
+//     // | bottomLeft   bottom   bottomRight |
+//     //  -----------------------------------
+
+//     // clicking in the center of the element is the default
+//     cy.get("#action-canvas").click();
+
+//     cy.get("#action-canvas").click("topLeft");
+//     cy.get("#action-canvas").click("top");
+//     cy.get("#action-canvas").click("topRight");
+//     cy.get("#action-canvas").click("left");
+//     cy.get("#action-canvas").click("right");
+//     cy.get("#action-canvas").click("bottomLeft");
+//     cy.get("#action-canvas").click("bottom");
+//     cy.get("#action-canvas").click("bottomRight");
+
+//     // .click() accepts an x and y coordinate
+//     // that controls where the click occurs :)
+
+//     cy.get("#action-canvas")
+//       .click(80, 75) // click 80px on x coord and 75px on y coord
+//       .click(170, 75)
+//       .click(80, 165)
+//       .click(100, 185)
+//       .click(125, 190)
+//       .click(150, 185)
+//       .click(170, 165);
+
+//     // click multiple elements by passing multiple: true
+//     cy.get(".action-labels>.label").click({ multiple: true });
+
+//     // Ignore error checking prior to clicking
+//     cy.get(".action-opacity>.btn").click({ force: true });
+//   });
+
+//   it(".dblclick() - double click on a DOM element", () => {
+//     // https://on.cypress.io/dblclick
+
+//     // Our app has a listener on 'dblclick' event in our 'scripts.js'
+//     // that hides the div and shows an input on double click
+//     cy.get(".action-div").dblclick().should("not.be.visible");
+//     cy.get(".action-input-hidden").should("be.visible");
+//   });
+
+//   it(".rightclick() - right click on a DOM element", () => {
+//     // https://on.cypress.io/rightclick
+
+//     // Our app has a listener on 'contextmenu' event in our 'scripts.js'
+//     // that hides the div and shows an input on right click
+//     cy.get(".rightclick-action-div").rightclick().should("not.be.visible");
+//     cy.get(".rightclick-action-input-hidden").should("be.visible");
+//   });
+
+//   it(".check() - check a checkbox or radio element", () => {
+//     // https://on.cypress.io/check
+
+//     // By default, .check() will check all
+//     // matching checkbox or radio elements in succession, one after another
+//     cy.get('.action-checkboxes [type="checkbox"]')
+//       .not("[disabled]")
+//       .check()
+//       .should("be.checked");
+
+//     cy.get('.action-radios [type="radio"]')
+//       .not("[disabled]")
+//       .check()
+//       .should("be.checked");
+
+//     // .check() accepts a value argument
+//     cy.get('.action-radios [type="radio"]')
+//       .check("radio1")
+//       .should("be.checked");
+
+//     // .check() accepts an array of values
+//     cy.get('.action-multiple-checkboxes [type="checkbox"]')
+//       .check(["checkbox1", "checkbox2"])
+//       .should("be.checked");
+
+//     // Ignore error checking prior to checking
+//     cy.get(".action-checkboxes [disabled]")
+//       .check({ force: true })
+//       .should("be.checked");
+
+//     cy.get('.action-radios [type="radio"]')
+//       .check("radio3", { force: true })
+//       .should("be.checked");
+//   });
+
+//   it(".uncheck() - uncheck a checkbox element", () => {
+//     // https://on.cypress.io/uncheck
+
+//     // By default, .uncheck() will uncheck all matching
+//     // checkbox elements in succession, one after another
+//     cy.get('.action-check [type="checkbox"]')
+//       .not("[disabled]")
+//       .uncheck()
+//       .should("not.be.checked");
+
+//     // .uncheck() accepts a value argument
+//     cy.get('.action-check [type="checkbox"]')
+//       .check("checkbox1")
+//       .uncheck("checkbox1")
+//       .should("not.be.checked");
+
+//     // .uncheck() accepts an array of values
+//     cy.get('.action-check [type="checkbox"]')
+//       .check(["checkbox1", "checkbox3"])
+//       .uncheck(["checkbox1", "checkbox3"])
+//       .should("not.be.checked");
+
+//     // Ignore error checking prior to unchecking
+//     cy.get(".action-check [disabled]")
+//       .uncheck({ force: true })
+//       .should("not.be.checked");
+//   });
+
+//   it(".select() - select an option in a <select> element", () => {
+//     // https://on.cypress.io/select
+
+//     // at first, no option should be selected
+//     cy.get(".action-select").should("have.value", "--Select a fruit--");
+
+//     // Select option(s) with matching text content
+//     cy.get(".action-select").select("apples");
+//     // confirm the apples were selected
+//     // note that each value starts with "fr-" in our HTML
+//     cy.get(".action-select").should("have.value", "fr-apples");
+
+//     cy.get(".action-select-multiple")
+//       .select(["apples", "oranges", "bananas"])
+//       // when getting multiple values, invoke "val" method first
+//       .invoke("val")
+//       .should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"]);
+
+//     // Select option(s) with matching value
+//     cy.get(".action-select")
+//       .select("fr-bananas")
+//       // can attach an assertion right away to the element
+//       .should("have.value", "fr-bananas");
+
+//     cy.get(".action-select-multiple")
+//       .select(["fr-apples", "fr-oranges", "fr-bananas"])
+//       .invoke("val")
+//       .should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"]);
+
+//     // assert the selected values include oranges
+//     cy.get(".action-select-multiple")
+//       .invoke("val")
+//       .should("include", "fr-oranges");
+//   });
+
+//   it(".scrollIntoView() - scroll an element into view", () => {
+//     // https://on.cypress.io/scrollintoview
+
+//     // normally all of these buttons are hidden,
+//     // because they're not within
+//     // the viewable area of their parent
+//     // (we need to scroll to see them)
+//     cy.get("#scroll-horizontal button").should("not.be.visible");
+
+//     // scroll the button into view, as if the user had scrolled
+//     cy.get("#scroll-horizontal button").scrollIntoView().should("be.visible");
+
+//     cy.get("#scroll-vertical button").should("not.be.visible");
+
+//     // Cypress handles the scroll direction needed
+//     cy.get("#scroll-vertical button").scrollIntoView().should("be.visible");
+
+//     cy.get("#scroll-both button").should("not.be.visible");
+
+//     // Cypress knows to scroll to the right and down
+//     cy.get("#scroll-both button").scrollIntoView().should("be.visible");
+//   });
+
+//   it(".trigger() - trigger an event on a DOM element", () => {
+//     // https://on.cypress.io/trigger
+
+//     // To interact with a range input (slider)
+//     // we need to set its value & trigger the
+//     // event to signal it changed
+
+//     // Here, we invoke jQuery's val() method to set
+//     // the value and trigger the 'change' event
+//     cy.get(".trigger-input-range")
+//       .invoke("val", 25)
+//       .trigger("change")
+//       .get("input[type=range]")
+//       .siblings("p")
+//       .should("have.text", "25");
+//   });
+
+//   it("cy.scrollTo() - scroll the window or element to a position", () => {
+//     // https://on.cypress.io/scrollto
+
+//     // You can scroll to 9 specific positions of an element:
+//     //  -----------------------------------
+//     // | topLeft        top       topRight |
+//     // |                                   |
+//     // |                                   |
+//     // |                                   |
+//     // | left          center        right |
+//     // |                                   |
+//     // |                                   |
+//     // |                                   |
+//     // | bottomLeft   bottom   bottomRight |
+//     //  -----------------------------------
+
+//     // if you chain .scrollTo() off of cy, we will
+//     // scroll the entire window
+//     cy.scrollTo("bottom");
+
+//     cy.get("#scrollable-horizontal").scrollTo("right");
+
+//     // or you can scroll to a specific coordinate:
+//     // (x axis, y axis) in pixels
+//     cy.get("#scrollable-vertical").scrollTo(250, 250);
+
+//     // or you can scroll to a specific percentage
+//     // of the (width, height) of the element
+//     cy.get("#scrollable-both").scrollTo("75%", "25%");
+
+//     // control the easing of the scroll (default is 'swing')
+//     cy.get("#scrollable-vertical").scrollTo("center", { easing: "linear" });
+
+//     // control the duration of the scroll (in ms)
+//     cy.get("#scrollable-both").scrollTo("center", { duration: 2000 });
+//   });
+// });
diff --git a/cypress/e2e/2-advanced-examples/actions.cy.js b/cypress/e2e/2-advanced-examples/actions.cy.js
deleted file mode 100644
index 7f5c6ea52..000000000
--- a/cypress/e2e/2-advanced-examples/actions.cy.js
+++ /dev/null
@@ -1,315 +0,0 @@
-/// <reference types="cypress" />
-
-context("Actions", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/actions");
-  });
-
-  // https://on.cypress.io/interacting-with-elements
-
-  it(".type() - type into a DOM element", () => {
-    // https://on.cypress.io/type
-    cy.get(".action-email")
-      .type("fake@email.com")
-      .should("have.value", "fake@email.com")
-
-      // .type() with special character sequences
-      .type("{leftarrow}{rightarrow}{uparrow}{downarrow}")
-      .type("{del}{selectall}{backspace}")
-
-      // .type() with key modifiers
-      .type("{alt}{option}") //these are equivalent
-      .type("{ctrl}{control}") //these are equivalent
-      .type("{meta}{command}{cmd}") //these are equivalent
-      .type("{shift}")
-
-      // Delay each keypress by 0.1 sec
-      .type("slow.typing@email.com", { delay: 100 })
-      .should("have.value", "slow.typing@email.com");
-
-    cy.get(".action-disabled")
-      // Ignore error checking prior to type
-      // like whether the input is visible or disabled
-      .type("disabled error checking", { force: true })
-      .should("have.value", "disabled error checking");
-  });
-
-  it(".focus() - focus on a DOM element", () => {
-    // https://on.cypress.io/focus
-    cy.get(".action-focus")
-      .focus()
-      .should("have.class", "focus")
-      .prev()
-      .should("have.attr", "style", "color: orange;");
-  });
-
-  it(".blur() - blur off a DOM element", () => {
-    // https://on.cypress.io/blur
-    cy.get(".action-blur")
-      .type("About to blur")
-      .blur()
-      .should("have.class", "error")
-      .prev()
-      .should("have.attr", "style", "color: red;");
-  });
-
-  it(".clear() - clears an input or textarea element", () => {
-    // https://on.cypress.io/clear
-    cy.get(".action-clear")
-      .type("Clear this text")
-      .should("have.value", "Clear this text")
-      .clear()
-      .should("have.value", "");
-  });
-
-  it(".submit() - submit a form", () => {
-    // https://on.cypress.io/submit
-    cy.get(".action-form").find('[type="text"]').type("HALFOFF");
-
-    cy.get(".action-form")
-      .submit()
-      .next()
-      .should("contain", "Your form has been submitted!");
-  });
-
-  it(".click() - click on a DOM element", () => {
-    // https://on.cypress.io/click
-    cy.get(".action-btn").click();
-
-    // You can click on 9 specific positions of an element:
-    //  -----------------------------------
-    // | topLeft        top       topRight |
-    // |                                   |
-    // |                                   |
-    // |                                   |
-    // | left          center        right |
-    // |                                   |
-    // |                                   |
-    // |                                   |
-    // | bottomLeft   bottom   bottomRight |
-    //  -----------------------------------
-
-    // clicking in the center of the element is the default
-    cy.get("#action-canvas").click();
-
-    cy.get("#action-canvas").click("topLeft");
-    cy.get("#action-canvas").click("top");
-    cy.get("#action-canvas").click("topRight");
-    cy.get("#action-canvas").click("left");
-    cy.get("#action-canvas").click("right");
-    cy.get("#action-canvas").click("bottomLeft");
-    cy.get("#action-canvas").click("bottom");
-    cy.get("#action-canvas").click("bottomRight");
-
-    // .click() accepts an x and y coordinate
-    // that controls where the click occurs :)
-
-    cy.get("#action-canvas")
-      .click(80, 75) // click 80px on x coord and 75px on y coord
-      .click(170, 75)
-      .click(80, 165)
-      .click(100, 185)
-      .click(125, 190)
-      .click(150, 185)
-      .click(170, 165);
-
-    // click multiple elements by passing multiple: true
-    cy.get(".action-labels>.label").click({ multiple: true });
-
-    // Ignore error checking prior to clicking
-    cy.get(".action-opacity>.btn").click({ force: true });
-  });
-
-  it(".dblclick() - double click on a DOM element", () => {
-    // https://on.cypress.io/dblclick
-
-    // Our app has a listener on 'dblclick' event in our 'scripts.js'
-    // that hides the div and shows an input on double click
-    cy.get(".action-div").dblclick().should("not.be.visible");
-    cy.get(".action-input-hidden").should("be.visible");
-  });
-
-  it(".rightclick() - right click on a DOM element", () => {
-    // https://on.cypress.io/rightclick
-
-    // Our app has a listener on 'contextmenu' event in our 'scripts.js'
-    // that hides the div and shows an input on right click
-    cy.get(".rightclick-action-div").rightclick().should("not.be.visible");
-    cy.get(".rightclick-action-input-hidden").should("be.visible");
-  });
-
-  it(".check() - check a checkbox or radio element", () => {
-    // https://on.cypress.io/check
-
-    // By default, .check() will check all
-    // matching checkbox or radio elements in succession, one after another
-    cy.get('.action-checkboxes [type="checkbox"]')
-      .not("[disabled]")
-      .check()
-      .should("be.checked");
-
-    cy.get('.action-radios [type="radio"]')
-      .not("[disabled]")
-      .check()
-      .should("be.checked");
-
-    // .check() accepts a value argument
-    cy.get('.action-radios [type="radio"]')
-      .check("radio1")
-      .should("be.checked");
-
-    // .check() accepts an array of values
-    cy.get('.action-multiple-checkboxes [type="checkbox"]')
-      .check(["checkbox1", "checkbox2"])
-      .should("be.checked");
-
-    // Ignore error checking prior to checking
-    cy.get(".action-checkboxes [disabled]")
-      .check({ force: true })
-      .should("be.checked");
-
-    cy.get('.action-radios [type="radio"]')
-      .check("radio3", { force: true })
-      .should("be.checked");
-  });
-
-  it(".uncheck() - uncheck a checkbox element", () => {
-    // https://on.cypress.io/uncheck
-
-    // By default, .uncheck() will uncheck all matching
-    // checkbox elements in succession, one after another
-    cy.get('.action-check [type="checkbox"]')
-      .not("[disabled]")
-      .uncheck()
-      .should("not.be.checked");
-
-    // .uncheck() accepts a value argument
-    cy.get('.action-check [type="checkbox"]')
-      .check("checkbox1")
-      .uncheck("checkbox1")
-      .should("not.be.checked");
-
-    // .uncheck() accepts an array of values
-    cy.get('.action-check [type="checkbox"]')
-      .check(["checkbox1", "checkbox3"])
-      .uncheck(["checkbox1", "checkbox3"])
-      .should("not.be.checked");
-
-    // Ignore error checking prior to unchecking
-    cy.get(".action-check [disabled]")
-      .uncheck({ force: true })
-      .should("not.be.checked");
-  });
-
-  it(".select() - select an option in a <select> element", () => {
-    // https://on.cypress.io/select
-
-    // at first, no option should be selected
-    cy.get(".action-select").should("have.value", "--Select a fruit--");
-
-    // Select option(s) with matching text content
-    cy.get(".action-select").select("apples");
-    // confirm the apples were selected
-    // note that each value starts with "fr-" in our HTML
-    cy.get(".action-select").should("have.value", "fr-apples");
-
-    cy.get(".action-select-multiple")
-      .select(["apples", "oranges", "bananas"])
-      // when getting multiple values, invoke "val" method first
-      .invoke("val")
-      .should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"]);
-
-    // Select option(s) with matching value
-    cy.get(".action-select")
-      .select("fr-bananas")
-      // can attach an assertion right away to the element
-      .should("have.value", "fr-bananas");
-
-    cy.get(".action-select-multiple")
-      .select(["fr-apples", "fr-oranges", "fr-bananas"])
-      .invoke("val")
-      .should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"]);
-
-    // assert the selected values include oranges
-    cy.get(".action-select-multiple")
-      .invoke("val")
-      .should("include", "fr-oranges");
-  });
-
-  it(".scrollIntoView() - scroll an element into view", () => {
-    // https://on.cypress.io/scrollintoview
-
-    // normally all of these buttons are hidden,
-    // because they're not within
-    // the viewable area of their parent
-    // (we need to scroll to see them)
-    cy.get("#scroll-horizontal button").should("not.be.visible");
-
-    // scroll the button into view, as if the user had scrolled
-    cy.get("#scroll-horizontal button").scrollIntoView().should("be.visible");
-
-    cy.get("#scroll-vertical button").should("not.be.visible");
-
-    // Cypress handles the scroll direction needed
-    cy.get("#scroll-vertical button").scrollIntoView().should("be.visible");
-
-    cy.get("#scroll-both button").should("not.be.visible");
-
-    // Cypress knows to scroll to the right and down
-    cy.get("#scroll-both button").scrollIntoView().should("be.visible");
-  });
-
-  it(".trigger() - trigger an event on a DOM element", () => {
-    // https://on.cypress.io/trigger
-
-    // To interact with a range input (slider)
-    // we need to set its value & trigger the
-    // event to signal it changed
-
-    // Here, we invoke jQuery's val() method to set
-    // the value and trigger the 'change' event
-    cy.get(".trigger-input-range")
-      .invoke("val", 25)
-      .trigger("change")
-      .get("input[type=range]")
-      .siblings("p")
-      .should("have.text", "25");
-  });
-
-  it("cy.scrollTo() - scroll the window or element to a position", () => {
-    // https://on.cypress.io/scrollto
-
-    // You can scroll to 9 specific positions of an element:
-    //  -----------------------------------
-    // | topLeft        top       topRight |
-    // |                                   |
-    // |                                   |
-    // |                                   |
-    // | left          center        right |
-    // |                                   |
-    // |                                   |
-    // |                                   |
-    // | bottomLeft   bottom   bottomRight |
-    //  -----------------------------------
-
-    // if you chain .scrollTo() off of cy, we will
-    // scroll the entire window
-    cy.scrollTo("bottom");
-
-    cy.get("#scrollable-horizontal").scrollTo("right");
-
-    // or you can scroll to a specific coordinate:
-    // (x axis, y axis) in pixels
-    cy.get("#scrollable-vertical").scrollTo(250, 250);
-
-    // or you can scroll to a specific percentage
-    // of the (width, height) of the element
-    cy.get("#scrollable-both").scrollTo("75%", "25%");
-
-    // control the easing of the scroll (default is 'swing')
-    cy.get("#scrollable-vertical").scrollTo("center", { easing: "linear" });
-
-    // control the duration of the scroll (in ms)
-    cy.get("#scrollable-both").scrollTo("center", { duration: 2000 });
-  });
-});
diff --git a/cypress/e2e/authentication/sign-in.cy.js b/cypress/e2e/authentication/sign-in.cy.js
new file mode 100644
index 000000000..a7aef5a15
--- /dev/null
+++ b/cypress/e2e/authentication/sign-in.cy.js
@@ -0,0 +1,45 @@
+describe("sign in flow", () => {
+  beforeEach(() => {
+    cy.visit(
+      "https://chingu-dashboard-git-dev-chingu-dashboard.vercel.app/sign-in",
+    );
+  });
+
+  it("should have email and password inputs with no inputs and a disabled Sign In button", () => {
+    // test to verify that the email and password inputs are visible
+    cy.get('input[name="email"]').should("be.visible");
+    cy.get('input[name="password"]').should("be.visible");
+    cy.contains("button", "Sign In").should("be.disabled");
+  });
+
+  it("successfully logs a user in ", () => {
+    cy.get('input[name="email"]').type("jessica.williamson@gmail.com");
+    cy.get('input[name="password"]').type("password");
+
+    // ensure Sign In button is visible and abled before clicking
+    cy.contains("button", "Sign In").should("not.be.disabled");
+    cy.contains("button", "Sign In").should("be.visible");
+    cy.contains("button", "Sign In").click();
+
+    // verify we're back on a dashboard page
+    cy.url().should(
+      "match",
+      /https:\/\/chingu-dashboard-git-dev-chingu-dashboard\.vercel\.app\/dashboard(\/\d+)?/,
+    );
+
+    // TODO: uncomment this once PR is pushed where AuthHeader has a data-cy="nav-dropdown-menu" and retest
+    // cy.get('[data-cy="nav-dropdown-menu"]').should("be-visible");
+
+    cy.contains("button", "Log In").should("not.exist");
+  });
+
+  it("should fail to log in with an invalid email and password", () => {
+    cy.get('input[name="email"]').type("jessica.williamson@gmail.com");
+    cy.get('input[name="password"]').type("wrongpassword");
+
+    cy.contains("button", "Sign In").should("be.visible");
+    cy.contains("button", "Sign In").click();
+
+    cy.contains("Submission Error").should("be.visible");
+  });
+});
diff --git a/cypress/e2e/authentication/sign-out.cy.js b/cypress/e2e/authentication/sign-out.cy.js
new file mode 100644
index 000000000..9d340d9df
--- /dev/null
+++ b/cypress/e2e/authentication/sign-out.cy.js
@@ -0,0 +1,13 @@
+describe("sign out flow", () => {
+  beforeEach(() => {
+    cy.login("jessica.williamson@gmail.com", "password");
+  });
+
+  //   TODO: uncomment after PR is pushed with data-cy as attribute
+  //   it('should have a nav menu drop down to log out', () => {
+  //     cy.contains("button", "Log In").should("not.exist");
+  //     cy.get('[data-cy="nav-dropdown-menu"]').should("be-visible");
+
+  //   // TODO: (1) add test to click on drop down, (2) click Sign Out, (3) should now have a log in button
+  //   })
+});
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 95857aea4..c56958993 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -11,7 +11,14 @@
 //
 //
 // -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
+Cypress.Commands.add("login", (email: string, password: string) => {
+  cy.visit(
+    "https://chingu-dashboard-git-dev-chingu-dashboard.vercel.app/sign-in",
+  );
+  cy.get('input[name="email"]').type(email);
+  cy.get('input[name="password"]').type(password);
+  cy.contains("button", "Sign In").click();
+});
 //
 //
 // -- This is a child command --
@@ -35,3 +42,9 @@
 //     }
 //   }
 // }
+
+declare namespace Cypress {
+  interface Chainable {
+    login(email: string, password: string): Chainable<Element>;
+  }
+}
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
index 13c406e54..50897d7be 100644
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -4,5 +4,5 @@
     "lib": ["es5", "dom"],
     "types": ["cypress", "node"]
   },
-  "include": ["../node_modules/cypress", "**/*.ts"]
+  "include": ["../node_modules/cypress", "**/*.ts", "support/commands.ts"]
 }
diff --git a/next.config.js b/next.config.js
index 76e432dd4..116f2123e 100644
--- a/next.config.js
+++ b/next.config.js
@@ -29,7 +29,10 @@ const nextConfig = {
             permanent: true,
           },
         ];
-      },
+    },
+    experimental: {
+        optimizePackageImports: [] // put folders with barrel imports here
+    }
 };
 
 module.exports = nextConfig;
diff --git a/src/app/(auth)/AuthProvider.tsx b/src/app/(auth)/AuthProvider.tsx
index 3a819ba53..f5b51f2a2 100644
--- a/src/app/(auth)/AuthProvider.tsx
+++ b/src/app/(auth)/AuthProvider.tsx
@@ -1,10 +1,12 @@
 "use client";
 
 import { useEffect } from "react";
+import { formatInTimeZone } from "date-fns-tz";
 import { clientSignIn, clientSignOut } from "@/store/features/auth/authSlice";
 import { useAppDispatch } from "@/store/hooks";
 import { type User, getUserState } from "@/store/features/user/userSlice";
 import { type AppError } from "@/types/types";
+import { currentDate } from "@/utils/getCurrentSprint";
 
 interface AuthProviderProps {
   user: User | null;
@@ -18,7 +20,16 @@ export default function AuthProvider({ user, error }: AuthProviderProps) {
     if (user) {
       dispatch(clientSignIn());
       // Add the currentDate field to the user object
-      const userWithDate = { ...user, currentDate: new Date() };
+      const currentDateInUserTimezone = formatInTimeZone(
+        currentDate,
+        user.timezone,
+        "yyyy-MM-dd HH:mm:ss",
+      );
+
+      const userWithDate = {
+        ...user,
+        currentDate: new Date(currentDateInUserTimezone),
+      };
       // Dispatch the getUserState action with the user object
       dispatch(getUserState(userWithDate));
     }
diff --git a/src/app/(main)/dashboard/components/Calendar/Calendar.logic.ts b/src/app/(main)/dashboard/components/Calendar/Calendar.logic.ts
index 275fb49f0..d50382136 100644
--- a/src/app/(main)/dashboard/components/Calendar/Calendar.logic.ts
+++ b/src/app/(main)/dashboard/components/Calendar/Calendar.logic.ts
@@ -1,74 +1,34 @@
+import { useEffect, useMemo, useState } from "react";
+
 import {
-  format,
   startOfMonth,
   endOfMonth,
   getDay,
   getDate,
   getMonth,
   getYear,
-  isSameDay,
-  isAfter,
-  isBefore,
   addMonths,
-  startOfDay,
-  endOfDay,
   subDays,
 } from "date-fns";
-import { useState } from "react";
-import type { EventList } from "@/app/(main)/dashboard/components/voyage-dashboard/getDashboardData";
-import type { Sprint } from "@/store/features/sprint/sprintSlice";
 import { useUser } from "@/store/hooks";
-import convertStringToDate from "@/utils/convertStringToDate";
-import routePaths from "@/utils/routePaths";
-
-export const useCalendarLogic = (
-  sprintsData?: Sprint[],
-  currentSprintNumber?: number | null,
-  meetingsData?: EventList[],
-  voyageNumber?: number | null,
-  teamId?: string,
-) => {
-  const { currentDate, timezone } = useUser();
-  const userDate = currentDate ?? new Date();
-  const [today, setToday] = useState(userDate);
-  const [selectDate, setSelectDate] = useState(userDate);
-  const [isHoveredDate, setIsHoveredDate] = useState<Date | null>(null);
-
-  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
-  const months = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+export const useCalendarLogic = () => {
+  const { currentDate } = useUser();
+  const today = useMemo(() => currentDate ?? new Date(), [currentDate]);
 
-  const voyageStartDate = sprintsData?.find(
-    (sprint) => Number(sprint.number) === 1,
-  )?.startDate;
-  const voyageEndDate = sprintsData?.find(
-    (sprint) => Number(sprint.number) === 6,
-  )?.endDate;
+  const [date, setDate] = useState<Date>(today);
+  const [selectedDate, setSelectedDate] = useState<Date>(today);
 
-  const currentSprintStartDate = sprintsData?.find(
-    (sprint) => Number(sprint.number) === currentSprintNumber,
-  )?.startDate;
-
-  const currentSprintEndDate = sprintsData?.find(
-    (sprint) => Number(sprint.number) === currentSprintNumber,
-  )?.endDate;
+  useEffect(() => {
+    if (today) {
+      setDate(today);
+      setSelectedDate(today);
+    }
+  }, [today]);
 
-  const cn = (...classes: string[]) => classes.filter(Boolean).join(" ");
+  const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
-  const generateDate = (
+  const generateDates = (
     month = getMonth(new Date()),
     year = getYear(new Date()),
   ) => {
@@ -82,7 +42,7 @@ export const useCalendarLogic = (
     while (firstDayOfWeek > 0) {
       const date = subDays(firstDateOfMonth, firstDayOfWeek);
       arrayOfDate.unshift({
-        currentMonth: false,
+        isWithinSelectedMonth: false,
         date,
       });
       firstDayOfWeek--;
@@ -93,9 +53,8 @@ export const useCalendarLogic = (
     for (let i = 1; i <= getDate(lastDateOfMonth); i++) {
       const date = new Date(year, month, i);
       arrayOfDate.push({
-        currentMonth: true,
+        isWithinSelectedMonth: true,
         date,
-        today: isSameDay(date, new Date()),
       });
     }
 
@@ -103,7 +62,7 @@ export const useCalendarLogic = (
 
     for (let i = 1; i <= remaining; i++) {
       arrayOfDate.push({
-        currentMonth: false,
+        isWithinSelectedMonth: false,
         date: new Date(year, month + 1, i),
       });
     }
@@ -111,157 +70,19 @@ export const useCalendarLogic = (
     return arrayOfDate;
   };
 
-  const isSelectedDate = (date: Date) => isSameDay(selectDate, date);
-
-  const generateClassString = (date: Date, currentMonth: boolean) => {
-    let classes =
-      "h-[50px] w-[48px] grid place-content-center transition-all cursor-pointer select-none";
-
-    const isWithinSprintRange =
-      currentSprintStartDate &&
-      currentSprintEndDate &&
-      (isSameDay(
-        date,
-        startOfDay(convertStringToDate(currentSprintStartDate, timezone)),
-      ) ||
-        isAfter(
-          date,
-          startOfDay(convertStringToDate(currentSprintStartDate, timezone)),
-        )) &&
-      isBefore(
-        date,
-        endOfDay(convertStringToDate(currentSprintEndDate, timezone)),
-      );
-
-    if (!currentMonth) {
-      classes += " text-neutral-content";
-    }
-
-    if (isSelectedDate(date)) {
-      classes += " bg-primary text-base-200";
-    } else {
-      classes += " hover:bg-base-100";
-      if (isWithinSprintRange) {
-        classes += " bg-primary-content";
-      }
-    }
-
-    return classes;
-  };
-
-  const selectedDate = format(selectDate, "EEEE, MMMM do");
-
-  let selectedSprint = null;
-  for (const sprint of sprintsData!) {
-    const startDate = new Date(sprint.startDate);
-    const endDate = new Date(sprint.endDate);
-    if (selectDate >= startDate && selectDate <= endDate) {
-      selectedSprint = sprint.number;
-      break;
-    }
-  }
-
-  const weeklyCheckInLink = () => {
-    if (teamId && currentSprintNumber) {
-      return routePaths.weeklyCheckInPage(
-        teamId,
-        currentSprintNumber?.toString(),
-      );
-    } else {
-      return "";
-    }
-  };
-
-  const submitVoyageLink = () => {
-    if (teamId && currentSprintNumber) {
-      return routePaths.submitVoyagePage(
-        teamId,
-        currentSprintNumber?.toString(),
-      );
-    } else {
-      return "";
-    }
-  };
-
-  const showDotConditions = (date: Date) => [
-    {
-      id: 1,
-      check: meetingsData?.some((event) =>
-        isSameDay(new Date(event.date), date),
-      ),
-    },
-    {
-      id: 2,
-      check: sprintsData?.some((day) => isSameDay(new Date(day.endDate), date)),
-      label: "Weekly Check-in Due",
-      link: weeklyCheckInLink(),
-      isDisabled: isBefore(date, new Date()),
-    },
-    {
-      id: 3,
-      check: isSameDay(new Date(voyageEndDate!), date),
-      label: "Voyage Submission Due",
-      link: submitVoyageLink(),
-    },
-  ];
-
-  const showRocketIcon = (date: Date) =>
-    (voyageStartDate &&
-      isSameDay(convertStringToDate(voyageStartDate, timezone), date)) ||
-    (voyageEndDate &&
-      isSameDay(convertStringToDate(voyageEndDate, timezone), date));
-
-  const getCalendarElementColor = (date: Date, currentMonth: boolean) => {
-    if (isSelectedDate(date)) {
-      return "base-200";
-    } else if (date.getTime() === isHoveredDate?.getTime()) {
-      return "neutral";
-    } else if (!currentMonth) {
-      return "neutral-content";
-    } else {
-      return "neutral-focus";
-    }
-  };
-
-  const onDotClick = (date: Date) => {
-    if (setSelectDate && date) {
-      setSelectDate(date);
-    }
-  };
-
-  const getDayLabel = () => {
-    if (
-      voyageStartDate &&
-      isSameDay(convertStringToDate(voyageStartDate, timezone), selectDate)
-    )
-      return `Start of Voyage ${voyageNumber}`;
-    if (
-      voyageEndDate &&
-      isSameDay(convertStringToDate(voyageEndDate, timezone), selectDate)
-    )
-      return `End of Voyage ${voyageNumber}`;
+  // Handle arrow click (previous/next month)
+  const handleArrowClick = (month: number) => {
+    if (date) setDate(addMonths(date, month));
   };
 
   return {
-    cn,
-    generateDate,
-    generateClassString,
-    days,
+    generateDates,
+    weekdays,
     today,
-    setToday,
-    selectDate,
-    setSelectDate,
-    userDate,
-    onArrowClick: (month: number) => setToday(addMonths(today, month)),
-    currentMonth: months[getMonth(today)],
-    currentYear: getYear(today),
+    date,
+    setDate,
     selectedDate,
-    showDotConditions,
-    showRocketIcon,
-    getCalendarElementColor,
-    setIsHoveredDate,
-    onDotClick,
-    getDayLabel,
-    selectedSprint,
+    setSelectedDate,
+    onArrowClick: (month: number) => handleArrowClick(month),
   };
 };
diff --git a/src/app/(main)/dashboard/components/Calendar/Calendar.tsx b/src/app/(main)/dashboard/components/Calendar/Calendar.tsx
index 3a5a5e59a..a6cbfaef4 100644
--- a/src/app/(main)/dashboard/components/Calendar/Calendar.tsx
+++ b/src/app/(main)/dashboard/components/Calendar/Calendar.tsx
@@ -1,22 +1,21 @@
 "use client";
 
-import { format, isSameDay, getUnixTime } from "date-fns";
-import React from "react";
+import { format, isSameDay, getUnixTime, getMonth, getYear } from "date-fns";
 import { ArrowRightIcon, ArrowLeftIcon } from "@heroicons/react/24/outline";
-import { RocketLaunchIcon } from "@heroicons/react/24/solid";
+
 import { useCalendarLogic } from "./Calendar.logic";
+import { useEventsLogic } from "./Events.logic";
 import Cell from "./components/Cell";
-import SprintItem from "./components/SprintItem";
-import Dot from "./components/Dot";
+import EventItem from "./components/EventItem";
 import Legend from "./components/Legend";
-import type { EventList } from "@/app/(main)/dashboard/components/voyage-dashboard/getDashboardData";
+import type { Event } from "@/dashboard/components/voyage-dashboard/getDashboardData";
 import Button from "@/components/Button";
 import type { Sprint } from "@/store/features/sprint/sprintSlice";
 
 interface CalendarProps {
   currentSprintNumber?: number | null;
   sprintsData?: Sprint[];
-  meetingsData?: EventList[];
+  meetingsData?: Event[];
   voyageNumber?: number | null;
   teamId?: string;
 }
@@ -28,27 +27,17 @@ export default function Calendar({
   teamId,
 }: CalendarProps) {
   const {
-    cn,
-    generateDate,
-    generateClassString,
-    days,
+    generateDates,
+    weekdays,
     today,
-    setToday,
-    selectDate,
-    setSelectDate,
-    userDate,
+    date,
+    setDate,
+    selectedDate,
+    setSelectedDate,
     onArrowClick,
-    currentMonth,
-    currentYear,
+  } = useCalendarLogic();
+  const { isWithinSprintRange, getEvents } = useEventsLogic(
     selectedDate,
-    showDotConditions,
-    showRocketIcon,
-    getCalendarElementColor,
-    setIsHoveredDate,
-    onDotClick,
-    getDayLabel,
-    selectedSprint,
-  } = useCalendarLogic(
     sprintsData,
     currentSprintNumber,
     meetingsData,
@@ -58,138 +47,105 @@ export default function Calendar({
 
   return (
     <div className="flex h-full w-full max-[1200px]:relative max-[1200px]:flex-col max-[1200px]:items-center max-[1200px]:gap-y-4">
+      {/* CALENDAR */}
       <div className="flex h-full min-w-[400px] max-w-[400px] flex-col items-center border-base-100 p-6 min-[1200px]:min-w-[600px] min-[1200px]:border-r-2 min-[1200px]:px-28 min-[1470px]:min-w-[400px] min-[1470px]:px-6">
         <div className="flex w-full items-center">
-          <div className="flex w-full items-center justify-center gap-10 min-[1200px]:relative">
-            <ArrowLeftIcon
-              className="absolute left-[14px] h-5 w-5 cursor-pointer transition-all hover:scale-105 max-[1200px]:left-12"
+          <div className="flex w-full items-center justify-between gap-10 min-[1200px]:relative">
+            {/* CALENDAR CONTROLS */}
+            <button
+              type="button"
+              aria-label="previous month"
+              className="rounded-md p-3 transition-all hover:bg-base-content"
               onClick={() => {
                 onArrowClick(-1);
               }}
-            />
+            >
+              <ArrowLeftIcon
+                aria-hidden="true"
+                className="h-5 w-5 text-base-300"
+              />
+            </button>
             <h1 className="select-none text-2xl font-semibold">
-              {currentMonth} {currentYear}
+              {format(date, "MMMM y")}
             </h1>
-            <ArrowRightIcon
-              className="absolute right-[14px] h-5 w-5 cursor-pointer transition-all hover:scale-105 max-[1200px]:right-12"
+            <button
+              type="button"
+              aria-label="next month"
+              className="rounded-md p-3 transition-all hover:bg-base-content"
               onClick={() => {
                 onArrowClick(1);
               }}
-            />
+            >
+              <ArrowRightIcon
+                aria-hidden="true"
+                className="h-5 w-5 text-base-300"
+              />
+            </button>
           </div>
         </div>
+        {/* CALENDAR WEEKDAYS */}
         <div className="grid grid-cols-7 font-semibold">
-          {days.map((day) => (
-            <h1
-              key={day}
+          {weekdays.map((weekday) => (
+            <span
+              key={weekday}
               className="grid h-14 w-14 select-none place-content-center text-center text-sm text-base-300"
             >
-              {day}
-            </h1>
+              {weekday}
+            </span>
           ))}
         </div>
-
+        {/* CALENDAR GRID */}
         <div className="grid max-w-[352px] grid-cols-7 border border-base-100">
-          {generateDate(today.getMonth(), today.getFullYear()).map(
-            ({ date, currentMonth, today }) => (
-              <div
+          {generateDates(getMonth(date), getYear(date)).map(
+            ({ date, isWithinSelectedMonth }) => (
+              <button
                 key={getUnixTime(date)}
-                onMouseEnter={() => setIsHoveredDate(date)}
-                onMouseLeave={() => setIsHoveredDate(null)}
+                type="button"
+                aria-label={format(date, "MMMM do, yyyy")}
+                onClick={() => {
+                  setSelectedDate(date);
+                }}
               >
                 <Cell
                   date={date}
-                  currentMonth={currentMonth}
-                  today={!!today}
-                  cn={cn}
-                  generateClassString={() =>
-                    generateClassString(date, currentMonth)
-                  }
-                  setSelectDate={setSelectDate}
-                >
-                  {showDotConditions(date).map((condition) =>
-                    condition.check ? (
-                      <Dot
-                        key={condition.id}
-                        color={getCalendarElementColor(date, currentMonth)}
-                        onClick={() => onDotClick(date)}
-                      />
-                    ) : null,
-                  )}
-                  {showRocketIcon(date) ? (
-                    <div
-                      onClick={() => {
-                        setSelectDate(date);
-                      }}
-                    >
-                      <RocketLaunchIcon
-                        className={`absolute inset-x-0 top-px m-auto h-4 w-4 cursor-pointer ${
-                          "text-" + getCalendarElementColor(date, currentMonth)
-                        }`}
-                      />
-                    </div>
-                  ) : null}
-                </Cell>
-              </div>
+                  isWithinSelectedMonth={isWithinSelectedMonth}
+                  isWithinCurrentSprintRange={isWithinSprintRange(date)}
+                  isSelectedDate={isSameDay(selectedDate, date)}
+                  events={getEvents(date)}
+                />
+              </button>
             ),
           )}
         </div>
-
         <Legend />
       </div>
+
+      {/* LIST OF EVENTS */}
       <div className="flex h-full w-full flex-col justify-between p-6">
         <div>
-          <h1 className="pb-3 text-lg font-semibold">{selectedDate}</h1>
+          <h1 className="pb-3 text-lg font-semibold">
+            {format(selectedDate, "EEEE, MMMM do")}
+          </h1>
           <div className="max-[1500px]:w-[90px] max-[1470px]:w-full">
-            {getDayLabel() ? (
-              <p className="w-full rounded-lg bg-primary-content p-3 text-base font-medium">
-                {getDayLabel()}
-              </p>
-            ) : null}
-            {selectedDate && selectedSprint ? (
-              <p
-                className={`w-full rounded-lg bg-primary-content p-3 text-base font-medium ${
-                  getDayLabel() ? "mt-4" : ""
-                }`}
-              >
-                Sprint Week {selectedSprint}
-              </p>
-            ) : null}
-            {meetingsData?.map((event) => {
-              const eventDate = new Date(event.date);
-              const isSelectedDate = isSameDay(selectDate, eventDate);
-
-              return isSelectedDate ? (
-                <div key={event.title}>
-                  <SprintItem
-                    title={event.title}
-                    link={event.link ?? ""}
-                    time={format(eventDate, "h:mm a")}
-                  />
-                </div>
-              ) : null;
-            })}
-            {showDotConditions(selectDate).map((condition) =>
-              condition.check && condition.label ? (
-                <div key={condition.id}>
-                  <SprintItem
-                    title={condition.label}
-                    link={condition?.link}
-                    useTargetBlank={false}
-                    isDisabled={condition?.isDisabled}
-                  />
-                </div>
-              ) : null,
-            )}
+            {getEvents(selectedDate).map((event) => (
+              <EventItem
+                key={event.id}
+                title={event.meeting?.title ?? event.label}
+                link={event.meeting?.link ?? event.link}
+                time={event.meeting?.date}
+                useTargetBlank={!!event.meeting}
+                isDisabled={event?.isDisabled}
+              />
+            ))}
           </div>
         </div>
         <Button
           className={`mt-4 h-[27px] self-end rounded p-1 text-base font-medium hover:bg-neutral ${
-            isSameDay(selectDate, userDate) ? "bg-primary" : "bg-neutral-focus"
+            isSameDay(selectedDate, today) ? "bg-primary" : "bg-neutral-focus"
           }`}
           onClick={() => {
-            setToday(userDate);
-            setSelectDate(userDate);
+            setDate(today);
+            setSelectedDate(today);
           }}
         >
           Today
diff --git a/src/app/(main)/dashboard/components/Calendar/Events.logic.ts b/src/app/(main)/dashboard/components/Calendar/Events.logic.ts
new file mode 100644
index 000000000..3976c9304
--- /dev/null
+++ b/src/app/(main)/dashboard/components/Calendar/Events.logic.ts
@@ -0,0 +1,183 @@
+import { isSameDay, isBefore, format } from "date-fns";
+
+import { type CalendarEvent } from "./types/types";
+import type { Event } from "@/dashboard/components/voyage-dashboard/getDashboardData";
+import type { Sprint } from "@/store/features/sprint/sprintSlice";
+import { useUser } from "@/store/hooks";
+import convertStringToDate from "@/utils/convertStringToDate";
+import routePaths from "@/utils/routePaths";
+
+export const useEventsLogic = (
+  selectedDate: Date,
+  sprintsData?: Sprint[],
+  currentSprintNumber?: number | null,
+  meetingsData?: Event[],
+  voyageNumber?: number | null,
+  teamId?: string,
+) => {
+  const { timezone, currentDate } = useUser();
+
+  const voyageStartDate = sprintsData?.find(
+    (sprint) => Number(sprint.number) === 1,
+  )?.startDate;
+  const voyageEndDate = sprintsData?.find(
+    (sprint) => Number(sprint.number) === 6,
+  )?.endDate;
+
+  const currentSprintStartDate = sprintsData?.find(
+    (sprint) => Number(sprint.number) === currentSprintNumber,
+  )?.startDate;
+
+  const currentSprintEndDate = sprintsData?.find(
+    (sprint) => Number(sprint.number) === currentSprintNumber,
+  )?.endDate;
+
+  const isWithinTwoDates = (date: Date, start: Date, end: Date) =>
+    (isSameDay(date, start) || date >= start) &&
+    (isSameDay(date, end) || date <= end);
+
+  const isWithinSprintRange = (date: Date) => {
+    if (currentSprintStartDate && currentSprintEndDate) {
+      if (
+        isWithinTwoDates(
+          date,
+          convertStringToDate(currentSprintStartDate, timezone),
+          convertStringToDate(currentSprintEndDate, timezone),
+        )
+      ) {
+        return true;
+      }
+      return false;
+    }
+  };
+
+  const getSelectedSprint = () => {
+    if (sprintsData) {
+      for (const sprint of sprintsData) {
+        const startDate = convertStringToDate(sprint.startDate, timezone);
+        const endDate = convertStringToDate(sprint.endDate, timezone);
+
+        if (isWithinTwoDates(selectedDate, startDate, endDate)) {
+          return sprint.number;
+        }
+      }
+    }
+  };
+
+  const getWeeklyCheckInLink = () => {
+    if (teamId && currentSprintNumber) {
+      return routePaths.weeklyCheckInPage(
+        teamId,
+        currentSprintNumber?.toString(),
+      );
+    } else {
+      return "";
+    }
+  };
+
+  const getSubmitVoyageLink = () => {
+    if (teamId && currentSprintNumber) {
+      return routePaths.submitVoyagePage(
+        teamId,
+        currentSprintNumber?.toString(),
+      );
+    } else {
+      return "";
+    }
+  };
+
+  const getMeetingEventData = (meetingsData: Event[], date: Date) => {
+    const meeting = meetingsData?.find((event) =>
+      isSameDay(convertStringToDate(event.date, timezone), date),
+    );
+
+    if (meeting)
+      return {
+        ...meeting,
+        date: format(convertStringToDate(meeting.date, timezone), "h:mm a"),
+      };
+    return undefined;
+  };
+
+  const getEvents = (date: Date): CalendarEvent[] => {
+    const events = [];
+    const selectedSprint = getSelectedSprint();
+    const meeting = meetingsData && getMeetingEventData(meetingsData, date);
+    const weeklyCheckinDue = sprintsData?.some((sprint) =>
+      isSameDay(convertStringToDate(sprint.endDate, timezone), date),
+    );
+    const voyageSubmissionDue =
+      voyageEndDate &&
+      isSameDay(convertStringToDate(voyageEndDate, timezone), date);
+
+    if (
+      voyageStartDate &&
+      isSameDay(convertStringToDate(voyageStartDate, timezone), date)
+    ) {
+      events.push({
+        id: 1,
+        check: true,
+        label: `Start of Voyage ${voyageNumber}`,
+        showRocket: true,
+      });
+    }
+
+    if (
+      voyageEndDate &&
+      isSameDay(convertStringToDate(voyageEndDate, timezone), date)
+    ) {
+      events.push({
+        id: 2,
+        check: true,
+        label: `End of Voyage ${voyageNumber}`,
+        showRocket: true,
+      });
+    }
+
+    if (selectedSprint) {
+      events.push({
+        id: 3,
+        check: true,
+        label: `Sprint Week ${selectedSprint}`,
+      });
+    }
+
+    if (meeting) {
+      events.push({
+        id: 4,
+        check: true,
+        meeting,
+        showDot: true,
+      });
+    }
+
+    if (weeklyCheckinDue) {
+      events.push({
+        id: 5,
+        check: true,
+        label: "Weekly Check-in Due",
+        link: getWeeklyCheckInLink(),
+        isDisabled: isBefore(date, currentDate ?? new Date()),
+        showDot: true,
+      });
+    }
+
+    if (voyageSubmissionDue) {
+      events.push({
+        id: 6,
+        check: true,
+        label: "Voyage Submission Due",
+        link: getSubmitVoyageLink(),
+        isDisabled: isBefore(date, currentDate ?? new Date()),
+        showDot: true,
+      });
+    }
+
+    return events;
+  };
+
+  return {
+    isWithinSprintRange,
+    getEvents,
+  };
+};
diff --git a/src/app/(main)/dashboard/components/Calendar/components/Cell.tsx b/src/app/(main)/dashboard/components/Calendar/components/Cell.tsx
index 45b15f029..5554c96d7 100644
--- a/src/app/(main)/dashboard/components/Calendar/components/Cell.tsx
+++ b/src/app/(main)/dashboard/components/Calendar/components/Cell.tsx
@@ -1,42 +1,55 @@
-import { getUnixTime, getDate } from "date-fns";
-import React from "react";
+import { getDate } from "date-fns";
+import { RocketLaunchIcon } from "@heroicons/react/24/solid";
+import { cn } from "@/lib/utils";
+import { type CalendarEvent } from "@/dashboard/components/Calendar/types/types";
 
 type CellProps = {
   date: Date;
-  currentMonth: boolean;
-  today: boolean;
-  cn: (...classes: string[]) => string;
-  generateClassString: (
-    date: Date,
-    currentMonth: boolean,
-    today: boolean,
-  ) => string;
-  setSelectDate: (value: React.SetStateAction<Date>) => void;
-  children?: React.ReactNode;
+  isWithinSelectedMonth: boolean;
+  isWithinCurrentSprintRange?: boolean;
+  isSelectedDate: boolean;
+  events: CalendarEvent[];
 };
+
 function Cell({
   date,
-  currentMonth,
-  today,
-  cn,
-  generateClassString,
-  setSelectDate,
-  children,
+  isWithinSelectedMonth,
+  isWithinCurrentSprintRange,
+  isSelectedDate,
+  events,
 }: CellProps) {
+  const showDot = events.find((event) => event.check && event.showDot);
+  const showRocket = events.find((event) => event.check && event.showRocket);
+
   return (
     <div
-      key={getUnixTime(date)}
-      className="relative grid h-[52px] place-content-center border border-base-100 text-center text-sm"
+      className={cn(
+        "group relative grid h-[53px] w-[53px] select-none place-content-center border border-base-100 bg-base-content text-center text-sm text-neutral-content transition-all hover:bg-base-100",
+        isWithinSelectedMonth && "bg-base-200 text-base-300",
+        isWithinCurrentSprintRange && "bg-primary-content",
+        isSelectedDate && "bg-primary text-base-200 hover:bg-primary",
+      )}
     >
-      <h1
-        className={cn(generateClassString(date, currentMonth, today))}
-        onClick={() => {
-          setSelectDate(date);
-        }}
-      >
-        {getDate(date)}
-      </h1>
-      {children}
+      <span className="leading-[17px]">{getDate(date)}</span>
+      {showDot && (
+        <div
+          className={cn(
+            "absolute inset-x-0 bottom-[6px] m-auto h-2 w-2 rounded-full bg-neutral-content transition-all group-hover:bg-neutral-content",
+            isWithinSelectedMonth && "bg-neutral-focus group-hover:bg-neutral",
+            isSelectedDate && "bg-base-200 group-hover:bg-base-200",
+          )}
+        />
+      )}
+      {showRocket && (
+        <RocketLaunchIcon
+          className={cn(
+            "absolute inset-x-0 top-1 m-auto h-[14px] w-[14px] text-neutral-content transition-all group-hover:text-neutral-content",
+            isWithinSelectedMonth &&
+              "text-neutral-focus group-hover:text-neutral",
+            isSelectedDate && "text-base-200 group-hover:text-base-200",
+          )}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/app/(main)/dashboard/components/Calendar/components/Dot.tsx b/src/app/(main)/dashboard/components/Calendar/components/Dot.tsx
deleted file mode 100644
index 0c3205f34..000000000
--- a/src/app/(main)/dashboard/components/Calendar/components/Dot.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-type DotProps = {
-  color?: string;
-  onClick?: () => void;
-};
-
-function Dot({ color = "bg-neutral-content", onClick }: DotProps) {
-  return (
-    <div
-      className={`h-2 w-2 ${
-        "bg-" + color
-      } absolute inset-x-0 bottom-[6px] m-auto cursor-pointer rounded-full`}
-      onClick={onClick}
-    />
-  );
-}
-
-export default Dot;
diff --git a/src/app/(main)/dashboard/components/Calendar/components/EventItem.tsx b/src/app/(main)/dashboard/components/Calendar/components/EventItem.tsx
new file mode 100644
index 000000000..0848f937c
--- /dev/null
+++ b/src/app/(main)/dashboard/components/Calendar/components/EventItem.tsx
@@ -0,0 +1,57 @@
+import Link from "next/link";
+import React from "react";
+import { ChevronRightIcon } from "@heroicons/react/24/solid";
+
+type EventItemProps = {
+  title?: string;
+  link?: string;
+  time?: string;
+  useTargetBlank?: boolean;
+  isDisabled?: boolean;
+};
+export default function EventItem({
+  title,
+  link,
+  time,
+  useTargetBlank = true,
+  isDisabled = false,
+}: EventItemProps) {
+  if (link) {
+    return (
+      <Link
+        href={isDisabled ? "#" : link}
+        target={useTargetBlank ? "_blank" : ""}
+        onClick={(e) => isDisabled && e.preventDefault()}
+      >
+        <div className="my-4 flex w-full cursor-pointer flex-row items-center justify-between rounded-lg bg-base-100 p-3">
+          <div>
+            {time ? (
+              <time
+                className={`text-sm font-medium text-base-300 ${
+                  isDisabled ? "text-neutral" : ""
+                }`}
+              >
+                {time}
+              </time>
+            ) : null}
+            <p
+              className={`max-w-[150px] cursor-pointer break-words text-base font-medium ${
+                isDisabled ? "text-neutral" : ""
+              }`}
+            >
+              {title}
+            </p>
+          </div>
+          <ChevronRightIcon
+            className={`w-[15px] ${isDisabled ? "text-neutral" : ""}`}
+          />
+        </div>
+      </Link>
+    );
+  }
+  return (
+    <p className="mt-4 w-full rounded-lg bg-primary-content p-3 text-base font-medium">
+      {title}
+    </p>
+  );
+}
diff --git a/src/app/(main)/dashboard/components/Calendar/components/SprintItem.tsx b/src/app/(main)/dashboard/components/Calendar/components/SprintItem.tsx
deleted file mode 100644
index 2b9800ea0..000000000
--- a/src/app/(main)/dashboard/components/Calendar/components/SprintItem.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Link from "next/link";
-import React from "react";
-import { ChevronRightIcon } from "@heroicons/react/24/solid";
-
-type SprintItemProps = {
-  title: string;
-  link: string;
-  time?: string;
-  useTargetBlank?: boolean;
-  isDisabled?: boolean;
-};
-function SprintItem({
-  title,
-  link,
-  time,
-  useTargetBlank = true,
-  isDisabled = false,
-}: SprintItemProps) {
-  return (
-    <Link
-      href={isDisabled ? "#" : link}
-      target={useTargetBlank ? "_blank" : ""}
-      onClick={(e) => isDisabled && e.preventDefault()}
-    >
-      <div className="my-4 flex w-full cursor-pointer flex-row items-center justify-between rounded-lg bg-base-100 p-3">
-        <div>
-          {time ? (
-            <time
-              className={`text-sm font-medium text-base-300 ${
-                isDisabled ? "text-neutral" : ""
-              }`}
-            >
-              {time}
-            </time>
-          ) : null}
-          <p
-            className={`max-w-[150px] cursor-pointer break-words text-base font-medium ${
-              isDisabled ? "text-neutral" : ""
-            }`}
-          >
-            {title}
-          </p>
-        </div>
-        <ChevronRightIcon
-          className={`w-[15px] ${isDisabled ? "text-neutral" : ""}`}
-        />
-      </div>
-    </Link>
-  );
-}
-
-export default SprintItem;
diff --git a/src/app/(main)/dashboard/components/Calendar/types/types.ts b/src/app/(main)/dashboard/components/Calendar/types/types.ts
new file mode 100644
index 000000000..837be1cf3
--- /dev/null
+++ b/src/app/(main)/dashboard/components/Calendar/types/types.ts
@@ -0,0 +1,12 @@
+import { type Event } from "@/dashboard/components/voyage-dashboard/getDashboardData";
+
+export interface CalendarEvent {
+  id: number;
+  check: boolean;
+  label?: string;
+  showRocket?: boolean;
+  showDot?: boolean;
+  link?: string;
+  isDisabled?: boolean;
+  meeting?: Event;
+}
diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/CalendarWidget.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/CalendarWidget.tsx
index fd3e52034..516d26ae3 100644
--- a/src/app/(main)/dashboard/components/voyage-dashboard/CalendarWidget.tsx
+++ b/src/app/(main)/dashboard/components/voyage-dashboard/CalendarWidget.tsx
@@ -1,12 +1,12 @@
 import React from "react";
-import type { EventList } from "./getDashboardData";
+import type { Event } from "./getDashboardData";
 import Calendar from "@/app/(main)/dashboard/components/Calendar/Calendar";
 import type { Sprint } from "@/store/features/sprint/sprintSlice";
 
 interface CalendarWidgetProps {
   sprintsData?: Sprint[];
   currentSprintNumber?: number | null;
-  meetingsData?: EventList[];
+  meetingsData?: Event[];
   voyageNumber?: number | null;
   teamId?: string;
 }
diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/CheckInWidget.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/CheckInWidget.tsx
index 6b27f98f4..56304a723 100644
--- a/src/app/(main)/dashboard/components/voyage-dashboard/CheckInWidget.tsx
+++ b/src/app/(main)/dashboard/components/voyage-dashboard/CheckInWidget.tsx
@@ -1,41 +1,98 @@
 "use client";
 
-import { DocumentCheckIcon } from "@heroicons/react/24/outline";
+import { ArrowRightIcon, DocumentCheckIcon } from "@heroicons/react/24/outline";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
-import React, { useState } from "react";
+import React from "react";
+import Link from "next/link";
+import { getDay } from "date-fns";
 import Button from "@/components/Button";
 import Badge from "@/components/badge/Badge";
+import routePaths from "@/utils/routePaths";
+import { getSprintCheckinIsStatus } from "@/utils/getFormStatus";
+import type { User } from "@/store/features/user/userSlice";
+import { useUser } from "@/store/hooks";
 
 interface CheckInWidgetProps {
-  status: string;
+  user: User | null;
+  currentSprintNumber: number | null;
+  teamId: string;
 }
-function CheckInWidget({ status }: CheckInWidgetProps) {
-  const [checkInSubmitted, setCheckInSubmitted] = useState<boolean>(false);
+function CheckInWidget({
+  user,
+  currentSprintNumber,
+  teamId,
+}: CheckInWidgetProps) {
+  const { currentDate } = useUser();
+  const userDate = currentDate ?? new Date();
+
+  const sprintCheckinIsSubmitted = getSprintCheckinIsStatus(
+    user,
+    Number(currentSprintNumber),
+  );
+
+  function renderWeeklyCheckinButton() {
+    if (sprintCheckinIsSubmitted) {
+      return (
+        <Button variant="primary" size="lg" className="group" disabled={true}>
+          <CheckCircleIcon className="h-[18px] w-[18px]" />
+          Check-in Submitted
+        </Button>
+      );
+    } else {
+      return (
+        <Button
+          variant="primary"
+          size="lg"
+          className="group self-center"
+          disabled={false}
+        >
+          <DocumentCheckIcon className="h-[18px] w-[18px]" />
+          Submit Check-in
+          <ArrowRightIcon className="h-[18px] w-0 transition-all group-hover:w-[18px]" />
+        </Button>
+      );
+    }
+  }
+
+  const getBadgeValue = (userDate: Date): string => {
+    const dayOfWeek = getDay(userDate);
+
+    if (dayOfWeek >= 2 && dayOfWeek <= 6) {
+      return "";
+    } else if (dayOfWeek === 0) {
+      return "Pending Submission";
+    } else if (dayOfWeek === 1) {
+      return "Due today";
+    }
+
+    return "";
+  };
+
+  const badgeValue = getBadgeValue(userDate);
 
   return (
     <div className="flex flex-col rounded-2xl border-2 border-base-100 bg-base-200 p-6">
       <div className="flex flex-row justify-between pb-[9px]">
         <p className="text-xl font-semibold">Weekly Check-in</p>
-        <Badge
-          title={status}
-          variant={status === "Due today" ? "error" : "warning"}
-        />
+        {badgeValue ? (
+          <Badge
+            title={badgeValue}
+            variant={badgeValue === "Due today" ? "error" : "warning"}
+          />
+        ) : null}
       </div>
       <p className="pb-6 text-base font-medium">
         How did that last sprint with your team go?
       </p>
-      <Button
-        className="max-w-[200px] self-center text-base font-semibold"
-        disabled={checkInSubmitted}
-        onClick={() => setCheckInSubmitted(true)}
-      >
-        {checkInSubmitted ? (
-          <CheckCircleIcon width={15} className="text-black" />
-        ) : (
-          <DocumentCheckIcon width={15} />
+      <Link
+        href={routePaths.weeklyCheckInPage(
+          teamId,
+          currentSprintNumber?.toString() ?? "",
         )}
-        Submit Check-in
-      </Button>
+        className="self-center"
+      >
+        {renderWeeklyCheckinButton()}
+      </Link>
     </div>
   );
 }
diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/DashboardWidget.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/DashboardWidget.tsx
index fb46ebf91..b9fc70f8c 100644
--- a/src/app/(main)/dashboard/components/voyage-dashboard/DashboardWidget.tsx
+++ b/src/app/(main)/dashboard/components/voyage-dashboard/DashboardWidget.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import React, { useState } from "react";
-import Link from "next/link";
-import { ArrowRightIcon } from "@heroicons/react/24/solid";
+import { ChevronDoubleRightIcon } from "@heroicons/react/24/solid";
+import { useRouter } from "next/navigation";
 import EmptyWidgetContent from "./EmptyWidgetContent";
 
 interface DashboardWidgetProps {
   title: string;
-  linkTitle: string;
+  headerTitle: string;
   link: string;
   buttonTitle: string;
   description: string;
@@ -19,53 +19,64 @@ function DashboardWidget({
   imageLight,
   imageDark,
   title,
-  linkTitle,
+  headerTitle,
   link,
   buttonTitle,
   description,
   children,
 }: DashboardWidgetProps) {
-  const [linkHovered, setLinkHovered] = useState<boolean>(false);
   const [widgetHovered, setWidgetHovered] = useState<boolean>(false);
+  const router = useRouter();
+
+  const isWidgetClickable = widgetHovered && children;
+
+  const handleLinkClick = (event: React.MouseEvent) => {
+    event.preventDefault();
+    if (!children) return;
+    router.push(link);
+  };
 
   return (
     <div
-      className="flex h-full w-full flex-col rounded-lg bg-base-100 p-4 hover:shadow-md"
-      onMouseEnter={() => setWidgetHovered(true)}
-      onMouseLeave={() => setWidgetHovered(false)}
+      onClick={handleLinkClick}
+      className={`w-full ${isWidgetClickable ? "cursor-pointer" : ""}`}
     >
       <div
-        className="inline-flex max-w-[100px] items-start text-neutral-focus"
-        onMouseEnter={() => setLinkHovered(true)}
-        onMouseLeave={() => setLinkHovered(false)}
+        className={`flex h-full w-full flex-col rounded-lg bg-base-100 p-4 ${
+          isWidgetClickable ? "hover:shadow-md" : ""
+        }`}
+        onMouseEnter={() => setWidgetHovered(true)}
+        onMouseLeave={() => setWidgetHovered(false)}
       >
-        <Link href={link}>
+        <div className="inline-flex max-w-[100px] items-start text-neutral-focus">
           <p
-            className={`relative inline-block cursor-pointer text-[13px] font-semibold hover:text-primary ${
-              widgetHovered ? "text-base-300" : "text-neutral-focus"
+            className={`relative inline-block text-[13px] font-semibold ${
+              isWidgetClickable
+                ? "cursor-pointer text-primary"
+                : "text-neutral-focus"
             }`}
           >
-            {linkTitle}
-            {linkHovered ? (
+            {headerTitle}
+            {isWidgetClickable ? (
               <div className="absolute right-[-15px] top-[4px]">
-                <ArrowRightIcon className="ml-1 w-3" />
+                <ChevronDoubleRightIcon className="ml-1 w-3" />
               </div>
             ) : null}
           </p>
-        </Link>
-      </div>
+        </div>
 
-      {!children ? (
-        <EmptyWidgetContent
-          title={title}
-          description={description}
-          link={link}
-          buttonTitle={buttonTitle}
-          imageLight={imageLight}
-          imageDark={imageDark}
-        />
-      ) : null}
-      {children}
+        {!children ? (
+          <EmptyWidgetContent
+            title={title}
+            description={description}
+            link={link}
+            buttonTitle={buttonTitle}
+            imageLight={imageLight}
+            imageDark={imageDark}
+          />
+        ) : null}
+        {children}
+      </div>
     </div>
   );
 }
diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/FeaturesStateContent.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/FeaturesStateContent.tsx
index 484c8db80..d6cb4ec0f 100644
--- a/src/app/(main)/dashboard/components/voyage-dashboard/FeaturesStateContent.tsx
+++ b/src/app/(main)/dashboard/components/voyage-dashboard/FeaturesStateContent.tsx
@@ -8,12 +8,14 @@ function FeaturesStateContent({ contentObject }: FeaturesStateContentProps) {
     <div className="mt-4 flex h-full flex-col justify-center">
       <div className="flex max-h-[200px] w-full flex-col overflow-auto pr-3">
         {contentObject?.map((item) => (
-          <p
+          <div
             key={item}
-            className="mb-3 flex h-[35px] w-full items-center rounded-lg bg-base-200 px-3 py-2"
+            className="mb-3 flex h-[35px] items-center truncate rounded-lg bg-base-200 px-3 py-2"
           >
-            {item}
-          </p>
+            <p className="w-40 truncate max-[1469px]:w-[300px] max-[1200px]:w-full">
+              {item}
+            </p>
+          </div>
         ))}
       </div>
     </div>
diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/IdeationStateContent.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/IdeationStateContent.tsx
index 7590c6f75..77c258edc 100644
--- a/src/app/(main)/dashboard/components/voyage-dashboard/IdeationStateContent.tsx
+++ b/src/app/(main)/dashboard/components/voyage-dashboard/IdeationStateContent.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import type { IdeationData } from "@/app/(main)/dashboard/mocks/voyageDashboardData";
+import { type IdeationData } from "@/store/features/ideation/ideationSlice";
 
 interface IdeationStateContentProps {
   contentObject?: IdeationData;
@@ -10,7 +10,7 @@ function IdeationStateContent({ contentObject }: IdeationStateContentProps) {
       <div className="flex h-full flex-col justify-between gap-y-4">
         <p className="text-xl font-semibold">{contentObject?.title}</p>
         <p className="text-base font-semibold text-neutral-focus">
-          {contentObject?.topic}
+          Project Idea
         </p>
         <p className="overflow-auto text-base font-medium">
           {contentObject?.description}
diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/ResourceItem.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/ResourceItem.tsx
new file mode 100644
index 000000000..c18dc60dc
--- /dev/null
+++ b/src/app/(main)/dashboard/components/voyage-dashboard/ResourceItem.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import React, { useState } from "react";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+import Badge from "@/components/badge/Badge";
+import { useAppDispatch } from "@/store/hooks";
+import { onOpenModal } from "@/store/features/modal/modalSlice";
+
+interface ResourceItemProps {
+  id: number;
+  title: string;
+  userName: string;
+  resourceUrl: string;
+  userAvatarUrl?: string;
+}
+function ResourceItem({
+  id,
+  title,
+  userName,
+  resourceUrl,
+  userAvatarUrl,
+}: ResourceItemProps) {
+  const dispatch = useAppDispatch();
+  const [widgetHovered, setWidgetHovered] = useState<boolean>(false);
+
+  const openViewModal = (event: React.MouseEvent) => {
+    event.stopPropagation();
+
+    const hideResourceModal = localStorage.getItem("hideResourceModal");
+    if (hideResourceModal) {
+      window.open(resourceUrl, "_blank");
+    } else {
+      dispatch(
+        onOpenModal({
+          type: "viewResource",
+          id,
+        }),
+      );
+    }
+  };
+
+  return (
+    <div
+      key={title}
+      className="mb-4 flex h-[79px] w-full cursor-pointer items-center justify-between rounded-lg bg-base-200 p-4 hover:shadow-md"
+      onClick={openViewModal}
+      onMouseEnter={() => setWidgetHovered(true)}
+      onMouseLeave={() => setWidgetHovered(false)}
+    >
+      <div className="flex max-w-[400px] flex-col">
+        <p className="mb-1 w-[300px] truncate text-base font-semibold max-[1469px]:w-full max-[1200px]:w-56">
+          {title}
+        </p>
+        <div className="flex">
+          <p className="mr-2 text-base font-medium">Shared by</p>
+          <Badge
+            title={userName}
+            variant="primary"
+            isAvatarBadge={true}
+            avatarUrlImage={userAvatarUrl}
+          />
+        </div>
+      </div>
+      <ArrowTopRightOnSquareIcon
+        className={`mr-3 h-6 w-6 text-base-300 ${
+          widgetHovered ? "stroke-base-300" : ""
+        }`}
+      />
+    </div>
+  );
+}
+
+export default ResourceItem;
diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/ResourcesStateContent.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/ResourcesStateContent.tsx
index fe3bf1ef8..05f852049 100644
--- a/src/app/(main)/dashboard/components/voyage-dashboard/ResourcesStateContent.tsx
+++ b/src/app/(main)/dashboard/components/voyage-dashboard/ResourcesStateContent.tsx
@@ -1,11 +1,16 @@
 import React from "react";
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
-import Link from "next/link";
-import type { ResourcesData } from "@/app/(main)/dashboard/mocks/voyageDashboardData";
-import Badge from "@/components/badge/Badge";
+import ResourceItem from "./ResourceItem";
+
+type ResourceItemData = {
+  id: number;
+  title: string;
+  resourceUrl: string;
+  userName: string;
+  userAvatarUrl: string;
+};
 
 interface ResourcesStateContentProps {
-  contentObject?: ResourcesData[];
+  contentObject?: ResourceItemData[];
 }
 function ResourcesStateContent({ contentObject }: ResourcesStateContentProps) {
   return (
@@ -13,28 +18,14 @@ function ResourcesStateContent({ contentObject }: ResourcesStateContentProps) {
       <p className="mb-4 text-xl font-semibold">Recently Shared</p>
       <div className="flex max-h-[200px] w-full flex-col overflow-auto pr-3">
         {contentObject?.map((item) => (
-          <div
+          <ResourceItem
             key={item.title}
-            className="mb-4 flex h-[79px] w-full items-center justify-between rounded-lg bg-base-200 p-4"
-          >
-            <div className="flex max-w-[400px] flex-col">
-              <p className="mb-1 truncate text-base font-semibold">
-                {item.title}
-              </p>
-              <div className="flex">
-                <p className="mr-2 text-base font-medium">Shared by</p>
-                <Badge
-                  title={item.userName}
-                  variant="primary"
-                  isAvatarBadge={true}
-                  avatarUrlImage={item.userImage}
-                />
-              </div>
-            </div>
-            <Link href={item.resourceUrl} target="_blank">
-              <ArrowTopRightOnSquareIcon className="mr-3 h-6 w-6 text-base-300" />
-            </Link>
-          </div>
+            id={Number(item.id)}
+            resourceUrl={item.resourceUrl}
+            title={item.title}
+            userName={item.userName}
+            userAvatarUrl={item.userAvatarUrl}
+          />
         ))}
       </div>
     </div>
diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/TechStackStateContent.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/TechStackStateContent.tsx
index 62bd67e8e..c7952aea2 100644
--- a/src/app/(main)/dashboard/components/voyage-dashboard/TechStackStateContent.tsx
+++ b/src/app/(main)/dashboard/components/voyage-dashboard/TechStackStateContent.tsx
@@ -1,28 +1,43 @@
 import React from "react";
-import type { TechStackData } from "@/app/(main)/dashboard/mocks/voyageDashboardData";
 
+type TechItem = {
+  title: string;
+  icon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+      title?: string | undefined;
+      titleId?: string | undefined;
+    } & React.RefAttributes<SVGSVGElement>
+  >;
+  value: string;
+};
 interface TechStackStateContentProps {
-  contentObject?: TechStackData[];
+  contentObject?: TechItem[];
 }
 
 function TechStackStateContent({ contentObject }: TechStackStateContentProps) {
   return (
     <div className="mt-4 flex h-full flex-col justify-center">
       <div className="flex max-h-[200px] w-full flex-col overflow-auto pr-3">
-        {contentObject?.map((item) => (
-          <div
-            key={item.title}
-            className="mb-3 flex h-[55px] w-full flex-col rounded-lg bg-base-200 px-3 py-2"
-          >
-            <div className="flex items-center justify-start gap-x-2">
-              <div className="h-3 w-3 text-neutral-focus">{<item.icon />}</div>
-              <p className="text-[13px] font-medium text-neutral-focus">
-                {item.title}
+        {contentObject?.map((item) =>
+          item.value ? (
+            <div
+              key={item.title}
+              className="mb-3 flex h-[55px] w-full flex-col rounded-lg bg-base-200 px-3 py-2"
+            >
+              <div className="flex items-center justify-start gap-x-2">
+                <div className="h-3 w-3 text-neutral-focus">
+                  {<item.icon />}
+                </div>
+                <p className="text-[13px] font-medium text-neutral-focus">
+                  {item.title}
+                </p>
+              </div>
+              <p className="w-40 truncate text-base font-semibold max-[1469px]:w-[300px] max-[1200px]:w-full">
+                {item.value}
               </p>
             </div>
-            <p className="text-base font-semibold">{item.value}</p>
-          </div>
-        ))}
+          ) : null,
+        )}
       </div>
     </div>
   );
diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/VoyageDashboard.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/VoyageDashboard.tsx
index 3cd3f0d34..8bbb30075 100644
--- a/src/app/(main)/dashboard/components/voyage-dashboard/VoyageDashboard.tsx
+++ b/src/app/(main)/dashboard/components/voyage-dashboard/VoyageDashboard.tsx
@@ -1,4 +1,12 @@
 import React from "react";
+import {
+  ComputerDesktopIcon,
+  SwatchIcon,
+  CodeBracketSquareIcon,
+  ChartPieIcon,
+  CloudIcon,
+  ServerStackIcon,
+} from "@heroicons/react/24/solid";
 import DashboardWidget from "./DashboardWidget";
 import CheckInWidget from "./CheckInWidget";
 import CalendarWidget from "./CalendarWidget";
@@ -6,18 +14,20 @@ import IdeationStateContent from "./IdeationStateContent";
 import FeaturesStateContent from "./FeaturesStateContent";
 import TechStackStateContent from "./TechStackStateContent";
 import ResourcesStateContent from "./ResourcesStateContent";
-import { type EventList, getDashboardData } from "./getDashboardData";
-import {
-  CHECKIN_STATUS,
-  getFeaturesData,
-  getIdeationData,
-  getResourcesData,
-  getTechStackData,
-} from "@/app/(main)/dashboard/mocks/voyageDashboardData";
+import { type Event, getDashboardData } from "./getDashboardData";
 import VoyageSupport from "@/app/(main)/dashboard/components/shared/VoyageSupport";
 import EmptySprintProvider from "@/app/(main)/my-voyage/[teamId]/sprints/providers/EmptySprintProvider";
 import { getUser } from "@/utils/getUser";
 import type { Sprint, Voyage } from "@/store/features/sprint/sprintSlice";
+import { type FeaturesList } from "@/store/features/features/featuresSlice";
+import { type IdeationData } from "@/store/features/ideation/ideationSlice";
+import { type TechStackData } from "@/store/features/techStack/techStackSlice";
+import { type ResourceData } from "@/store/features/resources/resourcesSlice";
+import ResourcesProvider from "@/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourcesProvider";
+import FeaturesProvider from "@/app/(main)/my-voyage/[teamId]/features/components/FeaturesProvider";
+import IdeationProvider from "@/app/(main)/my-voyage/[teamId]/ideation/components/IdeationProvider";
+import TechStackProvider from "@/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackProvider";
+import routePaths from "@/utils/routePaths";
 import { type ErrorType } from "@/utils/error";
 import ErrorComponent from "@/components/Error";
 
@@ -25,20 +35,17 @@ interface VoyageDashboardProps {
   teamId?: string;
 }
 async function VoyageDashboard({ teamId }: VoyageDashboardProps) {
-  //NOTE - Mocked value to show the filled state dashboard
-  const filledState = true;
-  const ideationData = filledState ? getIdeationData() : null;
-  const featureData = filledState ? getFeaturesData() : null;
-  const techStackData = filledState ? getTechStackData() : null;
-  const resourceData = filledState ? getResourcesData() : null;
-
   const [user, error] = await getUser();
 
   let currentSprintNumber: number | null = null;
   let sprintsData: Sprint[] = [];
-  let meetingsData: EventList[] = [];
+  let meetingsData: Event[] = [];
   let voyageNumber: number | null = null;
   let voyageData: Voyage = {} as Voyage;
+  let features: FeaturesList[] = [];
+  let projectIdeas: IdeationData[] = [];
+  let techStackDatas: TechStackData[] = [];
+  let projectResources: ResourceData[] = [];
   let errorMessage: string | undefined;
   let errorType: ErrorType | undefined;
 
@@ -49,6 +56,10 @@ async function VoyageDashboard({ teamId }: VoyageDashboardProps) {
     meetingsData = data.meetingsData;
     voyageNumber = data.voyageNumber;
     voyageData = data.voyageData;
+    features = data.features;
+    projectIdeas = data.projectIdeas.filter((idea) => idea.isSelected);
+    techStackDatas = data.techStackData.filter((tech) => tech.isSelected);
+    projectResources = data.projectResources;
     errorMessage = data.errorMessage;
     errorType = data.errorType;
   }
@@ -57,6 +68,43 @@ async function VoyageDashboard({ teamId }: VoyageDashboardProps) {
     return <ErrorComponent errorType={errorType} message={errorMessage} />;
   }
 
+  const featureList = features
+    .filter((item) => item.categoryName === "must have")
+    .flatMap((category) =>
+      category.features.map((feature) => feature.description),
+    );
+
+  const resourceList = projectResources.map((resource) => ({
+    id: resource.id,
+    title: resource.title,
+    resourceUrl: resource.url,
+    userName: `${resource.addedBy.member.firstName} ${resource.addedBy.member.lastName}`,
+    userAvatarUrl: resource.addedBy.member.avatar,
+  }));
+
+  const iconMapping = {
+    Frontend: ComputerDesktopIcon,
+    "CSS Library": SwatchIcon,
+    Backend: CodeBracketSquareIcon,
+    "Project Management": ChartPieIcon,
+    "Cloud Provider": CloudIcon,
+    Hosting: ServerStackIcon,
+  };
+
+  type TechStackName =
+    | "Frontend"
+    | "CSS Library"
+    | "Backend"
+    | "Project Management"
+    | "Cloud Provider"
+    | "Hosting";
+
+  const techStackList = techStackDatas.map((techStackData) => ({
+    title: techStackData.name,
+    icon: iconMapping[techStackData.name as TechStackName],
+    value: techStackData.teamTechStackItems.map((item) => item.name).join(", "),
+  }));
+
   return (
     <div className="flex w-full flex-col gap-x-6 max-[1470px]:gap-y-6 min-[1470px]:grid min-[1470px]:grid-cols-2">
       <div className="col-span-1 flex grow-[2] flex-col gap-y-6">
@@ -67,7 +115,11 @@ async function VoyageDashboard({ teamId }: VoyageDashboardProps) {
           voyageNumber={voyageNumber}
           teamId={teamId}
         />
-        <CheckInWidget status={CHECKIN_STATUS} />
+        <CheckInWidget
+          user={user}
+          currentSprintNumber={currentSprintNumber}
+          teamId={teamId ?? ""}
+        />
         <VoyageSupport />
       </div>
       <div className="col-span-1 flex w-full grow flex-col rounded-2xl border-2 border-base-100 bg-base-200 p-4">
@@ -79,41 +131,39 @@ async function VoyageDashboard({ teamId }: VoyageDashboardProps) {
             imageLight="/img/discover_light.png"
             imageDark="/img/discover_dark.png"
             title="What is your Voyage project idea & vision?"
-            link="/my-voyage/ideation"
-            linkTitle="Ideation"
+            link={routePaths.ideationPage(teamId ?? "")}
+            headerTitle="Ideation"
             buttonTitle="Go to Ideation"
-            description="Share your ideas on what the team Voyage should be. Describe your
-            vision to capture what it does and the benefit it will bring to
-            users."
+            description="Share your ideas on what the team Voyage should be. Describe your vision and finalize your choice to capture what the benefit it will bring to users."
           >
-            {ideationData ? (
-              <IdeationStateContent contentObject={ideationData} />
+            {projectIdeas.length > 0 ? (
+              <IdeationStateContent contentObject={projectIdeas[0]} />
             ) : null}
           </DashboardWidget>
           <div className="flex flex-row justify-between gap-x-4 max-[1200px]:flex-col max-[1200px]:gap-y-4">
             <div className="flex w-full grow">
               <DashboardWidget
                 title="What features will you develop?"
-                link="/my-voyage/features"
-                linkTitle="Features"
+                link={routePaths.featuresPage(teamId ?? "")}
+                headerTitle="Features"
                 buttonTitle="Go to Features"
-                description="Brainstorm and prioritize the features that will be included in the scope of your project. "
+                description="Brainstorm and prioritize the features that will be included in the scope of your project."
               >
-                {featureData ? (
-                  <FeaturesStateContent contentObject={featureData} />
+                {featureList.length > 0 ? (
+                  <FeaturesStateContent contentObject={featureList} />
                 ) : null}
               </DashboardWidget>
             </div>
             <div className="flex w-full grow">
               <DashboardWidget
-                title="Choose your tech stack "
-                link="/my-voyage/tech-stack"
-                linkTitle="Tech Stack"
+                title="Choose your tech stack"
+                link={routePaths.techStackPage(teamId ?? "")}
+                headerTitle="Tech Stack"
                 buttonTitle="Go to Tech Stack"
-                description="Choose the programming languages, frameworks, and tools that will serve as the foundation of your project."
+                description="The final choices for the programming languages, frameworks, and tools that will serve as the foundation of your project will appear here."
               >
-                {techStackData ? (
-                  <TechStackStateContent contentObject={techStackData} />
+                {techStackList.some((item) => item.value) ? (
+                  <TechStackStateContent contentObject={techStackList} />
                 ) : null}
               </DashboardWidget>
             </div>
@@ -122,18 +172,22 @@ async function VoyageDashboard({ teamId }: VoyageDashboardProps) {
             imageLight="/img/share_link_light.png"
             imageDark="/img/share_link_dark.png"
             title="Share resources with your team"
-            link="/my-voyage/voyage-resources"
-            linkTitle="Resources"
+            link={routePaths.voyageResourcesPage(teamId ?? "")}
+            headerTitle="Resources"
             buttonTitle="Go to Resources"
             description="Share links of helpful resources to your team for the Voyage. Contribute to the collective knowledgebase to empower your team."
           >
-            {resourceData ? (
-              <ResourcesStateContent contentObject={resourceData} />
+            {resourceList.length > 0 ? (
+              <ResourcesStateContent contentObject={resourceList} />
             ) : null}
           </DashboardWidget>
         </div>
       </div>
       <EmptySprintProvider voyage={voyageData} />
+      <ResourcesProvider payload={projectResources} />
+      <FeaturesProvider payload={features} />
+      <IdeationProvider payload={projectIdeas} />
+      <TechStackProvider payload={techStackDatas} />
     </div>
   );
 }
diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/getDashboardData.ts b/src/app/(main)/dashboard/components/voyage-dashboard/getDashboardData.ts
index 07ddecbbb..4e235a30e 100644
--- a/src/app/(main)/dashboard/components/voyage-dashboard/getDashboardData.ts
+++ b/src/app/(main)/dashboard/components/voyage-dashboard/getDashboardData.ts
@@ -1,42 +1,98 @@
-import { format } from "date-fns";
-import { fetchSprints } from "@/app/(main)/my-voyage/[teamId]/sprints/components/RedirectToCurrentSprintWrapper";
+import { fetchSprints } from "@/myVoyage/sprints/components/RedirectToCurrentSprintWrapper";
+import { fetchMeeting } from "@/myVoyage/sprints/components/SprintWrapper";
+import type { User } from "@/store/features/user/userSlice";
 import type { Sprint, Voyage } from "@/store/features/sprint/sprintSlice";
+import type { AppError } from "@/types/types";
 import { getCurrentSprint } from "@/utils/getCurrentSprint";
 import { getCurrentVoyageData } from "@/utils/getCurrentVoyageData";
-import type { User } from "@/store/features/user/userSlice";
-import { fetchMeeting } from "@/app/(main)/my-voyage/[teamId]/sprints/components/SprintWrapper";
-import type { AppError } from "@/types/types";
-import convertStringToDate from "@/utils/convertStringToDate";
+import { fetchResources } from "@/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourcesComponentWrapper";
+import { fetchTechStack } from "@/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackComponentWrapper";
+import { fetchProjectIdeas } from "@/app/(main)/my-voyage/[teamId]/ideation/components/IdeationComponentWrapper";
+import { fetchFeatures } from "@/app/(main)/my-voyage/[teamId]/features/components/FeaturesComponentWrapper";
+import { type FeaturesList } from "@/store/features/features/featuresSlice";
+import { type IdeationData } from "@/store/features/ideation/ideationSlice";
+import { type TechStackData } from "@/store/features/techStack/techStackSlice";
+import { type ResourceData } from "@/store/features/resources/resourcesSlice";
+import type { AsyncActionResponse } from "@/utils/handleAsync";
 import { ErrorType } from "@/utils/error";
 
 interface GetDashboardDataResponse {
   currentSprintNumber: number | null;
   sprintsData: Sprint[];
   user: User | null;
-  meetingsData: EventList[];
+  meetingsData: Event[];
   voyageNumber: number | null;
   voyageData: Voyage;
-  errorMessage?: string;
-  errorType?: ErrorType;
+  features: FeaturesList[];
+  projectIdeas: IdeationData[];
+  techStackData: TechStackData[];
+  projectResources: ResourceData[];
+  errorMessage?: string | undefined;
+  errorType?: ErrorType | undefined;
 }
 
-export type EventList = {
+export type Event = {
   title: string;
   date: string;
   link: string;
   sprint: number;
 };
 
-export const getDashboardData = async (
+interface FetchResult<T> {
+  data: T | null;
+  error: string | null;
+}
+
+const fetchData = async <T, Y>(
+  fetchFunc: (args: Y) => Promise<AsyncActionResponse<T>>,
   user: User | null,
   error: AppError | null,
   teamId: number,
-): Promise<GetDashboardDataResponse> => {
+  args: Y,
+): Promise<FetchResult<T>> => {
+  const { errorResponse, data } = await getCurrentVoyageData<T, Y>({
+    user,
+    error,
+    teamId,
+    args,
+    func: fetchFunc,
+  });
+
+  if (errorResponse) {
+    return { data: null, error: errorResponse };
+  }
+
+  if (data) {
+    const [res, err] = data;
+
+    if (err) {
+      return { data: null, error: `Error: ${err.message}` };
+    }
+
+    return { data: res, error: null };
+  }
+
+  return { data: null, error: null };
+};
+
+type SprintDataResponse =
+  | {
+      sprintsData: Sprint[];
+      voyageNumber: number | null;
+      voyageData: Voyage;
+      errorMessage: string;
+      errorType?: ErrorType;
+    }
+  | string;
+
+const getSprintsData = async (
+  user: User | null,
+  error: AppError | null,
+  teamId: number,
+): Promise<SprintDataResponse> => {
   let sprintsData: Sprint[] = [];
   let voyageNumber: number | null = null;
   let voyageData: Voyage = {} as Voyage;
-  let errorMessage: string | undefined;
-  let errorType: ErrorType | undefined;
 
   const { errorResponse, data } = await getCurrentVoyageData({
     user,
@@ -48,10 +104,7 @@ export const getDashboardData = async (
 
   if (errorResponse) {
     return {
-      currentSprintNumber: null,
       sprintsData: [],
-      user: null,
-      meetingsData: [],
       voyageNumber: null,
       voyageData: {} as Voyage,
       errorMessage: errorResponse,
@@ -64,10 +117,7 @@ export const getDashboardData = async (
 
     if (error) {
       return {
-        currentSprintNumber: null,
         sprintsData: [],
-        user: null,
-        meetingsData: [],
         voyageNumber: null,
         voyageData: {} as Voyage,
         errorMessage: error.message,
@@ -80,20 +130,72 @@ export const getDashboardData = async (
     voyageData = res!;
   }
 
+  return {
+    sprintsData,
+    voyageNumber,
+    voyageData,
+    errorMessage: "",
+    errorType: undefined,
+  };
+};
+
+export const getDashboardData = async (
+  user: User | null,
+  error: AppError | null,
+  teamId: number,
+): Promise<GetDashboardDataResponse> => {
+  let errorMessage: string | undefined;
+  let errorType: ErrorType | undefined;
+  const sprintsResult = await getSprintsData(user, error, teamId);
+  const featuresResult = await fetchData<FeaturesList[], { teamId: number }>(
+    fetchFeatures,
+    user,
+    error,
+    teamId,
+    { teamId },
+  );
+  const projectIdeasResult = await fetchData<
+    IdeationData[],
+    { teamId: number }
+  >(fetchProjectIdeas, user, error, teamId, { teamId });
+  const techStackResult = await fetchData<TechStackData[], { teamId: number }>(
+    fetchTechStack,
+    user,
+    error,
+    teamId,
+    { teamId },
+  );
+  const resourcesResult = await fetchData<ResourceData[], { teamId: number }>(
+    fetchResources,
+    user,
+    error,
+    teamId,
+    { teamId },
+  );
+
+  if (typeof sprintsResult === "string")
+    return {
+      currentSprintNumber: null,
+      sprintsData: [],
+      user: null,
+      meetingsData: [],
+      voyageNumber: null,
+      voyageData: {} as Voyage,
+      features: [],
+      projectIdeas: [],
+      techStackData: [],
+      projectResources: [],
+      errorMessage: sprintsResult,
+      errorType: ErrorType.FETCH_SPRINT,
+    };
+
   let currentSprintNumber = null;
-  if (sprintsData.length > 0) {
-    const { number } = getCurrentSprint(sprintsData) as Sprint;
-    currentSprintNumber = number;
+  if (sprintsResult.sprintsData.length > 0) {
+    currentSprintNumber =
+      getCurrentSprint(sprintsResult.sprintsData)?.number ?? null;
   }
 
-  const meetingsData: {
-    title: string;
-    date: string;
-    link: string;
-    sprint: number;
-  }[] = [];
-
-  const fetchMeetingsPromises = sprintsData
+  const fetchMeetingsPromises = sprintsResult.sprintsData
     .filter((sprint) => sprint.teamMeetings.length)
     .map((sprint) =>
       fetchMeeting({
@@ -104,31 +206,36 @@ export const getDashboardData = async (
 
   const fetchMeetingsResults = await Promise.all(fetchMeetingsPromises);
 
-  fetchMeetingsResults.forEach(([res, error]) => {
-    if (res) {
-      const { title, dateTime, meetingLink, sprint } = res;
-      const parsedDate = convertStringToDate(dateTime, user?.timezone ?? "");
-      const formattedDate = format(parsedDate, "yyyy-MM-dd h:mm a");
-      meetingsData.push({
-        title,
-        date: formattedDate,
-        link: meetingLink,
-        sprint: sprint.number,
-      });
-    } else if (error) {
-      errorMessage = error.message;
-      errorType = ErrorType.FETCH_MEETING;
-    }
-  });
+  const meetingsData = fetchMeetingsResults
+    .map(([res, err]) => {
+      if (res) {
+        const { title, dateTime, meetingLink, sprint } = res;
+        return {
+          title,
+          date: dateTime,
+          link: meetingLink,
+          sprint: sprint.number,
+        };
+      } else if (err) {
+        errorMessage = err.message;
+        errorType = ErrorType.FETCH_MEETING;
+      }
+      return null;
+    })
+    .filter(Boolean) as Event[];
 
   return {
     currentSprintNumber,
-    sprintsData,
+    sprintsData: sprintsResult.sprintsData,
     user,
     meetingsData,
-    voyageNumber,
-    voyageData,
-    errorType,
+    voyageNumber: sprintsResult.voyageNumber,
+    voyageData: sprintsResult.voyageData,
+    features: featuresResult.data!,
+    projectIdeas: projectIdeasResult.data!,
+    techStackData: techStackResult.data!,
+    projectResources: resourcesResult.data!,
     errorMessage,
+    errorType,
   };
 };
diff --git a/src/app/(main)/dashboard/mocks/voyageDashboardData.ts b/src/app/(main)/dashboard/mocks/voyageDashboardData.ts
deleted file mode 100644
index 25c32c278..000000000
--- a/src/app/(main)/dashboard/mocks/voyageDashboardData.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import {
-  ComputerDesktopIcon,
-  SwatchIcon,
-  CodeBracketSquareIcon,
-  ChartPieIcon,
-  CloudIcon,
-  ServerStackIcon,
-} from "@heroicons/react/24/solid";
-import type { ComponentType } from "react";
-
-export const CHECKIN_STATUS = "Due today";
-
-export type IdeationData = {
-  title: string;
-  topic: string;
-  description: string;
-};
-
-export type TechStackData = {
-  title: string;
-  icon: ComponentType;
-  value: string;
-};
-
-export type ResourcesData = {
-  title: string;
-  userName: string;
-  resourceUrl: string;
-  userImage?: string;
-};
-
-export type Event = {
-  title: string;
-  link: string;
-  date: string;
-};
-
-export const getIdeationData = (): IdeationData => ({
-  title: "Real Estate crowdsourcing",
-  topic: "Project Idea",
-  description: `A real estate crowdsourcing application is a platform that allows
-  individuals to invest in real estate properties without needing to
-  purchase entire properties themselves. Through the application,
-  investors can pool their money together to fund a real estate project,
-  and then receive a portion of the profits once the project is
-  complete. The platform typically offers a range of real estate
-  projects for investors to choose from, and provides tools to help
-  investors track their investments and receive regular updates on the
-  progress of each project.`,
-});
-
-export const getFeaturesData = (): string[] => [
-  "User Registration",
-  "User Login",
-  "Estate Listing",
-  "Property Search",
-  "Items search",
-];
-
-export const getTechStackData = (): TechStackData[] => [
-  {
-    title: "Frontend",
-    icon: ComputerDesktopIcon,
-    value: "React",
-  },
-  {
-    title: "CSS Library",
-    icon: SwatchIcon,
-    value: "TailwindCSS",
-  },
-  {
-    title: "Backend",
-    icon: CodeBracketSquareIcon,
-    value: "NodeJs",
-  },
-  {
-    title: "Project Management",
-    icon: ChartPieIcon,
-    value: "Jira",
-  },
-  {
-    title: "Cloud Provider",
-    icon: CloudIcon,
-    value: "AWS",
-  },
-  {
-    title: "Hosting",
-    icon: ServerStackIcon,
-    value: "Render",
-  },
-];
-
-export const getResourcesData = (): ResourcesData[] => [
-  {
-    title: "What is Agile",
-    userName: "Jonathon Doe",
-    resourceUrl: "https://www.atlassian.com/agile",
-  },
-  {
-    title: "The 5 Best Practices for Writing Clean Code",
-    userName: "Mark Red",
-    resourceUrl:
-      "https://dev.to/favourmark05/writing-clean-code-best-practices-and-principles-3amh",
-  },
-  {
-    title:
-      "The Future of Programming Languages: What to Watch for in the Coming Years",
-    userName: "David Jackson",
-    resourceUrl:
-      "https://www.flowmatters.com/blog/the-future-of-programming-languages-what-to-expect-in-the-next-10-years/",
-  },
-];
diff --git a/src/app/(main)/my-voyage/[teamId]/directory/components/EditHours.tsx b/src/app/(main)/my-voyage/[teamId]/directory/components/EditHours.tsx
index f97a705b8..aaf8e2fc6 100644
--- a/src/app/(main)/my-voyage/[teamId]/directory/components/EditHours.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/directory/components/EditHours.tsx
@@ -102,6 +102,8 @@ export default function EditHours({
       variant="link"
       className="mb-6 mt-2 flex w-full justify-between rounded-lg border-2 border-neutral-content px-3.5 py-2.5 text-base text-base-300 outline-none hover:border-base-300"
       onClick={handleClick}
+      aria-label="average hour per sprint"
+      data-cy="avg-hr-per-sprint"
     >
       {hrPerSprint ? `${hrPerSprint}` : "Add Hours"}
       <PencilSquareIcon className="w-3.5" />
diff --git a/src/app/(main)/my-voyage/[teamId]/ideation/components/IdeationComponentWrapper.tsx b/src/app/(main)/my-voyage/[teamId]/ideation/components/IdeationComponentWrapper.tsx
index 4725c821f..29d74891d 100644
--- a/src/app/(main)/my-voyage/[teamId]/ideation/components/IdeationComponentWrapper.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/ideation/components/IdeationComponentWrapper.tsx
@@ -115,9 +115,9 @@ export default async function IdeationComponentWrapper({
 
     return (
       <>
+        <CreateIdeationContainer />
         {!projectIdeas.length ? (
           <>
-            <CreateIdeationContainer />
             <div className="my-20 flex h-[290px] w-full gap-x-48">
               <div className="flex flex-col justify-center">
                 <h1 className="text-xl font-medium text-base-300">
@@ -155,7 +155,6 @@ export default async function IdeationComponentWrapper({
               isIdeationFinalized={false}
               firstChild={
                 <VoteCard
-                  teamId={teamId}
                   projectIdeaId={projectIdea.id}
                   users={projectIdea.projectIdeaVotes}
                 />
diff --git a/src/app/(main)/my-voyage/[teamId]/ideation/components/IdeationForm.tsx b/src/app/(main)/my-voyage/[teamId]/ideation/components/IdeationForm.tsx
index 12659de26..cc2f26243 100644
--- a/src/app/(main)/my-voyage/[teamId]/ideation/components/IdeationForm.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/ideation/components/IdeationForm.tsx
@@ -93,7 +93,6 @@ export default function IdeationForm() {
       }
 
       const filteredData: MyObject = {
-        teamId,
         ideationId,
       };
 
@@ -148,7 +147,6 @@ export default function IdeationForm() {
         },
         payload: {
           params: {
-            teamId,
             ideationId,
           },
           redirect: { router, route },
@@ -221,7 +219,6 @@ export default function IdeationForm() {
       }
 
       const filteredData = {
-        teamId,
         ideationId,
         ...modifiedObject,
       };
diff --git a/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx b/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx
index edb9783aa..042aa0ffb 100644
--- a/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx
@@ -22,10 +22,9 @@ interface VoteCardProps {
   projectIdeaId: number;
   users: ProjectIdeaVotes[];
   className?: string;
-  teamId: number;
 }
 
-function VoteCard({ teamId, projectIdeaId, users, className }: VoteCardProps) {
+function VoteCard({ projectIdeaId, users, className }: VoteCardProps) {
   const [currentUserVoted, setCurrentUserVoted] = useState<null | boolean>(
     null,
   );
@@ -52,7 +51,6 @@ function VoteCard({ teamId, projectIdeaId, users, className }: VoteCardProps) {
       dispatch(setProjectIdeasLoadingTrue());
 
       const [, error] = await removeIdeationVoteAction({
-        teamId,
         ideationId: projectIdeaId,
       });
 
@@ -67,7 +65,6 @@ function VoteCard({ teamId, projectIdeaId, users, className }: VoteCardProps) {
     } else {
       dispatch(setProjectIdeasLoadingTrue());
       const [, error] = await addIdeationVoteAction({
-        teamId,
         ideationId: projectIdeaId,
       });
 
diff --git a/src/app/(main)/my-voyage/[teamId]/ideation/finalize/components/FinalizeIdeationItem.tsx b/src/app/(main)/my-voyage/[teamId]/ideation/finalize/components/FinalizeIdeationItem.tsx
index 5734f7137..62ee073de 100644
--- a/src/app/(main)/my-voyage/[teamId]/ideation/finalize/components/FinalizeIdeationItem.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/ideation/finalize/components/FinalizeIdeationItem.tsx
@@ -27,12 +27,12 @@ export default function FinalizeIdeationItem({
       title,
     });
   }
-
   return (
     <Button
       variant={finalizedIdeation.title === title ? "primary" : "outline"}
       className="w-full gap-x-0"
       onClick={handleClick}
+      aria-label="Finalized Project Idea"
     >
       <div className="flex w-full flex-col items-center justify-center gap-y-2">
         <h2 className="text-base font-semibold">{title}</h2>
diff --git a/src/app/(main)/my-voyage/[teamId]/ideation/ideationService.ts b/src/app/(main)/my-voyage/[teamId]/ideation/ideationService.ts
index 636058945..fa2ae7590 100644
--- a/src/app/(main)/my-voyage/[teamId]/ideation/ideationService.ts
+++ b/src/app/(main)/my-voyage/[teamId]/ideation/ideationService.ts
@@ -29,11 +29,13 @@ interface IdeationResponse {
 interface AddIdeationBody extends IdeationBody {}
 interface EditIdeationBody extends Partial<AddIdeationBody> {}
 
+type IdeationWithoutTeamId = Omit<IdeationProps, "teamId">;
+
 export interface AddIdeationProps extends AddIdeationType, IdeationBody {}
-export interface EditIdeationProps extends EditIdeationBody, IdeationProps {}
-export interface DeleteIdeationProps extends IdeationProps {}
+export type EditIdeationProps = EditIdeationBody & IdeationWithoutTeamId;
+export type DeleteIdeationProps = IdeationWithoutTeamId;
 
-export interface IdeationVoteProps extends IdeationProps {}
+export type IdeationVoteProps = IdeationWithoutTeamId;
 export type FetchIdeationsProps = Pick<IdeationProps, "teamId">;
 
 export interface FinalizeIdeationProps extends IdeationProps {}
@@ -77,7 +79,6 @@ export async function addIdeation({
 }
 
 export async function editIdeation({
-  teamId,
   ideationId,
   title,
   description,
@@ -87,7 +88,7 @@ export async function editIdeation({
 
   const editIdeationAsync = () =>
     PATCH<EditIdeationBody, EditIdeationResponse>(
-      `api/v1/voyages/teams/${teamId}/ideations/${ideationId}`,
+      `api/v1/voyages/ideations/${ideationId}`,
       token,
       "default",
       { title, description, vision },
@@ -103,13 +104,12 @@ export async function editIdeation({
 }
 
 export async function deleteIdeation({
-  teamId,
   ideationId,
 }: DeleteIdeationProps): Promise<AsyncActionResponse<DeleteIdeationResponse>> {
   const token = getAccessToken();
   const deleteIdeationAsync = () =>
     DELETE<DeleteIdeationResponse>(
-      `api/v1/voyages/teams/${teamId}/ideations/${ideationId}`,
+      `api/v1/voyages/ideations/${ideationId}`,
       token,
       "default",
     );
@@ -124,14 +124,13 @@ export async function deleteIdeation({
 }
 
 export async function addIdeationVote({
-  teamId,
   ideationId,
 }: IdeationVoteProps): Promise<AsyncActionResponse<IdeationVoteResponse>> {
   const token = getAccessToken();
 
   const addIdeationVoteAsync = () =>
     POST<undefined, IdeationVoteResponse>(
-      `api/v1/voyages/teams/${teamId}/ideations/${ideationId}/ideation-votes`,
+      `api/v1/voyages/ideations/${ideationId}/ideation-votes`,
       token,
       "default",
     );
@@ -146,14 +145,13 @@ export async function addIdeationVote({
 }
 
 export async function removeIdeationVote({
-  teamId,
   ideationId,
 }: IdeationVoteProps): Promise<AsyncActionResponse<IdeationVoteResponse>> {
   const token = getAccessToken();
 
   const removeIdeationVoteAsync = () =>
     DELETE<IdeationVoteResponse>(
-      `api/v1/voyages/teams/${teamId}/ideations/${ideationId}/ideation-votes`,
+      `api/v1/voyages/ideations/${ideationId}/ideation-votes`,
       token,
       "default",
     );
diff --git a/src/app/(main)/my-voyage/[teamId]/sprints/components/EmptySprintWrapper.tsx b/src/app/(main)/my-voyage/[teamId]/sprints/components/EmptySprintWrapper.tsx
index d093dc1e7..fa0b33d4f 100644
--- a/src/app/(main)/my-voyage/[teamId]/sprints/components/EmptySprintWrapper.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/sprints/components/EmptySprintWrapper.tsx
@@ -17,6 +17,7 @@ import {
   getSprintCheckinIsStatus,
   getVoyageProjectStatus,
 } from "@/utils/getFormStatus";
+import { getCurrentVoyageTeam } from "@/utils/getCurrentVoyageTeam";
 import { ErrorType } from "@/utils/error";
 import ErrorComponent from "@/components/Error";
 
@@ -45,6 +46,16 @@ export default async function EmptySprintWrapper({
 
   const [user, error] = await getUser();
 
+  const { currentTeam, projectSubmitted } = getCurrentVoyageTeam({
+    teamId,
+    user,
+    error: null,
+  });
+
+  if (currentTeam && projectSubmitted) {
+    redirect(`/my-voyage/${teamId}/sprints/`);
+  }
+
   const { errorResponse, data } = await getCurrentVoyageData({
     user,
     error,
diff --git a/src/app/(main)/my-voyage/[teamId]/sprints/components/RedirectToCurrentSprintWrapper.tsx b/src/app/(main)/my-voyage/[teamId]/sprints/components/RedirectToCurrentSprintWrapper.tsx
index f2148c028..cdf368a7f 100644
--- a/src/app/(main)/my-voyage/[teamId]/sprints/components/RedirectToCurrentSprintWrapper.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/sprints/components/RedirectToCurrentSprintWrapper.tsx
@@ -1,11 +1,16 @@
 import { redirect } from "next/navigation";
 
+import VoyageSubmittedMessage from "./VoyageSubmittedMessage";
+
 import {
   type FetchSprintsProps,
   type FetchSprintsResponse,
   type SprintsResponse,
 } from "@/myVoyage/sprints/sprintsService";
 
+import VoyagePageBannerContainer from "@/components/banner/VoyagePageBannerContainer";
+import Banner from "@/components/banner/Banner";
+
 import { getAccessToken } from "@/utils/getCookie";
 import { getUser } from "@/utils/getUser";
 import { getCurrentSprint } from "@/utils/getCurrentSprint";
@@ -15,6 +20,7 @@ import { type AsyncActionResponse, handleAsync } from "@/utils/handleAsync";
 import { type Sprint } from "@/store/features/sprint/sprintSlice";
 import { getCurrentVoyageData } from "@/utils/getCurrentVoyageData";
 import routePaths from "@/utils/routePaths";
+import { getCurrentVoyageTeam } from "@/utils/getCurrentVoyageTeam";
 import { ErrorType } from "@/utils/error";
 import ErrorComponent from "@/components/Error";
 
@@ -49,6 +55,32 @@ export default async function RedirectToCurrentSprintWrapper({
 
   const [user, error] = await getUser();
 
+  const { currentTeam, projectSubmitted } = getCurrentVoyageTeam({
+    teamId,
+    user,
+    error: null,
+  });
+
+  if (currentTeam && projectSubmitted) {
+    return (
+      <div className="flex w-full flex-col gap-y-10">
+        <VoyagePageBannerContainer
+          title="Sprints"
+          description="A sprint agenda helps the team stay on track, communicate well, and improve. Basically, it's like speed dating for developers. Except we're not looking for a soulmate, we're just trying to get some quality work done."
+        >
+          <Banner
+            imageLight="/img/sprints_banner_light.png"
+            imageDark="/img/sprints_banner_dark.png"
+            alt="sprints_banner"
+            height="h-[200px]"
+            width="w-[276px]"
+          />
+        </VoyagePageBannerContainer>
+        <VoyageSubmittedMessage />
+      </div>
+    );
+  }
+
   const { errorResponse, data } = await getCurrentVoyageData({
     user,
     error,
diff --git a/src/app/(main)/my-voyage/[teamId]/sprints/components/SprintActions.tsx b/src/app/(main)/my-voyage/[teamId]/sprints/components/SprintActions.tsx
index 26c58a5fb..2538a6d9b 100644
--- a/src/app/(main)/my-voyage/[teamId]/sprints/components/SprintActions.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/sprints/components/SprintActions.tsx
@@ -75,19 +75,6 @@ export default function SprintActions({
 
   function renderSubmitVoyageButton() {
     if (submitVoyageIsAllowed) {
-      return (
-        <Button
-          variant="secondary"
-          size="lg"
-          className="group"
-          disabled={false}
-        >
-          <RocketLaunchIcon className="h-[18px] w-[18px]" />
-          Submit Voyage
-          <ArrowRightIcon className="h-[18px] w-0 transition-all group-hover:w-[18px]" />
-        </Button>
-      );
-    } else {
       if (voyageProjectIsSubmitted) {
         return (
           <Button
@@ -96,7 +83,7 @@ export default function SprintActions({
             className="group"
             disabled={true}
           >
-            <RocketLaunchIcon className="h-[18px] w-[18px]" />
+            <SolidRocketLaunchIcon className="h-[18px] w-[18px]" />
             Voyage Submitted
           </Button>
         );
@@ -106,13 +93,21 @@ export default function SprintActions({
             variant="secondary"
             size="lg"
             className="group"
-            disabled={true}
+            disabled={false}
           >
-            <SolidRocketLaunchIcon className="h-[18px] w-[18px]" />
+            <RocketLaunchIcon className="h-[18px] w-[18px]" />
             Submit Voyage
+            <ArrowRightIcon className="h-[18px] w-0 transition-all group-hover:w-[18px]" />
           </Button>
         );
       }
+    } else {
+      return (
+        <Button variant="secondary" size="lg" className="group" disabled={true}>
+          <SolidRocketLaunchIcon className="h-[18px] w-[18px]" />
+          {voyageProjectIsSubmitted ? "Voyage Submitted" : "Submit Voyage"}
+        </Button>
+      );
     }
   }
 
diff --git a/src/app/(main)/my-voyage/[teamId]/sprints/components/SprintWrapper.tsx b/src/app/(main)/my-voyage/[teamId]/sprints/components/SprintWrapper.tsx
index bb4ab4372..4f9e7a93c 100644
--- a/src/app/(main)/my-voyage/[teamId]/sprints/components/SprintWrapper.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/sprints/components/SprintWrapper.tsx
@@ -37,6 +37,7 @@ import {
   getSprintCheckinIsStatus,
   getVoyageProjectStatus,
 } from "@/utils/getFormStatus";
+import { getCurrentVoyageTeam } from "@/utils/getCurrentVoyageTeam";
 import { ErrorType } from "@/utils/error";
 import ErrorComponent from "@/components/Error";
 
@@ -77,6 +78,18 @@ export default async function SprintWrapper({ params }: SprintWrapperProps) {
 
   const [user, error] = await getUser();
 
+  // Check if it's a current team and if a project's been submitted,
+  // redirect to /sprints page where a corresponding messsage is rendered
+  const { currentTeam, projectSubmitted } = getCurrentVoyageTeam({
+    teamId,
+    user,
+    error: null,
+  });
+
+  if (currentTeam && projectSubmitted) {
+    redirect(`/my-voyage/${teamId}/sprints/`);
+  }
+
   const { errorResponse, data } = await getCurrentVoyageData({
     user,
     error,
diff --git a/src/app/(main)/my-voyage/[teamId]/sprints/components/agenda/AgendaTopic.tsx b/src/app/(main)/my-voyage/[teamId]/sprints/components/agenda/AgendaTopic.tsx
index 6f495ca5b..7ee5117b4 100644
--- a/src/app/(main)/my-voyage/[teamId]/sprints/components/agenda/AgendaTopic.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/sprints/components/agenda/AgendaTopic.tsx
@@ -34,12 +34,12 @@ export default function AgendaTopic({
       <div className="flex justify-between">
         <h4 className="py-2 text-xl font-medium">{topic.title}</h4>
         <div className="flex items-center gap-x-5">
-          <IconButton onClick={editTopic} aria-label="edit topic">
+          <IconButton onClick={editTopic} ariaLabel="edit topic">
             <EllipsisVerticalIcon />
           </IconButton>
           <IconButton
             onClick={() => changeStatus(topic.id, !topic.status)}
-            aria-label="change status"
+            ariaLabel="change status"
             disabled={statusButtonDisabled}
           >
             {topic.status ? (
diff --git a/src/app/(main)/my-voyage/[teamId]/sprints/components/sections/Sections.tsx b/src/app/(main)/my-voyage/[teamId]/sprints/components/sections/Sections.tsx
index 652620dfc..70f3d2f78 100644
--- a/src/app/(main)/my-voyage/[teamId]/sprints/components/sections/Sections.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/sprints/components/sections/Sections.tsx
@@ -36,7 +36,7 @@ export default function Sections({
       id: Forms.notes,
       title: "notes",
       icon: <DocumentTextIcon aria-hidden="true" />,
-      isAdded: notes !== undefined,
+      isAdded: notes !== null,
       children: <Notes data={notes} />,
     },
     {
diff --git a/src/app/(main)/my-voyage/[teamId]/sprints/sprintsService.ts b/src/app/(main)/my-voyage/[teamId]/sprints/sprintsService.ts
index 08e20f139..31f7313d8 100644
--- a/src/app/(main)/my-voyage/[teamId]/sprints/sprintsService.ts
+++ b/src/app/(main)/my-voyage/[teamId]/sprints/sprintsService.ts
@@ -472,7 +472,7 @@ export async function submitVoyageProjectForm({
 
   const editSectionAsync = () =>
     POST<SubmitVoyageFormBody, SubmitVoyageFormResponse>(
-      "api/v1/voyages/sprints/submit-project",
+      "api/v1/voyages/submit-project",
       token,
       "default",
       { voyageTeamId, responses },
diff --git a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/AddVoteBtn.tsx b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/AddVoteBtn.tsx
index cfc70adc9..046bcdd4a 100644
--- a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/AddVoteBtn.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/AddVoteBtn.tsx
@@ -1,10 +1,45 @@
+import { addTechItemVote } from "@/myVoyage/tech-stack/techStackService";
 import Button from "@/components/Button";
+import useServerAction from "@/hooks/useServerAction";
+import Spinner from "@/components/Spinner";
+import { useAppDispatch } from "@/store/hooks";
+import { onOpenModal } from "@/store/features/modal/modalSlice";
+
+interface AddVoteBtnProps {
+  techItemId: number;
+}
+
+export default function AddVoteBtn({ techItemId }: AddVoteBtnProps) {
+  const dispatch = useAppDispatch();
+  const {
+    runAction: addVoteAction,
+    isLoading: addVoteLoading,
+    setIsLoading: setAddVoteLoading,
+  } = useServerAction(addTechItemVote);
+
+  const handleClick = async () => {
+    const [, error] = await addVoteAction({
+      techItemId,
+    });
+
+    if (error) {
+      dispatch(
+        onOpenModal({ type: "error", content: { message: error.message } }),
+      );
+    }
+    setAddVoteLoading(false);
+  };
 
-export default function AddVoteBtn() {
   return (
     <div className="col-span-3 flex justify-end">
-      <Button variant="primary" size="xs" className="rounded-3xl font-semibold">
-        Add Vote
+      <Button
+        variant="primary"
+        size="xs"
+        className={`rounded-3xl font-semibold ${addVoteLoading && "w-3/4"}`}
+        onClick={handleClick}
+        disabled={addVoteLoading}
+      >
+        {addVoteLoading ? <Spinner /> : "Add Vote"}
       </Button>
     </div>
   );
diff --git a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/RemoveVoteBtn.tsx b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/RemoveVoteBtn.tsx
index 49d295d45..16feddc8b 100644
--- a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/RemoveVoteBtn.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/RemoveVoteBtn.tsx
@@ -1,53 +1,45 @@
-import type { Dispatch, SetStateAction } from "react";
-import { EllipsisVerticalIcon } from "@heroicons/react/24/solid";
-import SettingsMenu from "./SettingsMenu";
+import { removeTechItemVote } from "@/myVoyage/tech-stack/techStackService";
 import Button from "@/components/Button";
+import useServerAction from "@/hooks/useServerAction";
+import Spinner from "@/components/Spinner";
+import { useAppDispatch } from "@/store/hooks";
+import { onOpenModal } from "@/store/features/modal/modalSlice";
 
 interface RemoveVoteBtnProps {
-  id: number;
-  openMenu: (value: number) => void;
-  numberOfVotes: number;
-  closeMenu: () => void;
-  setIsEditing: Dispatch<SetStateAction<number>>;
-  isMenuOpen: number;
+  techItemId: number;
 }
 
-export default function RemoveVoteBtn({
-  id,
-  openMenu,
-  numberOfVotes,
-  closeMenu,
-  setIsEditing,
-  isMenuOpen,
-}: RemoveVoteBtnProps) {
-  const handleClick = () => {
-    openMenu(id);
+export default function RemoveVoteBtn({ techItemId }: RemoveVoteBtnProps) {
+  const dispatch = useAppDispatch();
+  const {
+    runAction: removeVoteAction,
+    isLoading: removeVoteLoading,
+    setIsLoading: setRemoveVoteLoading,
+  } = useServerAction(removeTechItemVote);
+
+  const handleClick = async () => {
+    const [, error] = await removeVoteAction({
+      techItemId,
+    });
+    if (error) {
+      dispatch(
+        onOpenModal({ type: "error", content: { message: error.message } }),
+      );
+    }
+    setRemoveVoteLoading(false);
   };
 
   return (
-    <div className="relative col-span-2 flex w-[165px] items-center justify-end">
-      {numberOfVotes < 2 && (
-        <div className="h-1/6 w-1/6">
-          <EllipsisVerticalIcon
-            className="mr-2 rounded-xl hover:cursor-pointer hover:bg-base-100"
-            onClick={handleClick}
-          />
-          {isMenuOpen === id && (
-            <SettingsMenu
-              onClose={closeMenu}
-              setIsEditing={setIsEditing}
-              id={id}
-            />
-          )}
-        </div>
-      )}
-      <Button
-        variant="error"
-        size="xs"
-        className="justify-self-end rounded-3xl font-semibold"
-      >
-        Remove Vote
-      </Button>
-    </div>
+    <Button
+      variant="error"
+      size="xs"
+      className={`justify-self-end rounded-3xl font-semibold ${
+        removeVoteLoading && "w-3/4"
+      }`}
+      onClick={handleClick}
+      disabled={removeVoteLoading}
+    >
+      {removeVoteLoading ? <Spinner /> : "Remove Vote"}
+    </Button>
   );
 }
diff --git a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/SettingsMenu.tsx b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/SettingsMenu.tsx
index 313beed84..8f0b7a78a 100644
--- a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/SettingsMenu.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/SettingsMenu.tsx
@@ -1,22 +1,48 @@
 "use client";
 import { useEffect, useRef } from "react";
+import { deleteTechItem } from "@/myVoyage/tech-stack/techStackService";
+import { useAppDispatch } from "@/store/hooks";
+import { onOpenModal } from "@/store/features/modal/modalSlice";
 import EditMenu from "@/components/EditMenu";
 
 interface SettingsMenuProps {
   onClose: () => void;
-  setIsEditing: (value: number) => void;
+  setEditItemId: (value: number) => void;
   id: number;
 }
 
 export default function SettingsMenu({
   onClose,
-  setIsEditing,
+  setEditItemId,
   id,
 }: SettingsMenuProps) {
+  const dispatch = useAppDispatch();
   const menuRef = useRef<HTMLDivElement>(null);
 
   const openEdit = () => {
-    setIsEditing(id);
+    setEditItemId(id);
+  };
+
+  const handleDelete = () => {
+    dispatch(
+      onOpenModal({
+        type: "confirmation",
+        content: {
+          title: "Confirm Deletion",
+          message:
+            "Are you sure you want to delete? You will permanently lose all the information and will not be able to recover it.",
+          confirmationText: "Delete",
+          cancelText: "Keep It",
+        },
+        payload: {
+          params: {
+            techItemId: id,
+          },
+          redirect: null,
+          deleteFunction: deleteTechItem,
+        },
+      }),
+    );
   };
 
   useEffect(() => {
@@ -33,7 +59,7 @@ export default function SettingsMenu({
 
   return (
     <div className="absolute -mt-6 ml-[12px]" ref={menuRef}>
-      <EditMenu handleClick={openEdit} />
+      <EditMenu handleClick={openEdit} handleDelete={handleDelete} />
     </div>
   );
 }
diff --git a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx
index 821d9b84e..bbb4528ea 100644
--- a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx
@@ -1,37 +1,146 @@
 "use client";
 import { useRef, useState, useEffect } from "react";
-import type { FormEvent } from "react";
+import { type SubmitHandler, useForm } from "react-hook-form";
+import { useParams } from "next/navigation";
+import * as z from "zod";
+import { EllipsisVerticalIcon } from "@heroicons/react/24/solid";
+import { zodResolver } from "@hookform/resolvers/zod";
 import GetIcon from "./GetIcons";
 import AddVoteBtn from "./AddVoteBtn";
 import RemoveVoteBtn from "./RemoveVoteBtn";
+import SettingsMenu from "./SettingsMenu";
+import {
+  addTechItem,
+  editTechItem,
+} from "@/myVoyage/tech-stack/techStackService";
+import getTechCategory from "@/myVoyage/tech-stack/components/getTechCategory";
 import TextInput from "@/components/inputs/TextInput";
 import AvatarGroup from "@/components/avatar/AvatarGroup";
 import Avatar from "@/components/avatar/Avatar";
 import Button from "@/components/Button";
 import type { TechStackItem } from "@/store/features/techStack/techStackSlice";
-import { useUser } from "@/store/hooks";
+import { useUser, useAppDispatch, useAppSelector } from "@/store/hooks";
+import useServerAction from "@/hooks/useServerAction";
+import { onOpenModal } from "@/store/features/modal/modalSlice";
+import Spinner from "@/components/Spinner";
+import { getCurrentVoyageTeam } from "@/utils/getCurrentVoyageTeam";
+import { validateTextInput } from "@/utils/form/validateInput";
 
 interface TechStackCardProps {
   title: string;
   data: TechStackItem[];
 }
 
+const validationSchemaAdd = z.object({
+  add: validateTextInput({
+    inputName: "new item",
+    required: true,
+  }),
+});
+
+const validationSchemaEdit = z.object({
+  edit: validateTextInput({
+    inputName: "edit item",
+    required: true,
+  }),
+});
+
+type ValidationSchemaAdd = z.infer<typeof validationSchemaAdd>;
+type ValidationSchemaEdit = z.infer<typeof validationSchemaEdit>;
+
 export default function TechStackCard({ title, data }: TechStackCardProps) {
   const [isInput, setIsInput] = useState(false);
-  const [isEditing, setIsEditing] = useState(-1);
+  const [editItemId, setEditItemId] = useState(-1);
   const [isDuplicate, setIsDuplicate] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const editRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLFormElement>(null);
+  const editRef = useRef<HTMLFormElement>(null);
   const items = data.map((item) => item.name.toLowerCase());
+  const params = useParams<{ teamId: string }>();
+  const teamId = Number(params.teamId);
   const userId = useUser().id;
+  const user = useAppSelector((state) => state.user);
+  const { voyageTeamMemberId } = getCurrentVoyageTeam({
+    teamId,
+    user,
+    error: null,
+  });
   const [openMenuId, setOpenMenuId] = useState(-1);
+  const techCategoryId = getTechCategory(title) ?? 0;
+  const dispatch = useAppDispatch();
+
+  const {
+    runAction: addTechItemAction,
+    isLoading: addTechItemLoading,
+    setIsLoading: setAddTechItemLoading,
+  } = useServerAction(addTechItem);
+
+  const {
+    runAction: editTechItemAction,
+    isLoading: editTechItemLoading,
+    setIsLoading: setEditTechItemLoading,
+  } = useServerAction(editTechItem);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<ValidationSchemaAdd>({
+    mode: "onSubmit",
+    resolver: zodResolver(validationSchemaAdd),
+  });
+
+  const {
+    register: registerEdit,
+    handleSubmit: handleSubmitEdit,
+    reset: resetEdit,
+    formState: { errors: errorsEdit },
+  } = useForm<ValidationSchemaEdit>({
+    mode: "onSubmit",
+    resolver: zodResolver(validationSchemaEdit),
+  });
 
   const toggleAddItemInput = () => {
     setIsInput(!isInput);
   };
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+  const handleAddItem: SubmitHandler<ValidationSchemaAdd> = async (data) => {
+    const techName = data.add;
+    const [, error] = await addTechItemAction({
+      teamId,
+      techName,
+      techCategoryId,
+      voyageTeamMemberId,
+    });
+    if (error) {
+      dispatch(
+        onOpenModal({ type: "error", content: { message: error.message } }),
+      );
+    }
+    setAddTechItemLoading(false);
+    setIsInput(false);
+    reset();
+  };
+
+  const handleEdit = async (techItemId: number) => {
+    const input = editRef?.current?.querySelector(
+      "input[name='edit']",
+    ) as HTMLInputElement;
+    const techName = input.value ?? "";
+    const [, error] = await editTechItemAction({
+      techItemId,
+      techName,
+    });
+
+    if (error) {
+      dispatch(
+        onOpenModal({ type: "error", content: { message: error.message } }),
+      );
+    }
+    setEditTechItemLoading(false);
+    setEditItemId(-1);
+    handleSettingsMenuClose();
+    resetEdit();
   };
 
   const handleSettingsMenuClose = () => {
@@ -39,7 +148,7 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
   };
 
   const clearActionEditItem = () => {
-    setIsEditing(-1);
+    setEditItemId(-1);
     setOpenMenuId(-1);
   };
 
@@ -47,38 +156,73 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
     setIsInput(!isInput);
   };
 
-  const handleOnChange = () => {
-    const addingItemValue = inputRef.current?.value.toLowerCase();
-
-    const isDuplicateInAdding =
-      addingItemValue && items.includes(addingItemValue);
+  const checkIfDuplicate = () => {
+    let newItem;
+    const input = inputRef?.current?.querySelector(
+      "input[name='add']",
+    ) as HTMLInputElement;
+    if (input) {
+      newItem = input.value.toLowerCase();
+      if (items.includes(newItem)) {
+        return setIsDuplicate(true);
+      }
+    }
+    return setIsDuplicate(false);
+  };
 
-    if (addingItemValue && isDuplicateInAdding !== isDuplicate) {
-      setIsDuplicate(!!isDuplicateInAdding);
+  const errorMessage = () => {
+    if (isDuplicate) {
+      return "Duplicate Item";
+    } else if (errors?.add?.message && errors) {
+      return errors.add.message;
     }
   };
 
+  useEffect(() => {
+    const input = inputRef?.current?.querySelector(
+      "input[name='add']",
+    ) as HTMLInputElement;
+    const edit = editRef?.current?.querySelector(
+      "input[name='edit']",
+    ) as HTMLInputElement;
+
+    if (input) {
+      input.focus();
+    }
+    if (edit) {
+      edit.focus();
+    }
+  }, [isInput, editItemId]);
+
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
+      const targetNode = event.target as Node;
       if (
         inputRef.current &&
-        !inputRef.current.contains(event.target as Node)
+        !inputRef.current.contains(targetNode) &&
+        !(targetNode instanceof HTMLElement && targetNode.closest("form"))
       ) {
         setIsInput(false);
+        reset();
       }
-      if (editRef.current && !editRef.current.contains(event.target as Node)) {
-        setIsEditing(-1);
+      if (
+        editRef.current &&
+        !editRef.current.contains(targetNode) &&
+        !(targetNode instanceof HTMLElement && targetNode.closest("form"))
+      ) {
+        setEditItemId(-1);
         setOpenMenuId(-1);
+        resetEdit();
       }
     }
     document.body.addEventListener("click", handleClickOutside);
     return () => {
       document.body.removeEventListener("click", handleClickOutside);
     };
-  }, [isInput, isEditing]);
+  }, [isInput, editItemId, reset, resetEdit]);
 
   return (
-    <div className="h-80 min-w-[420px] rounded-lg bg-base-200 px-6 py-5 text-base-300 sm:w-96">
+    <div className="h-80 min-w-[420px] rounded-lg bg-base-200 p-5 text-base-300 sm:w-96">
       <div className="flex flex-row justify-start">
         {GetIcon(title)}
         <span className="self-center text-xl font-semibold text-base-300">
@@ -86,7 +230,7 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
         </span>
       </div>
 
-      <div className="mt-6 h-40 overflow-y-auto pt-1">
+      <div className="mt-6 h-40 overflow-y-auto p-1">
         <ul className="text-base-300">
           {data.map((element) => {
             const voteIsSubmitted = element.teamTechStackItemVotes.find(
@@ -94,23 +238,28 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
             );
             return (
               <li
-                className="relative mb-8 grid grid-cols-6 items-center text-base"
+                className="relative mb-8 mr-2 grid grid-cols-6 items-center text-base"
                 key={element.id}
               >
-                {isEditing === element.id && (
-                  <form className="col-span-6 -my-2 h-12">
+                {editItemId === element.id ? (
+                  <form
+                    onSubmit={handleSubmitEdit(() => handleEdit(element.id))}
+                    className="col-span-6 -my-2 h-12"
+                    ref={editRef}
+                  >
                     <TextInput
                       id={element.id.toString()}
-                      ref={editRef}
                       placeholder={element.name}
-                      submitButtonText="Save"
+                      defaultValue={element.name}
+                      submitButtonText={
+                        editTechItemLoading ? <Spinner /> : "Save"
+                      }
                       clearInputAction={clearActionEditItem}
-                      onChange={handleOnChange}
+                      {...registerEdit("edit")}
+                      errorMessage={errorsEdit.edit?.message}
                     />
                   </form>
-                )}
-
-                {isEditing !== element.id && (
+                ) : (
                   <>
                     {/*item name*/}
                     <p className="text-base font-medium leading-5">
@@ -129,17 +278,28 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
                         ))}
                       </AvatarGroup>
                     </div>
+                    {/**add vote or remove vote buttons*/}
                     {voteIsSubmitted ? (
-                      <RemoveVoteBtn
-                        id={element.id}
-                        openMenu={setOpenMenuId}
-                        numberOfVotes={element.teamTechStackItemVotes.length}
-                        closeMenu={handleSettingsMenuClose}
-                        setIsEditing={setIsEditing}
-                        isMenuOpen={openMenuId}
-                      />
+                      <div className="relative col-span-2 flex w-[180px] items-center justify-end">
+                        {element.teamTechStackItemVotes.length < 2 && (
+                          <div className="h-1/6 w-1/6">
+                            <EllipsisVerticalIcon
+                              className="mr-2 rounded-xl hover:cursor-pointer hover:bg-base-100"
+                              onClick={() => setOpenMenuId(element.id)}
+                            />
+                            {openMenuId === element.id && (
+                              <SettingsMenu
+                                onClose={handleSettingsMenuClose}
+                                setEditItemId={setEditItemId}
+                                id={element.id}
+                              />
+                            )}
+                          </div>
+                        )}
+                        <RemoveVoteBtn techItemId={element.id} />
+                      </div>
                     ) : (
-                      <AddVoteBtn />
+                      <AddVoteBtn techItemId={element.id} />
                     )}
                   </>
                 )}
@@ -148,18 +308,17 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
           })}
         </ul>
       </div>
-
       {isInput ? (
-        <form onSubmit={handleSubmit}>
+        <form ref={inputRef} onSubmit={handleSubmit(handleAddItem)}>
           <TextInput
-            id={title}
-            ref={inputRef}
+            id="add"
             placeholder="Add Tech Stack"
-            submitButtonText="Save"
-            errorMessage={isDuplicate ? "Duplicate Item" : ""}
+            submitButtonText={addTechItemLoading ? <Spinner /> : "Save"}
             clearInputAction={clearActionAdditem}
-            onChange={handleOnChange}
             className="z-10"
+            {...register("add")}
+            onChange={checkIfDuplicate}
+            errorMessage={errorMessage()}
           />
         </form>
       ) : (
diff --git a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackContainer.tsx b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackContainer.tsx
index 2d63a7dd5..eeaa75016 100644
--- a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackContainer.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackContainer.tsx
@@ -14,7 +14,7 @@ export default function TechStackContainer({ data }: TechStackContainerProps) {
   }));
 
   return (
-    <div className="w-full p-10">
+    <div className="w-full">
       <div className="mb-10 grid grid-cols-2 place-items-center min-[1920px]:grid-cols-3">
         <div className="col-start-2 flex min-w-[420px] flex-row-reverse sm:w-96 min-[1920px]:col-start-3">
           <Button variant="secondary">Finalize Selection</Button>
diff --git a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/getTechCategory.ts b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/getTechCategory.ts
new file mode 100644
index 000000000..4b0a97760
--- /dev/null
+++ b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/getTechCategory.ts
@@ -0,0 +1,20 @@
+export default function getTechCategory(cardTitle: string) {
+  if (cardTitle === "Frontend") {
+    return 1;
+  }
+  if (cardTitle === "CSS Library") {
+    return 2;
+  }
+  if (cardTitle === "Backend") {
+    return 3;
+  }
+  if (cardTitle === "Project Management") {
+    return 4;
+  }
+  if (cardTitle === "Cloud Provider") {
+    return 5;
+  }
+  if (cardTitle === "Hosting") {
+    return 6;
+  }
+}
diff --git a/src/app/(main)/my-voyage/[teamId]/tech-stack/techStackService.ts b/src/app/(main)/my-voyage/[teamId]/tech-stack/techStackService.ts
new file mode 100644
index 000000000..2b0a7945f
--- /dev/null
+++ b/src/app/(main)/my-voyage/[teamId]/tech-stack/techStackService.ts
@@ -0,0 +1,166 @@
+"use server";
+
+import { revalidateTag } from "next/cache";
+import { CacheTag } from "@/utils/cacheTag";
+import { getAccessToken } from "@/utils/getCookie";
+import { type AsyncActionResponse, handleAsync } from "@/utils/handleAsync";
+import { DELETE, PATCH, POST } from "@/utils/requests";
+import { type TechStackItem } from "@/store/features/techStack/techStackSlice";
+
+interface BaseTechItem {
+  techName: string;
+}
+
+interface TeamProps {
+  teamId: number;
+}
+
+interface VoyageProps {
+  voyageTeamMemberId: number;
+}
+
+interface TechCategoryProps {
+  techCategoryId: number;
+}
+
+interface TechItemIdProps {
+  techItemId: number;
+}
+
+interface AddTechItemProps
+  extends BaseTechItem,
+    TeamProps,
+    TechCategoryProps,
+    VoyageProps {}
+
+type AddTechItemBody = Omit<AddTechItemProps, "teamId">;
+
+interface AddTechItemResponse extends TechItemVoteResponse {}
+
+interface EditTechItemProps extends BaseTechItem, TechItemIdProps {}
+
+type EditTechItemBody = Omit<EditTechItemProps, "techItemId">;
+
+interface EditTechItemResponse extends TechStackItem, VoyageProps {
+  voyageTeamId: number;
+}
+
+export interface DeleteTechItemProps extends TechItemIdProps {}
+
+interface AddTechItemVoteProps extends TechItemIdProps {}
+
+interface TechItemVoteResponse {
+  teamTechStackItemVotedId: number;
+  teamTechId: number;
+  teamMemberId: number;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+interface RemoveTechItemVoteProps extends TechItemIdProps {}
+
+export async function addTechItem({
+  teamId,
+  techName,
+  techCategoryId,
+  voyageTeamMemberId,
+}: AddTechItemProps): Promise<AsyncActionResponse<AddTechItemResponse>> {
+  const token = getAccessToken();
+  const addTechItemAsync = () =>
+    POST<AddTechItemBody, AddTechItemResponse>(
+      `api/v1/voyages/teams/${teamId}/techs`,
+      token,
+      "default",
+      { techName, techCategoryId, voyageTeamMemberId },
+    );
+
+  const [res, error] = await handleAsync(addTechItemAsync);
+
+  if (res) {
+    revalidateTag(CacheTag.techStack);
+  }
+
+  return [res, error];
+}
+
+export async function editTechItem({
+  techItemId,
+  techName,
+}: EditTechItemProps): Promise<AsyncActionResponse<EditTechItemResponse>> {
+  const token = getAccessToken();
+  const editTechItemAsync = () =>
+    PATCH<EditTechItemBody, EditTechItemResponse>(
+      `api/v1/voyages/techs/${techItemId}`,
+      token,
+      "default",
+      { techName },
+    );
+
+  const [res, error] = await handleAsync(editTechItemAsync);
+
+  if (res) {
+    revalidateTag(CacheTag.techStack);
+  }
+
+  return [res, error];
+}
+
+export async function deleteTechItem({
+  techItemId,
+}: DeleteTechItemProps): Promise<AsyncActionResponse<void>> {
+  const token = getAccessToken();
+
+  const deleteTechItemAsync = () =>
+    DELETE<void>(`api/v1/voyages/techs/${techItemId}`, token, "default");
+  const [res, error] = await handleAsync(deleteTechItemAsync);
+
+  if (res) {
+    revalidateTag(CacheTag.techStack);
+  }
+
+  return [res, error];
+}
+
+export async function addTechItemVote({
+  techItemId,
+}: AddTechItemVoteProps): Promise<AsyncActionResponse<TechItemVoteResponse>> {
+  const token = getAccessToken();
+
+  const addTechItemVoteAsync = () =>
+    POST<undefined, TechItemVoteResponse>(
+      `api/v1/voyages/techs/${techItemId}/vote`,
+      token,
+      "default",
+    );
+
+  const [res, error] = await handleAsync(addTechItemVoteAsync);
+
+  if (res) {
+    revalidateTag(CacheTag.techStack);
+  }
+
+  return [res, error];
+}
+
+export async function removeTechItemVote({
+  techItemId,
+}: RemoveTechItemVoteProps): Promise<
+  AsyncActionResponse<TechItemVoteResponse>
+> {
+  const token = getAccessToken();
+
+  const removeTechItemVoteAsync = () =>
+    DELETE<TechItemVoteResponse>(
+      `api/v1/voyages/techs/${techItemId}/vote`,
+      token,
+      "default",
+    );
+
+  const [res, error] = await handleAsync(removeTechItemVoteAsync);
+
+  if (res) {
+    revalidateTag(CacheTag.techStack);
+  }
+
+  return [res, error];
+}
diff --git a/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceCard.tsx b/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceCard.tsx
index 7cdf54e3c..87e57366a 100644
--- a/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceCard.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceCard.tsx
@@ -87,7 +87,7 @@ export default function ResourceCard({
         <IconButton
           className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-base-100"
           onClick={openDeleteModal}
-          aria-label="delete"
+          ariaLabel="delete"
         >
           <TrashIcon className="h-6 w-6" />
         </IconButton>
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index 8631cf458..a50da63b7 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -3,11 +3,13 @@ import { cn } from "@/lib/utils";
 interface IconButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
+  ariaLabel: string;
 }
 
 export default function IconButton({
   children,
   className,
+  ariaLabel,
   ...props
 }: IconButtonProps) {
   return (
@@ -17,6 +19,7 @@ export default function IconButton({
         "flex h-10 w-10 items-center justify-center rounded-full px-2 hover:bg-base-300/25 [&>*]:h-5 [&>*]:w-5 [&>*]:stroke-[1.5px] [&>*]:text-base-300",
         className,
       )}
+      aria-label={ariaLabel}
       {...props}
     >
       {children}
diff --git a/src/components/inputs/CheckBoxGroup/CheckboxGroupItem.tsx b/src/components/inputs/CheckBoxGroup/CheckboxGroupItem.tsx
index 93ed30617..599706ab6 100644
--- a/src/components/inputs/CheckBoxGroup/CheckboxGroupItem.tsx
+++ b/src/components/inputs/CheckBoxGroup/CheckboxGroupItem.tsx
@@ -32,7 +32,7 @@ export const CheckboxGroupItem = React.forwardRef<
         className="peer hidden"
       />
       <span className="flex h-6 w-6 items-center justify-center rounded border border-neutral/40 bg-base-200 transition-all group-hover:bg-base-100 peer-checked:border-base-300 group-hover:peer-checked:border-neutral-content [&>*]:hidden [&>*]:text-base-300 peer-checked:[&>*]:block group-hover:peer-checked:[&>*]:text-neutral-content">
-        <CheckIcon className="hidden transition-all" />
+        <CheckIcon className="hidden h-full w-full transition-all" />
       </span>
       <span className="transition-all peer-checked:text-base-300">{label}</span>
     </Label>
diff --git a/src/components/inputs/TextInput.tsx b/src/components/inputs/TextInput.tsx
index 5c3077f72..86d8b4ede 100644
--- a/src/components/inputs/TextInput.tsx
+++ b/src/components/inputs/TextInput.tsx
@@ -7,6 +7,7 @@ import { EyeSlashIcon, EyeIcon } from "@heroicons/react/24/solid";
 import Label from "./Label";
 import FieldMessage from "./FieldMessage";
 import Button from "@/components/Button";
+import IconButton from "@/components/IconButton";
 
 import { cn } from "@/lib/utils";
 
@@ -140,14 +141,13 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           )}
           {/* CLEAR INPUT BUTTON */}
           {isClearButtonVisible && (
-            // TODO: replace with an Icon Button
-            <button
-              type="button"
-              onClick={clearInput}
+            <IconButton
               className="absolute right-0 top-1/2 -translate-y-1/2 p-[10px]"
+              onClick={clearInput}
+              ariaLabel="delete input"
             >
               <XMarkIcon className="h-5 w-5 text-base-300" />
-            </button>
+            </IconButton>
           )}
           {/* SHOW/HIDE PASSWORD TOGGLE */}
           {type === "password" && (
diff --git a/src/components/modals/Modal.tsx b/src/components/modals/Modal.tsx
index 753c9025d..e0c16f14f 100644
--- a/src/components/modals/Modal.tsx
+++ b/src/components/modals/Modal.tsx
@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { AnimatePresence, type Variants, motion } from "framer-motion";
 import { XMarkIcon } from "@heroicons/react/20/solid";
 import { cn } from "@/lib/utils";
+import IconButton from "@/components/IconButton";
 
 interface ModalProps {
   isOpen: boolean;
@@ -107,9 +108,9 @@ export default function Modal({
                 {icon}
                 <h3 className="text-xl font-semibold capitalize">{title}</h3>
               </div>
-              <button type="button" aria-label="close modal" onClick={onClose}>
+              <IconButton ariaLabel="close modal" onClick={onClose}>
                 <XMarkIcon className="h-6 w-6 fill-current" />
-              </button>
+              </IconButton>
             </div>
             {/* CONTENT */}
             <div className="p-10">{children}</div>
diff --git a/src/components/navbar/AuthHeader.tsx b/src/components/navbar/AuthHeader.tsx
index 43d58a635..48424eac4 100644
--- a/src/components/navbar/AuthHeader.tsx
+++ b/src/components/navbar/AuthHeader.tsx
@@ -39,6 +39,7 @@ export default function AuthHeader() {
       <Bell notificationCount={notificationCount} />
       <div
         ref={menuRef}
+        data-cy="nav-dropdown-menu"
         onClick={toggleMenu}
         className="flex items-center px-2"
       >
diff --git a/src/store/features/modal/modalSlice.ts b/src/store/features/modal/modalSlice.ts
index 3750dfd0e..b157c3e9c 100644
--- a/src/store/features/modal/modalSlice.ts
+++ b/src/store/features/modal/modalSlice.ts
@@ -20,6 +20,10 @@ import {
   type DeleteAgendaTopicResponse,
   type deleteAgendaTopic,
 } from "@/app/(main)/my-voyage/[teamId]/sprints/sprintsService";
+import {
+  type DeleteTechItemProps,
+  type deleteTechItem,
+} from "@/app/(main)/my-voyage/[teamId]/tech-stack/techStackService";
 
 export type ModalType =
   | "error"
@@ -70,7 +74,8 @@ export interface Payload {
     | typeof deleteIdeation
     | typeof deleteResource
     | typeof deleteFeature
-    | typeof deleteAgendaTopic;
+    | typeof deleteAgendaTopic
+    | typeof deleteTechItem;
 }
 
 export type ActionType<X, Y> = (arg: X) => Promise<AsyncActionResponse<Y>>;
@@ -79,7 +84,8 @@ export type DeleteProps =
   | DeleteIdeationProps
   | DeleteResourceProps
   | DeleteFeatureProps
-  | DeleteAgendaTopicProps;
+  | DeleteAgendaTopicProps
+  | DeleteTechItemProps;
 
 export type DeleteResponse =
   | DeleteIdeationResponse
diff --git a/src/store/features/techStack/techStackSlice.ts b/src/store/features/techStack/techStackSlice.ts
index f1e8daa69..176180b54 100644
--- a/src/store/features/techStack/techStackSlice.ts
+++ b/src/store/features/techStack/techStackSlice.ts
@@ -6,6 +6,7 @@ export interface TechStackData {
   id: number;
   name: string;
   description: string;
+  isSelected: boolean;
   teamTechStackItems: TechStackItem[];
 }
 export interface TechStackItem {
diff --git a/src/utils/getCurrentSprint.ts b/src/utils/getCurrentSprint.ts
index ff7f7b947..87836abf6 100644
--- a/src/utils/getCurrentSprint.ts
+++ b/src/utils/getCurrentSprint.ts
@@ -2,13 +2,15 @@ import { isWithinInterval } from "date-fns";
 
 import { type Sprint } from "@/store/features/sprint/sprintSlice";
 
+export const currentDate = new Date(2024, 5, 10, 12);
+
 export function getCurrentSprint(sprints: Sprint[]) {
-  const currentDate = new Date(2024, 5, 1);
   const currentSprint = sprints.find((sprint) =>
     isWithinInterval(currentDate, {
       start: sprint.startDate,
       end: sprint.endDate,
     }),
   );
+
   return currentSprint;
 }
diff --git a/src/utils/getCurrentVoyageTeam.ts b/src/utils/getCurrentVoyageTeam.ts
index 327a254ca..3f98c7ac8 100644
--- a/src/utils/getCurrentVoyageTeam.ts
+++ b/src/utils/getCurrentVoyageTeam.ts
@@ -19,6 +19,7 @@ export function getCurrentVoyageTeam({
   let err = "";
   let currentTeam = false;
   let voyageTeamMemberId: number = 0;
+  let projectSubmitted: boolean = false;
 
   if (user) {
     currentVoyageTeam = user.voyageTeamMembers.find(
@@ -32,6 +33,7 @@ export function getCurrentVoyageTeam({
 
   if (currentVoyageTeam) {
     voyageTeamMemberId = currentVoyageTeam.id;
+    projectSubmitted = currentVoyageTeam.voyageTeam.projectSubmitted;
   }
 
   if (teamId === currentVoyageTeam?.voyageTeamId) {
@@ -48,5 +50,6 @@ export function getCurrentVoyageTeam({
     currentTeam,
     isStarted,
     voyageTeamMemberId,
+    projectSubmitted,
   };
 }
diff --git a/tsconfig.json b/tsconfig.json
index 789c403fd..c396102d3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -28,7 +28,8 @@
     "paths": {
       "@/*": ["./src/*"],
       "@/public/*": ["./public/*"],
-      "@/myVoyage/*": ["./src/app/(main)/my-voyage/[teamId]/*"]
+      "@/myVoyage/*": ["./src/app/(main)/my-voyage/[teamId]/*"],
+      "@/dashboard/*": ["./src/app/(main)/dashboard/*"]
     }
   },
   "include": [