diff --git a/joke/chuck/index.html b/joke/chuck/index.html
index 8b13789..2283386 100644
--- a/joke/chuck/index.html
+++ b/joke/chuck/index.html
@@ -1 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>TheCursedGroup - Chuck Norris</title>
+    <meta name="description" content="Enjoy a random chuck norris from TheCursedGroup.">
+    <meta name="author" content="TheCursedGroup">
+    <link rel="icon" type="image/x-icon" href="https://i.imgur.com/62s95F1.png">
 
+    <!-- Include Bootstrap CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+
+    <!-- Include Font Awesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
+
+    <!-- Include Moment.js for timestamp -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container">
+            <a class="navbar-brand" href="https://thecursedgroup.github.io/joke/">TheCursedGroup</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="https://thecursedgroup.github.io/joke/">Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://thecursedgroup.github.io/joke/pun/">Puns</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://thecursedgroup.github.io/joke/dad/">Dad</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://thecursedgroup.github.io/joke/chuck/">Chuck</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container mt-5">
+        <div class="row mt-3">
+            <div class="col-12 text-center">
+                <div id="joke-container"></div>
+            </div>
+        </div>
+        <div class="row mt-3">
+            <div class="col-12 text-center">
+                <button type="button" class="btn btn-primary" id="copyButton">
+                    <i class="fas fa-clipboard"></i> Copy Joke
+                </button>
+                <button type="button" class="btn btn-primary" id="reloadButton">
+                    <i class="fas fa-sync-alt"></i> Get New Joke
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="successToast" style="position: absolute; top: 0; right: 0;">
+        <div class="toast-header">
+            <img src="https://i.imgur.com/62s95F1.png" class="rounded me-2 toast-icon" alt="TheCursedGroup">
+            <strong class="me-auto" id="title">TheCursedGroup</strong>
+            <small class="text-body-secondary" id="toastTimestamp"></small>
+            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+        <div class="toast-body" id="successMessage">
+            Joke loaded successfully!
+        </div>
+    </div>
+
+    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="errorToast" style="position: absolute; top: 0; right: 0;">
+        <div class="toast-header">
+            <img src="https://i.imgur.com/62s95F1.png" class="rounded me-2 toast-icon" alt="TheCursedGroup">
+            <strong class="me-auto" id="errorTitle"></strong>
+            <small class="text-body-secondary" id="errorToastTimestamp"></small>
+            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+        <div class="toast-body" id="errorMessage">
+            Error loading joke. Please try again.
+        </div>
+    </div>
+
+    <style>
+        /* Custom CSS to adjust the icon size in the toast */
+        .toast-icon {
+            width: 32px;
+            height: 32px;
+        }
+    </style>
+
+    <script>
+        var toastConfig = {
+            title: "TheCursedGroup",
+            iconUrl: "https://i.imgur.com/62s95F1.png",
+            successMessage: "Joke loaded successfully!",
+            errorMessage: "Error loading joke. Please try again."
+        };
+
+        function fetchJoke() {
+            fetch("https://api.chucknorris.io/jokes/random", {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json'
+                }
+            })
+            .then(response => response.json())
+            .then(data => {
+                // Update the joke content
+                document.getElementById('joke-container').textContent = data.value;
+
+                // Calculate the timestamp using Moment.js
+                var timestamp = moment().subtract(data.updated_at, 'minutes').fromNow();
+
+                // Update the toast timestamp
+                document.getElementById('toastTimestamp').textContent = timestamp;
+
+                // Show the success toast notification
+                var successToast = new bootstrap.Toast(document.getElementById('successToast'));
+                successToast.show();
+
+                // Enable the copy button
+                document.getElementById('copyButton').disabled = false;
+            })
+            .catch(error => {
+                // Calculate the error timestamp using Moment.js
+                var errorTimestamp = moment().subtract(0, 'minutes').fromNow();
+
+                // Update the toast timestamp
+                document.getElementById('errorToastTimestamp').textContent = errorTimestamp;
+
+                // Show the error toast notification
+                var errorToast = new bootstrap.Toast(document.getElementById('errorToast'));
+                errorToast.show();
+
+                // Enable the reload button
+                document.getElementById('reloadButton').disabled = false;
+            });
+        }
+
+        function copyJokeToClipboard() {
+            var jokeText = document.getElementById('joke-container').textContent;
+            var textArea = document.createElement("textarea");
+            textArea.value = jokeText;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+        }
+
+        // Initial fetch when the page loads
+        fetchJoke();
+
+        // Event listener for copy button
+        document.getElementById('copyButton').addEventListener('click', copyJokeToClipboard);
+
+        // Event listener for reload button
+        document.getElementById('reloadButton').addEventListener('click', fetchJoke);
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
+</body>
+</html>
