diff --git a/package-lock.json b/package-lock.json
index f68e023..f04c6cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "ytclipplaylist",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.6.7",
         "core-js": "^3.8.3",
         "vue": "^3.2.13",
         "vue-router": "^4.3.0",
@@ -3564,6 +3565,11 @@
         "lodash": "^4.17.14"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3610,6 +3616,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
+      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -4285,6 +4301,17 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -5073,6 +5100,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -6338,7 +6373,6 @@
       "version": "1.15.5",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
       "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -6354,6 +6388,19 @@
         }
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -7874,7 +7921,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -7883,7 +7929,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -9363,6 +9408,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
diff --git a/package.json b/package.json
index 10b68e4..3923a57 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.6.7",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
     "vue-router": "^4.3.0",
diff --git a/public/favicon.ico b/public/favicon.ico
index df36fcf..8d4504d 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
index f3d2503..8e43e5e 100644
Binary files a/src/assets/logo.png and b/src/assets/logo.png differ
diff --git a/src/components/SegmentItem.vue b/src/components/SegmentItem.vue
index 75bcc06..199e1e4 100644
--- a/src/components/SegmentItem.vue
+++ b/src/components/SegmentItem.vue
@@ -8,12 +8,14 @@
         <div>
             <span>Start: {{ formatTime(localSegment.startTime) }}&nbsp;</span>
             <!-- Conditionally display set start time button -->
-            <span v-if="!isReadOnly" @click="$emit('set-start-time', localSegment)" class="time-setter fa fa-pencil" title="Set with the current play time"></span>
+            <span v-if="!isReadOnly" @click="$emit('set-start-time', localSegment)" class="time-setter fa fa-pencil"
+                title="Set with the current play time"></span>
         </div>
         <div>
             <span>End: {{ formatTime(localSegment.endTime) }}&nbsp;</span>
             <!-- Conditionally display set end time button -->
-            <span v-if="!isReadOnly" @click="$emit('set-end-time', localSegment)" class="time-setter fa fa-pencil" title="Set with the current play time"></span>
+            <span v-if="!isReadOnly" @click="$emit('set-end-time', localSegment)" class="time-setter fa fa-pencil"
+                title="Set with the current play time"></span>
         </div>
         <!-- The delete button can also be conditionally shown or hidden -->
         <button v-if="!isReadOnly" class="delete-button" @click="$emit('delete-segment', segment)">X</button>
@@ -23,12 +25,12 @@
 <script>
 export default {
     props: {
-    segment: Object,
-    isReadOnly: {
-        type: Boolean,
-        default: false,
+        segment: Object,
+        isReadOnly: {
+            type: Boolean,
+            default: false,
+        },
     },
-},
     data() {
         return {
             localSegment: this.segment,
diff --git a/src/components/headers/MomentumMovementAcademy.vue b/src/components/headers/MomentumMovementAcademy.vue
new file mode 100644
index 0000000..9d0ce40
--- /dev/null
+++ b/src/components/headers/MomentumMovementAcademy.vue
@@ -0,0 +1,12 @@
+<template>
+    <div style="background-color: hsla(0, 100%, 50%, 1);width:100%"><a href="https://www.momentum-movement.ca/"><img
+    elementtiming="nbf-header-logo-desktop"
+    src="https://images.squarespace-cdn.com/content/v1/63a61ed2a637cd7b726fd375/2f4bfd8a-bcf3-4fdd-ae81-eb0dfcfd2f8d/mma-logo-website3.png?format=1500w"
+    alt="Momentum Movement Academy" style="display:block" fetchpriority="high" loading="eager"
+    decoding="async" data-loader="raw"></a></div>
+</template>
+
+<script>
+export default {
+}
+</script>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 8de459b..3a4f773 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,9 +9,10 @@ const routes = [
     component: SegmentSelector,
   },
   {
-    path: '/viewer',
+    path: '/viewer/:customHeader?',
     name: 'ViewerInterface',
     component: ViewerInterface,
+    props: true,
   },
 ];
 
diff --git a/src/views/SegmentSelector.vue b/src/views/SegmentSelector.vue
index f7ce6b3..f0c4a31 100644
--- a/src/views/SegmentSelector.vue
+++ b/src/views/SegmentSelector.vue
@@ -1,12 +1,24 @@
 <template>
     <div class="segment-selector">
         <header>
-            <h1>Video Segment Selector</h1>
-            <input type="file" @change="loadJson" ref="fileInput" style="display: none;" />
-            <button @click="triggerFileInput">Load JSON File</button>
-            <button @click="saveJson">Save/Download JSON File</button>
-            <button @click="createSharableLink">Create a Sharable Link</button>
-            <a v-if="sharableLink" :href="sharableLink" target="_blank">Open Sharable Link</a>
+            <div style="width: 100%;">
+                <h1 style="text-align: center;">Video Segment Selector</h1>
+                <div>
+                    <input type="file" @change="loadJson" ref="fileInput" style="display: none;" />
+                    <button @click="triggerFileInput">Load JSON File</button>
+                    <button @click="saveJson">Save/Download JSON File</button>
+                </div>
+                <div>
+                    Style: <select v-model="selectedStyle"
+                        @change="() => { console.log('selectedStyle', this.selectedStyle) }">
+                        <option v-for="option in styleOptions" :key="option.id" :value="option.id">
+                            {{ option.name }}
+                        </option>
+                    </select>
+                    <button @click="createSharableLink">Create a Sharable Link</button>
+                    <a v-if="sharableLink" :href="sharableLink" target="_blank">Open Sharable Link</a>
+                </div>
+            </div>
         </header>
         <div class="content-area">
             <main>
@@ -43,6 +55,16 @@ import draggable from 'vuedraggable';
 import YouTubePlayer from '@/components/YouTubePlayer.vue';
 import SegmentItem from '@/components/SegmentItem.vue';
 import { segmentMixin } from '@/mixins/segmentMixin.js';
+import axios from 'axios';
+
+function shortenURL(longUrl) {
+    return axios.get(`https://tinyurl.com/api-create.php?url=${encodeURIComponent(longUrl)}`)
+        .then(response => response.data)
+        .catch(error => {
+            console.error('Erreur lors de la création de l’URL courte :', error);
+            return longUrl; // Retournez l'URL originale en cas d'erreur
+        });
+}
 
 export default {
     mixins: [segmentMixin],
@@ -61,6 +83,12 @@ export default {
             filterText: '',
             sharableLink: '',
             maxSegmentId: 0,
+            styleOptions: [
+                { id: '', name: 'Default' },
+                { id: 'mma', name: 'Momentum' },
+                // Ajoutez d'autres options ici
+            ],
+            selectedStyle: '',
         };
     },
     watch: {
@@ -121,15 +149,17 @@ export default {
             const compactSegments = this.convertToCompactFormat(this.segments);
             const jsonData = JSON.stringify(compactSegments);
             const base64EncodedData = btoa(encodeURIComponent(jsonData)); // Encode the JSON string as Base64
-            const viewerUrl = `${window.location.origin}/viewer?data=${base64EncodedData}`; // Construct the viewer URL with the encoded data as a parameter
+            const viewerStyle = this.selectedStyle && ('/' + this.selectedStyle) || '';
+            const viewerUrl = `${window.location.origin}/viewer${viewerStyle}?data=${base64EncodedData}`; // Construct the viewer URL with the encoded data as a parameter
 
             // Check if the URL exceeds 2000 characters, a common practical limit
             if (viewerUrl.length > 2000) {
                 alert("The generated link is too long and might not be supported by some browsers. Please reduce the number of segments.");
             } else {
-                this.sharableLink = viewerUrl;
-                window.focus(); // Attempt to focus the window before accessing the clipboard
-                this.copyToClipboard(viewerUrl);
+                shortenURL(viewerUrl).then(shortUrl => {
+                    this.sharableLink = shortUrl;
+                    this.copyToClipboard(shortUrl);
+                });
             }
         },
         copyToClipboard(text) {
diff --git a/src/views/ViewerInterface.vue b/src/views/ViewerInterface.vue
index 6149061..7ba713e 100644
--- a/src/views/ViewerInterface.vue
+++ b/src/views/ViewerInterface.vue
@@ -1,13 +1,14 @@
 <template>
     <div class="viewer-interface">
         <header>
-            <h1>Video Segment Viewer</h1>
+            <Momentum v-if="customHeader === 'mma'" />
+            <h1 v-else>Video Segment Viewer</h1>
         </header>
         <div class="content-area">
             <main>
                 <YouTubePlayer class="youtube-player" ref="youtubePlayer" :videoId="selectedSegment.videoId"
                     :startTime="selectedSegment.startTime" :pauseTime="selectedSegment.endTime"
-                    @over-pause-time="nextSegment" />
+                    @over-pause-time="nextSegment" :enablePause="autoPause" />
             </main>
             <aside>
                 <h2>Segments</h2>
@@ -16,9 +17,9 @@
                 </div>
                 <div>
                     <ul class="segments-list">
-                        <SegmentItem v-for="(segment, index) in filteredSegments" :key="index" :segment="segment" :index="index"
-                            :class="{ 'selected-segment': segment === selectedSegment }" @click="selectSegment(segment)"
-                            :is-read-only="true" />
+                        <SegmentItem v-for="(segment, index) in filteredSegments" :key="index" :segment="segment"
+                            :index="index" :class="{ 'selected-segment': segment === selectedSegment }"
+                            @click="selectSegment(segment)" :is-read-only="true" />
                     </ul>
                 </div>
             </aside>
@@ -29,6 +30,7 @@
 <script>
 import YouTubePlayer from '@/components/YouTubePlayer.vue';
 import SegmentItem from '@/components/SegmentItem.vue';
+import Momentum from '@/components/headers/MomentumMovementAcademy.vue';
 import { segmentMixin } from '@/mixins/segmentMixin.js';
 
 export default {
@@ -36,13 +38,21 @@ export default {
     components: {
         YouTubePlayer,
         SegmentItem,
+        Momentum,
     },
     name: 'ViewerInterface',
+    props: {
+        customHeader: {
+            type: String,
+            default: '' // Fournit une valeur par défaut si 'type' n'est pas passé
+        }
+    },
     data() {
         return {
             segments: [],
             selectedSegment: {},
             filterText: '',
+            autoPause: false,
         };
     },
     computed: {
@@ -74,6 +84,11 @@ export default {
         },
         selectSegment(segment) {
             this.selectedSegment = segment;
+            const segmentList = this.filteredSegments;
+            const isLast = segmentList && segmentList.length &&
+                segment === segmentList[segmentList.length - 1]
+            this.autoPause = !!isLast;
+            // console.log("autoPause", this.autoPause, isLast, segmentList, segmentList.length);
         },
     },
     mounted() {