diff --git a/app/classes/preferences.php b/app/classes/preferences.php
index 958f0bc..6b840f0 100644
--- a/app/classes/preferences.php
+++ b/app/classes/preferences.php
@@ -200,13 +200,13 @@ class Preferences {
         foreach ( self::$preferences as $name => $details ) {
             $tempPrefsArray = $this->normalizePreferenceArray( $name, $details );
             if ( isset( $populated[ $name ] ) ) {
-                $tempPrefsArray['default'] = $populated[$name];
+                $tempPrefsArray['value'] = $populated[$name];
             }
             // $form .= Forms::getFormFieldHtml( $name, $tempPrefsArray['pretty'], $tempPrefsArray['type'], $tempPrefsArray['default'], $tempPrefsArray['options'] );
             if ( $tempPrefsArray['type'] == 'checkbox' ) {
                 $tempPrefsArray['type'] = 'switch';
             }
-            $inputTypes[ $tempPrefsArray['type'] ][] = self::getFormFieldHtml( $name, $tempPrefsArray['pretty'], $tempPrefsArray['type'], $tempPrefsArray['default'], $tempPrefsArray['options'] );
+            $inputTypes[ $tempPrefsArray['type'] ][] = self::getFormFieldHtml( $name, $tempPrefsArray['pretty'], $tempPrefsArray['type'], $tempPrefsArray['value'], $tempPrefsArray['options'] );
         }
         foreach ( $inputTypes as $skip => $items ) {
             $form .= implode( ' ', $items );
diff --git a/app/controllers/home.php b/app/controllers/home.php
index b4a7505..447b925 100644
--- a/app/controllers/home.php
+++ b/app/controllers/home.php
@@ -27,13 +27,13 @@ use TheTempusProject\TheTempusProject as App;
 class Home extends Controller {
     public function index() {
         self::$title = '{SITENAME}';
-        self::$pageDescription = 'This is the homepage of your new Tempus Project Installation. Thank you for installing. find more info at https://thetempusproject.com';
+        self::$pageDescription = 'AllTheBookmarks.com is here to provide you a better, faster, and easier way - to manage bookmarks across multiple browser and multiple devices seamlessly.';
         Views::view( 'index' );
     }
 
     public function login() {
         self::$title = 'Portal - {SITENAME}';
-        self::$pageDescription = 'Please log in to use {SITENAME} member features.';
+        self::$pageDescription = 'Please log in to access all of the great features {SITENAME} has to offer.';
         if ( App::$isLoggedIn ) {
             return Issues::add( 'notice', 'You are already logged in. Please <a href="' . Routes::getAddress() . 'home/logout">click here</a> to log out.' );
         }
@@ -69,7 +69,7 @@ class Home extends Controller {
 
     public function profile( $id = null ) {
         self::$title = 'User Profile - {SITENAME}';
-        self::$pageDescription = 'User Profiles for {SITENAME}';
+        self::$pageDescription = 'User Profile - {SITENAME}';
         if ( !App::$isLoggedIn ) {
             return Issues::add( 'notice', 'You must be logged in to view this page.' );
         }
@@ -91,26 +91,26 @@ class Home extends Controller {
 
     public function about() {
         self::$title = 'About - {SITENAME}';
-        self::$pageDescription = '{SITENAME} Terms and Conditions of use. Please use {SITENAME} safely.';
+        self::$pageDescription = '{SITENAME} was started by a developer with years of industry experience which has lead to a refined no-nonsense tool for everyone. Find out more about us here.';
         Views::view( 'about' );
     }
 
     public function contact() {
         self::$title = 'Contact Us - {SITENAME}';
-        self::$pageDescription = '{SITENAME} Terms and Conditions of use. Please use {SITENAME} safely.';
+        self::$pageDescription = 'On this page, you\'ll be able to reach out to the team directly with any questions, comments, or concerns you may have.';
         Views::view( 'contact' );
     }
 
     public function privacy() {
         self::$title = 'Privacy Policy - {SITENAME}';
-        self::$pageDescription = '{SITENAME} Terms and Conditions of use. Please use {SITENAME} safely.';
+        self::$pageDescription = 'At {SITENAME} you privacy is very important to us. On this page you can find a detailed outline of all the information we collect and how its used.';
         Components::set( 'PRIVACY', Views::simpleView( 'privacy' ) );
         Views::raw( '<div class="col-lg-8 mx-auto">{PRIVACY}</div>' );
     }
 
     public function faq() {
         self::$title = 'Frequently Asked Questions - {SITENAME}';
-        self::$pageDescription = '{SITENAME} Terms and Conditions of use. Please use {SITENAME} safely.';
+        self::$pageDescription = 'Many times, we aren\'t the first to ask why or how something works. Here you will find a list of {SITENAME} commonly asked questions and our best answers.' ;
         Views::view( 'faq' );
     }
 }
diff --git a/app/controllers/register.php b/app/controllers/register.php
index f07cb19..275fdc2 100644
--- a/app/controllers/register.php
+++ b/app/controllers/register.php
@@ -27,6 +27,7 @@ use TheTempusProject\Classes\Forms;
 
 class Register extends Controller {
     public function confirm( $code = null ) {
+        Template::noIndex();
         self::$title = 'Confirm Email';
         if ( !isset( $code ) && !Input::exists( 'confirmationCode' ) ) {
             return Views::view( 'confirmation' );
@@ -43,8 +44,8 @@ class Register extends Controller {
     }
 
     public function index() {
-        self::$title = 'Register';
-        self::$pageDescription = 'Many features of the site are disabled or even hidden from unregistered users. On this page you can sign up for an account to access all the app has to offer.';
+        self::$title = '{SITENAME} Sign Up';
+        self::$pageDescription = 'Many features of {SITENAME} are disabled or hidden from unregistered users. On this page you can sign up for an account to access all the app has to offer.';
         Components::set( 'TERMS', Views::simpleView( 'terms' ) );
         if ( App::$isLoggedIn ) {
             return Issues::add( 'notice', 'You are currently logged in.' );
@@ -94,6 +95,7 @@ class Register extends Controller {
 
     public function resend() {
         self::$title = 'Resend Confirmation';
+        Template::noIndex();
         if ( !App::$isLoggedIn ) {
             return Issues::add( 'notice', 'Please log in to resend your confirmation email.' );
         }
@@ -110,6 +112,7 @@ class Register extends Controller {
 
     public function reset( $code = null ) {
         self::$title = 'Password Reset';
+        Template::noIndex();
         if ( !isset( $code ) && !Input::exists( 'resetCode' ) ) {
             Issues::add( 'info', 'Please provide a reset code.' );
             return Views::view( 'password_reset_code' );
diff --git a/app/controllers/usercp.php b/app/controllers/usercp.php
index 55f7c58..c1c9b15 100644
--- a/app/controllers/usercp.php
+++ b/app/controllers/usercp.php
@@ -98,7 +98,6 @@ class Usercp extends Controller {
         $fields = App::$activePrefs;
         if ( Input::exists( 'submit' ) ) {
             $fields = $prefs->convertFormToArray( true, false );
-            // dv( $fields );
             // @TODO  now i may need to rework the form checker to work with this....
             // if (!Forms::check('userPrefs')) {
             //     Issues::add( 'error', [ 'There was an error with your request.' => Check::userErrors() ] );
diff --git a/app/css/main-dark.css b/app/css/main-dark.css
index a13f078..ce195ba 100644
--- a/app/css/main-dark.css
+++ b/app/css/main-dark.css
@@ -139,4 +139,12 @@ body {
 .form-control {
     background-color: #1f1f1f;
     color: #e0e0e0;
+}
+.form-control:focus {
+    color: #e0e0e0;
+    /* border-color: #85bd3e; */
+    border-color: #1b947f;
+    background-color: #1f1f1f;
+    /* box-shadow: 0 0 0 .25rem #1b947f; */
+    box-shadow: 0 0 0 .25rem #85bd3e;
 }
\ No newline at end of file
diff --git a/app/css/main.css b/app/css/main.css
index 63f1300..42881ec 100644
--- a/app/css/main.css
+++ b/app/css/main.css
@@ -8,11 +8,9 @@
  * @link    https://TheTempusProject.com
  * @license https://opensource.org/licenses/MIT [MIT LICENSE]
  */
-
- .context-other-bg {
+.context-other-bg {
     background-color: #eaeaea;
 }
- 
 
 .context-main-bg {
     background-color: #f7f7f7;
@@ -70,14 +68,6 @@
     transform: translateX(25px); /* Adjust based on switch width */
 }
 
-
-
-
-
-
-
-
-
 .context-main {
     color: #000;
 }
@@ -92,8 +82,10 @@ html {
 pre {
     white-space: pre-wrap;
 }
+
 body {
-    background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
+    background-color: #e4e4e4;
+    /* background-image: linear-gradient(180deg, #eee, #fff 100px, #fff); */
 }
 @media ( min-width: 768px ) {
     .main {
@@ -370,3 +362,16 @@ button.atb-green-bg:hover {
     opacity: 0.7;
     cursor: move; /* Show a move cursor when dragging */
   }
+
+
+.form-switch .form-check-input {
+    border-color: #1b947f;
+}
+.form-switch .form-check-input:checked {
+    border-color: #1b947f;
+    background-color: #85bd3e;
+}
+.form-switch .form-check-input:focus {
+    border-color: #1b947f;
+    box-shadow: #85bd3e;
+}
\ No newline at end of file
diff --git a/app/plugins/blog/models/posts.php b/app/plugins/blog/models/posts.php
index 471f51d..b42c1d9 100644
--- a/app/plugins/blog/models/posts.php
+++ b/app/plugins/blog/models/posts.php
@@ -131,34 +131,34 @@ class Posts extends DatabaseModel {
             }
             $draft = '';
             $authorName = self::$user->getUsername( $instance->author );
+
             $cleanPost = Sanitize::contentShort( $instance->content );
-            $postSpace = explode( ' ', $cleanPost );
+            $wordsArray = explode( ' ', $cleanPost );
             $postLine = explode( "\n", $cleanPost );
-            // summary by words: 100
-            $spaceSummary = implode( ' ', array_splice( $postSpace, 0, 100 ) );
-            // summary by lines: 5
+            $spaceSummary = implode( ' ', array_splice( $wordsArray, 0, 100 ) );
             $lineSummary = implode( "\n", array_splice( $postLine, 0, 5 ) );
             if ( strlen( $spaceSummary ) < strlen( $lineSummary ) ) {
+                $contentSummaryNoLink = $spaceSummary;
                 $contentSummary = $spaceSummary;
-                if ( count( $postSpace, 1 ) <= 100 ) {
+                if ( count( $wordsArray, 1 ) >= 100 ) {
                     $contentSummaryNoLink = $contentSummary;
                     $contentSummary .= '... <a href="{ROOT_URL}blog/post/' . $instance->ID . '">Read More</a>';
                 }
             } else {
-                // @todo: need to refine this after testing
                 $contentSummaryNoLink = $lineSummary;
                 $contentSummary = $lineSummary . '... <a href="{ROOT_URL}blog/post/' . $instance->ID . '">Read More</a>';
             }
+            $instance->contentSummaryNoLink = $contentSummaryNoLink;
+            $instance->contentSummary = $contentSummary;
+
+            if ( isset( $params['stripHtml'] ) && $params['stripHtml'] === true ) {
+                $instance->contentSummary = strip_tags( $instance->content );
+            }
             if ( $instance->draft != '0' ) {
                 $draft = ' <b>Draft</b>';
             }
             $instance->isDraft = $draft;
             $instance->authorName = $authorName;
-            $instance->contentSummaryNoLink = $contentSummaryNoLink;
-            $instance->contentSummary = $contentSummary;
-            if ( isset( $params['stripHtml'] ) && $params['stripHtml'] === true ) {
-                $instance->contentSummary = strip_tags( $instance->content );
-            }
             if ( self::$comments !== false ) {
                 $instance->commentCount = self::$comments->count( 'blog', $instance->ID );
             }
diff --git a/app/plugins/bookmarks/controllers/bookmarks.php b/app/plugins/bookmarks/controllers/bookmarks.php
index c4c36f6..7ebf81a 100644
--- a/app/plugins/bookmarks/controllers/bookmarks.php
+++ b/app/plugins/bookmarks/controllers/bookmarks.php
@@ -70,6 +70,22 @@ class Bookmarks extends Controller {
         $this->setPrefToggles();
     }
 
+    public function tutorials( $browser = '', $tutorial = '' ) {
+        self::$title = 'Tutorials - {SITENAME}';
+        if ( empty( $browser ) && empty( $tutorial ) ) {
+            return Views::view( 'bookmarks.tutorials.list' );
+        }
+        if ( ! in_array( $browser, ['chrome','brave','firefox','edge','safari','opera'] ) ) {
+            Issues::add( 'error', 'Unknown browser' );
+            return Views::view( 'bookmarks.tutorials.list' );
+        }
+        if ( ! in_array( $tutorial, ['pin','settings','import','export'] ) ) {
+            Issues::add( 'error', 'Unknown tutorial' );
+            return Views::view( 'bookmarks.tutorials.list' );
+        }
+        return Views::view( 'bookmarks.tutorials.' . $browser . '.' . $tutorial );
+    }
+
     public function index() {
         self::$title = 'Manage Bookmarks - {SITENAME}';
         if ( Input::exists('submit') ) {
@@ -95,8 +111,11 @@ class Bookmarks extends Controller {
                 $panelArray[] = $folderObject;
             }
         }
-        Components::set( 'folderPanels', Views::simpleView( 'bookmarks.components.bookmarkListPanel', $panelArray ) );
-        return Views::view( 'bookmarks.dash' );
+        if ( ! empty( $folders ) ) {
+            Components::set( 'folderPanels', Views::simpleView( 'bookmarks.components.bookmarkListPanel', $panelArray ) );
+            return Views::view( 'bookmarks.dash' );
+        }
+        return Views::view( 'bookmarks.indexExplainer' );
     }
 
     /**
@@ -564,9 +583,10 @@ class Bookmarks extends Controller {
 
     public function dashboards() {
         self::$title = 'Bookmark Dashboards - {SITENAME}';
+        
         if ( !App::$isMember ) {
-            Issues::add( 'notice', 'You must have an active membership to manage dashboards.' );
-            return $this->index();
+            Issues::add( 'notice', 'You will need an active subscription to start creating dashboards. You can check our <a href="/member/join">Pricing</a> page for more details.' );
+            return Views::view( 'bookmarks.dashboardExplainer' );
         }
         $dashboards = self::$dashboards->byUser();
         return Views::view( 'bookmarks.dashboards.list', $dashboards );
@@ -687,8 +707,8 @@ class Bookmarks extends Controller {
     public function import() {
         self::$title = 'Bookmark Import - {SITENAME}';
         if ( !App::$isMember ) {
-            Issues::add( 'notice', 'You must have an active membership to import bookmarks.' );
-            return $this->index();
+            Issues::add( 'notice', 'You will need an active subscription to start importing bookmarks. You can check our <a href="/member/join">Pricing</a> page for more details.' );
+            return Views::view( 'bookmarks.importExplainer' );
         }
 
         if ( ! Input::exists('submit') ) {
@@ -739,8 +759,8 @@ class Bookmarks extends Controller {
     public function export() {
         self::$title = 'Bookmark Export - {SITENAME}';
         if ( !App::$isMember ) {
-            Issues::add( 'notice', 'You must have an active membership to export bookmarks.' );
-            return $this->index();
+            Issues::add( 'notice', 'You will need an active subscription to start exporting bookmarks. You can check our <a href="/member/join">Pricing</a> page for more details.' );
+            return Views::view( 'bookmarks.exportExplainer' );
         }
 
         $folders = self::$folders->byUser();
@@ -806,7 +826,7 @@ class Bookmarks extends Controller {
         $panelArray = [];
         $folders = self::$folders->byUser();
         if ( empty( $folders ) ) {
-            return Views::view( 'bookmarks.share' );
+            return Views::view( 'bookmarks.shareExplainer' );
         }
         foreach ( $folders as $key => $folder ) {
             $panel = new \stdClass();
@@ -924,13 +944,17 @@ class Bookmarks extends Controller {
             }
             $options = $assocOptions;
         }
-        foreach ( $options as $fieldname => $value ) {
-            if ( $folderID == $value ) {
-                $selected = ' selected';
-            } else {
-                $selected = '';
+        if ( ! empty( $options ) ) {
+            foreach ( $options as $fieldname => $value ) {
+                if ( $folderID == $value ) {
+                    $selected = ' selected';
+                } else {
+                    $selected = '';
+                }
+                $out .= '<option value="' . $value . '"' . $selected . '>' . $fieldname . '</option>';
             }
-            $out .= '<option value="' . $value . '"' . $selected . '>' . $fieldname . '</option>';
+        } else {
+            $out .= '<option value="0" selected>No Folder</option>';
         }
         $out .= '</select>';
         $out .= '</div>';
diff --git a/app/plugins/bookmarks/images/brave/bookmark-manager.png b/app/plugins/bookmarks/images/brave/bookmark-manager.png
new file mode 100644
index 0000000..3024811
Binary files /dev/null and b/app/plugins/bookmarks/images/brave/bookmark-manager.png differ
diff --git a/app/plugins/bookmarks/images/brave/bookmark-menu.png b/app/plugins/bookmarks/images/brave/bookmark-menu.png
new file mode 100644
index 0000000..b6d3309
Binary files /dev/null and b/app/plugins/bookmarks/images/brave/bookmark-menu.png differ
diff --git a/app/plugins/bookmarks/images/brave/bookmarks.png b/app/plugins/bookmarks/images/brave/bookmarks.png
new file mode 100644
index 0000000..b431cbe
Binary files /dev/null and b/app/plugins/bookmarks/images/brave/bookmarks.png differ
diff --git a/app/plugins/bookmarks/images/brave/export.png b/app/plugins/bookmarks/images/brave/export.png
new file mode 100644
index 0000000..87dd1c6
Binary files /dev/null and b/app/plugins/bookmarks/images/brave/export.png differ
diff --git a/app/plugins/bookmarks/images/brave/extensions-icon.png b/app/plugins/bookmarks/images/brave/extensions-icon.png
new file mode 100644
index 0000000..bcc2cc1
Binary files /dev/null and b/app/plugins/bookmarks/images/brave/extensions-icon.png differ
diff --git a/app/plugins/bookmarks/images/brave/import.png b/app/plugins/bookmarks/images/brave/import.png
new file mode 100644
index 0000000..622053c
Binary files /dev/null and b/app/plugins/bookmarks/images/brave/import.png differ
diff --git a/app/plugins/bookmarks/images/brave/options.png b/app/plugins/bookmarks/images/brave/options.png
new file mode 100644
index 0000000..10b9339
Binary files /dev/null and b/app/plugins/bookmarks/images/brave/options.png differ
diff --git a/app/plugins/bookmarks/images/brave/pin.png b/app/plugins/bookmarks/images/brave/pin.png
new file mode 100644
index 0000000..8e800f0
Binary files /dev/null and b/app/plugins/bookmarks/images/brave/pin.png differ
diff --git a/app/plugins/bookmarks/images/brave/pinned.png b/app/plugins/bookmarks/images/brave/pinned.png
new file mode 100644
index 0000000..f94fb59
Binary files /dev/null and b/app/plugins/bookmarks/images/brave/pinned.png differ
diff --git a/app/plugins/bookmarks/images/brave/settings-page.png b/app/plugins/bookmarks/images/brave/settings-page.png
new file mode 100644
index 0000000..f1671dc
Binary files /dev/null and b/app/plugins/bookmarks/images/brave/settings-page.png differ
diff --git a/app/plugins/bookmarks/images/brave/settings.png b/app/plugins/bookmarks/images/brave/settings.png
new file mode 100644
index 0000000..668b048
Binary files /dev/null and b/app/plugins/bookmarks/images/brave/settings.png differ
diff --git a/app/plugins/bookmarks/images/chrome/bookmark-manager.png b/app/plugins/bookmarks/images/chrome/bookmark-manager.png
new file mode 100644
index 0000000..1dd091a
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/bookmark-manager.png differ
diff --git a/app/plugins/bookmarks/images/chrome/bookmark-menu.png b/app/plugins/bookmarks/images/chrome/bookmark-menu.png
new file mode 100644
index 0000000..f559010
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/bookmark-menu.png differ
diff --git a/app/plugins/bookmarks/images/chrome/bookmarks.png b/app/plugins/bookmarks/images/chrome/bookmarks.png
new file mode 100644
index 0000000..def6eb6
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/bookmarks.png differ
diff --git a/app/plugins/bookmarks/images/chrome/chrome-add.jpg b/app/plugins/bookmarks/images/chrome/chrome-add.jpg
new file mode 100644
index 0000000..579d5b8
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/chrome-add.jpg differ
diff --git a/app/plugins/bookmarks/images/chrome/chrome-login.jpg b/app/plugins/bookmarks/images/chrome/chrome-login.jpg
new file mode 100644
index 0000000..db42731
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/chrome-login.jpg differ
diff --git a/app/plugins/bookmarks/images/chrome/chrome-marquee-promo-tile.png b/app/plugins/bookmarks/images/chrome/chrome-marquee-promo-tile.png
new file mode 100644
index 0000000..3c9da7f
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/chrome-marquee-promo-tile.png differ
diff --git a/app/plugins/bookmarks/images/chrome/chrome-settings.jpg b/app/plugins/bookmarks/images/chrome/chrome-settings.jpg
new file mode 100644
index 0000000..97949b7
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/chrome-settings.jpg differ
diff --git a/app/plugins/bookmarks/images/chrome/chrome-small-promo-tile.png b/app/plugins/bookmarks/images/chrome/chrome-small-promo-tile.png
new file mode 100644
index 0000000..015a2f2
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/chrome-small-promo-tile.png differ
diff --git a/app/plugins/bookmarks/images/chrome/export.png b/app/plugins/bookmarks/images/chrome/export.png
new file mode 100644
index 0000000..42d4fe1
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/export.png differ
diff --git a/app/plugins/bookmarks/images/chrome/extensions-icon.png b/app/plugins/bookmarks/images/chrome/extensions-icon.png
new file mode 100644
index 0000000..34dfd50
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/extensions-icon.png differ
diff --git a/app/plugins/bookmarks/images/chrome/import.png b/app/plugins/bookmarks/images/chrome/import.png
new file mode 100644
index 0000000..9d6cb93
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/import.png differ
diff --git a/app/plugins/bookmarks/images/chrome/options.png b/app/plugins/bookmarks/images/chrome/options.png
new file mode 100644
index 0000000..9fa20a6
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/options.png differ
diff --git a/app/plugins/bookmarks/images/chrome/pin.png b/app/plugins/bookmarks/images/chrome/pin.png
new file mode 100644
index 0000000..eb90300
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/pin.png differ
diff --git a/app/plugins/bookmarks/images/chrome/pinned.png b/app/plugins/bookmarks/images/chrome/pinned.png
new file mode 100644
index 0000000..7f21ba0
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/pinned.png differ
diff --git a/app/plugins/bookmarks/images/chrome/settings-page.png b/app/plugins/bookmarks/images/chrome/settings-page.png
new file mode 100644
index 0000000..e662028
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/settings-page.png differ
diff --git a/app/plugins/bookmarks/images/chrome/settings.png b/app/plugins/bookmarks/images/chrome/settings.png
new file mode 100644
index 0000000..ba7f40b
Binary files /dev/null and b/app/plugins/bookmarks/images/chrome/settings.png differ
diff --git a/app/plugins/bookmarks/images/edge/edge-add.png b/app/plugins/bookmarks/images/edge/edge-add.png
new file mode 100644
index 0000000..547cf55
Binary files /dev/null and b/app/plugins/bookmarks/images/edge/edge-add.png differ
diff --git a/app/plugins/bookmarks/images/edge/edge-login.png b/app/plugins/bookmarks/images/edge/edge-login.png
new file mode 100644
index 0000000..7e27a1c
Binary files /dev/null and b/app/plugins/bookmarks/images/edge/edge-login.png differ
diff --git a/app/plugins/bookmarks/images/edge/edge-settings.png b/app/plugins/bookmarks/images/edge/edge-settings.png
new file mode 100644
index 0000000..db02594
Binary files /dev/null and b/app/plugins/bookmarks/images/edge/edge-settings.png differ
diff --git a/app/plugins/bookmarks/images/edge/edge-small-promo-tile.png b/app/plugins/bookmarks/images/edge/edge-small-promo-tile.png
new file mode 100644
index 0000000..015a2f2
Binary files /dev/null and b/app/plugins/bookmarks/images/edge/edge-small-promo-tile.png differ
diff --git a/app/plugins/bookmarks/images/edge/export.png b/app/plugins/bookmarks/images/edge/export.png
new file mode 100644
index 0000000..69d71fb
Binary files /dev/null and b/app/plugins/bookmarks/images/edge/export.png differ
diff --git a/app/plugins/bookmarks/images/edge/favorites.png b/app/plugins/bookmarks/images/edge/favorites.png
new file mode 100644
index 0000000..f45bf3e
Binary files /dev/null and b/app/plugins/bookmarks/images/edge/favorites.png differ
diff --git a/app/plugins/bookmarks/images/edge/import-complete.png b/app/plugins/bookmarks/images/edge/import-complete.png
new file mode 100644
index 0000000..843469a
Binary files /dev/null and b/app/plugins/bookmarks/images/edge/import-complete.png differ
diff --git a/app/plugins/bookmarks/images/edge/import-menu.png b/app/plugins/bookmarks/images/edge/import-menu.png
new file mode 100644
index 0000000..7d86967
Binary files /dev/null and b/app/plugins/bookmarks/images/edge/import-menu.png differ
diff --git a/app/plugins/bookmarks/images/edge/import-select.png b/app/plugins/bookmarks/images/edge/import-select.png
new file mode 100644
index 0000000..ac3d844
Binary files /dev/null and b/app/plugins/bookmarks/images/edge/import-select.png differ
diff --git a/app/plugins/bookmarks/images/edge/import-start.png b/app/plugins/bookmarks/images/edge/import-start.png
new file mode 100644
index 0000000..8dfb0d1
Binary files /dev/null and b/app/plugins/bookmarks/images/edge/import-start.png differ
diff --git a/app/plugins/bookmarks/images/edge/import.png b/app/plugins/bookmarks/images/edge/import.png
new file mode 100644
index 0000000..c0b8a67
Binary files /dev/null and b/app/plugins/bookmarks/images/edge/import.png differ
diff --git a/app/plugins/bookmarks/images/edge/settings.png b/app/plugins/bookmarks/images/edge/settings.png
new file mode 100644
index 0000000..68ffede
Binary files /dev/null and b/app/plugins/bookmarks/images/edge/settings.png differ
diff --git a/app/plugins/bookmarks/images/firefox/added.png b/app/plugins/bookmarks/images/firefox/added.png
new file mode 100644
index 0000000..0c4dc64
Binary files /dev/null and b/app/plugins/bookmarks/images/firefox/added.png differ
diff --git a/app/plugins/bookmarks/images/firefox/bookmarks.png b/app/plugins/bookmarks/images/firefox/bookmarks.png
new file mode 100644
index 0000000..33b7050
Binary files /dev/null and b/app/plugins/bookmarks/images/firefox/bookmarks.png differ
diff --git a/app/plugins/bookmarks/images/firefox/enable.png b/app/plugins/bookmarks/images/firefox/enable.png
new file mode 100644
index 0000000..fc2f578
Binary files /dev/null and b/app/plugins/bookmarks/images/firefox/enable.png differ
diff --git a/app/plugins/bookmarks/images/firefox/export.png b/app/plugins/bookmarks/images/firefox/export.png
new file mode 100644
index 0000000..a95ca72
Binary files /dev/null and b/app/plugins/bookmarks/images/firefox/export.png differ
diff --git a/app/plugins/bookmarks/images/firefox/firefox-login.jpg b/app/plugins/bookmarks/images/firefox/firefox-login.jpg
new file mode 100644
index 0000000..df62908
Binary files /dev/null and b/app/plugins/bookmarks/images/firefox/firefox-login.jpg differ
diff --git a/app/plugins/bookmarks/images/firefox/firefox-save.jpg b/app/plugins/bookmarks/images/firefox/firefox-save.jpg
new file mode 100644
index 0000000..48e3a98
Binary files /dev/null and b/app/plugins/bookmarks/images/firefox/firefox-save.jpg differ
diff --git a/app/plugins/bookmarks/images/firefox/firefox-settings.jpg b/app/plugins/bookmarks/images/firefox/firefox-settings.jpg
new file mode 100644
index 0000000..f2c8921
Binary files /dev/null and b/app/plugins/bookmarks/images/firefox/firefox-settings.jpg differ
diff --git a/app/plugins/bookmarks/images/firefox/import-export.png b/app/plugins/bookmarks/images/firefox/import-export.png
new file mode 100644
index 0000000..5809cc1
Binary files /dev/null and b/app/plugins/bookmarks/images/firefox/import-export.png differ
diff --git a/app/plugins/bookmarks/images/firefox/import.png b/app/plugins/bookmarks/images/firefox/import.png
new file mode 100644
index 0000000..de7fdf0
Binary files /dev/null and b/app/plugins/bookmarks/images/firefox/import.png differ
diff --git a/app/plugins/bookmarks/images/firefox/manage-bookmarks.png b/app/plugins/bookmarks/images/firefox/manage-bookmarks.png
new file mode 100644
index 0000000..c0b76a6
Binary files /dev/null and b/app/plugins/bookmarks/images/firefox/manage-bookmarks.png differ
diff --git a/app/plugins/bookmarks/images/firefox/options.png b/app/plugins/bookmarks/images/firefox/options.png
new file mode 100644
index 0000000..234ed54
Binary files /dev/null and b/app/plugins/bookmarks/images/firefox/options.png differ
diff --git a/app/plugins/bookmarks/images/firefox/settings.png b/app/plugins/bookmarks/images/firefox/settings.png
new file mode 100644
index 0000000..5af44af
Binary files /dev/null and b/app/plugins/bookmarks/images/firefox/settings.png differ
diff --git a/app/plugins/bookmarks/images/firefox/version.png b/app/plugins/bookmarks/images/firefox/version.png
new file mode 100644
index 0000000..ed7e94e
Binary files /dev/null and b/app/plugins/bookmarks/images/firefox/version.png differ
diff --git a/app/plugins/bookmarks/images/opera/bookmarks.png b/app/plugins/bookmarks/images/opera/bookmarks.png
new file mode 100644
index 0000000..6d61869
Binary files /dev/null and b/app/plugins/bookmarks/images/opera/bookmarks.png differ
diff --git a/app/plugins/bookmarks/images/opera/export.png b/app/plugins/bookmarks/images/opera/export.png
new file mode 100644
index 0000000..afee201
Binary files /dev/null and b/app/plugins/bookmarks/images/opera/export.png differ
diff --git a/app/plugins/bookmarks/images/opera/extensions.png b/app/plugins/bookmarks/images/opera/extensions.png
new file mode 100644
index 0000000..48587bc
Binary files /dev/null and b/app/plugins/bookmarks/images/opera/extensions.png differ
diff --git a/app/plugins/bookmarks/images/opera/import-select.png b/app/plugins/bookmarks/images/opera/import-select.png
new file mode 100644
index 0000000..ce92936
Binary files /dev/null and b/app/plugins/bookmarks/images/opera/import-select.png differ
diff --git a/app/plugins/bookmarks/images/opera/import-start.png b/app/plugins/bookmarks/images/opera/import-start.png
new file mode 100644
index 0000000..75b2a2c
Binary files /dev/null and b/app/plugins/bookmarks/images/opera/import-start.png differ
diff --git a/app/plugins/bookmarks/images/opera/import-success.png b/app/plugins/bookmarks/images/opera/import-success.png
new file mode 100644
index 0000000..e34bc70
Binary files /dev/null and b/app/plugins/bookmarks/images/opera/import-success.png differ
diff --git a/app/plugins/bookmarks/images/opera/import.png b/app/plugins/bookmarks/images/opera/import.png
new file mode 100644
index 0000000..02c0046
Binary files /dev/null and b/app/plugins/bookmarks/images/opera/import.png differ
diff --git a/app/plugins/bookmarks/images/opera/opera-login.jpg b/app/plugins/bookmarks/images/opera/opera-login.jpg
new file mode 100644
index 0000000..0bb1bc7
Binary files /dev/null and b/app/plugins/bookmarks/images/opera/opera-login.jpg differ
diff --git a/app/plugins/bookmarks/images/opera/opera-promo-image.png b/app/plugins/bookmarks/images/opera/opera-promo-image.png
new file mode 100644
index 0000000..cd2ca2a
Binary files /dev/null and b/app/plugins/bookmarks/images/opera/opera-promo-image.png differ
diff --git a/app/plugins/bookmarks/images/opera/opera-save.jpg b/app/plugins/bookmarks/images/opera/opera-save.jpg
new file mode 100644
index 0000000..aaa5aa6
Binary files /dev/null and b/app/plugins/bookmarks/images/opera/opera-save.jpg differ
diff --git a/app/plugins/bookmarks/images/opera/opera-settiings.jpg b/app/plugins/bookmarks/images/opera/opera-settiings.jpg
new file mode 100644
index 0000000..37c4081
Binary files /dev/null and b/app/plugins/bookmarks/images/opera/opera-settiings.jpg differ
diff --git a/app/plugins/bookmarks/images/opera/optiions.png b/app/plugins/bookmarks/images/opera/optiions.png
new file mode 100644
index 0000000..1e0f192
Binary files /dev/null and b/app/plugins/bookmarks/images/opera/optiions.png differ
diff --git a/app/plugins/bookmarks/images/opera/pin.png b/app/plugins/bookmarks/images/opera/pin.png
new file mode 100644
index 0000000..986aac1
Binary files /dev/null and b/app/plugins/bookmarks/images/opera/pin.png differ
diff --git a/app/plugins/bookmarks/images/opera/sidebar.png b/app/plugins/bookmarks/images/opera/sidebar.png
new file mode 100644
index 0000000..bc0a3d6
Binary files /dev/null and b/app/plugins/bookmarks/images/opera/sidebar.png differ
diff --git a/app/plugins/bookmarks/images/opera/toolbar.png b/app/plugins/bookmarks/images/opera/toolbar.png
new file mode 100644
index 0000000..6a84ab2
Binary files /dev/null and b/app/plugins/bookmarks/images/opera/toolbar.png differ
diff --git a/app/plugins/bookmarks/plugin.php b/app/plugins/bookmarks/plugin.php
index ea7d157..9dc4886 100644
--- a/app/plugins/bookmarks/plugin.php
+++ b/app/plugins/bookmarks/plugin.php
@@ -18,6 +18,7 @@ use TheTempusProject\Models\Bookmarks as Bookmark;
 use TheTempusProject\Models\Folders;
 use TheTempusProject\Houdini\Classes\Components;
 use TheTempusProject\Houdini\Classes\Template;
+use TheTempusProject\TheTempusProject as App;
 
 class Bookmarks extends Plugin {
     public $pluginName = 'TP Bookmarks';
@@ -43,11 +44,22 @@ class Bookmarks extends Plugin {
             'url' => '{ROOT_URL}bookmarks/index',
             'filter' => 'loggedin',
         ],
+        [
+            'text' => 'Tutorials',
+            'url' => '{ROOT_URL}bookmarks/tutorials',
+            'filter' => 'bkmtuts',
+        ],
         [
             'text' => 'Extensions',
             'url' => '{ROOT_URL}extensions/index',
         ],
     ];
+    public $info_footer_links = [
+        [
+            'text' => 'Tutorials',
+            'url' => '{ROOT_URL}bookmarks/tutorials',
+        ],
+    ];
     public $configMatrix = [
         'enabled' => [
             'type' => 'radio',
@@ -96,9 +108,12 @@ class Bookmarks extends Plugin {
             'type' => 'checkbox',
             'default' => 'true',
         ],
+        'bookmarkTutorials' => [
+            'pretty' => 'Show tutorials for the bookmark feature',
+            'type' => 'checkbox',
+            'default' => 'true',
+        ],
     ];
-
-
     public $resourceMatrix = [
         'routes' => [
             [
@@ -134,17 +149,32 @@ class Bookmarks extends Plugin {
         ]
     ];
 
-
-
-
-
-
     public $bookmarks;
     public $folders;
+    protected static $loaded = false;
     
     public function __construct( $load = false ) {
         $this->bookmarks = new Bookmark;
         $this->folders = new Folders;
+
+        if ( ! self::$loaded && $load ) {
+            $tutpref = true;
+            if ( App::$isLoggedIn ) {
+                if ( empty( App::$activeUser->prefs['bookmarkTutorials'] ) ) {
+                    $tutpref = false;
+                }
+            }
+            $this->filters[] = [
+                'name' => 'bkmtuts',
+                'find' => '#{BKMTUTS}(.*?){/BKMTUTS}#is',
+                'replace' => ( $tutpref ? '$1' : '' ),
+                'enabled' => true,
+            ];
+        }
+
         parent::__construct( $load );
+        if ( ! self::$loaded && $load ) {
+            self::$loaded = true;
+        }
     }
 }
diff --git a/app/plugins/bookmarks/views/bookmarks/unsorted.html b/app/plugins/bookmarks/views/bookmarks/unsorted.html
index 5d8c1e7..4f01789 100644
--- a/app/plugins/bookmarks/views/bookmarks/unsorted.html
+++ b/app/plugins/bookmarks/views/bookmarks/unsorted.html
@@ -2,6 +2,13 @@
     <div class="offset-md-2 col-8 mr-2 py-3 context-main-bg p-3">
         <legend class="text-center">Unsorted Bookmarks</legend>
         <hr>
+        {BKMTUTS}
+        <p class="px-2">
+            When you add bookmarks without a folder, they will be considered "Unsorted". There is nothing wrong with these bookmarks, 
+            but much of the application relies on folder for organizing and displaying bookmarks. You may find that these bookmarks do not regularly appear in other sections of the application.
+        </p>
+        <hr>
+        {/BKMTUTS}
         <table class="table table-striped context-main1">
             <thead>
                 <tr>
diff --git a/app/plugins/bookmarks/views/dash.html b/app/plugins/bookmarks/views/dash.html
index 5275773..a3d40d3 100644
--- a/app/plugins/bookmarks/views/dash.html
+++ b/app/plugins/bookmarks/views/dash.html
@@ -1,7 +1,18 @@
 <div class="mb-4 mt-4">
     <div class="offset-md-1 col-10 py-3 context-main-bg">
-        <legend class="text-center">MAnage</legend>
+        <legend class="text-center">Manage Bookmarks</legend>
         <hr>
+        {BKMTUTS}
+        <p class="px-4">
+            Dashboards are one of our most powerful and useful features of AllTheBookmarks. With dashboards, you're able to create, edit, share, and use pages built dynamically from your bookmark folders.
+            When you create a dashboard, you select any number of your organized folders, select a few display options, and you gain access to a new page just for those folders.
+        </p>
+        <p class="px-4">
+            Sometimes, there just isn't enough room on the toolbar. Instead of having 6 folders you always use, have 1, short link called "Games" that opens 1 page. I use this to group small sections of 
+            my bookmarks together like games. I have PalWorld, WoW, Satisfactory, and Diablo links in a "Games" dashboard. I can just quickly go to that dash, find the folder I need and go.
+        </p>
+        <hr>
+        {/BKMTUTS}
         {VIEW_OPTIONS}
         <hr>
         <div class="row g-3" data-masonry='{ "percentPosition": false }' id="bookmarkSort">
diff --git a/app/plugins/bookmarks/views/dashboardExplainer.html b/app/plugins/bookmarks/views/dashboardExplainer.html
new file mode 100644
index 0000000..daf1592
--- /dev/null
+++ b/app/plugins/bookmarks/views/dashboardExplainer.html
@@ -0,0 +1,14 @@
+<div class="my-4">
+    <div class="offset-2 col-8 p-3 context-main-bg">
+        <legend class="text-center">Bookmark Dashboards</legend>
+        <hr>
+        <p class="px-2">
+            Dashboards are one of our most powerful and useful features of AllTheBookmarks. With dashboards, you're able to create, edit, share, and use pages built dynamically from your bookmark folders.
+            When you create a dashboard, you select any number of your organized folders, select a few display options, and you gain access to a new page just for those folders.
+        </p>
+        <p class="px-2">
+            Sometimes, there just isn't enough room on the toolbar. Instead of having 6 folders you always use, have 1, short link called "Games" that opens 1 page. I use this to group small sections of 
+            my bookmarks together like games. I have PalWorld, WoW, Satisfactory, and Diablo links in a "Games" dashboard. I can just quickly go to that dash, find the folder I need and go.
+        </p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/dashboards/list.html b/app/plugins/bookmarks/views/dashboards/list.html
index fad456b..e6db2f7 100644
--- a/app/plugins/bookmarks/views/dashboards/list.html
+++ b/app/plugins/bookmarks/views/dashboards/list.html
@@ -2,10 +2,17 @@
     <div class="offset-2 col-8 p-3 context-main-bg">
         <legend class="text-center">Dashboards</legend>
         <hr>
-        <div class="offset-3 col-lg-6 my-4">
-            <p>From here you can easily create, update, or remove any bookmark dashboards you have created.</p>
-            <p>Dashboards are a feature that allow you to build customized bookmark pages that you can easily save and open la</p>
-        </div>
+        {BKMTUTS}
+        <p class="px-2">
+            Dashboards are one of our most powerful and useful features of AllTheBookmarks. With dashboards, you're able to create, edit, share, and use pages built dynamically from your bookmark folders.
+            When you create a dashboard, you select any number of your organized folders, select a few display options, and you gain access to a new page just for those folders.
+        </p>
+        <p class="px-2">
+            Sometimes, there just isn't enough room on the toolbar. Instead of having 6 folders you always use, have 1, short link called "Games" that opens 1 page. I use this to group small sections of 
+            my bookmarks together like games. I have PalWorld, WoW, Satisfactory, and Diablo links in a "Games" dashboard. I can just quickly go to that dash, find the folder I need and go.
+        </p>
+        <hr>
+        {/BKMTUTS}
         <div class="row g-3 text-center p-2">
             <table class="table context-main">
                 <thead>
diff --git a/app/plugins/bookmarks/views/export.html b/app/plugins/bookmarks/views/export.html
index ce64985..79c0c48 100644
--- a/app/plugins/bookmarks/views/export.html
+++ b/app/plugins/bookmarks/views/export.html
@@ -2,6 +2,20 @@
     <div class="offset-2 col-8 p-3 context-main-bg">
         <legend class="text-center">Bookmark Export</legend>
         <hr>
+        {BKMTUTS}
+        <p class="px-2">
+            Our export tool allows you to select bookmarks and folders from your AllTheBookmarks account and generate a file that you can then import into any browser. 
+            Giving you access to all your bookmarks right inside your browser.
+        </p>
+        <p class="px-2">
+            You can simply select the folders you want to bring into your browser on this page and click generate. A notification will pop-up showing you where you can 
+            find your file for download. You take that newly saved file an import it into your browser of choice.
+        </p>
+        <p class="px-2">
+            If you need help importing your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+        </p>
+        <hr>
+        {/BKMTUTS}
         <h3 class="text-center">Select which folders to include in the export</h3>
         <form action="" method="post">
             <div class="row g-3 col-4 offset-4">
diff --git a/app/plugins/bookmarks/views/exportExplainer.html b/app/plugins/bookmarks/views/exportExplainer.html
new file mode 100644
index 0000000..8e033c8
--- /dev/null
+++ b/app/plugins/bookmarks/views/exportExplainer.html
@@ -0,0 +1,17 @@
+<div class="my-4">
+    <div class="offset-2 col-8 p-3 context-main-bg">
+        <legend class="text-center">Bookmark Export</legend>
+        <hr>
+        <p class="px-2">
+            Our export tool allows you to select bookmarks and folders from your AllTheBookmarks account and generate a file that you can then import into any browser. 
+            Giving you access to all your bookmarks right inside your browser.
+        </p>
+        <p class="px-2">
+            You can simply select the folders you want to bring into your browser on this page and click generate. A notification will pop-up showing you where you can 
+            find your file for download. You take that newly saved file an import it into your browser of choice.
+        </p>
+        <p class="px-2">
+            If you need help importing your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+        </p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/folders/listPage.html b/app/plugins/bookmarks/views/folders/listPage.html
index 003a3db..0353abf 100644
--- a/app/plugins/bookmarks/views/folders/listPage.html
+++ b/app/plugins/bookmarks/views/folders/listPage.html
@@ -1,5 +1,11 @@
 <div class="offset-2 col-8 p-3 context-main-bg my-4">
     <legend class="text-center">Folders List</legend>
     <hr>
+    {BKMTUTS}
+    <p class="ps-2">
+        Just like the folders you have in your web browser, you can add, edit, or remove folders for organizing your bookmarks here.
+    </p>
+    <hr>
+    {/BKMTUTS}
     {foldersList}
 </div>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/import.html b/app/plugins/bookmarks/views/import.html
index 6d6b770..3d692bd 100644
--- a/app/plugins/bookmarks/views/import.html
+++ b/app/plugins/bookmarks/views/import.html
@@ -1,7 +1,20 @@
 <div class="my-4">
     <div class="offset-2 col-8 p-3 context-main-bg">
-        <legend class="text-center">Import Bookmarks</legend>
+        <legend class="text-center">Bookmark Import</legend>
         <hr>
+        {BKMTUTS}
+        <p class="ps-2">
+            Our import tool allows you to upload a file from you browser (Chrome, Firefox, etc) that will add all of your bookmarks and folders to your allthebookmarks.com dashboard.
+        </p>
+        <p class="ps-2">
+            The tool has been tested with all major browsers except safari. This includes Firefox, Chrome, Opera, Brave, and Edge. 
+            You will need to browse your computer and select the <strong>.html</strong> file where you exported your bookmarks from your browser.
+        </p>
+        <p class="ps-2">
+            If you need help exporting your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+        </p>
+        <hr>
+        {/BKMTUTS}
         <form method="post" enctype="multipart/form-data">
             <div class="offset-3 col-lg-6 my-4 text-center">
                 <label for="bookmark_file" class="col-lg-3 control-label">Import file (.html):</label>
diff --git a/app/plugins/bookmarks/views/importExplainer.html b/app/plugins/bookmarks/views/importExplainer.html
new file mode 100644
index 0000000..5506724
--- /dev/null
+++ b/app/plugins/bookmarks/views/importExplainer.html
@@ -0,0 +1,16 @@
+<div class="my-4">
+    <div class="offset-2 col-8 p-3 context-main-bg">
+        <legend class="text-center">Bookmark Import</legend>
+        <hr>
+        <p class="ps-2">
+            Our import tool allows you to upload a file from you browser (Chrome, Firefox, etc) that will add all of your bookmarks and folders to your allthebookmarks.com dashboard.
+        </p>
+        <p class="ps-2">
+            The tool has been tested with all major browsers except safari. This includes Firefox, Chrome, Opera, Brave, and Edge. 
+            You will need to browse your computer and select the <strong>.html</strong> file where you exported your bookmarks from your browser.
+        </p>
+        <p class="ps-2">
+            If you need help exporting your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+        </p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/indexExplainer.html b/app/plugins/bookmarks/views/indexExplainer.html
new file mode 100644
index 0000000..a30b67f
--- /dev/null
+++ b/app/plugins/bookmarks/views/indexExplainer.html
@@ -0,0 +1,19 @@
+<div class="my-4">
+    <div class="offset-2 col-8 p-3 context-main-bg">
+        <legend class="text-center">Manage Bookmarks</legend>
+        <hr>
+        <p class="ps-2">
+            This is one of the main pages you'll be using to manage your bookmarks. Here you will find a list of all of your folders and the bookmarks they contain. 
+            Hidden, archived, private, and public bookmarks can all be reviewed on this page using the filter options below. Some controls may be hidden by default, 
+            so you're encouraged to toggle them to better understand your options for managing your bookmarks.
+        </p>
+        <p class="ps-2">
+            Once you start collecting hundreds and thousands of bookmarks, this page can get a bit overwhelming. We encourage you to check out our <a href="/bookmarks/dashboards" class="text-decoration-none atb-green">Dashboards</a> feature 
+            for a more robust way to interact with all your saved bookmarks. Make use of the ability to hide and archive bookmarks to keep organized as well.
+        </p>
+        <div class="text-center mt-4 pb-4">
+            <a href="/bookmarks/createBookmark" class="btn btn-outline-secondary btn-lg px-5 ms-3 atb-green-bg">Add Bookmarks</a>
+            <a href="/bookmarks/createFolder" class="btn btn-outline-secondary btn-lg px-5 ms-3 atb-green-bg">Add Folders</a>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/introduction.html b/app/plugins/bookmarks/views/introduction.html
new file mode 100644
index 0000000..c21ad72
--- /dev/null
+++ b/app/plugins/bookmarks/views/introduction.html
@@ -0,0 +1,60 @@
+<div class="container py-5">
+    <!-- Hero Section -->
+    <div class="text-center mb-5">
+      <h1 class="display-4">Welcome to <span class="text-primary">All The Bookmarks</span></h1>
+      <p class="lead">Your ultimate tool for organizing, sharing, and managing website bookmarks effortlessly.</p>
+      <img src="path/to/hero-image.jpg" alt="Illustration of bookmark organization" class="img-fluid my-4">
+      <a href="#" class="btn btn-primary btn-lg">Get Started</a>
+    </div>
+  
+    <!-- Features Section -->
+    <div class="row text-center mb-5">
+      <div class="col-md-4">
+        <i class="fas fa-folder fa-3x text-primary mb-3"></i>
+        <h5>Organize Your Bookmarks</h5>
+        <p>Create folders to keep your bookmarks tidy and easy to find.</p>
+      </div>
+      <div class="col-md-4">
+        <i class="fas fa-share-alt fa-3x text-primary mb-3"></i>
+        <h5>Share Collections</h5>
+        <p>Share dashboards with groups of folders to collaborate seamlessly.</p>
+      </div>
+      <div class="col-md-4">
+        <i class="fas fa-sync-alt fa-3x text-primary mb-3"></i>
+        <h5>Import & Export</h5>
+        <p>Sync your bookmarks across major browsers with our easy import/export tools.</p>
+      </div>
+    </div>
+  
+    <!-- Browser Extensions Section -->
+    <div class="row align-items-center mb-5">
+      <div class="col-md-6">
+        <h3>Bookmark Anytime, Anywhere</h3>
+        <p>Our browser extension works with Chrome, Firefox, Brave, Edge, and Opera, making it simple to save and manage bookmarks directly from your browser.</p>
+        <a href="#" class="btn btn-outline-primary">Install Extension</a>
+      </div>
+      <div class="col-md-6 text-center">
+        <img src="path/to/extension-image.jpg" alt="Illustration of browser extensions" class="img-fluid">
+      </div>
+    </div>
+  
+    <!-- Dashboards Section -->
+    <div class="row align-items-center mb-5">
+      <div class="col-md-6 text-center">
+        <img src="path/to/dashboard-image.jpg" alt="Illustration of dashboards" class="img-fluid">
+      </div>
+      <div class="col-md-6">
+        <h3>Dynamic Dashboards</h3>
+        <p>Group folders into dashboards and share them to keep everyone updated on the latest changes.</p>
+        <a href="#" class="btn btn-outline-primary">Learn More About Dashboards</a>
+      </div>
+    </div>
+  
+    <!-- Call to Action -->
+    <div class="text-center">
+      <h4>Ready to Get Started?</h4>
+      <p>Start organizing, sharing, and syncing your bookmarks today!</p>
+      <a href="#" class="btn btn-success btn-lg">Create Your First Folder</a>
+    </div>
+  </div>
+  
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/share.html b/app/plugins/bookmarks/views/share.html
index d1b33e7..d53159c 100644
--- a/app/plugins/bookmarks/views/share.html
+++ b/app/plugins/bookmarks/views/share.html
@@ -2,9 +2,17 @@
     <div class="offset-md-1 col-10 py-3 context-main-bg">
         <legend class="text-center">Share</legend>
         <hr>
+        {BKMTUTS}
         <div class="offset-3 col-lg-6 my-4">
-            <p>Any link or folder can be shared. By default, the extensions and app both default to <strong>private</strong>. On this page, you can quickly see a list of any public links and folders. These "public" items can be shared with anyone who has the link.</p>
+            <p class="px-2">
+                This is the share page, designed to very quickly show you what folders and urls you have set to public and have the ability to share with anyone.
+            </p>
+            <p class="px-2">
+                Any link or folder can be shared and by default, the extensions and app default to <strong>private</strong>. These "public" items can be viewed by anyone with the link provided from this page.
+            </p>
+            <hr>
         </div>
+        {/BKMTUTS}
         <div class="row g-3"  data-masonry='{ "percentPosition": false }' id="bookmarkSort">
             {LOOP}
                 {panel}
diff --git a/app/plugins/bookmarks/views/shareExplainer.html b/app/plugins/bookmarks/views/shareExplainer.html
new file mode 100644
index 0000000..b742d53
--- /dev/null
+++ b/app/plugins/bookmarks/views/shareExplainer.html
@@ -0,0 +1,12 @@
+<div class="my-4">
+    <div class="offset-2 col-8 p-3 context-main-bg">
+        <legend class="text-center">Share</legend>
+        <hr>
+        <p class="px-2">
+            This is the share page, designed to very quickly show you what folders and urls you have set to public and have the ability to share with anyone.
+        </p>
+        <p class="px-2">
+            Any link or folder can be shared and by default, the extensions and app default to <strong>private</strong>. These "public" items can be viewed by anyone with the link provided from this page.
+        </p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/shareLink.html b/app/plugins/bookmarks/views/shareLink.html
deleted file mode 100644
index e69de29..0000000
diff --git a/app/plugins/bookmarks/views/tutorials/brave/export.html b/app/plugins/bookmarks/views/tutorials/brave/export.html
new file mode 100644
index 0000000..75e41dd
--- /dev/null
+++ b/app/plugins/bookmarks/views/tutorials/brave/export.html
@@ -0,0 +1,42 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Export bookmarks from Brave</h2>
+            <hr>
+            <p class="card-text">
+                Exporting your bookmarks is lightning fast and simple inside of brave.
+            </p>
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three lines on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <h5>Step 2: Open the Export Menu</h5>
+            <p class="card-text">
+                On this page, in the top right, you should see another set of three dots, click these.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                From this list, select <strong>Export Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/tutorials/brave/import.html b/app/plugins/bookmarks/views/tutorials/brave/import.html
new file mode 100644
index 0000000..6570a13
--- /dev/null
+++ b/app/plugins/bookmarks/views/tutorials/brave/import.html
@@ -0,0 +1,44 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Import bookmarks in Brave</h2>
+            <hr>
+            <p class="card-text">
+                Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of brave.
+            </p>
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three lines on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <h5>Step 2: Open the Import Menu</h5>
+
+            <p class="card-text">
+                On this page, in the top right, you should see another set of three dots, click these.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            
+            <p class="card-text">
+                From this list, select <strong>Import Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/tutorials/brave/pin.html b/app/plugins/bookmarks/views/tutorials/brave/pin.html
new file mode 100644
index 0000000..c0d22cf
--- /dev/null
+++ b/app/plugins/bookmarks/views/tutorials/brave/pin.html
@@ -0,0 +1,35 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Brave</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Brave extension, you can find it in the 
+                <a href="/brave" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
+            </div>
+            <p class="card-text">
+                Once installed, you can add the extension to your brave toolbar with just a few easy steps.
+            </p>
+            <h5 class="mt-4">Step 1: Find the extensions icon on your toolbar.</h5>
+            <p class="card-text">
+                It should look like this:
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/extensions-icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
+            <p class="card-text">
+                Next to AllTheBookmarks, on the right you should see a pin icon, click this.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                Once pinned, you should see the AllTheBookmarks icon on the toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/tutorials/brave/settings.html b/app/plugins/bookmarks/views/tutorials/brave/settings.html
new file mode 100644
index 0000000..6b747ea
--- /dev/null
+++ b/app/plugins/bookmarks/views/tutorials/brave/settings.html
@@ -0,0 +1,33 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Access Extension Settings in Brave</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Brave extension, you can find it in the 
+                <a href="/brave" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
+            </div>
+            <p class="card-text">
+                With Brave, accessing the extension settings couldn't be easier.
+            </p>
+            <h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
+            <p class="card-text">
+                Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Options</h5>
+            <p class="card-text">
+                From the dropdown menu that appears, select <strong>Options</strong>. You should be greeted by a settings page very similar to the one below.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                (If you need help pinning the extension to your toolbar for easy access, we have a separate 
+                <a href="/bookmarks/tutorials/brave/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
+            </p>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/tutorials/chrome/export.html b/app/plugins/bookmarks/views/tutorials/chrome/export.html
new file mode 100644
index 0000000..3825dd4
--- /dev/null
+++ b/app/plugins/bookmarks/views/tutorials/chrome/export.html
@@ -0,0 +1,42 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Export bookmarks from Chrome</h2>
+            <hr>
+            <p class="card-text">
+                Exporting your bookmarks is lightning fast and simple inside of chrome.
+            </p>
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three dots on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <h5>Step 2: Open the Export Menu</h5>
+            <p class="card-text">
+                On this page, in the top right, you should see another set of three dots, click these.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                From this list, select <strong>Export Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/tutorials/chrome/import.html b/app/plugins/bookmarks/views/tutorials/chrome/import.html
new file mode 100644
index 0000000..d3957d6
--- /dev/null
+++ b/app/plugins/bookmarks/views/tutorials/chrome/import.html
@@ -0,0 +1,44 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Import bookmarks in Chrome</h2>
+            <hr>
+            <p class="card-text">
+                Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of chrome.
+            </p>
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three dots on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <h5>Step 2: Open the Import Menu</h5>
+
+            <p class="card-text">
+                On this page, in the top right, you should see another set of three dots, click these.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            
+            <p class="card-text">
+                From this list, select <strong>Import Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/tutorials/chrome/pin.html b/app/plugins/bookmarks/views/tutorials/chrome/pin.html
new file mode 100644
index 0000000..949abce
--- /dev/null
+++ b/app/plugins/bookmarks/views/tutorials/chrome/pin.html
@@ -0,0 +1,35 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Chrome</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Chrome extension, you can find it in the 
+                <a href="/chrome" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
+            </div>
+            <p class="card-text">
+                Once installed, you can add the extension to your chrome toolbar with just a few easy steps.
+            </p>
+            <h5 class="mt-4">Step 1: Find the extensions icon on your toolbar.</h5>
+            <p class="card-text">
+                It should look like this:
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/extensions-icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
+            <p class="card-text">
+                Next to AllTheBookmarks, on the right you should see a pin icon, click this.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                Once pinned, you should see the AllTheBookmarks icon on the toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/tutorials/chrome/settings.html b/app/plugins/bookmarks/views/tutorials/chrome/settings.html
new file mode 100644
index 0000000..86ddc0f
--- /dev/null
+++ b/app/plugins/bookmarks/views/tutorials/chrome/settings.html
@@ -0,0 +1,33 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Access Extension Settings in Chrome</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Chrome extension, you can find it in the 
+                <a href="/chrome" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
+            </div>
+            <p class="card-text">
+                With Chrome, accessing the extension settings couldn't be easier.
+            </p>
+            <h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
+            <p class="card-text">
+                Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Options</h5>
+            <p class="card-text">
+                From the dropdown menu that appears, select <strong>Options</strong>. You should be greeted by a settings page very similar to the one below.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                (If you need help pinning the extension to your toolbar for easy access, we have a separate 
+                <a href="/bookmarks/tutorials/chrome/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
+            </p>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/tutorials/firefox/export.html b/app/plugins/bookmarks/views/tutorials/firefox/export.html
new file mode 100644
index 0000000..8c2b172
--- /dev/null
+++ b/app/plugins/bookmarks/views/tutorials/firefox/export.html
@@ -0,0 +1,54 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Export bookmarks in Firefox</h2>
+            <hr>
+            <p class="card-text">
+                Exporting your bookmarks is lightning fast and simple inside of firefox.
+            </p>
+
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three lines on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+
+            <h5>Step 2: Open the Bookmark Menu</h5>
+            <p class="card-text">
+                In the list, select <strong>Bookmarks</strong> and another menu should appear.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, select <strong>Manage Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/manage-bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the Import Menu</h5>
+            <p class="card-text">
+                On this page, near the top left, you should see a button that says <strong>Import and Backup</strong>. Click this button and another menu should appear.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/import-export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            
+            <p class="card-text">
+                From this list, select <strong>Export Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/tutorials/firefox/import.html b/app/plugins/bookmarks/views/tutorials/firefox/import.html
new file mode 100644
index 0000000..c97d105
--- /dev/null
+++ b/app/plugins/bookmarks/views/tutorials/firefox/import.html
@@ -0,0 +1,54 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Import bookmarks in Firefox</h2>
+            <hr>
+            <p class="card-text">
+                Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of firefox.
+            </p>
+
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three lines on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+
+            <h5>Step 2: Open the Bookmark Menu</h5>
+            <p class="card-text">
+                In the list, select <strong>Bookmarks</strong> and another menu should appear.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, select <strong>Manage Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/manage-bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the Import Menu</h5>
+            <p class="card-text">
+                On this page, near the top left, you should see a button that says <strong>Import and Backup</strong>. Click this button and another menu should appear.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/import-export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            
+            <p class="card-text">
+                From this list, select <strong>Import Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/tutorials/firefox/pin.html b/app/plugins/bookmarks/views/tutorials/firefox/pin.html
new file mode 100644
index 0000000..55593f9
--- /dev/null
+++ b/app/plugins/bookmarks/views/tutorials/firefox/pin.html
@@ -0,0 +1,35 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Firefox</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Firefox add-on, you can find it in the 
+                <a href="/firefox" class="text-decoration-none text-primary" target="_blank">Firefox Store</a>.
+            </div>
+            <p class="card-text">
+                Once installed, you can add the extension to your firefox toolbar with just a few easy steps.
+            </p>
+            <h5 class="mt-4">Step 1: Find the extensions icon on your toolbar.</h5>
+            <p class="card-text">
+                It should look like this:
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/extensions-icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
+            <p class="card-text">
+                Next to AllTheBookmarks, on the right you should see a pin icon, click this.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                Once pinned, you should see the AllTheBookmarks icon on the toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/tutorials/firefox/settings.html b/app/plugins/bookmarks/views/tutorials/firefox/settings.html
new file mode 100644
index 0000000..cbb06c9
--- /dev/null
+++ b/app/plugins/bookmarks/views/tutorials/firefox/settings.html
@@ -0,0 +1,33 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Access Extension Settings in Firefox</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Firefox add-on, you can find it in the 
+                <a href="/firefox" class="text-decoration-none text-primary" target="_blank">Firefox Store</a>.
+            </div>
+            <p class="card-text">
+                With Firefox, accessing the extension settings couldn't be easier.
+            </p>
+            <h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
+            <p class="card-text">
+                Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Options</h5>
+            <p class="card-text">
+                From the dropdown menu that appears, select <strong>Options</strong>. You should be greeted by a settings page very similar to the one below.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                (If you need help pinning the extension to your toolbar for easy access, we have a separate 
+                <a href="/bookmarks/tutorials/firefox/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
+            </p>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/app/plugins/bookmarks/views/tutorials/list.html b/app/plugins/bookmarks/views/tutorials/list.html
new file mode 100644
index 0000000..8173a1c
--- /dev/null
+++ b/app/plugins/bookmarks/views/tutorials/list.html
@@ -0,0 +1,202 @@
+<section class="container my-5">
+    <h1 class="text-center mb-4">Browser Tutorials</h1>
+    <div class="row g-4">
+        <!-- Opera Section -->
+        <div class="col-md-4">
+            <div class="card h-100 shadow-sm context-main-bg">
+                <div class="card-body text-center">
+                    <i class="fab fa-opera fa-3x mb-3 atb-green"></i>
+                    <h5 class="card-title text-center">Opera</h5>
+                    <hr>
+                    <ul class="list-group list-group-flush rounded">
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/opera/pin" class="text-decoration-none atb-green">
+                                How to pin the extension to your toolbar
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/opera/settings" class="text-decoration-none atb-green">
+                                How to Open the extension settings page
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/opera/import" class="text-decoration-none atb-green">
+                                How to Import Bookmarks into the browser
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/opera/export" class="text-decoration-none atb-green">
+                                How to export Bookmarks from the browser
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    
+        <!-- Firefox Section -->
+        <div class="col-md-4">
+            <div class="card h-100 shadow-sm context-main-bg">
+                <div class="card-body text-center">
+                    <i class="fab fa-firefox fa-3x mb-3 atb-green"></i>
+                    <h5 class="card-title">Firefox</h5>
+                    <hr>
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/firefox/pin" class="text-decoration-none atb-green">
+                                How to pin the extension to your toolbar
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/firefox/settings" class="text-decoration-none atb-green">
+                                How to Open the extension settings page
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/firefox/import" class="text-decoration-none atb-green">
+                                How to Import Bookmarks into the browser
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/firefox/export" class="text-decoration-none atb-green">
+                                How to export Bookmarks from the browser
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <!-- Chrome Section -->
+        <div class="col-md-4">
+            <div class="card h-100 shadow-sm context-main-bg">
+                <div class="card-body text-center">
+                    <i class="fab fa-chrome fa-3x mb-3 atb-green"></i>
+                    <h5 class="card-title">Chrome</h5>
+                    <hr>
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/chrome/pin" class="text-decoration-none atb-green">
+                                How to pin the extension to your toolbar
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/chrome/settings" class="text-decoration-none atb-green">
+                                How to Open the extension settings page
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/chrome/import" class="text-decoration-none atb-green">
+                                How to Import Bookmarks into the browser
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/chrome/export" class="text-decoration-none atb-green">
+                                How to export Bookmarks from the browser
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <!-- Brave Section -->
+        <div class="col-md-4">
+            <div class="card h-100 shadow-sm context-main-bg">
+                <div class="card-body text-center">
+                    <i class="fab fa-brave fa-3x mb-3 atb-green"></i>
+                    <h5 class="card-title">Brave</h5>
+                    <hr>
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/brave/pin" class="text-decoration-none atb-green">
+                                How to pin the extension to your toolbar
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/brave/settings" class="text-decoration-none atb-green">
+                                How to Open the extension settings page
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/brave/import" class="text-decoration-none atb-green">
+                                How to Import Bookmarks into the browser
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/brave/export" class="text-decoration-none atb-green">
+                                How to export Bookmarks from the browser
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <!-- Edge Section -->
+        <div class="col-md-4">
+            <div class="card h-100 shadow-sm context-main-bg">
+                <div class="card-body text-center">
+                    <i class="fab fa-edge fa-3x mb-3 atb-green"></i>
+                    <h5 class="card-title">Edge</h5>
+                    <hr>
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/edge/pin" class="text-decoration-none atb-green">
+                                How to pin the extension to your toolbar
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/edge/settings" class="text-decoration-none atb-green">
+                                How to Open the extension settings page
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/edge/import" class="text-decoration-none atb-green">
+                                How to Import Bookmarks into the browser
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/edge/export" class="text-decoration-none atb-green">
+                                How to export Bookmarks from the browser
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <!-- Safari Section -->
+        <div class="col-md-4">
+            <div class="card h-100 shadow-sm context-main-bg">
+                <div class="card-body text-center">
+                    <i class="fab fa-safari fa-3x mb-3 atb-green"></i>
+                    <h5 class="card-title">Safari</h5>
+                    <hr>
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/safari/pin" class="text-decoration-none atb-green">
+                                How to pin the extension to your toolbar
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/safari/settings" class="text-decoration-none atb-green">
+                                How to Open the extension settings page
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/safari/import" class="text-decoration-none atb-green">
+                                How to Import Bookmarks into the browser
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/safari/export" class="text-decoration-none atb-green">
+                                How to export Bookmarks from the browser
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/app/plugins/members/controllers/member.php b/app/plugins/members/controllers/member.php
index 51b2e22..31959bf 100644
--- a/app/plugins/members/controllers/member.php
+++ b/app/plugins/members/controllers/member.php
@@ -174,7 +174,7 @@ class Member extends Controller {
             Session::flash( 'success', 'We aren\'t currently accepting new members, please check back soon!' );
             return Redirect::home();
         }
-        Views::view( 'members.landing', $product );
+        Views::view( 'members.join', $product );
     }
 
     public function checkout( $plan = 'monthly' ) {
@@ -210,6 +210,7 @@ class Member extends Controller {
                 'quantity' => 1,
             ]],
             'mode' => 'subscription',
+            'allow_promotion_codes' => true,
             'success_url' => $successUrl,
             'cancel_url' => Routes::getAddress() . 'member/payment/cancel',
         ]);
@@ -304,6 +305,7 @@ class Member extends Controller {
                 'quantity' => 1,
             ]],
             'mode' => 'subscription',
+            'allow_promotion_codes' => true,
             'success_url' => Routes::getAddress() . 'member/payment/complete?session_id={CHECKOUT_SESSION_ID}',
             'cancel_url' => Routes::getAddress() . 'member/payment/cancel',
         ]);
diff --git a/app/plugins/members/plugin.php b/app/plugins/members/plugin.php
index 54b0adb..b347f47 100644
--- a/app/plugins/members/plugin.php
+++ b/app/plugins/members/plugin.php
@@ -98,7 +98,6 @@ class Members extends Plugin {
             'default' => 'sk_xxxxxxxxxxxxxxx',
         ],
     ];
-
     public static $webhookEvents = [
         'customer.subscription.created',
         'customer.subscription.updated',
@@ -110,7 +109,6 @@ class Members extends Plugin {
         'invoice.payment_succeeded',
         'checkout.session.completed',
     ];
-
     public static $userLinks = [
         "url" => "{ROOT_URL}member/manage",
         "name" => "Subscriptions"
diff --git a/app/plugins/members/views/landing.html b/app/plugins/members/views/join.html
similarity index 98%
rename from app/plugins/members/views/landing.html
rename to app/plugins/members/views/join.html
index d9c397a..d124c21 100644
--- a/app/plugins/members/views/landing.html
+++ b/app/plugins/members/views/join.html
@@ -1,7 +1,7 @@
 <!-- Compare plans -->
 <div class="table-responsive pricing-container container pb-4" id="compare">
 	<h1 class="display-6 text-center my-4">Compare plans</h1>
-	<table class="table text-center context-main">
+	<table class="table text-center context-main border-white">
 		<thead>
 			<tr>
 				<th style="width: 34%;"></th>
diff --git a/app/views/footer/container.html b/app/views/footer/container.html
index 9a4859b..9e6cdb1 100644
--- a/app/views/footer/container.html
+++ b/app/views/footer/container.html
@@ -1,11 +1,11 @@
-<div class="container border-top mt-auto">
+<div class="container border-top border-white mt-auto">
     <footer class="pt-4">
         <div class="row">
             {FOOTER_LEFT}
             {FOOTER_CENTER}
             {FOOTER_RIGHT}
         </div>
-        <div class="d-flex flex-column flex-sm-row justify-content-between py-3 mt-2 border-top">
+        <div class="d-flex flex-column flex-sm-row justify-content-between py-3 mt-2 border-top border-white">
             {COPY}
             {SOCIAL}
         </div>
diff --git a/app/views/index.html b/app/views/index.html
index 27a2895..c35051c 100644
--- a/app/views/index.html
+++ b/app/views/index.html
@@ -1,5 +1,5 @@
 <!-- AllTheBookmarks - In one place -->
-<div class="px-4 pt-5 my-5 text-center border-bottom">
+<div class="px-4 pt-5 my-5 text-center border-bottom border-white">
 	<h1 class="display-4 fw-bold">AllTheBookmarks - In one place</h1>
 	<div class="col-lg-6 mx-auto">
 		<p class="lead mb-4">Quickly add and manage an internet worth of bookmarks with AllTheBookmarks, my personal favorite app for keeping track of dead memes long after they outlive their hilarity.</p>
@@ -14,7 +14,7 @@
 	</div>
 	<div class="overflow-hidden" style="max-height: 30vh;">
 		<div class="container px-5">
-			<img src="{ROOT_URL}images/manage.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
+			<img src="{ROOT_URL}images/manage.png" class="img-fluid border border-white rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
 		</div>
 	</div>
 </div>
@@ -23,7 +23,7 @@
 
 <!-- All the stuff you need -->
 <div class="container px-4 py-5" id="features">
-	<h2 class="pb-2 border-bottom atb-green">All the stuff you need, none of the stuff you don't!</h2>
+	<h2 class="pb-2 border-bottom atb-green border-white">All the stuff you need, none of the stuff you don't!</h2>
 	<div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
 		<div class="d-flex flex-column align-items-start gap-2">
 			<h3 class="fw-bold">I just wanted something cross-browser for storing bookmarks.</h3>
@@ -104,7 +104,7 @@
 
 <!-- Never Browse without it -->
 <div class="container px-4 py-5" id="extension">
-	<h2 class="pb-2 border-bottom atb-green">Never Browse without it</h2>
+	<h2 class="pb-2 border-bottom border-white atb-green">Never Browse without it</h2>
 	<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
 		<div class="col d-flex align-items-start">
 			<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
@@ -164,7 +164,7 @@
 
 <!-- Clean, Simple, Direct -->
 <div class="container my-5">
-	<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg context-main-bg">
+	<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border border-white shadow-lg context-main-bg">
 		<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
 			<h1 class="display-4 fw-bold lh-1 atb-green">Clean, Simple, Direct</h1>
 			<p class="lead">An intuitive app with a sleep, modern design is the goal. There is no need for hundreds of bells in whistles, no bluetooth, no AII to tell you what your best bookmark is, just a simple app to make life easier.</p>
@@ -187,7 +187,7 @@
 
 <!-- Built to.... work -->
 <div class="container px-4 py-5" id="featured-3">
-	<h2 class="pb-2 border-bottom">Built to.... work</h2>
+	<h2 class="pb-2 border-bottom border-white">Built to.... work</h2>
 	<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
 		<div class="feature col">
 			<div class="feature-icon d-inline-flex align-items-center justify-content-center atb-green-bg fs-2 mb-3">
@@ -218,7 +218,7 @@
 <!-- Compare plans -->
 <div class="table-responsive pricing-container container pb-4" id="compare">
 	<h1 class="display-6 text-center my-4">Compare plans</h1>
-	<table class="table text-center context-main">
+	<table class="table text-center context-main border-white">
 		<thead>
 			<tr>
 				<th style="width: 34%;"></th>
diff --git a/app/views/login.html b/app/views/login.html
index 6ed5b17..2dc0542 100644
--- a/app/views/login.html
+++ b/app/views/login.html
@@ -26,14 +26,14 @@
                                         </div>
                                     </div>
                                     <div class="text-center pt-1 mb-5 pb-1">
-                                        <button name="submit" value="submit" type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3">
+                                        <button name="submit" value="submit" type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-3 atb-green-bg">
                                                 Sign in
                                         </button>
                                         <a class="text-muted" href="{ROOT_URL}register/recover">Forgot password?</a>
                                     </div>
                                     <div class="d-flex align-items-center justify-content-center pb-4">
                                         <p class="mb-0 me-2">Don't have an account?</p>
-                                        <a href="{ROOT_URL}register" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-dark">
+                                        <a href="{ROOT_URL}register" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-dark atb-green-outline">
                                             Create new
                                         </a>
                                     </div>
diff --git a/app/views/nav/statusLoggedOut.html b/app/views/nav/statusLoggedOut.html
index aecd27d..1b28575 100644
--- a/app/views/nav/statusLoggedOut.html
+++ b/app/views/nav/statusLoggedOut.html
@@ -1,4 +1,3 @@
-
 <div class="dropdown nav-item mx-2">
     <a
         href="#"
@@ -9,50 +8,44 @@
         aria-expanded="false">
         <i class="fa fa-user"></i>
     </a>
-    <div class="dropdown-menu dropdown-menu-dark dropdown-menu-end text-small shadow" aria-labelledby="userDropdown">
+    <div class="dropdown-menu dropdown-menu-dark dropdown-menu-end text-small shadow" aria-labelledby="userDropdown" style="min-width: 300px;">
         <form method="post" action="{ROOT_URL}home/login" id="signin" class="px-4 py-3">
             <input type="hidden" name="rurl" id="rurl" value="{CURRENT_URL}">
             <input type="hidden" name="token" value="{TOKEN}">
 
             <!-- Username -->
-            <div class="form-group">
-                <input
-                id="username"
-                type="text"
-                class="form-control mb-2"
-                name="username"
-                placeholder="Username">
+            <div class="form-group mb-3">
+                <input id="username"
+                    type="text"
+                    class="form-control"
+                    name="username"
+                    placeholder="Username">
             </div>
 
             <!-- Password -->
-            <div class="form-group">
-                <input
-                id="password"
-                type="password"
-                class="form-control mb-2"
-                name="password"
-                placeholder="Password">
+            <div class="form-group mb-3">
+                <input id="password"
+                    type="password"
+                    class="form-control"
+                    name="password"
+                    placeholder="Password">
             </div>
 
-          <!-- Remember Me -->
-            <div class="form-check">
-                <input
-                type="checkbox"
-                class="form-check-input mb-2"
-                id="remember"
-                name="remember"
-                value="true">
-                <label class="form-check-label" for="remember">Remember me</label>
+            <!-- Remember Me -->
+            <div class="form-check form-switch mb-3">
+                <input class="form-check-input" type="checkbox" role="switch" name="remember" id="remember" value="true">
+                <label class="form-check-label" for="remember">Stay Logged In</label>
             </div>
 
-            <!-- Submit Button -->
-            <button
-                type="submit"
-                class="btn btn-primary btn-block"
-                name="submit"
-                value="submit">
-                Sign in
-            </button>
+            <!-- Submit and Register Buttons -->
+            <div class="d-flex gap-1">
+                <button name="submit" value="submit" type="submit" class="btn btn-primary flex-fill atb-green-bg">
+                    Sign in
+                </button>
+                <a href="{ROOT_URL}register" class="btn btn-outline-dark flex-fill atb-green-outline">
+                    Create new
+                </a>
+            </div>
         </form>
     </div>
-</div>
\ No newline at end of file
+</div>