diff --git a/ui/element/package.json b/ui/element/package.json
index 8b5c9fa9f..69e51c2d0 100644
--- a/ui/element/package.json
+++ b/ui/element/package.json
@@ -12,9 +12,9 @@
     "esm",
     "alwatr"
   ],
-  "main": "element.js",
+  "main": "index.js",
   "type": "module",
-  "types": "element.d.ts",
+  "types": "index.d.ts",
   "author": "S. Ali Mihandoost <ali.mihandoost@gmail.com> (https://ali.mihandoost.com)",
   "license": "MIT",
   "files": [
diff --git a/ui/element/src/dummy-element.ts b/ui/element/src/dummy-element.ts
new file mode 100644
index 000000000..a8f316793
--- /dev/null
+++ b/ui/element/src/dummy-element.ts
@@ -0,0 +1,10 @@
+import {LitElement} from 'lit';
+
+import {LoggerMixin} from './mixins/logging.js';
+
+/**
+ * Alwatr Dummy Element
+ *
+ * Include: LoggerMixin
+ */
+export const AlwatrDummyElement = LoggerMixin(LitElement);
diff --git a/ui/element/src/element.ts b/ui/element/src/index.ts
similarity index 58%
rename from ui/element/src/element.ts
rename to ui/element/src/index.ts
index 9c4b771d3..4d6bb3778 100644
--- a/ui/element/src/element.ts
+++ b/ui/element/src/index.ts
@@ -1,11 +1,11 @@
 import {alwatrRegisteredList} from '@alwatr/logger';
-import {LitElement} from 'lit';
 
-import {LoggerMixin} from './mixins/logging.js';
-import {SignalMixin} from './mixins/signal.js';
-import {AlwatrRootElement} from './root.js';
+export * from './dummy-element.js';
+export * from './smart-element.js';
+export * from './root-element.js';
 
-export {LoggerMixin, SignalMixin, AlwatrRootElement};
+export * from './mixins/localize.js';
+export * from './mixins/direction.js';
 
 export * from 'lit';
 export * from 'lit/decorators.js';
@@ -21,5 +21,3 @@ alwatrRegisteredList.push({
   version: '{{ALWATR_VERSION}}',
 });
 
-export const AlwatrDummyElement = LoggerMixin(LitElement);
-export const AlwatrSmartElement = SignalMixin(LoggerMixin(LitElement));
diff --git a/ui/element/src/mixins/logging.ts b/ui/element/src/mixins/logging.ts
index 6362e5392..758ef6744 100644
--- a/ui/element/src/mixins/logging.ts
+++ b/ui/element/src/mixins/logging.ts
@@ -1,17 +1,16 @@
 import {createLogger} from '@alwatr/logger';
-import {LitElement} from 'lit';
 
 import type {Constructor} from '../type.js';
 import type {AlwatrLogger} from '@alwatr/logger/type.js';
-import type {PropertyValues} from 'lit';
+import type {LitElement, PropertyValues} from 'lit';
 
 export declare class LoggerMixinInterface extends LitElement {
   protected _logger: AlwatrLogger;
 }
 
-export function LoggerMixin<ClassType extends Constructor<LitElement>>(
-    superClass: ClassType,
-): Constructor<LoggerMixinInterface> & ClassType {
+export function LoggerMixin<T extends Constructor<LitElement>>(
+    superClass: T,
+): Constructor<LoggerMixinInterface> & T {
   class LoggerMixinClass extends superClass {
     protected _logger = createLogger(`<${this.tagName.toLowerCase()}>`);
 
@@ -55,5 +54,5 @@ export function LoggerMixin<ClassType extends Constructor<LitElement>>(
     }
   }
 
-  return LoggerMixinClass as unknown as Constructor<LoggerMixinInterface> & ClassType;
+  return LoggerMixinClass as unknown as Constructor<LoggerMixinInterface> & T;
 }
diff --git a/ui/element/src/mixins/signal.ts b/ui/element/src/mixins/signal.ts
index cd102a68e..d85eafc6e 100644
--- a/ui/element/src/mixins/signal.ts
+++ b/ui/element/src/mixins/signal.ts
@@ -1,14 +1,13 @@
-import {LitElement} from 'lit';
-
 import type {Constructor} from '../type.js';
+import type {LitElement} from 'lit';
 
 export declare class SignalMixinInterface extends LitElement {
   protected _signalListenerList: Array<unknown>;
 }
 
-export function SignalMixin<ClassType extends Constructor<LitElement>>(
-    superClass: ClassType,
-): Constructor<SignalMixinInterface> & ClassType {
+export function SignalMixin<T extends Constructor<LitElement>>(
+    superClass: T,
+): Constructor<SignalMixinInterface> & T {
   class SignalMixinClass extends superClass {
     protected _signalListenerList: Array<Record<string, unknown>> = [];
 
@@ -23,5 +22,5 @@ export function SignalMixin<ClassType extends Constructor<LitElement>>(
     }
   }
 
-  return SignalMixinClass as unknown as Constructor<SignalMixinInterface> & ClassType;
+  return SignalMixinClass as unknown as Constructor<SignalMixinInterface> & T;
 }
diff --git a/ui/element/src/root.ts b/ui/element/src/root-element.ts
similarity index 84%
rename from ui/element/src/root.ts
rename to ui/element/src/root-element.ts
index 981e35f67..d39219d7c 100644
--- a/ui/element/src/root.ts
+++ b/ui/element/src/root-element.ts
@@ -1,17 +1,19 @@
 import {l10n} from '@alwatr/i18n';
 import {router} from '@alwatr/router';
-import {LitElement, html, css} from 'lit';
+import {html, css} from 'lit';
 import {cache} from 'lit/directives/cache.js';
 
-import {LoggerMixin} from './mixins/logging.js';
+import {AlwatrSmartElement} from './smart-element.js';
 
 import type {RoutesConfig} from '@alwatr/router';
 import type {CSSResultGroup} from 'lit';
 
 /**
- * Alwatr Root Base Element
+ * Alwatr Root Element
+ *
+ * Include: AlwatrSmartElement, root styles, router config, multi-page render
  */
-export class AlwatrRootElement extends LoggerMixin(LitElement) {
+export class AlwatrRootElement extends AlwatrSmartElement {
   static override styles: CSSResultGroup = css`
     :host {
       display: flex;
diff --git a/ui/element/src/smart-element.ts b/ui/element/src/smart-element.ts
new file mode 100644
index 000000000..c4c97359d
--- /dev/null
+++ b/ui/element/src/smart-element.ts
@@ -0,0 +1,9 @@
+import {AlwatrDummyElement} from './dummy-element.js';
+import {SignalMixin} from './mixins/signal.js';
+
+/**
+ * Alwatr Smart Element
+ *
+ * Include: SignalMixin, AlwatrDummyElement
+ */
+export const AlwatrSmartElement = SignalMixin(AlwatrDummyElement);