diff --git a/archive_public_ticket_view b/archive_public_ticket_view
index a64d7c9..f044f95 100644
--- a/archive_public_ticket_view
+++ b/archive_public_ticket_view
@@ -30,7 +30,7 @@
   </div>
 </section>
 
-<section class="container-fluid bg-light pt-32 pb-60">
+<section class="container-fluid bg-dark pt-32 pb-60">
   <div class="container px-0">
     {{ page_message }}
     <div class="row mx-0 g-0 fw-wrapper-shadow">
@@ -76,7 +76,7 @@
                     <div class="px-0">
                       {{ comment | profile_avatar }}
                     </div>
-                    <div class="bg-grey p-12 br-6 w-100">
+                    <div class="bg-grey-500-600 p-12 br-6 w-100">
                       <p class="author-info">
                         <span class="semi-bold">{{ comment.user.name }}</span>
                         <span>{{ 'portal_translations.tickets.said' | t }} {{ comment.created_on | time_ago_info }}</span>
diff --git a/archive_ticket_list b/archive_ticket_list
index 53cba36..1cb4426 100644
--- a/archive_ticket_list
+++ b/archive_ticket_list
@@ -24,7 +24,7 @@
       </div>
     </div>
   </section>
-  <section class="container-fluid bg-light pt-32 pb-60">
+  <section class="container-fluid bg-dark pt-32 pb-60">
     <div class="container px-0">
     {{ page_message }}
       <div class="row mx-0 g-0 flex-row-reverse flex-lg-row tickets-list-wrapper fw-category-wrapper fw-wrapper-shadow">
diff --git a/archive_ticket_view b/archive_ticket_view
index 4f1af43..77b3838 100644
--- a/archive_ticket_view
+++ b/archive_ticket_view
@@ -29,7 +29,7 @@
     </div>
   </div>
 </section>
-<section class="container-fluid bg-light pt-32 pb-60">
+<section class="container-fluid bg-dark pt-32 pb-60">
   <div class="container px-0">
     <div class="row mx-0 g-0 fw-wrapper-shadow">
       <div class="col-lg-9 fw-content-wrapper mb-16 mb-lg-0">
@@ -86,7 +86,7 @@
                     <div class="px-0">
                       {{ comment | profile_avatar }}
                     </div>
-                    <div class="bg-grey p-12 br-6 w-100">
+                    <div class="bg-grey-500-600 p-12 br-6 w-100">
                       <p class="author-info">
                         <span class="semi-bold">{{ comment.user.name }}</span>
                         <span>{{ 'portal_translations.tickets.said' | t }} {{ comment.created_on | time_ago_info }}</span>
diff --git a/article_list b/article_list
index b41c475..2c6a040 100644
--- a/article_list
+++ b/article_list
@@ -41,7 +41,7 @@
     <div class="container">
       {{ page_message }}
         {% paginate folder.entity_collection by 10 %}
-          <section class="row fw-category-wrapper box-shadow br-12 mx-0 g-0 bg-light">
+          <section class="row fw-category-wrapper box-shadow br-12 mx-0 g-0 bg-dark">
             <ul class="fw-no-bullet fw-articles fw-section-content">
               {% for entity in paginate.collection %}
                 <li>
diff --git a/article_view b/article_view
index 6ef9469..fd92ac0 100644
--- a/article_view
+++ b/article_view
@@ -33,7 +33,7 @@
   </section>
 
   <section class="container-fluid pt-32 pb-60">
-    <div class="container fw-wrapper-shadow px-0 bg-light">
+    <div class="container fw-wrapper-shadow px-0 bg-dark">
       {{page_message}}
       <div class="row mx-0 g-0">
         <div class="col-lg-9 fw-content-wrapper mb-16 mb-lg-0">
@@ -45,7 +45,7 @@
         </div>
 
         <div class="col-lg-3 fw-sidebar-wrapper">
-          <aside class="bg-grey fw-sidebar">
+          <aside class="bg-grey-500-600 fw-sidebar">
             <div class="print mb-20">
              <a href="javascript:print()"><span class="icon-print pe-8"></span>Print</a>
             </div>
diff --git a/custom_css b/custom_css
index e69de29..3e7a322 100644
--- a/custom_css
+++ b/custom_css
@@ -0,0 +1,132 @@
+:root {
+    --main-bg-color: #18181b !important;
+    --second-bg-color: #27272a !important;
+    --main-txt-color: #fafafa !important;
+    --second-txt-color: #a7f3d0 !important;
+    --main-bd-color: #3f3f46 !important;
+    --accent-color: #0f766e !important;
+}
+body {
+    background-color: var(--main-bg-color);
+}
+.bg-dark, .bg-grey {
+    background-color: var(--main-bg-color) !important;
+    color: var(--main-txt-color) !important;
+}
+.fw-wrapper-shadow .fw-content--single-article pre.fd-callout {
+    background-color: var(--main-bg-color);
+    color: var(--main-txt-color);
+}
+.bg-light, .bg-white{
+    --bs-bg-opacity: 1;
+    background-color: var(--second-bg-color) !important;
+}
+.fw-search button,
+.fw-search button:hover {
+    background-color: var(--second-bg-color);
+    border: 1px solid var(--main-bd-color);
+    border-left:none
+}
+h3 {
+    color: var(--second-txt-color);
+}
+.form-select, .form-control, .form-control:focus, .form-check-input, .list-group-item,
+.choices__list--dropdown, .modal-content, .popover, .navbar, .navbar-collapse  {
+    background-color: var(--main-bg-color);
+    color: var(--main-txt-color);
+}
+.dropdown-menu {
+    color:#264966;
+    background-color: var(--second-bg-color);
+    background-clip:padding-box;
+    border:1px solid var(--main-bd-color);
+    border-radius:.25rem
+}
+.btn-check:focus+.btn-light,
+.btn-light,
+.btn-light:focus,
+.btn-light:hover {
+    color: var(--main-txt-color);
+    background-color:  var(--accent-color);
+    border-color: var(--main-bd-color);
+}
+.btn-check:active+.btn-light,
+.btn-check:checked+.btn-light,
+.btn-light.active,
+.btn-light:active,
+.show>.btn-light.cc-dropdown-toggle,
+.show>.btn-light.dropdown-toggle {
+    color: var(--main-txt-color);
+    background-color: var(--accent-color);
+    border-color: var(--main-bd-color);
+}
+.btn-light.disabled,
+.btn-light:disabled {
+    color:#000;
+    background-color: var(--accent-color);
+    border-color: var(--main-bd-color);
+}
+.btn-outline-light {
+    color:#fff;
+    border-color: var(--main-bd-color);
+}
+.btn-outline-light:hover {
+    color: var(--main-txt-color);
+    background-color: var(--accent-color);
+    border-color: var(--main-bd-color);
+}
+.choices__item.is-highlighted{
+    color: var(--main-txt-color);
+    background-color: var(--accent-color);        
+}
+.choices__item--disabled {
+    color: var(--main-txt-color);
+    background-color: #64748b;
+}
+.fw-search .fw-autocomplete-header .fw-search-tab, .fw-autocomplete-focus .fw-clear-all,
+.fw-autocomplete-focus .fw-clear-all:hover {
+    background-color: var(--main-bg-color);
+    color: var(--main-txt-color);
+}
+.fw-loginform-wrapper .fw-form-section .form, .fw-loginform-wrapper .fw-form-section .form .fw-or div span, .fw-wrapper-shadow .fw-content--single-article pre.fd-callout {
+    background-color: var(--main-bg-color);
+    color: var(--main-txt-color);
+}
+.fw-wrapper-shadow .fw-content--single-article .h1,
+.fw-wrapper-shadow .fw-content--single-article .h2,
+.fw-wrapper-shadow .fw-content--single-article .h3,
+.fw-wrapper-shadow .fw-content--single-article .h4,
+.fw-wrapper-shadow .fw-content--single-article .h5,
+.fw-wrapper-shadow .fw-content--single-article .h6,
+.fw-wrapper-shadow .fw-content--single-article h1,
+.fw-wrapper-shadow .fw-content--single-article h2,
+.fw-wrapper-shadow .fw-content--single-article h3,
+.fw-wrapper-shadow .fw-content--single-article h4,
+.fw-wrapper-shadow .fw-content--single-article h5,
+.fw-wrapper-shadow .fw-content--single-article h6 {
+    color: var(--second-txt-color);
+}
+.fw-autocomplete-wrapper {
+    background-color: var(--main-bg-color);
+    color: var(--main-txt-color);
+}
+.fr-highlight-change>.fr-embedly>.embedly-card>.embedly-card-hug>iframe,
+.fr-highlight-change>.fr-video>embed,
+.fr-highlight-change>.fr-video>iframe,
+.fr-highlight-change>.fr-video>video,
+.fr-highlight-change>img,
+.fr-highlight-change>p,
+.fr-view .fr-highlight-change,
+.fr-view .fr-highlight-change>span:not(.fr-tracking-deleted) {
+    color: var(--main-txt-color);
+    background-color: var(--accent-color);
+    opacity:.5
+}
+
+.fr-view .fr-class-highlighted {
+    color: var(--main-txt-color);
+    background-color: var(--accent-color);
+}
+.form-select:disabled {
+    background-color: #64748b;
+}
\ No newline at end of file
diff --git a/discussions_category b/discussions_category
index 4ca65c8..6c802de 100644
--- a/discussions_category
+++ b/discussions_category
@@ -34,7 +34,7 @@
   <section class="container-fluid px-0 py-24">
     <div class="container">
       {{ page_message }}
-      <section class="row box-shadow br-12 fw-category-wrapper mx-0 g-0 bg-light">
+      <section class="row box-shadow br-12 fw-category-wrapper mx-0 g-0 bg-dark">
         <div class="row mx-0 fw-section-content g-0">
           {% for forum in category.forums %}
               <div class="col-md-6 fw-folder">
diff --git a/discussions_home b/discussions_home
index 00b12ce..d0e791b 100644
--- a/discussions_home
+++ b/discussions_home
@@ -31,7 +31,7 @@
     <div class="container">
       {{ page_message }}
       {% if portal.my_topics.size > 0 %}
-        <section class="row fw-category-wrapper box-shadow br-12 mx-0 g-0 bg-light">
+        <section class="row fw-category-wrapper box-shadow br-12 mx-0 g-0 bg-dark">
           <div class="col-12 fw-section-heading align-items-center">
             <div class="fw-icon-holder pe-12">
               <span class="icon-category"></span>
@@ -96,7 +96,7 @@
       {% endif %}
       {% for category in portal.forum_categories %}
         {% if category.forums_count > 0 %}
-          <section class="row fw-category-wrapper box-shadow br-12 mx-0 g-0 bg-light">
+          <section class="row fw-category-wrapper box-shadow br-12 mx-0 g-0 bg-dark">
             <div class="col-12 fw-section-heading align-items-center">
               <div class="fw-icon-holder pe-12">
                 <span class="icon-category"></span>
diff --git a/header b/header
index 015c908..b97b0c5 100644
--- a/header
+++ b/header
@@ -1,5 +1,5 @@
 <header class="container-fluid px-0 fw-nav-wrapper fixed-top">
-  <section class="bg-light container-fluid">
+  <section class="bg-dark container-fluid">
     <div class="container">
       {% element 'link' %}
        {
diff --git a/my_topics b/my_topics
index bdc50c7..d72bedf 100644
--- a/my_topics
+++ b/my_topics
@@ -58,7 +58,7 @@
     <div class="container">
       {{ page_message }}
       {% paginate portal.my_topics by 10 %}
-        <section class="row fw-category-wrapper box-shadow br-12 mx-0 g-0 bg-light">
+        <section class="row fw-category-wrapper box-shadow br-12 mx-0 g-0 bg-dark">
           <ul class="fw-no-bullet fw-articles">
             {% for topic in paginate.collection %}
               <li>
diff --git a/new_topic b/new_topic
index 344022d..0c31d85 100644
--- a/new_topic
+++ b/new_topic
@@ -31,7 +31,7 @@
   </section>
 
   <section class="container-fluid pt-32 pb-60">
-    <div class="container fw-wrapper-shadow px-0 bg-light">
+    <div class="container fw-wrapper-shadow px-0 bg-dark">
       <div class="row mx-0 g-0">
         <div class="col-lg-9 fw-content-wrapper mb-16 mb-lg-0">
           <div class="fw-content fw-new-ticket">
@@ -39,7 +39,7 @@
           </div>
         </div>
         <div class="col-lg-3 fw-sidebar-wrapper">
-          <aside class="bg-grey fw-sidebar">
+          <aside class="bg-grey-500-600 fw-sidebar">
             <section class="mb-20">
                <h2 class="mb-12 fs-20 semi-bold">{{ 'portal_translations.forums.similar_topics' | t }}</h2>
                <ul class="fw-no-bullet fw-suggestions-results">
diff --git a/portal_home b/portal_home
index 68fa311..b5f8ed2 100644
--- a/portal_home
+++ b/portal_home
@@ -109,7 +109,7 @@
     </section>
   {% endif %}
 
-  <section class="container-fluid px-0 pt-60 pb-44 bg-light">
+  <section class="container-fluid px-0 pt-60 pb-44 bg-dark">
     <div class="container">
     {% if portal.has_solutions %}
       {% assign articles = portal | popular_articles:4 %}
diff --git a/preferences b/preferences
index af3038b..eb57e6c 100644
--- a/preferences
+++ b/preferences
@@ -5,7 +5,7 @@
     "footer_color": "#18181b",
     "tab_color": "#18181b",
     "tab_hover_color": "#27272a",
-    "btn_background": "#15803d",
+    "btn_background": "#facc15",
     "btn_primary_background": "#10b981",
     "base_font": "Source Sans Pro",
     "text_color": "#e4e4e7",
diff --git a/public_ticket_view b/public_ticket_view
index 187016a..34ce62c 100644
--- a/public_ticket_view
+++ b/public_ticket_view
@@ -32,7 +32,7 @@
 
 <div class="fw-fake-div mt-168 d-none"></div>
 
-<section class="container-fluid bg-light pt-32 pb-60">
+<section class="container-fluid bg-dark pt-32 pb-60">
   <div class="container px-0">
     {{ page_message }}
     <div class="row mx-0 g-0 fw-wrapper-shadow">
@@ -108,7 +108,7 @@
                     <div class="px-0">
                       {{ comment | profile_avatar }}
                     </div>
-                    <div class="bg-grey p-12 br-6 w-100">
+                    <div class="bg-grey-500-600 p-12 br-6 w-100">
                       <p class="author-info">
                         <span class="semi-bold">{{ comment.user.name }}</span>
                         <span>{{ 'portal_translations.tickets.said' | t }} {{ comment.created_on | time_ago_info }}</span>
diff --git a/search b/search
index 28253b1..9ccb527 100644
--- a/search
+++ b/search
@@ -43,7 +43,7 @@
 
       {% if portal.has_solutions and search.current_search_filter == "solutions" %}
         <h3>{{ 'portal_translations.search.filters.solutions' | t }}:</h3>
-        <section class="row fw-category-wrapper box-shadow br-12 mx-0 mt-16 g-0 bg-light">
+        <section class="row fw-category-wrapper box-shadow br-12 mx-0 mt-16 g-0 bg-dark">
           <ul class="fw-no-bullet fw-articles mb-24">
             {% for result in search_results['solution'] %}
               <li>
@@ -65,7 +65,7 @@
 
       {% if portal.has_forums and search.current_search_filter == "topics" %}
       <h3>{{ 'portal_translations.search.filters.topics' | t }}:</h3>
-      <section class="row fw-category-wrapper box-shadow br-12 mx-0 mt-16 g-0 bg-light">
+      <section class="row fw-category-wrapper box-shadow br-12 mx-0 mt-16 g-0 bg-dark">
         <ul class="fw-no-bullet fw-articles mb-24">
           {% for result in search_results['topic'] %}
             <li>
@@ -87,7 +87,7 @@
 
       {% if portal.has_tickets and search.current_search_filter == "tickets" %}
         <h3>{{ 'portal_translations.search.filters.tickets' | t }}:</h3>
-        <section class="row fw-category-wrapper box-shadow br-12 mx-0 mt-16 g-0 bg-light">
+        <section class="row fw-category-wrapper box-shadow br-12 mx-0 mt-16 g-0 bg-dark">
           <ul class="fw-no-bullet fw-articles mb-24">
             {% for result in search_results['ticket'] %}
               <li>
diff --git a/solution_category b/solution_category
index b6e5598..d10c03c 100644
--- a/solution_category
+++ b/solution_category
@@ -39,7 +39,7 @@
   <section class="container-fluid px-0 py-24">
     <div class="container">
       {{ page_message }}
-      <section class="row box-shadow br-12 fw-category-wrapper mx-0 g-0 bg-light">
+      <section class="row box-shadow br-12 fw-category-wrapper mx-0 g-0 bg-dark">
         <div class="row mx-0 fw-section-content g-0">
           {% for folder in category.folders %}
               <div class="col-md-6 fw-folder">
diff --git a/solution_home b/solution_home
index dfb058c..5e7e544 100644
--- a/solution_home
+++ b/solution_home
@@ -30,7 +30,7 @@
       {{page_message}}
       {% for category in portal.solution_categories %}
         {% if category.folders_count > 0 %}
-          <section class="row fw-category-wrapper box-shadow br-12 mx-0 g-0 bg-light">
+          <section class="row fw-category-wrapper box-shadow br-12 mx-0 g-0 bg-dark">
             <div class="col-12 fw-section-heading align-items-center">
               {% if category.icon %}
                 <div class="fw-fig">
diff --git a/submit_ticket b/submit_ticket
index e2a28f9..abff0b7 100644
--- a/submit_ticket
+++ b/submit_ticket
@@ -30,7 +30,7 @@
   <section class="container-fluid pt-32 pb-60">
       <div class="container px-0">
         {{ page_message }}
-        <div class="row fw-wrapper-shadow fw-new-ticket-wrapper mx-0 g-0 bg-light">
+        <div class="row fw-wrapper-shadow fw-new-ticket-wrapper mx-0 g-0 bg-dark">
           <div class="col-lg-9 fw-content-wrapper mb-16 mb-lg-0">
             <div class="fw-content fw-new-ticket">
              {% snippet new_ticket_form %}
diff --git a/ticket_list b/ticket_list
index 9414b25..d46f3dd 100644
--- a/ticket_list
+++ b/ticket_list
@@ -27,11 +27,11 @@
   <section class="container-fluid pt-32 pb-60">
     <div class="container tickets-list-container px-0">
       {{ page_message }}
-      <div class="row mx-0 g-0 bg-light flex-row-reverse flex-lg-row tickets-list-wrapper fw-category-wrapper fw-wrapper-shadow">
+      <div class="row mx-0 g-0 bg-dark flex-row-reverse flex-lg-row tickets-list-wrapper fw-category-wrapper fw-wrapper-shadow">
         <div id="ticket-list" class="col-lg-9 fw-content-wrapper mb-16 mb-lg-0">
           {% snippet ticket_list %}
         </div>
-        <div id="ticket-toolbar" class="col-lg-3 fw-sidebar-wrapper">
+        <div id="ticket-toolbar" class="col-lg-3 fw-sidebar-wrapper  bg-grey-500">
           {% snippet ticket_filters %}
         </div>
       </div>
diff --git a/ticket_view b/ticket_view
index f0197fe..774bc41 100644
--- a/ticket_view
+++ b/ticket_view
@@ -32,7 +32,7 @@
   <section class="container-fluid pt-32 pb-60">
     <div class="container px-0">
       {{ page_message }}
-      <div class="row mx-0 g-0 bg-light fw-wrapper-shadow">
+      <div class="row mx-0 g-0 bg-dark fw-wrapper-shadow">
         <div class="col-lg-9 fw-content-wrapper mb-16 mb-lg-0">
           <div class="fw-comments-wrapper line-numbers px-16 px-md-24 py-16">
             <div class="row fw-satisfaction-rating">
@@ -128,7 +128,7 @@
                       <div class="px-0">
                         {{ comment | profile_avatar }}
                       </div>
-                      <div class="bg-grey p-12 br-6 w-100">
+                      <div class="bg-grey-500-600 p-12 br-6 w-100">
                         <p class="author-info">
                           <span class="semi-bold">{{ comment.user.name }}</span>
                           <span>{{ 'portal_translations.tickets.said' | t }} {{ comment.created_on | time_ago_info }}</span>
diff --git a/topic_list b/topic_list
index 885c460..3a37ae1 100644
--- a/topic_list
+++ b/topic_list
@@ -65,7 +65,7 @@
     <div class="container pt-24">
       {{ page_message }}
       {% paginate forum.topics by 10 %}
-        <section class="row fw-category-wrapper box-shadow br-12 mx-0 g-0 bg-light">
+        <section class="row fw-category-wrapper box-shadow br-12 mx-0 g-0 bg-dark">
           <ul class="fw-no-bullet fw-articles">
             {% for topic in paginate.collection %}
               <li>
diff --git a/topic_view b/topic_view
index 7f7740a..8aceb42 100644
--- a/topic_view
+++ b/topic_view
@@ -41,7 +41,7 @@
   <section class="container-fluid pt-32 pb-60">
     <div class="container px-0">
      {{ page_message }}
-      <div class="row mx-0 g-0 bg-light fw-wrapper-shadow">
+      <div class="row mx-0 g-0 bg-dark fw-wrapper-shadow">
         <div class="col-lg-9 fw-content-wrapper mb-16 mb-lg-0">
           <div class="fw-comments-wrapper line-numbers px-16 px-md-24 py-16">
             <div class="row pb-8 mx-0 g-0">
@@ -89,7 +89,7 @@
                 <div class="px-0">
                   {{ topic.best_answer | profile_avatar }}
                 </div>
-                <div class="bg-grey p-12 br-6 w-100">
+                <div class="bg-grey-500-600 p-12 br-6 w-100">
                   <p class="author-info">
                   <span class="semi-bold">{{ topic.best_answer.user.name }}</span>
                   <span> {{ 'portal_translations.forums.posted' | t }} {{ topic.best_answer.created_on | time_ago_info }} </span>
@@ -138,7 +138,7 @@
                         <div class="px-0">
                           {{ post | profile_avatar }}
                         </div>
-                        <div class="bg-grey p-12 br-6 w-100">
+                        <div class="bg-grey-500-600 p-12 br-6 w-100">
                           <p class="author-info">
                            <span class="semi-bold">{{ post.user.name }}</span>
                            <span>{{ 'portal_translations.forums.posted' | t }} {{ post.created_on | time_ago_info }}</span>
@@ -224,7 +224,7 @@
         </div>
 
         <div class="col-lg-3 fw-sidebar-wrapper">
-          <aside class="bg-grey fw-sidebar">
+          <aside class="bg-grey-500-600 fw-sidebar">
             {% if forum.popular_topics.size > 0 %}
              <section class="mb-20">
                <h2 class="mb-12 fs-20 semi-bold">{{ 'portal_translations.forums.popular_topics' | t }}</h2>
@@ -309,7 +309,7 @@
             <ul class="fw-no-bullet fw-voters-container"></ul>
           </div>
         </div>
-        <div class="modal-footer bg-grey">
+        <div class="modal-footer bg-grey-500-600">
           <button type="button" class="btn fw-secondary-button py-8" data-bs-dismiss="modal">{{ 'portal_translations.cancel' | t }}</button>
         </div>
       </div>
@@ -322,7 +322,7 @@
           <div class="fs-18 semi-bold"><span class="icon-bin"></span> Delete Comment</div>
           <p class="fs-14 mt-12">This post will be deleted permanently. Are you sure?</p>
         </div>
-        <div class="modal-footer justify-content-center bg-grey">
+        <div class="modal-footer justify-content-center bg-grey-500-600">
           <button type="button" class="btn fw-btn-gradient py-8" data-bs-dismiss="modal">Cancel</button>
           <button type="button" class="btn fw-post-delete-confirmation fw-btn-delete py-8">Delete</button>
         </div>