diff --git a/src/doing/Doing.css b/src/doing/Clock.css
similarity index 52%
rename from src/doing/Doing.css
rename to src/doing/Clock.css
index 616c84d..146dd16 100644
--- a/src/doing/Doing.css
+++ b/src/doing/Clock.css
@@ -3,7 +3,7 @@
   row-gap: 50px;
 }
 
-.Doing .clock {
+.Doing .pomodoro .clock {
   width: fit-content;
   border-radius: 20px;
   padding: 0 5%;
@@ -13,25 +13,9 @@
   background-color: #000;
 }
 
-.Doing .controls {
+.Doing .pomodoro .controls {
   width: 100%;
   justify-content: center;
   display: flex;
   column-gap: 10px;
 }
-
-.Doing .motivational {
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  row-gap: 10px;
-}
-
-.Doing .motivational p:first-of-type {
-  font-size: 1rem;
-  font-style: italic;
-}
-
-.Doing .motivational p:last-of-type {
-  font-size: 0.7rem;
-}
diff --git a/src/doing/Clock.jsx b/src/doing/Clock.jsx
new file mode 100644
index 0000000..7cf5245
--- /dev/null
+++ b/src/doing/Clock.jsx
@@ -0,0 +1,59 @@
+import { useState, useRef } from 'react'
+import Countdown, { zeroPad } from 'react-countdown'
+import { Store } from '../store/store.js'
+import './Clock.css'
+
+export const Clock = () => {
+  const store = Store()
+  const text = store.language.current === "english" ? store.language.text().english : store.language.text().spanish
+  const countdownRef = useRef(null)
+  const audioStart = new Audio('/start.mp3')
+  const audioAlarm = new Audio('/clock_alarm.mp3')
+  const [date] = useState(Date.now() + 900000)
+  const [textStartBtn, setTextStartBtn] = useState(text.doing.pomodoro.start)
+  const [viewStartBtn, setViewStartBtn] = useState("")
+  const [viewPauseBtn, setViewPauseBtn] = useState("hide")
+  const [viewResetBtn, setViewResetBtn] = useState("hide")
+
+  const rendered = ({ minutes, seconds, completed }) => {
+    completed && (audioAlarm.play(), handleResetClick(false))
+    return <span>{zeroPad(minutes)}:{zeroPad(seconds)}</span>
+  }
+
+  const handleStartClick = () => {
+    countdownRef.current && countdownRef.current.getApi().start()
+    setViewStartBtn("hide")
+    setViewPauseBtn("")
+    setViewResetBtn("")
+    audioStart.play()
+  }
+
+  const handlePauseClick = () => {
+    countdownRef.current && countdownRef.current.getApi().pause()
+    setTextStartBtn(text.doing.pomodoro.continue)
+    setViewStartBtn("")
+    setViewPauseBtn("hide")
+    audioStart.play()
+  }
+
+  const handleResetClick = (withSound) => {
+    countdownRef.current && countdownRef.current.getApi().stop()
+    setTextStartBtn(text.doing.pomodoro.start)
+    setViewStartBtn("")
+    setViewPauseBtn("hide")
+    setViewResetBtn("hide")
+    // play a sound when reseting but just when user clicks on RESET btn
+    withSound && audioStart.play()
+  }
+
+  return (
+    <div className="pomodoro sub-container">
+      <div className="clock"><Countdown ref={countdownRef} date={date} autoStart={false} renderer={rendered} /></div>
+      <div className="controls">
+        <button className={`${viewStartBtn} start bigBtn`} onClick={handleStartClick}>{textStartBtn}</button>
+        <button className={`${viewPauseBtn} pause bigBtn`} onClick={handlePauseClick}>{text.doing.pomodoro.pause}</button>
+        <button className={`${viewResetBtn} reset bigBtn`} onClick={() => handleResetClick(true)}>{text.doing.pomodoro.reset}</button>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/doing/Doing.jsx b/src/doing/Doing.jsx
index 4628b9f..3526e6c 100644
--- a/src/doing/Doing.jsx
+++ b/src/doing/Doing.jsx
@@ -1,107 +1,17 @@
-import { useEffect, useState, useRef } from 'react'
-import Countdown, { zeroPad } from 'react-countdown'
-import axios from 'axios'
-import { Footer } from './Footer.jsx'
 import { Store } from '../store/store.js'
-import './Doing.css'
+import { Clock } from './Clock.jsx'
+import { Quote } from './Quote.jsx'
+import { Footer } from './Footer.jsx'
 
 export const Doing = () => {
   const store = Store()
   const text = store.language.current === "english" ? store.language.text().english : store.language.text().spanish
-  const [textStartBtn, setTextStartBtn] = useState(text.doing.pomodoro.start)
-  const [viewStartBtn, setViewStartBtn] = useState("")
-  const [viewPauseBtn, setViewPauseBtn] = useState("hide")
-  const [viewResetBtn, setViewResetBtn] = useState("hide")
-  const [date] = useState(Date.now() + 900000)
-  const countdownRef = useRef(null)
-  const [quote, setQuote] = useState("")
-  const [author, setAuthor] = useState("")
-  const [fetchNewQuote, setFetchNewQoute] = useState("")
-  const audioStart = new Audio('/start.mp3')
-  const audioAlarm = new Audio('/clock_alarm.mp3')
-  const catchNewQuote = () => fetchNewQuote == "yes" ? setFetchNewQoute("") : setFetchNewQoute("yes")
-
-  const rendered = ({ minutes, seconds, completed }) => {
-    if (completed) {
-      audioAlarm.play()
-      handleResetClick(false)
-    }
-    return <span>{zeroPad(minutes)}:{zeroPad(seconds)}</span>
-  }
-
-  const handleStartClick = () => {
-    if (countdownRef.current) countdownRef.current.getApi().start()
-    setViewStartBtn("hide")
-    setViewPauseBtn("")
-    setViewResetBtn("")
-    audioStart.play()
-  }
-
-  const handlePauseClick = () => {
-    if (countdownRef.current) countdownRef.current.getApi().pause()
-    setTextStartBtn(text.doing.pomodoro.continue)
-    setViewStartBtn("")
-    setViewPauseBtn("hide")
-    audioStart.play()
-  }
-
-  const handleResetClick = (withSound) => {
-    if (countdownRef.current) countdownRef.current.getApi().stop()
-    setTextStartBtn(text.doing.pomodoro.start)
-    setViewStartBtn("")
-    setViewPauseBtn("hide")
-    setViewResetBtn("hide")
-    if (withSound) audioStart.play()
-  }
-
-  useEffect(() => {
-    const fetchQuote = async () => {
-      try {
-        const response = await axios('https://api.quotable.io/random', {
-          params: {
-            tags: 'motivational|success|change|character|future|inspirational',
-            maxLength: 70,
-          }
-        })
-        setQuote(response.data.content.slice(0, -1)) // Delete the last dot of the quote
-        setAuthor(response.data.author)
-      }
-      catch (error) { console.error("Error fetching the quote: ", error.message) }
-    }
-    fetchQuote()
-  }, [fetchNewQuote])
-
-  const translateQuote = async () => {
-    let quoteTranslated = await axios(`https://api.mymemory.translated.net/get?q=${quote}&langpair=en|es`)
-    setQuote(quoteTranslated.data.responseData.translatedText)
-  }
-
-  useEffect(() => {
-    if (store.language.current === "spanish") translateQuote()
-  }, [author])
 
   return (
     <div className='Doing'>
       <h1>{text.doing.title}</h1>
-      <div className="pomodoro sub-container">
-        <div className="clock">
-          <Countdown
-            ref={countdownRef}
-            date={date}
-            autoStart={false}
-            renderer={rendered}
-          />
-        </div>
-        <div className="controls">
-          <button className={`${viewStartBtn} start bigBtn`} onClick={handleStartClick}>{textStartBtn}</button>
-          <button className={`${viewPauseBtn} pause bigBtn`} onClick={handlePauseClick}>{text.doing.pomodoro.pause}</button>
-          <button className={`${viewResetBtn} reset bigBtn`} onClick={() => handleResetClick(true)}>{text.doing.pomodoro.reset}</button>
-        </div>
-        <div className="motivational" onClick={catchNewQuote}>
-          <p>{quote}</p>
-          <p>{author}</p>
-        </div>
-      </div>
+      <Clock />
+      <Quote />
       <Footer />
     </div>
   )
diff --git a/src/doing/Quote.css b/src/doing/Quote.css
new file mode 100644
index 0000000..a1d15e6
--- /dev/null
+++ b/src/doing/Quote.css
@@ -0,0 +1,15 @@
+.Doing .motivational {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+}
+
+.Doing .motivational p:first-of-type {
+  font-size: 1rem;
+  font-style: italic;
+}
+
+.Doing .motivational p:last-of-type {
+  font-size: 0.7rem;
+}
diff --git a/src/doing/Quote.jsx b/src/doing/Quote.jsx
new file mode 100644
index 0000000..591e33f
--- /dev/null
+++ b/src/doing/Quote.jsx
@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react'
+import { Store } from '../store/store.js'
+import axios from 'axios'
+import './Quote.css'
+
+export const Quote = () => {
+  const store = Store()
+  const [quote, setQuote] = useState("One day, in retrospect, the years of struggle will strike you as the most beautiful")
+  const [author, setAuthor] = useState("Sigmund Freud")
+  const [fetchNewQuote, setFetchNewQoute] = useState("")
+  const catchNewQuote = () => fetchNewQuote == "yes" ? setFetchNewQoute("") : setFetchNewQoute("yes")
+
+  useEffect(() => {
+    const fetchQuote = async () => {
+      try {
+        const response = await axios('https://api.quotable.io/random', {
+          params: {
+            tags: 'motivational|success|change|character|future|inspirational',
+            maxLength: 70,
+          }
+        })
+        if (store.language.current === "spanish") await translateQuote(response.data.content)
+        else setQuote(response.data.content)
+        setAuthor(response.data.author)
+      }
+      catch (error) {
+        setQuote(quote)
+        setAuthor(author)
+        console.error("Error fetching the quote: ", error.message)
+      }
+    }
+    fetchQuote()
+  }, [fetchNewQuote])
+
+  const translateQuote = async (quote) => {
+    const quoteTranslated = await axios(`https://api.mymemory.translated.net/get?q=${quote}&langpair=en|es`)
+    setQuote(quoteTranslated.data.responseData.translatedText)
+  }
+
+  return (
+    <div className="motivational" onClick={catchNewQuote}>
+      <p>{quote}</p>
+      <p>{author}</p>
+    </div>
+  )
+}
\ No newline at end of file