diff --git a/package.json b/package.json
index fd978a6..37c06e7 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "astro dev --host --port 2023",
-    "start": "astro dev --host --port 2023",
+    "dev": "astro dev --host --port 2024",
+    "start": "astro dev --host --port 2024",
     "build": "astro build",
     "preview": "astro preview",
     "push": "rsync -azP dist/ barta-india@51.222.206.100:/home/barta-india/public_html",
@@ -14,6 +14,8 @@
   "dependencies": {
     "@astrojs/tailwind": "^2.1.3",
     "@astrojs/vue": "^1.2.2",
+    "@bytescale/upload-widget-vue": "^4.13.0",
+    "@upload-io/vue-uploader": "^3.37.1",
     "astro": "^1.7.2",
     "astro-eslint-parser": "^0.14.0",
     "eslint": "^8.44.0",
diff --git a/public/js/js-0.1.0.js b/public/js/js-0.1.0.js
new file mode 100644
index 0000000..ad4f985
--- /dev/null
+++ b/public/js/js-0.1.0.js
@@ -0,0 +1,70 @@
+function getCookie(cname) {
+  let name = cname + "=";
+  let ca = document.cookie.split(';');
+  for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) == ' ') {
+          c = c.substring(1);
+      }
+      if (c.indexOf(name) == 0) {
+          const cookieValue = c.substring(name.length, c.length);
+          // console.log(`Cookie ${cname} found with value: ${cookieValue}`);
+          return cookieValue;
+      }
+  }
+  // console.log(`Cookie ${cname} not found`);
+  return "";
+}
+
+
+function makeProtectedRequest(apiUrl, renewUrl, access_token, formData) {
+  
+  return fetch(apiUrl, {
+    method: 'POST',
+    // mode: "cors",
+    headers: {
+      // 'Authorization': `Bearer ${accessToken}`,
+      'Content-Type': 'application/json',
+    },
+    // credentials: 'same-origin',
+    body: JSON.stringify(formData),
+  })
+  .then(response => {
+    if (!response.ok) {
+      throw new Error('Request failed');
+    } else if(response.status === 204) {
+        // Token is expired or invalid, trigger refresh
+        // console.log(access_token)
+        return renewToken(renewUrl, access_token).then(access_token_new => {
+          // Retry the original request with the new token
+          // console.log("formData :" +access_token_new)
+          formData.access_token=access_token_new;
+          return fetch(apiUrl, {
+            method: 'POST',
+            headers: {
+              // 'Authorization': `Bearer ${newAccessToken}`,
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(formData),
+          });
+        });
+      }
+    return response.json();
+  });
+}
+
+function renewToken(renewUrl, access_token) {
+  return fetch(renewUrl, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ tokenToRenew: access_token }),
+  })
+  .then(response => response.json())
+  .then(data => {
+    document.cookie = `access_token=${data.access_token}; path=/`;
+    // console.log('New Access Token:', data);
+    return data.access_token;
+  });
+}
\ No newline at end of file
diff --git a/public/robots.txt b/public/robots.txt
index 5a4985c..e182545 100644
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,5 +1,7 @@
 User-agent: Googlebot
 Disallow: /nogooglebot/
+Disallow: /ad-file/
+Disallow: /add-news/
 
 User-agent: *
 Allow: /
diff --git a/src/components/About.vue b/src/components/About.vue
new file mode 100644
index 0000000..12059ee
--- /dev/null
+++ b/src/components/About.vue
@@ -0,0 +1,23 @@
+<template>
+    <div>
+        <h1 class="text-4xl">About Page Content</h1>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ipsam! Nisi aspernatur quibusdam soluta commodi labore optio? Molestias quasi fugiat voluptatibus impedit laboriosam cumque illo alias repellendus, similique minus ullam.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ipsam! Nisi aspernatur quibusdam soluta commodi labore optio? Molestias quasi fugiat voluptatibus impedit laboriosam cumque illo alias repellendus, similique minus ullam.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ipsam! Nisi aspernatur quibusdam soluta commodi labore optio? Molestias quasi fugiat voluptatibus impedit laboriosam cumque illo alias repellendus, similique minus ullam.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ipsam! Nisi aspernatur quibusdam soluta commodi labore optio? Molestias quasi fugiat voluptatibus impedit laboriosam cumque illo alias repellendus, similique minus ullam.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ipsam! Nisi aspernatur quibusdam soluta commodi labore optio? Molestias quasi fugiat voluptatibus impedit laboriosam cumque illo alias repellendus, similique minus ullam.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ipsam! Nisi aspernatur quibusdam soluta commodi labore optio? Molestias quasi fugiat voluptatibus impedit laboriosam cumque illo alias repellendus, similique minus ullam.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ipsam! Nisi aspernatur quibusdam soluta commodi labore optio? Molestias quasi fugiat voluptatibus impedit laboriosam cumque illo alias repellendus, similique minus ullam.</p>
+    </div>
+</template>
+<script>
+export default {
+        name: 'About'
+    };
+</script>
+
+<style>
+    p{
+        font-size: 20px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 71cd561..68f7b1b 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -33,6 +33,7 @@
     </div>
   </div>
 </main>
+<script defer type="text/javascript" src="/js/js-0.1.0.js"></script>
 <!-- Google tag (gtag.js) -->
 
 <script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-GXF4D64859"></script>
diff --git a/src/components/HashRouting.vue b/src/components/HashRouting.vue
new file mode 100644
index 0000000..aceefb9
--- /dev/null
+++ b/src/components/HashRouting.vue
@@ -0,0 +1,103 @@
+<template>
+    <div id="app">
+      <div>
+        <!-- <a href="#/" @click.prevent="navigateTo('/')">Home</a> |
+        <a href="#/about" @click.prevent="navigateTo('/about')">About</a> -->
+      </div>
+  
+      <div>
+        <!-- <component :is="currentComponent"></component> -->
+      </div>
+    </div>
+  </template>
+  
+  <!-- <script>
+  import Home from './Home.vue';
+  import About from './About.vue';
+  
+  export default {
+    name: 'App',
+    data() {
+      return {
+        currentRoute: window.location.hash.substr(1),
+        routes: {
+          '/': Home,
+          '/about': About
+        }
+      };
+    },
+    computed: {
+      currentComponent() {
+        return this.routes[this.currentRoute] || Home;
+      }
+    },
+    methods: {
+      navigateTo(route) {
+        this.currentRoute = route;
+      }
+    },
+    watch: {
+      currentRoute() {
+        window.location.hash = this.currentRoute;
+      }
+    }
+  };
+  </script> -->
+  
+  <style>
+  /* Add your styles here if needed */
+  </style>
+  
+
+
+
+
+
+
+<!-- <template>
+    <div>
+        <div class="flex flex-row space-4  z-10 my-20">
+            <a href="#section1">Section - 1</a>
+            <a href="#section2">Section - 2</a>
+            <a href="#section3">Section - 3</a>
+        </div>
+        <section id="section1">
+            <div>
+                <h1 class="text-4xl">Section - 1</h1>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis rem id distinctio officia odio, quasi ratione perferendis. Soluta delectus aspernatur, dicta voluptatibus autem consectetur, error, enim saepe possimus quidem ex?</p>
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque quas maiores doloremque. Esse quos aliquam doloremque impedit consequatur, dignissimos exercitationem quaerat incidunt numquam voluptatum quae deserunt voluptas quod laboriosam.</p>
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque quas maiores doloremque. Esse quos aliquam doloremque impedit consequatur, dignissimos exercitationem quaerat incidunt numquam voluptatum quae deserunt voluptas quod laboriosam.</p>
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque quas maiores doloremque. Esse quos aliquam doloremque impedit consequatur, dignissimos exercitationem quaerat incidunt numquam voluptatum quae deserunt voluptas quod laboriosam.</p>
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque quas maiores doloremque. Esse quos aliquam doloremque impedit consequatur, dignissimos exercitationem quaerat incidunt numquam voluptatum quae deserunt voluptas quod laboriosam.</p>
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque quas maiores doloremque. Esse quos aliquam doloremque impedit consequatur, dignissimos exercitationem quaerat incidunt numquam voluptatum quae deserunt voluptas quod laboriosam.</p>
+            </div>
+        </section>
+        <section id="section2">
+            <div>
+                <h1 class="text-4xl">Section - 1</h1>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis rem id distinctio officia odio, quasi ratione perferendis. Soluta delectus aspernatur, dicta voluptatibus autem consectetur, error, enim saepe possimus quidem ex?</p>
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque quas maiores doloremque. Esse quos aliquam doloremque impedit consequatur, dignissimos exercitationem quaerat incidunt numquam voluptatum quae deserunt voluptas quod laboriosam.</p>
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque quas maiores doloremque. Esse quos aliquam doloremque impedit consequatur, dignissimos exercitationem quaerat incidunt numquam voluptatum quae deserunt voluptas quod laboriosam.</p>
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque quas maiores doloremque. Esse quos aliquam doloremque impedit consequatur, dignissimos exercitationem quaerat incidunt numquam voluptatum quae deserunt voluptas quod laboriosam.</p>
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque quas maiores doloremque. Esse quos aliquam doloremque impedit consequatur, dignissimos exercitationem quaerat incidunt numquam voluptatum quae deserunt voluptas quod laboriosam.</p>
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque quas maiores doloremque. Esse quos aliquam doloremque impedit consequatur, dignissimos exercitationem quaerat incidunt numquam voluptatum quae deserunt voluptas quod laboriosam.</p>
+            </div>
+        </section>
+        <section id="section3">
+            <div>
+                <h1 class="text-4xl">Section - 1</h1>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis rem id distinctio officia odio, quasi ratione perferendis. Soluta delectus aspernatur, dicta voluptatibus autem consectetur, error, enim saepe possimus quidem ex?</p>
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque quas maiores doloremque. Esse quos aliquam doloremque impedit consequatur, dignissimos exercitationem quaerat incidunt numquam voluptatum quae deserunt voluptas quod laboriosam.</p>
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque quas maiores doloremque. Esse quos aliquam doloremque impedit consequatur, dignissimos exercitationem quaerat incidunt numquam voluptatum quae deserunt voluptas quod laboriosam.</p>
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque quas maiores doloremque. Esse quos aliquam doloremque impedit consequatur, dignissimos exercitationem quaerat incidunt numquam voluptatum quae deserunt voluptas quod laboriosam.</p>
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque quas maiores doloremque. Esse quos aliquam doloremque impedit consequatur, dignissimos exercitationem quaerat incidunt numquam voluptatum quae deserunt voluptas quod laboriosam.</p>
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque quas maiores doloremque. Esse quos aliquam doloremque impedit consequatur, dignissimos exercitationem quaerat incidunt numquam voluptatum quae deserunt voluptas quod laboriosam.</p>
+            </div>
+        </section>
+    </div>
+</template>
+<style>
+    p{
+        font-size: 20px;
+    }
+</style> -->
\ No newline at end of file
diff --git a/src/components/Home.vue b/src/components/Home.vue
new file mode 100644
index 0000000..e43d980
--- /dev/null
+++ b/src/components/Home.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <h1 class="text-4xl">Home Page Content</h1>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ipsam! Nisi aspernatur quibusdam soluta commodi labore optio? Molestias quasi fugiat voluptatibus impedit laboriosam cumque illo alias repellendus, similique minus ullam.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ipsam! Nisi aspernatur quibusdam soluta commodi labore optio? Molestias quasi fugiat voluptatibus impedit laboriosam cumque illo alias repellendus, similique minus ullam.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ipsam! Nisi aspernatur quibusdam soluta commodi labore optio? Molestias quasi fugiat voluptatibus impedit laboriosam cumque illo alias repellendus, similique minus ullam.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ipsam! Nisi aspernatur quibusdam soluta commodi labore optio? Molestias quasi fugiat voluptatibus impedit laboriosam cumque illo alias repellendus, similique minus ullam.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ipsam! Nisi aspernatur quibusdam soluta commodi labore optio? Molestias quasi fugiat voluptatibus impedit laboriosam cumque illo alias repellendus, similique minus ullam.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ipsam! Nisi aspernatur quibusdam soluta commodi labore optio? Molestias quasi fugiat voluptatibus impedit laboriosam cumque illo alias repellendus, similique minus ullam.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ipsam! Nisi aspernatur quibusdam soluta commodi labore optio? Molestias quasi fugiat voluptatibus impedit laboriosam cumque illo alias repellendus, similique minus ullam.</p>
+    </div>
+</template>
+<script>
+export default {
+    name: 'Home'
+};
+</script>
+<style>
+    p{
+        font-size: 20px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/ImageUpload.vue b/src/components/ImageUpload.vue
new file mode 100644
index 0000000..7c7d100
--- /dev/null
+++ b/src/components/ImageUpload.vue
@@ -0,0 +1,37 @@
+<template>
+    <!-- <button @click="uploadFile">Upload a file...</button> -->
+  </template>
+  
+  <!-- <script lang="ts">
+    import { openUploadModal } from "@bytescale/upload-widget-vue";
+    import type { UploadWidgetConfig, UploadWidgetResult } from "@bytescale/upload-widget";
+    import type { PreventableEvent } from "@bytescale/upload-widget-vue";
+  
+    // -----
+    // Configuration:
+    // https://www.bytescale.com/docs/upload-widget#configuration
+    // -----
+    const options: UploadWidgetConfig = {
+      apiKey: "public_W142iS49Lc7EEN1moVR4ekPmkG13", // Get API key: https://www.bytescale.com/get-started
+      maxFileCount: 10
+    };
+  
+    export default {
+      name: "App",
+      methods: {
+        uploadFile(event: PreventableEvent) {
+          openUploadModal({
+            event,
+            options,
+            onComplete: (files: UploadWidgetResult[]) => {
+              if (files.length === 0) {
+                alert("No files selected.");
+              } else {
+                alert(files.map(f => f.fileUrl).join("\n"));
+              }
+            }
+          })
+        }
+      }
+    };
+  </script> -->
\ No newline at end of file
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 49c3da9..297dff0 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,10 +1,19 @@
 ---
-import Layout from "../layouts/Layout.astro"
+import Layout from "../layouts/Layout.astro";
 ---
-<Layout title="404 Page Not Found | Barta-India">
+<Layout title="Edit News | Barta-India">
     <main>
         <div>
-            <h1 class="text-3xl text-center py-40 text-[#580a0a] font-bold">404 Page Not Found</h1>
+            <section id="editSection">
+                <h1 id="url"></h1>
+            </section>
         </div>
     </main>
-</Layout>
\ No newline at end of file
+</Layout>
+<script is:inline>
+    let pramsURL = document.location.href.split('/')[3].split('edit=')[1];
+    document.getElementById('url').innerHTML = pramsURL;
+    // console.log(pramsURL)
+
+
+</script>
\ No newline at end of file
diff --git a/src/pages/4041.astro b/src/pages/4041.astro
new file mode 100644
index 0000000..2ad1fbc
--- /dev/null
+++ b/src/pages/4041.astro
@@ -0,0 +1,81 @@
+---
+import Layout from "../layouts/Layout.astro";
+// import ImageUpload from "../components/ImageUpload.vue";
+---
+<Layout title=""> 
+    <main>
+        <div class="container mx-auto px-4 mt-40">
+            <!-- <ImageUpload client:visible /> -->
+            <h1 id="newsTitle"></h1>
+            
+            <div id="my-container" style="position: relative; margin: 0 auto; width: 80%; height: 350px;"></div>
+        </div>
+    </main>
+</Layout>
+<script is:inline src="https://js.bytescale.com/upload-widget/v4"></script>
+    <script is:inline>
+      // Make the POST request using fetch
+      let slug = window.location.href.split('slug=')[1];
+      // console.log(fullURL)
+      let formData = new FormData;
+      formData.append('slug', slug)
+          const apiUrl = 'https://apisp.dev2.cicdhosting.com/news/get-news/?action=getslug';
+          fetch(apiUrl, {
+            method: 'POST',
+            body: formData, // Include the postData here
+          })
+            .then(response => {
+              if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+              }
+              return response.json();
+            })
+            .then(data => {
+              console.log('POST request successful:', data);
+              document.getElementById('newsTitle').innerHTML = data.title;
+              // Handle the data from the server
+            })
+            .catch(error => {
+              console.error('Error during POST request:', error);
+              // Handle errors
+            });
+
+      // -----
+      // Configuration:
+      // https://www.bytescale.com/docs/upload-widget#configuration
+      // -----
+      const options = {
+        apiKey: "public_W142iS49Lc7EEN1moVR4ekPmkG13", // Get API key: https://www.bytescale.com/get-started
+
+        maxFileCount: 10,
+
+        // Dropzone configuration:
+        layout: "inline",
+        container: "#my-container",
+        showFinishButton: true,
+        
+
+        // To remove the 'finish' button:
+        // showFinishButton: false,
+        // onUpdate: ({ uploadedFiles, pendingFiles, failedFiles }) => {
+        //   const fileUrls = uploadedFiles.map(x => x.fileUrl).join("\n");
+        //   if (fileUrls.length > 0) {
+        //     alert(`File(s) uploaded:\n\n${fileUrls}`);
+        //   }
+        // }
+      };
+      // console.log(options.container)
+      // import * as Bytescale from "@bytescale/upload-widget";
+      Bytescale.UploadWidget.open(options).then(
+        files => {
+          const fileUrls = files.map(x => x.fileUrl).join("\n");
+          const success = fileUrls.length === 0
+            ? "No file selected."
+            : `File uploaded:\n\n${fileUrls}`;
+          alert(success);
+        },
+        error => {
+          alert(error);
+        }
+      );
+    </script>
diff --git a/src/pages/ad-file.astro b/src/pages/ad-file.astro
new file mode 100644
index 0000000..ad58f0a
--- /dev/null
+++ b/src/pages/ad-file.astro
@@ -0,0 +1,57 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+<Layout title="Upload File | Barta-India">
+    <main>
+        <div class="container mx-auto px-4 flex flex-col space-y-4">
+            <h1>Upload File</h1>
+            <form action="https://apisp.dev2.cicdhosting.com/news/add-file/" method="post" enctype="multipart/form-data">
+                <label for="file">Choose a file:</label>
+                <input type="file" name="file" id="file" required>
+                <br>
+                <input type="submit" value="Upload">
+            </form>
+        </div>
+    </main>
+</Layout>
+<script is:inline>
+    // function uploadFile() {
+    //     var fileInput = document.getElementById('fileInput');
+    //     var file = fileInput.files[0];
+
+    //     if (file) {
+    //         var formData = new FormData();
+    //         formData.append('fileInput', file);
+
+    //         fetch('https://apisp.dev2.cicdhosting.com/news/add-file/?action=save', {
+    //             method: 'POST',
+    //             body: formData
+    //         })
+    //         .then(response => response.json())
+    //         .then(data => {
+    //             document.getElementById('status').innerText = data.message;
+    //         })
+    //         .catch(error => {
+    //             console.error('Error:', error);
+    //         });
+    //     } else {
+    //         document.getElementById('status').innerText = 'Please select a file.';
+    //     }
+    // }
+
+
+    // function fileUpload(){
+    //     let formData = new FormData(document.getElementById('uploadForm'));
+    //     fetch(`https://apisp.dev2.cicdhosting.com/news/add-file/?action=save`, {
+    //         method: 'POST',
+    //         body: formData
+    //     })
+    //     .then(response => response.json())
+    //     .then(data => {
+    //         console.log(data);
+    //     })
+    //     .catch(error => {
+    //         console.log('An error occurred', error);
+    //     });
+    // }
+</script>
diff --git a/src/pages/add-news.astro b/src/pages/add-news.astro
new file mode 100644
index 0000000..3d7e9a1
--- /dev/null
+++ b/src/pages/add-news.astro
@@ -0,0 +1,267 @@
+---
+import Layout from "../layouts/Layout.astro";
+import ImageUpload from "../components/ImageUpload.vue";
+---
+
+<Layout title="Add News | Barta India">
+    <main>
+        <div>
+            <section class="container mx-auto px-4 md:max-w-3xl mt-40 space-y-4 shadow-xl rounded-xl p-4">
+                <h1 class="text-center text-2xl underline decoration-4 decoration-[#580a0a]">Genarate New News</h1>
+                <form id="newsPara" class="flex flex-col space-y-4" enctype="multipart/form-data">
+                    <label for="language">Language<span class="text-[#580a0a] font-bold">*</span></label>
+                    <select required onchange="qryWithLang();" name="language" id="language" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl p-2">
+                        <option value="0">-Select-</option>
+                        <option value="english">English</option>    
+                        <option value="bengali">Bengali</option>
+                    </select>
+                    <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="0">-Select-</option>
+                            <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="preText">News Paragraph</label>
+                        <textarea onchange="buttonVisibility();" required name="preText" id="preText" cols="30" maxlength="1000000" rows="10" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"></textarea>
+                    </div>
+                    <div class="flex flex-col">
+                        <textarea required name="systemMessage" id="systemMessage" cols="30" rows="3" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"></textarea>
+                    </div>
+                    <div>
+                        <button id="genButton" style="display: none;" onclick="submitNewsPara(event);" class="bg-[#580a0a] text-white px-4 py-2 rounded-lg" >Genarate</button>
+                        <button id="genButton2" style="display: block;" class="bg-[#580a0a] text-white px-4 py-2 rounded-lg opacity-50 cursor-not-allowed" >Genarate</button>
+                    </div>
+                    <!-- <input id="message" type="text" value="" class="border-2 border-[#580a0a] p-2 focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"/> -->
+                </form>
+            </section>
+            <section id="formSection" style="display: none;" class="container mx-auto md:max-w-3xl px-4 shadow-xl rounded-xl p-6">
+                <div class="flex justify-center">
+                    <h1 class="text-xl my-6 p-2 border-2 bg-[#580a0a] text-white rounded-full">Add News to Barta-India's Page</h1>
+                </div>
+                <p>All(<span class="text-[#580a0a] font-bold">*</span>) are mandatory fields</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="null">-Select-</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="null">-Select-</option>
+                            <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" 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></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>
+            <section class="bg-white rounded-full px-6 py-4" id="loadingSection" style="display: none;">
+                <div class="flex flex-col justify-center place-items-center">
+                    <div class="load-aimate animate-spin "></div>
+                    <p>Processing...</p>
+                </div>
+            </section>
+            <!-- <section class="container mx-auto">
+                <div>
+                    <dialog id="d" class="w-[50%]">
+                        <form method="dialog">
+                            <p>Modal Content Modal Content Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic consequatur aspernatur, explicabo sequi perspiciatis quisquam voluptates tenetur placeat numquam consectetur! Tempore expedita facilis tempora labore at illo beatae eligendi magnam.</p>
+                            <button>ok</button>
+                        </form>
+                    </dialog>
+                    <button onclick="d.showModal()">Open</button>
+                </div>
+            </section> -->
+        </div>
+    </main>
+</Layout>
+
+<script is:inline>
+    function qryWithLang(){
+        let langValue = document.getElementById('language').value;
+        document.getElementById('systemMessage').value = `need title, heading not more than 160 characters, meta_title not more than 60 characters, meta_description not more than 160 characters, short_description not more than 280 characters, long_description below 2000 characters, all are ${langValue} language all in a json structure`;
+        // give me long description below 2000 characters, title, heading not more than 160 characters, short desciption not more than 280 characters, meta_title not more than 60 characters and try to use common words, meta_description not more than 160 characters and try to use common words, all text are convert to ${langValue} language, give me all in a json structure`
+        // provide   meta_title within 60 characters, meta_description within  160 characters, short_description within 280 characters in English, bengali and hindi all in a json structure
+        // provide meta_title within 60 characters, meta_description within  160 characters, short_description within 280 characters in English, bengali and hindi all in a json structure
+    }
+    function buttonVisibility() {
+      var preTextValue = document.getElementById('preText').value.trim();
+      var systemMessageValue = document.getElementById('systemMessage').value.trim();
+      var languageValue = document.getElementById('language').value;
+      var categoryValue = document.getElementById('category').value;
+      var genButton = document.getElementById('genButton');
+      var genButton2 = document.getElementById('genButton2');
+      if (preTextValue.length > 0 && systemMessageValue.length > 0 && languageValue !== null) {
+        genButton.style.display = 'block';
+        genButton2.style.display = 'none';
+      } else {
+        genButton.style.display = 'none';
+        genButton2.style.display = 'block';
+      }
+    }
+
+    function submitNewsPara(event) {
+        event.preventDefault();
+        let genButton = document.getElementById('genButton');
+        let langInput = document.getElementById('language');
+        let loadSection = document.getElementById('loadingSection');
+        let newsData = document.getElementById('newsPara'); 
+            loadSection.style.display = 'block';
+            genButton.disabled = true;
+            langInput.disabled = true;
+            genButton.style.cursor = 'not-allowed';
+
+        let formData = new FormData(newsData);
+        fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/`, {
+            method: 'POST',
+            body: formData,
+        })
+        .then(data => data.json())
+        .then(data => {
+            // if (data === 200) {
+            //     counter++;
+            // } else {
+                // formSection genButton brightness-50
+                console.log(data)
+            // }
+            let newsData = data.choices[0].message.content;
+            if(newsData){
+                document.getElementById('formSection').style.display = 'block';
+                loadSection.style.display = 'none';
+                genButton.disabled = false;
+                genButton.style.cursor = 'pointer';
+                langInput.disabled = false;
+                // document.getElementById('loadingSection').classList.remove = 'brightness-50';
+                // document.getElementById('genButton').classList.remove = 'disabled';
+            }
+            let jsonObject = JSON.parse(newsData);
+            document.getElementById('title').value = jsonObject.title;
+            document.getElementById('slug').value = jsonObject.title;
+            document.getElementById('heading').value = jsonObject.heading;
+            document.getElementById('meta_title').value = jsonObject.meta_title;
+            document.getElementById('meta_description').value = jsonObject.meta_description;
+            document.getElementById('in_brief').value = jsonObject.short_description;
+            document.getElementById('content').value = jsonObject.long_description;
+            if(jsonObject.long_description){
+                // document.getElementById('content').value = jsonObject.long_description;
+            }
+        })  
+        .catch(error => {
+            console.error('Error occurred', error);
+        });
+    }
+    function slugify(text) {
+        return text.toString().toLowerCase()
+            .replace(/\s+/g, '-')        // Replace spaces with -
+            .replace(/[^\w-]+/g, '')     // Remove all non-word characters
+            .replace(/--+/g, '-')        // Replace multiple - with single -
+            .replace(/^-+/, '')          // Trim - from start of text
+            .replace(/-+$/, '');         // Trim - from end of text
+    }
+
+    function updateSlug() {
+        const titleInput = document.getElementById('slug');
+        const slugInput = document.getElementById('slug');
+        const titleValue = titleInput.value;
+        slugInput.value = slugify(titleValue);
+    }
+
+    function callApi(event) {
+        event.preventDefault();
+        let slugValue = document.getElementById('slug').value;
+        let newsData = document.getElementById('newsForm');
+        let formData = new FormData(newsData);
+        fetch(`https://apisp.dev2.cicdhosting.com/news/add-news/?action=save`, {
+            method: 'POST',
+            body: formData,
+        })
+        .then(data => data.json())
+        .then(data => {
+            if (data.success === true) {
+                window.location.href= `/add-file?slug=${slugValue}`
+                // console.log(slugValue)
+                console.log('Form Data Submitted Successfully');
+            } else {
+                console.log('Data Submit Failed');
+            }
+            console.log(data);
+        })
+        .catch(error => {
+            console.error('Error occurred', error);
+        });
+    }
+</script>
+<style>
+    #loadingSection{
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    .load-aimate{
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        border-left: 5px solid #580a0a;
+        border-right: 5px solid #580a0a;
+        border-bottom: 5px solid #580a0a;
+        border-top: 5px solid #FFFFFF;
+        background-color: #FFFFFF;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/edit-news.astro b/src/pages/edit-news.astro
new file mode 100644
index 0000000..505c89b
--- /dev/null
+++ b/src/pages/edit-news.astro
@@ -0,0 +1,71 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+<Layout title="Edit News | Barta-India">
+    <main>
+        <div>
+            <section class="container mx-auto px-4">
+                <div class="flex flex-col">
+                    <p class="text-2xl">Edit News</p>
+                    <table class="border-2">
+                        <thead>
+                            <tr class="text-center">
+                                <th>ID</th>
+                                <th>Status</th>
+                                <th>Edit</th>
+                            </tr>
+                        </thead>
+                        <tbody class="text-center border-2" id="statusTableBody"></tbody>
+                    </table>
+                </div>
+            </section>
+        </div>
+    </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/`)
+        .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);
+                cellStatus.innerHTML = singleData.status;
+                let cellEdit = row.insertCell(2);
+                let editButton = document.createElement('a');
+                editButton.innerText = 'Edit';
+                editButton.href = `/edit=${singleData.slug}`
+                editButton.addEventListener('click', function() {
+                    // Add your edit functionality here
+                    // console.log('Editing ID:', singleData.id);
+                });
+                cellEdit.appendChild(editButton);
+            });
+        })
+        .catch(error => console.error('Error fetching data:', error));
+
+
+</script>
\ No newline at end of file
diff --git a/src/pages/gen-news.astro b/src/pages/gen-news.astro
new file mode 100644
index 0000000..cad6e6b
--- /dev/null
+++ b/src/pages/gen-news.astro
@@ -0,0 +1,77 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+<Layout title="">
+    <main>
+        <div>
+            <section class="container mx-auto px-4 md:max-w-3xl mt-40 space-y-4 shadow-xl rounded-xl p-4">
+                <h1 class="text-center text-2xl underline decoration-4 decoration-[#580a0a]">Genarate New News</h1>
+                <form id="newsPara" class="flex flex-col space-y-4" enctype="multipart/form-data">
+                    <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">
+                        <option value="null">-Select-</option>
+                        <option value="English">English</option>    
+                        <option value="Bengali">Bengali</option>
+                    </select>
+                    <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="null">-Select-</option>
+                            <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="content">Nes Paragraph</label>
+                        <textarea name="content" id="content" cols="30" maxlength="1000000" rows="10" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"></textarea>
+                    </div>
+                    <div>
+                        <button onclick="submitNewsPara(event);" class="bg-[#580a0a] text-white px-4 py-2 rounded-lg" >Genarate</button>
+
+                        <h1 id="message"></h1>
+                    </div>
+                    <!-- <input id="message" type="text" value="" class="border-2 border-[#580a0a] p-2 focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"/> -->
+
+                </form>
+            </section>
+        </div>
+    </main> 
+</Layout>
+<script is:inline>
+    function submitNewsPara(event) {
+        event.preventDefault();
+        let newsData = document.getElementById('newsPara');
+        let formData = new FormData(newsData);
+        // formData.append('content', document.getElementById('content').value);
+        // console.log('FormData entries:');
+        // for (const entry of formData.entries()) {
+        // console.log(typeof entry[0], entry[0]);
+        // }
+        fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/`, {
+            method: 'POST',
+            body: formData,
+        })
+        .then(data => data.json())
+        .then(data => {
+            // if (data === 200) {
+            //     counter++;
+            // } else {
+                console.log(data)
+            // }
+            let newsData = data.choices[0].message.content;
+
+            const jsonObject = JSON.parse(newsData);
+            document.getElementById('message').innerHTML = jsonObject.title + "<br> Description: " + jsonObject.description; //jsonObject;
+            // document.getElementById('message').value = jsonObject.title;
+            // console.log(newsData);
+            // return data.choices[0].message.content;
+
+        })
+        .catch(error => {
+            console.error('Error occurred', error);
+        });
+    }
+</script>
\ No newline at end of file
diff --git a/src/pages/hash.astro b/src/pages/hash.astro
new file mode 100644
index 0000000..4eb89cf
--- /dev/null
+++ b/src/pages/hash.astro
@@ -0,0 +1,11 @@
+---
+import Layout from "../layouts/Layout.astro";
+import HashRouting from "../components/HashRouting.vue";
+---
+<Layout title="Hash Routing">
+    <main>
+        <div>
+            <HashRouting client:visible />
+        </div>
+    </main>
+</Layout>
\ No newline at end of file
diff --git a/src/pages/image.astro b/src/pages/image.astro
new file mode 100644
index 0000000..28c8371
--- /dev/null
+++ b/src/pages/image.astro
@@ -0,0 +1,11 @@
+---
+import Layout from "../layouts/Layout.astro";
+import ImageUpload from "../components/ImageUpload.vue";
+---
+<Layout title="">
+    <main>
+        <div class="container mx-auto px-4 mt-40">
+          <ImageUpload client:visible />
+        </div>
+    </main>
+</Layout>
\ No newline at end of file
diff --git a/src/pages/login.astro b/src/pages/login.astro
new file mode 100644
index 0000000..a15cd86
--- /dev/null
+++ b/src/pages/login.astro
@@ -0,0 +1,133 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+<Layout title="Login | Barta India">
+    <main>
+        <section class="">
+            <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
+                <a href="/" class="flex flex-col items-center mb-6 text-2xl font-semibold">
+                    <img class="w-16 h-16 mr-2" src="/img/barta_logo.png" alt="logo">
+                    Barta-India    
+                </a>
+                <div class="w-full bg-[#4b556350] rounded-xl md:mt-0 sm:max-w-md xl:p-0 hover:shadow-2xl hover:shadow-[#86198f] duration-[2s]">
+                        <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+                            <h1 class="text-xl font-bold leading-tight tracking-tight md:text-2xl ">Sign in to your account</h1>
+                            <form method="POST" id="loginForm" enctype="multipart/form-data" class="space-y-4 md:space-y-6">
+                                <div>
+                                    <label for="siliconid" class="block mb-2 text-sm font-medium ">Siliconid</label>
+                                    <input type="text" name="siliconid" id="siliconid" class="bg-gray-50 border border-gray-300 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="example@email.com" required="">
+                                </div>
+                                <div>
+                                    <label for="password" class="block mb-2 text-sm font-medium ">Password</label>
+                                    <input type="password" name="password" id="password" placeholder="Enter Password" class="bg-gray-50 border border-gray-300 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
+                                </div>
+                                <div class="flex items-center justify-between">
+                                    <div class="flex items-start">
+                                        <div class="flex items-center h-5">
+                                            <input id="remember" aria-describedby="remember" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800" >
+                                        </div>
+                                        <div class="ml-3 text-sm">
+                                            <label for="remember" class="text-gray-500 ">Remember me</label>
+                                        </div>
+                                    </div>
+                                    <a href="#" class="text-sm font-medium hover:underline">Forgot password?</a>
+                                </div>
+                                <button type="submit" class="w-full text-white bg-[#05b3a4] hover:bg-[#05b3a4] focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Sign in</button>
+                                <p class="text-sm font-light">
+                                    Don't have an account yet? <a href="/sign-up" class="font-medium hover:underline">Sign up</a>
+                                </p>
+                            </form>
+                        </div>
+                </div>
+            </div>
+        </section>
+    </main>
+</Layout>
+<script src="https://accounts.google.com/gsi/client" async></script>
+<script>
+    function handleCredentialResponse(response) {
+        // console.log("Encoded JWT ID token: " + response.credential);
+        var credential = {
+        credential: response.credential
+    };
+        fetch(`https://apisp.dev2.cicdhosting.com/sign/v2/?action=withGoogle`, {
+        method: 'POST',
+        body: JSON.stringify(credential),
+        })
+        .then(response => {
+            // console.log(response)
+            if (!response.ok) {
+                throw new Error('Authentication failed');
+            }
+            return response.json();
+        })
+        .then(data => {
+            console.log(data);
+            const access_token = data.access_token;
+            const name = data.name;
+            const ssid = data.ssid;
+            const siliconid = data.siliconid;
+            // console.log(data)
+            document.cookie = `access_token=${access_token}; path=/`;
+            document.cookie = `name=${name}; path=/`;
+            document.cookie = `ssid=${ssid}; path=/`;
+            document.cookie = `siliconid=${siliconid}; path=/`;
+            // window.location.href = '/profile';
+        })
+        .catch(error => {
+            console.error('Sign-Up failed:', error)
+            // Handle authentication failure, e.g., show an error message
+        });
+    }
+    window.onload = function () {
+    google.accounts.id.initialize({
+        client_id: "795913470645-lt5d04g6jkq05htq5nl5uab3p1otci63.apps.googleusercontent.com",
+        callback: handleCredentialResponse
+    });
+    // google.accounts.id.renderButton(
+    //     document.getElementById("buttonDiv"),
+    //     { theme: "outline", size: "large" }  // customization attributes
+    // );
+    google.accounts.id.prompt(); // also display the One Tap dialog
+    }
+</script>
+<script is:inline>
+document.getElementById('loginForm').addEventListener('submit', function (event) {
+event.preventDefault();
+const password = document.getElementById('password').value;
+const siliconid = document.getElementById('siliconid').value;
+var loginData = {
+        siliconid: siliconid,
+        password: password
+    };
+fetch(`https://apisp.dev2.cicdhosting.com/sign/v2/?action=login`, {
+        method: 'POST',
+        body: JSON.stringify(loginData),
+    })
+    .then(response => {
+        // console.log(response)
+        if (!response.ok) {
+            throw new Error('Authentication failed');
+        }
+        return response.json();
+    })
+    .then(data => {
+        console.log(data);
+        const access_token = data.access_token;
+        const name = data.name;
+        const ssid = data.ssid;
+        const siliconid = data.siliconid;
+        // console.log(data)
+        document.cookie = `access_token=${access_token}; path=/`;
+        document.cookie = `name=${name}; path=/`;
+        document.cookie = `ssid=${ssid}; path=/`;
+        document.cookie = `siliconid=${siliconid}; path=/`;
+        window.location.href = '/profile';
+    })
+    .catch(error => {
+        console.error('Sign-Up failed:', error)
+        // Handle authentication failure, e.g., show an error message
+    });
+});
+
+</script>
\ No newline at end of file
diff --git a/src/pages/multi-lang.astro b/src/pages/multi-lang.astro
new file mode 100644
index 0000000..286392b
--- /dev/null
+++ b/src/pages/multi-lang.astro
@@ -0,0 +1,158 @@
+---
+import Layout from "../layouts/Layout.astro";
+import ImageUpload from "../components/ImageUpload.vue";
+---
+
+<Layout title="Add News | Barta India">
+    <main>
+        <div>
+            <section class="container mx-auto px-4 md:max-w-3xl mt-40 space-y-4 shadow-xl rounded-xl p-4">
+                <h1 class="text-center text-2xl underline decoration-4 decoration-[#580a0a]">Genarate New News</h1>
+                <form id="newsPara" class="flex flex-col space-y-4" enctype="multipart/form-data">
+                    <!-- <label for="language">Language<span class="text-[#580a0a] font-bold">*</span></label>
+                    <select required onchange="qryWithLang();" name="language" id="language" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl p-2">
+                        <option value="0">-Select-</option>
+                        <option value="english">English</option>    
+                        <option value="bengali">Bengali</option>
+                    </select> -->
+                    <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="0">-Select-</option>
+                            <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="preText">News Paragraph</label>
+                        <textarea required name="preText" id="preText" cols="30" maxlength="1000000" rows="10" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl">white tiger</textarea>
+                    </div>
+                    <div class="flex flex-col">
+                        <textarea required name="systemMessage" id="systemMessage" cols="30" rows="3" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl">provide meta_title within 60 characters, meta_description within  160 characters, short_description within 280 characters, heading within 170 characters in en, bn, hi, zh, es ar all in a json structure no use comma after line ending</textarea>
+                    </div>
+                    <div>
+                        <button id="genButton" onclick="submitNewsPara(event);" class="bg-[#580a0a] text-white px-4 py-2 rounded-lg" >Genarate</button>
+                    </div>
+                    <!-- <input id="message" type="text" value="" class="border-2 border-[#580a0a] p-2 focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"/> -->
+                </form>
+            </section>
+        </div>
+    </main>
+</Layout>
+
+<script is:inline>
+    function qryWithLang(){
+        let langValue = document.getElementById('language').value;
+        document.getElementById('systemMessage').value = `provide meta_title within 60 characters, meta_description within  160 characters, short_description within 280 characters, heading within 170 characters in en, bn, hi, zh,  es,  pt, ru, fr, ur, ar all in a json structure no use comma after line ending`;
+        // give me long description below 2000 characters, title, heading not more than 160 characters, short desciption not more than 280 characters, meta_title not more than 60 characters and try to use common words, meta_description not more than 160 characters and try to use common words, all text are convert to ${langValue} language, give me all in a json structure`
+        // provide   meta_title within 60 characters, meta_description within  160 characters, short_description within 280 characters in English, bengali and hindi all in a json structure
+        // need title, heading not more than 160 characters, meta_title not more than 60 characters, meta_description not more than 160 characters, short_description not more than 280 characters, long_description below 2000 characters, all are ${langValue} language all in a json structure
+        // provide meta_title within 60 characters, meta_description within  160 characters, short_description within 280 characters in English, bengali and hindi all in a json structure
+        // provide meta_title within 60 characters, meta_description within  160 characters, short_description within 280 characters in English, bengali, hindi, Mandarin,  Spanish,  Portuguese, Russian, French, all in a json structure
+    }
+
+    function submitNewsPara(event) {
+        event.preventDefault();
+        let genButton = document.getElementById('genButton');
+        let langInput = document.getElementById('language');
+        let loadSection = document.getElementById('loadingSection');
+        let newsData = document.getElementById('newsPara');
+        let formData = new FormData(newsData);
+        fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/multi-lang/`, {
+            method: 'POST',
+            body: formData,
+        })
+        .then(data => data.json())
+        .then(data => {
+            // if (data === 200) {
+            //     counter++;
+            // } else {
+                // formSection genButton brightness-50
+                console.log(data)
+            // }
+            let newsData = data.choices[0].message.content;
+            let jsonObject = JSON.parse(newsData);
+            // Sample array
+
+            // Using forEach to log each element
+            // jsonObject.forEach(function(arrayData) {
+            //     console.log('Array Data', arrayData);
+            // });
+
+            // console.log(jsonObject.en)
+            // console.log(jsonObject.bn)
+            
+            // document.getElementById('title').value = jsonObject.title;
+            // document.getElementById('slug').value = jsonObject.title;
+            // document.getElementById('heading').value = jsonObject.heading;
+            // document.getElementById('meta_title').value = jsonObject.meta_title;
+            // document.getElementById('meta_description').value = jsonObject.meta_description;
+            // document.getElementById('in_brief').value = jsonObject.short_description;
+            // document.getElementById('content').value = jsonObject.long_description;
+        })  
+        .catch(error => {
+            console.error('Error occurred', error);
+        });
+    }
+    function slugify(text) {
+        return text.toString().toLowerCase()
+            .replace(/\s+/g, '-')        // Replace spaces with -
+            .replace(/[^\w-]+/g, '')     // Remove all non-word characters
+            .replace(/--+/g, '-')        // Replace multiple - with single -
+            .replace(/^-+/, '')          // Trim - from start of text
+            .replace(/-+$/, '');         // Trim - from end of text
+    }
+
+    function updateSlug() {
+        const titleInput = document.getElementById('slug');
+        const slugInput = document.getElementById('slug');
+        const titleValue = titleInput.value;
+        slugInput.value = slugify(titleValue);
+    }
+
+    function callApi(event) {
+        event.preventDefault();
+        let slugValue = document.getElementById('slug').value;
+        let newsData = document.getElementById('newsForm');
+        let formData = new FormData(newsData);
+        fetch(`https://apisp.dev2.cicdhosting.com/news/add-news/?action=save`, {
+            method: 'POST',
+            body: formData,
+        })
+        .then(data => data.json())
+        .then(data => {
+            if (data.success === true) {
+                window.location.href= `/add-file?slug=${slugValue}`
+                // console.log(slugValue)
+                console.log('Form Data Submitted Successfully');
+            } else {
+                console.log('Data Submit Failed');
+            }
+            console.log(data);
+        })
+        .catch(error => {
+            console.error('Error occurred', error);
+        });
+    }
+</script>
+<style>
+    #loadingSection{
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    .load-aimate{
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        border-left: 5px solid #580a0a;
+        border-right: 5px solid #580a0a;
+        border-bottom: 5px solid #580a0a;
+        border-top: 5px solid #FFFFFF;
+        background-color: #FFFFFF;
+    }
+</style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 232fe62..855f9a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1126,6 +1126,27 @@
     "@babel/helper-validator-identifier" "^7.22.5"
     to-fast-properties "^2.0.0"
 
+"@bytescale/sdk@^3.27.0":
+  version "3.30.0"
+  resolved "https://registry.yarnpkg.com/@bytescale/sdk/-/sdk-3.30.0.tgz#60ccc6313462c1e1806c49d7e4405944cce69da6"
+  integrity sha512-VCV4MrK5Ig7tjeWc5RKwfd9Zg6ihDv0Y1buctEg/FfY8nly15/bpFMhFDw50PzR3FuCmg7RprMQ76rj8G3iWCw==
+
+"@bytescale/upload-widget-vue@^4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@bytescale/upload-widget-vue/-/upload-widget-vue-4.13.0.tgz#ce733f2938cbaf27de1545c0aee0cedad65527d5"
+  integrity sha512-CT/P72NahAnwVwzQi6gAuA5DlKmKV/+j4H4aypaoisdYI1ukH3OYrEKv4Vl52lHZ8PgfFDUqopXrC6PzrkDtNA==
+  dependencies:
+    "@bytescale/upload-widget" "^4.23.0"
+
+"@bytescale/upload-widget@^4.23.0":
+  version "4.23.0"
+  resolved "https://registry.yarnpkg.com/@bytescale/upload-widget/-/upload-widget-4.23.0.tgz#b662bba1fb21f39b0a6f927a263ad41dab6c629d"
+  integrity sha512-gG1JPGcAynn6y0XEbeFNk+7qYcMwQ7qmSvxwp+NEEpf9W12hkSGfoRulKtSKVf38oSmSag2Dks30PfEKiUnW7w==
+  dependencies:
+    "@bytescale/sdk" "^3.27.0"
+    classnames "^2.2.6"
+    preact "^10.6.5"
+
 "@emmetio/abbreviation@^2.3.3":
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/@emmetio/abbreviation/-/abbreviation-2.3.3.tgz#ed2b88fe37b972292d6026c7c540aaf887cecb6e"
@@ -1536,6 +1557,18 @@
     "@typescript-eslint/types" "5.61.0"
     eslint-visitor-keys "^3.3.0"
 
+"@upload-io/upload-api-client-upload-js@^2.18.0":
+  version "2.18.0"
+  resolved "https://registry.yarnpkg.com/@upload-io/upload-api-client-upload-js/-/upload-api-client-upload-js-2.18.0.tgz#948cf288ace5ef22a152b37096335fda2ef7cc5c"
+  integrity sha512-yPwsRCecXSilYn4q5ZDD4fyI2PVyUcLimv2LQcfpV3hRyzc8t82NuWHYEYpRZa5K68zxw2RljDf30geT1vJN9g==
+
+"@upload-io/vue-uploader@^3.37.1":
+  version "3.37.1"
+  resolved "https://registry.yarnpkg.com/@upload-io/vue-uploader/-/vue-uploader-3.37.1.tgz#ba3cca104b89c71bbf9ea45e421eb2293554633f"
+  integrity sha512-iY6tUGCoOxHsKg5myeXB38rLKpIU5F1awW4gw9ze6p6ne4GHI5M77AhHShjPEa2zylQh6wzny7F0AU4cfiRA+w==
+  dependencies:
+    uploader "^3.47.0"
+
 "@vitejs/plugin-vue-jsx@^2.0.1":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-2.1.1.tgz#7c13aa4e54f5ee8c9f37937b3d8c706c14369478"
@@ -2150,6 +2183,11 @@ ci-info@^3.3.1:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.8.0.tgz#81408265a5380c929f0bc665d62256628ce9ef91"
   integrity sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==
 
+classnames@^2.2.6:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 cli-boxes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-3.0.0.tgz#71a10c716feeba005e4504f36329ef0b17cf3145"
@@ -4762,6 +4800,11 @@ postcss@^8.1.10, postcss@^8.4.14, postcss@^8.4.18, postcss@^8.4.23:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+preact@^10.6.5:
+  version "10.19.3"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.3.tgz#7a7107ed2598a60676c943709ea3efb8aaafa899"
+  integrity sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ==
+
 preferred-pm@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/preferred-pm/-/preferred-pm-3.0.3.tgz#1b6338000371e3edbce52ef2e4f65eb2e73586d6"
@@ -4807,6 +4850,11 @@ prismjs@^1.28.0:
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
   integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
 
+progress-smoother@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/progress-smoother/-/progress-smoother-1.7.0.tgz#77a5d77b19ce55ef81fdf02007ba6213df08ee5e"
+  integrity sha512-ZIbSbPQ8SnEf5Sa0If9lfvn5URyrZfgTTh5DM+04j1GafiLIaWDWW+1AkYXzGl7JQvzAvCy5E1ZPOgx8XORyew==
+
 prompts@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
@@ -5846,6 +5894,23 @@ update-browserslist-db@^1.0.11:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+upload-js@^2.22.0:
+  version "2.24.3"
+  resolved "https://registry.yarnpkg.com/upload-js/-/upload-js-2.24.3.tgz#cf18a2d4f726d247380d5b89b336a0c8b28f3e92"
+  integrity sha512-iiTowtr2uRw2coGXlqiN1ff/wfMPVMv2MqaZYqEYBSNGmxD1pLl9R9wU8BT/mK+Yn8fDx7utlPovXziS8PVaIA==
+  dependencies:
+    "@upload-io/upload-api-client-upload-js" "^2.18.0"
+    progress-smoother "^1.7.0"
+
+uploader@^3.47.0:
+  version "3.48.3"
+  resolved "https://registry.yarnpkg.com/uploader/-/uploader-3.48.3.tgz#5b7f8c57ff115e42ab66d9aed68b1c7f2a544f1a"
+  integrity sha512-BGXSS9O54m81TL5Ogn4OHISD/WPuIS3kvNCYomDl8cltPGzUMrHseU1sXHKGrFg65L28qJL6LnGA2fXUxpQVBQ==
+  dependencies:
+    classnames "^2.2.6"
+    preact "^10.6.5"
+    upload-js "^2.22.0"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"