diff --git a/pkgs/ui/src/app/access-point/page.tsx b/pkgs/ui/src/app/access-point/page.tsx
index da581a9..2814c4a 100644
--- a/pkgs/ui/src/app/access-point/page.tsx
+++ b/pkgs/ui/src/app/access-point/page.tsx
@@ -1,5 +1,36 @@
 "use client";
 
+import SummaryDetails from "@/components/summary_card";
+import CustomTable from "@/components/table";
+import {
+  APSummaryDetails,
+  APAttachmentsDummyData,
+  APAttachmentsTableConfig,
+  APServiceRepositoryDummyData,
+  APServiceRepositoryTableConfig,
+} from "@/mock/access_point";
+
 export default function AccessPoint() {
-  return <div>Access Point Page</div>;
+  return (
+    <div className="m-10">
+      <SummaryDetails
+        hasRefreshButton
+        entity={{ name: "Access Point", details: APSummaryDetails }}
+      />
+      <div>
+        <h4>Attachement View</h4>
+        <CustomTable
+          data={APAttachmentsDummyData}
+          configuration={APAttachmentsTableConfig}
+        />
+      </div>
+      <div>
+        <h4>Service Repository View </h4>
+        <CustomTable
+          data={APServiceRepositoryDummyData}
+          configuration={APServiceRepositoryTableConfig}
+        />
+      </div>
+    </div>
+  );
 }
diff --git a/pkgs/ui/src/app/client-1/page.tsx b/pkgs/ui/src/app/client-1/page.tsx
new file mode 100644
index 0000000..4e1bc94
--- /dev/null
+++ b/pkgs/ui/src/app/client-1/page.tsx
@@ -0,0 +1,17 @@
+import SummaryDetails from "@/components/summary_card";
+import { Client1SummaryDetails } from "@/mock/client_1";
+
+export default function Client1() {
+  return (
+    <div className="m-10">
+      <SummaryDetails
+        hasAttachDetach
+        hasRefreshButton
+        entity={{
+          name: "Client 1",
+          details: Client1SummaryDetails,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/pkgs/ui/src/app/client-2/page.tsx b/pkgs/ui/src/app/client-2/page.tsx
new file mode 100644
index 0000000..f501d9b
--- /dev/null
+++ b/pkgs/ui/src/app/client-2/page.tsx
@@ -0,0 +1,17 @@
+import SummaryDetails from "@/components/summary_card";
+import { Client2SummaryDetails } from "@/mock/client_2";
+
+export default function Client1() {
+  return (
+    <div className="m-10">
+      <SummaryDetails
+        hasAttachDetach
+        hasRefreshButton
+        entity={{
+          name: "Client 2",
+          details: Client2SummaryDetails,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
index 4e20b89..cc1c15e 100644
--- a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
+++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
@@ -1,5 +1,30 @@
 "use client";
 
+import {
+  DLGResolutionDummyData,
+  DLGResolutionTableConfig,
+  DLGSummaryDetails,
+} from "@/mock/dlg";
+import CustomTable from "@/components/table";
+import SummaryDetails from "@/components/summary_card";
+
 export default function DLG() {
-  return <div>DLG Page</div>;
+  return (
+    <div className="m-10">
+      <SummaryDetails
+        hasRefreshButton
+        entity={{
+          name: "Distributed Ledger Gateway",
+          details: DLGSummaryDetails,
+        }}
+      />
+      <div>
+        <h4>DID Resolution View</h4>
+        <CustomTable
+          data={DLGResolutionDummyData}
+          configuration={DLGResolutionTableConfig}
+        />
+      </div>
+    </div>
+  );
 }
diff --git a/pkgs/ui/src/app/home/page.tsx b/pkgs/ui/src/app/home/page.tsx
new file mode 100644
index 0000000..7747e08
--- /dev/null
+++ b/pkgs/ui/src/app/home/page.tsx
@@ -0,0 +1,24 @@
+import { NoDataOverlay } from "@/components/noDataOverlay";
+import SummaryDetails from "@/components/summary_card";
+import CustomTable from "@/components/table";
+
+export default function Home() {
+  return (
+    <div className="m-10">
+      <SummaryDetails
+        entity={{ name: "Home", details: [] }}
+        hasRefreshButton={false}
+      />
+
+      <div>
+        <h4>Home View Table</h4>
+        <CustomTable data={[]} configuration={[]} />
+      </div>
+
+      <div>
+        <h4>Sequence Diagram</h4>
+        <NoDataOverlay label="No Activity yet" />
+      </div>
+    </div>
+  );
+}
diff --git a/pkgs/ui/src/app/layout.tsx b/pkgs/ui/src/app/layout.tsx
index 9b2c52f..50de272 100644
--- a/pkgs/ui/src/app/layout.tsx
+++ b/pkgs/ui/src/app/layout.tsx
@@ -47,9 +47,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
-        <title>Clan.lol</title>
+        <title>Service Aware Networks</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta name="description" content="Clan.lol - build your own network" />
+        <meta name="description" content="Service Aware Networks" />
         <link rel="icon" href="favicon.ico" sizes="any" />
       </head>
       <StyledEngineProvider injectFirst>
@@ -89,7 +89,7 @@ export default function RootLayout({
                               <div className="col-span-1 block w-full bg-fixed text-center font-semibold dark:invert lg:hidden">
                                 <Image
                                   src="/favicon.png"
-                                  alt="Clan Logo"
+                                  alt="TUB Logo"
                                   width={58}
                                   height={58}
                                   priority
diff --git a/pkgs/ui/src/app/page.tsx b/pkgs/ui/src/app/page.tsx
index 3fe74f4..13ed877 100644
--- a/pkgs/ui/src/app/page.tsx
+++ b/pkgs/ui/src/app/page.tsx
@@ -1,31 +1,21 @@
 "use client";
-import { RecentActivity } from "@/components/dashboard/activity";
 import { useAppState } from "@/components/hooks/useAppContext";
 import { LoadingOverlay } from "@/components/join/loadingOverlay";
+import Home from "./home/page";
 
 export default function Dashboard() {
   const { isLoading } = useAppState();
-  if (isLoading) {
-    return (
-      <div className="grid h-full place-items-center">
-        <div className="mt-8 w-full max-w-xl">
-          <LoadingOverlay
-            title="Clan Experience"
-            subtitle="Loading"
-            variant="circle"
-          />
-        </div>
+  return isLoading ? (
+    <div className="grid h-full place-items-center">
+      <div className="mt-8 w-full max-w-xl">
+        <LoadingOverlay
+          title="Clan Experience"
+          subtitle="Loading"
+          variant="circle"
+        />
       </div>
-    );
-  } else {
-    return (
-      <div className="flex w-full">
-        <div className="grid w-full grid-flow-row grid-cols-3 gap-4">
-          <div className="row-span-2">
-            <RecentActivity />
-          </div>
-        </div>
-      </div>
-    );
-  }
+    </div>
+  ) : (
+    <Home />
+  );
 }
diff --git a/pkgs/ui/src/app/theme/themes.ts b/pkgs/ui/src/app/theme/themes.ts
index 13e7af1..3860409 100644
--- a/pkgs/ui/src/app/theme/themes.ts
+++ b/pkgs/ui/src/app/theme/themes.ts
@@ -21,10 +21,10 @@ const commonOptions: Partial<ThemeOptions> = {
 
 const commonPalette: Partial<PaletteOptions> = {
   primary: {
-    main: palette.green50.value,
+    main: palette.blue10.value,
   },
   secondary: {
-    main: palette.green50.value,
+    main: palette.blue20.value,
   },
   info: {
     main: palette.blue50.value,
diff --git a/pkgs/ui/src/components/copy_to_clipboard/index.tsx b/pkgs/ui/src/components/copy_to_clipboard/index.tsx
new file mode 100644
index 0000000..f380dbd
--- /dev/null
+++ b/pkgs/ui/src/components/copy_to_clipboard/index.tsx
@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { Button, Snackbar } from "@mui/material";
+
+const CopyToClipboard = ({ contentRef }: { contentRef: any }) => {
+  const [open, setOpen] = useState(false);
+  const handleClick = () => {
+    if (contentRef.current) {
+      const text = contentRef.current.textContent;
+      navigator.clipboard.writeText(text);
+      setOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <Button onClick={handleClick}>Copy</Button>
+      <Snackbar
+        open={open}
+        onClose={() => setOpen(false)}
+        autoHideDuration={2000}
+        message="Copied to clipboard"
+      />
+    </>
+  );
+};
+export default CopyToClipboard;
diff --git a/pkgs/ui/src/components/noDataOverlay/index.tsx b/pkgs/ui/src/components/noDataOverlay/index.tsx
index 11867cd..3d76c8e 100644
--- a/pkgs/ui/src/components/noDataOverlay/index.tsx
+++ b/pkgs/ui/src/components/noDataOverlay/index.tsx
@@ -35,7 +35,7 @@ interface NoDataOverlayProps {
 export function NoDataOverlay(props: NoDataOverlayProps) {
   const { label } = props;
   return (
-    <StyledGridOverlay className="block p-2">
+    <StyledGridOverlay className="p-2">
       <svg
         width="120"
         height="100"
diff --git a/pkgs/ui/src/components/sidebar/index.tsx b/pkgs/ui/src/components/sidebar/index.tsx
index 2de03d0..50eaf33 100644
--- a/pkgs/ui/src/components/sidebar/index.tsx
+++ b/pkgs/ui/src/components/sidebar/index.tsx
@@ -85,6 +85,7 @@ export function Sidebar(props: SidebarProps) {
 
   return (
     <aside
+      style={{ backgroundColor: "#00497c" }}
       className={tw`${
         show ? showSidebar : hideSidebar
       } z-9999 static left-0  top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-neutral-10 transition duration-150 ease-in-out dark:bg-neutral-2 lg:w-64`}
diff --git a/pkgs/ui/src/components/summary_card/index.tsx b/pkgs/ui/src/components/summary_card/index.tsx
new file mode 100644
index 0000000..45a9eba
--- /dev/null
+++ b/pkgs/ui/src/components/summary_card/index.tsx
@@ -0,0 +1,60 @@
+"use client";
+import { useRef } from "react";
+import CopyToClipboard from "@/components/copy_to_clipboard";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Typography,
+} from "@mui/material";
+import { EntityDetails, ISummaryDetails } from "@/types";
+
+const SummaryDetails = ({
+  entity,
+  hasRefreshButton,
+  hasAttachDetach,
+}: ISummaryDetails) => {
+  const cardContentRef = useRef(null);
+  const hasDetails = entity.details && entity.details.length > 0;
+
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <h2>{entity.name}</h2>
+        <div>
+          {hasAttachDetach && (
+            <Button className="mr-6" variant="contained">
+              Attach / Detach
+            </Button>
+          )}
+          {hasRefreshButton && <Button variant="contained">Refresh</Button>}
+        </div>
+      </div>
+      {hasDetails && (
+        <Card variant="outlined">
+          <CardHeader
+            subheader="Summary"
+            action={<CopyToClipboard contentRef={cardContentRef} />}
+          />
+          <CardContent ref={cardContentRef}>
+            {entity.details.map((info: EntityDetails) => {
+              return (
+                <Typography color="text.primary" gutterBottom>
+                  {info.label}: <code>{info.value}</code>
+                </Typography>
+              );
+            })}
+          </CardContent>
+        </Card>
+      )}
+    </>
+  );
+};
+export default SummaryDetails;
diff --git a/pkgs/ui/src/components/table/style.tsx b/pkgs/ui/src/components/table/style.tsx
index b0e5429..59f1887 100644
--- a/pkgs/ui/src/components/table/style.tsx
+++ b/pkgs/ui/src/components/table/style.tsx
@@ -4,7 +4,8 @@ import TableRow from "@mui/material/TableRow";
 
 export const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {
-    backgroundColor: theme.palette.common.black,
+    // backgroundColor: theme.palette.common.black,
+    backgroundColor: "#003258",
     color: theme.palette.common.white,
   },
   [`&.${tableCellClasses.body}`]: {
diff --git a/pkgs/ui/src/mock/access-point/index.ts b/pkgs/ui/src/mock/access_point/index.ts
similarity index 88%
rename from pkgs/ui/src/mock/access-point/index.ts
rename to pkgs/ui/src/mock/access_point/index.ts
index 9b139af..07ae286 100644
--- a/pkgs/ui/src/mock/access-point/index.ts
+++ b/pkgs/ui/src/mock/access_point/index.ts
@@ -1,3 +1,20 @@
+// AP - Summary
+
+export const APSummaryDetails = [
+  {
+    label: "DID",
+    value: "did:sov:test:1274",
+  },
+  {
+    label: "IP",
+    value: "127.0.0.2",
+  },
+  {
+    label: "Network",
+    value: "Carlo's Home Network",
+  },
+];
+
 // AP - Attachements
 
 export const APAttachmentsDummyData = [
diff --git a/pkgs/ui/src/mock/client_1/index.ts b/pkgs/ui/src/mock/client_1/index.ts
new file mode 100644
index 0000000..030cc7f
--- /dev/null
+++ b/pkgs/ui/src/mock/client_1/index.ts
@@ -0,0 +1,16 @@
+// Client1 - Summary
+
+export const Client1SummaryDetails = [
+  {
+    label: "DID",
+    value: "did:sov:test:1234",
+  },
+  {
+    label: "IP",
+    value: "127.0.0.1",
+  },
+  {
+    label: "Network",
+    value: "Carlo's Home Network",
+  },
+];
diff --git a/pkgs/ui/src/mock/client_2/index.ts b/pkgs/ui/src/mock/client_2/index.ts
new file mode 100644
index 0000000..19e6936
--- /dev/null
+++ b/pkgs/ui/src/mock/client_2/index.ts
@@ -0,0 +1,16 @@
+// Client2 - Summary
+
+export const Client2SummaryDetails = [
+  {
+    label: "DID",
+    value: "did:sov:test:1234",
+  },
+  {
+    label: "IP",
+    value: "127.0.0.2",
+  },
+  {
+    label: "Network",
+    value: "Carlo's Home Network",
+  },
+];
diff --git a/pkgs/ui/src/mock/dlg/index.ts b/pkgs/ui/src/mock/dlg/index.ts
index 33b9992..0163634 100644
--- a/pkgs/ui/src/mock/dlg/index.ts
+++ b/pkgs/ui/src/mock/dlg/index.ts
@@ -1,3 +1,18 @@
+// DLG Summary Details
+
+export const DLGSummaryDetails = [
+  {
+    label: "DID",
+    value: "did:sov:test:1274",
+  },
+  {
+    label: "URL",
+    value: "dlg.tu-berlin.de",
+  },
+];
+
+// DLG Resolution Table
+
 export const DLGResolutionDummyData = [
   {
     requester_name: "C1",
diff --git a/pkgs/ui/src/types/index.ts b/pkgs/ui/src/types/index.ts
index d4635d5..264feb4 100644
--- a/pkgs/ui/src/types/index.ts
+++ b/pkgs/ui/src/types/index.ts
@@ -8,3 +8,19 @@ export interface ICustomTable {
   configuration: CustomTableConfiguration[];
   data: any;
 }
+
+export interface EntityDetails {
+  label: string;
+  value: string;
+}
+
+export interface Entity {
+  name: string;
+  details: EntityDetails[];
+}
+
+export interface ISummaryDetails {
+  entity: Entity;
+  hasRefreshButton?: boolean;
+  hasAttachDetach?: boolean;
+}