diff --git a/src/templates/base.jinja b/src/templates/base.jinja
index e6c3fcda..3b06c7d4 100644
--- a/src/templates/base.jinja
+++ b/src/templates/base.jinja
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -22,7 +22,7 @@
         <!-- Web App Meta -->
         <meta name="apple-mobile-web-app-title" content="GitIngest">
         <meta name="application-name" content="GitIngest">
-        <meta name="theme-color" content="#FCA847">
+        <meta name="theme-color" content="#c0c0c0">
         <meta name="apple-mobile-web-app-capable" content="yes">
         <meta name="apple-mobile-web-app-status-bar-style" content="default">
         <!-- OpenGraph Meta Tags -->
@@ -36,6 +36,15 @@
             {% block title %}Git ingest{% endblock %}
         </title>
         <script src="https://cdn.tailwindcss.com"></script>
+        <!-- Add Tailwind configuration right after loading Tailwind -->
+        <script>
+            tailwind.config = {
+                darkMode: 'class', // Enable class-based dark mode
+                theme: {
+                    extend: {}
+                }
+            }
+        </script>
         <script src="/static/js/utils.js"></script>
         <script src="/static/js/snow.js"></script>
         <style>
@@ -51,7 +60,7 @@
         </style>
         {% block extra_head %}{% endblock %}
     </head>
-    <body class="bg-[#FFFDF8] min-h-screen flex flex-col">
+    <body class="bg-[#FFFDF8] dark:bg-zinc-800 dark:text-white min-h-screen flex flex-col transition-colors duration-200">
         <canvas id="snow-canvas"></canvas>
         {% include 'components/navbar.jinja' %}
         <!-- Main content wrapper -->
diff --git a/src/templates/components/footer.jinja b/src/templates/components/footer.jinja
index e8ffa9ee..f7e642da 100644
--- a/src/templates/components/footer.jinja
+++ b/src/templates/components/footer.jinja
@@ -1,6 +1,6 @@
-<footer class="w-full border-t-[3px] border-gray-900 mt-auto">
+<footer class="w-full border-t-[3px] border-gray-900 dark:border-gray-400 mt-auto">
     <div class="max-w-4xl mx-auto px-4 py-4">
-        <div class="flex justify-center items-center text-gray-900 text-sm">
+        <div class="flex justify-center items-center text-gray-900 dark:text-white text-sm">
             <div class="flex flex-col items-center">
                 <div class="flex items-center">
                     made with ❤️ by
diff --git a/src/templates/components/github_form.jinja b/src/templates/components/github_form.jinja
index 7be65aee..411887c9 100644
--- a/src/templates/components/github_form.jinja
+++ b/src/templates/components/github_form.jinja
@@ -1,6 +1,6 @@
 <div class="relative">
     <div class="w-full h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
-    <div class="rounded-xl relative z-20 pl-8 sm:pl-10 pr-8 sm:pr-16 py-8 border-[3px] border-gray-900 bg-[#fff4da]">
+    <div class="rounded-xl relative z-20 pl-8 sm:pl-10 pr-8 sm:pr-16 py-8 border-[3px] border-gray-900 dark:border-gray-900 bg-[#fff4da] dark:bg-[#343a70]">
         <img src="https://cdn.devdojo.com/images/january2023/shape-1.png"
              class="absolute md:block hidden left-0 h-[4.5rem] w-[4.5rem] bottom-0 -translate-x-full ml-3">
         <form class="flex md:flex-row flex-col w-full h-full justify-center items-stretch space-y-5 md:space-y-0 md:space-x-5"
@@ -14,12 +14,12 @@
                        placeholder="https://github.com/..."
                        value="{{ github_url if github_url else '' }}"
                        required
-                       class="border-[3px] w-full relative z-20 border-gray-900 placeholder-gray-600 text-lg font-medium focus:outline-none py-3.5 px-6 rounded">
+                       class="border-[3px] w-full relative z-20 border-gray-900 dark:border-gray-900 placeholder-gray-600 dark:placeholder-gray-300 text-gray-900 dark:text-white bg-white dark:bg-zinc-700 text-lg font-medium focus:outline-none py-3.5 px-6 rounded">
             </div>
             <div class="relative w-auto flex-shrink-0 h-full group">
                 <div class="w-full h-full rounded bg-gray-800 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
                 <button type="submit"
-                        class="py-3.5 rounded px-6 group-hover:-translate-y-px group-hover:-translate-x-px ease-out duration-300 z-20 relative w-full border-[3px] border-gray-900 font-medium bg-[#ffc480] tracking-wide text-lg flex-shrink-0 text-gray-900">
+                        class="py-3.5 rounded px-6 group-hover:-translate-y-px group-hover:-translate-x-px ease-out duration-300 z-20 relative w-full border-[3px] border-gray-900 dark:border-gray-900 font-medium bg-[#ffc480] dark:bg-indigo-500 tracking-wide text-lg flex-shrink-0 text-gray-900">
                     Ingest
                 </button>
             </div>
@@ -31,18 +31,18 @@
             <div class="w-[200px] sm:w-[250px] mr-9 mt-4">
                 <div class="relative">
                     <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
-                    <div class="flex relative z-20 border-[3px] border-gray-900 rounded bg-white">
+                    <div class="flex relative z-20 border-[3px] border-gray-900 dark:border-gray-900 rounded bg-white dark:bg-zinc-700">
                         <div class="relative flex items-center">
                             <select id="pattern_type"
                                     name="pattern_type"
-                                    class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] focus:outline-none border-r-[3px] border-gray-900">
+                                    class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] dark:bg-zinc-600 dark:text-white focus:outline-none border-r-[3px] border-gray-900 dark:border-gray-600">
                                 <option value="exclude"
                                         {% if pattern_type == 'exclude' or not pattern_type %}selected{% endif %}>
                                     Exclude
                                 </option>
                                 <option value="include" {% if pattern_type == 'include' %}selected{% endif %}>Include</option>
                             </select>
-                            <svg class="absolute right-2 w-4 h-4 pointer-events-none"
+                            <svg class="absolute right-2 w-4 h-4 pointer-events-none dark:text-white"
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 24 24"
                                  fill="none"
@@ -58,12 +58,12 @@
                                name="pattern"
                                placeholder="*.md, src/ "
                                value="{{ pattern if pattern else '' }}"
-                               class=" py-2 px-2 bg-[#E8F0FE] focus:outline-none w-full">
+                               class="py-2 px-2 bg-[#E8F0FE] dark:bg-zinc-600 dark:text-white focus:outline-none w-full">
                     </div>
                 </div>
             </div>
             <div class="w-[200px] sm:w-[200px] mt-3">
-                <label for="file_size" class="block text-gray-700 mb-1">
+                <label for="file_size" class="block text-gray-700 dark:text-gray-300 mb-1">
                     Include files under: <span id="size_value" class="font-bold">50kb</span>
                 </label>
                 <input type="range"
@@ -73,17 +73,17 @@
                        max="500"
                        required
                        value="{{ default_file_size }}"
-                       class="w-full h-3 bg-[#FAFAFA] bg-no-repeat bg-[length:50%_100%] bg-[#ebdbb7] appearance-none border-[3px] border-gray-900 rounded-sm focus:outline-none bg-gradient-to-r from-[#FE4A60] to-[#FE4A60] [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-7 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-solid [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-gray-900 [&::-webkit-slider-thumb]:shadow-[3px_3px_0_#000]  ">
+                       class="w-full h-3 bg-[#FAFAFA] dark:bg-zinc-600 bg-no-repeat bg-[length:50%_100%] bg-[#ebdbb7] appearance-none border-[3px] border-gray-900 dark:border-gray-600 rounded-sm focus:outline-none bg-gradient-to-r from-[#FE4A60] to-[#FE4A60] [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-7 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:dark:bg-zinc-300 [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-solid [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-gray-900 [&::-webkit-slider-thumb]:dark:border-gray-600 [&::-webkit-slider-thumb]:shadow-[3px_3px_0_#000]">
             </div>
         </div>
         {% if show_examples %}
             <!-- Example repositories section -->
             <div class="mt-4">
-                <p class="opacity-70 mb-1">Try these example repositories:</p>
+                <p class="opacity-70 dark:text-gray-300 mb-1">Try these example repositories:</p>
                 <div class="flex flex-wrap gap-2">
                     {% for example in examples %}
                         <button onclick="submitExample('{{ example.url }}')"
-                                class="px-4 py-1 bg-[#EBDBB7] hover:bg-[#FFC480] text-gray-900 rounded transition-colors duration-200 border-[3px] border-gray-900 relative hover:-translate-y-px hover:-translate-x-px">
+                                class="px-4 py-1 bg-[#EBDBB7] dark:bg-zinc-700 hover:bg-[#FFC480] dark:hover:bg-indigo-500 text-gray-900 dark:text-white rounded transition-colors duration-200 border-[3px] border-gray-900 dark:border-gray-900 relative hover:-translate-y-px hover:-translate-x-px">
                             {{ example.name }}
                         </button>
                     {% endfor %}
diff --git a/src/templates/components/navbar.jinja b/src/templates/components/navbar.jinja
index 6f4b2ce0..c8a8e93e 100644
--- a/src/templates/components/navbar.jinja
+++ b/src/templates/components/navbar.jinja
@@ -20,27 +20,67 @@
     }
 
     fetchGitHubStars();
+
+    // Dark mode toggle functionality
+    function initDarkMode() {
+        // Check if user has previously set a preference
+        const isDark = localStorage.getItem('darkMode') === 'true' ||
+                      (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+        if (isDark) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+        updateDarkModeIcon(isDark);
+    }
+
+    function toggleDarkMode() {
+        const isDark = document.documentElement.classList.toggle('dark');
+        localStorage.setItem('darkMode', isDark);
+        updateDarkModeIcon(isDark);
+    }
+
+    function updateDarkModeIcon(isDark) {
+        const moonIcon = document.getElementById('moon-icon');
+        const sunIcon = document.getElementById('sun-icon');
+
+        if (isDark) {
+            moonIcon.classList.add('hidden');
+            sunIcon.classList.remove('hidden');
+        } else {
+            moonIcon.classList.remove('hidden');
+            sunIcon.classList.add('hidden');
+        }
+    }
+
+    // Initialize dark mode on page load
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initDarkMode);
+    } else {
+        initDarkMode();
+    }
 </script>
-<header class="sticky top-0 bg-[#FFFDF8] border-b-[3px] border-gray-900 z-50">
+<header class="sticky top-0 bg-[#FFFDF8] dark:bg-zinc-900 border-b-[3px] border-gray-900 dark:border-gray-400 z-50">
     <div class="max-w-4xl mx-auto px-4">
         <div class="flex justify-between items-center h-16">
             <!-- Logo -->
             <div class="flex items-center gap-4">
                 <h1 class="text-2xl font-bold tracking-tight">
                     <a href="/" class="hover:opacity-80 transition-opacity">
-                        <span class="text-gray-900">Git</span><span class="text-[#fca847]">ingest</span>
+                        <span class="text-gray-900 dark:text-white">Git</span><span class="text-[#FE4A60] dark:text-[#CBD538]">ingest</span>
                     </a>
                 </h1>
             </div>
             <!-- Navigation with updated styling -->
             <nav class="flex items-center space-x-6">
                 <a href="/api"
-                   class="text-gray-900 hover:-translate-y-0.5 transition-transform">API</a>
+                   class="text-gray-900 dark:text-white hover:-translate-y-0.5 transition-transform">API</a>
                 <div class="flex items-center gap-2">
                     <a href="https://github.com/cyclotruc/gitingest"
                        target="_blank"
                        rel="noopener noreferrer"
-                       class="text-gray-900 hover:-translate-y-0.5 transition-transform flex items-center gap-1.5">
+                       class="text-gray-900 dark:text-white hover:-translate-y-0.5 transition-transform flex items-center gap-1.5">
                         <svg class="w-4 h-4"
                              fill="currentColor"
                              viewBox="0 0 24 24"
@@ -50,7 +90,7 @@
                         </svg>
                         GitHub
                     </a>
-                    <div class="flex items-center text-sm text-gray-600">
+                    <div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
                         <svg class="w-4 h-4 text-[#ffc480] mr-1"
                              fill="currentColor"
                              viewBox="0 0 20 20">
@@ -59,6 +99,28 @@
                         <span id="github-stars">0</span>
                     </div>
                 </div>
+                <button onclick="toggleDarkMode()"
+                        class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                        aria-label="Toggle dark mode">
+                    <!-- Moon icon -->
+                    <svg id="moon-icon"
+                         class="w-5 h-5 text-gray-900 dark:text-white"
+                         fill="none"
+                         stroke="currentColor"
+                         viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z">
+                        </path>
+                    </svg>
+                    <!-- Sun icon -->
+                    <svg id="sun-icon"
+                         class="hidden w-5 h-5 text-gray-900 dark:text-white"
+                         fill="none"
+                         stroke="currentColor"
+                         viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z">
+                        </path>
+                    </svg>
+                </button>
             </nav>
         </div>
     </div>
diff --git a/src/templates/components/result.jinja b/src/templates/components/result.jinja
index cd0a9783..fbe82eb5 100644
--- a/src/templates/components/result.jinja
+++ b/src/templates/components/result.jinja
@@ -2,24 +2,24 @@
     <div class="mt-10" data-results>
         <div class="relative">
             <div class="w-full h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
-            <div class="bg-[#fafafa] rounded-xl border-[3px] border-gray-900 p-6 relative z-20 space-y-6">
+            <div class="bg-[#fafafa] dark:bg-zinc-800 rounded-xl border-[3px] border-gray-900 dark:border-gray-600 p-6 relative z-20 space-y-6">
                 <!-- Summary and Directory Structure -->
                 <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
                     <!-- Summary Column -->
                     <div class="md:col-span-5">
                         <div class="flex justify-between items-center mb-4 py-2">
-                            <h3 class="text-lg font-bold text-gray-900">Summary</h3>
+                            <h3 class="text-lg font-bold text-gray-900 dark:text-white">Summary</h3>
                         </div>
                         <div class="relative">
                             <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
-                            <textarea class="w-full h-[160px] p-4 bg-[#fff4da] border-[3px] border-gray-900 rounded font-mono text-sm resize-none focus:outline-none relative z-10"
+                            <textarea class="w-full h-[160px] p-4 bg-[#fff4da] dark:bg-zinc-700 border-[3px] border-gray-900 dark:border-gray-600 rounded font-mono text-sm text-gray-900 dark:text-white resize-none focus:outline-none relative z-10"
                                       readonly>{{ summary }}</textarea>
                         </div>
                         {% if ingest_id %}
                             <div class="relative mt-4 inline-block group">
                                 <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
                                 <a href="/download/{{ ingest_id }}"
-                                   class="inline-flex items-center px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10">
+                                   class="inline-flex items-center px-4 py-2 bg-[#ffc480] dark:bg-[#c0c0c0] border-[3px] border-gray-900 dark:border-gray-600 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10">
                                     <svg class="w-4 h-4 mr-2"
                                          fill="none"
                                          stroke="currentColor"
@@ -32,7 +32,7 @@
                             <div class="relative mt-4 inline-block group ml-4">
                                 <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
                                 <button onclick="copyFullDigest()"
-                                        class="inline-flex items-center px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10">
+                                        class="inline-flex items-center px-4 py-2 bg-[#ffc480] dark:bg-[#c0c0c0] border-[3px] border-gray-900 dark:border-gray-600 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10">
                                     <svg class="w-4 h-4 mr-2"
                                          fill="none"
                                          stroke="currentColor"
@@ -47,11 +47,11 @@
                     <!-- Directory Structure Column -->
                     <div class="md:col-span-7">
                         <div class="flex justify-between items-center mb-4">
-                            <h3 class="text-lg font-bold text-gray-900">Directory Structure</h3>
+                            <h3 class="text-lg font-bold text-gray-900 dark:text-white">Directory Structure</h3>
                             <div class="relative group">
                                 <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
                                 <button onclick="copyText('directory-structure')"
-                                        class="px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10 flex items-center gap-2">
+                                        class="px-4 py-2 bg-[#ffc480] dark:bg-[#c0c0c0] border-[3px] border-gray-900 dark:border-gray-600 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10 flex items-center gap-2">
                                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                                     </svg>
@@ -61,7 +61,7 @@
                         </div>
                         <div class="relative">
                             <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
-                            <textarea class="directory-structure w-full p-4 bg-[#fff4da] border-[3px] border-gray-900 rounded font-mono text-sm resize-y focus:outline-none relative z-10 h-[215px]"
+                            <textarea class="directory-structure w-full p-4 bg-[#fff4da] dark:bg-zinc-700 border-[3px] border-gray-900 dark:border-gray-600 rounded font-mono text-sm text-gray-900 dark:text-white resize-y focus:outline-none relative z-10 h-[215px]"
                                       readonly>{{ tree }}</textarea>
                         </div>
                     </div>
@@ -69,11 +69,11 @@
                 <!-- Full Digest -->
                 <div>
                     <div class="flex justify-between items-center mb-4">
-                        <h3 class="text-lg font-bold text-gray-900">Files Content</h3>
+                        <h3 class="text-lg font-bold text-gray-900 dark:text-white">Files Content</h3>
                         <div class="relative group">
                             <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
                             <button onclick="copyText('result-text')"
-                                    class="px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10 flex items-center gap-2">
+                                    class="px-4 py-2 bg-[#ffc480] dark:bg-[#c0c0c0] border-[3px] border-gray-900 dark:border-gray-600 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10 flex items-center gap-2">
                                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                                 </svg>
@@ -83,7 +83,7 @@
                     </div>
                     <div class="relative">
                         <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
-                        <textarea class="result-text w-full p-4 bg-[#fff4da] border-[3px] border-gray-900 rounded font-mono text-sm resize-y focus:outline-none relative z-10"
+                        <textarea class="result-text w-full p-4 bg-[#fff4da] dark:bg-zinc-700 border-[3px] border-gray-900 dark:border-gray-600 rounded font-mono text-sm text-gray-900 dark:text-white resize-y focus:outline-none relative z-10"
                                   style="min-height: {{ '600px' if content else 'calc(100vh-800px)' }}"
                                   readonly>{{ content }}</textarea>
                     </div>
diff --git a/src/templates/index.jinja b/src/templates/index.jinja
index e29066f6..a4ef3d69 100644
--- a/src/templates/index.jinja
+++ b/src/templates/index.jinja
@@ -35,13 +35,13 @@
                 </path>
             </svg>
         </div>
-        <p class="text-gray-600 text-lg max-w-2xl mx-auto text-center mt-8">
+        <p class="text-gray-600 dark:text-gray-300 text-lg max-w-2xl mx-auto text-center mt-8">
             Turn any Git repository into a simple text ingest of its codebase.
         </p>
-        <p class="text-gray-600 text-lg max-w-2xl mx-auto text-center mt-0">
+        <p class="text-gray-600 dark:text-gray-300 text-lg max-w-2xl mx-auto text-center mt-0">
             This is useful for feeding a codebase into any LLM.
         </p>
-        <p class="text-gray-600 text-lg max-w-2xl mx-auto text-center mt-2">
+        <p class="text-gray-600 dark:text-gray-300 text-lg max-w-2xl mx-auto text-center mt-2">
             You can also replace 'hub' with 'ingest' in any Github URL
         </p>
     </div>
