diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss
index e874b3f0..4bd51d78 100644
--- a/src/components/NavBar/NavBar.scss
+++ b/src/components/NavBar/NavBar.scss
@@ -70,4 +70,7 @@
   img {
     margin: 0;
   }
+  &-sun{
+    filter: invert(100%);
+  }
 }
\ No newline at end of file
diff --git a/src/constants/MenuLinks/MenuLinks.js b/src/constants/MenuLinks/MenuLinks.js
index 8812aca1..d84a18ca 100644
--- a/src/constants/MenuLinks/MenuLinks.js
+++ b/src/constants/MenuLinks/MenuLinks.js
@@ -3,8 +3,8 @@ import { Link } from "gatsby"
 import Nav from "react-bootstrap/Nav"
 import { useTheme } from "../../context/themeContext"
 
-import moon from '../../images/moon-solid.svg'
-import sun from '../../images/sun-solid.svg'
+import moon from "../../images/moon-solid.svg"
+import sun from "../../images/sun-icon-1.png"
 
 const MENU_LINKS = [
   { id: 1, text: "home", url: "/" },
@@ -33,8 +33,26 @@ const MenuLinks = ({ styleClass }) => {
         </Nav.Item>
       ))}
       <Nav.Item className="NavBar__Item">
-        <button className="theme-toggle" onClick={toggleTheme}>
-          <img src={theme === "dark" ? moon : sun} alt="theme" width="30" />
+        <button
+          className="theme-toggle"
+          onClick={toggleTheme}
+          style={{ margin: theme === "dark" ? "0 5px 0 0" : "" }}
+        >
+          {theme === "dark" ? (
+            <img
+              src={moon}
+              className="theme-toggle-moon"
+              alt="theme"
+              width="20"
+            />
+          ) : (
+            <img
+              className="theme-toggle-sun"
+              src={sun}
+              alt="theme"
+              width="25"
+            />
+          )}
         </button>
       </Nav.Item>
     </Nav>
diff --git a/src/images/sun-icon-1.png b/src/images/sun-icon-1.png
new file mode 100644
index 00000000..0662ad7a
Binary files /dev/null and b/src/images/sun-icon-1.png differ
diff --git a/src/images/sun-solid.svg b/src/images/sun-solid.svg
deleted file mode 100644
index 083ff2bc..00000000
--- a/src/images/sun-solid.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sun" class="svg-inline--fa fa-sun fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg>
\ No newline at end of file