diff --git a/ConfigureSheet.xib b/ConfigureSheet.xib
index d161447..5bed4e8 100644
--- a/ConfigureSheet.xib
+++ b/ConfigureSheet.xib
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="13771" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct">
+<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="21507" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct">
     <dependencies>
         <deployment identifier="macosx"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="13771"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="21507"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -18,7 +18,7 @@
             <windowStyleMask key="styleMask" titled="YES" closable="YES"/>
             <windowPositionMask key="initialPositionMask" leftStrut="YES" rightStrut="YES" topStrut="YES" bottomStrut="YES"/>
             <rect key="contentRect" x="196" y="240" width="320" height="102"/>
-            <rect key="screenRect" x="0.0" y="0.0" width="2560" height="1418"/>
+            <rect key="screenRect" x="0.0" y="0.0" width="3440" height="1415"/>
             <view key="contentView" wantsLayer="YES" id="EiT-Mj-1SZ">
                 <rect key="frame" x="0.0" y="0.0" width="320" height="102"/>
                 <autoresizingMask key="autoresizingMask"/>
@@ -77,7 +77,7 @@ Gw
                     </button>
                 </subviews>
             </view>
-            <point key="canvasLocation" x="34" y="50"/>
+            <point key="canvasLocation" x="126" y="23"/>
         </window>
     </objects>
 </document>
diff --git a/EpochFlipClock.m b/EpochFlipClock.m
index e77ea32..daef112 100755
--- a/EpochFlipClock.m
+++ b/EpochFlipClock.m
@@ -19,9 +19,11 @@ static NSString * const epochFlipClockModule = @"com.epochflipclock";
     // Webview
     NSURL* indexHTMLDocumentURL = [NSURL URLWithString:[[[NSURL fileURLWithPath:[[NSBundle bundleForClass:self.class].resourcePath stringByAppendingString:@"/Webview/index.html"] isDirectory:NO] description] stringByAppendingFormat:@"?screensaver=1%@", self.isPreview ? @"&is_preview=1" : @""]];
 
-    WebView* webView = [[WebView alloc] initWithFrame:NSMakeRect(0, 0, frame.size.width, frame.size.height)];
-    webView.drawsBackground = NO; // Avoids a "white flash" just before the index.html file has loaded
-    [webView.mainFrame loadRequest:[NSURLRequest requestWithURL:indexHTMLDocumentURL cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:30.0]];
+    WKWebView* webView = [[WKWebView alloc] initWithFrame:NSMakeRect(0, 0, frame.size.width, frame.size.height)];
+    NSColor *color = [NSColor colorWithCalibratedWhite:0.0 alpha:1.0];
+    [[webView layer] setBackgroundColor:color.CGColor]; // hacky af but it works,
+    [webView setValue:@(YES) forKey:@"drawsTransparentBackground"]; // prevents a white flash while loading the web view
+    [webView loadRequest:[NSURLRequest requestWithURL:indexHTMLDocumentURL cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:30.0]];
     
     // Show on screens based on preferences
     NSArray* screens = [NSScreen screens];
@@ -68,9 +70,11 @@ static NSString * const epochFlipClockModule = @"com.epochflipclock";
     ScreenSaverDefaults *defaults;
     defaults = [ScreenSaverDefaults defaultsForModuleWithName:epochFlipClockModule];
     
+    NSBundle* bundle = [NSBundle bundleForClass:[self class]];
+    
     if (!configSheet)
     {
-        if (![NSBundle loadNibNamed:@"ConfigureSheet" owner:self])
+        if (![bundle loadNibNamed:@"ConfigureSheet" owner:self topLevelObjects:nil])
         {
             NSLog( @"Failed to load configure sheet." );
         }
@@ -104,7 +108,7 @@ static NSString * const epochFlipClockModule = @"com.epochflipclock";
 
 #pragma mark - WebFrameLoadDelegate
 
-- (void)webView:(WebView *)sender didFailLoadWithError:(NSError *)error forFrame:(WebFrame *)frame {
+- (void)webView:(WKWebView *)sender didFailLoadWithError:(NSError *)error {
     NSLog(@"%@ error=%@", NSStringFromSelector(_cmd), error);
 }
 
diff --git a/Webview/index.css b/Webview/index.css
index 0afa745..7811e01 100644
--- a/Webview/index.css
+++ b/Webview/index.css
@@ -3,16 +3,32 @@ html, body {
   height: 100%;
 }
 
-body {
-  display: flex;
-  margin: 0;
-  padding: 0;
-  font-family: '-apple-system', sans-serif;
-  align-items: center;
-  justify-content: center;
-  background-color: black;
-  perspective: 100vw;
-  -webkit-text-smoothing: anti-aliased;
+@media (prefers-color-scheme: dark) {
+    body {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        font-family: '-apple-system', sans-serif;
+        align-items: center;
+        justify-content: center;
+        background-color: black;
+        perspective: 100vw;
+        -webkit-text-smoothing: anti-aliased;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    body {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        font-family: '-apple-system', sans-serif;
+        align-items: center;
+        justify-content: center;
+        background-color: white;
+        perspective: 100vw;
+        -webkit-text-smoothing: anti-aliased;
+    }
 }
 
 digit {
@@ -25,23 +41,46 @@ digit {
 
 /* Flip Flaps
 ------------------------------------------------*/
-flap-top,
-flap-top-flip,
-flap-bottom,
-flap-bottom-flip {
-  box-sizing: border-box;
-  position: absolute;
-  display: flex;
-  width: 100%;
-  height: 50%;
-  left: 0;
-  justify-content: center;
-  overflow: hidden;
-  color: #e1e1e1;
-  background-color: rgb(12,12,12);
-  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04);
-  -webkit-backface-visibility: hidden;
+@media (prefers-color-scheme: dark) {
+    flap-top,
+    flap-top-flip,
+    flap-bottom,
+    flap-bottom-flip {
+      box-sizing: border-box;
+      position: absolute;
+      display: flex;
+      width: 100%;
+      height: 50%;
+      left: 0;
+      justify-content: center;
+      overflow: hidden;
+      color: #e1e1e1;
+      background-color: rgb(12,12,12);
+      box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04);
+      -webkit-backface-visibility: hidden;
+    }
 }
+
+@media (prefers-color-scheme: light) {
+    flap-top,
+    flap-top-flip,
+    flap-bottom,
+    flap-bottom-flip {
+      box-sizing: border-box;
+      position: absolute;
+      display: flex;
+      width: 100%;
+      height: 50%;
+      left: 0;
+      justify-content: center;
+      overflow: hidden;
+      color: #323232;
+      background-color: rgb(200,200,200);
+      box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.04);
+      -webkit-backface-visibility: hidden;
+    }
+}
+
 flap-top,
 flap-top-flip {
   top: 0;
@@ -129,69 +168,140 @@ n {
 
 /* Animations
 ------------------------------------------------*/
-@keyframes flip-top-down {
-  0% {
-    transform: rotateX(0);
-  }
-  100% {
-    transform: rotateX(-90deg);
-    color: black;
-    background-color: black;
-  }
-}
-@keyframes flip-bottom-down {
-  0% {
-    color: white;
-    background-color: rgb(30,30,30);
-    transform: rotateX(90deg);
-  }
-  100% {
-    transform: rotateX(0deg);
-  }
+@media (prefers-color-scheme: light) {
+    @keyframes flip-top-down {
+      0% {
+        transform: rotateX(0);
+      }
+      100% {
+        transform: rotateX(-90deg);
+        color: gray;
+        background-color: gray;
+      }
+    }
+    @keyframes flip-bottom-down {
+      0% {
+        color: black;
+        background-color: rgb(220,220,220);
+        transform: rotateX(90deg);
+      }
+      100% {
+        transform: rotateX(0deg);
+      }
+    }
+
+    @media screen and (min-width: 800px) {
+      @keyframes flip-top-down {
+        0% {
+          transform: translateY(-1px) rotateX(0);
+        }
+        100% {
+          transform: translateY(-1px) rotateX(-90deg);
+          color: gray;
+          background-color: gray;
+        }
+      }
+      @keyframes flip-bottom-down {
+        0% {
+          color: black;
+          background-color: rgb(220,220,220);
+          transform: translateY(1px) rotateX(90deg);
+        }
+        100% {
+          transform: translateY(1px) rotateX(0deg);
+        }
+      }
+    }
+
+    @media screen and (min-width: 1280px) {
+      @keyframes flip-top-down {
+        0% {
+          transform: translateY(-2px) rotateX(0);
+        }
+        100% {
+          transform: translateY(-2px) rotateX(-90deg);
+          color: gray;
+          background-color: gray;
+        }
+      }
+      @keyframes flip-bottom-down {
+        0% {
+          color: black;
+          background-color: rgb(220,220,220);
+          transform: translateY(2px) rotateX(90deg);
+        }
+        100% {
+          transform: translateY(2px) rotateX(0deg);
+        }
+      }
+    }
 }
 
-@media screen and (min-width: 800px) {
-  @keyframes flip-top-down {
-    0% {
-      transform: translateY(-1px) rotateX(0);
+@media (prefers-color-scheme: dark) {
+    @keyframes flip-top-down {
+      0% {
+        transform: rotateX(0);
+      }
+      100% {
+        transform: rotateX(-90deg);
+        color: black;
+        background-color: black;
+      }
     }
-    100% {
-      transform: translateY(-1px) rotateX(-90deg);
-      color: black;
-      background-color: black;
+    @keyframes flip-bottom-down {
+      0% {
+        color: white;
+        background-color: rgb(30,30,30);
+        transform: rotateX(90deg);
+      }
+      100% {
+        transform: rotateX(0deg);
+      }
     }
-  }
-  @keyframes flip-bottom-down {
-    0% {
-      color: white;
-      background-color: rgb(30,30,30);
-      transform: translateY(1px) rotateX(90deg);
-    }
-    100% {
-      transform: translateY(1px) rotateX(0deg);
-    }
-  }
-}
 
-@media screen and (min-width: 1280px) {
-  @keyframes flip-top-down {
-    0% {
-      transform: translateY(-2px) rotateX(0);
+    @media screen and (min-width: 800px) {
+      @keyframes flip-top-down {
+        0% {
+          transform: translateY(-1px) rotateX(0);
+        }
+        100% {
+          transform: translateY(-1px) rotateX(-90deg);
+          color: black;
+          background-color: black;
+        }
+      }
+      @keyframes flip-bottom-down {
+        0% {
+          color: white;
+          background-color: rgb(30,30,30);
+          transform: translateY(1px) rotateX(90deg);
+        }
+        100% {
+          transform: translateY(1px) rotateX(0deg);
+        }
+      }
     }
-    100% {
-      transform: translateY(-2px) rotateX(-90deg);
-      color: black;
-      background-color: black;
+
+    @media screen and (min-width: 1280px) {
+      @keyframes flip-top-down {
+        0% {
+          transform: translateY(-2px) rotateX(0);
+        }
+        100% {
+          transform: translateY(-2px) rotateX(-90deg);
+          color: black;
+          background-color: black;
+        }
+      }
+      @keyframes flip-bottom-down {
+        0% {
+          color: white;
+          background-color: rgb(30,30,30);
+          transform: translateY(2px) rotateX(90deg);
+        }
+        100% {
+          transform: translateY(2px) rotateX(0deg);
+        }
+      }
     }
-  }
-  @keyframes flip-bottom-down {
-    0% {
-      color: white;
-      background-color: rgb(30,30,30);
-      transform: translateY(2px) rotateX(90deg);
-    }
-    100% {
-      transform: translateY(2px) rotateX(0deg);
-    }
-  }
 }
diff --git a/Webview/index.js b/Webview/index.js
index 7b4c137..648caea 100644
--- a/Webview/index.js
+++ b/Webview/index.js
@@ -45,7 +45,7 @@ function flipDigitTo(digit, currentVal, updatedVal, i) {
   setTimeout(function() {
     bottomFlapNum.innerHTML = updatedVal;
     bottomFlapFlip.style.display = 'none';
-  }, [10, 11, 12].includes(i) ? 45 : (10-i) * 450);
+  }, [10, 11, 12].includes(i) ? 45 : (10-i) * 425);
 
   digit.setAttribute('current-val', updatedVal);
 }