diff --git a/components/badge/index.tsx b/components/badge/index.tsx
new file mode 100644
index 0000000..375a034
--- /dev/null
+++ b/components/badge/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { IBadgeProps } from '@/types';
+
+const Badge = (props: IBadgeProps) => {
+    const { text, tooltip } = props;
+    return (
+        <span title={tooltip} className="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">
+            {text}
+        </span>
+    )
+}
+
+export default Badge
\ No newline at end of file
diff --git a/components/cards/button/index.tsx b/components/cards/button/index.tsx
deleted file mode 100644
index 7d264b4..0000000
--- a/components/cards/button/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { IButtonCardProps } from "@/types";
-import React from "react";
-
-const ButtonCard = (props: IButtonCardProps) => {
-  if (props) {
-    const { cardStyle, cardHeaderTitle, cardTooltip, cardOnClick } = props;
-    return (
-      <button className={cardStyle} title={cardTooltip} onClick={cardOnClick}>
-        <h1 className="text-2xl font-bold">{cardHeaderTitle}</h1>
-      </button>
-    );
-  } else return null;
-};
-
-export default ButtonCard;
diff --git a/components/cards/summary/index.tsx b/components/cards/summary/index.tsx
index 9e3be3f..b2c68c9 100644
--- a/components/cards/summary/index.tsx
+++ b/components/cards/summary/index.tsx
@@ -1,58 +1,75 @@
 import React from "react";
-import { ISummaryCardProps } from "@/types";
+import { ISummaryCardContentProps, ISummaryCardProps } from "@/types";
 import { cardBodyTypes } from "@/utils/enums";
 import { formatCompactNumber } from "@/utils/helpers";
+import SummaryCardLayout from "./layout";
 
 const SummaryCard = (props: ISummaryCardProps) => {
   if (props) {
     const {
       cardStyle,
+      cardType,
       cardHeaderTitle,
       cardHeaderContent,
       cardBodyType,
       cardBodyContent,
+      cardBodyLongContent,
+      cardFooterContent,
+      cardClickEvent,
+      cardTooltip,
     } = props;
+
     return (
-      <div className={cardStyle}>
-        <div className="p-2 flex justify-between">
-          <h1 className="text-lg font-bold">{cardHeaderTitle}</h1>
-          <h1 className="text-lg font-bold">{cardHeaderContent}</h1>
-        </div>
+      <SummaryCardLayout style={cardStyle} type={cardType} typeData={{ clickEvent: cardClickEvent }} tooltip={cardTooltip}>
+        {cardHeaderTitle && (
+          <div className="p-2 flex justify-between">
+            <h1 className="text-lg font-bold">{cardHeaderTitle}</h1>
+            <h1 className="text-lg font-bold">{cardHeaderContent}</h1>
+          </div>
+        )}
         <div className="p-4">
           <SummaryContent
             cardBodyType={cardBodyType}
             cardBodyContent={cardBodyContent}
+            cardBodyLongContent={cardBodyLongContent}
           />
+          {cardFooterContent &&
+            <div className="pt-2 flex justify-end">
+              {cardFooterContent}
+            </div>}
         </div>
-      </div>
+      </SummaryCardLayout>
     );
   } else return null;
 };
 
-const SummaryContent = ({
-  cardBodyType,
-  cardBodyContent,
-}: {
-  cardBodyType: number;
-  cardBodyContent: any;
-}) => {
+const SummaryContent = (props: ISummaryCardContentProps) => {
+  const {
+    cardBodyType,
+    cardBodyContent,
+    cardBodyLongContent,
+  } = props;
   if (cardBodyType === cardBodyTypes.NUMBER) {
     return (
-      <h1 title={cardBodyContent} className="text-5xl font-bold">
-        {formatCompactNumber(cardBodyContent)}
+      <h1 title={cardBodyContent.toString()} className="text-5xl font-bold">
+        {formatCompactNumber(cardBodyContent.toString())}
       </h1>
     );
   } else if (cardBodyType === cardBodyTypes.STRING) {
     return (
       <h1
-        title={cardBodyContent}
+        title={cardBodyLongContent}
         className="text-sm h-20 overflow-hidden w-full font-bold"
       >
         {cardBodyContent}
       </h1>
     );
-  } else if (cardBodyType === cardBodyTypes.ELEMENT) {
-    return cardBodyContent;
+  } else if (cardBodyType === cardBodyTypes.ELEMENT && typeof cardBodyContent === "object") {
+    return (
+      <div title={cardBodyLongContent}>
+        {cardBodyContent}
+      </div>
+    );
   } else return null;
 };
 
diff --git a/components/cards/summary/layout.tsx b/components/cards/summary/layout.tsx
new file mode 100644
index 0000000..e336a9b
--- /dev/null
+++ b/components/cards/summary/layout.tsx
@@ -0,0 +1,22 @@
+import { ISummaryCardLayoutProps } from '@/types'
+import { elementType } from '@/utils/enums';
+import React from 'react'
+
+const SummaryCardLayout = (props: ISummaryCardLayoutProps) => {
+    const { type, style, typeData, tooltip, children } = props;
+    if (type === elementType.button) {
+        return (
+            <button className={style} onClick={typeData.clickEvent} title={tooltip}>
+                {children}
+            </button>
+        );
+    } else {
+        return (
+            <div className={style}>
+                {children}
+            </div>
+        )
+    }
+}
+
+export default SummaryCardLayout
\ No newline at end of file
diff --git a/components/sections/dashboard/index.tsx b/components/sections/dashboard/index.tsx
index 86db54c..4ac2a48 100644
--- a/components/sections/dashboard/index.tsx
+++ b/components/sections/dashboard/index.tsx
@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from "react";
 import SectionLayout from "../layout";
 import SummaryCard from "@/components/cards/summary";
-import { cardBodyTypes } from "@/utils/enums";
+import { cardBodyTypes, elementType } from "@/utils/enums";
 import Avatar from "@/components/avatar";
 import { IDashboardProps, IGroupProps, ILatestMessageProps } from "@/types";
 import { getBriefContent, isImage } from "@/utils/helpers";
+import Badge from "@/components/badge";
 
 const Dashboard = (props: IDashboardProps) => {
   const [groups] = useState<IGroupProps[] | null>(props.groups);
@@ -33,8 +34,8 @@ const Dashboard = (props: IDashboardProps) => {
       const message = props?.groups
         ?.map((g) => g.lastMessage)
         .sort((mA, mB) => Date.parse(mB?.createdOn) - Date.parse(mA?.createdOn))
-        .at(0);
-      const group = props?.groups?.find((g) => g.id === message?.groupId);
+        .at(0),
+        group = props?.groups?.find((g) => g.id === message?.groupId && g.unreadCount > 0);
       return group && message ? Object.assign(message, {
         displayImage: group?.displayImage!,
         groupName: group?.name!
@@ -43,6 +44,8 @@ const Dashboard = (props: IDashboardProps) => {
   }, [props]);
 
   if (props) {
+    const name = user?.firstName ?? user?.username, gridCols = online || unread ? 3 : 2;
+
     return (
       <SectionLayout>
         <div className="p-4">
@@ -50,16 +53,15 @@ const Dashboard = (props: IDashboardProps) => {
             <h1 className="text-2xl text-white font-bold" id="textGreeting">
               Hello{" "}
               <span className="text-green-400">
-                {user?.firstName ?? user?.username}
+                {name}
               </span>
             </h1>
           </div>
-          <div className={`pt-4 grid grid-flow-row-dense grid-cols-${online || unread ? 3 : 2} grid-rows-3 gap-2`}>
+          <div className={`pt-4 grid grid-flow-row-dense grid-cols-${gridCols} grid-rows-3 gap-2`}>
             {groups && (
               <SummaryCard
-                cardStyle={
-                  "bg-gradient-to-r from-stone-500 to-stone-400 text-white rounded-md"
-                }
+                cardType={elementType.div}
+                cardStyle={"bg-gradient-to-r from-stone-500 to-stone-400 text-white rounded-md"}
                 cardHeaderTitle={"Groups"}
                 cardBodyType={cardBodyTypes.NUMBER}
                 cardBodyContent={groups?.length}
@@ -67,6 +69,7 @@ const Dashboard = (props: IDashboardProps) => {
             )}
             {friends && (
               <SummaryCard
+                cardType={elementType.div}
                 cardStyle={"bg-stone-400 text-white rounded-md"}
                 cardHeaderTitle={"Friends"}
                 cardBodyType={cardBodyTypes.NUMBER}
@@ -75,6 +78,7 @@ const Dashboard = (props: IDashboardProps) => {
             )}
             {online && (
               <SummaryCard
+                cardType={elementType.div}
                 cardStyle={"bg-stone-400 text-white rounded-md"}
                 cardHeaderTitle={"Online"}
                 cardBodyType={cardBodyTypes.NUMBER}
@@ -83,7 +87,8 @@ const Dashboard = (props: IDashboardProps) => {
             )}
             {latest && (
               <SummaryCard
-                cardStyle={"bg-green-600 text-white rounded-md col-span-2 w-64"}
+                cardType={elementType.button}
+                cardStyle={"bg-gradient-to-r from-green-700 to-green-500 text-white rounded-md col-span-2 w-72"}
                 cardHeaderTitle={"Latest"}
                 cardHeaderContent={
                   <Avatar
@@ -93,19 +98,23 @@ const Dashboard = (props: IDashboardProps) => {
                     isStatus={false}
                   />
                 }
-                cardBodyType={cardBodyTypes.STRING}
+                cardBodyType={cardBodyTypes.ELEMENT}
                 cardBodyContent={
-                  isImage(latest.content)
-                    ? "Image"
-                    : getBriefContent(latest.content)
+                  <h1 className="text-xl font-bold">
+                    {isImage(latest.content) ? "Image" : getBriefContent(latest.content)}
+                  </h1>
                 }
+                cardBodyLongContent={latest.content}
+                cardFooterContent={
+                  <Badge text={latest.createdOn} tooltip={latest.createdOn} />
+                }
+                cardClickEvent={() => props.onSelectGroupHandler(latest.groupId)}
               />
             )}
             {unread && (
               <SummaryCard
-                cardStyle={
-                  "bg-gradient-to-r from-green-500 to-green-400 text-white rounded-md"
-                }
+                cardType={elementType.div}
+                cardStyle={"bg-gradient-to-r from-green-500 to-green-400 text-white rounded-md"}
                 cardHeaderTitle={"Unread"}
                 cardBodyType={cardBodyTypes.NUMBER}
                 cardBodyContent={unread}
diff --git a/components/sections/index.tsx b/components/sections/index.tsx
index 96c39dc..a57459e 100644
--- a/components/sections/index.tsx
+++ b/components/sections/index.tsx
@@ -54,7 +54,7 @@ const SectionSwitch = (props: ISecitonSwitchProps) => {
     } else if (section === sections.home) {
       return (
         <div className="hidden md:flex h-screen items-center justify-center md:md:w-full">
-          <Dashboard groups={groups} user={user} notifs={notifs} />
+          <Dashboard groups={groups} user={user} notifs={notifs} onSelectGroupHandler={onSelectGroupHandler} />
         </div>
       );
     } else if (section === sections.addFriend) {
diff --git a/components/sections/introduction/index.tsx b/components/sections/introduction/index.tsx
index c5455b2..5ae9dc4 100644
--- a/components/sections/introduction/index.tsx
+++ b/components/sections/introduction/index.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import SectionLayout from "../layout";
 import SummaryCard from "@/components/cards/summary";
-import { cardBodyTypes, sections } from "@/utils/enums";
+import { cardBodyTypes, elementType, sections } from "@/utils/enums";
 import { IIntroductionProps } from "@/types";
-import ButtonCard from "@/components/cards/button";
 import Avatar from "@/components/avatar";
 import { getBriefContent, writeContentToClipboard } from "@/utils/helpers";
 
@@ -23,37 +22,32 @@ const Introduction = (props: IIntroductionProps) => {
             </h1>
           </div>
           <div className="pt-4 grid grid-flow-row-dense grid-cols-1 grid-rows-3 gap-2">
-            <ButtonCard
-              cardStyle={
-                "bg-gradient-to-r from-stone-500 to-stone-400 text-white rounded-md hover:bg-gradient-to-r hover:from-green-500 hover:to-green-400"
-              }
-              cardHeaderTitle={"Add Friend"}
-              cardOnClick={() => setSection(sections.addFriend)}
-              cardTooltip={"Add Friend to Chat"}
+            <SummaryCard
+              cardStyle={"bg-gradient-to-r from-stone-500 to-stone-400 text-white rounded-md hover:bg-gradient-to-r hover:from-green-500 hover:to-green-400"}
+              cardBodyType={cardBodyTypes.ELEMENT}
+              cardBodyContent={<h1 className="text-2xl font-bold">Add Friend</h1>}
+              cardClickEvent={() => setSection(sections.addFriend)}
+              cardType={elementType.button}
+              cardTooltip="Add Friend"
             />
             <SummaryCard
-              cardStyle={
-                "bg-gradient-to-r from-green-500 to-green-400 text-white rounded-md"
-              }
+              cardStyle={"bg-gradient-to-r from-green-500 to-green-400 text-white rounded-md"}
               cardHeaderTitle={"User"}
               cardBodyType={cardBodyTypes.ELEMENT}
-              cardBodyContent={
-                <button title="Click to Copy" onClick={() => writeContentToClipboard(user?.emailAddresses?.at(0)?.emailAddress)}
-                  className="text-stone-100 rounded-full p-2 bg-gradient-to-b from-green-400 to-green-500 shadow-sm text-ellipsis overflow-hidden">
-                  <h1>
-                    {getBriefContent(user?.emailAddresses?.at(0)?.emailAddress)}
-                  </h1>
-                </button>
+              cardBodyContent={<button title="Click to Copy" onClick={() => writeContentToClipboard(user?.emailAddresses?.at(0)?.emailAddress)}
+                className="text-stone-100 rounded-full p-2 bg-gradient-to-b from-green-400 to-green-500 shadow-sm text-ellipsis overflow-hidden">
+                <h1>
+                  {getBriefContent(user?.emailAddresses?.at(0)?.emailAddress)}
+                </h1>
+              </button>
               }
-              cardHeaderContent={
-                <Avatar
-                  imagePath={user?.imageUrl}
-                  size={60}
-                  name={user?.firstName ?? user?.username}
-                  isStatus={false}
-                  isOnline={true}
-                />
-              } />
+              cardHeaderContent={<Avatar
+                imagePath={user?.imageUrl}
+                size={60}
+                name={user?.firstName ?? user?.username}
+                isStatus={false}
+                isOnline={true} />}
+              cardType={elementType.div} />
           </div>
         </div>
       </SectionLayout>
diff --git a/pages/index.tsx b/pages/index.tsx
index 5f1fdff..3fbaa0a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -45,7 +45,6 @@ import {
   saveFile,
   updateUnread,
 } from "@/utils/http";
-import Head from "next/head";
 
 let socket: Socket<DefaultEventsMap, DefaultEventsMap>;
 
diff --git a/types/index.tsx b/types/index.tsx
index 64ba5b0..7518da7 100644
--- a/types/index.tsx
+++ b/types/index.tsx
@@ -1,10 +1,11 @@
-import { groupTypes, messageTypes, sections } from "@/utils/enums";
+import { elementType, groupTypes, messageTypes, sections } from "@/utils/enums";
 
 import {
   ChangeEventHandler,
   KeyboardEventHandler,
   LegacyRef,
   MouseEventHandler,
+  ReactElement,
   ReactNode,
 } from "react";
 
@@ -12,7 +13,9 @@ import { User } from "@clerk/nextjs/dist/types/server";
 
 export type NameType = string | null | undefined;
 
-export type NotifType = string | boolean | null;
+export type NotificationType = string | boolean | null;
+
+export type CardContentType = string | number | ReactElement;
 
 export type PersistedSocket = {
   id: string;
@@ -113,7 +116,7 @@ export interface IMessageListProps {
   messages: IMessageProps[] | undefined;
   group: IGroupProps | null | undefined;
   active: IActiveProps;
-  notifs: NotifType;
+  notifs: NotificationType;
   lastMessageRef: LegacyRef<HTMLDivElement>;
   onDeleteHandler: Function;
   onCopyHandler: Function;
@@ -172,19 +175,35 @@ export interface IMessageCardProps {
   loading: boolean;
 }
 
+export interface ICardTypeData {
+  clickEvent: MouseEventHandler<HTMLButtonElement> | undefined;
+}
+
+export interface ISummaryCardLayoutProps {
+  style: string;
+  type?: elementType;
+  typeData: ICardTypeData;
+  tooltip?: string;
+  children: ReactNode;
+}
+
 export interface ISummaryCardProps {
   cardStyle: string;
-  cardHeaderTitle: string;
-  cardHeaderContent?: any;
+  cardType: elementType;
+  cardHeaderTitle?: string;
+  cardHeaderContent?: CardContentType;
   cardBodyType: number;
-  cardBodyContent: any;
+  cardBodyContent: CardContentType;
+  cardBodyLongContent?: string;
+  cardFooterContent?: CardContentType;
+  cardClickEvent?: MouseEventHandler<HTMLButtonElement>;
+  cardTooltip?: string;
 }
 
-export interface IButtonCardProps {
-  cardStyle: string;
-  cardHeaderTitle: string;
-  cardTooltip: string;
-  cardOnClick: MouseEventHandler<HTMLButtonElement>;
+export interface ISummaryCardContentProps {
+  cardBodyType: number;
+  cardBodyContent: CardContentType;
+  cardBodyLongContent?: string;
 }
 
 export interface IAvatarProps {
@@ -241,7 +260,8 @@ export interface ISectionLayoutProps {
 export interface IDashboardProps {
   groups: IGroupProps[];
   user: any;
-  notifs: NotifType;
+  notifs: NotificationType;
+  onSelectGroupHandler: Function;
 }
 
 export interface IIntroductionProps {
@@ -254,7 +274,7 @@ export interface ISecitonSwitchProps {
   setSection: Function;
   user: any;
   active: any;
-  notifs: NotifType;
+  notifs: NotificationType;
   input: string;
   loading: boolean;
   group: IGroupProps;
@@ -278,7 +298,7 @@ export interface ISecitonSwitchProps {
 export interface IGroupSectionProps {
   group: IGroupProps;
   active: any;
-  notifs: NotifType;
+  notifs: NotificationType;
   input: string;
   loading: boolean;
   messages: IMessageProps[] | undefined;
@@ -311,3 +331,8 @@ export interface IAddFriendProps {
   onSelectGroupHandler: Function;
   groups: IGroupProps[] | null | undefined;
 }
+
+export interface IBadgeProps {
+  text: string;
+  tooltip: string;
+}
diff --git a/utils/enums.ts b/utils/enums.ts
index 7916945..b7bc77b 100644
--- a/utils/enums.ts
+++ b/utils/enums.ts
@@ -67,3 +67,8 @@ export enum sections {
 export enum strings {
   someone = "Someone",
 }
+
+export enum elementType {
+  button = "button",
+  div = "div",
+}
diff --git a/utils/helpers.ts b/utils/helpers.ts
index 45f00d1..454f535 100644
--- a/utils/helpers.ts
+++ b/utils/helpers.ts
@@ -1,4 +1,4 @@
-import { NameType } from "@/types";
+import { CardContentType, NameType } from "@/types";
 import { mediaTypes, messageTypes } from "./enums";
 
 const getTimeConverted = (tempDate: Date = new Date()) => {