diff --git a/frontend/src/stores/explore.ts b/frontend/src/stores/explore.ts
index 1b46943b..fc1bdb26 100644
--- a/frontend/src/stores/explore.ts
+++ b/frontend/src/stores/explore.ts
@@ -19,6 +19,7 @@ import type { DateValue } from "@internationalized/date";
 import { now, getLocalTimeZone, CalendarDateTime } from "@internationalized/date";
 import { useSourcesStore } from "./sources";
 import { useTeamsStore } from "@/stores/teams";
+import { useLiveLogStore } from "@/stores/liveLog";
 import { useBaseStore } from "./base";
 import { QueryService } from '@/services/QueryService'
 import { parseRelativeTimeString } from "@/utils/time";
@@ -28,6 +29,8 @@ import { type TimeRange } from '@/types/query';
 import { getErrorMessage } from '@/api/types';
 import { HistogramService, type HistogramData } from '@/services/HistogramService';
 
+const liveLogStore = useLiveLogStore();
+
 // Helper function to get formatted table name
 export function getFormattedTableName(source: any): string {
   if (!source) {
@@ -811,36 +814,7 @@ export const useExploreStore = defineStore("explore", () => {
       const response = await state.callApi({
         apiCall: async () => exploreApi.getLogs(state.data.value.sourceId, params, currentTeamId),
         // Update results ONLY on successful API call with data
-        onSuccess: (data: QuerySuccessResponse | null) => {
-          if (data && data.logs) {
-            // We have new data, update the store
-            state.data.value.logs = data.logs;
-            state.data.value.columns = data.columns || [];
-            state.data.value.queryStats = data.stats || DEFAULT_QUERY_STATS;
-            // Check if query_id exists in params before accessing it
-            if (data.params && typeof data.params === 'object' && "query_id" in data.params) {
-              state.data.value.queryId = data.params.query_id as string;
-            } else {
-              state.data.value.queryId = null; // Reset if not present
-            }
-          } else {
-            // Query was successful but returned no logs or null data
-            console.warn("Query successful but received no logs or null data.");
-            // Clear the logs, columns, stats now that the API call is complete
-            state.data.value.logs = [];
-            state.data.value.columns = [];
-            state.data.value.queryStats = DEFAULT_QUERY_STATS;
-            state.data.value.queryId = null;
-          }
-
-          // Update lastExecutedState after successful execution
-          _updateLastExecutedState();
-
-          // Restore the relative time if it was set before
-          if (relativeTime) {
-            state.data.value.selectedRelativeTime = relativeTime;
-          }
-        },
+        onSuccess: (data: QuerySuccessResponse | null) => fetchLogData(data),
         operationKey: operationKey,
       });
 
@@ -1307,6 +1281,102 @@ export const useExploreStore = defineStore("explore", () => {
     return "1d"; // Default for very long time ranges
   }
 
+  function prepareQueryParams(sql: string) {
+
+    // Prepare parameters for the API call
+    const params: QueryParams = {
+      raw_sql: '', // Will be set below
+      limit: state.data.value.limit,
+      query_timeout: state.data.value.queryTimeout
+    };
+
+    // Handle empty SQL for both modes
+    if (!sql || !sql.trim()) {
+      // Generate default SQL for both LogchefQL and SQL modes when SQL is empty
+      console.log(`Explore store: Generating default SQL for empty ${state.data.value.activeMode} query`);
+
+      // Get source details to check they're fully loaded
+      const sourcesStore = useSourcesStore();
+      const sourceDetails = sourcesStore.currentSourceDetails;
+      if (!sourceDetails) {
+        throw new Error("Source details not available");
+      }
+
+      const tsField = sourceDetails._meta_ts_field || 'timestamp';
+      const tableName = sourcesStore.getCurrentSourceTableName || 'default.logs';
+
+      // Generate default SQL using SqlManager
+      const result = SqlManager.generateDefaultSql({
+        tableName,
+        tsField,
+        timeRange: state.data.value.timeRange as TimeRange,
+        limit: state.data.value.limit,
+        timezone: state.data.value.selectedTimezoneIdentifier || undefined
+      });
+
+      if (!result.success) {
+        const operationKey = 'executeQuery';
+        return state.handleError({
+          status: "error",
+          message: "Failed to generate default SQL",
+          error_type: "ValidationError"
+        }, operationKey);
+      }
+
+      // Use the generated SQL
+      sql = result.sql;
+
+      // If in SQL mode, update the UI to show the generated SQL
+      if (state.data.value.activeMode === 'sql') {
+        state.data.value.rawSql = sql;
+      }
+    }
+
+    // Set the SQL in the params
+    params.raw_sql = sql;
+
+    return params;
+  }
+
+  function fetchLogData(data: QuerySuccessResponse | null) {
+    if (data && data.logs) {
+      // check is live log or not
+      if(liveLogStore.isOn && !liveLogStore.isPause) {
+        // append data when live log
+        state.data.value.logs = [...state.data.value.logs, ...data.logs];
+      } else {
+        // We have new data, update the store
+        state.data.value.logs = data.logs;
+      }
+      state.data.value.columns = data.columns || [];
+      state.data.value.queryStats = data.stats || DEFAULT_QUERY_STATS;
+      // Check if query_id exists in params before accessing it
+      if (data.params && typeof data.params === 'object' && "query_id" in data.params) {
+        state.data.value.queryId = data.params.query_id as string;
+      } else {
+        state.data.value.queryId = null; // Reset if not present
+      }
+
+    } else {
+      // Query was successful but returned no logs or null data
+      console.warn("Query successful but received no logs or null data.");
+      // Clear the logs, columns, stats now that the API call is complete
+      state.data.value.logs = [];
+      state.data.value.columns = [];
+      state.data.value.queryStats = DEFAULT_QUERY_STATS;
+      state.data.value.queryId = null;
+    }
+
+    // Update lastExecutedState after successful execution
+    _updateLastExecutedState();
+
+    // Restore the relative time if it was set before
+    const relativeTime = state.data.value.selectedRelativeTime;
+    if (relativeTime) {
+      state.data.value.selectedRelativeTime = relativeTime;
+    }
+  }
+
   // Return the store
   return {
     // State - exposed as computed properties
@@ -1375,7 +1445,9 @@ export const useExploreStore = defineStore("explore", () => {
     generateAiSql,
     clearAiSqlState,
     fetchHistogramData,
-
+    prepareQueryParams,
+    fetchLogData,
+    getTimezoneIdentifier,
     // Loading state helpers
     isLoadingOperation: state.isLoadingOperation,
   };
diff --git a/frontend/src/stores/liveLog.ts b/frontend/src/stores/liveLog.ts
new file mode 100644
index 00000000..583dde10
--- /dev/null
+++ b/frontend/src/stores/liveLog.ts
@@ -0,0 +1,64 @@
+
+import {defineStore} from "pinia";
+
+import {useBaseStore} from "@/stores/base.ts";
+import {computed} from "vue";
+
+
+interface LiveLogState {
+    isOn: boolean; // is live log on
+    start: number; // last request start
+    end: number; // last request end
+    sql: string | null; // last request sql
+    isPause: boolean; // is live log paused or not
+}
+
+export const useLiveLogStore = defineStore("liveLog", () => {
+
+    const state = useBaseStore<LiveLogState>({
+        isOn: false,
+        start: Date.now(),
+        end: Date.now(),
+        sql: null,
+        isPause: false,
+    });
+
+
+
+    // Computed properties
+    const isOn = computed(() => state.data.value.isOn);
+    const start = computed(() => state.data.value.start);
+    const end = computed(() => state.data.value.end);
+    const sql = computed(() => state.data.value.sql);
+    const isPause  = computed(() => state.data.value.isPause);
+
+    // Set data
+    function setIsOn(isOn: boolean) {
+        state.data.value.isOn = isOn;
+    }
+    function setStart(start: number) {
+        state.data.value.start = start;
+    }
+    function setEnd(end: number) {
+        state.data.value.end = end;
+    }
+    function setSql(sql: string | null) {
+        state.data.value.sql = sql;
+    }
+    function setIsPause(isPause: boolean) {
+        state.data.value.isPause = isPause;
+    }
+
+    return {
+        isOn,
+        start,
+        end,
+        sql,
+        isPause,
+        setIsOn,
+        setStart,
+        setEnd,
+        setSql,
+        setIsPause
+    };
+});
\ No newline at end of file
diff --git a/frontend/src/views/explore/LogExplorer.vue b/frontend/src/views/explore/LogExplorer.vue
index 3a7b2c7f..76b31fbb 100644
--- a/frontend/src/views/explore/LogExplorer.vue
+++ b/frontend/src/views/explore/LogExplorer.vue
@@ -17,6 +17,7 @@ import { useExploreStore } from "@/stores/explore";
 import { useTeamsStore } from "@/stores/teams";
 import { useSourcesStore } from "@/stores/sources";
 import { useSavedQueriesStore } from "@/stores/savedQueries";
+import { useLiveLogStore } from "@/stores/liveLog"
 import { FieldSideBar } from "@/components/field-sidebar";
 import { getErrorMessage } from "@/api/types";
 import DataTable from "./table/data-table.vue";
@@ -145,6 +146,9 @@ const executingQueryId = ref<string | null>(null);
 const lastQueryTime = ref<number>(0);
 let lastExecutionKey = "";
 
+// live log paused or not
+const isPaused = ref(false);
+
 // Display related refs
 const displayTimezone = computed(() =>
   localStorage.getItem("logchef_timezone") === "utc" ? "utc" : "local"
@@ -891,6 +895,13 @@ const onSaveQueryModalSave = (formData: SaveQueryFormData) => {
   processSaveQueryFromComposable(formData);
 };
 
+// handle live log's pause on / off
+const liveLogPauseOnOff = (isPause: boolean) => {
+  isPaused.value = isPause;
+  const liveLogStore = useLiveLogStore();
+  liveLogStore.setIsPause(isPause);
+};
+
 // Handle query_id changes from URL, especially when component is kept alive
 watch(
   () => route.query.query_id,
@@ -1322,7 +1333,7 @@ onBeforeUnmount(() => {
                 hasValidSource &&
                 exploreStore.timeRange
               ">
-                <QueryControls @execute="handleQueryExecution" @clear="clearQueryEditor" />
+                <QueryControls @execute="handleQueryExecution" @clear="clearQueryEditor" @liveLog="liveLogPauseOnOff" />
               </div>
             </div>
 
diff --git a/frontend/src/views/explore/components/QueryControls.vue b/frontend/src/views/explore/components/QueryControls.vue
index 3208bdab..46fb6146 100644
--- a/frontend/src/views/explore/components/QueryControls.vue
+++ b/frontend/src/views/explore/components/QueryControls.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch, onBeforeUnmount } from 'vue'
 import { useRouter } from 'vue-router'
 import { Button } from '@/components/ui/button'
-import { Play, RefreshCw, Share2, Keyboard, Eraser, AlertCircle, Clock } from 'lucide-vue-next'
+import { Switch } from "@/components/ui/switch";
+import {Play, RefreshCw, Share2, Keyboard, Eraser, AlertCircle, Clock, Pause} from 'lucide-vue-next'
 import { useToast } from '@/components/ui/toast'
 import { TOAST_DURATION } from '@/lib/constants'
 import { useExploreStore } from '@/stores/explore'
@@ -20,6 +21,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import {closeWebSocket, connectWebSocket, getWebSocket, sendMessage} from '@/websocket/websocket';
+import { useLiveLogStore } from "@/stores/liveLog.ts";
 
 interface Props {
   showExecuteControls?: boolean
@@ -32,11 +35,15 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   (e: 'execute', key: string): void
   (e: 'clear'): void
+  (e: 'liveLog', key: boolean): void
 }>()
 
-const router = useRouter()
-const { toast } = useToast()
-const exploreStore = useExploreStore()
+const router = useRouter();
+const { toast } = useToast();
+const exploreStore = useExploreStore();
+const liveLogStore = useLiveLogStore();
+const isLiveTail = ref(false);
+const isPaused = ref(false);
 
 const {
   isDirty,
@@ -208,6 +215,58 @@ const executeQuery = () => {
 const clearEditor = () => {
   emit('clear')
 }
+
+// live tail on/off
+const handleSwitchChange = (checked: boolean) => {
+  isLiveTail.value = checked;
+  liveLogStore.setIsOn(checked);
+  if (checked) {
+    handleSwitchOn();
+  } else {
+    handleSwitchOff();
+  }
+}
+
+const handleSwitchOn = () => {
+  console.log("Live Tail turned ON");
+  // connect websocket
+  connectWebSocket('log');
+
+}
+
+const handleSwitchOff = () => {
+  console.log("Live Tail turned OFF");
+  // disconnect websocket
+  closeWebSocket();
+}
+
+function handlePauseToggle() {
+  isPaused.value = !isPaused.value;
+
+  if (isPaused.value) {
+    handlePauseOn();
+  } else {
+    handlePauseOff();
+  }
+}
+
+function handlePauseOn() {
+  console.log('Live tail paused.');
+  emit('liveLog', true)
+}
+
+function handlePauseOff() {
+  console.log('Live tail resumed.');
+  emit('liveLog', false)
+}
+
+onBeforeUnmount(() => {
+  // close websocket
+  closeWebSocket();
+  // update live-log store
+
+});
+
 </script>
 
 <template>
@@ -243,6 +302,47 @@ const clearEditor = () => {
         </Tooltip>
       </TooltipProvider>
 
+      <!-- Live Tail Toggle -->
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div class="flex items-center gap-1">
+              <Switch
+                  id="live-tail-switch"
+                  :checked="isLiveTail"
+                  @update:checked="handleSwitchChange"
+              />
+              <span class="text-xs">Live Tail</span>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <p>Toggle Live Tail (auto-refresh)</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <!-- Pause/Resume Button -->
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+                variant="outline"
+                size="sm"
+                class="h-9 px-3 flex items-center gap-1.5"
+                @click="handlePauseToggle"
+                :disabled="!isLiveTail || isExecutingQuery"
+                aria-label="Pause or resume live logs"
+            >
+              <component :is="isPaused ? Play : Pause" class="h-4 w-4" />
+              <span>{{ isPaused ? 'Resume' : 'Pause' }}</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <p>{{ isPaused ? 'Resume live log tailing' : 'Pause live log tailing' }}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
       <!-- Clear Button -->
       <TooltipProvider>
         <Tooltip>
diff --git a/frontend/src/views/explore/table/data-table.vue b/frontend/src/views/explore/table/data-table.vue
index fa7ba51c..dcef88a3 100644
--- a/frontend/src/views/explore/table/data-table.vue
+++ b/frontend/src/views/explore/table/data-table.vue
@@ -17,7 +17,7 @@ import {
     type ColumnResizeMode,
     type Header,
 } from '@tanstack/vue-table'
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch, nextTick, watchEffect } from 'vue'
 import { Button } from '@/components/ui/button'
 import { Search, GripVertical, Download, Copy, Timer, Rows4, Equal, EqualNot, RefreshCw } from 'lucide-vue-next' // Added RefreshCw
 import { valueUpdater, getSeverityClasses } from '@/lib/utils'
@@ -31,6 +31,7 @@ import JsonViewer from '@/components/json-viewer/JsonViewer.vue'
 import EmptyState from '@/views/explore/EmptyState.vue'
 import { createColumns } from './columns'
 import { useExploreStore } from '@/stores/explore'
+import { useLiveLogStore } from '@/stores/liveLog'
 import type { Source } from '@/api/sources'
 import { useSourcesStore } from '@/stores/sources'
 import { useStorage, type UseStorageOptions, type RemovableRef } from '@vueuse/core'
@@ -92,6 +93,7 @@ const pagination = ref<PaginationState>({
     pageIndex: 0,
     pageSize: 50,
 })
+let pageSizeBeforeLiveLog =  50 // save pre page sive before live log so that restore when live log off
 const globalFilter = ref('')
 const columnSizing = ref<ColumnSizingState>({})
 const columnResizeMode = ref<ColumnResizeMode>('onChange')
@@ -100,6 +102,7 @@ const displayTimezone = ref<'local' | 'utc'>(localStorage.getItem('logchef_timez
 const columnOrder = ref<string[]>([])
 const draggingColumnId = ref<string | null>(null)
 const dragOverColumnId = ref<string | null>(null)
+const liveLogStore = useLiveLogStore()
 
 // --- Local Storage State Management ---
 const storageKey = computed(() => {
@@ -367,37 +370,39 @@ function handleResize(e: MouseEvent | TouchEvent, header: any) {
 }
 
 // Initialize table
-const table = useVueTable({
+const table = ref()
+watchEffect(() => {
+  table.value = useVueTable({
     get data() {
-        return props.data
+      return props.data
     },
     // Use tableColumns directly
     get columns() {
-        return tableColumns.value;
+      return tableColumns.value;
     },
     state: {
-        get sorting() {
-            return sorting.value
-        },
-        get expanded() {
-            return expanded.value
-        },
-        get columnVisibility() {
-            return columnVisibility.value
-        },
-        get pagination() {
-            return pagination.value
-        },
-        get globalFilter() {
-            return globalFilter.value
-        },
-        get columnSizing() {
-            return columnSizing.value
-        },
-        get columnOrder() {
-            // Important: Let the table read the order directly from the state ref
-            return columnOrder.value
-        },
+      get sorting() {
+        return sorting.value
+      },
+      get expanded() {
+        return expanded.value
+      },
+      get columnVisibility() {
+        return columnVisibility.value
+      },
+      get pagination() {
+        return pagination.value
+      },
+      get globalFilter() {
+        return globalFilter.value
+      },
+      get columnSizing() {
+        return columnSizing.value
+      },
+      get columnOrder() {
+        // Important: Let the table read the order directly from the state ref
+        return columnOrder.value
+      },
     },
     // Keep columnOrder handling separate using onColumnOrderChange
     // Do NOT set initialState.columnOrder here as it might conflict with the reactive ref
@@ -411,7 +416,7 @@ const table = useVueTable({
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
+    getPaginationRowModel: liveLogStore.isOn ? undefined : getPaginationRowModel(), // do not show when live log
     getFilteredRowModel: getFilteredRowModel(),
     enableColumnResizing: true,
     columnResizeMode: columnResizeMode.value,
@@ -419,6 +424,19 @@ const table = useVueTable({
     // Remove onColumnSizingInfoChange if not strictly needed for custom logic
     // onColumnSizingInfoChange: (info) => { ... },
     defaultColumn,
+  })
+})
+// when live log active, then show all data in one page
+watch(() => liveLogStore.isOn, (isOn) => {
+  if (isOn) {
+    pageSizeBeforeLiveLog = pagination.value.pageSize
+  } else {
+    pagination.value.pageSize = pageSizeBeforeLiveLog
+  }
+  if (isOn) {
+    pagination.value.pageSize = Number.MAX_SAFE_INTEGER
+    pagination.value.pageIndex = 0
+  }
 })
 
 // Simplified row expansion handler
@@ -453,11 +471,15 @@ onMounted(() => {
             }
         }
     }
+  const el = tableContainerRef.value
+  if (el) el.addEventListener('scroll', handleScroll)
 })
 
 // Add refs for DOM elements
 const tableContainerRef = ref<HTMLElement | null>(null)
 const tableRef = ref<HTMLElement | null>(null)
+// Whether auto-scroll is currently paused (user scrolled up)
+const isScrollLocked = ref(true)
 
 onMounted(() => {
     if (!tableContainerRef.value) return
@@ -512,6 +534,17 @@ watch(
     }
 )
 
+// Watch for new logs added
+watch(() => exploreStore.logs.length, () => {
+  if (!isScrollLocked.value) {
+    // Auto-scroll to bottom when not locked
+    nextTick(() => {
+      const el = tableContainerRef.value
+      if (el) el.scrollTop = el.scrollHeight
+    })
+  }
+})
+
 // --- Native Drag and Drop Implementation ---
 
 // Utility function to move array element (needed for native DnD)
@@ -596,6 +629,15 @@ const handleDrillDown = (columnName: string, value: any, operator: string = '=')
     emit('drill-down', { column: columnName, value, operator });
 };
 
+// Detect if user scrolls away from the bottom
+const handleScroll = () => {
+  const el = tableContainerRef.value
+  if (!el) return
+
+  const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 30
+  isScrollLocked.value = !nearBottom
+}
+
 </script>
 
 <template>
@@ -679,7 +721,8 @@ const handleDrillDown = (columnName: string, value: any, operator: string = '=')
                 </div>
 
                 <!-- Pagination moved to top -->
-                <DataTablePagination v-if="table && table.getRowModel().rows?.length > 0" :table="table" />
+                <!-- do not show pagenation when live log on  -->
+                <DataTablePagination v-if="!liveLogStore.isOn && table && table.getRowModel().rows?.length > 0" :table="table" />
 
                 <!-- Column selector -->
                 <DataTableColumnSelector v-if="table" :table="table" :column-order="columnOrder"
diff --git a/frontend/src/websocket/websocket.ts b/frontend/src/websocket/websocket.ts
new file mode 100644
index 00000000..0b067864
--- /dev/null
+++ b/frontend/src/websocket/websocket.ts
@@ -0,0 +1,221 @@
+import { showErrorToast } from "@/api/error-handler";
+import { useExploreStore } from "@/stores/explore";
+import { useTeamsStore } from "@/stores/teams";
+import type { TimeRange } from '@/types/query';
+import { useQuery } from "@/composables/useQuery";
+import { fromDate } from '@internationalized/date';
+import {SqlManager} from "@/services/SqlManager";
+import { useSourcesStore } from "@/stores/sources";
+import { useLiveLogStore } from "@/stores/liveLog"
+import type {
+    QuerySuccessResponse,
+} from "@/api/explore";
+
+let socket: WebSocket | null = null;
+let logRequestIntervalId: ReturnType<typeof setInterval> | null = null;
+const longPoolingTimeOut = 10000; // how frequently client request log to server
+const query = useQuery();
+const exploreStore = useExploreStore();
+const sourcesStore = useSourcesStore();
+const liveLogStore = useLiveLogStore();
+
+export function connectWebSocket(path: string): WebSocket | null {
+
+    if (socket && (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING)) {
+        return socket;
+    }
+
+    if (path == 'log') {
+        // Get current team ID
+        const teamID = useTeamsStore().currentTeamId;
+        if (!teamID) {
+            return null;
+        }
+        const sourceID = useExploreStore().sourceId;
+        if (!sourceID) {
+            return null;
+        }
+        socket = new WebSocket(`${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/api/v1/teams/${teamID}/sources/${sourceID}/ws/log`);
+    } else {
+        return null;
+    }
+
+    socket.addEventListener("open", () => {
+        console.info("[WebSocket] Connected");
+        // send log request every 3 seconds (long polling)
+        // -> do not receive from server, it is requested by client.
+        // -> to reduce duplicated http connections, we use websocket for one time connection
+        if (!logRequestIntervalId) {
+            logRequestIntervalId = setInterval(() => {
+                if (!liveLogStore.isPause) {
+                    runLiveLogQuery();
+                }
+            }, longPoolingTimeOut);
+        }
+    });
+
+    socket.addEventListener("close", (event) => {
+        console.warn(`[WebSocket] Closed: code=${event.code}, reason=${event.reason}`);
+
+        // remove interval for long polling when connection closed
+        if (logRequestIntervalId) {
+            clearInterval(logRequestIntervalId);
+            logRequestIntervalId = null;
+        }
+
+        if (event.code === 1006) {
+            showErrorToast({
+                status: "error",
+                message: "Lost connection to the server.",
+                error_type: "WebSocketDisconnected"
+            });
+        }
+    });
+
+    socket.addEventListener("error", (error) => {
+        console.error("[WebSocket] Error", error);
+        showErrorToast({
+            status: "error",
+            message: "WebSocket encountered an error.",
+            error_type: "WebSocketError"
+        });
+    });
+
+    socket.addEventListener("message", (e) => {
+        let parsedData: any;
+
+        try {
+            parsedData = JSON.parse(e.data); // string → object
+        } catch (err) {
+            console.warn("Failed to parse message as JSON", err);
+            return;
+        }
+        // if return from request log
+        if (isQuerySuccessResponse(parsedData)) {
+            useExploreStore().fetchLogData(parsedData);
+        }
+        // handle for other messages for other request
+
+    });
+
+    return socket;
+}
+
+export function getWebSocket(): WebSocket | null {
+    return socket;
+}
+
+export function sendMessage(data: any | null): void {
+    if (!socket || socket.readyState !== WebSocket.OPEN) {
+        console.warn("[WebSocket] Cannot send message: socket not open");
+        return;
+    }
+
+    const payload = typeof data === "string" ? data : JSON.stringify(data);
+    socket.send(payload);
+}
+
+export function closeWebSocket(): void {
+    if (logRequestIntervalId) {
+        clearInterval(logRequestIntervalId);
+        logRequestIntervalId = null;
+    }
+
+    if (socket) {
+        socket.close();
+        socket = null;
+    }
+}
+
+export function isQuerySuccessResponse(data: any): data is QuerySuccessResponse {
+    return (
+        data !== null &&
+        typeof data === 'object' &&
+        'logs' in data
+    );
+}
+
+export function runLiveLogQuery() {
+
+
+    // Make sure query is valid before execution
+    const result = query.prepareQueryForExecution();
+
+    if (!result.success) {
+        throw new Error(result.error || 'Failed to prepare query for execution');
+    }
+
+    if (!exploreStore.lastExecutedState) return;
+    let sql = exploreStore.sqlForExecution;
+    if (!sql || !sql.trim()) {
+        console.log("No SQL provided, generating default query");
+        const sourceDetails = sourcesStore.currentSourceDetails;
+        if (!sourceDetails) {
+            throw new Error("Source details not available");
+        }
+        const tsField = sourceDetails._meta_ts_field || 'timestamp';
+        const tableName = sourcesStore.getCurrentSourceTableName || 'default.logs';
+
+        // Generate default SQL using SqlManager
+        const result = SqlManager.generateDefaultSql({
+            tableName,
+            tsField,
+            timeRange: exploreStore.timeRange as TimeRange,
+            limit: exploreStore.limit,
+            timezone: exploreStore.selectedTimezoneIdentifier || undefined
+        });
+
+        if (!result.success) {
+
+        }
+
+        sql = result.sql;
+    }
+
+    const timezone = exploreStore.selectedTimezoneIdentifier || exploreStore.getTimezoneIdentifier();
+    const now = new Date();
+    const exploreExecutionTimestamp = exploreStore.lastExecutionTimestamp
+        ? exploreStore.lastExecutionTimestamp
+        : now.getTime() - longPoolingTimeOut;
+    const lastExecutionTimestamp = liveLogStore.end ? liveLogStore.end : exploreExecutionTimestamp;
+    const startTime = new Date(lastExecutionTimestamp);
+    const endTime = now;
+    const range: TimeRange = {
+        start: fromDate(startTime, timezone), // number → Date → DateValue
+        end: fromDate(endTime, timezone), // 현재 시간
+    };
+
+    let updatedSql;
+    try {
+        const sourceDetails = sourcesStore.currentSourceDetails;
+        if (!sourceDetails) {
+            throw new Error('No source selected');
+        }
+
+        // Use SqlManager to update time range in SQL
+        updatedSql = SqlManager.updateTimeRange({
+            sql: sql!,
+            tsField: sourceDetails._meta_ts_field || 'timestamp',
+            timeRange: range,
+            timezone: exploreStore.selectedTimezoneIdentifier || undefined
+        });
+
+        // Update SQL if it was changed
+        if (updatedSql !== sql) {
+            exploreStore.setRawSql(updatedSql);
+            console.log("TimeRangeSelector: SQL updated for new time range");
+        }
+    } catch (err) {
+        console.error("Error updating SQL for time range:", err);
+    }
+    if (updatedSql) {
+        // update live-log store
+        const params = exploreStore.prepareQueryParams(updatedSql);
+        sendMessage(params);
+        liveLogStore.setStart(startTime.getTime());
+        liveLogStore.setEnd(endTime.getTime());
+        if (sql) {
+            liveLogStore.setSql(sql);
+        }
+    }
+}
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index cc913fa5..f085c735 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -40,6 +40,7 @@ export default defineConfig(({ mode }) => {
           target: apiUrl,
           changeOrigin: true,
           secure: false,
+          ws: true,
         },
       },
     },
diff --git a/go.mod b/go.mod
index ddd75807..d38b6772 100644
--- a/go.mod
+++ b/go.mod
@@ -10,6 +10,7 @@ require (
 	github.com/coreos/go-oidc/v3 v3.14.1
 	github.com/gofiber/fiber/v2 v2.52.8
 	github.com/gofiber/swagger v1.1.1
+	github.com/gofiber/websocket/v2 v2.2.1
 	github.com/golang-migrate/migrate/v4 v4.18.3
 	github.com/google/uuid v1.6.0
 	github.com/knadh/koanf/parsers/toml v0.1.0
@@ -19,7 +20,6 @@ require (
 	github.com/mattn/go-sqlite3 v1.14.28
 	github.com/sashabaranov/go-openai v1.40.1
 	github.com/swaggo/swag v1.16.4
-	golang.org/x/crypto v0.39.0
 	golang.org/x/oauth2 v0.30.0
 	modernc.org/sqlite v1.38.0
 )
@@ -29,6 +29,7 @@ require (
 	github.com/KyleBanks/depth v1.2.1 // indirect
 	github.com/andybalholm/brotli v1.1.1 // indirect
 	github.com/dustin/go-humanize v1.0.1 // indirect
+	github.com/fasthttp/websocket v1.5.3 // indirect
 	github.com/fsnotify/fsnotify v1.9.0 // indirect
 	github.com/go-faster/city v1.0.1 // indirect
 	github.com/go-faster/errors v0.7.1 // indirect
@@ -55,6 +56,7 @@ require (
 	github.com/pierrec/lz4/v4 v4.1.22 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
 	github.com/rivo/uniseg v0.4.7 // indirect
+	github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee // indirect
 	github.com/segmentio/asm v1.2.0 // indirect
 	github.com/shopspring/decimal v1.4.0 // indirect
 	github.com/swaggo/files/v2 v2.0.2 // indirect
diff --git a/internal/server/middleware.go b/internal/server/middleware.go
index ce060ea7..66236280 100644
--- a/internal/server/middleware.go
+++ b/internal/server/middleware.go
@@ -29,9 +29,9 @@ func isUserAdmin(c *fiber.Ctx) bool {
 }
 
 // requireAuth is middleware that ensures the request includes valid authentication.
-// It supports both API token authentication (Authorization: Bearer <token>) and 
+// It supports both API token authentication (Authorization: Bearer <token>) and
 // session-based authentication (session cookie). It validates the authentication,
-// retrieves the associated user, and stores the user information in the request 
+// retrieves the associated user, and stores the user information in the request
 // context (c.Locals) for subsequent handlers.
 func (s *Server) requireAuth(c *fiber.Ctx) error {
 	// Try API token authentication first
@@ -39,7 +39,7 @@ func (s *Server) requireAuth(c *fiber.Ctx) error {
 	if authHeader != "" && strings.HasPrefix(authHeader, "Bearer ") {
 		return s.authenticateWithToken(c, authHeader)
 	}
-	
+
 	// Fall back to session-based authentication
 	return s.authenticateWithSession(c)
 }
@@ -59,7 +59,7 @@ func (s *Server) authenticateWithToken(c *fiber.Ctx, authHeader string) error {
 		if errors.Is(err, core.ErrInvalidToken) || errors.Is(err, core.ErrTokenExpired) {
 			return SendErrorWithType(c, fiber.StatusForbidden, "Invalid or expired token", models.AuthenticationErrorType)
 		}
-		
+
 		s.log.Error("error authenticating API token", "error", err)
 		return SendErrorWithType(c, fiber.StatusInternalServerError, "Error validating token", models.GeneralErrorType)
 	}
diff --git a/internal/server/server.go b/internal/server/server.go
index efafc86b..5fcca72e 100644
--- a/internal/server/server.go
+++ b/internal/server/server.go
@@ -3,19 +3,20 @@ package server
 import (
 	"context"
 	"fmt"
-	"log/slog"
-	"net/http"
-
 	"github.com/mr-karan/logchef/internal/auth"
 	"github.com/mr-karan/logchef/internal/clickhouse"
 	"github.com/mr-karan/logchef/internal/config"
+	"github.com/mr-karan/logchef/internal/core"
 	"github.com/mr-karan/logchef/internal/sqlite"
+	"github.com/mr-karan/logchef/pkg/models"
+	"log/slog"
+	"net/http"
 
 	"github.com/gofiber/fiber/v2"
 	"github.com/gofiber/fiber/v2/middleware/compress"
 	"github.com/gofiber/fiber/v2/middleware/filesystem"
-	"github.com/gofiber/swagger" // Swagger handler
-
+	"github.com/gofiber/swagger"      // Swagger handler
+	"github.com/gofiber/websocket/v2" // websocket for live log
 	// Import generated docs (will be created after running swag init)
 	_ "github.com/mr-karan/logchef/docs"
 )
@@ -131,7 +132,7 @@ func (s *Server) setupRoutes() {
 	// --- Current User ("Me") Routes ---
 	api.Get("/me", s.requireAuth, s.handleGetCurrentUser)
 	api.Get("/me/teams", s.requireAuth, s.handleListCurrentUserTeams)
-	
+
 	// API Token Management for current user
 	api.Get("/me/tokens", s.requireAuth, s.handleListAPITokens)
 	api.Post("/me/tokens", s.requireAuth, s.handleCreateAPIToken)
@@ -217,6 +218,37 @@ func (s *Server) setupRoutes() {
 		}
 	}
 
+	// --- web socket request ---
+	// WebSocket access path
+	teamSourceOps.Use("/ws/log", func(c *fiber.Ctx) error {
+		user := c.Locals("user")
+		session := c.Locals("session")
+		authMethod := c.Locals("auth_method")
+
+		// Fiber does not hand over these value automatically to websocket.Conn, so move at here
+		c.Locals("user", user)
+		c.Locals("session", session)
+		c.Locals("auth_method", authMethod)
+		return c.Next()
+	})
+
+	teamSourceOps.Get("/ws/log", websocket.New(func(conn *websocket.Conn) {
+		if conn == nil {
+			s.log.Error("WebSocket connection upgrade failed: conn is nil")
+			return
+		}
+		userRaw := conn.Locals("user")
+		if userRaw == nil {
+			conn.WriteMessage(websocket.TextMessage, []byte("unauthorized"))
+			conn.Close()
+			return
+		}
+		user := userRaw.(*models.User)
+		teamID := conn.Params("teamID")
+		sourceID := conn.Params("sourceID")
+		s.handleLiveLogStream(conn, teamID, sourceID, user)
+	}))
+
 	// --- Static Asset and SPA Handling ---
 	s.app.Use("/api/*", s.notFoundHandler) // Catch-all for API 404s
 	s.app.Use("/assets", filesystem.New(filesystem.Config{
@@ -236,12 +268,41 @@ func (s *Server) setupRoutes() {
 // Start binds the server to the configured host and port and begins listening.
 func (s *Server) Start() error {
 	addr := fmt.Sprintf("%s:%d", s.config.Server.Host, s.config.Server.Port)
-	s.log.Info("starting http server", "address", addr)
 	return s.app.Listen(addr)
 }
 
 // Shutdown gracefully shuts down the Fiber server within the given context timeout.
 func (s *Server) Shutdown(ctx context.Context) error {
-	s.log.Info("shutting down http server")
 	return s.app.ShutdownWithContext(ctx)
 }
+
+func (s *Server) handleLiveLogStream(conn *websocket.Conn, teamID, sourceID string, user *models.User) {
+	conn.SetCloseHandler(func(code int, text string) error {
+		s.log.Info("WebSocket closed by client",
+			"code", code,
+			"text", text,
+			"user_id", user.ID,
+			"team_id", teamID,
+			"source_id", sourceID,
+		)
+		return nil
+	})
+
+	for {
+		_, msg, err := conn.ReadMessage()
+		if err != nil {
+			if websocket.IsCloseError(err, websocket.CloseNormalClosure, websocket.CloseGoingAway) {
+				s.log.Info("WebSocket closed normally")
+			} else {
+				s.log.Warn("WebSocket read error", "error", err)
+			}
+			break
+		}
+		parsedSourceID, err := core.ParseSourceID(sourceID)
+		if err != nil {
+			s.log.Warn("Invalid source ID", "error", err)
+			continue
+		}
+		s.handleLiveQueryRequest(conn, parsedSourceID, msg)
+	}
+}
diff --git a/internal/server/ws_query_handler.go b/internal/server/ws_query_handler.go
new file mode 100644
index 00000000..026a2e6d
--- /dev/null
+++ b/internal/server/ws_query_handler.go
@@ -0,0 +1,59 @@
+package server
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+	"github.com/gofiber/websocket/v2"
+	"github.com/mr-karan/logchef/internal/clickhouse"
+	"github.com/mr-karan/logchef/internal/core"
+	"github.com/mr-karan/logchef/pkg/models"
+)
+
+// handleLiveQueryRequest handles a WebSocket message containing a log query request,
+// executes the query, and sends the result back to the client.
+func (s *Server) handleLiveQueryRequest(conn *websocket.Conn, sourceID models.SourceID, msg []byte) {
+	var req models.APIQueryRequest
+	if err := json.Unmarshal(msg, &req); err != nil {
+		s.log.Warn("Invalid WebSocket query request format", "error", err)
+		conn.WriteMessage(websocket.TextMessage, []byte("Invalid request format"))
+		return
+	}
+
+	// Set default values if not provided
+	if req.Limit <= 0 {
+		req.Limit = 100
+	}
+	if req.QueryTimeout == nil {
+		defaultTimeout := models.DefaultQueryTimeoutSeconds
+		req.QueryTimeout = &defaultTimeout
+	}
+
+	if err := models.ValidateQueryTimeout(req.QueryTimeout); err != nil {
+		s.log.Warn("Invalid query timeout", "error", err)
+		conn.WriteMessage(websocket.TextMessage, []byte(fmt.Sprintf("Invalid query timeout: %v", err)))
+		return
+	}
+
+	result, err := core.QueryLogs(context.Background(), s.sqlite, s.clickhouse, s.log, sourceID, clickhouse.LogQueryParams{
+		RawSQL:       req.RawSQL,
+		Limit:        req.Limit,
+		QueryTimeout: req.QueryTimeout,
+	})
+	if err != nil {
+		s.log.Error("WebSocket query failed", "error", err)
+		conn.WriteMessage(websocket.TextMessage, []byte(fmt.Sprintf("Query error: %v", err)))
+		return
+	}
+
+	respBytes, err := json.Marshal(result)
+	if err != nil {
+		s.log.Error("Failed to marshal query result", "error", err)
+		conn.WriteMessage(websocket.TextMessage, []byte("Internal error while preparing result"))
+		return
+	}
+
+	if err := conn.WriteMessage(websocket.TextMessage, respBytes); err != nil {
+		s.log.Warn("WebSocket write error", "error", err)
+	}
+}