diff --git a/Form Designer/Components/Layout/NavMenu.razor b/Form Designer/Components/Layout/NavMenu.razor
index bc37cf5..88e0c96 100644
--- a/Form Designer/Components/Layout/NavMenu.razor	
+++ b/Form Designer/Components/Layout/NavMenu.razor	
@@ -10,6 +10,72 @@
     <nav class="flex-column">
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                Add Form Fields
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="setting">
+                FormField Settings
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="set-clear-mode">
+                Set Form Field Mode
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="update-apperance">
+                Update Apperance
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="update-value">
+                Update Value Properties
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="update-linked-properties">
+                Linked Field Properties
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="delete-all">
+                Delete All Fields
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="delete-selected">
+                Delete Selected Field
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="delete-Id">
+                Delete Field By Id
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="select-id">
+                Select By ID
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="select-field">
+                Select Field
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="visibility">
                 Visibility of Form Field
             </NavLink>
         </div>
diff --git a/Form Designer/Components/Pages/AddFormField.razor b/Form Designer/Components/Pages/AddFormField.razor
new file mode 100644
index 0000000..0701e8f
--- /dev/null
+++ b/Form Designer/Components/Pages/AddFormField.razor	
@@ -0,0 +1,36 @@
+@page "/"
+
+<!-- PDF Viewer component with reference binding and document loading -->
+<SfPdfViewer2 @ref="@viewer" Height="800px" Width="100%" DocumentPath="@DocumentPath">
+    <PdfViewerEvents DocumentLoaded="@AddFormFields"></PdfViewerEvents>
+</SfPdfViewer2>
+
+@code {
+    // Reference to the PDF Viewer instance
+    private SfPdfViewer2 viewer;
+    
+    // Path to the PDF document
+    private string DocumentPath = "wwwroot/data/formDesigner_Empty.pdf";
+
+    // Method triggered when the document is loaded
+    private async Task AddFormFields()
+    {
+        // Define various form fields with their properties and positions
+        List<FormFieldInfo> formFields = new List<FormFieldInfo>
+        {
+            new ButtonField { Name = "Button Field", Bounds = new Bound { X = 278, Y = 157, Width = 150, Height = 40 } },
+            new TextBoxField { Name = "TextBox Field", Bounds = new Bound { X = 278, Y = 247, Width = 200, Height = 24 } },
+            new PasswordField { Name = "Password Field", Bounds = new Bound { X = 278, Y = 323, Width = 200, Height = 24 } },
+            new CheckBoxField { Name = "CheckBox Field1", IsChecked = false, Bounds = new Bound { X = 278, Y = 398, Width = 20, Height = 20 } },
+            new CheckBoxField { Name = "CheckBox Field2", IsChecked = false, Bounds = new Bound { X = 386, Y = 398, Width = 20, Height = 20 } },
+            new RadioButtonField { Name = "RadioButton", Value = "Value1", IsSelected = false, Bounds = new Bound { X = 278, Y = 470, Width = 20, Height = 20 } },
+            new RadioButtonField { Name = "RadioButton", Value = "Value2", IsSelected = false, Bounds = new Bound { X = 386, Y = 470, Width = 20, Height = 20 } },
+            new DropDownField { Name = "DropDown Field", Bounds = new Bound { X = 278, Y = 536, Width = 200, Height = 24 } },
+            new ListBoxField { Name = "ListBox Field", Bounds = new Bound { X = 278, Y = 593, Width = 198, Height = 66 } },
+            new SignatureField { Name = "Signature Field", Bounds = new Bound { X = 278, Y = 686, Width = 200, Height = 63 } }
+        };
+        
+        // Add form fields asynchronously to the PDF Viewer
+        await viewer.AddFormFieldsAsync(formFields);
+    }
+}
\ No newline at end of file
diff --git a/Form Designer/Components/Pages/DeleteAllFields.razor b/Form Designer/Components/Pages/DeleteAllFields.razor
new file mode 100644
index 0000000..af98ec3
--- /dev/null
+++ b/Form Designer/Components/Pages/DeleteAllFields.razor	
@@ -0,0 +1,23 @@
+@page "/delete-all"
+@using Syncfusion.Blazor.Buttons
+
+<!-- Button to delete all form fields -->
+<SfButton onclick="@DeleteAllFormFields">Delete All Form Fields</SfButton>
+
+<!-- PDF Viewer component with reference binding and document loading -->
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+</SfPdfViewer2>
+
+@code {
+    // Reference to the PDF Viewer instance
+    private SfPdfViewer2 viewer;
+    
+    // Path to the PDF document
+    private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
+    
+    private async Task DeleteAllFormFields() 
+    {
+        // Deletes all form fields from the PDF Viewer.
+        await viewer.DeleteFormFieldsAsync(true);
+    }
+}
\ No newline at end of file
diff --git a/Form Designer/Components/Pages/DeleteById.razor b/Form Designer/Components/Pages/DeleteById.razor
new file mode 100644
index 0000000..7b81cec
--- /dev/null
+++ b/Form Designer/Components/Pages/DeleteById.razor	
@@ -0,0 +1,24 @@
+@page "/delete-Id"
+@using Syncfusion.Blazor.Buttons
+
+<!-- Delete form fields by ID -->
+<SfButton @onclick="DeleteFormFields">Delete Form Field By ID</SfButton>
+
+<!-- PDF Viewer component with reference binding and document loading -->
+<SfPdfViewer2 @ref="@viewer" Height="800px" Width="100%" DocumentPath="@DocumentPath">
+</SfPdfViewer2>
+
+@code {
+    // Reference to the PDF Viewer instance
+    private SfPdfViewer2 viewer;
+
+    // Path to the PDF document that will be loaded into the viewer
+    private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
+
+    // Method to delete form fields based on their ID
+    private async Task DeleteFormFields()
+    {
+        List<FormFieldInfo> formFields = await viewer.GetFormFieldsAsync();
+        await viewer.DeleteFormFieldsAsync(new List<string> { formFields[0].Id }); // Delete form fields by ID
+    }
+}
\ No newline at end of file
diff --git a/Form Designer/Components/Pages/DeleteSelectedField.razor b/Form Designer/Components/Pages/DeleteSelectedField.razor
new file mode 100644
index 0000000..f8d50ce
--- /dev/null
+++ b/Form Designer/Components/Pages/DeleteSelectedField.razor	
@@ -0,0 +1,23 @@
+@page "/delete-selected"
+@using Syncfusion.Blazor.Buttons
+
+<!-- Button to delete the selected form fields -->
+<SfButton onclick="@DeleteSelectedFormField">Delete Selected Form Field</SfButton>
+
+<!-- PDF Viewer component with reference binding and document loading -->
+<SfPdfViewer2 @ref="@viewer" Height="800px" Width="100%" DocumentPath="@DocumentPath">
+</SfPdfViewer2>
+
+@code {
+    // Reference to the PDF Viewer instance
+    private SfPdfViewer2 viewer;
+    
+    // Path to the PDF document
+    private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
+    
+    private async Task DeleteSelectedFormField() 
+    {
+        // Delete selected form field from the PDF Viewer.
+        await viewer.DeleteFormFieldsAsync(false);
+    }
+}
\ No newline at end of file
diff --git a/Form Designer/Components/Pages/FieldSetting.razor b/Form Designer/Components/Pages/FieldSetting.razor
new file mode 100644
index 0000000..e0858ee
--- /dev/null
+++ b/Form Designer/Components/Pages/FieldSetting.razor	
@@ -0,0 +1,34 @@
+@page "/setting"
+
+<!-- PDF Viewer component with reference binding and document loading -->
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+    <!-- Form field settings with specified thickness -->
+    <FormFieldSettings Thickness="@thickness"></FormFieldSettings>
+    <!-- Event triggered when the document is loaded -->
+    <PdfViewerEvents DocumentLoaded="@AddFormFields"></PdfViewerEvents>
+</SfPdfViewer2>
+
+@code {
+    // Reference to the PDF Viewer instance
+    private SfPdfViewer2 viewer;
+
+    // Default thickness value for form fields
+    private double thickness { get; set; } = 4;
+
+    // Path to the PDF document to be loaded in the viewer
+    private string DocumentPath = "wwwroot/data/formDesigner_Empty.pdf";
+
+    // Method triggered when the document is loaded
+    private async Task AddFormFields()
+    {
+        // Define a new ListBox form field with specified name and position
+        ListBoxField listBox = new ListBoxField 
+        { 
+            Name = "ListBox Field", 
+            Bounds = new Bound { X = 278, Y = 593, Width = 198, Height = 66 } 
+        };
+
+        // Add the form field asynchronously to the PDF Viewer
+        await viewer.AddFormFieldsAsync(new List<FormFieldInfo> { listBox });
+    }
+}
diff --git a/Form Designer/Components/Pages/SelectByField.razor b/Form Designer/Components/Pages/SelectByField.razor
new file mode 100644
index 0000000..419904c
--- /dev/null
+++ b/Form Designer/Components/Pages/SelectByField.razor	
@@ -0,0 +1,28 @@
+@page "/select-field"
+@using Syncfusion.Blazor.Buttons
+
+<!-- Button to trigger form field selection -->
+<SfButton @onclick="SelectFormField">Select Form Field</SfButton>
+
+<!-- PDF Viewer component with reference binding and document loading -->
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+</SfPdfViewer2>
+
+@code {
+    // Reference to the PDF Viewer instance
+    private SfPdfViewer2 viewer;
+
+    // Path to the PDF document that will be loaded in the viewer
+    private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
+
+    // Method to select the first available form field in the document
+    private async Task SelectFormField()
+    {
+        // Retrieve all form fields present in the PDF
+        List<FormFieldInfo> formFields = await viewer.GetFormFieldsAsync();
+        // Select the first form field from the list
+        FormFieldInfo formField = formFields[3];
+        await viewer.SelectFormFieldAsync(formField);
+
+    }
+}
\ No newline at end of file
diff --git a/Form Designer/Components/Pages/SelectFieldById.razor b/Form Designer/Components/Pages/SelectFieldById.razor
new file mode 100644
index 0000000..4ca110d
--- /dev/null
+++ b/Form Designer/Components/Pages/SelectFieldById.razor	
@@ -0,0 +1,27 @@
+@page "/select-id"
+@using Syncfusion.Blazor.Buttons
+
+<!-- Button to select a form field by its ID -->
+<SfButton @onclick="SelectFormFieldByID">Select Form Field By ID</SfButton>
+
+<!-- PDF Viewer component with reference binding and document loading -->
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+</SfPdfViewer2>
+
+@code {
+    // Reference to the PDF Viewer instance
+    private SfPdfViewer2 viewer;
+
+    // Path to the PDF document that will be loaded in the viewer
+    private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
+
+    // Method to select a form field by ID (filters only TextBox fields)
+    private async Task SelectFormFieldByID()
+    {
+        // Retrieve all form fields currently present in the PDF
+        List<FormFieldInfo> formFields = await viewer.GetFormFieldsAsync();
+        // Select the form field asynchronously using its ID
+        await viewer.SelectFormFieldAsync(formFields[0]);
+  
+    }
+}
\ No newline at end of file
diff --git a/Form Designer/Components/Pages/SetMode.razor b/Form Designer/Components/Pages/SetMode.razor
new file mode 100644
index 0000000..07e4dd6
--- /dev/null
+++ b/Form Designer/Components/Pages/SetMode.razor	
@@ -0,0 +1,32 @@
+@page "/set-clear-mode"
+@using Syncfusion.Blazor.Buttons
+
+<!-- Buttons to set and clear the form field drawing mode -->
+<SfButton @onclick="SetFormDrawingMode">Set Form Field Type</SfButton>
+<SfButton @onclick="ClearFormDrawingMode">Clear Form Field Type</SfButton>
+
+<!-- PDF Viewer component -->
+<SfPdfViewer2 @ref="@viewer" Height="800px" Width="100%" DocumentPath="@DocumentPath">
+</SfPdfViewer2>
+
+@code {
+    // Reference to the PDF Viewer instance
+    private SfPdfViewer2 viewer;
+
+    // Path to the PDF document to be loaded in the viewer
+    private string DocumentPath = "wwwroot/data/formDesigner_Empty.pdf";
+
+    // Method to enable form field drawing mode with a specific field type
+    async Task SetFormDrawingMode()
+    {
+        // Sets the form field drawing mode to DropDown, allowing users to add dropdown fields
+        await viewer.SetFormDrawingModeAsync(FormFieldType.DropDown);
+    }
+
+    // Method to disable form field drawing mode
+    async Task ClearFormDrawingMode()
+    {
+        // Clears the form field drawing mode, preventing further form field additions
+        await viewer.SetFormDrawingModeAsync();
+    }
+}
\ No newline at end of file
diff --git a/Form Designer/Components/Pages/UpdateApperanceProperties.razor b/Form Designer/Components/Pages/UpdateApperanceProperties.razor
new file mode 100644
index 0000000..1a6e01c
--- /dev/null
+++ b/Form Designer/Components/Pages/UpdateApperanceProperties.razor	
@@ -0,0 +1,23 @@
+@page "/update-apperance"
+
+<!-- PDF Viewer component with reference binding and document loading -->
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+    <PdfViewerEvents DocumentLoaded="@UpdateFormField"></PdfViewerEvents>
+</SfPdfViewer2>
+
+@code {
+    private SfPdfViewer2 viewer;
+    private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
+
+    private async Task UpdateFormField()
+    {
+        // Retrieve the list of added form fields
+        List<FormFieldInfo> formFields = await viewer.GetFormFieldsAsync();
+        FormFieldInfo buttonField = formFields[0];
+        buttonField.BackgroundColor = "#008000";
+        buttonField.BorderColor = "#FFFF00";
+        buttonField.Thickness = 2;
+        // Update form fields in the viewer with new properties
+        await viewer.UpdateFormFieldsAsync(new List<FormFieldInfo> { buttonField });
+    }
+}
\ No newline at end of file
diff --git a/Form Designer/Components/Pages/UpdateLinkedProperties.razor b/Form Designer/Components/Pages/UpdateLinkedProperties.razor
new file mode 100644
index 0000000..71743cf
--- /dev/null
+++ b/Form Designer/Components/Pages/UpdateLinkedProperties.razor	
@@ -0,0 +1,21 @@
+@page "/update-linked-properties"
+
+<!-- PDF Viewer component with reference binding and document loading -->
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+    <PdfViewerEvents DocumentLoaded="@UpdateFormField"></PdfViewerEvents>
+</SfPdfViewer2>
+
+@code {
+    private SfPdfViewer2 viewer;
+    private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
+
+    private async Task UpdateFormField()
+    {
+        // Retrieve the list of added form fields
+        List<FormFieldInfo> formFields = await viewer.GetFormFieldsAsync();
+        FormFieldInfo radioButton = formFields[6];
+        radioButton.IsReadOnly = true;
+        radioButton.IsRequired = true;
+        await viewer.UpdateFormFieldsAsync(new List<FormFieldInfo> { radioButton });
+    }
+}
diff --git a/Form Designer/Components/Pages/UpdateValueProperties.razor b/Form Designer/Components/Pages/UpdateValueProperties.razor
new file mode 100644
index 0000000..3df2e8b
--- /dev/null
+++ b/Form Designer/Components/Pages/UpdateValueProperties.razor	
@@ -0,0 +1,30 @@
+@page "/update-value"
+
+<!-- PDF Viewer component with reference binding and document loading -->
+<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
+    <PdfViewerEvents DocumentLoaded="@UpdateFormField"></PdfViewerEvents>
+</SfPdfViewer2>
+
+@code {
+    private SfPdfViewer2 viewer;
+    private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
+
+    private async Task UpdateFormField()
+    {
+        // Retrieve the list of added form fields
+        List<FormFieldInfo> formFields = await viewer.GetFormFieldsAsync();
+        foreach (FormFieldInfo field in formFields)
+        {
+            if (field is DropDownField dropDown)
+            {
+                dropDown.Items = new List<ListItem> {
+                        new ListItem { Name = "option 1", Value = "Option 1" },
+                        new ListItem { Name = "option 2", Value = "Option 2" },
+                        new ListItem { Name = "option 3", Value = "Option 3" }
+                    };
+                // Update form fields in the viewer with new properties
+                await viewer.UpdateFormFieldsAsync(new List<FormFieldInfo> { dropDown });
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Form Designer/Components/Pages/Visibility.razor b/Form Designer/Components/Pages/Visibility.razor
index 469d9fd..914ddf6 100644
--- a/Form Designer/Components/Pages/Visibility.razor	
+++ b/Form Designer/Components/Pages/Visibility.razor	
@@ -1,4 +1,4 @@
-@page "/"
+@page "/visibility"
 
 <!-- Button group to add form fields with different visibility modes -->
 <div class="button-group">
diff --git a/Form Designer/wwwroot/data/FormDesigner_Document.pdf b/Form Designer/wwwroot/data/FormDesigner_Document.pdf
new file mode 100644
index 0000000..a5b8d95
Binary files /dev/null and b/Form Designer/wwwroot/data/FormDesigner_Document.pdf differ
diff --git a/Form Designer/wwwroot/data/FormDesigner_Empty.pdf b/Form Designer/wwwroot/data/FormDesigner_Empty.pdf
new file mode 100644
index 0000000..b24c0a9
Binary files /dev/null and b/Form Designer/wwwroot/data/FormDesigner_Empty.pdf differ