diff --git a/frontend/src/components/Sidebar/prepareRoutes.ts b/frontend/src/components/Sidebar/prepareRoutes.ts
index 7b08045723..ec4b398a56 100644
--- a/frontend/src/components/Sidebar/prepareRoutes.ts
+++ b/frontend/src/components/Sidebar/prepareRoutes.ts
@@ -167,12 +167,12 @@ function prepareRoutes(
       ],
     },
     {
-      name: 'gateway',
+      name: 'gatewayapi',
       label: t('glossary|Gateway'),
       icon: 'mdi:lan-connect',
       subList: [
         {
-          name: 'k8sgateways',
+          name: 'gateways',
           label: t('glossary|Gateways'),
         },
         {
diff --git a/frontend/src/components/gateway/ClassDetails.stories.tsx b/frontend/src/components/gateway/ClassDetails.stories.tsx
index 090c96d24e..1bb1d7aed7 100644
--- a/frontend/src/components/gateway/ClassDetails.stories.tsx
+++ b/frontend/src/components/gateway/ClassDetails.stories.tsx
@@ -21,9 +21,8 @@ export default {
     msw: {
       handlers: {
         storyBase: [
-          http.get(
-            'http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/gatewayclasses',
-            () => HttpResponse.error()
+          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1/gatewayclasses', () =>
+            HttpResponse.error()
           ),
           http.get('http://localhost:4466/api/v1/namespaces/default/events', () =>
             HttpResponse.json({
@@ -51,7 +50,7 @@ Basic.parameters = {
     handlers: {
       story: [
         http.get(
-          'http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/gatewayclasses/default-gateway-class',
+          'http://localhost:4466/apis/gateway.networking.k8s.io/v1/gatewayclasses/default-gateway-class',
           () => HttpResponse.json(DEFAULT_GATEWAY_CLASS)
         ),
       ],
diff --git a/frontend/src/components/gateway/ClassList.stories.tsx b/frontend/src/components/gateway/ClassList.stories.tsx
index 4d8c186028..9b3869f44a 100644
--- a/frontend/src/components/gateway/ClassList.stories.tsx
+++ b/frontend/src/components/gateway/ClassList.stories.tsx
@@ -21,14 +21,12 @@ export default {
     msw: {
       handlers: {
         story: [
-          http.get(
-            'http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/gatewayclasses',
-            () =>
-              HttpResponse.json({
-                kind: 'GatewayClassList',
-                metadata: {},
-                items: [DEFAULT_GATEWAY_CLASS],
-              })
+          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1/gatewayclasses', () =>
+            HttpResponse.json({
+              kind: 'GatewayClassList',
+              metadata: {},
+              items: [DEFAULT_GATEWAY_CLASS],
+            })
           ),
         ],
       },
diff --git a/frontend/src/components/gateway/ClassList.tsx b/frontend/src/components/gateway/ClassList.tsx
index 8d0696d157..d8f26317b9 100644
--- a/frontend/src/components/gateway/ClassList.tsx
+++ b/frontend/src/components/gateway/ClassList.tsx
@@ -64,9 +64,9 @@ export default function GatewayClassList() {
           getValue: (gatewayClass: GatewayClass) =>
             gatewayClass.status?.conditions?.find(
               ({ status }: { status: string }) => status === 'True'
-            ) ?? null,
+            )?.type || null,
           render: (gatewayClass: GatewayClass) =>
-            makeGatewayStatusLabel(gatewayClass.status?.conditions),
+            makeGatewayStatusLabel(gatewayClass.status?.conditions || null),
         },
         'age',
       ]}
diff --git a/frontend/src/components/gateway/GRPCRouteDetails.stories.tsx b/frontend/src/components/gateway/GRPCRouteDetails.stories.tsx
index 855bc3db5f..3e65f2e14a 100644
--- a/frontend/src/components/gateway/GRPCRouteDetails.stories.tsx
+++ b/frontend/src/components/gateway/GRPCRouteDetails.stories.tsx
@@ -21,10 +21,10 @@ export default {
     msw: {
       handlers: {
         baseStory: [
-          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/grpcroutes', () =>
+          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1/grpcroutes', () =>
             HttpResponse.json({})
           ),
-          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/grpcroutes', () =>
+          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1/grpcroutes', () =>
             HttpResponse.error()
           ),
           http.get('http://localhost:4466/api/v1/namespaces/default/events', () =>
@@ -57,7 +57,7 @@ Basic.parameters = {
     handlers: {
       story: [
         http.get(
-          'http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/grpcroutes/default-grpcroute',
+          'http://localhost:4466/apis/gateway.networking.k8s.io/v1/grpcroutes/default-grpcroute',
           () => HttpResponse.json(DEFAULT_GRPC_ROUTE)
         ),
       ],
diff --git a/frontend/src/components/gateway/GRPCRouteList.stories.tsx b/frontend/src/components/gateway/GRPCRouteList.stories.tsx
index 844e356e1d..ad6d29f3bf 100644
--- a/frontend/src/components/gateway/GRPCRouteList.stories.tsx
+++ b/frontend/src/components/gateway/GRPCRouteList.stories.tsx
@@ -22,14 +22,14 @@ export default {
       handlers: {
         storyBase: [],
         story: [
-          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/grpcroutes', () =>
+          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1/grpcroutes', () =>
             HttpResponse.json({
               kind: 'GRPCRouteList',
               metadata: {},
               items: [DEFAULT_GRPC_ROUTE],
             })
           ),
-          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/grpcroutes', () =>
+          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1/grpcroutes', () =>
             HttpResponse.error()
           ),
         ],
diff --git a/frontend/src/components/gateway/GatewayDetails.stories.tsx b/frontend/src/components/gateway/GatewayDetails.stories.tsx
index 7ab814e162..46ad2d93ef 100644
--- a/frontend/src/components/gateway/GatewayDetails.stories.tsx
+++ b/frontend/src/components/gateway/GatewayDetails.stories.tsx
@@ -21,10 +21,10 @@ export default {
     msw: {
       handlers: {
         baseStory: [
-          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/gateways', () =>
+          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1/gateways', () =>
             HttpResponse.json({})
           ),
-          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/gateways', () =>
+          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1/gateways', () =>
             HttpResponse.error()
           ),
           http.get('http://localhost:4466/api/v1/namespaces/default/events', () =>
@@ -57,7 +57,7 @@ Basic.parameters = {
     handlers: {
       story: [
         http.get(
-          'http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/gateways/default-gateway',
+          'http://localhost:4466/apis/gateway.networking.k8s.io/v1/gateways/default-gateway',
           () => HttpResponse.json(DEFAULT_GATEWAY)
         ),
       ],
diff --git a/frontend/src/components/gateway/GatewayDetails.tsx b/frontend/src/components/gateway/GatewayDetails.tsx
index 138be428f7..f57cd0540b 100644
--- a/frontend/src/components/gateway/GatewayDetails.tsx
+++ b/frontend/src/components/gateway/GatewayDetails.tsx
@@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { KubeCondition } from '../../lib/k8s/cluster';
 import Gateway, {
-  GatewayAddress,
   GatewayListener,
   GatewayListenerStatus,
+  GatewayStatusAddress,
 } from '../../lib/k8s/gateway';
 import { EmptyContent, StatusLabel, StatusLabelProps } from '../common';
 import Link from '../common/Link';
@@ -91,11 +91,11 @@ export default function GatewayDetails(props: { name?: string; namespace?: strin
                   columns={[
                     {
                       label: t('translation|Type'),
-                      getter: (data: GatewayAddress) => data.type,
+                      getter: (data: GatewayStatusAddress) => data.type,
                     },
                     {
                       label: t('translation|Value'),
-                      getter: (data: GatewayAddress) => data.value,
+                      getter: (data: GatewayStatusAddress) => data.value,
                     },
                   ]}
                   data={item?.getAddresses() || []}
diff --git a/frontend/src/components/gateway/GatewayList.stories.tsx b/frontend/src/components/gateway/GatewayList.stories.tsx
index aeecc6862c..85f2bf270c 100644
--- a/frontend/src/components/gateway/GatewayList.stories.tsx
+++ b/frontend/src/components/gateway/GatewayList.stories.tsx
@@ -22,14 +22,14 @@ export default {
       handlers: {
         storyBase: [],
         story: [
-          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/gateways', () =>
+          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1/gateways', () =>
             HttpResponse.json({
               kind: 'GatewayList',
               metadata: {},
               items: [DEFAULT_GATEWAY],
             })
           ),
-          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/gateways', () =>
+          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1/gateways', () =>
             HttpResponse.error()
           ),
         ],
diff --git a/frontend/src/components/gateway/GatewayList.tsx b/frontend/src/components/gateway/GatewayList.tsx
index 94fb4d1ee9..c361bac8d2 100644
--- a/frontend/src/components/gateway/GatewayList.tsx
+++ b/frontend/src/components/gateway/GatewayList.tsx
@@ -30,10 +30,9 @@ export default function GatewayList() {
           id: 'conditions',
           label: t('translation|Conditions'),
           getValue: (gateway: Gateway) =>
-            gateway.status?.conditions?.find(
-              ({ status }: { status: string }) => status === 'True'
-            ) ?? null,
-          render: (gateway: Gateway) => makeGatewayStatusLabel(gateway.status?.conditions),
+            gateway.status?.conditions?.find(({ status }: { status: string }) => status === 'True')
+              ?.type || null,
+          render: (gateway: Gateway) => makeGatewayStatusLabel(gateway.status?.conditions || null),
         },
         {
           id: 'listeners',
diff --git a/frontend/src/components/gateway/HTTPRouteDetails.stories.tsx b/frontend/src/components/gateway/HTTPRouteDetails.stories.tsx
index 8831e25fb1..231b1fa75b 100644
--- a/frontend/src/components/gateway/HTTPRouteDetails.stories.tsx
+++ b/frontend/src/components/gateway/HTTPRouteDetails.stories.tsx
@@ -21,10 +21,10 @@ export default {
     msw: {
       handlers: {
         baseStory: [
-          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/httproutes', () =>
+          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1/httproutes', () =>
             HttpResponse.json({})
           ),
-          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/httproutes', () =>
+          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1/httproutes', () =>
             HttpResponse.error()
           ),
           http.get('http://localhost:4466/api/v1/namespaces/default/events', () =>
@@ -57,7 +57,7 @@ Basic.parameters = {
     handlers: {
       story: [
         http.get(
-          'http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/httproutes/default-httproute',
+          'http://localhost:4466/apis/gateway.networking.k8s.io/v1/httproutes/default-httproute',
           () => HttpResponse.json(DEFAULT_HTTP_ROUTE)
         ),
       ],
diff --git a/frontend/src/components/gateway/HTTPRouteDetails.tsx b/frontend/src/components/gateway/HTTPRouteDetails.tsx
index 130fe83d4d..e110c9b831 100644
--- a/frontend/src/components/gateway/HTTPRouteDetails.tsx
+++ b/frontend/src/components/gateway/HTTPRouteDetails.tsx
@@ -11,6 +11,11 @@ function HTTPRouteRuleTable(props: { rule: HTTPRouteRule }) {
   const { t } = useTranslation(['glossary', 'translation']);
 
   const mainRows = [
+    {
+      name: rule.name,
+      withHighlightStyle: true,
+      hide: rule.name === undefined,
+    },
     {
       name: t('translation|BackendRefs'),
       value: rule.backendRefs?.length,
diff --git a/frontend/src/components/gateway/HTTPRouteList.stories.tsx b/frontend/src/components/gateway/HTTPRouteList.stories.tsx
index 5c21b2b9b4..0bb3db9b1c 100644
--- a/frontend/src/components/gateway/HTTPRouteList.stories.tsx
+++ b/frontend/src/components/gateway/HTTPRouteList.stories.tsx
@@ -22,14 +22,14 @@ export default {
       handlers: {
         storyBase: [],
         story: [
-          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/httproutes', () =>
+          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1/httproutes', () =>
             HttpResponse.json({
               kind: 'HTTPRouteList',
               metadata: {},
               items: [DEFAULT_HTTP_ROUTE],
             })
           ),
-          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/httproutes', () =>
+          http.get('http://localhost:4466/apis/gateway.networking.k8s.io/v1/httproutes', () =>
             HttpResponse.error()
           ),
         ],
diff --git a/frontend/src/components/gateway/__snapshots__/ClassDetails.Basic.stories.storyshot b/frontend/src/components/gateway/__snapshots__/ClassDetails.Basic.stories.storyshot
index 1a54089a8e..4c3448e772 100644
--- a/frontend/src/components/gateway/__snapshots__/ClassDetails.Basic.stories.storyshot
+++ b/frontend/src/components/gateway/__snapshots__/ClassDetails.Basic.stories.storyshot
@@ -40,20 +40,7 @@
           >
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
-            >
-              <div
-                class="MuiBox-root css-70qvj9"
-              >
-                <h1
-                  class="MuiTypography-root MuiTypography-h1 MuiTypography-noWrap css-yeaech-MuiTypography-root"
-                >
-                  GatewayClass
-                </h1>
-                <div
-                  class="MuiBox-root css-ldp2l3"
-                />
-              </div>
-            </div>
+            />
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
@@ -68,167 +55,10 @@
                 />
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
-                >
-                  <button
-                    aria-label="Edit"
-                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-whz9ym-MuiButtonBase-root-MuiIconButton-root"
-                    data-mui-internal-clone-element="true"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
-                  </button>
-                </div>
+                />
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
-                >
-                  <button
-                    aria-label="Delete"
-                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-whz9ym-MuiButtonBase-root-MuiIconButton-root"
-                    data-mui-internal-clone-element="true"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
-                  </button>
-                  <div />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-49904w-MuiGrid-root"
-      >
-        <div
-          class="MuiBox-root css-p0cik4"
-        >
-          <div
-            class="MuiBox-root css-j1fy4m"
-          >
-            <div
-              aria-busy="false"
-              aria-live="polite"
-              class="MuiBox-root css-1txv3mw"
-            >
-              <div
-                class="MuiBox-root css-0"
-              >
-                <dl
-                  class="MuiGrid-root MuiGrid-container css-uximdg-MuiGrid-root"
-                >
-                  <dt
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-trrd7p-MuiGrid-root"
-                  >
-                    Name
-                  </dt>
-                  <dd
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-deb4a-MuiGrid-root"
-                  >
-                    <span
-                      class="MuiTypography-root MuiTypography-body1 css-1qti38g-MuiTypography-root"
-                    >
-                      default-gateway-class
-                    </span>
-                  </dd>
-                  <dt
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-trrd7p-MuiGrid-root"
-                  >
-                    Namespace
-                  </dt>
-                  <dd
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-deb4a-MuiGrid-root"
-                  >
-                    <a
-                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
-                      href="/"
-                    >
-                      default
-                    </a>
-                  </dd>
-                  <dt
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-trrd7p-MuiGrid-root"
-                  >
-                    Creation
-                  </dt>
-                  <dd
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-deb4a-MuiGrid-root"
-                  >
-                    <span
-                      class="MuiTypography-root MuiTypography-body1 css-1qti38g-MuiTypography-root"
-                    >
-                      2023-07-19T09:48:42.000Z
-                    </span>
-                  </dd>
-                  <dt
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-16fae59-MuiGrid-root"
-                  >
-                    Controller Name
-                  </dt>
-                  <dd
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-1xrovmc-MuiGrid-root"
-                  >
-                    <span
-                      class="MuiTypography-root MuiTypography-body1 css-1qti38g-MuiTypography-root"
-                    >
-                      test
-                    </span>
-                  </dd>
-                </dl>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-49904w-MuiGrid-root"
-      >
-        <div
-          class="MuiBox-root css-p0cik4"
-        >
-          <div
-            class="MuiBox-root css-j1fy4m"
-          >
-            <div
-              class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-1qm9nul-MuiGrid-root"
-            >
-              <div
-                class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
-              >
-                <div
-                  class="MuiBox-root css-70qvj9"
-                >
-                  <h2
-                    class="MuiTypography-root MuiTypography-h2 MuiTypography-noWrap css-m5vcfd-MuiTypography-root"
-                  >
-                    Conditions
-                  </h2>
-                  <div
-                    class="MuiBox-root css-ldp2l3"
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiBox-root css-1txv3mw"
-            >
-              <div
-                class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-172kgz0-MuiPaper-root"
-              >
-                <div
-                  class="MuiBox-root css-19midj6"
-                >
-                  <p
-                    class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-18lkse1-MuiTypography-root"
-                  >
-                    No data to be shown.
-                  </p>
-                </div>
+                />
               </div>
             </div>
           </div>
@@ -241,45 +71,28 @@
           class="MuiBox-root css-p0cik4"
         >
           <div
-            class="MuiBox-root css-j1fy4m"
+            class="MuiBox-root css-5cned0"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-1qm9nul-MuiGrid-root"
-            >
-              <div
-                class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
-              >
-                <div
-                  class="MuiBox-root css-70qvj9"
-                >
-                  <h2
-                    class="MuiTypography-root MuiTypography-h2 MuiTypography-noWrap css-m5vcfd-MuiTypography-root"
-                  >
-                    Events
-                  </h2>
-                  <div
-                    class="MuiBox-root css-ldp2l3"
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiBox-root css-1txv3mw"
+            <span
+              class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-wdedfu-MuiCircularProgress-root"
+              role="progressbar"
+              style="width: 40px; height: 40px;"
+              title="Loading resource data"
             >
-              <div
-                class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-172kgz0-MuiPaper-root"
+              <svg
+                class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"
+                viewBox="22 22 44 44"
               >
-                <div
-                  class="MuiBox-root css-19midj6"
-                >
-                  <p
-                    class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-18lkse1-MuiTypography-root"
-                  >
-                    No data to be shown.
-                  </p>
-                </div>
-              </div>
-            </div>
+                <circle
+                  class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate css-176wh8e-MuiCircularProgress-circle"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/gateway/__snapshots__/GRPCRouteDetails.Basic.stories.storyshot b/frontend/src/components/gateway/__snapshots__/GRPCRouteDetails.Basic.stories.storyshot
index 705f457a8b..f947737f61 100644
--- a/frontend/src/components/gateway/__snapshots__/GRPCRouteDetails.Basic.stories.storyshot
+++ b/frontend/src/components/gateway/__snapshots__/GRPCRouteDetails.Basic.stories.storyshot
@@ -207,7 +207,7 @@
                 class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiTableContainer-root css-1msda30-MuiPaper-root-MuiTableContainer-root"
               >
                 <table
-                  class="MuiTable-root css-vd1o8p-MuiTable-root"
+                  class="MuiTable-root css-wd17ns-MuiTable-root"
                 >
                   <thead
                     class="MuiTableHead-root css-15wwp11-MuiTableHead-root"
@@ -245,6 +245,12 @@
                       >
                         Section Name
                       </th>
+                      <th
+                        class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeSmall css-t33dlg-MuiTableCell-root"
+                        scope="col"
+                      >
+                        Port
+                      </th>
                     </tr>
                   </thead>
                   <tbody
@@ -281,6 +287,46 @@
                       <td
                         class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall css-1k1onho-MuiTableCell-root"
                       />
+                      <td
+                        class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall css-1k1onho-MuiTableCell-root"
+                      />
+                    </tr>
+                    <tr
+                      class="MuiTableRow-root css-73w7uv-MuiTableRow-root"
+                    >
+                      <td
+                        class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall css-1k1onho-MuiTableCell-root"
+                      >
+                        <a
+                          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                          href="/"
+                        >
+                          envoy-gateway-system-test
+                        </a>
+                      </td>
+                      <td
+                        class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall css-1k1onho-MuiTableCell-root"
+                      >
+                        shared-gateway
+                      </td>
+                      <td
+                        class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall css-1k1onho-MuiTableCell-root"
+                      >
+                        Gateway
+                      </td>
+                      <td
+                        class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall css-1k1onho-MuiTableCell-root"
+                      >
+                        gateway.networking.k8s.io
+                      </td>
+                      <td
+                        class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall css-1k1onho-MuiTableCell-root"
+                      >
+                        test
+                      </td>
+                      <td
+                        class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall css-1k1onho-MuiTableCell-root"
+                      />
                     </tr>
                   </tbody>
                 </table>
diff --git a/frontend/src/components/gateway/__snapshots__/HTTPRouteDetails.Basic.stories.storyshot b/frontend/src/components/gateway/__snapshots__/HTTPRouteDetails.Basic.stories.storyshot
index 47b23b56f9..ee03e16c68 100644
--- a/frontend/src/components/gateway/__snapshots__/HTTPRouteDetails.Basic.stories.storyshot
+++ b/frontend/src/components/gateway/__snapshots__/HTTPRouteDetails.Basic.stories.storyshot
@@ -221,7 +221,13 @@
             >
               <dl
                 class="MuiGrid-root MuiGrid-container css-uximdg-MuiGrid-root"
-              />
+              >
+                <dt
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-12 css-1xrni4f-MuiGrid-root"
+                >
+                  test
+                </dt>
+              </dl>
               <dl
                 class="MuiGrid-root MuiGrid-container css-uximdg-MuiGrid-root"
               />
diff --git a/frontend/src/components/gateway/storyHelper.ts b/frontend/src/components/gateway/storyHelper.ts
index 7b67c025cf..954e558eb0 100644
--- a/frontend/src/components/gateway/storyHelper.ts
+++ b/frontend/src/components/gateway/storyHelper.ts
@@ -64,16 +64,15 @@ export const DEFAULT_HTTP_ROUTE: KubeHTTPRoute = {
     parentRefs: [],
     rules: [
       {
+        name: 'test',
         backendRefs: [],
         matches: [],
       },
       {
-        backendRefs: null,
         matches: [],
       },
       {
         backendRefs: [],
-        matches: null,
       },
     ],
   },
@@ -96,9 +95,15 @@ export const DEFAULT_GRPC_ROUTE: KubeGRPCRoute = {
         group: 'gateway.networking.k8s.io',
         kind: 'Gateway',
         namespace: 'shared-gateway',
-        sectionName: null,
         name: 'envoy-gateway-system',
       },
+      {
+        group: 'gateway.networking.k8s.io',
+        kind: 'Gateway',
+        namespace: 'shared-gateway',
+        sectionName: 'test',
+        name: 'envoy-gateway-system-test',
+      },
     ],
   },
 };
diff --git a/frontend/src/components/gateway/utils.tsx b/frontend/src/components/gateway/utils.tsx
index ae2f0338db..de7c025838 100644
--- a/frontend/src/components/gateway/utils.tsx
+++ b/frontend/src/components/gateway/utils.tsx
@@ -15,9 +15,7 @@ export function GatewayParentRefSection(props: { parentRefs: GatewayParentRefere
             label: t('translation|Name'),
             getter: (data: GatewayParentReference) => (
               <Link
-                routeName={
-                  data.kind.toLowerCase() === 'gateway' ? 'k8sgateway' : data.kind.toLowerCase()
-                }
+                routeName={data.kind?.toLowerCase()}
                 params={{ namespace: data.namespace, name: data.name }}
               >
                 {data.name}
@@ -40,9 +38,13 @@ export function GatewayParentRefSection(props: { parentRefs: GatewayParentRefere
             label: t('translation|Section Name'),
             getter: (data: GatewayParentReference) => data.sectionName,
           },
+          {
+            label: t('translation|Port'),
+            getter: (data: GatewayParentReference) => data.port,
+          },
         ]}
         data={parentRefs || []}
-        reflectInURL="listeners"
+        reflectInURL="parentRefs"
       />
     </SectionBox>
   );
diff --git a/frontend/src/lib/k8s/gateway.ts b/frontend/src/lib/k8s/gateway.ts
index e6af4c001f..eee86db9f0 100644
--- a/frontend/src/lib/k8s/gateway.ts
+++ b/frontend/src/lib/k8s/gateway.ts
@@ -1,15 +1,25 @@
 import { KubeCondition } from './cluster';
 import { KubeObject, KubeObjectInterface } from './KubeObject';
 
+/**
+ * ParentReference identifies an API object (usually a Gateway) that can be considered a parent of this resource (usually a route).
+ *
+ * @see {@link https://gateway-api.sigs.k8s.io/reference/spec/#gateway.networking.k8s.io/v1.ParentReference} Gateway API reference for ParentReference
+ */
 export interface GatewayParentReference {
-  group: string;
-  kind: string;
-  namespace: string;
-  sectionName: string | null;
+  group?: string;
+  kind?: string;
+  namespace?: string;
+  sectionName?: string;
   name: string;
-  [key: string]: any;
+  port?: number;
 }
 
+/**
+ * Listener embodies the concept of a logical endpoint where a Gateway accepts network connections.
+ *
+ * @see {@link https://gateway-api.sigs.k8s.io/reference/spec/#gateway.networking.k8s.io/v1.Listener} Gateway API reference for Listener
+ */
 export interface GatewayListener {
   hostname: string;
   name: string;
@@ -17,16 +27,36 @@ export interface GatewayListener {
   port: number;
   [key: string]: any;
 }
+
+/**
+ * ListenerStatus is the status associated with a Listener.
+ *
+ * @see {@link https://gateway-api.sigs.k8s.io/reference/spec/#gateway.networking.k8s.io/v1.ListenerStatus} Gateway API reference for ListenerStatus
+ */
 export interface GatewayListenerStatus {
   name: string;
+  attachedRoutes: number;
+  supportedKinds: any[];
   conditions: KubeCondition[];
-  [key: string]: any;
 }
-export interface GatewayAddress {
-  type: string;
+
+/**
+ * GatewayStatusAddress describes a network address that is bound to a Gateway.
+ *
+ * @see {@link https://gateway-api.sigs.k8s.io/reference/spec/#gateway.networking.k8s.io/v1.GatewayStatusAddress} Gateway API reference for GatewayStatusAddress
+ */
+export interface GatewayStatusAddress {
+  type?: string;
   value: string;
 }
 
+/**
+ * Gateway represents an instance of a service-traffic handling infrastructure by binding Listeners to a set of IP addresses.
+ *
+ * @see {@link https://gateway-api.sigs.k8s.io/reference/spec/#gateway.networking.k8s.io/v1.Gateway} Gateway API reference for Gateway
+ *
+ * @see {@link https://gateway-api.sigs.k8s.io/api-types/gateway/} Gateway API definition for Gateway
+ */
 export interface KubeGateway extends KubeObjectInterface {
   spec: {
     gatewayClassName?: string;
@@ -34,8 +64,9 @@ export interface KubeGateway extends KubeObjectInterface {
     [key: string]: any;
   };
   status: {
-    addresses: GatewayAddress[];
-    listeners: GatewayListenerStatus[];
+    addresses?: GatewayStatusAddress[];
+    listeners?: GatewayListenerStatus[];
+    conditions?: KubeCondition[];
     [otherProps: string]: any;
   };
 }
@@ -43,7 +74,7 @@ export interface KubeGateway extends KubeObjectInterface {
 class Gateway extends KubeObject<KubeGateway> {
   static kind = 'Gateway';
   static apiName = 'gateways';
-  static apiVersion = 'gateway.networking.k8s.io/v1beta1';
+  static apiVersion = ['gateway.networking.k8s.io/v1', 'gateway.networking.k8s.io/v1beta1'];
   static isNamespaced = true;
 
   get spec(): KubeGateway['spec'] {
@@ -58,23 +89,17 @@ class Gateway extends KubeObject<KubeGateway> {
     return this.jsonData.spec.listeners;
   }
 
-  getAddresses(): GatewayAddress[] {
-    return this.jsonData.status.addresses;
+  getAddresses(): GatewayStatusAddress[] {
+    return this.jsonData.status.addresses || [];
   }
 
   getListernerStatusByName(name: string): GatewayListenerStatus | null {
-    return this.jsonData.status.listeners.find(t => t.name === name) || null;
+    return this.jsonData.status.listeners?.find(t => t.name === name) || null;
   }
 
   static get pluralName() {
     return 'gateways';
   }
-  get listRoute(): string {
-    return 'k8sgateways'; // fix magic name gateway
-  }
-  get detailsRoute(): string {
-    return 'k8sgateway'; // fix magic name gateway
-  }
 }
 
 export default Gateway;
diff --git a/frontend/src/lib/k8s/gatewayClass.ts b/frontend/src/lib/k8s/gatewayClass.ts
index 658b97a06f..9f04338fac 100644
--- a/frontend/src/lib/k8s/gatewayClass.ts
+++ b/frontend/src/lib/k8s/gatewayClass.ts
@@ -1,11 +1,20 @@
+import { KubeCondition } from './cluster';
 import { KubeObject, KubeObjectInterface } from './KubeObject';
 
+/**
+ * GatewayClass is cluster-scoped resource defined by the infrastructure provider. This resource represents a class of Gateways that can be instantiated.
+ *
+ * @see {@link https://gateway-api.sigs.k8s.io/reference/spec/#gateway.networking.k8s.io/v1.GatewayClass} Gateway API reference for GatewayClass
+ *
+ * @see {@link https://gateway-api.sigs.k8s.io/api-types/gatewayclass/} Gateway API definition for GatewayClass
+ */
 export interface KubeGatewayClass extends KubeObjectInterface {
   spec: {
     controllerName: string;
     [key: string]: any;
   };
   status: {
+    conditions?: KubeCondition[];
     [otherProps: string]: any;
   };
 }
@@ -13,7 +22,7 @@ export interface KubeGatewayClass extends KubeObjectInterface {
 class GatewayClass extends KubeObject<KubeGatewayClass> {
   static kind = 'GatewayClass';
   static apiName = 'gatewayclasses';
-  static apiVersion = 'gateway.networking.k8s.io/v1beta1';
+  static apiVersion = ['gateway.networking.k8s.io/v1', 'gateway.networking.k8s.io/v1beta1'];
   static isNamespaced = false;
 
   get spec(): KubeGatewayClass['spec'] {
diff --git a/frontend/src/lib/k8s/grpcRoute.ts b/frontend/src/lib/k8s/grpcRoute.ts
index fd6d541380..74b93b3e65 100644
--- a/frontend/src/lib/k8s/grpcRoute.ts
+++ b/frontend/src/lib/k8s/grpcRoute.ts
@@ -1,6 +1,13 @@
 import { GatewayParentReference } from './gateway';
 import { KubeObject, KubeObjectInterface } from './KubeObject';
 
+/**
+ * GRPCRoute is a Gateway API type for specifying routing behavior of gRPC requests from a Gateway listener to an API object, i.e. Service.
+ *
+ * @see {@link https://gateway-api.sigs.k8s.io/reference/spec/#gateway.networking.k8s.io/v1.GRPCRoute} Gateway API reference for GRPCRoute
+ *
+ * @see {@link https://gateway-api.sigs.k8s.io/api-types/grpcroute/} Gateway API definition for GRPCRoute
+ */
 export interface KubeGRPCRoute extends KubeObjectInterface {
   spec: {
     parentRefs: GatewayParentReference[];
@@ -11,7 +18,7 @@ export interface KubeGRPCRoute extends KubeObjectInterface {
 class GRPCRoute extends KubeObject<KubeGRPCRoute> {
   static kind = 'GRPCRoute';
   static apiName = 'grpcroutes';
-  static apiVersion = 'gateway.networking.k8s.io/v1beta1';
+  static apiVersion = ['gateway.networking.k8s.io/v1', 'gateway.networking.k8s.io/v1beta1'];
   static isNamespaced = true;
 
   get spec(): KubeGRPCRoute['spec'] {
diff --git a/frontend/src/lib/k8s/httpRoute.ts b/frontend/src/lib/k8s/httpRoute.ts
index ade384acb0..4015969ec6 100644
--- a/frontend/src/lib/k8s/httpRoute.ts
+++ b/frontend/src/lib/k8s/httpRoute.ts
@@ -1,12 +1,27 @@
 import { GatewayParentReference } from './gateway';
 import { KubeObject, KubeObjectInterface } from './KubeObject';
 
+/**
+ * HTTPRouteRule defines semantics for matching an HTTP request based on conditions (matches), processing it (filters), and forwarding the request to an API object (backendRefs).
+ *
+ * @see {@link https://gateway-api.sigs.k8s.io/reference/spec/#gateway.networking.k8s.io/v1.HTTPRouteRule} Gateway API reference for HTTPRouteRule
+ *
+ * @see {@link https://gateway-api.sigs.k8s.io/api-types/httproute/#rules} Gateway API definition for HTTPRouteRule
+ */
 export interface HTTPRouteRule {
-  backendRefs: any[] | null;
-  matches: any[] | null;
+  name?: string;
+  backendRefs?: any[];
+  matches?: any[];
   [key: string]: any;
 }
 
+/**
+ * HTTPRoute is a Gateway API type for specifying routing behavior of HTTP requests from a Gateway listener to an API object, i.e. Service.
+ *
+ * @see {@link https://gateway-api.sigs.k8s.io/reference/spec/#gateway.networking.k8s.io/v1.HTTPRoute} Gateway API reference for HTTPRoute
+ *
+ * @see {@link https://gateway-api.sigs.k8s.io/api-types/httproute/} Gateway API definition for HTTPRoute
+ */
 export interface KubeHTTPRoute extends KubeObjectInterface {
   spec: {
     hostnames: string[];
@@ -19,7 +34,7 @@ export interface KubeHTTPRoute extends KubeObjectInterface {
 class HTTPRoute extends KubeObject<KubeHTTPRoute> {
   static kind = 'HTTPRoute';
   static apiName = 'httproutes';
-  static apiVersion = 'gateway.networking.k8s.io/v1beta1';
+  static apiVersion = ['gateway.networking.k8s.io/v1', 'gateway.networking.k8s.io/v1beta1'];
   static isNamespaced = true;
 
   get spec(): KubeHTTPRoute['spec'] {
diff --git a/frontend/src/lib/router.tsx b/frontend/src/lib/router.tsx
index 47fcacdc19..f480a73bf5 100644
--- a/frontend/src/lib/router.tsx
+++ b/frontend/src/lib/router.tsx
@@ -335,20 +335,20 @@ const defaultRoutes: {
     sidebar: 'NetworkPolicies',
     component: () => <NetworkPolicyDetails />,
   },
-  k8sgateways: {
+  gateways: {
     // fix magic name gateway
-    path: '/k8sgateways',
+    path: '/gateways',
     exact: true,
     name: 'Gateways',
-    sidebar: 'k8sgateways',
+    sidebar: 'gateways',
     component: () => <GatewayList />,
   },
-  k8sgateway: {
+  gateway: {
     // fix magic name gateway
-    path: '/k8sgateways/:namespace/:name',
+    path: '/gateways/:namespace/:name',
     exact: true,
     name: 'Gateways',
-    sidebar: 'k8sgateways',
+    sidebar: 'gateways',
     component: () => <GatewayDetails />,
   },
   httproutes: {