diff --git a/cmd/sql-to-logsql/web/ui/package-lock.json b/cmd/sql-to-logsql/web/ui/package-lock.json
index 8378ba7..8aca6d7 100644
--- a/cmd/sql-to-logsql/web/ui/package-lock.json
+++ b/cmd/sql-to-logsql/web/ui/package-lock.json
@@ -14,6 +14,7 @@
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-scroll-area": "^1.2.10",
         "@radix-ui/react-select": "^2.2.6",
+        "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-switch": "^1.2.6",
         "@radix-ui/react-tabs": "^1.1.13",
@@ -1265,6 +1266,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
diff --git a/cmd/sql-to-logsql/web/ui/package.json b/cmd/sql-to-logsql/web/ui/package.json
index 03f8194..e98d700 100644
--- a/cmd/sql-to-logsql/web/ui/package.json
+++ b/cmd/sql-to-logsql/web/ui/package.json
@@ -16,6 +16,7 @@
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
diff --git a/cmd/sql-to-logsql/web/ui/src/components/docs/Docs.tsx b/cmd/sql-to-logsql/web/ui/src/components/docs/Docs.tsx
index a33e331..e46e624 100644
--- a/cmd/sql-to-logsql/web/ui/src/components/docs/Docs.tsx
+++ b/cmd/sql-to-logsql/web/ui/src/components/docs/Docs.tsx
@@ -1,100 +1,108 @@
 import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card.tsx";
 import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui/accordion.tsx";
-import {InfoIcon} from "lucide-react";
+import {InfoIcon, LinkIcon} from "lucide-react";
+import {Button} from "@/components/ui/button.tsx";
+import {Separator} from "@/components/ui/separator.tsx";
 
 export function Docs() {
   return (
-   <Card className={"w-full"}>
+   <Card className={"w-full min-w-[20rem] max-lg:hidden"}>
      <CardHeader>
-       <CardTitle>SQL to LogsQL</CardTitle>
+       <CardTitle>Information about SQL to LogsQL</CardTitle>
        <CardDescription>Service that helps to query VictoriaLogs with SQL</CardDescription>
      </CardHeader>
      <CardContent>
-         <Accordion
-             type="single"
-             collapsible
-             className="w-full"
-             defaultValue="item-1"
-         >
-             <AccordionItem value="statement-types">
-                 <AccordionTrigger className={"cursor-pointer"}>
-                     <span className={"flex flex-row gap-2 items-center"}>
-                         <InfoIcon size={16} />
-                         <span>Supported statement types</span>
-                     </span>
-                 </AccordionTrigger>
-                 <AccordionContent className="flex flex-col gap-4 text-balance">
-                   <p>
-                       <ul className={"list-disc pl-4 pt-2"}>
-                         <li><code>SHOW TABLES / VIEWS</code></li>
-                         <li><code>DESCRIBE TABLE / VIEW ...</code></li>
-                         <li><code>SELECT ... FROM ...</code></li>
-                         <li><code>CREATE VIEW ...</code></li>
-                         <li><code>DROP VIEW ...</code></li>
-                     </ul>
-                   </p>
-                 </AccordionContent>
-             </AccordionItem>
-             <AccordionItem value="clauses">
-                 <AccordionTrigger className={"cursor-pointer"}>
-                     <span className={"flex flex-row gap-2 items-center"}>
-                         <InfoIcon size={16} />
-                         <span>Supported query clauses</span>
-                     </span>
-                 </AccordionTrigger>
-                 <AccordionContent className="flex flex-col gap-4 text-balance">
-                     <p>
-                         <ul className={"list-disc pl-4 pt-2"}>
-                             <li><code>SELECT, DISTINCT, AS, OVER, PARTITION BY</code></li>
-                             <li><code>FROM, WITH</code></li>
-                             <li><code>WHERE, AND, OR</code></li>
-                             <li><code>LEFT JOIN / JOIN / INNER JOIN</code></li>
-                             <li><code>LIKE, NOT LIKE, BETWEEN, IN, NOT IN, IS NULL, IS NOT NULL</code></li>
-                             <li><code>GROUP BY, HAVING</code></li>
-                             <li><code>ORDER BY, ASC, DESC, LIMIT, OFFSET</code></li>
-                             <li><code>UNION ALL</code></li>
-                         </ul>
-                     </p>
-                 </AccordionContent>
-             </AccordionItem>
-             <AccordionItem value="functions">
-                 <AccordionTrigger className={"cursor-pointer"}>
-                     <span className={"flex flex-row gap-2 items-center"}>
-                         <InfoIcon size={16} />
-                         <span>Supported functions and operators</span>
-                     </span>
-                 </AccordionTrigger>
-                 <AccordionContent className="flex flex-col gap-4 text-balance">
-                     <p>
-                         <ul className={"list-disc pl-4 pt-2"}>
-                             <li><code>SUBSTR, CONCAT, LOWER, UPPER, TRIM, LTRIM, RTRIM, REPLACE</code></li>
-                             <li><code>LIKE, NOT LIKE</code></li>
-                             <li><code>BETWEEN</code></li>
-                             <li><code>+,-, *, /, %, ^</code></li>
-                             <li><code>ABS, GREATEST, LEAST, ROUND, FLOOR, CEIL, POW, LN, EXP</code></li>
-                             <li><code>SUM, COUNT, MAX, MIN, AVG</code></li>
-                             <li><code>CURRENT_TIMESTAMP, CURREN_DATE</code></li>
-                         </ul>
-                     </p>
-                 </AccordionContent>
-             </AccordionItem>
-             <AccordionItem value="virtual-tables">
-                 <AccordionTrigger className={"cursor-pointer"}>
-                     <span className={"flex flex-row gap-2 items-center"}>
-                         <InfoIcon size={16} />
-                         <span>Supported data sources</span>
-                     </span>
-                 </AccordionTrigger>
-                 <AccordionContent className="flex flex-col gap-4 text-balance">
-                     <p>
-                         <ul className={"list-disc pl-4 pt-2"}>
-                             <li>Only <b><code>logs</code></b> table is supported</li>
-                             <li>You can create any views</li>
-                         </ul>
-                     </p>
-                 </AccordionContent>
-             </AccordionItem>
-         </Accordion>
+       <a href={"https://github.com/VictoriaMetrics/sql-to-logsql"} target={"_blank"}>
+           <Button variant={"link"} className={"cursor-pointer"}>
+               <LinkIcon />
+               Source code and documentation
+           </Button>
+       </a>
+       <Separator className={"mt-2 ml-3"} />
+       <Accordion
+           type="single"
+           collapsible
+           className="w-full pl-3"
+       >
+         <AccordionItem value="statement-types">
+           <AccordionTrigger className={"cursor-pointer"}>
+             <span className={"flex flex-row gap-2 items-center"}>
+               <InfoIcon size={16} />
+               <span>Supported statement types</span>
+             </span>
+           </AccordionTrigger>
+           <AccordionContent className="flex flex-col gap-4 text-balance">
+             <p>
+               <ul className={"list-disc pl-4 pt-2"}>
+                 <li><code>SHOW TABLES / VIEWS</code></li>
+                 <li><code>DESCRIBE TABLE / VIEW ...</code></li>
+                 <li><code>SELECT ... FROM ...</code></li>
+                 <li><code>CREATE VIEW ...</code></li>
+                 <li><code>DROP VIEW ...</code></li>
+               </ul>
+             </p>
+           </AccordionContent>
+         </AccordionItem>
+         <AccordionItem value="clauses">
+           <AccordionTrigger className={"cursor-pointer"}>
+             <span className={"flex flex-row gap-2 items-center"}>
+               <InfoIcon size={16} />
+               <span>Supported query clauses</span>
+             </span>
+           </AccordionTrigger>
+           <AccordionContent className="flex flex-col gap-4 text-balance">
+             <p>
+               <ul className={"list-disc pl-4 pt-2"}>
+                 <li><code>SELECT, DISTINCT, AS, OVER, PARTITION BY</code></li>
+                 <li><code>FROM, WITH</code></li>
+                 <li><code>WHERE, AND, OR</code></li>
+                 <li><code>LEFT JOIN / JOIN / INNER JOIN</code></li>
+                 <li><code>LIKE, NOT LIKE, BETWEEN, IN, NOT IN, IS NULL, IS NOT NULL</code></li>
+                 <li><code>GROUP BY, HAVING</code></li>
+                 <li><code>ORDER BY, ASC, DESC, LIMIT, OFFSET</code></li>
+                 <li><code>UNION ALL</code></li>
+               </ul>
+             </p>
+           </AccordionContent>
+         </AccordionItem>
+         <AccordionItem value="functions">
+           <AccordionTrigger className={"cursor-pointer"}>
+             <span className={"flex flex-row gap-2 items-center"}>
+               <InfoIcon size={16} />
+               <span>Supported functions and operators</span>
+             </span>
+           </AccordionTrigger>
+           <AccordionContent className="flex flex-col gap-4 text-balance">
+             <p>
+               <ul className={"list-disc pl-4 pt-2"}>
+                 <li><code>SUBSTR, CONCAT, LOWER, UPPER, TRIM, LTRIM, RTRIM, REPLACE</code></li>
+                 <li><code>LIKE, NOT LIKE</code></li>
+                 <li><code>BETWEEN</code></li>
+                 <li><code>+,-, *, /, %, ^</code></li>
+                 <li><code>ABS, GREATEST, LEAST, ROUND, FLOOR, CEIL, POW, LN, EXP</code></li>
+                 <li><code>SUM, COUNT, MAX, MIN, AVG</code></li>
+                 <li><code>CURRENT_TIMESTAMP, CURREN_DATE</code></li>
+               </ul>
+             </p>
+           </AccordionContent>
+         </AccordionItem>
+         <AccordionItem value="virtual-tables">
+           <AccordionTrigger className={"cursor-pointer"}>
+             <span className={"flex flex-row gap-2 items-center"}>
+               <InfoIcon size={16} />
+               <span>Supported data sources</span>
+             </span>
+           </AccordionTrigger>
+           <AccordionContent className="flex flex-col gap-4 text-balance">
+             <p>
+               <ul className={"list-disc pl-4 pt-2"}>
+                 <li>Only <b><code>logs</code></b> table is supported</li>
+                 <li>You can create any views</li>
+               </ul>
+             </p>
+           </AccordionContent>
+         </AccordionItem>
+       </Accordion>
      </CardContent>
    </Card>
   )
diff --git a/cmd/sql-to-logsql/web/ui/src/components/logs-endpoint/LogsEndpoint.tsx b/cmd/sql-to-logsql/web/ui/src/components/logs-endpoint/LogsEndpoint.tsx
index d7a7306..c23bdeb 100644
--- a/cmd/sql-to-logsql/web/ui/src/components/logs-endpoint/LogsEndpoint.tsx
+++ b/cmd/sql-to-logsql/web/ui/src/components/logs-endpoint/LogsEndpoint.tsx
@@ -30,26 +30,32 @@ export function LogsEndpoint({
   onEndpointEnabledChange,
 }: LogsEndpointProps) {
   return (
-    <Card>
+    <Card className={"w-full"}>
       <CardHeader>
         <CardTitle>VictoriaLogs endpoint</CardTitle>
-        {!endpointReadOnly && <CardDescription>You can query data from VictoriaLogs instance or just translate SQl to LogsQL without querying</CardDescription>}
-        {!endpointReadOnly && <CardAction className={"flex flex-row gap-2"}>
-          <Switch
-              checked={endpointEnabled}
-              id={"endpointEnabled"}
-              onCheckedChange={onEndpointEnabledChange}
-              disabled={isLoading || endpointReadOnly}
-              hidden={endpointReadOnly}
-              className={"cursor-pointer"}
-          />
-          <Label htmlFor={"endpointEnabled"} className={"cursor-pointer"}>
-              Query data from VictoriaLogs
-          </Label>
-        </CardAction>}
+        {!endpointReadOnly &&
+          <CardDescription>
+              You can query data from VictoriaLogs instance or just translate SQL to LogsQL without querying
+          </CardDescription>
+        }
+        {!endpointReadOnly &&
+          <CardAction className={"flex flex-row gap-2"}>
+            <Switch
+                checked={endpointEnabled}
+                id={"endpointEnabled"}
+                onCheckedChange={onEndpointEnabledChange}
+                disabled={isLoading || endpointReadOnly}
+                hidden={endpointReadOnly}
+                className={"cursor-pointer"}
+            />
+            <Label htmlFor={"endpointEnabled"} className={"cursor-pointer overflow-hidden text-ellipsis"}>
+                Query data
+            </Label>
+          </CardAction>
+        }
       </CardHeader>
-      <CardContent className={"flex flex-row gap-2"}>
-        <div className={"flex flex-col gap-1 w-3/4"}>
+      <CardContent className={"flex max-sm:flex-col gap-2"}>
+        <div className={"flex flex-col gap-1 sm:w-3/4"}>
           <Label htmlFor={endpointUrl}>URL:</Label>
           <Input
             disabled={isLoading || endpointReadOnly || !endpointEnabled}
@@ -60,7 +66,7 @@ export function LogsEndpoint({
             onChange={(e) => onUrlChange && onUrlChange(e.target.value)}
           />
         </div>
-        <div className={"flex flex-col gap-1 w-1/4"}>
+        <div className={"flex flex-col gap-1 sm:w-1/4"}>
           <Label htmlFor={"bearerToken"}>Bearer token:</Label>
           <Input
             disabled={isLoading || endpointReadOnly || !endpointEnabled}
diff --git a/cmd/sql-to-logsql/web/ui/src/components/sql-editor/SQLEditor.tsx b/cmd/sql-to-logsql/web/ui/src/components/sql-editor/SQLEditor.tsx
index 5ded138..ee41b38 100644
--- a/cmd/sql-to-logsql/web/ui/src/components/sql-editor/SQLEditor.tsx
+++ b/cmd/sql-to-logsql/web/ui/src/components/sql-editor/SQLEditor.tsx
@@ -3,19 +3,18 @@ import {
   Card,
   CardAction,
   CardContent,
-  CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card.tsx";
-import { Badge } from "@/components/ui/badge.tsx";
 import {useCallback, useEffect, useState} from "react";
 import { Button } from "@/components/ui/button.tsx";
 import {Select, SelectContent, SelectItem, SelectTrigger} from "@/components/ui/select.tsx";
 import {SelectValue} from "@radix-ui/react-select";
 import {DEFAULT_EXAMPLE_ID, EXAMPLES} from "@/components/sql-editor/examples.ts";
 import {COMPLETIONS} from "@/components/sql-editor/complections.ts";
-import {CircleXIcon, CircleCheckBigIcon} from "lucide-react"
+import {CircleXIcon, CircleCheckBigIcon, PlayIcon} from "lucide-react"
+import {Spinner} from "@/components/ui/spinner.tsx";
 
 export interface SqlEditorProps {
   readonly onRun?: (sql: string) => void;
@@ -50,13 +49,9 @@ export function SQLEditor({
 
   return (
     <Card>
-      <CardHeader>
-        <CardTitle>SQL code</CardTitle>
-        <CardDescription>
-          Virtual tables are configured on the server (default:
-          <Badge variant={"outline"}>logs</Badge>)
-        </CardDescription>
-        <CardAction className={"flex flex-row gap-2"}>
+      <CardHeader className={"max-sm:flex max-sm:flex-col max-sm:gap-4 max-sm:px-4"}>
+        <CardTitle className={"sm:py-3"}>SQL</CardTitle>
+        <CardAction className={"flex max-sm:flex-col gap-2"}>
           <Select onValueChange={setValue} value={value} disabled={isLoading}>
             <SelectTrigger className={"cursor-pointer"}>
               <SelectValue placeholder="Select example" />
@@ -74,6 +69,7 @@ export function SQLEditor({
             className={"cursor-pointer"}
             onClick={() => runQuery()}
           >
+            {isLoading ? <Spinner /> : <PlayIcon />}
             Execute
           </Button>
         </CardAction>
diff --git a/cmd/sql-to-logsql/web/ui/src/components/sql-editor/examples.ts b/cmd/sql-to-logsql/web/ui/src/components/sql-editor/examples.ts
index cf9b804..7c5b3dc 100644
--- a/cmd/sql-to-logsql/web/ui/src/components/sql-editor/examples.ts
+++ b/cmd/sql-to-logsql/web/ui/src/components/sql-editor/examples.ts
@@ -34,7 +34,7 @@ LIMIT 100`,
     COUNT(*) AS messages_count
 FROM logs
 WHERE kubernetes.container_name IS NOT NULL
-GROUP BY kubernetes.container_name
+GROUP BY container
 HAVING messages_count > 10
 ORDER BY messages_count DESC`
     },
diff --git a/cmd/sql-to-logsql/web/ui/src/components/ui/separator.tsx b/cmd/sql-to-logsql/web/ui/src/components/ui/separator.tsx
new file mode 100644
index 0000000..bb3ad74
--- /dev/null
+++ b/cmd/sql-to-logsql/web/ui/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/cmd/sql-to-logsql/web/ui/src/components/ui/spinner.tsx b/cmd/sql-to-logsql/web/ui/src/components/ui/spinner.tsx
new file mode 100644
index 0000000..a70e713
--- /dev/null
+++ b/cmd/sql-to-logsql/web/ui/src/components/ui/spinner.tsx
@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }
diff --git a/cmd/sql-to-logsql/web/ui/src/pages/main/Main.tsx b/cmd/sql-to-logsql/web/ui/src/pages/main/Main.tsx
index 99b9dc0..44578f2 100644
--- a/cmd/sql-to-logsql/web/ui/src/pages/main/Main.tsx
+++ b/cmd/sql-to-logsql/web/ui/src/pages/main/Main.tsx
@@ -87,7 +87,7 @@ export function Main() {
   return (
     <main className={"p-4 w-full flex flex-col gap-4"}>
       <div className={"w-full flex gap-4"}>
-        <div className={"w-full flex flex-col gap-4 max-w-[960px]"}>
+        <div className={"w-full flex flex-col gap-4  min-w-[20rem] max-w-[64rem]"}>
           <LogsEndpoint
             endpointUrl={endpointUrl}
             onUrlChange={setEndpointUrl}