diff --git a/src/component-library/Pages/RSE/PageRSEProtocols.tsx b/src/component-library/Pages/RSE/PageRSEProtocols.tsx
index 3eb207649..47a49eb75 100644
--- a/src/component-library/Pages/RSE/PageRSEProtocols.tsx
+++ b/src/component-library/Pages/RSE/PageRSEProtocols.tsx
@@ -16,95 +16,145 @@ export const PageRSEProtocols = (
         tableData: RSEProtocolViewModel
     }
 ) => {
-    const shortstyle = { style: "w-20" }
-    const shortstyleblue = { style: "w-20 bg-blue-100"}
-    const shortstylepink = { style: "w-20 bg-pink-100"}
+    const shortstyleblue = { style: "w-20 sm:w-10 bg-blue-100 dark:bg-blue-900"}
+    const shortstylepink = { style: "w-20 sm:w-10 bg-pink-100 dark:bg-pink-900"}
     const columnHelper = createColumnHelper<RSEProtocol>()
     const tablecolumns: any[] = [
         columnHelper.accessor("scheme", {
             id: "scheme",
             header: info => <H3>Scheme</H3>,
             cell: info => <P className="break-all pr-1">{info.getValue()}</P>,
-            meta: { style: "w-24" }
+            meta: { style: "w-20" }
         }),
         columnHelper.accessor("hostname", {
             id: "hostname",
             header: info => <H3>Hostname</H3>,
-            cell: info => <P className="break-all pr-1">{info.getValue()}</P>
+            cell: info => <P className="break-all pr-1">{info.getValue()}</P>,
+            meta: { style: "w-26 lg:w-36" }
         }),
         columnHelper.accessor("port", {
             id: "port",
-            header: info => <H3>Port</H3>,
-            cell: info => <P className="break-all pr-1">{info.getValue()}</P>,
-            meta: { style: "w-24" }
+            header: info =>(
+                <div>
+                    <H3 >Port</H3>
+                </div>
+            ),
+            cell: info => <P className="break-all pr-1 flex justify-center">{info.getValue()}</P>,
+            meta: { style: "w-20" }
         }),
         columnHelper.accessor("prefix", {
             id: "prefix",
-            header: info => <H3>Prefix</H3>,
+            header: info =>  (
+                <div>
+                    <H3>Prefix</H3>
+                </div>
+            ),
             cell: info => <P className="break-all pr-1">{info.getValue()}</P>,
+            meta: { style: "w-24" }
         }),
         columnHelper.accessor("priorities_lan.read", {
             id: "priorities_lan.read",
-            header: info => <TableSortUpDown name="LAN/R" column={info.column} stack />,
-            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
-            meta: shortstyleblue
-        }),
+            header: info =>  (<div className="flex flex-col">
+            <H3 className="lg:hidden">L/R</H3>
+            <H3 className="hidden lg:block">LAN/R</H3>
+            <TableSortUpDown name="" column={info.column} stack />
+          </div>
+        ),
+        cell: info => <P className="break-all pr-1 text-center">{info.getValue()}</P>,
+        meta: shortstyleblue
+      }),
         columnHelper.accessor("priorities_lan.write", {
             id: "priorities_lan.write",
-            header: info => <TableSortUpDown name="LAN/W" column={info.column} stack />,
-            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            header: info =>  (<div className="flex flex-col">
+            <H3 className="lg:hidden">L/W</H3>
+            <H3 className="hidden lg:block">LAN/W</H3>
+            <TableSortUpDown name="" column={info.column} stack />
+          </div>
+        ),
+            cell: info => <P className="break-all pr-1 text-center">{info.getValue()}</P>,
             meta: shortstyleblue
         }),
         columnHelper.accessor("priorities_lan.delete", {
             id: "priorities_lan.delete",
-            header: info => <TableSortUpDown name="LAN/D" column={info.column} stack />,
-            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            header: info =>  (<div className="flex flex-col">
+            <H3 className="lg:hidden">L/D</H3>
+            <H3 className="hidden lg:block">LAN/D</H3>
+            <TableSortUpDown name="" column={info.column} stack />
+          </div>
+        ),
+            cell: info => <P className="break-all pr-1 text-center">{info.getValue()}</P>,
             meta: shortstyleblue
         }),
         columnHelper.accessor("priorities_wan.read", {
-            id: "priorities_lan.read",
-            header: info => <TableSortUpDown name="WAN/R" column={info.column} stack />,
-            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            id: "priorities_wan.read",
+            header: info =>  (<div className="flex flex-col">
+            <H3 className="lg:hidden">W/R</H3>
+            <H3 className="hidden lg:block">WAN/R</H3>
+            <TableSortUpDown name="" column={info.column} stack />
+          </div>
+        ),
+            cell: info => <P className="break-all pr-1 text-center">{info.getValue()}</P>,
             meta: shortstylepink
         }),
         columnHelper.accessor("priorities_wan.write", {
-            id: "priorities_lan.write",
-            header: info => <TableSortUpDown name="WAN/W" column={info.column} stack />,
-            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            id: "priorities_wan.write",
+            header: info =>  <div className="flex flex-col">
+            <H3 className="lg:hidden">W/W</H3>
+            <H3 className="hidden lg:block">WAN/W</H3>
+            <TableSortUpDown name="" column={info.column} stack />
+          </div>
+        ,
+            cell: info => <P className="break-all pr-1 text-center">{info.getValue()}</P>,
             meta: shortstylepink
         }),
         columnHelper.accessor("priorities_wan.delete", {
-            id: "priorities_lan.delete",
-            header: info => <TableSortUpDown name="WAN/D" column={info.column} stack />,
-            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            id: "priorities_wan.delete",
+            header: info =>  (<div className="flex flex-col">
+            <H3 className="lg:hidden">W/D</H3>
+            <H3 className="hidden lg:block">WAN/D</H3>
+            <TableSortUpDown name="" column={info.column} stack />
+          </div>
+        ),
+            cell: info => <P className="break-all pr-1 text-center">{info.getValue()}</P>,
             meta: shortstylepink,
         }),
-        // columnHelper.accessor("priorities_wan.tpc", {
-        //     id: "priorities_lan.tpc",
-        //     header: info => <TableSortUpDown name="TPC" column={info.column} stack />,
-        //     cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
-        //     meta: shortstylepink,
-        // }),
         columnHelper.accessor("priorities_wan.tpcwrite", {
-            id: "priorities_lan.tpcwrite",
-            header: info => <TableSortUpDown name="TPC/W" column={info.column} stack />,
-            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            id: "priorities_wan.tpcwrite",
+            header: info =>  (<div className="flex flex-col">
+            <H3 className="lg:hidden">T/W</H3>
+            <H3 className="hidden lg:block">TCP/W</H3>
+
+            <TableSortUpDown name="" column={info.column} stack />
+          </div>
+        ),
+            cell: info => <P className="break-all pr-1 text-center">{info.getValue()}</P>,
             meta: shortstylepink,
         }),
         columnHelper.accessor("priorities_wan.tpcread", {
-            id: "priorities_lan.tpcread",
-            header: info => <TableSortUpDown name="TPC/R" column={info.column} stack />,
-            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            id: "priorities_wan.tpcread",
+            header: info =>  (<div className="flex flex-col">
+            <H3 className="lg:hidden">T/R</H3>
+            <H3 className="hidden lg:block">TCP/R</H3>
+            <TableSortUpDown name="" column={info.column} stack />
+          </div>
+        ),
+            cell: info => <P className="break-all pr-1 text-center">{info.getValue()}</P>,
             meta: shortstylepink,
         }),
     ]
+
     return (
         <NormalTable<RSEProtocol>
             tabledata={props.tableData.protocols || []}
             tablecolumns={tablecolumns}
             tablestyling={{
-                pageSize: 5,
+                pageSize: 10,
             } as TableStyling}
+            tableselecting={{
+                enableRowSelection: true,
+                handleChange: (rows: RSEProtocol[]) => {},
+            }
+            }
         />
     );
 };
\ No newline at end of file
diff --git a/src/component-library/StreamedTables/NormalTable.tsx b/src/component-library/StreamedTables/NormalTable.tsx
index bf84c74ec..9190e68f6 100644
--- a/src/component-library/StreamedTables/NormalTable.tsx
+++ b/src/component-library/StreamedTables/NormalTable.tsx
@@ -4,6 +4,7 @@ import { TableHeader } from "./TableHeader";
 import { TableBody } from "./TableBody";
 import { NormalTableProps } from "./types";
 import { usePrepareTable } from "./helpers";
+import { TableBreakout } from "./TableBreakout";
 
 
 export function NormalTable<T>(props: NormalTableProps<T>) {
@@ -13,6 +14,7 @@ export function NormalTable<T>(props: NormalTableProps<T>) {
         tabledata: props.tabledata,
         tablecolumns: props.tablecolumns,
         tablestyling: props.tablestyling,
+        tableselecting: props.tableselecting,
     })
 
     return (
@@ -35,6 +37,19 @@ export function NormalTable<T>(props: NormalTableProps<T>) {
                 role="rowgroup"
                 aria-label="NormalTable Footer"
             >
+                <tr aria-label="Extra Information">
+                <td
+                    className={twMerge(
+                        props.tableselecting?.breakOut?.breakoutVisibility ? "table-cell" : "hidden"
+                    )}
+                    colSpan={table.getVisibleLeafColumns().length}
+                >
+                    <TableBreakout
+                        keys={props.tableselecting?.breakOut?.keys ?? {} as Record<string, string>}
+                        row={table.getSelectedRowModel().flatRows[0]}
+                    />
+                </td>
+            </tr>
                 <tr aria-label="Pagination Controls">
                     <td
                         colSpan={table.getVisibleLeafColumns().length}
diff --git a/src/component-library/outputtailwind.css b/src/component-library/outputtailwind.css
index 75c4c89d4..6e7fe67e5 100644
--- a/src/component-library/outputtailwind.css
+++ b/src/component-library/outputtailwind.css
@@ -2451,6 +2451,11 @@ html {
     background-color: rgb(190 24 93 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-pink-900 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(131 24 67 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-purple-600 {
     --tw-bg-opacity: 1;
     background-color: rgb(147 51 234 / var(--tw-bg-opacity));
@@ -2744,6 +2749,10 @@ html {
     display: none;
   }
 
+  .sm\:w-10 {
+    width: 2.5rem;
+  }
+
   .sm\:w-24 {
     width: 6rem;
   }
@@ -3008,10 +3017,22 @@ html {
     grid-column: span 2 / span 2;
   }
 
+  .lg\:block {
+    display: block;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
   .lg\:w-32 {
     width: 8rem;
   }
 
+  .lg\:w-36 {
+    width: 9rem;
+  }
+
   .lg\:w-48 {
     width: 12rem;
   }