diff --git a/.prettierrc b/.prettierrc
index 2353765..23a1d35 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1 +1,3 @@
-"@wordpress/prettier-config"
+{
+    "extends": "@wordpress/prettier-config"
+}
diff --git a/src/index.js b/src/index.js
index db8c5e9..9b3c4dd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,7 +10,7 @@ import { HiiveAnalytics } from '@newfold-labs/js-utility-ui-analytics';
 import Modal from './components/Modal';
 import { ReactComponent as Help } from './icons/help-plugin-sidebar-icon.svg';
 import { Analytics, LocalStorageUtils } from './utils';
-import '../styles.scss';
+import './styles/styles.scss';
 
 domReady( () => {
 	// Run only once DOM is ready, else this won't work.
diff --git a/modal.scss b/src/styles/modal.scss
similarity index 100%
rename from modal.scss
rename to src/styles/modal.scss
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
new file mode 100644
index 0000000..5ef44fe
--- /dev/null
+++ b/src/styles/styles.scss
@@ -0,0 +1,488 @@
+@import "./modal.scss";
+
+$blue: #196bde;
+$white: #fff;
+$light-gray: #f0f3f5;
+$feedback-bg: #e6fff4;
+$hover-blue: rgba(57, 172, 229, 0.1);
+$dark-gray: #1d1d1f;
+$feedback-negative: #ffdcdc;
+$border-light-gray: #dcdcdc;
+$border-color-button: #b2bcc2;
+$box-shadow-hover: #3575d3;
+$box-shadow-light: #dddfe0;
+$box-shadow-dark: rgba(0, 0, 0, 0.25);
+$gray-text: #394150;
+$blue-night-sky: #7a889d;
+
+#nfd-help-center {
+
+	* {
+		box-sizing: border-box;
+	}
+}
+
+.nfd-plugin-sidebar {
+
+	.nfd-help-center {
+
+		.feedback-container {
+
+			.feedback-button {
+				padding-left: 6px;
+				padding-right: 6px;
+			}
+
+			.feedback-question {
+				padding-top: 8px;
+			}
+		}
+	}
+}
+
+.nfd-help-center {
+	position: relative;
+	height: calc(100vh - 332px);
+	overflow-y: auto;
+	z-index: 10;
+
+	p {
+		font-size: 14px;
+
+		br {
+			content: "";
+			display: block;
+			margin-bottom: 5px; /* Adjust this value as per your requirements */
+		}
+	}
+
+	h4,
+	h3 {
+		margin: 0;
+	}
+
+	.launch-help-center {
+		text-align: center;
+		.launch-description {
+			margin: 24px 0;
+		}
+		.launch-action {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+		button {
+			width: 146px;
+			height: 36px;
+			background-color: $blue;
+			border: 1px solid $blue;
+			color: $white;
+			cursor: grab;
+		}
+		p {
+			font-size: 18px;
+		}
+		a {
+			margin-top: 16px;
+			display: block;
+			cursor: grab;
+		}
+	}
+
+	.suggestions-container {
+
+		.section-header {
+			margin-bottom: 8px !important;
+		}
+
+		.video,
+		.article {
+
+			.description {
+				line-height: 1.2em;
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				margin: 8px 0;
+			}
+
+			&:hover {
+				background: $hover-blue;
+			}
+		}
+	}
+
+	.suggestion[data-variant="video"] {
+
+		iframe {
+			height: 146px;
+			width: 248px;
+		}
+	}
+
+	.helpcenter-input-wrapper {
+		border-top: 1px solid #e2e8f0;
+		height: 254px;
+		position: fixed;
+		bottom: 0;
+		width: 356px;
+		background: #fff;
+		z-index: 1;
+
+		.search-container__wrapper {
+			padding: 0 12px;
+
+			.search-container {
+				display: flex;
+				height: 42px;
+				border-radius: 8px;
+				padding-right: 5px;
+				background-color: $light-gray;
+				margin: 16px 0px 0px;
+
+				input {
+					border: none;
+					background-color: $light-gray;
+					font-size: 13px;
+					line-height: 19px;
+					padding-left: 10px;
+					width: 100%;
+					padding-right: 30px;
+					color: $blue-night-sky;
+
+					&:focus {
+						outline: none;
+						box-shadow: none;
+					}
+				}
+
+				button {
+					box-shadow: none;
+					padding-top: 3px;
+					background-color: $light-gray;
+					border: none;
+					background: transparent;
+					cursor: pointer;
+					position: absolute;
+					right: 15px;
+					top: 25px;
+				}
+			}
+
+			.attribute {
+				display: flex;
+				justify-content: flex-end;
+				margin-top: 0;
+				padding-left: 2px;
+				padding-right: 2px;
+				color: $gray-text;
+
+				.hc-input-counter {
+					margin: 5px 0;
+				}
+
+				span {
+					font-weight: 500;
+					font-size: 12px;
+					line-height: 14px;
+					text-align: right;
+					color: $gray-text;
+				}
+			}
+
+			.multisearch-loader {
+				display: flex;
+				justify-content: center;
+			}
+		}
+	}
+
+	.suggestions-wrapper {
+		padding: 0 12px;
+		position: fixed;
+		width: 356px;
+		bottom: 254px;
+		background: white;
+
+		.algoliaResult {
+			border-radius: 24px;
+			display: flex;
+			margin-bottom: 8px;
+			padding: 10px 16px;
+			box-shadow: 0 0 0 1px $box-shadow-light;
+			transition: box-shadow 0.2s ease;
+			box-sizing: border-box;
+			cursor: pointer;
+			position: relative;
+			justify-content: space-between;
+			color: $gray-text;
+
+			p {
+				margin: 0;
+			}
+
+			.svg {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				transform: translateX(0);
+				transition: transform 0.2s ease;
+			}
+
+			&:hover {
+				box-shadow: 0 0 0 2px $box-shadow-hover;
+
+				.svg {
+					transform: translateX(2px);
+				}
+			}
+		}
+	}
+
+	.feedback-container {
+
+		display: flex;
+		justify-content: space-between;
+		padding: 15px 12px;
+
+		button {
+			border-radius: 20px;
+			border-color: $border-color-button;
+			border-width: 1px;
+			padding-top: 5%;
+			padding-bottom: 5%;
+			cursor: pointer;
+			box-shadow: none;
+		}
+
+		.feedback-button {
+			padding-left: 13px;
+			padding-right: 13px;
+			padding-bottom: 6px;
+			padding-top: 6px;
+			flex-shrink: 0;
+			white-space: nowrap;
+
+			.feedback-button-emoji {
+				margin-right: 5px;
+			}
+		}
+
+		.button-icon {
+			height: 20px;
+			width: 20px;
+			margin-right: 4px;
+		}
+
+		.yes {
+			border-bottom-right-radius: 0px;
+			border-top-right-radius: 0px;
+			border-right-width: 0px;
+		}
+
+		.no {
+			border-bottom-left-radius: 0px;
+			border-top-left-radius: 0px;
+		}
+		.selected-yes {
+			background: $feedback-bg;
+			padding-bottom: 4.4px;
+			padding-top: 5.8px;
+		}
+		.selected-no {
+			background-color: $feedback-negative;
+			padding-bottom: 4.4px;
+			padding-top: 5.8px;
+		}
+		.icon {
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	.hc-results-container {
+
+		.helpcenter-results {
+			padding: 0 12px;
+		}
+
+		.helpcenter-question-block {
+			display: flex;
+			align-items: center;
+			font-size: 13px;
+			line-height: 19px;
+			padding: 8px 12px;
+			background: #f4f8fc;
+			gap: 8px;
+
+			.helpcenter-question__user-avatar {
+				height: 24px;
+			}
+		}
+
+		.helpcenter-result-block {
+			display: flex;
+			align-items: stretch;
+			gap: 8px;
+			padding: 12px;
+
+			/* Reset default styles */
+			ul,
+			ol {
+				margin: 0;
+				padding: 0;
+				list-style-position: inside;
+			}
+
+			/* Standardize list items */
+			li {
+				margin: 0;
+				padding: 0;
+			}
+
+			&__aistars {
+				padding-top: 12px;
+			}
+		}
+	}
+}
+
+.help-container {
+	width: 356px;
+	height: 100vh;
+	overflow: hidden;
+	position: fixed;
+	right: 0;
+	background: $white;
+	display: block !important;
+	border: 1px solid $border-light-gray;
+	box-shadow: -5px 0px 36px $box-shadow-dark;
+	z-index: 9999;
+}
+
+.wpcontent-container {
+	display: flex;
+}
+
+.toplevel_page_bluehost {
+
+	@media screen and (min-width: 1814px) {
+
+		.wpcontent-container {
+			display: flex;
+
+			#wpbody {
+				flex: 1;
+
+				#bwa-app {
+					margin-left: 20px !important;
+
+					#bluehost-logo-wrap {
+						padding: 14px 0 0 12px;
+					}
+				}
+			}
+		}
+	}
+}
+
+body:is(.page, .post-php, .post-new-php) {
+
+	#wp-admin-bar-help-center {
+		display: none;
+	}
+}
+
+.mobile {
+
+	#wpadminbar {
+
+		ul#wp-admin-bar-root-default {
+
+			li {
+				width: 40px !important;
+			}
+		}
+
+		li#wp-admin-bar-help-center {
+			display: block;
+		}
+	}
+}
+
+.icon-button {
+	cursor: pointer;
+}
+
+.loading-cursor {
+	display: inline-block;
+	width: 10px;
+	height: 2px;
+	background-color: black;
+	margin-left: 5px;
+	animation: blip 1s infinite;
+	margin-top: 30px;
+}
+
+@keyframes blip {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+.hc-input-error-message {
+	color: rgb(255, 126, 126);
+	font-size: 12px;
+	margin: 5px 0 0 0;
+}
+
+.nfd-hc-modal__footer {
+	position: absolute;
+	z-index: 10;
+	bottom: 15px;
+
+	.helpcenter-supportinfo__wrapper {
+		padding: 8px 12px 8px 12px;
+
+		.helpcenter-supportinfo__text {
+			padding: 8px 0;
+		}
+
+		.helpcenter-supportinfo__telephone {
+			margin-bottom: 12px;
+
+			span {
+				margin-right: 8px;
+				vertical-align: text-top;
+
+				a {
+					text-decoration: none;
+					color: #196cdf;
+				}
+			}
+		}
+
+		.helpcenter-supportinfo__chat {
+			margin-bottom: 12px;
+
+			span {
+				margin-right: 8px;
+				vertical-align: text-top;
+
+				a {
+					text-decoration: none;
+					color: #196cdf;
+				}
+			}
+		}
+	}
+}
diff --git a/styles.scss b/styles.scss
deleted file mode 100644
index 7b82461..0000000
--- a/styles.scss
+++ /dev/null
@@ -1,458 +0,0 @@
-@import "./modal.scss";
-
-
-$blue: #196bde;
-$white: #ffffff;
-$light-gray: #F0F3F5;
-$feedback-bg: #E6FFF4;
-$hover-blue: rgba(57, 172, 229, 0.1);
-$dark-gray: #1D1D1F;
-$feedback-negative: #FFDCDC;
-$border-light-gray: #DCDCDC;
-$border-color-button: #B2BCC2;
-$box-shadow-hover: #3575d3;
-$box-shadow-light: #DDDFE0;
-$box-shadow-dark: rgba(0, 0, 0, 0.25);
-$gray-text: #394150;
-$blue-night-sky: #7A889D;
-
-#nfd-help-center{
-  * {
-    box-sizing: border-box;
-  }
-}
-
-.nfd-plugin-sidebar {
-  .nfd-help-center{
-    .feedback-container{
-      .feedback-button {
-        padding-left: 6px;
-        padding-right: 6px;
-      }
-      .feedback-question {
-        padding-top: 8px;
-      }
-    }
-  }
-}
-
-.nfd-help-center {
-  position: relative;
-  height: calc(100vh - 332px);
-  overflow-y: auto;
-
-  p{
-    font-size: 14px;
-    br{
-      content: "";
-      display: block;
-      margin-bottom: 5px;  /* Adjust this value as per your requirements */
-    }
-  }
-  h4,
-  h3 {
-    margin: 0;
-  }
-  z-index: 10;
-
-  .launch-help-center {
-    text-align: center;
-    .launch-description {
-      margin: 24px 0;
-    }
-    .launch-action {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    button {
-      width: 146px;
-      height: 36px;
-      background-color: $blue;
-      border: 1px solid $blue;
-      color: $white;
-      cursor: grab;
-    }
-    p {
-      font-size: 18px;
-    }
-    a {
-      margin-top: 16px;
-      display: block;
-      cursor: grab;
-    }
-  }
-
-  .suggestions-container {
-    .section-header {
-      margin-bottom: 8px !important;
-    }
-    .video,
-    .article {
-      .description {
-        line-height: 1.2em;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        margin: 8px 0;
-      }
-      &:hover {
-        background: $hover-blue;
-      }
-    }
-  }
-
-  .suggestion[data-variant="video"] {
-    iframe {
-      height: 146px;
-      width: 248px;
-    }
-  }
-
-  .helpcenter-input-wrapper {
-    border-top: 1px solid #E2E8F0;
-    height: 254px;
-    position: fixed;
-    bottom: 0;
-    width: 356px;
-    background: #fff;
-    z-index: 1;
-
-    .search-container__wrapper{
-      padding: 0 12px;
-  
-      .search-container {
-        display: flex;
-        height: 42px;
-        border-radius: 8px;
-        padding-right: 5px;
-        background-color: $light-gray;
-        margin: 16px 0px 0px;
-        input {
-          border: none;
-          background-color: $light-gray;
-          font-size: 13px;
-          line-height: 19px;
-          padding-left: 10px;
-          width: 100%;
-          padding-right: 30px;
-
-          color: $blue-night-sky;
-          &:focus {
-            outline: none;
-            box-shadow: none;
-          }
-        }
-
-        button {
-          box-shadow: none;
-          padding-top: 3px;
-          background-color: $light-gray;
-          border: none;
-          background: transparent;
-          cursor: pointer;
-          position: absolute;
-          right: 15px;
-          top: 25px;
-        }
-      }
-    
-      .attribute {
-        display: flex;
-        justify-content: flex-end;
-        margin-top: 0px;
-        padding-left: 2px;
-        padding-right: 2px;
-        color: $gray-text;
-        
-        .hc-input-counter{
-          margin: 5px 0;
-        }
-
-        span {
-          font-weight: 500;
-          font-size: 12px;
-          line-height: 14px;
-          text-align: right;
-          color: $gray-text;
-        }
-      }
-  
-      .multisearch-loader{
-        display: flex;
-        justify-content: center;
-      }
-    }  
-  }
-
- .suggestions-wrapper {
-    padding: 0 12px;
-    position: fixed;
-    width: 356px;
-    bottom: 254px;
-    background: white;
-
-  .algoliaResult {
-    border-radius: 24px;
-    display: flex;
-    margin-bottom: 8px;
-    padding: 10px 16px;
-    box-shadow: 0 0 0 1px $box-shadow-light;
-    transition: box-shadow .2s ease;
-    box-sizing: border-box;
-    cursor: pointer;
-    position: relative;
-    justify-content: space-between;
-    color: $gray-text;
-    p {
-      margin: 0;
-    }
-    .svg {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transform: translateX(0);
-      transition: transform 0.2s ease;
-    }
-    &:hover {
-      box-shadow: 0 0 0 2px $box-shadow-hover;
-      .svg {
-        transform: translateX(2px);
-      }
-    }
-  }
- }
-  
-
-  .feedback-container {
-    display: flex;
-    justify-content: space-between;
-    padding: 15px 12px;
-
-    button {
-      border-radius: 20px;
-      border-color: $border-color-button;
-      border-width: 1px;
-      padding-top: 5%;
-      padding-bottom: 5%;
-      cursor: pointer;
-      box-shadow: none;
-    }
-    .feedback-button {
-      padding-left: 13px;
-      padding-right: 13px;
-      padding-bottom: 6px;
-      padding-top: 6px;
-      flex-shrink: 0;
-      white-space: nowrap;
-
-      .feedback-button-emoji {
-        margin-right: 5px;
-      }
-    }
-    .button-icon {
-      height: 20px;
-      width: 20px;
-      margin-right: 4px;
-    }
-    .yes {
-      border-bottom-right-radius: 0px;
-      border-top-right-radius: 0px;
-      border-right-width: 0px;
-    }
-    .no {
-      border-bottom-left-radius: 0px;
-      border-top-left-radius: 0px;
-    }
-    .selected-yes {
-      background: $feedback-bg;
-      padding-bottom: 4.4px;
-      padding-top: 5.8px;
-    }
-    .selected-no {
-      background-color: $feedback-negative;
-      padding-bottom: 4.4px;
-      padding-top: 5.8px;
-    }
-    .icon {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .hc-results-container{
-
-    .helpcenter-results{
-      padding: 0 12px;
-    }
-    .helpcenter-question-block{
-      display: flex;
-      align-items: center;
-      font-size: 13px;
-      line-height: 19px;
-      padding: 8px 12px;
-      background: #F4F8FC;
-      gap: 8px;
-
-      .helpcenter-question__user-avatar{
-        height: 24px;
-      }
-    }
-
-    .helpcenter-result-block{
-      display: flex;
-      align-items: stretch;
-      gap: 8px;
-      padding: 12px;
-
-      /* Reset default styles */
-      ul, ol {
-        margin: 0;
-        padding: 0;
-        list-style-position: inside;
-      }
-
-      /* Standardize list items */
-      li {
-        margin: 0;
-        padding: 0;
-      }
-
-      &__aistars{
-        padding-top: 12px;
-      }
-    }
-  }
-
-}
-
-.help-container {
-  width: 356px;
-  height: 100vh;
-  overflow: hidden;
-  position: fixed;
-  right: 0;
-  background: $white;
-  display: block !important;
-  border: 1px solid $border-light-gray;
-  box-shadow: -5px 0px 36px $box-shadow-dark;
-  z-index: 9999;
-}
-
-.wpcontent-container {
-  display: flex;
-  // display: flex;
-  // margin-right: 300px;
-}
-
-.toplevel_page_bluehost {
-  @media screen and (min-width: 1814px) {
-    .wpcontent-container {
-      display: flex;
-
-      #wpbody {
-        flex: 1;
-        #bwa-app {
-          margin-left: 20px !important;
-          #bluehost-logo-wrap {
-            padding: 14px 0 0 12px;
-          }
-        }
-      }
-    }
-  }
-}
-
-body:is(.page, .post-php, .post-new-php) {
-  #wp-admin-bar-help-center {
-    display: none;
-  }
-}
-
-.mobile {
-  #wpadminbar {
-    ul#wp-admin-bar-root-default {
-      li {
-        width: 40px !important;
-      }
-    }
-    li#wp-admin-bar-help-center {
-      display: block;
-    }
-  }
-}
-
-.icon-button {
-  cursor: pointer;  
-}
-
-.loading-cursor {
-  display: inline-block;
-  width: 10px;
-  height: 2px;
-  background-color: black;
-  margin-left: 5px;
-  animation: blip 1s infinite;
-  margin-top: 30px;
-}
-
-@keyframes blip {
-  0% {
-      opacity: 1;
-  }
-  50% {
-      opacity: 0;
-  }
-  100% {
-      opacity: 1;
-  }
-}
-
-.hc-input-error-message{
-  color: rgb(255, 126, 126);
-  font-size: 12px;
-  margin: 5px 0 0 0;
-}
-.nfd-hc-modal__footer{
-  position: absolute;
-  z-index: 10;
-  bottom: 15px;
-
-  .helpcenter-supportinfo__wrapper {
-    padding: 8px 12px 8px 12px;
-  
-    .helpcenter-supportinfo__text{
-      padding: 8px 0;
-    }
-    .helpcenter-supportinfo__telephone {
-      margin-bottom: 12px;
-  
-      span{
-        margin-right: 8px;
-        vertical-align: text-top;
-        
-        a{
-          text-decoration: none;
-          color: #196CDF;
-        }
-      }
-    }
-  
-    .helpcenter-supportinfo__chat {
-      margin-bottom: 12px;
-  
-      span{
-        margin-right: 8px;
-        vertical-align: text-top;
-  
-        a{
-          text-decoration: none;
-          color: #196CDF;
-        }
-      }
-    }
-  }
-}