diff --git a/kraken_frontend/src/routes.tsx b/kraken_frontend/src/routes.tsx
index 48dd0b297..55432e1c3 100644
--- a/kraken_frontend/src/routes.tsx
+++ b/kraken_frontend/src/routes.tsx
@@ -9,6 +9,7 @@ import AdminGuard from "./components/admin-guard";
 import Attacks from "./views/attacks";
 import AttackResults from "./views/attack-results";
 import WorkspaceOverview from "./views/workspace-overview";
+import Workspace from "./views/workspace";
 
 export const ROUTER = new Router();
 
@@ -16,6 +17,11 @@ export const ROUTES = {
     HOME: ROUTER.add({ url: "", parser: {}, render: () => <Home /> }),
     ME: ROUTER.add({ url: "me", parser: {}, render: () => <Me /> }),
     WORKSPACES: ROUTER.add({ url: "workspaces", parser: {}, render: () => <WorkspaceOverview /> }),
+    WORKSPACE: ROUTER.add({
+        url: "workspaces/{id}",
+        parser: { id: Number },
+        render: ({ id }) => <Workspace id={id} />,
+    }),
     ATTACKS: ROUTER.add({ url: "attacks", parser: {}, render: () => <Attacks /> }),
     ATTACK_RESULTS: ROUTER.add({
         url: "attacks/{id}",
diff --git a/kraken_frontend/src/styling/workspace-overview.css b/kraken_frontend/src/styling/workspace-overview.css
index 675169dc5..83b738d92 100644
--- a/kraken_frontend/src/styling/workspace-overview.css
+++ b/kraken_frontend/src/styling/workspace-overview.css
@@ -1,39 +1,39 @@
-.workspace-outer-container {
+.workspace-list-outer-container {
     display: grid;
     grid-gap: 1em;
     animation: yourAnimation 0.3s step-End 0.4s 1 normal backwards;
 }
 
-.workspace-creation {
+.workspace-list-creation {
     display: flex;
     flex-direction: row;
     gap: 2em;
 }
 
-.workspace-creation > .icon {
+.workspace-list-creation > .icon {
     width: 10em;
     padding: 0 2em;
 }
 
-.workspace-creation-form {
+.workspace-list-creation-form {
     display: flex;
     flex-direction: column;
     width: 100%;
     align-items: flex-start;
 }
 
-.workspace-creation-table {
+.workspace-list-creation-table {
     display: grid;
     gap: 0.5em;
     grid-template-columns: 8em 20em;
 }
 
-.workspace-creation-table > .button:last-of-type {
+.workspace-list-creation-table > .button:last-of-type {
     margin-top: 1em;
     grid-column: 1 / span 2;
 }
 
-.workspace-creation-table > textarea {
+.workspace-list-creation-table > textarea {
     height: 5em;
     resize: none;
 }
@@ -46,60 +46,60 @@
     padding: 1em 2em;
 }
 
-.workspace-filter-ownership {
+.workspace-list-filter-ownership {
     display: flex;
     gap: 2em;
     align-items: center;
 }
 
-.workspace-filter-ownership > .heading {
+.workspace-list-filter-ownership > .heading {
     margin: 0;
 }
 
-.workspace-filter-ownership-table {
+.workspace-list-filter-ownership-table {
     display: grid;
     grid-template-columns: 1fr 1fr;
     justify-content: center;
     align-items: center;
 }
 
-.workspace-sorting {
+.workspace-list-sorting {
     display: flex;
     gap: 2em;
     align-items: center;
 }
 
-.workspace-sorting > .heading {
+.workspace-list-sorting > .heading {
     margin: 0;
 }
 
-.workspace-sorting-table {
+.workspace-list-sorting-table {
     display: grid;
     grid-template-columns: 3fr 1fr 1em 3fr 1fr;
     align-items: center;
 }
 
-.workspace-container {
+.workspace-list-container {
     display: flex;
     flex-wrap: wrap;
     gap: 1em;
 }
 
-.workspace {
+.workspace-list-item {
     cursor: pointer;
     width: 20em;
     transition: all 200ms;
 }
 
-.workspace:hover {
+.workspace-list-item:hover {
     box-shadow: 0 0 25em var(--primary-op), inset 0 0 10em #0cf3, inset 0 0 0.5em #0ff2, 0 0 1em var(--primary-op);
 }
 
-.workspace > .heading {
+.workspace-list-item > .heading {
     margin: 0 0 1em 0;
 }
 
-.workspace-table {
+.workspace-list-table {
     display: grid;
     gap: 0.25em;
     grid-template-columns: 1fr 2fr;
diff --git a/kraken_frontend/src/styling/workspace.css b/kraken_frontend/src/styling/workspace.css
index e69de29bb..11f6d12b1 100644
--- a/kraken_frontend/src/styling/workspace.css
+++ b/kraken_frontend/src/styling/workspace.css
@@ -0,0 +1,35 @@
+.workspace-outer-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    animation: yourAnimation 0.3s step-End 0.4s 1 normal backwards;
+}
+
+.workspace-heading > h2 {
+    margin: 0;
+}
+
+.workspace-section-selector {
+    display: grid;
+    width: 100%;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 1em;
+}
+
+.workspace-section-selector > .pane {
+    padding: 1em 2em;
+    cursor: pointer;
+    transition: all 200ms;
+}
+
+.workspace-section-selector > .pane:hover {
+    box-shadow: 0 0 25em var(--primary-op), inset 0 0 10em #0cf3, inset 0 0 0.5em #0ff2, 0 0 1em var(--primary-op);
+}
+
+.workspace-section-selector h3 {
+    margin: 0;
+}
+
+.workspace-selected-tab {
+    filter: drop-shadow(0 0 0 var(--primary));
+}
diff --git a/kraken_frontend/src/views/workspace-overview.tsx b/kraken_frontend/src/views/workspace-overview.tsx
index 2910224a5..48d6bf5db 100644
--- a/kraken_frontend/src/views/workspace-overview.tsx
+++ b/kraken_frontend/src/views/workspace-overview.tsx
@@ -10,6 +10,7 @@ import "../styling/workspace-overview.css";
 import WorkspaceIcon from "../svg/workspace";
 import Checkbox from "../components/checkbox";
 import USER_CONTEXT from "../context/user";
+import { ROUTES } from "../routes";
 
 type Sorting = "none" | "name" | "createdAt" | "lastModified";
 
@@ -86,11 +87,11 @@ export default class WorkspaceOverview extends React.Component<WorkspacesProps,
 
         return (
             <>
-                <div className={"workspace-outer-container"}>
-                    <div className={"workspace-creation pane"}>
+                <div className={"workspace-list-outer-container"}>
+                    <div className={"workspace-list-creation pane"}>
                         <WorkspaceIcon />
                         <form
-                            className={"workspace-creation-form"}
+                            className={"workspace-list-creation-form"}
                             method={"post"}
                             onSubmit={async (e) => {
                                 e.preventDefault();
@@ -98,7 +99,7 @@ export default class WorkspaceOverview extends React.Component<WorkspacesProps,
                             }}
                         >
                             <h2 className={"heading"}>Create a new workspace</h2>
-                            <div className={"workspace-creation-table"}>
+                            <div className={"workspace-list-creation-table"}>
                                 <span>Name</span>
                                 <Input
                                     value={this.state.newName}
@@ -125,9 +126,9 @@ export default class WorkspaceOverview extends React.Component<WorkspacesProps,
                                 this.setState({ search: v });
                             }}
                         />
-                        <div className={"workspace-filter-ownership"}>
+                        <div className={"workspace-list-filter-ownership"}>
                             <h3 className={"heading"}>Filter</h3>
-                            <div className={"workspace-filter-ownership-table"}>
+                            <div className={"workspace-list-filter-ownership-table"}>
                                 <span>Owner</span>
                                 <Checkbox
                                     value={this.state.onlyOwner}
@@ -144,9 +145,9 @@ export default class WorkspaceOverview extends React.Component<WorkspacesProps,
                                 />
                             </div>
                         </div>
-                        <div className={"workspace-sorting"}>
+                        <div className={"workspace-list-sorting"}>
                             <h3 className={"heading"}>Sorting</h3>
-                            <div className={"workspace-sorting-table"}>
+                            <div className={"workspace-list-sorting-table"}>
                                 <span>Name</span>
                                 <Checkbox
                                     value={this.state.sorting === "name"}
@@ -176,7 +177,7 @@ export default class WorkspaceOverview extends React.Component<WorkspacesProps,
                             </div>
                         </div>
                     </div>
-                    <div className={"workspace-container"}>
+                    <div className={"workspace-list-container"}>
                         {workspaces
                             .filter((e) => {
                                 let include = true;
@@ -200,9 +201,14 @@ export default class WorkspaceOverview extends React.Component<WorkspacesProps,
                             })
                             .map((w) => {
                                 return (
-                                    <div className={"pane workspace"}>
+                                    <div
+                                        className={"pane workspace-list-item"}
+                                        onClick={() => {
+                                            ROUTES.WORKSPACE.visit({ id: w.id });
+                                        }}
+                                    >
                                         <h3 className={"heading"}>{w.name}</h3>
-                                        <div className={"workspace-table"}>
+                                        <div className={"workspace-list-table"}>
                                             <span>Owner:</span>
                                             <span>{w.owner.displayName}</span>
                                             <span>Description:</span>
diff --git a/kraken_frontend/src/views/workspace.tsx b/kraken_frontend/src/views/workspace.tsx
index e69de29bb..adfae6d70 100644
--- a/kraken_frontend/src/views/workspace.tsx
+++ b/kraken_frontend/src/views/workspace.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import "../styling/workspace.css";
+import { FullWorkspace } from "../api/generated";
+import { Api } from "../api/api";
+import { toast } from "react-toastify";
+
+type WorkspaceProps = {
+    id: number;
+};
+type WorkspaceState = {
+    workspace: FullWorkspace | null;
+    selectedTab: "domains" | "ips" | "ports" | "services";
+};
+
+export default class Workspace extends React.Component<WorkspaceProps, WorkspaceState> {
+    constructor(props: WorkspaceProps) {
+        super(props);
+
+        this.state = { workspace: null, selectedTab: "domains" };
+    }
+
+    componentDidMount() {
+        Api.workspaces.get(this.props.id).then((res) =>
+            res.match(
+                (workspace) => this.setState({ workspace }),
+                (err) => toast.error(err.message)
+            )
+        );
+    }
+
+    render() {
+        return (
+            <div className={"workspace-outer-container"}>
+                <div className={"pane workspace-heading"}>
+                    <h2 className={"heading"}>{this.state.workspace?.name}</h2>
+                </div>
+                <div className={"workspace-section-selector"}>
+                    <div
+                        className={this.state.selectedTab === "domains" ? "pane workspace-selected-tab" : "pane"}
+                        onClick={() => {
+                            this.setState({ selectedTab: "domains" });
+                        }}
+                    >
+                        <h3 className={"heading"}>Domains</h3>
+                    </div>
+                    <div
+                        className={this.state.selectedTab === "ips" ? "pane workspace-selected-tab" : "pane"}
+                        onClick={() => {
+                            this.setState({ selectedTab: "ips" });
+                        }}
+                    >
+                        <h3 className={"heading"}>IPs</h3>
+                    </div>
+                    <div
+                        className={this.state.selectedTab === "ports" ? "pane workspace-selected-tab" : "pane"}
+                        onClick={() => {
+                            this.setState({ selectedTab: "ports" });
+                        }}
+                    >
+                        <h3 className={"heading"}>Ports</h3>
+                    </div>
+                    <div
+                        className={this.state.selectedTab === "services" ? "pane workspace-selected-tab" : "pane"}
+                        onClick={() => {
+                            this.setState({ selectedTab: "services" });
+                        }}
+                    >
+                        <h3 className={"heading"}>Services</h3>
+                    </div>
+                </div>
+                <div className={"workspace-content-container"}></div>
+            </div>
+        );
+    }
+}