diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css
index 84a26a3..09f78e4 100644
--- a/public/css_styles/styles.css
+++ b/public/css_styles/styles.css
@@ -104,6 +104,7 @@
   margin: 0;
   padding: 0;
   color: #1FAB89;
+  user-select: none;
 }
 .main-pomodoro .style-display h3 {
   font-size: 30pt;
@@ -298,6 +299,36 @@
   }
 }
 
+.pomodoro-counter {
+  position: absolute;
+  top: 29vh;
+}
+.pomodoro-counter ul li {
+  display: flex;
+  font-family: "Rambla", sans-serif;
+  list-style-type: none;
+  margin-top: 2vh;
+  font-size: 15pt;
+  color: #00000070;
+}
+.pomodoro-counter ul li .separator {
+  user-select: none;
+  margin: 0px 0.5vw;
+}
+.pomodoro-counter ul li .quantity {
+  font-family: "Raleway", sans-serif;
+  font-weight: 700;
+  user-select: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 30px;
+  width: 30px;
+  border-radius: 100%;
+  color: #1FAB89;
+  background-color: #9DF3C4;
+}
+
 html, body {
   margin: 0;
   padding: 0;
diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map
index aaa9d10..6d49a41 100644
--- a/public/css_styles/styles.css.map
+++ b/public/css_styles/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss"],"names":[],"mappings":"AACA;EACI,kBCqCS;EDnCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;EAEA;ECXJ;EACA;EAQA;EACA;EACA;;ADKA;EACI;EAEA;ECnBJ;EACA;EAQA;EACA;EACA;;ADYI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AE5CpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFsBO;;AEnBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFMG;;AEHP;EACI;EFpBR;EACA;EEuBQ,OFFG;EEIH;EACA;;AAIR;EF1BA;EACA;EACA;EAtBA;EACA;EEiDI;EACA;EACA;EAEA,YFjBO;EEkBP;EAEA;EACA;;;AC7DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHsBO;EGrBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHXL;EGYK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH/CE;;;AGwDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBNwBU;;AMtBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;ANSZ;EACI;EACA;;;AAGJ;EACI;EACA,kBAtBe","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss"],"names":[],"mappings":"AACA;EACI,kBCqCS;EDnCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;EAEA;ECXJ;EACA;EAQA;EACA;EACA;;ADKA;EACI;EAEA;ECnBJ;EACA;EAQA;EACA;EACA;;ADYI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AE5CpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFsBO;;AEnBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFMG;EELH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFJG;EEMH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFnBO;EEoBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHsBO;EGrBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHXL;EGYK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH/CE;;;AGwDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBNwBU;;AMtBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPCD;EOAC,kBPCF;;;AAYd;EACI;EACA;;;AAGJ;EACI;EACA,kBAvBe","file":"styles.css"}
\ No newline at end of file
diff --git a/public/sass_styles/_mainPomodoro.scss b/public/sass_styles/_mainPomodoro.scss
index 2e872f7..73d77e4 100644
--- a/public/sass_styles/_mainPomodoro.scss
+++ b/public/sass_styles/_mainPomodoro.scss
@@ -33,6 +33,8 @@
             @include normalizeBody;
             
             color: $second-color;
+            user-select: none;
+
         }
 
         h3 {
diff --git a/public/sass_styles/_pomodoro-counter.scss b/public/sass_styles/_pomodoro-counter.scss
new file mode 100644
index 0000000..f02a9c5
--- /dev/null
+++ b/public/sass_styles/_pomodoro-counter.scss
@@ -0,0 +1,45 @@
+.pomodoro-counter {
+
+
+    position: absolute;
+    top: 29vh;
+
+    ul {
+
+        li {
+            display: flex;
+
+            @include bodyFont;
+
+            list-style-type: none;
+            margin-top: 2vh;
+
+            font-size: 15pt;
+
+            color: #00000070;
+
+            .separator {
+                user-select: none;
+                margin: 0px 0.5vw;
+            }
+            
+            .quantity {
+                @include titleFont;
+
+                user-select: none;
+                
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                
+                height: 30px;
+                width: 30px;
+
+                border-radius: 100%;
+
+                color: $second-color;
+                background-color: $light-color;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/public/sass_styles/styles.scss b/public/sass_styles/styles.scss
index e83fc3f..68b27d7 100644
--- a/public/sass_styles/styles.scss
+++ b/public/sass_styles/styles.scss
@@ -49,6 +49,7 @@ $lightest-color: #D7FBE8;
 @import 'goDownArrow';
 @import 'aboutThis';
 @import 'historyButton';
+@import 'pomodoro-counter';
 
 html, body { 
     margin: 0;
diff --git a/src/components/MainPomodoro.jsx b/src/components/MainPomodoro.jsx
index e1ab851..a335245 100644
--- a/src/components/MainPomodoro.jsx
+++ b/src/components/MainPomodoro.jsx
@@ -1,5 +1,6 @@
 import React, {useState} from 'react'
 import MainPomodoroTimer from './MainPomodoroTimer'
+import PomodoroCounter from './PomodoroCounter'
 import StyleSelector from './StyleSelector'
 
 const MainPomodoro = () => {
@@ -10,6 +11,8 @@ const MainPomodoro = () => {
     const [displayHidden, setDisplayHidden] = useState(true)
     const [timerOn, setTimerOn] = useState(false)
 
+    //const [counter, setCounter] 
+
     const showStyles = () => {
         console.log('Styles Deployed')
 
@@ -38,6 +41,7 @@ const MainPomodoro = () => {
             </div>
 
             <StyleSelector displayHidden={displayHidden} style={style} setStyle={setStyle}/>
+            <PomodoroCounter />
         </>
         
 
diff --git a/src/components/PomodoroCounter.jsx b/src/components/PomodoroCounter.jsx
new file mode 100644
index 0000000..90d5407
--- /dev/null
+++ b/src/components/PomodoroCounter.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const PomodoroCounter = () => {
+    return (
+        <div className="pomodoro-counter">
+            <ul>
+                <li>
+                    <span className="quantity">0</span><span className="separator"> - </span>Pomodoros
+                </li>
+                <li>
+                    <span className="quantity">0</span><span className="separator"> - </span>Rests
+                </li>
+                <li>
+                    <span className="quantity">0</span><span className="separator"> - </span>Long rests
+                </li>
+            </ul>
+        </div>
+    )
+}
+
+export default PomodoroCounter