diff --git a/api/index.ts b/api/index.ts
index dfe8e19c..e632cca6 100644
--- a/api/index.ts
+++ b/api/index.ts
@@ -60,6 +60,7 @@ async function app(req: Request): Promise<Response> {
   const ranks: Array<string> = params.getAll("rank").flatMap((r) =>
     r.split(",")
   ).map((r) => r.trim());
+  const center: boolean = params.getBooleanValue("center", CONSTANTS.DEFAULT_CENTER)
 
   if (username === null) {
     const [base] = req.url.split("?");
@@ -81,23 +82,9 @@ async function app(req: Request): Promise<Response> {
         <form action="https://github-profile-trophy.vercel.app/" method="get">
           <label for="username">GitHub Username</label>
           <input type="text" name="username" id="username" placeholder="Ex. gabriel-logan" required>
-          <button type="submit">Get Trophy&apos;s</button>
+          <button type="submit">Get Trophies</button>
         </form>
       </div>
-      <script>
-        const base = "https://github-profile-trophy.vercel.app/";
-        const button = document.querySelector("button");
-        const input = document.querySelector("input");
-        const temporarySpan = document.querySelector("#temporary-span");
-
-        button.addEventListener("click", () => {
-          navigator.clipboard.writeText(document.querySelector("#base-show").textContent);
-          temporarySpan.textContent = "Copied!";
-          setTimeout(() => {
-            temporarySpan.textContent = "";
-          }, 1500);
-        });
-      </script>
     </section>`,
     );
     return new Response(
@@ -139,6 +126,7 @@ async function app(req: Request): Promise<Response> {
       paddingHeight,
       noBackground,
       noFrame,
+      center
     ).render(userInfo, theme),
     {
       headers: defaultHeaders,
diff --git a/src/card.ts b/src/card.ts
index b2762b42..6a5b2dee 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -16,6 +16,7 @@ export class Card {
     private marginHeight: number,
     private noBackground: boolean,
     private noFrame: boolean,
+    private center: boolean,
   ) {
     this.width = panelSize * this.maxColumn +
       this.marginWidth * (this.maxColumn - 1);
@@ -53,17 +54,16 @@ export class Card {
     const row = this.getRow(trophyList);
     this.height = this.getHeight(row);
 
+    const style = this.center ? "display: block; margin: auto;" : "";
+
     return `
-    <svg
-      width="${this.width}"
-      height="${this.height}"
-      viewBox="0 0 ${this.width} ${this.height}"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      ${this.renderTrophy(trophyList, theme)}
-    </svg>`;
+      <svg xmlns="http://www.w3.org/2000/svg" style="height:${this.height}px;width:${this.width}px;${style}">
+        <svg xmlns="http://www.w3.org/2000/svg">
+          ${this.renderTrophy(trophyList, theme)}
+        </svg>
+      </svg>`;
   }
+
   private getRow(trophyList: TrophyList) {
     let row = Math.floor((trophyList.length - 1) / this.maxColumn) + 1;
     if (row > this.maxRow) {
diff --git a/src/utils.ts b/src/utils.ts
index 7abe0bb6..3a379f7a 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -63,6 +63,7 @@ export const CONSTANTS = {
   DEFAULT_GITHUB_RETRY_DELAY: 1000,
   REVALIDATE_TIME: HOUR_IN_MILLISECONDS,
   REDIS_TTL: HOUR_IN_MILLISECONDS * 4,
+  DEFAULT_CENTER: false,
 };
 
 export enum RANK {