diff --git a/assets/Header BK.gif b/assets/Header BK.gif
new file mode 100644
index 0000000..937ac20
Binary files /dev/null and b/assets/Header BK.gif differ
diff --git a/dashboard.html b/dashboard.html
index aa98fa2..4fdaf1c 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -9,6 +9,17 @@
     <link rel="shortcut icon" href="https://github.com/ION606/selmer-bot-website/blob/main/assets/favicon.ico" type="image/x-icon">
     <script src="https://kit.fontawesome.com/728e740903.js" crossorigin="anonymous"></script>
 
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
+
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Rajdhani:wght@300&family=Share+Tech+Mono&display=swap" rel="stylesheet">
+
+
+
     <style>
         html { width:100%; height:100%; margin:0; padding:0; }
 
@@ -24,23 +35,6 @@
 
         .hide { display: none; }
 
-
-        .jumpButton {
-			/* color: #ffffff; */
-			font-size: 15px;
-			border: 1px solid #000000;
-			width: 200px;
-            height: 40px;
-			cursor: pointer;
-            align-self: center;
-            background-color: rgb(2, 2, 192);
-		}
-		.jumpButton:hover {
-			color: #2d63c8;
-			/* background-color: #ffffff; */
-		}
-
-
         .loadingscreen {
             height: 90vh;
             background-color: bisque;
@@ -48,12 +42,17 @@
         }
 
         .navbar {
-            background-color: rgb(69, 11, 102);
-            height: 50px;
+            background-color: rgb(0, 0, 0);
+            /* height: 50px;
             border-width: 1px;
-            border-style: double;
+            border-style: double; */
         }
 
+        .navbar .nav-item {
+			margin-right: 25px;
+			margin-left: 25px;
+		}
+
         #right {
             float: right;
             margin-right: 50px;
@@ -61,23 +60,22 @@
 
         .box {
             font-size: 20px;
-            height: 20px;
+            height: 40px;
             width: auto;
             margin-bottom: 15px;
-            margin-right: 70px;
-            padding: 5px;
+            padding: 3px;
             border: 1px solid black;
             clear: both;
             align-content: center;
-            float: right;
-            margin-right: 25px;
+            margin-right: 30px;
+            margin-left: 30px;
         }
 
         .statusdiv {
             border-style: dashed;
             border-color: rgb(247, 189, 0);
-            width: 130px;
-            height: 100px;
+            width: 140px;
+            height: 120px;
             margin-top: 20px;
             float: right;
             margin-right: 50px;
@@ -98,7 +96,7 @@
         .buttonsmainbar {
             background-color: green;
             width: 200px;
-            height: 40px;
+            height: 60px;
         }
 
         .btnmain {
@@ -109,7 +107,7 @@
             background-color: #42424b;
             width: 11%;
             position: fixed;
-            top: 53px;
+            top: 75px;
             bottom: 0;
             display: flex;
             flex-wrap: wrap;
@@ -119,23 +117,6 @@
             border-style: solid;
         }
 
-        .btnside {
-            color: #ffffff;
-			background-color: #42424b;
-			font-size: 19px;
-			/* border: 2px solid #000000; */
-            outline: none;
-            border: none;
-			width: 100%;
-            height: 50px;
-			cursor: pointer;
-        }
-
-        .btnside:hover {
-            color: #ffffff;
-			background-color: #377aea;
-        }
-
         .wc {
             align-content: center;
             align-self: center;
@@ -152,9 +133,27 @@
             letter-spacing: 1px;
         }
 
+    </style>
 
-        /* SUBMIT BUTTON START */
-        .submitButton{
+<!-- Buttons -->
+    <style>
+        .jumpButton {
+			/* color: #ffffff; */
+			font-size: 15px;
+			border: 1px solid #000000;
+			width: 200px;
+            height: 40px;
+			cursor: pointer;
+            align-self: center;
+            background-color: rgb(2, 2, 192);
+		}
+		.jumpButton:hover {
+			color: #2d63c8;
+			/* background-color: #ffffff; */
+		}
+
+         /* SUBMIT BUTTON START */
+         .submitButton{
             position: relative;
             background-color: black;
             border-radius: 4em;
@@ -214,8 +213,27 @@
             color: red;
         }
 
-    </style>
+        #sevradio br {
+            margin-top: 10px;
+        }
 
+        .btnside {
+            color: #ffffff;
+			background-color: #42424b;
+			font-size: 19px;
+			/* border: 2px solid #000000; */
+            outline: none;
+            border: none;
+			width: 100%;
+            height: 50px;
+			cursor: pointer;
+        }
+
+        .btnside:hover {
+            color: #ffffff;
+			background-color: #377aea;
+        }
+    </style>
 
     <script>
         //Maybe pre-load the channels in the server into local storage for accessing when chosing the welcome/logging channels?
@@ -341,31 +359,42 @@
     </script>
 </head>
 
-<body id="body">
-    <!-- <center> -->
-        <div class="navbar">
-            <span style="padding-left: 50px;"></span>
-            <a href="index.html" style="color: white"><i class="fa-solid fa-house-chimney", alt="Home" style="scale: 2; margin-top: 20px;"></i></a>
+<body>
+    <nav class="navbar navbar-expand-sm navbar-fixed-top">
+        <div class="container-fluid mx-auto">
+            <a class="navbar-brand" href="index.html">
+                <img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="width: 50px;">
+            </a>
+            
+            <!-- <li class="nav-item">
+                <a href="index.html" style="color: white" class="nav-link"><i class="fa-solid fa-house-chimney", alt="Home" style="scale: 2;"></i></a>
+            </li> -->
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a href="myGuilds.html" id="guildslink" class="nav-link"><i class="fa-solid fa-server" alt="Servers" style="scale: 2; color: rgb(11, 189, 189);"></i></a>
+                </li>
 
-            <span style="padding-left:50px;">
-            <a href="myGuilds.html"><i class="fa-solid fa-server" alt="Servers" style="scale: 2; color: rgb(11, 189, 189);"></i></a>
+                <li class="nav-item">
+                    <a href="https://github.com/ION606/selmerBot/wiki" target="_blank" class="nav-link"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a>
+                </li>
+                
+                <li class="nav-item">
+                <a href="premium.html" class="nav-link"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
+                </li>
+            </ul>
+        
+        <!-- <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Hooray!">Hover over me!</button> -->
+            <div class="container" style="font-family: 'Rajdhani', sans-serif; color: white;"><h1>Selmer Bot Web Dashboard</h1></div>
+            <span class="ms-auto" style="margin-right: 1%;">
+                <!-- <button id="login" class="loginbtn" onclick="window.location = getAPIRedirect()">Log Into Dashboard</button> -->
+                <button onclick="logout()" id="logoutbtn" class="logoutbtn" style="display: none;"><i class="fa-solid fa-arrow-right-from-bracket" alt="Log Out"></i></button>
+                <button onclick="window.location = getAPIRedirect()" id="loginbtn" class="loginbtn"><i class="fa-solid fa-arrow-right-from-bracket" alt="Log In"></i></button>
             </span>
-
-            <span style="padding-left:50px;"></span>
-            <a href="https://github.com/ION606/selmerBot/wiki" target="_blank"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a>
-          
-            <span style="padding-left:50px;"></span>
-            <a href="premium.html"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
-          
-            <!-- <button>Home</button> -->
-           <span id="right">
-            <button onclick="logout()" class="logoutbtn"><i class="fa-solid fa-arrow-right-from-bracket" alt="Log Out"></i></button>
-           </span>
         </div>
+    </nav>
 
-    <!-- </center> -->
     <div class="statusdiv">
-        <h1 style="color: white; margin-bottom: 10px; margin-top: 10px;">STATUS</h1>
+        <h2 style="color: white; margin-bottom: 10px; margin-top: 10px;">STATUS</h2>
         <div id="savstat" class="box saved">SAVED</div>
     </div>
 
@@ -403,20 +432,22 @@
         
                     <label for="lc">Logging Channel Name:</label>
                     <input type="text" id="lc" name="lc"><br><br>
-                    
-                    <p>Log Severity</p>
-                    <label for="ls-none">None</label>
-                    <input type="radio" id="ls-none" name="ls"><br><br>
-        
-                    <label for="ls-low">Low</label>
-                    <input type="radio" id="ls-low" name="ls"><br><br>
-        
-                    <label for="ls-meduim">Medium</label>
-                    <input type="radio" id="ls-meduim" name="ls"><br><br>
-        
-                    <label for="ls-high">High</label>
-                    <input type="radio" id="ls-high" name="ls"><br><br>
-        
+
+                    <div id="sevradio">
+                        <p style="margin-bottom: 0px; text-underline-offset: 2px;"><u>Log Severity</u></p>
+
+                        <label for="ls-none" style="margin-top: 0px;">None</label>
+                        <input type="radio" id="ls-none" name="ls"><br>
+            
+                        <label for="ls-low">Low</label>
+                        <input type="radio" id="ls-low" name="ls"><br>
+            
+                        <label for="ls-meduim">Medium</label>
+                        <input type="radio" id="ls-meduim" name="ls"><br>
+            
+                        <label for="ls-high">High</label>
+                        <input type="radio" id="ls-high" name="ls"><br><br>
+                    </div>
         
                     <input type="submit" value="Submit", class="submitButton" onclick="sendData(event, { 'inp': 'logs' })">
                 </form>
diff --git a/index.html b/index.html
index b468005..79c7381 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,10 @@
 	
 	<link rel="shortcut icon" href="https://github.com/ION606/selmer-bot-website/blob/main/assets/favicon.ico" type="image/x-icon">
 	<script src="https://kit.fontawesome.com/728e740903.js" crossorigin="anonymous"></script>
+
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&display=swap" rel="stylesheet">
 	
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
 	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
@@ -62,6 +66,12 @@
 			transition-delay: 0.3s;
 		}
 
+		nav {
+			background-color: rgb(0, 0, 0);
+			/* color: blue; */
+			/* text-align: center; */
+		}
+
 		.navbar .nav-item {
 			margin-right: 25px;
 			margin-left: 25px;
@@ -104,7 +114,7 @@
 			margin-top: 20px;
 			margin-bottom: 100px;
 			background: #faf9f9;
-			border:1px dashed rgb(255, 166, 0);
+			border:1px solid rgb(94, 104, 104);
 			
 		}
 
@@ -139,6 +149,14 @@
 		.item{
 			position: relative;
 		}
+
+		.navbar-fixed-top {
+			position: fixed;
+			right: 0;
+			left: 0;
+			z-index: 1030;
+			top: 0;
+		}
 	</style>
 
  	<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> (no github icon so...) -->
@@ -267,10 +285,9 @@
 
 <body>
 
-
 	<!-- Nav Bar -->
-	<nav class="navbar navbar-expand-sm bg-black">
-		<div class="container-fluid">
+	<nav class="navbar navbar-expand-sm navbar-fixed-top">
+		<div class="container-fluid mx-auto">
 			<a class="navbar-brand" href="index.html">
 				<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="width: 50px;">
 			</a>
@@ -279,20 +296,21 @@
 				<a href="index.html" style="color: white" class="nav-link"><i class="fa-solid fa-house-chimney", alt="Home" style="scale: 2;"></i></a>
 			</li> -->
 			<ul class="navbar-nav">
-			<li class="nav-item">
-				<a href="myGuilds.html" id="guildslink" class="nav-link"><i class="fa-solid fa-server" alt="Servers" style="scale: 2; color: rgb(11, 189, 189);"></i></a>
-			</li>
+				<li class="nav-item">
+					<a href="myGuilds.html" id="guildslink" class="nav-link"><i class="fa-solid fa-server" alt="Servers" style="scale: 2; color: rgb(11, 189, 189);"></i></a>
+				</li>
 
-			<li class="nav-item">
-				<a href="https://github.com/ION606/selmerBot/wiki" target="_blank" class="nav-link"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a>
-			</li>
-			
-			<li class="nav-item">
-			<a href="premium.html" class="nav-link"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
-			</li>
-		</ul>
+				<li class="nav-item">
+					<a href="https://github.com/ION606/selmerBot/wiki" target="_blank" class="nav-link"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a>
+				</li>
+				
+				<li class="nav-item">
+				<a href="premium.html" class="nav-link"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
+				</li>
+			</ul>
+		
 		<!-- <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Hooray!">Hover over me!</button> -->
-
+			<div class="container" style="font-family: 'Rajdhani', sans-serif; color: white;"><h1>Selmer Bot Web Dashboard</h1></div>
 			<span class="ms-auto" style="margin-right: 1%;">
 				<!-- <button id="login" class="loginbtn" onclick="window.location = getAPIRedirect()">Log Into Dashboard</button> -->
 				<button onclick="logout()" id="logoutbtn" class="logoutbtn" style="display: none;"><i class="fa-solid fa-arrow-right-from-bracket" alt="Log Out"></i></button>
@@ -303,6 +321,19 @@
 			
 	<!-- NAVBAR END -->
 
+	<!-- Header Begin -->
+	<!-- https://livewire.thewire.in/wp-content/uploads/2018/09/ekg-line-ekg-monitor-ekg-machine-heart-health-blue-ecg-monitor-shows-the-heart-beat-the-heart-stops-for-three-seconds-and-starts-again_nelyjny6x__F0000.png -->
+	<div class="row w-100 h-100" style="background-image: url('https://www.pgsindia.co.in/wp-content/uploads/2016/01/animated-web-design-slideshow-background.gif');  background-size: cover; background-repeat: no-repeat;">
+		<div class="row w-100" style="color: rgb(10, 169, 243); text-align: center">
+			<h1 style="margin-top: 100px; -webkit-text-stroke: 2px rgb(255, 255, 255);">WELCOME TO THE SELMER BOT DASHBOARD</h1>
+		</div>
+		<div style="text-align: center;">
+			<h1 style="-webkit-text-stroke: 2px rgb(255, 255, 255);">Music, Games, an Economy System, and More!</h1>
+		</div>
+	</div>
+
+	<!-- Header End -->
+
 	<div class="row custom-alert" style="display: none;" id="alertrow">
 		<div class="alert alert-warning alert-dismissible" id="banner" style="text-align: center" role="alert">
 			<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
@@ -310,12 +341,12 @@
 		</div>
 	</div>
 	
-	<div style="text-align: center; align-content: center;">
+	<!-- <div style="text-align: center; align-content: center;">
 
-		<h2 style="color:wheat">Based off a real Professor of Logic!</h2>
+		<!- <h2 style="color:wheat">Based off a real Professor of Logic!</h2> ->
 
 		<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="outline-style: dashed; border-radius: 50%; outline-color: green;">	
-	</div>
+	</div> -->
 
 
 	<!-- Adds margins to the page -->
@@ -387,7 +418,7 @@
 
 						<div class="carousel-item" style="position: relative; text-align: center;">
 							<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/Anime3.png?raw=true" alt="Shop2" class="d-block carousel-img" style="margin:auto; margin-top: 30px;">
-							<h2 style="margin-top: 70px; color: white; font-family: Goudy Old Style;">Reach up to Rank 101!</h2>
+							<!-- <h2 style="margin-top: 70px; color: white; font-family: Goudy Old Style;">Reach up to Rank 101!</h2> -->
 						</div>
 					</div>
 
diff --git a/main.js b/main.js
index da4700f..d9aba6b 100644
--- a/main.js
+++ b/main.js
@@ -168,7 +168,7 @@ app.get('/', async ({ query }, response) => {
 					client_secret: clientSecret,
 					code,
 					grant_type: 'authorization_code',
-					redirect_uri: `http://localhost`,
+					redirect_uri: `https://selmer-bot-website.herokuapp.com`,
 					scope: 'identify',
 				}),
 				headers: {
diff --git a/package-lock.json b/package-lock.json
index 9fe8a95..cbab7c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "mongodb": "^4.8.0",
         "nginx": "^1.0.8",
         "node-fetch": "^3.2.9",
+        "stripe": "^9.15.0",
         "undici": "^5.8.0"
       }
     },
@@ -1200,6 +1201,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/stripe": {
+      "version": "9.15.0",
+      "resolved": "https://registry.npmjs.org/stripe/-/stripe-9.15.0.tgz",
+      "integrity": "sha512-0Irs+6mNpZKhiXS/aieweXZEcOrJtUjPU0fIzEzrRg9VF9wyXWdUELWJbkxDhuyYMMKrrjA6c2YNtccBZX6tew==",
+      "dependencies": {
+        "@types/node": ">=8.1.0",
+        "qs": "^6.10.3"
+      },
+      "engines": {
+        "node": "^8.1 || >=10.*"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -2164,6 +2177,15 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
     },
+    "stripe": {
+      "version": "9.15.0",
+      "resolved": "https://registry.npmjs.org/stripe/-/stripe-9.15.0.tgz",
+      "integrity": "sha512-0Irs+6mNpZKhiXS/aieweXZEcOrJtUjPU0fIzEzrRg9VF9wyXWdUELWJbkxDhuyYMMKrrjA6c2YNtccBZX6tew==",
+      "requires": {
+        "@types/node": ">=8.1.0",
+        "qs": "^6.10.3"
+      }
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
diff --git a/package.json b/package.json
index ff594db..e541bce 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "mongodb": "^4.8.0",
     "nginx": "^1.0.8",
     "node-fetch": "^3.2.9",
+    "stripe": "^9.15.0",
     "undici": "^5.8.0"
   },
   "type": "module"
diff --git a/premium.html b/premium.html
index 76de198..fb9719c 100644
--- a/premium.html
+++ b/premium.html
@@ -6,8 +6,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Selmer Bot Web Dashboard</title>
 
-    <link rel="shortcut icon" href="https://github.com/ION606/selmer-bot-website/blob/main/assets/favicon.ico" type="image/x-icon">
-    <script src="https://kit.fontawesome.com/728e740903.js" crossorigin="anonymous"></script>
+    <span id="IMPORTS">
+        <link rel="shortcut icon" href="https://github.com/ION606/selmer-bot-website/blob/main/assets/favicon.ico" type="image/x-icon">
+        <script src="https://kit.fontawesome.com/728e740903.js" crossorigin="anonymous"></script>
+
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
+        <script src="https://js.stripe.com/v3/"></script>
+
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Rajdhani:wght@300&family=Rouge+Script&family=Share+Tech+Mono&display=swap" rel="stylesheet">
+    </span>
+
     <style>
         html { width:100%; height:100%; margin:0; padding:0; }
 
@@ -17,11 +31,14 @@
             width:100%; height:100%; margin:0; padding:0;
             color: white;
         }
-        .navbar {
-            background-color: rgb(69, 11, 102);
-            height: 50px;
-            border-width: 1px;
-            border-style: double;
+		.navbar .nav-item {
+			margin-right: 25px;
+			margin-left: 25px;
+		}
+
+        #right {
+            float: right;
+            margin-right: 50px;
         }
 
         #right {
@@ -29,20 +46,10 @@
             margin-right: 50px;
         }
 
-        .logoutbtn {
-            margin-top: 14px;
-            scale: 1.7;
-        }
-
-        .logoutbtn:hover {
-            cursor: pointer;
-            color: red;
-        }
-
 
         h1 {
-            color: rgb(0, 74, 235);
-            outline-style: dotted;
+            /* color: rgb(0, 74, 235); */
+            /* outline-style: dotted; */
             text-align: center;
             margin-right: 1%;
             margin-left: 1%;
@@ -60,6 +67,77 @@
 
         h3 {
             margin-left: 1%;
+        }
+
+		.desctext {
+			color: white;
+			margin-top: 20px;
+			background-color: rgb(1, 69, 196, 0.1);
+			padding: 10px;
+			border-radius: 10%;
+            border-style: groove;
+            border-color: rgb(255, 255, 255, 0.6);
+			width: auto;
+		}
+
+        .navbar-fixed-top {
+			position: fixed;
+			right: 0;
+			left: 0;
+			z-index: 1030;
+			top: 0;
+		}
+
+        .picon {
+            border-radius: 50%;
+            background-color: rgba(255, 204, 51, 0.2);
+            box-shadow: 0 0 12px 7px rgba(252, 200, 28, 0.2);
+        }
+    </style>
+
+<!-- BUTTONS HERE -->
+    <style>
+        .logoutbtn {
+            margin-top: 14px;
+            scale: 1.2;
+			border-radius: 10%;
+        }
+
+        .logoutbtn:hover {
+            cursor: pointer;
+            color: red;
+        }
+
+		.fivedollarbtn {
+			color: #00f2f2;
+			font-size: 23px;
+			border: 1px solid #2fffe0;
+			border-radius: 10px;
+			padding: 10px 30px;
+			letter-spacing: 1px;
+			cursor: pointer
+		}
+		.fivedollarbtn:hover {
+			color: #000000;
+			background-color: #00f2f2;
+		}
+
+        .tendollarbtn {
+			color: #30f200;
+			font-size: 23px;
+			border: 1px solid #50f801;
+			border-radius: 10px;
+			padding: 10px 30px;
+			letter-spacing: 1px;
+			cursor: pointer
+		}
+		.tendollarbtn:hover {
+			color: #000000;
+			background-color: #30f200;
+		}
+
+        h1 {
+            font-family: 'Share Tech Mono', monospace;
         }
     </style>
 
@@ -71,43 +149,170 @@
 				document.getElementById('guildslink').style = 'cursor: no-drop;';
             }
         }
+
         function logout() {
             window.localStorage.clear();
             window.location.href = 'index.html';
         }
+
+
+        function pay(url, qrurl = null, qr = false) {
+            //$5 - https://buy.stripe.com/7sIfZW2Er0aZ1by000  -  https://github.com/ION606/selmer-bot-website/blob/main/assets/stripe_payment5.png?raw=true
+            //$10 - https://buy.stripe.com/14kfZWcf19Lz7zWfYZ  -  https://github.com/ION606/selmer-bot-website/blob/main/assets/stripe_payment10.png?raw=true
+            if (qr) {
+                window.open(qrurl,'MyWindow','width=266.667px,height=351.667px');
+            } else {
+                try {
+                    window.open(url, target="_blank");
+                } catch (err) {
+                    console.error(err);
+                    window.open(qrurl,'Something went wrong :( try this instead!','width=266.667px,height=351.667px');
+                }
+            }
+        }
     </script>
 </head>
 <body>
 
-    <div class="navbar">
-        <span style="padding-left: 50px;"></span>
-        <a href="index.html" style="color: white"><i class="fa-solid fa-house-chimney", alt="Home" style="scale: 2; margin-top: 20px;"></i></a>
+	<!-- Nav Bar -->
+	<nav class="navbar navbar-expand-sm bg-black">
+		<div class="container-fluid">
+			<a class="navbar-brand" href="index.html">
+				<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="width: 50px;">
+			</a>
+			
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a href="myGuilds.html" id="guildslink" class="nav-link"><i class="fa-solid fa-server" alt="Servers" style="scale: 2; color: rgb(11, 189, 189);"></i></a>
+                </li>
 
-        <span style="padding-left:50px;">
-        <a href="myGuilds.html" id="guildslink"><i class="fa-solid fa-server" alt="Servers" style="scale: 2; color: rgb(11, 189, 189);"></i></a>
-        </span>
+                <li class="nav-item">
+                    <a href="https://github.com/ION606/selmerBot/wiki" target="_blank" class="nav-link"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a>
+                </li>
+                
+                <li class="nav-item">
+                <a href="premium.html" class="nav-link"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
+                </li>
+            </ul>
+
+			<div class="container"><h1 style="font-family: 'Rajdhani', sans-serif; text-align: left;">Selmer Bot Web Dashboard</h1></div>
+			<span class="ms-auto" style="margin-right: 1%;">
+				<!-- <button id="login" class="loginbtn" onclick="window.location = getAPIRedirect()">Log Into Dashboard</button> -->
+				<button onclick="logout()" id="logoutbtn" class="logoutbtn"><i class="fa-solid fa-arrow-right-from-bracket" alt="Log Out"></i></button>
+			</span>
+		</div>
+	</nav>
+	<!-- NAVBAR END -->
 
-        <span style="padding-left:50px;"></span>
-        <a href="https://github.com/ION606/selmerBot/wiki" target="_blank"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a>
-       
-        <span style="padding-left:50px;"></span>
-		<a href="premium.html"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
-       
-        <!-- <button>Home</button> -->
-       <span id="right">
-        <button onclick="logout()" class="logoutbtn"><i class="fa-solid fa-arrow-right-from-bracket" alt="Log Out"></i></button>
-       </span>
-    </div>
 
     <!-- Main Page -->
-    <h1>SELMER BOT PREMIUM</h1>
-    
-    <h2>
-        <u>Experience All Selmer Bot has to offer!</u>
-    </h2>
+    <div class="container">
+        <div id="titlediv" style="margin-top: 30px; margin-bottom: 150px;">
+            <h1 style="font-family: 'Cinzel', serif;">SELMER BOT PREMIUM <span class="picon"><i class="fa-solid fa-crown"></i></span></h1>
+            <h1 style="font-family: 'Rouge Script', cursive;">It's only logical!</h1>
+        </div>
 
-    <h2 style="font-size: 50px; margin: 20px; text-align: left; color: gold;">AI</h2>
-    <h3>Chat with Selmer Bot!</h3>
-    <img src = ''>
+        <h1 style="font-size: 70px;">FEATURES</h1>
+        <!-- <div id="features" class="row pb-4 pt-5" style="text-align: center; font-family: Lucida Console;">
+            <h2 style="color: gold; font-size: 60px; text-align: center; font-family: Lucida Console;">AI</h2>
+        </div> -->
+
+        <div id="AI1" class="row pb-md-5 mt-md-5">
+            <h2 style="color: gold; font-size: 60px; text-align: center; font-family: Lucida Console; margin-bottom: 60px;">AI</h2>
+            <div class="col-xxl-4 col-xl-4 col-lg-5 col-md-12">
+                <img class="img-responsive" style="border-style: groove; border-color:rgb(11, 189, 189);" src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/AI1.png?raw=true">
+                <!-- <img class="img-responsive overlay-content" style="border-style: dashed; border-color:rgb(11, 189, 189); transform: rotate(25deg); margin-bottom: 20%; margin-left: 45%;" src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/Audio2.png?raw=true"> -->
+            </div>
+
+            <div class="col-xxl-4 col-xl-4 col-lg-5 col-md-6">
+                <div class="container desctext" style="width: 500px; font-family: Lucida Console;">
+                    <p style="white-space: pre-line;">
+                        <b>Chat with Selmer Bot using State-of-the-Art AI!</b>
+                        <p>
+                            Talk with Selmer Bot about anything!
+                            From the weather to sports to the meaning of life,
+                            Selmer Bot will make sure you won't get bored!
+                        </p>
+                        <i>He can even (poorly) help with your homework!</i>
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <div id="AI2" class="row pb-5 mt-md-5 pt-5">
+            <div class="col-xxl-5 col-xl-6 col-lg-12 col-md-12 order-xl-first order-md-last order-sm-last">
+                <div class="container desctext" style="width: 500px; font-family: Lucida Console; background-color: rgba(255, 196, 0, 0.384);">
+                    <p style="white-space: pre-line;">
+                        <b>The AI also comes with real-world data!</b>
+                        <p>
+                            Get semi-accurate weather reports,
+                            the best burger places in town and even what the best
+                            milkshake flavor is!
+                        </p>
+                    </p>
+                </div>
+            </div>
+            <div class="col-xxl-6 col-xl-6 col-lg-12 col-md-12">
+                <img class="img-responsive" style="border-style: groove; border-color:rgb(255, 153, 0);" src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/AI_weather.png?raw=true">
+                <!-- <img class="img-responsive overlay-content" style="border-style: dashed; border-color:rgb(11, 189, 189); transform: rotate(25deg); margin-bottom: 20%; margin-left: 45%;" src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/Audio2.png?raw=true"> -->
+            </div>
+        </div>
+
+
+
+        <div class="row pt-5" style="margin-top: 70px; margin-bottom: 0px;"><h1 style="font-size: 50px;">GET THE PREMIUM MONTHLY PLAN</h1></div>
+        <div id="paymentbuttons" class="row pt-5 pb-5">
+            <div id="fivedollar" class="col-6">
+                <button type="button" class="btn fivedollarbtn float-end" onclick="pay('https://buy.stripe.com/7sIfZW2Er0aZ1by000', 'https://github.com/ION606/selmer-bot-website/blob/main/assets/stripe_payment5.png?raw=true')">
+                    Basic Tier - $5
+                </button>
+            </div>
+
+            <div id="tendollar" class="col-6">
+                <button type="button" class="btn tendollarbtn float-start" onclick="pay('https://buy.stripe.com/14kfZWcf19Lz7zWfYZ', 'https://github.com/ION606/selmer-bot-website/blob/main/assets/stripe_payment10.png?raw=true')">
+                    Special Tier - $10
+                </button>
+            </div>
+        </div>
+
+        <div class="row pt-5" id="paymentbuttonQR">
+            <h2>Want to pay from your phone? Use our QR codes instead!</h2>
+
+            <div class="col-6 pt-3">
+                <button class="btn-lg btn-primary float-end" type="button" data-bs-toggle="collapse" data-bs-target="#fivedollarQR" aria-expanded="false" aria-controls="fivedollarQR">
+                    Basic Tier - $5
+                </button>
+            </div>
+
+            <div class="col-6 pt-3">
+                <button class="btn-lg btn-primary float-start" type="button" data-bs-toggle="collapse" data-bs-target="#tendollarQR" aria-expanded="false" aria-controls="tendollarQR">
+                    Special Tier - $10
+                </button>
+            </div>
+        </div>
+
+        <div class="row pt-3" id="paymentQRImg">
+            <div class="col-6">
+                <div class="collapse multi-collapse float-end" id="fivedollarQR">
+                    <img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/stripe_payment5.png?raw=true" style="width: 266.667px; height: 351.667px">
+                </div>
+            </div>
+            <div class="col-6">
+                <div class="collapse multi-collapse float-start" id="tendollarQR">
+                    <img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/stripe_payment10.png?raw=true" style="width: 266.667px; height: 351.667px">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    		<!-- Footer -->
+		<ul style="margin-top: 150px; text-align: center;" class="row">
+			<li style="display: inline; vertical-align: text-top;">
+				<a href="https://github.com/ION606/selmerBot"><i class="fa fa-github" style="font-size:72px; color: #000000;" alt="Github Repository"></i></a>
+				<span style="margin-left: 40px;"></span>
+				<a href="https://discord.com/oauth2/authorize?client_id=944046902415093760&scope=applications.commands+bot&permissions=549755289087"><img src="https://cdn-icons-png.flaticon.com/512/5968/5968756.png" style="width: 72px; height: 72px; margin-bottom: 40px;" alt="Discord Invite Link"></a>
+			</li>
+		</ul>
+        <div style="text-align: center; margin-bottom: 20px;"><i>Disclaimer: Selmer Bot uses OpenAI integration for the chat AI. The conversation data is stored for the duration of the conversation to help provide context and is then deleted.</i></div>
 </body>
 </html>
\ No newline at end of file