diff --git a/lib/Code.gs b/lib/Code.gs
index 15d7249..a5aad98 100644
--- a/lib/Code.gs
+++ b/lib/Code.gs
@@ -1,5 +1,5 @@
 function doGet() {
-  return HtmlService.createHtmlOutputFromFile("index");
+  return HtmlService.createHtmlOutputFromFile("index1");
 }
 
 var generatedUrls = [];
@@ -10,8 +10,6 @@ PRESENTATION_ID = "ENTER_YOUR_PRESENTATION_ID";
 OPENAI_KEY = "Bearer ENTER_YOUR_OPENAI_KEY";
 BING_API_KEY = "ENTER_YOUR_BING_SEARCH_API_KEY";
 
-
-
 //Creating a new presentation
 function createPresentation() {
   try {
@@ -51,7 +49,6 @@ function runn(
   institute_logo,
   occasion
 ) {
-
   //deleteAllSlides(PRESENTATION_ID);
   // const PRESENTATION_ID = createPresentation();
   // console.log(generateSlidesLink(PRESENTATION_ID));
@@ -537,8 +534,7 @@ function getInfo(prompt) {
       method: "post",
       headers: {
         "Content-Type": "application/json",
-        Authorization:
-          OPENAI_KEY,
+        Authorization: OPENAI_KEY,
       },
       payload: JSON.stringify({
         prompt: prompt,
@@ -687,10 +683,7 @@ function fetchImageUrl(image_text) {
   //     keywords = getInfoHigh(prompt);
   //     generatedUrls.push(keywords);
   // }
-  image_url = getImageUrlByKeywords(
-    image_text,
-    BING_API_KEY
-  );
+  image_url = getImageUrlByKeywords(image_text, BING_API_KEY);
   console.log(image_url);
   return image_url;
 }
@@ -703,8 +696,7 @@ function getInfoHigh(prompt) {
       method: "post",
       headers: {
         "Content-Type": "application/json",
-        Authorization:
-          OPENAI_KEY,
+        Authorization: OPENAI_KEY,
       },
       payload: JSON.stringify({
         prompt: prompt,
@@ -777,10 +769,7 @@ function createSlide(presentationId, num) {
 }
 
 //Fetching image url from Bing API
-function getImageUrlByKeywords(
-  keywords,
-  apiKey = BING_API_KEY
-) {
+function getImageUrlByKeywords(keywords, apiKey = BING_API_KEY) {
   var query = encodeURIComponent(keywords);
   var url =
     "https://api.bing.microsoft.com/v7.0/images/search?q=" +
@@ -808,7 +797,7 @@ function getImageUrlByKeywords(
 function generateKeyWords(content) {
   jsonn = getInfo(
     "Understand and Generate 10 tools and computer technologies separated by comma related to the below project - " +
-    content
+      content
   );
   console.log(jsonn);
   list = csvToList(jsonn);
diff --git a/lib/index.html b/lib/index.html
index a132f76..27cfb8a 100644
--- a/lib/index.html
+++ b/lib/index.html
@@ -1,202 +1,244 @@
+<!-- Please choose one of the UI options , either UI one: index.html or UI option 2: index1.html.  -->
+
 <!DOCTYPE html>
 <html>
+  <head>
+    <title>SlidesAI</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script
+      src="https://kit.fontawesome.com/f8e49a6702.js"
+      crossorigin="anonymous"
+    ></script>
+    <base target="_top" />
 
-<head>
-  <title>SlidesAI</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <script src="https://kit.fontawesome.com/f8e49a6702.js" crossorigin="anonymous"></script>
-  <base target="_top" />
-
-  <style>
-    @keyframes fadeInAnimation {
-      0% {
-        opacity: 0;
-      }
+    <style>
+      @keyframes fadeInAnimation {
+        0% {
+          opacity: 0;
+        }
 
-      100% {
-        opacity: 1;
+        100% {
+          opacity: 1;
+        }
       }
-    }
 
-    body {
-      /* background-color: indianred; */
-      background: rgb(131, 58, 180);
-      background: linear-gradient(90deg,
+      body {
+        /* background-color: indianred; */
+        background: rgb(131, 58, 180);
+        background: linear-gradient(
+          90deg,
           rgba(131, 58, 180, 1) 18%,
           rgba(205, 92, 92, 1) 78%,
-          rgba(205, 92, 92, 1) 100%);
-    }
+          rgba(205, 92, 92, 1) 100%
+        );
+      }
 
-    .container {
-      align-items: center;
-      backdrop-filter: blur(16px) saturate(180%);
-      -webkit-backdrop-filter: blur(16px) saturate(180%);
-      background-color: rgba(89, 31, 50, 0.75);
-      border-radius: 12px;
-      border: 1px solid rgba(255, 255, 255, 0.125);
-    }
+      .container {
+        align-items: center;
+        backdrop-filter: blur(16px) saturate(180%);
+        -webkit-backdrop-filter: blur(16px) saturate(180%);
+        background-color: rgba(89, 31, 50, 0.75);
+        border-radius: 12px;
+        border: 1px solid rgba(255, 255, 255, 0.125);
+      }
 
-    .heading {
-      color: rgb(252, 226, 192);
-      transition: all 0.2s ease-in-out;
-      animation: fadeInAnimation;
-      animation-duration: 0.7s;
-      animation-delay: 0.3s;
-      animation-timing-function: ease-in-out;
-      animation-iteration-count: 1;
-      animation-fill-mode: both;
-    }
+      .heading {
+        color: rgb(252, 226, 192);
+        transition: all 0.2s ease-in-out;
+        animation: fadeInAnimation;
+        animation-duration: 0.7s;
+        animation-delay: 0.3s;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: 1;
+        animation-fill-mode: both;
+      }
 
-    input {
-      width: 80%;
-      margin: 2rem 0;
-    }
+      input {
+        width: 80%;
+        margin: 2rem 0;
+      }
 
-    #title {
-      transition: all 0.4s ease-in-out;
-      animation: fadeInAnimation;
-      animation-duration: 0.7s;
-      animation-delay: 0.9s;
-      animation-timing-function: ease-in-out;
-      animation-iteration-count: 1;
-      animation-fill-mode: both;
-    }
+      #title {
+        transition: all 0.4s ease-in-out;
+        animation: fadeInAnimation;
+        animation-duration: 0.7s;
+        animation-delay: 0.9s;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: 1;
+        animation-fill-mode: both;
+      }
 
-    #description {
-      transition: all 0.4s ease-in-out;
-      animation: fadeInAnimation;
-      animation-duration: 0.7s;
-      animation-delay: 1s;
-      animation-timing-function: ease-in-out;
-      animation-iteration-count: 1;
-      animation-fill-mode: both;
-    }
+      #description {
+        transition: all 0.4s ease-in-out;
+        animation: fadeInAnimation;
+        animation-duration: 0.7s;
+        animation-delay: 1s;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: 1;
+        animation-fill-mode: both;
+      }
 
-    #authors {
-      transition: all 0.4s ease-in-out;
-      animation: fadeInAnimation;
-      animation-duration: 0.7s;
-      animation-delay: 1.2s;
-      animation-timing-function: ease-in-out;
-      animation-iteration-count: 1;
-      animation-fill-mode: both;
-    }
+      #authors {
+        transition: all 0.4s ease-in-out;
+        animation: fadeInAnimation;
+        animation-duration: 0.7s;
+        animation-delay: 1.2s;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: 1;
+        animation-fill-mode: both;
+      }
 
-    #logo {
-      transition: all 0.4s ease-in-out;
-      animation: fadeInAnimation;
-      animation-duration: 0.7s;
-      animation-delay: 1.4s;
-      animation-timing-function: ease-in-out;
-      animation-iteration-count: 1;
-      animation-fill-mode: both;
-    }
+      #logo {
+        transition: all 0.4s ease-in-out;
+        animation: fadeInAnimation;
+        animation-duration: 0.7s;
+        animation-delay: 1.4s;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: 1;
+        animation-fill-mode: both;
+      }
 
-    #occasion {
-      transition: all 0.4s ease-in-out;
-      animation: fadeInAnimation;
-      animation-duration: 0.7s;
-      animation-delay: 1.6s;
-      animation-timing-function: ease-in-out;
-      animation-iteration-count: 1;
-      animation-fill-mode: both;
-    }
+      #occasion {
+        transition: all 0.4s ease-in-out;
+        animation: fadeInAnimation;
+        animation-duration: 0.7s;
+        animation-delay: 1.6s;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: 1;
+        animation-fill-mode: both;
+      }
 
-    #color {
-      transition: all 0.4s ease-in-out;
-      animation: fadeInAnimation;
-      animation-duration: 0.7s;
-      animation-delay: 1.8s;
-      animation-timing-function: ease-in-out;
-      animation-iteration-count: 1;
-      animation-fill-mode: both;
-    }
+      #color {
+        transition: all 0.4s ease-in-out;
+        animation: fadeInAnimation;
+        animation-duration: 0.7s;
+        animation-delay: 1.8s;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: 1;
+        animation-fill-mode: both;
+      }
 
-    button {
-      transition: all 0.4s ease-in-out;
-      animation: fadeInAnimation;
-      animation-duration: 0.7s;
-      animation-delay: 2s;
-      animation-timing-function: ease-in-out;
-      animation-iteration-count: 1;
-      animation-fill-mode: both;
-      width: 85%;
-      padding: 10px;
-      border: none;
-      border-radius: 5px;
-      outline: none;
-      background-color: rgb(56, 56, 56);
-      color: white;
-      font-family: "Poppins";
-      font-size: medium;
-      margin: 2rem 0;
-    }
+      button {
+        transition: all 0.4s ease-in-out;
+        animation: fadeInAnimation;
+        animation-duration: 0.7s;
+        animation-delay: 2s;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: 1;
+        animation-fill-mode: both;
+        width: 85%;
+        padding: 10px;
+        border: none;
+        border-radius: 5px;
+        outline: none;
+        background-color: rgb(56, 56, 56);
+        color: white;
+        font-family: "Poppins";
+        font-size: medium;
+        margin: 2rem 0;
+      }
 
-    button:hover {
-      width: 90%;
-      color: rgb(255, 255, 255);
-      font-size: large;
-      background: rgb(32, 156, 140);
-      background: linear-gradient(90deg,
+      button:hover {
+        width: 90%;
+        color: rgb(255, 255, 255);
+        font-size: large;
+        background: rgb(32, 156, 140);
+        background: linear-gradient(
+          90deg,
           rgb(60, 136, 139) 23%,
           rgb(63, 93, 154) 55%,
-          rgb(43, 131, 148) 100%);
-    }
-  </style>
-</head>
+          rgb(43, 131, 148) 100%
+        );
+      }
+    </style>
+  </head>
 
-<body style="
+  <body
+    style="
       display: flex;
       justify-content: center;
       align-items: center;
       font-family: 'Poppins';
       padding-top: 6%;
-    ">
-  <div class="container" style="display: flex; flex-direction: column; width: 50%">
-    <p class="heading" style="text-align: center; font-size: xx-large">
-      SlideAI: Automatic PPT Generator
-    </p>
-    <input type="text" id="title" placeholder="Enter Project Title" style="
+    "
+  >
+    <div
+      class="container"
+      style="display: flex; flex-direction: column; width: 50%"
+    >
+      <p class="heading" style="text-align: center; font-size: xx-large">
+        SlideAI: Automatic PPT Generator
+      </p>
+      <input
+        type="text"
+        id="title"
+        placeholder="Enter Project Title"
+        style="
           display: flex;
           align-items: center;
           padding: 10px 15px;
           border-radius: 5px;
           border: 1px solid rgba(0, 0, 0, 0.1);
           margin: 5px 0px;
-        " />
-    <input type="text" id="description" placeholder="Enter Project Description" style="
+        "
+      />
+      <input
+        type="text"
+        id="description"
+        placeholder="Enter Project Description"
+        style="
           display: flex;
           align-items: center;
           padding: 10px 15px;
           border-radius: 5px;
           border: 1px solid rgba(0, 0, 0, 0.1);
           margin: 5px 0px;
-        " />
-    <input type="text" id="authors" placeholder="Enter Authors Name" style="
+        "
+      />
+      <input
+        type="text"
+        id="authors"
+        placeholder="Enter Authors Name"
+        style="
           display: flex;
           align-items: center;
           padding: 10px 15px;
           border-radius: 5px;
           border: 1px solid rgba(0, 0, 0, 0.1);
           margin: 5px 0px;
-        " />
-    <input type="text" id="logo" placeholder="Enter Institute Logo" style="
+        "
+      />
+      <input
+        type="text"
+        id="logo"
+        placeholder="Enter Institute Logo"
+        style="
           display: flex;
           align-items: center;
           padding: 10px 15px;
           border-radius: 5px;
           border: 1px solid rgba(0, 0, 0, 0.1);
           margin: 5px 0px;
-        " />
-    <input type="text" id="occasion" placeholder="Enter Occasion" style="
+        "
+      />
+      <input
+        type="text"
+        id="occasion"
+        placeholder="Enter Occasion"
+        style="
           display: flex;
           align-items: center;
           padding: 10px 15px;
           border-radius: 5px;
           border: 1px solid rgba(0, 0, 0, 0.1);
           margin: 5px 0px;
-        " />
-    <input type="color" id="color" placeholder="Enter Theme Color" style="
+        "
+      />
+      <input
+        type="color"
+        id="color"
+        placeholder="Enter Theme Color"
+        style="
           width: 85%;
           height: 50px;
           display: flex;
@@ -205,9 +247,10 @@
           border-radius: 5px;
           border: 1px solid rgba(0, 0, 0, 0.1);
           margin: 5px 0px;
-        " />
+        "
+      />
 
-    <!-- <button id="addTextBtn" style="
+      <!-- <button id="addTextBtn" style="
           width: 90%;
           padding: 10px;
           border: none;
@@ -220,42 +263,43 @@
         " type="button">
       Generate Presentation
     </button> -->
-    <button id="addTextBtn" style="font-family: 'Poppins';" type="submit">Generate Presentation</button>
-  </div>
-
-  <script>
-    document
-      .getElementById("addTextBtn")
-      .addEventListener("click", function () {
-        console.log("Button clicked!");
-        google.script.run.runn(
-          document.getElementById("title").value,
-          document.getElementById("description").value,
-          document.getElementById("color").value,
-          document.getElementById("authors").value,
-          document.getElementById("logo").value,
-          document.getElementById("occasion").value
-        );
-        alert("Your Presentation is being generated...");
-        // scheduleDownload();
-        document.getElementById("title").value = "";
-        document.getElementById("description").value = "";
-        document.getElementById("color").value = "";
-        document.getElementById("logo").value = "";
-        document.getElementById("occasion").value = "";
-        document.getElementById("authors").value = "";
-      });
+      <button id="addTextBtn" style="font-family: 'Poppins'" type="submit">
+        Generate Presentation
+      </button>
+    </div>
 
-    function scheduleDownload() {
-      setTimeout(downloadSlides, 45000);
-    }
+    <script>
+      document
+        .getElementById("addTextBtn")
+        .addEventListener("click", function () {
+          console.log("Button clicked!");
+          google.script.run.runn(
+            document.getElementById("title").value,
+            document.getElementById("description").value,
+            document.getElementById("color").value,
+            document.getElementById("authors").value,
+            document.getElementById("logo").value,
+            document.getElementById("occasion").value
+          );
+          alert("Your Presentation is being generated...");
+          // scheduleDownload();
+          document.getElementById("title").value = "";
+          document.getElementById("description").value = "";
+          document.getElementById("color").value = "";
+          document.getElementById("logo").value = "";
+          document.getElementById("occasion").value = "";
+          document.getElementById("authors").value = "";
+        });
 
-    function downloadSlides() {
-      const downloadLink =
-        "https://docs.google.com/presentation/d/1ROXSzo28oiI8c6SSvsa1GXGruDkps9KpqlnoMqPLcQo/export/pptx";
-      window.location.href = downloadLink;
-    }
-  </script>
-</body>
+      function scheduleDownload() {
+        setTimeout(downloadSlides, 45000);
+      }
 
-</html>
\ No newline at end of file
+      function downloadSlides() {
+        const downloadLink =
+          "https://docs.google.com/presentation/d/1ROXSzo28oiI8c6SSvsa1GXGruDkps9KpqlnoMqPLcQo/export/pptx";
+        window.location.href = downloadLink;
+      }
+    </script>
+  </body>
+</html>
diff --git a/lib/index1.html b/lib/index1.html
new file mode 100644
index 0000000..9d51882
--- /dev/null
+++ b/lib/index1.html
@@ -0,0 +1,199 @@
+<!-- Please choose one of the UI options , either UI one: index.html or UI option 2: index1.html.  -->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>SlidesAI</title>
+    <script
+      src="https://kit.fontawesome.com/f8e49a6702.js"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <style>
+      /* Variable declarations */
+      :root {
+        --bg: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/image-from-rawpixel-id-2210775-jpeg.jpg");
+        --form-bg: #f8f4e5;
+        --form-shadow: #ffa580;
+        --form-primary-highlight: #95a4ff;
+        --form-secondary-highlight: #ffc8ff;
+        --font-size: 14pt;
+        --font-face: "Fjalla One";
+        --font-color: #2a293e;
+      }
+
+      /* Global styles */
+      * {
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        background: var(--bg) center center no-repeat;
+        background-size: cover;
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .container {
+        background: rgba(0, 0, 0, 0.5);
+        padding: 20px;
+        border-radius: 10px;
+      }
+
+      .contact-us {
+        background: var(--form-bg);
+        padding: 50px 100px;
+        border: 2px solid rgba(0, 0, 0, 1);
+        box-shadow: 15px 15px 1px var(--form-shadow),
+          15px 15px 1px 2px rgba(0, 0, 0, 1);
+        width: 500px;
+        height: 550px;
+      }
+
+      h2 {
+        font-family: var(--font-face);
+        font-size: 24pt;
+        color: var(--font-color);
+        margin-bottom: 5%;
+      }
+
+      @keyframes typewriter {
+        from {
+          width: 0;
+        }
+        to {
+          width: 100%;
+        }
+      }
+
+      .input__box {
+        margin-bottom: calc(var(--font-size) * 2);
+      }
+
+      input {
+        display: block;
+        width: 100%;
+        font-size: var(--font-size);
+        line-height: calc(var(--font-size) * 2);
+        font-family: var(--font-face);
+        margin-bottom: calc(var(--font-size) * 2);
+        border: none;
+        border-bottom: 5px solid rgba(0, 0, 0, 1);
+        background: var(--form-bg);
+        min-width: 250px;
+        padding-left: 5px;
+        outline: none;
+        color: rgba(0, 0, 0, 1);
+      }
+
+      input:focus {
+        border-bottom: 5px solid var(--form-shadow);
+      }
+
+      button {
+        display: block;
+        margin: 0 auto;
+        line-height: calc(var(--font-size) * 2);
+        padding: 0 20px;
+        background: var(--form-shadow);
+        letter-spacing: 2px;
+        transition: 0.2s all ease-in-out;
+        outline: none;
+        border: 1px solid rgba(0, 0, 0, 1);
+        box-shadow: 3px 3px 1px 1px var(--form-primary-highlight),
+          3px 3px 1px 2px rgba(0, 0, 0, 1);
+      }
+
+      button:hover {
+        background: rgba(0, 0, 0, 1);
+        color: white;
+        border: 1px solid rgba(0, 0, 0, 1);
+      }
+
+      ::selection {
+        background: var(--form-secondary-highlight);
+      }
+
+      input:-webkit-autofill,
+      input:-webkit-autofill:hover,
+      input:-webkit-autofill:focus {
+        border-bottom: 5px solid var(--form-primary-highlight);
+        -webkit-text-fill-color: var(--font-color);
+        -webkit-box-shadow: 0 0 0px 1000px var(--form-bg) inset;
+        transition: background-color 5000s ease-in-out 0s;
+      }
+    </style>
+    <base target="_top" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="contact-us">
+        <h2>SlideAI: Automatic PPT Generator</h2>
+
+        <div class="input__box">
+          <input type="text" id="title" placeholder="Enter Project Title" />
+        </div>
+        <div class="input__box">
+          <input
+            type="text"
+            id="description"
+            placeholder="Enter Project Description"
+          />
+        </div>
+        <div class="input__box">
+          <input type="text" id="authors" placeholder="Enter Authors Name" />
+        </div>
+        <div class="input__box">
+          <input type="text" id="logo" placeholder="Enter Institute Logo" />
+        </div>
+        <div class="input__box">
+          <input type="text" id="occasion" placeholder="Enter Occasion" />
+        </div>
+        <div class="input__box">
+          <input type="color" id="color" placeholder="Enter Theme Color" />
+        </div>
+        <div class="input__box">
+          <button id="addTextBtn">Generate Presentation</button>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      document
+        .getElementById("addTextBtn")
+        .addEventListener("click", function () {
+          console.log("Button clicked!");
+          google.script.run.runn(
+            document.getElementById("title").value,
+            document.getElementById("description").value,
+            document.getElementById("color").value,
+            document.getElementById("authors").value,
+            document.getElementById("logo").value,
+            document.getElementById("occasion").value
+          );
+          alert("Your Presentation is being generated...");
+          // scheduleDownload();
+          document.getElementById("title").value = "";
+          document.getElementById("description").value = "";
+          document.getElementById("color").value = "";
+          document.getElementById("logo").value = "";
+          document.getElementById("occasion").value = "";
+          document.getElementById("authors").value = "";
+        });
+
+      function scheduleDownload() {
+        setTimeout(downloadSlides, 45000);
+      }
+
+      function downloadSlides() {
+        const downloadLink =
+          "https://docs.google.com/presentation/d/1ROXSzo28oiI8c6SSvsa1GXGruDkps9KpqlnoMqPLcQo/export/pptx";
+        window.location.href = downloadLink;
+      }
+    </script>
+  </body>
+</html>
