diff --git a/src/components/HLSPlayer.tsx b/src/components/HLSPlayer.tsx
index c092d19..1461acb 100644
--- a/src/components/HLSPlayer.tsx
+++ b/src/components/HLSPlayer.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react"
 import Hls from "hls.js"
 import { css } from "@emotion/react"
+import { theme } from "utils/theme"
 
 export function HLSPlayer(props: { source: string }) {
   const ref = useRef<HTMLVideoElement | null>(null)
@@ -89,11 +90,11 @@ export function HLSPlayer(props: { source: string }) {
           <button
             type="button"
             css={css`
-              background: #434c5e;
+              background: ${theme.colors.blue500};
               width: 100px;
               height: 100px;
               pointer-events: all;
-              color: #fff;
+              color: ${theme.colors.white};
               border-radius: 100%;
               border: none;
             `}
diff --git a/src/components/Scrobber/ScrobberTimelineDatePicker.styled.ts b/src/components/PillInput/PillInput.styled.ts
similarity index 73%
rename from src/components/Scrobber/ScrobberTimelineDatePicker.styled.ts
rename to src/components/PillInput/PillInput.styled.ts
index a263696..904172a 100644
--- a/src/components/Scrobber/ScrobberTimelineDatePicker.styled.ts
+++ b/src/components/PillInput/PillInput.styled.ts
@@ -1,17 +1,19 @@
 import styled from "@emotion/styled"
+import { theme } from "utils/theme"
 
 export const SPill = styled.div`
+  all: unset;
+  cursor: pointer;
+
   position: relative;
-  background: #545f75;
+  background: ${theme.colors.blue600};
   height: 2.5em;
   padding: 0rem 3em;
   display: flex;
   align-items: center;
   justify-content: center;
 
-  box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.019),
-    0 8.7px 6.9px rgba(0, 0, 0, 0.027), 0 17.7px 14.2px rgba(0, 0, 0, 0.033),
-    0 36.5px 29.2px rgba(0, 0, 0, 0.041), 0 100px 80px rgba(0, 0, 0, 0.06);
+  box-shadow: ${theme.shadows.md};
 
   border-radius: 1.25em;
   text-align: center;
@@ -23,8 +25,9 @@ export const SPill = styled.div`
     padding: 0 1em;
   }
 
-  &:focus-within {
-    background: #687590;
+  div&:focus-within,
+  button&:hover {
+    background: ${theme.colors.blue700};
   }
 `
 
diff --git a/src/components/PillInput/PillInput.tsx b/src/components/PillInput/PillInput.tsx
new file mode 100644
index 0000000..53f2fc3
--- /dev/null
+++ b/src/components/PillInput/PillInput.tsx
@@ -0,0 +1 @@
+export { SPillInput as PillInput, SPill as Pill } from "./PillInput.styled"
diff --git a/src/components/Scrobber/Scrobber.styled.ts b/src/components/Scrobber/Scrobber.styled.ts
index ec9ad8d..a7993f0 100644
--- a/src/components/Scrobber/Scrobber.styled.ts
+++ b/src/components/Scrobber/Scrobber.styled.ts
@@ -1,4 +1,5 @@
 import styled from "@emotion/styled"
+import { theme } from "utils/theme"
 
 export const SMain = styled.div`
   user-select: none;
@@ -25,19 +26,19 @@ export const STop = styled.div`
   display: flex;
   align-items: center;
   padding: 2em;
-  background: linear-gradient(rgba(10, 10, 10, 1), rgba(10, 10, 10, 0));
+  background: ${theme.gradients.top};
 `
 
 export const SBack = styled.a`
-  color: #d8dee9;
-  background: #434c5e;
+  color: ${theme.colors.lightBlue900};
+  background: ${theme.colors.blue500};
   width: 4em;
   height: 4em;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 100%;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: ${theme.shadows.sm};
 
   & svg {
     width: 2em;
@@ -47,14 +48,14 @@ export const SBack = styled.a`
 
 export const SInfo = styled.div`
   display: flex;
-  background: #434c5e;
+  background: ${theme.colors.blue500};
   border-radius: 1em;
   padding: 0.75em;
   padding-right: 1em;
   align-items: center;
 
   margin-left: 1.5em;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: ${theme.shadows.sm};
 `
 
 export const SName = styled.span`
@@ -62,7 +63,7 @@ export const SName = styled.span`
   display: flex;
   align-items: center;
   margin: 0;
-  color: #d8dee9;
+  color: ${theme.colors.lightBlue900};
   text-decoration: none;
   font-size: 1em;
 `
@@ -72,11 +73,11 @@ export const SColor = styled.span`
   height: 1.5em;
   border-radius: 8px;
   margin-right: 0.75em;
-  background: #eb5757;
+  background: ${theme.colors.red500};
 `
 
 export const STimeOffset = styled.div`
-  background: #3b4252;
+  background: ${theme.colors.blue400};
   height: 2.5em;
   border-radius: 1.25em 0 0 1.25em;
   display: flex;
@@ -102,7 +103,7 @@ export const SLive = styled.span`
     height: 8px;
     margin-top: 1px;
 
-    background: #eb5757;
+    background: ${theme.colors.red500};
     border-radius: 100%;
   }
 `
@@ -117,18 +118,16 @@ export const STimeline = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(rgba(10, 10, 10, 0), rgba(10, 10, 10, 1));
+  background: ${theme.gradients.bottom};
 `
 
 export const SCenter = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #d8dee9;
-  background: #434c5e;
-  box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.019),
-    0 8.7px 6.9px rgba(0, 0, 0, 0.027), 0 17.7px 14.2px rgba(0, 0, 0, 0.033),
-    0 36.5px 29.2px rgba(0, 0, 0, 0.041), 0 100px 80px rgba(0, 0, 0, 0.06);
+  color: ${theme.colors.lightBlue900};
+  background: ${theme.colors.blue500};
+  box-shadow: ${theme.shadows.md};
 
   padding: 0.8em;
   border-radius: 2.25em;
@@ -141,7 +140,7 @@ export const SCenter = styled.div`
     border: 1.25em solid transparent;
     border-left-width: 0.8em;
     border-right-width: 0.8em;
-    border-top-color: #434c5e;
+    border-top-color: ${theme.colors.blue500};
     border-bottom-width: 0;
     position: absolute;
     top: 100%;
diff --git a/src/components/Scrobber/ScrobberSlider.utils.ts b/src/components/Scrobber/ScrobberSlider.utils.ts
index be851b9..a64fac0 100644
--- a/src/components/Scrobber/ScrobberSlider.utils.ts
+++ b/src/components/Scrobber/ScrobberSlider.utils.ts
@@ -1,5 +1,5 @@
 import moment from "moment"
-import { MutableRefObject, useCallback, useEffect, useRef } from "react"
+import { useCallback, useEffect, useRef } from "react"
 
 const SECONDS_PER_DAY = 24 * 60 * 60
 const LINE_HEIGHT = 10
@@ -41,7 +41,7 @@ export function drawCanvas(
     ctx.stroke()
   }
 
-  // hide progress bar when necessary [-inf, 0]
+  // hide progress bar when necessary [-inf, 0] in seconds
   const drawDayBoundedLine = (shift: number) => {
     const { width, height } = canvas.getBoundingClientRect()
     const viewOffset = width / 2
@@ -52,7 +52,10 @@ export function drawCanvas(
     const startOfDay = shiftedNow.clone().startOf("day")
     const endOfDay = shiftedNow.clone().endOf("day")
 
+    // (now - startOfDay) in seconds
     const startDayX = Math.min(options.maxAge, now.diff(startOfDay, "second"))
+
+    // (now - endOfDay) in seconds
     const endDayX = Math.max(0, now.diff(endOfDay, "second"))
 
     // invert direction, as we want to line to act as a timeline
diff --git a/src/components/Scrobber/ScrobberTimeline.styled.ts b/src/components/Scrobber/ScrobberTimeline.styled.ts
index cd36f88..5318ea5 100644
--- a/src/components/Scrobber/ScrobberTimeline.styled.ts
+++ b/src/components/Scrobber/ScrobberTimeline.styled.ts
@@ -1,36 +1,5 @@
 import styled from "@emotion/styled"
-
-export const STimeOffset = styled.div`
-  background: #3b4252;
-  height: 2.5em;
-  border-radius: 1.25em 0 0 1.25em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 calc(1em + 1.25em) 0 1em;
-  text-align: center;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-`
-
-export const SLive = styled.span`
-  text-transform: uppercase;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:before {
-    content: "";
-    display: block;
-    margin-right: 0.75em;
-    width: 8px;
-    height: 8px;
-    margin-top: 1px;
-
-    background: #eb5757;
-    border-radius: 100%;
-  }
-`
+import { theme } from "utils/theme"
 
 export const STimeline = styled.div`
   position: absolute;
@@ -42,18 +11,16 @@ export const STimeline = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(rgba(10, 10, 10, 0), rgba(10, 10, 10, 1));
+  background: ${theme.gradients.bottom};
 `
 
 export const SCenter = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #d8dee9;
-  background: #434c5e;
-  box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.019),
-    0 8.7px 6.9px rgba(0, 0, 0, 0.027), 0 17.7px 14.2px rgba(0, 0, 0, 0.033),
-    0 36.5px 29.2px rgba(0, 0, 0, 0.041), 0 100px 80px rgba(0, 0, 0, 0.06);
+  color: ${theme.colors.lightBlue900};
+  background: ${theme.colors.blue500};
+  box-shadow: ${theme.shadows.md};
 
   padding: 0.8em;
   border-radius: 2.25em;
@@ -66,7 +33,7 @@ export const SCenter = styled.div`
     border: 1.25em solid transparent;
     border-left-width: 0.8em;
     border-right-width: 0.8em;
-    border-top-color: #434c5e;
+    border-top-color: ${theme.colors.blue500};
     border-bottom-width: 0;
     position: absolute;
     top: 100%;
diff --git a/src/components/Scrobber/ScrobberTimeline.tsx b/src/components/Scrobber/ScrobberTimeline.tsx
index f98c66a..cd0196a 100644
--- a/src/components/Scrobber/ScrobberTimeline.tsx
+++ b/src/components/Scrobber/ScrobberTimeline.tsx
@@ -1,15 +1,10 @@
 import { useContext, useState } from "react"
 import { ScrobberSlider } from "components/Scrobber/ScrobberSlider"
-import { formatTime, vibrateDecorator } from "./Scrobber.utils"
+import { vibrateDecorator } from "./Scrobber.utils"
 import { ConfigContext } from "shared/config"
-import { ScrobberTimelineTimePicker } from "components/Scrobber/ScrobberTimelineTimePicker"
-import { ScrobberTimelineDatePicker } from "components/Scrobber/ScrobberTimelineDatePicker"
-import {
-  SCenter,
-  SLive,
-  STimeline,
-  STimeOffset,
-} from "./ScrobberTimeline.styled"
+import { ScrobberTimelineShift } from "components/Scrobber/ScrobberTimelineShift"
+import { SCenter, STimeline } from "./ScrobberTimeline.styled"
+import { ScrobberTimelineRange } from "./ScrobberTimelineRange"
 
 export function ScrobberTimeline(props: {
   color: string
@@ -18,33 +13,24 @@ export function ScrobberTimeline(props: {
   onMove: () => void
 }) {
   const config = useContext(ConfigContext)
+
   const [scrollShift, setScrollShift] = useState<number | null>(null)
-  const onShiftCommit = vibrateDecorator((shift: number) => {
+  const onShiftChange = vibrateDecorator((shift: number) => {
     setScrollShift(null)
     props.onChange(Math.max(0, Math.min(config.maxAge * 1000, shift)))
   })
 
-  const contentShift = scrollShift != null ? scrollShift : props.value
-
   return (
     <>
       <STimeline>
         <SCenter>
-          <div css={{ display: "flex" }}>
-            <STimeOffset onClick={() => onShiftCommit(0)}>
-              {!contentShift ? <SLive>Živě</SLive> : formatTime(-contentShift)}
-            </STimeOffset>
-
-            <ScrobberTimelineTimePicker
-              value={contentShift}
-              onChange={onShiftCommit}
-              css={{ marginLeft: "-1.25em", padding: "0rem 3em" }}
-            />
-          </div>
-          <ScrobberTimelineDatePicker
-            value={contentShift}
-            onChange={onShiftCommit}
+          <ScrobberTimelineShift
+            value={props.value}
+            intentValue={scrollShift}
+            onChange={onShiftChange}
           />
+
+          <ScrobberTimelineRange />
         </SCenter>
       </STimeline>
       <ScrobberSlider
@@ -52,7 +38,7 @@ export function ScrobberTimeline(props: {
           setScrollShift(value)
           props.onMove()
         }}
-        onScrollEnd={onShiftCommit}
+        onScrollEnd={onShiftChange}
         value={props.value}
         color={props.color}
       />
diff --git a/src/components/Scrobber/ScrobberTimelineDatePicker.tsx b/src/components/Scrobber/ScrobberTimelineDatePicker.tsx
deleted file mode 100644
index 8c63393..0000000
--- a/src/components/Scrobber/ScrobberTimelineDatePicker.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useState } from "react"
-import moment, { Moment } from "moment"
-import { useTimer } from "./Scrobber.utils"
-import { MobileDatePicker, LocalizationProvider } from "@material-ui/lab"
-import AdapterMoment from "@material-ui/lab/AdapterMoment"
-import { SPill, SPillInput } from "./ScrobberTimelineDatePicker.styled"
-
-export function ScrobberTimelineDatePicker(props: {
-  onChange?: (shift: number) => void
-  value: number
-  className?: string
-}) {
-  const current = useTimer()
-  const [inputDate, setInputDate] = useState<Moment | null>(null)
-  const activeDate = moment(new Date(current - props.value))
-
-  return (
-    <LocalizationProvider dateAdapter={AdapterMoment} locale="cs">
-      <SPill className={props.className}>
-        <MobileDatePicker
-          value={inputDate}
-          onChange={setInputDate}
-          onAccept={(date) => {
-            props.onChange?.(
-              moment().diff(
-                activeDate.clone().set({
-                  year: date?.year(),
-                  month: date?.month(),
-                  date: date?.date(),
-                })
-              )
-            )
-          }}
-          onOpen={() => setInputDate(activeDate.clone())}
-          renderInput={({ inputProps, inputRef }) => (
-            <SPillInput {...inputProps} ref={inputRef} />
-          )}
-          cancelText="Zrušit"
-          todayText="Dnes"
-          toolbarTitle="Vybrat datum"
-        />
-        <span css={{ fontSize: "1em" }}>
-          {activeDate.format("DD. MMMM YYYY")}
-        </span>
-      </SPill>
-    </LocalizationProvider>
-  )
-}
diff --git a/src/components/Scrobber/ScrobberTimelineRange.tsx b/src/components/Scrobber/ScrobberTimelineRange.tsx
new file mode 100644
index 0000000..1023f9b
--- /dev/null
+++ b/src/components/Scrobber/ScrobberTimelineRange.tsx
@@ -0,0 +1,60 @@
+import { useState } from "react"
+import { css } from "@emotion/react"
+import { LocalizationProvider, MobileDateTimePicker } from "@material-ui/lab"
+import AdapterMoment from "@material-ui/lab/AdapterMoment"
+import moment from "moment"
+import { Pill, PillInput } from "components/PillInput/PillInput"
+
+function ScrobberTimelineRangeDateTime(props: {
+  value: moment.Moment | null
+  minDateTime?: moment.Moment | null
+  maxDateTime?: moment.Moment | null
+  onChange: (date: moment.Moment | null) => void
+}) {
+  return (
+    <Pill>
+      <LocalizationProvider dateAdapter={AdapterMoment}>
+        <MobileDateTimePicker
+          ampm={false}
+          value={props.value}
+          onChange={props.onChange}
+          renderInput={({ inputProps, inputRef }) => (
+            <PillInput {...inputProps} ref={inputRef} />
+          )}
+          minDateTime={props.minDateTime ?? undefined}
+          maxDateTime={props.maxDateTime ?? undefined}
+          cancelText="Zrušit"
+          todayText="Dnes"
+          toolbarTitle="Vybrat čas"
+        />
+      </LocalizationProvider>
+      <span css={{ fontSize: "1em" }}>
+        {props.value?.format("DD. MMMM YYYY HH:mm:ss") ?? "---"}
+      </span>
+    </Pill>
+  )
+}
+
+export function ScrobberTimelineRange() {
+  const [from, setFrom] = useState<moment.Moment | null>(null)
+  const [to, setTo] = useState<moment.Moment | null>(null)
+  return (
+    <div
+      css={css`
+        display: flex;
+        gap: 8px;
+      `}
+    >
+      <ScrobberTimelineRangeDateTime
+        value={from}
+        onChange={setFrom}
+        maxDateTime={to}
+      />
+      <ScrobberTimelineRangeDateTime
+        value={to}
+        onChange={setTo}
+        minDateTime={from}
+      />
+    </div>
+  )
+}
diff --git a/src/components/Scrobber/ScrobberTimelineShift.styled.ts b/src/components/Scrobber/ScrobberTimelineShift.styled.ts
new file mode 100644
index 0000000..02ad573
--- /dev/null
+++ b/src/components/Scrobber/ScrobberTimelineShift.styled.ts
@@ -0,0 +1,34 @@
+import styled from "@emotion/styled"
+import { theme } from "utils/theme"
+
+export const STimeOffset = styled.div`
+  background: ${theme.colors.blue400};
+  height: 2.5em;
+  border-radius: 1.25em 0 0 1.25em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 calc(1em + 1.25em) 0 1em;
+  text-align: center;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+`
+
+export const SLive = styled.span`
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:before {
+    content: "";
+    display: block;
+    margin-right: 0.75em;
+    width: 8px;
+    height: 8px;
+    margin-top: 1px;
+
+    background: ${theme.colors.red500};
+    border-radius: 100%;
+  }
+`
diff --git a/src/components/Scrobber/ScrobberTimelineShift.tsx b/src/components/Scrobber/ScrobberTimelineShift.tsx
new file mode 100644
index 0000000..19b2064
--- /dev/null
+++ b/src/components/Scrobber/ScrobberTimelineShift.tsx
@@ -0,0 +1,128 @@
+import { useState } from "react"
+import moment, { Moment } from "moment"
+import { formatTime, useTimer } from "./Scrobber.utils"
+import {
+  MobileDatePicker,
+  LocalizationProvider,
+  MobileTimePicker,
+} from "@material-ui/lab"
+import AdapterMoment from "@material-ui/lab/AdapterMoment"
+import { Pill, PillInput } from "components/PillInput/PillInput"
+import { STimeOffset, SLive } from "./ScrobberTimelineShift.styled"
+import { useServerTimeDiff } from "./ScrobberTimelineShift.utils"
+
+function ScrobberTimelineShiftTime(props: {
+  onChange?: (shift: number) => void
+  value: number
+  className?: string
+}) {
+  const current = useTimer()
+  const serverDiff = useServerTimeDiff()
+  const [inputDate, setInputDate] = useState<Moment | null>(null)
+  const activeDate = moment(new Date(current - props.value + serverDiff))
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <Pill className={props.className}>
+        <MobileTimePicker
+          ampm={false}
+          value={inputDate}
+          onChange={setInputDate}
+          onAccept={(date) => {
+            props.onChange?.(
+              moment().diff(
+                activeDate.clone().set({
+                  hour: date?.hour(),
+                  minute: date?.minute(),
+                })
+              )
+            )
+          }}
+          onOpen={() => setInputDate(activeDate.clone())}
+          renderInput={({ inputProps, inputRef }) => (
+            <PillInput {...inputProps} ref={inputRef} />
+          )}
+          cancelText="Zrušit"
+          todayText="Dnes"
+          toolbarTitle="Vybrat čas"
+        />
+
+        <span css={{ fontSize: "1.25em" }}>
+          {activeDate.format("HH:mm:ss")}
+        </span>
+      </Pill>
+    </LocalizationProvider>
+  )
+}
+
+function ScrobberTimelineShiftDate(props: {
+  onChange?: (shift: number) => void
+  value: number
+  className?: string
+}) {
+  const current = useTimer()
+  const [inputDate, setInputDate] = useState<Moment | null>(null)
+  const activeDate = moment(new Date(current - props.value))
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment} locale="cs">
+      <Pill className={props.className}>
+        <MobileDatePicker
+          value={inputDate}
+          onChange={setInputDate}
+          onAccept={(date) => {
+            props.onChange?.(
+              moment().diff(
+                activeDate.clone().set({
+                  year: date?.year(),
+                  month: date?.month(),
+                  date: date?.date(),
+                })
+              )
+            )
+          }}
+          onOpen={() => setInputDate(activeDate.clone())}
+          renderInput={({ inputProps, inputRef }) => (
+            <PillInput {...inputProps} ref={inputRef} />
+          )}
+          cancelText="Zrušit"
+          todayText="Dnes"
+          toolbarTitle="Vybrat datum"
+        />
+        <span css={{ fontSize: "1em" }}>
+          {activeDate.format("DD. MMMM YYYY")}
+        </span>
+      </Pill>
+    </LocalizationProvider>
+  )
+}
+
+export function ScrobberTimelineShift(props: {
+  value: number
+  intentValue: number | null
+  onChange: (value: number) => void
+}) {
+  const contentValue =
+    props.intentValue != null ? props.intentValue : props.value
+
+  return (
+    <>
+      <div css={{ display: "flex" }}>
+        <STimeOffset onClick={() => props.onChange(0)}>
+          {!contentValue ? <SLive>Živě</SLive> : formatTime(-contentValue)}
+        </STimeOffset>
+
+        <ScrobberTimelineShiftTime
+          value={contentValue}
+          onChange={props.onChange}
+          css={{ marginLeft: "-1.25em", padding: "0rem 3em" }}
+        />
+      </div>
+
+      <ScrobberTimelineShiftDate
+        value={contentValue}
+        onChange={props.onChange}
+      />
+    </>
+  )
+}
diff --git a/src/components/Scrobber/ScrobberTimelineShift.utils.ts b/src/components/Scrobber/ScrobberTimelineShift.utils.ts
new file mode 100644
index 0000000..92823ea
--- /dev/null
+++ b/src/components/Scrobber/ScrobberTimelineShift.utils.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react"
+
+async function getServerTimeDiff() {
+  const clientStart = Date.now(),
+    timeBefore = performance.now()
+  const serverReq = await fetch("/api/time")
+  const timeAfter = performance.now()
+
+  const roundTripTime = timeAfter - timeBefore
+  const incomingTripTime = roundTripTime / 2
+  const serverTime = (await serverReq.json()).time - incomingTripTime
+
+  return serverTime - clientStart
+}
+
+export function useServerTimeDiff() {
+  const [serverTimeDiff, setServerTimeDiff] = useState(0)
+  useEffect(() => {
+    getServerTimeDiff().then((diff) => setServerTimeDiff(diff))
+  }, [])
+
+  return serverTimeDiff
+}
diff --git a/src/components/Scrobber/ScrobberTimelineTimePicker.styled.ts b/src/components/Scrobber/ScrobberTimelineTimePicker.styled.ts
deleted file mode 100644
index a263696..0000000
--- a/src/components/Scrobber/ScrobberTimelineTimePicker.styled.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import styled from "@emotion/styled"
-
-export const SPill = styled.div`
-  position: relative;
-  background: #545f75;
-  height: 2.5em;
-  padding: 0rem 3em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.019),
-    0 8.7px 6.9px rgba(0, 0, 0, 0.027), 0 17.7px 14.2px rgba(0, 0, 0, 0.033),
-    0 36.5px 29.2px rgba(0, 0, 0, 0.041), 0 100px 80px rgba(0, 0, 0, 0.06);
-
-  border-radius: 1.25em;
-  text-align: center;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-  transition: background 0.3s;
-
-  @media (max-width: 768px) {
-    padding: 0 1em;
-  }
-
-  &:focus-within {
-    background: #687590;
-  }
-`
-
-export const SPillInput = styled.input`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 100%;
-  width: 100%;
-  height: 30px;
-  background: white;
-  border: none;
-  box-sizing: border-box;
-  text-align: center;
-
-  background: none;
-  color: none;
-  opacity: 0;
-  margin-top: 0;
-  bottom: 0;
-  height: 100%;
-
-  cursor: pointer;
-  outline: none;
-`
diff --git a/src/components/Scrobber/ScrobberTimelineTimePicker.tsx b/src/components/Scrobber/ScrobberTimelineTimePicker.tsx
deleted file mode 100644
index b90bfee..0000000
--- a/src/components/Scrobber/ScrobberTimelineTimePicker.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useEffect, useState } from "react"
-import moment, { Moment } from "moment"
-import { useTimer } from "./Scrobber.utils"
-import { LocalizationProvider, MobileTimePicker } from "@material-ui/lab"
-import AdapterMoment from "@material-ui/lab/AdapterMoment"
-import { SPill, SPillInput } from "./ScrobberTimelineTimePicker.styled"
-
-async function getServerTimeDiff() {
-  const clientStart = Date.now(),
-    timeBefore = performance.now()
-  const serverReq = await fetch("/api/time")
-  const timeAfter = performance.now()
-
-  const roundTripTime = timeAfter - timeBefore
-  const incomingTripTime = roundTripTime / 2
-  const serverTime = (await serverReq.json()).time - incomingTripTime
-
-  return serverTime - clientStart
-}
-function useServerTimeDiff() {
-  const [serverTimeDiff, setServerTimeDiff] = useState(0)
-  useEffect(() => {
-    getServerTimeDiff().then((diff) => setServerTimeDiff(diff))
-  }, [])
-
-  return serverTimeDiff
-}
-
-export function ScrobberTimelineTimePicker(props: {
-  onChange?: (shift: number) => void
-  value: number
-  className?: string
-}) {
-  const current = useTimer()
-  const serverDiff = useServerTimeDiff()
-  const [inputDate, setInputDate] = useState<Moment | null>(null)
-  const activeDate = moment(new Date(current - props.value + serverDiff))
-
-  return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <SPill className={props.className}>
-        <MobileTimePicker
-          ampm={false}
-          value={inputDate}
-          onChange={setInputDate}
-          onAccept={(date) => {
-            props.onChange?.(
-              moment().diff(
-                activeDate.clone().set({
-                  hour: date?.hour(),
-                  minute: date?.minute(),
-                })
-              )
-            )
-          }}
-          onOpen={() => setInputDate(activeDate.clone())}
-          renderInput={({ inputProps, inputRef }) => (
-            <SPillInput {...inputProps} ref={inputRef} />
-          )}
-          cancelText="Zrušit"
-          todayText="Dnes"
-          toolbarTitle="Vybrat čas"
-        />
-
-        <span css={{ fontSize: "1.25em" }}>
-          {activeDate.format("HH:mm:ss")}
-        </span>
-      </SPill>
-    </LocalizationProvider>
-  )
-}
diff --git a/src/pages/camera/[cameraKey].tsx b/src/pages/camera/[cameraKey].tsx
index cbf83fe..c97dc5f 100644
--- a/src/pages/camera/[cameraKey].tsx
+++ b/src/pages/camera/[cameraKey].tsx
@@ -11,6 +11,7 @@ import { encodeQuery } from "utils/query"
 import Head from "next/head"
 import { GetServerSideProps } from "next"
 import { loadServerConfig } from "shared/config"
+import { theme } from "utils/theme"
 
 function generateUrl(
   name: string,
@@ -58,7 +59,7 @@ export default function Page() {
       <Global
         styles={css`
           html {
-            background: #090909;
+            background: ${theme.colors.gray100};
           }
         `}
       />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2c78537..db1af1a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -7,6 +7,7 @@ import { useRouter } from "next/router"
 import Head from "next/head"
 import { GetServerSideProps } from "next"
 import { loadServerConfig } from "shared/config"
+import { theme } from "utils/theme"
 
 export default function Page() {
   const router = useRouter()
@@ -19,7 +20,7 @@ export default function Page() {
   return (
     <Fragment>
       <Head>
-        <meta name="theme-color" content="#d8dee9" />
+        <meta name="theme-color" content="#434c5e" />
         <meta
           name="apple-mobile-web-app-status-bar-style"
           content="black-translucent"
@@ -28,7 +29,7 @@ export default function Page() {
       <Global
         styles={css`
           html {
-            background-color: #434c5e;
+            background-color: ${theme.colors.blue500};
           }
         `}
       />
@@ -64,11 +65,7 @@ export default function Page() {
                   overflow: hidden;
                   transition: all 0.2s;
 
-                  box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.019),
-                    0 8.7px 6.9px rgba(0, 0, 0, 0.027),
-                    0 17.7px 14.2px rgba(0, 0, 0, 0.033),
-                    0 36.5px 29.2px rgba(0, 0, 0, 0.041),
-                    0 100px 80px rgba(0, 0, 0, 0.06);
+                  box-shadow: ${theme.shadows.md};
 
                   @media (hover: hover) {
                     &:hover {
@@ -128,7 +125,7 @@ export default function Page() {
                         display: flex;
                         align-items: center;
                         margin: 0;
-                        color: #fff;
+                        color: ${theme.colors.white};
                         text-decoration: none;
                       `}
                     >
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
new file mode 100644
index 0000000..00ab444
--- /dev/null
+++ b/src/utils/theme.ts
@@ -0,0 +1,20 @@
+export const theme = {
+  colors: {
+    blue400: "#3b4252",
+    blue500: "#434c5e",
+    blue600: "#545f75",
+    blue700: "#687590",
+    lightBlue900: "#d8dee9",
+    red500: "#eb5757",
+    gray100: "#090909",
+    white: "#fff",
+  },
+  gradients: {
+    top: "linear-gradient(rgba(10, 10, 10, 1), rgba(10, 10, 10, 0))",
+    bottom: "linear-gradient(rgba(10, 10, 10, 0), rgba(10, 10, 10, 1))",
+  },
+  shadows: {
+    sm: "0px 4px 10px rgba(0, 0, 0, 0.3)",
+    md: "0 3.4px 2.7px rgba(0, 0, 0, 0.019), 0 8.7px 6.9px rgba(0, 0, 0, 0.027), 0 17.7px 14.2px rgba(0, 0, 0, 0.033), 0 36.5px 29.2px rgba(0, 0, 0, 0.041), 0 100px 80px rgba(0, 0, 0, 0.06)",
+  },
+} as const