diff --git a/changes/fix-2909-2910-table-layout b/changes/fix-2909-2910-table-layout
new file mode 100644
index 000000000..dcd9a7c3d
--- /dev/null
+++ b/changes/fix-2909-2910-table-layout
@@ -0,0 +1 @@
+* Fix table layout syles on host details and query page
\ No newline at end of file
diff --git a/frontend/components/TableContainer/DataTable/DataTable.tsx b/frontend/components/TableContainer/DataTable/DataTable.tsx
index a0c96691e..b61224971 100644
--- a/frontend/components/TableContainer/DataTable/DataTable.tsx
+++ b/frontend/components/TableContainer/DataTable/DataTable.tsx
@@ -15,6 +15,7 @@ import { useDebouncedCallback } from "use-debounce/lib";
 
 import { useDeepEffect } from "utilities/hooks";
 import sort from "utilities/sort";
+import { AppContext } from "context/app";
 
 import Button from "components/buttons/Button";
 // @ts-ignore
@@ -88,6 +89,7 @@ const DataTable = ({
   onResultsCountChange,
 }: IDataTableProps): JSX.Element => {
   const { resetSelectedRows } = useContext(TableContext);
+  const { isOnlyObserver } = useContext(AppContext);
 
   const columns = useMemo(() => {
     return tableColumns;
@@ -351,6 +353,11 @@ const DataTable = ({
     </>
   );
 
+  const tableStyles = classnames({
+    "data-table__table": true,
+    "is-observer": isOnlyObserver,
+  });
+
   return (
     <div className={baseClass}>
       {isLoading && (
@@ -359,7 +366,7 @@ const DataTable = ({
         </div>
       )}
       <div className={"data-table data-table__wrapper"}>
-        <table className={"data-table__table"}>
+        <table className={tableStyles}>
           {Object.keys(selectedRowIds).length !== 0 && (
             <thead className={"active-selection"}>
               <tr {...headerGroups[0].getHeaderGroupProps()}>
diff --git a/frontend/pages/hosts/HostDetailsPage/_styles.scss b/frontend/pages/hosts/HostDetailsPage/_styles.scss
index 62f4c1df3..96825c68d 100644
--- a/frontend/pages/hosts/HostDetailsPage/_styles.scss
+++ b/frontend/pages/hosts/HostDetailsPage/_styles.scss
@@ -32,6 +32,11 @@
 
     .info-flex {
       display: flex;
+      flex-wrap: wrap;
+
+      .info-flex__item--title {
+        margin-bottom: 2.5rem;
+      }
 
       &__item {
         font-size: $x-small;
@@ -157,6 +162,7 @@
     flex-direction: row;
     justify-content: space-between;
     margin: 0;
+    padding-bottom: 0;
 
     .hostname-container {
       display: flex;
diff --git a/frontend/pages/queries/ManageQueriesPage/_styles.scss b/frontend/pages/queries/ManageQueriesPage/_styles.scss
index b00c27d96..a453d9cf5 100644
--- a/frontend/pages/queries/ManageQueriesPage/_styles.scss
+++ b/frontend/pages/queries/ManageQueriesPage/_styles.scss
@@ -120,64 +120,110 @@
         text-align: center;
       }
 
-      thead {
-        th:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(4)) {
-          width: 100px;
-        }
-        th:nth-child(1) {
-          width: 8px;
-        }
-        th:nth-child(2) {
-          width: 200px;
-        }
-        th:nth-child(4) {
-          width: 40px;
-        }
-        @include breakpoint(tablet) {
-          th:nth-child(3),
-          th:nth-child(5),
-          th:nth-child(7) {
-            display: none;
+      &:not(.is-observer) {
+        thead {
+          th:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(4)) {
+            width: 100px;
           }
-        }
-        @include breakpoint(ltdesktop) {
           th:nth-child(1) {
             width: 8px;
           }
-          th:nth-child(3),
-          th:nth-child(5) {
-            display: none;
+          th:nth-child(2) {
+            width: 200px;
+          }
+          th:nth-child(4) {
+            width: 40px;
+          }
+          @include breakpoint(tablet) {
+            th:nth-child(3),
+            th:nth-child(5),
+            th:nth-child(7) {
+              display: none;
+            }
+          }
+          @include breakpoint(ltdesktop) {
+            th:nth-child(1) {
+              width: 8px;
+            }
+            th:nth-child(3),
+            th:nth-child(5) {
+              display: none;
+            }
+          }
+        }
+
+        tbody {
+          td:nth-child(1) {
+            text-align: center;
+          }
+          @include breakpoint(tablet) {
+            td:nth-child(3),
+            td:nth-child(5),
+            td:nth-child(7) {
+              display: none;
+            }
+          }
+          @include breakpoint(ltdesktop) {
+            td:nth-child(3),
+            td:nth-child(5) {
+              display: none;
+            }
           }
         }
       }
 
-      tbody {
-        td:nth-child(1) {
-          text-align: center;
-        }
-        @include breakpoint(tablet) {
-          td:nth-child(3),
-          td:nth-child(5),
-          td:nth-child(7) {
-            display: none;
+      &.is-observer {
+        thead {
+          th:not(:nth-child(1)):not(:nth-child(2)) {
+            width: 100px;
+          }
+          th:nth-child(1) {
+            width: 200px;
+          }
+          th:nth-child(2) {
+            width: 40px;
+          }
+          @include breakpoint(tablet) {
+            th:nth-child(3),
+            th:nth-child(5) {
+              display: none;
+            }
+          }
+          @include breakpoint(ltdesktop) {
+            th:nth-child(3) {
+              display: none;
+            }
           }
         }
-        @include breakpoint(ltdesktop) {
-          td:nth-child(3),
-          td:nth-child(5) {
-            display: none;
+
+        tbody {
+          @include breakpoint(tablet) {
+            td:nth-child(3),
+            td:nth-child(5),
+            td:nth-child(6) {
+              display: none;
+            }
+          }
+          @include breakpoint(ltdesktop) {
+            td:nth-child(3),
+            td:nth-child(5) {
+              display: none;
+            }
           }
         }
-        td {
+      }
+    }
+
+    tbody {
+      td {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        .button {
+          display: block;
+          text-align: start;
+          width: 100%;
           overflow: hidden;
           text-overflow: ellipsis;
-          .button {
-            display: block;
-            text-align: start;
-            width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
         }
       }
     }