diff --git a/img/campfire.png b/img/campfire.png
new file mode 100644
index 0000000..1c3124e
Binary files /dev/null and b/img/campfire.png differ
diff --git a/index.html b/index.html
index 07deeb8..6f7433a 100644
--- a/index.html
+++ b/index.html
@@ -62,6 +62,7 @@ <h1>Headphones Recommended</h1>
             <a href="https://ganeshh123.github.io">Ganesh H</a>
         </div>
     </div>
+    <script defer src='./js/timer.js' type='text/babel'></script>
     <script defer src='./js/app.js' type='text/babel'></script>
 </body>
 
diff --git a/js/app.js b/js/app.js
index a8a3a9c..bfd3c65 100644
--- a/js/app.js
+++ b/js/app.js
@@ -52,7 +52,9 @@ let styles = {
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'space-around',
-        width: '100%'
+        width: '100%',
+        marginTop: 10,
+        marginBottom: 10
     }
 }
 
@@ -127,6 +129,7 @@ class SceneSelect extends React.Component{
                     >
                     <MenuItem value={'rain_on_leaves'}>Rain falling on leaves</MenuItem>
                     <MenuItem value={'forest_1'}>Calm Forest</MenuItem>
+                    <MenuItem value={'campfire'}>Campfire</MenuItem>
                     </Select>
                     <FormHelperText>{this.state.currentScene.description}</FormHelperText>
                 </FormControl>
@@ -162,16 +165,26 @@ class App extends React.Component{
         }
     }
 
+    toggleTimer = (e) => {
+        let timerElement = document.querySelector('#appTimer')
+        if(!timerElement.style.display || timerElement.style.display === 'none'){
+            timerElement.style.display = 'flex'
+        }else{
+            timerElement.style.display ='none'
+        }
+    }
+
     
     render(){
         return(
             <div id='app' style={styles.app}>
+                <MainTimer />
                <div id='sceneSwitch' style={styles.sceneSwitch}>
                <IconButton aria-label="switch_video" onClick={this.switchVideo}>
                     <Icon>{this.state.videoMode}</Icon>
                 </IconButton>
-                <IconButton disabled>
-                    <Icon></Icon>
+                <IconButton onClick={this.toggleTimer}>
+                    <Icon>timer</Icon>
                 </IconButton>
                 <IconButton disabled>
                     <Icon></Icon>
@@ -180,7 +193,7 @@ class App extends React.Component{
                </div>
                <div id='volControls' style={styles.VolumeControls}>
                <VolumeControl type='music'/>
-               <VolumeControl type='sfx' />'
+               <VolumeControl type='sfx' />
                 
                </div>
             </div>
diff --git a/js/sceneselect.js b/js/sceneselect.js
index 52df795..ee2d396 100644
--- a/js/sceneselect.js
+++ b/js/sceneselect.js
@@ -21,6 +21,17 @@ let scenes = [
         "musicSource": 'https://www.youtube.com/watch?v=962VmrIh9vQ',
         "description" : 'A calm forest with a gentle breeze',
         "background" : 'forest1'
+    },
+    {
+        "scene": 'campfire',
+        "name": 'Campfire',
+        "video": 'campfire',
+        "sfx": 'campfire',
+        "sfxSource": 'https://www.youtube.com/watch?v=O_LJWYzdD4o',
+        "videoSource": 'https://www.pexels.com/video/bonfire-in-the-woods-2060826/',
+        "musicSource": 'https://www.youtube.com/watch?v=962VmrIh9vQ',
+        "description" : 'Waking up to a campfire in the woods.',
+        "background" : 'campfire'
     }
 ]
 
diff --git a/js/timer.js b/js/timer.js
new file mode 100644
index 0000000..697c3c6
--- /dev/null
+++ b/js/timer.js
@@ -0,0 +1,236 @@
+const containerDOM = document.getElementById('container')
+const create = React.createElement
+
+let styles = {
+
+}
+
+class Adjuster extends React.Component{
+    constructor(props){
+        super(props)
+    }
+
+    labelText = this.props.type + ' length'
+
+    render(){
+        return(
+            <div class='adjuster'>
+            <h6 id={this.props.type+'-label'}>{this.labelText}</h6>
+            <div class='adjuster_module'>
+                <a 
+                    id={this.props.type+'-decrement'}
+                    class="large waves-effect btn-floating"
+                    onClick={() => {
+                        this.props.adjust(this.props.type+'_length', -1)
+                    }}
+                >
+                    <Icon id='adjuster_button_up'>keyboard_arrow_down</Icon>
+                </a>
+                <div class='adjuster-info'>
+                    <h5 id={this.props.type+'-length'}>{this.props.length}</h5>
+                </div>
+                <a 
+                    id={this.props.type+'-increment'}
+                    class="large waves-effect btn-floating"
+                    onClick={() => {
+                        this.props.adjust(this.props.type+'_length', 1)
+                    }}
+                >
+                    <Icon id='adjuster_button_down'>keyboard_arrow_up</Icon>
+                </a>
+            </div>
+                
+            </div>
+        )
+    }
+}
+
+class Display extends React.Component{
+    constructor(props){
+        super(props)
+    }
+
+    render(){
+        return(
+            <div id='display'>
+                <h4 id='timer-label'>{this.props.mode}</h4>
+                <h2 id='time-left'>{this.props.mins}:{this.props.secs}</h2>
+            </div>
+        )
+    }
+}
+
+
+class MainTimer extends React.Component{
+    constructor(props){
+        super(props)
+    }
+
+    interval;
+
+    state={
+        mode: 'Session',
+        break_length: 5,
+        session_length: 25,
+        duration: 25*60,
+        minutes: '25',
+        seconds: '00',
+        status: 'Stopped'
+    }
+
+    startTimer = () => {
+        let timer = this.state.duration
+
+        let minutes = parseInt(timer / 60, 10)
+        let seconds = parseInt(timer % 60, 10);
+
+        minutes = minutes < 10 ? "0" + minutes : minutes;
+        seconds = seconds < 10 ? "0" + seconds : seconds;
+        
+        this.setState({
+            status: 'Running',
+            minutes: minutes,
+            seconds: seconds
+        })
+
+        timer = timer - 1
+
+        this.interval = setInterval(function () {
+
+            if(this.state.status === 'Stopped'){
+                clearInterval(this.interval)
+            }
+
+            minutes = parseInt(timer / 60, 10)
+            seconds = parseInt(timer % 60, 10);
+    
+            minutes = minutes < 10 ? "0" + minutes : minutes;
+            seconds = seconds < 10 ? "0" + seconds : seconds;
+
+            this.setState({
+                minutes: minutes,
+                seconds: seconds
+            })
+
+            if (timer === 0) {
+                document.getElementById('beep').play()
+                clearInterval(this.interval)
+                let timerElement = document.querySelector('#appTimer')
+                if(!timerElement.style.display || timerElement.style.display === 'none'){
+                    timerElement.style.display = 'flex'
+                }
+                setTimeout(() => {
+                    if(this.state.mode === 'Session'){
+                        this.startBreak()
+                    }else{
+                        this.startSession()
+                    }
+                }, 100)
+            }else{
+                timer = timer -1
+            }
+
+        }.bind(this), 1000);
+    }
+
+    adjust = (type, value) => {
+        if(this.state[type] === 1 && value < 0){
+            return
+        }
+
+        if(this.state[type] === 60 && value >0){
+            return
+        }
+
+        this.state[type] = this.state[type] + value
+        this.state.duration = this.state.session_length * 60
+
+        let mins = parseInt(this.state.duration / 60, 10)
+        let secs = parseInt(this.state.duration % 60, 10)
+
+        mins= mins < 10 ? "0" + mins : mins
+        secs = secs < 10 ? "0" + secs : secs
+
+        this.setState({
+            minutes: mins,
+            seconds: secs
+        })
+    }
+
+    startSession = () => {
+        this.setState({
+            mode: 'Session',
+            duration: this.state.session_length *60
+        })
+        this.startTimer()
+        this.forceUpdate()
+    }
+
+    startBreak = () => {
+        this.state.mode = 'Break'
+        this.state.duration = this.state.break_length * 60
+        this.forceUpdate()
+        this.startTimer()
+    }
+
+    reset = () => {
+        document.getElementById('beep').pause();
+        document.getElementById('beep').currentTime = 0;
+        clearInterval(this.interval)
+        this.setState({
+            mode: 'Session',
+            break_length: 5,
+            session_length: 25,
+            duration: 25 * 60,
+            minutes: '25',
+            seconds: '00',
+            status: 'Stopped'
+        })
+    }
+
+    startStop = () => {
+        if(this.state.status === 'Stopped'){
+            this.startSession()
+        }
+        if(this.state.status === 'Paused'){
+            this.state.duration = (this.state.minutes * 60) + this.state.seconds
+            this.startTimer()
+        }
+        if(this.state.status === 'Running'){
+            this.state.status = 'Paused'
+            clearInterval(this.interval)
+        }
+    }
+
+    render(){
+        return(
+            <div id='appTimer'>
+                <audio id='beep' ref="audio_tag" src="../sfx/beep.wav"/>
+                <div id='first'>
+                    <Display mode={this.state.mode} mins={this.state.minutes} secs={this.state.seconds}/>
+                </div>
+                <div id='second'>
+                    <a 
+                        id='start_stop'
+                        class="large waves-effect btn-floating"
+                        onClick={() => {
+                            this.startStop()
+                        }}
+                    ><Icon id='timer_button_start'>play_arrow</Icon></a>
+                    <a 
+                        id='reset'
+                        class="large waves-effect btn-floating"
+                        onClick={() => {
+                            this.reset()
+                        }}
+                    ><Icon id='timer_button_reset'>restore</Icon></a>
+                </div>
+                <div id='third'>
+                    <Adjuster type='session' length={this.state.session_length} adjust={this.adjust}/>
+                    <Adjuster type='break' length={this.state.break_length} adjust={this.adjust}/>
+                </div>
+            </div>
+        )
+    }
+}
+
diff --git a/sfx/beep.wav b/sfx/beep.wav
new file mode 100644
index 0000000..d9f11e5
Binary files /dev/null and b/sfx/beep.wav differ
diff --git a/sfx/campfire.mp3 b/sfx/campfire.mp3
new file mode 100644
index 0000000..d6f425a
Binary files /dev/null and b/sfx/campfire.mp3 differ
diff --git a/styles.css b/styles.css
index ef13647..646b7d2 100644
--- a/styles.css
+++ b/styles.css
@@ -8,6 +8,10 @@ body {
     margin: 0;
 }
 
+h1,h2,h3,h4,h5,h6{
+    margin-top: none !important;
+}
+
 #main {
     position: relative;
     height: 100vh;
@@ -123,7 +127,7 @@ body {
     min-height: 100px;
     width: 100vw;
     max-width: 700px;
-    max-height: 80vh;
+    max-height: 90vh;
     display: none;
     flex-direction: column;
     align-items: center;
@@ -134,6 +138,99 @@ body {
 }
 
 
+
+/* Timer CSS */
+#appTimer{
+    max-height: 500px;
+    display: flex;
+    flex-direction: column;
+    color: white;
+    align-items: center;
+    display: none;
+    width: 90%
+}
+
+#first{
+    max-height: 150px;
+}
+
+#display{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+}
+
+#timer-label{
+    font-size: 18pt;
+    margin-bottom: 20px;
+    margin-top: 10px;
+    text-transform: uppercase;
+}
+
+#time-left{
+    font-size: 32pt;
+    margin-top: 0px;
+    margin-bottom: 15px;
+}
+
+#second{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    width: 100%;
+    max-width: 150px
+}
+
+#timer_button_start, #timer_button_reset{
+   font-size: 40px;
+   cursor: pointer;
+}
+
+#third{
+    max-height: 150px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    width: 100%;
+}
+
+.adjuster{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.adjuster_module{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.adjuster-info{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#session-label, #break-label{
+    margin-top: 10px;
+    margin-bottom: 10px;
+    font-size: 14pt;
+    text-transform: capitalize;
+}
+
+#session-length, #break-length{
+    font-size: 18pt;
+}
+
+#adjuster_button_up, #adjuster_button_down{
+    font-size: 40px;
+    margin-left: 10px;
+    margin-right: 10px;
+    cursor: pointer;
+}
+
 /* Material UI Tweakes */
 /* This should be cleaner than this, but I haven't figured out how
     to use colors yet */
diff --git a/video/campfire.mp4 b/video/campfire.mp4
new file mode 100644
index 0000000..78f6c12
Binary files /dev/null and b/video/campfire.mp4 differ