diff --git a/src/pages/components/HomeStatisticCards.js b/src/pages/components/HomeStatisticCards.js
index 83f6d6a..b1422ce 100644
--- a/src/pages/components/HomeStatisticCards.js
+++ b/src/pages/components/HomeStatisticCards.js
@@ -33,7 +33,7 @@ function HomeStatisticCards() {
   };
   return (
     <div className="watch-stats">
-      <div className="Heading">
+      <div className="Heading my-3">
         <h1>Watch Statistics</h1>
         <div className="date-range">
           <div className="header">Last</div>
diff --git a/src/pages/components/library-info.js b/src/pages/components/library-info.js
index 30907d2..36277f7 100644
--- a/src/pages/components/library-info.js
+++ b/src/pages/components/library-info.js
@@ -2,7 +2,7 @@ import { useParams } from 'react-router-dom';
 
 import LibraryDetails from './library/library-details';
 import LibraryGlobalStats from './library/library-stats';
-import LibraryLastPlayed from './library/lastplayed';
+import LibraryLastWatched from './library/last-watched';
 import RecentlyPlayed from './library/recently-added';
 
 
@@ -17,7 +17,7 @@ function LibraryInfo() {
        <LibraryDetails LibraryId={LibraryId}/>
        <LibraryGlobalStats LibraryId={LibraryId}/>
        <RecentlyPlayed LibraryId={LibraryId}/>
-       <LibraryLastPlayed LibraryId={LibraryId}/>
+       <LibraryLastWatched LibraryId={LibraryId}/>
     </div>
   );
 }
diff --git a/src/pages/components/library/lastplayed.js b/src/pages/components/library/last-watched.js
similarity index 92%
rename from src/pages/components/library/lastplayed.js
rename to src/pages/components/library/last-watched.js
index 7628cb9..2abadcd 100644
--- a/src/pages/components/library/lastplayed.js
+++ b/src/pages/components/library/last-watched.js
@@ -6,7 +6,7 @@ import ItemCardInfo from "./LastWatched/last-watched-card";
 import Config from "../../../lib/config";
 import "../../css/users/user-details.css";
 
-function LibraryLastPlayed(props) {
+function LibraryLastWatched(props) {
   const [data, setData] = useState();
   const [config, setConfig] = useState();
 
@@ -58,7 +58,7 @@ function LibraryLastPlayed(props) {
 
   return (
     <div className="last-played">
-        <h1>Last Watched</h1>
+        <h1 className="my-3">Last Watched</h1>
         <div className="last-played-container">
         {data.map((item) => (
                     <ItemCardInfo data={item} base_url={config.hostUrl} key={item.Id+item.SeasonNumber+item.EpisodeNumber}/>
@@ -70,4 +70,4 @@ function LibraryLastPlayed(props) {
   );
 }
 
-export default LibraryLastPlayed;
+export default LibraryLastWatched;
diff --git a/src/pages/components/library/library-stats.js b/src/pages/components/library/library-stats.js
index c3e4cc6..2e0a9b4 100644
--- a/src/pages/components/library/library-stats.js
+++ b/src/pages/components/library/library-stats.js
@@ -69,7 +69,7 @@ function LibraryGlobalStats(props) {
 
   return (
     <div>
-      <h1>Library Stats</h1>
+      <h1 className="my-3">Library Stats</h1>
       <div  className="global-stats-container">
         <WatchTimeStats data={dayStats} heading={"Last 24 Hours"} />
         <WatchTimeStats data={weekStats} heading={"Last 7 Days"} />
diff --git a/src/pages/components/library/recently-added.js b/src/pages/components/library/recently-added.js
index 2068c7c..1033357 100644
--- a/src/pages/components/library/recently-added.js
+++ b/src/pages/components/library/recently-added.js
@@ -72,7 +72,7 @@ function RecentlyPlayed(props) {
 
   return (
     <div className="last-played">
-        <h1>Recently Added</h1>
+        <h1 className="my-3">Recently Added</h1>
         <div className="last-played-container">
         {data.filter((item) => ["Series", "Movie","Audio"].includes(item.Type)).map((item) => (
                     <RecentlyAddedCard data={item} base_url={config.hostUrl} key={item.Id}/>
diff --git a/src/pages/components/libraryOverview.js b/src/pages/components/libraryOverview.js
index 0084d2e..7661be4 100644
--- a/src/pages/components/libraryOverview.js
+++ b/src/pages/components/libraryOverview.js
@@ -13,7 +13,7 @@ export default function LibraryOverView() {
   const token = localStorage.getItem('token');
   const SeriesIcon=<TvLineIcon size={"80%"} /> ;
   const MovieIcon=<FilmLineIcon size={"80%"} /> ;
-  const [data, setData] = useState([]);
+  const [data, setData] = useState();
 
 
   useEffect(() => {
@@ -35,13 +35,13 @@ export default function LibraryOverView() {
     }
   }, [data,token]);
 
-  if (data.length === 0) {
+  if (!data) {
     return <Loading />;
   }
 
   return (
     <div>
-      <h1>Library Statistics</h1>
+      <h1 className="my-3">Library Statistics</h1>
       <div className="overview-container">
 
         <LibraryStatComponent data={data.filter((stat) => stat.CollectionType === "movies")} heading={"MOVIE LIBRARIES"} units={"MOVIES"} icon={MovieIcon}/>
diff --git a/src/pages/components/sessions/session-card.js b/src/pages/components/sessions/session-card.js
index 6992e15..8ba6e6e 100644
--- a/src/pages/components/sessions/session-card.js
+++ b/src/pages/components/sessions/session-card.js
@@ -3,8 +3,9 @@ import { Link } from 'react-router-dom';
 import Card from 'react-bootstrap/Card';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
+import Container from 'react-bootstrap/Container';
 
-// import AccountCircleFillIcon from "remixicon-react/AccountCircleFillIcon";
+import AccountCircleFillIcon from "remixicon-react/AccountCircleFillIcon";
 import PlayFillIcon from "remixicon-react/PlayFillIcon";
 import PauseFillIcon from "remixicon-react/PauseFillIcon";
 
@@ -60,64 +61,91 @@ function sessionCard(props) {
         <Col  className="stat-card-info w-100 mt-auto ">
 
           <Card.Body  className="w-100" >
-            <Row>
-              <Col className="col-auto">
-              <img
-            className="card-device-image"
-            src={
-              props.data.base_url +
-              "/web/assets/img/devices/" 
-              +
-              (props.data.session.Client.toLowerCase().includes("web") ? 
-              ( clientData.find(item => props.data.session.DeviceName.toLowerCase().includes(item)) || "other")
-              :
-              ( clientData.find(item => props.data.session.Client.toLowerCase().includes(item)) || "other")
-              )
-              +
-              ".svg"
-            }
-            alt=""
-            />
-              </Col>
+            <Container className="p-0">
+              <Row className="position-absolute top-0">
+                  <Col className="col-auto d-flex justify-content-center">
+                  <img
+                   className="card-device-image"
+                   src={
+                  props.data.base_url +
+                  "/web/assets/img/devices/" 
+                  +
+                  (props.data.session.Client.toLowerCase().includes("web") ? 
+                  ( clientData.find(item => props.data.session.DeviceName.toLowerCase().includes(item)) || "other")
+                  :
+                  ( clientData.find(item => props.data.session.Client.toLowerCase().includes(item)) || "other")
+                  )
+                  +
+                  ".svg"
+                   }
+                  alt=""
+                   />
+                  </Col>
+                 
+                  <Col>
+                    <Row> {props.data.session.DeviceName}</Row>
+                    <Row>    {props.data.session.Client + " " + props.data.session.ApplicationVersion}</Row>
+                  </Col>
+              </Row>
 
-              <Col>
-                <Row> {props.data.session.DeviceName}</Row>
-                <Row>    {props.data.session.Client + " " + props.data.session.ApplicationVersion}</Row>
-              </Col>
-            </Row>
-            <Row>
-              <Col>
-                 <Card.Title>
-                  {props.data.session.NowPlayingItem.Name}
-                 </Card.Title>
-              </Col>
+              <Row className="justify-content-between">
+                <Col>
+                   <Card.Text>
+                   {props.data.session.NowPlayingItem.SeriesName ? (props.data.session.NowPlayingItem.SeriesName+" - "+ props.data.session.NowPlayingItem.Name) : (props.data.session.NowPlayingItem.Name)}
+                   </Card.Text>
+                </Col>
 
-              
-              <Col>
+
+                <Col className="col-auto">
+                   <Row className="d-flex">
+                      <Col className="col-auto px-0">
+                        {props.data.session.UserPrimaryImageTag !== undefined ? (
+                          <img
+                            className="card-user-image"
+                            src={
+                              props.data.base_url +
+                              "/Users/" +
+                              props.data.session.UserId +
+                              "/Images/Primary?tag=" +
+                              props.data.session.UserPrimaryImageTag +
+                              "&quality=50"
+                            }
+                            alt=""
+                          />
+                        ) : (
+                          <AccountCircleFillIcon />
+                        )}
+                      </Col>
+
+                      <Col className="col-auto">
+                       <Card.Text className="text-end">
+                           <Link to={`/users/${props.data.session.UserId}`}>{props.data.session.UserName}</Link> 
+                       </Card.Text>
+                      </Col>
+           
+                      </Row>
+                </Col>
+              </Row>
+
+              <Row className="d-flex">
+                <Col className="col-auto">
+
+                  {props.data.session.PlayState.IsPaused ?
+                     <PauseFillIcon /> 
+                      : 
+                     <PlayFillIcon />
+                    }
+
+                </Col>
+
+                <Col>
                 <Card.Text className="text-end">
-                 <Link to={`/users/${props.data.session.UserId}`}>{props.data.session.UserName}</Link> 
-                </Card.Text>
-              </Col>
-            </Row>
-
-            <Row className="d-flex">
-              <Col className="col-auto">
-
-                {props.data.session.PlayState.IsPaused ?
-                   <PauseFillIcon /> 
-                    : 
-                   <PlayFillIcon />
-                  }
-   
-              </Col>
-
-              <Col>
-              <Card.Text className="text-end">
-                  {ticksToTimeString(props.data.session.PlayState.PositionTicks)} /
-                  {ticksToTimeString(props.data.session.NowPlayingItem.RunTimeTicks)}
-                 </Card.Text>
-              </Col>
-            </Row>
+                    {ticksToTimeString(props.data.session.PlayState.PositionTicks)} /
+                    {ticksToTimeString(props.data.session.NowPlayingItem.RunTimeTicks)}
+                   </Card.Text>
+                </Col>
+              </Row>
+              </Container>
           </Card.Body>
         </Col>
       </Row>
diff --git a/src/pages/components/sessions/sessions.js b/src/pages/components/sessions/sessions.js
index a61f897..3adeae7 100644
--- a/src/pages/components/sessions/sessions.js
+++ b/src/pages/components/sessions/sessions.js
@@ -11,7 +11,7 @@ import SessionCard from "./session-card";
 import Loading from "../general/loading";
 
 function Sessions() {
-  const [data, setData] = useState([]);
+  const [data, setData] = useState();
   const [base_url, setURL] = useState("");
   // const [errorHandler, seterrorHandler] = useState({ error_count: 0, error_message: '' })
 
@@ -34,6 +34,10 @@ function Sessions() {
           console.log(error);
         });
     }
+    if(!data)
+    {
+      fetchData();
+    }
 
     const intervalId = setInterval(fetchData, 1000);
     return () => clearInterval(intervalId);
@@ -45,8 +49,8 @@ function Sessions() {
 
   if (data.length === 0) {
     return(
-    <div className="sessions">
-      <h1>Sessions</h1>
+    <div>
+      <h1  className="my-3">Sessions</h1>
       <div style={{color:"grey", fontSize:"0.8em", fontStyle:"italic"}}>
       No Active Sessions Found
       </div>
@@ -54,8 +58,8 @@ function Sessions() {
   }
 
   return (
-    <div className="sessions">
-      <h1>Sessions</h1>
+    <div>
+      <h1  className="my-3">Sessions</h1>
       <div className="sessions-container">
         {data &&
           data
diff --git a/src/pages/components/statCards/ItemStatComponent.js b/src/pages/components/statCards/ItemStatComponent.js
index 1fc17e0..bc056f9 100644
--- a/src/pages/components/statCards/ItemStatComponent.js
+++ b/src/pages/components/statCards/ItemStatComponent.js
@@ -26,7 +26,6 @@ function ItemStatComponent(props) {
     height:'100%',
   };
 
-  console.log(props.data);
 
   if (props.data.length === 0) {
     return <></>;
diff --git a/src/pages/css/sessions.css b/src/pages/css/sessions.css
index 3f5fe7b..2173ce1 100644
--- a/src/pages/css/sessions.css
+++ b/src/pages/css/sessions.css
@@ -1,8 +1,4 @@
-.sessions {
-    margin-bottom: 10px;
 
-    
-}
 
 .sessions-container {
     display: grid;
@@ -139,7 +135,8 @@
 }
 
 .card-device-image {
-    width: 35px;
+    max-width: 35px;
+    width: 100%;
     /* margin-right: 5px; */
     /* grid-row: 1 / span 2; */
 }
@@ -169,9 +166,8 @@
     /* position: absolute; */
 }
 
-.card-play-state {
-    /* bottom: 5px; */
-    /* position: absolute; */
+.device-info {
+margin-bottom: 100%;
 }
 
 .card-ip {
diff --git a/src/pages/css/statCard.css b/src/pages/css/statCard.css
index 5ac5395..a651b73 100644
--- a/src/pages/css/statCard.css
+++ b/src/pages/css/statCard.css
@@ -21,10 +21,6 @@
 }
 
 
-.Heading
-{
-  flex-direction: row;
-}
 
 .stat-card-image {
   width: 120px !important;
@@ -60,7 +56,7 @@
 .Heading
 {
   display: flex;
-  margin-bottom: 20px;
+  flex-direction: row;
 }
 
 .Heading h1