diff --git a/gruvbox-light.css b/gruvbox-light.css
new file mode 100644
index 0000000..f1ffb5e
--- /dev/null
+++ b/gruvbox-light.css
@@ -0,0 +1,85 @@
+/* Gruvbox Material Light theme for Highlight.js */
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+code.hljs {
+  padding: 3px 5px;
+}
+
+.hljs {
+  background: #fbf1c7; /* Gruvbox Material Light bg */
+  color: #3c3836; /* Gruvbox Material Light fg */
+}
+
+.hljs-comment {
+  color: #928374; /* Gruvbox Material Light comment */
+}
+
+.hljs-punctuation,
+.hljs-tag {
+  color: #3c3836;
+}
+
+.hljs-tag .hljs-attr,
+.hljs-tag .hljs-name,
+.hljs-attribute,
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-name,
+.hljs-selector-tag {
+  color: #d79921; /* Gruvbox Material Light orange */
+}
+
+.hljs-deletion,
+.hljs-number,
+.hljs-quote,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-string,
+.hljs-template-tag,
+.hljs-type {
+  color: #cc241d; /* Gruvbox Material Light red */
+}
+
+.hljs-section,
+.hljs-title {
+  color: #689d6a; /* Gruvbox Material Light green */
+}
+
+.hljs-link,
+.hljs-operator,
+.hljs-regexp,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-symbol,
+.hljs-template-variable,
+.hljs-variable {
+  color: #689d6a; /* Gruvbox Material Light green */
+}
+
+.hljs-literal {
+  color: #d3869b; /* Gruvbox Material Light pink */
+}
+
+.hljs-addition,
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code {
+  color: #98971a; /* Gruvbox Material Light yellow */
+}
+
+.hljs-meta {
+  color: #689d6a; /* Gruvbox Material Light green */
+}
+
+.hljs-meta .hljs-string {
+  color: #b8bb26; /* Gruvbox Material Light green */
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/styles.css b/index.css
similarity index 100%
rename from styles.css
rename to index.css
diff --git a/index.html b/index.html
index 971c4f4..49b564d 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
     />
-    <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="index.css" />
     <title>Barrett Ruth</title>
   </head>
 
diff --git a/problems.css b/problems.css
new file mode 100644
index 0000000..a1694f7
--- /dev/null
+++ b/problems.css
@@ -0,0 +1,3 @@
+pre code.hljs {
+  background: #f9f5d7;
+}
diff --git a/problems.html b/problems.html
index dbaf900..c1e0523 100644
--- a/problems.html
+++ b/problems.html
@@ -4,25 +4,27 @@
     <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="styles.css" />
+    <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>
   </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 class="sliding-window-algorithm">
-    </pre>
+    <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.
+      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>
-  </body>
-  <script>
-    document.querySelector('.sliding-window-algorithm').innerText = 
-String.raw`
+    <script>
+      document.querySelector("code").textContent = `
 int trap(vector<int>& height) {
     auto l = height.begin(), r = height.end() - 1;
     int level = 0, water = 0;
@@ -33,6 +35,8 @@ int trap(vector<int>& height) {
     }
     return water;
 }
-`
-  </script>
+`;
+      hljs.highlightAll();
+    </script>
+  </body>
 </html>
