diff --git a/index.css b/index.css
index 5598a0c..356022d 100644
--- a/index.css
+++ b/index.css
@@ -11,7 +11,7 @@ body {
   font-size: 1.5em;
   background-color: #f9f5d7;
   margin: 100px auto;
-  max-width: 650px;
+  max-width: 675px;
   scroll-behavior: smooth;
   overscroll-behavior-y: none;
   overscroll-behavior-x: none;
@@ -44,7 +44,7 @@ html {
   white-space: nowrap;
   overflow: hidden;
   width: 0;
-  transition: all 0.5s ease;
+  transition: all 0.6s ease;
   display: inline-block;
   vertical-align: top;
   max-width: 0;
@@ -73,3 +73,9 @@ html {
   color: inherit;
   text-decoration: none;
 }
+
+pre code.hljs {
+  border: 1px solid #ccc;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+}
diff --git a/index.html b/index.html
index 49b564d..7d4931f 100644
--- a/index.html
+++ b/index.html
@@ -4,11 +4,11 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="index.css" />
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
     />
-    <link rel="stylesheet" href="index.css" />
     <title>Barrett Ruth</title>
   </head>
 
@@ -62,7 +62,7 @@
       </li>
     </ol>
     <h2>
-      <a href="problems.html">problems</a>
+      <a href="problems.html">interview problems</a>
     </h2>
     <h2><a target="_blank" href="/resume.pdf">resume</a></h2>
     <h2 style="display: none">
diff --git a/problems.css b/problems.css
deleted file mode 100644
index a1694f7..0000000
--- a/problems.css
+++ /dev/null
@@ -1,3 +0,0 @@
-pre code.hljs {
-  background: #f9f5d7;
-}
diff --git a/problems.html b/problems.html
index c1e0523..6328860 100644
--- a/problems.html
+++ b/problems.html
@@ -4,39 +4,12 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="gruvbox-light.css" />
     <link rel="stylesheet" href="index.css" />
-    <link rel="stylesheet" href="problems.css" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
-    <title>Problems - Sliding Window</title>
+    <title>Interview Problems</title>
   </head>
   <body>
-    <h1>Trapping the Rainwaters</h1>
-    <p>Trapping Raintwaters Leetcode Problem Description</p>
-    <p>Example: Finding the maximum sum subarray of a fixed size.</p>
-    <pre><code></code></pre>
-    <h2>Topic Relevance</h2>
-    <p>
-      The sliding window algorithm is widely used in software development for
-      solving optimization problems, especially when dealing with arrays or
-      lists. It's useful in scenarios where you need to track a subset of data
-      within a larger dataset efficiently, making it a crucial tool in fields
-      like data analysis, machine learning, and others.
-    </p>
-    <script>
-      document.querySelector("code").textContent = `
-int trap(vector<int>& height) {
-    auto l = height.begin(), r = height.end() - 1;
-    int level = 0, water = 0;
-    while (l != r + 1) {
-        int lower = *l < *r ? *l++ : *r--;
-        level = max(level, lower);
-        water += level - lower;
-    }
-    return water;
-}
-`;
-      hljs.highlightAll();
-    </script>
+    <h1>Problems</h1>
+    <p>Description</p>
+    <a href="problems/rainwater.html"><h2>Trapping Rainwater</h2></a>
   </body>
 </html>
diff --git a/gruvbox-light.css b/problems/gruvbox-light.css
similarity index 100%
rename from gruvbox-light.css
rename to problems/gruvbox-light.css
diff --git a/problems/rainwater.html b/problems/rainwater.html
new file mode 100644
index 0000000..2c75b0f
--- /dev/null
+++ b/problems/rainwater.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
+    <link rel="stylesheet" href="gruvbox-light.css" />
+    <link rel="stylesheet" href="../index.css" />
+    <title>Sliding Window</title>
+  </head>
+  <body>
+    <h1>Trapping the Rainwaters</h1>
+    <p>Trapping Raintwaters Leetcode Problem Description</p>
+    <p>Example: Finding the maximum sum subarray of a fixed size.</p>
+    <pre><code class="trapping-rainwater"></code></pre>
+    <h2>Problem Statement</h2>
+    <!-- TODO: embed latex -->
+    <h2>Constraints</h2>
+    <h2>Topic Relevance</h2>
+    <p>
+      The sliding window algorithm is widely used in software development for
+      solving optimization problems, especially when dealing with arrays or
+      lists. It's useful in scenarios where you need to track a subset of data
+      within a larger dataset efficiently, making it a crucial tool in fields
+      like data analysis, machine learning, and others.
+    </p>
+    <script>
+      const code = document.querySelector(".trapping-rainwater");
+      code.textContent = `int trap(vector<int>& height) {
+    auto l = height.begin(), r = height.end() - 1;
+    int level = 0, water = 0;
+    while (l != r + 1) {
+        int lower = *l < *r ? *l++ : *r--;
+        level = max(level, lower);
+        water += level - lower;
+    }
+    return water;
+}`;
+      hljs.highlightAll();
+    </script>
+  </body>
+</html>
