diff --git a/lib/towerops_web/controllers/error_html.ex b/lib/towerops_web/controllers/error_html.ex
index 711eb49b..32410ef5 100644
--- a/lib/towerops_web/controllers/error_html.ex
+++ b/lib/towerops_web/controllers/error_html.ex
@@ -6,18 +6,10 @@ defmodule ToweropsWeb.ErrorHTML do
   """
   use ToweropsWeb, :html
 
-  # If you want to customize your error pages,
-  # uncomment the embed_templates/1 call below
-  # and add pages to the error directory:
-  #
-  #   * lib/towerops_web/controllers/error_html/404.html.heex
-  #   * lib/towerops_web/controllers/error_html/500.html.heex
-  #
-  # embed_templates "error_html/*"
+  embed_templates "error_html/*"
 
-  # The default is to render a plain text page based on
-  # the template name. For example, "404.html" becomes
-  # "Not Found".
+  # For any error codes we don't have custom templates for,
+  # render a plain text page based on the template name.
   def render(template, _assigns) do
     Phoenix.Controller.status_message_from_template(template)
   end
diff --git a/lib/towerops_web/controllers/error_html/404.html.heex b/lib/towerops_web/controllers/error_html/404.html.heex
new file mode 100644
index 00000000..134e68ba
--- /dev/null
+++ b/lib/towerops_web/controllers/error_html/404.html.heex
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>404 - Page Not Found</title>
+    <link phx-track-static rel="stylesheet" href="/assets/css/app.css" />
+  </head>
+  <body class="bg-white">
+    <div class="min-h-screen flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
+      <div class="max-w-2xl w-full text-center">
+        <!-- Logo -->
+        <img src="/images/towerops_logo.png" alt="Towerops" class="h-16 w-auto mx-auto mb-8" />
+        
+<!-- Error Code -->
+        <h1 class="text-9xl font-bold text-blue-600 mb-4">404</h1>
+        
+<!-- Squirrel Image -->
+        <div class="mb-8">
+          <img
+            src="/images/squirrel.jpg"
+            alt="Squirrel eating wires"
+            class="rounded-2xl shadow-xl mx-auto max-w-md w-full"
+          />
+        </div>
+        
+<!-- Error Message -->
+        <h2 class="text-3xl font-bold text-slate-900 mb-4">
+          Oops, a squirrel must have eaten that wire!
+        </h2>
+        <p class="text-lg text-slate-600 mb-8">
+          The page you're looking for could not be found.
+        </p>
+        
+<!-- Back Home Button -->
+        <a
+          href="/"
+          class="inline-flex items-center justify-center rounded-full py-3 px-6 text-sm font-semibold bg-blue-600 text-white hover:bg-blue-500 active:bg-blue-800 transition-colors"
+        >
+          Go back home
+        </a>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/lib/towerops_web/controllers/error_html/500.html.heex b/lib/towerops_web/controllers/error_html/500.html.heex
new file mode 100644
index 00000000..563bfd78
--- /dev/null
+++ b/lib/towerops_web/controllers/error_html/500.html.heex
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>500 - Server Error</title>
+    <link phx-track-static rel="stylesheet" href="/assets/css/app.css" />
+  </head>
+  <body class="bg-white">
+    <div class="min-h-screen flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
+      <div class="max-w-2xl w-full text-center">
+        <!-- Logo -->
+        <img src="/images/towerops_logo.png" alt="Towerops" class="h-16 w-auto mx-auto mb-8" />
+        
+<!-- Error Code -->
+        <h1 class="text-9xl font-bold text-blue-600 mb-4">500</h1>
+        
+<!-- Error Message -->
+        <h2 class="text-3xl font-bold text-slate-900 mb-4">
+          Something went wrong on our end
+        </h2>
+        <p class="text-lg text-slate-600 mb-8">
+          We're working on fixing the problem. Please try again later.
+        </p>
+        
+<!-- Back Home Button -->
+        <a
+          href="/"
+          class="inline-flex items-center justify-center rounded-full py-3 px-6 text-sm font-semibold bg-blue-600 text-white hover:bg-blue-500 active:bg-blue-800 transition-colors"
+        >
+          Go back home
+        </a>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/test/towerops_web/controllers/error_html_test.exs b/test/towerops_web/controllers/error_html_test.exs
index 4a20dbc8..11567612 100644
--- a/test/towerops_web/controllers/error_html_test.exs
+++ b/test/towerops_web/controllers/error_html_test.exs
@@ -5,10 +5,15 @@ defmodule ToweropsWeb.ErrorHTMLTest do
   import Phoenix.Template, only: [render_to_string: 4]
 
   test "renders 404.html" do
-    assert render_to_string(ToweropsWeb.ErrorHTML, "404", "html", []) == "Not Found"
+    html = render_to_string(ToweropsWeb.ErrorHTML, "404", "html", [])
+    assert html =~ "404"
+    assert html =~ "Oops, a squirrel must have eaten that wire!"
+    assert html =~ "/images/squirrel.jpg"
   end
 
   test "renders 500.html" do
-    assert render_to_string(ToweropsWeb.ErrorHTML, "500", "html", []) == "Internal Server Error"
+    html = render_to_string(ToweropsWeb.ErrorHTML, "500", "html", [])
+    assert html =~ "500"
+    assert html =~ "Something went wrong on our end"
   end
 end
