diff --git a/bootstrap-portfolio/biography.html b/bootstrap-portfolio/biography.html
index 3071dd2..dad307f 100644
--- a/bootstrap-portfolio/biography.html
+++ b/bootstrap-portfolio/biography.html
@@ -10,20 +10,19 @@
 </head>
 <body class="bg-dark">
   <div class="container-fluid px-0" >  
-    <nav class="navbar navbar-expand-lg navbar-dark bg-navbardark">
+    <nav class="navbar navbar-expand-sm navbar-dark bg-navbardark">
     <div class="container-fluid">
-      <a class="navbar-brand h1" href="#"></a>
-      <img src="/images/white_atom_logo_tiny.png" alt="Logo" class="img-fluid">
+      <img src="/images/white_atom_logo_micro.png" alt="Logo" class="img-fluid">
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse justify-content-start" id="navbarSupportedContent">
         <ul class="navbar-nav">
           <li class="nav-item">
-            <a class="nav-link active fs-4" aria-current="page" href="index.html">Home</a>
+            <a class="nav-link fs-4" aria-current="page" href="index.html">Home</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle fs-4" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <a class="nav-link dropdown-toggle fs-4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Publications
             </a>
             <ul class="dropdown-menu">
@@ -35,9 +34,9 @@
           <li class="nav-item">
             <a class="nav-link fs-4" href="research.html">Research</a>
           </li>
-          <li class="nav-item">
+          <!-- <li class="nav-item">
             <a class="nav-link fs-4" href="biography.html">Bio</a>
-          </li>
+          </li> -->
         </ul>
       </div>
     </div>
@@ -50,22 +49,17 @@
     #content a { color: purple; }
   </style>
   <div class="container">
-  <div class="row">
-    <div class="col">
-      <div class="container" id="content">
-        <script>
+    
+  </div>
+  <script>
     document.addEventListener('DOMContentLoaded', function() {
-      var converter = new showdown.Converter();
-      converter.setFlavor('github');
-      fetch('/biography.md')
-        .then(response => response.text())
-        .then(text => {
-          document.getElementById('content').innerHTML = converter.makeHtml(text);
-        })
-        .catch(error =>
-          console.error('Error loading markdown file', error));
+        const currentPage = window.location.pathname.split("/").pop();
+        const navItems = document.querySelectorAll('.nav-link');
+        navItems.forEach(item => {
+            if (item.getAttribute('href') === currentPage) {
+                item.classList.add('active');
+            }
         });
-        </script>
-      </div>
-    </div>
-  </div>
\ No newline at end of file
+    });
+</script>
+</body>
\ No newline at end of file
diff --git a/bootstrap-portfolio/css/styles.css b/bootstrap-portfolio/css/styles.css
index 812d7c9..9d285f5 100644
--- a/bootstrap-portfolio/css/styles.css
+++ b/bootstrap-portfolio/css/styles.css
@@ -22,4 +22,40 @@
 min-height: 75vh;
 }
 
-.custom-header {color: orange;}
\ No newline at end of file
+.custom-header {color: orange;}
+
+.transparent-column {
+    background-color: rgba(32, 32, 32, 0.85);
+    /* Or you can use hsla: */
+    /* background-color: hsla(0, 0%, 100%, 0.5); */
+    padding: 15px;
+  }
+
+.transparent-paragraph{
+    background-color: rgba(32, 32, 32, 0.85); 
+
+}
+
+.name-fontsize {
+    font-size: 3rem; /* Or any size you prefer */
+}
+
+.fullscreen-image-container {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+  
+  .fullscreen-image {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    max-width: none;
+    object-fit: cover;
+  }
\ No newline at end of file
diff --git a/bootstrap-portfolio/images/bitmap.png b/bootstrap-portfolio/images/bitmap.png
new file mode 100644
index 0000000..1c79085
Binary files /dev/null and b/bootstrap-portfolio/images/bitmap.png differ
diff --git a/bootstrap-portfolio/images/cone_of_complexity.webp b/bootstrap-portfolio/images/cone_of_complexity.webp
new file mode 100644
index 0000000..b6361d6
Binary files /dev/null and b/bootstrap-portfolio/images/cone_of_complexity.webp differ
diff --git a/bootstrap-portfolio/images/email_iocn.png b/bootstrap-portfolio/images/email_iocn.png
new file mode 100644
index 0000000..a6d8708
Binary files /dev/null and b/bootstrap-portfolio/images/email_iocn.png differ
diff --git a/bootstrap-portfolio/images/github-logo-white.webp b/bootstrap-portfolio/images/github-logo-white.webp
new file mode 100644
index 0000000..5a103dc
Binary files /dev/null and b/bootstrap-portfolio/images/github-logo-white.webp differ
diff --git a/bootstrap-portfolio/images/linkedin-app-white-icon.png b/bootstrap-portfolio/images/linkedin-app-white-icon.png
new file mode 100644
index 0000000..36ff828
Binary files /dev/null and b/bootstrap-portfolio/images/linkedin-app-white-icon.png differ
diff --git a/bootstrap-portfolio/images/linkedin-app-white-icon.webp b/bootstrap-portfolio/images/linkedin-app-white-icon.webp
new file mode 100644
index 0000000..ad91d88
Binary files /dev/null and b/bootstrap-portfolio/images/linkedin-app-white-icon.webp differ
diff --git a/bootstrap-portfolio/images/scholar_logo_white.png b/bootstrap-portfolio/images/scholar_logo_white.png
new file mode 100644
index 0000000..2315e58
Binary files /dev/null and b/bootstrap-portfolio/images/scholar_logo_white.png differ
diff --git a/bootstrap-portfolio/images/surface_transparent_zoomed_out.png b/bootstrap-portfolio/images/surface_transparent_zoomed_out.png
new file mode 100644
index 0000000..7fdd845
Binary files /dev/null and b/bootstrap-portfolio/images/surface_transparent_zoomed_out.png differ
diff --git a/bootstrap-portfolio/images/volcano.png b/bootstrap-portfolio/images/volcano.png
new file mode 100644
index 0000000..440770d
Binary files /dev/null and b/bootstrap-portfolio/images/volcano.png differ
diff --git a/bootstrap-portfolio/images/white_atom_logo_micro.png b/bootstrap-portfolio/images/white_atom_logo_micro.png
new file mode 100644
index 0000000..c5191da
Binary files /dev/null and b/bootstrap-portfolio/images/white_atom_logo_micro.png differ
diff --git a/bootstrap-portfolio/index.html b/bootstrap-portfolio/index.html
index 1303c59..c63331c 100644
--- a/bootstrap-portfolio/index.html
+++ b/bootstrap-portfolio/index.html
@@ -6,27 +6,27 @@
     <title>Atomic Brokerage</title>
     <link href="/css/main.min.css" rel="stylesheet">
     <link href="/css/styles.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
     <link rel="icon" href="/images/white_atom_logo_small.png" type="image/x-icon">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.3.2/markdown-it.min.js"
         integrity="sha512-TIDbN32lXOg2Mw1VcnKrQLZgfALryJogWCu/NHWtlMCR1jget+mOwMtdehBBZz2f9PKeK2AQPwVxkbl4u/1H5g=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </head>
 <body class="bg-dark">
-  <div class="container-fluid px-0" > 
-    <nav class="navbar navbar-expand-lg navbar-dark bg-navbardark">
+  <div class="container-fluid" > 
+    <nav class="navbar navbar-expand-sm navbar-dark bg-navbardark">
     <div class="container-fluid">
-      <a class="navbar-brand h1" href="#"></a>
-      <img src="/images/white_atom_logo_tiny.png" alt="Logo" class="img-fluid">
+      <img src="/images/white_atom_logo_micro.png" alt="Logo" class="img-fluid">
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse justify-content-start" id="navbarSupportedContent">
         <ul class="navbar-nav">
           <li class="nav-item">
-            <a class="nav-link active fs-4" aria-current="page" href="index.html">Home</a>
+            <a class="nav-link fs-4" aria-current="page" href="index.html">Home</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle fs-4" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <a class="nav-link dropdown-toggle fs-4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Publications
             </a>
             <ul class="dropdown-menu">
@@ -38,46 +38,139 @@
           <li class="nav-item">
             <a class="nav-link fs-4" href="research.html">Research</a>
           </li>
-          <li class="nav-item">
+          <!-- <li class="nav-item">
             <a class="nav-link fs-4" href="biography.html">Bio</a>
-          </li>
+          </li> -->
         </ul>
       </div>
     </div>
   </nav>
 </nav>
   </div>
-  <div class="container text-center z-n1 position-absolute">
-    <div class="row bg-dark bg-gradient nopadding opacity-50">
-      <div class="col p-0 fixed-bottom"> <!-- Background image -->
-        <img src="./images/surface_transparent.png" class="z-n1"  alt="Main Image" style="align-items: flex-end; width: 100%">
+  <div class="container-fluid text-center z-n1 position-absolute">
+    <div class="row bg-dark bg-gradient nopadding opacity-50 z-n1">
+      <!-- <div class="col-3"></div> -->
+      <div class="fullscreen-image-container">
+        <img src="./images/surface_transparent_zoomed_out.png" class="fullscreen-image z-n1"  alt="Main Image">
       </div>
     </div>
   </div>
-  <div class="container-fluid d-flex flex-column custom-vh-75 z-2 position-relative text-center">
+  <div class="d-none d-md-block container-fluid d-flex flex-column custom-vh-75 z-2 position-relative text-center"> <!-- All large screen stuff -->
     <div class="row flex-grow-1"> <!-- Title and other info -->
-      <div class="col-4 align-self-center">
+      <!-- <div class="col-1"></div> -->
+      <div class="col-3 transparent-column" style="min-height:100vh">
         <div class="container-fluid">
           <div class="row flex-grow-1">
-            <div class="col align-self-center">
-              <p class="fs-1 fw-bold text-center text-light">Cooper Tezak</p>
+            <p class="name-fontsize fw-bold text-center text-light">Cooper Tezak</p>
+            <div class="col-2"></div>
+            <div class="col-8 align-self-center">
               <img src="/images/headshot_atoms_circle.png", class="image-fluid", style="max-width: 100%;">
             </div>
+            <div class="col-2"></div>
+            <div class="row flex-grow-1">
+              <p class="fs-2 text-light">PhD Student, CU Boulder</p>
+              <p class="fs-2 text-light">Atomic Broker</p>
+            <div class="row flex-grow-1 p-3">
+              <div class="col-3"></div>
+              <div class="col-2">
+                <a href="https://www.linkedin.com/in/cooper-tezak-75a15b165/" class="text-light" target="_blank">
+                  <img src="/images/linkedin-app-white-icon.png" class="img-fluid" alt="LinkedIn">
+                </a>
+              </div>
+              <div class="col-2">
+                <a href="https://github.com/cote3804" class="text-light" target="_blank">
+                  <img src="/images/github-logo-white.webp" class="img-fluid" alt="GitHub">
+                </a>
+              </div>
+              <div class="col-2">
+                <a href="https://scholar.google.com/citations?user=XBZAHmIAAAAJ&hl=en" class="text-light" target="_blank">
+                  <img src="/images/scholar_logo_white.png" class="img-fluid" alt="GitHub">
+                </a>
+              </div>
+              <div class="col-3"></div>
+            </div>
+            </div>
           </div>
         </div> 
       </div>
-      <div class="col-8 align-self-center">
+      <div class="col-1"></div>
+      <div class="col-7 align-self-start">
         <div class="container">
-          <div class="row flex-grow-1 position-relative z-2">
-            <div class="col align-self-center">
-              <p class="fs-1 fw-bold text-center text-light">Atomic Broker</p>
-              <p class="fs-4 text-light">Matching catalyst materials with desired chemical conversions</p>
+          <div class="row flex-grow-1 p-5 position-relative z-2"></div>
+          <div class="row flex-grow-1 p-3 position-relative z-2">
+            <div class="col align-self-start transparent-paragraph">
+              <p class="fs-2 fw-bold text-center text-light">Matching catalysts with reactions through simulation</p>
+              <p class="fs-5 text-light" style="text-align: justify;">I use grand-canonical density functional theory to simulate 
+                the electrified interface between catalyst and electrolyte. My simulations have shown
+                previously unknown potential dependence of fundamental catalytic phenomena that, across material
+                spaces, have significant impacts on electrocatalyst design. The data generated throughout my PhD is 
+                <a href="https://beastdb.nrel.gov/">publicly available</a> 
+                and accompanied by an user interface that facilitates data exploration.</p>
+                <p class="fs-5 text-light" style="text-align: justify;">
+                I seek generalizable chemical knoweldge that can be used to design catalysts for arbitray
+                reactions. By smartly restricting chemical space and leveraging massively parallel workflows,
+                I can quickly downselect material spaces to a few promising candidates. My goal is to match
+                catalysts with reactions by identfiying kinetic bottlenecks that can be manipulated with
+                smart catalyst design. 
+              </p>
             </div>
           </div>
         </div> 
       </div>
     </div>
-
+  </div>
+  <div class="d-block d-md-none container-flui d-flex flex-column custom-vh-75 z-2 position-relative text-center"> <!-- All small screen stuff -->
+    <div class="row align-center py-4">
+      <!-- <div class="col-2"></div> -->
+      <div class="col-8 offset-2">
+        <img src="/images/headshot_atoms_circle.png", class="image-fluid", style="max-width: 80%;">
+      </div>
+      <p class="fs-2 text-light">PhD Student, CU Boulder</p>
+      <p class="fs-2 text-light">Atomic Broker</p>
+    </div>
+    <div class="row align-center py-2">
+      <div class="col-2"></div>
+      <div class="col-2">
+        <a href="https://www.linkedin.com/in/cooper-tezak-75a15b165/" class="text-light" target="_blank">
+          <img src="/images/linkedin-app-white-icon.png" class="img-fluid" alt="LinkedIn">
+        </a>
+      </div>
+      <div class="col-2">
+        <a href="https://github.com/cote3804" class="text-light" target="_blank">
+          <img src="/images/github-logo-white.webp" class="img-fluid" alt="GitHub">
+        </a>
+      </div>
+      <div class="col-2">
+        <a href="https://scholar.google.com/citations?user=XBZAHmIAAAAJ&hl=en" class="text-light" target="_blank">
+          <img src="/images/scholar_logo_white.png" class="img-fluid" alt="GitHub">
+        </a>
+      </div>
+      <div class="col-2">
+        <a href="mailto:cote3804@colorado.edu" class="text-light" target="_blank">
+          <img src="/images/email_iocn.png" class="img-fluid" alt="GitHub">
+        </a>
+      </div>
+      <div class="col-2"></div>
+    </div>
+    <div class="row py-2">
+    <div class="col px-5">
+      <p class="fs-2 fw-bold text-center text-light">Matching catalysts with reactions through simulation</p>
+      <p class="fs-5 text-light" style="text-align: justify;">I use grand-canonical density functional theory to simulate 
+        the electrified interface between catalyst and electrolyte. My simulations have shown
+        previously unknown potential dependence of fundamental catalytic phenomena that, across material
+        spaces, have significant impacts on electrocatalyst design. The data generated throughout my PhD is 
+        <a href="https://beastdb.nrel.gov/">publicly available</a> 
+        and accompanied by an user interface that facilitates data exploration.</p>
+        <p class="fs-5 text-light" style="text-align: justify;">
+        I seek generalizable chemical knoweldge that can be used to design catalysts for arbitray
+        reactions. By smartly restricting chemical space and leveraging massively parallel workflows,
+        I can quickly downselect material spaces to a few promising candidates. My goal is to match
+        catalysts with reactions by identfiying kinetic bottlenecks that can be manipulated with
+        smart catalyst design. 
+      </p>
+    </div>
+    </div>
+  </div>
 <script>
   // Configure MathJax
   window.MathJax = {
@@ -106,5 +199,16 @@
     MathJax.typesetPromise();
   });
 </script>
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const currentPage = window.location.pathname.split("/").pop();
+        const navItems = document.querySelectorAll('.nav-link');
+        navItems.forEach(item => {
+            if (item.getAttribute('href') === currentPage) {
+                item.classList.add('active');
+            }
+        });
+    });
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/bootstrap-portfolio/navbar.html b/bootstrap-portfolio/navbar.html
index de8a157..c7d72c2 100644
--- a/bootstrap-portfolio/navbar.html
+++ b/bootstrap-portfolio/navbar.html
@@ -1,17 +1,16 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-navbardark">
+<nav class="navbar navbar-expand-sm navbar-dark bg-navbardark">
     <div class="container-fluid">
-      <a class="navbar-brand h1" href="#"></a>
-      <img src="/images/white_atom_logo_tiny.png" alt="Logo" class="img-fluid">
+      <img src="/images/white_atom_logo_micro.png" alt="Logo" class="img-fluid">
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse justify-content-start" id="navbarSupportedContent">
         <ul class="navbar-nav">
           <li class="nav-item">
-            <a class="nav-link active fs-4" aria-current="page" href="index.html">Home</a>
+            <a class="nav-link fs-4" aria-current="page" href="index.html">Home</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle fs-4" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <a class="nav-link dropdown-toggle fs-4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Publications
             </a>
             <ul class="dropdown-menu">
@@ -23,9 +22,9 @@
           <li class="nav-item">
             <a class="nav-link fs-4" href="research.html">Research</a>
           </li>
-          <li class="nav-item">
+          <!-- <li class="nav-item">
             <a class="nav-link fs-4" href="biography.html">Bio</a>
-          </li>
+          </li> -->
         </ul>
       </div>
     </div>
diff --git a/bootstrap-portfolio/navbar_js.html b/bootstrap-portfolio/navbar_js.html
new file mode 100644
index 0000000..0bdf09e
--- /dev/null
+++ b/bootstrap-portfolio/navbar_js.html
@@ -0,0 +1,11 @@
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const currentPage = window.location.pathname.split("/").pop();
+        const navItems = document.querySelectorAll('.nav-link');
+        navItems.forEach(item => {
+            if (item.getAttribute('href') === currentPage) {
+                item.classList.add('active');
+            }
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/bootstrap-portfolio/research.html b/bootstrap-portfolio/research.html
index e3c6e61..f40a0fd 100644
--- a/bootstrap-portfolio/research.html
+++ b/bootstrap-portfolio/research.html
@@ -28,20 +28,19 @@
   </head>
 <body class="bg-dark">
   <div class="container-fluid px-0" > 
-    <nav class="navbar navbar-expand-lg navbar-dark bg-navbardark">
+    <nav class="navbar navbar-expand-sm navbar-dark bg-navbardark">
     <div class="container-fluid">
-      <a class="navbar-brand h1" href="#"></a>
-      <img src="/images/white_atom_logo_tiny.png" alt="Logo" class="img-fluid">
+      <img src="/images/white_atom_logo_micro.png" alt="Logo" class="img-fluid">
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse justify-content-start" id="navbarSupportedContent">
         <ul class="navbar-nav">
           <li class="nav-item">
-            <a class="nav-link active fs-4" aria-current="page" href="index.html">Home</a>
+            <a class="nav-link fs-4" aria-current="page" href="index.html">Home</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle fs-4" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <a class="nav-link dropdown-toggle fs-4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Publications
             </a>
             <ul class="dropdown-menu">
@@ -53,9 +52,9 @@
           <li class="nav-item">
             <a class="nav-link fs-4" href="research.html">Research</a>
           </li>
-          <li class="nav-item">
+          <!-- <li class="nav-item">
             <a class="nav-link fs-4" href="biography.html">Bio</a>
-          </li>
+          </li> -->
         </ul>
       </div>
     </div>
@@ -66,7 +65,7 @@
     <div class="h1 text-light">Research</div>
   <div class="row pt-5">
     <div class="col">
-      <div class="h3 text-light">Electrocatalyst Discovery</div>
+      <div class="h3 text-light">Electrocatalytic Scaling Relations</div>
       <div class="p-0 text-light">
         I combine electrochemical physics simulations with thermodynamic proxies of catalyst
         activity to screen broad material spaces for active catalysts. Typical electrochemical studies
@@ -76,8 +75,8 @@
         one half that of a hydrogen atom. <br> <br>
         \( G_{H^+} + G_{e^-} = -\frac{1}{2} G_{H_2} \) <br> <br>
         The free energy of the proton is potential-independent and the potential dependence of the electron is 
-        given by the difference in potential from 0V vs SHE.<br> <br>
-        \( G_{e^-} = G_{e^-}^0 - (U - U_{SHE}^0)\) <br> <br>
+        given by the potential with respect to the standard hydrogen electrode (SHE).<br> <br>
+        \( G_{e^-} = G_{e^-}^0 - U_{SHE}\) <br> <br>
         This then allows one to estimate the 
         <a href="https://chemistry-europe.onlinelibrary.wiley.com/doi/abs/10.1002/cssc.201500322">Limiting Potential \(U_{L}\)</a>
         at which an electrochemical step becomes favorable by dividing the free energy change of that step by the number
@@ -101,14 +100,56 @@
         of the 
         <a href="https://pubs.acs.org/doi/10.1021/ar1000956">energetic span</a>, which measures the largest barrier in a
         cyclic catalytic cycle. I used this descriptor to re-evaluate the typical CHE volcano plots for the electrochemical nitrogen
-        reduction reaction to understand how explicit inclusion of potential changes catalyst scaling relations. <br> <br>
+        reduction reaction to understand how explicit inclusion of potential changes catalyst scaling relations. 
+        <a href="https://pubs.acs.org/doi/abs/10.1021/acscatal.3c01978">[5]</a>
+        <br> <br>
         
-
+        <div class="h3 text-light">Electrocatalyst Screening</div>
+        Using the scaling relations developed above, I screened a material space for promising nitrogen reduction catalysts.
+        This space consisted of binary metal-covalent alloys that combined p-block dopants with transition metals. We found that
+        even the most active catalysts in our dataset did not surpass the the activity of the most active metal catalysts because these 
+        covalent alloy materials fail to favorably break scaling relations.        
+        <a href="https://onlinelibrary.wiley.com/doi/abs/10.1002/aenm.202304559">[6]</a>
+        <br><br>
+        Furthermore, we found that traditional electronic structure descriptors like d-band and p-band centers were unable to 
+        predict trends in binding energy across the dataset. We believe this is due to the highly geometry-dependent change in the renormalized
+        adsorbate frontier orbital energies, which lead to substantially different degrees of bonding for materials with similar d-band centers.
+        To correctly precict trends in binding energy across complex material spaces, it is necessary to incorporate the geometry of the surface.
+        <br><br>
+        <div class="h3 text-light">Bayesian Optimization of Battery Electrolyte Compositions</div>
+        I have recently begun working with 
+        <a href="https://www.colorado.edu/lab/ban/">Chunmei Ban</a>
+        on optimizing experimental electrolyte composition for Na-ion batteries. I lead the effort to develop a Bayesian optimization framework
+        that uses a gaussian process to estimate the charge capacity at a given cycle based on the mass weights of electrolyte components. 
+        <br><br>
       </div>
     </div>
-      <div class="col">
+    <div class="col">
+      <img src="/images/volcano.png" class="img-fluid" alt="Volcano Plot">
+      <p class="fs-6 px-5 text-light" style="text-align: justify;">
+        Re-evaluated nitrogen reduction reaction scaling relations using GC-DFT and the \( \Phi_{max} \) activity descriptor. Unlike
+        previous scaling relations, there is a flat peak shaving off the top of the volcano due to the chemical desoption of \( NH_3 \) that is less sensitive
+        to the applied potential than the left and right scaling lines, which are comprised of explicit electron transfer steps. These volcanos indicate that 
+        tuning the activity of catalysts near the peak of the volcano at modest potentials necessitates selective destabilization of the \( NH_3^* \) state.
+        <br> <br>
+      </p>
       <img src="/images/spans_bar_chart.png" class="img-fluid" alt="Spans Bar Chart">
-      <img src="/images/volvano.png" class="img-fluid" alt="Volcano Plot">
+      <p class="fs-6 px-5 text-light" style="text-align: justify;">
+      Select materials from the binary covalent alloy screening study. We found that the most active surfaces in our dataset tended
+      to have less occupied d-orbitals that were capable of strongly reducing the \( N_2 \) triple bond. However, all materials were
+      inevitably limited by the desorption of \( NH_3* \) from the surface. <br> <br>
+      </p>
     </div>
   </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const currentPage = window.location.pathname.split("/").pop();
+        const navItems = document.querySelectorAll('.nav-link');
+        navItems.forEach(item => {
+            if (item.getAttribute('href') === currentPage) {
+                item.classList.add('active');
+            }
+        });
+    });
+</script>
 </body>
\ No newline at end of file
diff --git a/bootstrap-portfolio/source/biography.html b/bootstrap-portfolio/source/biography.html
index c8bdc46..9e533c3 100644
--- a/bootstrap-portfolio/source/biography.html
+++ b/bootstrap-portfolio/source/biography.html
@@ -18,22 +18,7 @@
     #content a { color: purple; }
   </style>
   <div class="container">
-  <div class="row">
-    <div class="col">
-      <div class="container" id="content">
-        <script>
-    document.addEventListener('DOMContentLoaded', function() {
-      var converter = new showdown.Converter();
-      converter.setFlavor('github');
-      fetch('/biography.md')
-        .then(response => response.text())
-        .then(text => {
-          document.getElementById('content').innerHTML = converter.makeHtml(text);
-        })
-        .catch(error =>
-          console.error('Error loading markdown file', error));
-        });
-        </script>
-      </div>
-    </div>
-  </div>
\ No newline at end of file
+    
+  </div>
+  @@include('navbar_js.html')
+</body>
\ No newline at end of file
diff --git a/bootstrap-portfolio/source/index.html b/bootstrap-portfolio/source/index.html
index b5739ab..a1262ab 100644
--- a/bootstrap-portfolio/source/index.html
+++ b/bootstrap-portfolio/source/index.html
@@ -6,46 +6,140 @@
     <title>Atomic Brokerage</title>
     <link href="/css/main.min.css" rel="stylesheet">
     <link href="/css/styles.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
     <link rel="icon" href="/images/white_atom_logo_small.png" type="image/x-icon">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.3.2/markdown-it.min.js"
         integrity="sha512-TIDbN32lXOg2Mw1VcnKrQLZgfALryJogWCu/NHWtlMCR1jget+mOwMtdehBBZz2f9PKeK2AQPwVxkbl4u/1H5g=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </head>
 <body class="bg-dark">
-  <div class="container-fluid px-0" > 
+  <div class="container-fluid" > 
     @@include('navbar.html')
   </div>
-  <div class="container text-center z-n1 position-absolute">
-    <div class="row bg-dark bg-gradient nopadding opacity-50">
-      <div class="col p-0 fixed-bottom"> <!-- Background image -->
-        <img src="./images/surface_transparent.png" class="z-n1"  alt="Main Image" style="align-items: flex-end; width: 100%">
+  <div class="container-fluid text-center z-n1 position-absolute">
+    <div class="row bg-dark bg-gradient nopadding opacity-50 z-n1">
+      <!-- <div class="col-3"></div> -->
+      <div class="fullscreen-image-container">
+        <img src="./images/surface_transparent_zoomed_out.png" class="fullscreen-image z-n1"  alt="Main Image">
       </div>
     </div>
   </div>
-  <div class="container-fluid d-flex flex-column custom-vh-75 z-2 position-relative text-center">
+  <div class="d-none d-md-block container-fluid d-flex flex-column custom-vh-75 z-2 position-relative text-center"> <!-- All large screen stuff -->
     <div class="row flex-grow-1"> <!-- Title and other info -->
-      <div class="col-4 align-self-center">
+      <!-- <div class="col-1"></div> -->
+      <div class="col-3 transparent-column" style="min-height:100vh">
         <div class="container-fluid">
           <div class="row flex-grow-1">
-            <div class="col align-self-center">
-              <p class="fs-1 fw-bold text-center text-light">Cooper Tezak</p>
+            <p class="name-fontsize fw-bold text-center text-light">Cooper Tezak</p>
+            <div class="col-2"></div>
+            <div class="col-8 align-self-center">
               <img src="/images/headshot_atoms_circle.png", class="image-fluid", style="max-width: 100%;">
             </div>
+            <div class="col-2"></div>
+            <div class="row flex-grow-1">
+              <p class="fs-2 text-light">PhD Student, CU Boulder</p>
+              <p class="fs-2 text-light">Atomic Broker</p>
+            <div class="row flex-grow-1 p-3">
+              <div class="col-3"></div>
+              <div class="col-2">
+                <a href="https://www.linkedin.com/in/cooper-tezak-75a15b165/" class="text-light" target="_blank">
+                  <img src="/images/linkedin-app-white-icon.png" class="img-fluid" alt="LinkedIn">
+                </a>
+              </div>
+              <div class="col-2">
+                <a href="https://github.com/cote3804" class="text-light" target="_blank">
+                  <img src="/images/github-logo-white.webp" class="img-fluid" alt="GitHub">
+                </a>
+              </div>
+              <div class="col-2">
+                <a href="https://scholar.google.com/citations?user=XBZAHmIAAAAJ&hl=en" class="text-light" target="_blank">
+                  <img src="/images/scholar_logo_white.png" class="img-fluid" alt="GitHub">
+                </a>
+              </div>
+              <div class="col-3"></div>
+            </div>
+            </div>
           </div>
         </div> 
       </div>
-      <div class="col-8 align-self-center">
+      <div class="col-1"></div>
+      <div class="col-7 align-self-start">
         <div class="container">
-          <div class="row flex-grow-1 position-relative z-2">
-            <div class="col align-self-center">
-              <p class="fs-1 fw-bold text-center text-light">Atomic Broker</p>
-              <p class="fs-4 text-light">Matching catalyst materials with desired chemical conversions</p>
+          <div class="row flex-grow-1 p-5 position-relative z-2"></div>
+          <div class="row flex-grow-1 p-3 position-relative z-2">
+            <div class="col align-self-start transparent-paragraph">
+              <p class="fs-2 fw-bold text-center text-light">Matching catalysts with reactions through simulation</p>
+              <p class="fs-5 text-light" style="text-align: justify;">I use grand-canonical density functional theory to simulate 
+                the electrified interface between catalyst and electrolyte. My simulations have shown
+                previously unknown potential dependence of fundamental catalytic phenomena that, across material
+                spaces, have significant impacts on electrocatalyst design. The data generated throughout my PhD is 
+                <a href="https://beastdb.nrel.gov/">publicly available</a> 
+                and accompanied by an user interface that facilitates data exploration.</p>
+                <p class="fs-5 text-light" style="text-align: justify;">
+                I seek generalizable chemical knoweldge that can be used to design catalysts for arbitray
+                reactions. By smartly restricting chemical space and leveraging massively parallel workflows,
+                I can quickly downselect material spaces to a few promising candidates. My goal is to match
+                catalysts with reactions by identfiying kinetic bottlenecks that can be manipulated with
+                smart catalyst design. 
+              </p>
             </div>
           </div>
         </div> 
       </div>
     </div>
-
+  </div>
+  <div class="d-block d-md-none container-flui d-flex flex-column custom-vh-75 z-2 position-relative text-center"> <!-- All small screen stuff -->
+    <div class="row align-center py-4">
+      <!-- <div class="col-2"></div> -->
+      <div class="col-8 offset-2">
+        <img src="/images/headshot_atoms_circle.png", class="image-fluid", style="max-width: 80%;">
+      </div>
+      <p class="fs-2 text-light">PhD Student, CU Boulder</p>
+      <p class="fs-2 text-light">Atomic Broker</p>
+    </div>
+    <div class="row align-center py-2">
+      <div class="col-2"></div>
+      <div class="col-2">
+        <a href="https://www.linkedin.com/in/cooper-tezak-75a15b165/" class="text-light" target="_blank">
+          <img src="/images/linkedin-app-white-icon.png" class="img-fluid" alt="LinkedIn">
+        </a>
+      </div>
+      <div class="col-2">
+        <a href="https://github.com/cote3804" class="text-light" target="_blank">
+          <img src="/images/github-logo-white.webp" class="img-fluid" alt="GitHub">
+        </a>
+      </div>
+      <div class="col-2">
+        <a href="https://scholar.google.com/citations?user=XBZAHmIAAAAJ&hl=en" class="text-light" target="_blank">
+          <img src="/images/scholar_logo_white.png" class="img-fluid" alt="GitHub">
+        </a>
+      </div>
+      <div class="col-2">
+        <a href="mailto:cote3804@colorado.edu" class="text-light" target="_blank">
+          <img src="/images/email_iocn.png" class="img-fluid" alt="GitHub">
+        </a>
+      </div>
+      <div class="col-2"></div>
+    </div>
+    <div class="row py-2">
+    <div class="col px-5">
+      <p class="fs-2 fw-bold text-center text-light">Matching catalysts with reactions through simulation</p>
+      <p class="fs-5 text-light" style="text-align: justify;">I use grand-canonical density functional theory to simulate 
+        the electrified interface between catalyst and electrolyte. My simulations have shown
+        previously unknown potential dependence of fundamental catalytic phenomena that, across material
+        spaces, have significant impacts on electrocatalyst design. The data generated throughout my PhD is 
+        <a href="https://beastdb.nrel.gov/">publicly available</a> 
+        and accompanied by an user interface that facilitates data exploration.</p>
+        <p class="fs-5 text-light" style="text-align: justify;">
+        I seek generalizable chemical knoweldge that can be used to design catalysts for arbitray
+        reactions. By smartly restricting chemical space and leveraging massively parallel workflows,
+        I can quickly downselect material spaces to a few promising candidates. My goal is to match
+        catalysts with reactions by identfiying kinetic bottlenecks that can be manipulated with
+        smart catalyst design. 
+      </p>
+    </div>
+    </div>
+  </div>
 <script>
   // Configure MathJax
   window.MathJax = {
@@ -74,5 +168,6 @@
     MathJax.typesetPromise();
   });
 </script>
+@@include('navbar_js.html')
 </body>
 </html>
\ No newline at end of file
diff --git a/bootstrap-portfolio/source/navbar.html b/bootstrap-portfolio/source/navbar.html
index de8a157..c7d72c2 100644
--- a/bootstrap-portfolio/source/navbar.html
+++ b/bootstrap-portfolio/source/navbar.html
@@ -1,17 +1,16 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-navbardark">
+<nav class="navbar navbar-expand-sm navbar-dark bg-navbardark">
     <div class="container-fluid">
-      <a class="navbar-brand h1" href="#"></a>
-      <img src="/images/white_atom_logo_tiny.png" alt="Logo" class="img-fluid">
+      <img src="/images/white_atom_logo_micro.png" alt="Logo" class="img-fluid">
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse justify-content-start" id="navbarSupportedContent">
         <ul class="navbar-nav">
           <li class="nav-item">
-            <a class="nav-link active fs-4" aria-current="page" href="index.html">Home</a>
+            <a class="nav-link fs-4" aria-current="page" href="index.html">Home</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle fs-4" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <a class="nav-link dropdown-toggle fs-4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Publications
             </a>
             <ul class="dropdown-menu">
@@ -23,9 +22,9 @@
           <li class="nav-item">
             <a class="nav-link fs-4" href="research.html">Research</a>
           </li>
-          <li class="nav-item">
+          <!-- <li class="nav-item">
             <a class="nav-link fs-4" href="biography.html">Bio</a>
-          </li>
+          </li> -->
         </ul>
       </div>
     </div>
diff --git a/bootstrap-portfolio/source/navbar_js.html b/bootstrap-portfolio/source/navbar_js.html
new file mode 100644
index 0000000..0bdf09e
--- /dev/null
+++ b/bootstrap-portfolio/source/navbar_js.html
@@ -0,0 +1,11 @@
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const currentPage = window.location.pathname.split("/").pop();
+        const navItems = document.querySelectorAll('.nav-link');
+        navItems.forEach(item => {
+            if (item.getAttribute('href') === currentPage) {
+                item.classList.add('active');
+            }
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/bootstrap-portfolio/source/research.html b/bootstrap-portfolio/source/research.html
index d9133ab..fb33ec5 100644
--- a/bootstrap-portfolio/source/research.html
+++ b/bootstrap-portfolio/source/research.html
@@ -34,7 +34,7 @@
     <div class="h1 text-light">Research</div>
   <div class="row pt-5">
     <div class="col">
-      <div class="h3 text-light">Electrocatalyst Discovery</div>
+      <div class="h3 text-light">Electrocatalytic Scaling Relations</div>
       <div class="p-0 text-light">
         I combine electrochemical physics simulations with thermodynamic proxies of catalyst
         activity to screen broad material spaces for active catalysts. Typical electrochemical studies
@@ -44,8 +44,8 @@
         one half that of a hydrogen atom. <br> <br>
         \( G_{H^+} + G_{e^-} = -\frac{1}{2} G_{H_2} \) <br> <br>
         The free energy of the proton is potential-independent and the potential dependence of the electron is 
-        given by the difference in potential from 0V vs SHE.<br> <br>
-        \( G_{e^-} = G_{e^-}^0 - (U - U_{SHE}^0)\) <br> <br>
+        given by the potential with respect to the standard hydrogen electrode (SHE).<br> <br>
+        \( G_{e^-} = G_{e^-}^0 - U_{SHE}\) <br> <br>
         This then allows one to estimate the 
         <a href="https://chemistry-europe.onlinelibrary.wiley.com/doi/abs/10.1002/cssc.201500322">Limiting Potential \(U_{L}\)</a>
         at which an electrochemical step becomes favorable by dividing the free energy change of that step by the number
@@ -69,14 +69,46 @@
         of the 
         <a href="https://pubs.acs.org/doi/10.1021/ar1000956">energetic span</a>, which measures the largest barrier in a
         cyclic catalytic cycle. I used this descriptor to re-evaluate the typical CHE volcano plots for the electrochemical nitrogen
-        reduction reaction to understand how explicit inclusion of potential changes catalyst scaling relations. <br> <br>
+        reduction reaction to understand how explicit inclusion of potential changes catalyst scaling relations. 
+        <a href="https://pubs.acs.org/doi/abs/10.1021/acscatal.3c01978">[5]</a>
+        <br> <br>
         
-
+        <div class="h3 text-light">Electrocatalyst Screening</div>
+        Using the scaling relations developed above, I screened a material space for promising nitrogen reduction catalysts.
+        This space consisted of binary metal-covalent alloys that combined p-block dopants with transition metals. We found that
+        even the most active catalysts in our dataset did not surpass the the activity of the most active metal catalysts because these 
+        covalent alloy materials fail to favorably break scaling relations.        
+        <a href="https://onlinelibrary.wiley.com/doi/abs/10.1002/aenm.202304559">[6]</a>
+        <br><br>
+        Furthermore, we found that traditional electronic structure descriptors like d-band and p-band centers were unable to 
+        predict trends in binding energy across the dataset. We believe this is due to the highly geometry-dependent change in the renormalized
+        adsorbate frontier orbital energies, which lead to substantially different degrees of bonding for materials with similar d-band centers.
+        To correctly precict trends in binding energy across complex material spaces, it is necessary to incorporate the geometry of the surface.
+        <br><br>
+        <div class="h3 text-light">Bayesian Optimization of Battery Electrolyte Compositions</div>
+        I have recently begun working with 
+        <a href="https://www.colorado.edu/lab/ban/">Chunmei Ban</a>
+        on optimizing experimental electrolyte composition for Na-ion batteries. I lead the effort to develop a Bayesian optimization framework
+        that uses a gaussian process to estimate the charge capacity at a given cycle based on the mass weights of electrolyte components. 
+        <br><br>
       </div>
     </div>
-      <div class="col">
+    <div class="col">
+      <img src="/images/volcano.png" class="img-fluid" alt="Volcano Plot">
+      <p class="fs-6 px-5 text-light" style="text-align: justify;">
+        Re-evaluated nitrogen reduction reaction scaling relations using GC-DFT and the \( \Phi_{max} \) activity descriptor. Unlike
+        previous scaling relations, there is a flat peak shaving off the top of the volcano due to the chemical desoption of \( NH_3 \) that is less sensitive
+        to the applied potential than the left and right scaling lines, which are comprised of explicit electron transfer steps. These volcanos indicate that 
+        tuning the activity of catalysts near the peak of the volcano at modest potentials necessitates selective destabilization of the \( NH_3^* \) state.
+        <br> <br>
+      </p>
       <img src="/images/spans_bar_chart.png" class="img-fluid" alt="Spans Bar Chart">
-      <img src="/images/volvano.png" class="img-fluid" alt="Volcano Plot">
+      <p class="fs-6 px-5 text-light" style="text-align: justify;">
+      Select materials from the binary covalent alloy screening study. We found that the most active surfaces in our dataset tended
+      to have less occupied d-orbitals that were capable of strongly reducing the \( N_2 \) triple bond. However, all materials were
+      inevitably limited by the desorption of \( NH_3* \) from the surface. <br> <br>
+      </p>
     </div>
   </div>
+  @@include('navbar_js.html')
 </body>
\ No newline at end of file
