diff --git a/src/components/EditNews.vue b/src/components/EditNews.vue
new file mode 100644
index 0000000..fe4e000
--- /dev/null
+++ b/src/components/EditNews.vue
@@ -0,0 +1,143 @@
+<template>
+    <div class="my-10">
+      <section class="container mx-auto px-4 max-w-2xl shadow-lg rounded-xl p-6">
+        <div class="flex flex-row place-content-evenly">
+            <a :href="'?edit=' + bartaData.slug + '&lang=bn'" class="bg-[#580a0a] text-white px-4 py-2 rounded-lg">Bengali</a>
+            <!-- <a href={{ `` + slugURLbn }} class="bg-[#580a0a] text-white px-4 py-2 rounded-lg">Bengali</a> -->
+            <a href={{slugURLbn}} class="bg-[#580a0a] text-white px-4 py-2 rounded-lg">Hindi</a>
+            <a href="" class="bg-[#580a0a] text-white px-4 py-2 rounded-lg">Mandarin</a>
+            <a href="" class="bg-[#580a0a] text-white px-4 py-2 rounded-lg">Espanish</a>
+        </div>
+        <p class="text-2xl py-4">Edit News</p>
+        <form id="newsForm" class="flex flex-col space-y-4">
+            <div class="flex flex-col">
+                <label for="status">Status<span class="text-[#580a0a] font-bold">*</span></label>
+                <select name="status" id="status" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl p-2" required>
+                    <option :value="bartaData.status">{{ bartaData.status }}</option>
+                    <option value="published">Published</option>
+                    <option value="draft">Draft</option>
+                    <option value="archived">Archived</option>
+                </select>
+            </div>
+            <div class="flex flex-col">
+                <label for="language">Language<span class="text-[#580a0a] font-bold">*</span></label>
+                <select name="language" id="language" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl p-2" required>
+                    <option value="null">-Select-</option>
+                    <option value="bengali">Bengali</option>
+                    <option value="english">English</option>
+                </select>
+            </div>
+            <div class="flex flex-col">
+                <label for="category">Category<span class="text-[#580a0a] font-bold">*</span></label>
+                <select name="category" id="category" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl p-2">
+                    <option value="national">National</option>
+                    <option value="politics">Politics</option>
+                    <option value="local">Local</option>
+                    <option value="technology">Technology</option>
+                    <option value="world">World</option>
+                </select>
+            </div>
+            <div class="flex flex-col">
+                <label for="title">Title<span class="text-[#580a0a] font-bold">*</span></label>
+                <input name="title" id="title" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl p-2" type="text" required>
+            </div>
+            <div class="flex flex-col">
+                <label for="slug">Slug<span class="text-[#580a0a] font-bold">*</span></label>
+                <input oninput="updateSlug();" name="slug" id="slug" :value="bartaData.slug" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl p-2" type="text" required>
+            </div>
+            <div class="flex flex-col">
+                <label for="heading">Heading<span class="text-[#580a0a] font-bold">*</span></label>
+                <input name="heading"  id="heading" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl p-2" type="text" required>
+            </div>
+            <div class="flex flex-col">
+                <label for="meta_title">Meta Title<span class="text-[#580a0a] font-bold">*</span></label>
+                <input name="meta_title" id="meta_title" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl p-2" type="text" placeholder="max: length 60 characters & try to use common words" required>
+            </div>
+            <div class="flex flex-col">
+                <label for="meta_description">Meta Description<span class="text-[#580a0a] font-bold">*</span></label>
+                <input name="meta_description" id="meta_description" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl p-2" type="text" placeholder="max: length 160 characters & try to use common words" required>
+            </div>
+            <div class="flex flex-col">
+                <label for="in_brief">In Brief<span class="text-[#580a0a] font-bold">*</span></label>
+                <input name="in_brief" id="in_brief" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl p-2" type="text" placeholder="max: length 280 characters & try to descibe" required>
+            </div>
+            <div class="flex flex-col">
+                <label class="text-lg" for="content">News Description<span class="text-[#580a0a] font-bold">*</span></label>
+                <textarea class="border-2 p-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl" name="content" id="content" cols="30" rows="10" required>{{ bartaData.content }}</textarea>
+            </div>
+            <div class="flex flex-col">
+                <label for="upldFile">Upload File</label>
+                <input id="upldFile" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl" type="file">
+            </div>
+            <div class="flex float-right">
+                <button onclick="callApi(event);" class="bg-[#580a0a] text-white px-4 py-2 rounded-lg">Save</button>
+            </div>
+        </form>
+        
+      </section>
+    </div>
+</template>
+  
+  <script>
+    export default {
+    data() {
+        return {
+            slugURLbn: "",
+            fullURL: "",
+            spliturl: "",
+            bartaData: {}, // Initialize bartaData as an object
+            bnData: {},
+        };
+    },
+    mounted() {
+        this.getBarta();
+        let fullURL = window.location.href.split("/")[4];
+        // console.log(fullURL + '&lang=en')
+    },
+    methods: {
+        getBarta() {
+            let currentUrl = window.location.href;
+            let langValue = currentUrl.split("/")[4].split("lang=")[1];
+            let spliturl = currentUrl.split("/")[4].split("edit=")[1].split(`lang=${langValue}`)[0].split(`&`)[0];
+            console.log(spliturl);
+            let formData = new FormData();
+            formData.append('slug', spliturl);
+            fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/edit-news/?action=news_${langValue}`, {
+                method: 'POST',
+                body: formData,
+            })
+            .then(response => response.json())
+            .then(data => {
+                // Assign fetched data to bartaData property
+                // console.log(data)
+                this.bartaData = data;
+                console.log(this.bartaData)
+            })
+            .catch(error => {
+                // console.log('An error occurred', error);
+            });
+        },
+        // getBartaBN() {
+        //     let currentUrl = window.location.href;
+        //     let spliturl = currentUrl.split("/")[3].split("edit=")[1];
+        //     // console.log(spliturl);
+        //     let formData = new FormData();
+        //     formData.append('slug', spliturl);
+        //     fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/edit-news/?action=news_bn`, {
+        //         method: 'POST',
+        //         body: formData,
+        //     })
+        //     .then(response => response.json())
+        //     .then(data => {
+        //         // Assign fetched data to bartaData property
+        //         // console.log(data)
+        //         this.bnData = data;
+        //         console.log(this.bnData)
+        //     })
+        //     .catch(error => {
+        //         // console.log('An error occurred', error);
+        //     });
+        // },
+    },
+    };
+    </script>
\ No newline at end of file
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 297dff0..acd006f 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,19 +1,22 @@
 ---
 import Layout from "../layouts/Layout.astro";
+// import EditNews from "../../components/EditNews.vue";
 ---
-<Layout title="Edit News | Barta-India">
+<Layout title="404 page not founf | Barta-India">
     <main>
         <div>
-            <section id="editSection">
-                <h1 id="url"></h1>
-            </section>
+            <p class="text-center">404 | Page Not Found</p>
+            <!-- <EditNews client:visible /> -->
         </div>
     </main>
-</Layout>
+<!-- </Layout>
 <script is:inline>
     let pramsURL = document.location.href.split('/')[3].split('edit=')[1];
-    document.getElementById('url').innerHTML = pramsURL;
+        document.getElementById('url').innerHTML = pramsURL;
     // console.log(pramsURL)
 
+    function getNewsData(){
+        
+    }
+</script> -->
 
-</script>
\ No newline at end of file
diff --git a/src/pages/ad-file.astro b/src/pages/editor/ad-file.astro
similarity index 100%
rename from src/pages/ad-file.astro
rename to src/pages/editor/ad-file.astro
diff --git a/src/pages/add-news.astro b/src/pages/editor/add-news.astro
similarity index 100%
rename from src/pages/add-news.astro
rename to src/pages/editor/add-news.astro
diff --git a/src/pages/edit-news.astro b/src/pages/editor/edit-news.astro
similarity index 71%
rename from src/pages/edit-news.astro
rename to src/pages/editor/edit-news.astro
index 505c89b..3a15d17 100644
--- a/src/pages/edit-news.astro
+++ b/src/pages/editor/edit-news.astro
@@ -1,5 +1,5 @@
 ---
-import Layout from "../layouts/Layout.astro";
+import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Edit News | Barta-India">
     <main>
@@ -7,6 +7,13 @@ import Layout from "../layouts/Layout.astro";
             <section class="container mx-auto px-4">
                 <div class="flex flex-col">
                     <p class="text-2xl">Edit News</p>
+                    <select name="lang" id="lang">Select Language
+                        <option value="en">English</option>
+                        <option value="bn">Bengali</option>
+                        <option value="hi">Hindi</option>
+                        <option value="zh">Mandarine</option>
+                        <option value="se">Spanish</option>
+                    </select>
                     <table class="border-2">
                         <thead>
                             <tr class="text-center">
@@ -23,33 +30,13 @@ import Layout from "../layouts/Layout.astro";
     </main>
 </Layout>
 <script is:inline>
-
-    // const apiUrl = 'https://apisp.dev2.cicdhosting.com/_dedicated/dwd/edit-news/';
-    // const requestData = {
-    //     key1: 'value1',
-    //     key2: 'value2'
-    // };
-    //     fetch(apiUrl, {
-    //     method: 'POST',
-    //     headers: {
-    //         'Content-Type': 'application/json',
-    //         // Add any other headers if needed
-    //     },
-    //     body: JSON.stringify(requestData)
-    //     })
-    //     .then(response => response.json())
-    //     .then(data => console.log('Data received:', data))
-    //     .catch(error => console.error('Fetch error:', error));
-
-    fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/edit-news/`)
+    fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/edit-news-list/`)
         .then(response => response.json())
         .then(data => {
             console.log(data);
             let tableBody = document.getElementById('statusTableBody');
-
             data.forEach(function(singleData) {
                 let row = tableBody.insertRow();
-                
                 let cellId = row.insertCell(0);
                 cellId.innerHTML = singleData.id;
                 let cellStatus = row.insertCell(1);
@@ -57,7 +44,7 @@ import Layout from "../layouts/Layout.astro";
                 let cellEdit = row.insertCell(2);
                 let editButton = document.createElement('a');
                 editButton.innerText = 'Edit';
-                editButton.href = `/edit=${singleData.slug}`
+                editButton.href = `/editor/?edit=${singleData.slug}&lang=${document.getElementById('lang').value}`
                 editButton.addEventListener('click', function() {
                     // Add your edit functionality here
                     // console.log('Editing ID:', singleData.id);
diff --git a/src/pages/gen-news.astro b/src/pages/editor/gen-news.astro
similarity index 100%
rename from src/pages/gen-news.astro
rename to src/pages/editor/gen-news.astro
diff --git a/src/pages/editor/index.astro b/src/pages/editor/index.astro
new file mode 100644
index 0000000..715ceba
--- /dev/null
+++ b/src/pages/editor/index.astro
@@ -0,0 +1,21 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import EditNews from "../../components/EditNews.vue";
+---
+<Layout title="Edit News | Barta-India">
+    <main>
+        <div>
+            <EditNews client:visible />
+            
+        </div>
+    </main>
+<!-- </Layout>
+<script is:inline>
+    let pramsURL = document.location.href.split('/')[3].split('edit=')[1];
+        document.getElementById('url').innerHTML = pramsURL;
+    // console.log(pramsURL)
+
+    function getNewsData(){
+        
+    }
+</script> -->
\ No newline at end of file