diff --git a/component/layout/EventLayouts/EventFeatured.jsx b/component/layout/EventLayouts/EventFeatured.jsx
index 2a0e04ef..af78cdc8 100644
--- a/component/layout/EventLayouts/EventFeatured.jsx
+++ b/component/layout/EventLayouts/EventFeatured.jsx
@@ -12,7 +12,7 @@ export default function EventFeatured({ event }) {
         <div className="container container--small md:flex">
           <div className="md:w-1/3 md:pr-6">
             <Fade>
-              <Link href={`/events/${event?.id}`}>
+              <Link href={`/e/${event?.slug}`}>
                 <a>
                   <figure>
                     {event.banner_image && (
@@ -41,7 +41,7 @@ export default function EventFeatured({ event }) {
           <Fade>
             <div className={`${styles.text} md:w-2/3 md:pl-6`}>
               <h3>
-                <Link href={`/events/${event?.id}`}>
+                <Link href={`/e/${event?.slug}`}>
                   <a>{event?.title}</a>
                 </Link>
               </h3>
diff --git a/component/layout/EventLayouts/EventItems.jsx b/component/layout/EventLayouts/EventItems.jsx
index 1635d3bc..1ee7addc 100644
--- a/component/layout/EventLayouts/EventItems.jsx
+++ b/component/layout/EventLayouts/EventItems.jsx
@@ -8,7 +8,7 @@ export default function EventItems({ events }) {
   return events.map((item, key) => (
     <div className={styles.listing__item} key={"Event_Item_" + key}>
       <Fade>
-        <a href={`/events/${item.id}`}>
+        <a href={`/e/${item.slug}`}>
           {item.banner_image && (
             <figure className={styles.listing__figure}>
               <Image
@@ -35,7 +35,7 @@ export default function EventItems({ events }) {
       </Fade>
       <div>
         <h3>
-          <Link href={`/events/${item.id}`}>
+          <Link href={`/e/${item.slug}`}>
             <a>{item.title}</a>
           </Link>
         </h3>
diff --git a/component/loader/Loader.module.css b/component/loader/Loader.module.css
new file mode 100644
index 00000000..e69de29b
diff --git a/config/config.js b/config/config.js
index 0fbdb27c..17bd87fd 100644
--- a/config/config.js
+++ b/config/config.js
@@ -14,6 +14,7 @@ const allPostsUrl = "api/posts";
 const postUser = `${apiVerUrl}/posts-by-user`;
 const eventsUrl = `${apiVerUrl}/events`;
 const eventIdUrl = `${apiVerUrl}/event`;
+const eventSlugUrl = `${apiVerUrl}/event-by-slug`;
 const createEventUrl = `${apiVerUrl}/admin/event`;
 const changeStatusUrl = "api/user/post";
 const subscribeUrl = "api/subscribe";
@@ -44,6 +45,7 @@ const getVoteTypeUrl = `${apiVerUrl}/post-vote-by-user`;
 
 const configVars = {
   baseUrl,
+  eventSlugUrl,
   getVoteTypeUrl,
   emailTokenUrl,
   postCount,
diff --git a/pages/events/[event_id].js b/pages/e/[event_slug].js
similarity index 93%
rename from pages/events/[event_id].js
rename to pages/e/[event_slug].js
index 739999fd..a90bce6c 100644
--- a/pages/events/[event_id].js
+++ b/pages/e/[event_slug].js
@@ -13,8 +13,8 @@ import { useEffect, useState } from "react";
 
 export async function getServerSideProps(context) {
   try {
-    const eid = context.params.event_id;
-    const response = await EventService.getEventById(eid);
+    const slug = context.params.event_slug;
+    const response = await EventService.getEventBySlug(slug);
     if (!response?.data) {
       return {
         redirect: {
@@ -57,6 +57,7 @@ export default function BlogListing({ event }) {
     description,
     location,
     primary_tag,
+    slug,
     event_time
   } = event;
   const cookies = new Cookies();
@@ -113,11 +114,11 @@ export default function BlogListing({ event }) {
         ></script>
         <title>{meta_title}</title>
         <meta name="description" content={description} />
-        <link rel="canonical" href={`${url}/events/${id}`} />
+        <link rel="canonical" href={`${url}/e/${slug}`} />
         <meta property="og:type" content="events.event" />
         <meta property="og:title" content={meta_title} />
         <meta property="og:description" content={description} />
-        <meta property="og:url" content={`${url}/events/${id}`} />
+        <meta property="og:url" content={`${url}/e/${slug}`} />
         <meta property="og:image" content={banner_image} />
         <meta property="event:start_time" content={event_time} />
         <meta
@@ -127,7 +128,7 @@ export default function BlogListing({ event }) {
         <meta name="twitter:card" content={"summary_large_image"} />
         <meta name="twitter:title" content={meta_title} />
         <meta name="twitter:description" content={description} />
-        <meta name="twitter:url" content={`${url}/events/${id}`} />
+        <meta name="twitter:url" content={`${url}/e/${slug}`} />
         <meta name="twitter:image" content={banner_image} />
         <meta name="twitter:label1" content="Taken By" />
         <meta name="twitter:data1" content={guest_name} />
diff --git a/services/EventService.js b/services/EventService.js
index ba4d9d61..514e2046 100644
--- a/services/EventService.js
+++ b/services/EventService.js
@@ -3,12 +3,14 @@ import {
   baseUrl,
   eventsUrl,
   eventIdUrl,
-  createEventUrl
+  createEventUrl,
+  eventSlugUrl
 } from "../config/config";
-import {getImageUrl} from '../pages/admin/events/create-event'
+import { getImageUrl } from "../pages/admin/events/create-event";
 import { getUrl } from "../lib/getUrl";
-async function getLatestEvents(reqParams) {
 
+
+async function getLatestEvents(reqParams) {
   let url = getUrl();
   try {
     const res = await axios.get(`${url}/${eventsUrl}`, {
@@ -19,15 +21,16 @@ async function getLatestEvents(reqParams) {
     throw err;
   }
 }
-async function getAllEvents(){
-  try{
-    const {data} = await axios.get(`${baseUrl}/api/v1/events`);
+
+async function getAllEvents() {
+  try {
+    const { data } = await axios.get(`${baseUrl}/api/v1/events`);
     return data;
-  }
-  catch(err){
-    throw err
+  } catch (err) {
+    throw err;
   }
 }
+
 async function getEventById(eventId) {
   try {
     const { data } = await axios.get(`${baseUrl}/${eventIdUrl}/${eventId}`);
@@ -37,105 +40,131 @@ async function getEventById(eventId) {
   }
 }
 
+async function getEventBySlug(slug) {
+  try {
+    const { data } = await axios.get(`${baseUrl}/${eventSlugUrl}/${slug}`);
+    console.log(data);
+    return data;
+  } catch (err) {
+    console.log(err);
+    throw err;
+  }
+}
 
 async function createNewEvent(userCookie, eventData) {
   try {
-    let response = await axios.post(`${baseUrl}/${createEventUrl}` , {
+    let response = await axios.post(`${baseUrl}/${createEventUrl}`, {
       guest_name: eventData.guest_name,
       guest_designation: eventData.guest_designation,
       title: eventData.title,
-      location : eventData.location,
+      location: eventData.location,
       registration_link: eventData.registration_link,
       description: eventData.description,
       event_time: eventData.event_time
-    })
-    if(response){
-      const res = await getImageUrl(eventData , response.data.data.id)
-      response = await updateEvent(response.data.data.id , {
-        guest_image : res[0],
-        banner_image : res[1]
-      })
-      return response
+    });
+    if (response) {
+      const res = await getImageUrl(eventData, response.data.data.id);
+      response = await updateEvent(response.data.data.id, {
+        guest_image: res[0],
+        banner_image: res[1]
+      });
+      return response;
     }
   } catch (err) {
     throw err;
   }
 }
 
-async function deleteEvent(eventId){
-  try{
-    const {data} = await axios.delete(`${baseUrl}/api/v1/admin/event/${eventId}`)
-    return data
-  }catch(err){
+async function deleteEvent(eventId) {
+  try {
+    const { data } = await axios.delete(
+      `${baseUrl}/api/v1/admin/event/${eventId}`
+    );
+    return data;
+  } catch (err) {
     throw err;
   }
 }
-async function getEventByStatus(req){
-  try{
-      const {data} = await axios.get(`${baseUrl}/v1/events?status=${req.status}`)
-      return data
-  }
-  catch(err){
+
+async function getEventByStatus(req) {
+  try {
+    const { data } = await axios.get(
+      `${baseUrl}/v1/events?status=${req.status}`
+    );
+    return data;
+  } catch (err) {
     throw err;
   }
 }
 
 async function updateEvent(eventId, updatedData) {
-  console.log(updatedData)
-  if(updatedData?.guest_name){
+  console.log(updatedData);
+  if (updatedData?.guest_name) {
     try {
-      const res = await getImageUrl(updatedData , eventId)
-      if(res) {
-        console.log(res)
-        if(typeof res === 'object' && !res.url){
-        const response = await axios.put(`${baseUrl}/${createEventUrl}/${eventId}`,{...updatedData , guest_image : res[0] , banner_image : res[1]})
-        if(response){
-          return response
-        }
-      }
-      else if(res.type === 'guest'){
-        const response = await axios.put(`${baseUrl}/${createEventUrl}/${eventId}`,{...updatedData , guest_image : res.url })
-        if(response){
-          return response
+      const res = await getImageUrl(updatedData, eventId);
+      if (res) {
+        console.log(res);
+        if (typeof res === "object" && !res.url) {
+          const response = await axios.put(
+            `${baseUrl}/${createEventUrl}/${eventId}`,
+            { ...updatedData, guest_image: res[0], banner_image: res[1] }
+          );
+          if (response) {
+            return response;
+          }
+        } else if (res.type === "guest") {
+          const response = await axios.put(
+            `${baseUrl}/${createEventUrl}/${eventId}`,
+            { ...updatedData, guest_image: res.url }
+          );
+          if (response) {
+            return response;
+          }
+        } else if (res.type === "banner") {
+          const response = await axios.put(
+            `${baseUrl}/${createEventUrl}/${eventId}`,
+            { ...updatedData, banner_image: res.url }
+          );
+          if (response) {
+            return response;
+          }
         }
-      }
-      else if(res.type === 'banner'){
-        const response = await axios.put(`${baseUrl}/${createEventUrl}/${eventId}`,{...updatedData , banner_image : res.url })
-        if(response){
-          return response
-        }
-      }
-      }
-      else {
+      } else {
         try {
-         const response = await axios.put(`${baseUrl}/${createEventUrl}/${eventId}`, updatedData)
-         console.log(response)
-         if(response){
-           return response
-         }
+          const response = await axios.put(
+            `${baseUrl}/${createEventUrl}/${eventId}`,
+            updatedData
+          );
+          console.log(response);
+          if (response) {
+            return response;
+          }
         } catch (error) {
-          throw error
+          throw error;
         }
       }
     } catch (err) {
       throw err;
     }
-  }
- else {
-   try {
-    const response = await axios.put(`${baseUrl}/${createEventUrl}/${eventId}`, updatedData)
-    if(response){
-      return response
+  } else {
+    try {
+      const response = await axios.put(
+        `${baseUrl}/${createEventUrl}/${eventId}`,
+        updatedData
+      );
+      if (response) {
+        return response;
+      }
+    } catch (error) {
+      throw error;
     }
-   } catch (error) {
-     throw error
-   }
- }
+  }
 }
 
 const EventService = {
   getLatestEvents,
   getEventById,
+  getEventBySlug,
   createNewEvent,
   getAllEvents,
   deleteEvent,
@@ -143,4 +172,4 @@ const EventService = {
   updateEvent
 };
 
-export default EventService
+export default EventService;