diff --git a/quartz/components/styles/darkmode.scss b/quartz/components/styles/darkmode.scss
index f78de6617..e52b58cec 100644
--- a/quartz/components/styles/darkmode.scss
+++ b/quartz/components/styles/darkmode.scss
@@ -1,7 +1,5 @@
 .darkmode {
-  left: 2rem;
-  top: -59px;
-  padding-left: 0.5rem;
+
   position: relative;
   width: 20px;
   height: 20px;
@@ -49,3 +47,19 @@
     opacity: 0;
   }
 }
+
+@media (max-width: 1510px) {
+  .darkmode {
+    // left: 2rem;
+    // top: -59px;
+    padding-left: 0.5rem;
+  }
+}
+
+@media (min-width: 1511px) {
+  .darkmode {
+    left: 2rem;
+    top: -59px;
+    padding-left: 0.5rem;
+  }
+}
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 5c15c2186..ddd509319 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -5,6 +5,7 @@
   min-width: auto;
   max-width: 18px;
   flex-grow: 0.3;
+  padding-right: 1rem;
 
   & > #search-icon {
     background-color: transparent;
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 4aff2419a..640ade6e9 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -75,6 +75,7 @@ a {
 
 .desktop-only {
   display: initial;
+
   @media all and (max-width: $fullPageWidth) {
     display: none;
   }
diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
index b908314b1..c730a5eea 100644
--- a/quartz/styles/custom.scss
+++ b/quartz/styles/custom.scss
@@ -1 +1,19 @@
 // put your custom CSS here!
+
+// @media (max-width: 1510px) {
+//   .darkmode {
+//     position: relative;
+//     left: 2rem;
+//     top: -59px;
+//     padding-left: 0.5rem;
+//   }
+// }
+
+// @media (min-width: 1511px) {
+//   .darkmode {
+//     position: relative;
+//     left: 2rem;
+//     top: -59px;
+//     padding-left: 0.5rem;
+//   }
+// }