diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2ba218c..77b67e2 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -46,12 +46,12 @@ jobs:
       - name: Setup Python
         uses: actions/setup-python@v4
         with:
-          python-version: '3.10'
+          python-version: "3.14"
 
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 24
           check-latest: true
 
       - name: Cache pip
@@ -96,7 +96,7 @@ jobs:
           bench --site test_site install-app forms_pro
           bench build
         env:
-          CI: 'Yes'
+          CI: "Yes"
 
       - name: Run Tests
         working-directory: /home/runner/frappe-bench
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index bb8c19e..277880a 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -30,7 +30,7 @@ repos:
     rev: v2.7.1
     hooks:
       - id: prettier
-        types_or: [javascript, vue, scss]
+        types_or: [javascript, vue, scss, ts]
         # Ignore any files that might contain jinja / bundles
         exclude: |
           (?x)^(
@@ -45,7 +45,7 @@ repos:
     rev: v8.44.0
     hooks:
       - id: eslint
-        types_or: [javascript]
+        types_or: [javascript, ts]
         args: ["--quiet"]
         # Ignore any files that might contain jinja / bundles
         exclude: |
diff --git a/forms_pro/api/form.py b/forms_pro/api/form.py
index 6569502..5aed808 100644
--- a/forms_pro/api/form.py
+++ b/forms_pro/api/form.py
@@ -1,4 +1,20 @@
 import frappe
+from frappe import _
+from frappe.share import remove
+from pydantic import BaseModel, Field
+
+from forms_pro.api.user import get_user
+from forms_pro.forms_pro.doctype.form.form import Form
+
+
+class FormSharedWithResponse(BaseModel):
+    full_name: str
+    user_image: str | None
+    email: str = Field(alias="user")
+    read: bool
+    write: bool
+    share: bool
+    submit: bool
 
 
 @frappe.whitelist(allow_guest=True)
@@ -9,7 +25,7 @@ def get_form_by_route(route: str) -> dict:
 
 @frappe.whitelist(allow_guest=True)
 def get_form(form_id: str) -> dict:
-    form = frappe.get_doc(
+    form: Form = frappe.get_doc(
         "Form",
         form_id,
     )
@@ -24,6 +40,66 @@ def get_form(form_id: str) -> dict:
     }
 
 
+@frappe.whitelist()
+def get_form_shared_with(form_id: str) -> list[frappe.Any]:
+    """
+    Get list of users with which a form is shared.
+
+    We validate the current user has read access to the form.
+    """
+    if not frappe.has_permission(
+        "Form",
+        "read",
+        form_id,
+    ):
+        frappe.throw(_("You do not have read access to this form"))
+
+    form: Form = frappe.get_doc("Form", form_id)
+    shared_with = form.shared_with()
+
+    shared_with_responses = []
+
+    for user in shared_with:
+        _user = get_user(user["user"])
+        user.update(_user)
+        shared_with_responses.append(FormSharedWithResponse.model_validate(user).model_dump())
+
+    return shared_with_responses
+
+
+@frappe.whitelist()
+def remove_form_access(form_id: str, user_email: str) -> None:
+    """
+    Remove access to a form for a user.
+
+    We validate the current user has write access to the form.
+
+    args:
+        form_id: str - The ID of the form to remove access to.
+        user_email: str - The email of the user to remove access to.
+
+    """
+
+    if not frappe.has_permission("Form", "write", form_id):
+        frappe.throw(_("You do not have write access to this form"))
+
+    return remove(doctype="Form", name=form_id, user=user_email, flags={"ignore_permissions": True})
+
+
+@frappe.whitelist()
+def get_doctype_list() -> list[str]:
+    if not frappe.has_permission("DocType", "read"):
+        frappe.throw(_("You do not have read access to this doctype"))
+
+    return frappe.db.get_list(
+        "DocType",
+        filters={"istable": 0},
+        pluck="name",
+        order_by="name",
+        limit_page_length=99999,
+    )
+
+
 @frappe.whitelist()
 def get_doctype_fields(doctype: str) -> dict:
     doctype = frappe.get_doc("DocType", doctype)
@@ -43,14 +119,3 @@ def get_doctype_fields(doctype: str) -> dict:
     fields = [field for field in fields if field.fieldtype not in FIELDTYPES_TO_REMOVE]
 
     return fields
-
-
-@frappe.whitelist()
-def get_doctype_list() -> list[str]:
-    return frappe.db.get_list(
-        "DocType",
-        filters={"istable": 0},
-        pluck="name",
-        order_by="name",
-        limit_page_length=99999,
-    )
diff --git a/forms_pro/api/team.py b/forms_pro/api/team.py
index 4358c5a..58bfa09 100644
--- a/forms_pro/api/team.py
+++ b/forms_pro/api/team.py
@@ -1,5 +1,6 @@
 import frappe
 
+from forms_pro.forms_pro.doctype.fp_team.fp_team import FPTeam, GetTeamMembersResponse
 from forms_pro.utils.teams import GetTeamFormsResponseSchema
 from forms_pro.utils.teams import get_team_forms as get_team_forms_utils
 
@@ -17,3 +18,26 @@ def get_team_forms(team_id: str) -> list[GetTeamFormsResponseSchema]:
     """
     forms = get_team_forms_utils(team_id=team_id)
     return forms
+
+
+@frappe.whitelist()
+def get_team_members(team_id: str) -> list[GetTeamMembersResponse]:
+    """
+
+    Get the list of team members in a FP Team.
+    This endpoint checks if the session user has the permission to read this FP Team DocType
+
+    """
+    frappe.has_permission(
+        doctype="FP Team",
+        ptype="read",
+        doc=team_id,
+        user=frappe.session.user,
+        throw=True,
+    )
+    print("team_id", team_id)
+
+    team: FPTeam = frappe.get_doc("FP Team", team_id)
+    members = team.team_members
+
+    return members
diff --git a/forms_pro/api/user.py b/forms_pro/api/user.py
index 3ffc590..11c49f7 100644
--- a/forms_pro/api/user.py
+++ b/forms_pro/api/user.py
@@ -30,8 +30,22 @@ def extract_roles(cls, v: list[HasRole]) -> list[str]:
         return [role.role for role in v]
 
 
+class GetUserBasicResponse(BaseModel):
+    full_name: str
+    user_image: str | None = None
+
+
+@frappe.whitelist()
+def get_user(user: str) -> GetUserBasicResponse | None:
+    """Get basic user data for a given user"""
+    data = frappe.db.get_value("User", user, ["full_name", "user_image"], as_dict=True)
+    if not data:
+        return None
+    return GetUserBasicResponse.model_validate(data).model_dump()
+
+
 @frappe.whitelist()
-def get_user() -> GetUserResponseSchema:
+def get_current_user() -> GetUserResponseSchema:
     """
     Get Current User Data
     """
diff --git a/forms_pro/forms_pro/doctype/form/form.py b/forms_pro/forms_pro/doctype/form/form.py
index 9378aba..a85deaa 100644
--- a/forms_pro/forms_pro/doctype/form/form.py
+++ b/forms_pro/forms_pro/doctype/form/form.py
@@ -1,8 +1,11 @@
 # Copyright (c) 2025, harsh@buildwithhussain.com and contributors
 # For license information, please see license.txt
 
+from typing import Any
+
 import frappe
 from frappe.model.document import Document
+from frappe.share import get_users
 
 
 class Form(Document):
@@ -34,6 +37,14 @@ class Form(Document):
     def linked_doctype_doc(self) -> Document:
         return frappe.get_doc("DocType", self.linked_doctype)
 
+    @frappe.whitelist()
+    def shared_with(self) -> list[dict[str, Any]]:
+        """
+        Get list of users with which this form is shared
+        """
+        users_shared_with = get_users(self.doctype, self.name)
+        return users_shared_with
+
     def generate_initial_route(self) -> str:
         return "s/forms_pro_" + frappe.utils.random_string(8)
 
diff --git a/forms_pro/forms_pro/doctype/fp_team/fp_team.py b/forms_pro/forms_pro/doctype/fp_team/fp_team.py
index f31c501..e717cb8 100644
--- a/forms_pro/forms_pro/doctype/fp_team/fp_team.py
+++ b/forms_pro/forms_pro/doctype/fp_team/fp_team.py
@@ -3,6 +3,16 @@
 
 # import frappe
 from frappe.model.document import Document
+from frappe.utils import cached_property
+from pydantic import BaseModel, EmailStr
+
+from forms_pro.api.user import get_user
+
+
+class GetTeamMembersResponse(BaseModel):
+    full_name: str
+    user_image: str | None
+    email: EmailStr
 
 
 class FPTeam(Document):
@@ -20,15 +30,25 @@ class FPTeam(Document):
         users: DF.TableMultiSelect[FPTeamMember]
     # end: auto-generated types
 
-    @property
-    def team_members(self) -> list[str]:
+    @cached_property
+    def team_members(self) -> list[GetTeamMembersResponse]:
         """
         Get the list of team members
 
         Returns:
             list[str] - List of team member email addresses
         """
-        return [member.user for member in self.users] if self.users else []
+        if not len(self.users):
+            return []
+
+        members = []
+
+        for member in self.users:
+            _user = get_user(member.user)
+            _user["email"] = member.user
+            members.append(GetTeamMembersResponse.model_validate(_user).model_dump())
+
+        return members
 
     def is_team_member(self, user: str) -> bool:
         """
diff --git a/forms_pro/modules.txt b/forms_pro/modules.txt
index ea7829e..f0d9322 100644
--- a/forms_pro/modules.txt
+++ b/forms_pro/modules.txt
@@ -1 +1,2 @@
-Forms Pro
\ No newline at end of file
+Forms Pro
+User Forms
\ No newline at end of file
diff --git a/forms_pro/user_forms/__init__.py b/forms_pro/user_forms/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/forms_pro/utils/form_generator.py b/forms_pro/utils/form_generator.py
index 28faeac..e570a9d 100644
--- a/forms_pro/utils/form_generator.py
+++ b/forms_pro/utils/form_generator.py
@@ -1,4 +1,6 @@
 import frappe
+from frappe import _
+from frappe.share import add_docshare
 
 FORMS_PRO_ROLE = "Forms Pro User"
 
@@ -7,10 +9,19 @@
 def create_form_with_doctype(team_id: str, doctype: str):
     roles = frappe.get_roles(frappe.session.user)
     if FORMS_PRO_ROLE not in roles:
-        frappe.throw("You are not authorized to create a form")
-
-    form_generator = FormGenerator(team_id=team_id, linked_doctype=doctype)
-    form_generator.generate()
+        frappe.throw(
+            _("You are not authorized to create a form"),
+            frappe.PermissionError,
+        )
+
+    try:
+        form_generator = FormGenerator(team_id=team_id, linked_doctype=doctype)
+        form_generator.generate()
+    except Exception as e:
+        frappe.log_error(f"Error creating form with doctype: {doctype} - {e}")
+        frappe.throw(
+            _("Error creating form with doctype: {0} - {1}").format(doctype, e),
+        )
 
     return {
         "doctype": form_generator.doctype.name,
@@ -22,10 +33,19 @@ def create_form_with_doctype(team_id: str, doctype: str):
 def create_form(team_id: str):
     roles = frappe.get_roles(frappe.session.user)
     if FORMS_PRO_ROLE not in roles:
-        frappe.throw("You are not authorized to create a form")
-
-    form_generator = FormGenerator(team_id=team_id)
-    form_generator.generate()
+        frappe.throw(
+            _("You are not authorized to create a form"),
+            frappe.PermissionError,
+        )
+
+    try:
+        form_generator = FormGenerator(team_id=team_id)
+        form_generator.generate()
+    except Exception as e:
+        frappe.log_error(f"Error creating form: {e}")
+        frappe.throw(
+            _("Error creating form: {0}").format(e),
+        )
 
     return {
         "doctype": form_generator.doctype.name,
@@ -47,6 +67,7 @@ def __init__(
     def generate(self) -> None:
         self._initialize_doctype()
         self._initialize_form_document()
+        frappe.clear_cache()
 
     def _initialize_doctype(self) -> None:
         if self.doctype:
@@ -54,39 +75,74 @@ def _initialize_doctype(self) -> None:
 
         placeholder_doctype = frappe.new_doc("DocType")
         placeholder_doctype.name = self._generate_doctype_name()
-        placeholder_doctype.module = "Forms Pro"
+        placeholder_doctype.module = "User Forms"
         placeholder_doctype.custom = True
         placeholder_doctype.track_changes = True
         placeholder_doctype.track_views = True
         placeholder_doctype.index_web_pages_for_search = False
-        placeholder_doctype.insert(ignore_permissions=True)
-
-        self.doctype = placeholder_doctype
-        # self.set_placeholder_doctype_fields()
+        placeholder_doctype.is_submittable = 0
+        placeholder_doctype.istable = 0
+        placeholder_doctype.editable_grid = 0
+        placeholder_doctype.issingle = 0
+        placeholder_doctype.is_tree = 0
+        placeholder_doctype.is_virtual = 0
+
+        # Add permissions
+        placeholder_doctype.append(
+            "permissions",
+            {
+                "create": 1,
+                "delete": 1,
+                "email": 1,
+                "export": 1,
+                "print": 1,
+                "read": 1,
+                "report": 1,
+                "role": "System Manager",
+                "share": 1,
+                "write": 1,
+                "submit": 0,
+            },
+        )
+
+        # Add fields
+        placeholder_doctype.append("fields", {"fieldtype": "Section Break"})
 
-    # def set_placeholder_doctype_fields(self) -> None:
-    #     fields = [
-    #         {
-    #             "label": "Is Form Pro DocType",
-    #             "fieldname": "is_forms_pro_doctype",
-    #             "fieldtype": "Check",
-    #             "reqd": 1,
-    #             "read_only": 1,
-    #             "default": 1,
-    #         }
-    #     ]
+        placeholder_doctype.insert(ignore_permissions=True)
 
-    #     for field in fields:
-    #         self.doctype.append("fields", field)
+        add_docshare(
+            "DocType",
+            placeholder_doctype.name,
+            read=1,
+            write=1,
+            share=1,
+            submit=0,
+            flags={
+                "ignore_share_permission": True,
+            },
+        )
 
-    #     self.doctype.save(ignore_permissions=True)
+        self.doctype = placeholder_doctype
 
     def _initialize_form_document(self) -> None:
         form_document = frappe.new_doc("Form")
         form_document.linked_doctype = self.doctype.name
         form_document.title = "Untitled Form"
         form_document.linked_team_id = self.team_id
+        form_document.document_type = "System"
         form_document.insert(ignore_permissions=True)
+
+        add_docshare(
+            "Form",
+            form_document.name,
+            read=1,
+            write=1,
+            share=1,
+            submit=0,
+            flags={
+                "ignore_share_permission": True,
+            },
+        )
         self.form_document = form_document
 
     def _generate_doctype_name(self) -> str:
diff --git a/forms_pro/utils/test_form_generator.py b/forms_pro/utils/test_form_generator.py
index 3ed680a..2998165 100644
--- a/forms_pro/utils/test_form_generator.py
+++ b/forms_pro/utils/test_form_generator.py
@@ -74,7 +74,7 @@ def test_generate_creates_doctype_when_none_provided(self):
         # Assertions
         self.assertIsNotNone(form_generator.doctype)
         self.assertTrue(form_generator.doctype.name.startswith("formspro_"))
-        self.assertEqual(form_generator.doctype.module, "Forms Pro")
+        self.assertEqual(form_generator.doctype.module, "User Forms")
         self.assertTrue(form_generator.doctype.custom)
         self.assertTrue(form_generator.doctype.track_changes)
         self.assertTrue(form_generator.doctype.track_views)
@@ -133,7 +133,7 @@ def test_generate_complete_flow(self):
 
         # Verify DocType properties
         self.assertTrue(form_generator.doctype.name.startswith("formspro_"))
-        self.assertEqual(form_generator.doctype.module, "Forms Pro")
+        self.assertEqual(form_generator.doctype.module, "User Forms")
         self.assertTrue(form_generator.doctype.custom)
 
     def test_generate_with_existing_doctype_complete_flow(self):
@@ -157,3 +157,57 @@ def test_generate_with_existing_doctype_complete_flow(self):
 
         # Verify Form document exists in database
         self.assertTrue(frappe.db.exists("Form", form_generator.form_document.name))
+
+    def test_generate_creates_doctype_docshare(self):
+        """Test that generate() creates DocShare for the DocType with correct permissions"""
+        frappe.set_user(self.test_user)
+        form_generator = FormGenerator(team_id=self.test_team)
+
+        # Call generate method
+        form_generator.generate()
+
+        # Query DocShare for the DocType
+        docshare = frappe.db.get_value(
+            "DocShare",
+            {
+                "share_doctype": "DocType",
+                "share_name": form_generator.doctype.name,
+                "user": self.test_user,
+            },
+            ["read", "write", "share", "submit"],
+            as_dict=True,
+        )
+
+        # Assertions
+        self.assertIsNotNone(docshare, "DocShare should exist for DocType")
+        self.assertEqual(docshare.read, 1, "DocShare should have read permission")
+        self.assertEqual(docshare.write, 1, "DocShare should have write permission")
+        self.assertEqual(docshare.share, 1, "DocShare should have share permission")
+        self.assertEqual(docshare.submit, 0, "DocShare should not have submit permission")
+
+    def test_generate_creates_form_docshare(self):
+        """Test that generate() creates DocShare for the Form document with correct permissions"""
+        frappe.set_user(self.test_user)
+        form_generator = FormGenerator(team_id=self.test_team)
+
+        # Call generate method
+        form_generator.generate()
+
+        # Query DocShare for the Form document
+        docshare = frappe.db.get_value(
+            "DocShare",
+            {
+                "share_doctype": "Form",
+                "share_name": form_generator.form_document.name,
+                "user": self.test_user,
+            },
+            ["read", "write", "share", "submit"],
+            as_dict=True,
+        )
+
+        # Assertions
+        self.assertIsNotNone(docshare, "DocShare should exist for Form document")
+        self.assertEqual(docshare.read, 1, "DocShare should have read permission")
+        self.assertEqual(docshare.write, 1, "DocShare should have write permission")
+        self.assertEqual(docshare.share, 1, "DocShare should have share permission")
+        self.assertEqual(docshare.submit, 0, "DocShare should not have submit permission")
diff --git a/frontend/.gitignore b/frontend/.gitignore
index cb723df..bfaab69 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -5,4 +5,5 @@ dist-ssr
 *.local
 coverage
 ../<app-name>
-sites
\ No newline at end of file
+sites
+src/types/frappe-ui.d.ts
\ No newline at end of file
diff --git a/frontend/auto-imports.d.ts b/frontend/auto-imports.d.ts
index 9d24007..b0b0357 100644
--- a/frontend/auto-imports.d.ts
+++ b/frontend/auto-imports.d.ts
@@ -5,6 +5,4 @@
 // Generated by unplugin-auto-import
 // biome-ignore lint: disable
 export {}
-declare global {
-
-}
+declare global {}
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index e46e47a..9ec01ed 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -3,12 +3,15 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export {}
+export {};
 
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AccessSection: typeof import('./src/components/form/manage/AccessSection.vue')['default']
     AddFieldsSection: typeof import('./src/components/builder/sidebar/AddFieldsSection.vue')['default']
+    Avatar: typeof import('./src/components/ui/Avatar.vue')['default']
+    DescriptionSection: typeof import('./src/components/form/manage/DescriptionSection.vue')['default']
     DoctypeFieldsSection: typeof import('./src/components/builder/sidebar/DoctypeFieldsSection.vue')['default']
     FieldEditorSidebar: typeof import('./src/components/FieldEditorSidebar.vue')['default']
     FieldPropertiesForm: typeof import('./src/components/builder/FieldPropertiesForm.vue')['default']
@@ -19,11 +22,13 @@ declare module 'vue' {
     FormHeader: typeof import('./src/components/submission/FormHeader.vue')['default']
     FormPreviewCard: typeof import('./src/components/dashboard/FormPreviewCard.vue')['default']
     FormRenderer: typeof import('./src/components/submission/FormRenderer.vue')['default']
+    RemoveAccessModal: typeof import('./src/components/form/manage/RemoveAccessModal.vue')['default']
     RenderField: typeof import('./src/components/RenderField.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Section: typeof import('./src/components/fields/Section.vue')['default']
     SettingsSection: typeof import('./src/components/builder/sidebar/SettingsSection.vue')['default']
+    ShareAccessModal: typeof import('./src/components/form/manage/ShareAccessModal.vue')['default']
     SuccessSection: typeof import('./src/components/submission/SuccessSection.vue')['default']
   }
 }
diff --git a/frontend/index.html b/frontend/index.html
index 08c6a25..9f5734d 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
+  <script type="module" src="/src/main.ts"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index 818485b..5b473e4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,8 +13,9 @@
   "dependencies": {
     "@lottiefiles/dotlottie-vue": "^0.10.4",
     "@vueuse/core": "^13.9.0",
+    "dayjs": "^1.11.19",
     "feather-icons": "^4.29.2",
-    "frappe-ui": "^0.1.214",
+    "frappe-ui": "^0.1.244",
     "lucide-vue-next": "^0.543.0",
     "pinia": "^3.0.3",
     "socket.io-client": "^4.7.2",
diff --git a/frontend/src/components/FormBuilderContent.vue b/frontend/src/components/FormBuilderContent.vue
index 6e6559a..d67a833 100644
--- a/frontend/src/components/FormBuilderContent.vue
+++ b/frontend/src/components/FormBuilderContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import draggableComponent from "vuedraggable";
-import { LoadingIndicator, TextEditor } from "frappe-ui";
+import { LoadingIndicator, TextEditor, Button } from "frappe-ui";
 import { useEditForm } from "@/stores/editForm";
 import { GripVertical } from "lucide-vue-next";
 import { FormField } from "@/types/formfield";
@@ -8,7 +8,6 @@ import { ref } from "vue";
 import { onClickOutside } from "@vueuse/core";
 
 import FieldRenderer from "@/components/builder/FieldRenderer.vue";
-import Button from "frappe-ui/src/components/Button/Button.vue";
 
 const editFormStore = useEditForm();
 
diff --git a/frontend/src/components/dashboard/FormPreviewCard.vue b/frontend/src/components/dashboard/FormPreviewCard.vue
index 0b2e2d9..c3afee9 100644
--- a/frontend/src/components/dashboard/FormPreviewCard.vue
+++ b/frontend/src/components/dashboard/FormPreviewCard.vue
@@ -16,7 +16,7 @@ const formattedDate = computed(() => {
 </script>
 <template>
     <div
-        @click="$router.push({ name: 'Edit Form', params: { id: props.form.name } })"
+        @click="$router.push({ name: 'Manage Form', params: { id: props.form.name } })"
         class="flex flex-col gap-2 border rounded p-4 hover:border-gray-400 transition-all duration-300 cursor-pointer"
     >
         <div class="flex flex-col gap-3 text-ink-gray-6">
diff --git a/frontend/src/components/form/manage/AccessSection.vue b/frontend/src/components/form/manage/AccessSection.vue
new file mode 100644
index 0000000..2beda74
--- /dev/null
+++ b/frontend/src/components/form/manage/AccessSection.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { useManageForm } from "@/stores/form/manageForm";
+import { ref } from "vue";
+import { Button, Checkbox, ListView } from "frappe-ui";
+import Avatar from "@/components/ui/Avatar.vue";
+import type { PermissionTypes } from "@/stores/form/manageForm";
+import ShareAccessModal from "./ShareAccessModal.vue";
+import RemoveAccessModal from "./RemoveAccessModal.vue";
+
+const manageFormStore = useManageForm();
+const openModal = ref(false);
+const openRemoveAccessModal = ref(false);
+const selectedUserToRemove = ref<string | null>(null);
+
+function showRemoveAccessModal(email: string) {
+    selectedUserToRemove.value = email;
+    openRemoveAccessModal.value = true;
+}
+
+const columns = ref([
+    {
+        label: "Name",
+        key: "full_name",
+        width: 2,
+    },
+    {
+        label: "",
+        key: "comment",
+    },
+    {
+        label: "Read",
+        key: "read",
+    },
+    {
+        label: "Write",
+        key: "write",
+    },
+    {
+        label: "Share",
+        key: "share",
+    },
+    {
+        label: "Actions",
+        key: "actions",
+    },
+]);
+
+function setPermission(row: any, column: any, value: boolean) {
+    const userId = row.email;
+    const permission = column.key as PermissionTypes;
+    manageFormStore.setPermission(userId, permission, value);
+}
+</script>
+<template>
+    <ShareAccessModal v-model="openModal" />
+    <RemoveAccessModal
+        v-model="openRemoveAccessModal"
+        v-model:selected-user-to-remove="selectedUserToRemove"
+    />
+    <div class="flex flex-col gap-4">
+        <div class="space-y-1">
+            <p class="text-base font-medium text-ink-gray-8">Manage access to this form</p>
+            <p class="text-sm text-ink-gray-5">
+                You can add or remove access to the form for each user of your team.
+            </p>
+        </div>
+        <div class="flex gap-2">
+            <Button variant="outline" size="sm" icon-left="plus" @click="openModal = true">
+                Share Access
+            </Button>
+        </div>
+        <ListView
+            :columns="columns"
+            :rows="manageFormStore.formAccessResource.data"
+            :options="{
+                selectable: false,
+            }"
+            row-key="email"
+        >
+            <template #cell="{ item, row, column }">
+                <div
+                    v-if="column.key === 'full_name'"
+                    class="flex items-center gap-2 text-ink-gray-8 text-sm"
+                >
+                    <Avatar :userId="row.email" />
+                    <p>{{ row.full_name }}</p>
+                </div>
+                <div v-else-if="column.key === 'comment'" class="flex">
+                    <span
+                        v-if="row.email === manageFormStore.formOwner"
+                        class="text-ink-gray-5 text-sm italic"
+                    >
+                        Owner
+                    </span>
+                </div>
+                <div v-else-if="column.key === 'actions'" class="flex">
+                    <Button
+                        size="sm"
+                        theme="red"
+                        icon="trash"
+                        @click="showRemoveAccessModal(row.email)"
+                        :disabled="row.email === manageFormStore.formOwner"
+                        :tooltip="
+                            row.email === manageFormStore.formOwner
+                                ? 'Owner cannot be removed'
+                                : 'Remove Access'
+                        "
+                    />
+                </div>
+                <div v-else class="flex">
+                    <Checkbox
+                        :disabled="
+                            !manageFormStore.userHasShareAccess ||
+                            row.email === manageFormStore.formOwner
+                        "
+                        :model-value="item"
+                        @update:model-value="setPermission(row, column, $event)"
+                    />
+                </div>
+            </template>
+        </ListView>
+    </div>
+</template>
diff --git a/frontend/src/components/form/manage/DescriptionSection.vue b/frontend/src/components/form/manage/DescriptionSection.vue
new file mode 100644
index 0000000..0c6135d
--- /dev/null
+++ b/frontend/src/components/form/manage/DescriptionSection.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useManageForm } from "@/stores/form/manageForm";
+
+const manageFormStore = useManageForm();
+</script>
+<template>
+    <p class="prose-sm text-ink-gray-5" v-if="!manageFormStore.formData?.description">
+        No description added for this form.
+    </p>
+    <div class="prose-sm mb-6" v-html="manageFormStore.formData?.description"></div>
+</template>
diff --git a/frontend/src/components/form/manage/RemoveAccessModal.vue b/frontend/src/components/form/manage/RemoveAccessModal.vue
new file mode 100644
index 0000000..5419e8b
--- /dev/null
+++ b/frontend/src/components/form/manage/RemoveAccessModal.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { Dialog } from "frappe-ui";
+import { useManageForm } from "@/stores/form/manageForm";
+
+const manageFormStore = useManageForm();
+
+const open = defineModel<boolean>({ required: true, default: false });
+const selectedUserToRemove = defineModel<string | null>("selectedUserToRemove", {
+    required: true,
+    default: null,
+});
+
+function removeAccess() {
+    manageFormStore.removeAccess(selectedUserToRemove.value);
+}
+</script>
+<template>
+    <Dialog
+        v-model="open"
+        :options="{
+            title: 'Confirm Removal',
+            message: `Are you sure you want to remove access for ${selectedUserToRemove}?`,
+            icon: {
+                name: 'alert-triangle',
+                appearance: 'warning',
+            },
+            actions: [
+                {
+                    label: 'Remove',
+                    theme: 'red',
+                    onClick: () => {
+                        removeAccess();
+                        open = false;
+                    },
+                },
+                {
+                    label: 'Cancel',
+                    onClick: () => {
+                        open = false;
+                    },
+                },
+            ],
+        }"
+    ></Dialog>
+</template>
diff --git a/frontend/src/components/form/manage/ShareAccessModal.vue b/frontend/src/components/form/manage/ShareAccessModal.vue
new file mode 100644
index 0000000..69616dc
--- /dev/null
+++ b/frontend/src/components/form/manage/ShareAccessModal.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { Button, Dialog, MultiSelect } from "frappe-ui";
+import { useTeam, type TeamMember } from "@/stores/team";
+import { useManageForm, type SharedAccessUser } from "@/stores/form/manageForm";
+import { computed, ref } from "vue";
+import Avatar from "@/components/ui/Avatar.vue";
+import { toast } from "vue-sonner";
+
+const teamStore = useTeam();
+teamStore.initialize();
+const manageFormStore = useManageForm();
+
+const open = defineModel<boolean>({ required: true, default: false });
+
+const sharedAccessUsers = computed(() => manageFormStore.sharedAccessUsers);
+
+const teamMembersNotSharedWith = computed(() => {
+    return teamStore.teamMembers.filter((member: TeamMember) => {
+        return !sharedAccessUsers.value.some(
+            (user: SharedAccessUser) => user.email === member.email
+        );
+    });
+});
+
+const multiSelectOptions = computed(() => {
+    return teamMembersNotSharedWith.value.map((member: TeamMember) => {
+        return {
+            label: member.full_name,
+            value: member.email,
+        };
+    });
+});
+
+const selectedUsers = ref<string[]>([]);
+
+const giveAccessToUsers = () => {
+    selectedUsers.value.forEach((user) => {
+        manageFormStore.addAccess(user, {
+            read: true,
+            write: true,
+            share: true,
+            submit: false,
+        });
+    });
+    toast.success("Access given to users successfully");
+    selectedUsers.value = [];
+};
+
+const giveAccessToAllTeamMembers = () => {
+    teamMembersNotSharedWith.value.forEach((member: TeamMember) => {
+        manageFormStore.addAccess(member.email, {
+            read: true,
+            write: true,
+            share: true,
+            submit: false,
+        });
+    });
+    toast.success("Access given to all team members successfully");
+    selectedUsers.value = [];
+};
+</script>
+<template>
+    <Dialog
+        v-model="open"
+        :options="{
+            title: 'Share Access',
+            actions: [
+                {
+                    label: 'Share Access',
+                    disabled: selectedUsers.length === 0,
+                    onClick: () => {
+                        giveAccessToUsers();
+                        open = false;
+                    },
+                    variant: 'solid',
+                },
+            ],
+        }"
+    >
+        <template #body-content>
+            <div class="flex flex-col gap-2">
+                <p class="text-ink-gray-6 text-base">
+                    Add users from your team to give access to this form
+                </p>
+                <Button
+                    class="w-fit"
+                    variant="outline"
+                    size="sm"
+                    icon-left="plus"
+                    @click="
+                        () => {
+                            giveAccessToAllTeamMembers();
+                            open = false;
+                        }
+                    "
+                >
+                    Give Access to All Team Members
+                </Button>
+                <MultiSelect :options="multiSelectOptions" v-model="selectedUsers">
+                    <template #option="{ item }">
+                        <Avatar :userId="item.value" size="sm" />
+                        <span class="text-ink-gray-8 text-sm ml-2">{{ item.label }}</span>
+                    </template>
+                </MultiSelect>
+            </div>
+        </template>
+    </Dialog>
+</template>
diff --git a/frontend/src/components/ui/Avatar.vue b/frontend/src/components/ui/Avatar.vue
new file mode 100644
index 0000000..4160d04
--- /dev/null
+++ b/frontend/src/components/ui/Avatar.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Avatar as FrappeAvatar, Tooltip } from "frappe-ui";
+import { getUser } from "@/utils/user";
+import type { GetUserBasicResponse } from "@/utils/user";
+import { ref, onMounted } from "vue";
+
+const props = withDefaults(
+    defineProps<{
+        userId: string;
+        size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+        variant?: "default" | "outline" | "filled";
+        shape?: "circle" | "square";
+        className?: string;
+    }>(),
+    {
+        size: "md",
+        variant: "default",
+        shape: "circle",
+    }
+);
+
+const user = ref<GetUserBasicResponse | null>(null);
+
+onMounted(async () => {
+    if (props.userId) {
+        user.value = await getUser(props.userId);
+    }
+});
+</script>
+
+<template>
+    <Tooltip v-if="user?.full_name" :text="user?.full_name" placement="bottom">
+        <FrappeAvatar
+            :size="size"
+            :shape="shape"
+            :image="user?.user_image"
+            :label="user?.full_name"
+        />
+    </Tooltip>
+</template>
diff --git a/frontend/src/composables/useQueryParam.ts b/frontend/src/composables/useQueryParam.ts
new file mode 100644
index 0000000..9e374cc
--- /dev/null
+++ b/frontend/src/composables/useQueryParam.ts
@@ -0,0 +1,112 @@
+import { ref, watch, type Ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+/**
+ * Composable for syncing a reactive value with a URL query parameter
+ *
+ * @param paramName - The name of the query parameter
+ * @param defaultValue - Default value if param is not present or invalid
+ * @param validValues - Optional array of valid values. If provided, only these values will be accepted
+ * @param options - Optional configuration
+ * @returns A reactive ref that stays in sync with the URL query parameter
+ *
+ * @example
+ * ```ts
+ * const selectedTab = useQueryParam('tab', 'description', ['description', 'shared']);
+ * ```
+ */
+export function useQueryParam<T extends string>(
+  paramName: string,
+  defaultValue: T,
+  validValues?: T[],
+  options?: {
+    /**
+     * Whether to update the URL immediately if param is missing (default: true)
+     */
+    setInitialParam?: boolean;
+    /**
+     * Whether to use router.replace (true) or router.push (false) (default: true)
+     */
+    replace?: boolean;
+  }
+): Ref<T> {
+  const route = useRoute();
+  const router = useRouter();
+  const { setInitialParam = true, replace = true } = options || {};
+
+  // Get initial value from URL or use default
+  const getInitialValue = (): T => {
+    const paramValue = route.query[paramName];
+
+    if (!paramValue || typeof paramValue !== "string") {
+      return defaultValue;
+    }
+
+    // If valid values are provided, validate against them
+    if (validValues && !validValues.includes(paramValue as T)) {
+      return defaultValue;
+    }
+
+    return paramValue as T;
+  };
+
+  const value = ref<T>(getInitialValue()) as Ref<T>;
+
+  // Update URL when value changes
+  watch(value, (newValue) => {
+    const currentParam = route.query[paramName];
+
+    // Only update if the value actually changed
+    if (currentParam !== newValue) {
+      const updateMethod = replace ? router.replace : router.push;
+      updateMethod({
+        ...route,
+        query: {
+          ...route.query,
+          [paramName]: newValue,
+        },
+      });
+    }
+  });
+
+  // Update value when URL query param changes (e.g., browser back/forward)
+  watch(
+    () => route.query[paramName],
+    (newParam) => {
+      if (!newParam || typeof newParam !== "string") {
+        // If param is removed, set to default
+        if (value.value !== defaultValue) {
+          value.value = defaultValue;
+        }
+        return;
+      }
+
+      // If valid values are provided, validate
+      if (validValues && !validValues.includes(newParam as T)) {
+        if (value.value !== defaultValue) {
+          value.value = defaultValue;
+        }
+        return;
+      }
+
+      // Update value if it changed
+      if (value.value !== newParam) {
+        value.value = newParam as T;
+      }
+    }
+  );
+
+  // Set initial URL param if not present
+  if (setInitialParam && !route.query[paramName]) {
+    const updateMethod = replace ? router.replace : router.push;
+    updateMethod({
+      ...route,
+      query: {
+        ...route.query,
+        [paramName]: value.value,
+      },
+    });
+  }
+
+  return value;
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 61a017b..3e868ef 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,35 +1,38 @@
 @import "./assets/Inter/inter.css";
-@import "frappe-ui/src/style.css";
-@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
+@import "frappe-ui/style.css";
+@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");
 
 @font-face {
-	font-family: "Instrument Serif";
-	font-style: normal;
-	font-weight: 400;
-	font-display: swap;
-	src: url("./assets/Instrument_Serif/InstrumentSerif-Regular.woff2") format("woff2"),
-		url("./assets/Instrument_Serif/InstrumentSerif-Regular.woff") format("woff");
+    font-family: "Instrument Serif";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src:
+        url("./assets/Instrument_Serif/InstrumentSerif-Regular.woff2") format("woff2"),
+        url("./assets/Instrument_Serif/InstrumentSerif-Regular.woff") format("woff");
 }
 
 .form-description {
+    @apply w-full p-3;
 
-	@apply w-full p-3;
+    h1,
+    h2,
+    h3 {
+        @apply text-xl font-bold;
+    }
+    h4,
+    h5 {
+        @apply text-lg font-bold;
+    }
+    h6 {
+        @apply text-base font-bold;
+    }
+    p,
+    li {
+        @apply text-base font-normal;
+    }
 
-	h1 , h2, h3 {
-		@apply text-xl font-bold;
-	}
-	h4,
-	h5 {
-		@apply text-lg font-bold;
-	}
-	h6 {
-		@apply text-base font-bold;
-	}
-	p, li {
-		@apply text-base font-normal;
-	}
-
-	.is-empty {
-		@apply text-base font-normal;
-	}
-}
\ No newline at end of file
+    .is-empty {
+        @apply text-base font-normal;
+    }
+}
diff --git a/frontend/src/layouts/BaseLayout.vue b/frontend/src/layouts/BaseLayout.vue
index 5030c3c..04fad08 100644
--- a/frontend/src/layouts/BaseLayout.vue
+++ b/frontend/src/layouts/BaseLayout.vue
@@ -2,9 +2,9 @@
     <div class="flex h-screen w-full">
         <Sidebar
             :header="{
-                title: 'Forms Pro',
-                subtitle: session.full_name,
-                menuItems: menuItems,
+                title: sidebarHeader.title,
+                subtitle: sidebarHeader.subtitle,
+                menuItems: sidebarHeader.menuItems,
             }"
             :sections="sidebarSections"
         >
@@ -24,47 +24,60 @@ import { session } from "@/data/session";
 import { ref, computed } from "vue";
 import { Sidebar } from "frappe-ui";
 import { LayoutDashboard, ArrowLeftRight, LogOut } from "lucide-vue-next";
-import toggleTheme from "@/utils/theme";
 import { useUser } from "@/stores/user";
+
 const userStore = useUser();
 
-const menuItems = computed(() => {
-    return [
-        // {
-        //     label: "Switch Teams",
-        //     icon: ArrowLeftRight,
-        //     onClick: () => {
-        //         console.log("Switch Teams");
-        //     },
-        // },
-        {
-            label: "Log out",
-            icon: LogOut,
-            onClick: session.logout.submit,
-        },
-    ];
+const props = defineProps({
+    sidebarHeader: {
+        type: Object,
+        default: null,
+    },
+    sidebarSections: {
+        type: Array,
+        default: [],
+    },
 });
 
-const sidebarSections = ref([
+const defaultSidebarMenuItems = computed(() => [
     {
-        label: "",
-        items: [
-            {
-                label: "Dashboard",
-                to: "/",
-                isActive: true,
-                icon: LayoutDashboard,
-            },
-        ],
+        label: "Log out",
+        icon: LogOut,
+        onClick: session.logout.submit,
     },
-    // {
-    // 	label: "",
-    // 	items: [
-    // 		{
-    // 			label: "Submissions",
-    // 			to: "/submissions",
-    // 		},
-    // 	],
-    // },
 ]);
+
+const sidebarHeader = computed(() => {
+    if (props.sidebarHeader) {
+        return props.sidebarHeader;
+    }
+
+    return {
+        title: "Forms Pro",
+        subtitle: session.full_name,
+        menuItems: defaultSidebarMenuItems.value,
+    };
+});
+
+const sidebarSections = computed(() => {
+    if (props.sidebarSections && props.sidebarSections.length > 0) {
+        return props.sidebarSections;
+    }
+
+    const _sections = [
+        {
+            label: "",
+            items: [
+                {
+                    label: "Dashboard",
+                    to: "/",
+                    isActive: true,
+                    icon: LayoutDashboard,
+                },
+            ],
+        },
+    ];
+
+    return _sections;
+});
 </script>
diff --git a/frontend/src/main.js b/frontend/src/main.ts
similarity index 63%
rename from frontend/src/main.js
rename to frontend/src/main.ts
index 03818aa..2757258 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.ts
@@ -6,31 +6,31 @@ import router from "./router";
 import { initSocket } from "./socket";
 
 import {
-    Alert,
-    Badge,
-    Button,
-    Dialog,
-    ErrorMessage,
-    FormControl,
-    Input,
-    TextInput,
-    frappeRequest,
-    pageMetaPlugin,
-    resourcesPlugin,
-    setConfig,
+  Alert,
+  Badge,
+  Button,
+  Dialog,
+  ErrorMessage,
+  FormControl,
+  Input,
+  TextInput,
+  frappeRequest,
+  pageMetaPlugin,
+  resourcesPlugin,
+  setConfig,
 } from "frappe-ui";
 
 import "./index.css";
 
 const globalComponents = {
-    Button,
-    TextInput,
-    Input,
-    FormControl,
-    ErrorMessage,
-    Dialog,
-    Alert,
-    Badge,
+  Button,
+  TextInput,
+  Input,
+  FormControl,
+  ErrorMessage,
+  Dialog,
+  Alert,
+  Badge,
 };
 
 const app = createApp(App);
@@ -47,7 +47,7 @@ const socket = initSocket();
 app.config.globalProperties.$socket = socket;
 
 for (const key in globalComponents) {
-    app.component(key, globalComponents[key]);
+  app.component(key, globalComponents[key]);
 }
 
 app.mount("#app");
diff --git a/frontend/src/pages/manage/ManageForm.vue b/frontend/src/pages/manage/ManageForm.vue
new file mode 100644
index 0000000..671f5e2
--- /dev/null
+++ b/frontend/src/pages/manage/ManageForm.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import BaseLayout from "@/layouts/BaseLayout.vue";
+import { ArrowLeft, LayoutGrid } from "lucide-vue-next";
+import { Breadcrumbs } from "frappe-ui";
+import { ref, computed, watch } from "vue";
+import { useManageForm } from "@/stores/form/manageForm";
+import { useRoute, useRouter } from "vue-router";
+
+const manageFormStore = useManageForm();
+const route = useRoute();
+const router = useRouter();
+
+watch(
+    () => route.params.id,
+    () => {
+        manageFormStore.initialize(route.params.id as string);
+    },
+    { immediate: true }
+);
+
+const sidebarSections = ref<any[]>([
+    {
+        items: [
+            {
+                label: "Go Back",
+                icon: ArrowLeft,
+                onClick: () => {
+                    router.replace("/");
+                },
+            },
+        ],
+    },
+    {
+        label: "",
+        items: [
+            {
+                label: "Overview",
+                to: `/manage/${manageFormStore.currentFormId}/overview`,
+                isActive: true,
+                icon: LayoutGrid,
+            },
+        ],
+    },
+]);
+
+const breadcrumbItems = computed(() => {
+    const _items = [
+        {
+            label: "Manage Form",
+            to: `/manage/${manageFormStore.currentFormId}`,
+            isActive: true,
+        },
+    ];
+
+    sidebarSections.value.forEach((section: any) => {
+        section.items.forEach((item: any) => {
+            if (item.isActive) {
+                _items.push({
+                    label: item.label,
+                    to: item.to,
+                    isActive: item.isActive,
+                });
+            }
+        });
+    });
+
+    return _items;
+});
+</script>
+<template>
+    <BaseLayout :sidebar-sections="sidebarSections">
+        <div class="p-4 space-y-4 w-full bg-surface-white flex justify-center">
+            <div class="max-w-screen-lg mx-auto w-full space-y-4">
+                <Breadcrumbs :items="breadcrumbItems" />
+                <RouterView />
+            </div>
+        </div>
+    </BaseLayout>
+</template>
diff --git a/frontend/src/pages/manage/overview/Overview.vue b/frontend/src/pages/manage/overview/Overview.vue
new file mode 100644
index 0000000..a185ae1
--- /dev/null
+++ b/frontend/src/pages/manage/overview/Overview.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import AccessSection from "@/components/form/manage/AccessSection.vue";
+import { useManageForm } from "@/stores/form/manageForm";
+import { FileText, CaseLower, Lock } from "lucide-vue-next";
+import { formatPrettyDate } from "@/utils/date";
+import { TabButtons, LoadingText } from "frappe-ui";
+import Avatar from "@/components/ui/Avatar.vue";
+import { useQueryParam } from "@/composables/useQueryParam";
+
+const manageFormStore = useManageForm();
+
+const tabs = [
+    {
+        label: "Description",
+        iconLeft: CaseLower,
+        value: "description",
+    },
+    {
+        label: "Access",
+        iconLeft: Lock,
+        value: "shared",
+    },
+] as const;
+
+// Extract tab value type from tabs array - automatically includes all tab values
+type TabValue = typeof tabs[number]["value"];
+const validTabValues: TabValue[] = tabs.map((t) => t.value);
+const selectedTab = useQueryParam<TabValue>("tab", "description", validTabValues);
+</script>
+
+<template>
+    <div v-if="manageFormStore.formResource.loading">
+        <LoadingText />
+    </div>
+    <div v-if="manageFormStore.formResource.isFinished">
+        <div class="flex flex-col gap-3">
+            <div class="flex gap-3 justify-between items-center">
+                <div class="flex gap-3 items-center text-ink-gray-8">
+                    <FileText class="w-6 h-6" />
+                    <h2 class="text-3xl font-bold">{{ manageFormStore.formData?.title }}</h2>
+                </div>
+                <div class="flex gap-3">
+                    <Button
+                        @click="
+                            $router.push({
+                                name: 'Edit Form',
+                                params: { id: manageFormStore.formData?.name },
+                            })
+                        "
+                        class="w-24"
+                        size="md"
+                        label="Edit"
+                        variant="solid"
+                        icon-left="edit-2"
+                    />
+                </div>
+            </div>
+            <div class="flex flex-col gap-2 text-ink-gray-5">
+                <div class="flex gap-2 items-center text-xs">
+                    <p>Modified {{ formatPrettyDate(manageFormStore.formData?.modified) }}</p>
+                    <span>•</span>
+                    <p>Created {{ formatPrettyDate(manageFormStore.formData?.creation) }} by</p>
+                    <Avatar :userId="manageFormStore.formData?.owner" />
+                </div>
+            </div>
+            <TabButtons class="w-fit mb-2" :buttons="tabs" v-model="selectedTab" />
+            <DescriptionSection v-if="selectedTab === 'description'" />
+            <AccessSection v-if="selectedTab === 'shared'" />
+        </div>
+    </div>
+</template>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index f6cbd24..c664d79 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -8,6 +8,19 @@ const routes = [
         name: "Dashboard",
         component: () => import("@/pages/Dashboard.vue"),
     },
+    {
+        path: "/manage/:id",
+        name: "Manage Form",
+        component: () => import("@/pages/manage/ManageForm.vue"),
+        redirect: { name: "Manage Form Overview" },
+        children: [
+            {
+                path: "overview",
+                name: "Manage Form Overview",
+                component: () => import("@/pages/manage/overview/Overview.vue"),
+            },
+        ],
+    },
     {
         path: "/edit-form/:id",
         name: "Edit Form",
diff --git a/frontend/src/stores/editForm.ts b/frontend/src/stores/editForm.ts
index 478bbde..da16fd7 100644
--- a/frontend/src/stores/editForm.ts
+++ b/frontend/src/stores/editForm.ts
@@ -21,7 +21,7 @@ export const useEditForm = defineStore("editForm", () => {
   const isUnsaved = computed(() => formResource.value?.isDirty || false);
   const isLoading = computed(() => formResource.value?.loading || false);
   const isPublished = computed(
-    () => formResource.value?.doc?.is_published || false,
+    () => formResource.value?.doc?.is_published || false
   );
 
   const doctypeFields = ref<any>([]);
@@ -32,13 +32,14 @@ export const useEditForm = defineStore("editForm", () => {
     return formResource.value?.doc?.fields || [];
   });
   const originalFormData = computed(
-    () => formResource.value?.originalDoc || null,
+    () => formResource.value?.originalDoc || null
   );
 
   async function getDoctypeFields() {
     if (formResource.value?.doc?.linked_doctype) {
       const _fields = createResource({
         url: "forms_pro.api.form.get_doctype_fields",
+        method: "GET",
         makeParams() {
           return {
             doctype: formResource.value?.doc?.linked_doctype,
@@ -114,7 +115,7 @@ export const useEditForm = defineStore("editForm", () => {
               description: error.message,
             });
           },
-        },
+        }
       );
     }
     toast.error("No form resource available");
@@ -145,7 +146,7 @@ export const useEditForm = defineStore("editForm", () => {
           onError: () => {
             toast.error("Failed to publish form");
           },
-        },
+        }
       );
     }
   }
@@ -189,7 +190,7 @@ export const useEditForm = defineStore("editForm", () => {
   function removeField(field: FormField) {
     if (formResource.value?.doc?.fields) {
       formResource.value.doc.fields = formResource.value.doc.fields.filter(
-        (f: FormField) => f !== field,
+        (f: FormField) => f !== field
       );
     }
   }
@@ -201,7 +202,7 @@ export const useEditForm = defineStore("editForm", () => {
   function updateField(originalField: FormField, updatedField: FormField) {
     if (formResource.value?.doc?.fields) {
       const fieldIndex = formResource.value.doc.fields.findIndex(
-        (f: FormField) => f === originalField,
+        (f: FormField) => f === originalField
       );
       if (fieldIndex !== -1) {
         formResource.value.doc.fields[fieldIndex] = updatedField;
diff --git a/frontend/src/stores/form/manageForm.ts b/frontend/src/stores/form/manageForm.ts
new file mode 100644
index 0000000..2b83107
--- /dev/null
+++ b/frontend/src/stores/form/manageForm.ts
@@ -0,0 +1,170 @@
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import { createResource, useDoc } from "frappe-ui";
+import { toast } from "vue-sonner";
+// @ts-ignore
+import { sessionUser } from "@/data/session";
+
+export type PermissionTypes = "read" | "write" | "share" | "submit";
+
+export type AccessPermissions = {
+  read: boolean;
+  write: boolean;
+  share: boolean;
+  submit: boolean;
+};
+
+export type SharedAccessUser = {
+  full_name: string;
+  user_image: string;
+  email: string;
+  read: boolean;
+  write: boolean;
+  share: boolean;
+  submit: boolean;
+};
+
+export const useManageForm = defineStore("manageForm", () => {
+  const currentFormId = ref<string>("");
+  const formData = computed(() => formResource.value?.doc || null);
+  const formFields = computed(() => formResource.value?.doc?.fields || []);
+  const formResource = ref<any>(null);
+  const formOwner = computed(() => formResource.value?.doc?.owner || null);
+  const sharedAccessUsers = computed<SharedAccessUser[]>(
+    () => formAccessResource.data || []
+  );
+
+  // Check if the current user has share access to the form
+  const userHasShareAccess = computed<boolean>(
+    () =>
+      formAccessResource.data?.find(
+        (user: SharedAccessUser) => user.email === sessionUser()
+      )?.share ?? false
+  );
+
+  const formAccessResource = createResource({
+    url: "forms_pro.api.form.get_form_shared_with",
+    method: "GET",
+    makeParams() {
+      return {
+        form_id: currentFormId.value,
+      };
+    },
+  });
+
+  async function initialize(formId: string) {
+    currentFormId.value = formId;
+    formResource.value = useDoc({
+      doctype: "Form",
+      name: formId,
+    });
+    formAccessResource.fetch();
+  }
+
+  /**
+   * Add access to the form for a user
+   * @param userId - The ID of the user to add access to
+   * @param access - The access permissions to add (read, write, share, submit)
+   */
+  function addAccess(userId: string, access: AccessPermissions) {
+    const _access = createResource({
+      url: "frappe.share.add",
+      method: "POST",
+      makeParams() {
+        return {
+          doctype: "Form",
+          name: currentFormId.value,
+          user: userId,
+          read: Boolean(access.read),
+          write: Boolean(access.write),
+          share: Boolean(access.share),
+          submit: Boolean(access.submit),
+        };
+      },
+      onSuccess() {
+        formAccessResource.reload();
+        toast.success("Access added successfully");
+      },
+      onError(error: Error) {
+        toast.error("Failed to give access to the user", {
+          description: error.message,
+        });
+      },
+    });
+    _access.submit();
+  }
+
+  /**
+   * Set a permission for a user
+   * @param userId - The ID of the user to set the permission for
+   * @param permission - The permission to set (read, write, share, submit)
+   * @param value - The value of the permission (true or false)
+   */
+  function setPermission(
+    userId: string,
+    permission: PermissionTypes,
+    value: boolean
+  ) {
+    const _permission = createResource({
+      url: "frappe.share.set_permission",
+      method: "POST",
+      makeParams() {
+        return {
+          doctype: "Form",
+          name: currentFormId.value,
+          user: userId,
+          permission_to: permission,
+          value: value ? 1 : 0,
+        };
+      },
+      onSuccess() {
+        formAccessResource.reload();
+        toast.success("Permission set successfully");
+      },
+      onError(error: Error) {
+        toast.error("Failed to set permission", {
+          description: error.message,
+        });
+      },
+    });
+    _permission.submit();
+  }
+
+  function removeAccess(userEmail: string) {
+    const _removeAccess = createResource({
+      url: "forms_pro.api.form.remove_form_access",
+      method: "DELETE",
+      makeParams() {
+        return {
+          form_id: currentFormId.value,
+          user_email: userEmail,
+        };
+      },
+      onSuccess() {
+        formAccessResource.reload();
+        toast.success("Access removed successfully");
+      },
+      onError(error: Error) {
+        toast.error("Failed to remove access", {
+          description: error.message,
+        });
+      },
+    });
+    _removeAccess.submit();
+  }
+
+  return {
+    initialize,
+    addAccess,
+    setPermission,
+    removeAccess,
+    userHasShareAccess,
+    formOwner,
+    sharedAccessUsers,
+    currentFormId,
+    formData,
+    formFields,
+    formResource,
+    formAccessResource,
+  };
+});
diff --git a/frontend/src/stores/submissionForm.ts b/frontend/src/stores/submissionForm.ts
index b2f1d1b..5e447aa 100644
--- a/frontend/src/stores/submissionForm.ts
+++ b/frontend/src/stores/submissionForm.ts
@@ -10,7 +10,7 @@ export const useSubmissionForm = defineStore("submissionForm", () => {
   const currentFormId = ref<string | null>(null);
   const isLoading = computed(() => formResource.value?.loading);
   const allowIncompleteForms = computed(
-    () => formResource.value?.data?.allow_incomplete ,
+    () => formResource.value?.data?.allow_incomplete
   );
 
   const errors = ref<string[]>([]);
diff --git a/frontend/src/stores/team.ts b/frontend/src/stores/team.ts
new file mode 100644
index 0000000..8324e9d
--- /dev/null
+++ b/frontend/src/stores/team.ts
@@ -0,0 +1,41 @@
+import { defineStore } from "pinia";
+import { useUser } from "./user";
+import { computed } from "vue";
+import { useCall } from "frappe-ui";
+
+const user = useUser();
+
+export type TeamMember = {
+  full_name: string;
+  user_image: string;
+  email: string;
+};
+
+export const useTeam = defineStore("team", () => {
+  const currentTeam = computed(() => user.currentTeam);
+  const teamMembers = computed<TeamMember[]>(() => {
+    const data = teamMembersResource.data;
+    return Array.isArray(data) ? data : [];
+  });
+
+  const teamMembersResource = useCall({
+    baseUrl: "/api/v2/method/",
+    url: "forms_pro.api.team.get_team_members",
+    params() {
+      return {
+        team_id: currentTeam.value?.name,
+      };
+    },
+  });
+
+  function initialize() {
+    teamMembersResource.fetch();
+  }
+
+  return {
+    currentTeam,
+    teamMembers,
+    teamMembersResource,
+    initialize,
+  };
+});
diff --git a/frontend/src/stores/user.ts b/frontend/src/stores/user.ts
index 6dbc31e..7d92cff 100644
--- a/frontend/src/stores/user.ts
+++ b/frontend/src/stores/user.ts
@@ -4,7 +4,7 @@ import { createResource } from "frappe-ui";
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
 
-type UserTeam = {
+export type UserTeam = {
   name: string;
   team_name: string;
   is_current: boolean;
@@ -16,7 +16,7 @@ export const useUser = defineStore("user", () => {
   const currentTeam = ref<UserTeam | null>(null);
 
   const userResource = createResource({
-    url: "forms_pro.api.user.get_user",
+    url: "forms_pro.api.user.get_current_user",
   });
 
   const userTeamsResource = createResource({
diff --git a/frontend/src/utils/date.ts b/frontend/src/utils/date.ts
new file mode 100644
index 0000000..64ae3f0
--- /dev/null
+++ b/frontend/src/utils/date.ts
@@ -0,0 +1,175 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import isToday from "dayjs/plugin/isToday";
+import isYesterday from "dayjs/plugin/isYesterday";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+
+// Extend dayjs with plugins
+dayjs.extend(relativeTime);
+dayjs.extend(isToday);
+dayjs.extend(isYesterday);
+dayjs.extend(customParseFormat);
+
+/**
+ * Format a date string or Date object to a readable date format
+ * @param date - Date string, Date object, or dayjs object
+ * @param format - Optional format string (default: "MMM D, YYYY")
+ * @returns Formatted date string
+ */
+export function formatDate(
+  date: string | Date | dayjs.Dayjs | null | undefined,
+  format: string = "MMM D, YYYY"
+): string {
+  if (!date) return "";
+  return dayjs(date).format(format);
+}
+
+/**
+ * Format a date string or Date object to include both date and time
+ * @param date - Date string, Date object, or dayjs object
+ * @param format - Optional format string (default: "MMM D, YYYY h:mm A")
+ * @returns Formatted datetime string
+ */
+export function formatDateTime(
+  date: string | Date | dayjs.Dayjs | null | undefined,
+  format: string = "MMM D, YYYY h:mm A"
+): string {
+  if (!date) return "";
+  return dayjs(date).format(format);
+}
+
+/**
+ * Format a date to a human-readable, pretty format
+ * Shows relative time for recent dates, formatted date for older ones
+ * @param date - Date string, Date object, or dayjs object
+ * @returns Pretty formatted date string
+ */
+export function formatPrettyDate(
+  date: string | Date | dayjs.Dayjs | null | undefined
+): string {
+  if (!date) return "";
+
+  const dayjsDate = dayjs(date);
+  const now = dayjs();
+  const diffInDays = now.diff(dayjsDate, "day");
+
+  if (dayjsDate.isToday()) {
+    return "Today";
+  }
+
+  if (dayjsDate.isYesterday()) {
+    return "Yesterday";
+  }
+
+  if (diffInDays < 7) {
+    return dayjsDate.fromNow();
+  }
+
+  if (diffInDays < 365) {
+    return dayjsDate.format("MMM D");
+  }
+
+  return dayjsDate.format("MMM D, YYYY");
+}
+
+/**
+ * Format just the time portion of a date
+ * @param date - Date string, Date object, or dayjs object
+ * @param format - Optional format string (default: "h:mm A")
+ * @returns Formatted time string
+ */
+export function formatTime(
+  date: string | Date | dayjs.Dayjs | null | undefined,
+  format: string = "h:mm A"
+): string {
+  if (!date) return "";
+  return dayjs(date).format(format);
+}
+
+/**
+ * Get relative time from now (e.g., "2 hours ago", "in 3 days")
+ * @param date - Date string, Date object, or dayjs object
+ * @returns Relative time string
+ */
+export function getRelativeTime(
+  date: string | Date | dayjs.Dayjs | null | undefined
+): string {
+  if (!date) return "";
+  return dayjs(date).fromNow();
+}
+
+/**
+ * Check if a date is today
+ * @param date - Date string, Date object, or dayjs object
+ * @returns True if the date is today
+ */
+export function isDateToday(
+  date: string | Date | dayjs.Dayjs | null | undefined
+): boolean {
+  if (!date) return false;
+  return dayjs(date).isToday();
+}
+
+/**
+ * Check if a date is in the past
+ * @param date - Date string, Date object, or dayjs object
+ * @returns True if the date is in the past
+ */
+export function isDatePast(
+  date: string | Date | dayjs.Dayjs | null | undefined
+): boolean {
+  if (!date) return false;
+  return dayjs(date).isBefore(dayjs());
+}
+
+/**
+ * Check if a date is in the future
+ * @param date - Date string, Date object, or dayjs object
+ * @returns True if the date is in the future
+ */
+export function isDateFuture(
+  date: string | Date | dayjs.Dayjs | null | undefined
+): boolean {
+  if (!date) return false;
+  return dayjs(date).isAfter(dayjs());
+}
+
+/**
+ * Get the difference between two dates in a specified unit
+ * @param date1 - First date
+ * @param date2 - Second date (defaults to now)
+ * @param unit - Unit of difference (e.g., "day", "hour", "minute")
+ * @returns Difference in the specified unit
+ */
+export function getDateDiff(
+  date1: string | Date | dayjs.Dayjs | null | undefined,
+  date2: string | Date | dayjs.Dayjs | null | undefined = dayjs(),
+  unit: dayjs.ManipulateType = "day"
+): number {
+  if (!date1) return 0;
+  return dayjs(date1).diff(dayjs(date2), unit);
+}
+
+/**
+ * Format date in a short format (e.g., "12/25/2023")
+ * @param date - Date string, Date object, or dayjs object
+ * @returns Short formatted date string
+ */
+export function formatShortDate(
+  date: string | Date | dayjs.Dayjs | null | undefined
+): string {
+  if (!date) return "";
+  return dayjs(date).format("M/D/YYYY");
+}
+
+/**
+ * Format date in ISO format (e.g., "2023-12-25")
+ * @param date - Date string, Date object, or dayjs object
+ * @returns ISO formatted date string
+ */
+export function formatISODate(
+  date: string | Date | dayjs.Dayjs | null | undefined
+): string {
+  if (!date) return "";
+  return dayjs(date).format("YYYY-MM-DD");
+}
diff --git a/frontend/src/utils/form_fields.ts b/frontend/src/utils/form_fields.ts
index 6d3d09f..1cd9b85 100644
--- a/frontend/src/utils/form_fields.ts
+++ b/frontend/src/utils/form_fields.ts
@@ -100,7 +100,8 @@ export const TextareaField = {
 export const TextEditorField = {
   component: TextEditor,
   props: {
-    editorClass: "bg-surface-white w-full rounded-b form-description border rounded-b min-h-24",
+    editorClass:
+      "bg-surface-white w-full rounded-b form-description border rounded-b min-h-24",
     fixedMenu: true,
     bubbleMenu: true,
     starterkitOptions: {
diff --git a/frontend/src/utils/form_generator.ts b/frontend/src/utils/form_generator.ts
index 25694e9..86763f5 100644
--- a/frontend/src/utils/form_generator.ts
+++ b/frontend/src/utils/form_generator.ts
@@ -2,7 +2,7 @@ import { createResource } from "frappe-ui";
 
 export const createNewFormWithDoctype = async (
   linked_doctype: string,
-  team_id: string,
+  team_id: string
 ) => {
   const form = createResource({
     url: "forms_pro.utils.form_generator.create_form_with_doctype",
@@ -34,7 +34,7 @@ export const createNewForm = async (team_id: string) => {
 
 export const validateFormRoute = async (
   curr_form_id: string,
-  route: string,
+  route: string
 ) => {
   const route_exists = createResource({
     url: "frappe.client.get_count",
diff --git a/frontend/src/utils/user.ts b/frontend/src/utils/user.ts
new file mode 100644
index 0000000..3abde46
--- /dev/null
+++ b/frontend/src/utils/user.ts
@@ -0,0 +1,18 @@
+import { createResource } from "frappe-ui";
+
+export type GetUserBasicResponse = {
+  full_name: string;
+  user_image: string;
+};
+
+export async function getUser(userId: string) {
+  const userData = createResource({
+    url: "forms_pro.api.user.get_user",
+    params: {
+      user: userId,
+    },
+  });
+
+  await userData.fetch();
+  return userData.data;
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
deleted file mode 100644
index 9a2cd71..0000000
--- a/frontend/tailwind.config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import frappeUIPreset from "frappe-ui/src/tailwind/preset";
-
-export default {
-    presets: [frappeUIPreset],
-    content: [
-        "./index.html",
-        "./src/**/*.{vue,js,ts,jsx,tsx}",
-        "./node_modules/frappe-ui/src/components/**/*.{vue,js,ts,jsx,tsx}",
-    ],
-    theme: {
-        fontFamily: {
-            instrument: ["Instrument Serif", "serif"],
-        },
-        extend: {},
-    },
-    plugins: [],
-};
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
new file mode 100644
index 0000000..5afef64
--- /dev/null
+++ b/frontend/tailwind.config.ts
@@ -0,0 +1,17 @@
+import frappeUIPreset from "frappe-ui/tailwind";
+
+export default {
+  presets: [frappeUIPreset],
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+    "./node_modules/frappe-ui/src/components/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    fontFamily: {
+      instrument: ["Instrument Serif", "serif"],
+    },
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 430fe8d..2a3e1e4 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -20,6 +20,6 @@
       "@/*": ["src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/main.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 201310e..7ca0050 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1491,6 +1491,11 @@ dayjs@^1.11.13:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.18.tgz#835fa712aac52ab9dec8b1494098774ed7070a11"
   integrity sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==
 
+dayjs@^1.11.19:
+  version "1.11.19"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.19.tgz#15dc98e854bb43917f12021806af897c58ae2938"
+  integrity sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==
+
 debug@4, debug@^4.1.1, debug@^4.3.4, debug@^4.3.7, debug@^4.4.0, debug@^4.4.1:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.1.tgz#e5a8bc6cbc4c6cd3e64308b0693a3d4fa550189b"
@@ -1789,10 +1794,10 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-frappe-ui@^0.1.214:
-  version "0.1.214"
-  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.214.tgz#844207c000b695cf6c38d0be5058c03a13e42fca"
-  integrity sha512-1siy9m992OiPqxxjeZ+SapMD4GciD3n45Yuuuua2b+2QgfSD4R9qNTYAU/j4Jj5M/AfMWlx/shuJ6Wq/f6Q8aA==
+frappe-ui@^0.1.244:
+  version "0.1.244"
+  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.244.tgz#9fdb37a7db08e1e5d8b7033ea77b0977f185b8e9"
+  integrity sha512-ZO3BDmA5zp655D11Nhw5ZD1f0vppSPAgXW3VxsxnfF0iFymkn2sAZadD+oObJzN2iIpRJ4SHro5UEG40koesOg==
   dependencies:
     "@floating-ui/vue" "^1.1.6"
     "@headlessui/vue" "^1.7.14"
diff --git a/pyproject.toml b/pyproject.toml
index 5338a96..21fb33a 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,7 +1,7 @@
 [project]
 name = "forms_pro"
 authors = [
-    { name = "Harsh Tandon", email = "harsh@buildwithhussain.com" },
+    { name = "Harsh Tandiya", email = "harsh@buildwithhussain.com" },
     { name = "BWH Studios", email = "developers@buildwithhussain.com" },
 ]
 description = "Web Forms on steroids!"
@@ -11,6 +11,8 @@ dynamic = ["version"]
 dependencies = [
     # "frappe~=15.0.0" # Installed and managed by bench.
     "Faker~=38.2.0",
+    "dnspython==2.8.0",
+    "email-validator==2.3.0",
 ]
 
 [project.urls]