diff --git a/application/recipes/static/js/recipesListHandler.js b/application/recipes/static/js/recipesListHandler.js
index 9989c49..c97e7b7 100644
--- a/application/recipes/static/js/recipesListHandler.js
+++ b/application/recipes/static/js/recipesListHandler.js
@@ -183,8 +183,9 @@ async function replenishRecipesCards() {
         editOp.href = `/recipes/edit/${recipes[i].id}`
 
         let viewOp = document.createElement('a')
-        viewOp.setAttribute('class', 'uk-button uk-button-small uk-button-primary')
+        viewOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
         viewOp.innerHTML = '<span uk-icon="icon: eye"></span>    View'
+        viewOp.style = "margin-right: 10px;"
         viewOp.href = `/recipes/view/${recipes[i].id}`
 
         let deleteOp = document.createElement('button')
diff --git a/static/css/dark-mode.css b/static/css/dark-mode.css
index 009f683..380a7a8 100644
--- a/static/css/dark-mode.css
+++ b/static/css/dark-mode.css
@@ -241,4 +241,14 @@ select, option {
 .uk-label.uk-label-danger {
     background-color: #b6596a;
     color: var(--background-text)
+}
+
+.uk-button.uk-button-primary {
+    background-color: var(--primary-color);
+    color: var(--primary-text);
+}
+
+.uk-button.uk-button-danger {
+    background-color: var(--error);
+    color: var(--error-text);
 }
\ No newline at end of file