diff --git a/src/widgets/space-chrome/ui/SpaceChromeWidget.tsx b/src/widgets/space-chrome/ui/SpaceChromeWidget.tsx
index 034a788..c5c6a03 100644
--- a/src/widgets/space-chrome/ui/SpaceChromeWidget.tsx
+++ b/src/widgets/space-chrome/ui/SpaceChromeWidget.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { cn } from '@/shared/lib/cn';
 
 interface SpaceChromeWidgetProps {
   roomName: string;
@@ -13,23 +12,22 @@ export const SpaceChromeWidget = ({
   isImmersionMode,
 }: SpaceChromeWidgetProps) => {
   return (
-    <div className="px-4 pt-3 sm:px-6">
-      <header className="flex items-center justify-between rounded-xl border border-white/12 bg-slate-950/35 px-4 py-3 backdrop-blur-lg">
+    <div className="px-4 pt-2 sm:px-6">
+      <header className="flex items-center justify-between px-1 py-1">
         <div className="flex items-center gap-2">
-          <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/30 bg-white/10 text-xs font-semibold">
+          <span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-white/12 text-[11px] font-semibold text-white/90">
             V
           </span>
-          <p className="text-sm font-semibold tracking-tight">VibeRoom</p>
+          <p className="text-sm font-medium tracking-tight text-white/90">VibeRoom</p>
         </div>
 
         <Link
           href="/app"
-          className={cn(
-            'rounded-lg border border-white/30 text-white/85 transition hover:bg-white/10',
+          className={
             isImmersionMode
-              ? 'inline-flex h-7 w-7 items-center justify-center text-[11px]'
-              : 'px-3 py-1.5 text-xs',
-          )}
+              ? 'inline-flex h-7 w-7 items-center justify-center rounded-md bg-white/8 text-[11px] text-white/74 transition hover:bg-white/14 hover:text-white'
+              : 'rounded-lg bg-white/8 px-2.5 py-1.5 text-xs text-white/82 transition hover:bg-white/14 hover:text-white'
+          }
         >
           {isImmersionMode ? (
             <>
@@ -43,7 +41,7 @@ export const SpaceChromeWidget = ({
       </header>
 
       {!isImmersionMode ? (
-        <div className="mx-auto mt-6 w-full max-w-5xl">
+        <div className="mx-auto mt-4 w-full max-w-5xl">
           <div className="space-y-1">
             <p className="text-xs uppercase tracking-[0.14em] text-white/65">Current Room</p>
             <p className="text-lg font-semibold text-white">{roomName}</p>
diff --git a/src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx b/src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
index 5f57585..eed6a53 100644
--- a/src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
+++ b/src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
@@ -21,7 +21,13 @@ export const SpaceTimerHudWidget = ({
   isImmersionMode = false,
 }: SpaceTimerHudWidgetProps) => {
   return (
-    <div className={cn('pointer-events-none fixed inset-x-0 bottom-[4.7rem] z-20 px-4 pr-16 sm:px-6', className)}>
+    <div
+      className={cn(
+        'pointer-events-none fixed inset-x-0 z-20 px-4 pr-16 sm:px-6',
+        className,
+      )}
+      style={{ bottom: 'calc(env(safe-area-inset-bottom, 0px) + 0.35rem)' }}
+    >
       <div className="mx-auto w-full max-w-xl pointer-events-auto">
         <section
           className={cn(