diff --git a/net/web/src/context/useViewportContext.hook.js b/net/web/src/context/useViewportContext.hook.js
index 316c3517..2cfdf9c2 100644
--- a/net/web/src/context/useViewportContext.hook.js
+++ b/net/web/src/context/useViewportContext.hook.js
@@ -2,7 +2,12 @@ import { useEffect, useState } from 'react';
 
 export function useViewportContext() {
 
-  const [state, setState] = useState({ });
+  const [state, setState] = useState({ 
+    display: null,
+    width: null,
+    height: null,
+  });
+
   const SMALL_MEDIUM = 650;
   const MEDIUM_LARGE = 1000;
   const LARGE_XLARGE = 1400;
diff --git a/net/web/test/Viewport.test.js b/net/web/test/Viewport.test.js
new file mode 100644
index 00000000..7657f6b5
--- /dev/null
+++ b/net/web/test/Viewport.test.js
@@ -0,0 +1,44 @@
+import React, { useState, useEffect, useContext } from 'react';
+import {render, act, screen, waitFor, fireEvent} from '@testing-library/react'
+
+import { ViewportContext, ViewportContextProvider } from 'context/ViewportContext';
+
+function ViewportView() {
+  const [renderCount, setRenderCount] = useState(0);
+  const viewport = useContext(ViewportContext);
+
+  useEffect(() => {
+    setRenderCount(renderCount + 1);
+  }, [viewport.state]);
+
+  return (
+    <div>
+      <span data-testid="count">{ renderCount }</span>
+      <span data-testid="display">{ viewport.state.display }</span>
+      <span data-testid="width">{ viewport.state.width }</span>
+      <span data-testid="height">{ viewport.state.height }</span>
+    </div>
+  );
+}
+
+function ViewportTestApp() {
+  return (
+    <ViewportContextProvider>
+      <ViewportView />
+    </ViewportContextProvider>
+  );
+}
+
+test('get, set and clear', async () => {
+  render(<ViewportTestApp />);
+
+  await waitFor(async () => {
+    expect(screen.getByTestId('display').textContent).toBe('large');
+    expect(screen.getByTestId('width').textContent).toBe('1024');
+    expect(screen.getByTestId('height').textContent).toBe('768');
+  });
+
+});
+
+
+