diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/constants.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/constants.tsx
index b56e27356ef34..41069e7107862 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/constants.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/constants.tsx
@@ -24,3 +24,12 @@ export const DEFAULT_DATE_RANGE = {
   start: 'now-1d',
   end: 'now',
 };
+
+export const AGENT_LOG_LEVELS = {
+  ERROR: 'error',
+  WARNING: 'warning',
+  INFO: 'info',
+  DEBUG: 'debug',
+};
+
+export const DEFAULT_LOG_LEVEL = AGENT_LOG_LEVELS.INFO;
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/index.tsx
index bbee562edf359..bed857c073099 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/index.tsx
@@ -17,6 +17,8 @@ import {
   EuiButtonEmpty,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import semverGte from 'semver/functions/gte';
+import semverCoerce from 'semver/functions/coerce';
 import { RedirectAppLinks } from '../../../../../../../../../../../src/plugins/kibana_react/public';
 import { TimeRange, esKuery } from '../../../../../../../../../../../src/plugins/data/public';
 import { LogStream } from '../../../../../../../../../infra/public';
@@ -138,6 +140,18 @@ export const AgentLogs: React.FunctionComponent<{ agent: Agent }> = memo(({ agen
     [logStreamQuery, dateRange.endExpression, dateRange.startExpression, http.basePath]
   );
 
+  const agentVersion = agent.local_metadata?.elastic?.agent?.version;
+  const isLogLevelSelectionAvailable = useMemo(() => {
+    if (!agentVersion) {
+      return false;
+    }
+    const agentVersionWithPrerelease = semverCoerce(agentVersion)?.version;
+    if (!agentVersionWithPrerelease) {
+      return false;
+    }
+    return semverGte(agentVersionWithPrerelease, '7.11.0');
+  }, [agentVersion]);
+
   return (
     <WrapperFlexGroup direction="column" gutterSize="m">
       <EuiFlexItem grow={false}>
@@ -214,9 +228,11 @@ export const AgentLogs: React.FunctionComponent<{ agent: Agent }> = memo(({ agen
           />
         </EuiPanel>
       </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <SelectLogLevel agent={agent} />
-      </EuiFlexItem>
+      {isLogLevelSelectionAvailable && (
+        <EuiFlexItem grow={false}>
+          <SelectLogLevel agent={agent} />
+        </EuiFlexItem>
+      )}
     </WrapperFlexGroup>
   );
 });
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/select_log_level.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/select_log_level.tsx
index 115ff1ab80a59..5e368ef23bbaf 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/select_log_level.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/select_log_level.tsx
@@ -4,30 +4,56 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { memo, useState, useMemo } from 'react';
+import React, { memo, useState, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import semverGte from 'semver/functions/gte';
 import { EuiSelect, EuiFormLabel, EuiButtonEmpty, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { Agent } from '../../../../../types';
 import { sendPostAgentAction, useStartServices } from '../../../../../hooks';
+import { AGENT_LOG_LEVELS, DEFAULT_LOG_LEVEL } from './constants';
 
 export const SelectLogLevel: React.FC<{ agent: Agent }> = memo(({ agent }) => {
-  const agentVersion = agent.local_metadata?.elastic?.agent?.version;
-  const isAvailable = useMemo(() => {
-    return semverGte(agentVersion, '7.11.0');
-  }, [agentVersion]);
-
   const { notifications } = useStartServices();
   const [isLoading, setIsLoading] = useState(false);
   const [agentLogLevel, setAgentLogLevel] = useState(
-    agent.local_metadata?.elastic?.agent?.log_level ?? 'info'
+    agent.local_metadata?.elastic?.agent?.log_level ?? DEFAULT_LOG_LEVEL
   );
   const [selectedLogLevel, setSelectedLogLevel] = useState(agentLogLevel);
 
-  if (!isAvailable) {
-    return null;
-  }
+  const onClickApply = useCallback(() => {
+    setIsLoading(true);
+    async function send() {
+      try {
+        const res = await sendPostAgentAction(agent.id, {
+          action: {
+            type: 'SETTINGS',
+            data: {
+              log_level: selectedLogLevel,
+            },
+          },
+        });
+        if (res.error) {
+          throw res.error;
+        }
+        setAgentLogLevel(selectedLogLevel);
+        notifications.toasts.addSuccess(
+          i18n.translate('xpack.fleet.agentLogs.selectLogLevel.successText', {
+            defaultMessage: 'Changed agent logging level to "{logLevel}".',
+            values: {
+              logLevel: selectedLogLevel,
+            },
+          })
+        );
+      } catch (error) {
+        notifications.toasts.addError(error, {
+          title: 'Error',
+        });
+      }
+      setIsLoading(false);
+    }
+
+    send();
+  }, [notifications, selectedLogLevel, agent.id]);
 
   return (
     <EuiFlexGroup gutterSize="m" alignItems="center">
@@ -42,16 +68,17 @@ export const SelectLogLevel: React.FC<{ agent: Agent }> = memo(({ agent }) => {
       <EuiFlexItem grow={false}>
         <EuiSelect
           disabled={isLoading}
+          compressed={true}
           id="selectAgentLogLevel"
           value={selectedLogLevel}
           onChange={(event) => {
             setSelectedLogLevel(event.target.value);
           }}
           options={[
-            { text: 'error', value: 'error' },
-            { text: 'warning', value: 'warning' },
-            { text: 'info', value: 'info' },
-            { text: 'debug', value: 'debug' },
+            { text: AGENT_LOG_LEVELS.ERROR, value: AGENT_LOG_LEVELS.ERROR },
+            { text: AGENT_LOG_LEVELS.WARNING, value: AGENT_LOG_LEVELS.WARNING },
+            { text: AGENT_LOG_LEVELS.INFO, value: AGENT_LOG_LEVELS.INFO },
+            { text: AGENT_LOG_LEVELS.DEBUG, value: AGENT_LOG_LEVELS.DEBUG },
           ]}
         />
       </EuiFlexItem>
@@ -59,43 +86,11 @@ export const SelectLogLevel: React.FC<{ agent: Agent }> = memo(({ agent }) => {
         <EuiFlexItem grow={false}>
           <EuiButtonEmpty
             flush="left"
+            size="xs"
             isLoading={isLoading}
             disabled={agentLogLevel === selectedLogLevel}
             iconType="refresh"
-            onClick={() => {
-              setIsLoading(true);
-              async function send() {
-                try {
-                  const res = await sendPostAgentAction(agent.id, {
-                    action: {
-                      type: 'SETTINGS',
-                      data: {
-                        log_level: selectedLogLevel,
-                      },
-                    },
-                  });
-                  if (res.error) {
-                    throw res.error;
-                  }
-                  setAgentLogLevel(selectedLogLevel);
-                  notifications.toasts.addSuccess(
-                    i18n.translate('xpack.fleet.agentLogs.selectLogLevel.successText', {
-                      defaultMessage: 'Changed agent logging level to "{logLevel}".',
-                      values: {
-                        logLevel: selectedLogLevel,
-                      },
-                    })
-                  );
-                } catch (error) {
-                  notifications.toasts.addError(error, {
-                    title: 'Error',
-                  });
-                }
-                setIsLoading(false);
-              }
-
-              send();
-            }}
+            onClick={onClickApply}
           >
             {isLoading ? (
               <FormattedMessage