diff --git a/aranroig/app/app.vue b/aranroig/app/app.vue
index d5cc87f..cc597e5 100644
--- a/aranroig/app/app.vue
+++ b/aranroig/app/app.vue
@@ -1,8 +1,33 @@
+
+ Aran Central
+
-
Hi
-
This is website
-
Maybe its not my person
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/aranroig/app/assets/css/colors.scss b/aranroig/app/assets/css/colors.scss
new file mode 100644
index 0000000..d75367b
--- /dev/null
+++ b/aranroig/app/assets/css/colors.scss
@@ -0,0 +1,32 @@
+$themes: (
+ dark: (
+ background: #1e1e1e,
+ background-line: #2e2e2e,
+ border-color: #5a5a5a,
+ text: #ffffff,
+ ),
+ light: (
+ background: #ffffff,
+ background-line: #f0f0f0,
+ border-color: #e0e0e0,
+ text: #1e1e1e,
+ )
+);
+
+@mixin theme-vars($theme-map) {
+ @each $name, $value in $theme-map {
+ --color-#{$name}: #{$value};
+ }
+}
+
+:root {
+ @include theme-vars(map-get($themes, light));
+}
+
+[data-theme="dark"] {
+ @include theme-vars(map-get($themes, dark));
+}
+
+[data-theme="ocean"] {
+ @include theme-vars(map-get($themes, ocean));
+}
\ No newline at end of file
diff --git a/aranroig/app/assets/css/fonts.scss b/aranroig/app/assets/css/fonts.scss
new file mode 100644
index 0000000..99f3977
--- /dev/null
+++ b/aranroig/app/assets/css/fonts.scss
@@ -0,0 +1,6 @@
+@font-face {
+ font-family: 'Hurmit';
+ src: url('@/assets/fonts/HurmitNerdFontMono-Regular.otf') format('opentype');
+ font-weight: normal;
+ font-style: normal;
+}
\ No newline at end of file
diff --git a/aranroig/app/assets/css/main.scss b/aranroig/app/assets/css/main.scss
new file mode 100644
index 0000000..aa9e0c9
--- /dev/null
+++ b/aranroig/app/assets/css/main.scss
@@ -0,0 +1,25 @@
+body {
+ background-size: 28px 28px;
+ background-image:
+ linear-gradient(to right, var(--color-background-line) 1px, transparent 1px),
+ linear-gradient(to bottom, var(--color-background-line) 1px, var(--color-background) 1px);
+
+ margin: 0;
+ padding: 0;
+ min-height: 100vh;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+}
+
+* {
+ color: var(--color-text);
+ font-family: 'Hurmit';
+}
+
+.pixelated {
+ image-rendering: pixelated; /* good for pixel art or low-res images */
+ /* OR for standard crisp images */
+ image-rendering: crisp-edges;
+ pointer-events: none;
+}
\ No newline at end of file
diff --git a/aranroig/app/assets/fonts/HurmitNerdFontMono-Bold.otf b/aranroig/app/assets/fonts/HurmitNerdFontMono-Bold.otf
new file mode 100644
index 0000000..4062211
Binary files /dev/null and b/aranroig/app/assets/fonts/HurmitNerdFontMono-Bold.otf differ
diff --git a/aranroig/app/assets/fonts/HurmitNerdFontMono-BoldItalic.otf b/aranroig/app/assets/fonts/HurmitNerdFontMono-BoldItalic.otf
new file mode 100644
index 0000000..b7e6c25
Binary files /dev/null and b/aranroig/app/assets/fonts/HurmitNerdFontMono-BoldItalic.otf differ
diff --git a/aranroig/app/assets/fonts/HurmitNerdFontMono-Italic.otf b/aranroig/app/assets/fonts/HurmitNerdFontMono-Italic.otf
new file mode 100644
index 0000000..605e74c
Binary files /dev/null and b/aranroig/app/assets/fonts/HurmitNerdFontMono-Italic.otf differ
diff --git a/aranroig/app/assets/fonts/HurmitNerdFontMono-Light.otf b/aranroig/app/assets/fonts/HurmitNerdFontMono-Light.otf
new file mode 100644
index 0000000..b6b3739
Binary files /dev/null and b/aranroig/app/assets/fonts/HurmitNerdFontMono-Light.otf differ
diff --git a/aranroig/app/assets/fonts/HurmitNerdFontMono-LightItalic.otf b/aranroig/app/assets/fonts/HurmitNerdFontMono-LightItalic.otf
new file mode 100644
index 0000000..e3b04ee
Binary files /dev/null and b/aranroig/app/assets/fonts/HurmitNerdFontMono-LightItalic.otf differ
diff --git a/aranroig/app/assets/fonts/HurmitNerdFontMono-Regular.otf b/aranroig/app/assets/fonts/HurmitNerdFontMono-Regular.otf
new file mode 100644
index 0000000..0b927f5
Binary files /dev/null and b/aranroig/app/assets/fonts/HurmitNerdFontMono-Regular.otf differ
diff --git a/aranroig/app/assets/fonts/LICENSE b/aranroig/app/assets/fonts/LICENSE
new file mode 100644
index 0000000..6dde5dd
--- /dev/null
+++ b/aranroig/app/assets/fonts/LICENSE
@@ -0,0 +1,94 @@
+Copyright (c) 2013, Pablo Caro - http://pcaro.es/
+with Reserved Font Name Hermit.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/aranroig/app/assets/fonts/README.md b/aranroig/app/assets/fonts/README.md
new file mode 100644
index 0000000..60399ed
--- /dev/null
+++ b/aranroig/app/assets/fonts/README.md
@@ -0,0 +1,64 @@
+# Nerd Fonts
+
+This is an archived font from the Nerd Fonts release v3.4.0.
+
+For more information see:
+* https://github.com/ryanoasis/nerd-fonts/
+* https://github.com/ryanoasis/nerd-fonts/releases/latest/
+
+# Hermit
+
+**Hermit** is a monospace font designed to be clear, pragmatic and very readable.
+
+https://pcaro.es/p/hermit
+
+For more information have a look at the upstream website: https://github.com/pcaro90/hermit
+
+Version: 2.0
+
+## Why `Hurmit` and not `Hermit`?
+
+What's in a name? The reason for the name change is to comply with the SIL Open Font License (OFL), in particular the [Reserved Font Name mechanism][SIL-RFN]
+
+Some fonts have parts of their name "reserved" per the [Reserved Font Name mechanism][SIL-RFN]:
+> No Modified Version of the Font Software may use the Reserved Font
+> Name(s) unless explicit written permission is granted by the corresponding
+> Copyright Holder. This restriction only applies to the primary font name as
+> presented to the users.
+
+- The main goals seem to be to: `Avoid collisions`, `Protect authors`, `Minimize support`, and `Encourage derivatives`
+
+See the [Reserved Font Name section][SIL-RFN] for additional information
+
+## Which font?
+
+### TL;DR
+
+* Pick your font family:
+ * If you are limited to monospaced fonts (because of your terminal, etc) then pick a font with `Nerd Font Mono` (or `NFM`).
+ * If you want to have bigger icons (usually around 1.5 normal letters wide) pick a font without `Mono` i.e. `Nerd Font` (or `NF`). Most terminals support this, but ymmv.
+ * If you work in a proportional context (GUI elements or edit a presentation etc) pick a font with `Nerd Font Propo` (or `NFP`).
+
+### Ligatures
+
+Ligatures are generally preserved in the patched fonts.
+Nerd Fonts `v2.0.0` had no ligatures in the `Nerd Font Mono` fonts, this has been dropped with `v2.1.0`.
+If you have a ligature-aware terminal and don't want ligatures you can (usually) disable them in the terminal settings.
+
+### Explanation
+
+Once you narrow down your font choice of family (`Droid Sans`, `Inconsolata`, etc) and style (`bold`, `italic`, etc) you have 2 main choices:
+
+#### `Option 1: Download already patched font`
+
+ * For a stable version download a font package from the [release page](https://github.com/ryanoasis/nerd-fonts/releases)
+ * Or download the development version from the folders here
+
+#### `Option 2: Patch your own font`
+
+ * Patch your own variations with the various options provided by the font patcher (i.e. not include all symbols for smaller font size)
+
+For more information see: [The FAQ](https://github.com/ryanoasis/nerd-fonts/wiki/FAQ-and-Troubleshooting#which-font)
+
+[SIL-RFN]:http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web_fonts_and_RFNs#14cbfd4a
+
diff --git a/aranroig/app/components/Container.vue b/aranroig/app/components/Container.vue
new file mode 100644
index 0000000..4abd754
--- /dev/null
+++ b/aranroig/app/components/Container.vue
@@ -0,0 +1,62 @@
+
+