diff --git a/client/src/styles/antd/override.less b/client/config/override.less
similarity index 100%
rename from client/src/styles/antd/override.less
rename to client/config/override.less
diff --git a/client/src/components/global/Aggrements/components/PrivacyPolicy/index.tsx b/client/src/components/global/Aggrements/PrivacyPolicy.tsx
similarity index 100%
rename from client/src/components/global/Aggrements/components/PrivacyPolicy/index.tsx
rename to client/src/components/global/Aggrements/PrivacyPolicy.tsx
diff --git a/client/src/components/global/Aggrements/components/TermsAndConditions/index.tsx b/client/src/components/global/Aggrements/TermsAndConditions.tsx
similarity index 100%
rename from client/src/components/global/Aggrements/components/TermsAndConditions/index.tsx
rename to client/src/components/global/Aggrements/TermsAndConditions.tsx
diff --git a/client/src/components/global/Aggrements/index.tsx b/client/src/components/global/Aggrements/index.tsx
index 0da9f536..02127e81 100644
--- a/client/src/components/global/Aggrements/index.tsx
+++ b/client/src/components/global/Aggrements/index.tsx
@@ -5,8 +5,8 @@ import { Modal } from 'antd'
 import React from 'react'
 
 // Local files
-import { PrivacyPolicy } from './components/PrivacyPolicy'
-import { TermsAndConditions } from './components/TermsAndConditions'
+import { PrivacyPolicy } from './PrivacyPolicy'
+import { TermsAndConditions } from './TermsAndConditions'
 import { AggrementsProps } from '@/@types/components'
 
 export const Aggrements: React.FC<AggrementsProps> = (props): JSX.Element => (
diff --git a/client/src/components/global/CategorySelect/index.tsx b/client/src/components/global/CategorySelect/index.tsx
deleted file mode 100644
index 3ab003bf..00000000
--- a/client/src/components/global/CategorySelect/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-// Antd dependencies
-import { TreeSelect } from 'antd'
-
-// Other dependencies
-import React, { useState, useEffect } from 'react'
-
-// Local files
-import { fetchMainCategories, fetchChildCategories } from '@/services/api'
-import { CategoryData, CategorySelectProps } from '@/@types/components'
-import './style.less'
-
-export const CategorySelect: React.FC<CategorySelectProps> = (props): JSX.Element => {
-	const [categories, setCategories] = useState<any[]>([])
-
-	useEffect(() => {
-		fetchMainCategories().then(async ({ data }) => {
-			const refactoredArray = await data.attributes.categories.map((category: CategoryData) => {
-				return {
-					id: category.id,
-					pId: 0,
-					title: category.name.toUpperCase(),
-					value: category.id,
-					disabled: (!category.is_leaf && !props.multiple),
-					isLeaf: category.is_leaf
-				}
-			})
-			setCategories(refactoredArray)
-		})
-	}, [])
-
-	const handleOnCategoryChangeEvent = (id: string, title: React.ReactNode[]): void => {
-		props.onSelect(id, title)
-	}
-
-	const handleOnCategoryLoad = async (treeNode: any) => {
-		await fetchChildCategories(treeNode.id).then(async ({ data }) => {
-			data.attributes.categories.map((item: CategoryData) => {
-				setCategories((currentState) => [...currentState, {
-					id: item.id,
-					pId: treeNode.id,
-					title: item.is_leaf ? item.name : item.name.toUpperCase(),
-					value: item.id,
-					disabled: (!item.is_leaf && !props.multiple),
-					isLeaf: item.is_leaf
-				}])
-			})
-		})
-	}
-
-	return (
-		<TreeSelect
-			treeDataSimpleMode
-			showSearch={false}
-			style={props.style}
-			multiple={props.multiple}
-			placeholder={props.placeHolder}
-			defaultValue={props.defaultValue}
-			onChange={handleOnCategoryChangeEvent}
-			loadData={handleOnCategoryLoad}
-			treeData={categories}
-			allowClear={props.allowClear}
-		/>
-	)
-}
diff --git a/client/src/components/global/CategorySelect/style.less b/client/src/components/global/CategorySelect/style.less
deleted file mode 100644
index b568b57e..00000000
--- a/client/src/components/global/CategorySelect/style.less
+++ /dev/null
@@ -1,12 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.ant-select-tree .ant-select-tree-node-content-wrapper {
-	color: #188fce;
-	font-weight: bold;
-}
-
-.ant-select-tree .ant-select-tree-treenode-disabled .ant-select-tree-node-content-wrapper {
-	color: #616161 !important;
-	cursor: default !important;
-	font-weight: bold !important;
-}
diff --git a/client/src/components/global/SignModal/components/LoginForm.tsx b/client/src/components/global/SignModal/LoginForm.tsx
similarity index 100%
rename from client/src/components/global/SignModal/components/LoginForm.tsx
rename to client/src/components/global/SignModal/LoginForm.tsx
diff --git a/client/src/components/global/SignModal/index.tsx b/client/src/components/global/SignModal/index.tsx
index 3daac360..cabed9de 100644
--- a/client/src/components/global/SignModal/index.tsx
+++ b/client/src/components/global/SignModal/index.tsx
@@ -5,7 +5,7 @@ import { Modal, Typography, Divider } from 'antd'
 import React from 'react'
 
 // Local files
-import { LoginForm } from './components/LoginForm'
+import { LoginForm } from './LoginForm'
 import { SignModalProps } from '@/@types/components'
 import './style.less'
 
diff --git a/client/src/components/pages/[feed]/FeedHeader.tsx b/client/src/components/pages/[feed]/FeedHeader.tsx
index 4d9be48f..db9c3827 100644
--- a/client/src/components/pages/[feed]/FeedHeader.tsx
+++ b/client/src/components/pages/[feed]/FeedHeader.tsx
@@ -26,19 +26,19 @@ import {
 import React, { useState } from 'react'
 import { format, parseISO } from 'date-fns'
 import { useRouter } from 'next/router'
+import stringToColor from 'string-to-color'
 
 // Local files
 import { getUserRateOfTitle, rateTitle, deleteTitle } from '@/services/api'
 import { SignModal } from '@/components/global/SignModal'
 import { API_URL } from '@/../config/constants'
 import { FeedHeaderProps } from '@/@types/pages'
-import '@/styles/components/[feed]/style.less'
+import './style.less'
 
 const FeedHeader: React.FC<FeedHeaderProps> = (props): JSX.Element => {
 	const {
 		titleData,
 		openUpdateModal,
-		categoryData,
 		accessToken,
 		averageTitleRate,
 		refreshTitleRate,
@@ -73,6 +73,18 @@ const FeedHeader: React.FC<FeedHeaderProps> = (props): JSX.Element => {
 			.catch(_error => setInitialRatingModalValue(0))
 	}
 
+	const handleTagsView = (tags: string[]) => {
+		return tags.map(tag => {
+			return (
+				<div key={tag} className={'custom-tag'} style={{ backgroundColor: stringToColor(tag) }}>
+					<Typography.Text style={{ color: (parseInt(stringToColor(tag).replace('#', ''), 16) > 0xffffff / 2) ? '#000' : '#fff', background: (parseInt(stringToColor(tag).replace('#', ''), 16) > 0xffffff / 2) ? '#fff' : '#000', opacity: 0.9 }}>
+						#{tag}
+					</Typography.Text>
+				</div>
+			)
+		})
+	}
+
 	const handleRateModalRender = (): JSX.Element => (
 		<Modal
 			transitionName='fade'
@@ -103,8 +115,8 @@ const FeedHeader: React.FC<FeedHeaderProps> = (props): JSX.Element => {
 				value: titleData.attributes.name
 			},
 			{
-				title: 'Category',
-				value: categoryData.attributes.name
+				title: 'Tags',
+				value: titleData.attributes.tags
 			},
 			{
 				title: 'Entry Count',
@@ -159,6 +171,7 @@ const FeedHeader: React.FC<FeedHeaderProps> = (props): JSX.Element => {
 									<Statistic
 										suffix={item.suffix}
 										title={item.title}
+										// @ts-ignore
 										value={item.value}
 									/>
 								</Card.Grid>
@@ -188,7 +201,7 @@ const FeedHeader: React.FC<FeedHeaderProps> = (props): JSX.Element => {
 			<PageHeader
 				title={
 					<>
-						<Tag color="#6ec49a">{categoryData.attributes.name}</Tag>
+						{handleTagsView(titleData.attributes.tags)}
 						<Row>
 							<Col style={{ margin: '0 5px -15px 0' }}>
 								<Typography.Title level={2} style={{ whiteSpace: 'pre-wrap' }}>
diff --git a/client/src/styles/components/[feed]/style.less b/client/src/components/pages/[feed]/style.less
similarity index 100%
rename from client/src/styles/components/[feed]/style.less
rename to client/src/components/pages/[feed]/style.less
diff --git a/client/src/components/pages/create-feed/Step1/index.tsx b/client/src/components/pages/create-feed/Step1/index.tsx
index 782e6b18..72f86eb4 100644
--- a/client/src/components/pages/create-feed/Step1/index.tsx
+++ b/client/src/components/pages/create-feed/Step1/index.tsx
@@ -1,17 +1,17 @@
 // Antd dependencies
-import { Form, Button, Input } from 'antd'
+import { Form, Button, Input, Select, Typography } from 'antd'
 
 // Other dependencies
 import React, { useContext, useState } from 'react'
 
 // Local files
-import { CategorySelect } from '@/components/global/CategorySelect'
 import { PageHelmet } from '@/components/global/PageHelmet'
 import { Step1Props } from '@/@types/pages'
 import { ImageUpload } from '@/components/global/ImageUpload'
 import { ListOfSimilarFeeds } from '@/components/global/ListOfSimilarFeeds'
 import { StepContext } from '@/services/step.context.service'
-import '@/styles/components/StepForm/style.less'
+import { searchTagByName } from '@/services/api'
+import '../style.less'
 
 const formItemLayout = {
 	labelCol: {
@@ -24,12 +24,14 @@ const formItemLayout = {
 
 const Step1: React.FC<Step1Props> = (props): JSX.Element => {
 	const [form] = Form.useForm()
+	const [tagResult, setTagResult] = useState([])
+	const [noTagDataMessage, setNoTagDataMessage] = useState('Enter at least 3 characters to search')
 	const [titleValue, setTitleValue] = useState('')
-	const { createTitleFormData, readableCategoryValue } = useContext(StepContext)
-	const { setCreateTitleFormData, stepMovementTo, setReadableCategoryValue } = props
+	const { createTitleFormData } = useContext(StepContext)
+	const { setCreateTitleFormData, stepMovementTo, setReadableTagValue } = props
 
-	const handleFormValidation = (): void => {
-		if (!createTitleFormData.categoryId || !form.getFieldValue('title')) return
+	const handleFormValidation = async (): Promise<void> => {
+		await form.validateFields()
 		setCreateTitleFormData({
 			...createTitleFormData,
 			name: form.getFieldValue('title')
@@ -37,12 +39,32 @@ const Step1: React.FC<Step1Props> = (props): JSX.Element => {
 		stepMovementTo('create-entry')
 	}
 
-	const handleReadableCategoryValue = (id: string | string[], title: React.ReactNode[]): void => {
+	const handleReadableTagValue = (tags: string[]): void => {
 		setCreateTitleFormData({
 			...createTitleFormData,
-			categoryId: id,
+			tags,
 		})
-		setReadableCategoryValue(title[0])
+		setReadableTagValue(tags)
+	}
+
+	const handleTagSearching = (value: string): void => {
+		if (value.length < 3) {
+			setTagResult([])
+			setNoTagDataMessage('Enter at least 3 characters to search')
+		}
+
+		else {
+			searchTagByName(value).then(({ data }) => {
+				const result = []
+
+				data.attributes.tags.map(tag => {
+					result.push(<Select.Option key={tag._id} value={tag.name}>{tag.name}</Select.Option>)
+				})
+
+				if (result.length !== 0) setTagResult(result)
+				else setTagResult([<Select.Option key={value} value={value}>{value}</Select.Option>])
+			})
+		}
 	}
 
 
@@ -73,7 +95,7 @@ const Step1: React.FC<Step1Props> = (props): JSX.Element => {
 			<Form
 				{...formItemLayout}
 				form={form}
-				initialValues={{ categoryId: createTitleFormData.categoryId, title: createTitleFormData.name }}
+				initialValues={{ tags: createTitleFormData.tags, title: createTitleFormData.name }}
 				layout="horizontal"
 				className={'stepForm'}
 			>
@@ -87,22 +109,30 @@ const Step1: React.FC<Step1Props> = (props): JSX.Element => {
 				</Form.Item>
 
 				<Form.Item
-					label="Category"
-					name="categoryId"
+					label="Tags"
+					name="tags"
 					rules={[
 						() => ({
 							validator() {
-								if (!createTitleFormData.categoryId) return Promise.reject('Please select category')
+								if (!createTitleFormData.tags || createTitleFormData.tags.length < 1) return Promise.reject('Please select atleast one tag')
 								return Promise.resolve()
 							}
 						})
 					]}
 				>
-					<CategorySelect
-						defaultValue={readableCategoryValue}
-						placeHolder="Electronic"
-						onSelect={handleReadableCategoryValue}
-					/>
+					<Select
+						mode="multiple"
+						style={{ width: '100%' }}
+						placeholder="please specify feed-related keywords"
+						onChange={handleReadableTagValue}
+						allowClear
+						onSearch={handleTagSearching}
+						notFoundContent={
+							<Typography.Text style={{ width: '100%' }}> {noTagDataMessage} </Typography.Text>
+						}
+					>
+						{tagResult}
+					</Select>
 				</Form.Item>
 
 				<Form.Item label="Title" name="title" rules={[{ required: true, message: 'Please fill the title input' }, { min: 3, message: 'Title length must be longer than 2 characters' }]}>
diff --git a/client/src/components/pages/create-feed/Step2/index.tsx b/client/src/components/pages/create-feed/Step2/index.tsx
index c572f616..7ff91f5c 100644
--- a/client/src/components/pages/create-feed/Step2/index.tsx
+++ b/client/src/components/pages/create-feed/Step2/index.tsx
@@ -1,16 +1,17 @@
 // Antd dependencies
-import { Form, Button, Descriptions, Divider, Modal, Avatar, Rate } from 'antd'
+import { Form, Button, Descriptions, Divider, Modal, Avatar, Rate, Typography } from 'antd'
 import { ExclamationCircleOutlined, LoadingOutlined } from '@ant-design/icons'
 import TextArea from 'antd/lib/input/TextArea'
 
 // Other dependencies
 import React, { useContext, useState } from 'react'
+import stringToColor from 'string-to-color'
 
 // Local files
 import { PageHelmet } from '@/components/global/PageHelmet'
 import { StepContext } from '@/services/step.context.service'
 import { Step2Props } from '@/@types/pages'
-import '@/styles/components/StepForm/style.less'
+import '../style.less'
 
 const formItemLayout = {
 	labelCol: {
@@ -23,7 +24,7 @@ const formItemLayout = {
 
 const Step2 = (props: Step2Props): JSX.Element => {
 	const [form] = Form.useForm()
-	const { createTitleFormData, readableCategoryValue, firstEntryForm, titleRate } = useContext(StepContext)
+	const { createTitleFormData, readableTagValue, firstEntryForm, titleRate } = useContext(StepContext)
 	const { stepMovementTo, setFirstEntryForm, setIsRequestReady, setTitleRate } = props
 	const [isRequestStarted, setIsRequestStarted] = useState(false)
 
@@ -79,8 +80,16 @@ const Step2 = (props: Step2Props): JSX.Element => {
 							alt="Title Image"
 						/>
 					</Descriptions.Item>
-					<Descriptions.Item label="Category">
-						{ readableCategoryValue }
+					<Descriptions.Item label="Tags">
+						{readableTagValue.map(tag => {
+							return (
+								<div key={tag} className={'custom-tag'} style={{ backgroundColor: stringToColor(tag) }}>
+									<Typography.Text style={{ color: (parseInt(stringToColor(tag).replace('#', ''), 16) > 0xffffff / 2) ? '#000' : '#fff', background: (parseInt(stringToColor(tag).replace('#', ''), 16) > 0xffffff / 2) ? '#fff' : '#000', opacity: 0.9 }}>
+										#{tag}
+									</Typography.Text>
+								</div>
+							)
+						})}
 					</Descriptions.Item>
 					<Descriptions.Item label="Title">
 						{ createTitleFormData.name }
diff --git a/client/src/components/pages/create-feed/Step3/index.tsx b/client/src/components/pages/create-feed/Step3/index.tsx
index 7828ba6c..8f8550d0 100644
--- a/client/src/components/pages/create-feed/Step3/index.tsx
+++ b/client/src/components/pages/create-feed/Step3/index.tsx
@@ -1,19 +1,20 @@
 // Antd dependencies
-import { Button, Result, Descriptions } from 'antd'
+import { Button, Result, Descriptions, Typography } from 'antd'
 
 // Other dependencies
 import React, { useContext } from 'react'
 import { useRouter } from 'next/router'
+import stringToColor from 'string-to-color'
 
 // Local files
 import { PageHelmet } from '@/components/global/PageHelmet'
 import { StepContext } from '@/services/step.context.service'
 import { Step3Props } from '@/@types/pages'
-import '@/styles/components/StepForm/style.less'
+import '../style.less'
 
 const Step3 = ({ titleSlugForRouting, feedCreatedSuccessfully }: Step3Props): JSX.Element => {
 	const router = useRouter()
-	const { createTitleFormData, readableCategoryValue, firstEntryForm } = useContext(StepContext)
+	const { createTitleFormData, readableTagValue, firstEntryForm } = useContext(StepContext)
 
 	const onFinish = () => router.push('/')
 	const handleOnPostRoute = () => router.push('/[feed]', `/${titleSlugForRouting}`)
@@ -21,8 +22,16 @@ const Step3 = ({ titleSlugForRouting, feedCreatedSuccessfully }: Step3Props): JS
 	const information = (
 		<div className={'information'}>
 			<Descriptions column={1}>
-				<Descriptions.Item label="Category">
-					{ readableCategoryValue }
+				<Descriptions.Item label="Tags">
+					{readableTagValue.map(tag => {
+						return (
+							<div key={tag} className={'custom-tag'} style={{ backgroundColor: stringToColor(tag) }}>
+								<Typography.Text style={{ color: (parseInt(stringToColor(tag).replace('#', ''), 16) > 0xffffff / 2) ? '#000' : '#fff', background: (parseInt(stringToColor(tag).replace('#', ''), 16) > 0xffffff / 2) ? '#fff' : '#000', opacity: 0.9 }}>
+									#{tag}
+								</Typography.Text>
+							</div>
+						)
+					})}
 				</Descriptions.Item>
 				<Descriptions.Item label="Title">
 					{ createTitleFormData.name }
diff --git a/client/src/styles/components/StepForm/style.less b/client/src/components/pages/create-feed/style.less
similarity index 100%
rename from client/src/styles/components/StepForm/style.less
rename to client/src/components/pages/create-feed/style.less
diff --git a/client/src/components/pages/feeds/AdditionalBlock/index.tsx b/client/src/components/pages/feeds/AdditionalBlock/index.tsx
index dcca2559..a875c7cf 100644
--- a/client/src/components/pages/feeds/AdditionalBlock/index.tsx
+++ b/client/src/components/pages/feeds/AdditionalBlock/index.tsx
@@ -61,7 +61,7 @@ export const AdditionalBlock = (): JSX.Element => {
 				<Typography.Text>
 					Feednext © 2020. All rights reserved
 				</Typography.Text>
-				<Divider style={{ marginBottom: -15, marginTop: 3 }} orientation="right">
+				<Divider style={{ marginBottom: -15, marginTop: 3, color: 'red' }} plain orientation="right">
 					<Typography.Text style={{ fontSize: 13, color: '#6ec49a' }}>
 						v{packageJson.version}
 					</Typography.Text>
diff --git a/client/src/components/pages/feeds/FlowHeader/index.tsx b/client/src/components/pages/feeds/FlowHeader/index.tsx
index 508ae578..e95bd7f3 100644
--- a/client/src/components/pages/feeds/FlowHeader/index.tsx
+++ b/client/src/components/pages/feeds/FlowHeader/index.tsx
@@ -22,22 +22,14 @@ const FlowHeader: React.FC<FlowHeaderProps> = (props): JSX.Element => {
 	}
 
 	const handleFilterReset = (): void => {
-		props.resetCategoryFilter()
+		props.beforeFilterReset()
+		props.resetTagFilter()
 		props.setSortBy(undefined)
 	}
 
 	return (
 		<Row style={{ margin: '10px -15px -25px 0', position: 'relative', zIndex: 1 }}>
 			<Col />
-			<Button
-				onClick={props.openFilterModal}
-				className={'antBtnLink'}
-				type="link"
-				style={{ marginRight: 5 }}
-				icon={<FilterFilled />}
-			>
-				FILTER
-			</Button>
 			<Dropdown
 				trigger={['click']}
 				overlay={
diff --git a/client/src/components/pages/feeds/TagSearchingBlock/index.tsx b/client/src/components/pages/feeds/TagSearchingBlock/index.tsx
new file mode 100644
index 00000000..128d88b2
--- /dev/null
+++ b/client/src/components/pages/feeds/TagSearchingBlock/index.tsx
@@ -0,0 +1,78 @@
+// Antd dependencies
+import { Card, Select, Typography } from 'antd'
+
+// Other dependencies
+import React, { useEffect, useState } from 'react'
+
+// Local files
+import { searchTagByName } from '@/services/api'
+import { TagSearchingBlockProps } from '@/@types/components/TagSearchingBlock'
+
+export const TagSearchingBlock: React.FC<TagSearchingBlockProps> = (props): JSX.Element => {
+	const [tagResult, setTagResult] = useState<any[]>([])
+	const [selectedValues, setSelectedValues] = useState<string[]>(props.tagFilter)
+	const [noDataMessage, setNoDataMessage] = useState('Enter at least 3 characters to search')
+
+	useEffect(() => {
+		setSelectedValues(props.tagFilter)
+	}, [props.tagFilter])
+
+	const handleTagSelect = (value: string): void => {
+		props.setTagFilter(value)
+	}
+
+	const handleTagSearching = (value: string): void => {
+		if (value.length < 3) {
+			setTagResult([])
+			setNoDataMessage('Enter at least 3 characters to search')
+		}
+
+		else {
+			searchTagByName(value).then(({ data }) => {
+				const result = []
+
+				data.attributes.tags.map(tag => {
+					result.push(<Select.Option key={tag._id} value={tag.name}>{tag.name}</Select.Option>)
+				})
+
+				if (result.length === 0) setNoDataMessage('Couldn\'t find any tag')
+				else setTagResult(result)
+			})
+		}
+	}
+
+	const handleDeSelect = (tag: string) => {
+		props.beforeTagDeSelect()
+		const updatedList = selectedValues.filter(value => value !== tag)
+		props.updateTagFilterList(updatedList.toString())
+	}
+
+	const handleOnTagClear = () => {
+		props.beforeTagDeSelect()
+		setTagResult([])
+		setNoDataMessage('Enter at least 3 characters to search')
+		props.updateTagFilterList('')
+	}
+
+	return (
+		<Card className="blockEdges" style={{ marginBottom: 5 }} bordered={false}>
+			<Typography.Title level={4} style={{ fontWeight: 'normal' }}> Search & Filter Tags </Typography.Title>
+			<Select
+				allowClear
+				notFoundContent={
+					<Typography.Text style={{ width: '100%' }}>{noDataMessage}</Typography.Text>
+				}
+				onClear={handleOnTagClear}
+				mode="multiple"
+				style={{ width: '100%' }}
+				placeholder="write tags that interests you"
+				value={selectedValues}
+				onSearch={handleTagSearching}
+				onSelect={handleTagSelect}
+				onDeselect={handleDeSelect}
+			>
+				{tagResult}
+			</Select>
+		</Card>
+	)
+}
diff --git a/client/src/components/pages/help/helpMenus.tsx b/client/src/components/pages/help/helpMenus.tsx
index 620301cc..1f13bf21 100644
--- a/client/src/components/pages/help/helpMenus.tsx
+++ b/client/src/components/pages/help/helpMenus.tsx
@@ -11,7 +11,7 @@ import guidePng from '@/assets/guide.png'
 import securityPng from '@/assets/privacyAndSecurity.png'
 import rulesPng from '@/assets/rulesAndReporting.png'
 import content from './content.json'
-import '@/styles/pages/help/style.less'
+import './style.less'
 
 const helpMenus = [
     { titleReadable: 'F.A.Q', title: 'f.a.q', logo: faqPng },
diff --git a/client/src/styles/pages/help/style.less b/client/src/components/pages/help/style.less
similarity index 100%
rename from client/src/styles/pages/help/style.less
rename to client/src/components/pages/help/style.less
diff --git a/client/src/components/pages/messages/ConversationList/index.tsx b/client/src/components/pages/messages/ConversationList/index.tsx
index a6837738..7283fc3e 100644
--- a/client/src/components/pages/messages/ConversationList/index.tsx
+++ b/client/src/components/pages/messages/ConversationList/index.tsx
@@ -13,7 +13,6 @@ import { API_URL } from '@/../config/constants'
 import PageLoading from '@/components/global/PageLoading'
 import { ConversationListProps } from '@/@types/pages'
 import newMessagePng from '@/assets/newMessage.png'
-import '@/styles/pages/messages/style.less'
 
 export const ConversationList: React.FC<ConversationListProps> = (props): JSX.Element => {
 	const router = useRouter()
diff --git a/client/src/components/pages/settings/account-settings/index.tsx b/client/src/components/pages/settings/account-settings/index.tsx
index 074d6388..f2aba8e5 100644
--- a/client/src/components/pages/settings/account-settings/index.tsx
+++ b/client/src/components/pages/settings/account-settings/index.tsx
@@ -10,7 +10,6 @@ import { useDispatch } from 'react-redux'
 import { uploadProfilePicture, updateUser } from '@/services/api'
 import { UPDATE_USER } from '@/redux/Actions/User'
 import { API_URL } from '@/../config/constants'
-import '@/styles/pages/settings/style.less'
 
 export const AccountSettings = (params: AccountSettingsParams): JSX.Element => {
 	const [imageUri, setImageUri] = useState(`${API_URL}/v1/user/pp?username=${params.user.username}`)
diff --git a/client/src/pages/auth/email-confirmation/index.tsx b/client/src/pages/auth/email-confirmation/index.tsx
index 63ff0c89..a99e19e4 100644
--- a/client/src/pages/auth/email-confirmation/index.tsx
+++ b/client/src/pages/auth/email-confirmation/index.tsx
@@ -11,8 +11,8 @@ import { useRouter, NextRouter } from 'next/router'
 import { PageHelmet } from '@/components/global/PageHelmet'
 import { verifyUpdatedEmail } from '@/services/api'
 import NotFoundPage from '@/pages/404'
-import '@/styles/pages/auth/email-confirmation/style.less'
 import AuthLayout from '@/layouts/AuthLayout'
+import './style.less'
 
 const EmailConfirmation: React.FunctionComponent = () => {
 	const router: NextRouter & { query: { token?: string } } = useRouter()
diff --git a/client/src/styles/pages/auth/email-confirmation/style.less b/client/src/pages/auth/email-confirmation/style.less
similarity index 100%
rename from client/src/styles/pages/auth/email-confirmation/style.less
rename to client/src/pages/auth/email-confirmation/style.less
diff --git a/client/src/pages/auth/sign-in/account-recover/index.tsx b/client/src/pages/auth/sign-in/account-recover/index.tsx
index ed7c2cd5..3ad888ec 100644
--- a/client/src/pages/auth/sign-in/account-recover/index.tsx
+++ b/client/src/pages/auth/sign-in/account-recover/index.tsx
@@ -11,7 +11,7 @@ import { PageHelmet } from '@/components/global/PageHelmet'
 import { recoverAccountWithKey } from '@/services/api'
 import NotFoundPage from '@/pages/404'
 import AuthLayout from '@/layouts/AuthLayout'
-import '@/styles/pages/auth/sign-in/account-recover/style.less'
+import './style.less'
 
 const AccountRecover: React.FunctionComponent = () => {
 	const router: NextRouter & {
diff --git a/client/src/styles/pages/auth/sign-in/account-recover/style.less b/client/src/pages/auth/sign-in/account-recover/style.less
similarity index 100%
rename from client/src/styles/pages/auth/sign-in/account-recover/style.less
rename to client/src/pages/auth/sign-in/account-recover/style.less
diff --git a/client/src/pages/auth/sign-in/forgot-password/index.tsx b/client/src/pages/auth/sign-in/forgot-password/index.tsx
index 22330586..012a8004 100644
--- a/client/src/pages/auth/sign-in/forgot-password/index.tsx
+++ b/client/src/pages/auth/sign-in/forgot-password/index.tsx
@@ -9,7 +9,7 @@ import React, { useState } from 'react'
 import { PageHelmet } from '@/components/global/PageHelmet'
 import { generateRecoveryKey } from '@/services/api'
 import AuthLayout from '@/layouts/AuthLayout'
-import '@/styles/pages/auth/sign-in/forgot-password/style.less'
+import './style.less'
 
 const ForgotPassword: React.FunctionComponent = () => {
 	const [requestOnGoing, setRequestOnGoing] = useState(false)
diff --git a/client/src/styles/pages/auth/sign-in/forgot-password/style.less b/client/src/pages/auth/sign-in/forgot-password/style.less
similarity index 100%
rename from client/src/styles/pages/auth/sign-in/forgot-password/style.less
rename to client/src/pages/auth/sign-in/forgot-password/style.less
diff --git a/client/src/pages/auth/sign-in/index.tsx b/client/src/pages/auth/sign-in/index.tsx
index f3da03a1..067de8da 100644
--- a/client/src/pages/auth/sign-in/index.tsx
+++ b/client/src/pages/auth/sign-in/index.tsx
@@ -13,8 +13,9 @@ import { SIGN_IN } from '@/redux/Actions/User'
 import { SET_ACCESS_TOKEN } from '@/redux/Actions/Global'
 import { PageHelmet } from '@/components/global/PageHelmet'
 import { signIn } from '@/services/api'
+import { withTranslation } from '@/../i18n'
 import AuthLayout from '@/layouts/AuthLayout'
-import '@/styles/pages/auth/sign-in/style.less'
+import './style.less'
 
 export declare interface FormDataType {
 	usernameOrEmail: string
@@ -22,7 +23,7 @@ export declare interface FormDataType {
 	remember: boolean
 }
 
-const Login: React.FunctionComponent = () => {
+const Login: React.FunctionComponent = ({ t }) => {
 	const router = useRouter()
 
 	const [form] = Form.useForm()
@@ -73,30 +74,30 @@ const Login: React.FunctionComponent = () => {
 					<Tabs>
 						<Tabs.TabPane
 							key="sign-in"
-							tab="Sign In"
+							tab={t("loginPage:title")}
 						>
 							<Form.Item
 								name="usernameOrEmail"
-								rules={[{ required: true, message: 'Please input your username or email!' }]}
+								rules={[{ required: true, message: t("loginPage:validationErrorEmailOrUsername") }]}
 							>
-								<Input prefix={<UserOutlined style={{ color: '#717171'}} />} placeholder="Username or Email" />
+								<Input prefix={<UserOutlined style={{ color: '#717171'}} />} placeholder={t("loginPage:usernameOrEmail")} />
 							</Form.Item>
 
-							<Form.Item name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
-								<Input.Password prefix={<LockOutlined style={{ color: '#717171'}} />} placeholder="Password" />
+							<Form.Item name="password" rules={[{ required: true, message: t("loginPage:validationErrorPassword") }]}>
+								<Input.Password prefix={<LockOutlined style={{ color: '#717171'}} />} placeholder={t("loginPage:password")} />
 							</Form.Item>
 
 							<Row>
 								<Col span={12}>
 									<Form.Item name="remember" valuePropName="checked">
-										<Checkbox>Remember me</Checkbox>
+										<Checkbox>{t("loginPage:rememberMe")}</Checkbox>
 									</Form.Item>
 								</Col>
 								<Col span={12}>
 									<Form.Item style={{ float: 'right'}}>
 										<Link href="/auth/sign-in/forgot-password">
 											<a style={{ color: '#d60d17' }}>
-													Forgot Password
+												{t("loginPage:forgotPassword")}
 											</a>
 										</Link>
 									</Form.Item>
@@ -105,11 +106,11 @@ const Login: React.FunctionComponent = () => {
 
 							<Form.Item>
 								<Button className={'submit'} size="large" type="primary" htmlType="submit">
-									{isSigning ? <LoadingOutlined /> : 'Sign In'}
+									{isSigning ? <LoadingOutlined /> : t("loginPage:signIn") }
 								</Button>
 								<Link href="/auth/sign-up">
 									<a className={'register'}>
-										Create an Account
+										{t("loginPage:createAccount")}
 									</a>
 								</Link>
 							</Form.Item>
@@ -121,4 +122,4 @@ const Login: React.FunctionComponent = () => {
 	)
 }
 
-export default Login
+export default withTranslation('loginPage')(Login)
diff --git a/client/src/styles/pages/auth/sign-in/style.less b/client/src/pages/auth/sign-in/style.less
similarity index 100%
rename from client/src/styles/pages/auth/sign-in/style.less
rename to client/src/pages/auth/sign-in/style.less
diff --git a/client/src/pages/auth/sign-up/account-verification/index.tsx b/client/src/pages/auth/sign-up/account-verification/index.tsx
index 896bcfdc..de2ded55 100644
--- a/client/src/pages/auth/sign-up/account-verification/index.tsx
+++ b/client/src/pages/auth/sign-up/account-verification/index.tsx
@@ -11,7 +11,7 @@ import { PageHelmet } from '@/components/global/PageHelmet'
 import { verifyAccount } from '@/services/api'
 import NotFoundPage from '@/pages/404'
 import AuthLayout from '@/layouts/AuthLayout'
-import '@/styles/pages/auth/sign-up/account-verification/style.less'
+import './style.less'
 
 const AccountVerification: React.FunctionComponent = () => {
 	const router: NextRouter & { query: { token?: string } } = useRouter()
diff --git a/client/src/styles/pages/auth/sign-up/account-verification/style.less b/client/src/pages/auth/sign-up/account-verification/style.less
similarity index 100%
rename from client/src/styles/pages/auth/sign-up/account-verification/style.less
rename to client/src/pages/auth/sign-up/account-verification/style.less
diff --git a/client/src/pages/auth/sign-up/index.tsx b/client/src/pages/auth/sign-up/index.tsx
index 9ae11fc0..2ef93e7d 100644
--- a/client/src/pages/auth/sign-up/index.tsx
+++ b/client/src/pages/auth/sign-up/index.tsx
@@ -11,8 +11,9 @@ import { signUp } from '@/services/api'
 import { PageHelmet } from '@/components/global/PageHelmet'
 import RegisterResult from '@/components/pages/sign-up/result'
 import { Aggrements } from '@/components/global/Aggrements'
+import { withTranslation } from '@/../i18n'
 import AuthLayout from '@/layouts/AuthLayout'
-import '@/styles/pages/auth/sign-up/style.less'
+import './style.less'
 
 export declare interface FormDataType {
 	fullName: string
@@ -21,7 +22,7 @@ export declare interface FormDataType {
 	password: string
 }
 
-const Register = () => {
+const Register: React.FunctionComponent = ({ t }) => {
 	const [requestOnGoing, setRequestOnGoing] = useState(false)
 	const [signedAccount, setSignedAccount] = useState<FormDataType | null>(null)
 	const [aggrementModalVisibility, setAggrementModalVisibilit] = useState<null | 'policy' | 'terms'>(null)
@@ -46,7 +47,7 @@ const Register = () => {
 
 	const handleSubmitButtonView = () => (
 		<Button size="large" loading={false} className={'submit'} type="primary" htmlType="submit">
-			{requestOnGoing ? <LoadingOutlined /> : 'Sign Up'}
+			{requestOnGoing ? <LoadingOutlined /> : t("registerPage:signUp")}
 		</Button>
 	)
 
@@ -72,34 +73,34 @@ const Register = () => {
 					<Tabs>
 						<Tabs.TabPane
 							key="sign-up"
-							tab="Sign Up"
+							tab={t("registerPage:title")}
 						>
 							<Form.Item
 								name="fullName"
-								rules={[{ required: true, message: 'Please input your name and surname!', whitespace: true }]}
+								rules={[{ required: true, message: t("registerPage:validationErrorFullName"), whitespace: true }]}
 							>
-								<Input prefix={<IdcardOutlined style={{ color: '#717171'}} />} placeholder="Full Name" />
+								<Input prefix={<IdcardOutlined style={{ color: '#717171'}} />} placeholder={t("registerPage:fullName")} />
 							</Form.Item>
 							<Form.Item
 								name="username"
-								rules={[{ required: true, message: 'Please input your username!', whitespace: true }]}
+								rules={[{ required: true, message: t("registerPage:validationErrorUsername"), whitespace: true }]}
 							>
-								<Input prefix={<UserOutlined style={{ color: '#717171'}} />} placeholder="Username" />
+								<Input prefix={<UserOutlined style={{ color: '#717171'}} />} placeholder={t("registerPage:username")} />
 							</Form.Item>
 							<Form.Item
 								name="email"
 								rules={[
 									{
 										type: 'email',
-										message: 'The input is not valid E-mail!',
+										message: t("registerPage:validationErrorEmail2"),
 									},
 									{
 										required: true,
-										message: 'Please input your E-mail!',
+										message: t("registerPage:validationErrorEmail"),
 									},
 								]}
 							>
-								<Input prefix={<MailOutlined style={{ color: '#717171'}} />} placeholder="Email" />
+								<Input prefix={<MailOutlined style={{ color: '#717171'}} />} placeholder={t("registerPage:email")} />
 							</Form.Item>
 
 							<Form.Item
@@ -107,12 +108,12 @@ const Register = () => {
 								rules={[
 									{
 										required: true,
-										message: 'Please input your password!',
+										message: t("registerPage:validationErrorPassword"),
 									},
 								]}
 								hasFeedback
 							>
-								<Input.Password prefix={<LockOutlined style={{ color: '#717171'}} />} placeholder="Password" />
+								<Input.Password prefix={<LockOutlined style={{ color: '#717171'}} />} placeholder={t("registerPage:password")} />
 							</Form.Item>
 
 							<Form.Item
@@ -122,19 +123,19 @@ const Register = () => {
 								rules={[
 									{
 										required: true,
-										message: 'Please confirm your password!',
+										message: t("registerPage:validationErrorConfirmPassword"),
 									},
 									({ getFieldValue }) => ({
 										validator(rule, value) {
 											if (!value || getFieldValue('password') === value) {
 												return Promise.resolve()
 											}
-											return Promise.reject('The two passwords that you entered do not match!')
+											return Promise.reject(t("registerPage:validationErrorPasswordMatch"))
 										},
 									}),
 								]}
 							>
-								<Input.Password prefix={<LockOutlined style={{ color: '#717171'}} />} placeholder="Confirm Password" />
+								<Input.Password prefix={<LockOutlined style={{ color: '#717171'}} />} placeholder={t("registerPage:confirmPassword")} />
 							</Form.Item>
 
 							<Form.Item
@@ -143,37 +144,37 @@ const Register = () => {
 								rules={[
 									{
 										validator: (_, value) =>
-											value ? Promise.resolve() : Promise.reject('You must accept the privacy policy and terms & conditions'),
+											value ? Promise.resolve() : Promise.reject(t("registerPage:validationErrorTermsAndPolicy")),
 									},
 								]}
 							>
 								<Checkbox>
-									I have read the
-									{' '}
 									<Button
 										onClick={(): void => setAggrementModalVisibilit('policy')}
 										type="link"
 										style={{ margin: 0, padding: 0 }}
 									>
-										privacy policy
+										{t("registerPage:privacyPolicy")}
 									</Button>
 									{' '}
-									and
+									,
 									{' '}
 									<Button
 										onClick={(): void => setAggrementModalVisibilit('terms')}
 										type="link"
 										style={{ margin: 0, padding: 0 }}
 									>
-										terms & conditions
+										{t("registerPage:termsAndConditions")}
 									</Button>
+									{' '}
+									{t("registerPage:readAndUnderstood")}
 								</Checkbox>
 							</Form.Item>
 							<Form.Item>
 								{handleSubmitButtonView()}
 								<Link href="/auth/sign-in">
 									<a className={'login'}>
-										Already have an Account?
+										{t("registerPage:alreadyHaveAnAccount")}
 									</a>
 								</Link>
 							</Form.Item>
@@ -185,4 +186,4 @@ const Register = () => {
 	)
 }
 
-export default Register
+export default withTranslation('registerPage')(Register)
diff --git a/client/src/styles/pages/auth/sign-up/style.less b/client/src/pages/auth/sign-up/style.less
similarity index 100%
rename from client/src/styles/pages/auth/sign-up/style.less
rename to client/src/pages/auth/sign-up/style.less
diff --git a/client/src/pages/entry/[id]/index.tsx b/client/src/pages/entry/[id]/index.tsx
index 6bf3a0e6..c88cdea9 100644
--- a/client/src/pages/entry/[id]/index.tsx
+++ b/client/src/pages/entry/[id]/index.tsx
@@ -5,31 +5,44 @@ import { ArrowUpOutlined } from '@ant-design/icons'
 // Other dependencies
 import React, { useState } from 'react'
 import { useRouter } from 'next/router'
+import stringToColor from 'string-to-color'
 
 // Local files
-import { API_URL, Guest } from '@/../config/constants'
+import { API_URL } from '@/../config/constants'
 import { TitleResponseData, EntryResponseData } from '@/@types/api'
 import { PageHelmet } from '@/components/global/PageHelmet'
 import { getEntryPageInitialValues } from '@/services/initializations/[entry]'
 import { NextPage } from 'next'
 import { EntryPageInitials } from '@/@types/initializations'
 import { AppLayout } from '@/layouts/AppLayout'
+import { Roles } from '@/enums'
 import NotFoundPage from '../../404'
 
 const Entry: NextPage<EntryPageInitials> = (props): JSX.Element => {
 	const router = useRouter()
 
 	const [title, setTitle] = useState<TitleResponseData>(props.title)
-	const [categoryName, setCategoryName] = useState<string>(props.categoryName)
 	const [averageTitleRate, setAverageTitleRate] = useState<number>(props.averageTitleRate)
 	const [entryData, setEntryData] = useState<EntryResponseData>(props.entryData)
 
 
 	if (!title) return <NotFoundPage />
 
+	const handleTagsView = (tags: string[]) => {
+		return tags.map(tag => {
+			return (
+				<div key={tag} className={'custom-tag'} style={{ backgroundColor: stringToColor(tag) }}>
+					<Typography.Text style={{ color: (parseInt(stringToColor(tag).replace('#', ''), 16) > 0xffffff / 2) ? '#000' : '#fff', background: (parseInt(stringToColor(tag).replace('#', ''), 16) > 0xffffff / 2) ? '#fff' : '#000', opacity: 0.9 }}>
+						#{tag}
+					</Typography.Text>
+				</div>
+			)
+		})
+	}
+
 	const handleHeaderTitleSection = (): JSX.Element => (
 		<>
-			<Tag color="#6ec49a"> {categoryName} </Tag>
+			{handleTagsView(title.attributes.tags)}
 			<Row>
 				<Col style={{ margin: '0 5px -15px 0' }}>
 					<Typography.Title
@@ -66,9 +79,9 @@ const Entry: NextPage<EntryPageInitials> = (props): JSX.Element => {
 	)
 
 	return (
-		<AppLayout authority={Guest}>
+		<AppLayout authority={Roles.Guest}>
 			<PageHelmet
-				title={`${title?.attributes.name} :${categoryName}`}
+				title={`${title?.attributes.name}`}
 				description={entryData?.attributes.text}
 				author={entryData?.attributes.written_by}
 				mediaTitle={title?.attributes.name}
diff --git a/client/src/pages/help/[topic-slug]/index.tsx b/client/src/pages/help/[topic-slug]/index.tsx
index eb49c8a6..3b2cb0ac 100644
--- a/client/src/pages/help/[topic-slug]/index.tsx
+++ b/client/src/pages/help/[topic-slug]/index.tsx
@@ -7,14 +7,14 @@ import React from 'react'
 // Local files
 import { AppLayout } from '@/layouts/AppLayout'
 import { PageHelmet } from '@/components/global/PageHelmet'
-import { Guest } from 'config/constants'
 import topicContent from '@/components/pages/help/content.json'
 import NotFoundPage from '@/pages/404'
 import faqPng from '@/assets/faq.png'
 import guidePng from '@/assets/guide.png'
 import securityPng from '@/assets/privacyAndSecurity.png'
 import rulesPng from '@/assets/rulesAndReporting.png'
-import '@/styles/pages/help/[topic-slug]/style.less'
+import './style.less'
+import { Roles } from '@/enums'
 
 const topicData = {
     'f.a.q': { titleReadable: 'F.A.Q', logo: faqPng },
@@ -44,7 +44,7 @@ const HelpTopic = (props): JSX.Element => {
     }
 
 	return (
-        <AppLayout authority={Guest}>
+        <AppLayout authority={Roles.Guest}>
 			<PageHelmet
                 title={props.topic.title}
                 description="Best reviews, comments, feedbacks about anything around the world"
diff --git a/client/src/styles/pages/help/[topic-slug]/style.less b/client/src/pages/help/[topic-slug]/style.less
similarity index 100%
rename from client/src/styles/pages/help/[topic-slug]/style.less
rename to client/src/pages/help/[topic-slug]/style.less
diff --git a/client/src/pages/help/index.tsx b/client/src/pages/help/index.tsx
index 18102123..97a1afea 100644
--- a/client/src/pages/help/index.tsx
+++ b/client/src/pages/help/index.tsx
@@ -8,12 +8,12 @@ import React from 'react'
 import { AppLayout } from '@/layouts/AppLayout'
 import { PageHelmet } from '@/components/global/PageHelmet'
 import { HelpMenus } from '@/components/pages/help/helpMenus'
-import { Guest } from '@/../config/constants'
+import { Roles } from '@/enums'
 
 const Help = (): JSX.Element => {
 
 	return (
-		<AppLayout authority={Guest}>
+		<AppLayout authority={Roles.Guest}>
 			<PageHelmet
                 title="Help | Feednext"
                 description="Best reviews, comments, feedbacks about anything around the world"
diff --git a/client/src/pages/messages/compose/index.tsx b/client/src/pages/messages/compose/index.tsx
index b65d3447..1f4cf768 100644
--- a/client/src/pages/messages/compose/index.tsx
+++ b/client/src/pages/messages/compose/index.tsx
@@ -12,8 +12,9 @@ import { searchUser, fetchUserByUsername } from '@/services/api'
 import { socketConnection } from '@/services/socket.service'
 import { PageHelmet } from '@/components/global/PageHelmet'
 import { FormDataType } from '@/@types/pages'
-import { API_URL, User } from '@/../config/constants'
+import { API_URL } from '@/../config/constants'
 import { AppLayout } from '@/layouts/AppLayout'
+import { Roles } from '@/enums'
 
 
 const Compose: React.FC = (): JSX.Element => {
@@ -77,7 +78,7 @@ const Compose: React.FC = (): JSX.Element => {
 	const handleOnSelect = (username: string): void => setMessageForm({ ...messageForm, to: username })
 
 	return (
-		<AppLayout authority={User}>
+		<AppLayout authority={Roles.User}>
 			<PageHelmet
 				title="Send Message"
 				description="Best reviews, comments, feedbacks about anything around the world"
diff --git a/client/src/pages/messages/index.tsx b/client/src/pages/messages/index.tsx
index c68a2e63..2295a47c 100644
--- a/client/src/pages/messages/index.tsx
+++ b/client/src/pages/messages/index.tsx
@@ -12,10 +12,10 @@ import { ConversationList } from '@/components/pages/messages/ConversationList'
 import { ChatScreen } from '@/components/pages/messages/ChatScreen/index'
 import { WelcomePage } from '@/components/pages/messages/WelcomePage'
 import { PageHelmet } from '@/components/global/PageHelmet'
-import { User } from '@/../config/constants'
 import { ConversationAttributes } from '@/@types/pages'
 import { AppLayout } from '@/layouts/AppLayout'
-import '@/styles/pages/messages/style.less'
+import './style.less'
+import { Roles } from '@/enums'
 
 const Messages = (): JSX.Element => {
 	const [currentConversations, setCurrentConversations] = useState<{
@@ -40,7 +40,7 @@ const Messages = (): JSX.Element => {
 	}
 
 	return (
-		<AppLayout authority={User}>
+		<AppLayout authority={Roles.User}>
 			<PageHelmet
 				title="Direct Messages"
 				description="Best reviews, comments, feedbacks about anything around the world"
diff --git a/client/src/styles/pages/messages/style.less b/client/src/pages/messages/style.less
similarity index 100%
rename from client/src/styles/pages/messages/style.less
rename to client/src/pages/messages/style.less
diff --git a/client/src/pages/settings/index.tsx b/client/src/pages/settings/index.tsx
index baa6596a..cf1cbf09 100644
--- a/client/src/pages/settings/index.tsx
+++ b/client/src/pages/settings/index.tsx
@@ -9,16 +9,16 @@ import { useSelector } from 'react-redux'
 // Local files
 import { AccountSettings } from '../../components/pages/settings/account-settings'
 import { PageHelmet } from '@/components/global/PageHelmet'
-import { User } from '@/../config/constants'
 import { AppLayout } from '@/layouts/AppLayout'
-import '@/styles/pages/settings/style.less'
+import { Roles } from '@/enums'
+import './style.less'
 
 const Settings = (): JSX.Element => {
 	const user = useSelector((state: any) => state.user?.attributes.user)
 	const accessToken = useSelector((state: any) => state.global.accessToken)
 
 	return (
-		<AppLayout authority={User}>
+		<AppLayout authority={Roles.User}>
 			<PageHelmet
 				title="Settings"
 				description="Best reviews, comments, feedbacks about anything around the world"
diff --git a/client/src/styles/pages/settings/style.less b/client/src/pages/settings/style.less
similarity index 100%
rename from client/src/styles/pages/settings/style.less
rename to client/src/pages/settings/style.less
diff --git a/client/src/styles/antd/global.less b/client/src/styles/antd/global.less
deleted file mode 100644
index e35704d8..00000000
--- a/client/src/styles/antd/global.less
+++ /dev/null
@@ -1,105 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-@navbar-background: #016d9b !important;
-@navbar-font-color: #eee !important;
-
-html,
-body,
-#root {
-	height: 100%;
-}
-
-.ant-layout {
-	min-height: 100vh !important;
-	background-color: #eee;
-}
-
-.antBtnLink {
-	color: rgba(0, 0, 0, 0.65) !important;
-}
-
-.custom-tag {
-	background: #6ec49a;
-	font-weight: bold;
-	color: white;
-	padding: 3px 5px;
-	display: inline;
-	line-height: 1.75;
-	font-family: 'Courier New', Courier, monospace;
-}
-
-.blockEdges {
-	border: solid rgba(0, 0, 0, .4);
-	border-radius: 5px !important;
-	border-width: 0.5px;
-}
-
-.ant-tabs > .ant-tabs-nav .ant-tabs-nav-more, .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-more {
-	display: none;
-}
-
-canvas {
-	display: block;
-}
-
-body {
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-ul,
-ol {
-	list-style: none;
-}
-
-:global(.ant-col-xxl-18) {
-	max-width: 1350px;
-}
-
-#nprogress .bar {
-	background: #6ec49a !important;
-}
-
-.navBarlogo {
-	height: 40px;
-}
-
-.ant-menu-submenu {
-	display: none !important;
-}
-
-.ant-layout-header {
-	cursor: default;
-	background-color: @navbar-background;
-	color: @navbar-font-color;
-}
-
-.ant-layout-header > ul {
-	background-color: @navbar-background;
-	color: @navbar-font-color;
-}
-
-@media (max-width: @screen-xs) {
-	.ant-table {
-		width: 100%;
-		overflow-x: auto;
-		&-thead > tr,
-		&-tbody > tr {
-			> th,
-			> td {
-				white-space: pre;
-				> span {
-					display: block;
-				}
-			}
-		}
-	}
-}
-
-// Compatible with IE11
-@media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {
-	body > .ant-layout {
-		min-height: 100vh;
-	}
-}
diff --git a/client/src/styles/pages/create-feed/style.less b/client/src/styles/pages/create-feed/style.less
deleted file mode 100644
index 9cf414b8..00000000
--- a/client/src/styles/pages/create-feed/style.less
+++ /dev/null
@@ -1,90 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.card {
-	margin-bottom: 24px;
-}
-
-.heading {
-	margin: 0 0 16px;
-	font-size: 14px;
-	line-height: 22px;
-}
-
-.steps:global(.ant-steps) {
-	max-width: 750px;
-	margin: 16px auto;
-}
-
-.errorIcon {
-	margin-right: 24px;
-	color: @error-color;
-	cursor: pointer;
-	span.anticon {
-		margin-right: 4px;
-	}
-}
-
-.errorPopover {
-	:global {
-		.ant-popover-inner-content {
-			min-width: 256px;
-			max-height: 290px;
-			padding: 0;
-			overflow: auto;
-		}
-	}
-}
-
-.errorListItem {
-	padding: 8px 16px;
-	list-style: none;
-	border-bottom: 1px solid @border-color-split;
-	cursor: pointer;
-	transition: all 0.3s;
-	&:hover {
-		background: @primary-1;
-	}
-	&:last-child {
-		border: 0;
-	}
-	.errorIcon {
-		float: left;
-		margin-top: 4px;
-		margin-right: 12px;
-		padding-bottom: 22px;
-		color: @error-color;
-	}
-	.errorField {
-		margin-top: 2px;
-		color: @text-color-secondary;
-		font-size: 12px;
-	}
-}
-
-.editable {
-	td {
-		padding-top: 13px !important;
-		padding-bottom: 12.5px !important;
-	}
-}
-
-// custom footer for fixed footer toolbar
-.advancedForm + div {
-	padding-bottom: 64px;
-}
-
-.advancedForm {
-	:global {
-		.ant-form .ant-row:last-child .ant-form-item {
-			margin-bottom: 24px;
-		}
-		.ant-table td {
-			transition: none !important;
-		}
-	}
-}
-
-.optional {
-	color: @text-color-secondary;
-	font-style: normal;
-}