diff --git a/CHANGELOG.md b/CHANGELOG.md
index cb15e1b..6007e23 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changes
 
+## 1.4.5
+
+- For currently airing anime, you can now see how many episodes have aired in grid view.
+- Users can now see the notes they write for each media on their list by hovering the comment icon. Added tooltips for notes and on list icons for grid and compact view.
+- Added margin for on list and note icons for a better look.
+- Changed icon for notes from notepad to a comment icon.
+- Removed colons from labels on the main list media cards.
+
 ## 1.4.4
 
 - Changed color of scrollbar back to blue.
diff --git a/README.md b/README.md
index 25ae14a..44c48a3 100644
--- a/README.md
+++ b/README.md
@@ -49,7 +49,7 @@ You can download the app [here](https://github.com/ReStartQ/AniCour/releases). C
 
 1. Download the setup file from the latest release and install it on your computer.
 2. The setup file is labeled as AniCour-Setup-x.x.x.exe, where x denotes a number for the version.
-   <br/> **Ex: AniCour-Setup-1.4.4.exe**
+   <br/> **Ex: AniCour-Setup-1.4.5.exe**
 3. When you run the exe file, Windows will give a message like below because there is no code signing certificate, click on "More info" <p align="center"><a href="#"><img src="https://github.com/ReStartQ/anicour/blob/main/images/help/AniCourNoCodeSigningInitial.png" alt="Hello" /></a></p>
 4. A new option will appear, "Run anyway". Click on it. <p align="center"><a href="#"><img src="https://github.com/ReStartQ/anicour/blob/main/images/help/AniCourNoCodeSigning.png" alt="Hello" /></a></p>
 5. The installer menu will open up to allow you to install it on your computer. <p align="center"><a href="#"><img src="https://github.com/ReStartQ/anicour/blob/main/images/help/AniCourInstallationMenu2.png" alt="Hello" /></a></p>
diff --git a/package-lock.json b/package-lock.json
index 6b91e53..d85f25e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
         "is-online": "^10.0.0",
         "jotai": "^2.4.2",
         "lodash": "^4.17.21",
-        "material-react-table": "^2.6.1",
+        "material-react-table": "^2.7.0",
         "moment": "^2.29.4",
         "mui-nested-menu": "^3.2.2",
         "react": "^18.2.0",
@@ -15939,9 +15939,9 @@
       }
     },
     "node_modules/material-react-table": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/material-react-table/-/material-react-table-2.6.1.tgz",
-      "integrity": "sha512-b3X/dH5PTYMkLi23GF/oMyOC0oZbTBBW26KZRqvYJWqCLguYi1xE6Dv6VUrSMKf4yBvg00dXoUrH9zT9PLEZ9g==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/material-react-table/-/material-react-table-2.7.0.tgz",
+      "integrity": "sha512-j3e/CtqZqkdiVQ5VEZxgzupGx/pBv65F211vc0BYDKrNzk88ln04zBr2MIuJNKxYuKOCs+HGeEgSMdx4j8kZcw==",
       "dependencies": {
         "@tanstack/match-sorter-utils": "8.11.3",
         "@tanstack/react-table": "8.11.6",
diff --git a/package.json b/package.json
index ee00167..79c33d6 100644
--- a/package.json
+++ b/package.json
@@ -124,7 +124,7 @@
     "is-online": "^10.0.0",
     "jotai": "^2.4.2",
     "lodash": "^4.17.21",
-    "material-react-table": "^2.6.1",
+    "material-react-table": "^2.7.0",
     "moment": "^2.29.4",
     "mui-nested-menu": "^3.2.2",
     "react": "^18.2.0",
diff --git a/release/app/package-lock.json b/release/app/package-lock.json
index fe82dd1..1a3cbde 100644
--- a/release/app/package-lock.json
+++ b/release/app/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "anicour",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "anicour",
-      "version": "1.4.4",
+      "version": "1.4.5",
       "hasInstallScript": true,
       "license": "GPL-3.0"
     }
diff --git a/release/app/package.json b/release/app/package.json
index 2a421be..687cc1c 100644
--- a/release/app/package.json
+++ b/release/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "anicour",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "Anime, Manga, and Light Novel Tracker Desktop Application for Windows. A fast and interactive way for AniList users to track and manage their anime/manga lists. ",
   "license": "GPL-3.0",
   "author": {
diff --git a/src/renderer/components/app/etc/ProgressStepper.tsx b/src/renderer/components/app/etc/ProgressStepper.tsx
index 6318e46..767dd47 100644
--- a/src/renderer/components/app/etc/ProgressStepper.tsx
+++ b/src/renderer/components/app/etc/ProgressStepper.tsx
@@ -1,6 +1,7 @@
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
-import { IconButton, Typography } from '@mui/material';
+import { IconButton, Tooltip, Typography } from '@mui/material';
+import InfoIcon from '@mui/icons-material/Info';
 import { useTheme } from '@mui/material/styles';
 import { Box } from '@mui/system';
 import { useEffect, useState } from 'react';
@@ -40,9 +41,31 @@ export default function ProgressStepper({
       flexDirection="column"
       sx={{ gridColumn: '1/2' /* userSelect: 'none' */ }}
     >
-      <Typography fontSize={12} fontWeight="bold">
-        {props.type === 'ANIME' ? 'Episodes:' : 'Chapters:'}
-      </Typography>
+      {props.nextAiringEpisode !== null ? (
+        <Box display="flex" flexDirection="row">
+          <Typography fontSize={12} fontWeight="bold">
+            {props.type === 'ANIME' ? 'Episodes' : 'Chapters'}
+          </Typography>
+          <Tooltip
+            title={
+              props.nextAiringEpisode.episode === 0
+                ? `${props.nextAiringEpisode.episode} episodes aired`
+                : `${props.nextAiringEpisode.episode - 1} episodes aired`
+            }
+            arrow
+            placement="top"
+          >
+            <IconButton size="small" sx={{ padding: 0, ml: 0.5 }}>
+              <InfoIcon sx={{ fontSize: '14px' }} />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      ) : (
+        <Typography fontSize={12} fontWeight="bold">
+          {props.type === 'ANIME' ? 'Episodes' : 'Chapters'}
+        </Typography>
+      )}
+
       <Box
         display="flex"
         flexDirection="row"
diff --git a/src/renderer/components/app/etc/ProgressVolumesStepper.tsx b/src/renderer/components/app/etc/ProgressVolumesStepper.tsx
index 1c7ed5d..c72fb11 100644
--- a/src/renderer/components/app/etc/ProgressVolumesStepper.tsx
+++ b/src/renderer/components/app/etc/ProgressVolumesStepper.tsx
@@ -36,7 +36,7 @@ export default function ProgressVolumesStepper({
     <>
       <Box display="flex" flexDirection="column" sx={{ gridColumn: '2/3' }}>
         <Typography fontSize={12} fontWeight="bold">
-          Volumes:{' '}
+          Volumes{' '}
         </Typography>
         <Box display="flex" flexDirection="row">
           <IconButton
diff --git a/src/renderer/components/app/etc/ScoreSelect.tsx b/src/renderer/components/app/etc/ScoreSelect.tsx
index 2e69f08..fb7a3f6 100644
--- a/src/renderer/components/app/etc/ScoreSelect.tsx
+++ b/src/renderer/components/app/etc/ScoreSelect.tsx
@@ -26,7 +26,7 @@ export default function ScoreSelect({
   return (
     <Box display="flex" flexDirection="column" sx={{ gridColumn: '1/2' }}>
       <Typography fontSize={12} fontWeight="bold">
-        Score:{' '}
+        Score{' '}
       </Typography>
       <NativeSelect
         value={advancedInput.score}
diff --git a/src/renderer/components/app/etc/SvgIcons.tsx b/src/renderer/components/app/etc/SvgIcons.tsx
index edb88ba..36c2124 100644
--- a/src/renderer/components/app/etc/SvgIcons.tsx
+++ b/src/renderer/components/app/etc/SvgIcons.tsx
@@ -1,10 +1,14 @@
 import { SvgIcon } from '@mui/material';
 import PlaylistAddCheckIcon from '@mui/icons-material/PlaylistAddCheck';
+import PlaylistAddCheckCircleIcon from '@mui/icons-material/PlaylistAddCheckCircle';
+import MessageIcon from '@mui/icons-material/Message';
+import CommentIcon from '@mui/icons-material/Comment';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 
 export function MediaIcons({ type }: any) {
   console.log(type);
   if (type === 0) {
+    /*
     return (
       <SvgIcon fontSize="small">
         <svg
@@ -135,10 +139,13 @@ export function MediaIcons({ type }: any) {
         </svg>
       </SvgIcon>
     );
+    */
+    return <CommentIcon />;
   }
 
   if (type === 0.5) {
     // for list table view
+    /*
     return (
       <SvgIcon fontSize="inherit" sx={{ mr: '5px', mt: '1px' }}>
         <svg
@@ -269,6 +276,8 @@ export function MediaIcons({ type }: any) {
         </svg>
       </SvgIcon>
     );
+    */
+    return <CommentIcon fontSize="inherit" sx={{ mr: '5px', mt: '1px' }} />;
   }
 
   return (
@@ -479,7 +488,12 @@ export function OnListIcon({ type }: any) {
     return <PlaylistAddCheckIcon fontSize="small" />;
   }
   if (type === 0.5) {
-    return <CheckCircleIcon sx={{ mr: '5px', mt: '1px' }} fontSize="inherit" />;
+    return (
+      <PlaylistAddCheckCircleIcon
+        sx={{ mr: '5px', mt: '1px' }}
+        fontSize="inherit"
+      />
+    );
   }
   return <SvgIcon />;
 }
diff --git a/src/renderer/components/app/main/MediaCard.tsx b/src/renderer/components/app/main/MediaCard.tsx
index f3c63a9..cab664c 100644
--- a/src/renderer/components/app/main/MediaCard.tsx
+++ b/src/renderer/components/app/main/MediaCard.tsx
@@ -283,20 +283,23 @@ export default function MediaCard({ props }: any) {
           }}
         />
         {props.mediaListEntry.notes !== null ? (
-          <Box
-            sx={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              bgcolor: 'rgba(0, 0, 0, 0.69)',
-              color: 'white',
-              borderBottomRightRadius: '3px',
-              height: '24px',
-              width: '24px',
-            }}
-          >
-            <MediaIcons type={0} />
-          </Box>
+          <Tooltip title={props.mediaListEntry.notes} arrow>
+            <Box
+              sx={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                margin: '5px',
+                bgcolor: 'rgba(0, 0, 0, 0.69)',
+                color: 'white',
+                borderRadius: '3px',
+                height: '25px',
+                width: '25px',
+              }}
+            >
+              <MediaIcons type={0} />
+            </Box>
+          </Tooltip>
         ) : null}
       </CardActionArea>
       <CardContent
@@ -358,7 +361,7 @@ export default function MediaCard({ props }: any) {
         {props.type === 'ANIME' ? (
           <Box sx={{ gridColumn: '2/3', gridRow: '2/3' }}>
             <Typography fontSize={12} fontWeight="bold">
-              Studio:{'  '}
+              Studio{'  '}
             </Typography>
             <Typography fontSize={12} noWrap>
               {props.mainStudioIndex !== -1
@@ -377,7 +380,7 @@ export default function MediaCard({ props }: any) {
         )}
         <Box>
           <Typography fontSize={12} fontWeight="bold">
-            Type:{' '}
+            Type{' '}
           </Typography>
           <Typography fontSize={12} noWrap>
             {props.format !== null ? formatType(props.format) : '?'}
@@ -385,7 +388,7 @@ export default function MediaCard({ props }: any) {
         </Box>
         <Box>
           <Typography fontSize={12} fontWeight="bold">
-            Status:{' '}
+            Status{' '}
           </Typography>
           <Typography fontSize={12} noWrap>
             {props.status !== null ? formatStatus(props.status) : '?'}
@@ -394,7 +397,7 @@ export default function MediaCard({ props }: any) {
         {props.type === 'ANIME' ? (
           <Box>
             <Typography fontSize={12} fontWeight="bold">
-              Season:{' '}
+              Season{' '}
             </Typography>
             <Typography fontSize={12} noWrap>
               {props.season !== null && props.seasonYear !== null
@@ -405,7 +408,7 @@ export default function MediaCard({ props }: any) {
         ) : (
           <Box>
             <Typography fontSize={12} fontWeight="bold">
-              Released:{' '}
+              Released{' '}
             </Typography>
             <Typography fontSize={12} noWrap>
               {formatReleaseDateNumbers(
diff --git a/src/renderer/components/app/main/MediaCardCompact.tsx b/src/renderer/components/app/main/MediaCardCompact.tsx
index 0539db6..c320e6b 100644
--- a/src/renderer/components/app/main/MediaCardCompact.tsx
+++ b/src/renderer/components/app/main/MediaCardCompact.tsx
@@ -68,20 +68,23 @@ export default function MediaCardCompact({ props }: any) {
           }}
         />
         {props.mediaListEntry.notes !== null ? (
-          <Box
-            sx={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              bgcolor: 'rgba(0, 0, 0, 0.69)',
-              color: 'white',
-              borderBottomRightRadius: '3px',
-              height: '24px',
-              width: '24px',
-            }}
-          >
-            <MediaIcons type={0} />
-          </Box>
+          <Tooltip title={props.mediaListEntry.notes} arrow>
+            <Box
+              sx={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                margin: '5px',
+                bgcolor: 'rgba(0, 0, 0, 0.69)',
+                color: 'white',
+                borderRadius: '3px',
+                height: '25px',
+                width: '25px',
+              }}
+            >
+              <MediaIcons type={0} />
+            </Box>
+          </Tooltip>
         ) : null}
         <Box
           sx={{
diff --git a/src/renderer/components/app/search/SearchMediaCard.tsx b/src/renderer/components/app/search/SearchMediaCard.tsx
index dc33a44..127c8cd 100644
--- a/src/renderer/components/app/search/SearchMediaCard.tsx
+++ b/src/renderer/components/app/search/SearchMediaCard.tsx
@@ -106,17 +106,19 @@ export default function SearchMediaCard({ props }: any) {
           }}
         />
         {props.mediaListEntry !== null ? (
-          <Box
-            sx={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              bgcolor: 'rgba(0, 0, 0, 0.69)',
-              color: 'white',
-            }}
-          >
-            <PlaylistAddCheckCircleIcon />
-          </Box>
+          <Tooltip title="On List" arrow>
+            <PlaylistAddCheckCircleIcon
+              sx={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                margin: '5px',
+                bgcolor: 'rgba(0, 0, 0, 0.69)',
+                color: 'white',
+                borderRadius: '3px',
+              }}
+            />
+          </Tooltip>
         ) : null}
       </CardActionArea>
       <CardContent
diff --git a/src/renderer/components/app/search/SearchMediaCardCompact.tsx b/src/renderer/components/app/search/SearchMediaCardCompact.tsx
index c1917b6..ccdf418 100644
--- a/src/renderer/components/app/search/SearchMediaCardCompact.tsx
+++ b/src/renderer/components/app/search/SearchMediaCardCompact.tsx
@@ -123,17 +123,19 @@ export default function SearchMediaCardCompact({ props }: any) {
           }}
         />
         {props.mediaListEntry !== null ? (
-          <Box
-            sx={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              bgcolor: 'rgba(0, 0, 0, 0.69)',
-              color: 'white',
-            }}
-          >
-            <PlaylistAddCheckCircleIcon />
-          </Box>
+          <Tooltip title="On List" arrow>
+            <PlaylistAddCheckCircleIcon
+              sx={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                margin: '5px',
+                bgcolor: 'rgba(0, 0, 0, 0.69)',
+                color: 'white',
+                borderRadius: '3px',
+              }}
+            />
+          </Tooltip>
         ) : null}
         <Box
           sx={{
diff --git a/src/renderer/components/app/seasons/SeasonMediaCard.tsx b/src/renderer/components/app/seasons/SeasonMediaCard.tsx
index 046f52b..78e9339 100644
--- a/src/renderer/components/app/seasons/SeasonMediaCard.tsx
+++ b/src/renderer/components/app/seasons/SeasonMediaCard.tsx
@@ -122,20 +122,19 @@ export const SeasonMediaCard = ({ props }: any) => {
           }}
         />
         {props.mediaListEntry !== null ? (
-          <Box
-            sx={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              bgcolor: 'rgba(0, 0, 0, 0.69)',
-              color: 'white',
-              borderBottomRightRadius: '3px',
-              height: '24px',
-              width: '24px',
-            }}
-          >
-            <PlaylistAddCheckCircleIcon />
-          </Box>
+          <Tooltip title="On List" arrow>
+            <PlaylistAddCheckCircleIcon
+              sx={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                margin: '5px',
+                bgcolor: 'rgba(0, 0, 0, 0.69)',
+                color: 'white',
+                borderRadius: '3px',
+              }}
+            />
+          </Tooltip>
         ) : null}
         {props.nextAiringEpisode !== null ? (
           <Box
diff --git a/src/renderer/components/app/seasons/SeasonMediaCardCompact.tsx b/src/renderer/components/app/seasons/SeasonMediaCardCompact.tsx
index 73d9b3a..21e6f0d 100644
--- a/src/renderer/components/app/seasons/SeasonMediaCardCompact.tsx
+++ b/src/renderer/components/app/seasons/SeasonMediaCardCompact.tsx
@@ -105,17 +105,19 @@ export default function SeasonMediaCardCompact({ props }: any) {
           }}
         />
         {props.mediaListEntry !== null ? (
-          <Box
-            sx={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              bgcolor: 'rgba(0, 0, 0, 0.69)',
-              color: 'white',
-            }}
-          >
-            <PlaylistAddCheckCircleIcon />
-          </Box>
+          <Tooltip title="On List" arrow>
+            <PlaylistAddCheckCircleIcon
+              sx={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                margin: '5px',
+                bgcolor: 'rgba(0, 0, 0, 0.69)',
+                color: 'white',
+                borderRadius: '3px',
+              }}
+            />
+          </Tooltip>
         ) : null}
         <Box
           sx={{