diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 0000000..c218151
Binary files /dev/null and b/static/favicon.png differ
diff --git a/static/styleIndex.css b/static/styleIndex.css
new file mode 100644
index 0000000..94031bd
--- /dev/null
+++ b/static/styleIndex.css
@@ -0,0 +1,182 @@
+:root {
+ /* Discord Light Mode Palette */
+ --bg: #ebedef;
+ --card-bg: #ffffff;
+ --text-main: #2e3338;
+ --text-muted: #4f5660;
+ --border: #e3e5e8;
+ --header-bg: #ffffff;
+ --input-bg: #e3e5e8;
+ --table-head: #f2f3f5;
+ --price-color: #2e3338;
+ --accent: #5865F2;
+ /* Discord Burple */
+ --accent-hover: #4752c4;
+ --danger: #ed4245;
+ --warning: #fee75c;
+}
+
+[data-theme="dark"] {
+ /* Discord Dark Mode Palette */
+ --bg: #36393f;
+ --card-bg: #2f3136;
+ --text-main: #ffffff;
+ --text-muted: #b9bbbe;
+ --border: #202225;
+ --header-bg: #202225;
+ --input-bg: #202225;
+ --table-head: #292b2f;
+ --price-color: #ffffff;
+}
+
+body {
+ font-family: 'gg sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ background: var(--bg);
+ color: var(--text-main);
+ margin: 0;
+ transition: background 0.2s, color 0.2s;
+}
+
+.header-bar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: var(--header-bg);
+ padding: 10px 25px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+}
+
+.main-container {
+ display: flex;
+ gap: 25px;
+}
+
+.column {
+ flex: 1;
+ min-width: 400px;
+}
+
+.card {
+ background: var(--card-bg);
+ padding: 25px;
+ border-radius: 8px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ margin-bottom: 20px;
+ border: 1px solid var(--border);
+}
+
+#display-img {
+ max-width: 250px;
+ max-height: 250px;
+ border-radius: 4px;
+ margin-bottom: 15px;
+ object-fit: contain;
+}
+
+.price-tag {
+ font-size: 3em;
+ color: var(--price-color);
+ font-weight: 800;
+ margin: 10px 0;
+}
+
+input {
+ display: block;
+ width: 100%;
+ margin: 12px 0;
+ padding: 12px;
+ border: none;
+ border-radius: 4px;
+ box-sizing: border-box;
+ background: var(--input-bg);
+ color: var(--text-main);
+}
+
+button {
+ padding: 10px 15px;
+ cursor: pointer;
+ border-radius: 4px;
+ border: none;
+ transition: 0.2s;
+ font-weight: 500;
+}
+
+.btn-save {
+ background: var(--accent);
+ color: white;
+ width: 100%;
+ font-size: 1.1em;
+}
+
+.btn-save:hover {
+ background: var(--accent-hover);
+}
+
+.btn-edit {
+ background: var(--accent);
+ color: white;
+}
+
+.btn-del {
+ background: var(--danger);
+ color: white;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ background: var(--card-bg);
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+th,
+td {
+ padding: 15px;
+ border-bottom: 1px solid var(--border);
+ text-align: left;
+}
+
+th {
+ background: var(--table-head);
+ color: var(--text-muted);
+ text-transform: uppercase;
+ font-size: 0.8em;
+ letter-spacing: 0.5px;
+}
+
+.theme-toggle-btn {
+ background: var(--text-main);
+ color: var(--bg);
+ font-weight: bold;
+}
+
+#new-product-prompt {
+ display: none;
+ background: var(--accent);
+ color: white;
+ padding: 12px 20px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ animation: slideDown 0.4s ease;
+ justify-content: space-between;
+ align-items: center;
+}
+
+@keyframes slideDown {
+ from {
+ transform: translateY(-20px);
+ opacity: 0;
+ }
+
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
\ No newline at end of file
diff --git a/static/styleLogin.css b/static/styleLogin.css
new file mode 100644
index 0000000..1bfc6e7
--- /dev/null
+++ b/static/styleLogin.css
@@ -0,0 +1,98 @@
+:root {
+ /* Discord Branding Colors */
+ --bg: #5865F2;
+ --card-bg: #ffffff;
+ --text: #2e3338;
+ --input-bg: #e3e5e8;
+ --input-border: transparent;
+ --accent: #5865F2;
+ --accent-hover: #4752c4;
+ --error: #ed4245;
+}
+
+[data-theme="dark"] {
+ /* Discord Dark Mode */
+ --bg: #36393f;
+ --card-bg: #2f3136;
+ --text: #ffffff;
+ --input-bg: #202225;
+ --input-border: transparent;
+}
+
+body {
+ font-family: 'gg sans', 'Segoe UI', Tahoma, sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background: var(--bg);
+ margin: 0;
+ transition: background 0.2s;
+}
+
+.login-box {
+ background: var(--card-bg);
+ padding: 32px;
+ border-radius: 8px;
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+ text-align: center;
+ color: var(--text);
+ width: 400px;
+ transition: background 0.2s, color 0.2s;
+}
+
+h2 {
+ margin-top: 0;
+ font-weight: 700;
+ font-size: 24px;
+}
+
+p.sub-text {
+ color: var(--text);
+ opacity: 0.7;
+ margin-bottom: 20px;
+}
+
+input {
+ display: block;
+ width: 100%;
+ margin: 16px 0;
+ padding: 12px;
+ border: none;
+ border-radius: 4px;
+ background: var(--input-bg);
+ color: var(--text);
+ box-sizing: border-box;
+ font-size: 16px;
+}
+
+input:focus {
+ outline: 2px solid var(--accent);
+}
+
+button {
+ background: var(--accent);
+ color: white;
+ border: none;
+ padding: 12px 24px;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 16px;
+ font-weight: 600;
+ width: 100%;
+ margin-top: 10px;
+ transition: background 0.2s;
+}
+
+button:hover {
+ background: var(--accent-hover);
+}
+
+.error-msg {
+ background: var(--error);
+ color: white;
+ padding: 8px;
+ border-radius: 4px;
+ font-size: 0.9em;
+ margin-bottom: 15px;
+}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 5f12109..e9281d4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,182 +6,8 @@
SekiPOS - Inventory Management
-
+
+
diff --git a/templates/login.html b/templates/login.html
index 850d16f..ca2bbdf 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -3,106 +3,8 @@
SekiPOS Login
-
+
+