diff --git a/frontend/src/components/dashboard/clusters-dashboard-table.tsx b/frontend/src/components/dashboard/clusters-dashboard-table.tsx
index c0b3da39..c88625e4 100644
--- a/frontend/src/components/dashboard/clusters-dashboard-table.tsx
+++ b/frontend/src/components/dashboard/clusters-dashboard-table.tsx
@@ -75,6 +75,7 @@ const mapStateToProps = (state:RootState) => ({
   globalClustersList: state.clusters.globalClustersList,
   globalAgents: state.agents,
   globalEntries: state.entries,
+  globalClickedDashboardTable: state.tornjak.globalClickedDashboardTable,
 })
 
 const ClusterDashboardTableStyled = withStyles(
diff --git a/frontend/src/components/dashboard/dashboard-details-render.tsx b/frontend/src/components/dashboard/dashboard-details-render.tsx
new file mode 100644
index 00000000..e3771a57
--- /dev/null
+++ b/frontend/src/components/dashboard/dashboard-details-render.tsx
@@ -0,0 +1,143 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import IsManager from '../is_manager';
+import DashboardDetailsStyled from './dashboard-details';
+import TornjakHelper from '../tornjak-helper';
+import TornjakApi from '../tornjak-api-helpers';
+import { RootState } from 'redux/reducers';
+import {
+    serverSelectedFunc,
+    clustersListUpdateFunc,
+    agentsListUpdateFunc,
+    entriesListUpdateFunc,
+    tornjakServerInfoUpdateFunc,
+    serverInfoUpdateFunc,
+    selectorInfoFunc,
+    tornjakMessageFunc,
+    workloadSelectorInfoFunc,
+    agentworkloadSelectorInfoFunc,
+    clusterTypeInfoFunc,
+    clickedDashboardTableFunc,
+} from 'redux/actions';
+
+import {
+    AgentsList,
+    AgentsWorkLoadAttestorInfo,
+    ClustersList,
+    EntriesList,
+    SelectorInfoLabels,
+    ServerInfo,
+    TornjakServerInfo,
+    WorkloadSelectorInfoLabels,
+    DebugServerInfo
+} from "components/types";
+
+
+
+type DashboardDetailsRenderProps ={
+    params: { entity: string };
+    // dispatches a payload for the server selected and has a return type of void
+    serverSelectedFunc: (globalServerSelected: string) => void,
+    // dispatches a payload for list of clusters with their metadata info as an array of ClustersList Type and has a return type of void
+    clustersListUpdateFunc: (globalClustersList: ClustersList[]) => void,
+    // dispatches a payload for list of agents with their metadata info as an array of AgentListType and has a return type of void
+    agentsListUpdateFunc: (globalAgentsList: AgentsList[]) => void,  
+    // dispatches a payload for list of entries with their metadata info as an array of EntriesListType and has a return type of void
+    entriesListUpdateFunc: (globalEntriesList: EntriesList[]) => void,
+    // dispatches a payload for the tornjak server info of the selected server and has a return type of void
+    tornjakServerInfoUpdateFunc: (globalTornjakServerInfo: TornjakServerInfo) => void, 
+    // dispatches a payload for the server trust domain and nodeAttestorPlugin and has a return type of void
+    serverInfoUpdateFunc: (globalServerInfo: ServerInfo) => void,
+    // dispatches a payload for list of available selectors and their options as an object and has a return type of void
+    selectorInfoFunc: (globalSelectorInfo: SelectorInfoLabels) => void,
+    // dispatches a payload for an Error Message/ Success Message of an executed function as a string and has a return type of void
+    tornjakMessageFunc: (globalErrorMessage: string) => void,
+    // dispatches a payload for list of available workload selectors and their options as an object and has a return type of void
+    workloadSelectorInfoFunc: (globalWorkloadSelectorInfo: WorkloadSelectorInfoLabels) => void, 
+    // dispatches a payload for the workload selector info for the agents as an array of AgentsWorkLoadAttestorInfoType and has a return type of void
+    agentworkloadSelectorInfoFunc: (globalAgentsWorkLoadAttestorInfo: AgentsWorkLoadAttestorInfo[]) => void,  
+    // dispatches a payload for list of available cluster types as array of strings and has a return type of void
+    clusterTypeInfoFunc: (globalClusterTypeInfo: string[]) => void,
+    // dispatches a payload for the clicked table in a dashboard as a string and has a return type of void
+    clickedDashboardTableFunc: (globalClickedDashboardTable: string) => void,
+    // the selected server for manager mode 
+    globalServerSelected: string, 
+    // tornjak server debug info of the selected server
+    globalDebugServerInfo: DebugServerInfo,
+    // tornjak server info of the selected server
+    globalTornjakServerInfo: TornjakServerInfo, 
+
+}
+// DashboardDetailsRender takes in details url parameters
+// returns details page for dashboard for a specific entity
+class DashboardDetailsRender extends React.Component<DashboardDetailsRenderProps, {}> {
+    TornjakApi:TornjakApi;
+    TornjakHelper: TornjakHelper;
+    constructor(props:DashboardDetailsRenderProps) {
+        super(props);
+        this.TornjakApi = new TornjakApi({});
+        this.TornjakHelper = new TornjakHelper({});
+        this.state = {};
+    }
+
+    componentDidMount() {
+        const { params } = this.props;
+        if (this.props.globalDebugServerInfo === undefined) {
+            if (IsManager) {
+                if (this.props.globalServerSelected !== "") {
+                    this.props.clickedDashboardTableFunc(params.entity + "details");
+                    this.TornjakApi.populateClustersUpdate(this.props.globalServerSelected, this.props.clustersListUpdateFunc, this.props.tornjakMessageFunc);
+                    this.TornjakApi.populateAgentsUpdate(this.props.globalServerSelected, this.props.agentsListUpdateFunc, this.props.tornjakMessageFunc);
+                    this.TornjakApi.populateEntriesUpdate(this.props.globalServerSelected, this.props.entriesListUpdateFunc, this.props.tornjakMessageFunc);
+                    this.TornjakApi.refreshSelectorsState(this.props.globalServerSelected, this.props.agentworkloadSelectorInfoFunc);
+                    this.TornjakApi.populateTornjakAgentInfo(this.props.globalServerSelected, this.props.agentworkloadSelectorInfoFunc, "");
+                    this.TornjakApi.populateTornjakServerInfo(this.props.globalServerSelected, this.props.tornjakServerInfoUpdateFunc, this.props.tornjakMessageFunc);
+                }
+            } else {
+                this.props.clickedDashboardTableFunc(params.entity + "details");
+                this.TornjakApi.refreshLocalSelectorsState(this.props.agentworkloadSelectorInfoFunc);
+                this.TornjakApi.populateLocalClustersUpdate(this.props.clustersListUpdateFunc, this.props.tornjakMessageFunc);
+                this.TornjakApi.populateLocalAgentsUpdate(this.props.agentsListUpdateFunc, this.props.tornjakMessageFunc);
+                this.TornjakApi.populateLocalEntriesUpdate(this.props.entriesListUpdateFunc, this.props.tornjakMessageFunc);
+                this.TornjakApi.populateLocalTornjakAgentInfo(this.props.agentworkloadSelectorInfoFunc, "");
+                this.TornjakApi.populateLocalTornjakServerInfo(this.props.tornjakServerInfoUpdateFunc, this.props.tornjakMessageFunc);
+                if (this.props.globalTornjakServerInfo !== null) {
+                    this.TornjakApi.populateServerInfo(this.props.globalTornjakServerInfo, this.props.serverInfoUpdateFunc);
+                }
+            }
+        }
+    }
+
+    render() {
+        const { params } = this.props;
+        return (
+            <DashboardDetailsStyled selectedData={this.TornjakHelper.detailsDataParse(params, this.props)} />
+        );
+    }
+}
+
+const mapStateToProps = (state: RootState) => ({
+    globalServerInfo: state.servers.globalServerInfo,
+    globalTornjakServerInfo: state.servers.globalTornjakServerInfo,
+    globalClustersList: state.clusters.globalClustersList,
+    globalAgentsList: state.agents.globalAgentsList,
+    globalEntriesList: state.entries.globalEntriesList,
+    globalAgentsWorkLoadAttestorInfo: state.agents.globalAgentsWorkLoadAttestorInfo,
+    globalDebugServerInfo: state.servers.globalDebugServerInfo,
+})
+
+export default connect(
+    mapStateToProps,
+    { serverSelectedFunc, 
+      clustersListUpdateFunc, 
+      agentsListUpdateFunc, 
+      entriesListUpdateFunc, 
+      tornjakServerInfoUpdateFunc, 
+      serverInfoUpdateFunc, 
+      selectorInfoFunc, 
+      tornjakMessageFunc, 
+      workloadSelectorInfoFunc, 
+      agentworkloadSelectorInfoFunc, 
+      clusterTypeInfoFunc, 
+      clickedDashboardTableFunc }
+)(DashboardDetailsRender);
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/dashboard-details.tsx b/frontend/src/components/dashboard/dashboard-details.tsx
new file mode 100644
index 00000000..71581e01
--- /dev/null
+++ b/frontend/src/components/dashboard/dashboard-details.tsx
@@ -0,0 +1,357 @@
+import React from "react";
+import { connect } from "react-redux";
+import { withStyles } from "tss-react/mui";
+// Components
+import { Container, Grid, Paper } from "@mui/material";
+// Tables
+import ClusterDashboardTableStyled from "./clusters-dashboard-table";
+import AgentDashboardTableStyled from "./agents-dashboard-table";
+import EntriesDashBoardTableStyled from "./entries-dashboard-table";
+import DashboardDrawerStyled from "./dashboard-drawer";
+import { RootState } from 'redux/reducers';
+import { Theme } from '@mui/material/styles'; 
+const styles = (theme:Theme)  => ({
+  root: { 
+    marginTop: -25,
+    marginLeft: -20,
+    display: "flex",
+  },
+  appBarSpacer: theme.mixins.toolbar,
+  content: {
+    flexGrow: 1,
+  },
+  container: {
+    //container for root
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(4),
+    marginLeft: 0,
+  },
+  paper: {
+    //container for all grids
+    padding: theme.spacing(2),
+    display: "flex",
+    overflow: "auto",
+    flexDirection: "column",
+    marginBottom: 20,
+  },
+  detailsTitle: {
+    fontSize: 20,
+    color: "rgb(89, 103, 185)",
+  },
+  metadataTag: {
+    fontWeight: "bold",
+    fontSize: 17,
+    marginTop: 10,
+  },
+
+  dashboardDetalsLine: {
+    marginLeft: 0,
+    width: 1200,
+  },
+  metadataDetails: {
+    fontSize: 17,
+  },
+});
+
+// DashboardDetails takes in the selected data and props from dashboard table for a specific entity
+// returns details page for dashboard
+
+type DashboardDetailsProps = {
+  // the clicked dashboard table
+  globalClickedDashboardTable: string,
+  selectedData: {
+    name: string;
+    parentId: string;
+    clusterName: string;
+    spiffeid: string;
+    length: number;
+    numNodes: number;
+    numEntries:number;
+    id:string;
+    created:string;
+    status:string;
+    platformType:string;
+    adminFlag:boolean;
+    entryExpireTime:string;
+    
+  },
+  selectedDataKey:any[],
+  
+
+
+
+} 
+
+class DashboardDetails extends React.Component<DashboardDetailsProps> {
+  constructor(props:DashboardDetailsProps) {
+    super(props);
+    this.state = {
+      selectedDataKey: this.selectedDataKey(),
+    };
+  }
+
+  componentDidUpdate(prevProps:DashboardDetailsProps) {
+    if (prevProps.selectedData !== this.props.selectedData) {
+      this.setState({
+        selectedDataKey: this.selectedDataKey(),
+        
+      });
+    }
+  }
+
+  selectedDataKey() {
+    var { selectedData } = this.props;
+    var clickedDashboardTable = this.props.globalClickedDashboardTable;
+    const selectedDataKey: Record<string, string | undefined> = {}; //Fix Lateer
+    if (selectedData !== undefined) {
+      if (clickedDashboardTable === "clustersdetails") {
+        //to filter agents in clustersdetails
+        selectedDataKey["agentsFilter"] = selectedData.name;
+        //to filter entries in clustersdetails
+        selectedDataKey["entriesFilter"] = selectedData.name;
+      } else if (clickedDashboardTable === "entriesdetails") {
+        //to filter agents in entriesdetails
+        selectedDataKey["agentsFilter"] = selectedData.parentId;
+        //to filter clusters in entriesdetails
+        selectedDataKey["clustersFilter"] = selectedData.clusterName;
+      } else if (clickedDashboardTable === "agentsdetails") {
+        //to filter clusters in agentsdetails
+        selectedDataKey["clustersFilter"] = selectedData.clusterName;
+        //to filter entries in agentsdetails
+        selectedDataKey["entriesFilter"] = selectedData.spiffeid;
+      }
+    }
+    return selectedDataKey;
+  }
+
+  render() {
+    const { selectedDataKey } = this.state;
+    // const classes = withStyles.getClasses(this.props);
+    const {classes} = this.props;
+    const { selectedData } = this.props;
+    return (
+      <div className={classes.root}>
+        <DashboardDrawerStyled />
+        <main className={classes.content}>
+          <div className={classes.appBarSpacer} />
+          {selectedData.length !== 0 && !selectedData[0] && (
+            <div>
+              {
+                this.props.globalClickedDashboardTable ===
+                  "clustersdetails" && (
+                  <div className="clustersdetails">
+                    <Container maxWidth="lg" className={classes.container}>
+                      <Grid item xs={12}>
+                        <Paper className={classes.paper}>
+                          <p className={classes.detailsTitle}>
+                            Cluster Name : <b>{selectedData.name}</b>
+                          </p>
+                          <p className={classes.metadataTag}>Metadata</p>
+                          <hr className={classes.dashboardDetalsLine}></hr>
+                          <p className={classes.metadataDetails}>
+                            Created : <b>{selectedData.created} </b>
+                          </p>
+                          <p className={classes.metadataDetails}>
+                            Number of Nodes : <b>{selectedData.numNodes} </b>
+                          </p>
+                          <p className={classes.metadataDetails}>
+                            Number of Entries: <b>{selectedData.numEntries}</b>{" "}
+                          </p>
+                        </Paper>
+                      </Grid>
+                    </Container>
+                    <Container maxWidth="lg" className={classes.container}>
+                      {/* Agents Table */}
+                      <Grid item xs={12}>
+                        <Paper className={classes.paper}>
+                          <AgentDashboardTableStyled
+                            numRows={100}
+                            filterByCluster={selectedDataKey["agentsFilter"]}
+                          />
+                        </Paper>
+                      </Grid>
+                    </Container>
+                    <Container maxWidth="lg" className={classes.container}>
+                      {/* Entries Table */}
+                      <Grid item xs={12}>
+                        <Paper className={classes.paper}>
+                          <EntriesDashBoardTableStyled
+                            numRows={100}
+                            filterByCluster={selectedDataKey["entriesFilter"]}
+                          />
+                        </Paper>
+                      </Grid>
+                    </Container>
+                  </div>
+                ) // End clustersdetails
+              }
+              {
+                this.props.globalClickedDashboardTable === "agentsdetails" && (
+                  <div className="agentsdetails">
+                    <Container maxWidth="lg" className={classes.container}>
+                      <Grid item xs={12}>
+                        <Paper className={classes.paper}>
+                          <p className={classes.detailsTitle}>
+                            Agent Name : <b>{selectedData.spiffeid}</b>
+                          </p>
+                          <p className={classes.metadataTag}>Metadata</p>
+                          <hr className={classes.dashboardDetalsLine}></hr>
+                          <p className={classes.metadataDetails}>
+                            Belongs to Cluster :{" "}
+                            <b>{selectedData.clusterName}</b>{" "}
+                          </p>
+                          <p className={classes.metadataDetails}>
+                            Status : <b>{selectedData.status}</b>{" "}
+                          </p>
+                          <p className={classes.metadataDetails}>
+                            Platform Type : <b>{selectedData.platformType}</b>{" "}
+                          </p>
+                          <p className={classes.metadataDetails}>
+                            Number of Entries: <b>{selectedData.numEntries}</b>{" "}
+                          </p>
+                        </Paper>
+                      </Grid>
+                    </Container>
+                    <Container maxWidth="lg" className={classes.container}>
+                      {/* Clusters Table */}
+                      <Grid item xs={12}>
+                        <Paper className={classes.paper}>
+                          <ClusterDashboardTableStyled
+                            numRows={100}
+                            filterByCluster={selectedDataKey["clustersFilter"]}
+                          />
+                        </Paper>
+                      </Grid>
+                    </Container>
+                    <Container maxWidth="lg" className={classes.container}>
+                      {/* Entries Table */}
+                      <Grid item xs={12}>
+                        <Paper className={classes.paper}>
+                          <EntriesDashBoardTableStyled
+                            numRows={100}
+                            filterByAgentId={selectedDataKey["entriesFilter"]}
+                          />
+                        </Paper>
+                      </Grid>
+                    </Container>
+                  </div>
+                ) // End agentsdetails
+              }
+              {
+                this.props.globalClickedDashboardTable === "entriesdetails" && (
+                  <div className="entriesdetails">
+                    <Container maxWidth="lg" className={classes.container}>
+                      <Grid item xs={12}>
+                        <Paper className={classes.paper}>
+                          <p className={classes.detailsTitle}>
+                            Entry ID : <b>{selectedData.id}</b>
+                          </p>
+                          <p className={classes.metadataTag}>Metadata</p>
+                          <hr className={classes.dashboardDetalsLine}></hr>
+                          <p className={classes.metadataDetails}>
+                            Entry Name : <b>{selectedData.spiffeid}</b>
+                          </p>
+                          <p className={classes.metadataDetails}>
+                            Parent ID : <b>{selectedData.parentId}</b>{" "}
+                          </p>
+                          <p className={classes.metadataDetails}>
+                            Belongs to Cluster :{" "}
+                            <b>{selectedData.clusterName}</b>{" "}
+                          </p>
+                          <p className={classes.metadataDetails}>
+                            Platform Type : <b>{selectedData.platformType}</b>{" "}
+                          </p>
+                          <p className={classes.metadataDetails}>
+                            Is Admin :{" "}
+                            <b>
+                              {selectedData.adminFlag.toString().toUpperCase()}
+                            </b>{" "}
+                          </p>
+                          <p className={classes.metadataDetails}>
+                            Entry Expire Time:{" "}
+                            <b>{selectedData.entryExpireTime}</b>{" "}
+                          </p>
+                        </Paper>
+                      </Grid>
+                    </Container>
+                    <Container maxWidth="lg" className={classes.container}>
+                      {/* Clusters Table */}
+                      <Grid item xs={12}>
+                        <Paper className={classes.paper}>
+                          <ClusterDashboardTableStyled
+                            numRows={100}
+                            filterByCluster={selectedDataKey["clustersFilter"]}
+                          />
+                        </Paper>
+                      </Grid>
+                    </Container>
+                    <Container maxWidth="lg" className={classes.container}>
+                      {/* Agents Table */}
+                      <Grid item xs={12}>
+                        <Paper className={classes.paper}>
+                          <AgentDashboardTableStyled
+                            numRows={100}
+                            filterByAgentId={selectedDataKey["agentsFilter"]}
+                          />
+                        </Paper>
+                      </Grid>
+                    </Container>
+                  </div>
+                ) // End entriesdetails
+              }
+              {this.props.globalClickedDashboardTable === "clusters" && (
+                <Container maxWidth="lg" className={classes.container}>
+                  {/* Clusters Table */}
+                  <Grid item xs={12}>
+                    <Paper className={classes.paper}>
+                      <ClusterDashboardTableStyled
+                        numRows={100}
+                        filterByCluster={selectedDataKey["clustersFilter"]} 
+                      />
+                    </Paper>
+                  </Grid>
+                </Container>
+              )}
+              {this.props.globalClickedDashboardTable === "agents" && (
+                <Container maxWidth="lg" className={classes.container}>
+                  {/* Agents Table */}
+                  <Grid item xs={12}>
+                    <Paper className={classes.paper}>
+                      <AgentDashboardTableStyled 
+                        numRows={100} 
+                        filterByAgentId={selectedDataKey["agentsFilter"]}
+                        filterByCluster={selectedDataKey["agentsFilter"]}
+                      />
+                    </Paper>
+                  </Grid>
+                </Container>
+              )}
+              {this.props.globalClickedDashboardTable === "entries" && (
+                <Container maxWidth="lg" className={classes.container}>
+                  {/* Entries Table */}
+                  <Grid item xs={12}>
+                    <Paper className={classes.paper}>
+                      <EntriesDashBoardTableStyled 
+                        numRows={100}
+                        filterByAgentId={selectedDataKey["entriesFilter"]}
+                        filterByCluster={selectedDataKey["entriesFilter"]}
+                      />
+                    </Paper>
+                  </Grid>
+                </Container>
+              )}
+            </div>
+          )}
+        </main>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state: RootState) => ({
+  globalClickedDashboardTable: state.tornjak.globalClickedDashboardTable,
+});
+
+// const DashboardDetailsStyled = withStyles(DashboardDetails, styles);
+const DashboardDetailsStyled = withStyles(DashboardDetails, styles);
+export default connect(mapStateToProps, {})(DashboardDetailsStyled);
diff --git a/frontend/src/components/dashboard/dashboard-drawer.tsx b/frontend/src/components/dashboard/dashboard-drawer.tsx
new file mode 100644
index 00000000..e76127f7
--- /dev/null
+++ b/frontend/src/components/dashboard/dashboard-drawer.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { withStyles } from 'tss-react/mui';
+import { CssBaseline } from '@mui/material';
+import { Tabs, TabList, Tab} from '@carbon/react';
+import {
+    clickedDashboardTableFunc,
+} from 'redux/actions';
+import { RootState } from 'redux/reducers';
+
+const styles = (theme: { spacing: (arg0: number) => any})  => ({
+    root: {
+        marginTop: 0,
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    title: {
+        flexGrow: 1,
+        color: 'black',
+        marginTop: 20,
+    },
+    content: {
+        flexGrow: 1,
+    },
+    container: {
+        paddingTop: theme.spacing(4),
+        paddingBottom: theme.spacing(4),
+        marginLeft: 0,
+    },
+    paper: {
+        padding: theme.spacing(2),
+        display: 'flex',
+        overflow: 'auto',
+        flexDirection: 'column',
+    },
+    fixedHeight: {
+        height: 370,
+    },
+    h3: {
+        color: 'black',
+        marginTop: 20,
+        marginLeft: 20,
+        marginBottom: 10,
+    },
+
+    tabList: {
+        marginLeft: '20px', 
+        marginBottom: '-80px', 
+    },
+});
+
+
+
+type DashboardDrawerProp={
+    clickedDashboardTableFunc: (globalClickedDashboardTable: string) => void,
+    
+
+
+
+}
+class DashboardDrawer extends React.Component<DashboardDrawerProp> {
+    constructor(props:DashboardDrawerProp) {
+        super(props);
+        let selectedTab = 0;
+        const path = window.location.pathname;
+        if (path.includes("clusters")) {
+            selectedTab = 1;
+        } else if (path.includes("agents")) {
+            selectedTab = 2;
+        } else if (path.includes("entries")) {
+            selectedTab = 3;
+        }
+        this.state = {
+            selectedTab: selectedTab,
+        };
+    }
+
+    assignDashboardPath(entity:string, tabIndex:number) {
+        this.props.clickedDashboardTableFunc(entity);
+        this.setState({ selectedTab: tabIndex });
+        const path = "/tornjak/dashboard";
+        if (window.location.href !== window.location.origin + path)
+            window.location.href = path;
+    }
+
+    render() {
+        const {classes} = this.props;
+        return (
+            <div className={classes.root}>
+                <CssBaseline />
+                <div style={{ display: 'flex', flexDirection: 'column'}}>
+                    <h3 className={classes.h3}>Tornjak Dashboard</h3>
+                </div>
+                <Tabs selectedIndex={this.state.selectedTab}>
+                    <TabList aria-label="List of tabs" className={classes.tabList}>
+                        <Tab onClick={() => this.assignDashboardPath("dashboard", 0)}>Dashboard</Tab>
+                        <Tab onClick={() => this.assignDashboardPath("clusters", 1)}>Clusters</Tab>
+                        <Tab onClick={() => this.assignDashboardPath("agents", 2)}>Agents</Tab>
+                        <Tab onClick={() => this.assignDashboardPath("entries", 3)}>Entries</Tab>
+                    </TabList>
+
+                </Tabs>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state: RootState) => ({
+    globalClickedDashboardTable: state.tornjak.globalClickedDashboardTable,
+});
+
+const DashboardDrawerStyled = withStyles(DashboardDrawer, styles);
+export default connect(mapStateToProps, { clickedDashboardTableFunc })(DashboardDrawerStyled);
diff --git a/frontend/src/components/dashboard/tornjak-dashboard.tsx b/frontend/src/components/dashboard/tornjak-dashboard.tsx
new file mode 100644
index 00000000..f160b2e5
--- /dev/null
+++ b/frontend/src/components/dashboard/tornjak-dashboard.tsx
@@ -0,0 +1,299 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import clsx from 'clsx';
+import { withStyles, WithStyles } from '@mui/styles';
+import { Theme } from '@mui/material/styles'; 
+// Components
+import {
+  Container,
+  Grid,
+  Paper,
+  ThemeProvider,
+  createTheme
+} from '@mui/material';
+// Pie Charts
+import AgentsPieChart from './agents-pie-chart';
+import ClustersPieChart from './clusters-pie-chart';
+
+// Tables
+import ClusterDashboardTableStyled from './clusters-dashboard-table';
+import AgentDashboardTableStyled from './agents-dashboard-table';
+import EntriesDashBoardTableStyled from './entries-dashboard-table';
+import IsManager from '../is_manager';
+import TornjakApi from '../tornjak-api-helpers';
+import TornjakHelper from '../tornjak-helper';
+import SpiffeHelper from '../spiffe-helper';
+
+import { AgentsReducerState, EntriesReducerState } from 'redux/actions/types';
+import {
+  entriesListUpdateFunc,
+  serverSelectedFunc,
+  agentsListUpdateFunc,
+  tornjakServerInfoUpdateFunc,
+  serverInfoUpdateFunc,
+  selectorInfoFunc,
+  tornjakMessageFunc,
+  agentworkloadSelectorInfoFunc,
+  clustersListUpdateFunc,
+  clickedDashboardTableFunc,
+} from 'redux/actions';
+
+import DashboardDrawerStyled from './dashboard-drawer';
+import { RootState } from 'redux/reducers';
+
+const theme = createTheme({
+  typography: {
+  body1: {
+    fontFamily: "'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif",
+    letterSpacing: .16,
+    fontSize: "0.875rem",
+    lineHeight: 1
+  }
+}});
+
+const styles = (theme: Theme) => ({
+  root: {
+    marginTop: -25,
+    marginLeft: -20,
+    display: 'flex',
+    flexDirection: 'row' as 'row' | 'column',
+  },
+  appBarSpacer: theme.mixins.toolbar,
+  content: {
+    flexGrow: 1,
+  },
+  container: { //container for root
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(4),
+    marginLeft: 0
+  },
+  paper: { //container for all grids
+    padding: theme.spacing(2),
+    display: 'flex',
+    overflow: 'auto',
+    flexDirection: 'row' as 'row' | 'column',
+    marginBottom: 20,
+    marginTop: 10
+  },
+  fixedHeight: {
+    height: 370, //height of piechart container
+  },
+});
+
+import {
+    AgentsList,
+    AgentsWorkLoadAttestorInfo,
+    ClustersList,
+    EntriesList,
+    SelectorInfoLabels,
+    ServerInfo,
+    TornjakServerInfo,
+    WorkloadSelectorInfoLabels,
+    DebugServerInfo
+} from "components/types";
+
+type TornjakDashboardProps = WithStyles<typeof styles> & {
+  globalServerSelected: string,
+  // dispatches a payload for list of agents with their metadata info as an array of AgentListType and has a return type of void
+  agentsListUpdateFunc: (globalAgentsList: AgentsList[]) => void,  
+  // dispatches a payload for an Error Message/ Success Message of an executed function as a string and has a return type of void
+  tornjakMessageFunc: (globalErrorMessage: string) => void,  
+  // dispatches a payload for list of entries with their metadata info as an array of EntriesListType and has a return type of void
+  entriesListUpdateFunc: (globalEntriesList: EntriesList[]) => void,
+  // dispatches a payload for list of clusters with their metadata info as an array of ClustersList Type and has a return type of void
+  clustersListUpdateFunc: (globalClustersList: ClustersList[]) => void,
+  // dispatches a payload for the workload selector info for the agents as an array of AgentsWorkLoadAttestorInfoType and has a return type of void
+  agentworkloadSelectorInfoFunc: (globalAgentsWorkLoadAttestorInfo: AgentsWorkLoadAttestorInfo[]) => void, 
+  // dispatches a payload for the server trust domain and nodeAttestorPlugin as a ServerInfoType and has a return type of void
+  serverInfoUpdateFunc: (globalServerInfo: ServerInfo) => void,  
+  // tornjak server info of the selected server
+  globalTornjakServerInfo: TornjakServerInfo,  
+  // tornjak server debug info of the selected server
+  globalDebugServerInfo: DebugServerInfo,
+  globalAgentsList: AgentsList[], 
+  // the clicked dashboard table
+  globalClickedDashboardTable: string,
+  globalAgents: AgentsReducerState,
+}
+
+class TornjakDashboard extends React.Component<TornjakDashboardProps> {
+  TornjakApi:TornjakApi;
+  TornjakHelper: TornjakHelper;
+  SpiffeHelper: SpiffeHelper;
+  fixedHeightPaper: string;
+  constructor(props:TornjakDashboardProps) {
+    super(props);
+    
+    // const classes = withStyles.getClasses(this.props);
+    const { classes } = this.props;
+    this.state = {};
+    this.fixedHeightPaper = clsx(classes.paper, classes.fixedHeight)
+    this.TornjakApi = new TornjakApi({});
+    this.TornjakHelper = new TornjakHelper({});
+    this.SpiffeHelper = new SpiffeHelper({});
+  }
+
+  agentSpiffeids() {
+    const {globalAgents} = this.props;
+    if (this.props.globalAgents.globalAgentsList !== undefined) {
+      return this.props.globalAgents.globalAgentsList.map(currentAgent => {
+        return this.SpiffeHelper.getAgentSpiffeid(currentAgent)
+      })
+    } else {
+      return ""
+    }
+  }
+
+  componentDidMount() {
+    if (IsManager) {
+      if (this.props.globalServerSelected !== "") {
+        this.TornjakApi.populateAgentsUpdate(this.props.globalServerSelected, this.props.agentsListUpdateFunc, this.props.tornjakMessageFunc);
+        this.TornjakApi.populateEntriesUpdate(this.props.globalServerSelected, this.props.entriesListUpdateFunc, this.props.tornjakMessageFunc)
+        this.TornjakApi.populateClustersUpdate(this.props.globalServerSelected, this.props.clustersListUpdateFunc, this.props.tornjakMessageFunc);
+        this.TornjakApi.populateTornjakAgentInfo(this.props.globalServerSelected, this.props.agentworkloadSelectorInfoFunc, { "agents": this.agentSpiffeids() });
+      }
+    } else {
+      this.TornjakApi.populateLocalAgentsUpdate(this.props.agentsListUpdateFunc, this.props.tornjakMessageFunc);
+      this.TornjakApi.populateLocalEntriesUpdate(this.props.entriesListUpdateFunc, this.props.tornjakMessageFunc)
+      this.TornjakApi.populateLocalClustersUpdate(this.props.clustersListUpdateFunc, this.props.tornjakMessageFunc);
+      this.TornjakApi.populateLocalTornjakAgentInfo(this.props.agentworkloadSelectorInfoFunc, "");
+      if (this.props.globalTornjakServerInfo) {
+        this.TornjakApi.populateServerInfo(this.props.globalTornjakServerInfo, this.props.serverInfoUpdateFunc);
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps:TornjakDashboardProps) {
+    if (IsManager) {
+      if (prevProps.globalServerSelected !== this.props.globalServerSelected) {
+        this.TornjakApi.populateAgentsUpdate(this.props.globalServerSelected, this.props.agentsListUpdateFunc, this.props.tornjakMessageFunc);
+        this.TornjakApi.populateEntriesUpdate(this.props.globalServerSelected, this.props.entriesListUpdateFunc, this.props.tornjakMessageFunc)
+        this.TornjakApi.populateClustersUpdate(this.props.globalServerSelected, this.props.clustersListUpdateFunc, this.props.tornjakMessageFunc);
+        this.TornjakApi.populateTornjakAgentInfo(this.props.globalServerSelected, this.props.agentworkloadSelectorInfoFunc, { "agents": this.agentSpiffeids() });
+      }
+    } else {
+      if (prevProps.globalDebugServerInfo !== this.props.globalDebugServerInfo) {
+        this.TornjakApi.populateLocalAgentsUpdate(this.props.agentsListUpdateFunc, this.props.tornjakMessageFunc);
+        this.TornjakApi.populateLocalEntriesUpdate(this.props.entriesListUpdateFunc, this.props.tornjakMessageFunc)
+        this.TornjakApi.populateServerInfo(this.props.globalTornjakServerInfo, this.props.serverInfoUpdateFunc)
+        this.TornjakApi.populateLocalTornjakAgentInfo(this.props.agentworkloadSelectorInfoFunc, "");
+        this.TornjakApi.populateLocalClustersUpdate(this.props.clustersListUpdateFunc, this.props.tornjakMessageFunc);
+      }
+    }
+  }
+
+  render() {
+    // const classes = withStyles.getClasses(this.props);
+    const { classes } = this.props;
+    return (
+      <ThemeProvider theme={theme} >
+        <div className={classes.root}>
+          <DashboardDrawerStyled />
+          <main className={classes.content}>
+            <div className={classes.appBarSpacer} />
+            {(this.props.globalClickedDashboardTable === "" || this.props.globalClickedDashboardTable === "dashboard") &&
+              <Container maxWidth="lg" className={classes.container}>
+                <Grid container spacing={3}>
+                  {/* Pie Chart Clusters */}
+                  <Grid item xs={6}>
+                    <Paper className={this.fixedHeightPaper}>
+                      <ClustersPieChart />
+                    </Paper>
+                  </Grid>
+                  {/* Pie Chart Agents*/}
+                  <Grid item xs={6}>
+                    <Paper className={this.fixedHeightPaper}>
+                      <AgentsPieChart />
+                    </Paper>
+                  </Grid>
+                  {/* Clusters Table */}
+                  <Grid item xs={12}>
+                    <Paper className={classes.paper}>
+                      <ClusterDashboardTableStyled
+                        numRows={5} />
+                    </Paper>
+                  </Grid>
+                  {/* Agents Table */}
+                  <Grid item xs={12}>
+                    <Paper className={classes.paper}>
+                      <AgentDashboardTableStyled
+                        numRows={5} />
+                    </Paper>
+                  </Grid>
+                  {/* Entries Table */}
+                  <Grid item xs={12}>
+                    <Paper className={classes.paper}>
+                      <EntriesDashBoardTableStyled
+                        numRows={5} />
+                    </Paper>
+                  </Grid>
+                </Grid>
+              </Container>
+            }
+            {(this.props.globalClickedDashboardTable === "clusters") &&
+              <Container maxWidth="lg" className={classes.container}>
+                {/* Clusters Table */}
+                <Grid item xs={12}>
+                  <Paper className={classes.paper}>
+                    <ClusterDashboardTableStyled
+                      numRows={100} />
+                  </Paper>
+                </Grid>
+              </Container>
+            }
+            {(this.props.globalClickedDashboardTable === "agents") &&
+              <Container maxWidth="lg" className={classes.container}>
+                {/* Agents Table */}
+                <Grid item xs={12}>
+                  <Paper className={classes.paper}>
+                    <AgentDashboardTableStyled
+                      numRows={100} />
+                  </Paper>
+                </Grid>
+              </Container>
+            }
+            {(this.props.globalClickedDashboardTable === "entries") &&
+              <Container maxWidth="lg" className={classes.container}>
+                {/* Entries Table */}
+                <Grid item xs={12}>
+                  <Paper className={classes.paper}>
+                    <EntriesDashBoardTableStyled
+                      numRows={100} />
+                  </Paper>
+                </Grid>
+              </Container>
+            }
+          </main>
+        </div>
+      </ThemeProvider>
+    )
+  }
+}
+
+const mapStateToProps = (state:RootState) => ({
+  globalServerSelected: state.servers.globalServerSelected,
+  globalClustersList: state.clusters.globalClustersList,
+  globalTornjakServerInfo: state.servers.globalTornjakServerInfo,
+  globalErrorMessage: state.tornjak.globalErrorMessage,
+  globalAgents: state.agents,
+  globalEntries: state.entries.globalEntriesList,
+  globalClickedDashboardTable: state.tornjak.globalClickedDashboardTable,
+  globalDebugServerInfo: state.servers.globalDebugServerInfo,
+})
+
+// const TornjakDashboardStyled = withStyles(TornjakDashboard, styles);
+const TornjakDashboardStyled = withStyles(styles)(TornjakDashboard);
+
+export default connect(
+  mapStateToProps,
+  { entriesListUpdateFunc, 
+    agentsListUpdateFunc, 
+    agentworkloadSelectorInfoFunc, 
+    clustersListUpdateFunc, 
+    tornjakMessageFunc, 
+    serverInfoUpdateFunc, 
+    serverSelectedFunc, 
+    tornjakServerInfoUpdateFunc, 
+    selectorInfoFunc, 
+    clickedDashboardTableFunc }
+)(TornjakDashboardStyled);
\ No newline at end of file