diff --git a/backend/apimanager/views.py b/backend/apimanager/views.py
index 9e86e63..739483c 100644
--- a/backend/apimanager/views.py
+++ b/backend/apimanager/views.py
@@ -181,6 +181,20 @@ class ListMedia(APIView):
         else:
             return Response({'error': 'File not found'}, status=status.HTTP_404_NOT_FOUND)
 
+class PublishMethods(APIView):
+    def get(self, request, format=None):
+        deployment_methods = [
+            {
+                "key_name": "server_deploy",
+                "name": "Server Deploy"
+            },
+            {
+                "key_name": "github_deploy",
+                "name": "Github Deploy"
+            }
+        ]
+        return Response(deployment_methods, status=status.HTTP_200_OK)
+
 class Publish(APIView):
     def get(self, request, deploy_type, format=None):
         storage = CustomStorage()
@@ -232,7 +246,6 @@ class Publish(APIView):
 
 
     def create_blog_data_json(self, instance, storage):
-        print(instance)
         if not instance.exists():
             pass
         else:
diff --git a/backend/backend/urls.py b/backend/backend/urls.py
index 2cf62a5..e9adf7e 100644
--- a/backend/backend/urls.py
+++ b/backend/backend/urls.py
@@ -34,6 +34,7 @@ from apimanager.views import (
     BlogsByCategoryAPIView,
     MediaUpload,
     ListMedia,
+    PublishMethods,
     Publish
 )
 
@@ -54,6 +55,7 @@ urlpatterns = [
     path('data/blog/delete/<slug:blog_id>/', BlogDeleteAPIView.as_view(), name='blog-delete-view'),
     path('data/upload/', MediaUpload.as_view(), name='media-upload'),
     path('data/media/<str:resource_type>/<str:resource_id>/', ListMedia.as_view(), name='list-media'),
+    path('data/publish/methods/', PublishMethods.as_view(), name='publish-methods'),
     path('data/publish/<str:deploy_type>/', Publish.as_view(), name='publish'),
 ]
 urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
\ No newline at end of file
diff --git a/frontend/src/components/editable/shared/navbar.jsx b/frontend/src/components/editable/shared/navbar.jsx
index 032ad2a..3cb4397 100755
--- a/frontend/src/components/editable/shared/navbar.jsx
+++ b/frontend/src/components/editable/shared/navbar.jsx
@@ -10,6 +10,7 @@ import {
 } from 'reactstrap';
 import { useState, useEffect } from 'react';
 import EditableMediaService from '../../../services/editable-media-service'
+import Publish from './publish'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSun, faMoon, faPen, faBrush } from '@fortawesome/free-solid-svg-icons';
 import { Link } from 'react-router-dom';
@@ -23,6 +24,9 @@ function Header(props) {
   const [collapseClasses, setCollapseClasses] = useState('');
   const [themeSelected, setThemeSelected] = useState('lightTheme');
   const [defaultThemeConfig, setDefaultThemeConfig] = useState('lightTheme');
+  const [modal, setModal] = useState(false)
+
+  const toggle = () => {setModal(!modal)}
 
   const setInfo = async (colorArea, color, defaultThemeConfig) => {
     let localThemeConfig = {...ThemeConfig}
@@ -58,6 +62,7 @@ function Header(props) {
     <Navbar className={`navbar-horizontal ${ThemeConfig[GlobalTheme].navBar['navBarTheme']} ${ThemeConfig[GlobalTheme].navBar['background']}`} 
             expand="lg">
       <Container>
+        <Publish notificationToggler={props.notificationToggler} modal={modal} toggle={toggle} />
         <NavbarBrand>
           <Link to="/">
             {
@@ -152,7 +157,14 @@ function Header(props) {
                 outline
                 onClick={() => setInfo(null, null, 'darkTheme')}>Dark Theme</Button>
             </ButtonGroup>
-            <Button color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`} className='ms-5' outline>Publish Data</Button>
+            <Button
+              color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}
+              className='ms-5'
+              outline
+              onClick={() => toggle()}
+            >
+              Publish Data
+            </Button>
           </NavItem>
         </Nav>
       </Container>
diff --git a/frontend/src/components/editable/shared/publish.jsx b/frontend/src/components/editable/shared/publish.jsx
new file mode 100644
index 0000000..34018ec
--- /dev/null
+++ b/frontend/src/components/editable/shared/publish.jsx
@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import EditableDataService from '../../../services/editable-data-service';
+
+function Publish(props) {
+    const [publishMethods, setPublishMethods] = useState(null)
+    
+    useEffect(() => {
+        fetchPublishMethods()
+    }, [])
+    
+    const fetchPublishMethods = async () => {
+        try {
+            const response = await EditableDataService.getData('/data/publish/methods/');
+            setPublishMethods(response.data)
+        } catch (error) {
+            props.notificationToggler('Error fetching methods', 'danger')
+        }
+    };
+    
+    const publishData = async (deploy_method) => {
+        try {
+            const response = await EditableDataService.getData(`/data/publish/${deploy_method}/`);
+            props.notificationToggler('Deployment Sucess')
+        } catch (error) {
+            props.notificationToggler('Deployment Failed', 'danger')
+        }
+    };
+    
+    return (
+        <div>
+            <Modal isOpen={props.modal} toggle={props.toggle}>
+                <ModalHeader toggle={props.toggle}>Publish Website</ModalHeader>
+                <ModalBody>
+                    <h4>
+                        Select a publish method
+                    </h4>
+                    {
+                        publishMethods ?
+                            publishMethods.map((item) => 
+                                <div className='mb-3'>
+                                    <Button
+                                        key={item.key_name}
+                                        color='danger'
+                                        onClick={() => publishData(item.key_name)}
+                                    >
+                                        {item.name}
+                                    </Button>
+                                </div>
+                            ):""
+                    }
+                </ModalBody>
+                <ModalFooter>
+                    <Button color="secondary" onClick={props.toggle}>
+                        Cancel
+                    </Button>
+                </ModalFooter>
+            </Modal>
+        </div>
+    );
+}
+
+export default Publish;
\ No newline at end of file