diff --git a/internal/http/router.go b/internal/http/router.go
index ec0b490..adb5993 100644
--- a/internal/http/router.go
+++ b/internal/http/router.go
@@ -72,4 +72,8 @@ func populate(web, api *gin.RouterGroup) {
 	web.GET("/connections/tree", func(c *gin.Context) {
 		c.String(200, database.TableTree(c))
 	})
+
+	// This should return an HTML template which will be used to auto or not
+	// auto send the query to the server.
+	web.GET("/query/auto", templates.ToggleQueryType)
 }
diff --git a/internal/templates/query.go b/internal/templates/query.go
new file mode 100644
index 0000000..e199e23
--- /dev/null
+++ b/internal/templates/query.go
@@ -0,0 +1,51 @@
+package templates
+
+import (
+	"github.com/gin-gonic/gin"
+)
+
+const MANUAL_QUERY string = `
+	<div id="query-main" class="mb-4">
+		<div class="flex items-center justify-between">
+			<label for="sql" class="block text-sm font-medium text-gray-700">SQL Query</label>
+			<div class="flex items-center space-x-6">
+				<form class="flex items-center space-x-2" hx-get="/v1/web/query/auto" hx-swap="outerHTML" hx-target="#query-main" hx-trigger="input">
+					<label for="auto-toggle" class="text-sm font-medium text-gray-700">Auto-Run</label>
+					<input type="checkbox" name="toggle" class="toggle-checkbox">
+				</form>
+				<button hx-post="/v1/api/query" hx-trigger="click" hx-swap="outerHTML" hx-target="#query-result" hx-indicator="#spinner" hx-include="#sql" class="bg-blue-500 text-white py-2 px-3 rounded-md text-xs md:text-sm">Run Query</button>
+			</div>
+		</div>
+		<textarea id="sql" name="sql" rows="4" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea>
+		<p id="spinner" class="text-gray-700 text-sm px-1 py-2 htmx-indicator hidden"> Query running... </p>
+		<p id="query-error" hx-swap-oob="outerHTML" class="text-red-500 py-2 text-sm hidden"></p>
+	</div>
+`
+
+const AUTO_QUERY string = `
+	<div id="query-main" class="mb-4">
+		<div class="flex items-center justify-between">
+			<label for="sql" class="block text-sm font-medium text-gray-700">SQL Query</label>
+			<div class="flex items-center space-x-6">
+				<form class="flex items-center space-x-2" hx-get="/v1/web/query/auto" hx-swap="outerHTML" hx-target="#query-main" hx-trigger="input">
+					<label for="auto-toggle" class="text-sm font-medium text-gray-700">Auto-Run</label>
+					<input type="checkbox" name="toggle" class="toggle-checkbox" checked>
+				</form>
+				<button class="bg-blue-500 text-white py-2 px-3 rounded-md text-xs md:text-sm opacity-60 cursor-default" title="Disable Auto-Run to use manual queries." disabled>Run Query</button>
+			</div>
+		</div>
+		<textarea id="sql" name="sql" rows="4" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" hx-post="/v1/api/query" hx-trigger="input delay:500ms" hx-swap="outerHTML" hx-target="#query-result" hx-indicator="#spinner"></textarea>
+		<p id="spinner" class="text-gray-700 text-sm px-1 py-2 htmx-indicator hidden"> Query running... </p>
+		<p id="query-error" hx-swap-oob="outerHTML" class="text-red-500 py-2 text-sm hidden"></p>
+	</div>
+`
+
+func ToggleQueryType(c *gin.Context) {
+	toggled := c.Query("toggle")
+
+	if toggled == "on" {
+		c.String(200, AUTO_QUERY)
+	} else {
+		c.String(200, MANUAL_QUERY)
+	}
+}
diff --git a/web/static/styles/main.css b/web/static/styles/main.css
index a593e8d..8a54770 100644
--- a/web/static/styles/main.css
+++ b/web/static/styles/main.css
@@ -583,6 +583,11 @@ video {
   grid-column: span 2 / span 2;
 }
 
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -593,11 +598,6 @@ video {
   margin-bottom: 0.5rem;
 }
 
-.mx-1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -622,6 +622,14 @@ video {
   margin-top: 1rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
 .block {
   display: block;
 }
@@ -722,6 +730,18 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.cursor-default {
+  cursor: default;
+}
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -778,6 +798,18 @@ video {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-x-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(2rem * var(--tw-space-x-reverse));
+  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -875,6 +907,21 @@ video {
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
+.bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+}
+
+.bg-blue-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -926,6 +973,11 @@ video {
   padding-bottom: 1rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1027,6 +1079,22 @@ video {
   opacity: 0;
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-60 {
+  opacity: 0.6;
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
+.opacity-65 {
+  opacity: 0.65;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1045,12 +1113,6 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .duration-150 {
   transition-duration: 150ms;
 }
@@ -1059,10 +1121,6 @@ video {
   transition-duration: 300ms;
 }
 
-.ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1092,6 +1150,16 @@ video {
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
 
+.disabled\:bg-red-500:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
+.disabled\:px-5:disabled {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 @media (min-width: 640px) {
   .sm\:text-sm {
     font-size: 0.875rem;
@@ -1116,4 +1184,9 @@ video {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  .md\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
 }
diff --git a/web/templates/index.html b/web/templates/index.html
index 6544754..629f8bd 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -8,6 +8,11 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
     <script src="https://unpkg.com/htmx.org@2.0.1"></script>
     <link rel="icon" type="image/png" href="/v1/web/assets/favicon.ico">
+    <style>
+      .htmx-request {
+        display: block;
+      }
+    </style>
   </head>
 
   <body class="bg-gray-100">
@@ -60,12 +65,32 @@
         <div class="w-full md:w-3/4 p-4">
           <main>
             <!-- Query Input -->
-            <form class="mb-4" hx-post="/v1/api/query" hx-trigger="input delay:500ms" hx-swap="outerHTML" hx-target="#query-result" hx-indicator="#spinner">
-              <label for="sql" class="block text-sm font-medium text-gray-700">SQL Query</label>
-              <textarea id="sql" name="sql" rows="4" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea>
-              <p id="spinner" class="text-gray-700 text-sm px-1 py-2 htmx-indicator"> Query running... </p>
+            <div id="query-main" class="mb-4">
+              <div class="flex items-center justify-between">
+                <label for="sql" class="block text-sm font-medium text-gray-700">SQL Query</label>
+                <div class="flex items-center space-x-6">
+                  <form class="flex items-center space-x-2" hx-get="/v1/web/query/auto" hx-swap="outerHTML" hx-target="#query-main" hx-trigger="input">
+                    <label for="auto-toggle" class="text-sm font-medium text-gray-700">Auto-Run</label>
+                    <input type="checkbox" name="toggle" class="toggle-checkbox" checked>
+                  </form>
+
+                  <!-- Manual Query Button -->
+                  <!-- <button hx-post="/v1/api/query" hx-trigger="click" hx-swap="outerHTML" hx-target="#query-result" hx-indicator="#spinner" hx-include="#sql" class="bg-blue-500 text-white py-2 px-3 rounded-md text-xs md:text-sm">Run Query</button> -->
+
+                  <!-- Auto Query Button -->
+                  <button class="bg-blue-500 text-white py-2 px-3 rounded-md text-xs md:text-sm opacity-60 cursor-default" title="Disable Auto-Run to use manual queries." disabled>Run Query</button>
+                </div>
+              </div>
+              
+              <!-- Manual Query Input -->
+              <!-- <textarea id="sql" name="sql" rows="4" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea> -->
+
+              <!-- Auto Query Input -->
+              <textarea id="sql" name="sql" rows="4" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" hx-post="/v1/api/query" hx-trigger="input delay:500ms" hx-swap="outerHTML" hx-target="#query-result" hx-indicator="#spinner"></textarea>
+
+              <p id="spinner" class="text-gray-700 text-sm px-1 py-2 htmx-indicator hidden"> Query running... </p>
               <p id="query-error" hx-swap-oob="outerHTML" class="text-red-500 py-2 text-sm hidden"></p>
-            </form>
+            </div>
 
             <!-- Query Results -->
             <div class="overflow-x-auto overflow-y-hidden bg-white shadow-md rounded-lg">
@@ -182,5 +207,4 @@
     <script defer src="/v1/web/static/scripts/modal.js"></script>
     <script defer src="/v1/web/static/scripts/tree.js"></script>
   </body>
-
 </html>