diff --git a/frontend/app/components/Session_/Player/Controls/components/PlayingTime.tsx b/frontend/app/components/Session_/Player/Controls/components/PlayingTime.tsx
index ef00a02d5..1e1e4daad 100644
--- a/frontend/app/components/Session_/Player/Controls/components/PlayingTime.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/PlayingTime.tsx
@@ -1,12 +1,17 @@
-import React from 'react';
 import { DownOutlined } from '@ant-design/icons';
-import { Popover } from 'UI';
-import { ITimeMode, TimeMode } from 'Components/Session_/Player/Controls/components/PlayerControls';
+import { Button } from 'antd';
+import React from 'react';
+
 import {
   RealReplayTimeConnected,
-  ReduxTime,
   RealUserReplayTimeConnected,
+  ReduxTime,
 } from 'Components/Session_/Player/Controls/Time';
+import {
+  ITimeMode,
+  TimeMode,
+} from 'Components/Session_/Player/Controls/components/PlayerControls';
+import { Popover } from 'UI';
 
 interface Props {
   timeMode: ITimeMode;
@@ -17,78 +22,107 @@ interface Props {
 
 function PlayingTime({ timeMode, setTimeMode, startedAt, sessionTz }: Props) {
   return (
-    <div className={'flex items-center gap-2'}>
-      <div className="flex items-center font-semibold text-center" style={{ minWidth: 85 }}>
-        {timeMode === TimeMode.Real ? (
-          <RealReplayTimeConnected startedAt={startedAt} />
-        ) : timeMode === TimeMode.UserReal ? (
-          <RealUserReplayTimeConnected startedAt={startedAt} sessionTz={sessionTz} />
-        ) : (
-          <>
-            <ReduxTime isCustom name="time" format="mm:ss" />
-            <span className="px-1">/</span>
-            <ReduxTime isCustom name="endTime" format="mm:ss" />
-          </>
-        )}
-      </div>
-      <Popover
-        // @ts-ignore
-        theme="nopadding"
-        animation="none"
-        duration={0}
-        className="cursor-pointer select-none"
-        distance={20}
-        render={({ close }) => (
-          <div className={'flex flex-col gap-2 bg-white py-2 rounded color-gray-darkest text-left'}>
-            <div className={'font-semibold px-4 cursor-default'}>Playback Time Mode</div>
-            <div className={'flex flex-col cursor-pointer hover:bg-active-blue w-full px-4'}>
-              <div className={'text-sm text-disabled-text text-left'}>
-                Current / Session Duration
-              </div>
-              <div
-                className={'flex items-center text-left'}
-                onClick={() => {
-                  setTimeMode(TimeMode.Timestamp);
-                  close();
-                }}
-              >
-                <ReduxTime isCustom name="time" format="mm:ss" />
-                <span className="px-1">/</span>
-                <ReduxTime isCustom name="endTime" format="mm:ss" />
-              </div>
+    <Popover
+      // @ts-ignore
+      theme="nopadding"
+      animation="none"
+      duration={0}
+      className="cursor-pointer select-none"
+      distance={20}
+      render={({ close }) => (
+        <div
+          className={
+            'flex flex-col gap-2 bg-white py-2 rounded color-gray-darkest text-left'
+          }
+        >
+          <div className={'font-semibold px-4 cursor-default'}>
+            Playback Time Mode
+          </div>
+          <div
+            className={
+              'flex flex-col cursor-pointer hover:bg-active-blue w-full px-4'
+            }
+          >
+            <div className={'text-sm text-disabled-text text-left'}>
+              Current / Session Duration
             </div>
-            {sessionTz ? (
-              <div
-                className={'flex flex-col cursor-pointer hover:bg-active-blue w-full px-4'}
-                onClick={() => {
-                  setTimeMode(TimeMode.UserReal);
-                  close();
-                }}
-              >
-                <div className={'text-sm text-disabled-text text-left'}>User's time</div>
-                <div className={'text-left'}>
-                  <RealUserReplayTimeConnected startedAt={startedAt} sessionTz={sessionTz} />
-                </div>
-              </div>
-            ) : null}
             <div
-              className={'flex flex-col cursor-pointer hover:bg-active-blue w-full px-4'}
+              className={'flex items-center text-left'}
               onClick={() => {
-                setTimeMode(TimeMode.Real);
+                setTimeMode(TimeMode.Timestamp);
                 close();
               }}
             >
-              <div className={'text-sm text-disabled-text text-left'}>Based on your settings</div>
-              <div className={'text-left'}>
-                <RealReplayTimeConnected startedAt={startedAt} />
-              </div>
+              <ReduxTime isCustom name="time" format="mm:ss" />
+              <span className="px-1">/</span>
+              <ReduxTime isCustom name="endTime" format="mm:ss" />
             </div>
           </div>
-        )}
-      >
-        <DownOutlined />
-      </Popover>
-    </div>
+          {sessionTz ? (
+            <div
+              className={
+                'flex flex-col cursor-pointer hover:bg-active-blue w-full px-4'
+              }
+              onClick={() => {
+                setTimeMode(TimeMode.UserReal);
+                close();
+              }}
+            >
+              <div className={'text-sm text-disabled-text text-left'}>
+                User's time
+              </div>
+              <div className={'text-left'}>
+                <RealUserReplayTimeConnected
+                  startedAt={startedAt}
+                  sessionTz={sessionTz}
+                />
+              </div>
+            </div>
+          ) : null}
+          <div
+            className={
+              'flex flex-col cursor-pointer hover:bg-active-blue w-full px-4'
+            }
+            onClick={() => {
+              setTimeMode(TimeMode.Real);
+              close();
+            }}
+          >
+            <div className={'text-sm text-disabled-text text-left'}>
+              Based on your settings
+            </div>
+            <div className={'text-left'}>
+              <RealReplayTimeConnected startedAt={startedAt} />
+            </div>
+          </div>
+        </div>
+      )}
+    >
+      <Button type={'text'}>
+        <div className={'flex items-center gap-2'}>
+          <div
+            className="flex items-center font-semibold text-center"
+            style={{ minWidth: 85 }}
+          >
+            {timeMode === TimeMode.Real ? (
+              <RealReplayTimeConnected startedAt={startedAt} />
+            ) : timeMode === TimeMode.UserReal ? (
+              <RealUserReplayTimeConnected
+                startedAt={startedAt}
+                sessionTz={sessionTz}
+              />
+            ) : (
+              <>
+                <ReduxTime isCustom name="time" format="mm:ss" />
+                <span className="px-1">/</span>
+                <ReduxTime isCustom name="endTime" format="mm:ss" />
+              </>
+            )}
+          </div>
+          <DownOutlined />
+        </div>
+      </Button>
+    </Popover>
   );
 }