diff --git a/frontend/src/routes/create-goals/+page.svelte b/frontend/src/routes/create-goals/+page.svelte
index 49d79cbe..7f0353f8 100644
--- a/frontend/src/routes/create-goals/+page.svelte
+++ b/frontend/src/routes/create-goals/+page.svelte
@@ -17,7 +17,7 @@
   };
 
   let selectAll = false;
-  let loadingGenerate = false;
+
   let goalError = false;
 
   const toggleAll = () => {
@@ -49,17 +49,64 @@
       console.log(error);
     }
   }
+
+  let loadingGenerate = false;
+
+  function handleClick() {
+    loadingGenerate = true;
+
+    // Simulate an async operation
+    setTimeout(() => {
+      loadingGenerate = false;
+    }, 2000);
+  }
+
+  import { blur } from 'svelte/transition';
+  let isOpen = false;
+
+  function toggleDropdown() {
+    isOpen = !isOpen;
+  }
 </script>
 
 <div class="page-fade-in">
   <div class="container shadow-lg rounded-xl mb-4 mx-auto px-4 pt-5 md:max-w-xl lg:max-w-3xl z-10">
-    <div class="mb-5">
-      <label class="block text-xl rounded-xl font-bold mb-2" for="goal">Goal</label>
+    <div class="card w-full">
+      <div class="mb-5 flex items-center">
+        <!-- Flex container for alignment -->
+        <label class="block text-xl rounded-xl font-bold mb-2" for="goal">Goal</label>
+        <div class="dropdown dropdown-right">
+          <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              class="w-4 h-4 stroke-primary"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+          </button>
+          <div class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
+            <!-- Removed button tag wrapping div -->
+            <div class="card-body text-primary text-left">
+              <p>Toggle left to unsave.</p>
+              <p>Generate Button above to give you another suggestion.</p>
+              <p>Toggle Right to Save.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Flex container ends here -->
       <input
         class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
         id="goal"
         type="text"
-        placeholder="What's your SMART Goal? e.q. Exercise"
+        placeholder="What's your SMART Goal? e.g. Exercise"
         bind:value={goal.goal}
       />
       <ErrorMessage
@@ -69,7 +116,7 @@
       />
 
       <div class="mt-3 flex flex-col items-left">
-        <button id="generate" class="btn rounded-xl btn-primary">Generate</button>
+        <button id="generate" class="btn btn-primary" on:click={handleClick}>Generate</button>
         {#if loadingGenerate}
           <div class="mt-3 flex justify-center items-center">
             <span class="loading loading-infinity loading-md" />
@@ -79,320 +126,307 @@
     </div>
 
     <!-- Specific card -->
-    <div class="card w-full">
-      <figure>
-        <figcaption class="p-4 card-body flex flex-col">
-          <h2 class="card-title mb-2">Specific</h2>
-          <div class="flex flex-col md:flex-row w-full">
-            <input
-              id="specific"
-              class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
-              type="text"
-              placeholder="AchievAIm's Specific suggestion. e.g. 15 min daily exercise."
-              bind:value={goal.specific}
-            />
-            <label
-              class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
+    <div class="card w-full p-4 card-body flex flex-col">
+      <h2 class="card-title mb-2">Specific</h2>
+      <div class="flex flex-col md:flex-row w-full">
+        <input
+          id="specific"
+          class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+          type="text"
+          placeholder="AchievAIm's Specific suggestion. e.g. 15 min daily exercise."
+          bind:value={goal.specific}
+        />
+        <label
+          class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
+        >
+          <input type="checkbox" class="toggle toggle-primary" />
+          <div class="dropdown dropdown-end">
+            <button
+              tabindex="0"
+              class="btn btn-circle btn-ghost btn-xs text-info m-3"
+              on:click={toggleDropdown}
             >
-              <input type="checkbox" class="toggle toggle-primary" checked />
-              <div class="dropdown dropdown-end">
-                <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    class="w-4 h-4 stroke-current"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body text-left">
-                      <p>Toggle left to unsave.</p>
-                      <p>Generate Button above to give you another suggestion.</p>
-                      <p>Toggle Right to Save.</p>
-                    </div>
-                  </button>
-                </button>
-              </div>
-            </label>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                class="w-4 h-4 stroke-primary"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              {#if isOpen}
+                <div
+                  transition:blur
+                  class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64 absolute"
+                >
+                  <div class="card-body text-primary text-left">
+                    <p>Toggle left to unsave.</p>
+                    <p>Generate Button above to give you another suggestion.</p>
+                    <p>Toggle Right to Save.</p>
+                  </div>
+                </div>
+              {/if}
+            </button>
           </div>
-        </figcaption>
-      </figure>
+        </label>
+      </div>
     </div>
 
     <!-- Measurable card -->
-    <div class="card w-full">
-      <figure>
-        <figcaption class="p-4 card-body flex flex-col">
-          <h2 class="card-title mb-2">Measurable</h2>
-          <div class="flex flex-col md:flex-row w-full">
-            <input
-              id="measurable"
-              class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
-              type="text"
-              placeholder="AchievAIm's Measurable suggestion. e.q. Track consecutive days."
-              bind:value={goal.measurable}
-            />
-            <label
-              class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
-            >
-              <input type="checkbox" class="toggle toggle-primary" checked />
-              <div class="dropdown dropdown-end">
-                <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    class="w-4 h-4 stroke-current"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body text-left">
-                      <p>Toggle left to unsave.</p>
-                      <p>Generate Button above to give you another suggestion.</p>
-                      <p>Toggle Right to Save.</p>
-                    </div></button
-                  >
-                </button>
-              </div>
-            </label>
+    <div class="card w-full p-4 card-body flex flex-col">
+      <h2 class="card-title mb-2">Measurable</h2>
+      <div class="flex flex-col md:flex-row w-full">
+        <input
+          id="measurable"
+          class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+          type="text"
+          placeholder="AchievAIm's Measurable suggestion. e.q. Track consecutive days."
+          bind:value={goal.measurable}
+        />
+        <label
+          class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
+        >
+          <input type="checkbox" class="toggle toggle-primary" />
+          <div class="dropdown dropdown-end">
+            <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                class="w-4 h-4 stroke-primary"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
+                <div class="card-body text-primary text-left">
+                  <p>Toggle left to unsave.</p>
+                  <p>Generate Button above to give you another suggestion.</p>
+                  <p>Toggle Right to Save.</p>
+                </div>
+              </button>
+            </button>
           </div>
-        </figcaption>
-      </figure>
-    </div>
+        </label>
+      </div>
 
-    <!-- Attainable card -->
-    <div class="card w-full">
-      <figure>
-        <figcaption class="p-4 card-body flex flex-col">
-          <h2 class="card-title mb-2">Attainable</h2>
-          <div class="flex flex-col md:flex-row w-full">
-            <input
-              id="attainable"
-              class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
-              type="text"
-              placeholder="AchievAIm's Attainable suggestion. e.g. Find enjoyable activities."
-              bind:value={goal.attainable}
-            />
-            <label
-              class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
-            >
-              <input type="checkbox" class="toggle toggle-primary" checked />
-              <div class="dropdown dropdown-end">
-                <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    class="w-4 h-4 stroke-current"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body text-left">
-                      <p>Toggle left to unsave.</p>
-                      <p>Generate Button above to give you another suggestion.</p>
-                      <p>Toggle Right to Save.</p>
-                    </div>
-                  </button>
+      <!-- Attainable card -->
+      <div class="card w-full p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Attainable</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <input
+            id="attainable"
+            class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+            type="text"
+            placeholder="AchievAIm's Attainable suggestion. e.g. Find enjoyable activities."
+            bind:value={goal.attainable}
+          />
+          <label
+            class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
+          >
+            <input type="checkbox" class="toggle toggle-primary" />
+            <div class="dropdown dropdown-end">
+              <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  class="w-4 h-4 stroke-primary"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
+                  <div class="card-body text-primary text-left">
+                    <p>Toggle left to unsave.</p>
+                    <p>Generate Button above to give you another suggestion.</p>
+                    <p>Toggle Right to Save.</p>
+                  </div>
                 </button>
-              </div>
-            </label>
-          </div>
-        </figcaption>
-      </figure>
-    </div>
+              </button>
+            </div>
+          </label>
+        </div>
+      </div>
 
-    <!-- Relevant card -->
-    <div class="card w-full">
-      <figure>
-        <figcaption class="p-4 card-body flex flex-col">
-          <h2 class="card-title mb-2">Relevant</h2>
-          <div class="flex flex-col md:flex-row w-full">
-            <input
-              id="relevant"
-              class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
-              type="text"
-              placeholder="AchievAIm's Relevant suggestion. e.g. Improve fitness."
-              bind:value={goal.relevant}
-            />
-            <label
-              class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
-            >
-              <input type="checkbox" class="toggle toggle-primary" checked />
-              <div class="dropdown dropdown-end">
-                <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    class="w-4 h-4 stroke-current"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body text-left">
-                      <p>Toggle left to unsave.</p>
-                      <p>Generate Button above to give you another suggestion.</p>
-                      <p>Toggle Right to Save.</p>
-                    </div>
-                  </button>
+      <!-- Relevant card -->
+      <div class="card w-full p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Relevant</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <input
+            id="relevant"
+            class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+            type="text"
+            placeholder="AchievAIm's Relevant suggestion. e.g. Improve fitness."
+            bind:value={goal.relevant}
+          />
+          <label
+            class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
+          >
+            <input type="checkbox" class="toggle toggle-primary" />
+            <div class="dropdown dropdown-end">
+              <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  class="w-4 h-4 stroke-primary"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
+                  <div class="card-body text-primary text-left">
+                    <p>Toggle left to unsave.</p>
+                    <p>Generate Button above to give you another suggestion.</p>
+                    <p>Toggle Right to Save.</p>
+                  </div>
                 </button>
-              </div>
-            </label>
-          </div>
-        </figcaption>
-      </figure>
-    </div>
+              </button>
+            </div>
+          </label>
+        </div>
+      </div>
 
-    <!-- Time-Bound card -->
-    <div class="card w-full">
-      <figure>
-        <figcaption class="p-4 card-body flex flex-col">
-          <h2 class="card-title mb-2">Time-Bound</h2>
-          <div class="flex flex-col md:flex-row w-full">
-            <input
-              id="time-bound"
-              class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
-              type="text"
-              placeholder="AchievAIm's Time-Bound suggestion. e.g. 30 consecutive days."
-              bind:value={goal.time_bound}
-            />
-            <label
-              class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
-            >
-              <input type="checkbox" class="toggle toggle-primary" />
-              <div class="dropdown dropdown-end">
-                <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    class="w-4 h-4 stroke-current"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body text-left">
-                      <p>Toggle left to unsave.</p>
-                      <p>Generate Button above to give you another suggestion.</p>
-                      <p>Toggle Right to Save.</p>
-                    </div>
-                  </button>
+      <!-- Time-Bound card -->
+      <div class="card w-full p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Time-Bound</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <input
+            id="time-bound"
+            class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+            type="text"
+            placeholder="AchievAIm's Time-Bound suggestion. e.g. 30 consecutive days."
+            bind:value={goal.time_bound}
+          />
+          <label
+            class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
+          >
+            <input type="checkbox" class="toggle toggle-primary" />
+            <div class="dropdown dropdown-end">
+              <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  class="w-4 h-4 stroke-primary"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
+                  <div class="card-body text-primary text-left">
+                    <p>Toggle left to unsave.</p>
+                    <p>Generate Button above to give you another suggestion.</p>
+                    <p>Toggle Right to Save.</p>
+                  </div>
                 </button>
-              </div>
-            </label>
-          </div>
-        </figcaption>
-      </figure>
-    </div>
+              </button>
+            </div>
+          </label>
+        </div>
+      </div>
 
-    <div class="mt-3 flex flex-col items-center">
-      <div class="card w-full">
-        <figure>
-          <figcaption class="p-4 card-body flex flex-col items-center">
-            {#if goal.days_of_week}
-              <div class="flex justify-between items-center w-full">
-                <h2 class="card-title mb-2">Days</h2>
+      <div class="mt-3 flex flex-col items-center">
+        <div class="card w-full">
+          <figure>
+            <figcaption class="p-4 card-body flex flex-col items-center">
+              {#if goal.days_of_week}
+                <div class="flex justify-between items-center w-full">
+                  <h2 class="card-title mb-2">Days</h2>
 
-                <div class="flex items-center">
-                  <label for="selectAll" class="cursor-pointer label flex items-center">
-                    <input
-                      type="checkbox"
-                      class="toggle toggle-primary"
-                      id="selectAll"
-                      bind:checked={selectAll}
-                      on:click={toggleAll}
-                    />
-                    <label
-                      class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
-                    >
-                      <div class="dropdown dropdown-end">
-                        <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            class="w-4 h-4 stroke-current"
-                          >
-                            <path
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                            />
-                          </svg>
+                  <div class="flex items-center">
+                    <label for="selectAll" class="cursor-pointer label flex items-center">
+                      <input
+                        type="checkbox"
+                        class="toggle toggle-primary"
+                        id="selectAll"
+                        bind:checked={selectAll}
+                        on:click={toggleAll}
+                      />
+                      <label
+                        class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
+                      >
+                        <div class="dropdown dropdown-end">
                           <button
-                            class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64"
+                            tabindex="0"
+                            class="btn btn-circle btn-ghost btn-xs text-info m-3"
                           >
-                            <div class="card-body text-left">
-                              <p>These are the days of the week your goals repeat</p>
-                              <p>Toggle right to select all</p>
-                            </div>
-                          </button></button
-                        >
-                      </div>
-                    </label></label
-                  >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              class="w-4 h-4 stroke-primary"
+                            >
+                              <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                              />
+                            </svg>
+                            <button
+                              class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64"
+                            >
+                              <div class="card-body text-primary text-left">
+                                <p>These are the days of the week your goals repeat</p>
+                                <p>Toggle right to select all</p>
+                              </div>
+                            </button></button
+                          >
+                        </div>
+                      </label></label
+                    >
+                  </div>
                 </div>
-              </div>
-              <DaysOfWeekSelector daysOfWeek={goal.days_of_week} />
-            {/if}
-          </figcaption>
-        </figure>
+                <DaysOfWeekSelector daysOfWeek={goal.days_of_week} />
+              {/if}
+            </figcaption>
+          </figure>
+        </div>
       </div>
-    </div>
-
-    <div class="card w-full">
-      <figure>
-        <figcaption class="p-4 card-body flex flex-row items-center">
-          <h2 class="card-title mb-2">Time</h2>
 
-          <div class="flex-grow flex items-center">
-            <input
-              class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
-              id="goal-time"
-              type="time"
-              bind:value={goal.time_of_day}
-              aria-describedby="time-description"
-            />
-            <label
-              class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
-            >
-              <input type="checkbox" class="toggle toggle-primary" checked />
-              <div class="dropdown dropdown-end">
+      <div class="card w-full">
+        <figure>
+          <figcaption class="p-4 card-body flex flex-row items-center">
+            <h2 class="card-title mb-2">Time</h2>
+            <div class="flex-grow flex items-center">
+              <input
+                class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+                id="goal-time"
+                type="time"
+                bind:value={goal.time_of_day}
+                aria-describedby="time-description"
+              />
+              <div class="dropdown dropdown-end md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end">
+                <!-- Replaced label tag with div -->
                 <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
-                    class="w-4 h-4 stroke-current"
+                    class="w-4 h-4 stroke-primary"
                   >
                     <path
                       stroke-linecap="round"
@@ -401,42 +435,39 @@
                       d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                     />
                   </svg>
-                  <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body text-left">
+                  <div class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
+                    <!-- Removed button tag wrapping div -->
+                    <div class="card-body text-primary text-left">
                       <p>Set the alert time for your SMART goals for selected days above.</p>
                     </div>
-                  </button>
+                  </div>
                 </button>
               </div>
-            </label>
-          </div>
-        </figcaption>
-      </figure>
-    </div>
+            </div>
+          </figcaption>
+        </figure>
+      </div>
 
-    <div class="card w-full">
-      <figure>
-        <figcaption class="p-4 card-body flex flex-row items-center">
-          <h2 class="card-title mb-2">Date</h2>
-          <div class="flex-grow flex items-center relative">
-            <input
-              class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
-              id="goal-date"
-              type="date"
-              bind:value={goal.date_for_achievement}
-              aria-describedby="date-description"
-            />
-            <label
-              class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
-            >
-              <input type="checkbox" class="toggle toggle-primary" checked />
-              <div class="dropdown dropdown-end">
+      <div class="card w-full">
+        <figure>
+          <figcaption class="p-4 card-body flex flex-row items-center">
+            <h2 class="card-title mb-2">Date</h2>
+            <div class="flex-grow flex items-center relative">
+              <input
+                class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+                id="goal-date"
+                type="date"
+                bind:value={goal.date_for_achievement}
+                aria-describedby="date-description"
+              />
+              <div class="dropdown dropdown-end md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end">
+                <!-- Replaced label tag with div -->
                 <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
-                    class="w-4 h-4 stroke-current"
+                    class="w-4 h-4 stroke-primary"
                   >
                     <path
                       stroke-linecap="round"
@@ -445,26 +476,26 @@
                       d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                     />
                   </svg>
-                  <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body text-left">
+                  <div class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
+                    <!-- Removed button tag wrapping div -->
+                    <div class="card-body text-primary text-left">
                       <p>Choose the Date for Completing Your SMART Goal.</p>
                     </div>
-                  </button>
+                  </div>
                 </button>
               </div>
-            </label>
-          </div>
-        </figcaption>
-      </figure>
-    </div>
-    <div class="mt-3 flex flex-col items-left">
-      <button class="btn btn-primary" on:click={handleSave}>Save Smart Goal</button>
+            </div>
+          </figcaption>
+        </figure>
+      </div>
+      <div class="mt-3 flex flex-col items-left">
+        <button class="btn btn-primary" on:click={handleSave}>Save Smart Goal</button>
+      </div>
     </div>
   </div>
-</div>
-
-<div class="flex">
-  <div class="divider" />
+  <div class="flex">
+    <div class="divider" />
+  </div>
 </div>
 
 <style>
diff --git a/frontend/src/routes/testingcomponents/+page.svelte b/frontend/src/routes/testingcomponents/+page.svelte
index 2934920c..34825bf8 100644
--- a/frontend/src/routes/testingcomponents/+page.svelte
+++ b/frontend/src/routes/testingcomponents/+page.svelte
@@ -1,85 +1,207 @@
 <script lang="ts">
-  import type { Goals } from '$lib/types';
-  import { goto } from '$app/navigation';
+  type DaysOfWeek = {
+    monday: boolean;
+    tuesday: boolean;
+    wednesday: boolean;
+    thursday: boolean;
+    friday: boolean;
+    saturday: boolean;
+    sunday: boolean;
+  };
+
+  type Goal = {
+    days_of_week: DaysOfWeek;
+    date_for_achievement?: string;
+    time_of_day?: string;
+  };
 
-  let goals: Goals = {
-    active: [
-      {
-        name: 'Goal 1',
-        details: 'S.M.A.R.T details here',
-        date: new Date('2024-01-01T10:00:00'),
-        days: [10],
-        editing: false
-      }
-    ],
-    completed: [
-      {
-        name: 'Goal 2',
-        details: 'S.M.A.R.T details here',
-        date: new Date('2024-01-02T14:00:00'),
-        days: [15],
-        editing: false
-      }
-    ]
+  let goal: Goal = {
+    days_of_week: {
+      monday: false,
+      tuesday: false,
+      wednesday: false,
+      thursday: false,
+      friday: false,
+      saturday: false,
+      sunday: false
+    }
   };
 
-  function capitalizeFirstLetter(string: string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-  }
+  import DaysOfWeekSelector from '$lib/components/DaysOfWeekSelector.svelte';
+  import { page } from '$app/stores';
 </script>
 
-<div class="flex flex-col items-center justify-center h-screen">
-  <div
-    class="flex flex-wrap -mx-2 overflow-hidden sm:-mx-3 md:-mx-3 lg:-mx-4 xl:-mx-4 justify-center"
-  >
-    {#each Object.entries(goals) as [category, value]}
-      <div
-        class="my-2 px-2 w-full overflow-hidden sm:my-2 sm:px-2 sm:w-1/2 md:my-3 md:px-3 md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3 xl:my-4 xl:px-4 xl:w-1/3"
-      >
-        <div class="text-lg font-bold mb-4">{capitalizeFirstLetter(category)}</div>
-        {#each value as goal (goal.name)}
-          <div class="rounded-lg p-6 mb-4 bg-white shadow-sm border border-gray-200 space-y-4">
-            <button
-              class="text-neutral font-bold text-xl mb-2 cursor-pointer"
-              on:click={() => goto(`/creategoals/${goal.name}`)}
+<div class="container shadow-lg rounded-xl mb-4 mx-auto px-4 pt-5 md:max-w-xl lg:max-w-3xl z-10">
+  <div class="mb-5">
+    <div class="card w-full">
+      <figure>
+        <figcaption class="p-4 card-body flex flex-col">
+          <div class="flex items-center mb-2">
+            <a
+              href="/edit-goal"
+              aria-label="edit-goal"
+              title="Edit Goal"
+              class="{$page.url.pathname === '/edit-goal'
+                ? 'rounded bg-white'
+                : ''} block text-xl font-bold mr-2"
             >
-              {goal.name}
-            </button>
-            <div class="text-base text-gray-900 font-bold my-2">S.M.A.R.T</div>
-            <p class="text-gray-900"><strong>Specific:</strong> {goal.specific}</p>
-            <p class="text-gray-900"><strong>Measurable:</strong> {goal.measurable}</p>
-            <p class="text-gray-900"><strong>Attainable:</strong> {goal.attainable}</p>
-            <p class="text-gray-900"><strong>Relevant:</strong> {goal.relevant}</p>
-            <p class="text-gray-900"><strong>Time-Bound:</strong> {goal.timeBound}</p>
-            <div class="grid grid-cols-2 gap-2 text-sm text-gray-500 mt-4">
-              <div><strong>Date:</strong></div>
-              <div>{goal.date}</div>
-              <div><strong>Days:</strong></div>
-              <div>
-                <div class="flex flex-row">
-                  {#each goal.days as day}<span class="mx-1">{day}</span>{/each}
-                </div>
-              </div>
-              <div><strong>Time:</strong></div>
-              <div>{goal.time}</div>
+              Goal
+            </a>
+            <div class="flex items-center">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                class="w-4 h-4 stroke-current text-info mr-1"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+                />
+              </svg>
+              <span class="text-xs text-gray-500 italic">Click Goal to edit</span>
             </div>
           </div>
-        {/each}
-      </div>
-    {/each}
+          <div
+            class="border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+          >
+            What's your SMART Goal?
+          </div>
+        </figcaption>
+      </figure>
+    </div>
   </div>
-</div>
 
-<style>
-  @keyframes fade-in-down {
-    0% {
-      opacity: 0;
-      transform: translate3d(0, -50%, 0);
-    }
+  <!-- Specific card -->
+  <div class="card w-full">
+    <figure>
+      <figcaption class="p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Specific</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <div
+            class="border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+          >
+            AchievAIm's Specific suggestion
+          </div>
+        </div>
+      </figcaption>
+    </figure>
+  </div>
 
-    100% {
-      opacity: 1;
-      transform: translate3d(0, 0, 0);
-    }
-  }
-</style>
+  <!-- Measurable card -->
+  <div class="card w-full">
+    <figure>
+      <figcaption class="p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Measurable</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <div
+            class="border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+          >
+            AchievAIm's Measurable suggestion
+          </div>
+        </div>
+      </figcaption>
+    </figure>
+  </div>
+
+  <!-- Attainable card -->
+  <div class="card w-full">
+    <figure>
+      <figcaption class="p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Attainable</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <div
+            class="border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+          >
+            AchievAIm's Attainable suggestion
+          </div>
+        </div>
+      </figcaption>
+    </figure>
+  </div>
+
+  <!-- Relevant card -->
+  <div class="card w-full">
+    <figure>
+      <figcaption class="p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Relevant</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <div
+            class="border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+          >
+            AchievAIm's Relevant suggestion
+          </div>
+        </div>
+      </figcaption>
+    </figure>
+  </div>
+
+  <!-- Time-Bound card -->
+  <div class="card w-full">
+    <figure>
+      <figcaption class="p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Time-Bound</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <div
+            class="border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+          >
+            AchievAIm's Time-Bound suggestion
+          </div>
+        </div>
+      </figcaption>
+    </figure>
+  </div>
+
+  <div class="mt-3 flex flex-col items-center">
+    <div class="card w-full">
+      <figure>
+        <figcaption class="p-4 card-body flex flex-col items-center">
+          {#if goal.days_of_week}
+            <div class="flex justify-between items-center w-full">
+              <h2 class="card-title mb-2">Days</h2>
+            </div>
+            <DaysOfWeekSelector daysOfWeek={goal.days_of_week} />
+          {/if}
+        </figcaption>
+      </figure>
+    </div>
+  </div>
+
+  <div class="card w-full">
+    <figure>
+      <figcaption class="p-4 card-body flex flex-row items-center">
+        <h2 class="card-title mb-2">Date</h2>
+        <div class="flex-grow flex items-center relative">
+          <input
+            class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+            id="goal-date"
+            type="date"
+            bind:value={goal.date_for_achievement}
+            aria-describedby="date-description"
+            readonly
+          />
+        </div>
+      </figcaption>
+    </figure>
+  </div>
+
+  <div class="card w-full">
+    <figure>
+      <figcaption class="p-4 card-body flex flex-row items-center">
+        <h2 class="card-title mb-2">Time</h2>
+        <div class="flex-grow flex items-center">
+          <input
+            class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+            id="goal-time"
+            type="time"
+            bind:value={goal.time_of_day}
+            aria-describedby="time-description"
+            readonly
+          />
+        </div>
+      </figcaption>
+    </figure>
+  </div>
+</div>