diff --git a/assets/img/logos/copy.svg b/assets/img/logos/copy.svg
new file mode 100644
index 0000000..853d1cf
--- /dev/null
+++ b/assets/img/logos/copy.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 14H19C20.1046 14 21 13.1046 21 12V5C21 3.89543 20.1046 3 19 3H12C10.8954 3 10 3.89543 10 5V6.5M5 10H12C13.1046 10 14 10.8954 14 12V19C14 20.1046 13.1046 21 12 21H5C3.89543 21 3 20.1046 3 19V12C3 10.8954 3.89543 10 5 10Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/layouts/_default/about.html b/layouts/_default/about.html
index 5eb5252..adbb99e 100644
--- a/layouts/_default/about.html
+++ b/layouts/_default/about.html
@@ -10,7 +10,7 @@ <h1 class="enter-title text-3xl font-bold">About Us</h1>
       <!-- Mission and Values Section -->
       <section class="enter-mission mt-6">
         <h2 class="text-gray-800 text-2xl font-semibold">Our Mission</h2>
-        <p class="text-gray-700 mt-2">
+        <p class="text-gray-700 mt-2" style = "display: inline-block; background-color: rgb(39, 39, 39, 0.5); padding: 20px; border-radius: 8px;">
           {{ .Params.mission }}
         </p>
       </section>
diff --git a/layouts/_default/home.html b/layouts/_default/home.html
index 3c2b216..331de71 100644
--- a/layouts/_default/home.html
+++ b/layouts/_default/home.html
@@ -4,37 +4,37 @@
 
   <!-- Main Section with Logo and Title -->
   <section
-    class="parallax bg-gray p-8"
-    style="background-image: url(/img/background/titleBackground.webp);"
+    class="parallax bg-gray p-8 "
+    style="background-image: url(/img/background/titleBackground.webp); text-align: center;"
   >
-    <h1>
-      <span class="sr-only">{{ .Title }}</span>
-      {{ $img := resources.Get `img/logos/hiddenfigs_logo.png` }}
-      {{ $imgSmall := $img.Resize "400x" }}
-      {{ $imgMedium := $img.Resize "1000x" }}
-      <img
-        title="{{ $.Title }}"
-        class="mx-auto h-auto w-[400px] max-w-full"
-        alt="Hidden Figures logo"
-        width="{{ $imgSmall.Width }}"
-        height="{{ $imgSmall.Height }}"
-        src="{{ $imgSmall.RelPermalink }}"
-        srcset="
-          {{ $imgSmall.RelPermalink }} 450w,
-          {{ $imgMedium.RelPermalink }} 900w
-        "
-      />
-    </h1>
-    <h2
-      class="links-blue-darker text-center font-sans text-xl leading-tight text-white md:text-xl"
-    >
-      A Cottrell Scholars Collaborative funded by the
-      <a class="font-bold" href="https://rescorp.org/"
-        >Research Corporation for Science Advancement</a
-      >
-    </h2>
-    <div class="content-area mx-auto mt-8 max-w-prose text-white">
-      {{ .Content }}
+    <div style="display: inline-block; background-color: rgb(39, 39, 39, 0.5); padding: 20px; border-radius: 8px; ">
+      <h1>
+        <span class="sr-only">{{ .Title }}</span>
+        {{ $img := resources.Get `img/logos/hiddenfigs_logo.png` }}
+        {{ $imgSmall := $img.Resize "400x" }}
+        {{ $imgMedium := $img.Resize "1000x" }}
+        <img
+          title="{{ $.Title }}"
+          class="mx-auto h-auto w-[400px] max-w-full"
+          alt="Hidden Figures logo"
+          width="{{ $imgSmall.Width }}"
+          height="{{ $imgSmall.Height }}"
+          src="{{ $imgSmall.RelPermalink }}"
+          srcset="
+            {{ $imgSmall.RelPermalink }} 450w,
+            {{ $imgMedium.RelPermalink }} 900w
+          "
+        />
+      </h1>
+      <h2 
+        class="links-blue-darker text-center font-sans text-xl leading-tight text-white md:text-xl">
+        A Cottrell Scholars Collaborative funded by the
+        <a class="font-bold" href="https://rescorp.org/">Research Corporation for Science Advancement</a>
+      </h2>
+      <div 
+        class="content-area mx-auto mt-8 max-w-prose text-white">
+        {{ .Content }}
+      </div>
     </div>
   </section>
   <!-- Parallax effect CSS -->
diff --git a/layouts/_default/person.html b/layouts/_default/person.html
index 964f41a..7446de5 100644
--- a/layouts/_default/person.html
+++ b/layouts/_default/person.html
@@ -23,7 +23,7 @@ <h1 class="break-word font-bold leading-tight">
       </div>
 
       <!-- Basic Information Section -->
-      <div class="links-blue-darker enter4 mt-2 text-sm sm:flex sm:flex-wrap">
+      <div class="links-blue-darker enter4 mt-2 text-sm sm:flex sm:flex-wrap" style = "background-color: rgb(39, 39, 39, 0.5); padding: 20px; border-radius: 8px;">
         <!-- Institution of Ph.D. -->
         <p class="sm:w-1/2" id="college">
           <span class="mr-5 text-g-6">
@@ -146,6 +146,7 @@ <h1 class="break-word font-bold leading-tight">
         x-transition:enter-start="transform opacity-0 scale-95"
         x-transition:enter-end="transform opacity-100 scale-100"
         class="enter6 mt-4"
+        style = " background-color: rgb(39, 39, 39, 0.5); padding: 20px; border-radius: 8px;"
       >
         <h2 class="text-lg font-bold">Scientist Biography</h2>
 
@@ -209,7 +210,7 @@ <h2 class="sr-only" data-pagefind-ignore>
               Biographical information
             </h2>
             <p>
-              {{ replaceRE "\\[CITE (\\d+)\\]" "<a href=\"#cite-$1\" class=\"citation-link\" data-cite=\"$1\" >[$1]</a>" .Params.general_bio | safeHTML }}
+              {{ replaceRE "\\[CITE (\\d+)\\]" "<a href=\"#cite-$1\" class=\"citation-link\" data-cite=\"$1\" @click='isBio = false'>[$1]</a>" .Params.general_bio | safeHTML }}
             </p>
           </section>
         </div>
@@ -274,6 +275,7 @@ <h2 class="sr-only" data-pagefind-ignore>
         x-transition:enter-end="transform opacity-100 scale-100"
         x-cloak
         class="mt-4"
+        style = " background-color: rgb(39, 39, 39, 0.5); padding: 20px; border-radius: 8px;"
       >
         <h2 class="text-lg font-bold">Key Contributions</h2>
         <section class="mt-2">
diff --git a/layouts/partials/contactus-box.html b/layouts/partials/contactus-box.html
index b0b30e9..e6014e2 100644
--- a/layouts/partials/contactus-box.html
+++ b/layouts/partials/contactus-box.html
@@ -26,6 +26,13 @@
     </div>
     <div class="px-4 py-5 sm:p-6">
       <h3 class="text-lg font-medium leading-6 text-black">Contact Us</h3>
+      <div class="mt-2 mb-4">
+        <button class="text-sm cursor-pointer hover:text-blue-darker" id="emailText" onclick="copyEmailToClipboard()">
+            <svg class="inline-block h-4 w-4 fill-current align-text-bottom ">
+              <use xlink:href="#copy"></use>
+            </svg> hiddenfigs@googlegroups.com
+        </button>
+      </div>
       <div class="mt-2">
         <form>
           <div class="mb-4">
@@ -107,4 +114,12 @@ <h3 class="text-lg font-medium leading-6 text-black">Contact Us</h3>
   }
 
   document.querySelector("form").addEventListener("submit", submitForm);
+  function copyEmailToClipboard() {
+    const emailText = 'your-email@example.com';
+    navigator.clipboard.writeText(emailText).then(function() {
+      alert('Email copied to clipboard!');
+    }, function(err) {
+      console.error('Could not copy text: ', err);
+    });
+  }
 </script>
diff --git a/layouts/partials/svg.html b/layouts/partials/svg.html
index 04126d4..3695d1a 100644
--- a/layouts/partials/svg.html
+++ b/layouts/partials/svg.html
@@ -28,6 +28,7 @@
   "phd" "/img/logos/phd-icon.svg"
   "year" "/img/logos/year.svg"
   "level" "/img/logos/level.svg"
+  "copy" "/img/logos/copy.svg"
 }}